canvu-react 0.4.65 → 0.4.67

package/dist/chatbot.d.cts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as CanvasPlugin } from './types-Bw3REwrb.cjs';
+import { c as CanvasPlugin } from './types-D5d-3dvz.cjs';
 import 'react';
 import './types-fJNwEnHf.cjs';
 import './shape-builders-DzhCOuzo.cjs';

package/dist/chatbot.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { c as CanvasPlugin } from './types-BZUp3LpC.js';
+import { c as CanvasPlugin } from './types-B-Jdh-n6.js';
 import 'react';
 import './types-fJNwEnHf.js';
 import './shape-builders-xG3A66sv.js';

package/dist/react.cjs

@@ -3223,6 +3223,30 @@ function createToolPlugin(options) {
     }
   });
 }
+
+// src/react/merge-by-id.ts
+function mergeById(baseItems, ...contributions) {
+  const next = [...baseItems];
+  const indexById = /* @__PURE__ */ new Map();
+  for (const [index, item] of next.entries()) {
+    if (!indexById.has(item.id)) {
+      indexById.set(item.id, index);
+    }
+  }
+  for (const contribution of contributions) {
+    if (!contribution?.length) continue;
+    for (const item of contribution) {
+      const existingIndex = indexById.get(item.id);
+      if (existingIndex !== void 0) {
+        next[existingIndex] = item;
+        continue;
+      }
+      indexById.set(item.id, next.length);
+      next.push(item);
+    }
+  }
+  return next;
+}
 var menuStyle = {
   position: "fixed",
   zIndex: 1e4,
@@ -3252,9 +3276,97 @@ var dividerStyle = {
   margin: "4px 8px",
   background: "#e2e8f0"
 };
+var SHAPE_CONTEXT_MENU_ITEM_IDS = {
+  cut: "cut",
+  copy: "copy",
+  duplicate: "duplicate",
+  reorderDivider: "reorder-divider",
+  bringToFront: "bring-to-front",
+  bringForward: "bring-forward",
+  sendBackward: "send-backward",
+  sendToBack: "send-to-back",
+  lockDivider: "lock-divider",
+  toggleLock: "toggle-lock",
+  delete: "delete"
+};
+function renderAction(label, onClick, options) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      style: {
+        ...itemStyle,
+        ...options?.danger ? { color: "#b91c1c" } : {}
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "transparent";
+      },
+      onClick,
+      children: label
+    }
+  );
+}
+function renderDivider() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle });
+}
+var DEFAULT_SHAPE_CONTEXT_MENU_ITEMS = [
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.cut,
+    render: (ctx) => renderAction("Recortar", ctx.cut)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.copy,
+    render: (ctx) => renderAction("Copiar", ctx.copy)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.duplicate,
+    render: (ctx) => renderAction("Duplicar", ctx.duplicate)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.reorderDivider,
+    render: renderDivider
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.bringToFront,
+    render: (ctx) => renderAction("Trazer para frente", ctx.bringToFront)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.bringForward,
+    render: (ctx) => renderAction("Avancar uma camada", ctx.bringForward)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.sendBackward,
+    render: (ctx) => renderAction("Recuar uma camada", ctx.sendBackward)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.sendToBack,
+    render: (ctx) => renderAction("Enviar para tras", ctx.sendToBack)
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.lockDivider,
+    render: renderDivider
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.toggleLock,
+    render: (ctx) => renderAction(
+      ctx.allSelectedLocked ? "Desbloquear" : "Bloquear",
+      ctx.toggleLock
+    )
+  },
+  {
+    id: SHAPE_CONTEXT_MENU_ITEM_IDS.delete,
+    render: (ctx) => renderAction("Apagar", ctx.delete, { danger: true })
+  }
+];
 function ShapeContextMenu({
   x,
   y,
+  selectedIds,
+  selectedItems = [],
   allSelectedLocked,
   onClose,
   onToggleLock,
@@ -3265,7 +3377,10 @@ function ShapeContextMenu({
   onSendBackward,
   onSendToBack,
   onDuplicate,
-  onDelete
+  onDelete,
+  items,
+  itemContributions,
+  children
 }) {
   const rootRef = react.useRef(null);
   react.useLayoutEffect(() => {
@@ -3305,49 +3420,43 @@ function ShapeContextMenu({
       document.removeEventListener("pointerdown", onPointerDown, true);
     };
   }, [onClose]);
+  const menuItems = react.useMemo(
+    () => mergeById(items ?? DEFAULT_SHAPE_CONTEXT_MENU_ITEMS, itemContributions),
+    [itemContributions, items]
+  );
   const run = (fn) => () => {
     fn();
     onClose();
   };
-  const renderAction = (label, onClick, options) => /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      role: "menuitem",
-      style: {
-        ...itemStyle,
-        ...options?.danger ? { color: "#b91c1c" } : {}
-      },
-      onMouseEnter: (e) => {
-        e.currentTarget.style.background = options?.danger ? "#fef2f2" : "#f1f5f9";
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.background = "transparent";
-      },
-      onClick: run(onClick),
-      children: label
-    }
-  );
-  const menu = /* @__PURE__ */ jsxRuntime.jsxs(
+  const resolvedSelectedIds = selectedIds ?? selectedItems.map((item) => item.id);
+  const resolvedAllSelectedLocked = allSelectedLocked ?? (selectedItems.length > 0 && selectedItems.every((item) => item.locked));
+  const menuContext = {
+    position: { x, y },
+    selectedIds: resolvedSelectedIds,
+    selectedItems,
+    allSelectedLocked: resolvedAllSelectedLocked,
+    anySelectedLocked: selectedItems.some((item) => item.locked),
+    close: onClose,
+    cut: run(onCut),
+    copy: run(onCopy),
+    duplicate: run(onDuplicate),
+    toggleLock: run(onToggleLock),
+    bringToFront: run(onBringToFront),
+    bringForward: run(onBringForward),
+    sendBackward: run(onSendBackward),
+    sendToBack: run(onSendToBack),
+    delete: run(onDelete),
+    deleteSelection: run(onDelete)
+  };
+  const content = typeof children === "function" ? children(menuContext) : children !== void 0 ? children : menuItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: item.render(menuContext) }, item.id));
+  const menu = /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       ref: rootRef,
       "data-slot": "shape-context-menu",
       style: { ...menuStyle, left: x, top: y },
       role: "menu",
