Can't listen dom events on dom type node

[krishna-fenixwork]

const TestData = {
    nodes: [
        {id: 'Tripod', type: '', is_company: true},
        {id: 'Laura', type: '', has_chart: true, trendData, style: {
      fill: '#e6f7ff',
    },},
        {id: 'Xenia', type: '', has_chart: true, trendData, style: {
      fill: '#e6f7ff',
    },},
        {id: 'Mellisa', type: '',          
            style : {
                keyshape: {
                    size: 30,
                    stroke: '#1a94db'
                },
                icon: {
                    type: 'image',
                    value: G2.src,
                    size: [20, 20],
                    clip: {
                        r: 10,
                    },
                    fill: '#000000',
                    stroke: '#1a94db',
                },
            }},
        {id: 'Sergo', type: '', style : {
            keyshape: {
                size: 30,
                stroke: '#1a94db'
            },
            icon: {
                type: 'image',
                value: G2.src,
                size: [20, 20],
                clip: {
                    r: 10,
                },
                fill: '#000000',
                stroke: '#1a94db',
            },
        }},
        {
            id: 'node1',
            x: 10,
            y: 100,
            type: '',
            can_dom: true,
            label: 'Homepage',
            size: [120, 120],
        },
        {
            id: 'node2',
            x: 200,
            y: 100,
            can_dom: true,
            type: '',
            label: 'Subpage',
            size: [120, 120],
        },
    ],
    edges: [
        {source: 'Tripod', target: 'Laura', value: 1},
        {source: 'Tripod', target: 'Xenia', value: 1},
        {source: 'Tripod', target: 'Mellisa', value: 1},
        {source: 'Tripod', target: 'Sergo', value: 1},
        {source: 'Tripod', target: 'node1', value: 1},
        {source: 'Tripod', target: 'node2', value: 1},
    ]
};

G6.registerNode('dom-node',
    {
        draw: (cfg:any, group:any) => {
            const stroke = cfg.style ? cfg.style.stroke || '#5B8FF9' : '#000';
            const shape = group.addShape('dom', {
                attrs: {                    
                    width: cfg.size[0],
                    height: cfg.size[1],
                    x: 10,
                    y: 10,
                    html: `
                        <div id=${
                            cfg.id
                        } class='dom-node' style="background-color: #fff; cursor: move; border: 2px solid ${stroke}; border-radius: 5px; width: ${
                            cfg.size[0] - 5
                        }px; height: ${cfg.size[1] - 5}px; display: flex;flex-direction: column;">
                            <div style="height: 40px; width: 100%; background-color: #CDDDFD; ">
                                <img alt="" style="line-height: 100%; margin-left: 7px;" src="https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*Q_FQT6nwEC8AAAAAAAAAAABkARQnAQ" width="20" height="20" />  
                            </div>
                            <span style="margin:auto; padding:auto; color: #5B8FF9;">${cfg.label}</span>
                            <input type="text" class="form-input" style="" />
                        </div>
                    `,
                },                
                draggable: true,
            });
            return shape;
        },
    },
    'single-node'
);

TestData.nodes.forEach(node => {  
    if(node?.can_dom) node.type = 'dom-node';
    else {
        node.type = 'circle;
    }
});

