@tmagic/editor 1.3.16 → 1.4.0-beta.2

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');
   }
@@ -38,7 +41,7 @@ class StageOverlay extends BaseService {
     this.state[name] = value;
   }
 
-  public openOverlay(el: HTMLElement | undefined | null) {
+  public openOverlay(el: HTMLElement | null) {
     const stageOptions = this.get('stageOptions');
     if (!el || !stageOptions) return;
 
@@ -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;
@@ -161,7 +168,7 @@ class StageOverlay extends BaseService {
     });
 
     if (await stageOptions?.canSelect?.(contentEl)) {
-      subStage?.select(contentEl);
+      subStage?.select(contentEl.id);
     }
   }
 

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,31 @@ const state = reactive<UiState>({
   showRule: true,
   propsPanelSize: 'small',
   showAddPageButton: true,
-  floatBox: new Map(),
   hideSlideBar: false,
+  navMenuRect: {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+  },
+  frameworkRect: {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 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 +121,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 +137,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-block.scss

@@ -17,9 +17,4 @@
   .el-drawer__body {
     padding: 10px 20px;
   }
-
-  &.m-form-box {
-    width: 100%;
-    min-width: 872px;
-  }
 }

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/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;
@@ -19,9 +21,9 @@
   }
 
   .m-editor-float-box-body {
-    padding: 5px;
-    flex: 1;
     overflow: auto;
+    flex: 1;
+    padding: 0 16px;
   }
 }
 

package/src/theme/props-panel.scss

@@ -1,6 +1,20 @@
 .m-editor-props-panel {
   padding: 0 10px;
 
+  .m-editor-props-panel-src-icon {
+    position: absolute;
+    right: 15px;
+    bottom: 15px;
+    z-index: 30;
+  }
+
+  .magic-code-editor {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 10;
+  }
+
   &.small {
     .el-form-item__label {
       font-size: 12px;

package/src/theme/sidebar.scss

@@ -72,12 +72,15 @@
 }
 
 .m-editor-slide-list-box {
-  min-width: 270px;
+  display: flex;
+  min-width: 240px;
   min-height: 500px;
-  max-height: 1024px;
   > div {
     &:first-child {
-      width: 100%;
+      min-width: 240px;
     }
   }
+  .m-form-box {
+    border-left: 1px solid #e0e0e0;
+  }
 }

package/src/type.ts

@@ -17,9 +17,20 @@
  */
 
 import type { Component } from 'vue';
+import type { PascalCasedProperties } from 'type-fest';
 
-import type { ColumnConfig, FilterFunction, FormConfig, FormItem } from '@tmagic/form';
-import type { CodeBlockContent, CodeBlockDSL, Id, MApp, MContainer, MNode, MPage, MPageFragment } from '@tmagic/schema';
+import type { ChildConfig, ColumnConfig, FilterFunction, FormConfig, FormItem, Input } from '@tmagic/form';
+import type {
+  CodeBlockContent,
+  CodeBlockDSL,
+  DataSourceFieldType,
+  Id,
+  MApp,
+  MContainer,
+  MNode,
+  MPage,
+  MPageFragment,
+} from '@tmagic/schema';
 import type StageCore from '@tmagic/stage';
 import type {
   ContainerHighlightType,
@@ -225,20 +236,22 @@ export interface UiState {
   propsPanelSize: 'large' | 'default' | 'small';
   /** 是否显示新增页面按钮 */
   showAddPageButton: boolean;
-
-  /** slide 拖拽悬浮窗 state */
-  floatBox: Map<
-    string,
-    {
-      status: boolean;
-      zIndex: number;
-      top: number;
-      left: number;
-    }
-  >;
-
   /** 是否隐藏侧边栏 */
   hideSlideBar: boolean;
+
+  // navMenu 的宽高
+  navMenuRect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
+  frameworkRect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  };
 }
 
 export interface EditorNodeInfo {
@@ -595,42 +608,44 @@ export interface KeyBindingCacheItem {
   bound: boolean;
 }
 
-export interface CodeSelectColConfig {
+export interface CodeSelectColConfig extends FormItem {
   type: 'code-select-col';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑代码块，disable表示的是是否可以选择代码块 */
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface PageFragmentSelectConfig {
+export interface PageFragmentSelectConfig extends FormItem {
   type: 'page-fragment-select';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceMethodSelectConfig {
+export interface DataSourceSelect extends FormItem, Input {
+  type: 'data-source-select';
+  /** 数据源类型: base、http... */
+  dataSourceType?: string;
+  /** 是否要编译成数据源的data。
+   * id: 不编译，就是要数据源id;
+   * value: 要编译（数据源data）
+   * */
+  value?: 'id' | 'value';
+}
+
+export interface DataSourceMethodSelectConfig extends FormItem {
   type: 'data-source-method-select';
-  name: string;
-  text: string;
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
+  /** 是否可以编辑数据源，disable表示的是是否可以选择数据源 */
   notEditable?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
 }
 
-export interface DataSourceFieldSelectConfig {
+export interface DataSourceFieldSelectConfig extends FormItem {
   type: 'data-source-field-select';
-  name: string;
+  /** 是否要编译成数据源的data。
+   * key: 不编译，就是要数据源id和field name;
+   * value: 要编译（数据源data[`${filed}`]）
+   * */
   value?: 'key' | 'value';
-  labelWidth?: number | string;
-  disabled?: boolean | FilterFunction;
-  display?: boolean | FilterFunction;
+  /** 是否严格的遵守父子节点不互相关联 */
+  checkStrictly?: boolean;
+  dataSourceFieldType?: DataSourceFieldType[];
+  fieldConfig?: ChildConfig;
 }
 
 /** 可新增的数据源类型选项 */
@@ -670,3 +685,38 @@ export interface TreeNodeData {
   items?: TreeNodeData[];
   [key: string]: any;
 }
+
+export type AsyncBeforeHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (...args: Parameters<C[K]>) => Promise<Parameters<C[K]>> | Parameters<C[K]>;
+};
+
+export type AsyncAfterHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (
+    result: Awaited<ReturnType<C[K]>>,
+    ...args: Parameters<C[K]>
+  ) => ReturnType<C[K]> | Awaited<ReturnType<C[K]>>;
+};
+
+export type SyncBeforeHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (...args: Parameters<C[K]>) => Parameters<C[K]>;
+};
+
+export type SyncAfterHook<Value extends Array<string>, C extends Record<Value[number], (...args: any) => any>> = {
+  [K in Value[number]]?: (result: ReturnType<C[K]>, ...args: Parameters<C[K]>) => ReturnType<C[K]>;
+};
+
+export type AddPrefixToObject<T, P extends string> = {
+  [K in keyof T as K extends string ? `${P}${K}` : never]: T[K];
+};
+
+export type AsyncHookPlugin<
+  T extends Array<string>,
+  C extends Record<T[number], (...args: any) => any>,
+> = AddPrefixToObject<PascalCasedProperties<AsyncBeforeHook<T, C>>, 'before'> &
+  AddPrefixToObject<PascalCasedProperties<AsyncAfterHook<T, C>>, 'after'>;
+
+export type SyncHookPlugin<
+  T extends Array<string>,
+  C extends Record<T[number], (...args: any) => any>,
+> = AddPrefixToObject<PascalCasedProperties<SyncBeforeHook<T, C>>, 'before'> &
+  AddPrefixToObject<PascalCasedProperties<SyncAfterHook<T, C>>, 'after'>;