Code a little bit more idiomatic Svelte 5 now using bind directive

src/components/Canvas.svelte

@@ -20,9 +20,10 @@
     startX: number;
     startY: number;
   } | null>(null);
+  let svgElement = $state<SVGSVGElement>();
 
   // Automerge document subscription
-  // This is called once
+  // This is called once to initialize the shapes
   $effect(() => {
     console.log("Subscribing to document changes"); // Debug log
     const doc = handle.docSync();
@@ -34,66 +35,29 @@
   handle.on("change", ({ doc }) => {
     if (doc) {
       console.log("Document changed:", doc.shapes); // Debug log
-      // TODO: would it make sense to use patches here to have fine grained reactivity ?
-      // here is the original non-svelte code
-      // Process each patch to update, add, or remove shapes
-      /*     patches.forEach(patch => {
-        console.log('Processing patch:', patch); // Debug log
-        if (patch.path[0] === 'shapes') {
-            if (patch.action === 'put') {
-                // Handle shape addition or update
-                const shapeIndex = parseInt(patch.path[1], 10);
-                const shapeData = shapesArray[shapeIndex];
-                if (!shapeData) return;
-
-                const shape = createShapeInstance(shapeData);
-                if (!shape) return;
-
-                // Find existing element or create new one
-                const elementId = String(shapeData.id);
-                let element = document.getElementById(elementId) as SVGCircleElement | SVGPolygonElement | null;
-                if (!element) {
-                    element = shape.createSVGElement() as SVGCircleElement | SVGPolygonElement;
-                    container.appendChild(element);
-                } else {
-                    shape.updateAttributes(element);
-                }
-            } else if (patch.action === 'del') {
-                // Handle shape deletion
-                const element = document.getElementById(patch.path[1]) as SVGElement | null;
-                if (element) {
-                    container.removeChild(element);
-                }
-            }
-        }
-    }); */
+      // it looks like Svelte is clever enough to make only the necessary DOM changes
+      // without having to use patches
       shapes = doc.shapes;
     }
   });
 
   function handleDragStart(e: MouseEvent, shape: Shape) {
-    const svg = document.getElementById("shapesCanvas") as SVGSVGElement;
-    if (!svg) return;
+    if (!svgElement) return;
 
-    const point = svg.createSVGPoint();
+    const point = svgElement.createSVGPoint();
     point.x = e.clientX;
     point.y = e.clientY;
-    const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
+    const { x, y } = point.matrixTransform(svgElement.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;
-    if (!svg) return;
-
-    const point = svg.createSVGPoint();
+    if (!draggedShape || !svgElement) return;
+    const point = svgElement.createSVGPoint();
     point.x = e.clientX;
     point.y = e.clientY;
-    const { x, y } = point.matrixTransform(svg.getScreenCTM()!.inverse());
-
+    const { x, y } = point.matrixTransform(svgElement.getScreenCTM()!.inverse());
     updateDocWithShapeMove(draggedShape.id, x, y);
   }
 
@@ -108,6 +72,7 @@
 
 <div class="container">
   <svg
+    bind:this={svgElement}
     id="shapesCanvas"
     viewBox="0 0 800 600"
     role="presentation"

src/docManager.ts

@@ -71,7 +71,6 @@ export function updateDocWithNewTriangle(x1: number, y1: number, x2: number, y2:
 }
 
 export const updateDocWithShapeMove = (shapeId: string, x: number, y: number) => {
-    console.log('Moving shape:', { shapeId, x, y }); // Debug log
     handle.change((doc: AppDocument) => {
         const shape = doc.shapes.find(s => s.id === Number(shapeId));
         if (!shape) return;