@tmagic/editor 1.0.6 → 1.1.0-beta.10

package/src/services/editor.ts

@@ -17,59 +17,64 @@
  */
 
 import { reactive, toRaw } from 'vue';
-import { cloneDeep, mergeWith } from 'lodash-es';
-import serialize from 'serialize-javascript';
+import { cloneDeep, mergeWith, uniq } from 'lodash-es';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
 import { NodeType } from '@tmagic/schema';
 import StageCore from '@tmagic/stage';
 import { getNodePath, isNumber, isPage, isPop } from '@tmagic/utils';
 
-import historyService, { StepValue } from '@editor/services/history';
-import propsService from '@editor/services/props';
-import type { AddMNode, EditorNodeInfo, StoreState } from '@editor/type';
-import { LayerOffset, Layout } from '@editor/type';
+import historyService, { StepValue } from '../services/history';
+import storageService, { Protocol } from '../services/storage';
+import type { AddMNode, EditorNodeInfo, PastePosition, StoreState } from '../type';
+import { LayerOffset, Layout } from '../type';
 import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
-  generatePageNameByApp,
+  fixNodePosition,
+  getInitPositionStyle,
   getNodeIndex,
-  initPosition,
   isFixed,
   setLayout,
-} from '@editor/utils/editor';
-import { log } from '@editor/utils/logger';
+} from '../utils/editor';
+import { beforePaste, getAddParent } from '../utils/operator';
 
 import BaseService from './BaseService';
