canvu-react 0.4.76 → 0.4.77

package/dist/react.cjs

@@ -8551,6 +8551,42 @@ function didReadOnlyActivationMovePastTap(session, pointer, tapPx) {
   return Math.hypot(dx, dy) > tapPx;
 }
 
+// src/react/render-scheduler.ts
+var getDefaultAnimationFrameRuntime = () => typeof window === "undefined" ? {} : window;
+function createAnimationFrameRenderScheduler({
+  render,
+  runtime = getDefaultAnimationFrameRuntime()
+}) {
+  let frameId = null;
+  const canceledFrameIds = /* @__PURE__ */ new Set();
+  const request = () => {
+    if (frameId != null) return;
+    if (typeof runtime.requestAnimationFrame !== "function") {
+      render();
+      return;
+    }
+    const scheduledFrameId = runtime.requestAnimationFrame(() => {
+      const currentFrameId = scheduledFrameId;
+      if (canceledFrameIds.has(currentFrameId)) {
+        canceledFrameIds.delete(currentFrameId);
+        return;
+      }
+      if (frameId === currentFrameId) {
+        frameId = null;
+      }
+      render();
+    });
+    frameId = scheduledFrameId;
+  };
+  const cancel = () => {
+    if (frameId == null) return;
+    canceledFrameIds.add(frameId);
+    runtime.cancelAnimationFrame?.(frameId);
+    frameId = null;
+  };
+  return { request, cancel };
+}
+
 // src/react/stable-selection.ts
 function shallowEqualStringArray(a, b) {
   if (a === b) return true;
@@ -9563,6 +9599,9 @@ var VectorViewport = react.forwardRef(
     reducedMotionRef.current = reducedMotion;
     const [zoomPercent, setZoomPercent] = react.useState(100);
     const [cameraTick, setCameraTick] = react.useState(0);
+    const renderFrameSchedulerRef = react.useRef(
+      null
+    );
     const [placementPreview, setPlacementPreview] = react.useState(null);
     const [eraserTrail, setEraserTrail] = react.useState([]);
     const [laserTrail, setLaserTrail] = react.useState([]);
@@ -9943,7 +9982,7 @@ var VectorViewport = react.forwardRef(
         renderSceneWithLivePenStroke
       ]
     );
-    const renderFrame = react.useCallback(() => {
+    const renderFrameNow = react.useCallback(() => {
       const renderer = rendererRef.current;
       const cam = cameraRef.current;
       if (!renderer || !cam) return;
@@ -9956,6 +9995,14 @@ var VectorViewport = react.forwardRef(
       }
       onCameraChangeRef.current?.();
     }, []);
+    const renderFrame = react.useCallback(() => {
+      const scheduler = renderFrameSchedulerRef.current;
+      if (!scheduler) {
+        renderFrameNow();
+        return;
+      }
+      scheduler.request();
+    }, [renderFrameNow]);
     react.useEffect(() => {
       const el = sceneContainerRef.current;
       const interactionEl = interactionRootRef.current;
@@ -9974,6 +10021,9 @@ var VectorViewport = react.forwardRef(
         rasterImageCanvas: imageCanvasRenderingRef.current
       });
       rendererRef.current = renderer;
+      renderFrameSchedulerRef.current = createAnimationFrameRenderScheduler({
+        render: renderFrameNow
+      });
       renderer.setInteractionState({
         selectedIds: effectiveSelectedIdsRef.current,
         hoveredItemId: hoveredItemIdRef.current
@@ -10008,6 +10058,8 @@ var VectorViewport = react.forwardRef(
         });
       }
       return () => {
+        renderFrameSchedulerRef.current?.cancel();
+        renderFrameSchedulerRef.current = null;
         detachInput();
         detachPencil?.();
         renderer.destroy();
@@ -10016,7 +10068,7 @@ var VectorViewport = react.forwardRef(
         cameraRef.current = null;
         setCameraForOverlay(null);
       };
-    }, [applePencilNav, renderFrame, resolveReadOnlyActivation]);
+    }, [applePencilNav, renderFrame, renderFrameNow, resolveReadOnlyActivation]);
     react.useEffect(() => {
       rendererRef.current?.setInteractionState({
         selectedIds: effectiveSelectedIds,
@@ -10144,10 +10196,10 @@ var VectorViewport = react.forwardRef(
           livePenStrokeItemRef.current = null;
         }
         scene.setItems(resolvedSceneItems);
-        renderFrame();
+        renderFrameNow();
         renderer?.renderLiveItem(livePenStrokeItemRef.current);
       }
-    }, [resolvedSceneItems, renderFrame]);
+    }, [resolvedSceneItems, renderFrameNow]);
     react.useEffect(() => {
       const ids = effectiveSelectedIds;
       const valid = ids.filter((id) => items.some((i) => i.id === id));