refactor: verticalLayout dbclick logic & apply LSB minWidth

Signed-off-by: daeyeon ko <[email protected]>
cloudforet-io · Dec 17, 2024 · ee8dd02 · ee8dd02
1 parent 90b3514
commit ee8dd02
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git 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
@@ -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);