From 6a9b95309c59d82d8b7cecf397dc6fd8c2d89fc8 Mon Sep 17 00:00:00 2001
From: Stephan Egli <stephan.egli93@gmail.com>
Date: Fri, 17 Jan 2025 17:43:39 +0100
Subject: [PATCH] Getting rid of all warning messages in Svelte 5 part

---
 src/components/Canvas.svelte          | 87 ++++++++++++++++-----------
 src/components/shapes/Circle.svelte   | 17 +++++-
 src/components/shapes/Triangle.svelte | 21 +++++--
 3 files changed, 83 insertions(+), 42 deletions(-)

diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte
index 3d1075c..c0cca46 100644
--- a/src/components/Canvas.svelte
+++ b/src/components/Canvas.svelte
@@ -1,17 +1,25 @@
 <script lang="ts">
-  import Circle from './shapes/Circle.svelte';
-  import Triangle from './shapes/Triangle.svelte';
-  import type { Shape } from '../types';
+  import Circle from "./shapes/Circle.svelte";
+  import Triangle from "./shapes/Triangle.svelte";
+  import type { Shape } from "../types";
   import type { DocHandle } from "@automerge/automerge-repo";
-  import type { AppDocument } from '../types';
-  import { updateDocWithNewCircle, updateDocWithNewTriangle, updateDocWithShapeMove } from '../docManager';
-  
+  import type { AppDocument } from "../types";
+  import {
+    updateDocWithNewCircle,
+    updateDocWithNewTriangle,
+    updateDocWithShapeMove,
+  } from "../docManager";
+
   const { handle } = $props<{
     handle: DocHandle<AppDocument>;
   }>();
-  
+
   let shapes = $state<Shape[]>([]);
-  let draggedShape = $state<{ id: string, startX: number, startY: number } | null>(null);
+  let draggedShape = $state<{
+    id: string;
+    startX: number;
+    startY: number;
+  } | null>(null);
 
   // Automerge document subscription
   $effect(() => {
@@ -28,28 +36,28 @@
   });
 
   function handleDragStart(e: MouseEvent, shape: Shape) {
-    const svg = document.getElementById('shapesCanvas') as SVGSVGElement;
+    const svg = document.getElementById("shapesCanvas") as SVGSVGElement;
     if (!svg) return;
-    
+
     const point = svg.createSVGPoint();
     point.x = e.clientX;
     point.y = e.clientY;
     const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
-    
+
     draggedShape = { id: String(shape.id), startX: x, startY: y };
   }
 
   function handleDragMove(e: MouseEvent) {
     if (!draggedShape) return;
-    
-    const svg = document.getElementById('shapesCanvas') as SVGSVGElement;
+
+    const svg = document.getElementById("shapesCanvas") as SVGSVGElement;
     if (!svg) return;
-    
+
     const point = svg.createSVGPoint();
     point.x = e.clientX;
     point.y = e.clientY;
     const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
-    
+
     updateDocWithShapeMove(draggedShape.id, x, y);
   }
 
@@ -63,36 +71,43 @@
 </script>
 
 <div class="container">
-  <svg 
+  <svg
     id="shapesCanvas"
     viewBox="0 0 800 600"
-    on:mouseup={() => draggedShape = null}
-    on:mousemove={handleDragMove}
+    role="presentation"
+    onmousemove={(e) => {
+      if (!draggedShape) return;
+
+      const svg = document.getElementById("shapesCanvas") as SVGSVGElement;
+      if (!svg) return;
+
+      const point = svg.createSVGPoint();
+      point.x = e.clientX;
+      point.y = e.clientY;
+      const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
+
+      updateDocWithShapeMove(draggedShape.id, x, y);
+    }}
+    onmouseup={() => draggedShape = null}
   >
     {#each shapes as shape (shape.id)}
-      {#if shape.type === 'circle'}
-        <Circle 
-          id={String(shape.id)}
-          x={shape.x}
-          y={shape.y}
-          radius={shape.radius}
-          color={shape.color}
-          on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
+      {#if shape.type === "circle"}
+        <Circle
+          {...shape}
+          handleDragStart={(e, shape) => handleDragStart(e, shape)}
         />
-      {:else if shape.type === 'triangle'}
-        <Triangle 
-          id={String(shape.id)}
-          coordinates={shape.coordinates.map(c => [c.x, c.y]).flat() as [number, number, number, number, number, number]}
-          color={shape.color}
-          on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
+      {:else if shape.type === "triangle"}
+        <Triangle
+          {...shape}
+          handleDragStart={(e, shape) => handleDragStart(e, shape)}
         />
       {/if}
     {/each}
   </svg>
 
   <div class="controls">
-    <button on:click={addTestCircle}>Add Circle</button>
-    <button on:click={addTestTriangle}>Add Triangle</button>
+    <button onclick={addTestCircle}>Add Circle</button>
+    <button onclick={addTestTriangle}>Add Triangle</button>
   </div>
 </div>
 
@@ -102,7 +117,7 @@
     height: 100vh;
     position: relative;
   }
-  
+
   svg {
     width: 100%;
     height: 100%;
@@ -113,4 +128,4 @@
     top: 10px;
     left: 10px;
   }
-</style> 
\ No newline at end of file
+</style>
diff --git a/src/components/shapes/Circle.svelte b/src/components/shapes/Circle.svelte
index bb56486..623090f 100644
--- a/src/components/shapes/Circle.svelte
+++ b/src/components/shapes/Circle.svelte
@@ -1,11 +1,21 @@
 <script lang="ts">
-  const { id, x, y, radius, color } = $props<{
+  const { id, x, y, radius, color, handleDragStart } = $props<{
     id: string;
     x: number;
     y: number;
     radius: number;
     color: string;
+    handleDragStart: (e: MouseEvent, shape: any) => void;
   }>();
+
+  const shape = {
+    id,
+    type: 'circle',
+    x,
+    y,
+    radius,
+    color
+  };
 </script>
 
 <circle
@@ -14,5 +24,8 @@
   cy={y}
   r={radius}
   fill={color}
-  on:mousedown
+  role="button"
+  tabindex="0"
+  aria-label="Draggable circle"
+  onmousedown={(e) => handleDragStart(e, shape)}
 /> 
\ No newline at end of file
diff --git a/src/components/shapes/Triangle.svelte b/src/components/shapes/Triangle.svelte
index d8bd2b3..8e7078e 100644
--- a/src/components/shapes/Triangle.svelte
+++ b/src/components/shapes/Triangle.svelte
@@ -1,19 +1,32 @@
 <script lang="ts">
-  const { id, coordinates, color } = $props<{
+  const { id, coordinates, color, handleDragStart } = $props<{
     id: string;
     coordinates: [number, number, number, number, number, number];
     color: string;
+    handleDragStart: (e: MouseEvent, shape: any) => void;
   }>();
 
-  let points = $state(coordinates.join(' '));
+  let points = $state('');
   $effect(() => {
-    points = coordinates.join(' ');
+    points = coordinates
+            .map(p => `${p.x},${p.y}`)
+            .join(" ");
   });
+
+  const shape = {
+    id,
+    type: 'triangle',
+    coordinates,
+    color
+  };
 </script>
 
 <polygon
   {id}
   {points}
   fill={color}
-  on:mousedown
+  role="button"
+  tabindex="0"
+  aria-label="Draggable triangle"
+  onmousedown={(e) => handleDragStart(e, shape)}
 /> 
\ No newline at end of file