From 9e02b6ecff41d03780a4f9300168595602068cbf Mon Sep 17 00:00:00 2001 From: Stephan Egli Date: Mon, 20 Jan 2025 10:59:46 +0100 Subject: [PATCH] Cleaned up obsolete non-svelte code --- src/canvasManager.ts-obsolete | 75 --------------------------------- src/components/Canvas.svelte | 42 ++++++++++++++++-- src/shapes/Circle.ts-obsolete | 34 --------------- src/shapes/Shape.ts-obsolete | 25 ----------- src/shapes/Triangle.ts-obsolete | 44 ------------------- src/shapes/types.ts-obsolete | 22 ---------- 6 files changed, 38 insertions(+), 204 deletions(-) delete mode 100644 src/canvasManager.ts-obsolete delete mode 100644 src/shapes/Circle.ts-obsolete delete mode 100644 src/shapes/Shape.ts-obsolete delete mode 100644 src/shapes/Triangle.ts-obsolete delete mode 100644 src/shapes/types.ts-obsolete diff --git a/src/canvasManager.ts-obsolete b/src/canvasManager.ts-obsolete deleted file mode 100644 index 64ee93f..0000000 --- a/src/canvasManager.ts-obsolete +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/components/Canvas.svelte b/src/components/Canvas.svelte index b7abff2..7b76951 100644 --- a/src/components/Canvas.svelte +++ b/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) }} - onmouseup={() => draggedShape = null} + onmousemove={(e) => { + handleDragMove(e); + }} + onmouseup={() => (draggedShape = null)} > {#each shapes as shape (shape.id)} {#if shape.type === "circle"} diff --git a/src/shapes/Circle.ts-obsolete b/src/shapes/Circle.ts-obsolete deleted file mode 100644 index 3823567..0000000 --- a/src/shapes/Circle.ts-obsolete +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/src/shapes/Shape.ts-obsolete b/src/shapes/Shape.ts-obsolete deleted file mode 100644 index 32b6614..0000000 --- a/src/shapes/Shape.ts-obsolete +++ /dev/null @@ -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; -} \ No newline at end of file diff --git a/src/shapes/Triangle.ts-obsolete b/src/shapes/Triangle.ts-obsolete deleted file mode 100644 index 1cb2489..0000000 --- a/src/shapes/Triangle.ts-obsolete +++ /dev/null @@ -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]; - } -} \ No newline at end of file diff --git a/src/shapes/types.ts-obsolete b/src/shapes/types.ts-obsolete deleted file mode 100644 index 4d62c63..0000000 --- a/src/shapes/types.ts-obsolete +++ /dev/null @@ -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]; -} \ No newline at end of file