@tmagic/editor 1.1.3 → 1.1.4

package/dist/tmagic-editor.umd.js

@@ -1218,7 +1218,7 @@
       if ((parent?.type === schema.NodeType.ROOT || curNode.type === schema.NodeType.ROOT) && node.type !== schema.NodeType.PAGE) {
         throw new Error("app\u4E0B\u4E0D\u80FD\u6DFB\u52A0\u7EC4\u4EF6");
       }
-      if (parent.id !== curNode.id) {
+      if (parent.id !== curNode.id && node.type !== schema.NodeType.PAGE) {
         const index = parent.items.indexOf(curNode);
         parent?.items?.splice(index + 1, 0, node);
       } else {
@@ -1902,7 +1902,7 @@
   });
   class Ui extends BaseService {
     constructor() {
-      super([]);
+      super(["initColumnWidth", "zoom", "calcZoom"]);
       globalThis.addEventListener("resize", () => {
         this.setColumnWidth({
           center: "auto"
@@ -1930,7 +1930,7 @@
     get(name) {
       return state[name];
     }
-    initColumnWidth() {
+    async initColumnWidth() {
       const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
       if (columnWidthCacheData) {
         try {
@@ -1941,12 +1941,12 @@
         }
       }
     }
-    zoom(zoom) {
+    async zoom(zoom) {
       this.set("zoom", (this.get("zoom") * 100 + zoom * 100) / 100);
       if (this.get("zoom") < 0.1)
         this.set("zoom", 0.1);
     }
-    calcZoom() {
+    async calcZoom() {
       const { stageRect, stageContainerRect } = state;
       const { height, width } = stageContainerRect;
       if (!width || !height)
@@ -1985,12 +1985,12 @@
       globalThis.localStorage.setItem(COLUMN_WIDTH_STORAGE_KEY, JSON.stringify(columnWidth));
       state.columnWidth = columnWidth;
     }
-    setStageRect(value) {
+    async setStageRect(value) {
       state.stageRect = {
         ...state.stageRect,
         ...value
       };
-      state.zoom = this.calcZoom();
+      state.zoom = await this.calcZoom();
     }
   }
   const uiService = new Ui();
@@ -2547,7 +2547,7 @@
               className: "scale-to-fit",
               icon: vue.markRaw(iconsVue.FullScreen),
               tooltip: `\u7F29\u653E\u4EE5\u9002\u5E94(${ctrl}+0)`,
-              handler: () => uiService?.set("zoom", uiService.calcZoom())
+              handler: async () => uiService?.set("zoom", await uiService.calcZoom())
             });
             break;
           case "rule":
@@ -3439,25 +3439,29 @@
       const services = vue.inject("services");
       const editorService = services?.editorService;
       const uiService = services?.uiService;
-      const pageBar = vue.ref();
       const itemsContainer = vue.ref();
-      const pageBarWidth = vue.ref(0);
       const canScroll = vue.ref(false);
       const showAddPageButton = vue.computed(() => uiService?.get("showAddPageButton"));
-      const itemsContainerWidth = vue.computed(() => pageBarWidth.value - 35 * 2 - (showAddPageButton.value ? 35 : 21));
-      let translateLeft = 0;
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const { contentRect } of entries) {
-          const { width } = contentRect;
-          pageBarWidth.value = width || 0;
-          setCanScroll();
-        }
-      });
+      const itemsContainerWidth = vue.ref(0);
       const setCanScroll = () => {
-        if (itemsContainer.value) {
-          canScroll.value = itemsContainer.value.scrollWidth > itemsContainerWidth.value;
-        }
+        itemsContainerWidth.value = (pageBar.value?.clientWidth || 0) - 37 * 2 - (showAddPageButton.value ? 37 : 21);
+        vue.nextTick(() => {
+          if (itemsContainer.value) {
+            canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+          }
+        });
       };
+      const resizeObserver = new ResizeObserver(() => {
+        setCanScroll();
+      });
+      const pageBar = vue.ref();
+      vue.onMounted(() => {
+        pageBar.value && resizeObserver.observe(pageBar.value);
+      });
+      vue.onUnmounted(() => {
+        resizeObserver.disconnect();
+      });
+      let translateLeft = 0;
       const scroll = (type) => {
         if (!itemsContainer.value)
           return;
@@ -3479,14 +3483,8 @@
         }
         itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
       };
-      vue.onMounted(() => {
-        pageBar.value && resizeObserver.observe(pageBar.value);
-      });
-      vue.onUnmounted(() => {
-        resizeObserver.disconnect();
-      });
-      const root = vue.computed(() => editorService?.get("root"));
-      vue.watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+      const pageLength = vue.computed(() => editorService?.get("pageLength"));
+      vue.watch(pageLength, (length = 0, preLength = 0) => {
         setTimeout(() => {
           setCanScroll();
           if (length < preLength) {
@@ -3506,7 +3504,6 @@
         editorService.add(pageConfig);
       };
       return (_ctx, _cache) => {
-        const _component_el_icon = vue.resolveComponent("el-icon");
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-page-bar",
           ref_key: "pageBar",
@@ -3518,31 +3515,21 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: addPage
           }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(iconsVue.Plus))
-              ]),
-              _: 1
-            })
+            vue.createVNode(_sfc_main$h, { icon: vue.unref(iconsVue.Plus) }, null, 8, ["icon"])
           ])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1)),
           canScroll.value ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 2,
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
           }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(iconsVue.ArrowLeftBold))
