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

package/src/editor.ts

@@ -0,0 +1,645 @@
+import {
+  ref,
+  reactive,
+  onMounted,
+  onUnmounted,
+  computed,
+  watch,
+  toRefs,
+  h,
+  provide,
+  readonly,
+} from 'vue';
+import PostMessage from '@jt/postmessage-channel';
+import { ElMessage, ElMessageBox } from '@jt/jtui';
+import EditorDomain, { EditorDomainState } from './domain/EditorDomain';
+import {
+  CheckResponseItem,
+  LowCodeKey,
+  ConfirmMessageBoxData,
+  EditDialogRenderData,
+  SendReq,
+} from '@jt/low-code-core';
+import { VueForm } from '@jt/formily';
+import { isEqual, toPlainObject } from '@jt/ark-util';
+
+export default function (props, emits) {
+  const state = reactive<EditorDomainState>({
+    project: {}, // 当前project数据
+    config: null,
+    communicator: null,
+    request: props.request,
+  });
+
+  const navTreeRef = ref(null);
+  const iframe = ref<HTMLIFrameElement>();
+  provide('iframe', readonly(iframe));
+  const iframeMaskFlag = ref<boolean>(false);
+  // 菜单数据
+  const menuData = ref([]);
+
+  // 图片导出指导
+  const guideVisible = ref<boolean>(false);
+  // 教程信息
+  const guideData = ref();
+  let editorDomain: EditorDomain = null;
+  const loading = ref(true);
+
+  const dialog = reactive<{
+    visible: boolean;
+    renderData: EditDialogRenderData;
+  }>({
+    visible: false,
+    renderData: {} as EditDialogRenderData,
+  });
+  // 活动的bar
+  const activeBarName = ref('');
+  // 时间戳
+  const timestamp = ref(Date.now());
+
+  onMounted(() => {
+    console.log('Editor Mounted');
+    state.communicator = new PostMessage(iframe.value, props.postMessageOption);
+    state.communicator.subscribe('message', async function ({ data }) {
+      if (typeof props.onMessage === 'function') {
+        return props.onMessage({ ...data, domain: editorDomain });
+      } else {
+        console.warn('Editor has no props onMessage');
+      }
+    });
+    // 3秒中，不管有没有load都关闭加载弹窗
+    setTimeout(() => {
+      loading.value = false;
+    }, 3000);
+    editorDomain = new EditorDomain(state);
+    editorDomain.on('load', () => {
+      // previewDomain初始化完成， 发送初始化数据
+      editorDomain.publish.init();
+      editorDomain.commit('setReadOnly', props.readOnly);
+      loading.value = false;
+    });
+    // 更新项目数据
+    editorDomain.on('update', project => {
+      if (project) {
+        emits('updateProject', project);
+      }
+    });
+    // 更新截图url
+    editorDomain.on('updateScreenShot', imgUrl => {
+      emits('updateScreenShot', imgUrl);
+    });
+    // 更新菜单数据
+    editorDomain.on('contextmenu', data => {
+      menuData.value = data;
+    });
+    // 提示图片清晰度过低 使用二倍图上传
+    // todo 与confirm 合并处理
+    editorDomain.on('doubleImage', ({ text, icon, guide }) => {
+      guideData.value = guide;
+      const slots = [];
+      text && slots.push(h('span', {}, text));
+      icon &&
+        slots.push(
+          h(
+            'img',
+            {
+              src: icon,
+              style: 'width:20px;height:20px;margin-left:8px;',
+              onClick: () => {
+                guideVisible.value = true;
+              },
+            },
+            null
+          )
+        );
+      ElMessageBox({
+        title: '提示',
+        message: h('p', { style: 'display:flex;align-items:center;' }, slots),
+        type: 'warning',
+        showCancelButton: false,
+        confirmButtonText: '确定',
+      });
+    });
+    // 打开确认messagebox 例如二次确认删除
+    editorDomain.on('confirm', (data: ConfirmMessageBoxData) => {
+      const { type, title, schema, formData, confirmButton, cancelButton } =
+        data;
+      let publishData = {};
+      // TODO 通用化
+      ElMessageBox({
+        type,
+        title,
+        message: h(VueForm, {
+          schema,
+          modelValue: formData ?? {},
+          'onUpdate:modelValue': value => {
+            publishData = value;
+          },
+        }),
+        showCancelButton: !!cancelButton?.text,
+        confirmButtonText: confirmButton.text,
+        cancelButtonText: cancelButton.text,
+        callback: (action, instance) => {
+          if (action === 'confirm') {
+            editorDomain.publish.click(confirmButton.key, publishData);
+          }
+        },
+      });
+    });
+    // 监听错误提示
+    editorDomain.on('error', msg => {
+      ElMessage.error(msg);
+    });
+    // 获取编辑对话框的渲染数据
+    editorDomain.on('renderEditDialog', (data: EditDialogRenderData) => {
+      dialog.visible = true;
+      dialog.renderData = data;
+    });
+    // 打开云组件
+    editorDomain.on('openCloud', async ({ data }) => {
+      emits('openCloud', data, async res => {
+        try {
+          // const r = await editorDomain.commit('fillToufang', res);
+          // console.log('fillToufang', r);
+        } catch (error) {
+          console.error('fillToufang', error);
+        }
+      });
+    });
+    // 监听h5页面点击头部编辑图标
+    editorDomain.on('editTitle', () => emits('editTitle'));
+    // 强制更新页面
+    editorDomain.on('forceUpdate', () => {
+      timestamp.value = Date.now();
+    });
+    editorDomain.on('rename', (key) => {
+      onRename(key)
+    })
+  });
+
+  onUnmounted(() => {
+    if (state.communicator) {
+      state.communicator.destroy();
+    }
+    state.communicator = null;
+  });
+
+  // 分开监听 editorData只能通过getter函数的形式来监听它的值的变化
+  // 注意：直接修改父应用传入值的地址监听不到
+  watch(
+    () => props.editorData,
+    editorData => {
+      if (isEqual(state.project, editorData)) {
+        // 如果相等说明是从模拟器返回的数据带来的改变
+        return;
+      }
+      state.project = Object.assign({}, state.project, editorData);
+      // editorData一旦变化则检查模拟器是否加载完毕 防止多次初始化
+      if (editorDomain) {
+        console.log('Editor init');
+        editorDomain.publish.init();
+      }
+    },
+    { immediate: true, deep: true }
+  );
+
+  watch(
+    () => props.readOnly,
+    readOnly => {
+      editorDomain.commit('setReadOnly', readOnly);
+    }
+  );
+
+  // 监听activeBar值的变化
+  watch(activeBarName, val => {
+    editorDomain.commit('setPrimarySidebarData', val);
+  });
+
+  const iframeSizeMode = computed(()=>{
+    // 如果指定了大小为自动计算，则采用计算父控件方式
+    // @ts-ignore
+    return state.config?.functionData?.simulatorSizeList?.value?.data?.sizeMode;
+  });
+
+  const viewIframeBoxStyle = computed(()=>{
+    if(iframeSizeMode.value === 'auto') {
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    }
+    else return {};
+  });
+  // 模拟器实际宽高
+  const viewScaleStyle = computed(() => {
+    // 如果指定了大小为自动计算，则采用计算父控件方式
+    if(iframeSizeMode.value === 'auto') {
+      return {
+        width: '100%',
+        height: '100%'
+      };
+    }
+    else if (state.config?.functionData?.simulatorSizeList) {
+      const { width, height } =
+        state.config.functionData.simulatorSizeList.value.data;
+      return {
+        width: `${width}px`,
+        height: `${height}px`,
+      };
+    }
+    if (props.appConfig?.simulatorSize) {
+      return props.appConfig?.simulatorSize;
+    }
+    return {
+      width: '375px',
+      height: '750px',
+    };
+  });
+
+  // 模拟器缩放比例
+  const viewScalePercent = computed(() => {
+    if (state.config?.functionData?.simulatorSizeList) {
+      const { percent } =
+        state.config.functionData.simulatorSizeList.value.data;
+      return percent;
+    }
+    return null;
+  });
+
+  // headBar
+  /* 更新模拟器尺寸 */
+  const onUpdateScale = ({ key, scale }) => {
+    editorDomain.publish.click(key, scale);
+  };
+  /* 点击编辑器头部编辑图标 */
+  const onEditTitle = async key => {
+    editorDomain.publish.click(key, props);
+  };
+  /* 对话框表单变化 */
+  const onDialogSchemaChange = values => {
+    console.log('onDialogSchemaChange', values);
+    dialog.renderData.formData = values;
+  };
+  /* 点击编辑对话框确认按钮 */
+  const onEditDialogConfirm = () => {
+    dialog.visible = false;
+    editorDomain.publish.click(
+      dialog.renderData.confirmButton.key,
+      dialog.renderData.formData
+    );
+    emits('editDialogConfirm', dialog.renderData.confirmButton.key);
+  };
+  /* 点击编辑对话框取消按钮 */
+  const onEditDialogCancel = () => {
+    dialog.visible = false;
+    editorDomain.publish.click(
+      dialog.renderData.cancelButton.key,
+      dialog.renderData.formData
+    );
+    emits('editDialogCancel', dialog.renderData.cancelButton.key);
+  };
+  /* 撤销 */
+  const onUndo = async ({ key }) => {
+    editorDomain.publish.click(key, {});
+  };
+  /* 重做 */
+  const onRedo = async ({ key }) => {
+    editorDomain.publish.click(key, {});
+  };
+  // navTree
+  /* 选中导航树 */
+  const onSelect = (key: LowCodeKey) => {
+    editorDomain.publish.click(key, {});
+  };
+  /* 选中页面内容 */
+  const onSelectPage = () => {
+    const key = state?.config?.navTreeData?.value?.[0]?.key;
+    if (key) {
+      editorDomain.publish.click(key, {});
+    }
+  };
+  /* 处理模拟器里组件重命名 */
+  const onRename = (key: LowCodeKey) => {
+    if(navTreeRef.value){
+      navTreeRef.value.handleMenuClick(key);
+    }
+  }
+  /* 右键导航树 */
+  const onMenuOpen = (key: LowCodeKey) => {
+    // 初始化，避免残影
+    menuData.value = [];
+    editorDomain.publish.contextmenu(key, {});
+  };
+
+  /* 拖动导航树 */
+  const onSplice = (data: any) => {
+    editorDomain.publish.splice(data);
+  };
+
+  /* 点击右键导航树打开的菜单 */
+  const onMenuClick = (key: LowCodeKey) => {
+    editorDomain.publish.click(key, {});
+  };
+
+  /* 修改导航树的标题后保存 */
+  const onSubmitEdit = (key, data: any) => {    
+    editorDomain.publish.set(key, data);
+  };
+
+  /* 点击hover导航树出现的图标 */
+  const onIconClick = (key: LowCodeKey) => {
+    editorDomain.publish.click(key, {});
+  };
+
+  // componentTree
+  /* 点击组件库的组件 */
+  const onAddItem = ({ key, value }) => {
+    editorDomain.publish.click(key, value);
+  };
+
+  /* 拖动组件库的组件到模拟器 */
+  const onDragEnd = ({ key, value }, isCors) => {
+    if (!value) return;
+    // 是否拖到模拟器
+    if (isCors) {
+      const rect = iframe.value.getBoundingClientRect();
+      if (
+        value.x > rect.left &&
+        value.x < rect.left + rect.width &&
+        value.y > rect.top &&
+        value.y < rect.top + rect.height
+      ) {
+        editorDomain.publish.drag(key, {
+          ...value,
+          x: value.x - rect.left,
+          y: value.y - rect.top,
+        });
+      }
+    } else {
+      editorDomain.publish.drag(key, value);
+    }
+  };
+  // DataSource组件抛出的事件 对数据源配置的增删改查
+  const onDataSourceChange = ({ type, data }) => {
+    editorDomain.commit('handleDataSource', { type, data });
+  };
+
+  let changeKey;
+  let timer;
+  let interval = 50;
+  // schemaConfig
+  /* 表单更新 */
+  const onSchemaFormChange = ({ key, value }) => {
+    // 编辑器更新完成之前不执行下面
+    if (!editorDomain || !editorDomain.initFlag) {
+      return;
+    }
+    if (isEqual(changeKey, key)) {
+      // 相同的目标，防抖
+      clearTimeout(timer);
+    }
+    changeKey = key;
+    timer = setTimeout(() => {
+      editorDomain && editorDomain.publish.set(key, value);
+    }, interval);
+  };
+
+  // 全局监听鼠标松开事件
+  document.querySelector('body').ondragleave = function () {
+    iframeMaskFlag.value = false;
+  };
+
+  /** 批量拖拽图片生成 */
+  const onDrop = (v, e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (v) {
+      const files = e.dataTransfer.files;
+      if (!files || !files.length) {
+        return;
+      }
+      emits('upload', files, dropDone);
+    }
+    iframeMaskFlag.value = false;
+  };
+
+  const dropDone = (urls: string[]) => {
+    const data: { type: string; url: string }[] = [];
+    urls.forEach(url => {
+      data.push({ type: '1', url });
+    });
+    // editorDomain.publish.insert(data);
+  };
+
+  const onDragover = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    // e.target.classList.add('mask');
+    // iframeMaskFlag.value = true;
+    const types: string[] = e?.dataTransfer?.types ?? [];
+    if (!types.includes('Files')) {
+      iframeMaskFlag.value = false;
+    } else iframeMaskFlag.value = true;
+  };
+
+  const onDragenter = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    const types: string[] = e?.dataTransfer?.types ?? [];
+    if (!types.includes('Files')) {
+      iframeMaskFlag.value = false;
+    } else iframeMaskFlag.value = true;
+  };
+  const onDragleave = e => {
+    e.stopPropagation();
+    e.preventDefault();
+    if (e.offsetX < 0) {
+      iframeMaskFlag.value = false;
+    }
+  };
+
+  /**
+   *  Schema文件上传
+   * @param param0
+   * @param done
+   */
+  const onSchemaUpload = async (file, done, config) => {
+    // TODO: pc端上传图片没有校验 需另外处理
+    emits('upload', [file], async data => {
+      // 结果发送到模拟器校验
+      if (state.project.meta.type === 'h5') {
+        try {
+          const res = await editorDomain.commit('validateUpload', {
+            fileList: data,
+            config,
+          });
+          if (!res[0]?.err) {
+            done(res[0].url);
+          }
+        } catch (error) {
+          console.error('onSchemaUpload', error);
+        }
+      } else {
+        done(data[0].url);
+      }
+    });
+  };
+
+  /**
+   * 触发表单组件的getData事件 例如点击选择器远程加载选项
+   * @param cmdname 调用接口的方法名
+   * @param done 回调函数 将接口返回值回填到表单组件
+   * @param cmdParams 接口需要传递的参数
+   */
+  const onSchemaGetData = (cmdname: string, done, cmdParams) => {
+    emits('getData', cmdname, done, cmdParams);
+  };
+  /**
+   * 打开云组件
+   * @param data 打开云组件需要的配置和参数以及需要转化的额外参数
+   * @param done 回调函数
+   */
+  const onOpenCloud = async (data, done) => {
+    // 转化需要转化的额外参数
+    const result = await editorDomain.commit('transformComponentMeta', data);
+    emits('openCloud', result, done);
+  };
+  /**
+   *  云组件预加载
+   */
+  const onPreloadCloud = url => {
+    emits('preloadCloud', url);
+  };
+
+  /**
+   * 获取实体列表 管理端调用接口 将请求结果传给回调函数
+   * @param done
+   */
+  const onGetEntityList = done => {
+    props
+      .request('/api/entity/queryList', { limit: 10, offset: 1 })
+      .then(data => done(data.rows));
+  };
+
+  /**
+   * 根据实体ID获取方法列表
+   * @param done
+   * @param entityId
+   */
+  const onGetMethodList = (done, entityId) => {
+    props
+      .request('/api/method/queryList', {
+        entityId,
+        limit: 10,
+        offset: 1,
+      })
+      .then(data => done(data.rows));
+  };
+
+  /* 编辑器点击事件 */
+  const onClick = () => {
+    // 关闭右键菜单
+    editorDomain.commit('closeContextMenu', {});
+  };
+
+  /** 提供给外部 回填project数据 */
+  const fillData = async (data: CheckResponseItem[]) => {
+    return editorDomain.publish.validate(data);
+  };
+
+  /** 提供给外部  校验数据 */
+  const validate = async () => {
+    const result = await editorDomain.publish.validate();
+    return result ?? [];
+  };
+
+  /**
+   * @deprecated
+   * 提供给外部 修改标题和登录态
+   * @param key
+   * @param data
+   */
+  const editTitle = (data: any) => {
+    editorDomain.commit('setTitle', data);
+  };
+
+  /**
+   * @deprecated
+   * 提供给外部 更新导航配置
+   */
+  const updateNavMenuConf = navMenuConf => {
+    editorDomain.publish.set({ module: 'function' }, navMenuConf);
+  };
+
+  const onInitValidateRule = callback => {
+    // formily校验规则
+    const rules = {
+      asyncValidator: (value: any, rule: any) => {
+        // eslint-disable-next-line no-async-promise-executor
+        return new Promise(async resolve => {
+          const result = await editorDomain.commit('validateField', {
+            value,
+            type: rule?.type,
+          });
+          resolve(result);
+        });
+      },
+    };
+    callback(rules);
+  };
+
+  function send(payload: SendReq) {
+    return editorDomain.commit('message', payload);
+  }
+  return {
+    iframe,
+    iframeMaskFlag,
+    viewScaleStyle,
+    viewIframeBoxStyle,
+    ...toRefs(state),
+    menuData,
+    guideVisible,
+    guideData,
+    onUpdateScale,
+    onSelect,
+    onSelectPage,
+    onMenuOpen,
+    onSplice,
+    onMenuClick,
+    onSubmitEdit,
+    onAddItem,
+    onDragEnd,
+    onDragover,
+    onDrop,
+    onDragenter,
+    onSchemaFormChange,
+    onDragleave,
+    onSchemaUpload,
+    fillData,
+    onIconClick,
+    validate,
+    editTitle,
+    onOpenCloud,
+    onSchemaGetData,
+    onPreloadCloud,
+    onEditTitle,
+    updateNavMenuConf,
+    loading,
+    onUndo,
+    onRedo,
+    viewScalePercent,
+    dialog,
+    onEditDialogConfirm,
+    onEditDialogCancel,
+    onDialogSchemaChange,
+    activeBarName,
+    onDataSourceChange,
+    onGetEntityList,
+    onGetMethodList,
+    onClick,
+    onInitValidateRule,
+    timestamp,
+    send,
+    navTreeRef,
+  };
+}