@tmagic/editor 1.1.0-beta.7 → 1.1.0

package/src/services/editor.ts

@@ -32,14 +32,16 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  fixNodePosition,
   getInitPositionStyle,
   getNodeIndex,
   isFixed,
   setLayout,
 } from '../utils/editor';
-import { beforeAdd, beforePaste, beforeRemove, notifyAddToStage } from '../utils/operator';
+import { beforePaste, getAddParent } from '../utils/operator';
 
 import BaseService from './BaseService';
+import propsService from './props';
 
 class Editor extends BaseService {
   public state: StoreState = reactive({
@@ -60,12 +62,17 @@ class Editor extends BaseService {
       [
         'getLayout',
         'select',
+        'doAdd',
         'add',
+        'doRemove',
         'remove',
+        'doUpdate',
         'update',
         'sort',
         'copy',
         'paste',
+        'doPaste',
+        'duAlignCenter',
         'alignCenter',
         'moveLayer',
         'moveToContainer',
@@ -281,34 +288,40 @@ class Editor extends BaseService {
     this.set('nodes', nodes);
   }
 
-  /**
-   * 批量向容器添加节点
-   * @param configs 将要添加的节点数组
-   * @returns 添加后的节点
-   */
-  public async multiAdd(configs: MNode[]): Promise<MNode[]> {
+  public async doAdd(node: MNode, parent: MContainer): Promise<MNode> {
+    const root = this.get<MApp>('root');
+    const curNode = this.get<MNode>('node');
     const stage = this.get<StageCore | null>('stage');
-    const newNodes: MNode[] = await Promise.all(
-      configs.map(async (configItem: MNode): Promise<MNode> => {
-        // 新增元素到配置
-        const { parentNode, newNode, layout } = await beforeAdd(configItem as AddMNode);
-        // 将新增元素事件通知到stage以更新渲染
-        await notifyAddToStage(parentNode, newNode, layout);
-        return newNode;
-      }),
-    );
-    const newNodeIds: Id[] = newNodes.map((node) => node.id);
 
-    // 增加历史记录 多选不可能选中page
-    this.addModifiedNodeId(newNodeIds.join('-'));
-    this.pushHistoryState();
+    if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
+      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),
+      parentId: parent.id,
+      root: cloneDeep(root),
+    });
+
+    node.style = fixNodePosition(node, parent, stage);
 
-    // 触发选中样式
-    stage?.multiSelect(newNodeIds);
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
 
-    this.emit('multiAdd', newNodes);
+    this.addModifiedNodeId(node.id);
 
-    return newNodes;
+    return node;
   }
 
   /**
@@ -317,30 +330,92 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
     const stage = this.get<StageCore | null>('stage');
-    // 新增元素到配置
-    const { parentNode, newNode, layout, isPage } = await beforeAdd(addNode, parent);
-    // 将新增元素事件通知到stage以更新渲染
-    await notifyAddToStage(parentNode, newNode, layout);
-    // 更新编辑器选中元素
-    await this.select(newNode);
-    // 增加历史记录
-    this.addModifiedNodeId(newNode.id);
-    if (!isPage) {
-      this.pushHistoryState();
+
+    // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
+    const addNodes = [];
+    if (!Array.isArray(addNode)) {
+      const { type, inputEvent, ...config } = addNode;
+
+      if (!type) throw new Error('组件类型不能为空');
+
+      addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
+    } else {
+      addNodes.push(...addNode);
     }
 
-    if (isPage) {
-      this.state.pageLength += 1;
+    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);
+      // 触发选中样式
+      stage?.multiSelect(newNodeIds);
+      await this.multiSelect(newNodeIds);
     } else {
-      // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
-      stage?.select(newNode.id);
+      await this.select(newNodes[0]);
+
+      if (isPage(newNodes[0])) {
+        this.state.pageLength += 1;
+      } else {
+        // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
+        stage?.select(newNodes[0].id);
+      }
     }
 
-    this.emit('add', newNode);
+    this.pushHistoryState();
 
-    return newNode;
+    this.emit('add', newNodes);
+
+    return Array.isArray(addNode) ? newNodes : newNodes[0];
+  }
+
+  public async doRemove(node: MNode): Promise<void> {
+    const root = this.get<MApp | null>('root');
+
+    if (!root) throw new Error('没有root');
+
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
+
+    if (!parent || !curNode) throw new Error('找不要删除的节点');
+
+    const index = getNodeIndex(curNode, parent);
+
+    if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
+
+    parent.items?.splice(index, 1);
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, parentId: parent.id, root: cloneDeep(root) });
+
+    if (node.type === NodeType.PAGE) {
+      this.state.pageLength -= 1;
+
+      if (root.items[0]) {
+        await this.select(root.items[0]);
+        stage?.select(root.items[0].id);
+      } else {
+        this.set('node', null);
+        this.set('parent', null);
+        this.set('page', null);
+        this.set('stage', null);
+        this.set('highlightNode', null);
+        this.resetModifiedNodeId();
+        historyService.reset();
+
+        return;
+      }
+    } else {
+      await this.select(parent);
+      stage?.select(parent.id);
+    }
+
+    this.addModifiedNodeId(parent.id);
   }
 
   /**
@@ -348,50 +423,18 @@ class Editor extends BaseService {
    * @param {Object} node
    * @return {Object} 删除的组件配置
    */
-  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<MNode | MNode[]> {
-    if (Array.isArray(nodeOrNodeList)) {
-      // 多选批量删除
-      const nodes = nodeOrNodeList;
-      return this.multiRemove(nodes);
-    }
-    const node = nodeOrNodeList;
-    const removeParent = await beforeRemove(node);
-    // 删除的是页面
-    if (!removeParent) return node;
-    // 更新历史记录
-    this.addModifiedNodeId(removeParent.id);
-    this.pushHistoryState();
+  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
 
-    this.emit('remove', node);
+    await Promise.all(nodes.map((node) => this.doRemove(node)));
 
-    return node;
-  }
-
-  /**
-   * 批量删除
-   * @param nodes 批量删除的节点
-   * @returns 批量删除的节点
-   */
-  public async multiRemove(nodes: MNode[]): Promise<MNode[]> {
-    await Promise.all(
-      nodes.map(async (removeNode) => {
-        await beforeRemove(removeNode);
-      }),
-    );
-    const nodeIds = nodes.map((node) => node.id);
-    this.addModifiedNodeId(nodeIds.join('-'));
+    // 更新历史记录
     this.pushHistoryState();
 
-    this.emit('multiRemove', nodes);
-    return nodes;
+    this.emit('remove', nodes);
   }
 
-  /**
-   * 更新节点
-   * @param config 新的节点配置，配置中需要有id信息
-   * @returns 更新后的节点配置
-   */
-  public async update(config: MNode): Promise<MNode> {
+  public async doUpdate(config: MNode) {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
     const info = this.getNodeInfo(config.id, false);
@@ -437,18 +480,36 @@ 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);
     }
 
     this.addModifiedNodeId(newConfig.id);
+
+    return newConfig;
+  }
+
+  /**
+   * 更新节点
+   * @param config 新的节点配置，配置中需要有id信息
+   * @returns 更新后的节点配置
+   */
+  public async update(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doUpdate(node)));
+
     this.pushHistoryState();
 
-    this.emit('update', newConfig);
+    this.emit('update', newNodes);
 
-    return newConfig;
+    return Array.isArray(config) ? newNodes : newNodes[0];
   }
 
   /**
@@ -470,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();
@@ -492,30 +557,33 @@ class Editor extends BaseService {
    * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  public async paste(position: PastePosition = {}): Promise<MNode[] | void> {
-    const config = await storageService.getItem(COPY_STORAGE_KEY);
+  public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
+    const config: MNode[] = await storageService.getItem(COPY_STORAGE_KEY);
 
-    if (!config) return;
+    if (!Array.isArray(config)) return;
 
-    const pasteConfigs = await beforePaste(position, config);
+    const pasteConfigs = await this.doPaste(config, position);
 
-    return await this.multiAdd(pasteConfigs);
+    return this.add(pasteConfigs);
   }
 
-  /**
-   * 将指点节点设置居中
-   * @param config 组件节点配置
-   * @returns 当前组件节点配置
-   */
-  public async alignCenter(config: MNode): Promise<MNode | void> {
-    const parent = this.get<MContainer>('parent');
-    const node = this.get<MNode>('node');
-    const layout = await this.getLayout(toRaw(parent), toRaw(node));
+  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);
+
+    if (!parent) throw new Error('找不到父节点');
+
+    const node = cloneDeep(toRaw(config));
+    const layout = await this.getLayout(parent, node);
     if (layout === Layout.RELATIVE) {
-      return;
+      return config;
     }
 
