113 lines
3.5 KiB
JavaScript
113 lines
3.5 KiB
JavaScript
// main.js
|
|
import { initRepo, addCircle, addTriangle, moveShape } from "./docManager.js"
|
|
import { drawAllShapesOnCanvas } from "./canvasManager.js"
|
|
|
|
let isDragging = false;
|
|
let selectedShapeId = null;
|
|
let offsetX = 0;
|
|
let offsetY = 0;
|
|
|
|
const container = document.getElementById("shapesCanvas");
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 1. Init the repo & document handle
|
|
const handle = initRepo()
|
|
await handle.whenReady()
|
|
|
|
// draw current state
|
|
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
|
|
const addCircleButton = document.getElementById("addCircleButton");
|
|
const addTriangleButton = document.getElementById("addTriangleButton");
|
|
|
|
// 4. Event Listener für Buttons
|
|
addCircleButton.addEventListener("click", () => {
|
|
// z. B. zufällige Position/Radius
|
|
addCircle(100, 100, 30);
|
|
});
|
|
|
|
addTriangleButton.addEventListener("click", () => {
|
|
// z. B. zufällige Koordinaten
|
|
addTriangle( 200, 200, 220, 220, 180, 220);
|
|
});
|
|
|
|
// Mousedown: Prüfen, ob wir auf ein Shape klicken
|
|
container.addEventListener("mousedown", (e) => {
|
|
const clickedElement = e.target;
|
|
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
|
|
container.addEventListener("mousemove", (e) => {
|
|
if (!isDragging || selectedShapeId === null) return;
|
|
|
|
const pt = container.createSVGPoint();
|
|
pt.x = e.clientX;
|
|
pt.y = e.clientY;
|
|
const svgP = pt.matrixTransform(container.getScreenCTM().inverse());
|
|
|
|
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);
|
|
});
|
|
|
|
// Mouseup: Dragging beenden
|
|
container.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
selectedShapeId = null;
|
|
});
|
|
|