86 lines
2.3 KiB
JavaScript
86 lines
2.3 KiB
JavaScript
// main.js
|
|
import { initRepo, addCircle, addTriangle, moveShape } from "./docManager.js"
|
|
import { createOrUpdateShapes } 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Initialize the document
|
|
const handle = await initRepo()
|
|
|
|
|
|
// draw current state
|
|
createOrUpdateShapes(container, handle.docSync().shapes)
|
|
|
|
// 2. Subscribe so we can re-render whenever doc changes
|
|
handle.on("change", (change) => {
|
|
createOrUpdateShapes(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;
|
|
}
|
|
});
|
|
|
|
// Throttled version of moveShape
|
|
const throttledMoveShape = throttle((shapeId, x, y) => {
|
|
moveShape(shapeId, x, y);
|
|
}, 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;
|
|
|
|
throttledMoveShape(selectedShapeId, newX, newY);
|
|
});
|
|
|
|
// Mouseup: Dragging beenden
|
|
container.addEventListener("mouseup", () => {
|
|
isDragging = false;
|
|
selectedShapeId = null;
|
|
});
|
|
|