@tmagic/editor 1.1.0-beta.3 → 1.1.0-beta.6

package/src/services/editor.ts

@@ -17,45 +17,43 @@
  */
 
 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,
-  fixNodeLeft,
-  generatePageNameByApp,
   getInitPositionStyle,
   getNodeIndex,
   isFixed,
   setLayout,
-} from '@editor/utils/editor';
+} from '../utils/editor';
+import { beforeAdd, beforePaste, beforeRemove, notifyAddToStage } from '../utils/operator';
 
 import BaseService from './BaseService';
 
 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(
@@ -83,13 +81,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;
-
+    // 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 +99,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 +191,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,65 +266,76 @@ 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: MContainer | undefined;
-    const isPage = type === NodeType.PAGE;
+  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);
+  }
 
-    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);
-    }
+  /**
+   * 批量向容器添加节点
+   * @param configs 将要添加的节点数组
+   * @returns 添加后的节点
+   */
+  public async multiAdd(configs: MNode[]): Promise<MNode[]> {
+    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);
 
-    if (!parentNode) throw new Error('未找到父元素');
+    // 增加历史记录 多选不可能选中page
+    this.addModifiedNodeId(newNodeIds.join('-'));
+    this.pushHistoryState();
 
-    const layout = await this.getLayout(toRaw(parentNode), addNode as MNode);
-    const newNode = { ...toRaw(await propsService.getPropsValue(type, config)) };
-    newNode.style = getInitPositionStyle(newNode.style, layout, parentNode, this.get<StageCore>('stage'));
+    // 触发选中样式
+    stage?.multiSelect(newNodeIds);
 
-    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
-      throw new Error('app下不能添加组件');
-    }
+    this.emit('multiAdd', newNodes);
 
-    parentNode?.items?.push(newNode);
+    return newNodes;
+  }
 
+  /**
+   * 向指点容器添加组件节点
+   * @param addConfig 将要添加的组件节点配置
+   * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
+   * @returns 添加后的节点
+   */
+  public async add(addNode: AddMNode, parent?: MContainer | null): Promise<MNode> {
     const stage = this.get<StageCore | null>('stage');
-    const root = this.get<MApp>('root');
-
-    await stage?.add({ config: cloneDeep(newNode), parent: cloneDeep(parentNode), root: cloneDeep(root) });
-
-    if (layout === Layout.ABSOLUTE) {
-      const fixedLeft = fixNodeLeft(newNode, parentNode, stage?.renderer.contentWindow?.document);
-      if (typeof fixedLeft !== 'undefined') {
-        newNode.style.left = fixedLeft;
-        await stage?.update({ config: cloneDeep(newNode), root: cloneDeep(root) });
-      }
-    }
-
+    // 新增元素到配置
+    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();
     }
 
-    stage?.select(newNode.id);
-
     if (isPage) {
       this.state.pageLength += 1;
+    } else {
+      // 新增页面，这个时候页面还有渲染出来，此时select会出错，在runtime-ready的时候回去select
+      stage?.select(newNode.id);
     }
 
     this.emit('add', newNode);
