@tmagic/editor 1.3.0-alpha.2 → 1.3.0-alpha.21

package/src/layouts/workspace/Workspace.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="m-editor-workspace" tabindex="-1" ref="workspace">
+  <div class="m-editor-workspace">
     <Breadcrumb></Breadcrumb>
 
     <slot name="stage">
@@ -15,149 +15,24 @@
   </div>
 </template>
 
-<script lang="ts" setup name="MEditorWorkspace">
-import { computed, inject, onMounted, onUnmounted, ref } from 'vue';
-import KeyController from 'keycon';
+<script lang="ts" setup>
+import { computed, inject } from 'vue';
 
-import { isPage } from '@tmagic/utils';
-
-import type { MenuButton, MenuComponent, Services } from '@editor/type';
+import { MenuButton, MenuComponent, Services } from '@editor/type';
 
 import Breadcrumb from './Breadcrumb.vue';
 import PageBar from './PageBar.vue';
 import MagicStage from './Stage.vue';
 
+defineOptions({
+  name: 'MEditorWorkspace',
+});
+
 defineProps<{
   stageContentMenu: (MenuButton | MenuComponent)[];
 }>();
 
 const services = inject<Services>('services');
-const workspace = ref<HTMLDivElement>();
-const nodes = computed(() => services?.editorService.get('nodes'));
-const page = computed(() => services?.editorService.get('page'));
-
-const mouseenterHandler = () => {
-  workspace.value?.focus();
-};
-
-const mouseleaveHandler = () => {
-  workspace.value?.blur();
-};
-
-let keycon: KeyController;
-
-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
-    .keyup('delete', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keyup('backspace', (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'c'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.copy(nodes.value);
-    })
-    .keydown([ctrl, 'v'], (e) => {
-      e.inputEvent.preventDefault();
-      nodes.value && services?.editorService.paste({ offsetX: 10, offsetY: 10 });
-    })
-    .keydown([ctrl, 'x'], (e) => {
-      e.inputEvent.preventDefault();
-      if (!nodes.value || isPage(nodes.value[0])) return;
-      services?.editorService.copy(nodes.value);
-      services?.editorService.remove(nodes.value);
-    })
-    .keydown([ctrl, 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.undo();
-    })
-    .keydown([ctrl, 'shift', 'z'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.redo();
-    })
-    .keydown('up', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -1);
-    })
-    .keydown('down', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 1);
-    })
-    .keydown('left', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-1, 0);
-    })
-    .keydown('right', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(1, 0);
-    })
-    .keydown([ctrl, 'up'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, -10);
-    })
-    .keydown([ctrl, 'down'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(0, 10);
-    })
-    .keydown([ctrl, 'left'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(-10, 0);
-    })
-    .keydown([ctrl, 'right'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.move(10, 0);
-    })
-    .keydown('tab', (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextNode();
-    })
-    .keydown([ctrl, 'tab'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.editorService.selectNextPage();
-    })
-    .keydown([ctrl, '='], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, 'numpadplus'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(0.1);
-    })
-    .keydown([ctrl, '-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, 'numpad-'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.zoom(-0.1);
-    })
-    .keydown([ctrl, '0'], async (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', await services.uiService.calcZoom());
-    })
-    .keydown([ctrl, '1'], (e) => {
-      e.inputEvent.preventDefault();
-      services?.uiService.set('zoom', 1);
-    });
-});
-
-onUnmounted(() => {
-  workspace.value?.removeEventListener('mouseenter', mouseenterHandler);
-  workspace.value?.removeEventListener('mouseleave', mouseleaveHandler);
-  keycon.destroy();
-});
+const page = computed(() => services?.editorService.get('page'));
 </script>

package/src/services/codeBlock.ts

@@ -19,32 +19,26 @@
 import { reactive } from 'vue';
 import { keys, pick } from 'lodash-es';
 
