mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(editor): Add ability to add a node between two nodes in new canvas (no-changelog) (#10006)

Browse Source
This commit is contained in:
Alex Grozav
2024-07-11 17:05:51 +03:00
committed by GitHub
parent d651be4e01
commit 1aae65dfdc
12 changed files with 517 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
packages/editor-ui/src/composables/useCanvasMapping.spec.ts
View File

@@ -15,6 +15,11 @@ import {
import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import {
createCanvasConnectionHandleString,
createCanvasConnectionId,
} from '@/utils/canvasUtilsV2';
import { CanvasConnectionMode } from '@/types';
beforeEach(() => {
const pinia = createPinia();
@@ -243,6 +248,25 @@ describe('useCanvasMapping', () => {
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
const source = manualTriggerNode.id;
const sourceHandle = createCanvasConnectionHandleString({
type: NodeConnectionType.Main,
index: 0,
mode: CanvasConnectionMode.Output,
});
const target = setNode.id;
const targetHandle = createCanvasConnectionHandleString({
type: NodeConnectionType.Main,
index: 0,
mode: CanvasConnectionMode.Input,
});
const connectionId = createCanvasConnectionId({
source,
sourceHandle,
target,
targetHandle,
});
expect(mappedConnections.value).toEqual([
{
data: {
@@ -257,12 +281,12 @@ describe('useCanvasMapping', () => {
type: NodeConnectionType.Main,
},
},
id: `[${manualTriggerNode.id}/${NodeConnectionType.Main}/0][${setNode.id}/${NodeConnectionType.Main}/0]`,
id: connectionId,
label: '',
source: manualTriggerNode.id,
sourceHandle: `outputs/${NodeConnectionType.Main}/0`,
target: setNode.id,
targetHandle: `inputs/${NodeConnectionType.Main}/0`,
source,
sourceHandle,
target,
targetHandle,
type: 'canvas-edge',
animated: false,
},
@@ -293,6 +317,44 @@ describe('useCanvasMapping', () => {
workflowObject: ref(workflowObject) as Ref<Workflow>,
});
const sourceA = manualTriggerNode.id;
const sourceHandleA = createCanvasConnectionHandleString({
type: NodeConnectionType.AiTool,
index: 0,
mode: CanvasConnectionMode.Output,
});
const targetA = setNode.id;
const targetHandleA = createCanvasConnectionHandleString({
type: NodeConnectionType.AiTool,
index: 0,
mode: CanvasConnectionMode.Input,
});
const connectionIdA = createCanvasConnectionId({
source: sourceA,
sourceHandle: sourceHandleA,
target: targetA,
targetHandle: targetHandleA,
});
const sourceB = manualTriggerNode.id;
const sourceHandleB = createCanvasConnectionHandleString({
type: NodeConnectionType.AiDocument,
index: 0,
mode: CanvasConnectionMode.Output,
});
const targetB = setNode.id;
const targetHandleB = createCanvasConnectionHandleString({
type: NodeConnectionType.AiDocument,
index: 1,
mode: CanvasConnectionMode.Input,
});
const connectionIdB = createCanvasConnectionId({
source: sourceB,
sourceHandle: sourceHandleB,
target: targetB,
targetHandle: targetHandleB,
});
expect(mappedConnections.value).toEqual([
{
data: {
@@ -307,12 +369,12 @@ describe('useCanvasMapping', () => {
type: NodeConnectionType.AiTool,
},
},
id: `[${manualTriggerNode.id}/${NodeConnectionType.AiTool}/0][${setNode.id}/${NodeConnectionType.AiTool}/0]`,
id: connectionIdA,
label: '',
source: manualTriggerNode.id,
sourceHandle: `outputs/${NodeConnectionType.AiTool}/0`,
target: setNode.id,
targetHandle: `inputs/${NodeConnectionType.AiTool}/0`,
source: sourceA,
sourceHandle: sourceHandleA,
target: targetA,
targetHandle: targetHandleA,
type: 'canvas-edge',
animated: false,
},
@@ -329,12 +391,12 @@ describe('useCanvasMapping', () => {
type: NodeConnectionType.AiDocument,
},
},
id: `[${manualTriggerNode.id}/${NodeConnectionType.AiDocument}/0][${setNode.id}/${NodeConnectionType.AiDocument}/1]`,
id: connectionIdB,
label: '',
source: manualTriggerNode.id,
sourceHandle: `outputs/${NodeConnectionType.AiDocument}/0`,
target: setNode.id,
targetHandle: `inputs/${NodeConnectionType.AiDocument}/1`,
source: sourceB,
sourceHandle: sourceHandleB,
target: targetB,
targetHandle: targetHandleB,
type: 'canvas-edge',
animated: false,
},

83
packages/editor-ui/src/composables/useCanvasOperations.ts
View File

@@ -5,12 +5,7 @@
import type { CanvasNode } from '@/types';
import { CanvasConnectionMode } from '@/types';
import type {
AddedNodesAndConnections,
INodeUi,
INodeUpdatePropertiesInformation,
XYPosition,
} from '@/Interface';
import type { AddedNodesAndConnections, INodeUi, XYPosition } from '@/Interface';
import {
FORM_TRIGGER_NODE_TYPE,
QUICKSTART_NOTE_NAME,
@@ -31,7 +26,9 @@ import {
} from '@/models/history';
import type { Connection } from '@vue-flow/core';
import {
createCanvasConnectionHandleString,
getUniqueNodeName,
getVueFlowConnectorLengths,
mapCanvasConnectionToLegacyConnection,
parseCanvasConnectionHandleString,
} from '@/utils/canvasUtilsV2';
@@ -334,6 +331,7 @@ export function useCanvasOperations({
nodeHelpers.matchCredentials(newNodeData);
const lastSelectedNode = uiStore.getLastSelectedNode;
const lastSelectedNodeConnection = uiStore.lastSelectedNodeConnection;
const lastSelectedNodeOutputIndex = uiStore.lastSelectedNodeOutputIndex;
const lastSelectedNodeEndpointUuid = uiStore.lastSelectedNodeEndpointUuid;
@@ -378,11 +376,37 @@ export function useCanvasOperations({
// Connect active node to the newly created one
createConnection({
source: lastSelectedNode.id,
sourceHandle: `outputs/${NodeConnectionType.Main}/${outputIndex}`,
sourceHandle: createCanvasConnectionHandleString({
mode: CanvasConnectionMode.Output,
type: NodeConnectionType.Main,
index: outputIndex,
}),
target: newNodeData.id,
targetHandle: `inputs/${NodeConnectionType.Main}/0`,
targetHandle: createCanvasConnectionHandleString({
mode: CanvasConnectionMode.Input,
type: NodeConnectionType.Main,
index: 0,
}),
});
}
if (lastSelectedNodeConnection) {
deleteConnection(lastSelectedNodeConnection, { trackHistory: options.trackHistory });
const targetNode = workflowsStore.getNodeById(lastSelectedNodeConnection.target);
if (targetNode) {
createConnection({
source: newNodeData.id,
sourceHandle: createCanvasConnectionHandleString({
mode: CanvasConnectionMode.Input,
type: NodeConnectionType.Main,
index: 0,
}),
target: lastSelectedNodeConnection.target,
targetHandle: lastSelectedNodeConnection.targetHandle,
});
}
}
}
historyStore.stopRecordingUndo();
@@ -516,11 +540,10 @@ export function useCanvasOperations({
node.position,
);
} else if (lastSelectedNode) {
// @TODO Implement settings lastSelectedConnection for new canvas
const lastSelectedConnection = canvasStore.lastSelectedConnection;
if (lastSelectedConnection) {
if (uiStore.lastSelectedNodeConnection) {
// set when injecting into a connection
const [diffX] = NodeViewUtils.getConnectorLengths(lastSelectedConnection);
const [diffX] = getVueFlowConnectorLengths(uiStore.lastSelectedNodeConnection);
if (diffX <= NodeViewUtils.MAX_X_TO_PUSH_DOWNSTREAM_NODES) {
pushDownstreamNodes(lastSelectedNode.name, NodeViewUtils.PUSH_NODES_OFFSET, {
trackHistory: options.trackHistory,
@@ -537,7 +560,7 @@ export function useCanvasOperations({
canvasStore.newNodeInsertPosition = null;
} else {
let yOffset = 0;
if (lastSelectedConnection) {
if (uiStore.lastSelectedNodeConnection) {
const sourceNodeType = nodeTypesStore.getNodeType(
lastSelectedNode.type,
lastSelectedNode.typeVersion,
@@ -556,16 +579,15 @@ export function useCanvasOperations({
sourceNodeType,
);
const sourceNodeOutputTypes = NodeHelpers.getConnectionTypes(sourceNodeOutputs);
const sourceNodeOutputMainOutputs = sourceNodeOutputTypes.filter(
(output) => output === NodeConnectionType.Main,
);
if (sourceNodeOutputMainOutputs.length > 1) {
const { index: sourceOutputIndex } = parseCanvasConnectionHandleString(
uiStore.lastSelectedNodeConnection.sourceHandle,
);
const offset = offsets[sourceNodeOutputMainOutputs.length - 2];
const sourceOutputIndex = lastSelectedConnection.__meta
? lastSelectedConnection.__meta.sourceOutputIndex
: 0;
yOffset = offset[sourceOutputIndex];
}
}
@@ -729,31 +751,18 @@ export function useCanvasOperations({
);
for (const nodeName of checkNodes) {
const node = workflowsStore.nodesByName[nodeName];
const oldPosition = node.position;
if (node.position[0] < sourceNode.position[0]) {
continue;
}
const updateInformation: INodeUpdatePropertiesInformation = {
name: nodeName,
properties: {
position: [node.position[0] + margin, node.position[1]],
updateNodePosition(
node.id,
{
x: node.position[0] + margin,
y: node.position[1],
},
};
workflowsStore.updateNodeProperties(updateInformation);
updateNodePosition(node.id, { x: node.position[0], y: node.position[1] });
if (
(trackHistory && oldPosition[0] !== updateInformation.properties.position[0]) ||
oldPosition[1] !== updateInformation.properties.position[1]
) {
historyStore.pushCommandToUndo(
new MoveNodeCommand(nodeName, oldPosition, updateInformation.properties.position),
trackHistory,
);
}
{ trackHistory },
);
}
}