@uipath/apollo-react 3.62.1 → 3.63.0-pr431.329c320

package/dist/canvas/components/NodePropertiesPanel/hooks/index.cjs

@@ -24,6 +24,7 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    useSetNodeSelection: ()=>external_useNodeSelection_cjs_namespaceObject.useSetNodeSelection,
     useNodeSelection: ()=>external_useNodeSelection_cjs_namespaceObject.useNodeSelection,
     useNodeConfiguration: ()=>external_useNodeConfiguration_cjs_namespaceObject.useNodeConfiguration
 });
@@ -31,9 +32,11 @@ const external_useNodeConfiguration_cjs_namespaceObject = require("./useNodeConf
 const external_useNodeSelection_cjs_namespaceObject = require("./useNodeSelection.cjs");
 exports.useNodeConfiguration = __webpack_exports__.useNodeConfiguration;
 exports.useNodeSelection = __webpack_exports__.useNodeSelection;
+exports.useSetNodeSelection = __webpack_exports__.useSetNodeSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "useNodeConfiguration",
-    "useNodeSelection"
+    "useNodeSelection",
+    "useSetNodeSelection"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertiesPanel/hooks/index.d.ts

@@ -1,3 +1,3 @@
 export { useNodeConfiguration } from './useNodeConfiguration';
-export { useNodeSelection } from './useNodeSelection';
+export { useNodeSelection, useSetNodeSelection } from './useNodeSelection';
 //# sourceMappingURL=index.d.ts.map

package/dist/canvas/components/NodePropertiesPanel/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/canvas/components/NodePropertiesPanel/hooks/index.js

@@ -1,3 +1,3 @@
 import { useNodeConfiguration } from "./useNodeConfiguration.js";
-import { useNodeSelection } from "./useNodeSelection.js";
-export { useNodeConfiguration, useNodeSelection };
+import { useNodeSelection, useSetNodeSelection } from "./useNodeSelection.js";
+export { useNodeConfiguration, useNodeSelection, useSetNodeSelection };

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.cjs

@@ -24,10 +24,21 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    useNodeSelection: ()=>useNodeSelection
+    useNodeSelection: ()=>useNodeSelection,
+    useSetNodeSelection: ()=>useSetNodeSelection
 });
 const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
 const external_react_namespaceObject = require("react");
+function applySelection(nodes, nodeId) {
+    return nodes.map((node)=>{
+        const shouldBeSelected = node.id === nodeId;
+        if (node.selected === shouldBeSelected) return node;
+        return {
+            ...node,
+            selected: shouldBeSelected
+        };
+    });
+}
 function useNodeSelection(nodeId, maintainSelection = true) {
     const nodes = (0, react_cjs_namespaceObject.useNodes)();
     const { setNodes } = (0, react_cjs_namespaceObject.useReactFlow)();
@@ -40,10 +51,7 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     (0, external_react_namespaceObject.useEffect)(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
-                    ...node,
-                    selected: node.id === selectedNodeId
-                })));
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>applySelection(nds, selectedNodeId));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -56,9 +64,22 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         selectedNode
     };
 }
+function useSetNodeSelection() {
+    const { setNodes } = (0, react_cjs_namespaceObject.useReactFlow)();
+    const setSelectedNodeId = (0, external_react_namespaceObject.useCallback)((nodeId)=>{
+        setNodes((nds)=>applySelection(nds, nodeId));
+    }, [
+        setNodes
+    ]);
+    return {
+        setSelectedNodeId
+    };
+}
 exports.useNodeSelection = __webpack_exports__.useNodeSelection;
