@tmagic/editor 1.3.15 → 1.4.0-beta.1

package/src/services/editor.ts

@@ -18,6 +18,7 @@
 
 import { reactive, toRaw } from 'vue';
 import { cloneDeep, get, isObject, mergeWith, uniq } from 'lodash-es';
+import { Writable } from 'type-fest';
 
 import { DepTargetType } from '@tmagic/dep';
 import type { Id, MApp, MComponent, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
@@ -29,7 +30,15 @@ import propsService from '@editor/services//props';
 import depService from '@editor/services/dep';
 import historyService from '@editor/services/history';
 import storageService, { Protocol } from '@editor/services/storage';
-import type { AddMNode, EditorNodeInfo, PastePosition, StepValue, StoreState, StoreStateKey } from '@editor/type';
+import type {
+  AddMNode,
+  AsyncHookPlugin,
+  EditorNodeInfo,
+  PastePosition,
+  StepValue,
+  StoreState,
+  StoreStateKey,
+} from '@editor/type';
 import { LayerOffset, Layout } from '@editor/type';
 import {
   change2Fixed,
@@ -46,6 +55,36 @@ import {
 } from '@editor/utils/editor';
 import { beforePaste, getAddParent } from '@editor/utils/operator';
 
+const canUsePluginMethods = {
+  async: [
+    'getLayout',
+    'highlight',
+    'select',
+    'multiSelect',
+    'doAdd',
+    'add',
+    'doRemove',
+    'remove',
+    'doUpdate',
+    'update',
+    'sort',
+    'copy',
+    'paste',
+    'doPaste',
+    'doAlignCenter',
+    'alignCenter',
+    'moveLayer',
+    'moveToContainer',
+    'dragTo',
+    'undo',
+    'redo',
+    'move',
+  ] as const,
+  sync: [],
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+
 class Editor extends BaseService {
   public state: StoreState = reactive({
     root: null,
@@ -65,29 +104,7 @@ class Editor extends BaseService {
 
   constructor() {
     super(
-      [
-        { name: 'getLayout', isAsync: true },
-        { name: 'select', isAsync: true },
-        { name: 'doAdd', isAsync: true },
-        { name: 'add', isAsync: true },
-        { name: 'doRemove', isAsync: true },
-        { name: 'remove', isAsync: true },
-        { name: 'doUpdate', isAsync: true },
-        { name: 'update', isAsync: true },
-        { name: 'sort', isAsync: true },
-        { name: 'copy', isAsync: true },
-        { name: 'paste', isAsync: true },
-        { name: 'doPaste', isAsync: true },
-        { name: 'doAlignCenter', isAsync: true },
-        { name: 'alignCenter', isAsync: true },
-        { name: 'moveLayer', isAsync: true },
-        { name: 'moveToContainer', isAsync: true },
-        { name: 'move', isAsync: true },
-        { name: 'undo', isAsync: true },
-        { name: 'redo', isAsync: true },
-        { name: 'highlight', isAsync: true },
-        { name: 'dragTo', isAsync: true },
-      ],
+      canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })),
       // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
       ['select', 'update', 'moveLayer'],
     );
@@ -696,7 +713,7 @@ class Editor extends BaseService {
 
   public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
     propsService.clearRelateId();
-    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    const pasteConfigs = beforePaste(position, cloneDeep(config));
     return pasteConfigs;
   }
 
@@ -985,6 +1002,10 @@ class Editor extends BaseService {
     this.get('modifiedNodeIds').clear();
   }
 
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Editor>): void {
+    super.usePlugin(options);
+  }
+
   private addModifiedNodeId(id: Id) {
     if (!this.isHistoryStateChange) {
       this.get('modifiedNodeIds').set(id, id);

package/src/services/events.ts

@@ -55,11 +55,11 @@ class Events extends BaseService {
   }
 
   public setEvent(type: string, events: EventOption[]) {
-    eventMap[type] = [...DEFAULT_EVENTS, ...events];
+    eventMap[toLine(type)] = [...DEFAULT_EVENTS, ...events];
   }
 
   public getEvent(type: string): EventOption[] {
-    return cloneDeep(eventMap[type] || DEFAULT_EVENTS);
+    return cloneDeep(eventMap[toLine(type)] || DEFAULT_EVENTS);
   }
 
   public setMethods(methods: Record<string, EventOption[]>) {
@@ -69,11 +69,11 @@ class Events extends BaseService {
   }
 
   public setMethod(type: string, method: EventOption[]) {
-    methodMap[type] = [...DEFAULT_METHODS, ...method];
+    methodMap[toLine(type)] = [...DEFAULT_METHODS, ...method];
   }
 
   public getMethod(type: string) {
-    return cloneDeep(methodMap[type] || DEFAULT_METHODS);
+    return cloneDeep(methodMap[toLine(type)] || DEFAULT_METHODS);
   }
 
   public resetState() {

package/src/services/props.ts

@@ -18,6 +18,7 @@
 
 import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
+import { Writable } from 'type-fest';
 
 import { DepTargetType } from '@tmagic/dep';
 import type { FormConfig } from '@tmagic/form';
@@ -26,11 +27,26 @@ import { getValueByKeyPath, guid, setValueByKeyPath, toLine } from '@tmagic/util
 
 import depService from '@editor/services/dep';
 import editorService from '@editor/services/editor';
-import type { PropsState } from '@editor/type';
+import type { AsyncHookPlugin, PropsState, SyncHookPlugin } from '@editor/type';
 import { fillConfig } from '@editor/utils/props';
 
 import BaseService from './BaseService';
 
+const canUsePluginMethods = {
+  async: [
+    'setPropsConfig',
+    'getPropsConfig',
+    'setPropsValue',
+    'getPropsValue',
+    'fillConfig',
+    'getDefaultPropsValue',
+  ] as const,
+  sync: ['createId', 'setNewItemId'] as const,
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
 class Props extends BaseService {
   private state = reactive<PropsState>({
     propsConfigMap: {},
@@ -40,14 +56,8 @@ class Props extends BaseService {
 
   constructor() {
     super([
-      { name: 'setPropsConfig', isAsync: true },
-      { name: 'getPropsConfig', isAsync: true },
-      { name: 'setPropsValue', isAsync: true },
-      { name: 'getPropsValue', isAsync: true },
-      { name: 'createId', isAsync: false },
-      { name: 'setNewItemId', isAsync: true },
-      { name: 'fillConfig', isAsync: true },
-      { name: 'getDefaultPropsValue', isAsync: true },
+      ...canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })),
+      ...canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })),
     ]);
   }
 
@@ -58,17 +68,12 @@ class Props extends BaseService {
     this.emit('props-configs-change');
   }
 
-  public async fillConfig(config: FormConfig) {
-    return fillConfig(config);
+  public async fillConfig(config: FormConfig, labelWidth?: string) {
+    return fillConfig(config, typeof labelWidth !== 'function' ? labelWidth : '80px');
   }
 
-  /**
-   * 为指定类型组件设置组件属性表单配置
-   * @param type 组件类型
-   * @param config 组件属性表单配置
-   */
   public async setPropsConfig(type: string, config: FormConfig) {
-    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
+    this.state.propsConfigMap[toLine(type)] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
 
   /**
@@ -81,7 +86,7 @@ class Props extends BaseService {
       return await this.getPropsConfig('button');
     }
 
-    return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
+    return cloneDeep(this.state.propsConfigMap[toLine(type)] || (await this.fillConfig([])));
   }
 
   public setPropsValues(values: Record<string, Partial<MNode>>) {
@@ -96,7 +101,7 @@ class Props extends BaseService {
    * @param value 组件初始值
    */
   public async setPropsValue(type: string, value: Partial<MNode>) {
-    this.state.propsValueMap[type] = value;
+    this.state.propsValueMap[toLine(type)] = value;
   }
 
   /**
@@ -104,7 +109,9 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
+  public async getPropsValue(componentType: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
+    const type = toLine(componentType);
+
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -115,16 +122,14 @@ class Props extends BaseService {
       return value;
     }
 
-    const [id, defaultPropsValue, data] = await Promise.all([
-      this.createId(type),
-      this.getDefaultPropsValue(type),
-      this.setNewItemId(
-        cloneDeep({
-          type,
-          ...defaultValue,
-        } as any),
-      ),
-    ]);
+    const id = this.createId(type);
+    const defaultPropsValue = this.getDefaultPropsValue(type);
+    const data = this.setNewItemId(
+      cloneDeep({
+        type,
+        ...defaultValue,
+      } as any),
+    );
 
     return {
       id,
@@ -133,7 +138,7 @@ class Props extends BaseService {
     };
   }
 
-  public async createId(type: string | number): Promise<string> {
+  public createId(type: string | number): string {
     return `${type}_${guid()}`;
   }
 
@@ -144,16 +149,16 @@ class Props extends BaseService {
    * @param {Boolean} force 是否强制设置新的ID
    */
   /* eslint no-param-reassign: ["error", { "props": false }] */
-  public async setNewItemId(config: MNode, force = true) {
+  public setNewItemId(config: MNode, force = true) {
     if (force || editorService.getNodeById(config.id)) {
-      const newId = await this.createId(config.type || 'component');
+      const newId = this.createId(config.type || 'component');
       this.setRelateId(config.id, newId);
       config.id = newId;
     }
 
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
-        await this.setNewItemId(item);
+        this.setNewItemId(item);
       }
     }
 
@@ -165,7 +170,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns Object
    */
-  public async getDefaultPropsValue(type: string) {
+  public getDefaultPropsValue(type: string) {
     return ['page', 'container'].includes(type)
       ? {
           type,
@@ -227,6 +232,10 @@ class Props extends BaseService {
     this.removeAllPlugins();
   }
 
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Props> & SyncHookPlugin<SyncMethodName, Props>): void {
+    super.usePlugin(options);
+  }
+
   /**
    * 获取setNewItemId前后映射关系
    * @param oldId 原组件ID

package/src/services/stageOverlay.ts

@@ -1,11 +1,19 @@
 import { reactive } from 'vue';
+import type { Writable } from 'type-fest';
 
 import StageCore from '@tmagic/stage';
 
 import { useStage } from '@editor/hooks/use-stage';
 import BaseService from '@editor/services//BaseService';
 import editorService from '@editor/services//editor';
-import type { StageOptions, StageOverlayState } from '@editor/type';
+import type { StageOptions, StageOverlayState, SyncHookPlugin } from '@editor/type';
+
+const canUsePluginMethods = {
+  async: [],
+  sync: ['openOverlay', 'closeOverlay', 'updateOverlay', 'createStage'] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
 
 class StageOverlay extends BaseService {
   private state: StageOverlayState = reactive({
@@ -20,12 +28,7 @@ class StageOverlay extends BaseService {
   });
 
   constructor() {
-    super([
-      { name: 'openOverlay', isAsync: false },
-      { name: 'closeOverlay', isAsync: false },
-      { name: 'updateOverlay', isAsync: false },
-      { name: 'createStage', isAsync: false },
-    ]);
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
 
     this.get('wrapDiv').classList.add('tmagic-editor-sub-stage-wrap');
   }
@@ -111,6 +114,10 @@ class StageOverlay extends BaseService {
     });
   }
 
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, StageOverlay>): void {
+    super.usePlugin(options);
+  }
+
   private createContentEl() {
     const sourceEl = this.get('sourceEl');
     if (!sourceEl) return;

package/src/services/storage.ts

@@ -1,5 +1,7 @@
 import serialize from 'serialize-javascript';
+import type { Writable } from 'type-fest';
 
+import type { SyncHookPlugin } from '@editor/type';
 import { getConfig } from '@editor/utils/config';
 
 import BaseService from './BaseService';
@@ -17,6 +19,13 @@ export enum Protocol {
   BOOLEAN = 'boolean',
 }
 
+const canUsePluginMethods = {
+  async: [],
+  sync: ['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem'] as const,
+};
+
+type SyncMethodName = Writable<(typeof canUsePluginMethods)['sync']>;
+
 /**
  * 数据存储服务
  */
@@ -25,14 +34,7 @@ export class WebStorage extends BaseService {
   private namespace = 'tmagic';
 
   constructor() {
-    super([
-      { name: 'getStorage', isAsync: false },
-      { name: 'getNamespace', isAsync: false },
-      { name: 'clear', isAsync: false },
-      { name: 'getItem', isAsync: false },
-      { name: 'removeItem', isAsync: false },
-      { name: 'setItem', isAsync: false },
-    ]);
+    super(canUsePluginMethods.sync.map((methodName) => ({ name: methodName, isAsync: false })));
   }
 
   /**
@@ -123,6 +125,10 @@ export class WebStorage extends BaseService {
     this.removeAllPlugins();
   }
 
+  public usePlugin(options: SyncHookPlugin<SyncMethodName, WebStorage>): void {
+    super.usePlugin(options);
+  }
+
   private getValueAndProtocol(value: string | null) {
     let protocol = '';
 

package/src/services/ui.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive } from 'vue';
+import type { Writable } from 'type-fest';
 
 import { convertToNumber } from '@tmagic/utils';
 
 import editorService from '@editor/services/editor';
-import type { StageRect, UiState } from '@editor/type';
+import type { AsyncHookPlugin, StageRect, UiState } from '@editor/type';
 
 import BaseService from './BaseService';
 
@@ -46,16 +47,25 @@ const state = reactive<UiState>({
   showRule: true,
   propsPanelSize: 'small',
   showAddPageButton: true,
-  floatBox: new Map(),
   hideSlideBar: false,
+  navMenuRect: {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  },
 });
 
+const canUsePluginMethods = {
+  async: ['zoom', 'calcZoom'] as const,
+  sync: [] as const,
+};
+
+type AsyncMethodName = Writable<(typeof canUsePluginMethods)['async']>;
+
 class Ui extends BaseService {
   constructor() {
-    super([
-      { name: 'zoom', isAsync: true },
-      { name: 'calcZoom', isAsync: true },
-    ]);
+    super(canUsePluginMethods.async.map((methodName) => ({ name: methodName, isAsync: true })));
   }
 
   public set<K extends keyof UiState, T extends UiState[K]>(name: K, value: T) {
@@ -105,19 +115,6 @@ class Ui extends BaseService {
     return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 
-  public async setFloatBox(keys: string[]) {
-    const map = state.floatBox;
-    for (const key of keys) {
-      if (map.get(key)) continue;
-      map.set(key, {
-        status: false,
-        zIndex: 99,
-        top: 0,
-        left: 0,
-      });
-    }
-  }
-
   public resetState() {
     this.set('showSrc', false);
     this.set('uiSelectMode', false);
@@ -134,6 +131,10 @@ class Ui extends BaseService {
     this.removeAllPlugins();
   }
 
+  public usePlugin(options: AsyncHookPlugin<AsyncMethodName, Ui>): void {
+    super.usePlugin(options);
+  }
+
   private async setStageRect(value: StageRect) {
     state.stageRect = {
       ...state.stageRect,

package/src/theme/code-editor.scss

@@ -1,3 +1,9 @@
+.m-container-vs-code {
+  .el-form-item {
+    margin-bottom: 0;
+  }
+}
+
 .magic-code-editor {
   width: 100%;
 }

package/src/theme/component-list-panel.scss

@@ -1,88 +1,96 @@
-.ui-component-panel.tmagic-design-collapse {
-  height: 100%;
-  border-top: 0 !important;
-  margin-top: 48px;
-  background-color: $--sidebar-content-background-color;
+.ui-component-panel {
+  &.tmagic-design-collapse {
+    height: 100%;
+    border-top: 0 !important;
+    margin-top: 48px;
+    background-color: $--sidebar-content-background-color;
 
-  .tmagic-design-collapse-item {
-    > div:first-of-type {
-      border-bottom: 1px solid $--border-color;
-      margin-bottom: 10px;
+    .tmagic-design-collapse-item {
+      > div:first-of-type {
+        border-bottom: 1px solid $--border-color;
+        margin-bottom: 10px;
+      }
     }
-  }
 
-  .el-collapse-item__header,
-  .t-collapse-panel__header {
-    background: $--sidebar-content-background-color;
-    color: $--font-color;
-    height: 25px;
-    line-height: 25px;
-    padding-left: 10px;
-    font-size: 12px;
+    .el-collapse-item__header,
+    .t-collapse-panel__header {
+      background: $--sidebar-content-background-color;
+      color: $--font-color;
+      height: 25px;
+      line-height: 25px;
+      padding-left: 10px;
+      font-size: 12px;
 
-    i {
-      margin-right: 5px;
-      font-size: 14px;
+      i {
+        margin-right: 5px;
+        font-size: 14px;
+      }
     }
-  }
-
-  .el-collapse-item__wrap,
-  .t-collapse-panel__body {
-    background: $--sidebar-content-background-color;
-    border-bottom: 0;
 
-    .el-collapse-item__content,
-    .t-collapse-panel__content {
-      padding: 10px;
-      display: flex;
-      flex-wrap: wrap;
-    }
+    .el-collapse-item__wrap,
+    .t-collapse-panel__body {
+      background: $--sidebar-content-background-color;
+      border-bottom: 0;
 
-    .component-item {
-      display: flex;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      margin: 5px 10px;
-      box-sizing: border-box;
-      color: $--font-color;
-      flex-direction: column;
-      width: 42px;
-      cursor: pointer;
+      .el-collapse-item__content,
+      .t-collapse-panel__content {
+        padding: 10px;
+        display: flex;
+        flex-wrap: wrap;
+      }
 
-      i {
-        font-size: 20px;
-        background: #fff;
-        height: 40px;
-        width: 40px;
-        line-height: 40px;
-        border-radius: 5px;
-        color: #909090;
-        border: 1px solid $--border-color;
+      .component-item {
         display: flex;
-        justify-content: space-evenly;
-        align-items: center;
-        margin-bottom: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin: 5px 10px;
+        box-sizing: border-box;
+        color: $--font-color;
+        flex-direction: column;
+        width: 42px;
+        cursor: pointer;
+
+        i {
+          font-size: 20px;
+          background: #fff;
+          height: 40px;
+          width: 40px;
+          line-height: 40px;
+          border-radius: 5px;
+          color: #909090;
+          border: 1px solid $--border-color;
+          display: flex;
+          justify-content: space-evenly;
+          align-items: center;
+          margin-bottom: 5px;
 
-        &:hover {
-          background: #2882e0;
-          color: #fff;
-          border-color: #4e8be1;
+          &:hover {
+            background: #2882e0;
+            color: #fff;
+            border-color: #4e8be1;
+          }
         }
-      }
 
-      span {
-        font-size: 12px;
-        text-align: center;
-      }
+        span {
+          font-size: 12px;
+          text-align: center;
+        }
 
-      .el-tooltip {
-        width: 50px;
-        height: 30px;
-        line-height: 15px;
-        display: block;
-        white-space: normal;
-        margin: 0;
+        .el-tooltip {
+          width: 50px;
+          height: 30px;
+          line-height: 15px;
+          display: block;
+          white-space: normal;
+          margin: 0;
+        }
       }
     }
   }
+
+  .t-collapse {
+    margin-top: 0;
+    padding-top: 48px;
+    position: relative;
+  }
 }

package/src/theme/floating-box.scss

@@ -5,6 +5,8 @@
   border: 1px solid $--border-color;
   display: flex;
   flex-direction: column;
+  max-height: 100%;
+  max-width: 100%;
 
   .m-editor-float-box-title {
     text-align: center;

package/src/theme/layer-panel.scss

@@ -1,5 +1,6 @@
 .m-editor-layer-panel {
   background: $--sidebar-content-background-color;
+  position: relative;
 
   .m-editor-tree {
     padding-top: 48px;