jsmind icon indicating copy to clipboard operation
jsmind copied to clipboard

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

Open hqm19 opened this issue 3 months ago • 6 comments

版本 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>

页面效果:

image.png

注意上面第一个子节点,看不到展开按钮。实际因 left top 设值错误,被节点本身遮住了。并且被 custom_node_render 渲染出的节点,上下的 margin 也消失了,挤在一起。

hqm19 avatar Mar 23 '24 01:03 hqm19