canvu-react 0.3.37 → 0.3.38

package/dist/react.cjs

@@ -4970,6 +4970,78 @@ var Camera2D = class {
   }
 };
 
+// src/input/pan-momentum.ts
+var VELOCITY_SAMPLE_WINDOW = 80;
+var FRICTION = 0.94;
+var MIN_VELOCITY = 0.3;
+function createPanMomentumController(camera, onUpdate, sensitivity) {
+  const samples = [];
+  let animationFrameId = null;
+  const cancel = () => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+      animationFrameId = null;
+    }
+  };
+  const reset = () => {
+    cancel();
+    samples.length = 0;
+  };
+  const recordMove = (dx, dy) => {
+    const now = performance.now();
+    samples.push({ dx, dy, time: now });
+    const cutoff = now - VELOCITY_SAMPLE_WINDOW;
+    let oldestSample = samples[0];
+    while (oldestSample && oldestSample.time < cutoff) {
+      samples.shift();
+      oldestSample = samples[0];
+    }
+  };
+  const computeReleaseVelocity = () => {
+    if (samples.length < 2) return { vx: 0, vy: 0 };
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    if (!first || !last) return { vx: 0, vy: 0 };
+    const elapsed = last.time - first.time;
+    if (elapsed < 4) return { vx: 0, vy: 0 };
+    let totalDx = 0;
+    let totalDy = 0;
+    for (const sample of samples) {
+      totalDx += sample.dx;
+      totalDy += sample.dy;
+    }
+    const msPerFrame = 1e3 / 60;
+    return {
+      vx: totalDx / elapsed * msPerFrame * sensitivity,
+      vy: totalDy / elapsed * msPerFrame * sensitivity
+    };
+  };
+  const startMomentum = () => {
+    cancel();
+    const { vx, vy } = computeReleaseVelocity();
+    samples.length = 0;
+    if (Math.abs(vx) < MIN_VELOCITY && Math.abs(vy) < MIN_VELOCITY) {
+      return;
+    }
+    let currentVx = vx;
+    let currentVy = vy;
+    const animate = () => {
+      currentVx *= FRICTION;
+      currentVy *= FRICTION;
+      if (Math.abs(currentVx) < MIN_VELOCITY && Math.abs(currentVy) < MIN_VELOCITY) {
+        animationFrameId = null;
+        return;
+      }
+      camera.x += currentVx;
+      camera.y += currentVy;
+      onUpdate();
+      animationFrameId = requestAnimationFrame(animate);
+    };
+    animationFrameId = requestAnimationFrame(animate);
+  };
+  return { recordMove, startMomentum, cancel, reset };
+}
+
 // src/input/apple-pencil-navigation.ts
 var DRAWING_LIKE_TOOLS = /* @__PURE__ */ new Set([
   "draw",
@@ -5000,6 +5072,7 @@ function attachApplePencilNavigation(options) {
   let pinchStartDist = 0;
   let pinchStartZoom = 1;
   let panLast = null;
+  let touchMomentum = null;
   const shouldIntercept = (e) => {
     if (e.pointerType !== "touch") return false;
     const tool = getCurrentToolId();
@@ -5018,6 +5091,10 @@ function attachApplePencilNavigation(options) {
       pointers.clear();
       mode = "idle";
       panLast = null;
+      if (touchMomentum) {
+        touchMomentum.cancel();
+        touchMomentum = null;
+      }
       return;
     }
     if (e.pointerType === "touch" && activePenPointerIds.size > 0) {
@@ -5027,10 +5104,18 @@ function attachApplePencilNavigation(options) {
       return;
     }
     if (!shouldIntercept(e)) return;
+    if (touchMomentum) {
+      touchMomentum.cancel();
+    }
     pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
     if (pointers.size === 1) {
       mode = "pan";
       panLast = { x: e.clientX, y: e.clientY };
+      touchMomentum = createPanMomentumController(
+        camera,
+        onUpdate,
+        touchPanSensitivity
+      );
     } else if (pointers.size === 2) {
       const vals = Array.from(pointers.values());
       const a = vals[0];
@@ -5058,6 +5143,7 @@ function attachApplePencilNavigation(options) {
       panLast = { x: e.clientX, y: e.clientY };
       camera.x += dx * touchPanSensitivity;
       camera.y += dy * touchPanSensitivity;
+      touchMomentum?.recordMove(dx, dy);
       onUpdate();
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -5104,12 +5190,20 @@ function attachApplePencilNavigation(options) {
     if (!pointers.has(e.pointerId)) return;
     pointers.delete(e.pointerId);
     if (pointers.size === 0) {
+      const wasPanning = mode === "pan";
       mode = "idle";
       panLast = null;
+      if (wasPanning && touchMomentum) {
+        touchMomentum.startMomentum();
+        touchMomentum = null;
+      }
     } else if (pointers.size === 1 && mode === "pinch") {
       mode = "pan";
       const r = Array.from(pointers.values())[0];
       panLast = r ?? null;
+      if (touchMomentum) {
+        touchMomentum.reset();
+      }
     }
     e.preventDefault();
     e.stopImmediatePropagation();
@@ -5119,6 +5213,10 @@ function attachApplePencilNavigation(options) {
   element.addEventListener("pointerup", onPointerUp, { capture: true });
   element.addEventListener("pointercancel", onPointerUp, { capture: true });
   return () => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     element.removeEventListener("pointerdown", onPointerDown, { capture: true });
     element.removeEventListener("pointermove", onPointerMove, { capture: true });
     element.removeEventListener("pointerup", onPointerUp, { capture: true });
@@ -5171,6 +5269,7 @@ function attachViewportInput(options) {
   let pinchStartZoom = 1;
   let panLast = null;
   let mousePanButton = null;
+  let touchMomentum = null;
   const onWheel = (e) => {
     if (e.ctrlKey || e.metaKey) {
       e.preventDefault();
@@ -5197,6 +5296,9 @@ function attachViewportInput(options) {
     if (touchHandledElsewhere && e.pointerType === "touch") {
       return;
     }
+    if (touchMomentum) {
+      touchMomentum.cancel();
+    }
     const panOk = allowPrimaryPointerPan();
     if (e.pointerType === "mouse" && e.button === 0) {
       if (!panOk) {
@@ -5222,6 +5324,11 @@ function attachViewportInput(options) {
       if (panOk) {
         mode = "pan";
         panLast = { x: e.clientX, y: e.clientY };
+        touchMomentum = createPanMomentumController(
+          camera,
+          onUpdate,
+          touchPanSensitivity
+        );
         e.preventDefault();
       }
     } else if (pointers.size === 2) {
@@ -5258,6 +5365,7 @@ function attachViewportInput(options) {
       panLast = { x: e.clientX, y: e.clientY };
       camera.x += dx * touchPanSensitivity;
       camera.y += dy * touchPanSensitivity;
+      touchMomentum?.recordMove(dx, dy);
       onUpdate();
       e.preventDefault();
       return;
@@ -5309,15 +5417,27 @@ function attachViewportInput(options) {
     }
     pointers.delete(e.pointerId);
     if (pointers.size === 0) {
+      const wasPanning = mode === "pan";
       mode = "idle";
       panLast = null;
+      if (wasPanning && touchMomentum) {
+        touchMomentum.startMomentum();
+        touchMomentum = null;
+      }
     } else if (pointers.size === 1 && mode === "pinch") {
       mode = "pan";
       const remaining = Array.from(pointers.values())[0];
       panLast = remaining ?? null;
+      if (touchMomentum) {
+        touchMomentum.reset();
+      }
     }
   };
   const onPointerCancel = (e) => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     onPointerUp(e);
   };
   wheelTarget.addEventListener("wheel", onWheel, { passive: false });
@@ -5326,6 +5446,10 @@ function attachViewportInput(options) {
   element.addEventListener("pointerup", onPointerUp);
   element.addEventListener("pointercancel", onPointerCancel);
   return () => {
+    if (touchMomentum) {
+      touchMomentum.cancel();
+      touchMomentum = null;
+    }
     wheelTarget.removeEventListener("wheel", onWheel);
     element.removeEventListener("pointerdown", onPointerDown);
     element.removeEventListener("pointermove", onPointerMove);
@@ -6207,6 +6331,7 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  liveOverlay = null;
   resizeObserver;
   constructor(options) {
     this.container = options.container;
@@ -6241,6 +6366,50 @@ var SvgVectorRenderer = class {
     const items = cullItemsByViewport(this.scene.getItems(), visible);
     this.syncVisibleItems(items);
     this.rootG.setAttribute("transform", formatCameraTransform(this.camera));
+    this.keepLiveOverlayOnTop();
+  }
+  /**
+   * Updates only the in-progress (live) stroke node without re-culling or
+   * re-syncing the committed scene items. Drawing tools call this on every
+   * pointer move, so it must stay O(1) regardless of how many items the
+   * board already contains.
+   *
+   * Pass `null` to remove the live overlay (e.g. when the stroke is committed).
+   */
+  renderLiveItem(item) {
+    if (!item) {
+      if (this.liveOverlay) {
+        this.liveOverlay.g.remove();
+        this.liveOverlay = null;
+      }
+      return;
+    }
+    if (!this.liveOverlay) {
+      const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
+      g.setAttribute("data-live-overlay", "true");
+      this.liveOverlay = {
+        g,
+        lastChildrenSvg: "",
+        lastTransform: ""
+      };
+      this.rootG.appendChild(g);
+    }
+    const cached = this.liveOverlay;
+    const t = formatItemPlacementTransform(item);
+    if (cached.lastTransform !== t) {
+      cached.g.setAttribute("transform", t);
+      cached.lastTransform = t;
+    }
+    if (cached.lastChildrenSvg !== item.childrenSvg) {
+      cached.g.innerHTML = item.childrenSvg;
+      cached.lastChildrenSvg = item.childrenSvg;
+    }
+    this.keepLiveOverlayOnTop();
+  }
+  keepLiveOverlayOnTop() {
+    if (this.liveOverlay && this.rootG.lastChild !== this.liveOverlay.g) {
+      this.rootG.appendChild(this.liveOverlay.g);
+    }
   }
   syncVisibleItems(items) {
     const visibleIds = /* @__PURE__ */ new Set();
@@ -6285,6 +6454,7 @@ var SvgVectorRenderer = class {
   destroy() {
     this.resizeObserver.disconnect();
     this.itemNodeCache.clear();
+    this.liveOverlay = null;
     this.svg.remove();
   }
   /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */
@@ -7761,8 +7931,6 @@ var VectorViewport = react.forwardRef(
       const hiddenIds = new Set(eraserPreviewIds);
       return resolvedItems.filter((it) => !hiddenIds.has(it.id));
     }, [eraserPreviewIds, resolvedItems]);
-    const resolvedSceneItemsRef = react.useRef(resolvedSceneItems);
-    resolvedSceneItemsRef.current = resolvedSceneItems;
     const livePenStrokeItemRef = react.useRef(null);
     const [eraserActive, setEraserActive] = react.useState(false);
     const [editingTextId, setEditingTextId] = react.useState(null);
@@ -7983,12 +8151,9 @@ var VectorViewport = react.forwardRef(
     const renderSceneWithLivePenStroke = react.useCallback(
       (item) => {
         livePenStrokeItemRef.current = item;
-        const scene = sceneRef.current;
         const renderer = rendererRef.current;
-        if (!scene || !renderer) return;
-        const base2 = resolvedSceneItemsRef.current;
-        scene.setItems(item ? [...base2, item] : base2);
-        renderer.render();
+        if (!renderer) return;
+        renderer.renderLiveItem(item);
       },
       []
     );
@@ -8219,16 +8384,15 @@ var VectorViewport = react.forwardRef(
     }, []);
     react.useEffect(() => {
       const scene = sceneRef.current;
+      const renderer = rendererRef.current;
       if (scene) {
         const live = livePenStrokeItemRef.current;
         if (live && resolvedSceneItems.some((it) => it.id === live.id)) {
           livePenStrokeItemRef.current = null;
         }
-        const currentLive = livePenStrokeItemRef.current;
-        scene.setItems(
-          currentLive ? [...resolvedSceneItems, currentLive] : resolvedSceneItems
-        );
+        scene.setItems(resolvedSceneItems);
         renderFrame();
+        renderer?.renderLiveItem(livePenStrokeItemRef.current);
       }
     }, [resolvedSceneItems, renderFrame]);
     react.useEffect(() => {
@@ -8804,11 +8968,12 @@ var VectorViewport = react.forwardRef(
       setEditingTextId(null);
     }, []);
     const placeImageFilesAtWorld = react.useCallback(
-      async (files, worldX, worldY) => {
+      async (files, worldX, worldY, options) => {
         const change = onItemsChangeRef.current;
         if (!change || files.length === 0) return;
         const store = imageStoreRef.current;
         if (!store) return;
+        const stackBelowExistingItems = options?.stackBelowExistingItems ?? true;
         try {
           const pdfFiles = files.filter((file) => file.type === "application/pdf");
           if (pdfFiles.length > 0) {
@@ -8834,7 +8999,7 @@ var VectorViewport = react.forwardRef(
           }
           const result = await ingestAssetFilesToSceneItems({
             files,
-            existingItems: itemsRef.current,
+            existingItems: stackBelowExistingItems ? itemsRef.current : [],
             worldCenter: {
               x: worldX,
               y: worldY
@@ -8921,7 +9086,9 @@ var VectorViewport = react.forwardRef(
         );
         if (files.length === 0) return;
         const { worldX, worldY } = screenToWorld(e.clientX, e.clientY);
-        await placeImageFilesAtWorld(files, worldX, worldY);
+        await placeImageFilesAtWorld(files, worldX, worldY, {
+          stackBelowExistingItems: false
+        });
       },
       [screenToWorld, placeImageFilesAtWorld]
     );