Tagged obsolete code, removed some code duplication, working version

src/canvasManager.ts-obsolete

@@ -1,5 +1,5 @@
-import { Circle } from './shapes/Circle';
+import { Circle } from './shapes/Circle.ts-obsolete';
-import { Triangle } from './shapes/Triangle';
+import { Triangle } from './shapes/Triangle.ts-obsolete';
 import { Shape, Patch, CircleShape, TriangleShape } from './types';
 
 // Main function to handle both initial render and updates of shapes
@@ -28,6 +28,7 @@ export function createOrUpdateShapes(
 
     // 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

src/components/Canvas.svelte

@@ -22,7 +22,9 @@
   } | null>(null);
 
   // Automerge document subscription
+  // This is called once
   $effect(() => {
+    console.log('Subscribing to document changes'); // Debug log
     const doc = handle.docSync();
     if (doc) {
       shapes = doc.shapes;
@@ -31,6 +33,8 @@
 
   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 ?
       shapes = doc.shapes;
     }
   });
@@ -75,19 +79,7 @@
     id="shapesCanvas"
     viewBox="0 0 800 600"
     role="presentation"
-    onmousemove={(e) => {
+    onmousemove={(e) => {handleDragMove(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)}

src/components/shapes/Circle.svelte

@@ -1,12 +1,5 @@
 <script lang="ts">
-  const { id, x, y, radius, color, handleDragStart } = $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,

src/docManager.ts

@@ -71,6 +71,7 @@ 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;

src/shapes/Circle.ts-obsolete

@@ -1,5 +1,5 @@
-import { Shape } from './Shape';
+import { Shape } from './Shape.ts-obsolete';
-import { CircleProps } from './types';
+import { CircleProps } from './types.ts-obsolete';
 
 export class Circle extends Shape {
     private x: number;

src/shapes/Triangle.ts-obsolete

@@ -1,5 +1,5 @@
-import { Shape } from './Shape';
+import { Shape } from './Shape.ts-obsolete';
-import { Coordinate, TriangleProps } from './types';
+import { Coordinate, TriangleProps } from './types.ts-obsolete';
 
 export class Triangle extends Shape {
     private coordinates: [Coordinate, Coordinate, Coordinate];