@tmagic/editor 1.3.0-alpha.0 → 1.3.0-alpha.10

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

@@ -23,6 +23,7 @@ import { 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';
 
@@ -95,8 +96,8 @@ 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');
+      codeConfigProcessed.content = parseDSL(codeConfig.content);
     }
 
     const existContent = codeDsl[id] || {};

package/src/services/dep.ts

@@ -262,11 +262,14 @@ 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);
         });
       });
     });
+
+    this.emit('collected', nodes, deep);
   }
 
   /**
@@ -299,6 +302,7 @@ export class Watcher extends EventEmitter {
 
         if (target.isTarget(key, value)) {
           target.updateDep(node, fullKey);
+          this.emit('update-dep', node, fullKey);
         } else if (!keyIsItems && Array.isArray(value)) {
           value.forEach((item, index) => {
             collectTarget(item, `${fullKey}.${index}`);

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();

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/content-menu.scss

@@ -8,7 +8,7 @@
   font-weight: 600;
   padding: 4px 0px;
   overflow: auto;
-  max-height: 100%;
+  max-height: 80%;
 
   .menu-item {
     color: #333;

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

@@ -4,10 +4,7 @@
   width: 100%;
 
   &-content {
-    width: 100%;
     height: calc(100% - #{$--nav-height});
-    display: flex;
-    justify-self: space-between;
   }
 
   &-framework-center {

package/src/theme/layer-panel.scss

@@ -44,6 +44,12 @@
 .magic-editor-layer-panel .cus-tree-node {
   width: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+
+  .layer-node-tool {
+    margin-right: 15px;
+  }
 }
 
 .magic-editor-layer-panel .cus-tree-node-hover {

package/src/theme/layout.scss

@@ -2,4 +2,8 @@
   width: 100%;
   display: flex;
   justify-self: space-between;
+
+  &:has(.m-editor-resizer-draging) {
+    overflow: hidden;
+  }
 }

package/src/theme/resizer.scss

@@ -4,14 +4,38 @@
   width: 8px;
   margin: 0 -5px;
   height: 100%;
-  opacity: 0.9;
+  opacity: 0.8;
   background: padding-box #d8dee8;
   box-sizing: border-box;
   cursor: col-resize;
   z-index: 1;
+  position: relative;
 
   &:hover {
     border-color: #d8dee8;
+
+    .icon-container {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+
+  &.m-editor-resizer-draging {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      left: 0;
+    }
+
+    &::before {
+      content: "";
+      position: absolute;
+      width: 600px;
+      height: 100%;
+      right: 0;
+    }
   }
 
   .icon-container {
@@ -40,12 +64,3 @@
     font-size: 18px;
   }
 }
-
-.magic-editor-resizer:hover {
-  .icon-container {
-    visibility: visible;
-    opacity: 1;
-  }
-  // border-left: 5px solid rgba(0,0,0,.5);
-  // border-right: 5px solid rgba(0,0,0,.5);
-}

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

@@ -30,11 +30,12 @@ import type {
 
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
-import { DataSourceService } from './services/dataSource';
+import type { DataSourceService } from './services/dataSource';
 import type { DepService } from './services/dep';
 import type { EditorService } from './services/editor';
 import type { EventsService } from './services/events';
 import type { HistoryService } from './services/history';
+import type { KeybindingService } from './services/keybinding';
 import type { PropsService } from './services/props';
 import type { StorageService } from './services/storage';
 import type { UiService } from './services/ui';
@@ -44,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;
 }
 
@@ -58,6 +60,7 @@ export interface Services {
   codeBlockService: CodeBlockService;
   depService: DepService;
   dataSourceService: DataSourceService;
+  keybindingService: KeybindingService;
 }
 
 export interface StageOptions {
@@ -427,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 };