Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Handle element: Make edge constraints behave correctly for relative positioning

And allow positioning elements anywhere within scroll containers.
Michael Ragazzon 1 year ago
parent
5187e16232
commit
7a8aceafcc
5 changed files with 27 additions and 17 deletions
Unified View Show Diff Stats
  1. 17 9
      Source/Core/ElementHandle.cpp
  2. 3 3
      Tests/Data/VisualTests/clip_mask.rml
  3. 2 2
      Tests/Data/VisualTests/filter_blur_area.rml
  4. 2 2
      Tests/Data/VisualTests/filter_blur_orb.rml
  5. 3 1
      Tests/Data/VisualTests/handle_target_anchor.rml

+ 17 - 9
Source/Core/ElementHandle.cpp
View File 

@@ -84,13 +84,11 @@ public:
 
 		data.top_left.x = (!data.bottom_right.x || computed.left().type != Left::Auto);
 
 		data.top_left.x = (!data.bottom_right.x || computed.left().type != Left::Auto);
 
 		data.top_left.y = (!data.bottom_right.y || computed.top().type != Top::Auto);
 
 		data.top_left.y = (!data.bottom_right.y || computed.top().type != Top::Auto);
 
 
 
-		const Vector2f top_left_margin = {box.GetEdge(BoxArea::Margin, BoxEdge::Left), box.GetEdge(BoxArea::Margin, BoxEdge::Top)};
 
-		const Vector2f bottom_right_margin = {box.GetEdge(BoxArea::Margin, BoxEdge::Right), box.GetEdge(BoxArea::Margin, BoxEdge::Bottom)};
 
+		const Vector2f distance_to_top_left = DistanceToTopLeft();
 
+		const Vector2f distance_to_bottom_right = DistanceToBottomRight(distance_to_top_left);
 
 
 
-		drag_delta_min = Math::Max(drag_delta_min,
 
-			Vector2f{resolved_edge_margin[LEFT], resolved_edge_margin[TOP]} - data.original_position_top_left - top_left_margin);
 
-		drag_delta_max = Math::Min(drag_delta_max,
 
-			Vector2f{-resolved_edge_margin[RIGHT], -resolved_edge_margin[BOTTOM]} + data.original_position_bottom_right + bottom_right_margin);
 
+		drag_delta_min = Math::Max(drag_delta_min, Vector2f{resolved_edge_margin[LEFT], resolved_edge_margin[TOP]} - distance_to_top_left);
 
+		drag_delta_max = Math::Min(drag_delta_max, Vector2f{-resolved_edge_margin[RIGHT], -resolved_edge_margin[BOTTOM]} + distance_to_bottom_right);
 
 
 
 		return data;
 
 		return data;
 
 	}
 
 	}
 
@@ -116,12 +114,11 @@ public:
 
 			ResolveValueOr(computed.max_width(), containing_block.x, FLT_MAX),
 
 			ResolveValueOr(computed.max_width(), containing_block.x, FLT_MAX),
 
 			ResolveValueOr(computed.max_height(), containing_block.y, FLT_MAX),
 
 			ResolveValueOr(computed.max_height(), containing_block.y, FLT_MAX),
 
 		};
 
 		};
 
-		const Vector2f bottom_right_margin = {box.GetEdge(BoxArea::Margin, BoxEdge::Right), box.GetEdge(BoxArea::Margin, BoxEdge::Bottom)};
 
+		const Vector2f distance_to_bottom_right = DistanceToBottomRight(DistanceToTopLeft());
 
 
 
 		drag_delta_min = Math::Max(drag_delta_min, min_size - data.original_size);
 
 		drag_delta_min = Math::Max(drag_delta_min, min_size - data.original_size);
 
 		drag_delta_max = Math::Min(drag_delta_max, max_size - data.original_size);
 
 		drag_delta_max = Math::Min(drag_delta_max, max_size - data.original_size);
 
-		drag_delta_max = Math::Min(drag_delta_max,
 
-			Vector2f{-resolved_edge_margin[RIGHT], -resolved_edge_margin[BOTTOM]} + data.original_position_bottom_right + bottom_right_margin);
 
+		drag_delta_max = Math::Min(drag_delta_max, Vector2f{-resolved_edge_margin[RIGHT], -resolved_edge_margin[BOTTOM]} + distance_to_bottom_right);
 
 
 
 		return data;
 
 		return data;
 
 	}
 
 	}
 
