Flexible layout and code problem

1

Hi. I hope someone can help. My usual method of grouping all the elements at the end of a project and pinning, sizing, shrinking to fit and zooming contents of the group so it adjusts to a small screen on Wordpress works fine. However in my current project, which runs code based on getBoundingClientRect() stops working. I have spent a long time trying to fix this but apart from starting again and trying to rewrite the code using relative position of the elements compared to the parent group element I am stumped. For reference, scene 1 is the code working before applying flexible layout, scene 2 shows the code not working after applying flexible layout. Any help would be greatly received. PS. I can't remember how to upload my hype file to this forum!

2

Just zip it an drag it to your text window…

1 Like
3

I completely don't remember having to zip the file! Any help with this would be great.
boundariesv6.zip (39.3 KB)

4

I think what is happening is that due to the usage of flexible layout, the boundary positions of the boxes have not moved to their final location at the time of the On Scene Load event.

Regardless, as flexible layout can change the document at any time, it would seem to be a good idea to call getBoundaryPositions() right before a drag (or checkPosition) to make sure that they are currently correct.

1 Like
5

Thank you Jonathan. Such a quick fix! I would NEVER have thought of that.

1 Like
6

Glad that worked!

The hype runtime does rearrangement a couple times during scene load so perhaps it was clear to me due to this "insider" knowledge :slight_smile:. Regardless the way I figured this out was by doing console.log() for the positions to see what they were as a "test your assumptions" debugging session, and it was pretty clear they weren't their final locations when there was flexible layout.

I generally like your technique and code methods here - getBoundingClientRect() is a nice way to avoid all kinds of issues with grouping for comparison.

1 Like
7

There is also the passive listener approach of running a MutationObserver or it’s decedent the ResizeObserver.

2 Likes