Some renaming and commenting for better readibility

src/canvasManager.ts

@@ -2,6 +2,7 @@ import { Circle } from './shapes/Circle';
 import { Triangle } from './shapes/Triangle';
 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[], 
@@ -9,6 +10,7 @@ export function createOrUpdateShapes(
 ): 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);
@@ -24,9 +26,11 @@ export function createOrUpdateShapes(
         return;
     }
 
+    // Process each patch to update, add, or remove shapes
     patches.forEach(patch => {
         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;
@@ -34,6 +38,7 @@ export function createOrUpdateShapes(
                 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) {
@@ -43,6 +48,7 @@ export function createOrUpdateShapes(
                     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);
@@ -52,11 +58,14 @@ export function createOrUpdateShapes(
     });
 }
 
+// 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);
     }

src/docManager.ts

@@ -38,7 +38,7 @@ export async function initRepo(): Promise<DocHandle<AppDocument>> {
     return handle;
 }
 
-export function addCircle(x: number, y: number, radius: number): void {
+export const updateDocWithNewCircle = (x: number, y: number, radius: number) => {
     handle.change((doc: AppDocument) => {
         const circle: CircleShape = {
             id: Date.now(),
@@ -52,14 +52,7 @@ export function addCircle(x: number, y: number, radius: number): void {
     });
 }
 
-export function addTriangle(
+export const updateDocWithNewTriangle = (x1: number, y1: number, x2: number, y2: number, x3: number, y3: number) => {
-    x1: number, 
-    y1: number, 
-    x2: number, 
-    y2: number, 
-    x3: number, 
-    y3: number
-): void {
     handle.change((doc: AppDocument) => {
         const triangle: TriangleShape = {
             id: Date.now(),
@@ -75,21 +68,21 @@ export function addTriangle(
     });
 }
 
-export function moveShape(shapeId: string, newX: number, newY: number): void {
+export const updateDocWithShapeMove = (shapeId: string, x: number, y: number) => {
     handle.change((doc: AppDocument) => {
         const shape = doc.shapes.find(s => s.id === Number(shapeId));
         if (!shape) return;
 
         if (shape.type === "circle") {
-            shape.x = newX;
+            shape.x = x;
-            shape.y = newY;
+            shape.y = y;
         } else if (shape.type === "triangle") {
             const center = {
                 x: shape.coordinates.reduce((sum, p) => sum + p.x, 0) / 3,
                 y: shape.coordinates.reduce((sum, p) => sum + p.y, 0) / 3
             };
-            const dx = newX - center.x;
+            const dx = x - center.x;
-            const dy = newY - center.y;
+            const dy = y - center.y;
 
             shape.coordinates = shape.coordinates.map(p => ({
                 x: p.x + dx,

src/main.ts

@@ -1,4 +1,4 @@
-import { initRepo, addCircle, addTriangle, moveShape } from "./docManager";
+import { initRepo, updateDocWithNewCircle, updateDocWithNewTriangle, updateDocWithShapeMove } from "./docManager";
 import { createOrUpdateShapes } from "./canvasManager";
 import { CircleShape } from "./types";
 
@@ -30,7 +30,7 @@ function initDragAndDrop(container: SVGSVGElement): void {
     let selectedShapeId: string | null = null;
 
     const throttledMoveShape = throttle((shapeId: string, x: number, y: number) => {
-        moveShape(shapeId, x, y);
+        updateDocWithShapeMove(shapeId, x, y);
     }, CONFIG.THROTTLE_MS);
 
     container.addEventListener("mousedown", (e: MouseEvent) => {
@@ -105,12 +105,12 @@ function initShapeButtons(): void {
 
     circleButton.addEventListener("click", () => {
         const { x, y, radius } = CONFIG.DEFAULT_SHAPES.CIRCLE;
-        addCircle(x, y, radius);
+        updateDocWithNewCircle(x, y, radius);
     });
 
     triangleButton.addEventListener("click", () => {
         const { x1, y1, x2, y2, x3, y3 } = CONFIG.DEFAULT_SHAPES.TRIANGLE;
-        addTriangle(x1, y1, x2, y2, x3, y3);
+        updateDocWithNewTriangle(x1, y1, x2, y2, x3, y3);
     });
 }