@tmagic/editor 1.0.0-beta.9 → 1.0.0-rc.3

package/src/layouts/workspace/Workspace.vue

@@ -1,15 +1,12 @@
 <template>
-  <div class="m-editor-workspace">
+  <div class="m-editor-workspace" tabindex="1" ref="workspace">
     <magic-stage
       :key="page?.id"
       :runtime-url="runtimeUrl"
+      :auto-scroll-into-view="autoScrollIntoView"
       :render="render"
       :moveable-options="moveableOptions"
       :can-select="canSelect"
-      @select="selectHandler"
-      @highlight="highlightHandler"
-      @update="updateNodeHandler"
-      @sort="sortNodeHandler"
     ></magic-stage>
 
     <slot name="workspace-content"></slot>
@@ -22,11 +19,13 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType } from 'vue';
+import { computed, defineComponent, inject, onMounted, onUnmounted, PropType, ref } from 'vue';
+import KeyController from 'keycon';
 
-import type { MComponent, MContainer, MPage } from '@tmagic/schema';
-import type { MoveableOptions, SortEventData } from '@tmagic/stage';
+import type { MNode, MPage } from '@tmagic/schema';
+import type { MoveableOptions } from '@tmagic/stage';
 import StageCore from '@tmagic/stage';
+import { isPage } from '@tmagic/utils';
 
 import type { Services } from '@editor/type';
 
