@uipath/apollo-react 4.13.0 → 4.13.1-pr556.57ef73e
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 +26 -7
- package/dist/canvas/components/AddNodePanel/AddNodeManager.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodeManager.js +26 -7
- package/dist/canvas/components/AddNodePanel/index.cjs +2 -6
- package/dist/canvas/components/AddNodePanel/index.d.ts +0 -1
- package/dist/canvas/components/AddNodePanel/index.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/index.js +1 -2
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts +1 -0
- package/dist/canvas/components/AgentCanvas/agent-flow.manifest.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.cjs +25 -10
- package/dist/canvas/components/BaseNode/BaseNode.d.ts +2 -1
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +22 -10
- package/dist/canvas/components/ButtonHandle/ButtonHandle.cjs +115 -34
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts +4 -2
- package/dist/canvas/components/ButtonHandle/ButtonHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandle.js +117 -36
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.cjs +65 -5
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts +4 -0
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/ButtonHandleStyleUtils.js +53 -5
- package/dist/canvas/components/ButtonHandle/HandleButton.cjs +9 -3
- package/dist/canvas/components/ButtonHandle/HandleButton.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/HandleButton.js +9 -3
- package/dist/canvas/components/ButtonHandle/HandleLabel.cjs +11 -4
- package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts +4 -1
- package/dist/canvas/components/ButtonHandle/HandleLabel.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/HandleLabel.js +7 -3
- package/dist/canvas/components/ButtonHandle/SmartHandle.cjs +2 -2
- package/dist/canvas/components/ButtonHandle/SmartHandle.d.ts.map +1 -1
- package/dist/canvas/components/ButtonHandle/SmartHandle.js +2 -2
- package/dist/canvas/components/Edges/SequenceEdge.cjs +3 -2
- package/dist/canvas/components/Edges/SequenceEdge.d.ts +11 -2
- package/dist/canvas/components/Edges/SequenceEdge.d.ts.map +1 -1
- package/dist/canvas/components/Edges/SequenceEdge.js +4 -3
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.cjs +23 -15
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts +2 -0
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvas.js +24 -16
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.cjs +11 -8
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.d.ts.map +1 -1
- package/dist/canvas/components/HierarchicalCanvas/HierarchicalCanvasWithControls.js +11 -8
- package/dist/canvas/components/LoopNode/LoopCanvasNode.cjs +112 -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 +78 -0
- package/dist/canvas/components/LoopNode/LoopNode.cjs +435 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.cjs +77 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts +12 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.constants.js +13 -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 +137 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts +26 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/LoopNode.helpers.js +94 -0
- package/dist/canvas/components/LoopNode/LoopNode.js +401 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.cjs +18 -0
- package/dist/canvas/components/LoopNode/LoopNode.types.d.ts +11 -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 +72 -0
- package/dist/canvas/components/LoopNode/index.d.ts +4 -0
- package/dist/canvas/components/LoopNode/index.d.ts.map +1 -0
- package/dist/canvas/components/LoopNode/index.js +3 -0
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.cjs +34 -25
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts +2 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.d.ts.map +1 -1
- package/dist/canvas/components/Toolbar/EdgeToolbar/useEdgeToolbarState.js +35 -26
- package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.cjs +15 -5
- 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 +15 -5
- 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 +8 -0
- package/dist/canvas/constants.d.ts +2 -0
- package/dist/canvas/constants.d.ts.map +1 -1
- package/dist/canvas/constants.js +3 -1
- package/dist/canvas/core/NodeTypeRegistry.cjs +39 -23
- package/dist/canvas/core/NodeTypeRegistry.d.ts +8 -4
- package/dist/canvas/core/NodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/NodeTypeRegistry.js +39 -23
- package/dist/canvas/core/useNodeTypeRegistry.cjs +4 -3
- package/dist/canvas/core/useNodeTypeRegistry.d.ts +1 -1
- package/dist/canvas/core/useNodeTypeRegistry.d.ts.map +1 -1
- package/dist/canvas/core/useNodeTypeRegistry.js +4 -3
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.cjs +10 -3
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.d.ts.map +1 -1
- package/dist/canvas/hooks/useAddNodeOnConnectEnd.js +10 -3
- package/dist/canvas/hooks/usePreviewNode.cjs +4 -2
- package/dist/canvas/hooks/usePreviewNode.d.ts.map +1 -1
- package/dist/canvas/hooks/usePreviewNode.js +4 -2
- 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.d.ts +4 -0
- package/dist/canvas/schema/node-definition/node-manifest.d.ts.map +1 -1
- package/dist/canvas/storybook-utils/manifests/index.d.ts +1 -0
- 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 +8 -0
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/dist/canvas/utils/{createPreviewNode.cjs → createPreviewGraph.cjs} +115 -41
- package/dist/canvas/utils/createPreviewGraph.d.ts +43 -0
- package/dist/canvas/utils/createPreviewGraph.d.ts.map +1 -0
- package/dist/canvas/utils/{createPreviewNode.js → createPreviewGraph.js} +95 -36
- package/dist/canvas/utils/index.cjs +10 -10
- package/dist/canvas/utils/index.d.ts +2 -2
- package/dist/canvas/utils/index.d.ts.map +1 -1
- package/dist/canvas/utils/index.js +2 -2
- package/package.json +1 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.cjs +0 -41
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts +0 -3
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.d.ts.map +0 -1
- package/dist/canvas/components/AddNodePanel/createAddNodePreview.js +0 -7
- package/dist/canvas/utils/createPreviewNode.d.ts +0 -17
- package/dist/canvas/utils/createPreviewNode.d.ts.map +0 -1
|
@@ -35,6 +35,20 @@ const usePreviewNode_cjs_namespaceObject = require("../../hooks/usePreviewNode.c
|
|
|
35
35
|
const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
|
|
36
36
|
const external_FloatingCanvasPanel_index_cjs_namespaceObject = require("../FloatingCanvasPanel/index.cjs");
|
|
37
37
|
const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
|
|
38
|
+
function resolveNodePlacement(nodes, insertedNode, ignoredNodeTypes) {
|
|
39
|
+
if (!insertedNode.parentId) return (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(nodes, {
|
|
40
|
+
ignoredNodeTypes
|
|
41
|
+
});
|
|
42
|
+
const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
|
|
43
|
+
const resolvedSiblings = (0, external_utils_index_cjs_namespaceObject.resolveCollisions)(siblingNodes, {
|
|
44
|
+
ignoredNodeTypes
|
|
45
|
+
});
|
|
46
|
+
const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
|
|
47
|
+
node.id,
|
|
48
|
+
node
|
|
49
|
+
]));
|
|
50
|
+
return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
|
|
51
|
+
}
|
|
38
52
|
const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
|
|
39
53
|
const reactFlowInstance = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
40
54
|
const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
|
|
@@ -83,15 +97,17 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
83
97
|
id: newNodeId,
|
|
84
98
|
type: nodeItem.data.type,
|
|
85
99
|
position: currentPreviewNode.position,
|
|
100
|
+
parentId: currentPreviewNode.parentId,
|
|
101
|
+
extent: currentPreviewNode.extent,
|
|
86
102
|
selected: true,
|
|
87
103
|
data: nodeData
|
|
88
104
|
};
|
|
89
|
-
const newNodeManifest = registry?.getManifest(nodeItem.data.type);
|
|
105
|
+
const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
|
|
90
106
|
const newEdges = [];
|
|
91
107
|
const previewEdgeIds = [];
|
|
92
108
|
for (const connectionInfoItem of previewNodeConnectionInfo){
|
|
93
109
|
const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
|
|
94
|
-
const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
|
|
110
|
+
const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
|
|
95
111
|
const newNodeHandleId = newNodeDefaultHandle?.id;
|
|
96
112
|
const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
|
|
97
113
|
source: newNode.id,
|
|
@@ -108,7 +124,12 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
108
124
|
newEdges.push({
|
|
109
125
|
id: newEdgeId,
|
|
110
126
|
...edgeSourceTargetData,
|
|
111
|
-
type: 'default'
|
|
127
|
+
type: 'default',
|
|
128
|
+
...currentPreviewNode.parentId ? {
|
|
129
|
+
data: {
|
|
130
|
+
parentId: currentPreviewNode.parentId
|
|
131
|
+
}
|
|
132
|
+
} : {}
|
|
112
133
|
});
|
|
113
134
|
previewEdgeIds.push(connectionInfoItem.previewEdgeId);
|
|
114
135
|
}
|
|
@@ -124,9 +145,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
124
145
|
})),
|
|
125
146
|
finalNode
|
|
126
147
|
];
|
|
127
|
-
return (
|
|
128
|
-
ignoredNodeTypes
|
|
129
|
-
});
|
|
148
|
+
return resolveNodePlacement(newNodes, finalNode, ignoredNodeTypes);
|
|
130
149
|
});
|
|
131
150
|
reactFlowInstance.setEdges((edges)=>[
|
|
132
151
|
...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
|
|
@@ -134,7 +153,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
134
153
|
]);
|
|
135
154
|
const [firstConnection] = previewNodeConnectionInfo;
|
|
136
155
|
if (firstConnection) {
|
|
137
|
-
const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
|
|
156
|
+
const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
|
|
138
157
|
const firstEdgeData = firstConnection.addNewNodeAsSource ? {
|
|
139
158
|
source: finalNode.id,
|
|
140
159
|
sourceHandle: firstEdgeSourceHandle ?? 'output'
|
|
@@ -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;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,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;
|
|
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;AAM/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAEhD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,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;AAqBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgNxD,CAAC"}
|
|
@@ -7,6 +7,20 @@ import { usePreviewNode } from "../../hooks/usePreviewNode.js";
|
|
|
7
7
|
import { resolveCollisions } from "../../utils/index.js";
|
|
8
8
|
import { FloatingCanvasPanel } from "../FloatingCanvasPanel/index.js";
|
|
9
9
|
import { AddNodePanel } from "./AddNodePanel.js";
|
|
10
|
+
function resolveNodePlacement(nodes, insertedNode, ignoredNodeTypes) {
|
|
11
|
+
if (!insertedNode.parentId) return resolveCollisions(nodes, {
|
|
12
|
+
ignoredNodeTypes
|
|
13
|
+
});
|
|
14
|
+
const siblingNodes = nodes.filter((node)=>node.parentId === insertedNode.parentId);
|
|
15
|
+
const resolvedSiblings = resolveCollisions(siblingNodes, {
|
|
16
|
+
ignoredNodeTypes
|
|
17
|
+
});
|
|
18
|
+
const resolvedSiblingsById = new Map(resolvedSiblings.map((node)=>[
|
|
19
|
+
node.id,
|
|
20
|
+
node
|
|
21
|
+
]));
|
|
22
|
+
return nodes.map((node)=>resolvedSiblingsById.get(node.id) ?? node);
|
|
23
|
+
}
|
|
10
24
|
const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData, onBeforeNodeAdded, onNodeAdded, ignoredNodeTypes })=>{
|
|
11
25
|
const reactFlowInstance = useReactFlow();
|
|
12
26
|
const registry = useOptionalNodeTypeRegistry();
|
|
@@ -55,15 +69,17 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
55
69
|
id: newNodeId,
|
|
56
70
|
type: nodeItem.data.type,
|
|
57
71
|
position: currentPreviewNode.position,
|
|
72
|
+
parentId: currentPreviewNode.parentId,
|
|
73
|
+
extent: currentPreviewNode.extent,
|
|
58
74
|
selected: true,
|
|
59
75
|
data: nodeData
|
|
60
76
|
};
|
|
61
|
-
const newNodeManifest = registry?.getManifest(nodeItem.data.type);
|
|
77
|
+
const newNodeManifest = registry?.getManifest(nodeItem.data.type, nodeItem.data.version);
|
|
62
78
|
const newEdges = [];
|
|
63
79
|
const previewEdgeIds = [];
|
|
64
80
|
for (const connectionInfoItem of previewNodeConnectionInfo){
|
|
65
81
|
const newNodeHandleType = connectionInfoItem.addNewNodeAsSource ? 'source' : 'target';
|
|
66
|
-
const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType) : void 0;
|
|
82
|
+
const newNodeDefaultHandle = newNodeManifest ? registry?.getDefaultHandle(newNodeManifest.nodeType, newNodeHandleType, nodeItem.data.version) : void 0;
|
|
67
83
|
const newNodeHandleId = newNodeDefaultHandle?.id;
|
|
68
84
|
const edgeSourceTargetData = connectionInfoItem.addNewNodeAsSource ? {
|
|
69
85
|
source: newNode.id,
|
|
@@ -80,7 +96,12 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
80
96
|
newEdges.push({
|
|
81
97
|
id: newEdgeId,
|
|
82
98
|
...edgeSourceTargetData,
|
|
83
|
-
type: 'default'
|
|
99
|
+
type: 'default',
|
|
100
|
+
...currentPreviewNode.parentId ? {
|
|
101
|
+
data: {
|
|
102
|
+
parentId: currentPreviewNode.parentId
|
|
103
|
+
}
|
|
104
|
+
} : {}
|
|
84
105
|
});
|
|
85
106
|
previewEdgeIds.push(connectionInfoItem.previewEdgeId);
|
|
86
107
|
}
|
|
@@ -96,9 +117,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
96
117
|
})),
|
|
97
118
|
finalNode
|
|
98
119
|
];
|
|
99
|
-
return
|
|
100
|
-
ignoredNodeTypes
|
|
101
|
-
});
|
|
120
|
+
return resolveNodePlacement(newNodes, finalNode, ignoredNodeTypes);
|
|
102
121
|
});
|
|
103
122
|
reactFlowInstance.setEdges((edges)=>[
|
|
104
123
|
...edges.filter((e)=>!previewEdgeIds.includes(e.id)),
|
|
@@ -106,7 +125,7 @@ const AddNodeManager = ({ initializing, customPanel: CustomPanel, createNodeData
|
|
|
106
125
|
]);
|
|
107
126
|
const [firstConnection] = previewNodeConnectionInfo;
|
|
108
127
|
if (firstConnection) {
|
|
109
|
-
const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source')?.id : firstConnection.existingHandleId;
|
|
128
|
+
const firstEdgeSourceHandle = firstConnection.addNewNodeAsSource ? newNodeManifest && registry?.getDefaultHandle(newNodeManifest.nodeType, 'source', nodeItem.data.version)?.id : firstConnection.existingHandleId;
|
|
110
129
|
const firstEdgeData = firstConnection.addNewNodeAsSource ? {
|
|
111
130
|
source: finalNode.id,
|
|
112
131
|
sourceHandle: firstEdgeSourceHandle ?? 'output'
|
|
@@ -24,24 +24,20 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
-
AddNodePanel: ()=>external_AddNodePanel_cjs_namespaceObject.AddNodePanel,
|
|
28
27
|
AddNodeManager: ()=>external_AddNodeManager_cjs_namespaceObject.AddNodeManager,
|
|
29
28
|
AddNodePreview: ()=>external_AddNodePreview_cjs_namespaceObject.AddNodePreview,
|
|
30
|
-
|
|
29
|
+
AddNodePanel: ()=>external_AddNodePanel_cjs_namespaceObject.AddNodePanel
|
|
31
30
|
});
|
|
32
31
|
const external_AddNodeManager_cjs_namespaceObject = require("./AddNodeManager.cjs");
|
|
33
32
|
const external_AddNodePanel_cjs_namespaceObject = require("./AddNodePanel.cjs");
|
|
34
33
|
const external_AddNodePreview_cjs_namespaceObject = require("./AddNodePreview.cjs");
|
|
35
|
-
const external_createAddNodePreview_cjs_namespaceObject = require("./createAddNodePreview.cjs");
|
|
36
34
|
exports.AddNodeManager = __webpack_exports__.AddNodeManager;
|
|
37
35
|
exports.AddNodePanel = __webpack_exports__.AddNodePanel;
|
|
38
36
|
exports.AddNodePreview = __webpack_exports__.AddNodePreview;
|
|
39
|
-
exports.createAddNodePreview = __webpack_exports__.createAddNodePreview;
|
|
40
37
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
41
38
|
"AddNodeManager",
|
|
42
39
|
"AddNodePanel",
|
|
43
|
-
"AddNodePreview"
|
|
44
|
-
"createAddNodePreview"
|
|
40
|
+
"AddNodePreview"
|
|
45
41
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
46
42
|
Object.defineProperty(exports, '__esModule', {
|
|
47
43
|
value: true
|
|
@@ -3,5 +3,4 @@ export { AddNodeManager } from './AddNodeManager';
|
|
|
3
3
|
export { AddNodePanel } from './AddNodePanel';
|
|
4
4
|
export type { AddNodePanelProps, NodeItemData } from './AddNodePanel.types';
|
|
5
5
|
export { AddNodePreview, type AddNodePreviewData } from './AddNodePreview';
|
|
6
|
-
export { createAddNodePreview } from './createAddNodePreview';
|
|
7
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { AddNodeManager } from "./AddNodeManager.js";
|
|
2
2
|
import { AddNodePanel } from "./AddNodePanel.js";
|
|
3
3
|
import { AddNodePreview } from "./AddNodePreview.js";
|
|
4
|
-
|
|
5
|
-
export { AddNodeManager, AddNodePanel, AddNodePreview, createAddNodePreview };
|
|
4
|
+
export { AddNodeManager, AddNodePanel, AddNodePreview };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"agent-flow.manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/agent-flow.manifest.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMnF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,EAmBjD,CAAC;AAMF,eAAO,MAAM,2BAA2B,EAAE,YAsDzC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,YAqDrC,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,YAwBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,YAwBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,YAwBxC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAwBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAMF,eAAO,MAAM,iBAAiB
|
|
1
|
+
{"version":3,"file":"agent-flow.manifest.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AgentCanvas/agent-flow.manifest.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAMnF,eAAO,MAAM,mBAAmB,EAAE,gBAAgB,EAmBjD,CAAC;AAMF,eAAO,MAAM,2BAA2B,EAAE,YAsDzC,CAAC;AAEF,eAAO,MAAM,uBAAuB,EAAE,YAqDrC,CAAC;AAMF,eAAO,MAAM,uBAAuB,EAAE,YAwBrC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,YAwBlC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,YAwBxC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,YAwBpC,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,YAwBjC,CAAC;AAMF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAa7B,CAAC"}
|
|
@@ -24,6 +24,7 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
selectIsConnecting: ()=>selectIsConnecting,
|
|
27
28
|
BaseNode: ()=>BaseNode
|
|
28
29
|
});
|
|
29
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
@@ -70,6 +71,7 @@ const getContainerHeight = (height, hasFooter, footerVariant)=>{
|
|
|
70
71
|
};
|
|
71
72
|
const BaseNodeComponent = (props)=>{
|
|
72
73
|
const { type, data, selected, id, dragging, width, height } = props;
|
|
74
|
+
const nodeVersion = 'string' == typeof data?.version ? data.version : void 0;
|
|
73
75
|
const { onHandleAction: onHandleActionProp, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = (0, external_BaseNodeConfigContext_cjs_namespaceObject.useBaseNodeOverrideConfig)();
|
|
74
76
|
const updateNodeInternals = (0, react_cjs_namespaceObject.useUpdateNodeInternals)();
|
|
75
77
|
const { updateNodeData, updateNode } = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
@@ -87,9 +89,10 @@ const BaseNodeComponent = (props)=>{
|
|
|
87
89
|
const isConnecting = (0, react_cjs_namespaceObject.useStore)(selectIsConnecting);
|
|
88
90
|
const { multipleNodesSelected } = (0, SelectionStateContext_cjs_namespaceObject.useSelectionState)();
|
|
89
91
|
const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
|
|
90
|
-
const manifest = (0, external_react_namespaceObject.useMemo)(()=>nodeTypeRegistry.getManifest(type), [
|
|
92
|
+
const manifest = (0, external_react_namespaceObject.useMemo)(()=>nodeTypeRegistry.getManifest(type, nodeVersion), [
|
|
91
93
|
type,
|
|
92
|
-
nodeTypeRegistry
|
|
94
|
+
nodeTypeRegistry,
|
|
95
|
+
nodeVersion
|
|
93
96
|
]);
|
|
94
97
|
const statusContext = (0, external_react_namespaceObject.useMemo)(()=>({
|
|
95
98
|
nodeId: id,
|
|
@@ -178,11 +181,11 @@ const BaseNodeComponent = (props)=>{
|
|
|
178
181
|
statusContext
|
|
179
182
|
]);
|
|
180
183
|
const computedHeight = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
181
|
-
const handleSpacing = 2.5 * external_constants_cjs_namespaceObject.GRID_SPACING;
|
|
182
184
|
const leftHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
|
|
183
185
|
const rightHandles = handleConfigurations.filter((config)=>config.position === react_cjs_namespaceObject.Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
|
|
184
186
|
const leftRightHandles = Math.max(leftHandles, rightHandles);
|
|
185
|
-
|
|
187
|
+
const minNodeHeight = (2 * leftRightHandles + 2) * external_constants_cjs_namespaceObject.GRID_SPACING;
|
|
188
|
+
return Math.max(baseHeightRef.current, minNodeHeight);
|
|
186
189
|
}, [
|
|
187
190
|
handleConfigurations,
|
|
188
191
|
height
|
|
@@ -276,10 +279,19 @@ const BaseNodeComponent = (props)=>{
|
|
|
276
279
|
isHovered,
|
|
277
280
|
isFocused
|
|
278
281
|
]);
|
|
279
|
-
const shouldShowHandles = (0, external_react_namespaceObject.useMemo)(()=>isConnecting || selected || isHovered, [
|
|
282
|
+
const shouldShowHandles = (0, external_react_namespaceObject.useMemo)(()=>(isConnecting || selected || isHovered) && !dragging, [
|
|
280
283
|
isConnecting,
|
|
281
284
|
selected,
|
|
282
|
-
isHovered
|
|
285
|
+
isHovered,
|
|
286
|
+
dragging
|
|
287
|
+
]);
|
|
288
|
+
const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? react_cjs_namespaceObject.Position.Top : void 0);
|
|
289
|
+
const hasHandleButtonsAtToolbar = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
290
|
+
if (!toolbarPosition || !handleConfigurations?.length) return false;
|
|
291
|
+
return handleConfigurations.some((config)=>config.position === toolbarPosition && false !== config.visible && config.handles.some((h)=>'source' === h.type && false !== h.showButton));
|
|
292
|
+
}, [
|
|
293
|
+
toolbarPosition,
|
|
294
|
+
handleConfigurations
|
|
283
295
|
]);
|
|
284
296
|
const hasVisibleBottomHandles = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
285
297
|
if (!handleConfigurations || !Array.isArray(handleConfigurations) || !selected || 'circle' === displayShape) return false;
|
|
@@ -327,7 +339,7 @@ const BaseNodeComponent = (props)=>{
|
|
|
327
339
|
nodeId: id,
|
|
328
340
|
selected: selected ?? false,
|
|
329
341
|
hovered: isHovered,
|
|
330
|
-
showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting,
|
|
342
|
+
showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
|
|
331
343
|
showNotches,
|
|
332
344
|
nodeWidth: width,
|
|
333
345
|
nodeHeight: height,
|
|
@@ -458,8 +470,9 @@ const BaseNodeComponent = (props)=>{
|
|
|
458
470
|
toolbarConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_Toolbar_index_cjs_namespaceObject.NodeToolbar, {
|
|
459
471
|
nodeId: id,
|
|
460
472
|
config: toolbarConfig,
|
|
461
|
-
expanded: selected,
|
|
462
|
-
hidden: dragging || multipleNodesSelected
|
|
473
|
+
expanded: selected || isHovered,
|
|
474
|
+
hidden: dragging || multipleNodesSelected,
|
|
475
|
+
offsetToolbar: hasHandleButtonsAtToolbar
|
|
463
476
|
})
|
|
464
477
|
]
|
|
465
478
|
}),
|
|
@@ -475,8 +488,10 @@ const BaseNodeComponent = (props)=>{
|
|
|
475
488
|
};
|
|
476
489
|
const BaseNode = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(BaseNodeComponent);
|
|
477
490
|
exports.BaseNode = __webpack_exports__.BaseNode;
|
|
491
|
+
exports.selectIsConnecting = __webpack_exports__.selectIsConnecting;
|
|
478
492
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
479
|
-
"BaseNode"
|
|
493
|
+
"BaseNode",
|
|
494
|
+
"selectIsConnecting"
|
|
480
495
|
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
481
496
|
Object.defineProperty(exports, '__esModule', {
|
|
482
497
|
value: true
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type { Node, NodeProps } from '../../xyflow/react.ts';
|
|
1
|
+
import type { Node, NodeProps, ReactFlowState } from '../../xyflow/react.ts';
|
|
2
2
|
import type { BaseNodeData } from './BaseNode.types';
|
|
3
|
+
export declare const selectIsConnecting: (state: ReactFlowState) => boolean;
|
|
3
4
|
export declare const BaseNode: import("react").MemoExoticComponent<(props: NodeProps<Node<BaseNodeData>>) => import("react/jsx-runtime").JSX.Element>;
|
|
4
5
|
//# sourceMappingURL=BaseNode.d.ts.map
|
|
@@ -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,
|
|
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,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAsChG,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAa1B,eAAO,MAAM,kBAAkB,GAAI,OAAO,cAAc,YAAkC,CAAC;AAsnB3F,eAAO,MAAM,QAAQ,8CAtlBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAslBhB,CAAC"}
|
|
@@ -42,6 +42,7 @@ const getContainerHeight = (height, hasFooter, footerVariant)=>{
|
|
|
42
42
|
};
|
|
43
43
|
const BaseNodeComponent = (props)=>{
|
|
44
44
|
const { type, data, selected, id, dragging, width, height } = props;
|
|
45
|
+
const nodeVersion = 'string' == typeof data?.version ? data.version : void 0;
|
|
45
46
|
const { onHandleAction: onHandleActionProp, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
|
|
46
47
|
const updateNodeInternals = useUpdateNodeInternals();
|
|
47
48
|
const { updateNodeData, updateNode } = useReactFlow();
|
|
@@ -59,9 +60,10 @@ const BaseNodeComponent = (props)=>{
|
|
|
59
60
|
const isConnecting = useStore(selectIsConnecting);
|
|
60
61
|
const { multipleNodesSelected } = useSelectionState();
|
|
61
62
|
const { isDarkMode } = useCanvasTheme();
|
|
62
|
-
const manifest = useMemo(()=>nodeTypeRegistry.getManifest(type), [
|
|
63
|
+
const manifest = useMemo(()=>nodeTypeRegistry.getManifest(type, nodeVersion), [
|
|
63
64
|
type,
|
|
64
|
-
nodeTypeRegistry
|
|
65
|
+
nodeTypeRegistry,
|
|
66
|
+
nodeVersion
|
|
65
67
|
]);
|
|
66
68
|
const statusContext = useMemo(()=>({
|
|
67
69
|
nodeId: id,
|
|
@@ -150,11 +152,11 @@ const BaseNodeComponent = (props)=>{
|
|
|
150
152
|
statusContext
|
|
151
153
|
]);
|
|
152
154
|
const computedHeight = useMemo(()=>{
|
|
153
|
-
const handleSpacing = 2.5 * GRID_SPACING;
|
|
154
155
|
const leftHandles = handleConfigurations.filter((config)=>config.position === Position.Left && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
|
|
155
156
|
const rightHandles = handleConfigurations.filter((config)=>config.position === Position.Right && false !== config.visible).reduce((count, config)=>count + config.handles.filter((h)=>false !== h.visible).length, 0);
|
|
156
157
|
const leftRightHandles = Math.max(leftHandles, rightHandles);
|
|
157
|
-
|
|
158
|
+
const minNodeHeight = (2 * leftRightHandles + 2) * GRID_SPACING;
|
|
159
|
+
return Math.max(baseHeightRef.current, minNodeHeight);
|
|
158
160
|
}, [
|
|
159
161
|
handleConfigurations,
|
|
160
162
|
height
|
|
@@ -248,10 +250,19 @@ const BaseNodeComponent = (props)=>{
|
|
|
248
250
|
isHovered,
|
|
249
251
|
isFocused
|
|
250
252
|
]);
|
|
251
|
-
const shouldShowHandles = useMemo(()=>isConnecting || selected || isHovered, [
|
|
253
|
+
const shouldShowHandles = useMemo(()=>(isConnecting || selected || isHovered) && !dragging, [
|
|
252
254
|
isConnecting,
|
|
253
255
|
selected,
|
|
254
|
-
isHovered
|
|
256
|
+
isHovered,
|
|
257
|
+
dragging
|
|
258
|
+
]);
|
|
259
|
+
const toolbarPosition = toolbarConfig?.position ?? (toolbarConfig ? Position.Top : void 0);
|
|
260
|
+
const hasHandleButtonsAtToolbar = useMemo(()=>{
|
|
261
|
+
if (!toolbarPosition || !handleConfigurations?.length) return false;
|
|
262
|
+
return handleConfigurations.some((config)=>config.position === toolbarPosition && false !== config.visible && config.handles.some((h)=>'source' === h.type && false !== h.showButton));
|
|
263
|
+
}, [
|
|
264
|
+
toolbarPosition,
|
|
265
|
+
handleConfigurations
|
|
255
266
|
]);
|
|
256
267
|
const hasVisibleBottomHandles = useMemo(()=>{
|
|
257
268
|
if (!handleConfigurations || !Array.isArray(handleConfigurations) || !selected || 'circle' === displayShape) return false;
|
|
@@ -299,7 +310,7 @@ const BaseNodeComponent = (props)=>{
|
|
|
299
310
|
nodeId: id,
|
|
300
311
|
selected: selected ?? false,
|
|
301
312
|
hovered: isHovered,
|
|
302
|
-
showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting,
|
|
313
|
+
showAddButton: 'design' === mode && !multipleNodesSelected && !isConnecting && !dragging,
|
|
303
314
|
showNotches,
|
|
304
315
|
nodeWidth: width,
|
|
305
316
|
nodeHeight: height,
|
|
@@ -430,8 +441,9 @@ const BaseNodeComponent = (props)=>{
|
|
|
430
441
|
toolbarConfig && /*#__PURE__*/ jsx(NodeToolbar, {
|
|
431
442
|
nodeId: id,
|
|
432
443
|
config: toolbarConfig,
|
|
433
|
-
expanded: selected,
|
|
434
|
-
hidden: dragging || multipleNodesSelected
|
|
444
|
+
expanded: selected || isHovered,
|
|
445
|
+
hidden: dragging || multipleNodesSelected,
|
|
446
|
+
offsetToolbar: hasHandleButtonsAtToolbar
|
|
435
447
|
})
|
|
436
448
|
]
|
|
437
449
|
}),
|
|
@@ -446,4 +458,4 @@ const BaseNodeComponent = (props)=>{
|
|
|
446
458
|
return nodeContent;
|
|
447
459
|
};
|
|
448
460
|
const BaseNode = /*#__PURE__*/ memo(BaseNodeComponent);
|
|
449
|
-
export { BaseNode };
|
|
461
|
+
export { BaseNode, selectIsConnecting };
|
|
@@ -28,6 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
ButtonHandle: ()=>ButtonHandle
|
|
29
29
|
});
|
|
30
30
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const index_cjs_namespaceObject = require("../../layouts/index.cjs");
|
|
31
32
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
32
33
|
const external_react_namespaceObject = require("react");
|
|
33
34
|
const CanvasEventBus_cjs_namespaceObject = require("../../utils/CanvasEventBus.cjs");
|
|
@@ -37,7 +38,7 @@ const external_HandleButton_cjs_namespaceObject = require("./HandleButton.cjs");
|
|
|
37
38
|
const external_HandleLabel_cjs_namespaceObject = require("./HandleLabel.cjs");
|
|
38
39
|
const external_HandleNotch_cjs_namespaceObject = require("./HandleNotch.cjs");
|
|
39
40
|
const external_useButtonHandleSizeAndPosition_cjs_namespaceObject = require("./useButtonHandleSizeAndPosition.cjs");
|
|
40
|
-
const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, labelIcon, labelBackgroundColor
|
|
41
|
+
const ButtonHandleBase = ({ id, nodeId, type, position, connectionPosition = position, handleType, label, labelIcon, labelBackgroundColor, visible = true, showButton = true, selected = false, index = 0, total = 1, onAction, showNotches = true, customPositionAndOffsets, nodeWidth, nodeHeight })=>{
|
|
41
42
|
const handleRef = (0, external_react_namespaceObject.useRef)(null);
|
|
42
43
|
const [isHovered, setIsHovered] = (0, external_react_namespaceObject.useState)(false);
|
|
43
44
|
const isVertical = position === react_cjs_namespaceObject.Position.Top || position === react_cjs_namespaceObject.Position.Bottom;
|
|
@@ -62,7 +63,7 @@ const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, label
|
|
|
62
63
|
handleId: id,
|
|
63
64
|
nodeId,
|
|
64
65
|
handleType,
|
|
65
|
-
position,
|
|
66
|
+
position: connectionPosition,
|
|
66
67
|
originalEvent: event
|
|
67
68
|
};
|
|
68
69
|
onAction?.(actionEvent);
|
|
@@ -70,13 +71,13 @@ const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, label
|
|
|
70
71
|
handleId: id,
|
|
71
72
|
nodeId,
|
|
72
73
|
handleType,
|
|
73
|
-
position
|
|
74
|
+
position: connectionPosition
|
|
74
75
|
});
|
|
75
76
|
}, [
|
|
77
|
+
connectionPosition,
|
|
76
78
|
id,
|
|
77
79
|
nodeId,
|
|
78
80
|
handleType,
|
|
79
|
-
position,
|
|
80
81
|
onAction
|
|
81
82
|
]);
|
|
82
83
|
const markAsHovered = (0, external_react_namespaceObject.useCallback)(()=>setIsHovered(true), []);
|
|
@@ -87,52 +88,91 @@ const ButtonHandleBase = ({ id, nodeId, type, position, handleType, label, label
|
|
|
87
88
|
numHandles: total,
|
|
88
89
|
customPositionAndOffsets
|
|
89
90
|
});
|
|
90
|
-
|
|
91
|
+
const hasInwardLabel = Boolean(label && connectionPosition !== position);
|
|
92
|
+
const { inwardLabelRef, rootWidth, rootHeight, rootTransform } = useInwardLabelLayout({
|
|
93
|
+
hasInwardLabel,
|
|
94
|
+
isVertical,
|
|
95
|
+
position,
|
|
96
|
+
handleType,
|
|
97
|
+
handleWidth,
|
|
98
|
+
handleHeight,
|
|
99
|
+
transform
|
|
100
|
+
});
|
|
101
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_cjs_namespaceObject.Handle, {
|
|
91
102
|
ref: handleRef,
|
|
92
103
|
type: type,
|
|
93
|
-
position:
|
|
104
|
+
position: connectionPosition,
|
|
94
105
|
id: id,
|
|
95
106
|
onMouseEnter: markAsHovered,
|
|
96
107
|
onMouseLeave: unmarkAsHovered,
|
|
97
108
|
onMouseDown: unmarkAsHovered,
|
|
98
109
|
className: (0, CssUtil_cjs_namespaceObject.cx)('flex! items-center! justify-center! border-0! rounded-none! bg-transparent!', visible ? 'cursor-crosshair! pointer-events-auto! opacity-100' : 'cursor-default! pointer-events-none! opacity-0'),
|
|
99
110
|
style: {
|
|
100
|
-
width:
|
|
101
|
-
height:
|
|
111
|
+
width: rootWidth,
|
|
112
|
+
height: rootHeight,
|
|
102
113
|
top,
|
|
103
114
|
bottom,
|
|
104
115
|
left,
|
|
105
116
|
right,
|
|
106
|
-
transform
|
|
117
|
+
transform: rootTransform
|
|
107
118
|
},
|
|
108
|
-
children:
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
119
|
+
children: hasInwardLabel ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
120
|
+
children: [
|
|
121
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
122
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('flex h-full w-full items-center', (0, external_ButtonHandleStyleUtils_cjs_namespaceObject.getInwardNotchLayout)(position)),
|
|
123
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleNotch_cjs_namespaceObject.HandleNotch, {
|
|
124
|
+
handleType: handleType,
|
|
125
|
+
isVertical: isVertical,
|
|
126
|
+
selected: selected,
|
|
127
|
+
hovered: isHovered,
|
|
128
|
+
showNotch: showNotches
|
|
129
|
+
})
|
|
130
|
+
}),
|
|
131
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(ButtonHandle_InwardHandleLabel, {
|
|
132
|
+
ref: inwardLabelRef,
|
|
133
|
+
connectionPosition: connectionPosition,
|
|
134
|
+
label: label,
|
|
135
|
+
labelIcon: labelIcon,
|
|
136
|
+
backgroundColor: labelBackgroundColor
|
|
137
|
+
}),
|
|
138
|
+
onAction && 'source' === type && showButton ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleButton_cjs_namespaceObject.HandleButton, {
|
|
139
|
+
visible: showButton,
|
|
140
|
+
labelVisible: visible,
|
|
141
|
+
position: position,
|
|
142
|
+
onAction: handleButtonClick,
|
|
143
|
+
handleRef: handleRef
|
|
144
|
+
}) : null
|
|
145
|
+
]
|
|
146
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
147
|
+
children: [
|
|
148
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleNotch_cjs_namespaceObject.HandleNotch, {
|
|
149
|
+
handleType: handleType,
|
|
150
|
+
isVertical: isVertical,
|
|
151
|
+
selected: selected,
|
|
152
|
+
hovered: isHovered,
|
|
153
|
+
showNotch: showNotches
|
|
154
|
+
}),
|
|
155
|
+
onAction && 'source' === type && showButton ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleButton_cjs_namespaceObject.HandleButton, {
|
|
156
|
+
visible: showButton,
|
|
157
|
+
labelVisible: visible,
|
|
158
|
+
position: position,
|
|
159
|
+
onAction: handleButtonClick,
|
|
160
|
+
handleRef: handleRef,
|
|
161
|
+
label: label,
|
|
162
|
+
labelIcon: labelIcon,
|
|
163
|
+
labelBackgroundColor: labelBackgroundColor
|
|
164
|
+
}) : label && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HandleLabel_cjs_namespaceObject.HandleLabel, {
|
|
165
|
+
position: position,
|
|
166
|
+
backgroundColor: labelBackgroundColor,
|
|
167
|
+
label: label,
|
|
168
|
+
labelIcon: labelIcon
|
|
169
|
+
})
|
|
170
|
+
]
|
|
171
|
+
})
|
|
132
172
|
});
|
|
133
173
|
};
|
|
134
174
|
const ButtonHandle = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ButtonHandleBase);
|
|
135
|
-
const ButtonHandlesBase = ({ nodeId, handles, position, selected = false, hovered = false, visible = true, showAddButton = true, showNotches = true, customPositionAndOffsets, shouldShowAddButtonFn = ({ showAddButton, selected, hovered })=>showAddButton && (selected || hovered), nodeWidth, nodeHeight })=>{
|
|
175
|
+
const ButtonHandlesBase = ({ nodeId, handles, position, connectionPosition = position, selected = false, hovered = false, visible = true, showAddButton = true, showNotches = true, customPositionAndOffsets, shouldShowAddButtonFn = ({ showAddButton, selected, hovered })=>showAddButton && (selected || hovered), nodeWidth, nodeHeight })=>{
|
|
136
176
|
const finalSelected = shouldShowAddButtonFn({
|
|
137
177
|
showAddButton,
|
|
138
178
|
selected,
|
|
@@ -151,6 +191,7 @@ const ButtonHandlesBase = ({ nodeId, handles, position, selected = false, hovere
|
|
|
151
191
|
nodeId: nodeId,
|
|
152
192
|
type: handle.type,
|
|
153
193
|
position: position,
|
|
194
|
+
connectionPosition: connectionPosition,
|
|
154
195
|
handleType: handle.handleType,
|
|
155
196
|
label: handle.label,
|
|
156
197
|
labelIcon: handle.labelIcon,
|
|
@@ -170,6 +211,46 @@ const ButtonHandlesBase = ({ nodeId, handles, position, selected = false, hovere
|
|
|
170
211
|
});
|
|
171
212
|
};
|
|
172
213
|
const ButtonHandles = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(ButtonHandlesBase);
|
|
214
|
+
function useInwardLabelLayout({ hasInwardLabel, isVertical, position, handleType, handleWidth, handleHeight, transform }) {
|
|
215
|
+
const inwardLabelRef = (0, external_react_namespaceObject.useRef)(null);
|
|
216
|
+
const [inwardLabelInset, setInwardLabelInset] = (0, external_react_namespaceObject.useState)(0);
|
|
217
|
+
(0, external_react_namespaceObject.useLayoutEffect)(()=>{
|
|
218
|
+
if (!hasInwardLabel) return void setInwardLabelInset((current)=>0 === current ? current : 0);
|
|
219
|
+
const rect = inwardLabelRef.current?.getBoundingClientRect();
|
|
220
|
+
const nextInset = isVertical ? rect?.height ?? 0 : rect?.width ?? 0;
|
|
221
|
+
setInwardLabelInset((current)=>current === nextInset ? current : nextInset);
|
|
222
|
+
}, [
|
|
223
|
+
hasInwardLabel,
|
|
224
|
+
isVertical
|
|
225
|
+
]);
|
|
226
|
+
const inwardHandleSize = (0, external_ButtonHandleStyleUtils_cjs_namespaceObject.getInwardHandleSize)(handleType);
|
|
227
|
+
return {
|
|
228
|
+
inwardLabelRef,
|
|
229
|
+
rootWidth: hasInwardLabel && !isVertical ? inwardHandleSize : handleWidth,
|
|
230
|
+
rootHeight: hasInwardLabel && isVertical ? inwardHandleSize : handleHeight,
|
|
231
|
+
rootTransform: hasInwardLabel ? (0, external_ButtonHandleStyleUtils_cjs_namespaceObject.getInwardHandleTransform)(position, inwardLabelInset) : transform
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
const ButtonHandle_InwardHandleLabel = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ connectionPosition, label, labelIcon, backgroundColor }, ref) {
|
|
235
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
236
|
+
ref: ref,
|
|
237
|
+
className: (0, CssUtil_cjs_namespaceObject.cx)('pointer-events-none absolute flex h-6 items-center whitespace-nowrap rounded-full border border-border-subtle px-2.5', external_ButtonHandleStyleUtils_cjs_namespaceObject.INWARD_LABEL_POSITION[connectionPosition]),
|
|
238
|
+
style: backgroundColor ? {
|
|
239
|
+
backgroundColor
|
|
240
|
+
} : void 0,
|
|
241
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
242
|
+
align: "center",
|
|
243
|
+
gap: 3,
|
|
244
|
+
children: [
|
|
245
|
+
labelIcon,
|
|
246
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
247
|
+
className: "text-xs font-medium text-foreground",
|
|
248
|
+
children: label
|
|
249
|
+
})
|
|
250
|
+
]
|
|
251
|
+
})
|
|
252
|
+
});
|
|
253
|
+
});
|
|
173
254
|
exports.ButtonHandle = __webpack_exports__.ButtonHandle;
|
|
174
255
|
exports.ButtonHandles = __webpack_exports__.ButtonHandles;
|
|
175
256
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|