@@ -336,50 +348,18 @@ class Editor extends BaseService {
    * @param {Object} node
    * @return {Object} 删除的组件配置
    */
-  public async remove(node: MNode): Promise<MNode | void> {
-    if (!node?.id) return;
-
-    const root = this.get<MApp | null>('root');
-
-    if (!root) throw new Error('没有root');
-
-    const { parent, node: curNode } = this.getNodeInfo(node.id, false);
-
-    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, root: cloneDeep(this.get('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();
-
-        this.emit('remove', node);
-
-        return node;
-      }
-    } else {
-      await this.select(parent);
-      stage?.select(parent.id);
+  public async remove(nodeOrNodeList: MNode | MNode[]): Promise<MNode | MNode[]> {
+    if (Array.isArray(nodeOrNodeList)) {
+      // 多选批量删除
+      const nodes = nodeOrNodeList;
+      return this.multiRemove(nodes);
     }
-
-    this.addModifiedNodeId(parent.id);
+    const node = nodeOrNodeList;
+    const removeParent = await beforeRemove(node);
+    // 删除的是页面
+    if (!removeParent) return node;
+    // 更新历史记录
+    this.addModifiedNodeId(removeParent.id);
     this.pushHistoryState();
 
     this.emit('remove', node);
@@ -387,6 +367,25 @@ class Editor extends BaseService {
     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;
+  }
+
   /**
    * 更新节点
    * @param config 新的节点配置，配置中需要有id信息
@@ -432,9 +431,11 @@ 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: cloneDeep(this.get('root')) });
 
@@ -480,44 +481,25 @@ 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;
-    }
-
-    try {
-      // eslint-disable-next-line no-eval
-      eval(`config = ${configStr}`);
-    } catch (e) {
-      console.error(e);
-      return;
-    }
+  public async paste(position: PastePosition = {}): Promise<MNode[] | void> {
+    const config = await storageService.getItem(COPY_STORAGE_KEY);
 
-    await propsService.setNewItemId(config, this.get('root'));
-    if (config.style) {
-      config.style = {
-        ...config.style,
-        ...position,
-      };
-    }
+    if (!config) return;
 
-    if (isPage(config)) {
-      config.name = generatePageNameByApp(this.get('root'));
-    }
+    const pasteConfigs = await beforePaste(position, config);
 
-    return await this.add(config);
+    return await this.multiAdd(pasteConfigs);
   }
 
   /**
@@ -539,8 +521,8 @@ class Editor extends BaseService {
     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;
       }
@@ -671,6 +653,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);
   }

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';
 

package/src/services/props.ts

@@ -17,15 +17,15 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep, mergeWith, random } from 'lodash-es';
+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 { PropsState } from '@editor/type';
-import { DEFAULT_CONFIG, fillConfig, getDefaultPropsValue } from '@editor/utils/props';
+import type { PropsState } from '../type';
+import { DEFAULT_CONFIG, fillConfig } from '../utils/props';
 
 import BaseService from './BaseService';
 
@@ -36,7 +36,15 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
+    super([
+      'setPropsConfig',
+      'getPropsConfig',
+      'setPropsValue',
+      'getPropsValue',
+      'createId',
+      'setNewItemId',
+      'getDefaultPropsValue',
+    ]);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -88,7 +96,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
+  public async getPropsValue(type: string, { inputEvent, ...defaultValue }: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -99,18 +107,39 @@ class Props extends BaseService {
       return value;
     }
 
-    const data = cloneDeep(defaultValue as any);
-
-    await this.setNewItemId(data);
+    const [id, defaultPropsValue, data] = await Promise.all([
+      this.createId(type),
+      this.getDefaultPropsValue(type),
+      this.setNewItemId(
+        cloneDeep({
+          type,
+          ...defaultValue,
+        } as any),
+      ),
+    ]);
 
     return {
-      ...getDefaultPropsValue(type, await this.createId(type)),
-      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
+      id,
+      ...defaultPropsValue,
+      ...mergeWith({}, cloneDeep(this.state.propsValueMap[type] || {}), data),
     };
   }
 
+  /**
+   * 生成指定位数的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}_${random(10000, false)}`;
+    return `${type}_${this.guid()}`;
   }
 
   /**
@@ -133,6 +162,29 @@ class Props extends BaseService {
         await this.setNewItemId(item, config as MPage);
       }
     }
+
+    return config;
+  }
+
+  /**
+   * 获取默认属性配置
+   * @param type 组件类型
+   * @returns Object
+   */
+  public async getDefaultPropsValue(type: string) {
+    return ['page', 'container'].includes(type)
+      ? {
+          type,
+          layout: 'absolute',
+          style: {},
+          name: type,
+          items: [],
+        }
+      : {
+          type,
+          style: {},
+          name: type,
+        };
   }
 }
 

package/src/services/storage.ts

@@ -0,0 +1,133 @@
+import serialize from 'serialize-javascript';
+
+import BaseService from './BaseService';
+
+interface Options {
+  namespace?: string;
+  protocol?: Protocol;
+}
+
+export enum Protocol {
+  OBJECT = 'object',
+  JSON = 'json',
+  STRING = 'string',
+  NUMBER = 'number',
+  BOOLEAN = 'boolean',
+}
+
+/**
+ * 数据存储服务
+ */
+export class WebStorage extends BaseService {
+  private storage: Storage = globalThis.localStorage;
+  private namespace = 'tmagic';
+
+  constructor() {
+    super(['getStorage', 'getNamespace', 'clear', 'getItem', 'removeItem', 'setItem']);
+  }
+
+  /**
+   * 获取数据存储对象，可以通过
+   * const storageService = new StorageService();
+   * storageService.usePlugin({
+   *    // 替换存储对象为 sessionStorage
+   *    async afterGetStorage(): Promise<Storage> {
+   *      return window.sessionStorage;
+   *    },
+   * });
+   */
+  public async getStorage(): Promise<Storage> {
+    return this.storage;
+  }
+
+  public async getNamespace(): Promise<string> {
+    return this.namespace;
+  }
+
+  /**
+   * 清理，支持storageService.usePlugin
+   */
+  public async clear(): Promise<void> {
+    const storage = await this.getStorage();
+    storage.clear();
+  }
+  /**
+   * 获取存储项，支持storageService.usePlugin
+   */
+  public async getItem(key: string, options: Options = {}): Promise<any> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    const { protocol = options.protocol, item } = this.getValueAndProtocol(
+      storage.getItem(`${options.namespace || namespace}:${key}`),
+    );
+
+    if (item === null) return null;
+
+    switch (protocol) {
+      case Protocol.OBJECT:
+        // eslint-disable-next-line no-eval
+        return eval(`(${item})`);
+      case Protocol.JSON:
+        return JSON.parse(item);
+      case Protocol.NUMBER:
+        return Number(item);
+      case Protocol.BOOLEAN:
+        return Boolean(item);
+      default:
+        return item;
+    }
+  }
+  /**
+   * 获取指定索引位置的key
+   */
+  public async key(index: number): Promise<string | null> {
+    const storage = await this.getStorage();
+    return storage.key(index);
+  }
+
+  /**
+   * 移除存储项，支持storageService.usePlugin
+   */
+  public async removeItem(key: string, options: Options = {}): Promise<void> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    storage.removeItem(`${options.namespace || namespace}:${key}`);
+  }
+
+  /**
+   * 设置存储项，支持storageService.usePlugin
+   */
+  public async setItem(key: string, value: any, options: Options = {}): Promise<void> {
+    const [storage, namespace] = await Promise.all([this.getStorage(), this.getNamespace()]);
+    let item = value;
+    const protocol = options.protocol ? `${options.protocol}:` : '';
+    if (typeof value === Protocol.STRING || typeof value === Protocol.NUMBER) {
+      item = `${protocol}${value}`;
+    } else {
+      item = `${protocol}${serialize(value)}`;
+    }
+    storage.setItem(`${options.namespace || namespace}:${key}`, item);
+  }
+
+  private getValueAndProtocol(value: string | null) {
+    let protocol = '';
+
+    if (value === null) {
+      return {
+        item: value,
+        protocol,
+      };
+    }
+
+    const item = value.replace(new RegExp(`^(${Object.values(Protocol).join('|')})(:)(.+)`), (_$0, $1, _$2, $3) => {
+      protocol = $1;
+      return $3;
+    });
+
+    return {
+      protocol,
+      item,
+    };
+  }
+}
+
+export type StorageService = WebStorage;
+export default new WebStorage();

package/src/services/ui.ts

@@ -20,8 +20,8 @@ import { reactive, toRaw } from 'vue';
 
 import type StageCore from '@tmagic/stage';
 
-import editorService from '@editor/services/editor';
-import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '@editor/type';
+import editorService from '../services/editor';
+import type { GetColumnWidth, SetColumnWidth, StageRect, UiState } from '../type';
 
 import BaseService from './BaseService';
 
@@ -155,10 +155,16 @@ class Ui extends BaseService {
     const { stageRect, stageContainerRect } = state;
     const { height, width } = stageContainerRect;
     if (!width || !height) return 1;
-    if (width > stageRect.width && height > stageRect.height) {
+
+    // 30为标尺的大小
+    const stageWidth = stageRect.width + 30;
+    const stageHeight = stageRect.height + 30;
+
+    if (width > stageWidth && height > stageHeight) {
       return 1;
     }
-    return Math.min((width - 100) / stageRect.width || 1, (height - 100) / stageRect.height || 1);
+    // 60/80是为了不要让画布太过去贴住四周（这样好看些）
+    return Math.min((width - 60) / stageWidth || 1, (height - 80) / stageHeight || 1);
   }
 }