-    if (!node.style) return;
+    if (!node.style) return config;
 
     const stage = this.get<StageCore>('stage');
     const doc = stage?.renderer.contentWindow?.document;
@@ -530,15 +598,25 @@ class Editor extends BaseService {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
 
-    await this.update(node);
-    this.get<StageCore | null>('stage')?.update({
-      config: cloneDeep(toRaw(node)),
-      root: cloneDeep(this.get<MApp>('root')),
-    });
-    this.addModifiedNodeId(config.id);
-    this.pushHistoryState();
+    return node;
+  }
 
-    return config;
+  /**
+   * 将指点节点设置居中
+   * @param config 组件节点配置
+   * @returns 当前组件节点配置
+   */
+  public async alignCenter(config: MNode | MNode[]): Promise<MNode | MNode[]> {
+    const nodes = Array.isArray(config) ? config : [config];
+    const stage = this.get<StageCore | null>('stage');
+
+    const newNodes = await Promise.all(nodes.map((node) => this.doAlignCenter(node)));
+
+    const newNode = await this.update(newNodes);
+
+    await stage?.multiSelect(newNodes.map((node) => node.id));
+
+    return newNode;
   }
 
   /**
@@ -547,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}`);
 
@@ -559,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();
   }
 
   /**
@@ -581,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);
 
@@ -590,13 +673,14 @@ class Editor extends BaseService {
           return srcValue;
         }
       });
-      newConfig.style = getInitPositionStyle(newConfig.style, layout, target, stage);
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
 
       target.items.push(newConfig);
 
       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);
@@ -633,7 +717,7 @@ class Editor extends BaseService {
     const node = toRaw(this.get('node'));
     if (!node || isPage(node)) return;
 
-    const { style, id } = node;
+    const { style, id, type } = node;
     if (!style || style.position !== 'absolute') return;
 
     if (top && !isNumber(style.top)) return;
@@ -641,6 +725,7 @@ class Editor extends BaseService {
 
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,
@@ -656,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 = '';