@cicctencent/low-code-simulate-base 0.0.0-stage → 1.1.10

package/src/domain/PreviewDomain.ts

@@ -0,0 +1,424 @@
+// 模拟器预览实体
+import {
+  log,
+  error,
+  Entity,
+  cloneDeep,
+  isEqual,
+  toPlainObject,
+} from '@cicctencent/ark-util';
+import { Communicator } from '@cicctencent/postmessage-channel';
+
+import type {
+  EditorConfig,
+  Project,
+  MenuData,
+  ComponentItem,
+  CheckRequestItem,
+  History,
+} from '@cicctencent/low-code-core';
+import { ComponentType } from '@cicctencent/low-code-core';
+import ProjectDomain from './ProjectDomain';
+import DataHistoryDomain from './DataHistoryDomain';
+
+const logTag = '[low-code-preview PreviewDomain]';
+const logInfo = log(logTag);
+const logError = error(logTag);
+
+
+/**
+ * @public
+ */
+export interface PreviewDomainState<T = ProjectDomain> {
+  project: T; // 项目数据
+  communicator: Communicator; // 用于和模拟器通讯的通讯器
+}
+
+/**
+ * @public
+ */
+export default class PreviewDomain extends Entity<PreviewDomainState> {
+
+
+  history: DataHistoryDomain<History>;
+
+  /**
+   *  @public
+   *  @param state - 初始化数据
+   */
+  constructor(state: PreviewDomainState) {
+    super(state);
+    this.state = state;
+    this.history = new DataHistoryDomain<History>();
+    Object.entries(this.subscribe).forEach(([key, value]) => {
+      this.state.communicator.subscribe(key, value.bind(this));
+    });
+    // 发送到编辑器
+    this.projectDomain.on('emitEditor', (cmd: string, ...params: any[]) => {
+      this.publish[cmd]
+        ? this.publish[cmd](...params)
+        : this.commit(cmd, params?.[0]);
+    });
+    // 发送到Preview
+    this.projectDomain.on('emitPreview', this.emit.bind(this));
+    this.projectDomain.on('updateHistory', this.updateHistory.bind(this));
+  }
+
+  /**
+   * @public
+   */
+  updateHistory() {
+    this.history.update(this.projectState);
+    this.emit('updateProject', this.projectDomain);
+    this.publish.update();
+  }
+
+  /**
+   *  @public
+   */
+  get projectDomain() {
+    return this.state.project;
+  }
+
+  /**
+   *  @public
+   */
+  get projectState() {
+    const { meta, pages } = this.projectData;
+    return {
+      projectData: {
+        meta: meta,
+        pages: pages,
+      }, currentComponentPath: this.projectDomain.currentComponentPath
+    };
+  }
+
+  /**
+   * @public
+   * 添加历史记录 
+   */
+  addHistory() {
+    const currentProject = this.history.data || {};
+    const projectState = this.projectState;
+    // 获取组件信息
+    if (currentProject.currentComponentPath === projectState.currentComponentPath) {
+      const value = this.projectDomain.needUpdateHistory(currentProject);
+      // 如果返回true，表示更新历史记录，不新增
+      if (value) {
+        try {
+          // 通知模拟器更新project数据
+          this.emit('updateProject', this.projectDomain);
+          // 通知编辑器更新config和project数据 config会改变两次
+          this.publish.update();
+        } catch (e) {
+          console.error(e);
+        }
+        return;
+      }
+    }
+    if (this.history.add(projectState)) {
+      try {
+        // 通知模拟器更新project数据
+        this.emit('updateProject', this.projectDomain);
+        // 通知编辑器更新config和project数据 config会改变两次
+        this.publish.update();
+      } catch (e) {
+        console.error(e);
+      }
+      this.activate();
+    }
+  }
+
+  /**
+   * @public
+   * 编辑器展示配置
+   */
+  get config(): EditorConfig {
+    const { config } = this.projectDomain;
+    const { functionData } = config;
+    if (functionData) {
+      // 设置撤销重做是否可点击
+      if (functionData.undo) {
+        functionData.undo.clickable = this.history.canUndo;
+      }
+
+      if (functionData.redo) {
+        functionData.redo.clickable = this.history.canRedo;
+      }
+    }
+
+    return config;
+  }
+
+  /**
+   *  @public
+   *  获取项目数据
+   */
+  get projectData(): Project {
+    return this.projectDomain.state.project;
+  }
+
+  /**
+   * @public
+   * 更新激活状态。由于激活状态与历史记录变化关联度比较大，收敛到这里
+   * @param path - 路径
+   */
+  activate(path?: string) {
+    const { project } = this.state
+    if (path) {
+      // 提供给外部用
+      project.activate({ path });
+      this.publish.update();
+    }
+    // 通知模拟器
+    this.emit('activate', project.currentComponent?.componentId);
+  }
+
+  /**
+   *  @public
+   */
+  subscribe = {
+    /**
+     *  @public
+     * @param param0 - 从模拟器发送过来的数据
+     * @returns 
+     */
+    init: ({ data: project }) => {
+      if (!isEqual(this.projectData, project)) {
+        // 空数据或者与旧数据相同，则不处理
+        logInfo('init', project);
+        this.projectDomain.setProject(project);
+        // 通知模拟器更新project数据
+        this.emit('updateProject', this.projectDomain);
+        // 通知编辑器更新config和project数据 config会改变两次
+        this.publish.update();
+      }
+      this.history.reset();
+      this.addHistory();
+      return toPlainObject(this.config);
+
+    },
+    /**
+     *  @public
+     * @param param0 - 从模拟器发送过来的数据
+     * @returns 
+     */
+    click: ({ data: { key, value } }) => {
+      logInfo('click', key, value, key);
+      if (['undo', 'redo'].includes(key.action)) {
+        this.function[key.action](key);
+        // 不新增记录
+        return toPlainObject(this.config);
+      } else if (key.module === 'function' && this.function[key.action]) {
+        this.function[key.action]({ key, value });
+      } else if (key.action in this.projectDomain) {
+        this.projectDomain[key.action](key, value);
+      } else {
+        return null;
+      }
+      this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了。降低通讯成本
+    },
+    /**
+     *  @public
+     *  @param param0 - 从模拟器发送过来的数据
+     */
+    drag: ({ data: { key, value } }) => {
+      this.projectDomain.componentDrag(key, value);
+      this.addHistory();
+    },
+    /**
+     * @public
+     * @param param0 - 从模拟器发送过来的数据
+     */
+    set: ({ data: { key, value } }) => {
+      logInfo('set', key, value);
+      this.projectDomain[key.action](key.path, value);
+      this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了
+    },
+    /**
+     * @public
+     * @param param0 - 从模拟器发送过来的数据
+     * @returns 
+     */
+    contextmenu: ({ data: { key } }): MenuData => {
+      let menus = [];
+      try {
+        this.projectDomain.activate(key);
+        menus = this.projectDomain.menuData;
+        this.activate();
+      } catch (e) {
+        logError(e);
+      }
+      return toPlainObject({
+        config: this.config,
+        menus,
+      });
+    },
+    /**
+     * @public
+     *  校验 
+     */
+    validate: async ({ data }): Promise<CheckRequestItem[]> => {
+      // 发布时校验所有组件表单数据。模拟器校验数据不通过，可以给编辑器发模态框或toast
+      const result = await this.send('validatePage', data);
+      logInfo('validate result', result, this.config);
+      return toPlainObject({ config: this.config, result });
+    },
+    /**
+     * @public
+    * 导航树移动组件 
+    */
+    splice: ({ data }) => {
+      logInfo('splice', data);
+      const { draggingNode, dropNode, dropType } = data;
+      let curentDropNodePath = dropNode.key.path;
+      if (dropType === 'inner' && dropNode.type === ComponentType.Container) {
+        curentDropNodePath = `${curentDropNodePath}.children.0`;
+      }
+      this.projectDomain.moveTo(draggingNode.key.path, curentDropNodePath);
+      this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了
+    },
+    /**
+     * @public
+     * @param param0 - 从模拟器发送过来的数据
+     */
+    action: ({ data: { action, value } }) => {
+      logInfo('action', action, value);
+      this.projectDomain.action(action, value);
+      this.addHistory(); // addHistory 会触发更新，这里就不用返回数据了。降低通讯成本
+    }
+  };
+
+
+
+  /**
+   * @public
+   * @param cmd - 命令字
+   * @param payload - 发送给模拟器的内容
+   * @returns 
+   */
+  async commit(cmd, payload) {
+    logInfo('publish begin', cmd, payload);
+    const { data } = await this.state.communicator.publish(
+      cmd,
+      toPlainObject(payload)
+    );
+    logInfo('publish end', cmd, payload, data);
+    return data;
+  }
+  /**
+   * @public
+   */
+  publish = {
+    /**
+     * @public
+     * 在加载完时，告诉编辑器
+     * @returns 
+     */
+    load: () => this.commit('load', this.config),
+    /**
+     *  @public
+     * 调用编辑器的交互方法，如让编辑器弹出toast等
+     * @param data - 发送给模拟器的内容
+     * @returns 
+     */
+    action: (data: { key: string; value: any }) => this.commit('action', data),
+    /**
+     * @public
+     * 如果project发生变化，则需update通知编辑器
+     * @param forceUpdate - 是否强制更新
+     */
+    update: (forceUpdate = false) => {
+      try {
+        this.commit('update', {
+          config: this.config,
+          project: this.projectData,
+          forceUpdate,
+        });
+      } catch (err) {
+        console.error(err);
+      }
+    },
+    /**
+     * @public
+     * @param imgUrl - 图片url
+     */
+    updateScreenShot: (imgUrl: string) => {
+      this.commit('updateScreenShot', imgUrl);
+    },
+  };
+
+  /**
+   * @public
+   * @param currentProject - 当前项目信息
+   */
+  replaceProject(currentProject: History) {
+    try {
+      this.projectDomain.replaceProject(currentProject);
+
+      // 通知模拟器更新project数据
+      this.emit('updateProject', this.projectDomain);
+      this.commit('update', {
+        config: this.config,
+        project: currentProject?.projectData,
+        forceUpdate: true,
+      });
+      this.activate();
+    } catch (e) {
+      console.error(e);
+    }
+  }
+  /**
+   *  @public
+   */
+  function = {
+    /**
+     * @public
+     */
+    simulatorSizeList: ({ key, value }) => {
+      this.projectDomain.setProjectMeta(value);
+    },
+    /**
+     * @public
+     */
+    title: () => {
+      this.publish.action(toPlainObject({ key: 'editTitle' }));
+    },
+    /**
+     *  @public
+     */
+    undo: (): void => {
+      const data = this.history.undo();
+      if (data) {
+        this.replaceProject(cloneDeep(data));
+      }
+    },
+    /**
+     * @public
+     */
+    redo: (): void => {
+      const data = this.history.redo();
+      if (data) {
+        this.replaceProject(cloneDeep(data));
+      }
+    },
+  };
+
+  // subscribe.init	 模拟器接收编辑器传过来的初始化数据，此时初始化history
+  // subscribe.click	 处理编辑器元素被点击的行为，根据key，分发到function等方法进行处理。如果是添加组件等，则调用project相关方法进行处理
+  // subscribe.drag	  计算出需要插入的位置，调用project.componentDrag处理
+  // subscribe.set	  	  设置组件数据，project.config处理
+  // subscribe.contextmenu	 返回右键菜单数据
+  // subscribe.validate		 调用project.validate检查数据的正确性，如果不正确，则调用pushlish.action告诉编辑器。
+  // subscribe.updateScreenShot	返回页面dom截图
+  // subscribe.insert		调用project.componentInsert处理
+  // subscribe.validateUpload 文件上传校验
+  // pushlish.transformComponentMeta 转换组件元信息
+  // pushlish.load		在加载完时，告诉编辑器
+  // pushlish.action	调用编辑器的交互方法，如让编辑器弹出toast等
+  // pushlish.update	如果project发生变化，则需update通知编辑器
+
+  // function.undo	撤销
+  // function.redo	重做
+  // function.simulator	模拟器尺寸调整，调用project.config处理
+}

