canvu-react 0.3.36 → 0.3.38

package/dist/index.d.cts

@@ -195,12 +195,23 @@ declare class SvgVectorRenderer {
     private readonly svg;
     private readonly rootG;
     private readonly itemNodeCache;
+    private liveOverlay;
     private readonly resizeObserver;
     constructor(options: SvgVectorRendererOptions);
     /**
      * Reads container size, culls items, and updates the SVG (incrementally when possible).
      */
     render(): void;
+    /**
+     * 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: VectorSceneItem | null): void;
+    private keepLiveOverlayOnTop;
     private syncVisibleItems;
     destroy(): void;
     /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */

package/dist/index.d.ts

@@ -195,12 +195,23 @@ declare class SvgVectorRenderer {
     private readonly svg;
     private readonly rootG;
     private readonly itemNodeCache;
+    private liveOverlay;
     private readonly resizeObserver;
     constructor(options: SvgVectorRendererOptions);
     /**
      * Reads container size, culls items, and updates the SVG (incrementally when possible).
      */
     render(): void;
+    /**
+     * 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: VectorSceneItem | null): void;
+    private keepLiveOverlayOnTop;
     private syncVisibleItems;
     destroy(): void;
     /** Toggle whether the scene SVG receives pointer events (vs overlay handling them). */

package/dist/index.js

@@ -407,6 +407,78 @@ async function loadImageFileAsRasterSceneSource(file, maxDimensionOrOptions) {
   }
 }
 
+// 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",
@@ -437,6 +509,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();
@@ -455,6 +528,10 @@ function attachApplePencilNavigation(options) {
       pointers.clear();
       mode = "idle";
       panLast = null;
+      if (touchMomentum) {
+        touchMomentum.cancel();
+        touchMomentum = null;
+      }
       return;
     }
     if (e.pointerType === "touch" && activePenPointerIds.size > 0) {
@@ -464,10 +541,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];
@@ -495,6 +580,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();
@@ -541,12 +627,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();
@@ -556,6 +650,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 });
@@ -608,6 +706,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();
@@ -634,6 +733,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) {
@@ -659,6 +761,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) {
@@ -695,6 +802,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;
@@ -746,15 +854,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 });
@@ -763,6 +883,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);
@@ -2475,6 +2599,7 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  liveOverlay = null;
   resizeObserver;
   constructor(options) {
     this.container = options.container;
@@ -2509,6 +2634,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();
@@ -2553,6 +2722,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). */