@tmagic/editor 1.2.0-beta.3 → 1.2.0-beta.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.0-beta.3",
+  "version": "1.2.0-beta.5",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,12 +45,12 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons-vue": "^2.0.9",
-    "@tmagic/core": "1.2.0-beta.3",
-    "@tmagic/design": "1.2.0-beta.3",
-    "@tmagic/form": "1.2.0-beta.3",
-    "@tmagic/schema": "1.2.0-beta.3",
-    "@tmagic/stage": "1.2.0-beta.3",
-    "@tmagic/utils": "1.2.0-beta.3",
+    "@tmagic/core": "1.2.0-beta.5",
+    "@tmagic/design": "1.2.0-beta.5",
+    "@tmagic/form": "1.2.0-beta.5",
+    "@tmagic/schema": "1.2.0-beta.5",
+    "@tmagic/stage": "1.2.0-beta.5",
+    "@tmagic/utils": "1.2.0-beta.5",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "events": "^3.3.0",
@@ -62,8 +62,8 @@
     "vue": "^3.2.37"
   },
   "peerDependencies": {
-    "@tmagic/design": "1.2.0-beta.3",
-    "@tmagic/form": "1.2.0-beta.3",
+    "@tmagic/design": "1.2.0-beta.5",
+    "@tmagic/form": "1.2.0-beta.5",
     "monaco-editor": "^0.34.0",
     "vue": "^3.2.37"
   },

package/src/layouts/Framework.vue

@@ -10,7 +10,7 @@
       @save="saveCode"
     ></magic-code-editor>
 
-    <layout
+    <Layout
       v-else
       class="m-editor-content"
       left-class="m-editor-framework-left"
@@ -29,7 +29,7 @@
       <template #center>
         <slot v-if="pageLength > 0" name="workspace"></slot>
         <slot v-else name="empty">
-          <add-page-box></add-page-box>
+          <AddPageBox></AddPageBox>
         </slot>
       </template>
 
@@ -38,12 +38,12 @@
           <slot name="props-panel"></slot>
         </TMagicScrollbar>
       </template>
-    </layout>
+    </Layout>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, ref, watchEffect } from 'vue';
+import { computed, inject, ref, watch } from 'vue';
 
 import { TMagicScrollbar } from '@tmagic/design';
 import type { MApp } from '@tmagic/schema';
@@ -71,24 +71,61 @@ const root = computed(() => editorService?.get<MApp>('root'));
 
 const pageLength = computed(() => editorService?.get<number>('pageLength') || 0);
 const showSrc = computed(() => uiService?.get<boolean>('showSrc'));
+
+const LEFT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorLeftColumnWidthData';
+const RIGHT_COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorRightColumnWidthData';
+
+const leftColumnWidthCacheData = Number(globalThis.localStorage.getItem(LEFT_COLUMN_WIDTH_STORAGE_KEY));
+const RightColumnWidthCacheData = Number(globalThis.localStorage.getItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY));
+
 const columnWidth = ref<Partial<GetColumnWidth>>({
-  left: DEFAULT_LEFT_COLUMN_WIDTH,
+  left: leftColumnWidthCacheData,
   center: 0,
-  right: 0,
-});
-uiService?.set('columnWidth', columnWidth.value);
-
-watchEffect(() => {
-  if (pageLength.value <= 0) {
-    columnWidth.value.right = undefined;
-    columnWidth.value.center = globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH;
-  } else {
-    columnWidth.value.right = columnWidth.value.right || DEFAULT_RIGHT_COLUMN_WIDTH;
-    columnWidth.value.center =
-      globalThis.document.body.clientWidth - DEFAULT_LEFT_COLUMN_WIDTH - DEFAULT_RIGHT_COLUMN_WIDTH;
-  }
+  right: RightColumnWidthCacheData,
 });
 
+watch(
+  pageLength,
+  (length) => {
+    const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+
+    columnWidth.value.left = left;
+
+    if (length <= 0) {
+      columnWidth.value.right = undefined;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left;
+    } else {
+      const right = columnWidth.value.right || RightColumnWidthCacheData || DEFAULT_RIGHT_COLUMN_WIDTH;
+      columnWidth.value.right = right;
+      columnWidth.value.center = globalThis.document.body.clientWidth - left - right;
+    }
+
+    uiService?.set('columnWidth', columnWidth);
+  },
+  {
+    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}`);
+  },
+);
+
+const columnWidthChange = (columnWidth: GetColumnWidth) => {
+  uiService?.set('columnWidth', columnWidth);
+};
+
 const saveCode = (value: string) => {
   try {
     // eslint-disable-next-line no-eval
@@ -97,21 +134,4 @@ const saveCode = (value: string) => {
     console.error(e);
   }
 };
-
-const COLUMN_WIDTH_STORAGE_KEY = '$MagicEditorColumnWidthData';
-
-const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-if (columnWidthCacheData) {
-  try {
-    const columnWidthCache = JSON.parse(columnWidthCacheData);
-    columnWidth.value = columnWidthCache;
-  } catch (e) {
-    console.error(e);
-  }
-}
-
-const columnWidthChange = (columnWidth: GetColumnWidth) => {
-  uiService?.set('columnWidth', columnWidth);
-  globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
-};
 </script>

package/src/layouts/Layout.vue

@@ -74,8 +74,13 @@ const center = ref(0);
 
 const changeLeft = (deltaX: number) => {
   if (typeof props.left === 'undefined') return;
-  const left = Math.max(props.left + deltaX, props.minLeft) || 0;
+  let left = Math.max(props.left + deltaX, props.minLeft) || 0;
   emit('update:left', left);
+
+  if (clientWidth - left - (props.right || 0) <= 0) {
+    left = props.left;
+  }
+
   center.value = clientWidth - left - (props.right || 0);
 
   emit('change', {
@@ -87,8 +92,13 @@ const changeLeft = (deltaX: number) => {
 
 const changeRight = (deltaX: number) => {
   if (typeof props.right === 'undefined') return;
-  const right = Math.max(props.right - deltaX, props.minRight) || 0;
+  let right = Math.max(props.right - deltaX, props.minRight) || 0;
   emit('update:right', right);
+
+  if (clientWidth - (props.left || 0) - right <= 0) {
+    right = props.right;
+  }
+
   center.value = clientWidth - (props.left || 0) - right;
 
   emit('change', {