+exports.useSetNodeSelection = __webpack_exports__.useSetNodeSelection;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "useNodeSelection"
+    "useNodeSelection",
+    "useSetNodeSelection"
 ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
 Object.defineProperty(exports, '__esModule', {
     value: true

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.d.ts

@@ -4,4 +4,7 @@ export declare function useNodeSelection(nodeId?: string, maintainSelection?: bo
     setSelectedNodeId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
     selectedNode: ConfigurableNode | undefined;
 };
+export declare function useSetNodeSelection(): {
+    setSelectedNodeId: (nodeId: string) => void;
+};
 //# sourceMappingURL=useNodeSelection.d.ts.map

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,iBAAiB,UAAO;;;;EAwCzE"}
+{"version":3,"file":"useNodeSelection.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAUrE,wBAAgB,gBAAgB,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,iBAAiB,UAAO;;;;EAmCzE;AAOD,wBAAgB,mBAAmB;gCAItB,MAAM;EAOlB"}

package/dist/canvas/components/NodePropertiesPanel/hooks/useNodeSelection.js

@@ -1,5 +1,15 @@
 import { useNodes, useOnSelectionChange, useReactFlow } from "../../../xyflow/react.js";
 import { useCallback, useEffect, useState } from "react";
+function applySelection(nodes, nodeId) {
+    return nodes.map((node)=>{
+        const shouldBeSelected = node.id === nodeId;
+        if (node.selected === shouldBeSelected) return node;
+        return {
+            ...node,
+            selected: shouldBeSelected
+        };
+    });
+}
 function useNodeSelection(nodeId, maintainSelection = true) {
     const nodes = useNodes();
     const { setNodes } = useReactFlow();
@@ -12,10 +22,7 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         ])
     });
     useEffect(()=>{
-        if (maintainSelection && selectedNodeId) setNodes((nds)=>nds.map((node)=>({
-                    ...node,
-                    selected: node.id === selectedNodeId
-                })));
+        if (maintainSelection && selectedNodeId) setNodes((nds)=>applySelection(nds, selectedNodeId));
     }, [
         selectedNodeId,
         maintainSelection,
@@ -28,4 +35,15 @@ function useNodeSelection(nodeId, maintainSelection = true) {
         selectedNode
     };
 }
-export { useNodeSelection };
+function useSetNodeSelection() {
+    const { setNodes } = useReactFlow();
+    const setSelectedNodeId = useCallback((nodeId)=>{
+        setNodes((nds)=>applySelection(nds, nodeId));
+    }, [
+        setNodes
+    ]);
+    return {
+        setSelectedNodeId
+    };
+}
+export { useNodeSelection, useSetNodeSelection };

package/dist/canvas/components/StageNode/DraggableTask.cjs

@@ -41,6 +41,7 @@ const sortable_namespaceObject = require("@dnd-kit/sortable");
 const utilities_namespaceObject = require("@dnd-kit/utilities");
 const apollo_core_namespaceObject = require("@uipath/apollo-core");
 const index_cjs_namespaceObject = require("../../layouts/index.cjs");
+const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
 const external_material_index_cjs_namespaceObject = require("../../../material/index.cjs");
 const external_debounce_namespaceObject = require("debounce");
 var external_debounce_default = /*#__PURE__*/ __webpack_require__.n(external_debounce_namespaceObject);
@@ -182,8 +183,9 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = (0, external_react_namespaceObject.useState)(false);
+    const zoom = (0, react_cjs_namespaceObject.useStore)((s)=>s.transform[2]);
     const taskRef = (0, external_react_namespaceObject.useRef)(null);
     const menuRef = (0, external_react_namespaceObject.useRef)(null);
     const [playLoading, setPlayLoading] = (0, external_react_namespaceObject.useState)(false);
@@ -266,7 +268,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -313,10 +315,10 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
                     })
                 })
             }),
-            contextMenuItems.length > 0 && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
+            getContextMenuItems && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_TaskMenu_cjs_namespaceObject.TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                contextMenuItems: contextMenuItems,
+                getContextMenuItems: getContextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
                 onMenuOpen: onMenuOpen,
                 taskRef: taskRef

package/dist/canvas/components/StageNode/DraggableTask.d.ts

@@ -1,4 +1,4 @@
 import type { DraggableTaskProps, TaskContentProps } from './DraggableTask.types';
 export declare const TaskContent: import("react").MemoExoticComponent<({ task, taskExecution, isDragging }: TaskContentProps) => import("react/jsx-runtime").JSX.Element>;
