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

package/dist/types/src/Editor.vue.d.ts

@@ -34,6 +34,8 @@ declare const _default: DefineComponent<{
     };
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: StringConstructor;
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: BooleanConstructor;
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
         type: PropType<Record<string, FormConfig>>;
@@ -97,6 +99,8 @@ declare const _default: DefineComponent<{
     };
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: StringConstructor;
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: BooleanConstructor;
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
         type: PropType<Record<string, FormConfig>>;
@@ -135,6 +139,7 @@ declare const _default: DefineComponent<{
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     menu: MenuBarData;
+    autoScrollIntoView: boolean;
     codeOptions: Record<string, any>;
     modelValue: MApp;
     componentGroupList: ComponentGroup[];

package/dist/types/src/layouts/workspace/Workspace.vue.d.ts

@@ -4,6 +4,7 @@ import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
 declare const _default: DefineComponent<{
     runtimeUrl: StringConstructor;
+    autoScrollIntoView: BooleanConstructor;
     render: {
         type: PropType<() => HTMLDivElement>;
     };
@@ -18,6 +19,7 @@ declare const _default: DefineComponent<{
     page: ComputedRef<MPage | undefined>;
 }, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
     runtimeUrl: StringConstructor;
+    autoScrollIntoView: BooleanConstructor;
     render: {
         type: PropType<() => HTMLDivElement>;
     };
@@ -27,5 +29,7 @@ declare const _default: DefineComponent<{
     canSelect: {
         type: PropType<(el: HTMLElement) => boolean | Promise<boolean>>;
     };
-}>>, {}>;
+}>>, {
+    autoScrollIntoView: boolean;
+}>;
 export default _default;

package/dist/types/src/services/BaseService.d.ts

@@ -27,7 +27,7 @@ import { EventEmitter } from 'events';
  *    editorService.afterAdd();
  *   }
  *
- * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
  *
  * 方法2：

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0-rc.5",
   "name": "@tmagic/editor",
   "sideEffects": [
     "dist/*",
@@ -45,11 +45,11 @@
   "dependencies": {
     "@babel/core": "^7.18.0",
     "@element-plus/icons": "0.0.11",
-    "@tmagic/core": "^1.0.0-rc.2",
-    "@tmagic/form": "^1.0.0-rc.2",
-    "@tmagic/schema": "^1.0.0-rc.2",
-    "@tmagic/stage": "^1.0.0-rc.2",
-    "@tmagic/utils": "^1.0.0-rc.2",
+    "@tmagic/core": "^1.0.0-rc.5",
+    "@tmagic/form": "^1.0.0-rc.5",
+    "@tmagic/schema": "^1.0.0-rc.5",
+    "@tmagic/stage": "^1.0.0-rc.5",
+    "@tmagic/utils": "^1.0.0-rc.5",
     "buffer": "^6.0.3",
     "color": "^3.1.3",
     "element-plus": "^2.2.0",
@@ -88,5 +88,5 @@
     "vite-plugin-dts": "^0.9.6",
     "vue-tsc": "^0.0.24"
   },
-  "gitHead": "3e309780ed33640ab3fc986a93dd0e7b15c167e5"
+  "gitHead": "d147b361d7e6123cda99c6ba68a2ac7e074be37f"
 }

package/src/Editor.vue

@@ -14,6 +14,7 @@
       <slot name="workspace">
         <workspace
           :runtime-url="runtimeUrl"
+          :auto-scroll-into-view="autoScrollIntoView"
           :render="render"
           :moveable-options="moveableOptions"
           :can-select="canSelect"
