mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 23:17:45 +00:00
LibWeb: Make CSS Transformation struct a proper class
Move it out of ComputedValues.h into its own files, and take the transformation-to-matrix code from StackingContext.
This commit is contained in:
parent
3c49d0dad3
commit
642ad80960
8 changed files with 193 additions and 152 deletions
|
@ -270,150 +270,12 @@ void StackingContext::paint_internal(PaintContext& context) const
|
|||
paint_descendants(context, paintable_box(), StackingContextPaintPhase::FocusAndOverlay);
|
||||
}
|
||||
|
||||
Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformation const& transformation) const
|
||||
{
|
||||
auto count = transformation.values.size();
|
||||
auto value = [this, transformation](size_t index, CSS::Length const& reference_length = CSS::Length::make_px(0)) -> float {
|
||||
return transformation.values[index].visit(
|
||||
[this, reference_length](CSS::LengthPercentage const& value) -> double {
|
||||
return value.resolved(paintable_box().layout_node(), reference_length).to_px(paintable_box().layout_box()).to_float();
|
||||
},
|
||||
[this](CSS::AngleOrCalculated const& value) {
|
||||
return value.resolved(paintable_box().layout_node()).to_degrees() * M_DEG2RAD;
|
||||
},
|
||||
[](double value) {
|
||||
return value;
|
||||
});
|
||||
};
|
||||
|
||||
auto reference_box = paintable_box().absolute_rect();
|
||||
auto width = CSS::Length::make_px(reference_box.width());
|
||||
auto height = CSS::Length::make_px(reference_box.height());
|
||||
|
||||
switch (transformation.function) {
|
||||
case CSS::TransformFunction::Matrix:
|
||||
if (count == 6)
|
||||
return Gfx::FloatMatrix4x4(value(0), value(2), 0, value(4),
|
||||
value(1), value(3), 0, value(5),
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::Matrix3d:
|
||||
if (count == 16)
|
||||
return Gfx::FloatMatrix4x4(value(0), value(4), value(8), value(12),
|
||||
value(1), value(5), value(9), value(13),
|
||||
value(2), value(6), value(10), value(14),
|
||||
value(3), value(7), value(11), value(15));
|
||||
break;
|
||||
case CSS::TransformFunction::Translate:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
if (count == 2)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
|
||||
0, 1, 0, value(1, height),
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::Translate3d:
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
|
||||
0, 1, 0, value(1, height),
|
||||
0, 0, 1, value(2),
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::TranslateX:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, value(0, width),
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::TranslateY:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
|
||||
0, 1, 0, value(0, height),
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::Scale:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
|
||||
0, value(0), 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
if (count == 2)
|
||||
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
|
||||
0, value(1), 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::ScaleX:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(value(0), 0, 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::ScaleY:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
|
||||
0, value(0), 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::RotateX:
|
||||
if (count == 1)
|
||||
return Gfx::rotation_matrix({ 1.0f, 0.0f, 0.0f }, value(0));
|
||||
break;
|
||||
case CSS::TransformFunction::RotateY:
|
||||
if (count == 1)
|
||||
return Gfx::rotation_matrix({ 0.0f, 1.0f, 0.0f }, value(0));
|
||||
break;
|
||||
case CSS::TransformFunction::Rotate:
|
||||
case CSS::TransformFunction::RotateZ:
|
||||
if (count == 1)
|
||||
return Gfx::rotation_matrix({ 0.0f, 0.0f, 1.0f }, value(0));
|
||||
break;
|
||||
case CSS::TransformFunction::Skew:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
if (count == 2)
|
||||
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
|
||||
tanf(value(1)), 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::SkewX:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, tanf(value(0)), 0, 0,
|
||||
0, 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
case CSS::TransformFunction::SkewY:
|
||||
if (count == 1)
|
||||
return Gfx::FloatMatrix4x4(1, 0, 0, 0,
|
||||
tanf(value(0)), 1, 0, 0,
|
||||
0, 0, 1, 0,
|
||||
0, 0, 0, 1);
|
||||
break;
|
||||
default:
|
||||
dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Unhandled transformation function {}", CSS::TransformationStyleValue::create(transformation.function, {})->to_string());
|
||||
}
|
||||
return Gfx::FloatMatrix4x4::identity();
|
||||
}
|
||||
|
||||
Gfx::FloatMatrix4x4 StackingContext::combine_transformations(Vector<CSS::Transformation> const& transformations) const
|
||||
{
|
||||
auto matrix = Gfx::FloatMatrix4x4::identity();
|
||||
|
||||
for (auto const& transform : transformations)
|
||||
matrix = matrix * get_transformation_matrix(transform);
|
||||
matrix = matrix * transform.to_matrix(paintable_box());
|
||||
|
||||
return matrix;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue