@uipath/apollo-react 4.22.2 → 4.23.0-pr654.3fb62d6
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 +4 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.cjs +15 -26
- package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.d.ts +3 -3
- package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.helpers.js +18 -29
- package/dist/canvas/components/AddNodePanel/AddNodeManager.js +4 -1
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +2 -2
- package/dist/canvas/components/BaseNode/BaseNode.cjs +11 -3
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +11 -3
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +2 -9
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +2 -9
- package/dist/canvas/components/LoopNode/LoopNode.cjs +32 -4
- package/dist/canvas/components/LoopNode/LoopNode.d.ts.map +1 -1
- package/dist/canvas/components/LoopNode/LoopNode.helpers.cjs +28 -8
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +8 -2
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +1 -1
- package/dist/canvas/components/LoopNode/LoopNode.helpers.js +23 -6
- package/dist/canvas/components/LoopNode/LoopNode.js +33 -5
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +6 -9
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +6 -9
- package/dist/canvas/components/Toolbox/ListView.cjs +6 -1
- package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.js +6 -1
- package/dist/canvas/components/index.cjs +19 -12
- 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/components/shared/InitialsBadge.cjs +91 -0
- package/dist/canvas/components/shared/InitialsBadge.d.ts +10 -0
- package/dist/canvas/components/shared/InitialsBadge.d.ts.map +1 -0
- package/dist/canvas/components/shared/InitialsBadge.js +44 -0
- package/dist/canvas/components/shared/index.cjs +39 -0
- package/dist/canvas/components/shared/index.d.ts +3 -0
- package/dist/canvas/components/shared/index.d.ts.map +1 -0
- package/dist/canvas/components/shared/index.js +2 -0
- package/dist/canvas/core/CategoryTreeAdapter.cjs +10 -6
- package/dist/canvas/core/CategoryTreeAdapter.js +10 -6
- package/dist/canvas/hooks/index.cjs +19 -12
- package/dist/canvas/hooks/index.d.ts +1 -0
- package/dist/canvas/hooks/index.d.ts.map +1 -1
- package/dist/canvas/hooks/index.js +1 -0
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +18 -5
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +18 -5
- package/dist/canvas/hooks/useCanvasNodeLayout.cjs +66 -0
- package/dist/canvas/hooks/useCanvasNodeLayout.d.ts +15 -0
- package/dist/canvas/hooks/useCanvasNodeLayout.d.ts.map +1 -0
- package/dist/canvas/hooks/useCanvasNodeLayout.js +29 -0
- package/dist/canvas/schema/node-definition/category-manifest.cjs +1 -1
- package/dist/canvas/schema/node-definition/category-manifest.d.ts +1 -1
- package/dist/canvas/schema/node-definition/category-manifest.js +1 -1
- package/dist/canvas/schema/node-definition/node-manifest.cjs +1 -1
- package/dist/canvas/schema/node-definition/node-manifest.d.ts +2 -2
- package/dist/canvas/schema/node-definition/node-manifest.js +1 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts +2 -2
- package/dist/canvas/storybook-utils/manifests/node-definitions.d.ts.map +1 -1
- package/dist/canvas/utils/NodeUtils.cjs +4 -4
- package/dist/canvas/utils/NodeUtils.d.ts +1 -1
- package/dist/canvas/utils/NodeUtils.d.ts.map +1 -1
- package/dist/canvas/utils/NodeUtils.js +4 -4
- package/dist/canvas/utils/container.cjs +50 -2
- package/dist/canvas/utils/container.d.ts +13 -0
- package/dist/canvas/utils/container.d.ts.map +1 -1
- package/dist/canvas/utils/container.js +48 -3
- package/dist/canvas/utils/icon-registry.cjs +8 -0
- package/dist/canvas/utils/icon-registry.d.ts +1 -1
- package/dist/canvas/utils/icon-registry.d.ts.map +1 -1
- package/dist/canvas/utils/icon-registry.js +8 -0
- package/dist/canvas/utils/manifest-resolver.cjs +2 -1
- package/dist/canvas/utils/manifest-resolver.d.ts.map +1 -1
- package/dist/canvas/utils/manifest-resolver.js +2 -1
- package/package.json +1 -1
|
@@ -31,6 +31,7 @@ const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
|
31
31
|
const external_react_namespaceObject = require("react");
|
|
32
32
|
const external_constants_cjs_namespaceObject = require("../../constants.cjs");
|
|
33
33
|
const index_cjs_namespaceObject = require("../../core/index.cjs");
|
|
34
|
+
const useCanvasNodeLayout_cjs_namespaceObject = require("../../hooks/useCanvasNodeLayout.cjs");
|
|
34
35
|
const usePreviewNode_cjs_namespaceObject = require("../../hooks/usePreviewNode.cjs");
|
|
35
36
|
const createPreviewNode_cjs_namespaceObject = require("../../utils/createPreviewNode.cjs");
|
|
36
37
|
const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
|
|
@@ -39,6 +40,7 @@ const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
|
|
|
39
40
|
const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
|
|
40
41
|
const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
41
42
|
const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
|
|
43
|
+
const nodeLayout = (0, useCanvasNodeLayout_cjs_namespaceObject.useCanvasNodeLayout)();
|
|
42
44
|
const { previewNode, previewNodeConnectionInfo } = (0, usePreviewNode_cjs_namespaceObject.usePreviewNode)();
|
|
43
45
|
const lastPreviewNodeRef = (0, external_react_namespaceObject.useRef)(null);
|
|
44
46
|
const restoreEdgesRef = (0, external_react_namespaceObject.useRef)(null);
|
|
@@ -142,7 +144,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
142
144
|
edges: placementEdges,
|
|
143
145
|
previewNode: currentPreviewNode,
|
|
144
146
|
insertedNode: finalNode,
|
|
145
|
-
|
|
147
|
+
layout: nodeLayout,
|
|
146
148
|
ignoredNodeTypes
|
|
147
149
|
});
|
|
148
150
|
placedNode = placement.insertedNode;
|
|
@@ -170,6 +172,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
170
172
|
previewNodeConnectionInfo,
|
|
171
173
|
reactFlowInstance,
|
|
172
174
|
registry,
|
|
175
|
+
nodeLayout,
|
|
173
176
|
createNodeData,
|
|
174
177
|
onBeforeNodeAdded,
|
|
175
178
|
onNodeAdded,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AddNodeManager.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAE3E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAE3C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAKlC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,CAAC;IAI7E,YAAY,CAAC,EAAE,OAAO,CAAC;IAIvB,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;IAK7F,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,QAAQ,CAAC,YAAY,CAAC,KAAK,YAAY,CAAC;IAOtE,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK;QAAE,OAAO,EAAE,IAAI,CAAC;QAAC,QAAQ,EAAE,IAAI,EAAE,CAAA;KAAE,CAAC;IAK7F,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,KAAK,IAAI,CAAC;IAMpF,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2NxD,CAAC"}
|
|
@@ -38,13 +38,6 @@ const TOP_LEVEL_INSERTION_GAP_PX = 5 * external_constants_cjs_namespaceObject.GR
|
|
|
38
38
|
function getOriginalEdge(previewNode) {
|
|
39
39
|
return previewNode?.data?.originalEdge ?? null;
|
|
40
40
|
}
|
|
41
|
-
function getManifestForNode(registry, node) {
|
|
42
|
-
return node.type ? registry?.getManifest(node.type) : void 0;
|
|
43
|
-
}
|
|
44
|
-
function getManifestAwareNodeDimensions(registry, node) {
|
|
45
|
-
const manifest = getManifestForNode(registry, node);
|
|
46
|
-
return (0, container_cjs_namespaceObject.getNodeDimensions)(node, (0, collapse_cjs_namespaceObject.getExpandedSize)(manifest?.display.shape));
|
|
47
|
-
}
|
|
48
41
|
function getPrimaryPreviewHandlePosition(previewNode, previewConnections) {
|
|
49
42
|
const primaryConnection = previewConnections.find((connection)=>!connection.addNewNodeAsSource) ?? previewConnections[0];
|
|
50
43
|
const handlePosition = primaryConnection?.addNewNodeAsSource ? previewNode.data?.outputHandlePosition : previewNode.data?.inputHandlePosition;
|
|
@@ -95,10 +88,7 @@ function alignNodeToPreview(node, previewNode, previewConnections, nodeManifest)
|
|
|
95
88
|
}
|
|
96
89
|
function resolveScopedCollisions(nodes, insertedNode, options) {
|
|
97
90
|
const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
|
|
98
|
-
const resolvedSiblings = (0, index_cjs_namespaceObject.resolveCollisions)(siblingNodes,
|
|
99
|
-
ignoredNodeTypes: options.ignoredNodeTypes,
|
|
100
|
-
getNodeSize: options.getNodeSize
|
|
101
|
-
});
|
|
91
|
+
const resolvedSiblings = (0, index_cjs_namespaceObject.resolveCollisions)(siblingNodes, options);
|
|
102
92
|
const resolvedSiblingById = new Map(resolvedSiblings.map((node)=>[
|
|
103
93
|
node.id,
|
|
104
94
|
node
|
|
@@ -109,16 +99,16 @@ function resolveScopedCollisions(nodes, insertedNode, options) {
|
|
|
109
99
|
insertedNode: resolvedSiblingById.get(insertedNode.id)
|
|
110
100
|
};
|
|
111
101
|
}
|
|
112
|
-
function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode,
|
|
102
|
+
function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNodeDimensions }) {
|
|
113
103
|
const originalEdge = getOriginalEdge(previewNode);
|
|
114
104
|
if (!originalEdge) return null;
|
|
115
105
|
const targetNode = nodes.find((node)=>node.id === originalEdge.target);
|
|
116
106
|
if (!targetNode || targetNode.parentId !== insertedNode.parentId) return null;
|
|
117
|
-
const insertedSize =
|
|
107
|
+
const insertedSize = getNodeDimensions(insertedNode);
|
|
118
108
|
let insertedX = insertedNode.position.x;
|
|
119
109
|
const sourceNode = nodes.find((node)=>node.id === originalEdge.source);
|
|
120
110
|
if (sourceNode && sourceNode.parentId === insertedNode.parentId) {
|
|
121
|
-
const sourceSize =
|
|
111
|
+
const sourceSize = getNodeDimensions(sourceNode);
|
|
122
112
|
const requiredInsertedLeft = sourceNode.position.x + sourceSize.width + TOP_LEVEL_INSERTION_GAP_PX;
|
|
123
113
|
if (insertedX < requiredInsertedLeft) insertedX = (0, NodeUtils_cjs_namespaceObject.snapUpToGrid)(requiredInsertedLeft);
|
|
124
114
|
}
|
|
@@ -157,28 +147,27 @@ function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNod
|
|
|
157
147
|
insertedNode: updatedInsertedNode
|
|
158
148
|
};
|
|
159
149
|
}
|
|
160
|
-
function placeAddedNode({ nodes, edges, previewNode, insertedNode,
|
|
161
|
-
const
|
|
150
|
+
function placeAddedNode({ nodes, edges, previewNode, insertedNode, layout, ignoredNodeTypes }) {
|
|
151
|
+
const { getNodeDimensions, isContainerNode, getContainerFitGeometry } = layout;
|
|
162
152
|
const placement = (0, container_cjs_namespaceObject.getContainerPlacement)(previewNode);
|
|
163
153
|
if (placement) {
|
|
164
154
|
const containerNode = nodes.find((node)=>node.id === placement.containerId);
|
|
165
155
|
if (!containerNode) return resolveScopedCollisions(nodes, insertedNode, {
|
|
166
156
|
ignoredNodeTypes,
|
|
167
|
-
|
|
157
|
+
getNodeDimensions
|
|
168
158
|
});
|
|
169
|
-
|
|
170
|
-
if (!(0, container_cjs_namespaceObject.isContainerNodeManifest)(containerManifest)) return resolveScopedCollisions(nodes, insertedNode, {
|
|
159
|
+
if (!isContainerNode(containerNode)) return resolveScopedCollisions(nodes, insertedNode, {
|
|
171
160
|
ignoredNodeTypes,
|
|
172
|
-
|
|
161
|
+
getNodeDimensions
|
|
173
162
|
});
|
|
174
163
|
const resolvedNodes = (0, container_cjs_namespaceObject.placeContainerNode)({
|
|
175
164
|
nodes,
|
|
176
165
|
insertedNode,
|
|
177
166
|
placement,
|
|
178
167
|
edges,
|
|
179
|
-
getNodeDimensions
|
|
168
|
+
getNodeDimensions,
|
|
180
169
|
safeArea: (0, container_cjs_namespaceObject.getContainerSafeArea)(containerNode),
|
|
181
|
-
getContainerFitGeometry
|
|
170
|
+
getContainerFitGeometry,
|
|
182
171
|
ignoredNodeTypes
|
|
183
172
|
});
|
|
184
173
|
return {
|
|
@@ -191,11 +180,11 @@ function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ign
|
|
|
191
180
|
edges,
|
|
192
181
|
previewNode,
|
|
193
182
|
insertedNode,
|
|
194
|
-
|
|
183
|
+
getNodeDimensions
|
|
195
184
|
});
|
|
196
185
|
const placementResult = resolveScopedCollisions(shifted?.nodes ?? nodes, shifted?.insertedNode ?? insertedNode, {
|
|
197
186
|
ignoredNodeTypes,
|
|
198
|
-
|
|
187
|
+
getNodeDimensions
|
|
199
188
|
});
|
|
200
189
|
if (!placementResult.insertedNode.parentId) return placementResult;
|
|
201
190
|
const fittedNodes = (0, container_cjs_namespaceObject.fitContainersAndPushSiblings)({
|
|
@@ -203,8 +192,8 @@ function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ign
|
|
|
203
192
|
containerIds: [
|
|
204
193
|
placementResult.insertedNode.parentId
|
|
205
194
|
],
|
|
206
|
-
getContainerFitGeometry
|
|
207
|
-
getNodeDimensions
|
|
195
|
+
getContainerFitGeometry,
|
|
196
|
+
getNodeDimensions,
|
|
208
197
|
ignoredNodeTypes,
|
|
209
198
|
gap: container_cjs_namespaceObject.CONTAINER_SEQUENCE_GAP_PX
|
|
210
199
|
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { Edge, Node } from '../../xyflow/react.ts';
|
|
2
|
-
import type {
|
|
2
|
+
import type { NodeLayout } from '../../hooks/useCanvasNodeLayout';
|
|
3
3
|
import type { PreviewNodeConnectionInfo } from '../../hooks/usePreviewNode';
|
|
4
4
|
import type { NodeManifest } from '../../schema';
|
|
5
5
|
interface AddNodePlacementResult {
|
|
@@ -8,12 +8,12 @@ interface AddNodePlacementResult {
|
|
|
8
8
|
}
|
|
9
9
|
export declare function getOriginalEdge(previewNode: Node | null | undefined): Edge | null;
|
|
10
10
|
export declare function alignNodeToPreview(node: Node, previewNode: Node, previewConnections: PreviewNodeConnectionInfo[], nodeManifest: NodeManifest | undefined): Node;
|
|
11
|
-
export declare function placeAddedNode({ nodes, edges, previewNode, insertedNode,
|
|
11
|
+
export declare function placeAddedNode({ nodes, edges, previewNode, insertedNode, layout, ignoredNodeTypes, }: {
|
|
12
12
|
nodes: Node[];
|
|
13
13
|
edges: Edge[];
|
|
14
14
|
previewNode: Node;
|
|
15
15
|
insertedNode: Node;
|
|
16
|
-
|
|
16
|
+
layout: NodeLayout;
|
|
17
17
|
ignoredNodeTypes?: string[];
|
|
18
18
|
}): AddNodePlacementResult;
|
|
19
19
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddNodeManager.helpers.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAG3E,OAAO,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"AddNodeManager.helpers.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodeManager.helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,0CAA0C,CAAC;AAG3E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAClE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AAC5E,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAsBjD,UAAU,sBAAsB;IAC9B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,YAAY,EAAE,IAAI,CAAC;CACpB;AAMD,wBAAgB,eAAe,CAAC,WAAW,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAEjF;AAsBD,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,IAAI,EACjB,kBAAkB,EAAE,yBAAyB,EAAE,EAC/C,YAAY,EAAE,YAAY,GAAG,SAAS,GACrC,IAAI,CA2DN;AAkID,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,KAAK,EACL,WAAW,EACX,YAAY,EACZ,MAAM,EACN,gBAAgB,GACjB,EAAE;IACD,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,IAAI,CAAC;IACnB,MAAM,EAAE,UAAU,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;CAC7B,GAAG,sBAAsB,CA0EzB"}
|
|
@@ -2,27 +2,20 @@ import { Position } from "../../xyflow/react.js";
|
|
|
2
2
|
import { GRID_SPACING } from "../../constants.js";
|
|
3
3
|
import { resolveCollisions } from "../../utils/index.js";
|
|
4
4
|
import { getExpandedSize } from "../../utils/collapse.js";
|
|
5
|
-
import { CONTAINER_SEQUENCE_GAP_PX, collectLinearDownstreamSiblings, fitContainersAndPushSiblings,
|
|
5
|
+
import { CONTAINER_SEQUENCE_GAP_PX, collectLinearDownstreamSiblings, fitContainersAndPushSiblings, getContainerPlacement, getContainerSafeArea, getNodeDimensions as container_js_getNodeDimensions, placeContainerNode } from "../../utils/container.js";
|
|
6
6
|
import { snapUpToGrid } from "../../utils/NodeUtils.js";
|
|
7
7
|
const TOP_LEVEL_INSERTION_GAP_PX = 5 * GRID_SPACING;
|
|
8
8
|
function getOriginalEdge(previewNode) {
|
|
9
9
|
return previewNode?.data?.originalEdge ?? null;
|
|
10
10
|
}
|
|
11
|
-
function getManifestForNode(registry, node) {
|
|
12
|
-
return node.type ? registry?.getManifest(node.type) : void 0;
|
|
13
|
-
}
|
|
14
|
-
function getManifestAwareNodeDimensions(registry, node) {
|
|
15
|
-
const manifest = getManifestForNode(registry, node);
|
|
16
|
-
return getNodeDimensions(node, getExpandedSize(manifest?.display.shape));
|
|
17
|
-
}
|
|
18
11
|
function getPrimaryPreviewHandlePosition(previewNode, previewConnections) {
|
|
19
12
|
const primaryConnection = previewConnections.find((connection)=>!connection.addNewNodeAsSource) ?? previewConnections[0];
|
|
20
13
|
const handlePosition = primaryConnection?.addNewNodeAsSource ? previewNode.data?.outputHandlePosition : previewNode.data?.inputHandlePosition;
|
|
21
14
|
return handlePosition;
|
|
22
15
|
}
|
|
23
16
|
function alignNodeToPreview(node, previewNode, previewConnections, nodeManifest) {
|
|
24
|
-
const previewSize =
|
|
25
|
-
const nodeSize =
|
|
17
|
+
const previewSize = container_js_getNodeDimensions(previewNode);
|
|
18
|
+
const nodeSize = container_js_getNodeDimensions(node, getExpandedSize(nodeManifest?.display.shape));
|
|
26
19
|
if (previewSize.width === nodeSize.width && previewSize.height === nodeSize.height) return node;
|
|
27
20
|
const previewHandlePosition = getPrimaryPreviewHandlePosition(previewNode, previewConnections);
|
|
28
21
|
const previewCenterX = previewNode.position.x + previewSize.width / 2;
|
|
@@ -65,10 +58,7 @@ function alignNodeToPreview(node, previewNode, previewConnections, nodeManifest)
|
|
|
65
58
|
}
|
|
66
59
|
function resolveScopedCollisions(nodes, insertedNode, options) {
|
|
67
60
|
const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
|
|
68
|
-
const resolvedSiblings = resolveCollisions(siblingNodes,
|
|
69
|
-
ignoredNodeTypes: options.ignoredNodeTypes,
|
|
70
|
-
getNodeSize: options.getNodeSize
|
|
71
|
-
});
|
|
61
|
+
const resolvedSiblings = resolveCollisions(siblingNodes, options);
|
|
72
62
|
const resolvedSiblingById = new Map(resolvedSiblings.map((node)=>[
|
|
73
63
|
node.id,
|
|
74
64
|
node
|
|
@@ -79,16 +69,16 @@ function resolveScopedCollisions(nodes, insertedNode, options) {
|
|
|
79
69
|
insertedNode: resolvedSiblingById.get(insertedNode.id)
|
|
80
70
|
};
|
|
81
71
|
}
|
|
82
|
-
function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode,
|
|
72
|
+
function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNodeDimensions }) {
|
|
83
73
|
const originalEdge = getOriginalEdge(previewNode);
|
|
84
74
|
if (!originalEdge) return null;
|
|
85
75
|
const targetNode = nodes.find((node)=>node.id === originalEdge.target);
|
|
86
76
|
if (!targetNode || targetNode.parentId !== insertedNode.parentId) return null;
|
|
87
|
-
const insertedSize =
|
|
77
|
+
const insertedSize = getNodeDimensions(insertedNode);
|
|
88
78
|
let insertedX = insertedNode.position.x;
|
|
89
79
|
const sourceNode = nodes.find((node)=>node.id === originalEdge.source);
|
|
90
80
|
if (sourceNode && sourceNode.parentId === insertedNode.parentId) {
|
|
91
|
-
const sourceSize =
|
|
81
|
+
const sourceSize = getNodeDimensions(sourceNode);
|
|
92
82
|
const requiredInsertedLeft = sourceNode.position.x + sourceSize.width + TOP_LEVEL_INSERTION_GAP_PX;
|
|
93
83
|
if (insertedX < requiredInsertedLeft) insertedX = snapUpToGrid(requiredInsertedLeft);
|
|
94
84
|
}
|
|
@@ -127,28 +117,27 @@ function shiftForEdgeInsertion({ nodes, edges, previewNode, insertedNode, getNod
|
|
|
127
117
|
insertedNode: updatedInsertedNode
|
|
128
118
|
};
|
|
129
119
|
}
|
|
130
|
-
function placeAddedNode({ nodes, edges, previewNode, insertedNode,
|
|
131
|
-
const
|
|
120
|
+
function placeAddedNode({ nodes, edges, previewNode, insertedNode, layout, ignoredNodeTypes }) {
|
|
121
|
+
const { getNodeDimensions, isContainerNode, getContainerFitGeometry } = layout;
|
|
132
122
|
const placement = getContainerPlacement(previewNode);
|
|
133
123
|
if (placement) {
|
|
134
124
|
const containerNode = nodes.find((node)=>node.id === placement.containerId);
|
|
135
125
|
if (!containerNode) return resolveScopedCollisions(nodes, insertedNode, {
|
|
136
126
|
ignoredNodeTypes,
|
|
137
|
-
|
|
127
|
+
getNodeDimensions
|
|
138
128
|
});
|
|
139
|
-
|
|
140
|
-
if (!isContainerNodeManifest(containerManifest)) return resolveScopedCollisions(nodes, insertedNode, {
|
|
129
|
+
if (!isContainerNode(containerNode)) return resolveScopedCollisions(nodes, insertedNode, {
|
|
141
130
|
ignoredNodeTypes,
|
|
142
|
-
|
|
131
|
+
getNodeDimensions
|
|
143
132
|
});
|
|
144
133
|
const resolvedNodes = placeContainerNode({
|
|
145
134
|
nodes,
|
|
146
135
|
insertedNode,
|
|
147
136
|
placement,
|
|
148
137
|
edges,
|
|
149
|
-
getNodeDimensions
|
|
138
|
+
getNodeDimensions,
|
|
150
139
|
safeArea: getContainerSafeArea(containerNode),
|
|
151
|
-
getContainerFitGeometry
|
|
140
|
+
getContainerFitGeometry,
|
|
152
141
|
ignoredNodeTypes
|
|
153
142
|
});
|
|
154
143
|
return {
|
|
@@ -161,11 +150,11 @@ function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ign
|
|
|
161
150
|
edges,
|
|
162
151
|
previewNode,
|
|
163
152
|
insertedNode,
|
|
164
|
-
|
|
153
|
+
getNodeDimensions
|
|
165
154
|
});
|
|
166
155
|
const placementResult = resolveScopedCollisions(shifted?.nodes ?? nodes, shifted?.insertedNode ?? insertedNode, {
|
|
167
156
|
ignoredNodeTypes,
|
|
168
|
-
|
|
157
|
+
getNodeDimensions
|
|
169
158
|
});
|
|
170
159
|
if (!placementResult.insertedNode.parentId) return placementResult;
|
|
171
160
|
const fittedNodes = fitContainersAndPushSiblings({
|
|
@@ -173,8 +162,8 @@ function placeAddedNode({ nodes, edges, previewNode, insertedNode, registry, ign
|
|
|
173
162
|
containerIds: [
|
|
174
163
|
placementResult.insertedNode.parentId
|
|
175
164
|
],
|
|
176
|
-
getContainerFitGeometry
|
|
177
|
-
getNodeDimensions
|
|
165
|
+
getContainerFitGeometry,
|
|
166
|
+
getNodeDimensions,
|
|
178
167
|
ignoredNodeTypes,
|
|
179
168
|
gap: CONTAINER_SEQUENCE_GAP_PX
|
|
180
169
|
});
|
|
@@ -3,6 +3,7 @@ import { useReactFlow } from "../../xyflow/react.js";
|
|
|
3
3
|
import { useCallback, useEffect, useRef } from "react";
|
|
4
4
|
import { FLOATING_CANVAS_PANEL_OFFSET, PREVIEW_NODE_ID } from "../../constants.js";
|
|
5
5
|
import { useOptionalNodeTypeRegistry } from "../../core/index.js";
|
|
6
|
+
import { useCanvasNodeLayout } from "../../hooks/useCanvasNodeLayout.js";
|
|
6
7
|
import { usePreviewNode } from "../../hooks/usePreviewNode.js";
|
|
7
8
|
import { isPreviewEdge } from "../../utils/createPreviewNode.js";
|
|
8
9
|
import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
|
|
@@ -11,6 +12,7 @@ import { AddNodePanel } from "./AddNodePanel.js";
|
|
|
11
12
|
const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
|
|
12
13
|
const reactFlowInstance = useReactFlow();
|
|
13
14
|
const registry = useOptionalNodeTypeRegistry();
|
|
15
|
+
const nodeLayout = useCanvasNodeLayout();
|
|
14
16
|
const { previewNode, previewNodeConnectionInfo } = usePreviewNode();
|
|
15
17
|
const lastPreviewNodeRef = useRef(null);
|
|
16
18
|
const restoreEdgesRef = useRef(null);
|
|
@@ -114,7 +116,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
114
116
|
edges: placementEdges,
|
|
115
117
|
previewNode: currentPreviewNode,
|
|
116
118
|
insertedNode: finalNode,
|
|
117
|
-
|
|
119
|
+
layout: nodeLayout,
|
|
118
120
|
ignoredNodeTypes
|
|
119
121
|
});
|
|
120
122
|
placedNode = placement.insertedNode;
|
|
@@ -142,6 +144,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
142
144
|
previewNodeConnectionInfo,
|
|
143
145
|
reactFlowInstance,
|
|
144
146
|
registry,
|
|
147
|
+
nodeLayout,
|
|
145
148
|
createNodeData,
|
|
146
149
|
onBeforeNodeAdded,
|
|
147
150
|
onNodeAdded,
|
|
@@ -14,11 +14,11 @@ export declare const agentFlowManifest: {
|
|
|
14
14
|
id: string;
|
|
15
15
|
name: string;
|
|
16
16
|
sortOrder: number;
|
|
17
|
-
icon: string;
|
|
18
17
|
tags: string[];
|
|
19
18
|
parentId?: string | undefined;
|
|
20
19
|
color?: string | undefined;
|
|
21
20
|
colorDark?: string | undefined;
|
|
21
|
+
icon?: string | undefined;
|
|
22
22
|
}[];
|
|
23
23
|
nodes: {
|
|
24
24
|
nodeType: string;
|
|
@@ -27,9 +27,9 @@ export declare const agentFlowManifest: {
|
|
|
27
27
|
sortOrder: number;
|
|
28
28
|
display: {
|
|
29
29
|
label: string;
|
|
30
|
-
icon: string;
|
|
31
30
|
canvasLabel?: string | undefined;
|
|
32
31
|
description?: string | undefined;
|
|
32
|
+
icon?: string | undefined;
|
|
33
33
|
shape?: "square" | "circle" | "container" | "rectangle" | undefined;
|
|
34
34
|
color?: string | undefined;
|
|
35
35
|
background?: string | undefined;
|
|
@@ -43,6 +43,7 @@ const ConnectedHandlesContext_cjs_namespaceObject = require("../BaseCanvas/Conne
|
|
|
43
43
|
const SelectionStateContext_cjs_namespaceObject = require("../BaseCanvas/SelectionStateContext.cjs");
|
|
44
44
|
const SmartHandle_cjs_namespaceObject = require("../ButtonHandle/SmartHandle.cjs");
|
|
45
45
|
const useButtonHandles_cjs_namespaceObject = require("../ButtonHandle/useButtonHandles.cjs");
|
|
46
|
+
const InitialsBadge_cjs_namespaceObject = require("../shared/InitialsBadge.cjs");
|
|
46
47
|
const external_Toolbar_index_cjs_namespaceObject = require("../Toolbar/index.cjs");
|
|
47
48
|
const external_BaseNodeBadgeSlot_cjs_namespaceObject = require("./BaseNodeBadgeSlot.cjs");
|
|
48
49
|
const external_BaseNodeConfigContext_cjs_namespaceObject = require("./BaseNodeConfigContext.cjs");
|
|
@@ -124,11 +125,18 @@ const BaseNodeComponent = (props)=>{
|
|
|
124
125
|
const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
|
|
125
126
|
const Icon = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
126
127
|
if (void 0 !== iconComponent) return iconComponent;
|
|
127
|
-
|
|
128
|
-
|
|
128
|
+
if (display.icon) {
|
|
129
|
+
const IconComponent = (0, icon_registry_cjs_namespaceObject.getIcon)(display.icon);
|
|
130
|
+
return IconComponent ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(IconComponent, {}) : null;
|
|
131
|
+
}
|
|
132
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(InitialsBadge_cjs_namespaceObject.InitialsBadge, {
|
|
133
|
+
name: display.label,
|
|
134
|
+
size: "var(--icon-size)"
|
|
135
|
+
});
|
|
129
136
|
}, [
|
|
130
137
|
iconComponent,
|
|
131
|
-
display.icon
|
|
138
|
+
display.icon,
|
|
139
|
+
display.label
|
|
132
140
|
]);
|
|
133
141
|
const handleConfigurations = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
134
142
|
if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AAwChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAynB1B,eAAO,MAAM,QAAQ,8CAnlBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAmlBhB,CAAC"}
|
|
@@ -15,6 +15,7 @@ import { useConnectedHandles } from "../BaseCanvas/ConnectedHandlesContext.js";
|
|
|
15
15
|
import { useSelectionState } from "../BaseCanvas/SelectionStateContext.js";
|
|
16
16
|
import { SmartHandle, SmartHandleProvider } from "../ButtonHandle/SmartHandle.js";
|
|
17
17
|
import { useButtonHandles } from "../ButtonHandle/useButtonHandles.js";
|
|
18
|
+
import { InitialsBadge } from "../shared/InitialsBadge.js";
|
|
18
19
|
import { NodeToolbar } from "../Toolbar/index.js";
|
|
19
20
|
import { BaseBadgeSlot } from "./BaseNodeBadgeSlot.js";
|
|
20
21
|
import { useBaseNodeOverrideConfig } from "./BaseNodeConfigContext.js";
|
|
@@ -96,11 +97,18 @@ const BaseNodeComponent = (props)=>{
|
|
|
96
97
|
const isStacked = Boolean(manifest?.drillable || data?.isCollapsed);
|
|
97
98
|
const Icon = useMemo(()=>{
|
|
98
99
|
if (void 0 !== iconComponent) return iconComponent;
|
|
99
|
-
|
|
100
|
-
|
|
100
|
+
if (display.icon) {
|
|
101
|
+
const IconComponent = getIcon(display.icon);
|
|
102
|
+
return IconComponent ? /*#__PURE__*/ jsx(IconComponent, {}) : null;
|
|
103
|
+
}
|
|
104
|
+
return /*#__PURE__*/ jsx(InitialsBadge, {
|
|
105
|
+
name: display.label,
|
|
106
|
+
size: "var(--icon-size)"
|
|
107
|
+
});
|
|
101
108
|
}, [
|
|
102
109
|
iconComponent,
|
|
103
|
-
display.icon
|
|
110
|
+
display.icon,
|
|
111
|
+
display.label
|
|
104
112
|
]);
|
|
105
113
|
const handleConfigurations = useMemo(()=>{
|
|
106
114
|
if (handleConfigurationsProp && Array.isArray(handleConfigurationsProp)) return handleConfigurationsProp;
|
|
@@ -35,6 +35,7 @@ const index_cjs_namespaceObject = require("../../controls/index.cjs");
|
|
|
35
35
|
const external_core_index_cjs_namespaceObject = require("../../core/index.cjs");
|
|
36
36
|
const useAddNodeOnConnectEnd_cjs_namespaceObject = require("../../hooks/useAddNodeOnConnectEnd.cjs");
|
|
37
37
|
const useCanvasEvents_cjs_namespaceObject = require("../../hooks/useCanvasEvents.cjs");
|
|
38
|
+
const useCanvasNodeLayout_cjs_namespaceObject = require("../../hooks/useCanvasNodeLayout.cjs");
|
|
38
39
|
const animatedViewportManager_cjs_namespaceObject = require("../../stores/animatedViewportManager.cjs");
|
|
39
40
|
const canvasStore_cjs_namespaceObject = require("../../stores/canvasStore.cjs");
|
|
40
41
|
const viewportManager_cjs_namespaceObject = require("../../stores/viewportManager.cjs");
|
|
@@ -77,12 +78,6 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
77
78
|
const lastCanvasIdRef = (0, external_react_namespaceObject.useRef)(null);
|
|
78
79
|
const shouldAnimate = 'design' === mode && !(0, transitions_cjs_namespaceObject.prefersReducedMotion)();
|
|
79
80
|
const nodeManifests = (0, external_core_index_cjs_namespaceObject.useNodeManifests)();
|
|
80
|
-
const nodeManifestByType = (0, external_react_namespaceObject.useMemo)(()=>new Map(nodeManifests.map((manifest)=>[
|
|
81
|
-
manifest.nodeType,
|
|
82
|
-
manifest
|
|
83
|
-
])), [
|
|
84
|
-
nodeManifests
|
|
85
|
-
]);
|
|
86
81
|
const nodeTypes = (0, external_react_namespaceObject.useMemo)(()=>nodeManifests.reduce((acc, manifest)=>{
|
|
87
82
|
acc[manifest.nodeType] = (0, external_utils_index_cjs_namespaceObject.isContainerNodeManifest)(manifest) ? external_LoopNode_index_cjs_namespaceObject.LoopCanvasNode : external_BaseNode_index_cjs_namespaceObject.BaseNode;
|
|
88
83
|
return acc;
|
|
@@ -91,9 +86,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
91
86
|
}), [
|
|
92
87
|
nodeManifests
|
|
93
88
|
]);
|
|
94
|
-
const getManifestForNode = (0,
|
|
95
|
-
nodeManifestByType
|
|
96
|
-
]);
|
|
89
|
+
const { getManifestForNode } = (0, useCanvasNodeLayout_cjs_namespaceObject.useCanvasNodeLayout)();
|
|
97
90
|
const currentCanvas = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectCurrentCanvas);
|
|
98
91
|
const previousCanvas = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectPreviousCanvas);
|
|
99
92
|
const breadcrumbs = (0, canvasStore_cjs_namespaceObject.useCanvasStore)(canvasStore_cjs_namespaceObject.selectBreadcrumbs);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"HierarchicalCanvas.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/HierarchicalCanvas/HierarchicalCanvas.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA8B/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAe5D,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,CAmZhE,CAAC"}
|
|
@@ -7,6 +7,7 @@ import { Breadcrumb } from "../../controls/index.js";
|
|
|
7
7
|
import { useNodeManifests } from "../../core/index.js";
|
|
8
8
|
import { useAddNodeOnConnectEnd } from "../../hooks/useAddNodeOnConnectEnd.js";
|
|
9
9
|
import { useCanvasEvent } from "../../hooks/useCanvasEvents.js";
|
|
10
|
+
import { useCanvasNodeLayout } from "../../hooks/useCanvasNodeLayout.js";
|
|
10
11
|
import { animatedViewportManager } from "../../stores/animatedViewportManager.js";
|
|
11
12
|
import { selectBreadcrumbs, selectCanvasStack, selectCurrentCanvas, selectCurrentPath, selectDrillIntoNode, selectInitializeCanvas, selectInitializeWithData, selectNavigateToDepth, selectNavigateToSiblingCanvas, selectPreviousCanvas, selectTransitionState, selectUpdateEdges, selectUpdateNodes, selectUpdateSelection, selectUpdateViewport, useCanvasStore } from "../../stores/canvasStore.js";
|
|
12
13
|
import { viewportManager } from "../../stores/viewportManager.js";
|
|
@@ -49,12 +50,6 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
49
50
|
const lastCanvasIdRef = useRef(null);
|
|
50
51
|
const shouldAnimate = 'design' === mode && !prefersReducedMotion();
|
|
51
52
|
const nodeManifests = useNodeManifests();
|
|
52
|
-
const nodeManifestByType = useMemo(()=>new Map(nodeManifests.map((manifest)=>[
|
|
53
|
-
manifest.nodeType,
|
|
54
|
-
manifest
|
|
55
|
-
])), [
|
|
56
|
-
nodeManifests
|
|
57
|
-
]);
|
|
58
53
|
const nodeTypes = useMemo(()=>nodeManifests.reduce((acc, manifest)=>{
|
|
59
54
|
acc[manifest.nodeType] = isContainerNodeManifest(manifest) ? LoopCanvasNode : BaseNode;
|
|
60
55
|
return acc;
|
|
@@ -63,9 +58,7 @@ const HierarchicalCanvas = ({ mode = 'design', initialCanvases, initialPath, onC
|
|
|
63
58
|
}), [
|
|
64
59
|
nodeManifests
|
|
65
60
|
]);
|
|
66
|
-
const getManifestForNode =
|
|
67
|
-
nodeManifestByType
|
|
68
|
-
]);
|
|
61
|
+
const { getManifestForNode } = useCanvasNodeLayout();
|
|
69
62
|
const currentCanvas = useCanvasStore(selectCurrentCanvas);
|
|
70
63
|
const previousCanvas = useCanvasStore(selectPreviousCanvas);
|
|
71
64
|
const breadcrumbs = useCanvasStore(selectBreadcrumbs);
|
|
@@ -30,6 +30,7 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
|
30
30
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
31
31
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
|
+
const shallow_namespaceObject = require("zustand/shallow");
|
|
33
34
|
const index_cjs_namespaceObject = require("../../core/index.cjs");
|
|
34
35
|
const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
|
|
35
36
|
const adornment_resolver_cjs_namespaceObject = require("../../utils/adornment-resolver.cjs");
|
|
@@ -53,21 +54,29 @@ const EMPTY_DATA = {};
|
|
|
53
54
|
const RESIZE_CONTROLS = [
|
|
54
55
|
{
|
|
55
56
|
position: 'top-left',
|
|
57
|
+
widthSide: 'left',
|
|
58
|
+
heightSide: 'top',
|
|
56
59
|
cursor: 'nwse-resize',
|
|
57
60
|
indicatorClassName: 'top-[-4px] left-[-4px]'
|
|
58
61
|
},
|
|
59
62
|
{
|
|
60
63
|
position: 'top-right',
|
|
64
|
+
widthSide: 'right',
|
|
65
|
+
heightSide: 'top',
|
|
61
66
|
cursor: 'nesw-resize',
|
|
62
67
|
indicatorClassName: 'top-[-4px] right-[-4px]'
|
|
63
68
|
},
|
|
64
69
|
{
|
|
65
70
|
position: 'bottom-left',
|
|
71
|
+
widthSide: 'left',
|
|
72
|
+
heightSide: 'bottom',
|
|
66
73
|
cursor: 'nesw-resize',
|
|
67
74
|
indicatorClassName: 'bottom-[-4px] left-[-4px]'
|
|
68
75
|
},
|
|
69
76
|
{
|
|
70
77
|
position: 'bottom-right',
|
|
78
|
+
widthSide: 'right',
|
|
79
|
+
heightSide: 'bottom',
|
|
71
80
|
cursor: 'nwse-resize',
|
|
72
81
|
indicatorClassName: 'bottom-[-4px] right-[-4px]'
|
|
73
82
|
}
|
|
@@ -77,6 +86,12 @@ const RESIZE_CONTROL_STYLE = {
|
|
|
77
86
|
border: 'none',
|
|
78
87
|
zIndex: 100
|
|
79
88
|
};
|
|
89
|
+
const DEFAULT_RESIZE_MINIMUMS = {
|
|
90
|
+
left: container_cjs_namespaceObject.DEFAULT_CONTAINER_MIN_WIDTH,
|
|
91
|
+
right: container_cjs_namespaceObject.DEFAULT_CONTAINER_MIN_WIDTH,
|
|
92
|
+
top: container_cjs_namespaceObject.DEFAULT_CONTAINER_MIN_HEIGHT,
|
|
93
|
+
bottom: container_cjs_namespaceObject.DEFAULT_CONTAINER_MIN_HEIGHT
|
|
94
|
+
};
|
|
80
95
|
const ADORNMENT_SLOT_POSITIONS = [
|
|
81
96
|
'topLeft',
|
|
82
97
|
'topRight',
|
|
@@ -101,6 +116,17 @@ function useHasChildNodes(id, enabled) {
|
|
|
101
116
|
enabled
|
|
102
117
|
]));
|
|
103
118
|
}
|
|
119
|
+
function useContainerResizeMinimums(id, width, height) {
|
|
120
|
+
return (0, react_cjs_namespaceObject.useStore)((0, external_react_namespaceObject.useCallback)((state)=>(0, container_cjs_namespaceObject.getContainerResizeMinimums)({
|
|
121
|
+
id,
|
|
122
|
+
width,
|
|
123
|
+
height
|
|
124
|
+
}, state.nodes), [
|
|
125
|
+
height,
|
|
126
|
+
id,
|
|
127
|
+
width
|
|
128
|
+
]), shallow_namespaceObject.shallow);
|
|
129
|
+
}
|
|
104
130
|
function useContainerNodeInternalsRefresh(id, handleGroups, width, height) {
|
|
105
131
|
const updateNodeInternals = (0, react_cjs_namespaceObject.useUpdateNodeInternals)();
|
|
106
132
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
@@ -170,6 +196,7 @@ function LoopNodeComponent(props) {
|
|
|
170
196
|
const isDropTarget = true === resolvedData.isDropTarget;
|
|
171
197
|
const containerWidth = width || container_cjs_namespaceObject.DEFAULT_CONTAINER_WIDTH;
|
|
172
198
|
const containerHeight = height || container_cjs_namespaceObject.DEFAULT_CONTAINER_HEIGHT;
|
|
199
|
+
const resizeMinimums = useContainerResizeMinimums(id, containerWidth, containerHeight);
|
|
173
200
|
const nodeSizeStyle = {
|
|
174
201
|
width: containerWidth,
|
|
175
202
|
height: containerHeight,
|
|
@@ -262,6 +289,7 @@ function LoopNodeComponent(props) {
|
|
|
262
289
|
visible: showResizeControls
|
|
263
290
|
}),
|
|
264
291
|
showResizeControls ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ResizeControls, {
|
|
292
|
+
minimums: resizeMinimums,
|
|
265
293
|
onResize: handleResize
|
|
266
294
|
}) : null,
|
|
267
295
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Header, {
|
|
@@ -371,13 +399,13 @@ function BodyFrame({ isEmpty, isLoading }) {
|
|
|
371
399
|
}) : null
|
|
372
400
|
});
|
|
373
401
|
}
|
|
374
|
-
function ResizeControls({ onResize }) {
|
|
402
|
+
function ResizeControls({ minimums = DEFAULT_RESIZE_MINIMUMS, onResize }) {
|
|
375
403
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
|
|
376
|
-
children: RESIZE_CONTROLS.map(({ position, cursor })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
|
|
404
|
+
children: RESIZE_CONTROLS.map(({ position, widthSide, heightSide, cursor })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.NodeResizeControl, {
|
|
377
405
|
style: RESIZE_CONTROL_STYLE,
|
|
378
406
|
position: position,
|
|
379
|
-
minWidth:
|
|
380
|
-
minHeight:
|
|
407
|
+
minWidth: minimums[widthSide],
|
|
408
|
+
minHeight: minimums[heightSide],
|
|
381
409
|
onResize: onResize,
|
|
382
410
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
383
411
|
className: "absolute bottom-0 right-0 h-5 w-5 pointer-events-auto",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"LoopNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/LoopNode/LoopNode.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AA8GtD,iBAAS,iBAAiB,CAAC,KAAK,EAAE,aAAa,2CAmO9C;AAED,eAAO,MAAM,QAAQ,+DAA0B,CAAC"}
|