Unexpected Negative Coordinates in Layout Calculation (Absolute Position)

[bennoinbeta]

Hello everyone,

I'm encountering an issue with layout calculations where an element is positioned with unexpected negative coordinates, specifically -25. I expected the element (7v1) to be positioned at x: 25 and y: 25 within its parent (5v1). Because the parents size is 100 and the childs inset is 75 on the bottom right. Thus I expect the position to be x: 25 and y: 25 for an absolute position or am I missing something? Thanks :)

Input

• 3v1: position: Absolute, inset: Rect { left: Length(0.0), right: Auto, top: Length(0.0), bottom: Auto }, size: Size { width: Length(500.0), height: Length(500.0) }
• 5v1: position: Absolute, inset: Rect { left: Length(200.0), right: Auto, top: Length(200.0), bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }
• 7v1: position: Absolute, inset: Rect { left: Auto, right: Length(74.99994), top: Auto, bottom: Length(74.99999) }, size: Size { width: Length(50.0), height: Length(50.0) }

Result

INFO: TREE
index.js:428 INFO: └──  FLEX ROW [x: 0    y: 0    w: 500  h: 500  content_w: 300  content_h: 300  border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299) / "3v1")
index.js:428 INFO:     └──  FLEX ROW [x: 200  y: 200  w: 100  h: 100  content_w: 25   content_h: 25   border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967297) / "5v1")
index.js:428 INFO:         └──  LEAF [x: -25  y: -25  w: 50   h: 50   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298) / "7v1")

Logged via print_branch: https://github.com/dyndotart/monorepo/blob/75-auto-layout/crates/comp_core/src/resources/layout/debug.rs

Context

Raw Logs

INFO: [AbsoluteLayoutElement::to_style] 5v1: Transform { translation: Vec3(200.0, 200.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }, Size { width: 100.0pt, height: 100.0pt } | Parent: Some(Size { width: 500.0pt, height: 500.0pt })
index.js:428 INFO: [AbsoluteLayoutElement::to_style] Style: Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Absolute, inset: Rect { left: Length(200.0), right: Auto, top: Length(200.0), bottom: Auto }, size: Size { width: Length(100.0), height: Length(100.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967297))
index.js:428 INFO: [AbsoluteLayoutElement::to_style] 7v1: Transform { translation: Vec3(25.000057, 25.000008, 0.0), rotation: Quat(0.0, 0.0, 2.1684043e-19, 1.0), scale: Vec3(1.0, 1.0, 1.0) }, Size { width: 50.0pt, height: 50.0pt } | Parent: Some(Size { width: 100.0pt, height: 100.0pt })
index.js:428 INFO: [AbsoluteLayoutElement::to_style] Style: Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Absolute, inset: Rect { left: Auto, right: Length(74.99994), top: Auto, bottom: Length(74.99999) }, size: Size { width: Length(50.0), height: Length(50.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967298))
index.js:428 INFO: [update_children] NodeId(4294967297): [NodeId(4294967298)]
index.js:428 INFO: [AbsoluteLayoutElement::to_style] 3v1: Transform { translation: Vec3(0.0, 0.0, 0.0), rotation: Quat(0.0, 0.0, 0.0, 1.0), scale: Vec3(1.0, 1.0, 1.0) }, Size { width: 500.0pt, height: 500.0pt } | Parent: None
index.js:428 INFO: [AbsoluteLayoutElement::to_style] Style: Style { display: Flex, overflow: Point { x: Visible, y: Visible }, scrollbar_width: 0.0, position: Absolute, inset: Rect { left: Length(0.0), right: Auto, top: Length(0.0), bottom: Auto }, size: Size { width: Length(500.0), height: Length(500.0) }, min_size: Size { width: Auto, height: Auto }, max_size: Size { width: Auto, height: Auto }, aspect_ratio: None, margin: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, padding: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, border: Rect { left: Length(0.0), right: Length(0.0), top: Length(0.0), bottom: Length(0.0) }, align_items: None, align_self: None, justify_items: None, justify_self: None, align_content: None, justify_content: None, gap: Size { width: Length(0.0), height: Length(0.0) }, flex_direction: Row, flex_wrap: NoWrap, flex_basis: Auto, flex_grow: 0.0, flex_shrink: 1.0, grid_template_rows: [], grid_template_columns: [], grid_auto_rows: [], grid_auto_columns: [], grid_auto_flow: Row, grid_row: Line { start: Auto, end: Auto }, grid_column: Line { start: Auto, end: Auto } }
index.js:428 INFO: [new_leaf] Ok(NodeId(4294967299))
index.js:428 INFO: [update_children] NodeId(4294967299): [NodeId(4294967297)]
index.js:428 INFO: [update_layout] [3v1]
index.js:428 INFO: TREE
index.js:428 INFO: └──  FLEX ROW [x: 0    y: 0    w: 500  h: 500  content_w: 300  content_h: 300  border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967299) / "3v1")
index.js:428 INFO:     └──  FLEX ROW [x: 200  y: 200  w: 100  h: 100  content_w: 25   content_h: 25   border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967297) / "5v1")
index.js:428 INFO:         └──  LEAF [x: -25  y: -25  w: 50   h: 50   content_w: 0    content_h: 0    border: l:0 r:0 t:0 b:0, padding: l:0 r:0 t:0 b:0] (NodeId(4294967298) / "7v1")

Expected

<div class="absolute bg-yellow-300" style="width: 500px; height: 500px;">
  <div class="absolute bg-red-500" style="width: 100px; height: 100px; top: 200px; left: 200px;">
    <div class="absolute bg-gray-200" style="width: 50px; height: 50px; bottom: 75px; right: 75px;"></div>
  </div>
</div>

[bennoinbeta]

Sry my mistake 😅 I expected the pivot point to still be the top left corner but thats ofc not the case if the inset is set on bottom and right.