-              ]),
-              _: 1
-            })
+            vue.createVNode(_sfc_main$h, { icon: vue.unref(iconsVue.ArrowLeftBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true),
-          vue.unref(root) ? (vue.openBlock(), vue.createElementBlock("div", {
+          vue.unref(pageLength) ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 3,
             class: "m-editor-page-bar-items",
             ref_key: "itemsContainer",
             ref: itemsContainer,
-            style: vue.normalizeStyle(`width: ${vue.unref(itemsContainerWidth)}px`)
+            style: vue.normalizeStyle(`width: ${itemsContainerWidth.value}px`)
           }, [
             vue.renderSlot(_ctx.$slots, "default")
           ], 4)) : vue.createCommentVNode("", true),
@@ -3551,12 +3538,7 @@
             class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
             onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
           }, [
-            vue.createVNode(_component_el_icon, null, {
-              default: vue.withCtx(() => [
-                vue.createVNode(vue.unref(iconsVue.ArrowRightBold))
-              ]),
-              _: 1
-            })
+            vue.createVNode(_sfc_main$h, { icon: vue.unref(iconsVue.ArrowRightBold) }, null, 8, ["icon"])
           ])) : vue.createCommentVNode("", true)
         ], 512);
       };
@@ -3683,6 +3665,7 @@
       this.setSize();
       this.setScrollSize();
       this.resizeObserver.observe(this.container);
+      this.resizeObserver.observe(this.target);
     }
     destroy() {
       this.resizeObserver.disconnect();
@@ -4335,9 +4318,9 @@
         }).keydown([ctrl, "numpad-"], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.zoom(-0.1);
-        }).keydown([ctrl, "0"], (e) => {
+        }).keydown([ctrl, "0"], async (e) => {
           e.inputEvent.preventDefault();
-          services?.uiService.set("zoom", services.uiService.calcZoom());
+          services?.uiService.set("zoom", await services.uiService.calcZoom());
         }).keydown([ctrl, "1"], (e) => {
           e.inputEvent.preventDefault();
           services?.uiService.set("zoom", 1);
@@ -4351,7 +4334,7 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
           class: "m-editor-workspace",
-          tabindex: "1",
+          tabindex: "-1",
           ref_key: "workspace",
           ref: workspace
         }, [