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

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

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