-export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
 //# sourceMappingURL=DraggableTask.d.ts.map

package/dist/canvas/components/StageNode/DraggableTask.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAqLH,eAAO,MAAM,aAAa,sLAvKvB,kBAAkB,6CAuKoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAqLH,eAAO,MAAM,aAAa,mLAxKvB,kBAAkB,6CAwKoC,CAAC"}

package/dist/canvas/components/StageNode/DraggableTask.js

@@ -3,6 +3,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { FontVariantToken, Padding, Spacing } from "@uipath/apollo-core";
 import { Column, Row } from "../../layouts/index.js";
+import { useStore } from "../../xyflow/react.js";
 import { ApBadge, ApCircularProgress, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import debounce from "debounce";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
@@ -143,8 +144,9 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, getContextMenuItems, onTaskClick, onMenuOpen, onTaskPlay, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const zoom = useStore((s)=>s.transform[2]);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const [playLoading, setPlayLoading] = useState(false);
@@ -227,7 +229,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -274,10 +276,10 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
                     })
                 })
             }),
-            contextMenuItems.length > 0 && /*#__PURE__*/ jsx(TaskMenu, {
+            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
                 ref: menuRef,
                 taskId: task.id,
-                contextMenuItems: contextMenuItems,
+                getContextMenuItems: getContextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
                 onMenuOpen: onMenuOpen,
                 taskRef: taskRef

package/dist/canvas/components/StageNode/DraggableTask.types.d.ts

@@ -10,12 +10,11 @@ export interface DraggableTaskProps {
     taskExecution?: StageTaskExecution;
     isSelected: boolean;
     isParallel: boolean;
-    contextMenuItems: NodeMenuItem[];
+    getContextMenuItems?: () => NodeMenuItem[];
     onTaskClick: (e: React.MouseEvent, taskId: string) => void;
     onMenuOpen?: () => void;
     onTaskPlay?: (taskId: string) => Promise<void>;
     isDragDisabled?: boolean;
     projectedDepth?: number;
-    zoom?: number;
 }
 //# sourceMappingURL=DraggableTask.types.d.ts.map

package/dist/canvas/components/StageNode/DraggableTask.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,YAAY,EAAE,CAAC;IACjC,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"DraggableTask.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,aAAa,CAAC;IACpB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,EAAE,OAAO,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,YAAY,EAAE,CAAC;IAC3C,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB"}

package/dist/canvas/components/StageNode/StageEdge.cjs

@@ -40,6 +40,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const styled_namespaceObject = require("@emotion/styled");
 var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
 const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
+const external_react_namespaceObject = require("react");
 const StageEdgeLabel = styled_default().div`
   position: absolute;
   color: var(--uix-canvas-foreground);
@@ -57,6 +58,9 @@ const StageEdgeLabel = styled_default().div`
     border-color: var(--uix-canvas-border-hover);
   }
 `;
+function stageEdgeGeometryEquality(previous, next) {
+    return previous.sourceX === next.sourceX && previous.sourceY === next.sourceY && previous.targetX === next.targetX && previous.targetY === next.targetY;
+}
 function getArrowFromBezier(path, arrowSize) {
     const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     pathEl.setAttribute('d', path);
@@ -70,19 +74,13 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
-    const sourceNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.source);
-    const targetNode = (0, react_cjs_namespaceObject.useInternalNode)(rest.target);
-    const sourceNodeX = sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX;
-    const sourceNodeY = sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY;
-    const targetNodeX = targetNode?.position.x ?? targetX;
-    const targetNodeY = targetNode?.position.y ? targetNode.position.y + 32 : targetY;
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = (0, react_cjs_namespaceObject.getSmoothStepPath)({
-        sourceX: sourceNodeX,
-        sourceY: sourceNodeY,
+        sourceX: geometry.sourceX,
+        sourceY: geometry.sourceY,
         sourcePosition,
-        targetX: targetNodeX - 1,
-        targetY: targetNodeY,
+        targetX: geometry.targetX - 1,
+        targetY: geometry.targetY,
         targetPosition,
         borderRadius: 40
     });
@@ -141,6 +139,31 @@ function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetP
         ]
     });
 }
+const StageEdgeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeInner);
+function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }) {
+    const geometry = (0, react_cjs_namespaceObject.useStore)((state)=>{
+        const sourceNode = state.nodeLookup.get(rest.source);
+        const targetNode = state.nodeLookup.get(rest.target);
+        return {
+            sourceX: sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX,
+            sourceY: sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode?.position.y ? targetNode.position.y + 32 : targetY
+        };
+    }, stageEdgeGeometryEquality);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageEdgeInnerMemo, {
+        geometry: geometry,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition,
+        selected: selected,
+        style: style,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        arrowSize: arrowSize,
+        ...rest
+    });
+}
+const StageEdge = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageEdgeComponent);
 exports.StageEdge = __webpack_exports__.StageEdge;
 exports.StageEdgeLabel = __webpack_exports__.StageEdgeLabel;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/canvas/components/StageNode/StageEdge.d.ts

@@ -8,6 +8,7 @@ type Props = EdgeProps & {
     strokeWidth?: number;
     arrowSize?: number;
 };
-export declare function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+declare function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const StageEdge: import("react").MemoExoticComponent<typeof StageEdgeComponent>;
 export {};
 //# sourceMappingURL=StageEdge.d.ts.map

package/dist/canvas/components/StageNode/StageEdge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StageEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageEdge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAO1E,eAAO,MAAM,cAAc;;;yGAgB1B,CAAC;AAEF,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAkBF,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,KAAK,EACL,MAA2C,EAC3C,WAAe,EACf,SAAa,EACb,GAAG,IAAI,EACR,EAAE,KAAK,2CAiFP"}
+{"version":3,"file":"StageEdge.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/StageEdge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAkB,MAAM,0CAA0C,CAAC;AAQ1F,eAAO,MAAM,cAAc;;;yGAgB1B,CAAC;AAEF,KAAK,KAAK,GAAG,SAAS,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA4HF,iBAAS,kBAAkB,CAAC,EAC1B,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,cAAc,EACd,cAAc,EACd,QAAQ,EACR,KAAK,EACL,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CA0BP;AAED,eAAO,MAAM,SAAS,gEAA2B,CAAC"}

package/dist/canvas/components/StageNode/StageEdge.js

@@ -1,6 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "@emotion/styled";
-import { EdgeLabelRenderer, getSmoothStepPath, useInternalNode } from "../../xyflow/react.js";
+import { EdgeLabelRenderer, getSmoothStepPath, useStore } from "../../xyflow/react.js";
+import { memo } from "react";
 const StageEdgeLabel = styled.div`
   position: absolute;
   color: var(--uix-canvas-foreground);
