alibaba / lowcode-engine

An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系
https://lowcode-engine.cn
MIT License
14.58k stars 2.53k forks source link

手动修改页面 schema 并保存成功后,project.onXXX 系列事件不再触发 #646

Closed twinkle77 closed 2 years ago

twinkle77 commented 2 years ago

Describe the bug (required) / 详细描述 bug(必填)

手动修改页面 schema 并保存成功后,project.onXXX 系列事件不再触发

To Reproduce (required) / 如何复现 bug?(必填,非常重要)

  1. 打开 demo
  2. f12 打开 chrome 控制台
  3. 切换到 top 窗口,手动输入以下代码, window.AliLowCodeEngine.project.currentDocument.onAddNode(() => { console.log('add node event'); }) image
  4. 随意拖拽任意物料到 画布里,可以看到 onAddNode 事件触发了 image
  5. 打开左下角的页面 schema 面板, 再点击保存 image
  6. 页面重 render 后, onAddNode 事件无法再触发了

经尝试,onSimulatorHostReady\onSimulatorRendererReady\onChangeDocument\onAddNode. 都不会再触发了

Expected behavior (required) / 预期行为(必填,非常重要)

希望 project 系列事件能正常执行

      project.onSimulatorHostReady(() => {
        console.log('onSimulatorHostReady')
      })

      project.onSimulatorRendererReady(() => {
        console.log('onSimulatorRendererReady')
      })

      project.onChangeDocument((doc) => {
        console.log('onChange document')
        doc.onAddNode((node) => {
          console.log(222, node)
        })
      })

      // 设置component name属性
      project.currentDocument?.onAddNode((node) => {
        console.log(111, node)
      })

其他

plugin-schema 的源码 https://github.com/alibaba/lowcode-plugins/blob/main/packages/plugin-schema/src/editor.tsx#L64

image

twinkle77 commented 2 years ago

提 pr 暴露 project 的 load 事件,重新监听 project 的 onSimulatorHostReady\onSimulatorRendererReady\onChangeDocument\onAddNode 事件可以么?

LeoYuan commented 2 years ago

这个 case 的原因是 currentDocument 变了,原来的事件绑定失效了,因为 project.importSchema 会生成新的 document 实例,所以两个可能的方案:

  1. 在创建新的 document 后,可以再 project.onChangeDocument 回调中,重新绑定 currentDocument 的相关事件;
  2. 不用 project.importSchema,而是 currentDocument.importSchema;