diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index 3fa90ea296..555303ce6a 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -24,6 +24,7 @@ const emit = defineEmits<{
'create:connection': [connection: Connection];
'create:connection:end': [connection: Connection];
'create:connection:cancelled': [handle: ConnectStartEvent];
+ 'click:connection:add': [connection: Connection];
'click:pane': [position: XYPosition];
}>();
@@ -123,6 +124,10 @@ function onDeleteConnection(connection: Connection) {
emit('delete:connection', connection);
}
+function onClickConnectionAdd(connection: Connection) {
+ emit('click:connection:add', connection);
+}
+
function onRunNode(id: string) {
emit('run:node', id);
}
@@ -190,6 +195,7 @@ function onClickPane(event: MouseEvent) {
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
index c0d1f1e55f..3e7ad613c6 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -5,8 +5,11 @@ import { BaseEdge, EdgeLabelRenderer, getBezierPath } from '@vue-flow/core';
import CanvasEdgeToolbar from './CanvasEdgeToolbar.vue';
import { computed, useCssModule } from 'vue';
import type { CanvasConnectionData } from '@/types';
+import { NodeConnectionType } from 'n8n-workflow';
+import { isValidNodeConnectionType } from '@/utils/typeGuards';
const emit = defineEmits<{
+ add: [connection: Connection];
delete: [connection: Connection];
}>();
@@ -18,6 +21,12 @@ const props = defineProps();
const $style = useCssModule();
+const connectionType = computed(() =>
+ isValidNodeConnectionType(props.data.source.type)
+ ? props.data.source.type
+ : NodeConnectionType.Main,
+);
+
const isFocused = computed(() => props.selected || props.hovered);
const status = computed(() => props.data.status);
@@ -86,6 +95,10 @@ const connection = computed(() => ({
targetHandle: props.targetHandleId,
}));
+function onAdd() {
+ emit('add', connection.value);
+}
+
function onDelete() {
emit('delete', connection.value);
}
@@ -105,7 +118,13 @@ function onDelete() {
:label-show-bg="false"
/>
-
+
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
index c7d287aa4b..acd164f5fe 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdgeToolbar.vue
@@ -1,11 +1,17 @@