package/src/domain/ProjectDomain.ts

@@ -0,0 +1,244 @@
+import { Entity, get, set } from '@cicctencent/ark-util';
+import type {
+  Project,
+  GroupTree,
+  LowCodeKey,
+  Component,
+  FunctionData,
+  FunctionConfig,
+  EditorConfig,
+  ComponentItem,
+  History,
+} from '@cicctencent/low-code-core';
+import { ProjectDomainState } from './BaseProjectDomain';
+
+/**
+ * @public
+ */
+export const navTreeKey = { module: 'navTree' };
+/**
+ * @public
+ */
+export const componentTreeKey = { module: 'componentTree' };
+
+/**
+ * @public
+ */
+export interface SpliceState {
+  draggingNode: Component;
+  dropNode: Component;
+  dropType: 'after' | 'before';
+}
+/**
+ * @public
+ */
+export interface InsertUploadData {
+  /* 需填入prop的key */
+  key: string;
+  /* 组件名 */
+  name: string;
+  /* 上传素材url列表 */
+  list: string[];
+}
+
+/**
+ * @public
+ * 项目实体是与业务有关的 每个业务可以有自己的数据结构
+ * 项目可能有多个页面 每个页面有自己的组件列表 但当前最多只会有一个页面或一个组件处于选中状态
+ */
+export default abstract class ProjectDomain extends Entity<any> {
+  /**
+   * 当前编辑页面索引
+   * @public
+   */
+  abstract currentPageIndex: number;
+  /**
+   * 当前编辑组件索引路径
+   * @public
+   */
+  abstract currentComponentPath: string;
+  /**
+   * @public
+   */
+  declare state: ProjectDomainState;
+
+  /**
+   * 项目名称
+   * @public
+   */
+  abstract get title(): string;
+  /**
+   * config.navTreeData 导航树配置
+   * @public
+   */
+  abstract get navTreeData(): any;
+  /**
+   * config.componentTreeData 组件库配置
+   * @public
+   */
+  abstract get componentTreeData(): any;
+  /**
+   * config.schemaData 表单配置
+   * 
+   * @public
+   */
+  abstract get schemaData(): any;
+  /**
+   * 菜单数据
+   * @public
+   */
+  abstract get menuData(): any;
+  /**
+   * 当前组件配置
+   * @public
+   */
+  abstract get currentComponent(): any;
+  /**
+   * 获取functionData
+   * @public
+   */
+  abstract get functionData(): FunctionData;
+  /**
+   * 替换project数据 undo，redo 
+   * @public
+   * @param store - History数据
+   */
+  abstract replaceProject(store: History): void;
+
+  /**
+   * 项目的所有页面
+   * @public
+   */
+  abstract get pages(): any; 
+  /**
+   *  扩展信息
+   * @public
+   * @deprecated 减少使用
+   */
+  get extend(): Record<string, any> {
+    return {};
+  };
+  /**
+   * @public
+   */
+  abstract get config(): EditorConfig;
+  /**
+   *  Action
+   * @public
+   * @param name - 组件名
+   */
+  abstract action(name: string, data: any): void;
+
+  /**
+   * 设置项目数据
+   * @public
+   * @param project - 项目数据
+   */
+  abstract setProject(project: any): void;
+  /**
+   * 移动组件到某个位置
+   * @public
+   * @param originPath - 原路径
+   * @param newPath - 目标路径
+   * @example
+   * moveTo('0.components.0.list.0', '0.components.0.list.1')
+   */
+  abstract moveTo(originPath, newPath): void;
+  /**
+   * 生成componentPath
+   * @public
+   * @param flagKey - 根据该字段找到组件
+   */
+  abstract generateComponentPath(flagKey: any, ...args: any[]): string;
+
+  /**
+   * 是更新还是插入历史栈，true表示更新，false表示插入（影响撤销、重做栈）
+   * @public
+   */
+  abstract needUpdateHistory(project: any): boolean;
+
+  /**
+   * 激活。比如点击了导航树或者某个组件，currentPageIndex或currentComponentPath需要变化
+   * @public
+   */
+  abstract activate(key: Partial<LowCodeKey>): void;
+
+  /**
+   * 删除组件
+   * @public
+   */
+  abstract componentDelete(key: LowCodeKey): void;
+
+  /**
+   * 复制组件
+   * @public
+   */
+  abstract componentCopy(key: LowCodeKey): void;
+  /**
+   * 处理通过拖拽方式插入的组件
+   * @public
+   */
+  abstract componentDrag(key: LowCodeKey, value: any): void;
+  /**
+   * 插入组件
+   * @public
+   */
+  abstract componentInsert(value: any): void;
+
+  /**
+   * 上移组件
+   * @public
+   */
+  abstract componentMoveUp(key: LowCodeKey): void;
+  /**
+   * 下移组件
+   * @public
+   */
+  abstract componentMoveDown(key: LowCodeKey): void;
+
+  /**
+   * @public
+   * 设置projectMeta数据，项目宽高等 
+   */
+  setProjectMeta(value) {
+    this.state.project.meta = { ...this.state.project.meta, ...value };
+  }
+  /**
+   * @public
+   * 根据componentPath获取组件数据 
+   */
+  pathToData(path: string, pages?: any): ComponentItem | any {
+    return path ? get(pages || this.state.project.pages, path) : null;
+  }
+  /**
+   * @public
+   * @param path - 组件路径
+   * @param value - 数据
+   * @returns 
+   */
+  setPathData(path: string, value: Record<string, any>) {
+    const data = this.pathToData(path);
+    return set(this.pages, path, { ...data, ...value });
+  }
+  /**
+   * 通知编辑器
+   * @param cmd - 模拟器推送给编辑器的事件名
+   * @param params - 事件传递的参数
+   * @deprecated 减少使用
+   * @public
+   */
+
+  publishEditor(cmd: string, ...params: any[]): void {
+    this.emit('emitEditor', cmd, ...params);
+  }
+  /**
+   * 通知模拟器
+   * @param cmd - 模拟器通知模拟器视图的事件名
+   * @param params - 事件传递的参数
+   * @deprecated 减少使用
+   * @public
+   */
+  publishPreview(cmd: string, ...params: any[]): void {
+    this.emit('emitPreview', cmd, ...params);
+  }
+}