@@ -201,6 +198,17 @@ private:
 
 		});
 
 		});
 
 	}
 
 	}
 
 
 
+	Vector2f DistanceToTopLeft() const
 
+	{
 
+		return {target->GetOffsetLeft() - parent_box.GetEdge(BoxArea::Border, BoxEdge::Left),
 
+			target->GetOffsetTop() - parent_box.GetEdge(BoxArea::Border, BoxEdge::Top)};
 
+	}
 
+	Vector2f DistanceToBottomRight(Vector2f distance_to_top_left) const
 
+	{
 
+		const Vector2f scroll_size = {target->GetParentNode()->GetScrollWidth(), target->GetParentNode()->GetScrollHeight()};
 
+		return scroll_size - box.GetSize(BoxArea::Border) - distance_to_top_left;
 
+	}
 
+
 
 	Element* target;
 
 	Element* target;
 
 	const ComputedValues& computed;
 
 	const ComputedValues& computed;
 
 	const Box& box;
 
 	const Box& box;

+ 3 - 3
Tests/Data/VisualTests/clip_mask.rml
View File 

@@ -51,16 +51,16 @@
 
 <body>
 
 <body>
 
 <div class="box clip">
 
 <div class="box clip">
 
 	Duck aloft
 
 	Duck aloft
 
-	<handle move_target="#self" class="A" edge_margin="-80dp">
 
+	<handle move_target="#self" class="A" edge_margin="-70%">
 
 			A
 
 			A
 
 	</handle>
 
 	</handle>
 
 	X
 
 	X
 
 </div>
 
 </div>
 
 <div class="box clip">
 
 <div class="box clip">
 
 	Y
 
 	Y
 
-	<handle move_target="#self" class="B clip" edge_margin="-80dp">
 
+	<handle move_target="#self" class="B clip" edge_margin="-70%">
 
 			C
 
 			C
 
-		<handle move_target="#self" class="C clip" edge_margin="-90%">
 
+		<handle move_target="#self" class="C clip" edge_margin="-70%">
 
 				Some long text
 
 				Some long text
 
 		</handle>
 
 		</handle>
 
 			Z
 
 			Z

+ 2 - 2
Tests/Data/VisualTests/filter_blur_area.rml
View File 

@@ -36,7 +36,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-	<handle class="background" move_target="#self"/>
 
-	<handle class="blur" move_target="#self"/>
 
+	<handle class="background" move_target="#self" edge_margin="-50%"/>
 
+	<handle class="blur" move_target="#self" edge_margin="-50%"/>
 
 </body>
 
 </body>
 
 </rml>
 
 </rml>

+ 2 - 2
Tests/Data/VisualTests/filter_blur_orb.rml
View File 

@@ -38,7 +38,7 @@
 
 </head>
 
 </head>
 
 
 
 <body>
 
 <body>
 
-	<handle class="background" move_target="#self"/>
 
-	<handle class="blur" move_target="#self"/>
 
+	<handle class="background" move_target="#self" edge_margin="-50%"/>
 
+	<handle class="blur" move_target="#self" edge_margin="-50%"/>
 
 </body>
 
 </body>
 
 </rml>
 
 </rml>

+ 3 - 1
Tests/Data/VisualTests/handle_target_anchor.rml
View File 

@@ -2,7 +2,9 @@
 
 <head>
 
 <head>
 
 	<title>Handle anchor positioning</title>
 
 	<title>Handle anchor positioning</title>
 
 	<link type="text/rcss" href="../style.rcss"/>
 
 	<link type="text/rcss" href="../style.rcss"/>
 
-	<meta name="Description" content="Handles should respect the target element's anchoring to its parent, determined by its top/right/bottom/left properties. The anchoring should still hold after moving and resizing the target." />
 
+	<meta name="Description" content="Handles should respect the target element's anchoring to its parent, determined by its top/right/bottom/left properties." />
 
+	<meta name="Assert" content="The anchoring should still hold after moving and resizing the target." />
 
+	<meta name="Assert" content="The handles should constrain the movement and sizing such that the target element is located within the edge margin of its containing block." />
 
 	<style>
 
 	<style>
 
 		handle[move_target] {
 
 		handle[move_target] {
 
 			top: 0;
 
 			top: 0;