@@ -18,6 +19,9 @@ const StageEdgeLabel = styled.div`
     border-color: var(--uix-canvas-border-hover);
   }
 `;
+function stageEdgeGeometryEquality(previous, next) {
+    return previous.sourceX === next.sourceX && previous.sourceY === next.sourceY && previous.targetX === next.targetX && previous.targetY === next.targetY;
+}
 function getArrowFromBezier(path, arrowSize) {
     const pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
     pathEl.setAttribute('d', path);
@@ -31,19 +35,13 @@ function getArrowFromBezier(path, arrowSize) {
         angle
     };
 }
-function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
-    const sourceNode = useInternalNode(rest.source);
-    const targetNode = useInternalNode(rest.target);
-    const sourceNodeX = sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX;
-    const sourceNodeY = sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY;
-    const targetNodeX = targetNode?.position.x ?? targetX;
-    const targetNodeY = targetNode?.position.y ? targetNode.position.y + 32 : targetY;
+function StageEdgeInner({ geometry, sourcePosition, targetPosition, selected, style, stroke = 'var(--uix-canvas-foreground-emp)', strokeWidth = 2, arrowSize = 8, ...rest }) {
     const [pathData, labelX, labelY, _ex, _ey] = getSmoothStepPath({
-        sourceX: sourceNodeX,
-        sourceY: sourceNodeY,
+        sourceX: geometry.sourceX,
+        sourceY: geometry.sourceY,
         sourcePosition,
-        targetX: targetNodeX - 1,
-        targetY: targetNodeY,
+        targetX: geometry.targetX - 1,
+        targetY: geometry.targetY,
         targetPosition,
         borderRadius: 40
     });
@@ -102,4 +100,29 @@ function StageEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetP
         ]
     });
 }