@@ -101,6 +102,9 @@ export default defineComponent({
     /** 中间工作区域中画布通过iframe渲染时的页面url */
     runtimeUrl: String,
 
+    /** 选中时是否自动滚动到可视区域 */
+    autoScrollIntoView: Boolean,
+
     /** 组件的属性配置表单的dsl */
     propsConfigs: {
       type: Object as PropType<Record<string, FormConfig>>,

package/src/components/ContentMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="menuData.length" v-show="visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
+  <div v-if="menuData.length && visible" class="magic-editor-content-menu" ref="menu" :style="menuStyle">
     <div>
       <tool-button
         v-for="(item, index) in menuData"
@@ -49,7 +49,7 @@ export default defineComponent({
 
     onMounted(() => {
       globalThis.addEventListener(
-        'mousedown',
+        'mouseup',
         (e: MouseEvent) => {
           if (!visible.value || (e.target && menu.value?.contains(e.target as HTMLElement))) {
             return;
@@ -82,7 +82,7 @@ export default defineComponent({
 
           menuStyle.value = {
             top: `${top}px`,
-            left: `${e.clientX}px`,
+            left: `${e.clientX + 2}px`,
           };
         });
       },

package/src/layouts/sidebar/TabPane.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 
   props: {
     data: {
-      type: Object as PropType<SideItem>,
+      type: [Object, String] as PropType<SideItem>,
     },
   },
 

package/src/layouts/workspace/Stage.vue

@@ -59,6 +59,7 @@ export default defineComponent({
     },
 
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
 
     canSelect: {
       type: Function as PropType<(el: HTMLElement) => boolean | Promise<boolean>>,
@@ -100,6 +101,7 @@ export default defineComponent({
         render: props.render,
         runtimeUrl: props.runtimeUrl,
         zoom: zoom.value,
+        autoScrollIntoView: props.autoScrollIntoView,
         canSelect: (el, event, stop) => {
           const elCanSelect = props.canSelect(el);
           // 在组件联动过程中不能再往下选择，返回并触发 ui-select

package/src/layouts/workspace/ViewerMenu.vue

@@ -69,8 +69,20 @@ export default defineComponent({
           text: '粘贴',
           display: () => canPaste.value,
           handler: () => {
-            const top = menu.value?.$el.offsetTop || 0;
-            const left = menu.value?.$el.offsetLeft || 0;
+            const stage = editorService?.get<StageCore>('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 });
           },
         },

package/src/layouts/workspace/Workspace.vue

@@ -3,6 +3,7 @@
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
+      :auto-scroll-into-view="autoScrollIntoView"
       :render="render"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
@@ -41,6 +42,7 @@ export default defineComponent({
 
   props: {
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
 
     render: {
       type: Function as PropType<() => HTMLDivElement>,
@@ -80,10 +82,6 @@ export default defineComponent({
       const ctrl = isMac ? 'meta' : 'ctrl';
 
       keycon
-        .keydown((e) => {
-          console.log(e);
-          e.inputEvent.preventDefault();
-        })
         .keyup('delete', (e) => {
           e.inputEvent.preventDefault();
           if (!node.value || isPage(node.value)) return;
@@ -94,63 +92,82 @@ export default 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);
         });
     });

package/src/services/BaseService.ts

@@ -91,7 +91,7 @@ const doAction = async (
  *    editorService.afterAdd();
  *   }
  *
- * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after最后一个参数则是原方法的return值;
+ * 调用时的参数会透传到before方法的参数中, 然后before的return 会作为原方法的参数和after的参数，after第一个参数则是原方法的return值;
  * 如需终止后续方法调用可以return new Error();
  *
  * 方法2：

package/src/services/editor.ts

@@ -33,6 +33,7 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  generatePageNameByApp,
   getNodeIndex,
   initPosition,
   isFixed,
@@ -194,6 +195,20 @@ class Editor extends BaseService {
       historyService.empty();
     }
 
+    if (node?.id) {
+      this.get<StageCore>('stage')
+        ?.renderer.runtime?.getApp?.()
+        ?.emit(
+          'editor:select',
+          {
+            node,
+            page,
+            parent,
+          },
+          getNodePath(node.id, this.get<MApp>('root').items),
+        );
+    }
+
     this.emit('select', node);
 
     return node!;
@@ -488,6 +503,10 @@ class Editor extends BaseService {
       };
     }
 
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get('root'));
+    }
+
     return await this.add(config);
   }
 
@@ -504,7 +523,18 @@ class Editor extends BaseService {
       return;
     }
 
-    if (parent.style?.width && node.style?.width) {
+    if (!node.style) return;
+
+    const stage = this.get<StageCore>('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;
     }
 

package/src/utils/editor.ts

@@ -142,9 +142,13 @@ export const toRelative = (node: MNode) => {
 
 const setTop2Middle = (node: MNode, parentNode: MNode, stage: StageCore) => {
   const style = node.style || {};
-  const height = style.height || 0;
+  let height = style.height || 0;
 
-  if (!stage || typeof style.top !== 'undefined' || !parentNode.style || !isNumber(height)) return style;
+  if (!stage || typeof style.top !== 'undefined' || !parentNode.style) return style;
+
+  if (!isNumber(height)) {
+    height = 0;
+  }
 
   const { height: parentHeight } = parentNode.style;