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

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

@@ -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({

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

@@ -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;

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

@@ -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;"
 >