diff --git a/packages/frontend/editor-ui/src/App.vue b/packages/frontend/editor-ui/src/App.vue index 7178d73bbc..52a7d865ed 100644 --- a/packages/frontend/editor-ui/src/App.vue +++ b/packages/frontend/editor-ui/src/App.vue @@ -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 }; } }; diff --git a/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue b/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue index efe62b92e6..a3651570e6 100644 --- a/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue +++ b/packages/frontend/editor-ui/src/components/NDVDraggablePanels.vue @@ -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,7 +43,7 @@ const props = defineProps(); const isDragging = ref(false); const initialized = ref(false); -const containerWidth = ref(uiStore.appGridWidth); +const containerWidth = ref(uiStore.appGridDimensions.width); const emit = defineEmits<{ init: [{ position: number }]; @@ -86,14 +86,15 @@ onBeforeUnmount(() => { }); watch( - () => uiStore.appGridWidth, - (width) => { + () => uiStore.appGridDimensions, + async (dimensions) => { const ndv = document.getElementById('ndv'); if (ndv) { + await nextTick(); const { width: ndvWidth } = ndv.getBoundingClientRect(); containerWidth.value = ndvWidth; } else { - containerWidth.value = width; + containerWidth.value = dimensions.width; } const minRelativeWidth = pxToRelativeWidth(MIN_PANEL_WIDTH); const isBelowMinWidthMainPanel = mainPanelDimensions.value.relativeWidth < minRelativeWidth; @@ -107,7 +108,7 @@ watch( const isMaxRight = maximumRightPosition.value > mainPanelDimensions.value.relativeRight; // 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); setPositions(getInitialLeftPosition(mainPanelDimensions.value.relativeWidth)); } diff --git a/packages/frontend/editor-ui/src/stores/assistant.store.ts b/packages/frontend/editor-ui/src/stores/assistant.store.ts index b7a5b6dbb0..5fdd53d117 100644 --- a/packages/frontend/editor-ui/src/stores/assistant.store.ts +++ b/packages/frontend/editor-ui/src/stores/assistant.store.ts @@ -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(); diff --git a/packages/frontend/editor-ui/src/stores/ui.store.ts b/packages/frontend/editor-ui/src/stores/ui.store.ts index 80d72a4bc1..67979e287b 100644 --- a/packages/frontend/editor-ui/src/stores/ui.store.ts +++ b/packages/frontend/editor-ui/src/stores/ui.store.ts @@ -184,7 +184,7 @@ export const useUIStore = defineStore(STORES.UI, () => { const pendingNotificationsForViews = ref<{ [key in VIEWS]?: NotificationOptions[] }>({}); const processingExecutionResults = ref(false); - const appGridWidth = ref(0); + const appGridDimensions = ref<{ width: number; height: number }>({ width: 0, height: 0 }); // Last interacted with - Canvas v2 specific const lastInteractedWithNodeConnection = ref(); @@ -576,7 +576,7 @@ export const useUIStore = defineStore(STORES.UI, () => { }; return { - appGridWidth, + appGridDimensions, appliedTheme, contextBasedTranslationKeys, getLastSelectedNode,