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

package/dist/tmagic-editor.umd.js

@@ -2550,8 +2550,11 @@
       const changeLeft = (deltaX) => {
         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", {
           left,
@@ -2562,8 +2565,11 @@
       const changeRight = (deltaX) => {
         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", {
           left: props.left,
@@ -2619,41 +2625,57 @@
       const root = vue.computed(() => editorService?.get("root"));
       const pageLength = vue.computed(() => editorService?.get("pageLength") || 0);
       const showSrc = vue.computed(() => uiService?.get("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 = vue.ref({
-        left: DEFAULT_LEFT_COLUMN_WIDTH,
+        left: leftColumnWidthCacheData,
         center: 0,
-        right: 0
+        right: RightColumnWidthCacheData
       });
-      uiService?.set("columnWidth", columnWidth.value);
-      vue.watchEffect(() => {
-        if (pageLength.value <= 0) {
-          columnWidth.value.right = void 0;
-          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;
+      vue.watch(
+        pageLength,
+        (length) => {
+          const left = columnWidth.value.left || DEFAULT_LEFT_COLUMN_WIDTH;
+          columnWidth.value.left = left;
+          if (length <= 0) {
+            columnWidth.value.right = void 0;
+            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
         }
-      });
-      const saveCode = (value) => {
-        try {
-          editorService?.set("root", eval(value));
-        } catch (e) {
-          console.error(e);
+      );
+      vue.watch(
+        () => columnWidth.value.right,
+        (right) => {
+          if (typeof right === "undefined")
+            return;
+          globalThis.localStorage.setItem(RIGHT_COLUMN_WIDTH_STORAGE_KEY, `${right}`);
         }
+      );
+      vue.watch(
+        () => columnWidth.value.left,
+        (left) => {
+          globalThis.localStorage.setItem(LEFT_COLUMN_WIDTH_STORAGE_KEY, `${left}`);
+        }
+      );
+      const columnWidthChange = (columnWidth2) => {
+        uiService?.set("columnWidth", columnWidth2);
       };
-      const COLUMN_WIDTH_STORAGE_KEY = "$MagicEditorColumnWidthData";
-      const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-      if (columnWidthCacheData) {
+      const saveCode = (value) => {
         try {
-          const columnWidthCache = JSON.parse(columnWidthCacheData);
-          columnWidth.value = columnWidthCache;
+          editorService?.set("root", eval(value));
         } catch (e) {
           console.error(e);
         }
-      }
-      const columnWidthChange = (columnWidth2) => {
-        uiService?.set("columnWidth", columnWidth2);
-        globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth2));
       };
       return (_ctx, _cache) => {
         const _component_magic_code_editor = vue.resolveComponent("magic-code-editor");