Refactored main.js for better code organization

src/main.js

@@ -2,12 +2,51 @@
 import { initRepo, addCircle, addTriangle, moveShape } from "./docManager.js"
 import { createOrUpdateShapes } from "./canvasManager.js"
 
-let isDragging = false;
-let selectedShapeId = null;
-let offsetX = 0;
-let offsetY = 0;
+const CONFIG = {
+    THROTTLE_MS: 16, // 60fps
+    DEFAULT_SHAPES: {
+        CIRCLE: { x: 100, y: 100, radius: 30 },
+        TRIANGLE: { x1: 200, y1: 200, x2: 220, y2: 220, x3: 180, y3: 220 }
+    }
+}
 
-const container = document.getElementById("shapesCanvas");
+// Group related event handlers together
+function initDragAndDrop(container) {
+    let isDragging = false;
+    let selectedShapeId = null;
+
+    const throttledMoveShape = throttle((shapeId, x, y) => {
+        moveShape(shapeId, x, y);
+    }, CONFIG.THROTTLE_MS);
+
+    container.addEventListener("mousedown", (e) => {
+        const clickedElement = e.target;
+        if (clickedElement.matches('circle, polygon')) {
+            isDragging = true;
+            selectedShapeId = clickedElement.id;
+        }
+    });
+
+    container.addEventListener("mousemove", (e) => {
+        if (!isDragging || !selectedShapeId) return;
+        
+        const svgPoint = getSVGPoint(container, e.clientX, e.clientY);
+        throttledMoveShape(selectedShapeId, svgPoint.x, svgPoint.y);
+    });
+
+    container.addEventListener("mouseup", () => {
+        isDragging = false;
+        selectedShapeId = null;
+    });
+}
+
+// Helper function for SVG coordinate conversion
+function getSVGPoint(container, x, y) {
+    const pt = container.createSVGPoint();
+    pt.x = x;
+    pt.y = y;
+    return pt.matrixTransform(container.getScreenCTM().inverse());
+}
 
 // Add throttle function at the top
 function throttle(func, limit) {
@@ -21,65 +60,35 @@ function throttle(func, limit) {
   }
 }
 
-  // Initialize the document
-const handle = await initRepo()
+async function initApp() {
+    const container = document.getElementById("shapesCanvas");
+    const handle = await initRepo();
 
+    // Initial render
+    createOrUpdateShapes(container, handle.docSync().shapes);
 
-// draw current state
-createOrUpdateShapes(container, handle.docSync().shapes)
+    // Subscribe to changes
+    handle.on("change", (change) => {
+        createOrUpdateShapes(container, change.doc.shapes, change.patches);
+    });
 
-// 2. Subscribe so we can re-render whenever doc changes
-handle.on("change", (change) => {
-  createOrUpdateShapes(container, change.doc.shapes, change.patches);
-});
+    // Initialize shape buttons
+    initShapeButtons();
+    initDragAndDrop(container);
+}
 
-// 3. Buttons holen
-const addCircleButton = document.getElementById("addCircleButton");
-const addTriangleButton = document.getElementById("addTriangleButton");
+function initShapeButtons() {
+    document.getElementById("addCircleButton").addEventListener("click", () => {
+        const { x, y, radius } = CONFIG.DEFAULT_SHAPES.CIRCLE;
+        addCircle(x, y, radius);
+    });
 
-// 4. Event Listener für Buttons
-addCircleButton.addEventListener("click", () => {
-  // z. B. zufällige Position/Radius
-  addCircle(100, 100, 30);
-});
+    document.getElementById("addTriangleButton").addEventListener("click", () => {
+        const { x1, y1, x2, y2, x3, y3 } = CONFIG.DEFAULT_SHAPES.TRIANGLE;
+        addTriangle(x1, y1, x2, y2, x3, y3);
+    });
+}
 
-addTriangleButton.addEventListener("click", () => {
-  // z. B. zufällige Koordinaten
-  addTriangle( 200, 200, 220, 220, 180, 220);
-});
-
-// Mousedown: Prüfen, ob wir auf ein Shape klicken
-container.addEventListener("mousedown", (e) => {
-    const clickedElement = e.target;
-    if (clickedElement.tagName === 'circle' || clickedElement.tagName === 'polygon') {
-        isDragging = true;
-        selectedShapeId = clickedElement.id;
-    }
-});
-
-// Throttled version of moveShape
-const throttledMoveShape = throttle((shapeId, x, y) => {
-  moveShape(shapeId, x, y);
-}, 16); // 50ms throttle time (20 updates per second)
-
-// Mousemove: Shape verschieben, sofern dragging aktiv ist
-container.addEventListener("mousemove", (e) => {
-  if (!isDragging || selectedShapeId === null) return;
-
-  const pt = container.createSVGPoint();
-  pt.x = e.clientX;
-  pt.y = e.clientY;
-  const svgP = pt.matrixTransform(container.getScreenCTM().inverse());
-
-  const newX = svgP.x - offsetX;
-  const newY = svgP.y - offsetY;
-
-  throttledMoveShape(selectedShapeId, newX, newY);
-});
-
-// Mouseup: Dragging beenden
-container.addEventListener("mouseup", () => {
-  isDragging = false;
-  selectedShapeId = null;
-});
+// Start the app
+initApp().catch(console.error);