@uipath/apollo-react 4.14.1-pr556.aa710a0 → 4.15.0
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/createAddNodePreview.cjs +3 -9
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.js +3 -9
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +0 -1
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.cjs +5 -11
- package/dist/canvas/components/BaseNode/BaseNode.d.ts +1 -2
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +6 -9
- package/dist/canvas/components/BaseNode/BaseNode.types.d.ts +0 -3
- package/dist/canvas/components/BaseNode/BaseNode.types.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +13 -222
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +5 -10
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.js +14 -223
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +2 -10
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts +0 -2
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +3 -5
- package/dist/canvas/components/ButtonHandle/HandleButton.cjs +2 -17
- package/dist/canvas/components/ButtonHandle/HandleButton.d.ts +1 -10
- package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/HandleButton.js +2 -17
- package/dist/canvas/components/ButtonHandle/useButtonHandles.cjs +2 -4
- package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts +1 -2
- package/dist/canvas/components/ButtonHandle/useButtonHandles.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/useButtonHandles.js +2 -4
- package/dist/canvas/components/Edges/SequenceEdge.cjs +14 -16
- package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
- package/dist/canvas/components/Edges/SequenceEdge.js +14 -16
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +25 -34
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts +2 -8
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +27 -36
- package/dist/canvas/components/HierarchicalCanvas/index.d.ts +1 -1
- package/dist/canvas/components/HierarchicalCanvas/index.d.ts.map +1 -1
- 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 +23 -25
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +25 -27
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +3 -10
- 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 +3 -10
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts +0 -1
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.types.d.ts.map +1 -1
- package/dist/canvas/components/index.cjs +20 -27
- package/dist/canvas/components/index.d.ts +0 -1
- package/dist/canvas/components/index.d.ts.map +1 -1
- package/dist/canvas/components/index.js +0 -1
- package/dist/canvas/constants.cjs +0 -4
- package/dist/canvas/constants.d.ts +0 -1
- package/dist/canvas/constants.d.ts.map +1 -1
- package/dist/canvas/constants.js +1 -2
- package/dist/canvas/core/NodeTypeRegistry.cjs +26 -50
- package/dist/canvas/core/NodeTypeRegistry.d.ts +5 -10
- package/dist/canvas/core/NodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/NodeTypeRegistry.js +26 -50
- package/dist/canvas/core/useNodeTypeRegistry.cjs +3 -13
- package/dist/canvas/core/useNodeTypeRegistry.d.ts +1 -2
- package/dist/canvas/core/useNodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/useNodeTypeRegistry.js +4 -11
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +23 -22
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +24 -23
- package/dist/canvas/hooks/usePreviewNode.cjs +3 -7
- package/dist/canvas/hooks/usePreviewNode.d.ts.map +1 -1
- package/dist/canvas/hooks/usePreviewNode.js +3 -7
- package/dist/canvas/schema/node-definition/handle.cjs +2 -10
- package/dist/canvas/schema/node-definition/handle.d.ts +0 -9
- package/dist/canvas/schema/node-definition/handle.d.ts.map +1 -1
- package/dist/canvas/schema/node-definition/handle.js +1 -6
- package/dist/canvas/schema/node-definition/index.cjs +1 -4
- 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.d.ts +0 -4
- package/dist/canvas/schema/node-definition/node-manifest.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/hooks/useCanvasStory.d.ts +0 -6
- package/dist/canvas/storybook-utils/hooks/useCanvasStory.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts +0 -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/storybook-utils/mocks/nodes.d.ts +1 -1
- package/dist/canvas/storybook-utils/mocks/nodes.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/collapse.cjs +6 -13
- package/dist/canvas/utils/collapse.d.ts +2 -2
- package/dist/canvas/utils/collapse.d.ts.map +1 -1
- package/dist/canvas/utils/collapse.js +2 -9
- package/dist/canvas/utils/createPreviewNode.cjs +11 -30
- package/dist/canvas/utils/createPreviewNode.d.ts +2 -10
- package/dist/canvas/utils/createPreviewNode.d.ts.map +1 -1
- package/dist/canvas/utils/createPreviewNode.js +11 -21
- package/dist/canvas/utils/index.cjs +26 -33
- package/dist/canvas/utils/index.d.ts +1 -2
- package/dist/canvas/utils/index.d.ts.map +1 -1
- package/dist/canvas/utils/index.js +1 -2
- package/dist/canvas/utils/manifest-resolver.cjs +0 -8
- package/dist/canvas/utils/manifest-resolver.d.ts +0 -1
- package/dist/canvas/utils/manifest-resolver.d.ts.map +1 -1
- package/dist/canvas/utils/manifest-resolver.js +1 -6
- package/package.json +1 -1
- package/dist/canvas/components/LoopNode/LoopCanvasNode.cjs +0 -86
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts +0 -6
- package/dist/canvas/components/LoopNode/LoopCanvasNode.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopCanvasNode.js +0 -52
- package/dist/canvas/components/LoopNode/LoopNode.cjs +0 -434
- package/dist/canvas/components/LoopNode/LoopNode.constants.cjs +0 -81
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts +0 -13
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopNode.constants.js +0 -14
- package/dist/canvas/components/LoopNode/LoopNode.d.ts +0 -5
- package/dist/canvas/components/LoopNode/LoopNode.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs +0 -144
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +0 -29
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopNode.helpers.js +0 -98
- package/dist/canvas/components/LoopNode/LoopNode.js +0 -400
- package/dist/canvas/components/LoopNode/LoopNode.types.cjs +0 -18
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts +0 -22
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopNode.types.js +0 -0
- package/dist/canvas/components/LoopNode/LoopNodePreview.cjs +0 -61
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts +0 -9
- package/dist/canvas/components/LoopNode/LoopNodePreview.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/LoopNodePreview.js +0 -27
- package/dist/canvas/components/LoopNode/index.cjs +0 -79
- package/dist/canvas/components/LoopNode/index.d.ts +0 -5
- package/dist/canvas/components/LoopNode/index.d.ts.map +0 -1
- package/dist/canvas/components/LoopNode/index.js +0 -4
- package/dist/canvas/components/NodeViewportOverlay.cjs +0 -63
- package/dist/canvas/components/NodeViewportOverlay.d.ts +0 -22
- package/dist/canvas/components/NodeViewportOverlay.d.ts.map +0 -1
- package/dist/canvas/components/NodeViewportOverlay.js +0 -29
- package/dist/canvas/utils/createPreviewGraph.cjs +0 -126
- package/dist/canvas/utils/createPreviewGraph.d.ts +0 -36
- package/dist/canvas/utils/createPreviewGraph.d.ts.map +0 -1
- package/dist/canvas/utils/createPreviewGraph.js +0 -83
|
@@ -1,144 +0,0 @@
|
|
|
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
|
-
resolveLoopPreviewConnectionHandles: ()=>resolveLoopPreviewConnectionHandles,
|
|
28
|
-
getLoopBodyCenter: ()=>getLoopBodyCenter,
|
|
29
|
-
resolveLoopHandleGroups: ()=>resolveLoopHandleGroups,
|
|
30
|
-
getLoopRelativeBodyCenter: ()=>getLoopRelativeBodyCenter,
|
|
31
|
-
isLoopContainerManifest: ()=>isLoopContainerManifest
|
|
32
|
-
});
|
|
33
|
-
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
34
|
-
const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
|
|
35
|
-
const manifest_resolver_cjs_namespaceObject = require("../../utils/manifest-resolver.cjs");
|
|
36
|
-
const NodeUtils_cjs_namespaceObject = require("../../utils/NodeUtils.cjs");
|
|
37
|
-
const external_LoopNode_constants_cjs_namespaceObject = require("./LoopNode.constants.cjs");
|
|
38
|
-
function clamp(value, min, max) {
|
|
39
|
-
return Math.min(Math.max(value, min), max);
|
|
40
|
-
}
|
|
41
|
-
function isLoopContainerManifest(manifest) {
|
|
42
|
-
return manifest?.handleConfiguration.some((group)=>'inner' === group.boundary) ?? false;
|
|
43
|
-
}
|
|
44
|
-
function resolveLoopHandleGroups(groups) {
|
|
45
|
-
return groups.map((group)=>{
|
|
46
|
-
const boundary = 'inner' === group.boundary ? 'inner' : 'outer';
|
|
47
|
-
const position = group.position;
|
|
48
|
-
return {
|
|
49
|
-
...group,
|
|
50
|
-
boundary,
|
|
51
|
-
connectionPosition: 'inner' === boundary ? (0, createPreviewNode_cjs_namespaceObject.getOppositePosition)(position) : position,
|
|
52
|
-
customPositionAndOffsets: 'inner' === boundary ? insetInnerGroup(group) : group.customPositionAndOffsets
|
|
53
|
-
};
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
function getLoopBodyCenter({ width, height, headerHeight }) {
|
|
57
|
-
const clampedHeaderHeight = clamp(headerHeight, 0, height);
|
|
58
|
-
return {
|
|
59
|
-
x: clamp((0, NodeUtils_cjs_namespaceObject.snapToGrid)(width / 2), 0, width),
|
|
60
|
-
y: clamp((0, NodeUtils_cjs_namespaceObject.snapToGrid)(clampedHeaderHeight + (height - clampedHeaderHeight) / 2), 0, height)
|
|
61
|
-
};
|
|
62
|
-
}
|
|
63
|
-
function getLoopRelativeBodyCenter(loopNode) {
|
|
64
|
-
const width = readNumericDimension(loopNode.width, loopNode.measured?.width, loopNode.style?.width);
|
|
65
|
-
const height = readNumericDimension(loopNode.height, loopNode.measured?.height, loopNode.style?.height);
|
|
66
|
-
return getLoopBodyCenter({
|
|
67
|
-
width: width ?? external_LoopNode_constants_cjs_namespaceObject.DEFAULT_LOOP_WIDTH,
|
|
68
|
-
height: height ?? external_LoopNode_constants_cjs_namespaceObject.DEFAULT_LOOP_HEIGHT,
|
|
69
|
-
headerHeight: external_LoopNode_constants_cjs_namespaceObject.DEFAULT_LOOP_HEADER_HEIGHT_PX
|
|
70
|
-
});
|
|
71
|
-
}
|
|
72
|
-
function insetInnerGroup(group) {
|
|
73
|
-
const offsets = group.customPositionAndOffsets ?? {};
|
|
74
|
-
switch(group.position){
|
|
75
|
-
case react_cjs_namespaceObject.Position.Left:
|
|
76
|
-
return {
|
|
77
|
-
...offsets,
|
|
78
|
-
left: (offsets.left ?? 0) + external_LoopNode_constants_cjs_namespaceObject.LOOP_FRAME_INSET_PX
|
|
79
|
-
};
|
|
80
|
-
case react_cjs_namespaceObject.Position.Right:
|
|
81
|
-
return {
|
|
82
|
-
...offsets,
|
|
83
|
-
right: (offsets.right ?? 0) + external_LoopNode_constants_cjs_namespaceObject.LOOP_FRAME_INSET_PX
|
|
84
|
-
};
|
|
85
|
-
case react_cjs_namespaceObject.Position.Top:
|
|
86
|
-
return {
|
|
87
|
-
...offsets,
|
|
88
|
-
top: (offsets.top ?? 0) + external_LoopNode_constants_cjs_namespaceObject.LOOP_FRAME_INSET_PX
|
|
89
|
-
};
|
|
90
|
-
case react_cjs_namespaceObject.Position.Bottom:
|
|
91
|
-
return {
|
|
92
|
-
...offsets,
|
|
93
|
-
bottom: (offsets.bottom ?? 0) + external_LoopNode_constants_cjs_namespaceObject.LOOP_FRAME_INSET_PX
|
|
94
|
-
};
|
|
95
|
-
default:
|
|
96
|
-
return offsets;
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
function readNumericDimension(...values) {
|
|
100
|
-
for (const value of values){
|
|
101
|
-
if ('number' == typeof value) return value;
|
|
102
|
-
if ('string' == typeof value) {
|
|
103
|
-
const parsedValue = Number.parseFloat(value);
|
|
104
|
-
if (Number.isFinite(parsedValue)) return parsedValue;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
function resolveLoopPreviewConnectionHandles(manifest, context) {
|
|
109
|
-
if (!manifest) return null;
|
|
110
|
-
const innerGroups = (0, manifest_resolver_cjs_namespaceObject.resolveHandles)(manifest.handleConfiguration, context).filter((group)=>'inner' === group.boundary && (group.visible ?? true));
|
|
111
|
-
const sourceHandle = pickPreferredInnerHandle(innerGroups, 'source');
|
|
112
|
-
const targetHandle = pickPreferredInnerHandle(innerGroups, 'target');
|
|
113
|
-
if (!sourceHandle || !targetHandle) return null;
|
|
114
|
-
return {
|
|
115
|
-
sourceHandleId: sourceHandle.handle.id,
|
|
116
|
-
sourceHandlePosition: (0, createPreviewNode_cjs_namespaceObject.getOppositePosition)(sourceHandle.group.position),
|
|
117
|
-
targetHandleId: targetHandle.handle.id
|
|
118
|
-
};
|
|
119
|
-
}
|
|
120
|
-
function pickPreferredInnerHandle(groups, type) {
|
|
121
|
-
for (const group of groups){
|
|
122
|
-
const handle = group.handles.find((candidate)=>candidate.type === type && candidate.visible);
|
|
123
|
-
if (handle) return {
|
|
124
|
-
group,
|
|
125
|
-
handle
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
return null;
|
|
129
|
-
}
|
|
130
|
-
exports.getLoopBodyCenter = __webpack_exports__.getLoopBodyCenter;
|
|
131
|
-
exports.getLoopRelativeBodyCenter = __webpack_exports__.getLoopRelativeBodyCenter;
|
|
132
|
-
exports.isLoopContainerManifest = __webpack_exports__.isLoopContainerManifest;
|
|
133
|
-
exports.resolveLoopHandleGroups = __webpack_exports__.resolveLoopHandleGroups;
|
|
134
|
-
exports.resolveLoopPreviewConnectionHandles = __webpack_exports__.resolveLoopPreviewConnectionHandles;
|
|
135
|
-
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
136
|
-
"getLoopBodyCenter",
|
|
137
|
-
"getLoopRelativeBodyCenter",
|
|
138
|
-
"isLoopContainerManifest",
|
|
139
|
-
"resolveLoopHandleGroups",
|
|
140
|
-
"resolveLoopPreviewConnectionHandles"
|
|
141
|
-
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
142
|
-
Object.defineProperty(exports, '__esModule', {
|
|
143
|
-
value: true
|
|
144
|
-
});
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { type Node, Position } from '../../xyflow/react.ts';
|
|
2
|
-
import type { NodeManifest } from '../../schema/node-definition';
|
|
3
|
-
import type { ResolutionContext, ResolvedHandleGroup } from '../../utils/manifest-resolver';
|
|
4
|
-
export type LoopHandleBoundary = 'outer' | 'inner';
|
|
5
|
-
export type LoopHandleGroup = ResolvedHandleGroup & {
|
|
6
|
-
boundary: LoopHandleBoundary;
|
|
7
|
-
connectionPosition: Position;
|
|
8
|
-
};
|
|
9
|
-
export interface LoopPreviewConnectionHandles {
|
|
10
|
-
sourceHandleId: string;
|
|
11
|
-
sourceHandlePosition: Position;
|
|
12
|
-
targetHandleId: string;
|
|
13
|
-
}
|
|
14
|
-
export declare function isLoopContainerManifest(manifest: Pick<NodeManifest, 'handleConfiguration'> | undefined): boolean;
|
|
15
|
-
export declare function resolveLoopHandleGroups(groups: ResolvedHandleGroup[]): LoopHandleGroup[];
|
|
16
|
-
export declare function getLoopBodyCenter({ width, height, headerHeight, }: {
|
|
17
|
-
width: number;
|
|
18
|
-
height: number;
|
|
19
|
-
headerHeight: number;
|
|
20
|
-
}): {
|
|
21
|
-
x: number;
|
|
22
|
-
y: number;
|
|
23
|
-
};
|
|
24
|
-
export declare function getLoopRelativeBodyCenter(loopNode: Pick<Node, 'width' | 'height' | 'measured' | 'style'>): {
|
|
25
|
-
x: number;
|
|
26
|
-
y: number;
|
|
27
|
-
};
|
|
28
|
-
export declare function resolveLoopPreviewConnectionHandles(manifest: Pick<NodeManifest, 'handleConfiguration'> | undefined, context: ResolutionContext): LoopPreviewConnectionHandles | null;
|
|
29
|
-
//# sourceMappingURL=LoopNode.helpers.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoopNode.helpers.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,EAAE,QAAQ,EAAE,MAAM,0CAA0C,CAAC;AAC/E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAU5F,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,OAAO,CAAC;AACnD,MAAM,MAAM,eAAe,GAAG,mBAAmB,GAAG;IAClD,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,kBAAkB,EAAE,QAAQ,CAAC;CAC9B,CAAC;AAEF,MAAM,WAAW,4BAA4B;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,QAAQ,CAAC;IAC/B,cAAc,EAAE,MAAM,CAAC;CACxB;AAMD,wBAAgB,uBAAuB,CACrC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,qBAAqB,CAAC,GAAG,SAAS,GAC9D,OAAO,CAGT;AAED,wBAAgB,uBAAuB,CAAC,MAAM,EAAE,mBAAmB,EAAE,GAAG,eAAe,EAAE,CAaxF;AAED,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,MAAM,EACN,YAAY,GACb,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;CACtB;;;EAOA;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;;;EAkBhE;AA+BD,wBAAgB,mCAAmC,CACjD,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,qBAAqB,CAAC,GAAG,SAAS,EAC/D,OAAO,EAAE,iBAAiB,GACzB,4BAA4B,GAAG,IAAI,CAgBrC"}
|
|
@@ -1,98 +0,0 @@
|
|
|
1
|
-
import { Position } from "../../xyflow/react.js";
|
|
2
|
-
import { getOppositePosition } from "../../utils/createPreviewNode.js";
|
|
3
|
-
import { resolveHandles } from "../../utils/manifest-resolver.js";
|
|
4
|
-
import { snapToGrid } from "../../utils/NodeUtils.js";
|
|
5
|
-
import { DEFAULT_LOOP_HEADER_HEIGHT_PX, DEFAULT_LOOP_HEIGHT, DEFAULT_LOOP_WIDTH, LOOP_FRAME_INSET_PX } from "./LoopNode.constants.js";
|
|
6
|
-
function clamp(value, min, max) {
|
|
7
|
-
return Math.min(Math.max(value, min), max);
|
|
8
|
-
}
|
|
9
|
-
function isLoopContainerManifest(manifest) {
|
|
10
|
-
return manifest?.handleConfiguration.some((group)=>'inner' === group.boundary) ?? false;
|
|
11
|
-
}
|
|
12
|
-
function resolveLoopHandleGroups(groups) {
|
|
13
|
-
return groups.map((group)=>{
|
|
14
|
-
const boundary = 'inner' === group.boundary ? 'inner' : 'outer';
|
|
15
|
-
const position = group.position;
|
|
16
|
-
return {
|
|
17
|
-
...group,
|
|
18
|
-
boundary,
|
|
19
|
-
connectionPosition: 'inner' === boundary ? getOppositePosition(position) : position,
|
|
20
|
-
customPositionAndOffsets: 'inner' === boundary ? insetInnerGroup(group) : group.customPositionAndOffsets
|
|
21
|
-
};
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
function getLoopBodyCenter({ width, height, headerHeight }) {
|
|
25
|
-
const clampedHeaderHeight = clamp(headerHeight, 0, height);
|
|
26
|
-
return {
|
|
27
|
-
x: clamp(snapToGrid(width / 2), 0, width),
|
|
28
|
-
y: clamp(snapToGrid(clampedHeaderHeight + (height - clampedHeaderHeight) / 2), 0, height)
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
|
-
function getLoopRelativeBodyCenter(loopNode) {
|
|
32
|
-
const width = readNumericDimension(loopNode.width, loopNode.measured?.width, loopNode.style?.width);
|
|
33
|
-
const height = readNumericDimension(loopNode.height, loopNode.measured?.height, loopNode.style?.height);
|
|
34
|
-
return getLoopBodyCenter({
|
|
35
|
-
width: width ?? DEFAULT_LOOP_WIDTH,
|
|
36
|
-
height: height ?? DEFAULT_LOOP_HEIGHT,
|
|
37
|
-
headerHeight: DEFAULT_LOOP_HEADER_HEIGHT_PX
|
|
38
|
-
});
|
|
39
|
-
}
|
|
40
|
-
function insetInnerGroup(group) {
|
|
41
|
-
const offsets = group.customPositionAndOffsets ?? {};
|
|
42
|
-
switch(group.position){
|
|
43
|
-
case Position.Left:
|
|
44
|
-
return {
|
|
45
|
-
...offsets,
|
|
46
|
-
left: (offsets.left ?? 0) + LOOP_FRAME_INSET_PX
|
|
47
|
-
};
|
|
48
|
-
case Position.Right:
|
|
49
|
-
return {
|
|
50
|
-
...offsets,
|
|
51
|
-
right: (offsets.right ?? 0) + LOOP_FRAME_INSET_PX
|
|
52
|
-
};
|
|
53
|
-
case Position.Top:
|
|
54
|
-
return {
|
|
55
|
-
...offsets,
|
|
56
|
-
top: (offsets.top ?? 0) + LOOP_FRAME_INSET_PX
|
|
57
|
-
};
|
|
58
|
-
case Position.Bottom:
|
|
59
|
-
return {
|
|
60
|
-
...offsets,
|
|
61
|
-
bottom: (offsets.bottom ?? 0) + LOOP_FRAME_INSET_PX
|
|
62
|
-
};
|
|
63
|
-
default:
|
|
64
|
-
return offsets;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
function readNumericDimension(...values) {
|
|
68
|
-
for (const value of values){
|
|
69
|
-
if ('number' == typeof value) return value;
|
|
70
|
-
if ('string' == typeof value) {
|
|
71
|
-
const parsedValue = Number.parseFloat(value);
|
|
72
|
-
if (Number.isFinite(parsedValue)) return parsedValue;
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
function resolveLoopPreviewConnectionHandles(manifest, context) {
|
|
77
|
-
if (!manifest) return null;
|
|
78
|
-
const innerGroups = resolveHandles(manifest.handleConfiguration, context).filter((group)=>'inner' === group.boundary && (group.visible ?? true));
|
|
79
|
-
const sourceHandle = pickPreferredInnerHandle(innerGroups, 'source');
|
|
80
|
-
const targetHandle = pickPreferredInnerHandle(innerGroups, 'target');
|
|
81
|
-
if (!sourceHandle || !targetHandle) return null;
|
|
82
|
-
return {
|
|
83
|
-
sourceHandleId: sourceHandle.handle.id,
|
|
84
|
-
sourceHandlePosition: getOppositePosition(sourceHandle.group.position),
|
|
85
|
-
targetHandleId: targetHandle.handle.id
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
function pickPreferredInnerHandle(groups, type) {
|
|
89
|
-
for (const group of groups){
|
|
90
|
-
const handle = group.handles.find((candidate)=>candidate.type === type && candidate.visible);
|
|
91
|
-
if (handle) return {
|
|
92
|
-
group,
|
|
93
|
-
handle
|
|
94
|
-
};
|
|
95
|
-
}
|
|
96
|
-
return null;
|
|
97
|
-
}
|
|
98
|
-
export { getLoopBodyCenter, getLoopRelativeBodyCenter, isLoopContainerManifest, resolveLoopHandleGroups, resolveLoopPreviewConnectionHandles };
|
|
@@ -1,400 +0,0 @@
|
|
|
1
|
-
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { NodeResizeControl, useStore, useUpdateNodeInternals } from "../../xyflow/react.js";
|
|
3
|
-
import { cn } from "@uipath/apollo-wind";
|
|
4
|
-
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
|
5
|
-
import { useOptionalNodeTypeRegistry } from "../../core/index.js";
|
|
6
|
-
import { useElementValidationStatus, useNodeExecutionState } from "../../hooks/index.js";
|
|
7
|
-
import { resolveAdornments } from "../../utils/adornment-resolver.js";
|
|
8
|
-
import { CanvasIcon } from "../../utils/icon-registry.js";
|
|
9
|
-
import { getNodeTypeVersion, resolveDisplay, resolveHandles } from "../../utils/manifest-resolver.js";
|
|
10
|
-
import { snapToGrid } from "../../utils/NodeUtils.js";
|
|
11
|
-
import { resolveToolbar } from "../../utils/toolbar-resolver.js";
|
|
12
|
-
import { useBaseCanvasMode } from "../BaseCanvas/BaseCanvasModeProvider.js";
|
|
13
|
-
import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
|
|
14
|
-
import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
|
|
15
|
-
import { selectIsConnecting } from "../BaseNode/BaseNode.js";
|
|
16
|
-
import { BaseBadgeSlot } from "../BaseNode/BaseNodeBadgeSlot.js";
|
|
17
|
-
import { getStatusBorder } from "../BaseNode/BaseNodeContainer.js";
|
|
18
|
-
import { MissingManifestNode } from "../BaseNode/BaseNodeMissingManifest.js";
|
|
19
|
-
import { ButtonHandles } from "../ButtonHandle/index.js";
|
|
20
|
-
import { NodeToolbar } from "../Toolbar/index.js";
|
|
21
|
-
import { DEFAULT_LOOP_FRAME_BACKGROUND, DEFAULT_LOOP_FRAME_BORDER, DEFAULT_LOOP_HEIGHT, DEFAULT_LOOP_ICON, DEFAULT_LOOP_MIN_HEIGHT, DEFAULT_LOOP_MIN_WIDTH, DEFAULT_LOOP_SHELL_BACKGROUND, DEFAULT_LOOP_TITLE, DEFAULT_LOOP_WIDTH, LOOP_FRAME_INSET_PX, LOOP_SHELL_RADIUS_PX } from "./LoopNode.constants.js";
|
|
22
|
-
import { resolveLoopHandleGroups } from "./LoopNode.helpers.js";
|
|
23
|
-
const EMPTY_DATA = {};
|
|
24
|
-
const RESIZE_CONTROLS = [
|
|
25
|
-
{
|
|
26
|
-
position: 'top-left',
|
|
27
|
-
cursor: 'nwse-resize',
|
|
28
|
-
indicatorClassName: 'top-[-5px] left-[-5px]'
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
position: 'top-right',
|
|
32
|
-
cursor: 'nesw-resize',
|
|
33
|
-
indicatorClassName: 'top-[-5px] right-[-5px]'
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
position: 'bottom-left',
|
|
37
|
-
cursor: 'nesw-resize',
|
|
38
|
-
indicatorClassName: 'bottom-[-5px] left-[-5px]'
|
|
39
|
-
},
|
|
40
|
-
{
|
|
41
|
-
position: 'bottom-right',
|
|
42
|
-
cursor: 'nwse-resize',
|
|
43
|
-
indicatorClassName: 'bottom-[-5px] right-[-5px]'
|
|
44
|
-
}
|
|
45
|
-
];
|
|
46
|
-
const RESIZE_CONTROL_STYLE = {
|
|
47
|
-
background: 'transparent',
|
|
48
|
-
border: 'none',
|
|
49
|
-
zIndex: 100
|
|
50
|
-
};
|
|
51
|
-
const ADORNMENT_SLOT_POSITIONS = [
|
|
52
|
-
'topLeft',
|
|
53
|
-
'topRight',
|
|
54
|
-
'bottomLeft',
|
|
55
|
-
'bottomRight'
|
|
56
|
-
];
|
|
57
|
-
const ADORNMENT_SLOT_SHAPES = {
|
|
58
|
-
topLeft: 'top-left',
|
|
59
|
-
topRight: 'top-right',
|
|
60
|
-
bottomLeft: 'bottom-left',
|
|
61
|
-
bottomRight: 'bottom-right'
|
|
62
|
-
};
|
|
63
|
-
function resolveInteractionState(dragging, selected, isHovered) {
|
|
64
|
-
if (dragging) return 'drag';
|
|
65
|
-
if (selected) return 'selected';
|
|
66
|
-
if (isHovered) return 'hover';
|
|
67
|
-
return 'default';
|
|
68
|
-
}
|
|
69
|
-
function useHasChildNodes(id, enabled) {
|
|
70
|
-
return useStore(useCallback((state)=>!enabled || state.nodes.some((node)=>node.parentId === id), [
|
|
71
|
-
id,
|
|
72
|
-
enabled
|
|
73
|
-
]));
|
|
74
|
-
}
|
|
75
|
-
function useLoopNodeInternalsRefresh(id, handleGroups, width, height) {
|
|
76
|
-
const updateNodeInternals = useUpdateNodeInternals();
|
|
77
|
-
useEffect(()=>{
|
|
78
|
-
const frameId = requestAnimationFrame(()=>{
|
|
79
|
-
updateNodeInternals(id);
|
|
80
|
-
});
|
|
81
|
-
return ()=>{
|
|
82
|
-
cancelAnimationFrame(frameId);
|
|
83
|
-
};
|
|
84
|
-
}, [
|
|
85
|
-
id,
|
|
86
|
-
handleGroups,
|
|
87
|
-
updateNodeInternals,
|
|
88
|
-
width,
|
|
89
|
-
height
|
|
90
|
-
]);
|
|
91
|
-
}
|
|
92
|
-
function LoopNodeComponent(props) {
|
|
93
|
-
const { id, type, data, selected = false, dragging = false, width = 0, height = 0, onAddFirstChild, onResize, toolbarConfig: toolbarConfigProp, adornments: adornmentsProp, executionStatusOverride, suggestionType: suggestionTypeProp } = props;
|
|
94
|
-
const nodeTypeRegistry = useOptionalNodeTypeRegistry();
|
|
95
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
96
|
-
const resolvedData = data ?? EMPTY_DATA;
|
|
97
|
-
const isLoading = !!resolvedData.loading;
|
|
98
|
-
const nodeVersion = getNodeTypeVersion(resolvedData);
|
|
99
|
-
const suggestionType = suggestionTypeProp ?? resolvedData.suggestionType;
|
|
100
|
-
const manifest = useMemo(()=>nodeTypeRegistry?.getManifest(type, nodeVersion), [
|
|
101
|
-
nodeTypeRegistry,
|
|
102
|
-
type,
|
|
103
|
-
nodeVersion
|
|
104
|
-
]);
|
|
105
|
-
const { mode } = useBaseCanvasMode();
|
|
106
|
-
const isDesignMode = 'design' === mode;
|
|
107
|
-
const connectedHandleIds = useConnectedHandles(id);
|
|
108
|
-
const { multipleNodesSelected } = useSelectionState();
|
|
109
|
-
const isConnecting = useStore(selectIsConnecting);
|
|
110
|
-
const hasChildNodes = useHasChildNodes(id, isDesignMode && !!onAddFirstChild);
|
|
111
|
-
const executionState = useNodeExecutionState(id);
|
|
112
|
-
const validationState = useElementValidationStatus(id);
|
|
113
|
-
const statusContext = useMemo(()=>({
|
|
114
|
-
nodeId: id,
|
|
115
|
-
executionState: executionStatusOverride ?? executionState,
|
|
116
|
-
validationState,
|
|
117
|
-
isConnecting,
|
|
118
|
-
isSelected: selected,
|
|
119
|
-
isDragging: dragging,
|
|
120
|
-
mode
|
|
121
|
-
}), [
|
|
122
|
-
dragging,
|
|
123
|
-
executionStatusOverride,
|
|
124
|
-
executionState,
|
|
125
|
-
id,
|
|
126
|
-
isConnecting,
|
|
127
|
-
mode,
|
|
128
|
-
selected,
|
|
129
|
-
validationState
|
|
130
|
-
]);
|
|
131
|
-
const executionStatus = executionStatusOverride ?? ('string' == typeof executionState ? executionState : executionState?.status);
|
|
132
|
-
const display = useMemo(()=>resolveDisplay(manifest?.display, {
|
|
133
|
-
...resolvedData,
|
|
134
|
-
nodeId: id
|
|
135
|
-
}), [
|
|
136
|
-
manifest?.display,
|
|
137
|
-
id,
|
|
138
|
-
resolvedData
|
|
139
|
-
]);
|
|
140
|
-
const displayTitle = display.label ?? DEFAULT_LOOP_TITLE;
|
|
141
|
-
const displayIcon = display.icon ?? DEFAULT_LOOP_ICON;
|
|
142
|
-
const containerWidth = width || DEFAULT_LOOP_WIDTH;
|
|
143
|
-
const containerHeight = height || DEFAULT_LOOP_HEIGHT;
|
|
144
|
-
const nodeSizeStyle = {
|
|
145
|
-
width: containerWidth,
|
|
146
|
-
height: containerHeight,
|
|
147
|
-
minWidth: DEFAULT_LOOP_MIN_WIDTH,
|
|
148
|
-
minHeight: DEFAULT_LOOP_MIN_HEIGHT
|
|
149
|
-
};
|
|
150
|
-
const toolbarConfig = useMemo(()=>{
|
|
151
|
-
if (void 0 !== toolbarConfigProp) return null === toolbarConfigProp ? void 0 : toolbarConfigProp;
|
|
152
|
-
return manifest ? resolveToolbar(manifest, statusContext, data) : void 0;
|
|
153
|
-
}, [
|
|
154
|
-
data,
|
|
155
|
-
manifest,
|
|
156
|
-
statusContext,
|
|
157
|
-
toolbarConfigProp
|
|
158
|
-
]);
|
|
159
|
-
const adornments = useMemo(()=>({
|
|
160
|
-
...resolveAdornments(statusContext),
|
|
161
|
-
...adornmentsProp ?? {}
|
|
162
|
-
}), [
|
|
163
|
-
adornmentsProp,
|
|
164
|
-
statusContext
|
|
165
|
-
]);
|
|
166
|
-
const resolvedHandleGroups = useMemo(()=>manifest ? resolveHandles(manifest.handleConfiguration, resolvedData) : [], [
|
|
167
|
-
manifest,
|
|
168
|
-
resolvedData
|
|
169
|
-
]);
|
|
170
|
-
const loopHandleGroups = useMemo(()=>resolveLoopHandleGroups(resolvedHandleGroups), [
|
|
171
|
-
resolvedHandleGroups
|
|
172
|
-
]);
|
|
173
|
-
useLoopNodeInternalsRefresh(id, loopHandleGroups, containerWidth, containerHeight);
|
|
174
|
-
const handleResize = useCallback((_event, params)=>{
|
|
175
|
-
onResize?.({
|
|
176
|
-
width: snapToGrid(params.width),
|
|
177
|
-
height: snapToGrid(params.height)
|
|
178
|
-
});
|
|
179
|
-
}, [
|
|
180
|
-
onResize
|
|
181
|
-
]);
|
|
182
|
-
const handleEmptyClick = useCallback(()=>{
|
|
183
|
-
onAddFirstChild?.();
|
|
184
|
-
}, [
|
|
185
|
-
onAddFirstChild
|
|
186
|
-
]);
|
|
187
|
-
const handleMouseEnter = useCallback(()=>setIsHovered(true), []);
|
|
188
|
-
const handleMouseLeave = useCallback(()=>setIsHovered(false), []);
|
|
189
|
-
const handleOuterHandleAction = useCallback((_event)=>{
|
|
190
|
-
setIsHovered(false);
|
|
191
|
-
}, []);
|
|
192
|
-
const shouldShowHandles = (isConnecting || selected || isHovered) && !dragging;
|
|
193
|
-
const showHandleAddButtons = isDesignMode && !multipleNodesSelected && !isConnecting && !dragging;
|
|
194
|
-
const showResizeControls = selected && !dragging && isDesignMode;
|
|
195
|
-
const showEmptyStateButton = isDesignMode && !hasChildNodes && !!onAddFirstChild;
|
|
196
|
-
const interactionState = resolveInteractionState(dragging, selected, isHovered);
|
|
197
|
-
if (!manifest) return /*#__PURE__*/ jsx("div", {
|
|
198
|
-
className: "relative",
|
|
199
|
-
style: nodeSizeStyle,
|
|
200
|
-
onMouseEnter: handleMouseEnter,
|
|
201
|
-
onMouseLeave: handleMouseLeave,
|
|
202
|
-
children: /*#__PURE__*/ jsx(MissingManifestNode, {
|
|
203
|
-
type: type,
|
|
204
|
-
isSelected: selected,
|
|
205
|
-
isHovered: isHovered,
|
|
206
|
-
interactionState: interactionState
|
|
207
|
-
})
|
|
208
|
-
});
|
|
209
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
210
|
-
"data-loop-container": true,
|
|
211
|
-
"data-selected": selected ? 'true' : 'false',
|
|
212
|
-
"data-execution-status": executionStatus,
|
|
213
|
-
"data-interaction-state": interactionState,
|
|
214
|
-
"data-suggestion-type": suggestionType,
|
|
215
|
-
"data-validation-status": validationState?.validationStatus,
|
|
216
|
-
"aria-busy": resolvedData.loading || void 0,
|
|
217
|
-
className: cn('group/loop-shell relative flex h-full w-full flex-col overflow-visible border bg-surface-overlay', 'transition-[border-color,box-shadow,opacity] shadow-(--canvas-node-shadow-rest)', 'border-border-subtle', getStatusBorder(suggestionType ?? validationState?.validationStatus ?? executionStatus), isHovered && 'shadow-(--canvas-node-shadow-hover) border-border-hover', selected && 'outline outline-foreground-accent-muted', 'drag' === interactionState && 'cursor-grabbing shadow-(--canvas-node-shadow-lifted)'),
|
|
218
|
-
style: {
|
|
219
|
-
...nodeSizeStyle,
|
|
220
|
-
borderRadius: LOOP_SHELL_RADIUS_PX,
|
|
221
|
-
background: display.background ?? DEFAULT_LOOP_SHELL_BACKGROUND
|
|
222
|
-
},
|
|
223
|
-
onMouseEnter: handleMouseEnter,
|
|
224
|
-
onMouseLeave: handleMouseLeave,
|
|
225
|
-
children: [
|
|
226
|
-
ADORNMENT_SLOT_POSITIONS.map((slot)=>adornments?.[slot] ? /*#__PURE__*/ jsx(BaseBadgeSlot, {
|
|
227
|
-
position: ADORNMENT_SLOT_SHAPES[slot],
|
|
228
|
-
shape: "rectangle",
|
|
229
|
-
children: adornments[slot]
|
|
230
|
-
}, slot) : null),
|
|
231
|
-
/*#__PURE__*/ jsx(ResizeCornerIndicators, {
|
|
232
|
-
visible: showResizeControls
|
|
233
|
-
}),
|
|
234
|
-
showResizeControls ? /*#__PURE__*/ jsx(ResizeControls, {
|
|
235
|
-
onResize: handleResize
|
|
236
|
-
}) : null,
|
|
237
|
-
/*#__PURE__*/ jsx(Header, {
|
|
238
|
-
title: displayTitle,
|
|
239
|
-
icon: displayIcon,
|
|
240
|
-
loading: isLoading
|
|
241
|
-
}),
|
|
242
|
-
/*#__PURE__*/ jsx(BodyFrame, {
|
|
243
|
-
isEmpty: showEmptyStateButton,
|
|
244
|
-
isLoading: isLoading,
|
|
245
|
-
onAddFirstChild: handleEmptyClick
|
|
246
|
-
}),
|
|
247
|
-
toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
|
|
248
|
-
nodeId: id,
|
|
249
|
-
config: toolbarConfig,
|
|
250
|
-
expanded: selected || isHovered,
|
|
251
|
-
hidden: dragging || multipleNodesSelected,
|
|
252
|
-
portalToNodeOverlay: true
|
|
253
|
-
}),
|
|
254
|
-
/*#__PURE__*/ jsx(HandleGroups, {
|
|
255
|
-
nodeId: id,
|
|
256
|
-
groups: loopHandleGroups,
|
|
257
|
-
selected: selected,
|
|
258
|
-
hovered: isHovered,
|
|
259
|
-
shouldShowHandles: shouldShowHandles,
|
|
260
|
-
showAddButton: showHandleAddButtons,
|
|
261
|
-
showNotches: shouldShowHandles,
|
|
262
|
-
nodeWidth: containerWidth,
|
|
263
|
-
nodeHeight: containerHeight,
|
|
264
|
-
connectedHandleIds: connectedHandleIds,
|
|
265
|
-
onOuterHandleAction: handleOuterHandleAction
|
|
266
|
-
})
|
|
267
|
-
]
|
|
268
|
-
});
|
|
269
|
-
}
|
|
270
|
-
const LoopNode = /*#__PURE__*/ memo(LoopNodeComponent);
|
|
271
|
-
function Header({ title, icon, loading }) {
|
|
272
|
-
const titleContent = loading ? /*#__PURE__*/ jsx("div", {
|
|
273
|
-
className: "h-5 w-28 animate-pulse rounded bg-(--canvas-background-overlay)"
|
|
274
|
-
}) : /*#__PURE__*/ jsx("span", {
|
|
275
|
-
className: "truncate text-[14px] font-semibold tracking-normal",
|
|
276
|
-
children: title
|
|
277
|
-
});
|
|
278
|
-
const iconContent = loading ? /*#__PURE__*/ jsx("div", {
|
|
279
|
-
className: "h-4 w-4 shrink-0 animate-pulse rounded bg-(--canvas-background-overlay)"
|
|
280
|
-
}) : icon ? /*#__PURE__*/ jsx("span", {
|
|
281
|
-
className: "shrink-0 text-foreground",
|
|
282
|
-
"aria-hidden": true,
|
|
283
|
-
children: /*#__PURE__*/ jsx(CanvasIcon, {
|
|
284
|
-
icon: icon,
|
|
285
|
-
size: 16
|
|
286
|
-
})
|
|
287
|
-
}) : null;
|
|
288
|
-
return /*#__PURE__*/ jsx("div", {
|
|
289
|
-
className: "flex shrink-0 items-center justify-between gap-2.5 pl-4.5 pr-5 pt-3.5 text-foreground cursor-grab active:cursor-grabbing",
|
|
290
|
-
"data-testid": "loop-node-header",
|
|
291
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
292
|
-
className: "flex min-w-0 items-center gap-2",
|
|
293
|
-
children: [
|
|
294
|
-
iconContent,
|
|
295
|
-
titleContent
|
|
296
|
-
]
|
|
297
|
-
})
|
|
298
|
-
});
|
|
299
|
-
}
|
|
300
|
-
function EmptyState({ onAddFirstChild }) {
|
|
301
|
-
return /*#__PURE__*/ jsx("button", {
|
|
302
|
-
type: "button",
|
|
303
|
-
onClick: onAddFirstChild,
|
|
304
|
-
"aria-label": "Add node to loop",
|
|
305
|
-
className: cn('nodrag nopan', 'pointer-events-auto flex h-8 w-8 items-center justify-center rounded-xl', 'border border-border bg-surface-overlay text-foreground', 'shadow-(--canvas-node-shadow-lifted)', 'transition-colors', 'hover:bg-surface-hover hover:border-brand'),
|
|
306
|
-
children: /*#__PURE__*/ jsx(CanvasIcon, {
|
|
307
|
-
icon: "plus",
|
|
308
|
-
size: 14
|
|
309
|
-
})
|
|
310
|
-
});
|
|
311
|
-
}
|
|
312
|
-
function BodyFrame({ isEmpty, isLoading, onAddFirstChild }) {
|
|
313
|
-
return /*#__PURE__*/ jsxs("div", {
|
|
314
|
-
"data-testid": "loop-body-frame",
|
|
315
|
-
"data-empty": isEmpty ? 'true' : 'false',
|
|
316
|
-
className: cn('relative flex flex-1 rounded-[26px] border border-dashed', 'pointer-events-none', isEmpty && 'items-center justify-center'),
|
|
317
|
-
style: {
|
|
318
|
-
margin: LOOP_FRAME_INSET_PX,
|
|
319
|
-
background: DEFAULT_LOOP_FRAME_BACKGROUND,
|
|
320
|
-
borderColor: DEFAULT_LOOP_FRAME_BORDER
|
|
321
|
-
},
|
|
322
|
-
children: [
|
|
323
|
-
isLoading ? /*#__PURE__*/ jsx("div", {
|
|
324
|
-
className: "m-6 h-14 w-full animate-pulse rounded-[18px] bg-(--canvas-background-overlay)"
|
|
325
|
-
}) : null,
|
|
326
|
-
isEmpty ? /*#__PURE__*/ jsx(EmptyState, {
|
|
327
|
-
onAddFirstChild: onAddFirstChild
|
|
328
|
-
}) : null
|
|
329
|
-
]
|
|
330
|
-
});
|
|
331
|
-
}
|
|
332
|
-
function ResizeControls({ onResize }) {
|
|
333
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
334
|
-
children: RESIZE_CONTROLS.map(({ position, cursor })=>/*#__PURE__*/ jsx(NodeResizeControl, {
|
|
335
|
-
style: RESIZE_CONTROL_STYLE,
|
|
336
|
-
position: position,
|
|
337
|
-
minWidth: DEFAULT_LOOP_MIN_WIDTH,
|
|
338
|
-
minHeight: DEFAULT_LOOP_MIN_HEIGHT,
|
|
339
|
-
onResize: onResize,
|
|
340
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
341
|
-
className: "absolute bottom-0 right-0 h-5 w-5 pointer-events-auto",
|
|
342
|
-
style: {
|
|
343
|
-
cursor
|
|
344
|
-
}
|
|
345
|
-
})
|
|
346
|
-
}, position))
|
|
347
|
-
});
|
|
348
|
-
}
|
|
349
|
-
function ResizeCornerIndicators({ visible }) {
|
|
350
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
351
|
-
children: RESIZE_CONTROLS.map(({ position, indicatorClassName })=>/*#__PURE__*/ jsx("div", {
|
|
352
|
-
"aria-hidden": true,
|
|
353
|
-
className: cn('pointer-events-none absolute h-1.5 w-1.5 rounded-[1px] border border-brand bg-background transition-opacity', indicatorClassName, visible ? 'opacity-100' : 'opacity-0')
|
|
354
|
-
}, position))
|
|
355
|
-
});
|
|
356
|
-
}
|
|
357
|
-
function HandleGroups({ groups, ...handleGroupProps }) {
|
|
358
|
-
if (0 === groups.length) return null;
|
|
359
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
360
|
-
children: groups.map((group, groupIndex)=>/*#__PURE__*/ jsx(HandleGroup, {
|
|
361
|
-
...handleGroupProps,
|
|
362
|
-
group: group
|
|
363
|
-
}, `${group.boundary}:${group.position}:${groupIndex}`))
|
|
364
|
-
});
|
|
365
|
-
}
|
|
366
|
-
function HandleGroup({ nodeId, group, selected, hovered, shouldShowHandles, showAddButton, showNotches, nodeWidth, nodeHeight, connectedHandleIds, onOuterHandleAction }) {
|
|
367
|
-
const groupVisible = shouldShowHandles && (group.visible ?? true);
|
|
368
|
-
const position = group.position;
|
|
369
|
-
const enhancedHandles = useMemo(()=>group.handles.map((handle)=>{
|
|
370
|
-
const isInnerSourceHandle = 'inner' === group.boundary && 'source' === handle.type;
|
|
371
|
-
const shouldResetHoverOnAction = 'outer' === group.boundary && 'source' === handle.type && handle.showButton;
|
|
372
|
-
return {
|
|
373
|
-
...handle,
|
|
374
|
-
showHandle: connectedHandleIds.has(handle.id) || groupVisible,
|
|
375
|
-
showButton: isInnerSourceHandle ? false : handle.showButton,
|
|
376
|
-
onAction: handle.onAction ?? (shouldResetHoverOnAction ? onOuterHandleAction : void 0)
|
|
377
|
-
};
|
|
378
|
-
}), [
|
|
379
|
-
group.boundary,
|
|
380
|
-
group.handles,
|
|
381
|
-
connectedHandleIds,
|
|
382
|
-
groupVisible,
|
|
383
|
-
onOuterHandleAction
|
|
384
|
-
]);
|
|
385
|
-
return /*#__PURE__*/ jsx(ButtonHandles, {
|
|
386
|
-
nodeId: nodeId,
|
|
387
|
-
handles: enhancedHandles,
|
|
388
|
-
position: position,
|
|
389
|
-
connectionPosition: group.connectionPosition,
|
|
390
|
-
selected: selected,
|
|
391
|
-
hovered: hovered,
|
|
392
|
-
showAddButton: showAddButton,
|
|
393
|
-
showNotches: showNotches,
|
|
394
|
-
customPositionAndOffsets: group.customPositionAndOffsets,
|
|
395
|
-
nodeWidth: nodeWidth,
|
|
396
|
-
nodeHeight: nodeHeight,
|
|
397
|
-
portalActions: 'outer' === group.boundary
|
|
398
|
-
});
|
|
399
|
-
}
|
|
400
|
-
export { LoopNode };
|