Feature: Konva node ordering based on the svelte component order #64
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 itsbeforeUpdate
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