✨ 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/NodeView.vue

@@ -108,11 +108,11 @@
 <script lang="ts">
 import Vue from 'vue';
 import {
-	Connection, Endpoint,
+	Connection, Endpoint, N8nPlusEndpoint,
 } from 'jsplumb';
 import { MessageBoxInputData } from 'element-ui/types/message-box';
 import { jsPlumb, OnConnectionBindInfo } from 'jsplumb';
-import { NODE_NAME_PREFIX, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
+import { NODE_NAME_PREFIX, NODE_OUTPUT_DEFAULT_KEY, PLACEHOLDER_EMPTY_WORKFLOW_ID, START_NODE_TYPE, WEBHOOK_NODE_TYPE, WORKFLOW_OPEN_MODAL_KEY } from '@/constants';
 import { copyPaste } from '@/components/mixins/copyPaste';
 import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -168,6 +168,7 @@ import {
 } from '../Interface';
 import { mapGetters } from 'vuex';
 import '../plugins/N8nCustomConnectorType';
+import '../plugins/PlusEndpointType';
 
 export default mixins(
 	copyPaste,
@@ -360,7 +361,7 @@ export default mixins(
 				this.$externalHooks().run('execution.open', { workflowId: data.workflowData.id, workflowName: data.workflowData.name, executionId });
 				this.$telemetry.track('User opened read-only execution', { workflow_id: data.workflowData.id, execution_mode: data.mode, execution_finished: data.finished });
 
-				if (data.finished !== true && data.data.resultData.error) {
+				if (data.finished !== true && data && data.data && data.data.resultData && data.data.resultData.error) {
 					// Check if any node contains an error
 					let nodeErrorFound = false;
 					if (data.data.resultData.runData) {
@@ -1519,7 +1520,6 @@ export default mixins(
 						this.pullConnActive = true;
 						this.newNodeInsertPosition = null;
 						CanvasHelpers.resetConnection(connection);
-						CanvasHelpers.addOverlays(connection, CanvasHelpers.CONNECTOR_DROP_NODE_OVERLAY);
 						const nodes = [...document.querySelectorAll('.node-default')];
 
 						const onMouseMove = (e: MouseEvent | TouchEvent) => {
@@ -1579,6 +1579,17 @@ export default mixins(
 						console.error(e); // eslint-disable-line no-console
 					}
 				});
+
+				// @ts-ignore
+				this.instance.bind(('plusEndpointClick'), (endpoint: Endpoint) => {
+					if (endpoint && endpoint.__meta) {
+						insertNodeAfterSelected({
+							sourceId: endpoint.__meta.nodeId,
+							index: endpoint.__meta.index,
+							eventSource: 'plus_endpoint',
+						});
+					}
+				});
 			},
 			async newWorkflow (): Promise<void> {
 				await this.resetWorkspace();
@@ -1715,8 +1726,13 @@ export default mixins(
 				// it visibly stays behind free floating without a connection.
 				connection.removeOverlays();
 
+				const sourceEndpoint = connection.endpoints && connection.endpoints[0];
 				this.pullConnActiveNodeName = null; // prevent new connections when connectionDetached is triggered
 				this.instance.deleteConnection(connection); // on delete, triggers connectionDetached event which applies mutation to store
+				if (sourceEndpoint) {
+					const endpoints = this.instance.getEndpoints(sourceEndpoint.elementId);
+					endpoints.forEach((endpoint: Endpoint) => endpoint.repaint()); // repaint both circle and plus endpoint
+				}
 			},
 			__removeConnectionByConnectionInfo (info: OnConnectionBindInfo, removeVisualConnection = false) {
 				// @ts-ignore
@@ -1808,6 +1824,16 @@ export default mixins(
 					return uuids[0] === sourceEndpoint && uuids[1] === targetEndpoint;
 				});
 			},
+			getJSPlumbEndpoints (nodeName: string): Endpoint[] {
+				const nodeIndex = this.getNodeIndex(nodeName);
+				const nodeId = `${NODE_NAME_PREFIX}${nodeIndex}`;
+				return this.instance.getEndpoints(nodeId);
+			},
+			getPlusEndpoint (nodeName: string, outputIndex: number): Endpoint | undefined {
+				const endpoints = this.getJSPlumbEndpoints(nodeName);
+				// @ts-ignore
+				return endpoints.find((endpoint: Endpoint) => endpoint.type === 'N8nPlus' && endpoint.__meta && endpoint.__meta.index === outputIndex);
+			},
 			getIncomingOutgoingConnections(nodeName: string): {incoming: Connection[], outgoing: Connection[]} {
 				const name = `${NODE_NAME_PREFIX}${this.$store.getters.getNodeIndex(nodeName)}`;
 				// @ts-ignore
@@ -1847,33 +1873,47 @@ export default mixins(
 					outgoing.forEach((connection: Connection) => {
 						CanvasHelpers.resetConnection(connection);
 					});
+					const endpoints = this.getJSPlumbEndpoints(sourceNodeName);
+					endpoints.forEach((endpoint: Endpoint) => {
+						// @ts-ignore
+						if (endpoint.type === 'N8nPlus') {
+							(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
+						}
+					});
 
 					return;
 				}
 
 				const nodeConnections = (this.$store.getters.outgoingConnectionsByNodeName(sourceNodeName) as INodeConnections).main;
-				if (!nodeConnections) {
-					return;
-				}
-
-				const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections);
+				const outputMap = CanvasHelpers.getOutputSummary(data, nodeConnections || []);
 
 				Object.keys(outputMap).forEach((sourceOutputIndex: string) => {
 					Object.keys(outputMap[sourceOutputIndex]).forEach((targetNodeName: string) => {
 						Object.keys(outputMap[sourceOutputIndex][targetNodeName]).forEach((targetInputIndex: string) => {
-							const connection = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
+							if (targetNodeName) {
+								const connection = this.getJSPlumbConnection(sourceNodeName, parseInt(sourceOutputIndex, 10), targetNodeName, parseInt(targetInputIndex, 10));
 
-							if (!connection) {
-								return;
+								if (connection) {
+									const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
+									if (!output || !output.total) {
+										CanvasHelpers.resetConnection(connection);
+									}
+									else {
+										CanvasHelpers.addConnectionOutputSuccess(connection, output);
+									}
+								}
 							}
 
-							const output = outputMap[sourceOutputIndex][targetNodeName][targetInputIndex];
-							if (!output || !output.total) {
-								CanvasHelpers.resetConnection(connection);
-								return;
+							const endpoint = this.getPlusEndpoint(sourceNodeName, parseInt(sourceOutputIndex, 10));
+							if (endpoint && endpoint.endpoint) {
+								const output = outputMap[sourceOutputIndex][NODE_OUTPUT_DEFAULT_KEY][0];
+								if (output && output.total > 0) {
+									(endpoint.endpoint as N8nPlusEndpoint).setSuccessOutput(CanvasHelpers.getRunItemsLabel(output));
+								}
+								else {
+									(endpoint.endpoint as N8nPlusEndpoint).clearSuccessOutput();
+								}
 							}
-
-							CanvasHelpers.addConnectionOutputSuccess(connection, output);
 						});
 					});
 				});
@@ -1911,6 +1951,7 @@ export default mixins(
 					}
 				}
 
+				let waitForNewConnection = false;
 				// connect nodes before/after deleted node
 				const nodeType: INodeTypeDescription | null = this.$store.getters.nodeType(node.type, node.typeVersion);
 				if (nodeType && nodeType.outputs.length === 1
@@ -1920,6 +1961,7 @@ export default mixins(
 						const conn1 = incoming[0];
 						const conn2 = outgoing[0];
 						if (conn1.__meta && conn2.__meta) {
+							waitForNewConnection = true;
 							const sourceNodeName = conn1.__meta.sourceNodeName;
 							const sourceNodeOutputIndex = conn1.__meta.sourceOutputIndex;
 							const targetNodeName = conn2.__meta.targetNodeName;
@@ -1927,7 +1969,12 @@ export default mixins(
 
 							setTimeout(() => {
 								this.connectTwoNodes(sourceNodeName, sourceNodeOutputIndex, targetNodeName, targetNodeOuputIndex);
-							}, 100);
+
+								if (waitForNewConnection) {
+									this.instance.setSuspendDrawing(false, true);
+									waitForNewConnection = false;
+								}
+							}, 100); // just to make it clear to users that this is a new connection
 						}
 					}
 				}
@@ -1952,8 +1999,10 @@ export default mixins(
 					this.$store.commit('removeNode', node);
 					this.$store.commit('clearNodeExecutionData', node.name);
 
-					// Now it can draw again
-					this.instance.setSuspendDrawing(false, true);
+					if (!waitForNewConnection) {
+						// Now it can draw again
+						this.instance.setSuspendDrawing(false, true);
+					}
 
 					// Remove node from selected index if found in it
 					this.$store.commit('removeNodeFromSelection', node);
@@ -2603,7 +2652,7 @@ export default mixins(
 		color: var(--color-success);
 	}
 
-	> span.floating {
+	.floating {
 		position: absolute;
 		top: -22px;
 		transform: translateX(-50%);