@tmagic/editor 1.3.0-alpha.6 → 1.3.0-alpha.7

package/src/services/keybinding.ts

@@ -1,237 +1,182 @@
-import KeyController from 'keycon';
+import KeyController, { KeyControllerEvent } from 'keycon';
 
 import { isPage } from '@tmagic/utils';
 
+import { KeyBindingCacheItem, KeyBindingCommand, KeyBindingItem } from '@editor/type';
+
 import BaseService from './BaseService';
 import editorService from './editor';
 import uiService from './ui';
 
 class Keybinding extends BaseService {
-  private keycon = new KeyController();
-
-  private ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? 'meta' : 'ctrl';
-
-  constructor() {
-    super();
-
-    this.keycon
-      .keyup((e) => {
-        this.emit('keyup', e.inputEvent);
-      })
-      .keyup('delete', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        e.inputEvent.preventDefault();
-
-        this.removeNode();
-      })
-      .keyup('backspace', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        e.inputEvent.preventDefault();
-
-        this.removeNode();
-      })
-      .keydown([this.ctrlKey, 'c'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        e.inputEvent.preventDefault();
-
-        const nodes = editorService.get('nodes');
-        nodes && editorService.copy(nodes);
-      })
-      .keydown([this.ctrlKey, 'v'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        e.inputEvent.preventDefault();
-
-        const nodes = editorService.get('nodes');
-        nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
-      })
-      .keydown([this.ctrlKey, 'x'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        e.inputEvent.preventDefault();
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
-
-        const nodes = editorService.get('nodes');
-
-        if (!nodes || isPage(nodes[0])) return;
-        editorService.copy(nodes);
-        editorService.remove(nodes);
-      })
-      .keydown([this.ctrlKey, 'z'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public ctrlKey = /mac os x/.test(navigator.userAgent.toLowerCase()) ? 'meta' : 'ctrl';
+
+  private controllers = new Map<string, KeyController>();
+
+  private bindingList: KeyBindingCacheItem[] = [];
+
+  private commands: Record<KeyBindingCommand | string, (e: KeyboardEvent) => void | Promise<void>> = {
+    [KeyBindingCommand.DELETE_NODE]: () => {
+      const nodes = editorService.get('nodes');
+
+      if (!nodes || isPage(nodes[0])) return;
+      editorService.remove(nodes);
+    },
+    [KeyBindingCommand.COPY_NODE]: () => {
+      const nodes = editorService.get('nodes');
+      nodes && editorService.copy(nodes);
+    },
+    [KeyBindingCommand.CUT_NODE]: () => {
+      const nodes = editorService.get('nodes');
+
+      if (!nodes || isPage(nodes[0])) return;
+      editorService.copy(nodes);
+      editorService.remove(nodes);
+    },
+    [KeyBindingCommand.PASTE_NODE]: () => {
+      const nodes = editorService.get('nodes');
+      nodes && editorService.paste({ offsetX: 10, offsetY: 10 });
+    },
+    [KeyBindingCommand.UNDO]: () => {
+      editorService.undo();
+    },
+    [KeyBindingCommand.REDO]: () => {
+      editorService.redo();
+    },
+    [KeyBindingCommand.ZOOM_IN]: () => {
+      uiService.zoom(0.1);
+    },
+    [KeyBindingCommand.ZOOM_OUT]: () => {
+      uiService.zoom(-0.1);
+    },
+    [KeyBindingCommand.ZOOM_RESET]: () => {
+      uiService.set('zoom', 1);
+    },
+    [KeyBindingCommand.ZOOM_FIT]: async () => {
+      uiService.set('zoom', await uiService.calcZoom());
+    },
+    [KeyBindingCommand.MOVE_UP_1]: () => {
+      editorService.move(0, -1);
+    },
+    [KeyBindingCommand.MOVE_DOWN_1]: () => {
+      editorService.move(0, 1);
+    },
+    [KeyBindingCommand.MOVE_LEFT_1]: () => {
+      editorService.move(-1, 0);
+    },
+    [KeyBindingCommand.MOVE_RIGHT_1]: () => {
+      editorService.move(1, 0);
+    },
+    [KeyBindingCommand.MOVE_UP_10]: () => {
+      editorService.move(0, -10);
+    },
+    [KeyBindingCommand.MOVE_DOWN_10]: () => {
+      editorService.move(0, 10);
+    },
+    [KeyBindingCommand.MOVE_LEFT_10]: () => {
+      editorService.move(-10, 0);
+    },
+    [KeyBindingCommand.MOVE_RIGHT_10]: () => {
+      editorService.move(10, 0);
+    },
+    [KeyBindingCommand.SWITCH_NODE]: () => {
+      editorService.selectNextNode();
+    },
+  };
+
+  public registeCommand(command: string, handler: (e: KeyboardEvent) => void | Promise<void>) {
+    this.commands[command] = handler;
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.undo();
-      })
-      .keydown([this.ctrlKey, 'shift', 'z'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public unregisteCommand(command: string) {
+    delete this.commands[command];
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.redo();
-      })
-      .keydown('up', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public registeEl(name: string, el?: HTMLElement) {
+    if (name !== 'global' && !el) {
+      throw new Error('只有name为global可以不传el');
+    }
 
-        e.inputEvent.preventDefault();
-        editorService.move(0, -1);
-      })
-      .keydown('down', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+    const keycon = new KeyController(el);
+    this.controllers.set(name, keycon);
+    this.bind(name);
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.move(0, 1);
-      })
-      .keydown('left', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public unregisteEl(name: string) {
+    this.controllers.get(name)?.destroy();
+    this.controllers.delete(name);
+    this.bindingList.forEach((item) => {
+      item.binded = false;
+    });
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.move(-1, 0);
-      })
-      .keydown('right', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public registe(maps: KeyBindingItem[]) {
+    for (const keybindingItem of maps) {
+      const { command, keybinding, when } = keybindingItem;
 
-        e.inputEvent.preventDefault();
-        editorService.move(1, 0);
-      })
-      .keydown([this.ctrlKey, 'up'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+      for (const [type = '', eventType = 'keydown'] of when) {
+        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
 
-        e.inputEvent.preventDefault();
-        editorService.move(0, -10);
-      })
-      .keydown([this.ctrlKey, 'down'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+        this.bindingList.push(cacheItem);
+      }
+    }
 
-        e.inputEvent.preventDefault();
-        editorService.move(0, 10);
-      })
-      .keydown([this.ctrlKey, 'left'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+    this.bind();
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.move(-10, 0);
-      })
-      .keydown([this.ctrlKey, 'right'], (e) => {
-        e.inputEvent.preventDefault();
-        editorService.move(10, 0);
-      })
-      .keydown('tab', (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public reset() {
+    this.controllers.forEach((keycon) => {
+      keycon.destroy();
+    });
+    this.controllers.clear();
+    this.bindingList = [];
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.selectNextNode();
-      })
-      .keydown([this.ctrlKey, 'tab'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  public destroy() {
+    this.reset();
+  }
 
-        e.inputEvent.preventDefault();
-        editorService.selectNextPage();
-      })
-      .keydown([this.ctrlKey, '='], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+  private bind(name?: string) {
+    for (const item of this.bindingList) {
+      const { type, eventType, command, keybinding, binded } = item;
 
-        e.inputEvent.preventDefault();
-        uiService.zoom(0.1);
-      })
-      .keydown([this.ctrlKey, 'numpadplus'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+      if (name && name !== type) {
+        continue;
+      }
 
-        e.inputEvent.preventDefault();
-        uiService.zoom(0.1);
-      })
-      .keydown([this.ctrlKey, '-'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+      if (binded) {
+        continue;
+      }
 
-        e.inputEvent.preventDefault();
-        uiService.zoom(-0.1);
-      })
-      .keydown([this.ctrlKey, 'numpad-'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
+      const keycon = this.controllers.get(type);
+      if (!keycon) {
+        continue;
+      }
 
+      const handler = (e: KeyControllerEvent) => {
         e.inputEvent.preventDefault();
-        uiService.zoom(-0.1);
-      })
-      .keydown([this.ctrlKey, '0'], async (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
-        }
 
-        e.inputEvent.preventDefault();
-        uiService.set('zoom', await uiService.calcZoom());
-      })
-      .keydown([this.ctrlKey, '1'], (e) => {
-        if (this.isDisabledKeyEvent(e.inputEvent.target)) {
-          return;
+        this.commands[command]?.(e.inputEvent);
+      };
+      this.getKeyconKeys(keybinding).forEach((keys) => {
+        if (keys[0]) {
+          keycon[eventType](keys, handler);
+        } else {
+          keycon[eventType](handler);
         }
-
-        e.inputEvent.preventDefault();
-        uiService.set('zoom', 1);
       });
-  }
-
-  public destroy() {
-    this.keycon.destroy();
-  }
-
-  private isDisabledKeyEvent(node: EventTarget | null) {
-    const el = node as HTMLElement | null;
-
-    if (!el) return false;
 
-    // 当前是在输入框中，禁止响应画布快捷键
-    return el.tagName === 'INPUT' || el.tagName === 'TEXTAREA' || el.isContentEditable;
+      item.binded = true;
+    }
   }
 
-  private removeNode() {
-    const nodes = editorService.get('nodes');
+  private getKeyconKeys(keybinding: string | string[] = '') {
+    const splitKey = (key: string) => key.split('+').map((k) => (k === 'ctrl' ? this.ctrlKey : k));
 
-    if (!nodes || isPage(nodes[0])) return;
-    editorService.remove(nodes);
+    if (Array.isArray(keybinding)) {
+      return keybinding.map((key) => splitKey(key));
+    }
+    return [splitKey(keybinding)];
   }
 }
 

package/src/services/storage.ts

@@ -1,5 +1,7 @@
 import serialize from 'serialize-javascript';
 
+import { getConfig } from '@editor/utils/config';
+
 import BaseService from './BaseService';
 
 interface Options {
@@ -64,8 +66,7 @@ export class WebStorage extends BaseService {
 
     switch (protocol) {
       case Protocol.OBJECT:
-        // eslint-disable-next-line no-eval
-        return eval(`(${item})`);
+        return getConfig('parseDSL')(`(${item})`);
       case Protocol.JSON:
         return JSON.parse(item);
       case Protocol.NUMBER:

package/src/theme/stage.scss

@@ -6,6 +6,10 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 .m-editor-stage-container {

package/src/type.ts

@@ -45,6 +45,7 @@ export type BeforeAdd = (config: MNode, parent: MContainer) => Promise<MNode> |
 export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig;
 
 export interface InstallOptions {
+  parseDSL: (dsl: string) => MApp;
   [key: string]: any;
 }
 
@@ -429,3 +430,58 @@ export interface EventSelectConfig {
   /** 联动代码配置 */
   codeActionConfig?: FormItem;
 }
+
+export enum KeyBindingCommand {
+  /** 复制 */
+  COPY_NODE = 'tmagic-system-copy-node',
+  /** 粘贴 */
+  PASTE_NODE = 'tmagic-system-paste-node',
+  /** 删除 */
+  DELETE_NODE = 'tmagic-system-delete-node',
+  /** 剪切 */
+  CUT_NODE = 'tmagic-system-cut-node',
+  /** 撤销 */
+  UNDO = 'tmagic-system-undo',
+  /** 重做 */
+  REDO = 'tmagic-system-redo',
+  /** 放大 */
+  ZOOM_IN = 'tmagic-system-zoom-in',
+  /** 缩小 */
+  ZOOM_OUT = 'tmagic-system-zoom-out',
+  /** 缩放到实际大小 */
+  ZOOM_RESET = 'tmagic-system-zoom-reset',
+  /** 缩放以适应 */
+  ZOOM_FIT = 'tmagic-system-zoom-fit',
+  /** 向上移动1px */
+  MOVE_UP_1 = 'tmagic-system-move-up-1',
+  /** 向下移动1px */
+  MOVE_DOWN_1 = 'tmagic-system-move-down-1',
+  /** 向左移动1px */
+  MOVE_LEFT_1 = 'tmagic-system-move-left-1',
+  /** 向右移动1px */
+  MOVE_RIGHT_1 = 'tmagic-system-move-right-1',
+  /** 向上移动10px */
+  MOVE_UP_10 = 'tmagic-system-move-up-10',
+  /** 向下移动10px */
+  MOVE_DOWN_10 = 'tmagic-system-move-down-10',
+  /** 向左移动10px */
+  MOVE_LEFT_10 = 'tmagic-system-move-left-10',
+  /** 向右移动10px */
+  MOVE_RIGHT_10 = 'tmagic-system-move-right-10',
+  /** 切换组件 */
+  SWITCH_NODE = 'tmagic-system-switch-node',
+}
+
+export interface KeyBindingItem {
+  command: KeyBindingCommand | string;
+  keybinding?: string | string[];
+  when: [string, 'keyup' | 'keydown'][];
+}
+
+export interface KeyBindingCacheItem {
+  type: string;
+  command: KeyBindingCommand | string;
+  keybinding?: string | string[];
+  eventType: 'keyup' | 'keydown';
+  binded: boolean;
+}

package/src/utils/config.ts

@@ -24,6 +24,6 @@ const setConfig = (option: InstallOptions): void => {
   $TMAGIC_EDITOR = option;
 };
 
-const getConfig = (key: keyof InstallOptions): unknown => $TMAGIC_EDITOR[key];
+const getConfig = <K extends keyof InstallOptions>(key: K): InstallOptions[K] => $TMAGIC_EDITOR[key];
 
 export { getConfig, setConfig };

package/src/utils/keybinding-config.ts

@@ -0,0 +1,120 @@
+import { KeyBindingCommand, KeyBindingItem } from '@editor/type';
+
+export default [
+  {
+    command: KeyBindingCommand.DELETE_NODE,
+    keybinding: ['delete', 'backspace'],
+    when: [
+      ['stage', 'keyup'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.COPY_NODE,
+    keybinding: 'ctrl+c',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.PASTE_NODE,
+    keybinding: 'ctrl+v',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.CUT_NODE,
+    keybinding: 'ctrl+x',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.UNDO,
+    keybinding: 'ctrl+z',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.REDO,
+    keybinding: 'ctrl+shift+z',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_1,
+    keybinding: 'up',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_1,
+    keybinding: 'down',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_1,
+    keybinding: 'left',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_1,
+    keybinding: 'right',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_UP_10,
+    keybinding: 'ctrl+up',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_DOWN_10,
+    keybinding: 'ctrl+down',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_LEFT_10,
+    keybinding: 'ctrl+left',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.MOVE_RIGHT_10,
+    keybinding: 'ctrl+right',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.SWITCH_NODE,
+    keybinding: 'tab',
+    when: [
+      ['stage', 'keydown'],
+      ['layer-panel', 'keydown'],
+    ],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_IN,
+    keybinding: ['ctrl+=', 'ctrl+numpadplus'],
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_OUT,
+    keybinding: ['ctrl+-', 'ctrl+numpad-'],
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_FIT,
+    keybinding: 'ctrl+0',
+    when: [['stage', 'keydown']],
+  },
+  {
+    command: KeyBindingCommand.ZOOM_RESET,
+    keybinding: 'ctrl+1',
+    when: [['stage', 'keydown']],
+  },
+] as KeyBindingItem[];

package/types/components/ContentMenu.vue.d.ts

@@ -6,8 +6,10 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     menuData: () => never[];
     isSubMenu: boolean;
 }>, {
+    menu: import("vue").Ref<HTMLDivElement | undefined>;
     hide: () => void;
     show: (e: MouseEvent) => void;
+    contains: (el: HTMLElement) => any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("hide" | "show")[], "hide" | "show", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     menuData?: (MenuButton | MenuComponent)[] | undefined;
     isSubMenu?: boolean | undefined;

package/types/index.d.ts

@@ -31,6 +31,6 @@ export { default as Icon } from './components/Icon.vue';
 export { default as LayoutContainer } from './components/SplitView.vue';
 export { default as SplitView } from './components/SplitView.vue';
 declare const _default: {
-    install: (app: App, opt?: InstallOptions) => void;
+    install: (app: App, opt?: Partial<InstallOptions>) => void;
 };
 export default _default;

package/types/initService.d.ts

@@ -4,5 +4,5 @@ import type { Services } from './type';
 export declare type LooseRequired<T> = {
     [P in string & keyof T]: T[P];
 };
-export declare const initServiceState: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, }: Services) => void;
+export declare const initServiceState: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, { editorService, historyService, componentListService, propsService, eventsService, uiService, codeBlockService, keybindingService, }: Services) => void;
 export declare const initServiceEvents: (props: Readonly<LooseRequired<Readonly<ExtractPropTypes<typeof editorProps>>>>, emit: (event: 'props-panel-mounted' | 'update:modelValue', ...args: any[]) => void, { editorService, codeBlockService, dataSourceService, depService }: Services) => void;

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

@@ -1,4 +1,4 @@
-import type { MenuButton, MenuComponent } from '../../type';
+import { MenuButton, MenuComponent } from '../../type';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
     stageContentMenu: (MenuButton | MenuComponent)[];
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{