+const StageEdgeInnerMemo = /*#__PURE__*/ memo(StageEdgeInner);
+function StageEdgeComponent({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, selected, style, stroke, strokeWidth, arrowSize, ...rest }) {
+    const geometry = useStore((state)=>{
+        const sourceNode = state.nodeLookup.get(rest.source);
+        const targetNode = state.nodeLookup.get(rest.target);
+        return {
+            sourceX: sourceNode ? sourceNode.position.x + (sourceNode.measured?.width ?? 0) : sourceX,
+            sourceY: sourceNode?.position.y ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode?.position.y ? targetNode.position.y + 32 : targetY
+        };
+    }, stageEdgeGeometryEquality);
+    return /*#__PURE__*/ jsx(StageEdgeInnerMemo, {
+        geometry: geometry,
+        sourcePosition: sourcePosition,
+        targetPosition: targetPosition,
+        selected: selected,
+        style: style,
+        stroke: stroke,
+        strokeWidth: strokeWidth,
+        arrowSize: arrowSize,
+        ...rest
+    });
+}
+const StageEdge = /*#__PURE__*/ memo(StageEdgeComponent);
 export { StageEdge, StageEdgeLabel };

package/dist/canvas/components/StageNode/StageNode.cjs

@@ -46,7 +46,33 @@ const external_DraggableTask_cjs_namespaceObject = require("./DraggableTask.cjs"
 const external_StageNode_styles_cjs_namespaceObject = require("./StageNode.styles.cjs");
 const external_StageNode_utils_cjs_namespaceObject = require("./StageNode.utils.cjs");
 const external_StageNodeTaskUtilities_cjs_namespaceObject = require("./StageNodeTaskUtilities.cjs");
-const StageNodeComponent = (props)=>{
+const StageNode_StageTaskDragOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ activeTask, isActiveTaskParallel, taskWidthStyle }) {
+    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
+    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
+            transform: `scale(${zoom})`,
+            transformOrigin: 'top left'
+        }), [
+        zoom
+    ]);
+    return /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
+        children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+            style: dragOverlayStyle,
+            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
+                selected: true,
+                isParallel: isActiveTaskParallel,
+                style: {
+                    cursor: 'grabbing',
+                    ...taskWidthStyle
+                },
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
+                    task: activeTask,
+                    isDragging: true
+                })
+            })
+        }) : null
+    }), document.body);
+});
+const StageNodeInner = (props)=>{
     const { dragging, selected, id, width, execution, stageDetails, addTaskLabel = 'Add task', addTaskLoading = false, replaceTaskLabel = 'Replace task', taskOptions = [], menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay } = props;
     const taskWidth = width ? width - external_StageNode_styles_cjs_namespaceObject.STAGE_CONTENT_INSET : void 0;
     const tasks = (0, external_react_namespaceObject.useMemo)(()=>stageDetails?.tasks || [], [
@@ -66,9 +92,6 @@ const StageNodeComponent = (props)=>{
     const status = execution?.stageStatus?.status;
     const statusLabel = execution?.stageStatus?.label;
     const stageDuration = execution?.stageStatus?.duration;
-    const reGroupTaskFunction = (0, external_react_namespaceObject.useMemo)(()=>onTaskGroupModification || (()=>{}), [
-        onTaskGroupModification
-    ]);
     const isStageTitleEditable = !!onStageTitleChange && !isReadOnly;
     const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
     const [label, setLabel] = (0, external_react_namespaceObject.useState)(props.stageDetails.label);
@@ -85,6 +108,7 @@ const StageNodeComponent = (props)=>{
         taskIndex: -1
     });
     const isConnecting = (0, react_cjs_namespaceObject.useStore)((state)=>!!state.connectionClickStartHandle);
+    const storeApi = (0, react_cjs_namespaceObject.useStoreApi)();
     const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(id);
     const [isAddingTask, setIsAddingTask] = (0, external_react_namespaceObject.useState)(false);
     const [isReplacingTask, setIsReplacingTask] = (0, external_react_namespaceObject.useState)(false);
@@ -124,7 +148,6 @@ const StageNodeComponent = (props)=>{
         tasks,
         activeDragId
     ]);
-    const { zoom } = (0, react_cjs_namespaceObject.useViewport)();
     const projected = (0, external_react_namespaceObject.useMemo)(()=>{
         if (!activeDragId || !overId) return null;
         return (0, external_StageNode_utils_cjs_namespaceObject.getProjection)(tasks, activeDragId, overId, offsetLeft);
@@ -207,18 +230,21 @@ const StageNodeComponent = (props)=>{
         handleStageTitleClickToSave,
         isStageTitleEditing
     ]);
-    const contextMenuItems = (0, external_react_namespaceObject.useCallback)((isParallel, groupIndex, taskIndex, tasksLength, taskGroupLength, isAboveParallel, isBelowParallel)=>{
+    const hasContextMenu = !!(onReplaceTaskFromToolbox || onTaskGroupModification);
+    const buildContextMenuItems = (0, external_react_namespaceObject.useCallback)((groupIndex, taskIndex)=>{
+        const taskGroup = tasks[groupIndex] ?? [];
+        const isParallel = taskGroup.length > 1;
         const items = [];
         if (onReplaceTaskFromToolbox) {
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getMenuItem)('replace-task', 'Replace task', ()=>{
-                const taskId = tasks[groupIndex]?.[taskIndex]?.id;
+                const taskId = taskGroup[taskIndex]?.id;
                 if (taskId) onTaskClick?.(taskId);
                 setIsReplacingTask(true);
             }));
             items.push((0, external_StageNodeTaskUtilities_cjs_namespaceObject.getDivider)());
         }
         if (onTaskGroupModification) {
-            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasksLength, taskIndex, taskGroupLength, isAboveParallel, isBelowParallel, reGroupTaskFunction);
+            const reGroupOptions = (0, external_StageNodeTaskUtilities_cjs_namespaceObject.getContextMenuItems)(isParallel, groupIndex, tasks.length, taskIndex, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1, onTaskGroupModification);
             return [
                 ...items,
                 ...reGroupOptions
@@ -229,10 +255,9 @@ const StageNodeComponent = (props)=>{
         onReplaceTaskFromToolbox,
         onTaskClick,
         onTaskGroupModification,
-        reGroupTaskFunction,
         tasks
     ]);
-    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useNodeSelection)();
+    const { setSelectedNodeId } = (0, hooks_index_cjs_namespaceObject.useSetNodeSelection)();
     const handleStageClick = (0, external_react_namespaceObject.useCallback)(()=>{
         onStageClick?.();
     }, [
@@ -355,9 +380,9 @@ const StageNodeComponent = (props)=>{
         setActiveDragId(event.active.id);
     }, []);
     const handleDragMove = (0, external_react_namespaceObject.useCallback)((event)=>{
-        setOffsetLeft(event.delta.x / zoom);
+        setOffsetLeft(event.delta.x / storeApi.getState().transform[2]);
     }, [
-        zoom
+        storeApi
     ]);
     const handleDragOver = (0, external_react_namespaceObject.useCallback)((event)=>{
         setOverId(event.over?.id ?? null);
@@ -393,12 +418,6 @@ const StageNodeComponent = (props)=>{
         } : void 0, [
         taskWidth
     ]);
-    const dragOverlayStyle = (0, external_react_namespaceObject.useMemo)(()=>({
-            transform: `scale(${zoom})`,
-            transformOrigin: 'top left'
-        }), [
-        zoom
-    ]);
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         "data-testid": `stage-${id}`,
         style: {
@@ -538,13 +557,12 @@ const StageNodeComponent = (props)=>{
                                                                     taskExecution: taskExecution,
                                                                     isSelected: selectedTaskId === task.id,
                                                                     isParallel: isParallel,
-                                                                    contextMenuItems: contextMenuItems(isParallel, groupIndex, taskIndex, tasks.length, taskGroup.length, (tasks[groupIndex - 1]?.length ?? 0) > 1, (tasks[groupIndex + 1]?.length ?? 0) > 1),
                                                                     onTaskClick: handleTaskClick,
                                                                     projectedDepth: task.id === activeDragId && projected ? projected.depth : void 0,
                                                                     onTaskPlay: onTaskPlay,
                                                                     isDragDisabled: !onTaskReorder,
-                                                                    zoom: zoom,
-                                                                    ...(onTaskGroupModification || onReplaceTaskFromToolbox) && {
+                                                                    ...hasContextMenu && {
+                                                                        getContextMenuItems: ()=>buildContextMenuItems(groupIndex, taskIndex),
                                                                         onMenuOpen: ()=>{
                                                                             taskStateReference.current = {
                                                                                 isParallel,
@@ -562,23 +580,11 @@ const StageNodeComponent = (props)=>{
                                         })
                                     })
                                 }),
-                                /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(core_namespaceObject.DragOverlay, {
-                                    children: activeTask ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-                                        style: dragOverlayStyle,
-                                        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_StageNode_styles_cjs_namespaceObject.StageTask, {
-                                            selected: true,
-                                            isParallel: isActiveTaskParallel,
-                                            style: {
-                                                cursor: 'grabbing',
-                                                ...taskWidthStyle
-                                            },
-                                            children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DraggableTask_cjs_namespaceObject.TaskContent, {
-                                                task: activeTask,
-                                                isDragging: true
-                                            })
-                                        })
-                                    }) : null
-                                }), document.body)
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNode_StageTaskDragOverlay, {
+                                    activeTask: activeTask,
+                                    isActiveTaskParallel: isActiveTaskParallel,
+                                    taskWidthStyle: taskWidthStyle
+                                })
                             ]
                         }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_cjs_namespaceObject.Column, {
                             py: 2,
@@ -632,6 +638,31 @@ const StageNodeComponent = (props)=>{
         ]
     });
 };
