From bddfcee92b968b09875c43a9035bf9b7817396e3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 17 Nov 2022 20:03:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=B7=A6=E4=B8=AD=E5=8F=B3=E5=88=97=E5=AE=BD=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=9C=80=E5=B0=8F=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/Layout.vue | 65 ++++++++++++++++++-----
 1 file changed, 52 insertions(+), 13 deletions(-)

diff --git a/packages/editor/src/components/Layout.vue b/packages/editor/src/components/Layout.vue
index 9c2f1183..5330fbd7 100644
--- a/packages/editor/src/components/Layout.vue
+++ b/packages/editor/src/components/Layout.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="el" class="m-editor-layout">
-    <template v-if="typeof props.left !== 'undefined'">
+    <template v-if="hasLeft">
       <div class="m-editor-layout-left" :class="leftClass" :style="`width: ${left}px`">
         <slot name="left"></slot>
       </div>
@@ -11,7 +11,7 @@
       <slot name="center"></slot>
     </div>
 
-    <template v-if="typeof props.right !== 'undefined'">
+    <template v-if="hasRight">
       <Resizer @change="changeRight"></Resizer>
       <div class="m-editor-layout-right" :class="rightClass" :style="`width: ${right}px`">
         <slot name="right"></slot>
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup name="MEditorLayout">
-import { onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 
 import Resizer from '../layouts/Resizer.vue';
 
@@ -33,29 +33,64 @@ const props = withDefaults(
     right?: number;
     minLeft?: number;
     minRight?: number;
+    minCenter?: number;
     leftClass?: string;
     rightClass?: string;
     centerClass?: string;
   }>(),
   {
-    minLeft: 1,
+    minLeft: 46,
     minRight: 1,
+    minCenter: 1,
   },
 );
 
 const el = ref<HTMLElement>();
 
+const hasLeft = computed(() => typeof props.left !== 'undefined');
+const hasRight = computed(() => typeof props.left !== 'undefined');
+
+const getCenterWidth = (clientWidth: number, left: number, right: number) => {
+  let center = clientWidth - left - right;
+  if (center < props.minCenter) {
+    center = props.minCenter;
+    if (left < right) {
+      right = clientWidth - left - props.minCenter;
+    } else {
+      left = clientWidth - right - props.minCenter;
+    }
+  }
+  return {
+    center,
+    left,
+    right,
+  };
+};
+
 let clientWidth = 0;
 const resizerObserver = new ResizeObserver((entries) => {
   for (const { contentRect } of entries) {
     clientWidth = contentRect.width;
 
-    center.value = clientWidth - (props.left || 0) - (props.right || 0);
+    let left = props.left || 0;
+    let right = props.right || 0;
+
+    if (left > clientWidth) {
+      left = clientWidth / 3;
+    }
+
+    if (right > clientWidth) {
+      right = clientWidth / 3;
+    }
+
+    const columnWidth = getCenterWidth(clientWidth, left, right);
+
+    center.value = columnWidth.center;
 
     emit('change', {
-      left: props.left,
+      left: columnWidth.left,
       center: center.value,
-      right: props.right,
+      right: columnWidth.right,
     });
   }
 });
@@ -81,12 +116,14 @@ const changeLeft = (deltaX: number) => {
     left = props.left;
   }
 
-  center.value = clientWidth - left - (props.right || 0);
+  const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+
+  center.value = columnWidth.center;
 
   emit('change', {
-    left,
+    left: columnWidth.left,
     center: center.value,
-    right: props.right,
+    right: columnWidth.right,
   });
 };
 
@@ -99,12 +136,14 @@ const changeRight = (deltaX: number) => {
     right = props.right;
   }
 
-  center.value = clientWidth - (props.left || 0) - right;
+  const columnWidth = getCenterWidth(clientWidth, props.left || 0, right);
+
+  center.value = columnWidth.center;
 
   emit('change', {
-    left: props.left,
+    left: columnWidth.left,
     center: center.value,
-    right,
+    right: columnWidth.right,
   });
 };
 </script>