@tmagic/editor 1.1.0-beta.9 → 1.1.0

package/src/services/editor.ts

@@ -71,6 +71,7 @@ class Editor extends BaseService {
         'sort',
         'copy',
         'paste',
+        'doPaste',
         'duAlignCenter',
         'alignCenter',
         'moveLayer',
@@ -296,17 +297,27 @@ class Editor extends BaseService {
       throw new Error('app下不能添加组件');
     }
 
+    if (parent.id !== curNode.id) {
+      const index = parent.items.indexOf(curNode);
+      parent?.items?.splice(index + 1, 0, node);
+    } else {
+      // 新增节点添加到配置中
+      parent?.items?.push(node);
+    }
+
     const layout = await this.getLayout(toRaw(parent), node as MNode);
     node.style = getInitPositionStyle(node.style, layout);
 
-    await stage?.add({ config: cloneDeep(node), parent: cloneDeep(parent), root: cloneDeep(root) });
+    await stage?.add({
+      config: cloneDeep(node),
+      parent: cloneDeep(parent),
+      parentId: parent.id,
+      root: cloneDeep(root),
+    });
 
     node.style = fixNodePosition(node, parent, stage);
 
-    await stage?.update({ config: cloneDeep(node), root: cloneDeep(root) });
-
-    // 新增节点添加到配置中
-    parent?.items?.push(node);
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
 
     this.addModifiedNodeId(node.id);
 
@@ -322,9 +333,6 @@ class Editor extends BaseService {
   public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
     const stage = this.get<StageCore | null>('stage');
 
-    const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(addNode);
-    if (!parentNode) throw new Error('未找到父元素');
-
     // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
     const addNodes = [];
     if (!Array.isArray(addNode)) {
@@ -337,7 +345,13 @@ class Editor extends BaseService {
       addNodes.push(...addNode);
     }
 
-    const newNodes = await Promise.all(addNodes.map((node) => this.doAdd(node, parentNode)));
+    const newNodes = await Promise.all(
+      addNodes.map((node) => {
+        const parentNode = parent && typeof parent !== 'function' ? parent : getAddParent(node);
+        if (!parentNode) throw new Error('未找到父元素');
+        return this.doAdd(node, parentNode);
+      }),
+    );
 
     if (newNodes.length > 1) {
       const newNodeIds = newNodes.map((node) => node.id);
@@ -359,7 +373,7 @@ class Editor extends BaseService {
 
     this.emit('add', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
   }
 
   public async doRemove(node: MNode): Promise<void> {
@@ -377,7 +391,7 @@ class Editor extends BaseService {
 
     parent.items?.splice(index, 1);
     const stage = this.get<StageCore | null>('stage');
-    stage?.remove({ id: node.id, root: this.get('root') });
+    stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
 
     if (node.type === NodeType.PAGE) {
       this.state.pageLength -= 1;
@@ -417,7 +431,7 @@ class Editor extends BaseService {
     // 更新历史记录
     this.pushHistoryState();
 
-    this.emit('remove');
+    this.emit('remove', nodes);
   }
 
   public async doUpdate(config: MNode) {
@@ -466,7 +480,11 @@ class Editor extends BaseService {
     nodes.splice(targetIndex, 1, newConfig);
     this.set('nodes', nodes);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: cloneDeep(this.get('root')) });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(newConfig),
+      parentId: parent.id,
+      root: cloneDeep(this.get('root')),
+    });
 
     if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
@@ -491,7 +509,7 @@ class Editor extends BaseService {
 
     this.emit('update', newNodes);
 
-    return newNodes.length > 1 ? newNodes[0] : newNodes;
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
   /**
@@ -513,7 +531,11 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: cloneDeep(this.get('root')) });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(node),
+      parentId: parent.id,
+      root: cloneDeep(this.get('root')),
+    });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -540,11 +562,16 @@ class Editor extends BaseService {
 
     if (!Array.isArray(config)) return;
 
-    const pasteConfigs = await beforePaste(position, config);
+    const pasteConfigs = await this.doPaste(config, position);
 
     return this.add(pasteConfigs);
   }
 
+  public async doPaste(config: MNode[], position: PastePosition = {}): Promise<MNode[]> {
+    const pasteConfigs = await beforePaste(position, cloneDeep(config));
+    return pasteConfigs;
+  }
+
   public async doAlignCenter(config: MNode): Promise<MNode> {
     const parent = this.getParentById(config.id);
 
@@ -598,7 +625,7 @@ class Editor extends BaseService {
    */
   public async moveLayer(offset: number | LayerOffset): Promise<void> {
     const parent = this.get<MContainer>('parent');
-    const node = this.get('node');
+    const node = this.get<MNode>('node');
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
@@ -610,10 +637,15 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
+    const grandparent = this.getParentById(parent.id);
     this.get<StageCore | null>('stage')?.update({
       config: cloneDeep(toRaw(parent)),
+      parentId: grandparent?.id,
       root: cloneDeep(this.get<MApp>('root')),
     });
+
+    this.addModifiedNodeId(parent.id);
+    this.pushHistoryState();
   }
 
   /**
@@ -632,7 +664,7 @@ class Editor extends BaseService {
       const index = getNodeIndex(node, parent);
       parent.items?.splice(index, 1);
 
-      await stage.remove({ id: node.id, root });
+      await stage.remove({ id: node.id, parentId: parent.id, root });
 
       const layout = await this.getLayout(target);
 
@@ -647,7 +679,8 @@ class Editor extends BaseService {
 
       await stage.select(targetId);
 
-      await stage.update({ config: cloneDeep(target), root });
+      const targetParent = this.getParentById(target.id);
+      await stage.update({ config: cloneDeep(target), parentId: targetParent?.id, root });
 
       await this.select(newConfig);
       stage.select(newConfig.id);
@@ -708,6 +741,10 @@ class Editor extends BaseService {
     this.set('nodes', []);
     this.set('page', null);
     this.set('parent', null);
+    this.set('stage', null);
+    this.set('highlightNode', null);
+    this.set('modifiedNodeIds', new Map());
+    this.set('pageLength', new Map());
   }
 
   public resetModifiedNodeId() {

package/src/services/events.ts

@@ -26,8 +26,8 @@ import type { ComponentGroup } from '../type';
 
 import BaseService from './BaseService';
 
-const eventMap: Record<string, EventOption[]> = reactive({});
-const methodMap: Record<string, EventOption[]> = reactive({});
+let eventMap: Record<string, EventOption[]> = reactive({});
+let methodMap: Record<string, EventOption[]> = reactive({});
 
 class Events extends BaseService {
   constructor() {
@@ -75,6 +75,12 @@ class Events extends BaseService {
   public getMethod(type: string) {
     return cloneDeep(methodMap[type] || DEFAULT_METHODS);
   }
+
+  public destroy() {
+    eventMap = reactive({});
+    methodMap = reactive({});
+    this.removeAllListeners();
+  }
 }
 
 export type EventsService = Events;

package/src/services/props.ts

@@ -20,12 +20,11 @@ import { reactive } from 'vue';
 import { cloneDeep, mergeWith } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { Id, MComponent, MNode, MPage } from '@tmagic/schema';
-import { NodeType } from '@tmagic/schema';
-import { isPop, toLine } from '@tmagic/utils';
+import type { MComponent, MNode } from '@tmagic/schema';
+import { toLine } from '@tmagic/utils';
 
 import type { PropsState } from '../type';
-import { DEFAULT_CONFIG, fillConfig } from '../utils/props';
+import { fillConfig } from '../utils/props';
 
 import BaseService from './BaseService';
 
@@ -43,6 +42,7 @@ class Props extends BaseService {
       'getPropsValue',
       'createId',
       'setNewItemId',
+      'fillConfig',
       'getDefaultPropsValue',
     ]);
   }
@@ -54,13 +54,17 @@ class Props extends BaseService {
     this.emit('props-configs-change');
   }
 
+  public async fillConfig(config: FormConfig) {
+    return fillConfig(config);
+  }
+
   /**
    * 为指定类型组件设置组件属性表单配置
    * @param type 组件类型
    * @param config 组件属性表单配置
    */
-  public setPropsConfig(type: string, config: FormConfig) {
-    this.state.propsConfigMap[type] = fillConfig(Array.isArray(config) ? config : [config]);
+  public async setPropsConfig(type: string, config: FormConfig) {
+    this.state.propsConfigMap[type] = await this.fillConfig(Array.isArray(config) ? config : [config]);
   }
 
   /**
@@ -73,7 +77,7 @@ class Props extends BaseService {
       return await this.getPropsConfig('button');
     }
 
-    return cloneDeep(this.state.propsConfigMap[type] || DEFAULT_CONFIG);
+    return cloneDeep(this.state.propsConfigMap[type] || (await this.fillConfig([])));
   }
 
   public setPropsValues(values: Record<string, MNode>) {
@@ -125,19 +129,6 @@ class Props extends BaseService {
     };
   }
 
-  /**
-   * 生成指定位数的GUID，无【-】格式
-   * @param digit 位数，默认值8
-   * @returns
-   */
-  guid(digit = 8): string {
-    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
-      const r = (Math.random() * 16) | 0;
-      const v = c == 'x' ? r : (r & 0x3) | 0x8;
-      return v.toString(16);
-    });
-  }
-
   public async createId(type: string | number): Promise<string> {
     return `${type}_${this.guid()}`;
   }
@@ -147,19 +138,12 @@ class Props extends BaseService {
    * @param {Object} config 组件配置
    */
   /* eslint no-param-reassign: ["error", { "props": false }] */
-  public async setNewItemId(config: MNode, parent?: MPage) {
-    const oldId = config.id;
-
+  public async setNewItemId(config: MNode) {
     config.id = await this.createId(config.type || 'component');
 
-    // 只有弹窗在页面下的一级子元素才有效
-    if (isPop(config) && parent?.type === NodeType.PAGE) {
-      updatePopId(oldId, config.id, parent);
-    }
-
     if (config.items && Array.isArray(config.items)) {
       for (const item of config.items) {
-        await this.setNewItemId(item, config as MPage);
+        await this.setNewItemId(item);
       }
     }
 
@@ -186,31 +170,26 @@ class Props extends BaseService {
           name: type,
         };
   }
-}
 
-/**
- * 复制页面时，需要把组件下关联的弹窗id换测复制出来的弹窗的id
- * @param {number} oldId 复制的源弹窗id
- * @param {number} popId 新的弹窗id
- * @param {Object} pageConfig 页面配置
- */
-const updatePopId = (oldId: Id, popId: Id, pageConfig: MPage) => {
-  pageConfig.items?.forEach((config) => {
-    if (config.pop === oldId) {
-      config.pop = popId;
-      return;
-    }
-
-    if (config.popId === oldId) {
-      config.popId = popId;
-      return;
-    }
+  public destroy() {
+    this.state.propsConfigMap = {};
+    this.state.propsValueMap = {};
+    this.removeAllListeners();
+  }
 
-    if (Array.isArray(config.items)) {
-      updatePopId(oldId, popId, config as MPage);
-    }
-  });
-};
+  /**
+   * 生成指定位数的GUID，无【-】格式
+   * @param digit 位数，默认值8
+   * @returns
+   */
+  private guid(digit = 8): string {
+    return 'x'.repeat(digit).replace(/[xy]/g, (c) => {
+      const r = (Math.random() * 16) | 0;
+      const v = c === 'x' ? r : (r & 0x3) | 0x8;
+      return v.toString(16);
+    });
+  }
+}
 
 export type PropsService = Props;
 

package/src/services/storage.ts

@@ -107,6 +107,10 @@ export class WebStorage extends BaseService {
     storage.setItem(`${options.namespace || namespace}:${key}`, item);
   }
 
+  public destroy() {
+    this.removeAllListeners();
+  }
+
   private getValueAndProtocol(value: string | null) {
     let protocol = '';
 

package/src/services/ui.ts

@@ -64,16 +64,6 @@ class Ui extends BaseService {
         center: 'auto',
       });
     });
-
-    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
-    if (columnWidthCacheData) {
-      try {
-        const columnWidthCache = JSON.parse(columnWidthCacheData);
-        this.setColumnWidth(columnWidthCache);
-      } catch (e) {
-        console.error(e);
-      }
-    }
   }
 
   public set<T = any>(name: keyof UiState, value: T) {
@@ -98,21 +88,49 @@ class Ui extends BaseService {
     }
 
     (state as any)[name] = value;
-
-    if (name === 'stageContainerRect') {
-      state.zoom = this.calcZoom();
-    }
   }
 
   public get<T>(name: keyof typeof state): T {
     return (state as any)[name];
   }
 
+  public initColumnWidth() {
+    const columnWidthCacheData = globalThis.localStorage.getItem(COLUMN_WIDTH_STORAGE_KEY);
+    if (columnWidthCacheData) {
+      try {
+        const columnWidthCache = JSON.parse(columnWidthCacheData);
+        this.setColumnWidth(columnWidthCache);
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+
   public zoom(zoom: number) {
     this.set('zoom', (this.get<number>('zoom') * 100 + zoom * 100) / 100);
     if (this.get<number>('zoom') < 0.1) this.set('zoom', 0.1);
   }
 
+  public calcZoom() {
+    const { stageRect, stageContainerRect } = state;
+    const { height, width } = stageContainerRect;
+    if (!width || !height) return 1;
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
+      return 1;
+    }
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
+  }
+
+  public destroy() {
+    this.removeAllListeners();
+  }
+
   private setColumnWidth({ left, center, right }: SetColumnWidth) {
     const columnWidth = {
       ...toRaw(this.get<GetColumnWidth>('columnWidth')),
@@ -150,22 +168,6 @@ class Ui extends BaseService {
     };
     state.zoom = this.calcZoom();
   }
-
-  private calcZoom() {
-    const { stageRect, stageContainerRect } = state;
-    const { height, width } = stageContainerRect;
-    if (!width || !height) return 1;
-
-    // 30为标尺的大小
-    const stageWidth = stageRect.width + 30;
-    const stageHeight = stageRect.height + 30;
-
-    if (width > stageWidth && height > stageHeight) {
-      return 1;
-    }
-    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
-    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
-  }
 }
 
 export type UiService = Ui;

package/src/theme/nav-menu.scss

@@ -69,5 +69,11 @@
     .menu-item-text {
       color: $--nav-color;
     }
+
+    &.rule {
+      .el-icon {
+        transform: rotate(-90deg);
+      }
+    }
   }
 }

package/src/type.ts

@@ -82,16 +82,22 @@ export interface ComponentGroupState {
   list: ComponentGroup[];
 }
 
+export enum ColumnLayout {
+  LEFT = 'left',
+  CENTER = 'center',
+  RIGHT = 'right',
+}
+
 export interface SetColumnWidth {
-  left?: number;
-  center?: number | 'auto';
-  right?: number;
+  [ColumnLayout.LEFT]?: number;
+  [ColumnLayout.CENTER]?: number | 'auto';
+  [ColumnLayout.RIGHT]?: number;
 }
 
 export interface GetColumnWidth {
-  left: number;
-  center: number;
-  right: number;
+  [ColumnLayout.LEFT]: number;
+  [ColumnLayout.CENTER]: number;
+  [ColumnLayout.RIGHT]: number;
 }
 
 export interface StageRect {
@@ -174,6 +180,7 @@ export interface MenuButton {
   /** type为button/dropdown时点击运行的方法 */
   handler?: (data: Services, event: MouseEvent) => Promise<any> | any;
   /** type为dropdown时，下拉的菜单列表， 或者有子菜单时 */
+  className?: string;
   items?: MenuButton[];
 }
 
@@ -187,6 +194,7 @@ export interface MenuComponent {
   listeners?: Record<string, Function>;
   slots?: Record<string, any>;
   /** 是否显示，默认为true */
+  className?: string;
   display?: boolean | ((data?: Services) => Promise<boolean> | boolean);
 }
 
@@ -209,16 +217,17 @@ export type MenuItem =
   | 'guides'
   | 'rule'
   | MenuButton
-  | MenuComponent;
+  | MenuComponent
+  | string;
 
 /** 工具栏 */
 export interface MenuBarData {
   /** 顶部工具栏左边项 */
-  left?: MenuItem[];
+  [ColumnLayout.LEFT]?: MenuItem[];
   /** 顶部工具栏中间项 */
-  center?: MenuItem[];
+  [ColumnLayout.CENTER]?: MenuItem[];
   /** 顶部工具栏右边项 */
-  right?: MenuItem[];
+  [ColumnLayout.RIGHT]?: MenuItem[];
 }
 
 export interface SideComponent extends MenuComponent {
@@ -287,3 +296,10 @@ export enum Keys {
 
 export const H_GUIDE_LINE_STORAGE_KEY = '$MagicStageHorizontalGuidelinesData';
 export const V_GUIDE_LINE_STORAGE_KEY = '$MagicStageVerticalGuidelinesData';
+
+export interface ScrollViewerEvent {
+  scrollLeft: number;
+  scrollTop: number;
+  scrollHeight: number;
+  scrollWidth: number;
+}

package/src/utils/index.ts

@@ -20,3 +20,4 @@ export * from './config';
 export * from './props';
 export * from './logger';
 export * from './editor';
+export * from './stage';

package/src/utils/operator.ts

@@ -42,7 +42,7 @@ export const beforePaste = async (position: PastePosition, config: MNode[]): Pro
         pastePosition.top = configItem.style?.top - referenceTop + pastePosition.top;
       }
 
-      const pasteConfig = await propsService.setNewItemId(configItem, editorService.get('root'));
+      const pasteConfig = await propsService.setNewItemId(configItem);
 
       if (pasteConfig.style) {
         const { left, top } = pasteConfig.style;
@@ -86,11 +86,11 @@ export const getPositionInContainer = (position: PastePosition = {}, id: Id) =>
   };
 };
 
-export const getAddParent = (addNode: AddMNode | MNode[]) => {
+export const getAddParent = (node: MNode) => {
   const curNode = editorService.get<MContainer>('node');
 
   let parentNode;
-  if (!Array.isArray(addNode) && isPage(addNode as MNode)) {
+  if (isPage(node)) {
     parentNode = editorService.get<MApp>('root');
   } else if (curNode.items) {
     parentNode = curNode;

package/src/utils/props.ts

@@ -234,6 +234,3 @@ export const fillConfig = (config: FormConfig = []) => [
     ],
   },
 ];
-
-// 默认组件属性表单配置
-export const DEFAULT_CONFIG: FormConfig = fillConfig([]);