feat: position prop features two way data binding

open-source-labs · Jun 23, 2023 · 6b2c8b7 · 6b2c8b7
1 parent 862ab66
commit 6b2c8b7
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/docs/components/node.mdx b/docs/components/node.mdx
@@ -56,7 +56,8 @@ detail.node.set.bgColor('red');
 ## Props
 
 <ResponseField name="position" type="{x: number, y: number}" default="{x: 0, y: 0}">
-	Initial position of the node. Coordinate is relative to the top/left point of the canvas.
+	The position of the Node. These correspond to pixel values at the default graph scale. This prop
+	newly features two way data binding. Please report any issues on GitHub.
 </ResponseField>
 <ResponseField
 	name="dimensions"

diff --git a/src/lib/components/Node/Node.svelte b/src/lib/components/Node/Node.svelte
@@ -17,8 +17,9 @@
 	//const storedNode = JSON.parse(localStorage.getItem('state'))?.nodes?[id]
 	/**
 	 * @default { x: 0, y: 0 }
-	 * @description The initial position of the Node. These correspond to pixel values
-	 * at default graph scale. This value does not currently feature two way binding
+	 * @description The position of the Node. These correspond to pixel values
+	 * at default graph scale. This prop newly features two way data binding. Please report any issues
+	 * on GitHub.
 	 */
 	export let position = { x: 0, y: 0 };
 	export let drop: 'cursor' | 'center' | false = false;
@@ -227,12 +228,28 @@
 		node.zIndex.set(zIndex);
 	}
 
-	// This is a bit of a hack to get around the fact that the position prop is not two way bindable
-	// Future versions will have an implementation
-	// That uses component instance binding to achieve the same result
 	$: nodePosition = node && node?.position;
+
+	let priorPosition = position;
+
 	$: if (node) {
-		position = $nodePosition;
+		const { x: priorX, y: priorY } = priorPosition;
+		const { x: nodeX, y: nodeY } = $nodePosition;
+		const { x: propX, y: propY } = position;
+
+		const areDifferent = propX !== nodeX || propY !== nodeY;
+
+		const propChanged = propX !== priorX || propY !== priorY;
+
+		if (areDifferent) {
+			if (propChanged) {
+				priorPosition = position;
+				node.position.set(position);
+			} else {
+				priorPosition = $nodePosition;
+				position = $nodePosition;
+			}
+		}
 	}
 	$: if (node) {
 		node.inputs.set(inputs);

diff --git a/src/routes/movement/+page.svelte b/src/routes/movement/+page.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Svelvet, Node, Anchor } from '$lib';
+
+	let position = { x: 300, y: 300 };
+	$: console.log(position);
+</script>
+
+<body>
+	<Svelvet minimap title="test">
+		<Node bgColor="red" inputs={4} bind:position>
+			<div class="node-body">
+				<p>{JSON.stringify(position)}</p>
+				<button
+					on:click={() => {
+						position = { x: 100, y: 100 };
+					}}>Move</button
+				>
+			</div>
+		</Node>
+	</Svelvet>
+</body>
+
+<style>
+	.node-body {
+		width: 200px;
+		height: 300px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+	body {
+		width: 100vw;
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+	}
+</style>