Cleaned up obsolete non-svelte code

src/canvasManager.ts-obsolete

@@ -1,75 +0,0 @@
-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
-export function createOrUpdateShapes(
-    container: SVGSVGElement, 
-    shapesArray: Shape[], 
-    patches: Patch[] = []
-): void {
-    if (!container) return;
-
-    // If no patches, clear container and render all shapes from scratch
-    if (!patches || patches.length === 0) {
-        while (container.firstChild) {
-            container.removeChild(container.firstChild);
-        }
-        
-        shapesArray.forEach(shapeData => {
-            const shape = createShapeInstance(shapeData);
-            if (shape) {
-                const element = shape.createSVGElement();
-                container.appendChild(element);
-            }
-        });
-        return;
-    }
-
-    // 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);
-                }
-            }
-        }
-    });
-}
-
-// Factory function to create appropriate shape instance based on type
-function createShapeInstance(shapeData: Shape): Circle | Triangle | null {
-    if (shapeData.type === "circle") {
-        // Create circle with position, radius, and color
-        const circleData = shapeData as CircleShape;
-        return new Circle(circleData.id, circleData.x, circleData.y, circleData.radius, circleData.color);
-    } else if (shapeData.type === "triangle") {
-        // Create triangle with three vertex coordinates and color
-        const triangleData = shapeData as TriangleShape;
-        return new Triangle(triangleData.id, triangleData.coordinates, triangleData.color);
-    }
-    
-    return null;
-} 

src/components/Canvas.svelte

@@ -24,7 +24,7 @@
   // Automerge document subscription
   // This is called once
   $effect(() => {
-    console.log('Subscribing to document changes'); // Debug log
+    console.log("Subscribing to document changes"); // Debug log
     const doc = handle.docSync();
     if (doc) {
       shapes = doc.shapes;
@@ -33,8 +33,40 @@
 
   handle.on("change", ({ doc }) => {
     if (doc) {
-      console.log('Document changed:', doc.shapes); // Debug log
+      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);
+                }
+            }
+        }
+    }); */
       shapes = doc.shapes;
     }
   });
@@ -79,8 +111,10 @@
     id="shapesCanvas"
     viewBox="0 0 800 600"
     role="presentation"
-    onmousemove={(e) => {handleDragMove(e) }}
+    onmousemove={(e) => {
-    onmouseup={() => draggedShape = null}
+      handleDragMove(e);
+    }}
+    onmouseup={() => (draggedShape = null)}
   >
     {#each shapes as shape (shape.id)}
       {#if shape.type === "circle"}

src/shapes/Circle.ts-obsolete

@@ -1,34 +0,0 @@
-import { Shape } from './Shape.ts-obsolete';
-import { CircleProps } from './types.ts-obsolete';
-
-export class Circle extends Shape {
-    private x: number;
-    private y: number;
-    private radius: number;
-
-    constructor(id: number, x: number, y: number, radius: number, color: string = "red") {
-        super(id, "circle", color);
-        this.x = x;
-        this.y = y;
-        this.radius = radius;
-    }
-
-    getSVGElementType(): string {
-        return "circle";
-    }
-  
-    updateAttributes(element: SVGElement): void {
-        if (!(element instanceof SVGCircleElement)) {
-            throw new Error("Expected SVGCircleElement");
-        }
-        element.setAttributeNS(null, "cx", String(this.x));
-        element.setAttributeNS(null, "cy", String(this.y));
-        element.setAttributeNS(null, "r", String(this.radius));
-        element.setAttributeNS(null, "fill", this.color);
-    }
-
-    move(newX: number, newY: number): void {
-        this.x = newX;
-        this.y = newY;
-    }
-} 

src/shapes/Shape.ts-obsolete

@@ -1,25 +0,0 @@
-const SVG_NS = "http://www.w3.org/2000/svg";
-
-export abstract class Shape {
-    protected id: number;
-    protected type: string;
-    protected color: string;
-
-    constructor(id: number, type: string, color: string = "black") {
-        this.id = id;
-        this.type = type;
-        this.color = color;
-    }
-
-    createSVGElement(): SVGElement {
-        const element = document.createElementNS(SVG_NS, this.getSVGElementType());
-        element.id = String(this.id);
-        this.updateAttributes(element);
-        return element;
-    }
-
-    // Abstract methods that must be implemented by derived classes
-    abstract getSVGElementType(): string;
-    abstract updateAttributes(element: SVGElement): void;
-    abstract move(newX: number, newY: number): void;
-} 

src/shapes/Triangle.ts-obsolete

@@ -1,44 +0,0 @@
-import { Shape } from './Shape.ts-obsolete';
-import { Coordinate, TriangleProps } from './types.ts-obsolete';
-
-export class Triangle extends Shape {
-    private coordinates: [Coordinate, Coordinate, Coordinate];
-
-    constructor(id: number, coordinates: [Coordinate, Coordinate, Coordinate], color: string = "blue") {
-        super(id, "triangle", color);
-        this.coordinates = coordinates;
-    }
-
-    getSVGElementType(): string {
-        return "polygon";
-    }
-
-    updateAttributes(element: SVGElement): void {
-        if (!(element instanceof SVGPolygonElement)) {
-            throw new Error("Expected SVGPolygonElement");
-        }
-        const points = this.coordinates
-            .map(p => `${p.x},${p.y}`)
-            .join(" ");
-        element.setAttributeNS(null, "points", points);
-        element.setAttributeNS(null, "fill", this.color);
-    }
-
-    move(newX: number, newY: number): void {
-        // Calculate current center
-        const center = {
-            x: this.coordinates.reduce((sum, p) => sum + p.x, 0) / 3,
-            y: this.coordinates.reduce((sum, p) => sum + p.y, 0) / 3
-        };
-
-        // Calculate movement delta
-        const dx = newX - center.x;
-        const dy = newY - center.y;
-
-        // Move all points
-        this.coordinates = this.coordinates.map(p => ({
-            x: p.x + dx,
-            y: p.y + dy
-        })) as [Coordinate, Coordinate, Coordinate];
-    }
-} 

src/shapes/types.ts-obsolete

@@ -1,22 +0,0 @@
-export interface BaseShapeProps {
-    id: number;
-    type: string;
-    color: string;
-}
-
-export interface CircleProps extends BaseShapeProps {
-    type: 'circle';
-    x: number;
-    y: number;
-    radius: number;
-}
-
-export interface Coordinate {
-    x: number;
-    y: number;
-}
-
-export interface TriangleProps extends BaseShapeProps {
-    type: 'triangle';
-    coordinates: [Coordinate, Coordinate, Coordinate];
-}