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

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/data-source-input.scss

@@ -0,0 +1,18 @@
+.tmagic-data-source-input-text {
+  .el-input__wrapper.tmagic-data-source-input-text-wrapper {
+    overflow: hidden;
+    padding-right: 30px;
+  }
+
+  .el-input__inner {
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .tmagic-data-source-input-icon {
+    position: absolute;
+    right: 7px;
+  }
+}

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/theme/theme.scss

@@ -19,4 +19,5 @@
 @import "./dep-list.scss";
 @import "./data-source.scss";
 @import "./data-source-fields.scss";
+@import "./data-source-input.scss";
 @import "./key-value.scss";

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/src/utils/props.ts

@@ -105,6 +105,40 @@ export const fillConfig = (config: FormConfig = []) => [
                   },
                 ],
               },
+              {
+                type: 'fieldset',
+                legend: '边框',
+                items: [
+                  {
+                    name: 'borderWidth',
+                    text: '宽度',
+                    defaultValue: '0',
+                  },
+                  {
+                    name: 'borderColor',
+                    text: '颜色',
+                    type: 'colorPicker',
+                  },
+                  {
+                    name: 'borderStyle',
+                    text: '样式',
+                    type: 'select',
+                    defaultValue: 'none',
+                    options: [
+                      { text: 'none', value: 'none' },
+                      { text: 'hidden', value: 'hidden' },
+                      { text: 'dotted', value: 'dotted' },
+                      { text: 'dashed', value: 'dashed' },
+                      { text: 'solid', value: 'solid' },
+                      { text: 'double', value: 'double' },
+                      { text: 'groove', value: 'groove' },
+                      { text: 'ridge', value: 'ridge' },
+                      { text: 'inset', value: 'inset' },
+                      { text: 'outset', value: 'outset' },
+                    ],
+                  },
+                ],
+              },
               {
                 type: 'fieldset',
                 legend: '背景',