canvu-react 0.4.40 → 0.4.42

package/dist/native.cjs

@@ -4678,6 +4678,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.",
@@ -4695,6 +4773,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";
 }
@@ -4772,6 +4852,7 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onLinkToolRequest,
   linkToolDialogLabels,
   onWorldPointerDown,
+  onRemotePresencePress,
   onWorldPointerMove,
   onWorldPointerLeave,
   onPlacementPreviewChange,
@@ -4795,6 +4876,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   onLinkToolRequestRef.current = onLinkToolRequest;
   const onWorldPointerDownRef = react.useRef(onWorldPointerDown);
   onWorldPointerDownRef.current = onWorldPointerDown;
+  const onRemotePresencePressRef = react.useRef(onRemotePresencePress);
+  onRemotePresencePressRef.current = onRemotePresencePress;
   const onWorldPointerMoveRef = react.useRef(onWorldPointerMove);
   onWorldPointerMoveRef.current = onWorldPointerMove;
   const onWorldPointerLeaveRef = react.useRef(onWorldPointerLeave);
@@ -4815,6 +4898,8 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
   itemsRef.current = items;
   const selectedIdsRef = react.useRef(selectedIds);
   selectedIdsRef.current = selectedIds;
+  const remotePresenceRef = react.useRef(remotePresence);
+  remotePresenceRef.current = remotePresence;
   const dragStateRef = react.useRef({ kind: "idle" });
   const [placementPreview, setPlacementPreviewState] = react.useState(null);
   const setRealtimePlacementPreview = react.useCallback(
@@ -4974,13 +5059,19 @@ var NativeVectorViewport = react.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") {
@@ -5756,7 +5847,20 @@ var NativeVectorViewport = react.forwardRef(function NativeVectorViewport2({
           ]
         }
       ),
-      overlay ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { pointerEvents: "box-none", style: reactNative.StyleSheet.absoluteFill, children: overlay }) : null,
+      overlay ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          pointerEvents: "box-none",
+          style: [
+            reactNative.StyleSheet.absoluteFill,
+            {
+              zIndex: NATIVE_VIEWPORT_EXTERNAL_OVERLAY_Z_INDEX,
+              elevation: NATIVE_VIEWPORT_EXTERNAL_OVERLAY_ELEVATION
+            }
+          ],
+          children: overlay
+        }
+      ) : null,
       interactive && showStyleInspector && activeStyleToolId ? /* @__PURE__ */ jsxRuntime.jsx(
         reactNative.View,
         {