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.

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

Feature: Konva node ordering based on the svelte component order #64

Closed
wants to merge 1 commit into from

Conversation

TeyKey1
Copy link
Member

@TeyKey1 TeyKey1 commented Apr 23, 2023

Currently, svelte-konva does not automatically adjust the order of Konva nodes based on the svelte component order. This is done in vue-konva and react-konva. As expected, such a functionality needs quite a different approach in Svelte, as we do not have a virtual DOM to use as a reference for the current ordering of components. In fact, implementing such a functionality in Svelte seems to be quite complicated to get right...

The current implementation does take advantage of the Svelte beforeUpdate lifecylce-hook which fires each time a component is updated in some way. Each container (Currently Stage and Layer, later also Group) exposes a òrderManager via its Context which can then be used by its child components.
The orderManager takes care of reordering the konva nodes to match the current ordering of the svelte-konva components. Each svelte-konva component pushes a notification to the orderManager once its beforeUpdate hook is triggered. The notifications are stored in an array in the orderManager. Once the changes have been synced to the DOM it compares the order of the components received as notification with their current konva zIndex value. The nodes are ordered correctly if the order of the zIndexes matches the order in the notification array (as svelte calls the lifecycle functions in the current component order).

This works for simple use-cases like ordering inside each-blocks but seems to currently break for more complex applications (combined each-blocks with single components at the same nesting level) where the order of the beforeUpdate calls appears to not match the component order.

This is a first test. I'm not sure if this is the right way to go or if there is a more elegant solution, gonna need some more tinkering...

fixes #63

@TeyKey1
Copy link
Member Author

TeyKey1 commented May 13, 2023

See #63 (comment)

@TeyKey1 TeyKey1 closed this May 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Changing order of nodes
1 participant