feat(editor): Open node creator when cancelling a connection in new canvas (no-changelog) (#9978)

packages/editor-ui/src/components/canvas/Canvas.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { CanvasConnection, CanvasElement } from '@/types';
+import type { CanvasConnection, CanvasElement, ConnectStartEvent } from '@/types';
 import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
@@ -20,7 +20,10 @@ const emit = defineEmits<{
 	'run:node': [id: string];
 	'delete:node': [id: string];
 	'delete:connection': [connection: Connection];
+	'create:connection:start': [handle: ConnectStartEvent];
 	'create:connection': [connection: Connection];
+	'create:connection:end': [connection: Connection];
+	'create:connection:cancelled': [handle: ConnectStartEvent];
 	'click:pane': [position: XYPosition];
 }>();
 
@@ -80,16 +83,48 @@ function onDeleteNode(id: string) {
 	emit('delete:node', id);
 }
 
-function onRunNode(id: string) {
-	emit('run:node', id);
+/**
+ * Connections
+ */
+
+const connectionCreated = ref(false);
+const connectionEventData = ref<ConnectStartEvent | Connection>();
+
+const isConnection = (data: ConnectStartEvent | Connection | undefined): data is Connection =>
+	!!data && connectionCreated.value;
+
+const isConnectionCancelled = (
+	data: ConnectStartEvent | Connection | undefined,
+): data is ConnectStartEvent => !!data && !connectionCreated.value;
+
+function onConnectStart(handle: ConnectStartEvent) {
+	emit('create:connection:start', handle);
+
+	connectionEventData.value = handle;
+	connectionCreated.value = false;
+}
+
+function onConnect(connection: Connection) {
+	emit('create:connection', connection);
+
+	connectionEventData.value = connection;
+	connectionCreated.value = true;
+}
+
+function onConnectEnd() {
+	if (isConnection(connectionEventData.value)) {
+		emit('create:connection:end', connectionEventData.value);
+	} else if (isConnectionCancelled(connectionEventData.value)) {
+		emit('create:connection:cancelled', connectionEventData.value);
+	}
 }
 
 function onDeleteConnection(connection: Connection) {
 	emit('delete:connection', connection);
 }
 
-function onConnect(...args: unknown[]) {
-	emit('create:connection', args[0] as Connection);
+function onRunNode(id: string) {
+	emit('run:node', id);
 }
 
 function onKeyDown(e: KeyboardEvent) {
@@ -135,8 +170,10 @@ function onClickPane(event: MouseEvent) {
 		@selection-drag-stop="onSelectionDragStop"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
-		@pane-click="onClickPane"
+		@connect-start="onConnectStart"
 		@connect="onConnect"
+		@connect-end="onConnectEnd"
+		@pane-click="onClickPane"
 	>
 		<template #node-canvas-node="canvasNodeProps">
 			<CanvasNode

packages/editor-ui/src/types/canvas.ts

@@ -97,3 +97,5 @@ export interface CanvasNodeInjectionData {
 export interface CanvasNodeHandleInjectionData {
 	label: Ref<string | undefined>;
 }
+
+export type ConnectStartEvent = { handleId: string; handleType: string; nodeId: string };

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

@@ -27,13 +27,14 @@ import type {
 	XYPosition,
 } from '@/Interface';
 import type { Connection } from '@vue-flow/core';
-import type { CanvasElement } from '@/types';
+import type { CanvasElement, ConnectStartEvent } from '@/types';
 import {
 	CANVAS_AUTO_ADD_MANUAL_TRIGGER_EXPERIMENT,
 	EnterpriseEditionFeature,
 	MAIN_HEADER_TABS,
 	MODAL_CANCEL,
 	MODAL_CONFIRM,
+	NODE_CREATOR_OPEN_SOURCES,
 	PLACEHOLDER_EMPTY_WORKFLOW_ID,
 	VIEWS,
 } from '@/constants';
@@ -75,6 +76,7 @@ import { useTagsStore } from '@/stores/tags.store';
 import { usePushConnectionStore } from '@/stores/pushConnection.store';
 import { useNDVStore } from '@/stores/ndv.store';
 import { getNodeViewTab } from '@/utils/canvasUtils';
+import { parseCanvasConnectionHandleString } from '@/utils/canvasUtilsV2';
 import CanvasStopCurrentExecutionButton from '@/components/canvas/elements/buttons/CanvasStopCurrentExecutionButton.vue';
 import CanvasStopWaitingForWebhookButton from '@/components/canvas/elements/buttons/CanvasStopWaitingForWebhookButton.vue';
 
@@ -321,7 +323,7 @@ async function runAutoAddManualTriggerExperiment() {
 }
 
 function resetWorkspace() {
-	onToggleNodeCreator({ createNodeActive: false });
+	onOpenNodeCreator({ createNodeActive: false });
 	nodeCreatorStore.setShowScrim(false);
 
 	// Make sure that if there is a waiting test-webhook that it gets removed
@@ -488,6 +490,19 @@ function onCreateConnection(connection: Connection) {
 	createConnection(connection);
 }
 
+function onCreateConnectionCancelled(event: ConnectStartEvent) {
+	const { type, index } = parseCanvasConnectionHandleString(event.handleId);
+	setTimeout(() => {
+		nodeCreatorStore.openNodeCreatorForConnectingNode({
+			index,
+			endpointUuid: event.handleId,
+			eventSource: NODE_CREATOR_OPEN_SOURCES.NODE_CONNECTION_DROP,
+			outputType: type,
+			sourceId: event.nodeId,
+		});
+	});
+}
+
 function onDeleteConnection(connection: Connection) {
 	deleteConnection(connection, { trackHistory: true });
 }
@@ -527,11 +542,11 @@ async function onSwitchActiveNode(nodeName: string) {
 	setNodeActiveByName(nodeName);
 }
 
-async function onOpenConnectionNodeCreator(node: string, connectionType: NodeConnectionType) {
+async function onOpenSelectiveNodeCreator(node: string, connectionType: NodeConnectionType) {
 	nodeCreatorStore.openSelectiveNodeCreator({ node, connectionType });
 }
 
-function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
+function onOpenNodeCreator(options: ToggleNodeCreatorOptions) {
 	nodeCreatorStore.openNodeCreator(options);
 }
 
@@ -959,6 +974,7 @@ onBeforeUnmount(() => {
 		@run:node="onRunWorkflowToNode"
 		@delete:node="onDeleteNode"
 		@create:connection="onCreateConnection"
+		@create:connection:cancelled="onCreateConnectionCancelled"
 		@delete:connection="onDeleteConnection"
 		@click:pane="onClickPane"
 	>
@@ -983,7 +999,7 @@ onBeforeUnmount(() => {
 				v-if="!isReadOnlyRoute && !isReadOnlyEnvironment"
 				:create-node-active="uiStore.isCreateNodeActive"
 				:node-view-scale="1"
-				@toggle-node-creator="onToggleNodeCreator"
+				@toggle-node-creator="onOpenNodeCreator"
 				@add-nodes="onAddNodesAndConnections"
 			/>
 		</Suspense>
@@ -996,7 +1012,7 @@ onBeforeUnmount(() => {
 				@value-changed="onRenameNode"
 				@stop-execution="onStopExecution"
 				@switch-selected-node="onSwitchActiveNode"
-				@open-connection-node-creator="onOpenConnectionNodeCreator"
+				@open-connection-node-creator="onOpenSelectiveNodeCreator"
 			/>
 			<!--
 				:renaming="renamingActive"