+import propsService from './props';
 
 class Editor extends BaseService {
-  private isHistoryStateChange = false;
-
-  private state = reactive<StoreState>({
+  public state: StoreState = reactive({
     root: null,
     page: null,
     parent: null,
     node: null,
+    nodes: [],
     stage: null,
     highlightNode: null,
     modifiedNodeIds: new Map(),
     pageLength: 0,
   });
+  private isHistoryStateChange = false;
 
   constructor() {
     super(
       [
         'getLayout',
         'select',
+        'doAdd',
         'add',
+        'doRemove',
         'remove',
+        'doUpdate',
         'update',
         'sort',
         'copy',
         'paste',
+        'duAlignCenter',
         'alignCenter',
         'moveLayer',
+        'moveToContainer',
         'move',
         'undo',
         'redo',
@@ -82,14 +87,16 @@ class Editor extends BaseService {
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
    * @param value MNode
    * @returns MNode
    */
   public set<T = MNode>(name: keyof StoreState, value: T) {
     this.state[name] = value as any;
-    log('store set ', name, ' ', value);
-
+    // set nodes时将node设置为nodes第一个元素
+    if (name === 'nodes') {
+      this.set('node', (value as unknown as MNode[])[0]);
+    }
     if (name === 'root') {
       this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
       this.emit('root-change', value);
@@ -98,7 +105,7 @@ class Editor extends BaseService {
 
   /**
    * 获取当前指点节点配置
-   * @param name  'root' | 'page' | 'parent' | 'node'
+   * @param name  'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes'
    * @returns MNode
    */
   public get<T = MNode>(name: keyof StoreState): T {
@@ -190,7 +197,7 @@ class Editor extends BaseService {
    */
   public async select(config: MNode | Id): Promise<MNode> | never {
     const { node, page, parent } = this.selectedConfigExceptionHandler(config);
-    this.set('node', node);
+    this.set('nodes', [node]);
     this.set('page', page || null);
     this.set('parent', parent || null);
 
@@ -265,80 +272,110 @@ class Editor extends BaseService {
   }
 
   /**
-   * 向指点容器添加组件节点
-   * @param addConfig 将要添加的组件节点配置
-   * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
-   * @returns 添加后的节点
+   * 多选
+   * @param ids 指定节点ID
+   * @returns 加入多选的节点配置
    */
-  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
-    const { type, ...config } = addNode;
-    const curNode = this.get<MContainer>('node');
-
-    let parentNode: MNode | undefined;
-    const isPage = type === NodeType.PAGE;
-
-    if (isPage) {
-      parentNode = this.get<MApp>('root');
-      // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
-    } else if (parent && typeof parent !== 'function') {
-      parentNode = parent;
-    } else if (curNode.items) {
-      parentNode = curNode;
-    } else {
-      parentNode = this.getParentById(curNode.id, false);
-    }
-
-    if (!parentNode) throw new Error('未找到父元素');
+  public multiSelect(ids: Id[]): void {
+    const nodes: MNode[] = [];
+    const idsUnique = uniq(ids);
+    idsUnique.forEach((id) => {
+      const { node } = this.getNodeInfo(id);
+      if (!node) return;
+      nodes.push(node);
+    });
+    this.set('nodes', nodes);
+  }
 
-    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
-    const newNode = initPosition(
-      { ...toRaw(await propsService.getPropsValue(type, config)) },
-      layout,
-      parentNode,
-      this.get<StageCore>('stage'),
-    );
+  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');
 
-    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
+    if ((parent?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && node.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
     }
 
-    parentNode?.items?.push(newNode);
+    // 新增节点添加到配置中
+    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);
+
+    await stage?.update({ config: cloneDeep(node), parentId: parent.id, root: cloneDeep(root) });
+
+    this.addModifiedNodeId(node.id);
+
+    return node;
+  }
+
+  /**
+   * 向指点容器添加组件节点
+   * @param addConfig 将要添加的组件节点配置
+   * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+   * @returns 添加后的节点
+   */
+  public async add(addNode: AddMNode | MNode[], parent?: MContainer | null): Promise<MNode | MNode[]> {
     const stage = this.get<StageCore | null>('stage');
 
-    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+    // 新增多个组件只存在于粘贴多个组件,粘贴的是一个完整的config,所以不再需要getPropsValue
+    const addNodes = [];
+    if (!Array.isArray(addNode)) {
+      const { type, inputEvent, ...config } = addNode;
 
-    await this.select(newNode);
+      if (!type) throw new Error('组件类型不能为空');
 
-    this.addModifiedNodeId(newNode.id);
-    if (!isPage) {
-      this.pushHistoryState();
+      addNodes.push({ ...toRaw(await propsService.getPropsValue(type, config)) });
+    } else {
+      addNodes.push(...addNode);
     }
 
-    stage?.select(newNode.id);
+    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 {
+      await this.select(newNodes[0]);
 
-    if (isPage) {
-      this.state.pageLength += 1;
+      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);
 
-  /**
-   * 删除组件
-   * @param {Object} node
-   * @return {Object} 删除的组件配置
-   */
-  public async remove(node: MNode): Promise<MNode | void> {
-    if (!node?.id) return;
+    return newNodes.length > 1 ? newNodes[0] : newNodes;
+  }
 
+  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, false);
+    const { parent, node: curNode } = this.getNodeInfo(node.id);
 
     if (!parent || !curNode) throw new Error('找不要删除的节点');
 
@@ -348,7 +385,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;
@@ -365,9 +402,7 @@ class Editor extends BaseService {
         this.resetModifiedNodeId();
         historyService.reset();
 
-        this.emit('remove', node);
-
-        return node;
+        return;
       }
     } else {
       await this.select(parent);
@@ -375,19 +410,25 @@ class Editor extends BaseService {
     }
 
     this.addModifiedNodeId(parent.id);
-    this.pushHistoryState();
-
-    this.emit('remove', node);
-
-    return node;
   }
 
   /**
-   * 更新节点
-   * @param config 新的节点配置，配置中需要有id信息
-   * @returns 更新后的节点配置
+   * 删除组件
+   * @param {Object} node
+   * @return {Object} 删除的组件配置
    */
-  public async update(config: MNode): Promise<MNode> {
+  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<void> {
+    const nodes = Array.isArray(nodeOrNodeList) ? nodeOrNodeList : [nodeOrNodeList];
+
+    await Promise.all(nodes.map((node) => this.doRemove(node)));
+
+    // 更新历史记录
+    this.pushHistoryState();
+
+    this.emit('remove');
+  }
+
+  public async doUpdate(config: MNode) {
     if (!config?.id) throw new Error('没有配置或者配置缺少id值');
 
     const info = this.getNodeInfo(config.id, false);
@@ -427,22 +468,42 @@ class Editor extends BaseService {
 
     parentNodeItems[index] = newConfig;
 
-    if (`${newConfig.id}` === `${this.get('node').id}`) {
-      this.set('node', newConfig);
-    }
+    // 将update后的配置更新到nodes中
+    const nodes = this.get('nodes');
+    const targetIndex = nodes.findIndex((nodeItem: MNode) => `${nodeItem.id}` === `${newConfig.id}`);
+    nodes.splice(targetIndex, 1, newConfig);
+    this.set('nodes', nodes);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: 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 newNodes.length > 1 ? newNodes[0] : newNodes;
   }
 
   /**
@@ -464,7 +525,11 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: 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();
@@ -475,67 +540,46 @@ class Editor extends BaseService {
    * @param config 组件节点配置
    * @returns 组件节点配置
    */
-  public async copy(config: MNode): Promise<void> {
-    globalThis.localStorage.setItem(COPY_STORAGE_KEY, serialize(config));
+  public async copy(config: MNode | MNode[]): Promise<void> {
+    await storageService.setItem(COPY_STORAGE_KEY, Array.isArray(config) ? config : [config], {
+      protocol: Protocol.OBJECT,
+    });
   }
 
   /**
    * 从localStorage中获取节点，然后添加到当前容器中
-   * @param position 如果设置，指定组件位置
+   * @param position 粘贴的坐标
    * @returns 添加后的组件节点配置
    */
-  public async paste(position: { left?: number; top?: number } = {}): Promise<MNode | void> {
-    const configStr = globalThis.localStorage.getItem(COPY_STORAGE_KEY);
-    // eslint-disable-next-line prefer-const
-    let config: any = {};
-    if (!configStr) {
-      return;
-    }
+  public async paste(position: PastePosition = {}): Promise<MNode | MNode[] | void> {
+    const config: MNode[] = await storageService.getItem(COPY_STORAGE_KEY);
 
-    try {
-      // eslint-disable-next-line no-eval
-      eval(`config = ${configStr}`);
-    } catch (e) {
-      console.error(e);
-      return;
-    }
-
-    await propsService.setNewItemId(config, this.get('root'));
-    if (config.style) {
-      config.style = {
-        ...config.style,
-        ...position,
-      };
-    }
+    if (!Array.isArray(config)) return;
 
-    if (isPage(config)) {
-      config.name = generatePageNameByApp(this.get('root'));
-    }
+    const pasteConfigs = await beforePaste(position, config);
 
-    return await this.add(config);
+    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 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;
 
     if (doc) {
-      const parentEl = doc.getElementById(`${parent.id}`);
       const el = doc.getElementById(`${node.id}`);
+      const parentEl = el?.offsetParent;
       if (parentEl && el) {
         node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
       }
@@ -543,12 +587,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: this.get('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;
   }
 
   /**
@@ -569,7 +626,55 @@ class Editor extends BaseService {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({
+      config: cloneDeep(toRaw(parent)),
+      parentId: parent.id,
+      root: cloneDeep(this.get<MApp>('root')),
+    });
+  }
+
+  /**
+   * 移动到指定容器中
+   * @param config 需要移动的节点
+   * @param targetId 容器ID
+   */
+  public async moveToContainer(config: MNode, targetId: Id): Promise<MNode | undefined> {
+    const { node, parent } = this.getNodeInfo(config.id, false);
+    const target = this.getNodeById(targetId, false) as MContainer;
+
+    const stage = this.get<StageCore | null>('stage');
+
+    if (node && parent && stage) {
+      const root = cloneDeep(this.get<MApp>('root'));
+      const index = getNodeIndex(node, parent);
+      parent.items?.splice(index, 1);
+
+      await stage.remove({ id: node.id, parentId: parent.id, root });
+
+      const layout = await this.getLayout(target);
+
+      const newConfig = mergeWith(cloneDeep(node), config, (objValue, srcValue) => {
+        if (Array.isArray(srcValue)) {
+          return srcValue;
+        }
+      });
+      newConfig.style = getInitPositionStyle(newConfig.style, layout);
+
+      target.items.push(newConfig);
+
+      await stage.select(targetId);
+
+      await stage.update({ config: cloneDeep(target), parentId: parent.id, root });
+
+      await this.select(newConfig);
+      stage.select(newConfig.id);
+
+      this.addModifiedNodeId(target.id);
+      this.addModifiedNodeId(parent.id);
+      this.pushHistoryState();
+
+      return newConfig;
+    }
   }
 
   /**
@@ -596,7 +701,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;
@@ -604,6 +709,7 @@ class Editor extends BaseService {
 
     this.update({
       id,
+      type,
       style: {
         ...style,
         left: Number(style.left) + left,
@@ -616,6 +722,7 @@ class Editor extends BaseService {
     this.removeAllListeners();
     this.set('root', null);
     this.set('node', null);
+    this.set('nodes', []);
     this.set('page', null);
     this.set('parent', null);
   }
@@ -656,13 +763,13 @@ class Editor extends BaseService {
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
-    let newConfig = cloneDeep(dist);
+    const newConfig = cloneDeep(dist);
 
     if (!isPop(src) && newConfig.style?.position) {
       if (isFixed(newConfig) && !isFixed(src)) {
-        newConfig = change2Fixed(newConfig, root);
+        newConfig.style = change2Fixed(newConfig, root);
       } else if (!isFixed(newConfig) && isFixed(src)) {
-        newConfig = await Fixed2Other(newConfig, root, this.getLayout);
+        newConfig.style = await Fixed2Other(newConfig, root, this.getLayout);
       }
     }
 

package/src/services/events.ts

@@ -22,7 +22,7 @@ import { cloneDeep } from 'lodash-es';
 import { DEFAULT_EVENTS, DEFAULT_METHODS, EventOption } from '@tmagic/core';
 import { toLine } from '@tmagic/utils';
 
-import type { ComponentGroup } from '@editor/type';
+import type { ComponentGroup } from '../type';
 
 import BaseService from './BaseService';
 

package/src/services/history.ts

@@ -20,7 +20,7 @@ import { reactive } from 'vue';
 
 import type { Id, MPage } from '@tmagic/schema';
 
-import { UndoRedo } from '@editor/utils/undo-redo';
+import { UndoRedo } from '../utils/undo-redo';
 
 import BaseService from './BaseService';