From 36a1a18615ac29fc4448ee2498d51ece51fe8dbd Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 15 Mar 2024 15:22:30 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BF=AE=E5=A4=8D=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E6=AC=A1=E6=89=93=E5=BC=80=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E5=B7=A6=E5=8F=B3=E8=BE=B9=E6=A0=8F=E5=AE=BD=E5=BA=A6=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E4=B8=BA0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/components/SplitView.vue | 89 +++++++++++---------
 packages/editor/src/layouts/Framework.vue    | 67 ++++++++-------
 packages/editor/src/services/ui.ts           |  6 ++
 3 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/packages/editor/src/components/SplitView.vue b/packages/editor/src/components/SplitView.vue
index cc6d5c30..69ca0445 100644
--- a/packages/editor/src/components/SplitView.vue
+++ b/packages/editor/src/components/SplitView.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watchEffect } from 'vue';
 import { OnDrag } from 'gesto';
 
 import Resizer from './Resizer.vue';
@@ -34,6 +34,7 @@ const emit = defineEmits(['update:left', 'change', 'update:right']);
 
 const props = withDefaults(
   defineProps<{
+    width?: number;
     left?: number;
     right?: number;
     minLeft?: number;
@@ -54,8 +55,11 @@ const el = ref<HTMLElement>();
 
 const hasLeft = computed(() => typeof props.left !== 'undefined');
 const hasRight = computed(() => typeof props.right !== 'undefined');
+const center = ref(0);
 
-const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
+let clientWidth = 0;
+
+const getCenterWidth = (l = 0, r = 0) => {
   let right = r > 0 ? r : 0;
   let left = l > 0 ? l : 0;
   let center = clientWidth - left - right;
@@ -76,45 +80,51 @@ const getCenterWidth = (clientWidth: number, l = 0, r = 0) => {
   };
 };
 
-let clientWidth = 0;
-const resizerObserver = new ResizeObserver((entries) => {
-  for (const { contentRect } of entries) {
-    clientWidth = contentRect.width;
-
-    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: columnWidth.left,
-      center: center.value,
-      right: columnWidth.right,
-    });
+const widthChange = (width: number) => {
+  if (width <= 0) {
+    return;
   }
-});
 
-onMounted(() => {
-  if (el.value) {
-    resizerObserver.observe(el.value);
+  clientWidth = width;
+  let left = props.left || 0;
+  let right = props.right || 0;
+
+  if (left > clientWidth) {
+    left = clientWidth / 3;
   }
-});
 
-onBeforeUnmount(() => {
-  resizerObserver.disconnect();
-});
+  if (right > clientWidth) {
+    right = clientWidth / 3;
+  }
 
-const center = ref(0);
+  const columnWidth = getCenterWidth(left, right);
+
+  center.value = columnWidth.center;
+
+  emit('change', columnWidth);
+};
+
+if (typeof props.width !== 'number') {
+  const resizerObserver = new ResizeObserver((entries) => {
+    for (const { contentRect } of entries) {
+      widthChange(contentRect.width);
+    }
+  });
+
+  onMounted(() => {
+    if (el.value) {
+      resizerObserver.observe(el.value);
+    }
+  });
+
+  onBeforeUnmount(() => {
+    resizerObserver.disconnect();
+  });
+} else {
+  watchEffect(() => {
+    if (typeof props.width === 'number') widthChange(props.width);
+  });
+}
 
 const changeLeft = ({ deltaX }: OnDrag) => {
   if (typeof props.left === 'undefined') return;
@@ -125,7 +135,7 @@ const changeLeft = ({ deltaX }: OnDrag) => {
     left = props.left;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, left, props.right || 0);
+  const columnWidth = getCenterWidth(left, props.right || 0);
 
   center.value = columnWidth.center;
 
@@ -145,7 +155,7 @@ const changeRight = ({ deltaX }: OnDrag) => {
     right = props.right;
   }
 
-  const columnWidth = getCenterWidth(clientWidth, props.left, right);
+  const columnWidth = getCenterWidth(props.left, right);
 
   center.value = columnWidth.center;
 
@@ -158,7 +168,8 @@ const changeRight = ({ deltaX }: OnDrag) => {
 
 defineExpose({
   updateWidth() {
-    const columnWidth = getCenterWidth(el.value?.clientWidth || clientWidth, props.left, props.right);
+    clientWidth = props.width ?? el.value?.clientWidth ?? clientWidth;
+    const columnWidth = getCenterWidth(props.left, props.right);
 
     emit('change', {
       left: columnWidth.left,
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index c2c417ab..3a79ae1e 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/packages/editor/src/layouts/Framework.vue
@@ -24,6 +24,7 @@
       :min-left="65"
       :min-right="20"
       :min-center="100"
+      :width="frameworkRect?.width || 0"
       @change="columnWidthChange"
     >
       <template #left>
@@ -57,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 
@@ -101,40 +102,15 @@ const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
 const getLeftColumnWidthCacheData = () =>
   Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_LEFT_COLUMN_WIDTH;
 
-const leftColumnWidthCacheData = getLeftColumnWidthCacheData();
-const RightColumnWidthCacheData =
-  Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH;
-
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: leftColumnWidthCacheData,
+  left: getLeftColumnWidthCacheData(),
   center: 0,
-  right: RightColumnWidthCacheData,
+  right: Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY)) || DEFAULT_RIGHT_COLUMN_WIDTH,
 });
 
-watch(
-  [pageLength, splitView],
-  () => {
-    splitView.value?.updateWidth();
-  },
-  {
-    immediate: true,
-  },
-);
-
-watch(
-  () => columnWidth.value.right,
-  (right) => {
-    if (typeof right === 'undefined') return;
-    globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
-  },
-);
-
-watch(
-  () => columnWidth.value.left,
-  (left) => {
-    globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
-  },
-);
+watch(pageLength, () => {
+  splitView.value?.updateWidth();
+});
 
 watch(
   () => uiService?.get('hideSlideBar'),
@@ -144,12 +120,35 @@ watch(
 );
 
 const columnWidthChange = (columnW: GetColumnWidth) => {
-  columnWidth.value.left = columnW.left;
-  columnWidth.value.center = columnW.center;
-  columnWidth.value.right = columnW.right;
+  columnWidth.value = columnW;
+
+  globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.left}`);
+  globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${columnW.right}`);
   uiService?.set('columnWidth', columnW);
 };
 
+const frameworkRect = computed(() => uiService?.get('frameworkRect'));
+
+const resizerObserver = new ResizeObserver((entries) => {
+  const { contentRect } = entries[0];
+  uiService?.set('frameworkRect', {
+    width: contentRect.width,
+    height: contentRect.height,
+    left: contentRect.left,
+    top: contentRect.top,
+  });
+});
+
+onMounted(() => {
+  if (content.value) {
+    resizerObserver.observe(content.value);
+  }
+});
+
+onBeforeUnmount(() => {
+  resizerObserver.disconnect();
+});
+
 const saveCode = (value: string) => {
   try {
     const parseDSL = getConfig('parseDSL');
diff --git a/packages/editor/src/services/ui.ts b/packages/editor/src/services/ui.ts
index b4c04ed9..373a1209 100644
--- a/packages/editor/src/services/ui.ts
+++ b/packages/editor/src/services/ui.ts
@@ -54,6 +54,12 @@ const state = reactive<UiState>({
     width: 0,
     height: 0,
   },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  },
 });
 
 const canUsePluginMethods = {