Getting rid of all warning messages in Svelte 5 part

src/components/Canvas.svelte

@@ -1,17 +1,25 @@
 <script lang="ts">
-  import Circle from './shapes/Circle.svelte';
+  import Circle from "./shapes/Circle.svelte";
-  import Triangle from './shapes/Triangle.svelte';
+  import Triangle from "./shapes/Triangle.svelte";
-  import type { Shape } from '../types';
+  import type { Shape } from "../types";
   import type { DocHandle } from "@automerge/automerge-repo";
-  import type { AppDocument } from '../types';
+  import type { AppDocument } from "../types";
-  import { updateDocWithNewCircle, updateDocWithNewTriangle, updateDocWithShapeMove } from '../docManager';
+  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,7 +36,7 @@
   });
 
   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();
@@ -42,7 +50,7 @@
   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();
@@ -66,33 +74,40 @@
   <svg
     id="shapesCanvas"
     viewBox="0 0 800 600"
-    on:mouseup={() => draggedShape = null}
+    role="presentation"
-    on:mousemove={handleDragMove}
+    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'}
+      {#if shape.type === "circle"}
         <Circle
-          id={String(shape.id)}
+          {...shape}
-          x={shape.x}
+          handleDragStart={(e, shape) => handleDragStart(e, shape)}
-          y={shape.y}
-          radius={shape.radius}
-          color={shape.color}
-          on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
         />
-      {:else if shape.type === 'triangle'}
+      {:else if shape.type === "triangle"}
         <Triangle
-          id={String(shape.id)}
+          {...shape}
-          coordinates={shape.coordinates.map(c => [c.x, c.y]).flat() as [number, number, number, number, number, number]}
+          handleDragStart={(e, shape) => handleDragStart(e, shape)}
-          color={shape.color}
-          on:mousedown={(e: MouseEvent) => handleDragStart(e, shape)}
         />
       {/if}
     {/each}
   </svg>
 
   <div class="controls">
-    <button on:click={addTestCircle}>Add Circle</button>
+    <button onclick={addTestCircle}>Add Circle</button>
-    <button on:click={addTestTriangle}>Add Triangle</button>
+    <button onclick={addTestTriangle}>Add Triangle</button>
   </div>
 </div>
 

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)}
 /> 

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)}
 />