mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix NDV resize handle and scrollbar overlapping (#12509)

Browse source
This commit is contained in:
Alex Grozav 2025-01-08 16:03:53 +02:00 committed by GitHub
parent 326a221f36
commit c28f302c2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
packages/design-system/src/components/N8nResizeWrapper/ResizeWrapper.vue
View file

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { computed, ref } from 'vue'; import { computed, ref, useCssModule } from 'vue';
import { directionsCursorMaps, type Direction, type ResizeData } from 'n8n-design-system/types'; import { directionsCursorMaps, type Direction, type ResizeData } from 'n8n-design-system/types';
@ -32,6 +32,7 @@ interface ResizeProps {
scale?: number; scale?: number;
gridSize?: number; gridSize?: number;
supportedDirections?: Direction[]; supportedDirections?: Direction[];
outset?: boolean;
} }
const props = withDefaults(defineProps<ResizeProps>(), { const props = withDefaults(defineProps<ResizeProps>(), {
@ -42,9 +43,12 @@ const props = withDefaults(defineProps<ResizeProps>(), {
minWidth: 0, minWidth: 0,
scale: 1, scale: 1,
gridSize: 20, gridSize: 20,
outset: false,
supportedDirections: () => [], supportedDirections: () => [],
}); });
const $style = useCssModule();
const emit = defineEmits<{ const emit = defineEmits<{
resizestart: []; resizestart: [];
resize: [value: ResizeData]; resize: [value: ResizeData];
@ -70,6 +74,11 @@ const state = {
y: ref(0), y: ref(0),
}; };
const classes = computed(() => ({
[$style.resize]: true,
[$style.outset]: props.outset,
}));
const mouseMove = (event: MouseEvent) => { const mouseMove = (event: MouseEvent) => {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -147,7 +156,7 @@ const resizerMove = (event: MouseEvent) => {
</script> </script>
<template> <template>
<div :class="$style.resize"> <div :class="classes">
<div <div
v-for="direction in enabledDirections" v-for="direction in enabledDirections"
:key="direction" :key="direction"
@ -161,6 +170,10 @@ const resizerMove = (event: MouseEvent) => {
<style lang="scss" module> <style lang="scss" module>
.resize { .resize {
--resizer--size: 12px;
--resizer--side-offset: -2px;
--resizer--corner-offset: -3px;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -173,66 +186,71 @@ const resizerMove = (event: MouseEvent) => {
} }
.right { .right {
width: 12px; width: var(--resizer--size);
height: 100%; height: 100%;
top: -2px; top: var(--resizer--side-offset);
right: -2px; right: var(--resizer--side-offset);
cursor: ew-resize; cursor: ew-resize;
} }
.top { .top {
width: 100%; width: 100%;
height: 12px; height: var(--resizer--size);
top: -2px; top: var(--resizer--side-offset);
left: -2px; left: var(--resizer--side-offset);
cursor: ns-resize; cursor: ns-resize;
} }
.bottom { .bottom {
width: 100%; width: 100%;
height: 12px; height: var(--resizer--size);
bottom: -2px; bottom: var(--resizer--side-offset);
left: -2px; left: var(--resizer--side-offset);
cursor: ns-resize; cursor: ns-resize;
} }
.left { .left {
width: 12px; width: var(--resizer--size);
height: 100%; height: 100%;
top: -2px; top: var(--resizer--side-offset);
left: -2px; left: var(--resizer--side-offset);
cursor: ew-resize; cursor: ew-resize;
} }
.topLeft { .topLeft {
width: 12px; width: var(--resizer--size);
height: 12px; height: var(--resizer--size);
top: -3px; top: var(--resizer--corner-offset);
left: -3px; left: var(--resizer--corner-offset);
cursor: nw-resize; cursor: nw-resize;
} }
.topRight { .topRight {
width: 12px; width: var(--resizer--size);
height: 12px; height: var(--resizer--size);
top: -3px; top: var(--resizer--corner-offset);
right: -3px; right: var(--resizer--corner-offset);
cursor: ne-resize; cursor: ne-resize;
} }
.bottomLeft { .bottomLeft {
width: 12px; width: var(--resizer--size);
height: 12px; height: var(--resizer--size);
bottom: -3px; bottom: var(--resizer--corner-offset);
left: -3px; left: var(--resizer--corner-offset);
cursor: sw-resize; cursor: sw-resize;
} }
.bottomRight { .bottomRight {
width: 12px; width: var(--resizer--size);
height: 12px; height: var(--resizer--size);
bottom: -3px; bottom: var(--resizer--corner-offset);
right: -3px; right: var(--resizer--corner-offset);
cursor: se-resize; cursor: se-resize;
} }
.outset {
--resizer--side-offset: calc(-1 * var(--resizer--size) + 2px);
--resizer--corner-offset: calc(-1 * var(--resizer--size) + 3px);
}
</style> </style>

1
packages/editor-ui/src/components/NDVDraggablePanels.vue
View file

@ -375,6 +375,7 @@ function onDragEnd() {
:min-width="MIN_PANEL_WIDTH" :min-width="MIN_PANEL_WIDTH"
:grid-size="20" :grid-size="20"
:supported-directions="supportedResizeDirections" :supported-directions="supportedResizeDirections"
outset
@resize="onResizeThrottle" @resize="onResizeThrottle"
@resizeend="onResizeEnd" @resizeend="onResizeEnd"
> >