渲染顺序错误，先渲染线，再渲染节点

[qiufeihong2018]

问题描述

渲染大量节点，渲染顺序错误，先渲染线，再渲染节点

重现链接

暂无

重现步骤

暂无

预期行为

三个方案：

1. 先渲染节点，再渲染线
2. 从左到右依次渲染
3. 从上到下依次渲染

平台

• 操作系统: [macOS]
• 网页浏览器: [Google Chrome]
• X6 版本: [1.32]

屏幕截图或视频（可选）

补充说明（可选）

No response

[NewByVector]

这个有具体的例子复现一下吗？

[qiufeihong2018]

@NewByVector 我弄个demo出来

[qiufeihong2018]

@NewByVector 经过测试，内置节点没有问题，自定义节点就会出现“先渲染线，再渲染节点 ”的问题
https://codesandbox.io/s/x6de-v2ban-ben-de-si-wei-dao-tu-xuan-ran-shun-xu-cuo-wu-xian-xuan-ran-xian-zai-xuan-ran-jie-dian-3683de-demo-swtkgk?file=/index.tsx
渲染过程中：

渲染完成：

[NewByVector]

看了下，你的节点时 react 节点，其实节点时先于连线渲染的，不过 react 组件挂载是需要时间的，所以出现上面情况，连线不可能去等待所有 react 组件完成挂载。

[qiufeihong2018]

@NewByVector 这种情况会让用户觉得是bug。
我有两个方案：

1. 初次打开画布，先loading，隐藏画布内容，等到内容渲染成功后，loading去掉，将其显示，绕了个弯解决了这种问题

  /**
   * 这里有三步：
   * 1. 这里需要加入loading，且需要在画布外部加入。
   * 2. 渲染过程中，还需要让画布不可见并且不占用任何空间。
   * 3. 渲染完成后，让画布显示。
   *
   * 取值逻辑：
   * 让元素不可见并且不保留元素在页面中所占的空间（有bug）
   * display: visible ? 'block' : 'none',
   *
   * 让元素不可见并且保留元素在页面中所占的空间
   * visibility: visible ? 'visible' : 'hidden',
   * opacity: visible ? 1 : 0,
   *
   * 当然还有使用position属性将元素定位到屏幕之外。这种方法可以让元素不可见并且不占用任何空间。
   */
  const [visible, setVisible] = React.useState(false);
  const style = {
    // 让元素不可见并且不占用任何空间
    position: visible ? 'relative' : 'absolute',
    left: visible ? 'auto' : '-9999px',
  };

2. 初次打开画布，先loading，图开始渲染，连接器和节点一起渲染，这个时候的节点不是自定义节点（react节点），可以是一个简单节点，作为占位的用途，当react节点渲染并且挂载成功后，显示出来。

业务里，我尝试的是第一种围魏救赵的方式，但是解决不了本质问题，第二种应该是可以从根本上解决问题。

[NewByVector]

第二种现在是支持的，在注册 react-shape 的时候增加 primer 属性，也就是需要渲染的 svg 边框，它是优先渲染的。

register({
  primer: 'rect',
  shape: 'algo-node-1',
  width: 144,
  height: 28,
  effect: ['data'],
  component: NodeComponent,
})

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.