@uipath/apollo-react 3.68.2 → 3.68.3-pr431.8e3b0c3

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

@@ -0,0 +1,104 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Spacing } from "@uipath/apollo-core";
+import { ApCircularProgress, ApIconButton, ApTooltip } from "../../../material/index.js";
+import debounce from "debounce";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { PlayIcon } from "../../icons/index.js";
+import { TaskContent } from "./DraggableTask.js";
+import { StageTask } from "./StageNode.styles.js";
+import { TaskMenu } from "./TaskMenu.js";
+const AdhocTaskPlayButton = /*#__PURE__*/ memo(({ taskId, onTaskPlay })=>{
+    const [playLoading, setPlayLoading] = useState(false);
+    const debouncedTaskPlay = useMemo(()=>debounce(async (id)=>{
+            setPlayLoading(true);
+            try {
+                await onTaskPlay(id);
+            } catch  {} finally{
+                setPlayLoading(false);
+            }
+        }, 500, {
+            immediate: true
+        }), [
+        onTaskPlay
+    ]);
+    const handlePlayClick = useCallback((e)=>{
+        e.stopPropagation();
+        e.preventDefault();
+        debouncedTaskPlay(taskId);
+    }, [
+        debouncedTaskPlay,
+        taskId
+    ]);
+    return /*#__PURE__*/ jsx(ApTooltip, {
+        content: "Trigger task",
+        placement: "top",
+        children: /*#__PURE__*/ jsx(ApIconButton, {
+            "data-testid": `stage-task-play-${taskId}`,
+            onClick: handlePlayClick,
+            onMouseDown: (e)=>e.stopPropagation(),
+            onKeyDown: (e)=>e.stopPropagation(),
+            className: "task-menu-icon-button",
+            sx: {
+                color: 'var(--uix-canvas-primary) !important',
+                minWidth: 'unset !important',
+                width: `${Spacing.SpacingL} !important`,
+                height: `${Spacing.SpacingL} !important`,
+                padding: '0 !important'
+            },
+            children: playLoading ? /*#__PURE__*/ jsx(ApCircularProgress, {
+                size: 20
+            }) : /*#__PURE__*/ jsx(PlayIcon, {
+                w: 20,
+                h: 20
+            })
+        })
+    });
+});
+const AdhocTaskItemComponent = ({ task, taskExecution, isSelected, getContextMenuItems, onTaskClick, onTaskPlay })=>{
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const taskRef = useRef(null);
+    const menuRef = useRef(null);
+    const handleClick = useCallback((e)=>{
+        if (isMenuOpen) return;
+        onTaskClick(e, task.id);
+    }, [
+        isMenuOpen,
+        onTaskClick,
+        task.id
+    ]);
+    const handleMenuOpenChange = useCallback((isOpen)=>{
+        setIsMenuOpen(isOpen);
+    }, []);
+    const handleContextMenu = useCallback((e)=>{
+        menuRef.current?.handleContextMenu(e);
+    }, []);
+    return /*#__PURE__*/ jsxs(StageTask, {
+        ref: taskRef,
+        "data-testid": `stage-task-${task.id}`,
+        selected: isSelected,
+        status: taskExecution?.status,
+        onClick: handleClick,
+        ...getContextMenuItems && {
+            onContextMenu: handleContextMenu
+        },
+        children: [
+            /*#__PURE__*/ jsx(TaskContent, {
+                task: task,
+                taskExecution: taskExecution
+            }),
+            onTaskPlay && /*#__PURE__*/ jsx(AdhocTaskPlayButton, {
+                taskId: task.id,
+                onTaskPlay: onTaskPlay
+            }),
+            getContextMenuItems && /*#__PURE__*/ jsx(TaskMenu, {
+                ref: menuRef,
+                taskId: task.id,
+                getContextMenuItems: getContextMenuItems,
+                onMenuOpenChange: handleMenuOpenChange,
+                taskRef: taskRef
+            })
+        ]
+    });
+};
+const AdhocTaskItem = /*#__PURE__*/ memo(AdhocTaskItemComponent);
+export { AdhocTaskItem };

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

