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

⚡Also taking into account height changes

Browse source
This commit is contained in:
Milorad FIlipović 2025-03-05 15:39:15 +01:00
parent 85ea9977b1
commit 4f5eab4cfa
4 changed files with 19 additions and 11 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 () => { const updateGridWidth = async () => {
await nextTick(); await nextTick();
if (appGrid.value) { if (appGrid.value) {
uiStore.appGridWidth = appGrid.value.clientWidth; const { width, height } = appGrid.value.getBoundingClientRect();
uiStore.appGridDimensions = { width, height };
} }
}; };

13
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 { ndvEventBus } from '@/event-bus';
import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue'; import NDVFloatingNodes from '@/components/NDVFloatingNodes.vue';
import type { MainPanelType, XYPosition } from '@/Interface'; 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 { useUIStore } from '@/stores/ui.store';
import { useThrottleFn } from '@vueuse/core'; import { useThrottleFn } from '@vueuse/core';
@ -43,7 +43,7 @@ const props = defineProps<Props>();
const isDragging = ref<boolean>(false); const isDragging = ref<boolean>(false);
const initialized = ref<boolean>(false); const initialized = ref<boolean>(false);
const containerWidth = ref<number>(uiStore.appGridWidth); const containerWidth = ref<number>(uiStore.appGridDimensions.width);
const emit = defineEmits<{ const emit = defineEmits<{
init: [{ position: number }]; init: [{ position: number }];
@ -86,14 +86,15 @@ onBeforeUnmount(() => {
}); });
watch( watch(
() => uiStore.appGridWidth, () => uiStore.appGridDimensions,
(width) => { async (dimensions) => {
const ndv = document.getElementById('ndv'); const ndv = document.getElementById('ndv');
if (ndv) { if (ndv) {
await nextTick();
const { width: ndvWidth } = ndv.getBoundingClientRect(); const { width: ndvWidth } = ndv.getBoundingClientRect();
containerWidth.value = ndvWidth; containerWidth.value = ndvWidth;
} else { } else {
containerWidth.value = width; containerWidth.value = dimensions.width;
} }
const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH); const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH);
const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth; const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth;
@ -107,7 +108,7 @@ watch(
const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight; const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight;
// When user is resizing from non-supported view(sub ~488px) we need to refit the panels // When user is resizing from non-supported view(sub ~488px) we need to refit the panels
if (width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) { if (dimensions.width > MIN_WINDOW_WIDTH && isBelowMinLeft && isMaxRight) {
setMainPanelWidth(minRelativeWidth); setMainPanelWidth(minRelativeWidth);
setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth)); setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth));
} }

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

@ -147,14 +147,20 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
function openChat() { function openChat() {
chatWindowOpen.value = true; chatWindowOpen.value = true;
chatMessages.value = chatMessages.value.map((msg) => ({ ...msg, read: 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() { function closeChat() {
chatWindowOpen.value = false; chatWindowOpen.value = false;
// Looks smoother if we wait for slide animation to finish before updating the grid width // Looks smoother if we wait for slide animation to finish before updating the grid width
setTimeout(() => { setTimeout(() => {
uiStore.appGridWidth = window.innerWidth; uiStore.appGridDimensions = {
...uiStore.appGridDimensions,
width: window.innerWidth,
};
// If session has ended, reset the chat // If session has ended, reset the chat
if (isSessionEnded.value) { if (isSessionEnded.value) {
resetAssistantChat(); 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 pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({});
const processingExecutionResults = ref<boolean>(false); 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 // Last interacted with - Canvas v2 specific
const lastInteractedWithNodeConnection = ref<Connection | undefined>(); const lastInteractedWithNodeConnection = ref<Connection | undefined>();
@ -576,7 +576,7 @@ export const useUIStore = defineStore(STORES.UI, () => {
}; };
return { return {
appGridWidth, appGridDimensions,
appliedTheme, appliedTheme,
contextBasedTranslationKeys, contextBasedTranslationKeys,
getLastSelectedNode, getLastSelectedNode,