Best practices for managing positions of newly added nodes

[dusty-phillips]

I'm trying to find the best way to manage the positions of nodes added programmatically. I know I can use the drawer to add nodes with drag and drop (though I haven't actually tried it yet; the documentation for drawer is confusing), but not if I am adding it from outside the component.

Consider a basic interface for adding a new node:

<script lang="ts">
	import { Svelvet, Node } from 'svelvet';

	type NodeData = {
		name: string;
		position: { x: number; y: number };
	};

	let counter = 0;
	let nodes: NodeData[] = [];
</script>

<button
	on:click={() => (nodes = [...nodes, { name: '' + counter++, position: { x: 200, y: 225 } }])}
	>Add</button
>

<main>
	<Svelvet>
		{#each nodes as node (node.name)}
			<Node
				label={node.name}
				bind:position={node.position}
				dimensions={{ width: 100, height: 50 }}
			/>
		{/each}
	</Svelvet>
</main>

<style>
	main {
		width: 500px;
		height: 500px;
	}
</style>

This example places the new item in the centre of the window, one sensible default. But it does so by hardcoding the x and y position based on the size of the node and the width and height of the main element. That breaks as soon as the user zooms or pans the display. Is there a way to get the current coordinates of the center of the Svelvet Graph?

For a more nuanced version of the same question, remove the button and add the node when double clicking on the main element:

<main
	on:dblclick={(event) => {
		nodes = [...nodes, { name: '' + counter++, position: { x: event.x - 50, y: event.y - 25 } }];
	}}
>

Now, with default pan and zoom, if I double click on the graph, a node gets added where I positioned the mouse, but if I have panned or zoomed the window, it will be offset.

I poked through the code a bit and found the following:

• The docstring on Svelvet says that the zoom property is two-way bound, but it's not. It is reactive, so I can set the zoom from outside the component, but it isn't a two way binding: if I change the zoom inside the component (ie with scroll wheel or controls), the zoom in my component is not changed. So I can't calculate a position based on the current zoom level. For pan, the translation docstring says it is not two-way bound, which is true.
• I see that the graph itself is stored in a context named 'graph', and if I had access to that, I might be able to calculate the zoom and pan off of graph.transform. But I don't think it's possible to access the context from outside the Svelvet component (even if it is, it would be a pretty bad practice).