egli/Example-Automerge-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleaned up obsolete non-svelte code

Browse Source
This commit is contained in:
Stephan Egli 2025-01-20 10:59:46 +01:00
parent 4a6b461045
commit 9e02b6ecff
6 changed files with 38 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/canvasManager.ts-obsolete
View File

@ -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;
}

42
src/components/Canvas.svelte
View File

@ -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"}

34
src/shapes/Circle.ts-obsolete
View File

@ -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;
}
}

25
src/shapes/Shape.ts-obsolete
View File

@ -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;
}

44
src/shapes/Triangle.ts-obsolete
View File

@ -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];
}
}

22
src/shapes/types.ts-obsolete
View File

@ -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];
}