设置了 custom_node_render 后 jmexpander 位置计算错误被遮蔽 about jsmind

[hizzgdev]

你在脑图…那个节点再加一个下级节点看看，看一下下一级节点的位置是不是正常的。
如果正常的话，这个节点可能是受页面上的其他样式的影响才这样的。
我稍后也试试看能不能复现这个现象。谢谢反馈！

[hqm19]

哇，您回复好快。

看我例子的数据里面，是加了子节点的。

用开发者工具修改 css 让展开图标露出来，点击后的子节点位置也不对：

[hizzgdev]

我想这个问题可能的原因是 ReactDOM.render(<span>{node.topic}</span>, element) 这一句，按我对 React 粗浅的理解，它并不是实时把 html element 给 render 出来的。jsMind 会在 custom_node_render 后尝试读取这个 node 的尺寸以进行排版，但是在 React 的环境下，读取到的 size 可能是个 0，由此产生了这个布局问题。

要验证这个原因，你可以把ReactDOM.render 这句直接改成 html dom 的写法，像 document.createElement 这种实验一下。

抱歉 @hqm19 ， 我对 React 并不是很在行，在我本地配置了一个 react 18 的项目，但加上你上面帖的代码后一直跑不起来，所以也没能复现这个情况。你能否把你项目的 package.json 帖出来？或者在github/gitee上搭建一个小的项目演示这个问题，我也好可以运行起来试一下？

[hqm19]

抱歉忘记说明 react 的版本了，我用的是 react 16 目前比较稳定。 react 18 + jsmind 还没调通。 我提交了一个工程把完整的复现代码放上去了： https://github.com/hqm19/jsmind-react

[hizzgdev]

Hi @hqm19 我提交了一个 PR hqm19/jsmind-react#1 你可以看看。

[hqm19]

react 整体都是异步渲染的，把 react 改成同步没什么便捷的办法。 问了 ChatGPT ，综合后，下面的方案可以试试：

1. 修改 jsmind 内部实现，允许将 view.custom_node_render 设置为一个返回 Promise 的函数。 jsmind 判断返回值，如果是 Promise 对象，则将后续动作放在， Promise 的 than 中执行。例如

const obj = custom_node_render_func(jm, element, node)
if (!!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'){
  obj.then((result) => {
      // 原来对返回 true 的处理   （label x）
   }
}else if(obj){
    // 原来对返回 true 的处理
}else{
   // 原来对返回 false 的处理
}

2. custom_node_render 设置为返回 一个 Promise 的函数：

view.custom_node_render = (jm, element, node) => {
  // 函数返回一个Promise
  return new Promise((resolve, reject) => {
      ReactDOM.render(<span>{node.topic}</span>, element, () => {
        //  ReactDOM.render在异步渲染 element 完成后，会执行这个回调函数，
         resolve(true)  // 解决Promise后， 执行（label x）的地方
      })
   })
}

[hizzgdev]

原因总结：

1. jsMind 使用同步模式获取 html 元素尺寸并计算位置
2. 本用例在 custom_node_render 里使用 React 框架异步填充 html 元素
3. jsMind 在获取 html 元素尺寸时，该元素尚未 render 出来
4. 导致位置的计算结果不符合预期

解决办法：
方法1: 在 custom_node_render 的实现里，使用同步模式填充 html 元素 （推荐）
方法2: 修改 jsMind 以支持异步方式生成节点。这种方法需要对 jsMind 进行较大规模重构，而且无法保证目前文档中 api 的兼容性，因此考虑暂不支持，后续或考虑以新项目的方式支持异步模型。

感谢 @hqm19 带来的建设性的讨论，以及非常有价值的尝试 #594 。
相关的 PR 将会被关闭，此 issue 将会移至 discussion 区。