feat(editor): Add capability to open NDV and rename node (no-changelog) (#9712)

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

@@ -14,6 +14,7 @@ const $style = useCssModule();
 const emit = defineEmits<{
 	'update:modelValue': [elements: CanvasElement[]];
 	'update:node:position': [id: string, position: { x: number; y: number }];
+	'update:node:active': [id: string];
 	'delete:node': [id: string];
 	'delete:connection': [connection: Connection];
 	'create:connection': [connection: Connection];
@@ -52,6 +53,10 @@ function onNodeDragStop(e: NodeDragEvent) {
 	});
 }
 
+function onSetNodeActive(id: string) {
+	emit('update:node:active', id);
+}
+
 function onDeleteNode(id: string) {
 	emit('delete:node', id);
 }
@@ -97,7 +102,7 @@ function onMouseLeaveEdge(event: EdgeMouseEvent) {
 		@connect="onConnect"
 	>
 		<template #node-canvas-node="canvasNodeProps">
-			<CanvasNode v-bind="canvasNodeProps" @delete="onDeleteNode" />
+			<CanvasNode v-bind="canvasNodeProps" @delete="onDeleteNode" @activate="onSetNodeActive" />
 		</template>
 
 		<template #edge-canvas-edge="canvasEdgeProps">

packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue

@@ -17,6 +17,7 @@ import type { NodeProps } from '@vue-flow/core';
 
 const emit = defineEmits<{
 	delete: [id: string];
+	activate: [id: string];
 }>();
 
 const props = defineProps<NodeProps<CanvasElementData>>();
@@ -97,6 +98,10 @@ provide(CanvasNodeKey, {
 function onDelete() {
 	emit('delete', props.id);
 }
+
+function onActivate() {
+	emit('activate', props.id);
+}
 </script>
 
 <template>
@@ -132,7 +137,7 @@ function onDelete() {
 			@delete="onDelete"
 		/>
 
-		<CanvasNodeRenderer v-if="nodeType">
+		<CanvasNodeRenderer v-if="nodeType" @dblclick="onActivate">
 			<NodeIcon :node-type="nodeType" :size="40" :shrink="false" />
 			<!--			:color-default="iconColorDefault"-->
 			<!--			:disabled="data.disabled"-->