@tmagic/editor 1.0.0-beta.8 → 1.0.0-rc.10

package/src/services/editor.ts

@@ -21,8 +21,9 @@ import { cloneDeep, mergeWith } from 'lodash-es';
 import serialize from 'serialize-javascript';
 
 import type { Id, MApp, MComponent, MContainer, MNode, MPage } from '@tmagic/schema';
-import type StageCore from '@tmagic/stage';
-import { getNodePath, isPop } from '@tmagic/utils';
+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';
@@ -32,11 +33,11 @@ import {
   change2Fixed,
   COPY_STORAGE_KEY,
   Fixed2Other,
+  generatePageNameByApp,
   getNodeIndex,
   initPosition,
   isFixed,
   setLayout,
-  setNewItemId,
 } from '@editor/utils/editor';
 import { log } from '@editor/utils/logger';
 
@@ -51,29 +52,37 @@ class Editor extends BaseService {
     parent: null,
     node: null,
     stage: null,
+    highlightNode: null,
     modifiedNodeIds: new Map(),
+    pageLength: 0,
   });
 
   constructor() {
-    super([
-      'getLayout',
-      'select',
-      'add',
-      'remove',
-      'update',
-      'sort',
-      'copy',
-      'paste',
-      'alignCenter',
-      'moveLayer',
-      'undo',
-      'redo',
-    ]);
+    super(
+      [
+        'getLayout',
+        'select',
+        'add',
+        'remove',
+        'update',
+        'sort',
+        'copy',
+        'paste',
+        'alignCenter',
+        'moveLayer',
+        'move',
+        'undo',
+        'redo',
+        'highlight',
+      ],
+      // 需要注意循环依赖问题，如果函数间有相互调用的话，不能设置为串行调用
+      ['select', 'update', 'moveLayer'],
+    );
   }
 
   /**
    * 设置当前指点节点配置
-   * @param name 'root' | 'page' | 'parent' | 'node'
+   * @param name 'root' | 'page' | 'parent' | 'node' | 'highlightNode'
    * @param value MNode
    * @returns MNode
    */
@@ -82,6 +91,7 @@ class Editor extends BaseService {
     log('store set ', name, ' ', value);
 
     if (name === 'root') {
+      this.state.pageLength = (value as unknown as MApp)?.items?.length || 0;
       this.emit('root-change', value);
     }
   }
