@cicctencent/low-code-editor 0.0.0-stage → 1.1.9-beta.5

package/src/domain/EditorDomain.ts

@@ -0,0 +1,265 @@
+// 编辑器
+import {
+  log,
+  Entity,
+  toPlainObject,
+  isEqual,
+  isPlainObject,
+} from '@jt/ark-util';
+import { Communicator } from '@jt/postmessage-channel';
+
+import { CheckResponseItem, EditorConfig, LowCodeKey } from '@jt/low-code-core';
+
+const logTag = '[low-code-editor EditorDomain]';
+const logInfo = log(logTag);
+
+/**
+ * @public
+ */
+export interface EditorDomainState {
+  /**
+   *  @public 项目数据
+   */
+  project: any;
+  /**
+   * @public
+   * 编辑器展示配置
+   */
+  config: EditorConfig;
+  /**
+   * @public
+   * 用于和模拟器通讯的通讯器
+   */
+  communicator: Communicator;
+  /**
+   * @public
+   *  用于数据请求
+   */
+  request: Function;
+}
+export default class EditorDomain extends Entity<EditorDomainState> {
+  // 初始化标识，update触发后再触发set
+  initFlag = false;
+  constructor(state: EditorDomainState) {
+    super(state);
+    this.state = state;
+    Object.entries(this.subscribe).forEach(([key, value]) => {
+      this.state.communicator.subscribe(key, value.bind(this));
+    });
+  }
+  /* 模拟器返回的是配置数据时直接调用这个方法 */
+  /**
+ * @public 
+ * @param cmd  命令字
+ * @param payload 传输内容
+ * @returns 
+ */
+  async commit(cmd, payload) {
+    logInfo('publish begin', cmd, payload);
+    const { data, ret } = await this.state.communicator.publish(
+      cmd,
+      toPlainObject(payload)
+    );
+    logInfo('publish end', cmd, payload, data);
+    // update方法已经更新过了 这里不必再更新 -> addHistory会判断前后数据是否变化 但是点击导航树不会改变数据 所以无法更新配置
+    if (ret === 0 && data && typeof data === 'object' && 'schemaData' in data) {
+      this.setConfig(data);
+    }
+    return data;
+  }
+  // 需要更新schema的情况
+  needRefreshSchema(newObj: any, oldObj: any) {
+    if (!newObj || !oldObj) {
+      return false;
+    }
+    if (Object.keys(newObj).length !== Object.keys(oldObj).length) return true;
+    for (const key of Object.keys(newObj)) {
+      if (Array.isArray(newObj[key])) {
+        // 数组长度不一样,或者一个是数组 一个非数组 需要更新表单
+        if (
+          !Array.isArray(oldObj[key]) ||
+          newObj[key].length !== oldObj[key].length
+        ) {
+          return true;
+        }
+      } else if (isPlainObject(newObj[key])) {
+        if (this.needRefreshSchema(newObj[key], oldObj[key])) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  /**
+   * @public 
+   * @param newConfig  新配置
+   * @param refresh 是否强制刷新
+   * @returns 
+   */
+  setConfig(newConfig, refresh = false) {
+    if (!newConfig || !('schemaData' in newConfig)) {
+      return;
+    }
+    newConfig = { ...this.state.config, ...newConfig };
+    if (refresh) {
+      this.state.config = newConfig;
+      return;
+    }
+    const config = { ...this.state.config };
+
+    // 两个对象相同,不需要更新
+    if (isEqual(toPlainObject(config), toPlainObject(newConfig))) {
+      return;
+    }
+
+    for (const key of Object.keys(newConfig)) {
+      if (!isEqual(config[key], newConfig[key])) {
+        if (
+          key === 'schemaData' &&
+          isEqual(config[key]?.key, newConfig[key]?.key)
+        ) {
+          // 判断初始化的场景 (不要直接写在if里,那样写不方便调试)
+          const dataRes = this.needRefreshSchema(
+            newConfig[key]?.data,
+            config[key]?.data
+          );
+          const schemaRes = this.needRefreshSchema(
+            newConfig[key]?.schema,
+            config[key]?.schema
+          );
+          if (!dataRes && !schemaRes) {
+            // 表单数据变化不需要重新渲染表单，数组变化除外。解决边输入表单边更新的问题
+            if (
+              !isEqual(config[key]?.data, {}) &&
+              !isEqual(newConfig[key]?.data, {})
+            ) {
+              continue;
+            }
+          }
+        }
+        config[key] = newConfig[key];
+      }
+    }
+    this.state.config = config;
+  }
+
+  publish = {
+    // project数据初始化成功，把数据传给模拟器
+    init: () => this.commit('init', this.state.project),
+    // 编辑器元素被点击，通知模拟器 value: 当前元素相关的value
+    click: (key: LowCodeKey, value: any) =>
+      this.commit('click', {
+        key,
+        value,
+      }),
+    // 拖拽组件到模拟器区域 value: {x, y, component}
+    drag: (key: LowCodeKey, { x, y, name }: any) =>
+      this.commit('drag', {
+        key,
+        value: { x, y, name },
+      }),
+    // 设置组件数据 在Schema表单数据变化时
+    set: (key: LowCodeKey, value: any) => {
+      if (!this.initFlag) {
+        return;
+      }
+      return this.commit('set', {
+        key,
+        value,
+      });
+    },
+    // 在NavTree选中元素右键 value: 当前元素相关的value
+    contextmenu: async (key: LowCodeKey, value: any): Promise<void> => {
+      const {
+        data: { config, menus },
+      } = await this.state.communicator.publish(
+        'contextmenu',
+        toPlainObject({ key, value })
+      );
+      logInfo('contextmenu', key, menus);
+      this.setConfig(config);
+      // 从模拟器拿到菜单数据后在编辑器中监听contextmenu事件获取它
+      this.emit('contextmenu', menus);
+    },
+    // 让模拟器检查数据
+    validate: async (
+      responseItem: CheckResponseItem[] = null
+    ): Promise<any> => {
+      const {
+        data: { config, result },
+      } = await this.state.communicator.publish('validate', responseItem);
+      logInfo('validate', result);
+      if (!isEqual(config, this.state.config)) {
+        this.setConfig(config, true);
+      }
+
+      return result;
+    },
+    // 拖动导航树
+    splice: (data: any): void => {
+      logInfo('splice', data);
+      this.state.communicator.publish('splice', toPlainObject(data));
+    },
+  };
+
+  timer = 0;
+  subscribe = {
+    // 监听模拟器加载完成
+    load: ({ data }): void => {
+      this.setConfig(data);
+      console.log('🔥editor load');
+      this.emit('load', this.state.config);
+    },
+    // 监听交互行为，这里把事件emit给视图处理
+    action: ({ data: { key, value } }): any => {
+      this.emit(key, value);
+      // 可能需要返回数据
+    },
+    // 更新编辑器视图，这里需要检查project是否发生变化，如果发生变化，需要emit给视图处理
+    update: ({ data: { config, project, forceUpdate } }): void => {
+      logInfo('update', config, project);
+      this.initFlag = true;
+      // config
+      this.setConfig(config, forceUpdate);
+      // project
+      if (!isEqual(this.state.project, project)) {
+        clearTimeout(this.timer);
+        // 这里做防抖，避免多次触发
+        //@ts-ignore
+        this.timer = setTimeout(() => {
+          this.state.project = { ...project };
+          this.emit('update', project);
+        }, 50);
+      }
+    },
+    // 获取截图
+    updateScreenShot: ({ data }) => {
+      // 初始化完成再进行截图
+      if (this.initFlag) {
+        this.emit('updateScreenShot', data);
+      }
+    },
+    // 打开上传图片对话框
+    openUpload: ({ data: { key, name } }) => {
+      this.emit('openUpload', { key, name });
+    },
+    // 远程调用方法
+    fetch: ({ data: { url, queryParam } }) => {
+      return this.state.request(url, queryParam);
+    },
+  };
+
+  // 方法：
+  // pushlish.init  project数据初始化成功，把数据传给模拟器
+  // pushlish.click	 编辑器元素被点击，通知模拟器
+  // pushlish.drag	  拖拽组件到模拟器区域
+  // pushlish.set	  设置组件数据
+  // pushlish.contextmenu	在编辑器元素上点击右键
+  // pushlish.validate		让模拟器检查数据
+  // pushlish.updateScreenShot	获取页面dom截图
+  // pushlish.insert		插入多张图片
+
+  // subscribe.load		监听模拟器加载完成
+  // subscribe.action	监听交互行为，这里把事件emit给视图处理
+  // subscribe.update	更新编辑器视图，这里需要检查project是否发生变化，如果发生变化，需要emit给视图处理。
+}