feat(editor): Add initial code for NodeView and Canvas rewrite (no-changelog) (#9135)
Co-authored-by: Csaba Tuncsik <csaba.tuncsik@gmail.com>
This commit is contained in:
Alex Grozav
GitHub
213
packages/editor-ui/src/composables/useCanvasMapping.spec.ts
Normal file
213
packages/editor-ui/src/composables/useCanvasMapping.spec.ts
Normal file
@@ -0,0 +1,213 @@
|
||||
import type { Ref } from 'vue';
|
||||
import { ref } from 'vue';
|
||||
import { useCanvasMapping } from '@/composables/useCanvasMapping';
|
||||
import { createTestNode, createTestWorkflow, createTestWorkflowObject } from '@/__tests__/mocks';
|
||||
import type { IConnections, Workflow } from 'n8n-workflow';
|
||||
import { createPinia, setActivePinia } from 'pinia';
|
||||
import { MANUAL_TRIGGER_NODE_TYPE, SET_NODE_TYPE } from '@/constants';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
|
||||
vi.mock('@/stores/nodeTypes.store', () => ({
|
||||
useNodeTypesStore: vi.fn(() => ({
|
||||
getNodeType: vi.fn(() => ({
|
||||
name: 'test',
|
||||
description: 'Test Node Description',
|
||||
})),
|
||||
isTriggerNode: vi.fn(),
|
||||
isConfigNode: vi.fn(),
|
||||
isConfigurableNode: vi.fn(),
|
||||
})),
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
const pinia = createPinia();
|
||||
setActivePinia(pinia);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('useCanvasMapping', () => {
|
||||
it('should initialize with default props', () => {
|
||||
const workflow = createTestWorkflow({
|
||||
id: '1',
|
||||
name: 'Test Workflow',
|
||||
nodes: [],
|
||||
connections: {},
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements, connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value).toEqual([]);
|
||||
expect(connections.value).toEqual([]);
|
||||
});
|
||||
|
||||
describe('elements', () => {
|
||||
it('should map nodes to canvas elements', () => {
|
||||
const node = createTestNode({
|
||||
name: 'Node',
|
||||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
});
|
||||
const workflow = createTestWorkflow({
|
||||
name: 'Test Workflow',
|
||||
nodes: [node],
|
||||
connections: {},
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { elements } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(elements.value).toEqual([
|
||||
{
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
type: 'canvas-node',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
typeVersion: 1,
|
||||
inputs: [],
|
||||
outputs: [],
|
||||
renderType: 'default',
|
||||
},
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('connections', () => {
|
||||
it('should map connections to canvas connections', () => {
|
||||
const nodeA = createTestNode({
|
||||
name: 'Node A',
|
||||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
});
|
||||
const nodeB = createTestNode({
|
||||
name: 'Node B',
|
||||
type: SET_NODE_TYPE,
|
||||
});
|
||||
const workflow = createTestWorkflow({
|
||||
name: 'Test Workflow',
|
||||
nodes: [nodeA, nodeB],
|
||||
connections: {
|
||||
[nodeA.name]: {
|
||||
[NodeConnectionType.Main]: [
|
||||
[{ node: nodeB.name, type: NodeConnectionType.Main, index: 0 }],
|
||||
],
|
||||
},
|
||||
} as IConnections,
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(connections.value).toEqual([
|
||||
{
|
||||
data: {
|
||||
fromNodeName: nodeA.name,
|
||||
source: {
|
||||
index: 0,
|
||||
type: NodeConnectionType.Main,
|
||||
},
|
||||
target: {
|
||||
index: 0,
|
||||
type: NodeConnectionType.Main,
|
||||
},
|
||||
},
|
||||
id: `[${nodeA.id}/${NodeConnectionType.Main}/0][${nodeB.id}/${NodeConnectionType.Main}/0]`,
|
||||
label: '',
|
||||
source: nodeA.id,
|
||||
sourceHandle: `outputs/${NodeConnectionType.Main}/0`,
|
||||
target: nodeB.id,
|
||||
targetHandle: `inputs/${NodeConnectionType.Main}/0`,
|
||||
type: 'canvas-edge',
|
||||
},
|
||||
]);
|
||||
});
|
||||
|
||||
it('should map multiple input types to canvas connections', () => {
|
||||
const nodeA = createTestNode({
|
||||
name: 'Node A',
|
||||
type: MANUAL_TRIGGER_NODE_TYPE,
|
||||
});
|
||||
const nodeB = createTestNode({
|
||||
name: 'Node B',
|
||||
type: SET_NODE_TYPE,
|
||||
});
|
||||
const workflow = createTestWorkflow({
|
||||
name: 'Test Workflow',
|
||||
nodes: [nodeA, nodeB],
|
||||
connections: {
|
||||
'Node A': {
|
||||
[NodeConnectionType.AiTool]: [
|
||||
[{ node: nodeB.name, type: NodeConnectionType.AiTool, index: 0 }],
|
||||
],
|
||||
[NodeConnectionType.AiDocument]: [
|
||||
[{ node: nodeB.name, type: NodeConnectionType.AiDocument, index: 1 }],
|
||||
],
|
||||
},
|
||||
},
|
||||
});
|
||||
const workflowObject = createTestWorkflowObject(workflow);
|
||||
|
||||
const { connections } = useCanvasMapping({
|
||||
workflow: ref(workflow),
|
||||
workflowObject: ref(workflowObject) as Ref<Workflow>,
|
||||
});
|
||||
|
||||
expect(connections.value).toEqual([
|
||||
{
|
||||
data: {
|
||||
fromNodeName: nodeA.name,
|
||||
source: {
|
||||
index: 0,
|
||||
type: NodeConnectionType.AiTool,
|
||||
},
|
||||
target: {
|
||||
index: 0,
|
||||
type: NodeConnectionType.AiTool,
|
||||
},
|
||||
},
|
||||
id: `[${nodeA.id}/${NodeConnectionType.AiTool}/0][${nodeB.id}/${NodeConnectionType.AiTool}/0]`,
|
||||
label: '',
|
||||
source: nodeA.id,
|
||||
sourceHandle: `outputs/${NodeConnectionType.AiTool}/0`,
|
||||
target: nodeB.id,
|
||||
targetHandle: `inputs/${NodeConnectionType.AiTool}/0`,
|
||||
type: 'canvas-edge',
|
||||
},
|
||||
{
|
||||
data: {
|
||||
fromNodeName: nodeA.name,
|
||||
source: {
|
||||
index: 0,
|
||||
type: NodeConnectionType.AiDocument,
|
||||
},
|
||||
target: {
|
||||
index: 1,
|
||||
type: NodeConnectionType.AiDocument,
|
||||
},
|
||||
},
|
||||
id: `[${nodeA.id}/${NodeConnectionType.AiDocument}/0][${nodeB.id}/${NodeConnectionType.AiDocument}/1]`,
|
||||
label: '',
|
||||
source: nodeA.id,
|
||||
sourceHandle: `outputs/${NodeConnectionType.AiDocument}/0`,
|
||||
target: nodeB.id,
|
||||
targetHandle: `inputs/${NodeConnectionType.AiDocument}/1`,
|
||||
type: 'canvas-edge',
|
||||
},
|
||||
]);
|
||||
});
|
||||
});
|
||||
});
|
||||
150
packages/editor-ui/src/composables/useCanvasMapping.ts
Normal file
150
packages/editor-ui/src/composables/useCanvasMapping.ts
Normal file
@@ -0,0 +1,150 @@
|
||||
import { useI18n } from '@/composables/useI18n';
|
||||
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||
import type { Ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import type {
|
||||
CanvasConnection,
|
||||
CanvasConnectionPort,
|
||||
CanvasElement,
|
||||
CanvasElementData,
|
||||
} from '@/types';
|
||||
import {
|
||||
mapLegacyConnectionsToCanvasConnections,
|
||||
mapLegacyEndpointsToCanvasConnectionPort,
|
||||
} from '@/utils/canvasUtilsV2';
|
||||
import type { Workflow } from 'n8n-workflow';
|
||||
import { NodeHelpers } from 'n8n-workflow';
|
||||
import type { IWorkflowDb } from '@/Interface';
|
||||
|
||||
export function useCanvasMapping({
|
||||
workflow,
|
||||
workflowObject,
|
||||
}: {
|
||||
workflow: Ref<IWorkflowDb>;
|
||||
workflowObject: Ref<Workflow>;
|
||||
}) {
|
||||
const locale = useI18n();
|
||||
const nodeTypesStore = useNodeTypesStore();
|
||||
|
||||
const renderTypeByNodeType = computed(
|
||||
() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasElementData['renderType']>>((acc, node) => {
|
||||
let renderType: CanvasElementData['renderType'] = 'default';
|
||||
switch (true) {
|
||||
case nodeTypesStore.isTriggerNode(node.type):
|
||||
renderType = 'trigger';
|
||||
break;
|
||||
case nodeTypesStore.isConfigNode(workflowObject.value, node, node.type):
|
||||
renderType = 'configuration';
|
||||
break;
|
||||
case nodeTypesStore.isConfigurableNode(workflowObject.value, node, node.type):
|
||||
renderType = 'configurable';
|
||||
break;
|
||||
}
|
||||
|
||||
acc[node.type] = renderType;
|
||||
return acc;
|
||||
}, {}) ?? {},
|
||||
);
|
||||
|
||||
const nodeInputsById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
|
||||
const workflowObjectNode = workflowObject.value.getNode(node.name);
|
||||
|
||||
acc[node.id] =
|
||||
workflowObjectNode && nodeTypeDescription
|
||||
? mapLegacyEndpointsToCanvasConnectionPort(
|
||||
NodeHelpers.getNodeInputs(
|
||||
workflowObject.value,
|
||||
workflowObjectNode,
|
||||
nodeTypeDescription,
|
||||
),
|
||||
)
|
||||
: [];
|
||||
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
const nodeOutputsById = computed(() =>
|
||||
workflow.value.nodes.reduce<Record<string, CanvasConnectionPort[]>>((acc, node) => {
|
||||
const nodeTypeDescription = nodeTypesStore.getNodeType(node.type);
|
||||
const workflowObjectNode = workflowObject.value.getNode(node.name);
|
||||
|
||||
acc[node.id] =
|
||||
workflowObjectNode && nodeTypeDescription
|
||||
? mapLegacyEndpointsToCanvasConnectionPort(
|
||||
NodeHelpers.getNodeOutputs(
|
||||
workflowObject.value,
|
||||
workflowObjectNode,
|
||||
nodeTypeDescription,
|
||||
),
|
||||
)
|
||||
: [];
|
||||
|
||||
return acc;
|
||||
}, {}),
|
||||
);
|
||||
|
||||
const elements = computed<CanvasElement[]>(() => [
|
||||
...workflow.value.nodes.map<CanvasElement>((node) => {
|
||||
const data: CanvasElementData = {
|
||||
id: node.id,
|
||||
type: node.type,
|
||||
typeVersion: node.typeVersion,
|
||||
inputs: nodeInputsById.value[node.id] ?? [],
|
||||
outputs: nodeOutputsById.value[node.id] ?? [],
|
||||
renderType: renderTypeByNodeType.value[node.type] ?? 'default',
|
||||
};
|
||||
|
||||
return {
|
||||
id: node.id,
|
||||
label: node.name,
|
||||
type: 'canvas-node',
|
||||
position: { x: node.position[0], y: node.position[1] },
|
||||
data,
|
||||
};
|
||||
}),
|
||||
]);
|
||||
|
||||
const connections = computed<CanvasConnection[]>(() => {
|
||||
const mappedConnections = mapLegacyConnectionsToCanvasConnections(
|
||||
workflow.value.connections ?? [],
|
||||
workflow.value.nodes ?? [],
|
||||
);
|
||||
|
||||
return mappedConnections.map((connection) => {
|
||||
const type = getConnectionType(connection);
|
||||
const label = getConnectionLabel(connection);
|
||||
|
||||
return {
|
||||
...connection,
|
||||
type,
|
||||
label,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
function getConnectionType(_: CanvasConnection): string {
|
||||
return 'canvas-edge';
|
||||
}
|
||||
|
||||
function getConnectionLabel(connection: CanvasConnection): string {
|
||||
const pinData = workflow.value.pinData?.[connection.data?.fromNodeName ?? ''];
|
||||
|
||||
if (pinData?.length) {
|
||||
return locale.baseText('ndv.output.items', {
|
||||
adjustToNumber: pinData.length,
|
||||
interpolate: { count: String(pinData.length) },
|
||||
});
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
return {
|
||||
connections,
|
||||
elements,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import { ref } from 'vue';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
import { useNodeConnections } from '@/composables/useNodeConnections';
|
||||
import type { CanvasElementData } from '@/types';
|
||||
|
||||
describe('useNodeConnections', () => {
|
||||
describe('mainInputs', () => {
|
||||
it('should return main inputs when provided with main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.Main, index: 1 },
|
||||
{ type: NodeConnectionType.Main, index: 2 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
|
||||
const { mainInputs } = useNodeConnections({ inputs, outputs });
|
||||
|
||||
expect(mainInputs.value.length).toBe(3);
|
||||
expect(mainInputs.value).toEqual(inputs.value.slice(0, 3));
|
||||
});
|
||||
});
|
||||
|
||||
describe('nonMainInputs', () => {
|
||||
it('should return non-main inputs when provided with non-main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 1 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
|
||||
const { nonMainInputs } = useNodeConnections({ inputs, outputs });
|
||||
|
||||
expect(nonMainInputs.value.length).toBe(2);
|
||||
expect(nonMainInputs.value).toEqual(inputs.value.slice(1));
|
||||
});
|
||||
});
|
||||
|
||||
describe('requiredNonMainInputs', () => {
|
||||
it('should return required non-main inputs when provided with required non-main inputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, required: true, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, required: false, index: 1 },
|
||||
]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([]);
|
||||
|
||||
const { requiredNonMainInputs } = useNodeConnections({ inputs, outputs });
|
||||
|
||||
expect(requiredNonMainInputs.value.length).toBe(1);
|
||||
expect(requiredNonMainInputs.value).toEqual([inputs.value[1]]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('mainOutputs', () => {
|
||||
it('should return main outputs when provided with main outputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.Main, index: 1 },
|
||||
{ type: NodeConnectionType.Main, index: 2 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
]);
|
||||
|
||||
const { mainOutputs } = useNodeConnections({ inputs, outputs });
|
||||
|
||||
expect(mainOutputs.value.length).toBe(3);
|
||||
expect(mainOutputs.value).toEqual(outputs.value.slice(0, 3));
|
||||
});
|
||||
});
|
||||
|
||||
describe('nonMainOutputs', () => {
|
||||
it('should return non-main outputs when provided with non-main outputs', () => {
|
||||
const inputs = ref<CanvasElementData['inputs']>([]);
|
||||
const outputs = ref<CanvasElementData['outputs']>([
|
||||
{ type: NodeConnectionType.Main, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 0 },
|
||||
{ type: NodeConnectionType.AiAgent, index: 1 },
|
||||
]);
|
||||
|
||||
const { nonMainOutputs } = useNodeConnections({ inputs, outputs });
|
||||
|
||||
expect(nonMainOutputs.value.length).toBe(2);
|
||||
expect(nonMainOutputs.value).toEqual(outputs.value.slice(1));
|
||||
});
|
||||
});
|
||||
});
|
||||
47
packages/editor-ui/src/composables/useNodeConnections.ts
Normal file
47
packages/editor-ui/src/composables/useNodeConnections.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
import type { CanvasElementData } from '@/types';
|
||||
import type { MaybeRef } from 'vue';
|
||||
import { computed, unref } from 'vue';
|
||||
import { NodeConnectionType } from 'n8n-workflow';
|
||||
|
||||
export function useNodeConnections({
|
||||
inputs,
|
||||
outputs,
|
||||
}: {
|
||||
inputs: MaybeRef<CanvasElementData['inputs']>;
|
||||
outputs: MaybeRef<CanvasElementData['outputs']>;
|
||||
}) {
|
||||
/**
|
||||
* Inputs
|
||||
*/
|
||||
|
||||
const mainInputs = computed(() =>
|
||||
unref(inputs).filter((input) => input.type === NodeConnectionType.Main),
|
||||
);
|
||||
|
||||
const nonMainInputs = computed(() =>
|
||||
unref(inputs).filter((input) => input.type !== NodeConnectionType.Main),
|
||||
);
|
||||
|
||||
const requiredNonMainInputs = computed(() =>
|
||||
nonMainInputs.value.filter((input) => input.required),
|
||||
);
|
||||
|
||||
/**
|
||||
* Outputs
|
||||
*/
|
||||
|
||||
const mainOutputs = computed(() =>
|
||||
unref(outputs).filter((output) => output.type === NodeConnectionType.Main),
|
||||
);
|
||||
const nonMainOutputs = computed(() =>
|
||||
unref(outputs).filter((output) => output.type !== NodeConnectionType.Main),
|
||||
);
|
||||
|
||||
return {
|
||||
mainInputs,
|
||||
nonMainInputs,
|
||||
requiredNonMainInputs,
|
||||
mainOutputs,
|
||||
nonMainOutputs,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user