IssueHuntDo you want to work on this issue?
You can request for a bounty in order to promote it!
官方示例：自定义节点/Dom节点 的图图表示例，在设置 modes: { default: ['drag-canvas', 'zoom-canvas']}后，在拖动或者缩放图表后，自定义dom的点击事件失效 #5639
worryzyy posted onGitHub
问题描述
官方示例：自定义节点/Dom节点 的图图表示例，在设置 modes: { default: ['drag-canvas', 'zoom-canvas']}后，在拖动或者缩放图表后，自定义dom的点击事件失效
重现链接
https://g6.antv.antgroup.com/examples/item/customNode/#svgDom
重现步骤
import G6 from '@antv/g6';
/**
- This demo shows how to register a custom node with SVG DOM shape
- by Shiwu
- /
/**
- Register a node type with DOM
- /
G6.registerNode('dom-node', {
draw: (cfg, group) => {
const stroke = cfg.style ? cfg.style.stroke || '#5B8FF9' : '#5B8FF9';
const shape = group.addShape('dom', {
}); return shape; }, });attrs: { width: cfg.size[0], height: cfg.size[1], html: ` <div id=${ cfg.id } class='dom-node' style="background-color: #fff; border: 2px solid ${stroke}; border-radius: 5px; width: ${ cfg.size[0] - 5 }px; height: ${cfg.size[1] - 5}px; display: flex;"> <div style="height: 100%; width: 33%; 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> </div> `, }, draggable: true,
/** 数据 */ const data = { nodes: [ { id: 'node1', x: 10, y: 100, label: 'Homepage', }, { id: 'node2', x: 200, y: 100, label: 'Subpage', }, ], edges: [ { source: 'node1', target: 'node2', }, ], };
const container = document.getElementById('container'); const width = container.scrollWidth; const height = (container.scrollHeight || 500) - 100;
const graph = new G6.Graph({ container: 'container', width, height, fitCenter: true, renderer: 'svg', modes: { default: ['drag-canvas', 'zoom-canvas'], }, linkCenter: true, defaultNode: { type: 'dom-node', size: [120, 40], }, });
graph.data(data); graph.render();
// click listener for dom nodes to response the click by changing stroke color const listener = (dom) => { const nodeId = dom.id; if (!nodeId) return; const node = graph.findById(nodeId); let stroke = ''; if (!node.hasState('selected')) { stroke = '#f00'; graph.setItemState(node, 'selected', true); } else { stroke = '#5B8FF9'; graph.setItemState(node, 'selected', false); } graph.updateItem(nodeId, { style: { stroke, }, }); };
const bindClickListener = () => { const domNodes = document.getElementsByClassName('dom-node'); for (let i = 0; i < domNodes.length; i++) { const dom = domNodes[i]; // open the following lines pls! dom.addEventListener('click', (e) => { console.log('点击') listener(dom); }); } };
bindClickListener();
// after update the item, all the DOMs will be re-rendered // so the listeners should be rebinded to the new DOMs graph.on('afterupdateitem', (e) => { bindClickListener(); }); graph.on('afterrender', (e) => { bindClickListener(); }); // if it is TreeGraph and with default animate:true, you should bind the litsener after animation // graph.on('afteranimate', (e) => { // bindClickListener(); // });
if (typeof window !== 'undefined') window.onresize = () => { if (!graph || graph.get('destroyed')) return; if (!container || !container.scrollWidth || !container.scrollHeight) return; graph.changeSize(container.scrollWidth, container.scrollHeight - 100); };
预期行为
期望的结果：自定义dom节点，绑定了原生事件后，拖动、缩放图表事件不会影响原生事件的触发。 实际的结果：自定义dom节点，绑定了原生事件后，拖动、缩放图表会影响原生事件的触发。
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.8.21]
屏幕截图或视频（可选）
No response
补充说明（可选）
No response
