removed debug messages

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

View File

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

View File

@ -82,9 +82,7 @@ export function moveShape(shapeId, newX, newY) {
// Find the index of the shape instead of using find() // Find the index of the shape instead of using find()
// TODO faster implementation than for loop // TODO faster implementation than for loop
for (let i = 0; i < doc.shapes.length; i++) { 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)) { 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].x = newX;
doc.shapes[i].y = newY; doc.shapes[i].y = newY;
break; break;

View File

@ -30,13 +30,9 @@ drawAllShapesOnCanvas(container, handle.docSync().shapes)
// 2. Subscribe so we can re-render whenever doc changes // 2. Subscribe so we can re-render whenever doc changes
handle.on("change", (change) => { 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 // Only redraw if we're not currently dragging
// TODO if (!isDragging) { // TODO if (!isDragging) {
// TODO modify name of the subsequent function:
drawAllShapesOnCanvas(container, change.doc.shapes, change.patches); drawAllShapesOnCanvas(container, change.doc.shapes, change.patches);
}); });
// 3. Buttons holen // 3. Buttons holen
@ -60,31 +56,12 @@ container.addEventListener("mousedown", (e) => {
if (clickedElement.tagName === 'circle' || clickedElement.tagName === 'polygon') { if (clickedElement.tagName === 'circle' || clickedElement.tagName === 'polygon') {
isDragging = true; isDragging = true;
selectedShapeId = clickedElement.id; 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 // Throttled version of moveShape
const throttledMoveShape = throttle((shapeId, x, y) => { const throttledMoveShape = throttle((shapeId, x, y) => {
console.log("throttledMoveShape shapeId:",shapeId)
moveShape(shapeId, x, y); 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) }, 16); // 50ms throttle time (20 updates per second)
// Mousemove: Shape verschieben, sofern dragging aktiv ist // Mousemove: Shape verschieben, sofern dragging aktiv ist
@ -98,9 +75,7 @@ container.addEventListener("mousemove", (e) => {
const newX = svgP.x - offsetX; const newX = svgP.x - offsetX;
const newY = svgP.y - offsetY; const newY = svgP.y - offsetY;
console.log("newX:",newX)
console.log("newY:",newY)
console.log("selectedShapeId:",selectedShapeId)
throttledMoveShape(selectedShapeId, newX, newY); throttledMoveShape(selectedShapeId, newX, newY);
}); });