-      children: [
-        renderAction("Recortar", onCut),
-        renderAction("Copiar", onCopy),
-        renderAction("Duplicar", onDuplicate),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction("Trazer para frente", onBringToFront),
-        renderAction("Avancar uma camada", onBringForward),
-        renderAction("Recuar uma camada", onSendBackward),
-        renderAction("Enviar para tras", onSendToBack),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, style: dividerStyle }),
-        renderAction(allSelectedLocked ? "Desbloquear" : "Bloquear", onToggleLock),
-        renderAction("Apagar", onDelete, { danger: true })
-      ]
+      children: content
     }
   );
   if (typeof document === "undefined") {
@@ -5062,6 +5171,7 @@ function VectorToolbarComponent({
   value,
   onChange,
   tools,
+  toolContributions,
   overflowToolIds = DEFAULT_OVERFLOW_TOOL_IDS,
   overflowMenuAriaLabel = "More tools",
   "aria-label": ariaLabel = "Canvas tools",
@@ -5079,7 +5189,10 @@ function VectorToolbarComponent({
 }) {
   const pluginContext = react.useContext(CanvuPluginContext);
   const runtimeTools = pluginContext?.resolvedTools;
-  const resolvedTools = tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS;
+  const resolvedTools = react.useMemo(
+    () => mergeById(tools ?? runtimeTools ?? DEFAULT_VECTOR_TOOLS, toolContributions),
+    [runtimeTools, toolContributions, tools]
+  );
   const { primary: primaryTools, overflow: overflowTools } = splitToolbarTools(
     resolvedTools,
     overflowToolIds
@@ -8117,18 +8230,6 @@ function isDefaultMarkerToolStyle(style) {
 function tagCustomPlacementItem(item, toolId) {
   return item.customToolId === toolId ? item : { ...item, customToolId: toolId };
 }
-function mergeToolListById(baseTools, pluginTools) {
-  const next = [...baseTools];
-  for (const tool of pluginTools) {
-    const index = next.findIndex((candidate) => candidate.id === tool.id);
-    if (index >= 0) {
-      next[index] = tool;
-      continue;
-    }
-    next.push(tool);
-  }
-  return next;
-}
 function composePluginEvent(consumerHandler, pluginHandlers) {
   const activePluginHandlers = pluginHandlers.filter(
     (handler) => handler != null
@@ -8256,6 +8357,8 @@ var VectorViewport = react.forwardRef(
     navMenu,
     selectionInspector,
     selectionInspectorProps,
+    contextMenu: renderContextMenu,
+    contextMenuItems: consumerContextMenuItems,
     plugins = [],
     onCameraChange: consumerOnCameraChange,
     customPlacement: consumerCustomPlacement,
@@ -8314,7 +8417,7 @@ var VectorViewport = react.forwardRef(
       let nextTools = [...DEFAULT_VECTOR_TOOLS];
       for (const contribution of orderedPluginContributions) {
         if (contribution.tools?.length) {
-          nextTools = mergeToolListById(nextTools, contribution.tools);
+          nextTools = mergeById(nextTools, contribution.tools);
         }
         if (contribution.toolTransform) {
           nextTools = contribution.toolTransform(nextTools);
@@ -8322,6 +8425,16 @@ var VectorViewport = react.forwardRef(
       }
       return nextTools;
     }, [orderedPluginContributions]);
+    const resolvedContextMenuItems = react.useMemo(
+      () => mergeById(
+        DEFAULT_SHAPE_CONTEXT_MENU_ITEMS,
+        ...orderedPluginContributions.map(
+          (contribution) => contribution.contextMenuItems
+        ),
+        consumerContextMenuItems
+      ),
+      [consumerContextMenuItems, orderedPluginContributions]
+    );
     const allCustomPlacements = react.useMemo(() => {
       const placements = [];
       if (consumerCustomPlacement) placements.push(consumerCustomPlacement);
@@ -8501,7 +8614,7 @@ var VectorViewport = react.forwardRef(
       isUndoingRef.current = true;
       onItemsChangeRef.current?.(next, { motive: "redo" });
     }, []);
-    const [contextMenu, setContextMenu] = react.useState(null);
+    const [contextMenuState, setContextMenuState] = react.useState(null);
     const [uncontrolledSel, setUncontrolledSel] = react.useState([]);
     const isSelectionControlled = onSelectionChange !== void 0;
     const controlledSelectedKey = JSON.stringify(selectedIdsProp ?? []);
@@ -9668,15 +9781,26 @@ var VectorViewport = react.forwardRef(
         if (!cam) return;
         const { worldX, worldY } = screenToWorld(e.clientX, e.clientY);
         const lineHitWorld = 10 / cam.zoom;
+        const cur = effectiveSelectedIdsRef.current;
         const hit = hitTestWorldPoint(resolvedItemsRef.current, worldX, worldY, {
           lineHitWorld,
           ignoreLocked: true
         });
         if (!hit) {
-          setContextMenu(null);
+          const selectedUnlockedItems = cur.map((id) => resolvedItemsRef.current.find((item) => item.id === id)).filter((item) => item != null && !item.locked);
+          if (selectedUnlockedItems.some(
+            (item) => pointInSelectedItemBounds(item, worldX, worldY)
+          )) {
+            setContextMenuState({
+              x: e.clientX,
+              y: e.clientY,
+              itemIds: [...cur]
+            });
+            return;
+          }
+          setContextMenuState(null);
           return;
         }
-        const cur = effectiveSelectedIdsRef.current;
         let nextIds;
         if (!cur.includes(hit.id)) {
           nextIds = e.shiftKey ? [...cur, hit.id] : [hit.id];
@@ -9684,7 +9808,7 @@ var VectorViewport = react.forwardRef(
         } else {
           nextIds = cur;
         }
-        setContextMenu({
+        setContextMenuState({
           x: e.clientX,
           y: e.clientY,
           itemIds: nextIds
@@ -10234,7 +10358,7 @@ var VectorViewport = react.forwardRef(
         if (e.button !== 0) return;
         if (editingTextIdRef.current) return;
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         const tool = toolIdRef.current;
         if (tool === "hand") return;
         if (applePencilNav && e.pointerType === "pen" && navigator.maxTouchPoints > 0 && (tool === "draw" || tool === "marker")) {
@@ -10654,7 +10778,7 @@ var VectorViewport = react.forwardRef(
           return;
         }
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, e.clientX, e.clientY) : void 0;
         const itemId = createShapeId();
         const item = createFreehandStrokeItem(
@@ -10777,7 +10901,7 @@ var VectorViewport = react.forwardRef(
           return;
         }
         wrapperRef.current?.focus({ preventScroll: true });
-        setContextMenu(null);
+        setContextMenuState(null);
         penDetectedRef.current = true;
         const straightLine = tool === "draw" ? createStraightStrokeState(startPoint, touch.clientX, touch.clientY) : void 0;
         const itemId = createShapeId();
@@ -11817,6 +11941,66 @@ var VectorViewport = react.forwardRef(
     const defaultNavMenu = cameraForOverlay ? /* @__PURE__ */ jsxRuntime.jsx(NavMenu, {}) : null;
     const resolvedSelectionInspector = selectionInspector === void 0 ? defaultSelectionInspector : selectionInspector;
     const resolvedNavMenu = navMenu === void 0 ? defaultNavMenu : navMenu;
+    const contextMenuItemIds = contextMenuState?.itemIds ?? [];
+    const contextMenuSelectedItems = contextMenuState ? contextMenuItemIds.map((id) => items.find((item) => item.id === id)).filter((item) => item != null) : [];
+    const allContextMenuSelectedLocked = contextMenuItemIds.length > 0 && contextMenuItemIds.every((id) => items.find((item) => item.id === id)?.locked);
+    const closeContextMenu = () => setContextMenuState(null);
+    const runContextMenuAction = (fn) => () => {
+      fn();
+      closeContextMenu();
+    };
+    const contextMenuRenderContext = contextMenuState ? {
+      position: { x: contextMenuState.x, y: contextMenuState.y },
+      selectedIds: contextMenuItemIds,
+      selectedItems: contextMenuSelectedItems,
+      allSelectedLocked: allContextMenuSelectedLocked,
+      anySelectedLocked: contextMenuSelectedItems.some((item) => item.locked),
+      close: closeContextMenu,
+      cut: runContextMenuAction(() => cutIds(contextMenuItemIds)),
+      copy: runContextMenuAction(
+        () => copyIdsToInternalClipboard(contextMenuItemIds)
+      ),
+      duplicate: runContextMenuAction(() => duplicateIds(contextMenuItemIds)),
+      toggleLock: runContextMenuAction(
+        () => setLockedOnIds(contextMenuItemIds, !allContextMenuSelectedLocked)
+      ),
+      bringToFront: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "front")
+      ),
+      bringForward: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "forward")
+      ),
+      sendBackward: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "backward")
+      ),
+      sendToBack: runContextMenuAction(
+        () => reorderIds(contextMenuItemIds, "back")
+      ),
+      delete: runContextMenuAction(() => deleteIds(contextMenuItemIds)),
+      deleteSelection: runContextMenuAction(() => deleteIds(contextMenuItemIds)),
+      items: resolvedContextMenuItems
+    } : null;
+    const resolvedContextMenu = interactive && onItemsChange && contextMenuState && contextMenuRenderContext && renderContextMenu !== null ? renderContextMenu ? renderContextMenu(contextMenuRenderContext) : /* @__PURE__ */ jsxRuntime.jsx(
+      ShapeContextMenu,
+      {
+        x: contextMenuState.x,
+        y: contextMenuState.y,
+        selectedIds: contextMenuItemIds,
+        selectedItems: contextMenuSelectedItems,
+        allSelectedLocked: allContextMenuSelectedLocked,
+        items: resolvedContextMenuItems,
+        onClose: closeContextMenu,
+        onToggleLock: () => setLockedOnIds(contextMenuItemIds, !allContextMenuSelectedLocked),
+        onCut: () => cutIds(contextMenuItemIds),
+        onCopy: () => copyIdsToInternalClipboard(contextMenuItemIds),
+        onBringToFront: () => reorderIds(contextMenuItemIds, "front"),
+        onBringForward: () => reorderIds(contextMenuItemIds, "forward"),
+        onSendBackward: () => reorderIds(contextMenuItemIds, "backward"),
+        onSendToBack: () => reorderIds(contextMenuItemIds, "back"),
+        onDuplicate: () => duplicateIds(contextMenuItemIds),
+        onDelete: () => deleteIds(contextMenuItemIds)
+      }
+    ) : null;
     return /* @__PURE__ */ jsxRuntime.jsx(CanvuPluginContext.Provider, { value: pluginContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(CanvuChromeContext.Provider, { value: chromeContextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -11970,30 +12154,7 @@ var VectorViewport = react.forwardRef(
             }
           ),
           resolvedSelectionInspector,
-          interactive && onItemsChange && contextMenu && /* @__PURE__ */ jsxRuntime.jsx(
-            ShapeContextMenu,
-            {
-              x: contextMenu.x,
-              y: contextMenu.y,
-              allSelectedLocked: contextMenu.itemIds.length > 0 && contextMenu.itemIds.every(
-                (id) => items.find((i) => i.id === id)?.locked
-              ),
-              onClose: () => setContextMenu(null),
-              onToggleLock: () => {
-                const ids = contextMenu.itemIds;
-                const allLocked = ids.length > 0 && ids.every((id) => items.find((i) => i.id === id)?.locked);
-                setLockedOnIds(ids, !allLocked);
-              },
-              onCut: () => cutIds(contextMenu.itemIds),
-              onCopy: () => copyIdsToInternalClipboard(contextMenu.itemIds),
-              onBringToFront: () => reorderIds(contextMenu.itemIds, "front"),
-              onBringForward: () => reorderIds(contextMenu.itemIds, "forward"),
-              onSendBackward: () => reorderIds(contextMenu.itemIds, "backward"),
-              onSendToBack: () => reorderIds(contextMenu.itemIds, "back"),
-              onDuplicate: () => duplicateIds(contextMenu.itemIds),
-              onDelete: () => deleteIds(contextMenu.itemIds)
-            }
-          ),
+          resolvedContextMenu,
           resolvedNavMenu,
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -12030,6 +12191,7 @@ exports.IconSelect = IconSelect;
 exports.IconText = IconText;
 exports.ImagesMenu = ImagesMenu;
 exports.NavMenu = NavMenu;
+exports.SHAPE_CONTEXT_MENU_ITEM_IDS = SHAPE_CONTEXT_MENU_ITEM_IDS;
 exports.ShapeContextMenu = ShapeContextMenu;
 exports.VectorCanvas = VectorCanvas;
 exports.VectorCanvasBody = VectorCanvasBody;