@@ -101,7 +111,7 @@ class Editor extends BaseService {
    * @returns {EditorNodeInfo}
    */
   public getNodeInfo(id: Id): EditorNodeInfo {
-    const root = this.get<MApp | null>('root');
+    const root = toRaw(this.get<MApp | null>('root'));
     if (!root) return {};
 
     if (id === root.id) {
@@ -119,7 +129,7 @@ class Editor extends BaseService {
     info.parent = path[path.length - 2] as MContainer;
 
     path.forEach((item) => {
-      if (item.type === 'page') {
+      if (item.type === NodeType.PAGE) {
         info.page = item as MPage;
         return;
       }
@@ -152,13 +162,15 @@ class Editor extends BaseService {
   /**
    * 只有容器拥有布局
    */
-  public async getLayout(node: MNode): Promise<Layout> {
-    if (node.layout) {
-      return node.layout;
+  public async getLayout(parent: MNode, node?: MNode): Promise<Layout> {
+    if (node && typeof node !== 'function' && isFixed(node)) return Layout.FIXED;
+
+    if (parent.layout) {
+      return parent.layout;
     }
 
     // 如果该节点没有设置position，则认为是流式布局，例如获取root的布局时
-    if (!node.style?.position) {
+    if (!parent.style?.position) {
       return Layout.RELATIVE;
     }
 
@@ -166,28 +178,12 @@ class Editor extends BaseService {
   }
 
   /**
-   * 选中指点节点（将指点节点设置成当前选中状态）
-   * @param config 指点节点配置或者ID
+   * 选中指定节点（将指定节点设置成当前选中状态）
+   * @param config 指定节点配置或者ID
    * @returns 当前选中的节点配置
    */
-  public async select(config: MNode | Id): Promise<MNode> {
-    let id: Id;
-    if (typeof config === 'string' || typeof config === 'number') {
-      id = config;
-    } else {
-      id = config.id;
-    }
-    if (!id) {
-      throw new Error('没有ID，无法选中');
-    }
-
-    const { node, parent, page } = this.getNodeInfo(id);
-    if (!node) throw new Error('获取不到组件信息');
-
-    if (node.id === this.state.root?.id) {
-      throw new Error('不能选根节点');
-    }
-
+  public async select(config: MNode | Id): Promise<MNode> | never {
+    const { node, page, parent } = this.selectedConfigExceptionHandler(config);
     this.set('node', node);
     this.set('page', page || null);
     this.set('parent', parent || null);
@@ -198,7 +194,68 @@ class Editor extends BaseService {
       historyService.empty();
     }
 
-    return node;
+    if (node?.id) {
+      this.get<StageCore>('stage')
+        ?.renderer.runtime?.getApp?.()
+        ?.emit(
+          'editor:select',
+          {
+            node,
+            page,
+            parent,
+          },
+          getNodePath(node.id, this.get<MApp>('root').items),
+        );
+    }
+
+    this.emit('select', node);
+
+    return node!;
+  }
+
+  public async selectNextNode(): Promise<MNode> | never {
+    const node = toRaw(this.get('node'));
+
+    if (!node || isPage(node) || node.type === NodeType.ROOT) return node;
+
+    const parent = toRaw(this.getParentById(node.id));
+
+    if (!parent) return node;
+
+    const index = getNodeIndex(node, parent);
+
+    const nextNode = parent.items[index + 1] || parent.items[0];
+
+    await this.select(nextNode);
+    this.get<StageCore>('stage')?.select(nextNode.id);
+
+    return nextNode;
+  }
+
+  public async selectNextPage(): Promise<MNode> | never {
+    const root = toRaw(this.get<MApp>('root'));
+    const page = toRaw(this.get('page'));
+
+    const index = getNodeIndex(page, root);
+
+    const nextPage = root.items[index + 1] || root.items[0];
+
+    await this.select(nextPage);
+    this.get<StageCore>('stage')?.select(nextPage.id);
+
+    return nextPage;
+  }
+
+  /**
+   * 高亮指定节点
+   * @param config 指定节点配置或者ID
+   * @returns 当前高亮的节点配置
+   */
+  public highlight(config: MNode | Id): void {
+    const { node } = this.selectedConfigExceptionHandler(config);
+    const currentHighlightNode = this.get('highlightNode');
+    if (currentHighlightNode === node) return;
+    this.set('highlightNode', node);
   }
 
   /**
@@ -207,12 +264,14 @@ class Editor extends BaseService {
    * @param parent 要添加到的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
    * @returns 添加后的节点
    */
-  public async add({ type, ...config }: AddMNode, parent?: MContainer | null): Promise<MNode> {
+  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 (type === 'page') {
+    if (isPage) {
       parentNode = this.get<MApp>('root');
       // 由于支持中间件扩展，在parent参数为undefined时，parent会变成next函数
     } else if (parent && typeof parent !== 'function') {
@@ -225,21 +284,38 @@ class Editor extends BaseService {
 
     if (!parentNode) throw new Error('未找到父元素');
 
-    const layout = await this.getLayout(parentNode);
-    const newNode = initPosition({ ...toRaw(await propsService.getPropsValue(type)), ...config }, layout);
+    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'),
+    );
 
-    if ((parentNode?.type === 'app' || curNode.type === 'app') && newNode.type !== 'page') {
+    if ((parentNode?.type === NodeType.ROOT || curNode.type === NodeType.ROOT) && newNode.type !== NodeType.PAGE) {
       throw new Error('app下不能添加组件');
     }
 
     parentNode?.items?.push(newNode);
 
-    await this.get<StageCore>('stage')?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
+    const stage = this.get<StageCore | null>('stage');
+
+    await stage?.add({ config: cloneDeep(newNode), root: cloneDeep(this.get('root')) });
 
     await this.select(newNode);
 
     this.addModifiedNodeId(newNode.id);
-    this.pushHistoryState();
+    if (!isPage) {
+      this.pushHistoryState();
+    }
+
+    stage?.select(newNode.id);
+
+    if (isPage) {
+      this.state.pageLength += 1;
+    }
+
+    this.emit('add', newNode);
 
     return newNode;
   }
@@ -265,17 +341,38 @@ class Editor extends BaseService {
     if (typeof index !== 'number' || index === -1) throw new Error('找不要删除的节点');
 
     parent.items?.splice(index, 1);
-    this.get<StageCore>('stage')?.remove({ id: node.id, root: this.get('root') });
-
-    if (node.type === 'page') {
-      await this.select(root.items[0] || root);
+    const stage = this.get<StageCore | null>('stage');
+    stage?.remove({ id: node.id, root: 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);
     }
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
 
+    this.emit('remove', node);
+
     return node;
   }
 
@@ -303,7 +400,7 @@ class Editor extends BaseService {
 
     if (!newConfig.type) throw new Error('配置缺少type值');
 
-    if (newConfig.type === 'app') {
+    if (newConfig.type === NodeType.ROOT) {
       this.set('root', newConfig);
       return newConfig;
     }
@@ -324,19 +421,21 @@ class Editor extends BaseService {
 
     parentNodeItems[index] = newConfig;
 
-    if (newConfig.id === this.get('node').id) {
+    if (`${newConfig.id}` === `${this.get('node').id}`) {
       this.set('node', newConfig);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(newConfig), root: this.get('root') });
 
-    if (newConfig.type === 'page') {
+    if (newConfig.type === NodeType.PAGE) {
       this.set('page', newConfig);
     }
 
     this.addModifiedNodeId(newConfig.id);
     this.pushHistoryState();
 
+    this.emit('update', newConfig);
+
     return newConfig;
   }
 
@@ -359,7 +458,7 @@ class Editor extends BaseService {
     await this.update(parent);
     await this.select(node);
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(node), root: this.get('root') });
 
     this.addModifiedNodeId(parent.id);
     this.pushHistoryState();
@@ -395,7 +494,7 @@ class Editor extends BaseService {
       return;
     }
 
-    setNewItemId(config, this.get('root'));
+    await propsService.setNewItemId(config, this.get('root'));
     if (config.style) {
       config.style = {
         ...config.style,
@@ -403,6 +502,10 @@ class Editor extends BaseService {
       };
     }
 
+    if (isPage(config)) {
+      config.name = generatePageNameByApp(this.get('root'));
+    }
+
     return await this.add(config);
   }
 
@@ -414,17 +517,28 @@ class Editor extends BaseService {
   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(parent);
+    const layout = await this.getLayout(toRaw(parent), toRaw(node));
     if (layout === Layout.RELATIVE) {
       return;
     }
 
-    if (parent.style?.width && node.style?.width) {
+    if (!node.style) return;
+
+    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}`);
+      if (parentEl && el) {
+        node.style.left = (parentEl.clientWidth - el.clientWidth) / 2;
+      }
+    } else if (parent.style && isNumber(parent.style?.width) && isNumber(node.style?.width)) {
       node.style.left = (parent.style.width - node.style.width) / 2;
     }
 
     await this.update(node);
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(node)), root: this.get('root') });
     this.addModifiedNodeId(config.id);
     this.pushHistoryState();
 
@@ -441,15 +555,15 @@ class Editor extends BaseService {
     const brothers: MNode[] = parent?.items || [];
     const index = brothers.findIndex((item) => `${item.id}` === `${node?.id}`);
 
-    if (offset === LayerOffset.BOTTOM) {
+    if (offset === LayerOffset.TOP) {
       brothers.splice(brothers.length - 1, 0, brothers.splice(index, 1)[0]);
-    } else if (offset === LayerOffset.TOP) {
+    } else if (offset === LayerOffset.BOTTOM) {
       brothers.splice(0, 0, brothers.splice(index, 1)[0]);
     } else {
       brothers.splice(index + parseInt(`${offset}`, 10), 0, brothers.splice(index, 1)[0]);
     }
 
-    this.get<StageCore>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
+    this.get<StageCore | null>('stage')?.update({ config: cloneDeep(toRaw(parent)), root: this.get('root') });
   }
 
   /**
@@ -472,6 +586,26 @@ class Editor extends BaseService {
     return value;
   }
 
+  public async move(left: number, top: number) {
+    const node = toRaw(this.get('node'));
+    if (!node || isPage(node)) return;
+
+    const { style, id } = node;
+    if (!style || style.position !== 'absolute') return;
+
+    if (top && !isNumber(style.top)) return;
+    if (left && !isNumber(style.left)) return;
+
+    this.update({
+      id,
+      style: {
+        ...style,
+        left: Number(style.left) + left,
+        top: Number(style.top) + top,
+      },
+    });
+  }
+
   public destroy() {
     this.removeAllListeners();
     this.set('root', null);
@@ -508,7 +642,11 @@ class Editor extends BaseService {
     this.isHistoryStateChange = true;
     await this.update(value.data);
     this.set('modifiedNodeIds', value.modifiedNodeIds);
-    setTimeout(() => value.nodeId && this.select(value.nodeId), 0);
+    setTimeout(async () => {
+      if (!value.nodeId) return;
+      await this.select(value.nodeId);
+      this.get<StageCore | null>('stage')?.select(value.nodeId);
+    }, 0);
   }
 
   private async toggleFixedPosition(dist: MNode, src: MNode, root: MApp) {
@@ -524,6 +662,30 @@ class Editor extends BaseService {
 
     return newConfig;
   }
+
+  private selectedConfigExceptionHandler(config: MNode | Id): EditorNodeInfo {
+    let id: Id;
+    if (typeof config === 'string' || typeof config === 'number') {
+      id = config;
+    } else {
+      id = config.id;
+    }
+    if (!id) {
+      throw new Error('没有ID，无法选中');
+    }
+
+    const { node, parent, page } = this.getNodeInfo(id);
+    if (!node) throw new Error('获取不到组件信息');
+
+    if (node.id === this.state.root?.id) {
+      throw new Error('不能选根节点');
+    }
+    return {
+      node,
+      parent,
+      page,
+    };
+  }
 }
 
 export type EditorService = Editor;

package/src/services/history.ts

@@ -51,6 +51,13 @@ class History extends BaseService {
     this.on('change', this.setCanUndoRedo);
   }
 
+  public reset() {
+    this.state.pageSteps = {};
+    this.state.pageId = undefined;
+    this.state.canRedo = false;
+    this.state.canUndo = false;
+  }
+
   public changePage(page: MPage): void {
     if (!page) return;
 

package/src/services/props.ts

@@ -17,11 +17,12 @@
  */
 
 import { reactive } from 'vue';
-import { cloneDeep } from 'lodash-es';
+import { cloneDeep, mergeWith, random } from 'lodash-es';
 
 import type { FormConfig } from '@tmagic/form';
-import type { MComponent, MNode } from '@tmagic/schema';
-import { toLine } from '@tmagic/utils';
+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';
@@ -35,7 +36,7 @@ class Props extends BaseService {
   });
 
   constructor() {
-    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue']);
+    super(['setPropsConfig', 'getPropsConfig', 'setPropsValue', 'getPropsValue', 'createId', 'setNewItemId']);
   }
 
   public setPropsConfigs(configs: Record<string, FormConfig>) {
@@ -87,7 +88,7 @@ class Props extends BaseService {
    * @param type 组件类型
    * @returns 组件初始值
    */
-  public async getPropsValue(type: string) {
+  public async getPropsValue(type: string, defaultValue: Record<string, any> = {}) {
     if (type === 'area') {
       const value = (await this.getPropsValue('button')) as MComponent;
       value.className = 'action-area';
@@ -98,13 +99,67 @@ class Props extends BaseService {
       return value;
     }
 
-    return cloneDeep({
-      ...getDefaultPropsValue(type),
-      ...(this.state.propsValueMap[type] || {}),
-    });
+    const data = cloneDeep(defaultValue as any);
+
+    await this.setNewItemId(data);
+
+    return {
+      ...getDefaultPropsValue(type, await this.createId(type)),
+      ...mergeWith(cloneDeep(this.state.propsValueMap[type] || {}), data),
+    };
+  }
+
+  public async createId(type: string | number): Promise<string> {
+    return `${type}_${random(10000, false)}`;
+  }
+
+  /**
+   * 将组件与组件的子元素配置中的id都设置成一个新的ID
+   * @param {Object} config 组件配置
+   */
+  /* eslint no-param-reassign: ["error", { "props": false }] */
+  public async setNewItemId(config: MNode, parent?: MPage) {
+    const oldId = config.id;
+
+    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);
+      }
+    }
   }
 }
 
+/**
+ * 复制页面时，需要把组件下关联的弹窗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;
+    }
+
+    if (Array.isArray(config.items)) {
+      updatePopId(oldId, popId, config as MPage);
+    }
+  });
+};
+
 export type PropsService = Props;
 
 export default new Props();