canvu-react 0.3.27 → 0.3.29

package/dist/react.cjs

@@ -3651,6 +3651,10 @@ var TOOLBAR_TOOLTIP_CSS = `
 	opacity: 1;
 	visibility: visible;
 }
+[data-slot="vector-canvas-toolbar"][data-position^="top-"] .vector-toolbar-tip {
+	top: calc(100% + 8px);
+	bottom: auto;
+}
 `;
 var OVERFLOW_MENU_CSS = `
 .vector-toolbar-overflow-panel {
@@ -3733,6 +3737,10 @@ var OVERFLOW_MENU_CSS = `
 	opacity: 1;
 	visibility: visible;
 }
+[data-slot="vector-canvas-toolbar"][data-position^="top-"] .vector-toolbar-overflow-tip {
+	top: calc(100% + 8px);
+	bottom: auto;
+}
 .vector-toolbar-overflow-cell > button {
 	background: rgba(24,24,27,0.05);
 }
@@ -7470,7 +7478,14 @@ var VectorViewport = react.forwardRef(
     onPlacementPreviewChangeRef.current = onPlacementPreviewChange;
     const directRemoteStrokePreviewRef = react.useRef(false);
     const remoteStrokePreviewFrameRef = react.useRef(null);
+    const remoteStrokePreviewClearTimerRef = react.useRef(null);
     const pendingRemoteStrokePreviewRef = react.useRef(null);
+    const cancelPendingRemoteStrokePreviewClear = react.useCallback(() => {
+      if (remoteStrokePreviewClearTimerRef.current != null) {
+        clearTimeout(remoteStrokePreviewClearTimerRef.current);
+        remoteStrokePreviewClearTimerRef.current = null;
+      }
+    }, []);
     const flushRemoteStrokePreviewWithStyle = react.useCallback(() => {
       remoteStrokePreviewFrameRef.current = null;
       const pending = pendingRemoteStrokePreviewRef.current;
@@ -7485,6 +7500,7 @@ var VectorViewport = react.forwardRef(
     const emitRemoteStrokePreview = react.useCallback(
       (tool, points) => {
         if (tool === "laser") return;
+        cancelPendingRemoteStrokePreviewClear();
         directRemoteStrokePreviewRef.current = true;
         pendingRemoteStrokePreviewRef.current = { tool, points };
         if (remoteStrokePreviewFrameRef.current != null) return;
@@ -7492,17 +7508,22 @@ var VectorViewport = react.forwardRef(
           flushRemoteStrokePreviewWithStyle
         );
       },
-      [flushRemoteStrokePreviewWithStyle]
+      [cancelPendingRemoteStrokePreviewClear, flushRemoteStrokePreviewWithStyle]
     );
+    const REMOTE_STROKE_PREVIEW_HOLD_MS = 350;
     const emitRemoteStrokePreviewClear = react.useCallback(() => {
       if (remoteStrokePreviewFrameRef.current != null) {
         cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
         remoteStrokePreviewFrameRef.current = null;
       }
-      pendingRemoteStrokePreviewRef.current = null;
-      directRemoteStrokePreviewRef.current = false;
-      onPlacementPreviewChangeRef.current?.(null);
-    }, []);
+      cancelPendingRemoteStrokePreviewClear();
+      remoteStrokePreviewClearTimerRef.current = window.setTimeout(() => {
+        remoteStrokePreviewClearTimerRef.current = null;
+        pendingRemoteStrokePreviewRef.current = null;
+        directRemoteStrokePreviewRef.current = false;
+        onPlacementPreviewChangeRef.current?.(null);
+      }, REMOTE_STROKE_PREVIEW_HOLD_MS);
+    }, [cancelPendingRemoteStrokePreviewClear]);
     const overlayCameraTickRef = react.useRef(false);
     overlayCameraTickRef.current = interactive || remotePresence != null && remotePresence.length > 0 || presenceOverlay != null;
     const pruneEraserTrail = react.useCallback(
@@ -7755,6 +7776,9 @@ var VectorViewport = react.forwardRef(
         if (remoteStrokePreviewFrameRef.current != null) {
           cancelAnimationFrame(remoteStrokePreviewFrameRef.current);
         }
+        if (remoteStrokePreviewClearTimerRef.current != null) {
+          clearTimeout(remoteStrokePreviewClearTimerRef.current);
+        }
       };
     }, []);
     react.useEffect(() => {