✨ Add support for nodes with 4 in- or outputs

packages/editor-ui/src/components/mixins/nodeBase.ts

@@ -69,27 +69,38 @@ export const nodeBase = mixins(nodeIndex).extend({
 	methods: {
 		__addNode (node: INodeUi) {
 			// TODO: Later move the node-connection definitions to a special file
+
+			let nodeTypeData = this.$store.getters.nodeType(node.type);
+
 			const nodeConnectors: IConnectionsUi = {
 				main: {
 					input: {
 						uuid: '-input',
 						maxConnections: -1,
 						endpoint: 'Rectangle',
-						endpointStyle: { width: 10, height: 24, fill: '#777', stroke: '#777', lineWidth: 0 },
+						endpointStyle: {
+							width: nodeTypeData.outputs.length > 2 ? 9 : 10,
+							height: nodeTypeData.outputs.length > 2 ? 18 : 24,
+							fill: '#777',
+							stroke: '#777',
+							lineWidth: 0,
+						},
 						dragAllowedWhenFull: true,
 					},
 					output: {
 						uuid: '-output',
 						maxConnections: -1,
 						endpoint: 'Dot',
-						endpointStyle: { radius: 11, fill: '#555', outlineStroke: 'none' },
+						endpointStyle: {
+							radius: nodeTypeData.outputs.length > 2 ? 7 : 11,
+							fill: '#555',
+							outlineStroke: 'none',
+						},
 						dragAllowedWhenFull: true,
 					},
 				},
 			};
 
-			let nodeTypeData = this.$store.getters.nodeType(node.type);
-
 			if (!nodeTypeData) {
 				// If node type is not know use by default the base.noOp data to display it
 				nodeTypeData = this.$store.getters.nodeType('n8n-nodes-base.noOp');
@@ -113,6 +124,12 @@ export const nodeBase = mixins(nodeIndex).extend({
 						[0, 0.5, -1, 0],
 						[0, 0.75, -1, 0],
 					],
+					4: [
+						[0, 0.2, -1, 0],
+						[0, 0.4, -1, 0],
+						[0, 0.6, -1, 0],
+						[0, 0.8, -1, 0],
+					],
 				},
 				output: {
 					1: [
@@ -127,6 +144,12 @@ export const nodeBase = mixins(nodeIndex).extend({
 						[1, 0.5, 1, 0],
 						[1, 0.75, 1, 0],
 					],
+					4: [
+						[1, 0.2, 1, 0],
+						[1, 0.4, 1, 0],
+						[1, 0.6, 1, 0],
+						[1, 0.8, 1, 0],
+					],
 				},
 			};