removed debug messages
This commit is contained in:
parent
442c4f09ac
commit
209cff1cfb
@ -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") {
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
27
src/main.js
27
src/main.js
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user