Added throttling with 16ms

src/main.js

@@ -9,6 +9,18 @@ let offsetY = 0;
 
 const canvas = 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()
@@ -56,6 +68,11 @@ canvas.addEventListener("mousedown", (e) => {
   }
 });
 
+// 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
 canvas.addEventListener("mousemove", (e) => {
   if (!isDragging || selectedShapeId === null) return;
@@ -66,8 +83,8 @@ canvas.addEventListener("mousemove", (e) => {
   const newX = mouseX - offsetX;
   const newY = mouseY - offsetY;
 
-  // Achtung: Hier könnte man Throttling/RAF implementieren
-  moveShape(selectedShapeId, newX, newY);
+  // Use throttled version instead
+  throttledMoveShape(selectedShapeId, newX, newY);
 });
 
 // Mouseup: Dragging beenden