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

removed debug messages

Browse Source
This commit is contained in:
Stephan Egli 2025-01-10 18:08:25 +01:00
parent 442c4f09ac
commit 209cff1cfb
3 changed files with 1 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/canvasManager.js
View File

@ -12,16 +12,12 @@ const SVG_NS = "http://www.w3.org/2000/svg";
* @param {Array} patches
*/
export function drawAllShapesOnCanvas(container, shapesArray, patches = []) {
console.log("drawAllShapesOnCanvas container:",container)
if (!container || !(container instanceof SVGElement)) {
return;
}
console.log("Received patches:", patches);
// Ensure patches is an array
const patchArray = patches?.patches || patches || [];
console.log("patchArray:",patchArray)
if (!Array.isArray(patchArray)) {
console.warn("Expected patches to be an array, got:", typeof patchArray, patchArray);
// Fall back to full redraw
@ -56,21 +52,15 @@ export function drawAllShapesOnCanvas(container, shapesArray, patches = []) {
// Process patches
patchArray.forEach(patch => {
console.log("patch:",patch)
// Check if this patch affects the shapes array
if (patch.path[0] === 'shapes') {
console.log("patch.path[0] shapes:",patch.path[0])
if (patch.action === 'put') {
// New shape added or shape updated
console.log("patch.path[1] shapeindex:",patch.path[1])
const shapeIndex = patch.path[1];
const shape = shapesArray[shapeIndex];
console.log("shape:",shape)
if (!shape) return;
let element = document.getElementById(shape.id);
if (!element) {
console.log("create new element, shape:",shape)
// Create new element
if (shape.type === "circle") {
element = document.createElementNS(SVG_NS, "circle");
@ -86,7 +76,6 @@ export function drawAllShapesOnCanvas(container, shapesArray, patches = []) {
}
} else {
// Update existing element
console.log("update existing element, shape:",shape)
if (shape.type === "circle") {
updateCircleAttributes(element, shape);
} else if (shape.type === "triangle") {

2
src/docManager.js
View File

@ -82,9 +82,7 @@ export function moveShape(shapeId, newX, newY) {
// 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++) {
console.log("moveShape doc.shapes[i]:",i,doc.shapes[i].id,Number(shapeId))
if (doc.shapes[i].id === Number(shapeId)) {
console.log("moveShape doc.shapes[i]:",i,doc.shapes[i].x,newX,doc.shapes[i].y,newY)
doc.shapes[i].x = newX;
doc.shapes[i].y = newY;
break;

27
src/main.js
View File

@ -30,13 +30,9 @@ drawAllShapesOnCanvas(container, handle.docSync().shapes)
// 2. Subscribe so we can re-render whenever doc changes
handle.on("change", (change) => {
console.log("Document changed! Received patches:", change);
console.log("Current shapes:", change.doc.shapes);
// Only redraw if we're not currently dragging
// TODO if (!isDragging) {
// TODO modify name of the subsequent function:
drawAllShapesOnCanvas(container, change.doc.shapes, change.patches);
});
// 3. Buttons holen
@ -60,31 +56,12 @@ container.addEventListener("mousedown", (e) => {
if (clickedElement.tagName === 'circle' || clickedElement.tagName === 'polygon') {
isDragging = true;
selectedShapeId = clickedElement.id;
console.log("selectedShapeId:",selectedShapeId)
// Get SVG coordinates
// TODO reenable ?
/* const pt = container.createSVGPoint();
pt.x = e.clientX;
pt.y = e.clientY;
const svgP = pt.matrixTransform(container.getScreenCTM().inverse());
console.log("svgP:",svgP)
// Get the shape from the document
const shape = handle.docSync().shapes.find(s => s.id === selectedShapeId);
if (shape) {
offsetX = svgP.x - shape.x;
offsetY = svgP.y - shape.y;
}
console.log("offsetX:",offsetX)
console.log("offsetY:",offsetY) */
}
});
// Throttled version of moveShape
const throttledMoveShape = throttle((shapeId, x, y) => {
console.log("throttledMoveShape shapeId:",shapeId)
moveShape(shapeId, x, y);
// Pass the moving shape ID to drawAllShapesOnCanvas
// TODO no longer needed ?drawAllShapesOnCanvas(container, handle.docSync().shapes)
}, 16); // 50ms throttle time (20 updates per second)
// Mousemove: Shape verschieben, sofern dragging aktiv ist
@ -98,9 +75,7 @@ container.addEventListener("mousemove", (e) => {
const newX = svgP.x - offsetX;
const newY = svgP.y - offsetY;
console.log("newX:",newX)
console.log("newY:",newY)
console.log("selectedShapeId:",selectedShapeId)
throttledMoveShape(selectedShapeId, newX, newY);
});