@tmagic/editor 1.1.2 → 1.1.4

package/dist/tmagic-editor.mjs

@@ -1200,7 +1200,7 @@ class Editor$1 extends BaseService {
     if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== 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 !== NodeType.PAGE) {
       const index = parent.items.indexOf(curNode);
       parent?.items?.splice(index + 1, 0, node);
     } else {
@@ -1417,12 +1417,15 @@ class Editor$1 extends BaseService {
     const node = this.get("node");
     const brothers = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
+    const layout = await this.getLayout(parent, node);
+    const isRelative = layout === Layout.RELATIVE;
+    brothers.splice(index, 1);
     if (offset === LayerOffset.TOP) {
-      brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(0, 0, brothers.splice(index, 1)[0]);
+      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
     } else {
-      brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
+      brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }
     const grandparent = this.getParentById(parent.id);
     this.get("stage")?.update({
@@ -1881,7 +1884,7 @@ const state = reactive({
 });
 class Ui extends BaseService {
   constructor() {
-    super([]);
+    super(["initColumnWidth", "zoom", "calcZoom"]);
     globalThis.addEventListener("resize", () => {
       this.setColumnWidth({
         center: "auto"
@@ -1909,7 +1912,7 @@ class Ui extends BaseService {
   get(name) {
     return state[name];
   }
-  initColumnWidth() {
+  async initColumnWidth() {
     const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
     if (columnWidthCacheData) {
       try {
@@ -1920,12 +1923,12 @@ class Ui extends BaseService {
       }
     }
   }
-  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)
@@ -1964,12 +1967,12 @@ class Ui extends BaseService {
     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();
@@ -2526,7 +2529,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             className: "scale-to-fit",
             icon: markRaw(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":
@@ -3418,25 +3421,29 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     const services = inject("services");
     const editorService = services?.editorService;
     const uiService = services?.uiService;
-    const pageBar = ref();
     const itemsContainer = ref();
-    const pageBarWidth = ref(0);
     const canScroll = ref(false);
     const showAddPageButton = computed(() => uiService?.get("showAddPageButton"));
-    const itemsContainerWidth = 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 = 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);
+      nextTick(() => {
+        if (itemsContainer.value) {
+          canScroll.value = itemsContainer.value.scrollWidth - itemsContainerWidth.value > 1;
+        }
+      });
     };
+    const resizeObserver = new ResizeObserver(() => {
+      setCanScroll();
+    });
+    const pageBar = ref();
+    onMounted(() => {
+      pageBar.value && resizeObserver.observe(pageBar.value);
+    });
+    onUnmounted(() => {
+      resizeObserver.disconnect();
+    });
+    let translateLeft = 0;
     const scroll = (type) => {
       if (!itemsContainer.value)
         return;
@@ -3458,14 +3465,8 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       }
       itemsContainer.value.style.transform = `translate(${translateLeft}px, 0px)`;
     };
-    onMounted(() => {
-      pageBar.value && resizeObserver.observe(pageBar.value);
-    });
-    onUnmounted(() => {
-      resizeObserver.disconnect();
-    });
-    const root = computed(() => editorService?.get("root"));
-    watch(() => root.value?.items.length, (length = 0, preLength = 0) => {
+    const pageLength = computed(() => editorService?.get("pageLength"));
+    watch(pageLength, (length = 0, preLength = 0) => {
       setTimeout(() => {
         setCanScroll();
         if (length < preLength) {
@@ -3485,7 +3486,6 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       editorService.add(pageConfig);
     };
     return (_ctx, _cache) => {
-      const _component_el_icon = resolveComponent("el-icon");
       return openBlock(), createElementBlock("div", {
         class: "m-editor-page-bar",
         ref_key: "pageBar",
@@ -3497,31 +3497,21 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: addPage
         }, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(unref(Plus))
-            ]),
-            _: 1
-          })
+          createVNode(_sfc_main$h, { icon: unref(Plus) }, null, 8, ["icon"])
         ])) : (openBlock(), createElementBlock("div", _hoisted_1$1)),
         canScroll.value ? (openBlock(), createElementBlock("div", {
           key: 2,
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[0] || (_cache[0] = ($event) => scroll("left"))
         }, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(unref(ArrowLeftBold))
-            ]),
-            _: 1
-          })
+          createVNode(_sfc_main$h, { icon: unref(ArrowLeftBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true),
-        unref(root) ? (openBlock(), createElementBlock("div", {
+        unref(pageLength) ? (openBlock(), createElementBlock("div", {
           key: 3,
           class: "m-editor-page-bar-items",
           ref_key: "itemsContainer",
           ref: itemsContainer,
-          style: normalizeStyle(`width: ${unref(itemsContainerWidth)}px`)
+          style: normalizeStyle(`width: ${itemsContainerWidth.value}px`)
         }, [
           renderSlot(_ctx.$slots, "default")
         ], 4)) : createCommentVNode("", true),
@@ -3530,12 +3520,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
           class: "m-editor-page-bar-item m-editor-page-bar-item-icon",
           onClick: _cache[1] || (_cache[1] = ($event) => scroll("right"))
         }, [
-          createVNode(_component_el_icon, null, {
-            default: withCtx(() => [
-              createVNode(unref(ArrowRightBold))
-            ]),
-            _: 1
-          })
+          createVNode(_sfc_main$h, { icon: unref(ArrowRightBold) }, null, 8, ["icon"])
         ])) : createCommentVNode("", true)
       ], 512);
     };
@@ -3662,6 +3647,7 @@ class ScrollViewer extends EventEmitter {
     this.setSize();
     this.setScrollSize();
     this.resizeObserver.observe(this.container);
+    this.resizeObserver.observe(this.target);
   }
   destroy() {
     this.resizeObserver.disconnect();
@@ -4314,9 +4300,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }).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);
@@ -4330,7 +4316,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         class: "m-editor-workspace",
-        tabindex: "1",
+        tabindex: "-1",
         ref_key: "workspace",
         ref: workspace
       }, [