feat(editor): Overhaul node insert position computation in new canvas (no-changelog) (#10637)

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

@@ -34,7 +34,11 @@ import type {
 	ToggleNodeCreatorOptions,
 	XYPosition,
 } from '@/Interface';
-import type { Connection, ViewportTransform } from '@vue-flow/core';
+import type {
+	Connection,
+	ViewportTransform,
+	XYPosition as VueFlowXYPosition,
+} from '@vue-flow/core';
 import type {
 	CanvasConnectionCreateData,
 	CanvasEventBusEvents,
@@ -738,12 +742,20 @@ function onRevertCreateConnection({ connection }: { connection: [IConnection, IC
 	revertCreateConnection(connection);
 }
 
-function onCreateConnectionCancelled(event: ConnectStartEvent, mouseEvent?: MouseEvent) {
+function onCreateConnectionCancelled(
+	event: ConnectStartEvent,
+	position: VueFlowXYPosition,
+	mouseEvent?: MouseEvent,
+) {
 	const preventDefault = (mouseEvent?.target as HTMLElement).classList?.contains('clickable');
 	if (preventDefault) {
 		return;
 	}
 
+	uiStore.lastInteractedWithNodeId = event.nodeId;
+	uiStore.lastInteractedWithNodeHandle = event.handleId;
+	uiStore.lastCancelledConnectionPosition = [position.x, position.y];
+
 	setTimeout(() => {
 		nodeCreatorStore.openNodeCreatorForConnectingNode({
 			connection: {
@@ -874,11 +886,15 @@ async function onOpenNodeCreatorForTriggerNodes(source: NodeCreatorOpenSource) {
 }
 
 function onOpenNodeCreatorFromCanvas(source: NodeCreatorOpenSource) {
-	onOpenNodeCreator({ createNodeActive: true, source });
+	onToggleNodeCreator({ createNodeActive: true, source });
 }
 
-function onOpenNodeCreator(options: ToggleNodeCreatorOptions) {
-	nodeCreatorStore.openNodeCreator(options);
+function onToggleNodeCreator(options: ToggleNodeCreatorOptions) {
+	nodeCreatorStore.setNodeCreatorState(options);
+
+	if (!options.createNodeActive && !options.hasAddedNodes) {
+		uiStore.resetLastInteractedWith();
+	}
 }
 
 function onCreateSticky() {
@@ -1378,7 +1394,6 @@ function selectNodes(ids: string[]) {
 
 function onClickPane(position: CanvasNode['position']) {
 	lastClickPosition.value = [position.x, position.y];
-	canvasStore.newNodeInsertPosition = [position.x, position.y];
 	uiStore.isCreateNodeActive = false;
 }
 
@@ -1563,7 +1578,7 @@ onDeactivated(() => {
 				v-if="!isCanvasReadOnly"
 				:create-node-active="uiStore.isCreateNodeActive"
 				:node-view-scale="viewportTransform.zoom"
-				@toggle-node-creator="onOpenNodeCreator"
+				@toggle-node-creator="onToggleNodeCreator"
 				@add-nodes="onAddNodesAndConnections"
 			/>
 		</Suspense>