@@ -32,6 +32,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_react_namespaceObject = require("react");
 const external_icons_index_cjs_namespaceObject = require("../../icons/index.cjs");
@@ -171,8 +172,9 @@ const TaskContent = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ ta
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, 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 handleClick = (0, external_react_namespaceObject.useCallback)((e)=>{
@@ -189,6 +191,14 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
     const handleContextMenu = (0, external_react_namespaceObject.useCallback)((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
+    const handleGetContextMenuItems = (0, external_react_namespaceObject.useCallback)(()=>{
+        if (!getContextMenuItems) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = (0, sortable_namespaceObject.useSortable)({
         id: task.id,
         disabled: isDragDisabled
@@ -234,7 +244,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -258,12 +268,11 @@ 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: handleGetContextMenuItems,
                 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, isDragDisabled, projectedDepth, zoom, }: DraggableTaskProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const DraggableTask: import("react").MemoExoticComponent<({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, 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":"AAeA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAkIH,eAAO,MAAM,aAAa,0KArHvB,kBAAkB,6CAqHoC,CAAC"}
+{"version":3,"file":"DraggableTask.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StageNode/DraggableTask.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAgClF,eAAO,MAAM,WAAW,4EAA8C,gBAAgB,6CAwEpF,CAAC;AAyIH,eAAO,MAAM,aAAa,kLA5HvB,kBAAkB,6CA4HoC,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, ApIconButton, ApTooltip, ApTypography, BadgeSize } from "../../../material/index.js";
 import { memo, useCallback, useMemo, useRef, useState } from "react";
 import { EntryConditionIcon } from "../../icons/index.js";
@@ -142,8 +143,9 @@ const TaskContent = /*#__PURE__*/ memo(({ task, taskExecution, isDragging })=>/*
             ]
         })
     }));
-const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, contextMenuItems, onTaskClick, onMenuOpen, isDragDisabled, projectedDepth, zoom = 1 })=>{
+const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, groupIndex, taskIndex, getContextMenuItems, onTaskClick, isDragDisabled, projectedDepth })=>{
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const zoom = useStore((s)=>s.transform[2]);
     const taskRef = useRef(null);
     const menuRef = useRef(null);
     const handleClick = useCallback((e)=>{
@@ -160,6 +162,14 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
     const handleContextMenu = useCallback((e)=>{
         menuRef.current?.handleContextMenu(e);
     }, []);
+    const handleGetContextMenuItems = useCallback(()=>{
+        if (!getContextMenuItems) return [];
+        return getContextMenuItems(groupIndex, taskIndex);
+    }, [
+        getContextMenuItems,
+        groupIndex,
+        taskIndex
+    ]);
     const { attributes, listeners, setNodeRef, transition, transform, isDragging } = useSortable({
         id: task.id,
         disabled: isDragDisabled
@@ -205,7 +215,7 @@ const DraggableTaskComponent = ({ task, taskExecution, isSelected, isParallel, c
         isParallel: isParallel,
         isDragEnabled: !isDragDisabled,
         onClick: handleClick,
-        ...contextMenuItems.length > 0 && {
+        ...getContextMenuItems && {
             onContextMenu: handleContextMenu
         },
         children: [
@@ -229,12 +239,11 @@ 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: handleGetContextMenuItems,
                 onMenuOpenChange: handleMenuOpenChange,
-                onMenuOpen: onMenuOpen,
                 taskRef: taskRef
             })
         ]

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

@@ -10,12 +10,12 @@ export interface DraggableTaskProps {
     taskExecution?: StageTaskExecution;
     isSelected: boolean;
     isParallel: boolean;
-    contextMenuItems: NodeMenuItem[];
+    groupIndex: number;
+    taskIndex: number;
+    getContextMenuItems?: (groupIndex: number, taskIndex: number) => 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,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,mBAAmB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,KAAK,YAAY,EAAE,CAAC;IAChF,WAAW,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,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 ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode ? 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 ? sourceNode.position.y + 32 : sourceY,
+            targetX: targetNode?.position.x ?? targetX,
+            targetY: targetNode ? 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 };