@tmagic/editor 1.0.0-rc.2 → 1.0.0-rc.5

package/dist/tmagic-editor.es.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, withDirectives, Teleport, vShow, toHandlers, createSlots, provide } from 'vue';
+import { defineComponent, computed, resolveComponent, openBlock, createBlock, normalizeStyle, ref, watchEffect, inject, markRaw, createElementBlock, createVNode, withCtx, withModifiers, createCommentVNode, createTextVNode, toDisplayString, watch, onMounted, onUnmounted, reactive, toRaw, createElementVNode, renderSlot, Fragment, normalizeClass, resolveDynamicComponent, renderList, normalizeProps, mergeProps, getCurrentInstance, nextTick, Teleport, toHandlers, createSlots, provide } from 'vue';
 import serialize from 'serialize-javascript';
 import { Delete, Pointer, Close, Plus, Edit, ArrowDown, Grid, ScaleToOriginal, ZoomOut, ZoomIn, Right, Back, Files, DocumentCopy, Coin, ArrowLeftBold, ArrowRightBold, CaretBottom, Top, Bottom } from '@element-plus/icons';
 import { throttle, cloneDeep, mergeWith, random } from 'lodash-es';
@@ -754,9 +754,12 @@ const toRelative = (node) => {
 };
 const setTop2Middle = (node, parentNode, stage) => {
   const style = node.style || {};
-  const height = style.height || 0;
-  if (!stage || typeof style.top !== "undefined" || !parentNode.style || !isNumber(height))
+  let height = style.height || 0;
+  if (!stage || typeof style.top !== "undefined" || !parentNode.style)
     return style;
+  if (!isNumber(height)) {
+    height = 0;
+  }
   const { height: parentHeight } = parentNode.style;
   if (isPage(parentNode)) {
     const { scrollTop = 0, wrapperHeight } = stage.mask;
@@ -945,6 +948,13 @@ class Editor$1 extends BaseService {
     } else {
       historyService.empty();
     }
+    if (node?.id) {
+      this.get("stage")?.renderer.runtime?.getApp?.()?.emit("editor:select", {
+        node,
+        page,
+        parent
+      }, getNodePath(node.id, this.get("root").items));
+    }
     this.emit("select", node);
     return node;
   }
@@ -1133,6 +1143,9 @@ class Editor$1 extends BaseService {
         ...position
       };
     }
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get("root"));
+    }
     return await this.add(config);
   }
   async alignCenter(config2) {
@@ -1142,7 +1155,17 @@ class Editor$1 extends BaseService {
     if (layout === Layout.RELATIVE) {
       return;
     }
-    if (parent.style?.width && node.style?.width) {
+    if (!node.style)
+      return;
+    const stage = this.get("stage");
+    const doc = stage?.renderer.contentWindow?.document;
+    if (doc) {
+      const parentEl = doc.getElementById(`${parent.id}`);
+      const el = doc.getElementById(`${node.id}`);
+      if (parentEl && el) {
+        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+      }
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
     await this.update(node);
@@ -2241,7 +2264,7 @@ const _sfc_main$a = defineComponent({
       visible.value = false;
     };
     onMounted(() => {
-      globalThis.addEventListener("mousedown", (e) => {
+      globalThis.addEventListener("mouseup", (e) => {
         if (!visible.value || e.target && menu.value?.contains(e.target)) {
           return;
         }
@@ -2265,7 +2288,7 @@ const _sfc_main$a = defineComponent({
           }
           menuStyle.value = {
             top: `${top}px`,
-            left: `${e.clientX}px`
+            left: `${e.clientX + 2}px`
           };
         });
       },
@@ -2288,7 +2311,7 @@ const _sfc_main$a = defineComponent({
 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_tool_button = resolveComponent("tool-button");
   const _component_content_menu = resolveComponent("content-menu", true);
-  return _ctx.menuData.length ? withDirectives((openBlock(), createElementBlock("div", {
+  return _ctx.menuData.length && _ctx.visible ? (openBlock(), createElementBlock("div", {
     key: 0,
     class: "magic-editor-content-menu",
     ref: "menu",
@@ -2312,9 +2335,7 @@ function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
         "menu-data": _ctx.subMenuData
       }, null, 8, ["menu-data"])
     ]))
-  ], 4)), [
-    [vShow, _ctx.visible]
-  ]) : createCommentVNode("", true);
+  ], 4)) : createCommentVNode("", true);
 }
 var ContentMenu = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
 
@@ -2614,7 +2635,7 @@ const _sfc_main$7 = defineComponent({
   components: { MIcon },
   props: {
     data: {
-      type: Object
+      type: [Object, String]
     }
   },
   setup(props) {
@@ -3217,8 +3238,17 @@ const _sfc_main$3 = defineComponent({
           text: "\u7C98\u8D34",
           display: () => canPaste.value,
           handler: () => {
-            const top = menu.value?.$el.offsetTop || 0;
-            const left = menu.value?.$el.offsetLeft || 0;
+            const stage = editorService?.get("stage");
+            const rect = menu.value?.$el.getBoundingClientRect();
+            const parentRect = stage?.container?.getBoundingClientRect();
+            let left = (rect?.left || 0) - (parentRect?.left || 0);
+            let top = (rect?.top || 0) - (parentRect?.top || 0);
+            if (node.value?.items && stage) {
+              const parentEl = stage.renderer.contentWindow?.document.getElementById(`${node.value.id}`);
+              const parentElRect = parentEl?.getBoundingClientRect();
+              left = left - (parentElRect?.left || 0);
+              top = top - (parentElRect?.top || 0);
+            }
             editorService?.paste({ left, top });
           }
         },
@@ -3313,6 +3343,7 @@ const _sfc_main$2 = defineComponent({
       type: Function
     },
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     canSelect: {
       type: Function,
       default: (el) => Boolean(el.id)
@@ -3348,6 +3379,7 @@ const _sfc_main$2 = defineComponent({
         render: props.render,
         runtimeUrl: props.runtimeUrl,
         zoom: zoom.value,
+        autoScrollIntoView: props.autoScrollIntoView,
         canSelect: (el, event, stop) => {
           const elCanSelect = props.canSelect(el);
           if (uiSelectMode.value && elCanSelect && event.type === "mousedown") {
@@ -3485,6 +3517,7 @@ const _sfc_main$1 = defineComponent({
   },
   props: {
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     render: {
       type: Function
     },
@@ -3512,10 +3545,7 @@ const _sfc_main$1 = defineComponent({
       keycon = new KeyController(workspace.value);
       const isMac = /mac os x/.test(navigator.userAgent.toLowerCase());
       const ctrl = isMac ? "meta" : "ctrl";
-      keycon.keydown((e) => {
-        console.log(e);
-        e.inputEvent.preventDefault();
-      }).keyup("delete", (e) => {
+      keycon.keyup("delete", (e) => {
         e.inputEvent.preventDefault();
         if (!node.value || isPage(node.value))
           return;
@@ -3525,46 +3555,65 @@ const _sfc_main$1 = defineComponent({
         if (!node.value || isPage(node.value))
           return;
         services?.editorService.remove(node.value);
-      }).keydown([ctrl, "c"], () => {
+      }).keydown([ctrl, "c"], (e) => {
+        e.inputEvent.preventDefault();
         node.value && services?.editorService.copy(node.value);
-      }).keydown([ctrl, "v"], () => {
+      }).keydown([ctrl, "v"], (e) => {
+        e.inputEvent.preventDefault();
         node.value && services?.editorService.paste();
-      }).keydown([ctrl, "x"], () => {
+      }).keydown([ctrl, "x"], (e) => {
+        e.inputEvent.preventDefault();
         if (!node.value || isPage(node.value))
           return;
         services?.editorService.copy(node.value);
         services?.editorService.remove(node.value);
-      }).keydown([ctrl, "z"], () => {
+      }).keydown([ctrl, "z"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.undo();
-      }).keydown([ctrl, "shift", "z"], () => {
+      }).keydown([ctrl, "shift", "z"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.redo();
-      }).keydown("up", () => {
+      }).keydown("up", (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(0, -1);
-      }).keydown("down", () => {
+      }).keydown("down", (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(0, 1);
-      }).keydown("left", () => {
+      }).keydown("left", (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(-1, 0);
-      }).keydown("right", () => {
+      }).keydown("right", (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(1, 0);
-      }).keydown([ctrl, "up"], () => {
+      }).keydown([ctrl, "up"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(0, -10);
-      }).keydown([ctrl, "down"], () => {
+      }).keydown([ctrl, "down"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(0, 10);
-      }).keydown([ctrl, "left"], () => {
+      }).keydown([ctrl, "left"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(-10, 0);
-      }).keydown([ctrl, "right"], () => {
+      }).keydown([ctrl, "right"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.move(10, 0);
-      }).keydown("tab", () => {
+      }).keydown("tab", (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.selectNextNode();
-      }).keydown([ctrl, "tab"], () => {
+      }).keydown([ctrl, "tab"], (e) => {
+        e.inputEvent.preventDefault();
         services?.editorService.selectNextPage();
-      }).keydown([ctrl, "="], () => {
+      }).keydown([ctrl, "="], (e) => {
+        e.inputEvent.preventDefault();
         services?.uiService.zoom(0.1);
-      }).keydown([ctrl, "numpadplus"], () => {
+      }).keydown([ctrl, "numpadplus"], (e) => {
+        e.inputEvent.preventDefault();
         services?.uiService.zoom(0.1);
-      }).keydown([ctrl, "-"], () => {
+      }).keydown([ctrl, "-"], (e) => {
+        e.inputEvent.preventDefault();
         services?.uiService.zoom(-0.1);
-      }).keydown([ctrl, "numpad-"], () => {
+      }).keydown([ctrl, "numpad-"], (e) => {
+        e.inputEvent.preventDefault();
         services?.uiService.zoom(-0.1);
       });
     });
@@ -3591,10 +3640,11 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
     (openBlock(), createBlock(_component_magic_stage, {
       key: _ctx.page?.id,
       "runtime-url": _ctx.runtimeUrl,
+      "auto-scroll-into-view": _ctx.autoScrollIntoView,
       render: _ctx.render,
       "moveable-options": _ctx.moveableOptions,
       "can-select": _ctx.canSelect
-    }, null, 8, ["runtime-url", "render", "moveable-options", "can-select"])),
+    }, null, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])),
     renderSlot(_ctx.$slots, "workspace-content"),
     createVNode(_component_page_bar, null, {
       "page-bar-title": withCtx(({ page }) => [
@@ -3771,6 +3821,7 @@ const _sfc_main = defineComponent({
       type: Function
     },
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
     propsConfigs: {
       type: Object,
       default: () => ({})
@@ -3871,6 +3922,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       renderSlot(_ctx.$slots, "workspace", {}, () => [
         createVNode(_component_workspace, {
           "runtime-url": _ctx.runtimeUrl,
+          "auto-scroll-into-view": _ctx.autoScrollIntoView,
           render: _ctx.render,
           "moveable-options": _ctx.moveableOptions,
           "can-select": _ctx.canSelect
@@ -3885,7 +3937,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             renderSlot(_ctx.$slots, "page-bar-popover", { page })
           ]),
           _: 3
-        }, 8, ["runtime-url", "render", "moveable-options", "can-select"])
+        }, 8, ["runtime-url", "auto-scroll-into-view", "render", "moveable-options", "can-select"])
       ])
     ]),
     propsPanel: withCtx(() => [