@uipath/apollo-react 4.15.1 → 4.16.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/components/AddNodePanel/AddNodeManager.cjs +6 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.js +6 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs +9 -3
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.js +9 -3
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +2 -1
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.cjs +5 -4
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +4 -3
- package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +108 -13
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +10 -5
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.js +108 -13
- package/dist/canvas/components/ButtonHandle/ButtonHandleLayoutUtils.cjs +159 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleLayoutUtils.d.ts +21 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleLayoutUtils.d.ts.map +1 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleLayoutUtils.js +122 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +10 -2
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts +2 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +5 -3
- package/dist/canvas/components/ButtonHandle/HandleButton.cjs +13 -2
- package/dist/canvas/components/ButtonHandle/HandleButton.d.ts +10 -1
- package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/HandleButton.js +13 -2
- package/dist/canvas/components/ButtonHandle/useButtonHandles.cjs +4 -2
- package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts +2 -1
- package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/useButtonHandles.js +4 -2
- package/dist/canvas/components/CanvasTooltip.cjs +2 -0
- package/dist/canvas/components/CanvasTooltip.d.ts +2 -2
- package/dist/canvas/components/CanvasTooltip.d.ts.map +1 -1
- package/dist/canvas/components/CanvasTooltip.js +2 -0
- package/dist/canvas/components/Edges/SequenceEdge.cjs +8 -4
- package/dist/canvas/components/Edges/SequenceEdge.js +8 -4
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +24 -22
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +25 -23
- package/dist/canvas/components/LoopNode/LoopCanvasNode.cjs +75 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts +6 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopCanvasNode.js +41 -0
- package/dist/canvas/components/LoopNode/LoopNode.cjs +447 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.cjs +56 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts +7 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.js +7 -0
- package/dist/canvas/components/LoopNode/LoopNode.d.ts +5 -0
- package/dist/canvas/components/LoopNode/LoopNode.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs +145 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +29 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.js +99 -0
- package/dist/canvas/components/LoopNode/LoopNode.js +413 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.cjs +18 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts +22 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.js +0 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.cjs +61 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts +9 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.js +27 -0
- package/dist/canvas/components/LoopNode/index.cjs +79 -0
- package/dist/canvas/components/LoopNode/index.d.ts +5 -0
- package/dist/canvas/components/LoopNode/index.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/index.js +4 -0
- package/dist/canvas/components/NodeViewportOverlay.cjs +63 -0
- package/dist/canvas/components/NodeViewportOverlay.d.ts +22 -0
- package/dist/canvas/components/NodeViewportOverlay.d.ts.map +1 -0
- package/dist/canvas/components/NodeViewportOverlay.js +29 -0
- package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.cjs +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.js +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +25 -23
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +27 -25
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +10 -3
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts +1 -1
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.js +10 -3
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts +1 -0
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map +1 -1
- package/dist/canvas/components/index.cjs +27 -20
- package/dist/canvas/components/index.d.ts +1 -0
- package/dist/canvas/components/index.d.ts.map +1 -1
- package/dist/canvas/components/index.js +1 -0
- package/dist/canvas/constants.cjs +12 -0
- package/dist/canvas/constants.d.ts +3 -0
- package/dist/canvas/constants.d.ts.map +1 -1
- package/dist/canvas/constants.js +4 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +22 -23
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +23 -24
- package/dist/canvas/hooks/usePreviewNode.cjs +2 -1
- package/dist/canvas/hooks/usePreviewNode.d.ts.map +1 -1
- package/dist/canvas/hooks/usePreviewNode.js +2 -1
- package/dist/canvas/schema/node-definition/handle.cjs +10 -2
- package/dist/canvas/schema/node-definition/handle.d.ts +9 -0
- package/dist/canvas/schema/node-definition/handle.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/handle.js +6 -1
- package/dist/canvas/schema/node-definition/index.cjs +4 -1
- package/dist/canvas/schema/node-definition/index.d.ts +3 -3
- package/dist/canvas/schema/node-definition/index.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/index.js +2 -2
- package/dist/canvas/schema/node-definition/node-manifest.cjs +2 -1
- package/dist/canvas/schema/node-definition/node-manifest.d.ts +7 -0
- package/dist/canvas/schema/node-definition/node-manifest.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/node-manifest.js +2 -1
- package/dist/canvas/schema/node-instance/base.d.ts +1 -0
- package/dist/canvas/schema/node-instance/base.d.ts.map +1 -1
- package/dist/canvas/schema/node-instance/node.d.ts +1 -0
- package/dist/canvas/schema/node-instance/node.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/hooks/useCanvasStory.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts +2 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
- package/dist/canvas/styles/reactflow-reset.css +2 -2
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/dist/canvas/utils/NodeUtils.cjs +4 -0
- package/dist/canvas/utils/NodeUtils.d.ts +2 -1
- package/dist/canvas/utils/NodeUtils.d.ts.map +1 -1
- package/dist/canvas/utils/NodeUtils.js +2 -1
- package/dist/canvas/utils/collapse.cjs +13 -6
- package/dist/canvas/utils/collapse.d.ts.map +1 -1
- package/dist/canvas/utils/collapse.js +9 -2
- package/dist/canvas/utils/createPreviewGraph.cjs +126 -0
- package/dist/canvas/utils/createPreviewGraph.d.ts +36 -0
- package/dist/canvas/utils/createPreviewGraph.d.ts.map +1 -0
- package/dist/canvas/utils/createPreviewGraph.js +83 -0
- package/dist/canvas/utils/createPreviewNode.cjs +30 -11
- package/dist/canvas/utils/createPreviewNode.d.ts +10 -2
- package/dist/canvas/utils/createPreviewNode.d.ts.map +1 -1
- package/dist/canvas/utils/createPreviewNode.js +21 -11
- package/dist/canvas/utils/index.cjs +33 -26
- package/dist/canvas/utils/index.d.ts +2 -1
- package/dist/canvas/utils/index.d.ts.map +1 -1
- package/dist/canvas/utils/index.js +2 -1
- package/package.json +3 -3
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
import { Position } from '../../xyflow/react.ts';
|
|
2
|
-
export
|
|
2
|
+
export type HandleButtonPortal = {
|
|
3
|
+
nodeId: string;
|
|
4
|
+
left: number;
|
|
5
|
+
top: number;
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
transform: string;
|
|
9
|
+
};
|
|
10
|
+
export declare const HandleButton: import("react").MemoExoticComponent<({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor, portal, }: {
|
|
3
11
|
visible?: boolean;
|
|
4
12
|
labelVisible?: boolean;
|
|
5
13
|
position: Position;
|
|
@@ -8,6 +16,7 @@ export declare const HandleButton: import("react").MemoExoticComponent<({ visibl
|
|
|
8
16
|
label?: string;
|
|
9
17
|
labelIcon?: React.ReactNode;
|
|
10
18
|
labelBackgroundColor?: string;
|
|
19
|
+
portal?: HandleButtonPortal;
|
|
11
20
|
}) => import("react/jsx-runtime").JSX.Element>;
|
|
12
21
|
export declare const HandleHoverBridge: import("react").MemoExoticComponent<({ position, visible }: {
|
|
13
22
|
position: Position;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"HandleButton.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/HandleButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAepE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAUF,eAAO,MAAM,YAAY,kJAWpB;IACD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,MAAM,CAAC,EAAE,kBAAkB,CAAC;CAC7B,6CA6GF,CAAC;AA0CF,eAAO,MAAM,iBAAiB,8DACJ;IAAE,QAAQ,EAAE,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,oDAOlE,CAAC"}
|
|
@@ -3,6 +3,7 @@ import { Row } from "../../layouts/index.js";
|
|
|
3
3
|
import { Position } from "../../xyflow/react.js";
|
|
4
4
|
import { memo, useCallback, useEffect, useRef } from "react";
|
|
5
5
|
import { cx } from "../../utils/CssUtil.js";
|
|
6
|
+
import { NodeViewportOverlay } from "../NodeViewportOverlay.js";
|
|
6
7
|
import { CanvasInlineButton } from "./CanvasInlineButton.js";
|
|
7
8
|
import { LABEL_SHADOW_STYLE } from "./HandleLabel.js";
|
|
8
9
|
const BUTTON_POSITION = {
|
|
@@ -12,7 +13,7 @@ const BUTTON_POSITION = {
|
|
|
12
13
|
[Position.Right]: 'flex-row left-full top-1/2 -translate-y-1/2'
|
|
13
14
|
};
|
|
14
15
|
const DRAG_THRESHOLD = 5;
|
|
15
|
-
const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor })=>{
|
|
16
|
+
const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAction, handleRef, label, labelIcon, labelBackgroundColor, portal })=>{
|
|
16
17
|
const didDragRef = useRef(false);
|
|
17
18
|
const teardownRef = useRef(null);
|
|
18
19
|
useEffect(()=>()=>teardownRef.current?.(), []);
|
|
@@ -60,7 +61,7 @@ const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAc
|
|
|
60
61
|
document.addEventListener('pointercancel', cleanup);
|
|
61
62
|
teardownRef.current = cleanup;
|
|
62
63
|
}, []);
|
|
63
|
-
|
|
64
|
+
const content = /*#__PURE__*/ jsxs("div", {
|
|
64
65
|
className: cx('absolute flex items-center pointer-events-none', BUTTON_POSITION[position]),
|
|
65
66
|
children: [
|
|
66
67
|
visible && /*#__PURE__*/ jsx(CanvasInlineButton, {
|
|
@@ -77,6 +78,16 @@ const HandleButton = /*#__PURE__*/ memo(({ visible, labelVisible, position, onAc
|
|
|
77
78
|
})
|
|
78
79
|
]
|
|
79
80
|
});
|
|
81
|
+
if (portal) {
|
|
82
|
+
const { nodeId, ...anchor } = portal;
|
|
83
|
+
return /*#__PURE__*/ jsx(NodeViewportOverlay, {
|
|
84
|
+
nodeId: nodeId,
|
|
85
|
+
anchor: anchor,
|
|
86
|
+
layer: "nodeHandleAffordance",
|
|
87
|
+
children: content
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
return content;
|
|
80
91
|
});
|
|
81
92
|
const InlineLabel = ({ label, labelIcon, backgroundColor, visible = true })=>/*#__PURE__*/ jsx("div", {
|
|
82
93
|
className: cx('px-1.5 py-0.5 rounded-sm whitespace-nowrap select-none transition-opacity duration-250 z-10', visible ? 'opacity-100' : 'opacity-0'),
|
|
@@ -32,7 +32,7 @@ const external_react_namespaceObject = require("react");
|
|
|
32
32
|
const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
|
|
33
33
|
const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/ConnectedHandlesContext.cjs");
|
|
34
34
|
const external_index_cjs_namespaceObject = require("./index.cjs");
|
|
35
|
-
const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
|
|
35
|
+
const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, portalActions })=>{
|
|
36
36
|
const connectedHandleIds = (0, ConnectedHandlesContext_cjs_namespaceObject.useConnectedHandles)(nodeId);
|
|
37
37
|
const node = (0, react_namespaceObject.useNodesData)(nodeId);
|
|
38
38
|
const handleElements = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
@@ -56,7 +56,8 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
|
|
|
56
56
|
customPositionAndOffsets: config.customPositionAndOffsets,
|
|
57
57
|
shouldShowAddButtonFn: shouldShowAddButtonFn,
|
|
58
58
|
nodeWidth: nodeWidth,
|
|
59
|
-
nodeHeight: nodeHeight
|
|
59
|
+
nodeHeight: nodeHeight,
|
|
60
|
+
portalActions: portalActions
|
|
60
61
|
}, `${i}:${config.position}:${config.handles.map((h)=>h.id).join(',')}`);
|
|
61
62
|
});
|
|
62
63
|
return elements;
|
|
@@ -73,6 +74,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
|
|
|
73
74
|
shouldShowAddButtonFn,
|
|
74
75
|
nodeWidth,
|
|
75
76
|
nodeHeight,
|
|
77
|
+
portalActions,
|
|
76
78
|
node?.data
|
|
77
79
|
]);
|
|
78
80
|
return handleElements;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HandleGroupManifest } from '../../schema/node-definition';
|
|
2
2
|
import type { HandleActionEvent } from '../ButtonHandle';
|
|
3
|
-
export declare const useButtonHandles: ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, }: {
|
|
3
|
+
export declare const useButtonHandles: ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, portalActions, }: {
|
|
4
4
|
handleConfigurations: HandleGroupManifest[];
|
|
5
5
|
shouldShowHandles: boolean;
|
|
6
6
|
nodeId: string;
|
|
@@ -11,6 +11,7 @@ export declare const useButtonHandles: ({ handleConfigurations, shouldShowHandle
|
|
|
11
11
|
showNotches?: boolean;
|
|
12
12
|
nodeWidth?: number;
|
|
13
13
|
nodeHeight?: number;
|
|
14
|
+
portalActions?: boolean;
|
|
14
15
|
shouldShowAddButtonFn?: ({ showAddButton, selected, hovered, }: {
|
|
15
16
|
showAddButton: boolean;
|
|
16
17
|
selected: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useButtonHandles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/useButtonHandles.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,GAAI,
|
|
1
|
+
{"version":3,"file":"useButtonHandles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/ButtonHandle/useButtonHandles.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAGxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,eAAO,MAAM,gBAAgB,GAAI,gLAa9B;IACD,oBAAoB,EAAE,mBAAmB,EAAE,CAAC;IAC5C,iBAAiB,EAAE,OAAO,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAUxB,qBAAqB,CAAC,EAAE,CAAC,EACvB,aAAa,EACb,QAAQ,EACR,OAAO,GACR,EAAE;QACD,aAAa,EAAE,OAAO,CAAC;QACvB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,EAAE,OAAO,CAAC;KAClB,KAAK,OAAO,CAAC;CACf,wFAkEA,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { useMemo } from "react";
|
|
|
4
4
|
import { resolveHandles } from "../../utils/manifest-resolver.js";
|
|
5
5
|
import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
|
|
6
6
|
import { ButtonHandles } from "./index.js";
|
|
7
|
-
const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight })=>{
|
|
7
|
+
const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleAction, nodeId, selected, hovered, showAddButton, showNotches, shouldShowAddButtonFn, nodeWidth, nodeHeight, portalActions })=>{
|
|
8
8
|
const connectedHandleIds = useConnectedHandles(nodeId);
|
|
9
9
|
const node = useNodesData(nodeId);
|
|
10
10
|
const handleElements = useMemo(()=>{
|
|
@@ -28,7 +28,8 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
|
|
|
28
28
|
customPositionAndOffsets: config.customPositionAndOffsets,
|
|
29
29
|
shouldShowAddButtonFn: shouldShowAddButtonFn,
|
|
30
30
|
nodeWidth: nodeWidth,
|
|
31
|
-
nodeHeight: nodeHeight
|
|
31
|
+
nodeHeight: nodeHeight,
|
|
32
|
+
portalActions: portalActions
|
|
32
33
|
}, `${i}:${config.position}:${config.handles.map((h)=>h.id).join(',')}`);
|
|
33
34
|
});
|
|
34
35
|
return elements;
|
|
@@ -45,6 +46,7 @@ const useButtonHandles = ({ handleConfigurations, shouldShowHandles, handleActio
|
|
|
45
46
|
shouldShowAddButtonFn,
|
|
46
47
|
nodeWidth,
|
|
47
48
|
nodeHeight,
|
|
49
|
+
portalActions,
|
|
48
50
|
node?.data
|
|
49
51
|
]);
|
|
50
52
|
return handleElements;
|
|
@@ -102,6 +102,8 @@ function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay
|
|
|
102
102
|
]);
|
|
103
103
|
const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
|
|
104
104
|
const hasProvider = (0, external_react_namespaceObject.useContext)(HasTooltipProviderContext);
|
|
105
|
+
const isEmptyContent = null == content || false === content || 'string' == typeof content && '' === content.trim();
|
|
106
|
+
if (isEmptyContent) return children;
|
|
105
107
|
const tooltip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(tooltip_namespaceObject.Tooltip, {
|
|
106
108
|
open: effectiveOpen,
|
|
107
109
|
onOpenChange: handleOpenChange,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type PropsWithChildren, type ReactNode } from 'react';
|
|
1
|
+
import React, { type PropsWithChildren, type ReactNode } from 'react';
|
|
2
2
|
export declare function CanvasTooltipProviderMarker({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
|
|
4
4
|
interface CanvasTooltipProps extends PropsWithChildren {
|
|
@@ -9,6 +9,6 @@ interface CanvasTooltipProps extends PropsWithChildren {
|
|
|
9
9
|
isOpen?: boolean;
|
|
10
10
|
hide?: boolean;
|
|
11
11
|
}
|
|
12
|
-
export declare function CanvasTooltip({ content, placement, smartTooltip, delay, isOpen, hide, children, }: Readonly<CanvasTooltipProps>): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
export declare function CanvasTooltip({ content, placement, smartTooltip, delay, isOpen, hide, children, }: Readonly<CanvasTooltipProps>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
|
|
13
13
|
export type { CanvasTooltipProps };
|
|
14
14
|
//# sourceMappingURL=CanvasTooltip.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasTooltip.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasTooltip.tsx"],"names":[],"mappings":"AAOA,
|
|
1
|
+
{"version":3,"file":"CanvasTooltip.d.ts","sourceRoot":"","sources":["../../../src/canvas/components/CanvasTooltip.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,EAEZ,KAAK,iBAAiB,EACtB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AASf,wBAAgB,2BAA2B,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAI1E;AAED,KAAK,gBAAgB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAE5D,UAAU,kBAAmB,SAAQ,iBAAiB;IAEpD,OAAO,EAAE,SAAS,CAAC;IAEnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAE7B,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AASD,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,SAAiB,EACjB,YAAoB,EACpB,KAAa,EACb,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE,QAAQ,CAAC,kBAAkB,CAAC,yTAkG9B;AAED,YAAY,EAAE,kBAAkB,EAAE,CAAC"}
|
|
@@ -63,6 +63,8 @@ function CanvasTooltip({ content, placement = 'top', smartTooltip = false, delay
|
|
|
63
63
|
]);
|
|
64
64
|
const effectiveOpen = isTooltipHidden ? false : isOpen ?? hoverOpen;
|
|
65
65
|
const hasProvider = useContext(HasTooltipProviderContext);
|
|
66
|
+
const isEmptyContent = null == content || false === content || 'string' == typeof content && '' === content.trim();
|
|
67
|
+
if (isEmptyContent) return children;
|
|
66
68
|
const tooltip = /*#__PURE__*/ jsxs(Tooltip, {
|
|
67
69
|
open: effectiveOpen,
|
|
68
70
|
onOpenChange: handleOpenChange,
|
|
@@ -29,8 +29,8 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
30
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
31
31
|
const external_react_namespaceObject = require("react");
|
|
32
|
-
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
33
32
|
const index_cjs_namespaceObject = require("../../hooks/index.cjs");
|
|
33
|
+
const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
|
|
34
34
|
const BaseCanvasModeProvider_cjs_namespaceObject = require("../BaseCanvas/BaseCanvasModeProvider.cjs");
|
|
35
35
|
const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
|
|
36
36
|
const external_EdgeUtils_cjs_namespaceObject = require("./EdgeUtils.cjs");
|
|
@@ -80,7 +80,11 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
80
80
|
const pathElementRef = (0, external_react_namespaceObject.useRef)(null);
|
|
81
81
|
const { mode } = (0, BaseCanvasModeProvider_cjs_namespaceObject.useBaseCanvasMode)();
|
|
82
82
|
const isReadOnly = 'readonly' === mode;
|
|
83
|
-
const
|
|
83
|
+
const previewEdge = (0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)({
|
|
84
|
+
id,
|
|
85
|
+
source,
|
|
86
|
+
target
|
|
87
|
+
});
|
|
84
88
|
const executionStatus = (0, index_cjs_namespaceObject.useEdgeExecutionState)(id, target);
|
|
85
89
|
const { validationStatus } = (0, index_cjs_namespaceObject.useElementValidationStatus)(id) ?? {
|
|
86
90
|
validationStatus: void 0
|
|
@@ -118,7 +122,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
118
122
|
const getEdgeColor = ()=>{
|
|
119
123
|
if (isDiffAdded) return 'var(--canvas-success-icon)';
|
|
120
124
|
if (isDiffRemoved) return 'var(--canvas-error-icon)';
|
|
121
|
-
if (
|
|
125
|
+
if (previewEdge) return 'var(--canvas-primary)';
|
|
122
126
|
if (selected) return 'var(--canvas-primary)';
|
|
123
127
|
if (isHovered) return 'var(--canvas-primary-hover)';
|
|
124
128
|
if (status) return external_EdgeUtils_cjs_namespaceObject.edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
|
|
@@ -162,7 +166,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
162
166
|
strokeWidth: style?.strokeWidth || 2,
|
|
163
167
|
style: {
|
|
164
168
|
stroke: edgeColor,
|
|
165
|
-
strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' :
|
|
169
|
+
strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
|
|
166
170
|
opacity: style?.opacity !== void 0 ? style.opacity : 1,
|
|
167
171
|
transition: 'stroke 0.2s ease, opacity 0.2s ease'
|
|
168
172
|
},
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Position } from "../../xyflow/react.js";
|
|
3
3
|
import { memo, useRef, useState } from "react";
|
|
4
|
-
import { PREVIEW_EDGE_ID } from "../../constants.js";
|
|
5
4
|
import { useEdgeExecutionState, useEdgePath, useElementValidationStatus } from "../../hooks/index.js";
|
|
5
|
+
import { isPreviewEdge } from "../../utils/createPreviewNode.js";
|
|
6
6
|
import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
|
|
7
7
|
import { EdgeToolbar, useEdgeToolbarState } from "../Toolbar/index.js";
|
|
8
8
|
import { edgeTargetStatusToEdgeColor, getStatusAnimation } from "./EdgeUtils.js";
|
|
@@ -52,7 +52,11 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
52
52
|
const pathElementRef = useRef(null);
|
|
53
53
|
const { mode } = useBaseCanvasMode();
|
|
54
54
|
const isReadOnly = 'readonly' === mode;
|
|
55
|
-
const
|
|
55
|
+
const previewEdge = isPreviewEdge({
|
|
56
|
+
id,
|
|
57
|
+
source,
|
|
58
|
+
target
|
|
59
|
+
});
|
|
56
60
|
const executionStatus = useEdgeExecutionState(id, target);
|
|
57
61
|
const { validationStatus } = useElementValidationStatus(id) ?? {
|
|
58
62
|
validationStatus: void 0
|
|
@@ -90,7 +94,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
90
94
|
const getEdgeColor = ()=>{
|
|
91
95
|
if (isDiffAdded) return 'var(--canvas-success-icon)';
|
|
92
96
|
if (isDiffRemoved) return 'var(--canvas-error-icon)';
|
|
93
|
-
if (
|
|
97
|
+
if (previewEdge) return 'var(--canvas-primary)';
|
|
94
98
|
if (selected) return 'var(--canvas-primary)';
|
|
95
99
|
if (isHovered) return 'var(--canvas-primary-hover)';
|
|
96
100
|
if (status) return edgeTargetStatusToEdgeColor[status] ?? 'var(--canvas-border)';
|
|
@@ -134,7 +138,7 @@ const SequenceEdge_SequenceEdge = /*#__PURE__*/ memo(function({ id, selected, so
|
|
|
134
138
|
strokeWidth: style?.strokeWidth || 2,
|
|
135
139
|
style: {
|
|
136
140
|
stroke: edgeColor,
|
|
137
|
-
strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' :
|
|
141
|
+
strokeDasharray: isDiffRemoved ? style?.strokeDasharray || '5,5' : previewEdge ? '5,5' : '0',
|
|
138
142
|
opacity: style?.opacity !== void 0 ? style.opacity : 1,
|
|
139
143
|
transition: 'stroke 0.2s ease, opacity 0.2s ease'
|
|
140
144
|
},
|
|
@@ -38,6 +38,7 @@ const animatedViewportManager_cjs_namespaceObject = require("../../stores/animat
|
|
|
38
38
|
const canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
|
|
39
39
|
const viewportManager_cjs_namespaceObject = require("../../stores/viewportManager.cjs");
|
|
40
40
|
const external_types_cjs_namespaceObject = require("../../types.cjs");
|
|
41
|
+
const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
|
|
41
42
|
const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
|
|
42
43
|
const transitions_cjs_namespaceObject = require("../../utils/transitions.cjs");
|
|
43
44
|
const AddNodeManager_cjs_namespaceObject = require("../AddNodePanel/AddNodeManager.cjs");
|
|
@@ -46,12 +47,21 @@ const external_BaseCanvas_index_cjs_namespaceObject = require("../BaseCanvas/ind
|
|
|
46
47
|
const external_BaseNode_index_cjs_namespaceObject = require("../BaseNode/index.cjs");
|
|
47
48
|
const external_BlankCanvasNode_index_cjs_namespaceObject = require("../BlankCanvasNode/index.cjs");
|
|
48
49
|
const external_CanvasPositionControls_cjs_namespaceObject = require("../CanvasPositionControls.cjs");
|
|
50
|
+
const external_LoopNode_index_cjs_namespaceObject = require("../LoopNode/index.cjs");
|
|
49
51
|
const external_MiniCanvasNavigator_index_cjs_namespaceObject = require("../MiniCanvasNavigator/index.cjs");
|
|
50
52
|
const DEFAULT_NODE_TYPES = {
|
|
51
53
|
default: external_BaseNode_index_cjs_namespaceObject.BaseNode,
|
|
52
54
|
'blank-canvas-node': external_BlankCanvasNode_index_cjs_namespaceObject.BlankCanvasNode,
|
|
53
55
|
preview: AddNodePreview_cjs_namespaceObject.AddNodePreview
|
|
54
56
|
};
|
|
57
|
+
function shouldPersistNodeChange(change) {
|
|
58
|
+
if ('position' === change.type) return !!change.dragging;
|
|
59
|
+
if ('dimensions' === change.type) return !!change.setAttributes;
|
|
60
|
+
return true;
|
|
61
|
+
}
|
|
62
|
+
function isDefaultViewport(viewport) {
|
|
63
|
+
return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
|
|
64
|
+
}
|
|
55
65
|
const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
|
|
56
66
|
const canvasRef = (0, external_react_namespaceObject.useRef)(null);
|
|
57
67
|
const containerRef = (0, external_react_namespaceObject.useRef)(null);
|
|
@@ -64,15 +74,12 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
64
74
|
const lastCanvasIdRef = (0, external_react_namespaceObject.useRef)(null);
|
|
65
75
|
const shouldAnimate = 'design' === mode && !(0, transitions_cjs_namespaceObject.prefersReducedMotion)();
|
|
66
76
|
const nodeManifests = (0, external_core_index_cjs_namespaceObject.useNodeManifests)();
|
|
67
|
-
const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
68
|
-
|
|
69
|
-
if (!acc[manifest.nodeType]) acc[manifest.nodeType] = external_BaseNode_index_cjs_namespaceObject.BaseNode;
|
|
77
|
+
const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>nodeManifests.reduce((acc, manifest)=>{
|
|
78
|
+
acc[manifest.nodeType] = (0, external_LoopNode_index_cjs_namespaceObject.isContainerNodeManifest)(manifest) ? external_LoopNode_index_cjs_namespaceObject.LoopCanvasNode : external_BaseNode_index_cjs_namespaceObject.BaseNode;
|
|
70
79
|
return acc;
|
|
71
80
|
}, {
|
|
72
81
|
...DEFAULT_NODE_TYPES
|
|
73
|
-
})
|
|
74
|
-
return types;
|
|
75
|
-
}, [
|
|
82
|
+
}), [
|
|
76
83
|
nodeManifests
|
|
77
84
|
]);
|
|
78
85
|
const currentCanvas = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectCurrentCanvas);
|
|
@@ -148,15 +155,14 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
148
155
|
if (currentCanvasId && lastCanvasIdRef.current && currentCanvasId !== lastCanvasIdRef.current) {
|
|
149
156
|
if (reactFlowInstance && currentCanvas?.viewport) {
|
|
150
157
|
const viewport = currentCanvas.viewport;
|
|
151
|
-
if (
|
|
152
|
-
reactFlowInstance.setViewport(viewport);
|
|
158
|
+
if (isDefaultViewport(viewport)) {
|
|
153
159
|
currentViewportRef.current = viewport;
|
|
154
160
|
viewportManager_cjs_namespaceObject.viewportManager.setCurrentViewport(viewport);
|
|
155
|
-
}
|
|
156
|
-
|
|
161
|
+
} else setTimeout(()=>{
|
|
162
|
+
reactFlowInstance.setViewport(viewport);
|
|
157
163
|
currentViewportRef.current = viewport;
|
|
158
164
|
viewportManager_cjs_namespaceObject.viewportManager.setCurrentViewport(viewport);
|
|
159
|
-
}
|
|
165
|
+
}, 0);
|
|
160
166
|
}
|
|
161
167
|
}
|
|
162
168
|
lastCanvasIdRef.current = currentCanvasId || null;
|
|
@@ -171,9 +177,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
171
177
|
const handleNodesChange = (0, external_react_namespaceObject.useCallback)((changes)=>{
|
|
172
178
|
const canvas = currentCanvasRef.current;
|
|
173
179
|
if (!canvas) return;
|
|
174
|
-
|
|
175
|
-
const hasPositionChanges = changes.some((change)=>'position' === change.type && change.dragging);
|
|
176
|
-
if (!hasMeaningfulChanges && !hasPositionChanges) return;
|
|
180
|
+
if (!changes.some(shouldPersistNodeChange)) return;
|
|
177
181
|
const updatedNodes = (0, react_cjs_namespaceObject.applyNodeChanges)(changes, canvas.nodes ?? []);
|
|
178
182
|
updateNodes(updatedNodes);
|
|
179
183
|
}, [
|
|
@@ -205,7 +209,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
205
209
|
const handleConnect = (0, external_react_namespaceObject.useCallback)((connection)=>{
|
|
206
210
|
const canvas = currentCanvasRef.current;
|
|
207
211
|
if (!connection.source || !connection.target || !canvas) return;
|
|
208
|
-
if (
|
|
212
|
+
if ((0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)(connection)) return;
|
|
209
213
|
const newEdge = {
|
|
210
214
|
id: `${connection.source}-${connection.target}-${Date.now()}`,
|
|
211
215
|
source: connection.source,
|
|
@@ -213,15 +217,13 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
213
217
|
sourceHandle: connection.sourceHandle || void 0,
|
|
214
218
|
targetHandle: connection.targetHandle || void 0
|
|
215
219
|
};
|
|
220
|
+
const hasPreview = canvas.nodes.some((n)=>n.id === external_constants_cjs_namespaceObject.PREVIEW_NODE_ID);
|
|
221
|
+
const baseEdges = hasPreview ? canvas.edges.filter((edge)=>!(0, createPreviewNode_cjs_namespaceObject.isPreviewEdge)(edge)) : canvas.edges;
|
|
216
222
|
updateEdges([
|
|
217
|
-
...
|
|
223
|
+
...baseEdges,
|
|
218
224
|
newEdge
|
|
219
225
|
]);
|
|
220
|
-
|
|
221
|
-
if (hasPreview) {
|
|
222
|
-
updateNodes(canvas.nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
|
|
223
|
-
updateEdges(canvas.edges.filter((e)=>e.id !== external_constants_cjs_namespaceObject.PREVIEW_EDGE_ID));
|
|
224
|
-
}
|
|
226
|
+
if (hasPreview) updateNodes(canvas.nodes.filter((n)=>n.id !== external_constants_cjs_namespaceObject.PREVIEW_NODE_ID));
|
|
225
227
|
}, [
|
|
226
228
|
updateNodes,
|
|
227
229
|
updateEdges
|
|
@@ -255,7 +257,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
255
257
|
]);
|
|
256
258
|
const shouldFitView = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
257
259
|
const viewport = currentCanvas?.viewport;
|
|
258
|
-
return viewport ?
|
|
260
|
+
return viewport ? isDefaultViewport(viewport) : false;
|
|
259
261
|
}, [
|
|
260
262
|
currentCanvas?.viewport
|
|
261
263
|
]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAa5D,UAAU,uBAAuB;IAC/B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;IAKtC,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IAK9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IAMvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,KAAK,IAAI,CAAC;IAInE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACzC;AAyBD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+XhE,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Panel, applyEdgeChanges, applyNodeChanges } from "../../xyflow/react.js";
|
|
3
3
|
import { Spinner } from "@uipath/apollo-wind";
|
|
4
4
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
5
|
-
import {
|
|
5
|
+
import { PREVIEW_NODE_ID } from "../../constants.js";
|
|
6
6
|
import { Breadcrumb } from "../../controls/index.js";
|
|
7
7
|
import { useNodeManifests } from "../../core/index.js";
|
|
8
8
|
import { useAddNodeOnConnectEnd } from "../../hooks/useAddNodeOnConnectEnd.js";
|
|
@@ -10,6 +10,7 @@ import { animatedViewportManager } from "../../stores/animatedViewportManager.js
|
|
|
10
10
|
import { selectBreadcrumbs, selectCanvasStack, selectCurrentCanvas, selectCurrentPath, selectDrillIntoNode, selectInitializeCanvas, selectInitializeWithData, selectNavigateToDepth, selectNavigateToSiblingCanvas, selectPreviousCanvas, selectTransitionState, selectUpdateEdges, selectUpdateNodes, selectUpdateSelection, selectUpdateViewport, useCanvasStore } from "../../stores/canvasStore.js";
|
|
11
11
|
import { viewportManager } from "../../stores/viewportManager.js";
|
|
12
12
|
import { DefaultCanvasTranslations } from "../../types.js";
|
|
13
|
+
import { isPreviewEdge } from "../../utils/createPreviewNode.js";
|
|
13
14
|
import { CanvasIcon } from "../../utils/icon-registry.js";
|
|
14
15
|
import { prefersReducedMotion } from "../../utils/transitions.js";
|
|
15
16
|
import { AddNodeManager } from "../AddNodePanel/AddNodeManager.js";
|
|
@@ -18,12 +19,21 @@ import { BaseCanvas } from "../BaseCanvas/index.js";
|
|
|
18
19
|
import { BaseNode } from "../BaseNode/index.js";
|
|
19
20
|
import { BlankCanvasNode } from "../BlankCanvasNode/index.js";
|
|
20
21
|
import { CanvasPositionControls } from "../CanvasPositionControls.js";
|
|
22
|
+
import { LoopCanvasNode, isContainerNodeManifest } from "../LoopNode/index.js";
|
|
21
23
|
import { MiniCanvasNavigator } from "../MiniCanvasNavigator/index.js";
|
|
22
24
|
const DEFAULT_NODE_TYPES = {
|
|
23
25
|
default: BaseNode,
|
|
24
26
|
'blank-canvas-node': BlankCanvasNode,
|
|
25
27
|
preview: AddNodePreview
|
|
26
28
|
};
|
|
29
|
+
function shouldPersistNodeChange(change) {
|
|
30
|
+
if ('position' === change.type) return !!change.dragging;
|
|
31
|
+
if ('dimensions' === change.type) return !!change.setAttributes;
|
|
32
|
+
return true;
|
|
33
|
+
}
|
|
34
|
+
function isDefaultViewport(viewport) {
|
|
35
|
+
return 0 === viewport.x && 0 === viewport.y && 1 === viewport.zoom;
|
|
36
|
+
}
|
|
27
37
|
const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onCanvasesChange, onPathChange })=>{
|
|
28
38
|
const canvasRef = useRef(null);
|
|
29
39
|
const containerRef = useRef(null);
|
|
@@ -36,15 +46,12 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
36
46
|
const lastCanvasIdRef = useRef(null);
|
|
37
47
|
const shouldAnimate = 'design' === mode && !prefersReducedMotion();
|
|
38
48
|
const nodeManifests = useNodeManifests();
|
|
39
|
-
const nodeTypes = useMemo(()=>{
|
|
40
|
-
|
|
41
|
-
if (!acc[manifest.nodeType]) acc[manifest.nodeType] = BaseNode;
|
|
49
|
+
const nodeTypes = useMemo(()=>nodeManifests.reduce((acc, manifest)=>{
|
|
50
|
+
acc[manifest.nodeType] = isContainerNodeManifest(manifest) ? LoopCanvasNode : BaseNode;
|
|
42
51
|
return acc;
|
|
43
52
|
}, {
|
|
44
53
|
...DEFAULT_NODE_TYPES
|
|
45
|
-
})
|
|
46
|
-
return types;
|
|
47
|
-
}, [
|
|
54
|
+
}), [
|
|
48
55
|
nodeManifests
|
|
49
56
|
]);
|
|
50
57
|
const currentCanvas = useCanvasStore(selectCurrentCanvas);
|
|
@@ -120,15 +127,14 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
120
127
|
if (currentCanvasId && lastCanvasIdRef.current && currentCanvasId !== lastCanvasIdRef.current) {
|
|
121
128
|
if (reactFlowInstance && currentCanvas?.viewport) {
|
|
122
129
|
const viewport = currentCanvas.viewport;
|
|
123
|
-
if (
|
|
124
|
-
reactFlowInstance.setViewport(viewport);
|
|
130
|
+
if (isDefaultViewport(viewport)) {
|
|
125
131
|
currentViewportRef.current = viewport;
|
|
126
132
|
viewportManager.setCurrentViewport(viewport);
|
|
127
|
-
}
|
|
128
|
-
|
|
133
|
+
} else setTimeout(()=>{
|
|
134
|
+
reactFlowInstance.setViewport(viewport);
|
|
129
135
|
currentViewportRef.current = viewport;
|
|
130
136
|
viewportManager.setCurrentViewport(viewport);
|
|
131
|
-
}
|
|
137
|
+
}, 0);
|
|
132
138
|
}
|
|
133
139
|
}
|
|
134
140
|
lastCanvasIdRef.current = currentCanvasId || null;
|
|
@@ -143,9 +149,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
143
149
|
const handleNodesChange = useCallback((changes)=>{
|
|
144
150
|
const canvas = currentCanvasRef.current;
|
|
145
151
|
if (!canvas) return;
|
|
146
|
-
|
|
147
|
-
const hasPositionChanges = changes.some((change)=>'position' === change.type && change.dragging);
|
|
148
|
-
if (!hasMeaningfulChanges && !hasPositionChanges) return;
|
|
152
|
+
if (!changes.some(shouldPersistNodeChange)) return;
|
|
149
153
|
const updatedNodes = applyNodeChanges(changes, canvas.nodes ?? []);
|
|
150
154
|
updateNodes(updatedNodes);
|
|
151
155
|
}, [
|
|
@@ -177,7 +181,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
177
181
|
const handleConnect = useCallback((connection)=>{
|
|
178
182
|
const canvas = currentCanvasRef.current;
|
|
179
183
|
if (!connection.source || !connection.target || !canvas) return;
|
|
180
|
-
if (connection
|
|
184
|
+
if (isPreviewEdge(connection)) return;
|
|
181
185
|
const newEdge = {
|
|
182
186
|
id: `${connection.source}-${connection.target}-${Date.now()}`,
|
|
183
187
|
source: connection.source,
|
|
@@ -185,15 +189,13 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
185
189
|
sourceHandle: connection.sourceHandle || void 0,
|
|
186
190
|
targetHandle: connection.targetHandle || void 0
|
|
187
191
|
};
|
|
192
|
+
const hasPreview = canvas.nodes.some((n)=>n.id === PREVIEW_NODE_ID);
|
|
193
|
+
const baseEdges = hasPreview ? canvas.edges.filter((edge)=>!isPreviewEdge(edge)) : canvas.edges;
|
|
188
194
|
updateEdges([
|
|
189
|
-
...
|
|
195
|
+
...baseEdges,
|
|
190
196
|
newEdge
|
|
191
197
|
]);
|
|
192
|
-
|
|
193
|
-
if (hasPreview) {
|
|
194
|
-
updateNodes(canvas.nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
|
|
195
|
-
updateEdges(canvas.edges.filter((e)=>e.id !== PREVIEW_EDGE_ID));
|
|
196
|
-
}
|
|
198
|
+
if (hasPreview) updateNodes(canvas.nodes.filter((n)=>n.id !== PREVIEW_NODE_ID));
|
|
197
199
|
}, [
|
|
198
200
|
updateNodes,
|
|
199
201
|
updateEdges
|
|
@@ -227,7 +229,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
227
229
|
]);
|
|
228
230
|
const shouldFitView = useMemo(()=>{
|
|
229
231
|
const viewport = currentCanvas?.viewport;
|
|
230
|
-
return viewport ?
|
|
232
|
+
return viewport ? isDefaultViewport(viewport) : false;
|
|
231
233
|
}, [
|
|
232
234
|
currentCanvas?.viewport
|
|
233
235
|
]);
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
LoopCanvasNode: ()=>LoopCanvasNode
|
|
28
|
+
});
|
|
29
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const index_cjs_namespaceObject = require("../../core/index.cjs");
|
|
33
|
+
const external_LoopNode_cjs_namespaceObject = require("./LoopNode.cjs");
|
|
34
|
+
const external_LoopNode_helpers_cjs_namespaceObject = require("./LoopNode.helpers.cjs");
|
|
35
|
+
const external_LoopNodePreview_cjs_namespaceObject = require("./LoopNodePreview.cjs");
|
|
36
|
+
function LoopCanvasNodeComponent(props) {
|
|
37
|
+
const reactFlow = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
38
|
+
const nodeTypeRegistry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
|
|
39
|
+
const nodeManifest = (0, external_react_namespaceObject.useMemo)(()=>props.type ? nodeTypeRegistry?.getManifest(props.type) : void 0, [
|
|
40
|
+
nodeTypeRegistry,
|
|
41
|
+
props.type
|
|
42
|
+
]);
|
|
43
|
+
const containerPreviewHandles = (0, external_react_namespaceObject.useMemo)(()=>(0, external_LoopNode_helpers_cjs_namespaceObject.resolveContainerPreviewConnectionHandles)(nodeManifest, {
|
|
44
|
+
...props.data ?? {},
|
|
45
|
+
nodeId: props.id
|
|
46
|
+
}), [
|
|
47
|
+
nodeManifest,
|
|
48
|
+
props.data,
|
|
49
|
+
props.id
|
|
50
|
+
]);
|
|
51
|
+
const handleAddFirstChild = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
52
|
+
if (!containerPreviewHandles) return;
|
|
53
|
+
(0, external_LoopNodePreview_cjs_namespaceObject.showCenteredContainerPreview)({
|
|
54
|
+
containerId: props.id,
|
|
55
|
+
reactFlowInstance: reactFlow,
|
|
56
|
+
previewHandles: containerPreviewHandles
|
|
57
|
+
});
|
|
58
|
+
}, [
|
|
59
|
+
containerPreviewHandles,
|
|
60
|
+
props.id,
|
|
61
|
+
reactFlow
|
|
62
|
+
]);
|
|
63
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_LoopNode_cjs_namespaceObject.LoopNode, {
|
|
64
|
+
...props,
|
|
65
|
+
onAddFirstChild: containerPreviewHandles ? handleAddFirstChild : void 0
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
const LoopCanvasNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(LoopCanvasNodeComponent);
|
|
69
|
+
exports.LoopCanvasNode = __webpack_exports__.LoopCanvasNode;
|
|
70
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
71
|
+
"LoopCanvasNode"
|
|
72
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
73
|
+
Object.defineProperty(exports, '__esModule', {
|
|
74
|
+
value: true
|
|
75
|
+
});
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Node, NodeProps } from '../../xyflow/react.ts';
|
|
2
|
+
import type { LoopNodeData } from './LoopNode.types';
|
|
3
|
+
declare function LoopCanvasNodeComponent(props: NodeProps<Node<LoopNodeData>>): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const LoopCanvasNode: import("react").MemoExoticComponent<typeof LoopCanvasNodeComponent>;
|
|
5
|
+
export {};
|
|
6
|
+
//# sourceMappingURL=LoopCanvasNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LoopCanvasNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopCanvasNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAMhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGrD,iBAAS,uBAAuB,CAAC,KAAK,EAAE,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,2CAkCpE;AAED,eAAO,MAAM,cAAc,qEAAgC,CAAC"}
|