canvu-react 0.4.46 → 0.4.48

package/dist/react.cjs

@@ -3362,7 +3362,9 @@ function ToolPluginComponent({
   pluginId,
   tool,
   toolTransform,
-  createItem
+  createItem,
+  selectAfterCreate,
+  onSelectModeItemClick
 }) {
   const contribution = react.useMemo(
     () => ({
@@ -3371,17 +3373,25 @@ function ToolPluginComponent({
       customPlacements: createItem ? [
         {
           toolId: tool.id,
-          createItem
+          createItem,
+          selectAfterCreate,
+          onSelectModeItemClick
         }
       ] : void 0
     }),
-    [createItem, tool, toolTransform]
+    [createItem, onSelectModeItemClick, selectAfterCreate, tool, toolTransform]
   );
   useCanvuPluginContribution(pluginId, contribution);
   return null;
 }
 function createToolPlugin(options) {
-  const { createItem, toolTransform, ...tool } = options;
+  const {
+    createItem,
+    toolTransform,
+    selectAfterCreate,
+    onSelectModeItemClick,
+    ...tool
+  } = options;
   const pluginId = `canvu.plugin.tool:${tool.id}`;
   return createCanvuPlugin({
     id: pluginId,
@@ -3392,7 +3402,9 @@ function createToolPlugin(options) {
           pluginId,
           tool,
           toolTransform,
-          createItem
+          createItem,
+          selectAfterCreate,
+          onSelectModeItemClick
         }
       );
     }
@@ -5993,7 +6005,43 @@ init_shape_builders();
 
 // src/interaction/resize-handles.ts
 init_rect();
-var HANDLE_IDS = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
+init_link_item();
+var ALL_RESIZE_HANDLES = [
+  "nw",
+  "n",
+  "ne",
+  "e",
+  "se",
+  "s",
+  "sw",
+  "w"
+];
+var CORNER_RESIZE_HANDLES = [
+  "nw",
+  "ne",
+  "se",
+  "sw"
+];
+function dedupeHandles(handles) {
+  const allowed = new Set(handles);
+  return ALL_RESIZE_HANDLES.filter((handle) => allowed.has(handle));
+}
+function resolveCustomResizeHandles(handles) {
+  if (handles === "corners") return CORNER_RESIZE_HANDLES;
+  if (handles === "all" || handles === void 0) return ALL_RESIZE_HANDLES;
+  return dedupeHandles(handles);
+}
+function resolveResizeHandlesForItem(item) {
+  if (!item) return ALL_RESIZE_HANDLES;
+  if (getLinkData(item)) return CORNER_RESIZE_HANDLES;
+  if (item.toolKind === "custom") {
+    return resolveCustomResizeHandles(item.customResizeHandles);
+  }
+  return ALL_RESIZE_HANDLES;
+}
+function itemAllowsResizeHandle(item, handle) {
+  return resolveResizeHandlesForItem(item).includes(handle);
+}
 function getHandleWorldPosition(bounds, id) {
   const r = normalizeRect(bounds);
   const cx = r.x + r.width / 2;
@@ -6017,7 +6065,7 @@ function getHandleWorldPosition(bounds, id) {
       return { x: r.x, y: cy };
   }
 }
-function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad = 0) {
+function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad = 0, handles = ALL_RESIZE_HANDLES) {
   const r = normalizeRect(bounds);
   const pl = worldToItemLocal(
     worldX,
@@ -6031,7 +6079,7 @@ function hitTestResizeHandle(bounds, worldX, worldY, radiusWorld, rotationRad =
   const localBounds = { x: 0, y: 0, width: r.width, height: r.height };
   let best = null;
   let bestD = radiusWorld;
-  for (const id of HANDLE_IDS) {
+  for (const id of handles) {
     const p = getHandleWorldPosition(localBounds, id);
     const d = Math.hypot(pl.x - p.x, pl.y - p.y);
     if (d <= bestD) {
@@ -6663,6 +6711,9 @@ function moveItemByDelta(item, dx, dy) {
 }
 function resizeItemByHandle(item, start, handle, currentWorld) {
   const sb = normalizeRect(start.bounds);
+  if (!itemAllowsResizeHandle(item, handle)) {
+    return item;
+  }
   const newBoundsRaw = computeNewBoundsForResize(item, sb, handle, currentWorld);
   const nb = normalizeRect(newBoundsRaw);
   const k = item.toolKind;
@@ -6923,6 +6974,14 @@ function formatItemPlacementTransform(item) {
   const cy = r.height / 2;
   return `translate(${item.x}, ${item.y}) translate(${cx}, ${cy}) rotate(${deg}) translate(${-cx}, ${-cy})`;
 }
+function itemClassName(item) {
+  const kind = item.toolKind ?? "unknown";
+  const classes = [`canvu-item`, `canvu-item--${kind}`];
+  if (item.svgClassName) {
+    classes.push(item.svgClassName);
+  }
+  return classes.join(" ");
+}
 var SvgVectorRenderer = class {
   container;
   scene;
@@ -6930,6 +6989,8 @@ var SvgVectorRenderer = class {
   svg;
   rootG;
   itemNodeCache = /* @__PURE__ */ new Map();
+  selectedIds = /* @__PURE__ */ new Set();
+  hoveredItemId = null;
   liveOverlay = null;
   resizeObserver;
   constructor(options) {
@@ -6950,6 +7011,20 @@ var SvgVectorRenderer = class {
     this.resizeObserver = new ResizeObserver(() => this.render());
     this.resizeObserver.observe(this.container);
   }
+  /**
+   * Updates interaction attributes on item groups for CSS hooks.
+   *
+   * Use `[data-canvu-selected="true"]` and `[data-canvu-hovered="true"]`
+   * for animations in interactive canvases where the scene SVG may ignore
+   * pointer events.
+   */
+  setInteractionState(state) {
+    this.selectedIds = new Set(state.selectedIds ?? []);
+    this.hoveredItemId = state.hoveredItemId ?? null;
+    for (const [id, cached] of this.itemNodeCache) {
+      this.applyInteractionAttributes(cached.g, id);
+    }
+  }
   /**
    * Reads container size, culls items, and updates the SVG (incrementally when possible).
    */
@@ -6986,6 +7061,7 @@ var SvgVectorRenderer = class {
     if (!this.liveOverlay) {
       const g = document.createElementNS("http://www.w3.org/2000/svg", "g");
       g.setAttribute("data-live-overlay", "true");
+      g.setAttribute("data-canvu-item", "true");
       this.liveOverlay = {
         g,
         lastChildrenSvg: "",
@@ -6995,6 +7071,11 @@ var SvgVectorRenderer = class {
     }
     const cached = this.liveOverlay;
     const t = formatItemPlacementTransform(item);
+    cached.g.setAttribute("class", itemClassName(item));
+    cached.g.setAttribute("data-item-id", item.id);
+    cached.g.setAttribute("data-tool-kind", item.toolKind ?? "");
+    cached.g.setAttribute("data-canvu-selected", "false");
+    cached.g.setAttribute("data-canvu-hovered", "false");
     if (cached.lastTransform !== t) {
       cached.g.setAttribute("transform", t);
       cached.lastTransform = t;
@@ -7025,6 +7106,7 @@ var SvgVectorRenderer = class {
       let cached = this.itemNodeCache.get(item.id);
       if (!cached) {
         const g2 = document.createElementNS("http://www.w3.org/2000/svg", "g");
+        g2.setAttribute("data-canvu-item", "true");
         g2.setAttribute("data-item-id", item.id);
         cached = {
           g: g2,
@@ -7034,6 +7116,11 @@ var SvgVectorRenderer = class {
         this.itemNodeCache.set(item.id, cached);
       }
       const { g } = cached;
+      g.setAttribute("class", itemClassName(item));
+      g.setAttribute("data-canvu-item", "true");
+      g.setAttribute("data-item-id", item.id);
+      g.setAttribute("data-tool-kind", item.toolKind ?? "");
+      this.applyInteractionAttributes(g, item.id);
       const t = formatItemPlacementTransform(item);
       if (cached.lastTransform !== t) {
         g.setAttribute("transform", t);
@@ -7050,6 +7137,16 @@ var SvgVectorRenderer = class {
       previousNode = g;
     }
   }
+  applyInteractionAttributes(g, itemId) {
+    g.setAttribute(
+      "data-canvu-selected",
+      this.selectedIds.has(itemId) ? "true" : "false"
+    );
+    g.setAttribute(
+      "data-canvu-hovered",
+      this.hoveredItemId === itemId ? "true" : "false"
+    );
+  }
   destroy() {
     this.resizeObserver.disconnect();
     this.itemNodeCache.clear();
@@ -7157,10 +7254,7 @@ function smoothFreehandPointsToPathD(points) {
 }
 
 // src/react/InteractionOverlay.tsx
-init_link_item();
 init_shape_builders();
-var HANDLE_ORDER = ["nw", "n", "ne", "e", "se", "s", "sw", "w"];
-var LINK_HANDLE_ORDER = ["nw", "ne", "se", "sw"];
 var ERASER_TINT = "#cbd5e1";
 var ERASER_TINT_OPACITY = 0.95;
 var ERASER_PREVIEW_OPACITY = 0.3;
@@ -7213,7 +7307,7 @@ function InteractionOverlay({
         ) }, it.id);
       }),
       showResizeHandles && bSingle && single && rotHandlePos && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        (getLinkData(single) ? LINK_HANDLE_ORDER : HANDLE_ORDER).map((hid) => {
+        resolveResizeHandlesForItem(single).map((hid) => {
           const p = getHandleWorldPositionRotated(bSingle, hid, rotSingle);
           return /* @__PURE__ */ jsxRuntime.jsx(
             "circle",
@@ -8027,7 +8121,6 @@ function defaultPlacementWorld(tool, center) {
     lineWorld: [a, b]
   };
 }
-var LINK_CORNER_HANDLES2 = /* @__PURE__ */ new Set(["nw", "ne", "se", "sw"]);
 function pointInSelectedItemBounds(item, worldX, worldY) {
   const bounds = normalizeRect(item.bounds);
   const local = worldToItemLocal(
@@ -8121,6 +8214,16 @@ function reorderItemsByIds(items, ids, direction) {
 function isDefaultMarkerToolStyle(style) {
   return style.stroke === MARKER_TOOL_STYLE.stroke && style.strokeWidth === MARKER_TOOL_STYLE.strokeWidth && style.strokeOpacity === MARKER_TOOL_STYLE.strokeOpacity;
 }
+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) {
@@ -8285,6 +8388,7 @@ var VectorViewport = react.forwardRef(
     const [cameraForOverlay, setCameraForOverlay] = react.useState(null);
     const sceneRef = react.useRef(null);
     const rendererRef = react.useRef(null);
+    const hoveredItemIdRef = react.useRef(null);
     const pluginViewportRef = react.useRef(null);
     const [pluginContributions, setPluginContributions] = react.useState({});
     const registerContribution = react.useCallback(
@@ -8439,6 +8543,8 @@ var VectorViewport = react.forwardRef(
     assetStoreRef.current = assetStore;
     const customPlacementRef = react.useRef(customPlacement);
     customPlacementRef.current = customPlacement;
+    const allCustomPlacementsRef = react.useRef(allCustomPlacements);
+    allCustomPlacementsRef.current = allCustomPlacements;
     const dragStateRef = react.useRef({ kind: "idle" });
     const clipboardRef = react.useRef(null);
     const undoStackRef = react.useRef([]);
@@ -8490,6 +8596,12 @@ var VectorViewport = react.forwardRef(
     }, [isSelectionControlled, controlledSelectedKey, uncontrolledSel]);
     const effectiveSelectedIdsRef = react.useRef([]);
     effectiveSelectedIdsRef.current = effectiveSelectedIds;
+    const syncRendererInteractionState = react.useCallback(() => {
+      rendererRef.current?.setInteractionState({
+        selectedIds: effectiveSelectedIdsRef.current,
+        hoveredItemId: hoveredItemIdRef.current
+      });
+    }, []);
     const setEffectiveSelectedIds = react.useCallback(
       (ids) => {
         const next = [...ids];
@@ -8932,6 +9044,10 @@ var VectorViewport = react.forwardRef(
         pointerEventsNone: interactiveRef.current
       });
       rendererRef.current = renderer;
+      renderer.setInteractionState({
+        selectedIds: effectiveSelectedIdsRef.current,
+        hoveredItemId: hoveredItemIdRef.current
+      });
       renderer.render();
       if (!reducedMotionRef.current) {
         setZoomPercent(Math.round(camera.zoom * 100));
@@ -8969,11 +9085,53 @@ var VectorViewport = react.forwardRef(
         setCameraForOverlay(null);
       };
     }, [applePencilNav, renderFrame]);
+    react.useEffect(() => {
+      rendererRef.current?.setInteractionState({
+        selectedIds: effectiveSelectedIds,
+        hoveredItemId: hoveredItemIdRef.current
+      });
+    }, [effectiveSelectedIds]);
     react.useEffect(() => {
       const r = rendererRef.current;
       if (!r) return;
       r.setPointerEventsNone(interactive);
     }, [interactive]);
+    const clearHoveredItem = react.useCallback(() => {
+      if (hoveredItemIdRef.current === null) return;
+      hoveredItemIdRef.current = null;
+      syncRendererInteractionState();
+    }, [syncRendererInteractionState]);
+    const updateHoveredItem = react.useCallback(
+      (clientX, clientY) => {
+        const cam = cameraRef.current;
+        const rect = sceneContainerRef.current?.getBoundingClientRect();
+        if (!cam || !rect) return;
+        const { worldX, worldY } = cam.screenToWorld(
+          clientX - rect.left,
+          clientY - rect.top
+        );
+        const hit = hitTestWorldPoint(resolvedItemsRef.current, worldX, worldY, {
+          lineHitWorld: 10 / cam.zoom,
+          ignoreLocked: true
+        });
+        const next = hit?.id ?? null;
+        if (hoveredItemIdRef.current === next) return;
+        hoveredItemIdRef.current = next;
+        syncRendererInteractionState();
+      },
+      [syncRendererInteractionState]
+    );
+    react.useEffect(() => {
+      const root = wrapperRef.current;
+      if (!root) return;
+      const move = (e) => updateHoveredItem(e.clientX, e.clientY);
+      root.addEventListener("pointermove", move, { passive: true });
+      root.addEventListener("pointerleave", clearHoveredItem);
+      return () => {
+        root.removeEventListener("pointermove", move);
+        root.removeEventListener("pointerleave", clearHoveredItem);
+      };
+    }, [clearHoveredItem, updateHoveredItem]);
     react.useEffect(() => {
       if (!eraserActive && laserTrail.length === 0) return;
       const timer = window.setInterval(() => {
@@ -9952,10 +10110,10 @@ var VectorViewport = react.forwardRef(
               worldX,
               worldY,
               handleRadiusWorld,
-              rot
+              rot,
+              resolveResizeHandlesForItem(selected)
             );
-            const isLinkResizeHandle = hb && getLinkData(selected) ? LINK_CORNER_HANDLES2.has(hb) : Boolean(hb);
-            if (hb && isLinkResizeHandle) {
+            if (hb) {
               const snapRs = bakedSnapshot(selected.id);
               if (!snapRs) return;
               dragStateRef.current = {
@@ -9979,6 +10137,31 @@ var VectorViewport = react.forwardRef(
             ignoreLocked: true
           });
           if (hit) {
+            const selectModeClickPlacement = !e.shiftKey ? findSelectModeItemClickPlacement(hit, allCustomPlacementsRef.current) : null;
+            if (selectModeClickPlacement) {
+              const isAlreadySelected = cur.includes(hit.id);
+              const moveIds = isAlreadySelected ? [...cur] : [hit.id];
+              const moveSnapshots = {};
+              for (const id of moveIds) {
+                const snap = bakedSnapshot(id);
+                if (snap) {
+                  moveSnapshots[id] = snap;
+                }
+              }
+              dragStateRef.current = {
+                kind: "select-mode-item-click",
+                id: hit.id,
+                startWorld: { x: worldX, y: worldY },
+                startScreen: { x: e.clientX, y: e.clientY },
+                moveIds,
+                moveSnapshots,
+                ...isAlreadySelected ? {} : { selectIdsOnDrag: [hit.id] }
+              };
+              captureInteractionPointer(e.currentTarget, e.pointerId);
+              e.preventDefault();
+              e.stopPropagation();
+              return;
+            }
             if (e.shiftKey) {
               const next = cur.includes(hit.id) ? cur.filter((id) => id !== hit.id) : [...cur, hit.id];
               setEffectiveSelectedIdsRef.current(next);
@@ -10546,6 +10729,21 @@ var VectorViewport = react.forwardRef(
         const change = onItemsChangeRef.current;
         if (!change) return;
         const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
+        if (st.kind === "select-mode-item-click") {
+          const screenDx = ev.clientX - st.startScreen.x;
+          const screenDy = ev.clientY - st.startScreen.y;
+          if (Math.hypot(screenDx, screenDy) <= TAP_PX) return;
+          if (st.selectIdsOnDrag) {
+            setEffectiveSelectedIdsRef.current(st.selectIdsOnDrag);
+          }
+          dragStateRef.current = {
+            kind: "move",
+            ids: st.moveIds,
+            snapshots: st.moveSnapshots,
+            startWorld: st.startWorld
+          };
+          return;
+        }
         if (st.kind === "move") {
           const dx = worldX - st.startWorld.x;
           const dy = worldY - st.startWorld.y;
@@ -10664,6 +10862,43 @@ var VectorViewport = react.forwardRef(
           releaseInteractionPointer();
           return;
         }
+        if (st.kind === "select-mode-item-click") {
+          dragStateRef.current = { kind: "idle" };
+          releaseInteractionPointer();
+          if (ev.type === "pointercancel") return;
+          const dx = ev.clientX - st.startScreen.x;
+          const dy = ev.clientY - st.startScreen.y;
+          if (Math.hypot(dx, dy) > TAP_PX) return;
+          const item = itemsRef.current.find((candidate) => candidate.id === st.id) ?? resolvedItemsRef.current.find((candidate) => candidate.id === st.id);
+          if (!item) return;
+          const placement = findSelectModeItemClickPlacement(
+            item,
+            allCustomPlacementsRef.current
+          );
+          const onSelectModeItemClick = placement?.onSelectModeItemClick;
+          if (!onSelectModeItemClick) return;
+          const { worldX, worldY } = screenToWorld(ev.clientX, ev.clientY);
+          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)
+              );
+            },
+            setSelectedIds: (ids) => setEffectiveSelectedIdsRef.current(ids)
+          });
+          return;
+        }
         if (st.kind === "marquee") {
           dragStateRef.current = { kind: "idle" };
           releaseInteractionPointer();
@@ -10859,8 +11094,14 @@ var VectorViewport = react.forwardRef(
           const id = createShapeId();
           const pen = strokeStyleRef.current;
           if (cpUp && st.tool === cpUp.toolId) {
-            change(itemsRef.current.concat(cpUp.createItem({ id, bounds: br })));
-            setEffectiveSelectedIdsRef.current([id]);
+            const item = tagCustomPlacementItem(
+              cpUp.createItem({ id, bounds: br }),
+              cpUp.toolId
+            );
+            change(itemsRef.current.concat(item));
+            if (cpUp.selectAfterCreate !== false) {
+              setEffectiveSelectedIdsRef.current([id]);
+            }
             return;
           }
           if (st.tool === "rect") {