mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-09 22:24:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Add support for nodes with multiple main inputs in new canvas (no-changelog) (#10659)

Browse source
This commit is contained in:
Alex Grozav 2024-09-05 08:03:19 +03:00 committed by GitHub
parent fa31164a48
commit a5a92ec8b1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 53 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.spec.ts
View file

@ -26,6 +26,46 @@ describe('CanvasNodeDefault', () => {
expect(getByTestId('canvas-default-node')).toMatchSnapshot();
});
describe('inputs', () => {
it('should adjust height css variable based on the number of inputs (1 input)', () => {
const { getByText } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide({
data: {
inputs: [{ type: NodeConnectionType.Main, index: 0 }],
},
}),
},
},
});
const nodeElement = getByText('Test Node').closest('.node');
expect(nodeElement).toHaveStyle({ '--canvas-node--main-input-count': '1' }); // height calculation based on the number of inputs
});
it('should adjust height css variable based on the number of inputs (multiple inputs)', () => {
const { getByText } = renderComponent({
global: {
provide: {
...createCanvasNodeProvide({
data: {
inputs: [
{ type: NodeConnectionType.Main, index: 0 },
{ type: NodeConnectionType.Main, index: 0 },
{ type: NodeConnectionType.Main, index: 0 },
],
},
}),
},
},
});
const nodeElement = getByText('Test Node').closest('.node');
expect(nodeElement).toHaveStyle({ '--canvas-node--main-input-count': '3' }); // height calculation based on the number of inputs
});
});
describe('outputs', () => {
it('should adjust height css variable based on the number of outputs (1 output)', () => {
const { getByText } = renderComponent({

10
packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
View file

@ -30,7 +30,7 @@ const {
hasIssues,
render,
} = useCanvasNode();
const { mainOutputs, nonMainInputs, requiredNonMainInputs } = useNodeConnections({
const { mainOutputs, mainInputs, nonMainInputs, requiredNonMainInputs } = useNodeConnections({
inputs,
outputs,
connections,
@ -67,6 +67,7 @@ const styles = computed(() => {
stylesObject['--configurable-node--input-count'] = nonMainInputs.value.length + spacerCount;
}
stylesObject['--canvas-node--main-input-count'] = mainInputs.value.length;
stylesObject['--canvas-node--main-output-count'] = mainOutputs.value.length;
return stylesObject;
@ -115,7 +116,12 @@ function openContextMenu(event: MouseEvent) {
<style lang="scss" module>
.node {
--canvas-node--height: calc(100px + max(0, var(--canvas-node--main-output-count, 1) - 4) * 48px);
--canvas-node--max-vertical-handles: max(
var(--canvas-node--main-input-count),
var(--canvas-node--main-output-count),
1
);
--canvas-node--height: calc(100px + max(0, var(--canvas-node--max-vertical-handles) - 3) * 42px);
--canvas-node--width: 100px;
--canvas-node-border-width: 2px;
--configurable-node--min-input-count: 4;

10
packages/editor-ui/src/components/canvas/elements/nodes/render-types/__snapshots__/CanvasNodeDefault.spec.ts.snap
View file

@ -4,7 +4,7 @@ exports[`CanvasNodeDefault > configurable > should render configurable node corr
<div
class="node configurable"
data-test-id="canvas-configurable-node"
style="--canvas-node--main-output-count: 0;"
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
@ -33,7 +33,7 @@ exports[`CanvasNodeDefault > configuration > should render configurable configur
<div
class="node configurable configuration"
data-test-id="canvas-configurable-node"
style="--canvas-node--main-output-count: 0;"
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
@ -62,7 +62,7 @@ exports[`CanvasNodeDefault > configuration > should render configuration node co
<div
class="node configuration"
data-test-id="canvas-configuration-node"
style="--canvas-node--main-output-count: 0;"
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
@ -91,7 +91,7 @@ exports[`CanvasNodeDefault > should render node correctly 1`] = `
<div
class="node"
data-test-id="canvas-default-node"
style="--canvas-node--main-output-count: 0;"
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>
@ -120,7 +120,7 @@ exports[`CanvasNodeDefault > trigger > should render trigger node correctly 1`]
<div
class="node trigger"
data-test-id="canvas-trigger-node"
style="--canvas-node--main-output-count: 0;"
style="--canvas-node--main-input-count: 0; --canvas-node--main-output-count: 0;"
>