Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I customize a node? #288

Open
Daniel-Xiong opened this issue Nov 24, 2024 · 1 comment
Open

How can I customize a node? #288

Daniel-Xiong opened this issue Nov 24, 2024 · 1 comment

Comments

@Daniel-Xiong
Copy link

Daniel-Xiong commented Nov 24, 2024

Describe the bug
I tried two different ways to customize a node into a card, so that I can have a title and a description on the same node. However both of them failed!

  1. Override " mind.renderer.node ", this has no effect on anything

初始化 Mind-elixir
const mind = new MindElixir({
el: '#map',
direction: MindElixir.RIGHT, // 布局方向
data: data,
draggable: true, // 启用拖拽
editable: true // 启用编辑
});

渲染思维导图
    mind.init();

 重写节点渲染函数
    mind.renderer.node = function(nodeObj) {
        let nodeElement = document.createElement('div');
        nodeElement.classList.add('node-card');

        let titleElement = document.createElement('div');
        titleElement.classList.add('title');
        titleElement.innerText = nodeObj.topic;
        nodeElement.appendChild(titleElement);

        if (nodeObj.data && nodeObj.data.detail) {
            let detailElement = document.createElement('div');
            detailElement.classList.add('detail');
            detailElement.innerText = nodeObj.data.detail;
            nodeElement.appendChild(detailElement);
        }

        nodeElement.addEventListener('click', function(e) {
            e.stopPropagation();
            mind.selectNode(nodeObj);
        });

        return nodeElement;
    };

重新渲染思维导图以应用自定义节点渲染
mind.refresh();

  1. Add HTML to node description. This block the node event.( when I click on the node, the event is not trigged, and I found no way to get around it.

     定义数据
         const data = {
             nodeData: {
                 id: 'root',
                 topic: `
         
                 `,
                 children: [
                     {
                         id: 'child1',
                         topic: `
                             <div class="card">
                                 <div class="card-title">Child 1 Title</div>
                                 <div class="card-detail">Detail for child 1.</div>
                             </div>
                         `,
                         children: []
                     },
    
@SSShooter
Copy link
Owner

可以使用 dangerouslySetInnerHTML

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants