Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Min/max width/height auto layout constraints don't seem to work #1545

Closed
iamralpht opened this issue Aug 21, 2024 · 2 comments · Fixed by #1679
Closed

Min/max width/height auto layout constraints don't seem to work #1545

iamralpht opened this issue Aug 21, 2024 · 2 comments · Fixed by #1679
Assignees
@yiqunw700
Labels
🟢 P2 Priority for next 2-3 releases
Milestone
0.33

Comments

@iamralpht
Copy link
Collaborator

I noticed that setting min/max constraints on an auto layout node seems to be ignored. It would be good to support this fully; I think that Taffy supports min/max, so we should be able to hook this up.
@iamralpht iamralpht added this to the 0.31 milestone Aug 27, 2024
@yiqunw700 yiqunw700 added the 🟢 P2 Priority for next 2-3 releases label Aug 27, 2024
@iamralpht
Copy link
Collaborator Author

Lower priority than #1556 for sure

@rylin8 rylin8 moved this to New in DesignCompose Aug 27, 2024
@yiqunw700 yiqunw700 moved this from New to In Progress in DesignCompose Sep 23, 2024
@yiqunw700
Copy link
Contributor

yiqunw700 commented Sep 28, 2024 •
edited
Loading

Having issue with measuring with node https://www.figma.com/design/ArHVZAQIsKf2B9mATnVvLX/AutoLayout?node-id=1-8&node-type=frame&t=xrMeVa2Wr6yzULtn-0 where the outer frame has max size set and the inner frame has min size set.
Also notice that the flex direction has an impact on the result:
Vertical layout ->height is measured only with paddings added up, while width is measured correctly
Horizontal layout -> width is measured only with paddings added up, while height is measured correctly

This only happens when the outer container is placed inside a non-auto layout container or an auto-layout container with a different flex direction. Works if it is placed inside an auto-layout container with the same flex direction with the outer frame.

This is similar to what have been reported to taffy: DioxusLabs/taffy#591

The dump of the html code:

<html>
<style>
    div {
            box-sizing: border-box;
            border: 1px solid red;
    }
    body {
            margin: 20px;
    }
</style>
<div style="display: flex; overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; width: 1200px; height: 800px; min-width: 1200px; min-height: 800px; max-width: 1200px; max-height: 800px; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding-top: 0px; padding-left: 0px; padding-bottom: 0px; padding-right: 0px; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 0px 0px; flex-direction: row; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
 <div style="display: flex; overflow-x: hidden; overflow-y: hidden; position: absolute; top: 0%; left: 0%; bottom: auto; right: auto; width: auto; height: auto; min-width: auto; min-height: auto; max-width: 100px; max-height: 100px; margin-top: 387px; margin-left: 500px; margin-bottom: 0px; margin-right: 0px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; align-items: center; align-content: flex-start; justify-content: center; gap: 10px 10px; flex-direction: column; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
  <div style="display: flex; overflow-x: hidden; overflow-y: hidden; position: relative; top: 0px; left: 0px; bottom: 0px; right: 0px; width: auto; height: auto; min-width: 50px; min-height: 50px; max-width: auto; max-height: auto; margin-top: 0px; margin-left: 0px; margin-bottom: 0px; margin-right: 0px; padding-top: 10px; padding-left: 10px; padding-bottom: 10px; padding-right: 10px; align-items: center; align-content: flex-start; justify-content: center; gap: 10px 10px; flex-direction: column; flex-wrap: nowrap; flex-basis: auto; flex-grow: 0; flex-shrink: 0">
  </div>
 </div>
</div>
</body>
</html>

With the output taffy tree:

TREE
└──  FLEX ROW [x: 0    y: 0    width: 1200 height: 800 ] (NodeId(4294967297))
    └──  FLEX COL [x: 500  y: 387  width: 70   height: 40  ] (NodeId(4294967298))
        └──  LEAF [x: 10   y: -5   width: 50   height: 50  ] (NodeId(4294967299))

Node #root 0:
  Layout { order: 0, location: Point { x: 0.0, y: 0.0 }, size: Size { width: 1200.0, height: 800.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 } }
  Node Frame 6 1:
    Layout { order: 0, location: Point { x: 500.0, y: 387.0 }, size: Size { width: 70.0, height: 40.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 10.0, right: 10.0, top: 10.0, bottom: 10.0 } }
    Node Frame 7 2:
      Layout { order: 0, location: Point { x: 10.0, y: -5.0 }, size: Size { width: 50.0, height: 50.0 }, scrollbar_size: Size { width: 0.0, height: 0.0 }, border: Rect { left: 0.0, right: 0.0, top: 0.0, bottom: 0.0 }, padding: Rect { left: 10.0, right: 10.0, top: 10.0, bottom: 10.0 } }

@yiqunw700 yiqunw700 mentioned this issue Oct 1, 2024
Merged
@timothyfroehlich timothyfroehlich modified the milestones: 0.31, 0.32 Oct 1, 2024
@yiqunw700 yiqunw700 modified the milestones: 0.32, 0.33 Nov 13, 2024
github-merge-queue bot pushed a commit that referenced this issue Nov 14, 2024
@yiqunw700
Read min/max from figma (#1679)
1570046 
It used to be ignored.

Fixes: #1545
@github-project-automation github-project-automation bot moved this from In Progress to Done in DesignCompose Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yiqunw700 yiqunw700

Labels
🟢 P2 Priority for next 2-3 releases
Projects
DesignCompose
Status: Done
Milestone
0.33
Development

Successfully merging a pull request may close this issue.

Read min/max from figma google/automotive-design-compose
3 participants
@iamralpht @timothyfroehlich @yiqunw700