const CustomNodes = () => {
 const minimap:any = new G6.Minimap({
        size: [ 100, 100 ],
        className: "minimap",
        type: 'delegate'
    });

    useEffect(() => {

        let graph = new G6.Graph({
            container: 'mountNode',
            width: window.innerWidth,
            height: window.innerHeight,
            modes: {
                default: [ 
                    'drag-node', 'zoom-canvas', 'drag-canvas', 'collapse-expand-combo',
                    {
                        type: 'collapse-expand-group',
                        trigger: 'click',
                    },                                        
                ],
            },
            plugins: [minimap],
            renderer: 'svg',
            defaultNode: {
                labelCfg: {
                    position: 'bottom',
                    offset: 10,
                    style: {
                        fill: '#fff'
                    }
                },
                style: {
                    fill: 'none',
                    stroke: '#c14e34',
                    lineWidth: 1,
                },
                icon: {
                    show: true,
                    width: 25,
                    height: 25,
                    img: LocationCity, // The image url of the icon                    
                },
            },
            defaultEdge: {
                labelCfg: {
                    style: {
                        fill: '#fff',
                        color: 'white'
                    },
                    autoRotate: true
                }
            },
            nodeStateStyles: {
                // The node style when the state 'hover' is true
                hover: {
                    fill: 'lightsteelblue',
                },
                // The node style when the state 'click' is true
                click: {
                    stroke: '#000',
                    lineWidth: 3,
                },
            },
            // The edge styles in different states
            edgeStateStyles: {
                // The edge style when the state 'click' is true
                click: {
                    stroke: 'steelblue',
                },
            },
            // Layout
            layout: {               
                type: 'gForce'
            },
        });         

        graph.data(TestData);
        graph.render()

        const bindClickListener = () => {
            const domNodes = document.getElementsByClassName('dom-node');
            const inputNodes = document.getElementsByClassName('form-input');
            console.log(domNodes)
            console.log(inputNodes)
            for (let i = 0; i < domNodes.length; i++) {
                const dom = domNodes[i];            
                dom.addEventListener('click', (e:any) => {
                    console.log('sgdfgfg')
                    listener(dom);
                });
            }
            for (let k = 0; k < inputNodes.length; k++) {
                const dom_input = inputNodes[k];
                dom_input.addEventListener('input', (e:any) => {
                    console.log(e.target.value)
                });
            }
        };
        
        bindClickListener();
        return () => {
            graph.off('afterupdateitem', bindClickListener);
            graph.off('afterrender', bindClickListener);
        }
}, [])

return (
        <div id="g6-neo-container">           
            <div className="g6Test">
                <div>
                    <div id="mountNode"></div>
                </div>                
            </div>
        </div>
);

I'm using next js. I'm writing this binding function after graph.render so we can get dom event. But, I can't be able to listen the input event on input type text added on the dom node. Can anyone help me with this? Is there any other way to add html or react component to node and handle events?

[cliffordfajardo]

Hi @krishna-fenixwork ,

1. You mentioned you are using Next.js. Have you look into the React based version of G6 developed by the antv team called Graphin. I'm currently using it in my react app.

2. Can you share a small reproducible code example to share of what you are trying to do? It can help speed up debugging time for others who want to help and dive into the code with you

   • https://stackblitz.com

3. would you be able to reformat the code in your description, the codeblock doesn't seem to be rendering correctly

[krishna-fenixwork]

Hi, @cliffordfajardo thank you for the quick response. I've updated the code block in the description so you can understand it better. I've also added the code on stackblitz to reproduce the problem, please have a look.

https://stackblitz.com/edit/nextjs-g3cshp
https://stackblitz.com/edit/nextjs-g3cshp?file=components/custom-graph-data.js
https://stackblitz.com/edit/nextjs-g3cshp?file=components/custom-nodes.jsx

About Graphin, yes I heard about that and used it on one of my react project but on next js using graphin gives me error. You can find the graphin related issue on next js here - https://github.com/antvis/Graphin/issues/250

It'd be better if we can use graphin on next js too.

[Yanyan-Wang]

How about customizing node with react tags instead of dom node? refer to https://g6.antv.vision/en/docs/manual/middle/elements/nodes/react-node/

[krishna-fenixwork]

Hey, @Yanyan-Wang, I tried g6-react-node also. But, I'm not able to use JSX or HTML in it. It throws a run-time error while using JSX or HTML tag instead of using tags of its library. What about if I want to make my custom node editable or want to put a textbox inside that or a slider and get its value on change. Can we do that using your recommended link?

https://g6.antv.vision/en/docs/manual/middle/elements/nodes/react-node/

If you know something related to my use case, please help me.

[github-actions]

This issue has been closed because it has been outdate for a long time.
Please open a new issue if you still need help.
这个 issue 已经被关闭，因为 它已经过期很久了。
如果你仍然需要帮助，请创建一个新的 issue。