mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Alex Grozav 2024-10-24 17:02:26 +03:00 committed by GitHub
parent 46f3b4a258
commit 0d0bd2932e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
packages/editor-ui/src/components/canvas/elements/edges/CanvasEdge.vue
View file

@ -74,15 +74,29 @@ const edgeStyle = computed(() => ({
stroke: isHovered.value ? 'var(--color-primary)' : edgeColor.value, 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 edgeToolbarStyle = computed(() => {
const [, labelX, labelY] = path.value; const [, labelX, labelY] = path.value;
return { return {
transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`, 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(() => const path = computed(() =>
getCustomPath(props, { getCustomPath(props, {
connectionType: connectionType.value, connectionType: connectionType.value,
@ -108,7 +122,7 @@ function onDelete() {
<template> <template>
<BaseEdge <BaseEdge
:id="id" :id="id"
:class="$style.edge" :class="edgeClasses"
:style="edgeStyle" :style="edgeStyle"
:path="path[0]" :path="path[0]"
:marker-end="markerEnd" :marker-end="markerEnd"
@ -122,7 +136,7 @@ function onDelete() {
:data-target-node-name="targetNode?.label" :data-target-node-name="targetNode?.label"
:data-edge-status="status" :data-edge-status="status"
:style="edgeToolbarStyle" :style="edgeToolbarStyle"
:class="$style.edgeLabelWrapper" :class="edgeToolbarClasses"
@mouseenter="isHovered = true" @mouseenter="isHovered = true"
@mouseleave="isHovered = false" @mouseleave="isHovered = false"
> >

3
packages/editor-ui/src/components/canvas/elements/nodes/CanvasNodeToolbar.vue
View file

@ -126,7 +126,7 @@ function onOpenContextMenu(event: MouseEvent) {
<style lang="scss" module> <style lang="scss" module>
.canvasNodeToolbar { .canvasNodeToolbar {
padding-bottom: var(--spacing-2xs); padding-bottom: var(--spacing-xs);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
width: 100%; width: 100%;
@ -137,6 +137,7 @@ function onOpenContextMenu(event: MouseEvent) {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--color-canvas-background); background-color: var(--color-canvas-background);
border-radius: var(--border-radius-base);
:global(.button) { :global(.button) {
--button-font-color: var(--color-text-light); --button-font-color: var(--color-text-light);

9
packages/editor-ui/src/styles/plugins/_vueflow.scss
View file

@ -72,10 +72,6 @@
cursor: grabbing; cursor: grabbing;
} }
&.selected {
z-index: 1 !important;
}
&:has(.sticky--active) { &:has(.sticky--active) {
z-index: 1 !important; z-index: 1 !important;
} }
@ -96,7 +92,8 @@
* Edges * Edges
*/ */
.vue-flow__edges, .vue-flow__edges:has(.selected),
.vue-flow__edge-labels { .vue-flow__edges:has(.hovered),
.vue-flow__edge-label.selected {
z-index: 1 !important; z-index: 1 !important;
} }