add connection actions

packages/editor-ui/src/views/NodeView.vue

@@ -132,7 +132,7 @@ import NodeCreator from '@/components/NodeCreator/NodeCreator.vue';
 import NodeSettings from '@/components/NodeSettings.vue';
 import RunData from '@/components/RunData.vue';
 
-import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays } from './helpers';
+import { getLeftmostTopNode, getWorkflowCorners, scaleSmaller, scaleBigger, scaleReset, addOrRemoveMidpointArrow, addEndpointArrow, getDefaultOverlays, getIcon } from './helpers';
 
 import mixins from 'vue-typed-mixins';
 import { v4 as uuidv4} from 'uuid';
@@ -1342,7 +1342,7 @@ export default mixins(
 				});
 
 				this.instance.bind('connection', (info: OnConnectionBindInfo) => {
-					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: true}]);
+					info.connection.setConnector(['Flowchart', { cornerRadius: 8, stub: JSPLUMB_FLOWCHART_STUB, gap: 5, alwaysRespectStubs: false}]);
 
 					addEndpointArrow(info.connection);
 					addOrRemoveMidpointArrow(info.connection);
@@ -1368,14 +1368,24 @@ export default mixins(
 							if (timer !== undefined) {
 								clearTimeout(timer);
 							}
-							const overlay = info.connection.getOverlay('remove-connection');
+							const overlay = info.connection.getOverlay('connection-actions');
 							overlay.setVisible(true);
+
+							const arrow = info.connection.getOverlay('midpoint-arrow');
+							if (arrow) {
+								arrow.setVisible(false);
+							}
 						});
 						info.connection.bind('mouseout', (connection: IConnection) => {
 							timer = setTimeout(() => {
-								const overlay = info.connection.getOverlay('remove-connection');
+								const overlay = info.connection.getOverlay('connection-actions');
 								overlay.setVisible(false);
 								timer = undefined;
+
+								const arrow = info.connection.getOverlay('midpoint-arrow');
+								if (arrow) {
+									arrow.setVisible(true);
+								}
 							}, 500);
 						});
 
@@ -1383,13 +1393,13 @@ export default mixins(
 						info.connection.addOverlay([
 							'Label',
 							{
-								id: 'remove-connection',
+								id: 'connection-actions',
-								label: '<span class="delete-connection clickable" title="Delete Connection">x</span>',
+								label: `<div>${getIcon('plus')}</div> <div>${getIcon('trash')}</div>`,
-								cssClass: 'remove-connection-label',
+								cssClass: 'connection-actions',
-								visible: false,
+								visible: true,
 								events: {
 									mousedown: () => {
-										this.__removeConnectionByConnectionInfo(info, true);
+										// this.__removeConnectionByConnectionInfo(info, true);
 									},
 								},
 							},
@@ -2421,4 +2431,28 @@ export default mixins(
 	}
 }
 
+.connection-actions {
+	> div {
+		border: 2px solid var(--color-text-base);
+		background-color: var(--color-background-xlight);
+		font-size: var(--font-size-2xs);
+		border-radius: var(--border-radius-base);
+		height: var(--spacing-l);
+		width: var(--spacing-l);
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+
+		&:first-child {
+			margin-right: var(--spacing-xs);
+		}
+
+		&:hover {
+			border-color: var(--color-primary);
+			color: var(--color-primary);
+		}
+	}
+}
+
 </style>

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

@@ -127,7 +127,7 @@ export const addEndpointArrow = (connection: Connection)  => {
 export const addOrRemoveMidpointArrow = (connection: Connection) => {
 	const sourceEndpoint = connection.endpoints[0];
 	const targetEndpoint = connection.endpoints[1];
-	const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= (targetEndpoint.anchor.lastReturnValue[0] - JSPLUMB_FLOWCHART_STUB);
+	const requiresArrow = sourceEndpoint.anchor.lastReturnValue[0] >= targetEndpoint.anchor.lastReturnValue[0];
 
 	const hasArrow = !!connection.getOverlay('midpoint-arrow');
 
@@ -154,3 +154,15 @@ export const addOrRemoveMidpointArrow = (connection: Connection) => {
 		},
 	]);
 };
+
+export const getIcon = (name: string): string => {
+	if (name === 'trash') {
+		return `<svg data-v-66d5c7e2="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-trash fa-w-14 Icon__medium_ctPPJ"><path data-v-66d5c7e2="" fill="currentColor" d="M432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.72 23.72 0 0 0-21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16zM53.2 467a48 48 0 0 0 47.9 45h245.8a48 48 0 0 0 47.9-45L416 128H32z" class=""></path></svg>`;
+	}
+
+	if (name === 'plus') {
+		return `<svg data-v-301ed208="" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="svg-inline--fa fa-plus fa-w-14 Icon__medium_ctPPJ"><path data-v-301ed208="" fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" class=""></path></svg>`;
+	}
+
+	return '';
+};