feat(editor): Compute node position and connections when creating new nodes in new canvas (no-changelog) (#9830)

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { EdgeMouseEvent, NodeDragEvent, Connection } from '@vue-flow/core';
+import type { EdgeMouseEvent, NodeDragEvent, Connection, XYPosition } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
@@ -13,11 +13,13 @@ const $style = useCssModule();
 
 const emit = defineEmits<{
 	'update:modelValue': [elements: CanvasElement[]];
-	'update:node:position': [id: string, position: { x: number; y: number }];
+	'update:node:position': [id: string, position: XYPosition];
 	'update:node:active': [id: string];
+	'update:node:selected': [id?: string];
 	'delete:node': [id: string];
 	'delete:connection': [connection: Connection];
 	'create:connection': [connection: Connection];
+	'click:pane': [position: XYPosition];
 }>();
 
 const props = withDefaults(
@@ -35,7 +37,9 @@ const props = withDefaults(
 	},
 );
 
-const { getSelectedEdges, getSelectedNodes } = useVueFlow({ id: props.id });
+const { getSelectedEdges, getSelectedNodes, viewportRef, project } = useVueFlow({
+	id: props.id,
+});
 
 const hoveredEdges = ref<Record<string, boolean>>({});
 
@@ -57,6 +61,11 @@ function onSetNodeActive(id: string) {
 	emit('update:node:active', id);
 }
 
+function onSelectNode() {
+	const selectedNodeId = getSelectedNodes.value[getSelectedNodes.value.length - 1]?.id;
+	emit('update:node:selected', selectedNodeId);
+}
+
 function onDeleteNode(id: string) {
 	emit('delete:node', id);
 }
@@ -83,6 +92,16 @@ function onMouseEnterEdge(event: EdgeMouseEvent) {
 function onMouseLeaveEdge(event: EdgeMouseEvent) {
 	hoveredEdges.value[event.edge.id] = false;
 }
+
+function onClickPane(event: MouseEvent) {
+	const bounds = viewportRef.value?.getBoundingClientRect() ?? { left: 0, top: 0 };
+	const position = project({
+		x: event.offsetX - bounds.left,
+		y: event.offsetY - bounds.top,
+	});
+
+	emit('click:pane', position);
+}
 </script>
 
 <template>
@@ -99,10 +118,16 @@ function onMouseLeaveEdge(event: EdgeMouseEvent) {
 		@node-drag-stop="onNodeDragStop"
 		@edge-mouse-enter="onMouseEnterEdge"
 		@edge-mouse-leave="onMouseLeaveEdge"
+		@pane-click="onClickPane"
 		@connect="onConnect"
 	>
 		<template #node-canvas-node="canvasNodeProps">
-			<CanvasNode v-bind="canvasNodeProps" @delete="onDeleteNode" @activate="onSetNodeActive" />
+			<CanvasNode
+				v-bind="canvasNodeProps"
+				@delete="onDeleteNode"
+				@select="onSelectNode"
+				@activate="onSetNodeActive"
+			/>
 		</template>
 
 		<template #edge-canvas-edge="canvasEdgeProps">