-import { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
+import type { ColumnConfig } from '@tmagic/form';
+import type { CodeBlockContent, CodeBlockDSL, Id } from '@tmagic/schema';
 
 import type { CodeState } from '@editor/type';
 import { CODE_DRAFT_STORAGE_KEY } from '@editor/type';
+import { getConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
 
 class CodeBlock extends BaseService {
   private state = reactive<CodeState>({
-    isShowCodeEditor: false,
     codeDsl: null,
-    id: '',
     editable: true,
     combineIds: [],
     undeletableList: [],
+    paramsColConfig: undefined,
   });
 
   constructor() {
-    super([
-      'setCodeDslById',
-      'setCodeEditorShowStatus',
-      'setEditStatus',
-      'setCombineIds',
-      'setUndeleteableList',
-      'deleteCodeDslByIds',
-    ]);
+    super(['setCodeDslById', 'setEditStatus', 'setCombineIds', 'setUndeleteableList', 'deleteCodeDslByIds']);
   }
 
   /**
@@ -85,7 +79,7 @@ class CodeBlock extends BaseService {
    * @param {CodeBlockContent} codeConfig 代码块内容配置信息
    * @returns {void}
    */
-  public async setCodeDslById(id: Id, codeConfig: CodeBlockContent): Promise<void> {
+  public async setCodeDslById(id: Id, codeConfig: Partial<CodeBlockContent>): Promise<void> {
     const codeDsl = this.getCodeDsl();
 
     if (!codeDsl) {
@@ -95,8 +89,11 @@ class CodeBlock extends BaseService {
     const codeConfigProcessed = codeConfig;
     if (codeConfig.content) {
       // 在保存的时候转换代码内容
-      // eslint-disable-next-line no-eval
-      codeConfigProcessed.content = eval(codeConfig.content);
+      const parseDSL = getConfig('parseDSL');
+      if (typeof codeConfig.content === 'string') {
+        codeConfig.content = parseDSL<(...args: any[]) => any>(codeConfig.content);
+      }
+      codeConfigProcessed.content = codeConfig.content;
     }
 
     const existContent = codeDsl[id] || {};
@@ -119,43 +116,6 @@ class CodeBlock extends BaseService {
     return pick(codeDsl, ids) as CodeBlockDSL;
   }
 
-  /**
-   * 设置代码编辑面板展示状态
-   * @param {boolean} status 是否展示代码编辑面板
-   * @returns {void}
-   */
-  public async setCodeEditorShowStatus(status: boolean): Promise<void> {
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取代码编辑面板展示状态
-   * @returns {boolean} 是否展示代码编辑面板
-   */
-  public getCodeEditorShowStatus(): boolean {
-    return this.state.isShowCodeEditor;
-  }
-
-  /**
-   * 设置代码编辑面板展示状态及展示内容
-   * @param {boolean} status 是否展示代码编辑面板
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setCodeEditorContent(status: boolean, id: Id): void {
-    if (!id) return;
-    this.setId(id);
-    this.state.isShowCodeEditor = status;
-  }
-
-  /**
-   * 获取当前选中的代码块内容
-   * @returns {CodeBlockContent | null}
-   */
-  public getCurrentDsl(): CodeBlockContent | null {
-    return this.getCodeContentById(this.state.id);
-  }
-
   /**
    * 获取编辑状态
    * @returns {boolean} 是否可编辑
@@ -173,24 +133,6 @@ class CodeBlock extends BaseService {
     this.state.editable = status;
   }
 
-  /**
-   * 设置当前选中的代码块ID
-   * @param {Id} id 代码块id
-   * @returns {void}
-   */
-  public setId(id: Id): void {
-    if (!id) return;
-    this.state.id = id;
-  }
-
-  /**
-   * 获取当前选中的代码块ID
-   * @returns {Id} id 代码块id
-   */
-  public getId(): Id {
-    return this.state.id;
-  }
-
   /**
    * 设置当前选中组件已关联绑定的代码块id数组
    * @param {string[]} ids 代码块id数组
@@ -262,11 +204,19 @@ class CodeBlock extends BaseService {
     });
   }
 
+  public setParamsColConfig(config: ColumnConfig): void {
+    this.state.paramsColConfig = config;
+  }
+
+  public getParamsColConfig(): ColumnConfig | undefined {
+    return this.state.paramsColConfig;
+  }
+
   /**
    * 生成代码块唯一id
    * @returns {Id} 代码块唯一id
    */
-  public async getUniqueId(): Promise<Id> {
+  public async getUniqueId(): Promise<string> {
     const newId = `code_${Math.random().toString(10).substring(2).substring(0, 4)}`;
     // 判断是否重复
     const dsl = await this.getCodeDsl();
@@ -276,9 +226,7 @@ class CodeBlock extends BaseService {
   }
 
   public resetState() {
-    this.state.isShowCodeEditor = false;
     this.state.codeDsl = null;
-    this.state.id = '';
     this.state.editable = true;
     this.state.combineIds = [];
     this.state.undeletableList = [];

package/src/services/dataSource.ts

@@ -2,23 +2,30 @@ import { reactive } from 'vue';
 import { cloneDeep } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import { DataSourceSchema } from '@tmagic/schema';
+import type { DataSourceSchema } from '@tmagic/schema';
 import { guid } from '@tmagic/utils';
 
+import type { DatasourceTypeOption } from '@editor/type';
 import { getFormConfig } from '@editor/utils/data-source';
 
 import BaseService from './BaseService';
 
 interface State {
+  datasourceTypeList: DatasourceTypeOption[];
   dataSources: DataSourceSchema[];
+  editable: boolean;
   configs: Record<string, FormConfig>;
+  values: Record<string, Partial<DataSourceSchema>>;
 }
 
 type StateKey = keyof State;
 class DataSource extends BaseService {
   private state = reactive<State>({
+    datasourceTypeList: [],
     dataSources: [],
+    editable: true,
     configs: {},
+    values: {},
   });
 
   public set<K extends StateKey, T extends State[K]>(name: K, value: T) {
@@ -30,13 +37,21 @@ class DataSource extends BaseService {
   }
 
   public getFormConfig(type = 'base') {
-    return getFormConfig(type, this.get('configs'));
+    return getFormConfig(type, this.get('datasourceTypeList'), this.get('configs'));
   }
 
   public setFormConfig(type: string, config: FormConfig) {
     this.get('configs')[type] = config;
   }
 
+  public getFormValue(type = 'base') {
+    return this.get('values')[type];
+  }
+
+  public setFormValue(type: string, value: Partial<DataSourceSchema>) {
+    this.get('values')[type] = value;
+  }
+
   public add(config: DataSourceSchema) {
     const newConfig = {
       ...config,

package/src/services/dep.ts

@@ -19,27 +19,24 @@ import { EventEmitter } from 'events';
 
 import { reactive } from 'vue';
 
-import { MNode } from '@tmagic/schema';
+import type { Dep, Id, MNode } from '@tmagic/schema';
+import { isObject } from '@tmagic/utils';
+
+import { DepTargetType } from '@editor/type';
 
 type IsTarget = (key: string | number, value: any) => boolean;
 
 interface TargetOptions {
   isTarget: IsTarget;
   id: string | number;
-  type?: string;
-  name: string;
-}
-
-interface Dep {
-  [key: string | number]: {
-    name: string;
-    keys: (string | number)[];
-  };
+  /** 类型，数据源、代码块或其他 */
+  type?: DepTargetType | string;
+  name?: string;
 }
 
 interface TargetList {
-  [key: string]: {
-    [key: string | number]: Target;
+  [type: DepTargetType | string]: {
+    [targetId: string | number]: Target;
   };
 }
 
@@ -60,11 +57,11 @@ export class Target extends EventEmitter {
   /**
    * 目标名称，用于显示在依赖列表中
    */
-  public name: string;
+  public name?: string;
   /**
    * 不同的目标可以进行分类，例如代码块，数据源可以为两个不同的type
    */
-  public type = 'default';
+  public type: DepTargetType | string = DepTargetType.DEFAULT;
   /**
    * 依赖详情
    * 实例：{ 'node_id': { name: 'node_name', keys: [ created, mounted ] } }
@@ -156,14 +153,14 @@ export class Target extends EventEmitter {
 }
 
 export class Watcher extends EventEmitter {
-  public targets = reactive<TargetList>({});
+  private targets = reactive<TargetList>({});
 
   /**
    * 获取指定类型中的所有target
    * @param type 分类
    * @returns Target[]
    */
-  public getTargets(type = 'default') {
+  public getTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     return this.targets[type] || {};
   }
 
@@ -230,7 +227,7 @@ export class Watcher extends EventEmitter {
    * @param type 分类
    * @returns void
    */
-  public removeTargets(type = 'default') {
+  public removeTargets(type: DepTargetType | string = DepTargetType.DEFAULT) {
     const targets = this.targets[type];
 
     if (!targets) return;
@@ -262,6 +259,7 @@ export class Watcher extends EventEmitter {
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         nodes.forEach((node) => {
+          // 先删除原有依赖，重新收集
           target.removeDep(node);
           this.collectItem(node, target, deep);
         });
@@ -276,13 +274,15 @@ export class Watcher extends EventEmitter {
    * @param nodes 需要清除依赖的节点
    */
   public clear(nodes?: MNode[]) {
+    const clearedItemsNodeIds: Id[] = [];
     Object.values(this.targets).forEach((targets) => {
       Object.values(targets).forEach((target) => {
         if (nodes) {
           nodes.forEach((node) => {
             target.removeDep(node);
 
-            if (Array.isArray(node.items)) {
+            if (Array.isArray(node.items) && node.items.length && !clearedItemsNodeIds.includes(node.id)) {
+              clearedItemsNodeIds.push(node.id);
               this.clear(node.items);
             }
           });
@@ -304,9 +304,11 @@ export class Watcher extends EventEmitter {
           this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
-            collectTarget(item, `${fullKey}.${index}`);
+            if (isObject(item)) {
+              collectTarget(item, `${fullKey}.${index}`);
+            }
           });
-        } else if (Object.prototype.toString.call(value) === '[object Object]') {
+        } else if (isObject(value)) {
           collectTarget(value, fullKey);
         }
 
@@ -318,6 +320,7 @@ export class Watcher extends EventEmitter {
       };
 
       Object.entries(config).forEach(([key, value]) => {
+        if (typeof value === 'undefined' || value === '') return;
         doCollect(key, value);
       });
     };

package/src/services/editor.ts

@@ -193,7 +193,7 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+  public async getLayout(parent: MNode, node?: MNode | null): Promise<Layout> {
     if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
 
     if (parent.layout) {
@@ -705,9 +705,9 @@ class Editor extends BaseService {
     brothers.splice(index, 1);
 
     if (offset === LayerOffset.TOP) {
-      brothers.splice(isRelative ? 0 : brothers.length - 1, 0, node);
+      brothers.splice(isRelative ? 0 : brothers.length, 0, node);
     } else if (offset === LayerOffset.BOTTOM) {
-      brothers.splice(isRelative ? brothers.length - 1 : 0, 0, node);
+      brothers.splice(isRelative ? brothers.length : 0, 0, node);
     } else {
       brothers.splice(index + (isRelative ? -offset : offset), 0, node);
     }

package/src/services/keybinding.ts

@@ -0,0 +1,185 @@
+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 {
+  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;
+  }
+
+  public unregisteCommand(command: string) {
+    delete this.commands[command];
+  }
+
+  public registeEl(name: string, el?: HTMLElement) {
+    if (name !== 'global' && !el) {
+      throw new Error('只有name为global可以不传el');
+    }
+
+    const keycon = new KeyController(el);
+    this.controllers.set(name, keycon);
+    this.bind(name);
+  }
+
+  public unregisteEl(name: string) {
+    this.controllers.get(name)?.destroy();
+    this.controllers.delete(name);
+    this.bindingList.forEach((item) => {
+      item.binded = false;
+    });
+  }
+
+  public registe(maps: KeyBindingItem[]) {
+    for (const keybindingItem of maps) {
+      const { command, keybinding, when } = keybindingItem;
+
+      for (const [type = '', eventType = 'keydown'] of when) {
+        const cacheItem: KeyBindingCacheItem = { type, command, keybinding, eventType, binded: false };
+
+        this.bindingList.push(cacheItem);
+      }
+    }
+
+    this.bind();
+  }
+
+  public reset() {
+    this.controllers.forEach((keycon) => {
+      keycon.destroy();
+    });
+    this.controllers.clear();
+    this.bindingList = [];
+  }
+
+  public destroy() {
+    this.reset();
+  }
+
+  private bind(name?: string) {
+    for (const item of this.bindingList) {
+      const { type, eventType, command, keybinding, binded } = item;
+
+      if (name && name !== type) {
+        continue;
+      }
+
+      if (binded) {
+        continue;
+      }
+
+      const keycon = this.controllers.get(type);
+      if (!keycon) {
+        continue;
+      }
+
+      const handler = (e: KeyControllerEvent) => {
+        e.inputEvent.preventDefault();
+
+        this.commands[command]?.(e.inputEvent);
+      };
+      this.getKeyconKeys(keybinding).forEach((keys) => {
+        if (keys[0]) {
+          keycon[eventType](keys, handler);
+        } else {
+          keycon[eventType](handler);
+        }
+      });
+
+      item.binded = true;
+    }
+  }
+
+  private getKeyconKeys(keybinding: string | string[] = '') {
+    const splitKey = (key: string) => key.split('+').map((k) => (k === 'ctrl' ? this.ctrlKey : k));
+
+    if (Array.isArray(keybinding)) {
+      return keybinding.map((key) => splitKey(key));
+    }
+    return [splitKey(keybinding)];
+  }
+}
+
+export type KeybindingService = Keybinding;
+
+export default new Keybinding();