From 3ffb059bbfb205f229efade73be11dd90610f2fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thierry=20K=C3=BChni?= <thierry.kuehni@hotmail.com>
Date: Wed, 31 Jul 2024 12:27:42 +0200
Subject: [PATCH] Make stage x and y props bindable. Fix stage bindable tests

---
 src/lib/Stage.svelte                          | 18 ++++---
 src/tests/stage.test.ts                       |  6 +--
 .../wrappers/ConfigBindingStage.test.svelte   | 48 +++++++++++++++++++
 3 files changed, 59 insertions(+), 13 deletions(-)
 create mode 100644 src/tests/wrappers/ConfigBindingStage.test.svelte

diff --git a/src/lib/Stage.svelte b/src/lib/Stage.svelte
index c261518..7b3cdf6 100644
--- a/src/lib/Stage.svelte
+++ b/src/lib/Stage.svelte
@@ -59,16 +59,16 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 		ontransformend,
 		ontransformstart,
 		onwheel,
-		y,
-		x,
-		width,
-		visible,
-		skewY,
-		skewX,
-		scaleY,
-		scaleX,
+		x = $bindable(),
+		y = $bindable(),
 		scale,
+		scaleX,
+		scaleY,
 		rotation,
+		skewX,
+		skewY,
+		width,
+		visible,
 		preventDefault,
 		opacity,
 		offsetY,
@@ -104,7 +104,6 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 	let isReady = $state(false);
 
 	onMount(() => {
-		console.log(x, y);
 		_handle = new Konva.Stage({
 			container: stage,
 			y,
@@ -156,7 +155,6 @@ Further information: [Konva API docs](https://konvajs.org/api/Konva.Stage.html),
 		});
 		$effect(() => {
 			_handle!.setAttr('width', width);
-			console.log('stage change width', width);
 		});
 		$effect(() => {
 			_handle!.setAttr('visible', visible);
diff --git a/src/tests/stage.test.ts b/src/tests/stage.test.ts
index 794e58e..8ce3894 100644
--- a/src/tests/stage.test.ts
+++ b/src/tests/stage.test.ts
@@ -12,7 +12,7 @@ import './mocks/mouse';
 import type { MockStage } from './mocks/mouse';
 
 // Test Component Wrappers
-import ConfigBinding from './wrappers/ConfigBinding.test.svelte';
+import ConfigBindingStage from './wrappers/ConfigBindingStage.test.svelte';
 import ContainerContext from './wrappers/ContainerContext.test.svelte';
 
 test('creates a div container and forwards rest props to div', () => {
@@ -96,7 +96,7 @@ test('Correctly updates bound config on dragend', () => {
 	const yWritable = writable(CONFIG.y);
 	let handle: MockStage | null = null;
 
-	render(ConfigBinding, {
+	render(ConfigBindingStage, {
 		props: {
 			component: Stage,
 			...CONFIG,
@@ -121,7 +121,7 @@ test('Does not update config if instantiated with staticConfig prop', async () =
 	const yWritable = writable(CONFIG.y);
 	let handle: MockStage | null = null;
 
-	render(ConfigBinding, {
+	render(ConfigBindingStage, {
 		props: {
 			component: Stage,
 			...CONFIG,
diff --git a/src/tests/wrappers/ConfigBindingStage.test.svelte b/src/tests/wrappers/ConfigBindingStage.test.svelte
new file mode 100644
index 0000000..446eff1
--- /dev/null
+++ b/src/tests/wrappers/ConfigBindingStage.test.svelte
@@ -0,0 +1,48 @@
+<!--
+@component
+Wraps the to be tested svelte-konva component so that the binding of the config prop can be tested
+
+Special component for svelte-konva stage component, as it does only support binding on `x` and `y` props.
+-->
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import type { Writable } from 'svelte/store';
+
+	let {
+		component,
+		getHandle,
+		staticConfig = false,
+		x,
+		y,
+		scale,
+		scaleX,
+		scaleY,
+		rotation,
+		skewX,
+		skewY,
+		...restProps
+	}: {
+		component: any;
+		x: Writable<any>;
+		y: Writable<any>;
+		getHandle: (handle: any) => void;
+		staticConfig?: boolean;
+		[key: string]: any;
+	} = $props();
+
+	let boundComponent: any;
+
+	onMount(() => {
+		// Once we have the inner component handle of the svelte-konva component we pass it to the callback to get access to it in the test function
+		getHandle(boundComponent.handle);
+	});
+</script>
+
+<svelte:component
+	this={component}
+	bind:this={boundComponent}
+	bind:x={$x}
+	bind:y={$y}
+	{staticConfig}
+	{...restProps}
+></svelte:component>