From 5d8025316846b16528052819e050ff5bc839bcfd Mon Sep 17 00:00:00 2001 From: Stephan Egli Date: Thu, 16 Jan 2025 18:17:52 +0100 Subject: [PATCH] Removed obsolete js versions of files --- src/canvasManager.js | 77 ------------------------ src/docManager.js | 130 ----------------------------------------- src/main.js | 94 ----------------------------- src/shapes/Circle.js | 22 ------- src/shapes/Shape.js | 29 --------- src/shapes/Triangle.js | 22 ------- 6 files changed, 374 deletions(-) delete mode 100644 src/canvasManager.js delete mode 100644 src/docManager.js delete mode 100644 src/main.js delete mode 100644 src/shapes/Circle.js delete mode 100644 src/shapes/Shape.js delete mode 100644 src/shapes/Triangle.js diff --git a/src/canvasManager.js b/src/canvasManager.js deleted file mode 100644 index 873a784..0000000 --- a/src/canvasManager.js +++ /dev/null @@ -1,77 +0,0 @@ -// js/canvasManager.js - -import { Circle } from './shapes/Circle'; -import { Triangle } from './shapes/Triangle'; - -export function createOrUpdateShapes(container, shapesArray, patches = []) { - if (!container || !(container instanceof SVGElement)) { - return; - } - - // Ensure patches is an array - const patchArray = patches?.patches || patches || []; - if (!Array.isArray(patchArray)) { - console.warn("Expected patches to be an array, got:", typeof patchArray, patchArray); - patches = []; - } - - // If no patches, do a full redraw - if (!patchArray || patchArray.length === 0) { - // Clear container - while (container.firstChild) { - container.removeChild(container.firstChild); - } - - // Draw all shapes - shapesArray.forEach(shapeData => { - const shape = createShapeInstance(shapeData); - if (shape) { - const element = shape.createSVGElement(); - container.appendChild(element); - } - }); - return; - } - - // Process patches - patchArray.forEach(patch => { - if (patch.path[0] === 'shapes') { - if (patch.action === 'put') { - const shapeIndex = patch.path[1]; - const shapeData = shapesArray[shapeIndex]; - if (!shapeData) return; - - const shape = createShapeInstance(shapeData); - if (!shape) return; - - let element = document.getElementById(shapeData.id); - if (!element) { - // Create new element - element = shape.createSVGElement(); - container.appendChild(element); - } else { - // Update existing element - shape.updateAttributes(element); - } - } else if (patch.action === 'del') { - const element = document.getElementById(patch.path[1]); - if (element) { - container.removeChild(element); - } - } - } - }); -} - -function createShapeInstance(shapeData) { - switch (shapeData.type) { - case "circle": - return new Circle(shapeData.id, shapeData.x, shapeData.y, shapeData.radius, shapeData.color); - case "triangle": - return new Triangle(shapeData.id, shapeData.coordinates, shapeData.color); - default: - console.warn(`Unknown shape type: ${shapeData.type}`); - return null; - } -} - diff --git a/src/docManager.js b/src/docManager.js deleted file mode 100644 index ac08b51..0000000 --- a/src/docManager.js +++ /dev/null @@ -1,130 +0,0 @@ -// docManager.js (Automerge 2.x style) - -import { Repo, isValidAutomergeUrl } from "@automerge/automerge-repo" -import * as Automerge from "@automerge/automerge" -// For IndexedDB storage -import { IndexedDBStorageAdapter } from '@automerge/automerge-repo-storage-indexeddb' -import { BrowserWebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket" - -let handle - -// Define the current schema version -const CURRENT_SCHEMA_VERSION = 1; - -export async function initRepo() { - const repo = new Repo({ - network: [ - new BrowserWebSocketClientAdapter("wss://automerge.rheinheim.fraction.ch") - ], - storage: new IndexedDBStorageAdapter() - }) - - // Check for existing docId in URL hash - const rootDocUrl = document.location.hash.substring(1) - - if (rootDocUrl && isValidAutomergeUrl(rootDocUrl)) { - handle = repo.find(rootDocUrl) - // Wait for handle to be ready - await handle.whenReady() - - // Check and upgrade schema if needed - handle.change(doc => { - if (!doc.schemaVersion) { - // Handle legacy documents (pre-versioning) - doc.schemaVersion = 1 - } - // Add future upgrade logic here - // if (doc.schemaVersion < 2) { - // // Example: upgrade shapes to include a new required field - // doc.shapes.forEach(shape => { - // shape.opacity = 1.0 // Add new field with default value - // }) - // doc.schemaVersion = 2 - // } - }) - } else { - // Create new document with current schema version - handle = repo.create({ - schemaVersion: CURRENT_SCHEMA_VERSION, - shapes: [] - }) - // Wait for handle to be ready - await handle.whenReady() - document.location.hash = handle.url - } - - return handle -} - -/** - * Add a new circle to the document - */ -export function addCircle(x, y, radius) { - handle.change(doc => { - doc.shapes.push({ - id: Date.now(), - type: "circle", - x, - y, - radius, - color: "red" - }) - }) -} - -/** - * Fügt dem Dokument ein Dreieck hinzu - */ -export function addTriangle(x1, y1, x2, y2, x3, y3) { - handle.change(doc => { - doc.shapes.push({ - id: Date.now(), - type: "triangle", - coordinates: [ - { x: x1, y: y1 }, - { x: x2, y: y2 }, - { x: x3, y: y3 } - ], - color: "blue" - }); - }); -} - -/** - * Move a shape in the document - * - * Watch out: do not use the Array.find method, because these are Proxies and the find method is not supported on Proxies. - * Also make sure that you compare numbers with numbers, not strings. - */ -export function moveShape(shapeId, newX, newY) { - handle.change(doc => { - // Find the index of the shape instead of using find() - // TODO faster implementation than for loop - for (let i = 0; i < doc.shapes.length; i++) { - if (doc.shapes[i].id === Number(shapeId)) { - if (doc.shapes[i].type === "circle") { - doc.shapes[i].x = newX; - doc.shapes[i].y = newY; - } else if (doc.shapes[i].type === "triangle") { - // Calculate the current center - const center = { - x: doc.shapes[i].coordinates.reduce((sum, p) => sum + p.x, 0) / 3, - y: doc.shapes[i].coordinates.reduce((sum, p) => sum + p.y, 0) / 3 - }; - // Calculate the movement delta - const dx = newX - center.x; - const dy = newY - center.y; - - // Move all points - doc.shapes[i].coordinates = doc.shapes[i].coordinates.map(p => ({ - x: p.x + dx, - y: p.y + dy - })); - - } - break; - } - } - }) -} - diff --git a/src/main.js b/src/main.js deleted file mode 100644 index e3b7583..0000000 --- a/src/main.js +++ /dev/null @@ -1,94 +0,0 @@ -// main.js -import { initRepo, addCircle, addTriangle, moveShape } from "./docManager.js" -import { createOrUpdateShapes } from "./canvasManager.js" - -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 } - } -} - -// 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) { - let inThrottle; - return function(...args) { - if (!inThrottle) { - func.apply(this, args); - inThrottle = true; - setTimeout(() => inThrottle = false, limit); - } - } -} - -async function initApp() { - const container = document.getElementById("shapesCanvas"); - const handle = await initRepo(); - - // Initial render - createOrUpdateShapes(container, handle.docSync().shapes); - - // Subscribe to changes - handle.on("change", (change) => { - createOrUpdateShapes(container, change.doc.shapes, change.patches); - }); - - // Initialize shape buttons - initShapeButtons(); - initDragAndDrop(container); -} - -function initShapeButtons() { - document.getElementById("addCircleButton").addEventListener("click", () => { - const { x, y, radius } = CONFIG.DEFAULT_SHAPES.CIRCLE; - addCircle(x, y, radius); - }); - - document.getElementById("addTriangleButton").addEventListener("click", () => { - const { x1, y1, x2, y2, x3, y3 } = CONFIG.DEFAULT_SHAPES.TRIANGLE; - addTriangle(x1, y1, x2, y2, x3, y3); - }); -} - -// Start the app -initApp().catch(console.error); - diff --git a/src/shapes/Circle.js b/src/shapes/Circle.js deleted file mode 100644 index 3dd7b18..0000000 --- a/src/shapes/Circle.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Shape } from './Shape'; - -export class Circle extends Shape { - constructor(id, x, y, radius, color = "red") { - super(id, "circle", color); - this.x = x; - this.y = y; - this.radius = radius; - } - - getSVGElementType() { - return "circle"; - } - - updateAttributes(element) { - element.setAttributeNS(null, "cx", this.x); - element.setAttributeNS(null, "cy", this.y); - element.setAttributeNS(null, "r", this.radius); - element.setAttributeNS(null, "fill", this.color); - } - -} \ No newline at end of file diff --git a/src/shapes/Shape.js b/src/shapes/Shape.js deleted file mode 100644 index 5e96498..0000000 --- a/src/shapes/Shape.js +++ /dev/null @@ -1,29 +0,0 @@ -const SVG_NS = "http://www.w3.org/2000/svg"; - -export class Shape { - constructor(id, type, color = "black") { - this.id = id; - this.type = type; - this.color = color; - } - - createSVGElement() { - const element = document.createElementNS(SVG_NS, this.getSVGElementType()); - element.id = this.id; - this.updateAttributes(element); - return element; - } - - // Abstract methods - getSVGElementType() { - throw new Error("Must be implemented by derived class"); - } - // this update also takes care of movements. The actual movement is done in documentManager.js - updateAttributes(element) { - throw new Error("Must be implemented by derived class"); - } - - move(newX, newY) { - throw new Error("Must be implemented by derived class"); - } -} \ No newline at end of file diff --git a/src/shapes/Triangle.js b/src/shapes/Triangle.js deleted file mode 100644 index 2c81311..0000000 --- a/src/shapes/Triangle.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Shape } from './Shape'; - -export class Triangle extends Shape { - constructor(id, coordinates, color = "blue") { - super(id, "triangle", color); - this.coordinates = coordinates; - } - - getSVGElementType() { - return "polygon"; - } - - updateAttributes(element) { - const points = this.coordinates - .map(p => `${p.x},${p.y}`) - .join(" "); - element.setAttributeNS(null, "points", points); - element.setAttributeNS(null, "fill", this.color); - } - - -} \ No newline at end of file