canvu-react 0.4.64 → 0.4.65

package/dist/react.cjs

@@ -5653,7 +5653,7 @@ function attachViewportInput(options) {
     if (touchMomentum) {
       touchMomentum.cancel();
     }
-    const panOk = allowPrimaryPointerPan();
+    const panOk = allowPrimaryPointerPan(e);
     if (e.pointerType === "mouse" && e.button === 0) {
       if (!panOk) {
         return;
@@ -7677,6 +7677,93 @@ function PresenceRemoteLayer({
   );
 }
 
+// src/react/read-only-activation.ts
+function findReadOnlyItemClickPlacement(item, placements) {
+  const toolId = item.customToolId;
+  if (!toolId) return null;
+  return [...placements].reverse().find(
+    (placement) => placement.toolId === toolId && placement.onSelectModeItemClick
+  ) ?? null;
+}
+function resolveReadOnlyActivationTarget(input) {
+  const {
+    pointer,
+    camera,
+    container,
+    items,
+    detailItems = items,
+    placements,
+    scope,
+    selectedIds
+  } = input;
+  const rect = container.getBoundingClientRect();
+  const world = camera.screenToWorld(
+    pointer.clientX - rect.left,
+    pointer.clientY - rect.top
+  );
+  const hit = hitTestWorldPoint(items, world.worldX, world.worldY, {
+    lineHitWorld: 10 / camera.zoom,
+    ignoreLocked: true
+  });
+  if (!hit) return null;
+  const customPlacement = findReadOnlyItemClickPlacement(hit, placements);
+  if (customPlacement?.onSelectModeItemClick) {
+    return {
+      item: hit,
+      activation: "custom",
+      worldX: world.worldX,
+      worldY: world.worldY
+    };
+  }
+  if (scope === "all") {
+    return {
+      item: hit,
+      activation: "read-only",
+      worldX: world.worldX,
+      worldY: world.worldY
+    };
+  }
+  if (typeof scope === "function") {
+    const allowed = scope({
+      item: hit,
+      worldX: world.worldX,
+      worldY: world.worldY,
+      clientX: pointer.clientX,
+      clientY: pointer.clientY,
+      pointerType: pointer.pointerType,
+      shiftKey: pointer.shiftKey,
+      altKey: pointer.altKey,
+      metaKey: pointer.metaKey,
+      ctrlKey: pointer.ctrlKey,
+      items: detailItems,
+      selectedIds
+    });
+    if (allowed) {
+      return {
+        item: hit,
+        activation: "read-only",
+        worldX: world.worldX,
+        worldY: world.worldY
+      };
+    }
+  }
+  return null;
+}
+function createReadOnlyActivationSession(target, pointer) {
+  return {
+    pointerId: pointer.pointerId,
+    itemId: target.item.id,
+    activation: target.activation,
+    startWorld: { x: target.worldX, y: target.worldY },
+    startScreen: { x: pointer.clientX, y: pointer.clientY }
+  };
+}
+function didReadOnlyActivationMovePastTap(session, pointer, tapPx) {
+  const dx = pointer.clientX - session.startScreen.x;
+  const dy = pointer.clientY - session.startScreen.y;
+  return Math.hypot(dx, dy) > tapPx;
+}
+
 // src/react/stable-selection.ts
 function shallowEqualStringArray(a, b) {
   if (a === b) return true;
@@ -8030,13 +8117,6 @@ function isDefaultMarkerToolStyle(style) {
 function tagCustomPlacementItem(item, toolId) {
   return item.customToolId === toolId ? item : { ...item, customToolId: toolId };
 }
-function findSelectModeItemClickPlacement(item, placements) {
-  const toolId = item.customToolId;
-  if (!toolId) return null;
-  return [...placements].reverse().find(
-    (placement) => placement.toolId === toolId && placement.onSelectModeItemClick
-  ) ?? null;
-}
 function mergeToolListById(baseTools, pluginTools) {
   const next = [...baseTools];
   for (const tool of pluginTools) {
@@ -8164,6 +8244,7 @@ var VectorViewport = react.forwardRef(
     toolId = "hand",
     applePencilNav = false,
     interactive = false,
+    readOnlyInteraction,
     selectedIds: selectedIdsProp,
     onSelectionChange,
     onItemsChange: consumerOnItemsChange,
@@ -8366,6 +8447,8 @@ var VectorViewport = react.forwardRef(
     );
     const toolIdRef = react.useRef(toolId);
     const interactiveRef = react.useRef(interactive);
+    const readOnlyInteractionRef = react.useRef(readOnlyInteraction);
+    readOnlyInteractionRef.current = readOnlyInteraction;
     const reducedMotionRef = react.useRef(false);
     const itemsRef = react.useRef(items);
     const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
@@ -8379,6 +8462,7 @@ var VectorViewport = react.forwardRef(
     const allCustomPlacementsRef = react.useRef(allCustomPlacements);
     allCustomPlacementsRef.current = allCustomPlacements;
     const dragStateRef = react.useRef({ kind: "idle" });
+    const readOnlyItemClickStateRef = react.useRef(null);
     const clipboardRef = react.useRef(null);
     const undoStackRef = react.useRef([]);
     const redoStackRef = react.useRef([]);
@@ -8556,6 +8640,31 @@ var VectorViewport = react.forwardRef(
     );
     const resolvedItemsRef = react.useRef(resolvedItems);
     resolvedItemsRef.current = resolvedItems;
+    const readOnlyActivationResolutionCacheRef = react.useRef(/* @__PURE__ */ new WeakMap());
+    const resolveReadOnlyActivation = react.useCallback(
+      (pointer) => {
+        const cache = readOnlyActivationResolutionCacheRef.current;
+        if (cache.has(pointer)) return cache.get(pointer) ?? null;
+        let target = null;
+        const cam = cameraRef.current;
+        const container = sceneContainerRef.current;
+        if (!interactiveRef.current && toolIdRef.current === "select" && cam && container) {
+          target = resolveReadOnlyActivationTarget({
+            pointer,
+            camera: cam,
+            container,
+            items: resolvedItemsRef.current,
+            detailItems: itemsRef.current,
+            placements: allCustomPlacementsRef.current,
+            scope: readOnlyInteractionRef.current?.itemClicks ?? "custom",
+            selectedIds: effectiveSelectedIdsRef.current
+          });
+        }
+        cache.set(pointer, target);
+        return target;
+      },
+      []
+    );
     const liveId = react.useId();
     const reducedMotion = usePrefersReducedMotion();
     reducedMotionRef.current = reducedMotion;
@@ -8985,12 +9094,14 @@ var VectorViewport = react.forwardRef(
         onUpdate: renderFrame,
         wheelElement: wrapperRef.current ?? void 0,
         touchHandledElsewhere: applePencilNav,
-        allowPrimaryPointerPan: () => {
+        allowPrimaryPointerPan: (event) => {
           if (interactiveRef.current) {
             return toolIdRef.current === "hand";
           }
           const t = toolIdRef.current;
-          return t === "hand" || t === "select";
+          if (t === "hand") return true;
+          if (t !== "select") return false;
+          return resolveReadOnlyActivation(event) === null;
         }
       });
       let detachPencil;
@@ -9011,7 +9122,7 @@ var VectorViewport = react.forwardRef(
         cameraRef.current = null;
         setCameraForOverlay(null);
       };
-    }, [applePencilNav, renderFrame]);
+    }, [applePencilNav, renderFrame, resolveReadOnlyActivation]);
     react.useEffect(() => {
       rendererRef.current?.setInteractionState({
         selectedIds: effectiveSelectedIds,
@@ -9525,6 +9636,29 @@ var VectorViewport = react.forwardRef(
       const rect = el.getBoundingClientRect();
       return cam.screenToWorld(clientX - rect.left, clientY - rect.top);
     }, []);
+    const buildSelectModeItemClickDetail = react.useCallback(
+      (item, world, pointer) => ({
+        item,
+        worldX: world.worldX,
+        worldY: world.worldY,
+        clientX: pointer.clientX,
+        clientY: pointer.clientY,
+        pointerType: pointer.pointerType,
+        shiftKey: pointer.shiftKey,
+        altKey: pointer.altKey,
+        metaKey: pointer.metaKey,
+        ctrlKey: pointer.ctrlKey,
+        items: itemsRef.current,
+        updateItem: (next) => {
+          onItemsChangeRef.current?.(replaceItem(itemsRef.current, item.id, next), {
+            motive: "custom",
+            itemIds: [item.id]
+          });
+        },
+        setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
+      }),
+      []
+    );
     const handleOverlayContextMenu = react.useCallback(
       (e) => {
         if (!interactiveRef.current || !onItemsChangeRef.current) return;
@@ -9951,6 +10085,118 @@ var VectorViewport = react.forwardRef(
       },
       [screenToWorld]
     );
+    react.useEffect(() => {
+      const root = interactionRootRef.current;
+      if (!root) return;
+      const onReadOnlyPointerDownCapture = (e) => {
+        if (e.button !== 0) return;
+        if (readOnlyItemClickStateRef.current) return;
+        const target = resolveReadOnlyActivation(e);
+        if (!target) return;
+        const accepted = startCanvuInteraction({
+          kind: "select-mode-item-click",
+          toolId: "select",
+          pointerType: e.pointerType,
+          button: e.button,
+          worldX: target.worldX,
+          worldY: target.worldY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          shiftKey: e.shiftKey,
+          altKey: e.altKey,
+          metaKey: e.metaKey,
+          ctrlKey: e.ctrlKey,
+          itemIds: [target.item.id]
+        });
+        if (!accepted) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+        wrapperRef.current?.focus({ preventScroll: true });
+        readOnlyItemClickStateRef.current = createReadOnlyActivationSession(
+          target,
+          e
+        );
+        e.preventDefault();
+        e.stopPropagation();
+      };
+      root.addEventListener("pointerdown", onReadOnlyPointerDownCapture, {
+        capture: true
+      });
+      return () => {
+        root.removeEventListener("pointerdown", onReadOnlyPointerDownCapture, {
+          capture: true
+        });
+      };
+    }, [resolveReadOnlyActivation, startCanvuInteraction]);
+    react.useEffect(() => {
+      const finishReadOnlyClick = (ev) => {
+        const st = readOnlyItemClickStateRef.current;
+        if (!st || st.pointerId !== ev.pointerId) return;
+        readOnlyItemClickStateRef.current = null;
+        const world = screenToWorld(ev.clientX, ev.clientY);
+        const current = {
+          worldX: world.worldX,
+          worldY: world.worldY,
+          clientX: ev.clientX,
+          clientY: ev.clientY
+        };
+        updateCanvuInteractionCurrent(current);
+        if (ev.type === "pointercancel") {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        if (didReadOnlyActivationMovePastTap(st, ev, TAP_PX)) {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        const item = itemsRef.current.find((candidate) => candidate.id === st.itemId) ?? resolvedItemsRef.current.find((candidate) => candidate.id === st.itemId);
+        if (!item) {
+          finishCanvuInteraction("cancelled", { current });
+          return;
+        }
+        const detail = buildSelectModeItemClickDetail(item, world, ev);
+        if (st.activation === "custom") {
+          const placement = findReadOnlyItemClickPlacement(
+            item,
+            allCustomPlacementsRef.current
+          );
+          const onSelectModeItemClick = placement?.onSelectModeItemClick;
+          if (!onSelectModeItemClick) {
+            finishCanvuInteraction("cancelled", { current });
+            return;
+          }
+          onSelectModeItemClick(detail);
+          finishCanvuInteraction("completed", {
+            current,
+            info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+          });
+          return;
+        }
+        const handled = readOnlyInteractionRef.current?.onItemClick?.(detail) === "handled";
+        if (!handled) {
+          const cur = effectiveSelectedIdsRef.current;
+          const next = ev.shiftKey ? cur.includes(item.id) ? cur.filter((id) => id !== item.id) : [...cur, item.id] : [item.id];
+          setEffectiveSelectedIdsRef.current(next);
+        }
+        finishCanvuInteraction("completed", {
+          current,
+          info: { motive: "custom", itemIds: [item.id], toolId: "select" }
+        });
+      };
+      document.addEventListener("pointerup", finishReadOnlyClick);
+      document.addEventListener("pointercancel", finishReadOnlyClick);
+      return () => {
+        document.removeEventListener("pointerup", finishReadOnlyClick);
+        document.removeEventListener("pointercancel", finishReadOnlyClick);
+      };
+    }, [
+      buildSelectModeItemClickDetail,
+      finishCanvuInteraction,
+      screenToWorld,
+      updateCanvuInteractionCurrent
+    ]);
     const handleOverlayPointerDown = react.useCallback(
       (e) => {
         let currentDragState = dragStateRef.current;
@@ -10129,7 +10375,7 @@ var VectorViewport = react.forwardRef(
             ignoreLocked: true
           });
           if (hit) {
-            const selectModeClickPlacement = !e.shiftKey ? findSelectModeItemClickPlacement(hit, allCustomPlacementsRef.current) : null;
+            const selectModeClickPlacement = !e.shiftKey ? findReadOnlyItemClickPlacement(hit, allCustomPlacementsRef.current) : null;
             if (selectModeClickPlacement) {
               const isAlreadySelected = cur.includes(hit.id);
               const moveIds = isAlreadySelected ? [...cur] : [hit.id];
@@ -11036,7 +11282,7 @@ var VectorViewport = react.forwardRef(
             });
             return;
           }
-          const placement = findSelectModeItemClickPlacement(
+          const placement = findReadOnlyItemClickPlacement(
             item,
             allCustomPlacementsRef.current
           );
@@ -11047,27 +11293,9 @@ var VectorViewport = react.forwardRef(
             });
             return;
           }
-          const { worldX, worldY } = currentWorld;
-          onSelectModeItemClick({
-            item,
-            worldX,
-            worldY,
-            clientX: ev.clientX,
-            clientY: ev.clientY,
-            pointerType: ev.pointerType,
-            shiftKey: ev.shiftKey,
-            altKey: ev.altKey,
-            metaKey: ev.metaKey,
-            ctrlKey: ev.ctrlKey,
-            items: itemsRef.current,
-            updateItem: (next) => {
-              onItemsChangeRef.current?.(
-                replaceItem(itemsRef.current, item.id, next),
-                { motive: "custom", itemIds: [item.id] }
-              );
-            },
-            setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
-          });
+          onSelectModeItemClick(
+            buildSelectModeItemClickDetail(item, currentWorld, ev)
+          );
           finishCanvuInteraction("completed", {
             current: currentInteractionPoint,
             info: { motive: "custom", itemIds: [item.id], toolId: "select" }
@@ -11437,6 +11665,7 @@ var VectorViewport = react.forwardRef(
         document.removeEventListener("pointercancel", onUp);
       };
     }, [
+      buildSelectModeItemClickDetail,
       emitRemoteStrokePreview,
       emitRemoteStrokePreviewClear,
       interactive,