✨ Add plus endpoint (#2450)

* fix

* refactor

* clean up css

* refactor setzoom level

* refactor

* refactor

* refactor func

* remove scope

* remove localstorage caching

* clean up imports

* update zero case

* add delete connection

* update selected state

* add base type, remove straight line

* add stub offset back

* rename param

* add label offset

* update font size of items

* move up label

* fix error state while executing

* disrespect stubs

* check for errors

* refactor position

* clean up extra space

* make entire node connectable

* Revert "make entire node connectable"

e304f7c5b8ff1b41268450c60ca4bc3b2ada5d4a

* always show border

* add border to zoom buttons

* update spacing

* update colors

* allow connecting to entire node

* fix pull conn active

* two line names

* apply select to all lines

* increase input margin

* override target pos

* reset conn after pull

* fix types

* update orientation

* fix up connectors snapping

* hide arrow on pull

* update overrides for connectors

* change text

* update pull colors

* set to 1 line when selected

* fix executions bug

* build

* refactor node component

* remove comment

* refactor more

* remove prop

* fix build issue

* fix input drag bug in executions

* reset offset

* update select background

* handle issue when endpoints are not set

* fix connection aborted issue

* add try catch to help show errors

* wrap bind with try/catch

* set default styles

* reset pos despite zoom

* add more checks

* clean up impl

* update icon

* handle unknown types

* hide items on init

* fix importing unknown types with credentials

* change opacity

* push up item label

* update color

* update label class and colors

* add to drop distance

* fix z-index to match node

* disable eslint

* fix lasso tool selection

* update background color

* update waiting state

* update tooltip positions

* update wait node border

* fix selection bug mostly

* if selected, move above other nodes

* add line through disabled nodes

* remove node color option

* move label above connection

* success color for line through

* update options index

* hide waiting icon when disabled

* fix gmail icon

* refactor icons

* clear execution data on disable/delete

* fix selected node

* fix executing behavior

* optional __meta

* set grid size

* remove default color

* remove node color

* add comments

* comments

* add comments

* remove empty space

* update comment

* refactor uuids

* fix type issue

* Revert "fix type issue"

9523b34f9604f75253ae0631f29fc27267a99d78

* Revert "fix type issue"

9523b34f9604f75253ae0631f29fc27267a99d78

* Revert "refactor uuids"

07f6848065cb9a98475fddb8330846106f9e70ad

* fix build issues

* refactor

* update uuid

* child nodes

* skip nodes behind when pushing in loop

* shift output icon for switch node

* don't show output if waiting

* waiting on init

* build

* change to bezier

* implement plus

* revert connector change

* add bezier type

* fix snapping

* clean up impl

* refactor func

* make const

* rename type

* refactor to simplify

* Revert "refactor to simplify"

2db0ed504c752c33de975370d86a83a04ffcda14

* enable flowchart mode

* clean up flowchart type

* refactor type

* merge types

* configure curviness

* set in localstorage

* fix straight line arrow bug

* show arrow when pulling

* refactor / simplify

* fix target gap in bezier

* refactor target gap

* add comments

* add comment

* fix dragging connections

* fix bug when moving connection

* update comment

* rename file

* update values

* update minor

* update straight line box

* clean up conn types

* clean up z-indexes

* move color filters to node icon

* update background color

* update to use grid size value

* fix endpoint offsets

* set yspan range lower

* remove overlays when moving conn

* prevent unwanted connections

* fix messed up connections

* remove console log

* clear execution issues on workflow run

* update corner radius

* fix drag/delete bug

* increase offset

* update disabled state

* hide if endpoint has conn

* node insert on click

* simplify impl

* fix z-indexes

* add drop hover message

* address comments

* refactor

* refactor func

* remove drop conn overlay

* update messagE

* update colors

* remove console log

* rebuild impl

* add stalk

* fix disabled state

* fix dragging bug

* remove node selection

* disable plus in executions

* add success output to talk

* add success output

* set output

* fix bug

* fix switch size

* update size for 3 output nodes

* update loops

* fix bug when node is renamed

* set final values

* update loop behavior

* update comment

* hide output labels on multi outputs

* center output

* fix flicker when deleting nodes

* fix dragging space

* increase stalk if if

* more type checks

* rename event source

* rename event source

* support touch when dragging

* offset center

* center plus

* fix repaint behavior

* remove extending output

* add offset to switch

* fix merge node bug

* rename endpoint

* refactor css, fix merge bug

* fix unrelated issues

* space out

* remove flowchart type

* rename constant key

* clean up css

* rename var

* fix more type issues

* update types

* fix spacing

* simplify vertical offset

* refactor css

* add license

* update css

* clean up scss

* update to use css var

* clean up code

* update params

* show message

* fix plus position

* fix merge node bugs

* hide box when not dragging and hidden

* fix potential issue

* address comments

packages/editor-ui/src/views/canvasHelpers.ts

@@ -1,5 +1,5 @@
 import { getStyleTokenValue } from "@/components/helpers";
-import { START_NODE_TYPE } from "@/constants";
+import { NODE_OUTPUT_DEFAULT_KEY, START_NODE_TYPE } from "@/constants";
 import { IBounds, INodeUi, IZoomConfig, XYPosition } from "@/Interface";
 import { Connection, Endpoint, Overlay, OverlaySpec, PaintStyle } from "jsplumb";
 import {
@@ -57,11 +57,13 @@ export const CONNECTOR_FLOWCHART_TYPE = ['N8nCustom', {
 	getEndpointOffset(endpoint: Endpoint) {
 		const indexOffset = 10; // stub offset between different endpoints of same node
 		const index = endpoint && endpoint.__meta ? endpoint.__meta.index : 0;
+		const totalEndpoints = endpoint && endpoint.__meta ? endpoint.__meta.totalEndpoints : 0;
 
 		const outputOverlay = getOverlay(endpoint, OVERLAY_OUTPUT_NAME_LABEL);
 		const labelOffset = outputOverlay && outputOverlay.label && outputOverlay.label.length > 1 ? 10 : 0;
+		const outputsOffset = totalEndpoints > 3 ? 24 : 0; // avoid intersecting plus
 
-		return index * indexOffset + labelOffset;
+		return index * indexOffset + labelOffset + outputsOffset;
 	},
 }];
 
@@ -112,23 +114,9 @@ export const CONNECTOR_ARROW_OVERLAYS: OverlaySpec[] = [
 	],
 ];
 
-export const CONNECTOR_DROP_NODE_OVERLAY: OverlaySpec[] = [
-	[
-		'Label',
-		{
-			id: OVERLAY_DROP_NODE_ID,
-			label: 'Drop connection<br />to add node',
-			cssClass: 'drop-add-node-label',
-			location: 0.5,
-			visible: true,
-		},
-	],
-];
-
-
 export const ANCHOR_POSITIONS: {
 	[key: string]: {
-		[key: number]: string[] | number[][];
+		[key: number]: number[][];
 	}
 } = {
 	input: {
@@ -511,20 +499,33 @@ export const getOutputSummary = (data: ITaskData[], nodeConnections: NodeInputCo
 		}
 
 		run.data.main.forEach((output: INodeExecutionData[] | null, i: number) => {
-			if (!nodeConnections[i]) {
+			const sourceOutputIndex = i;
+
+			if (!outputMap[sourceOutputIndex]) {
+				outputMap[sourceOutputIndex] = {};
+			}
+
+			if (!outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY]) {
+				outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY] = {};
+				outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY][0] = {
+					total: 0,
+					iterations: 0,
+				};
+			}
+
+			const defaultOutput = outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY][0];
+			defaultOutput.total += output ? output.length : 0;
+			defaultOutput.iterations += output ? 1 : 0;
+
+			if (!nodeConnections[sourceOutputIndex]) {
 				return;
 			}
 
-			nodeConnections[i]
+			nodeConnections[sourceOutputIndex]
 				.map((connection: IConnection) => {
-					const sourceOutputIndex = i;
 					const targetNodeName = connection.node;
 					const targetInputIndex = connection.index;
 
-					if (!outputMap[sourceOutputIndex]) {
-						outputMap[sourceOutputIndex] = {};
-					}
-
 					if (!outputMap[sourceOutputIndex][targetNodeName]) {
 						outputMap[sourceOutputIndex][targetNodeName] = {};
 					}
@@ -554,6 +555,13 @@ export const resetConnection = (connection: Connection) => {
 	}
 };
 
+export const getRunItemsLabel = (output: {total: number, iterations: number}): string => {
+	let label = `${output.total}`;
+	label = output.total > 1 ? `${label} items` : `${label} item`;
+	label = output.iterations > 1 ? `${label} total` : label;
+	return label;
+};
+
 export const addConnectionOutputSuccess = (connection: Connection, output: {total: number, iterations: number}) => {
 	connection.setPaintStyle(CONNECTOR_PAINT_STYLE_SUCCESS);
 	if (connection.canvas) {
@@ -564,15 +572,11 @@ export const addConnectionOutputSuccess = (connection: Connection, output: {tota
 		connection.removeOverlay(OVERLAY_RUN_ITEMS_ID);
 	}
 
-	let label = `${output.total}`;
-	label = output.total > 1 ? `${label} items` : `${label} item`;
-	label = output.iterations > 1 ? `${label} total` : label;
-
 	connection.addOverlay([
 		'Label',
 		{
 			id: OVERLAY_RUN_ITEMS_ID,
-			label: `<span>${label}</span>`,
+			label: `<span>${getRunItemsLabel(output)}</span>`,
 			cssClass: 'connection-run-items-label',
 			location: .5,
 		},