canvu-react 0.4.40 → 0.4.42

package/dist/native.d.cts

@@ -189,6 +189,19 @@ declare const DEFAULT_NATIVE_VECTOR_TOOLS: readonly NativeVectorToolDefinition[]
  */
 declare function NativeVectorToolbar({ value, onChange, tools, overflowToolIds, overflowMenuAccessibilityLabel, disabled, disabledToolIds, showToolLockToggle, toolLocked, onToolLockedChange, density, accessibilityLabel, style, contentContainerStyle, overflowPanelStyle, toolButtonStyle, activeToolButtonStyle, toolLabelStyle, activeToolLabelStyle, renderToolIcon, renderToolLockIcon, renderOverflowIcon, renderOverflowChevronIcon, renderToolButton, }: NativeVectorToolbarProps): react_jsx_runtime.JSX.Element;
 
+type NativeRemotePresenceHitTarget = "cursor" | "label";
+type NativeRemotePresenceHit = {
+    readonly peer: RemotePresencePeer;
+    readonly followId: string;
+    readonly target: NativeRemotePresenceHitTarget;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly worldX: number;
+    readonly worldY: number;
+    readonly clientId?: string;
+    readonly peerId?: string;
+};
+
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -215,6 +228,15 @@ type NativeWorldPointerDownDetail = {
     readonly screenX: number;
     readonly screenY: number;
 };
+/**
+ * Detail emitted when a native pointer/touch begins on a remote realtime
+ * participant label or cursor.
+ *
+ * Pass `followId` into your `followedPeerId` state for
+ * `useRealtimePeerFollow(...)`. For realtime-session peers this is the
+ * connection `clientId`, matching the session peer `id`.
+ */
+type NativeRemotePresencePressDetail = NativeRemotePresenceHit;
 /**
  * Optional override for a link item inserted from the native link tool.
  *
@@ -287,6 +309,7 @@ type NativeVectorViewportProps = {
     readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
     readonly linkToolDialogLabels?: NativeLinkToolDialogLabels;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
+    readonly onRemotePresencePress?: (detail: NativeRemotePresencePressDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
         readonly y: number;
@@ -434,4 +457,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.d.ts

@@ -189,6 +189,19 @@ declare const DEFAULT_NATIVE_VECTOR_TOOLS: readonly NativeVectorToolDefinition[]
  */
 declare function NativeVectorToolbar({ value, onChange, tools, overflowToolIds, overflowMenuAccessibilityLabel, disabled, disabledToolIds, showToolLockToggle, toolLocked, onToolLockedChange, density, accessibilityLabel, style, contentContainerStyle, overflowPanelStyle, toolButtonStyle, activeToolButtonStyle, toolLabelStyle, activeToolLabelStyle, renderToolIcon, renderToolLockIcon, renderOverflowIcon, renderOverflowChevronIcon, renderToolButton, }: NativeVectorToolbarProps): react_jsx_runtime.JSX.Element;
 
