From ee8dd028d5cc4486347c53231468b3ea176e07da Mon Sep 17 00:00:00 2001
From: daeyeon ko <rowan@megazone.com>
Date: Tue, 17 Dec 2024 17:59:56 +0900
Subject: [PATCH] refactor: verticalLayout dbclick logic & apply LSB minWidth

Signed-off-by: daeyeon ko <rowan@megazone.com>
---
 .../page-layouts/VerticalPageLayout.vue       |  1 +
 .../vertical-layout/PVerticalLayout.vue       | 28 ++++++++++++++++---
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
index 7d15cdb80c..68c7b11940 100644
--- a/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
+++ b/apps/web/src/common/modules/page-layouts/VerticalPageLayout.vue
@@ -70,6 +70,7 @@ watch(() => props.breadcrumbs, () => {
         ref="contentRef"
         class="vertical-page-layout"
         :width="width"
+        :min-width="240"
         :enable-double-click-resize="state.menuId === MENU_ID.METRIC_EXPLORER"
         v-on="$listeners"
     >
diff --git a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
index e7063c81ec..01e9412c22 100644
--- a/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
+++ b/packages/mirinae/src/layouts/vertical-layout/PVerticalLayout.vue
@@ -71,10 +71,20 @@ const state = reactive({
 
 const leftLayoutContentBox = ref<null|HTMLElement>(null);
 
-const resize = (delta : number) => {
-    state.width = delta;
-};
+const resize = (delta: number) => {
+    const minimumWidth = props.minWidth;
+    const maximumWidth = props.maxWidth;
 
+    if (Number.isNaN(delta)) {
+        return;
+    }
+
+    const newWidth = Math.min(Math.max(delta, minimumWidth), maximumWidth);
+
+    if (state.width !== newWidth) {
+        state.width = newWidth;
+    }
+};
 /* Resizing */
 const isResizing = (event) => {
     if (state.resizing) {
@@ -134,7 +144,17 @@ const handleControllerDoubleClick = () => {
     const minimumWidth = props.minWidth;
     const maximumWidth = props.maxWidth;
 
-    if (state.width <= minimumWidth + (maximumWidth - minimumWidth) / 2) {
+    if (state.width === maximumWidth) {
+        resize(minimumWidth);
+        return;
+    }
+    if (state.width === minimumWidth) {
+        resize(maximumWidth);
+        return;
+    }
+
+
+    if (state.width <= (maximumWidth + minimumWidth) / 2) {
         resize(maximumWidth);
     } else {
         resize(minimumWidth);