From 439a1cc4f39243e91715b21a84b8e7266ce872cd Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 28 Nov 2024 16:22:20 +0200
Subject: [PATCH] fix(editor): Fix bug causing connection lines to disappear
 when hovering stickies  (#11950)

---
 .../editor-ui/src/components/canvas/Canvas.vue    | 15 ++++++++-------
 .../canvas/elements/edges/CanvasEdge.vue          |  6 +++---
 .../canvas/elements/nodes/CanvasNode.vue          |  2 --
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/packages/editor-ui/src/components/canvas/Canvas.vue b/packages/editor-ui/src/components/canvas/Canvas.vue
index ed4012c195..d2fb227635 100644
--- a/packages/editor-ui/src/components/canvas/Canvas.vue
+++ b/packages/editor-ui/src/components/canvas/Canvas.vue
@@ -350,7 +350,6 @@ const arrowHeadMarkerId = ref('custom-arrow-head');
 
 const edgesHoveredById = ref<Record<string, boolean>>({});
 const edgesBringToFrontById = ref<Record<string, boolean>>({});
-const nodesHoveredById = ref<Record<string, boolean>>({});
 
 onEdgeMouseEnter(({ edge }) => {
 	edgesBringToFrontById.value = { [edge.id]: true };
@@ -381,6 +380,13 @@ onEdgeMouseLeave(({ edge }) => {
 	edgesHoveredById.value = { [edge.id]: false };
 });
 
+function onUpdateEdgeLabelHovered(id: string, hovered: boolean) {
+	edgesBringToFrontById.value = { [id]: true };
+	edgesHoveredById.value[id] = hovered;
+}
+
+const nodesHoveredById = ref<Record<string, boolean>>({});
+
 onNodeMouseEnter(({ node }) => {
 	nodesHoveredById.value = { [node.id]: true };
 });
@@ -389,10 +395,6 @@ onNodeMouseLeave(({ node }) => {
 	nodesHoveredById.value = { [node.id]: false };
 });
 
-function onUpdateEdgeHovered(id: string, hovered: boolean) {
-	edgesHoveredById.value[id] = hovered;
-}
-
 /**
  * Executions
  */
@@ -653,7 +655,6 @@ provide(CanvasKey, {
 				:read-only="readOnly"
 				:event-bus="eventBus"
 				:hovered="nodesHoveredById[nodeProps.id]"
-				:bring-to-front="nodesHoveredById[nodeProps.id]"
 				@delete="onDeleteNode"
 				@run="onRunNode"
 				@select="onSelectNode"
@@ -675,7 +676,7 @@ provide(CanvasKey, {
 				:bring-to-front="edgesBringToFrontById[edgeProps.id]"
 				@add="onClickConnectionAdd"
 				@delete="onDeleteConnection"
-				@update:hovered="onUpdateEdgeHovered(edgeProps.id, $event)"
+				@update:label:hovered="onUpdateEdgeLabelHovered(edgeProps.id, $event)"
 			/>
 		</template>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
index 10dcd6df4e..056878636e 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -12,7 +12,7 @@ import { getEdgeRenderData } from './utils';
 const emit = defineEmits<{
 	add: [connection: Connection];
 	delete: [connection: Connection];
-	'update:hovered': [hovered: boolean];
+	'update:label:hovered': [hovered: boolean];
 }>();
 
 export type CanvasEdgeProps = EdgeProps<CanvasConnectionData> & {
@@ -111,11 +111,11 @@ function onDelete() {
 }
 
 function onEdgeLabelMouseEnter() {
-	emit('update:hovered', true);
+	emit('update:label:hovered', true);
 }
 
 function onEdgeLabelMouseLeave() {
-	emit('update:hovered', false);
+	emit('update:label:hovered', false);
 }
 </script>
 
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
index cfae68a724..e62046d5d7 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNode.vue
@@ -36,7 +36,6 @@ type Props = NodeProps<CanvasNodeData> & {
 	readOnly?: boolean;
 	eventBus?: EventBus<CanvasEventBusEvents>;
 	hovered?: boolean;
-	bringToFront?: boolean; // Determines if entire nodes layer should be brought to front
 };
 
 const emit = defineEmits<{
@@ -81,7 +80,6 @@ const classes = computed(() => ({
 	[style.showToolbar]: showToolbar.value,
 	hovered: props.hovered,
 	selected: props.selected,
-	'bring-to-front': props.bringToFront,
 }));
 
 /**