小地图中的内容显示

[zyj8]

问题描述

节点用的是自定义html，里面有一张图片，一段文本。
新增节点时，小地图显示的正常，但是编辑回显（graph.fromJSON()）后，小地图并没有展示图片与文本，通过f12查看dom，确认并未渲染。

重现链接

https://x6.antv.vision/zh/examples/showcase/practices#mindmap

重现步骤

// 自定义节点代码
getHTMLComponent(node) {
const { image, name, asName = '' } = node.getData()

      const wrap = document.createElement('div')
      const img = document.createElement('img')
      const span = document.createElement('span')
      wrap.className = `item-wrap item-${node.id}`
      img.className = 'item-img'
      span.className = 'item-span'

      wrap.style.width = `${nodeConfig.width}px`
      wrap.style.height = `${nodeConfig.height}px`
      wrap.style.display = 'flex'
      wrap.style.flexDirection = 'column'
      wrap.style.alignItems = 'center'
      wrap.style.justifyContent = 'center'
      wrap.style.borderRadius = '4px'

      img.style.width = `${nodeConfig.width}px`
      img.style.height = `${nodeConfig.height}px`
      img.style.padding = '10px'
      img.style.marginTop = '18px'

      span.style.fontSize = '12px'
      span.style.display = 'inline-block'
      span.style.minWidth = '100%'
      span.style.wordBreak = 'keep-all'
      span.style.whiteSpace = 'nowrap'
      span.style.marginTop = '2px'
      span.style.userSelect = 'none'

      img.src = image
      span.innerHTML = name + '/' + asName
      img.onload = function() {
        wrap.appendChild(img)
        wrap.appendChild(span)
      }
      return wrap

}

随意一张本地图片即可复现

预期行为

小地图节点图片等回显正常

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• X6 版本: [1.21.3 ]

屏幕截图或视频（可选）

补充说明（可选）

No response

[x6-bot]

👋 @zyj8

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[zyj8]

请问小地图能在画布创建完成之后再创建吗？有没有什么方法？

[lloydzhou]

@zyj8

这里有一个可能和你说的“动态加载小地图”类似的处理逻辑。
https://github.com/lloydzhou/antv-x6-vue/blob/master/src/widgets/MiniMap.tsx

1. 这个vue的库将小地图当成一个vue组件进行封装。
2. 如果在Graph内部挂载这个MiniMap组件，就会动态的去更新x6 graph.options中关于小地图的配置。
3. 同时调用graph.hook.createMiniMap方法生成小地图组件
4. 当然卸载组件的时候，也会调用graph.minimap.widget.dispose方法销毁小地图

当然，还有一个react版本的封装，代码逻辑是一样的
https://github.com/lloydzhou/antv-x6-react/blob/master/src/lib/widgets/MiniMap.tsx

[zyj8]

@zyj8

这里有一个可能和你说的“动态加载小地图”类似的处理逻辑。 https://github.com/lloydzhou/antv-x6-vue/blob/master/src/widgets/MiniMap.tsx

1. 这个vue的库将小地图当成一个vue组件进行封装。
2. 如果在Graph内部挂载这个MiniMap组件，就会动态的去更新x6 graph.options中关于小地图的配置。
3. 同时调用graph.hook.createMiniMap方法生成小地图组件
4. 当然卸载组件的时候，也会调用graph.minimap.widget.dispose方法销毁小地图

当然，还有一个react版本的封装，代码逻辑是一样的 https://github.com/lloydzhou/antv-x6-react/blob/master/src/lib/widgets/MiniMap.tsx

谢谢哦！前阵子弄出来了，把getHTMLComponent属性删掉了，换成了自定义节点就好了

[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.