fix(editor): Toolbar, layering, and label rendering improvements on new canvas (no-changelog) (#11390)

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"
 		>

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);

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;
 }