dosubot[bot]
commented
7 months ago The issue you're encountering with custom DOM nodes losing click event responsiveness after dragging or zooming in G6 is likely due to the transformations applied to the graph's viewport not being reflected on the custom DOM elements and their event listeners. When the graph is zoomed or dragged, its internal model and viewport are updated, but these updates do not automatically apply to custom DOM elements.
To address this, you'll need to manually update the positions of your custom DOM elements and reattach event listeners in response to the graph's afterzoom and afterdrag events, or similar. This ensures that your custom DOM elements remain in sync with the graph's transformations.
Additionally, reviewing similar issues in the G6 repository might provide further insights:
- For mobile compatibility, consider changing event listeners from
node:clicktonode:touchstartand adjust the built-indrag-canvasbehavior. - If encountering issues with node interactions, adjusting the
defaultEdgetype or other graph settings might help. - Be aware that DOM nodes might be re-appended after drag or zoom events, which could necessitate re-binding event listeners.
If you can provide more details about how you're implementing click event listeners and managing custom DOM nodes, I could offer more targeted advice.
Sources
- V4.8.23 在设置 modes.default=['drag-node', 'drag-canvas', 'zoom-canvas']后， 浏览器手机浏览模式 graph.on('node:click', ()=>{ }) 不生效
- 把1节点拖拽到2节点的左上角后，鼠标移上去高亮失效、点击事件也不生效
- render dom 节点，当发生拖拽、缩放事件时，会重新appendDom
- packages/g6-extension-3d/tests/demos/behavior-zoom-canvas.ts
- packages/g6/tests/unit/behaviors/drag-element-bug.spec.ts
- packages/g6/src/runtime/element.ts
- packages/g6/tests/unit/runtime/graph/event.spec.ts
xlj999
问题描述
官方示例：自定义节点/Dom节点 的图图表示例，在设置 modes: { default: ['drag-canvas', 'zoom-canvas']}后，在拖动或者缩放图表后，自定义dom的点击事件失效
重现链接
https://g6.antv.antgroup.com/examples/item/customNode/#svgDom
重现步骤
import G6 from '@antv/g6';
/**
*/
/**
}, draggable: true, }); return shape; }, });
/* 数据 / 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节点，绑定了原生事件后，拖动、缩放图表会影响原生事件的触发。
平台
屏幕截图或视频（可选）
No response
补充说明（可选）
No response