From 4a6b461045daf808b9b3dd0c14b7fdc62ef4ed5f Mon Sep 17 00:00:00 2001
From: Stephan Egli <stephan.egli93@gmail.com>
Date: Mon, 20 Jan 2025 10:51:56 +0100
Subject: [PATCH] Tagged obsolete code, removed some code duplication, working
 version

---
 ...vasManager.ts => canvasManager.ts-obsolete} |  5 +++--
 src/components/Canvas.svelte                   | 18 +++++-------------
 src/components/shapes/Circle.svelte            |  9 +--------
 src/docManager.ts                              |  1 +
 src/shapes/{Circle.ts => Circle.ts-obsolete}   |  4 ++--
 src/shapes/{Shape.ts => Shape.ts-obsolete}     |  0
 .../{Triangle.ts => Triangle.ts-obsolete}      |  4 ++--
 src/shapes/{types.ts => types.ts-obsolete}     |  0
 8 files changed, 14 insertions(+), 27 deletions(-)
 rename src/{canvasManager.ts => canvasManager.ts-obsolete} (94%)
 rename src/shapes/{Circle.ts => Circle.ts-obsolete} (90%)
 rename src/shapes/{Shape.ts => Shape.ts-obsolete} (100%)
 rename src/shapes/{Triangle.ts => Triangle.ts-obsolete} (92%)
 rename src/shapes/{types.ts => types.ts-obsolete} (100%)

diff --git a/src/canvasManager.ts b/src/canvasManager.ts-obsolete
similarity index 94%
rename from src/canvasManager.ts
rename to src/canvasManager.ts-obsolete
index 9e9fafd..64ee93f 100644
--- a/src/canvasManager.ts
+++ b/src/canvasManager.ts-obsolete
@@ -1,5 +1,5 @@
-import { Circle } from './shapes/Circle';
-import { Triangle } from './shapes/Triangle';
+import { Circle } from './shapes/Circle.ts-obsolete';
+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
diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte
index c0cca46..b7abff2 100644
--- a/src/components/Canvas.svelte
+++ b/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) => {
-      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);
-    }}
+    onmousemove={(e) => {handleDragMove(e) }}
     onmouseup={() => draggedShape = null}
   >
     {#each shapes as shape (shape.id)}
diff --git a/src/components/shapes/Circle.svelte b/src/components/shapes/Circle.svelte
index 623090f..41bb489 100644
--- a/src/components/shapes/Circle.svelte
+++ b/src/components/shapes/Circle.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-  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 { id, x, y, radius, color, handleDragStart } = $props();
 
   const shape = {
     id,
diff --git a/src/docManager.ts b/src/docManager.ts
index c70e2d4..360428c 100644
--- a/src/docManager.ts
+++ b/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;
diff --git a/src/shapes/Circle.ts b/src/shapes/Circle.ts-obsolete
similarity index 90%
rename from src/shapes/Circle.ts
rename to src/shapes/Circle.ts-obsolete
index 6b8640c..3823567 100644
--- a/src/shapes/Circle.ts
+++ b/src/shapes/Circle.ts-obsolete
@@ -1,5 +1,5 @@
-import { Shape } from './Shape';
-import { CircleProps } from './types';
+import { Shape } from './Shape.ts-obsolete';
+import { CircleProps } from './types.ts-obsolete';
 
 export class Circle extends Shape {
     private x: number;
diff --git a/src/shapes/Shape.ts b/src/shapes/Shape.ts-obsolete
similarity index 100%
rename from src/shapes/Shape.ts
rename to src/shapes/Shape.ts-obsolete
diff --git a/src/shapes/Triangle.ts b/src/shapes/Triangle.ts-obsolete
similarity index 92%
rename from src/shapes/Triangle.ts
rename to src/shapes/Triangle.ts-obsolete
index 750596a..1cb2489 100644
--- a/src/shapes/Triangle.ts
+++ b/src/shapes/Triangle.ts-obsolete
@@ -1,5 +1,5 @@
-import { Shape } from './Shape';
-import { Coordinate, TriangleProps } from './types';
+import { Shape } from './Shape.ts-obsolete';
+import { Coordinate, TriangleProps } from './types.ts-obsolete';
 
 export class Triangle extends Shape {
     private coordinates: [Coordinate, Coordinate, Coordinate];
diff --git a/src/shapes/types.ts b/src/shapes/types.ts-obsolete
similarity index 100%
rename from src/shapes/types.ts
rename to src/shapes/types.ts-obsolete