admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-17 18:12:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): Fix NDV panels size on narrow screens (#13708)

Browse Source
This commit is contained in:
Milorad FIlipović
2025-03-11 12:24:00 +01:00
committed by GitHub
parent ec76505a87
commit 899f6c9824
5 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue
View File

@@ -9,7 +9,7 @@ import { useNDVStore } from '@/stores/ndv.store';
import { ndvEventBus } from '@/event-bus';
import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
import type { MainPanelType, XYPosition } from '@/Interface';
import { ref, onMounted, onBeforeUnmount, computed, watch } from 'vue';
import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue';
import { useUIStore } from '@/stores/ui.store';
import { useThrottleFn } from '@vueuse/core';
@@ -43,6 +43,7 @@ const props = defineProps<Props>();
const isDragging = ref<boolean>(false);
const initialized = ref<boolean>(false);
const containerWidth = ref<number>(uiStore.appGridDimensions.width);
const emit = defineEmits<{
init: [{ position: number }];
@@ -84,28 +85,37 @@ onBeforeUnmount(() => {
ndvEventBus.off('setPositionByName', setPositionByName);
});
const containerWidth = computed(() => uiStore.appGridWidth);
watch(
() => uiStore.appGridDimensions,
async (dimensions) => {
const ndv = document.getElementById('ndv');
if (ndv) {
await nextTick();
const { width: ndvWidth } = ndv.getBoundingClientRect();
containerWidth.value = ndvWidth;
} else {
containerWidth.value = dimensions.width;
}
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
watch(containerWidth, (width) => {
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
// Prevent the panel resizing below MIN_PANEL_WIDTH while maintain position
if (isBelowMinWidthMainPanel) {
setMainPanelWidth(minRelativeWidth);
}
// Prevent the panel resizing below MIN_PANEL_WIDTH whhile maintaing position
if (isBelowMinWidthMainPanel) {
setMainPanelWidth(minRelativeWidth);
}
const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
const isBelowMinLeft = minimumLeftPosition.value > mainPanelDimensions.value.relativeLeft;
const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
if (dimensions.width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
setMainPanelWidth(minRelativeWidth);
setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
}
// When user is resizing from non-supported view(sub ~488px) we need to refit the panels
if (width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
setMainPanelWidth(minRelativeWidth);
setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
}
setPositions(mainPanelDimensions.value.relativeLeft);
});
setPositions(mainPanelDimensions.value.relativeLeft);
},
);
const currentNodePaneType = computed((): MainPanelType => {
if (!hasInputSlot.value) return 'inputless';

1
packages/frontend/editor-ui/src/components/NodeDetailsView.vue
View File

@@ -706,6 +706,7 @@ onBeforeUnmount(() => {
<template>
<el-dialog
id="ndv"
:model-value="(!!activeNode || renaming) && !isActiveStickyNode"
:before-close="close"
:show-close="false"