From 5c8c1f138a5991e47b318a0ef7ab33b22ada38be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thierry=20K=C3=BChni?= <thierry.kuehni@hotmail.com>
Date: Sun, 26 May 2024 14:47:07 +0200
Subject: [PATCH] Fix transform example, update +Layout.svelte to runes and
 svelte v5

---
 src/routes/+layout.svelte                     |  6 +++--
 .../examples/transform/Transform.svelte       | 23 ++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ae3517b..1203347 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,6 +3,8 @@
 	import Link from './Link.svelte';
 	import { darkMode } from './stores';
 
+	const { children } = $props();
+
 	let examples = [
 		{
 			name: 'Label',
@@ -63,7 +65,7 @@
 							/>
 						</svg>
 					</a>
-					<button class="btn btn-square btn-ghost" on:click={() => darkMode.set(!$darkMode)}>
+					<button class="btn btn-square btn-ghost" onclick={() => darkMode.set(!$darkMode)}>
 						{#if darkMode}
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
@@ -100,7 +102,7 @@
 			</div>
 			<div class="prose lg:prose-xl mt-10 mb-10 max-w-6xl w-full p-6" style="font-size: 1rem;">
 				<!-- Page content here -->
-				<slot />
+				{@render children()}
 			</div>
 		</div>
 		<div class="drawer-side shadow">
diff --git a/src/routes/examples/transform/Transform.svelte b/src/routes/examples/transform/Transform.svelte
index bea1c38..6aa3232 100644
--- a/src/routes/examples/transform/Transform.svelte
+++ b/src/routes/examples/transform/Transform.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import Konva from 'konva';
-	import type { KonvaMouseEvent, KonvaPointerEvent } from 'svelte-konva';
-	import Stage from '../../ResponsiveStage.svelte';
+	import type { KonvaMouseEvent, KonvaPointerEvent, Stage } from 'svelte-konva';
+	import ResponsiveStage from '../../ResponsiveStage.svelte';
 	import { getRealPointerPos } from '../../util';
 
 	// svelte-konva components
@@ -59,7 +59,10 @@
 	let selectionActive = false; // If the transformer is active eg. something is selected
 
 	function selectStart(e: KonvaPointerEvent) {
-		if (!transformer || !stage?.handle()) return;
+		if (!transformer || !stage) return;
+
+		const handle = stage.handle();
+		if (!handle) return;
 
 		// Check if event target is stage (eg. user clicked on empty part of the stage and not any shape)
 		if (e.target.getType() !== 'Stage') {
@@ -73,7 +76,7 @@
 			return;
 		}
 
-		const pointerPos = getRealPointerPos(stage.handle().getPointerPosition()!, stage.handle());
+		const pointerPos = getRealPointerPos(handle.getPointerPosition()!, handle);
 
 		selectionRectangleConfig.x = pointerPos.x;
 		selectionRectangleConfig.y = pointerPos.y;
@@ -85,13 +88,17 @@
 	}
 
 	function selectDrag() {
-		if (!stage?.handle()) return;
+		if (!stage) return;
+
+		const handle = stage.handle();
+		if (!handle) return;
+
 		if (!selectionRectangleConfig.visible) {
 			// Currently no selection is active (eg. user is just moving the cursor around)
 			return;
 		}
 
-		const pointerPos = getRealPointerPos(stage?.handle().getPointerPosition()!, stage?.handle());
+		const pointerPos = getRealPointerPos(handle.getPointerPosition()!, handle);
 
 		// Set new x coordinate and width of selection rectangle
 		selectionRectangleConfig.x = Math.min(pointerPos.x, initialSelectionCoordinates.x);
@@ -143,7 +150,7 @@
 	}
 </script>
 
-<Stage
+<ResponsiveStage
 	onpointerdown={selectStart}
 	onpointermove={selectDrag}
 	onpointerup={selectEnd}
@@ -168,4 +175,4 @@
 		<!-- The selection rectangle -->
 		<Rect config={selectionRectangleConfig} bind:this={selectionRectangle} />
 	</Layer>
-</Stage>
+</ResponsiveStage>