jsmind
jsmind copied to clipboard
设置了 custom_node_render 后 jmexpander 位置计算错误被遮蔽
版本 0.8.3,复现代码:
import React, { useEffect, useRef } from "react"
import ReactDOM from "react-dom"
import jsMind from "jsmind"
import "jsmind/style/jsmind.css"
const MindmapTest = () => {
const jmContainer = useRef(null)
const jm = useRef(null)
const nodeRenderTest = (jm, element, node) => {
if (node.isroot || node.id === "2") {
return false
}
ReactDOM.render(<span>{node.topic}</span>, element)
return true
}
useEffect(() => {
if (!jmContainer.current) {
return
}
jm.current = new jsMind({
container: jmContainer.current,
editable: true,
theme: "orange", //"greensea", //
shortcut: {
enable: true, // 是否启用快捷键
},
view: {
custom_node_render: nodeRenderTest, // 使用自定义渲染函数
},
})
jm.current.show({
meta: { name: "", author: "", version: "" },
format: "node_array",
data: [
{ id: "root", topic: "前端库", isroot: true },
{ id: "1", topic: "脑图(custom_node_render展开按钮被遮蔽了)", parentid: "root", expanded: false },
{ id: "11", topic: "JSMind", parentid: "1" },
{ id: "2", topic: "流程图", parentid: "root", expanded: false },
{ id: "21", topic: "PlantUML", parentid: "2" },
],
})
jm.current.resize()
})
return <div ref={jmContainer} style={{ width: "100%", height: "100%" }} />
}
export { MindmapTest }
产生的dom结构:
<div style="width: 100%; height: 100%;">
<div class="jsmind-inner jmnode-overflow-hidden" tabindex="1">
<canvas class="jsmind" width="1512" height="410"></canvas>
<jmnodes class="theme-orange" style="width: 1512px; height: 410px;">
<jmexpander nodeid="1" style="visibility: visible; left: 765px; top: 169px;">+</jmexpander>
<jmnode nodeid="1" class="" style="visibility: visible; left: 745px; top: 166px;">
<span>脑图(custom_node_render展开按钮被遮蔽了)</span>
</jmnode>
<jmexpander nodeid="2" style="visibility: visible; left: 813px; top: 218px;">-</jmexpander>
<jmnode nodeid="2" style="visibility: visible; left: 745px; top: 206px;">
流程图
</jmnode>
<jmexpander nodeid="11" style="visibility: hidden; display: none;">-</jmexpander>
<jmnode nodeid="11" style="visibility: hidden; display: none;">
<span>JSMind</span>
</jmnode>
<jmexpander nodeid="21" style="visibility: hidden; display: none;">-</jmexpander>
<jmnode nodeid="21" style="visibility: visible; left: 856px; top: 215px;">
<span>PlantUML</span>
</jmnode>
<jmnode class="root selected" nodeid="root" style="visibility: visible; left: 623px; top: 181.5px;">
前端库
</jmnode>
</jmnodes>
</div>
</div>
页面效果:
注意上面第一个子节点,看不到展开按钮。实际因 left top 设值错误,被节点本身遮住了。并且被 custom_node_render 渲染出的节点,上下的 margin 也消失了,挤在一起。