+type NativeRemotePresenceHitTarget = "cursor" | "label";
+type NativeRemotePresenceHit = {
+    readonly peer: RemotePresencePeer;
+    readonly followId: string;
+    readonly target: NativeRemotePresenceHitTarget;
+    readonly screenX: number;
+    readonly screenY: number;
+    readonly worldX: number;
+    readonly worldY: number;
+    readonly clientId?: string;
+    readonly peerId?: string;
+};
+
 type NativeCustomShapePlacementOptions = {
     readonly toolId: string;
     readonly createItem: (args: {
@@ -215,6 +228,15 @@ type NativeWorldPointerDownDetail = {
     readonly screenX: number;
     readonly screenY: number;
 };
+/**
+ * Detail emitted when a native pointer/touch begins on a remote realtime
+ * participant label or cursor.
+ *
+ * Pass `followId` into your `followedPeerId` state for
+ * `useRealtimePeerFollow(...)`. For realtime-session peers this is the
+ * connection `clientId`, matching the session peer `id`.
+ */
+type NativeRemotePresencePressDetail = NativeRemotePresenceHit;
 /**
  * Optional override for a link item inserted from the native link tool.
  *
@@ -287,6 +309,7 @@ type NativeVectorViewportProps = {
     readonly onLinkToolRequest?: (detail: NativeLinkToolRequestDetail) => void;
     readonly linkToolDialogLabels?: NativeLinkToolDialogLabels;
     readonly onWorldPointerDown?: (detail: NativeWorldPointerDownDetail) => void;
+    readonly onRemotePresencePress?: (detail: NativeRemotePresencePressDetail) => void;
     readonly onWorldPointerMove?: (world: {
         readonly x: number;
         readonly y: number;
@@ -434,4 +457,4 @@ type SvgNode = SvgRectNode | SvgEllipseNode | SvgCircleNode | SvgLineNode | SvgP
  */
 declare function parseSvgFragment(xml: string): SvgNode[];
 
-export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };
+export { CanvuLinkData, DEFAULT_NATIVE_OVERFLOW_TOOL_IDS, DEFAULT_NATIVE_VECTOR_TOOLS, NATIVE_STYLE_PALETTE, type NativeCustomShapePlacementOptions, NativeInteractionOverlay, type NativeInteractionOverlayProps, type NativeLinkToolDialogLabels, type NativeLinkToolInsertOptions, type NativeLinkToolRequestDetail, type NativeRemotePresencePressDetail, NativeSceneRenderer, type NativeSceneRendererProps, NativeShapeRenderer, type NativeShapeRendererProps, type NativeStyleColor, NativeVectorStyleInspector, type NativeVectorStyleInspectorProps, type NativeVectorStyleToolId, type NativeVectorToolDefinition, NativeVectorToolbar, type NativeVectorToolbarDensity, type NativeVectorToolbarProps, type NativeVectorToolbarRenderOverflowInput, type NativeVectorToolbarRenderToolInput, type NativeVectorToolbarRenderToolLockInput, NativeVectorViewport, type NativeVectorViewportHandle, type NativeVectorViewportProps, type NativeWorldPointerDownDetail, type PlacementPreview, type SvgNode, VectorSceneItem, nativeStyleColorWithOpacity, normalizeNativeStyleHex, parseSvgFragment };

package/dist/native.js

@@ -4672,6 +4672,84 @@ function resizeItemByHandle(item, start, handle, currentWorld) {
   }
   return { ...item, x: nb.x, y: nb.y, bounds: nb };
 }
+
+// src/native/native-remote-presence-hit-test.ts
+var REMOTE_CURSOR_SCREEN_PX2 = 22;
+var REMOTE_LABEL_SCREEN_PX2 = 12;
+var REMOTE_LABEL_OFFSET_X = 14;
+var REMOTE_LABEL_BASELINE_OFFSET_Y = 18;
+var REMOTE_LABEL_AVERAGE_CHAR_PX = 7;
+var REMOTE_LABEL_MAX_WIDTH_PX = 180;
+var REMOTE_LABEL_MIN_HIT_WIDTH_PX = 44;
+var REMOTE_LABEL_HIT_PADDING_X = 10;
+var REMOTE_LABEL_HIT_PADDING_Y = 10;
+var REMOTE_CURSOR_MIN_HIT_SIZE_PX = 36;
+function pointInScreenRect(point, rect) {
+  return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
+}
+function displayLabelForPeer(peer) {
+  const displayName = peer.displayName?.trim();
+  if (displayName) return displayName;
+  return null;
+}
+function followIdForPeer(peer) {
+  return peer.clientId ?? peer.peerId ?? peer.id;
+}
+function estimateLabelWidth(label) {
+  return Math.max(
+    REMOTE_LABEL_MIN_HIT_WIDTH_PX,
+    Math.min(REMOTE_LABEL_MAX_WIDTH_PX, label.length * REMOTE_LABEL_AVERAGE_CHAR_PX)
+  );
+}
+function buildHit(peer, camera, point, target) {
+  const world = camera.screenToWorld(point.x, point.y);
+  return {
+    peer,
+    followId: followIdForPeer(peer),
+    target,
+    screenX: point.x,
+    screenY: point.y,
+    worldX: world.worldX,
+    worldY: world.worldY,
+    ...peer.clientId ? { clientId: peer.clientId } : {},
+    ...peer.peerId ? { peerId: peer.peerId } : {}
+  };
+}
+function hitTestNativeRemotePresence(peers, camera, point) {
+  for (let index = peers.length - 1; index >= 0; index -= 1) {
+    const peer = peers[index];
+    if (!peer || peer.isSelf || !peer.cursor) continue;
+    const cursorScreen = camera.worldToScreen(peer.cursor.x, peer.cursor.y);
+    const label = displayLabelForPeer(peer);
+    if (label) {
+      const labelX = cursorScreen.screenX + REMOTE_LABEL_OFFSET_X;
+      const labelBaselineY = cursorScreen.screenY + REMOTE_LABEL_BASELINE_OFFSET_Y;
+      const labelRect = {
+        x: labelX - REMOTE_LABEL_HIT_PADDING_X,
+        y: labelBaselineY - REMOTE_LABEL_SCREEN_PX2 - REMOTE_LABEL_HIT_PADDING_Y,
+        width: estimateLabelWidth(label) + REMOTE_LABEL_HIT_PADDING_X * 2,
+        height: REMOTE_LABEL_SCREEN_PX2 + REMOTE_LABEL_HIT_PADDING_Y * 2
+      };
+      if (pointInScreenRect(point, labelRect)) {
+        return buildHit(peer, camera, point, "label");
+      }
+    }
+    const cursorHitSize = Math.max(
+      REMOTE_CURSOR_MIN_HIT_SIZE_PX,
+      REMOTE_CURSOR_SCREEN_PX2
+    );
+    const cursorRect = {
+      x: cursorScreen.screenX - (cursorHitSize - REMOTE_CURSOR_SCREEN_PX2) / 2,
+      y: cursorScreen.screenY - (cursorHitSize - REMOTE_CURSOR_SCREEN_PX2) / 2,
+      width: cursorHitSize,
+      height: cursorHitSize
+    };
+    if (pointInScreenRect(point, cursorRect)) {
+      return buildHit(peer, camera, point, "cursor");
+    }
+  }
+  return null;
+}
 var DEFAULT_NATIVE_LINK_TOOL_DIALOG_LABELS = {
   title: "Add link",
   description: "Paste the link you want to add to the board.",
@@ -4689,6 +4767,8 @@ var MARKER_TOOL_STYLE = {
 };
 var NATIVE_VIEWPORT_OVERLAY_Z_INDEX = 40;
 var NATIVE_VIEWPORT_OVERLAY_ELEVATION = 40;
+var NATIVE_VIEWPORT_EXTERNAL_OVERLAY_Z_INDEX = 20;
+var NATIVE_VIEWPORT_EXTERNAL_OVERLAY_ELEVATION = 20;
 function isPlacementTool(toolId) {
   return toolId === "rect" || toolId === "ellipse" || toolId === "architectural-cloud" || toolId === "line" || toolId === "arrow";
 }
@@ -4766,6 +4846,7 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onLinkToolRequest,
   linkToolDialogLabels,
   onWorldPointerDown,
+  onRemotePresencePress,
   onWorldPointerMove,
   onWorldPointerLeave,
   onPlacementPreviewChange,
@@ -4789,6 +4870,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
+  const onRemotePresencePressRef = useRef(onRemotePresencePress);
+  onRemotePresencePressRef.current = onRemotePresencePress;
   const onWorldPointerMoveRef = useRef(onWorldPointerMove);
   onWorldPointerMoveRef.current = onWorldPointerMove;
   const onWorldPointerLeaveRef = useRef(onWorldPointerLeave);
@@ -4809,6 +4892,8 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
   itemsRef.current = items;
   const selectedIdsRef = useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
+  const remotePresenceRef = useRef(remotePresence);
+  remotePresenceRef.current = remotePresence;
   const dragStateRef = useRef({ kind: "idle" });
   const [placementPreview, setPlacementPreviewState] = useState(null);
   const setRealtimePlacementPreview = useCallback(
@@ -4968,13 +5053,19 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
       const sx = point.x;
       const sy = point.y;
       updateToolCursorPoint(point);
+      const cam = cameraRef.current;
+      if (!cam) return;
+      const remotePresenceHit = interactive && onRemotePresencePressRef.current ? hitTestNativeRemotePresence(remotePresenceRef.current, cam, point) : null;
+      if (remotePresenceHit) {
+        dragStateRef.current = { kind: "idle" };
+        onRemotePresencePressRef.current?.(remotePresenceHit);
+        return;
+      }
       if (!interactive) {
         dragStateRef.current = { kind: "pan" };
         return;
       }
       const tool = toolIdRef.current;
-      const cam = cameraRef.current;
-      if (!cam) return;
       const { worldX, worldY } = screenToWorld(sx, sy);
       onWorldPointerMoveRef.current?.({ x: worldX, y: worldY });
       if (tool === "hand") {
@@ -5750,7 +5841,20 @@ var NativeVectorViewport = forwardRef(function NativeVectorViewport2({
           ]
         }
       ),
-      overlay ? /* @__PURE__ */ jsx(View, { pointerEvents: "box-none", style: StyleSheet.absoluteFill, children: overlay }) : null,
+      overlay ? /* @__PURE__ */ jsx(
+        View,
+        {
+          pointerEvents: "box-none",
+          style: [
+            StyleSheet.absoluteFill,
+            {
+              zIndex: NATIVE_VIEWPORT_EXTERNAL_OVERLAY_Z_INDEX,
+              elevation: NATIVE_VIEWPORT_EXTERNAL_OVERLAY_ELEVATION
+            }
+          ],
+          children: overlay
+        }
+      ) : null,
       interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsx(
         View,
         {