@@ -43,6 +42,7 @@ export default defineComponent({
 
   props: {
     runtimeUrl: String,
+    autoScrollIntoView: Boolean,
 
     render: {
       type: Function as PropType<() => HTMLDivElement>,
@@ -59,25 +59,114 @@ export default defineComponent({
 
   setup() {
     const services = inject<Services>('services');
+    const workspace = ref<HTMLDivElement>();
+    const node = computed(() => services?.editorService.get<MNode>('node'));
+    let keycon: KeyController;
 
-    return {
-      page: computed(() => services?.editorService.get<MPage>('page')),
+    const mouseenterHandler = () => {
+      workspace.value?.focus();
+    };
 
-      selectHandler(el: HTMLElement) {
-        services?.editorService.select(el.id);
-      },
+    const mouseleaveHandler = () => {
+      workspace.value?.blur();
+    };
 
-      updateNodeHandler(node: MComponent | MContainer | MPage) {
-        services?.editorService.update(node);
-      },
+    onMounted(() => {
+      workspace.value?.addEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.addEventListener('mouseleave', mouseleaveHandler);
+
+      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) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keyup('backspace', (e) => {
+          e.inputEvent.preventDefault();
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'c'], () => {
+          node.value && services?.editorService.copy(node.value);
+        })
+        .keydown([ctrl, 'v'], () => {
+          node.value && services?.editorService.paste();
+        })
+        .keydown([ctrl, 'x'], () => {
+          if (!node.value || isPage(node.value)) return;
+          services?.editorService.copy(node.value);
+          services?.editorService.remove(node.value);
+        })
+        .keydown([ctrl, 'z'], () => {
+          services?.editorService.undo();
+        })
+        .keydown([ctrl, 'shift', 'z'], () => {
+          services?.editorService.redo();
+        })
+        .keydown('up', () => {
+          services?.editorService.move(0, -1);
+        })
+        .keydown('down', () => {
+          services?.editorService.move(0, 1);
+        })
+        .keydown('left', () => {
+          services?.editorService.move(-1, 0);
+        })
+        .keydown('right', () => {
+          services?.editorService.move(1, 0);
+        })
+        .keydown([ctrl, 'up'], () => {
+          services?.editorService.move(0, -10);
+        })
+        .keydown([ctrl, 'down'], () => {
+          services?.editorService.move(0, 10);
+        })
+        .keydown([ctrl, 'left'], () => {
+          services?.editorService.move(-10, 0);
+        })
+        .keydown([ctrl, 'right'], () => {
+          services?.editorService.move(10, 0);
+        })
+        .keydown('tab', () => {
+          services?.editorService.selectNextNode();
+        })
+        .keydown([ctrl, 'tab'], () => {
+          services?.editorService.selectNextPage();
+        })
+        .keydown([ctrl, '='], () => {
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, 'numpadplus'], () => {
+          services?.uiService.zoom(0.1);
+        })
+        .keydown([ctrl, '-'], () => {
+          services?.uiService.zoom(-0.1);
+        })
+        .keydown([ctrl, 'numpad-'], () => {
+          services?.uiService.zoom(-0.1);
+        });
+    });
+
+    onUnmounted(() => {
+      workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
+      workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
+      keycon.destroy();
+    });
 
-      sortNodeHandler(ev: SortEventData) {
-        services?.editorService.sort(ev.src, ev.dist);
-      },
+    return {
+      workspace,
 
-      highlightHandler(el: HTMLElement) {
-        services?.editorService.highlight(el.id);
-      },
+      page: computed(() => services?.editorService.get<MPage>('page')),
     };
   },
 });

package/src/services/BaseService.ts

@@ -24,6 +24,46 @@ const methodName = (prefix: string, name: string) => `${prefix}${name[0].toUpper
 
 const isError = (error: any): boolean => Object.prototype.toString.call(error) === '[object Error]';
 
+const doAction = async (
+  args: any[],
+  scope: any,
+  sourceMethod: any,
+  beforeMethodName: string,
+  afterMethodName: string,
+  fn: (args: any[], next?: Function | undefined) => Promise<void>,
+) => {
+  try {
+    let beforeArgs = args;
+
+    for (const beforeMethod of scope.pluginOptionsList[beforeMethodName]) {
+      let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
+
+      if (isError(beforeReturnValue)) throw beforeReturnValue;
+
+      if (!Array.isArray(beforeReturnValue)) {
+        beforeReturnValue = [beforeReturnValue];
+      }
+
+      beforeArgs = beforeArgs.map((v: any, index: number) => {
+        if (typeof beforeReturnValue[index] === 'undefined') return v;
+        return beforeReturnValue[index];
+      });
+    }
+
+    let returnValue: any = await fn(beforeArgs, sourceMethod.bind(scope));
+
+    for (const afterMethod of scope.pluginOptionsList[afterMethodName]) {
+      returnValue = await afterMethod(returnValue, ...beforeArgs);
+
+      if (isError(returnValue)) throw returnValue;
+    }
+
+    return returnValue;
+  } catch (error) {
+    throw error;
+  }
+};
+
 /**
  * 提供两种方式对Class进行扩展
  * 方法1：
@@ -74,8 +114,10 @@ const isError = (error: any): boolean => Object.prototype.toString.call(error) =
 export default class extends EventEmitter {
   private pluginOptionsList: Record<string, Function[]> = {};
   private middleware: Record<string, Function[]> = {};
+  private taskList: (() => Promise<void>)[] = [];
+  private doingTask = false;
 
-  constructor(methods: string[]) {
+  constructor(methods: string[] = [], serialMethods: string[] = []) {
     super();
 
     methods.forEach((propertyName: string) => {
@@ -93,32 +135,28 @@ export default class extends EventEmitter {
       const fn = compose(this.middleware[propertyName]);
       Object.defineProperty(scope, propertyName, {
         value: async (...args: any[]) => {
-          let beforeArgs = args;
-
-          for (const beforeMethod of this.pluginOptionsList[beforeMethodName]) {
-            let beforeReturnValue = (await beforeMethod(...beforeArgs)) || [];
-
-            if (isError(beforeReturnValue)) throw beforeReturnValue;
-
-            if (!Array.isArray(beforeReturnValue)) {
-              beforeReturnValue = [beforeReturnValue];
-            }
-
-            beforeArgs = beforeArgs.map((v: any, index: number) => {
-              if (typeof beforeReturnValue[index] === 'undefined') return v;
-              return beforeReturnValue[index];
-            });
+          if (!serialMethods.includes(propertyName)) {
+            return doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
           }
 
-          let returnValue = await fn(beforeArgs, sourceMethod.bind(scope));
-
-          for (const afterMethod of this.pluginOptionsList[afterMethodName]) {
-            returnValue = await afterMethod(...beforeArgs, returnValue);
+          // 由于async await，所以会出现函数执行到await时让出线程，导致执行顺序出错，例如调用了select(1) -> update -> select(2)，这个时候就有可能出现update了2；
+          // 这里保证函数调用严格按顺序执行；
+          const promise = new Promise<any>((resolve, reject) => {
+            this.taskList.push(async () => {
+              try {
+                const value = await doAction(args, scope, sourceMethod, beforeMethodName, afterMethodName, fn);
+                resolve(value);
+              } catch (e) {
+                reject(e);
+              }
+            });
+          });
 
-            if (isError(returnValue)) throw returnValue;
+          if (!this.doingTask) {
+            this.doTask();
           }
 
-          return returnValue;
+          return promise;
         },
       });
     });
@@ -135,4 +173,14 @@ export default class extends EventEmitter {
       if (typeof method === 'function') this.pluginOptionsList[methodName].push(method);
     });
   }
+
+  private async doTask() {
+    this.doingTask = true;
+    let task = this.taskList.shift();
+    while (task) {
+      await task();
+      task = this.taskList.shift();
+    }
+    this.doingTask = false;
+  }
 }

package/src/services/editor.ts

@@ -22,8 +22,8 @@ import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
-import { getNodePath, isPop } from '@tmagic/utils';
+import StageCore from '@tmagic/stage';
+import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
 import historyService, { StepValue } from '@editor/services/history';
 import propsService from '@editor/services/props';
@@ -54,24 +54,30 @@ class Editor extends BaseService {
     stage: null,
     highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   constructor() {
-    super([
-      'getLayout',
-      'select',
-      'add',
-      'remove',
-      'update',
-      'sort',
-      'copy',
-      'paste',
-      'alignCenter',
-      'moveLayer',
-      'undo',
-      'redo',
-      'highlight',
-    ]);
+    super(
+      [
+        'getLayout',
+        'select',
+        'add',
+        'remove',
+        'update',
+        'sort',
+        'copy',
+        'paste',
+        'alignCenter',
+        'moveLayer',
+        'move',
+        'undo',
+        'redo',
+        'highlight',
+      ],
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ['select', 'update', 'moveLayer'],
+    );
   }
 
   /**
@@ -85,6 +91,7 @@ class Editor extends BaseService {
     log('store set ', name, ' ', value);
 
     if (name === 'root') {
+      this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
       this.emit('root-change', value);
     }
   }
@@ -104,7 +111,7 @@ class Editor extends BaseService {
    * @returns {EditorNodeInfo}
    */
   public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = this.get<MApp | null>('root');
+    const root = toRaw(this.get<MApp | null>('root'));
     if (!root) return {};
 
     if (id === root.id) {
@@ -155,13 +162,15 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(node: MNode): Promise<Layout> {
-    if (node.layout) {
-      return node.layout;
+  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+
+    if (parent.layout) {
+      return parent.layout;
     }
 
     // 如果该节点没有设置position，则认为是流式布局，例如获取root的布局时
-    if (!node.style?.position) {
+    if (!parent.style?.position) {
       return Layout.RELATIVE;
     }
 
@@ -184,9 +193,45 @@ class Editor extends BaseService {
     } else {
       historyService.empty();
     }
+
+    this.emit('select', node);
+
     return node!;
   }
 
+  public async selectNextNode(): Promise<MNode> | never {
+    const node = toRaw(this.get('node'));
+
+    if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
+
+    const parent = toRaw(this.getParentById(node.id));
+
+    if (!parent) return node;
+
+    const index = getNodeIndex(node, parent);
+
+    const nextNode = parent.items[index + 1] || parent.items[0];
+
+    await this.select(nextNode);
+    this.get<StageCore>('stage')?.select(nextNode.id);
+
+    return nextNode;
+  }
+
+  public async selectNextPage(): Promise<MNode> | never {
+    const root = toRaw(this.get<MApp>('root'));
+    const page = toRaw(this.get('page'));
+
+    const index = getNodeIndex(page, root);
+
+    const nextPage = root.items[index + 1] || root.items[0];
+
+    await this.select(nextPage);
+    this.get<StageCore>('stage')?.select(nextPage.id);
+
+    return nextPage;
+  }
+
   /**
    * 高亮指定节点
    * @param config 指定节点配置或者ID
@@ -194,8 +239,8 @@ class Editor extends BaseService {
    */
   public highlight(config: MNode | Id): void {
     const { node } = this.selectedConfigExceptionHandler(config);
-    const currentHighligtNode = this.get('highlightNode');
-    if (currentHighligtNode === node) return;
+    const currentHighlightNode = this.get('highlightNode');
+    if (currentHighlightNode === node) return;
     this.set('highlightNode', node);
   }
 
@@ -205,12 +250,14 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
+    const { type, ...config } = addNode;
     const curNode = this.get<MContainer>('node');
 
     let parentNode: MNode | undefined;
+    const isPage = type === NodeType.PAGE;
 
-    if (type === NodeType.PAGE) {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -223,8 +270,13 @@ class Editor extends BaseService {
 
     if (!parentNode) throw new Error('未找到父元素');
 
-    const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
+    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
+    const newNode = initPosition(
+      { ...toRaw(await propsService.getPropsValue(type, config)) },
+      layout,
+      parentNode,
+      this.get<StageCore>('stage'),
+    );
 
     if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
@@ -232,15 +284,25 @@ class Editor extends BaseService {
 
     parentNode?.items?.push(newNode);
 
-    await this.get<StageCore>('stage')?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+    const stage = this.get<StageCore | null>('stage');
+
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
 
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    if (type !== NodeType.PAGE) {
+    if (!isPage) {
       this.pushHistoryState();
     }
 
+    stage?.select(newNode.id);
+
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
+    this.emit('add', newNode);
+
     return newNode;
   }
 
@@ -265,17 +327,38 @@ class Editor extends BaseService {
     if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
 
     parent.items?.splice(index, 1);
-    this.get<StageCore>('stage')?.remove({ id: node.id, root: this.get('root') });
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, root: this.get('root') });
 
     if (node.type === NodeType.PAGE) {
-      await this.select(root.items[0] || root);
+      this.state.pageLength -= 1;
+
+      if (root.items[0]) {
+        await this.select(root.items[0]);
+        stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        this.emit('remove', node);
+
+        return node;
+      }
     } else {
       await this.select(parent);
+      stage?.select(parent.id);
     }
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
 
+    this.emit('remove', node);
+
     return node;
   }
 
@@ -324,11 +407,11 @@ class Editor extends BaseService {
 
     parentNodeItems[index] = newConfig;
 
-    if (newConfig.id === this.get('node').id) {
+    if (`${newConfig.id}` === `${this.get('node').id}`) {
       this.set('node', newConfig);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
 
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
@@ -337,6 +420,8 @@ class Editor extends BaseService {
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
 
+    this.emit('update', newConfig);
+
     return newConfig;
   }
 
@@ -359,7 +444,7 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -414,7 +499,7 @@ class Editor extends BaseService {
   public async alignCenter(config: MNode): Promise<MNode | void> {
     const parent = this.get<MContainer>('parent');
     const node = this.get<MNode>('node');
-    const layout = await this.getLayout(parent);
+    const layout = await this.getLayout(toRaw(parent), toRaw(node));
     if (layout === Layout.RELATIVE) {
       return;
     }
@@ -424,7 +509,7 @@ class Editor extends BaseService {
     }
 
     await this.update(node);
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
     this.addModifiedNodeId(config.id);
     this.pushHistoryState();
 
@@ -449,7 +534,7 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
   }
 
   /**
@@ -472,6 +557,26 @@ class Editor extends BaseService {
     return value;
   }
 
+  public async move(left: number, top: number) {
+    const node = toRaw(this.get('node'));
+    if (!node || isPage(node)) return;
+
+    const { style, id } = node;
+    if (!style || style.position !== 'absolute') return;
+
+    if (top && !isNumber(style.top)) return;
+    if (left && !isNumber(style.left)) return;
+
+    this.update({
+      id,
+      style: {
+        ...style,
+        left: Number(style.left) + left,
+        top: Number(style.top) + top,
+      },
+    });
+  }
+
   public destroy() {
     this.removeAllListeners();
     this.set('root', null);
@@ -508,7 +613,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+    setTimeout(async () => {
+      if (!value.nodeId) return;
+      await this.select(value.nodeId);
+      this.get<StageCore | null>('stage')?.select(value.nodeId);
+    }, 0);
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {

package/src/services/history.ts

@@ -51,6 +51,13 @@ class History extends BaseService {
     this.on('change', this.setCanUndoRedo);
   }
 
+  public reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = undefined;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
   public changePage(page: MPage): void {
     if (!page) return;
 

package/src/services/props.ts

@@ -17,7 +17,7 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
 import type { MComponent, MNode } from '@tmagic/schema';
@@ -87,7 +87,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string) {
+  public async getPropsValue(type: string, defaultValue = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -100,7 +100,7 @@ class Props extends BaseService {
 
     return cloneDeep({
       ...getDefaultPropsValue(type),
-      ...(this.state.propsValueMap[type] || {}),
+      ...mergeWith(this.state.propsValueMap[type] || {}, defaultValue),
     });
   }
 }