feat(editor): Add canvas edge toolbar hover show/hide support (no-changelog) (#9699)

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

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
 import type { CanvasConnection, CanvasElement } from '@/types';
-import type { NodeDragEvent, Connection } from '@vue-flow/core';
+import type { EdgeMouseEvent, NodeDragEvent, Connection } from '@vue-flow/core';
 import { useVueFlow, VueFlow, PanelPosition } from '@vue-flow/core';
 import { Background } from '@vue-flow/background';
 import { Controls } from '@vue-flow/controls';
 import { MiniMap } from '@vue-flow/minimap';
 import CanvasNode from './elements/nodes/CanvasNode.vue';
 import CanvasEdge from './elements/edges/CanvasEdge.vue';
-import { onMounted, onUnmounted, useCssModule } from 'vue';
+import { onMounted, onUnmounted, ref, useCssModule } from 'vue';
 
 const $style = useCssModule();
 
@@ -36,6 +36,8 @@ const props = withDefaults(
 
 const { getSelectedEdges, getSelectedNodes } = useVueFlow({ id: props.id });
 
+const hoveredEdges = ref<Record<string, boolean>>({});
+
 onMounted(() => {
 	document.addEventListener('keydown', onKeyDown);
 });
@@ -68,6 +70,14 @@ function onKeyDown(e: KeyboardEvent) {
 		getSelectedNodes.value.forEach(({ id }) => onDeleteNode(id));
 	}
 }
+
+function onMouseEnterEdge(event: EdgeMouseEvent) {
+	hoveredEdges.value[event.edge.id] = true;
+}
+
+function onMouseLeaveEdge(event: EdgeMouseEvent) {
+	hoveredEdges.value[event.edge.id] = false;
+}
 </script>
 
 <template>
@@ -82,6 +92,8 @@ function onKeyDown(e: KeyboardEvent) {
 		:max-zoom="2"
 		data-test-id="canvas"
 		@node-drag-stop="onNodeDragStop"
+		@edge-mouse-enter="onMouseEnterEdge"
+		@edge-mouse-leave="onMouseLeaveEdge"
 		@connect="onConnect"
 	>
 		<template #node-canvas-node="canvasNodeProps">
@@ -89,7 +101,11 @@ function onKeyDown(e: KeyboardEvent) {
 		</template>
 
 		<template #edge-canvas-edge="canvasEdgeProps">
-			<CanvasEdge v-bind="canvasEdgeProps" @delete="onDeleteConnection" />
+			<CanvasEdge
+				v-bind="canvasEdgeProps"
+				:hovered="hoveredEdges[canvasEdgeProps.id]"
+				@delete="onDeleteConnection"
+			/>
 		</template>
 
 		<Background data-test-id="canvas-background" pattern-color="#aaa" :gap="16" />