Option to disable moveable programmatically

[chbert]

Hi @vnphanquang, great work on svelte-put!

I'm trying to find a way to disable "moveable" in certain instances programmatically.

I have a moveable canvas and moveable nodes on them. I tried to use the ignore parameter (as described here), but since I load the nodes within another component, it does not seem to work in this case. So, when I move a node, the underlying canvas also moves. So I'm listening to nodes moving and, during this time, would need to disable the grid moveable.

Maybe there is a workaround for this without a disable option?

Thanks!

This is the HTML of the canvas component (the nodes are inside the Graph component and have the class "node"):

<div
	class="canvas"
	class:disabled
	bind:this={canvasElement}
	use:movable={{
		limit: { delta: { x: `${$size.width * 2}px`, y: `${$size.height * 2}px` } },
		ignore: ".node"
	}}
	on:movablestart={onMoveableStart}
	on:movableend={onMoveableEnd}
>
	<Grid {gridElement} />
	<Graph bind:gridElement />
</div>

[vnphanquang]

Hello there @chbert, glad this is being used.

I'm guessing the reason for this is because the .node elements are rendered after .canvas & the init phase of movable, in which the "ignored elements" are searched for.

This is on my part, i should have deferred ignore searching until in movablestart. Will release a patch for this tomorrow April 3rd. Hang tight.

---

FWIW, the workaround is to wait until the children have rendered and init / update movable but that's really bad for user ergonomics and does not completely resolve runtime dynamic DOM update.

[vnphanquang]

@chbert @svelte-put/[email protected] should resolve the issue you've described. Please give it a try at your convenience and let me know. Thanks

[chbert]

@vnphanquang thanks for the prompt reply! I tested it, but still have the same result. I will try to put together a REPL to reproduce it more easily. Make take a moment :-D