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

feat(editor): Adjust selection rectangle to include node selection box on new canvas (no-changelog) (#11088)

Browse source
This commit is contained in:
Alex Grozav 2024-10-04 13:02:30 +03:00 committed by GitHub
parent e5c7215bca
commit b925791c15
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -44,16 +44,14 @@ const connectionType = computed(() =>
: NodeConnectionType.Main, : NodeConnectionType.Main,
); );
const renderToolbar = computed(() => (props.selected || isHovered.value) && !props.readOnly); const renderToolbar = computed(() => isHovered.value && !props.readOnly);
const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main); const isMainConnection = computed(() => data.value.source.type === NodeConnectionType.Main);
const status = computed(() => props.data.status); const status = computed(() => props.data.status);
const edgeColor = computed(() => { const edgeColor = computed(() => {
if (props.selected) { if (status.value === 'success') {
return 'var(--color-background-dark)';
} else if (status.value === 'success') {
return 'var(--color-success)'; return 'var(--color-success)';
} else if (status.value === 'pinned') { } else if (status.value === 'pinned') {
return 'var(--color-secondary)'; return 'var(--color-secondary)';
@ -61,6 +59,8 @@ const edgeColor = computed(() => {
return 'var(--color-primary)'; return 'var(--color-primary)';
} else if (!isMainConnection.value) { } else if (!isMainConnection.value) {
return 'var(--node-type-supplemental-color)'; return 'var(--node-type-supplemental-color)';
} else if (props.selected) {
return 'var(--color-background-dark)';
} else { } else {
return 'var(--color-foreground-xdark)'; return 'var(--color-foreground-xdark)';
} }

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

@ -1,3 +1,7 @@
/**
* Resizer
*/
.vue-flow__resize-control.line { .vue-flow__resize-control.line {
border-color: transparent; border-color: transparent;
z-index: 1; z-index: 1;
@ -32,6 +36,10 @@
z-index: 1; z-index: 1;
} }
/**
* Minimap
*/
.vue-flow__minimap { .vue-flow__minimap {
height: 120px; height: 120px;
overflow: hidden; overflow: hidden;
@ -50,6 +58,10 @@
} }
} }
/**
* Pane
*/
.vue-flow__pane { .vue-flow__pane {
&, &,
&.draggable { &.draggable {
@ -57,6 +69,10 @@
} }
} }
/**
* Node
*/
.vue-flow__node { .vue-flow__node {
&, &,
&.draggable { &.draggable {
@ -71,3 +87,14 @@
z-index: 1 !important; z-index: 1 !important;
} }
} }
/**
* Selection
*/
.vue-flow__nodesselection-rect {
box-sizing: content-box;
margin-top: calc(-1 * var(--spacing-2xs));
margin-left: calc(-1 * var(--spacing-2xs));
padding: var(--spacing-2xs);
}