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

Merge 4f5eab4cfa into d2dd1796a8

Browse source
This commit is contained in:
Milorad FIlipović 2025-03-05 17:06:38 +01:00 committed by GitHub
parent d2dd1796a8 4f5eab4cfa
commit 348b0401e5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 42 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/frontend/editor-ui/src/App.vue
View file

@ -61,7 +61,8 @@ const logHiringBanner = () => {
const updateGridWidth = async () => {
await nextTick();
if (appGrid.value) {
uiStore.appGridWidth = appGrid.value.clientWidth;
const { width, height } = appGrid.value.getBoundingClientRect();
uiStore.appGridDimensions = { width, height };
}
};

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"

10
packages/frontend/editor-ui/src/stores/assistant.store.ts
View file

@ -147,14 +147,20 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
function openChat() {
chatWindowOpen.value = true;
chatMessages.value = chatMessages.value.map((msg) => ({ ...msg, read: true }));
uiStore.appGridWidth = window.innerWidth - chatWidth.value;
uiStore.appGridDimensions = {
...uiStore.appGridDimensions,
width: window.innerWidth - chatWidth.value,
};
}
function closeChat() {
chatWindowOpen.value = false;
// Looks smoother if we wait for slide animation to finish before updating the grid width
setTimeout(() => {
uiStore.appGridWidth = window.innerWidth;
uiStore.appGridDimensions = {
...uiStore.appGridDimensions,
width: window.innerWidth,
};
// If session has ended, reset the chat
if (isSessionEnded.value) {
resetAssistantChat();

4
packages/frontend/editor-ui/src/stores/ui.store.ts
View file

@ -184,7 +184,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
const pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({});
const processingExecutionResults = ref<boolean>(false);
const appGridWidth = ref<number>(0);
const appGridDimensions = ref<{ width: number; height: number }>({ width: 0, height: 0 });
// Last interacted with - Canvas v2 specific
const lastInteractedWithNodeConnection = ref<Connection | undefined>();
@ -576,7 +576,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
};
return {
appGridWidth,
appGridDimensions,
appliedTheme,
contextBasedTranslationKeys,
getLastSelectedNode,