+const StageNodeInnerMemo = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeInner);
+const StageNodeComponent = ({ dragging, selected, id, width, execution, stageDetails, addTaskLabel, addTaskLoading, replaceTaskLabel, taskOptions, menuItems, pendingReplaceTask, onStageClick, onTaskAdd, onAddTaskFromToolbox, onTaskToolboxSearch, onTaskClick, onTaskGroupModification, onStageTitleChange, onTaskReorder, onReplaceTaskFromToolbox, onTaskPlay })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(StageNodeInnerMemo, {
+        dragging: dragging,
+        selected: selected,
+        id: id,
+        width: width,
+        execution: execution,
+        stageDetails: stageDetails,
+        addTaskLabel: addTaskLabel,
+        addTaskLoading: addTaskLoading,
+        replaceTaskLabel: replaceTaskLabel,
+        taskOptions: taskOptions,
+        menuItems: menuItems,
+        pendingReplaceTask: pendingReplaceTask,
+        onStageClick: onStageClick,
+        onTaskAdd: onTaskAdd,
+        onAddTaskFromToolbox: onAddTaskFromToolbox,
+        onTaskToolboxSearch: onTaskToolboxSearch,
+        onTaskClick: onTaskClick,
+        onTaskGroupModification: onTaskGroupModification,
+        onStageTitleChange: onStageTitleChange,
+        onTaskReorder: onTaskReorder,
+        onReplaceTaskFromToolbox: onReplaceTaskFromToolbox,
+        onTaskPlay: onTaskPlay
+    });
 const StageNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(StageNodeComponent);
 exports.StageNode = __webpack_exports__.StageNode;
 for(var __rspack_i in __webpack_exports__)if (-1 === [