Changing order of nodes

[lavrton]

I made this demo: https://codesandbox.io/s/festive-germain-1js7yj?file=/App.svelte

In the demo, I am rendering stars from an array. Also I am changing order of stars, to display dragged start on top:

let handleDragStart = e => {
	// save drag element:
	dragItemId = e.detail.target.id();
	// move current element to the top:
	const item = list.find(i => i.id === dragItemId);
	const index = list.indexOf(item);
	list.splice(index, 1);
	list.push(item);
};

But I don't see that on canvas. Does the library support that? Or I am doing something wrong?

[langscot]

Your code sandbox link is corrupted, it says "something went wrong". Can you share another one?

[lavrton]

Updated. Same link https://codesandbox.io/s/festive-germain-1js7yj?file=/App.svelte

[TeyKey1]

Ordering within each is kind of a pain point in svelte-konva currently as it can be done in many ways but not all possibilities lead to the desired results. I currently opted to let the user do the layering using the Konva-native layering functionality without recalculating layering on changes manually within each blocks (like vue-konva does for example).

So the problem you face would be solved with the following code:

let handleDragStart = e => {
	// save drag element:
	dragItemId = e.detail.target.id();

	// move current element to the top:
	const item = list.find(i => i.id === dragItemId);

	item.handle.moveToTop(); // Use Konva native way of layering
};

And in the template section add bind:handle={item.handle} to the Star component to get access to the Konva node.

I'm not sure how straightforward it would be in svelte to add a similar functionality akin to vue-konva to order the components within an each block automatically. It would certainly make it more straightforward for end-users to grasp svelte-konva if they come from vue-konva for example. Certainly something I'll look into.

[lavrton]

I think it must follow the order that I have in the template. It is predicable and allows writing in app in a "svelte" and declarative way. If possible, a user should use as less Konva API directly as possible.

[TeyKey1]

After some more tinkering, this is not possible to achieve in a sound way in Svelte right now. I have created an issue in Svelte about this (https://github.com/sveltejs/svelte/issues/8547) so we might get the required functionality to make this work in the future. For now, we have to rely on the Konva-native way of ordering for such use cases. I'll keep this issue open to track any progress on Svelte side which might make such a functionality possible. I've also written an extensive doc page in the old svelte-konva docs about this, and will port the important bits to the Konva page to avoid too much confusion about this.