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

package/dist/tmagic-editor.mjs

@@ -2532,8 +2532,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     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,
@@ -2544,8 +2547,11 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     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,
@@ -2601,41 +2607,57 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const root = computed(() => editorService?.get("root"));
     const pageLength = computed(() => editorService?.get("pageLength") || 0);
     const showSrc = 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 = ref({
-      left: DEFAULT_LEFT_COLUMN_WIDTH,
+      left: leftColumnWidthCacheData,
       center: 0,
-      right: 0
+      right: RightColumnWidthCacheData
     });
-    uiService?.set("columnWidth", columnWidth.value);
-    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;
+    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);
+    );
+    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 = (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 = resolveComponent("magic-code-editor");