search

pmndrs / react-three-flex

💪📦 Flexbox for react-three-fiber
MIT License
1.65k stars 42 forks source link

prevent readding boxes at the end of its parent #59

Closed bbohlender closed 3 years ago

bbohlender commented 3 years ago

registerBox now updates the existing boxesRef entry, instead of removing it and re-adding it. Also, the entry is not removed when the props change but only removed when the node or its parents change.

Fixes #16

bbohlender commented 3 years ago

I maybe was a bit hasty here because the problem is much harder as a component has no way of knowing its index. Also, every asynchronous rearrangement of the children will not notify them in any way, resulting in the same problem.

The current implementation only fixes the problem when a box was already registered and then has changed its properties later on.

I will have to take a deeper look at how this could be achieved.

saitonakamura commented 3 years ago

Maybe we can traverse a tree from yoga?

bbohlender commented 3 years ago

Maybe we can traverse a tree from yoga?

not sure how that would fix the problem with not knowing the index regarding react

However, I found a solution, which requires placing an

<IndexChildren>{children}</IndexChildren>

around the children (e.g. the Boxes) to forward them their index in a context.

The working version can be seen on https://twitter.com/BelaBohlender/status/1429788132145340420

This involves many changes, so I need some time to make it PR ready.

saitonakamura commented 3 years ago

Ah, I think I didn't understood the problem in the first place. One other idea is to traverse the react tree using children/parent fields.

giulioz commented 3 years ago

Is this still a WIP?

bbohlender commented 3 years ago

Is this still a WIP?

So my current solution works as follows: If no index is specified, then boxes are added in timely order, which would be consistent with the current version. Additionally, an index property can be set at any time, which will be enforced as the index the item appears inside its parent (if possible). If two items have the same index, the timely order will still apply. Indices can be changed at any time and will result in removing and reading the respective yoga-nodes at their new position. This can be seen at this post: https://twitter.com/BelaBohlender/status/1430465649629933568

However, my current solution has some more changes, which also incorporate using "react-spring" and adding "aspectRatio" and "measureFunc" as flex props.

Especially adding "react-spring" has introduced potentially breaking changes. I can move all the changes in this PR and discuss them, or I can make them into several PR's which would be more work for me, thus taking more time 😄

bbohlender commented 3 years ago

see #65