From 0d0bd2932ee311254056f7749b05f0a78f05d653 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 24 Oct 2024 17:02:26 +0300
Subject: [PATCH] fix(editor): Toolbar, layering, and label rendering
 improvements on new canvas (no-changelog) (#11390)

---
 .../canvas/elements/edges/CanvasEdge.vue      | 20 ++++++++++++++++---
 .../elements/nodes/CanvasNodeToolbar.vue      |  3 ++-
 .../src/styles/plugins/_vueflow.scss          |  9 +++------
 3 files changed, 22 insertions(+), 10 deletions(-)

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 479c0542bf..f23d3c6c33 100644
--- a/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
+++ b/packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
@@ -74,15 +74,29 @@ const edgeStyle = computed(() => ({
 	stroke: isHovered.value ? 'var(--color-primary)' : edgeColor.value,
 }));
 
-const edgeLabelStyle = computed(() => ({ color: edgeColor.value }));
+const edgeClasses = computed(() => ({
+	[$style.edge]: true,
+	hovered: isHovered.value,
+}));
+
+const edgeLabelStyle = computed(() => ({
+	color: edgeColor.value,
+}));
 
 const edgeToolbarStyle = computed(() => {
 	const [, labelX, labelY] = path.value;
 	return {
 		transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+		...(isHovered.value ? { zIndex: 1 } : {}),
 	};
 });
 
+const edgeToolbarClasses = computed(() => ({
+	[$style.edgeLabelWrapper]: true,
+	'vue-flow__edge-label': true,
+	selected: props.selected,
+}));
+
 const path = computed(() =>
 	getCustomPath(props, {
 		connectionType: connectionType.value,
@@ -108,7 +122,7 @@ function onDelete() {
 <template>
 	<BaseEdge
 		:id="id"
-		:class="$style.edge"
+		:class="edgeClasses"
 		:style="edgeStyle"
 		:path="path[0]"
 		:marker-end="markerEnd"
@@ -122,7 +136,7 @@ function onDelete() {
 			:data-target-node-name="targetNode?.label"
 			:data-edge-status="status"
 			:style="edgeToolbarStyle"
-			:class="$style.edgeLabelWrapper"
+			:class="edgeToolbarClasses"
 			@mouseenter="isHovered = true"
 			@mouseleave="isHovered = false"
 		>
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
index 52639d49dc..4cb940b757 100644
--- a/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
+++ b/packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
@@ -126,7 +126,7 @@ function onOpenContextMenu(event: MouseEvent) {
 
 <style lang="scss" module>
 .canvasNodeToolbar {
-	padding-bottom: var(--spacing-2xs);
+	padding-bottom: var(--spacing-xs);
 	display: flex;
 	justify-content: flex-end;
 	width: 100%;
@@ -137,6 +137,7 @@ function onOpenContextMenu(event: MouseEvent) {
 	align-items: center;
 	justify-content: center;
 	background-color: var(--color-canvas-background);
+	border-radius: var(--border-radius-base);
 
 	:global(.button) {
 		--button-font-color: var(--color-text-light);
diff --git a/packages/editor-ui/src/styles/plugins/_vueflow.scss b/packages/editor-ui/src/styles/plugins/_vueflow.scss
index bc9efd5acd..ebda12c8b6 100644
--- a/packages/editor-ui/src/styles/plugins/_vueflow.scss
+++ b/packages/editor-ui/src/styles/plugins/_vueflow.scss
@@ -72,10 +72,6 @@
 		cursor: grabbing;
 	}
 
-	&.selected {
-		z-index: 1 !important;
-	}
-
 	&:has(.sticky--active) {
 		z-index: 1 !important;
 	}
@@ -96,7 +92,8 @@
  * Edges
  */
 
-.vue-flow__edges,
-.vue-flow__edge-labels {
+.vue-flow__edges:has(.selected),
+.vue-flow__edges:has(.hovered),
+.vue-flow__edge-label.selected {
 	z-index: 1 !important;
 }