fix(editor): Fix node positions update event in new canvas (no-changelog) (#10528)

packages/editor-ui/src/components/canvas/Canvas.spec.ts

@@ -85,7 +85,7 @@ describe('Canvas', () => {
 		expect(container.querySelector(`[data-id="${connections[0].id}"]`)).toBeInTheDocument();
 	});
 
-	it('should handle node drag stop event', async () => {
+	it('should handle `update:nodes:position` event', async () => {
 		const nodes = [createCanvasNodeElement()];
 		const { container, emitted } = renderComponent({
 			props: {
@@ -99,14 +99,47 @@ describe('Canvas', () => {
 		await fireEvent.mouseDown(node, { view: window });
 		await fireEvent.mouseMove(node, {
 			view: window,
-			clientX: 96,
-			clientY: 96,
+			clientX: 20,
+			clientY: 20,
+		});
+		await fireEvent.mouseMove(node, {
+			view: window,
+			clientX: 40,
+			clientY: 40,
 		});
 		await fireEvent.mouseUp(node, { view: window });
 
-		// Snap to 20px grid: 96 -> 100
 		expect(emitted()['update:nodes:position']).toEqual([
-			[[{ id: '1', position: { x: 100, y: 100 } }]],
+			[
+				[
+					{
+						id: '1',
+						type: 'position',
+						dragging: true,
+						from: {
+							x: 100,
+							y: 100,
+							z: 0,
+						},
+						position: { x: 80, y: 80 },
+					},
+				],
+			],
+			[
+				[
+					{
+						id: '1',
+						type: 'position',
+						dragging: true,
+						from: {
+							x: 100,
+							y: 100,
+							z: 0,
+						},
+						position: { x: 120, y: 120 },
+					},
+				],
+			],
 		]);
 	});
 });

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

@@ -2,10 +2,11 @@
 import type { CanvasConnection, CanvasNode, CanvasNodeMoveEvent, ConnectStartEvent } from '@/types';
 import type {
 	EdgeMouseEvent,
-	NodeDragEvent,
 	Connection,
 	XYPosition,
 	ViewportTransform,
+	NodeChange,
+	NodePositionChange,
 } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
@@ -134,11 +135,7 @@ function onClickNodeAdd(id: string, handle: string) {
 	emit('click:node:add', id, handle);
 }
 
-function onNodeDragStop(e: NodeDragEvent) {
-	onUpdateNodesPosition(e.nodes.map((node) => ({ id: node.id, position: node.position })));
-}
-
-function onUpdateNodesPosition(events: CanvasNodeMoveEvent[]) {
+function onUpdateNodesPosition(events: NodePositionChange[]) {
 	emit('update:nodes:position', events);
 }
 
@@ -146,8 +143,14 @@ function onUpdateNodePosition(id: string, position: XYPosition) {
 	emit('update:node:position', id, position);
 }
 
-function onSelectionDragStop(e: NodeDragEvent) {
-	onNodeDragStop(e);
+function onNodesChange(events: NodeChange[]) {
+	const isPositionChangeEvent = (event: NodeChange): event is NodePositionChange =>
+		event.type === 'position' && 'position' in event;
+
+	const positionChangeEndEvents = events.filter(isPositionChangeEvent);
+	if (positionChangeEndEvents.length > 0) {
+		onUpdateNodesPosition(positionChangeEndEvents);
+	}
 }
 
 function onSetNodeActive(id: string) {
@@ -414,8 +417,6 @@ provide(CanvasKey, {
 		:max-zoom="4"
 		:class="[$style.canvas, { [$style.visible]: paneReady }]"
 		data-test-id="canvas"
-		@node-drag-stop="onNodeDragStop"
-		@selection-drag-stop="onSelectionDragStop"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
 		@connect-start="onConnectStart"
@@ -424,6 +425,7 @@ provide(CanvasKey, {
 		@pane-click="onClickPane"
 		@contextmenu="onOpenContextMenu"
 		@viewport-change="onViewportChange"
+		@nodes-change="onNodesChange"
 	>
 		<template #node-canvas-node="canvasNodeProps">
 			<Node