You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// 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);
};
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:click to node:touchstart and adjust the built-in drag-canvas behavior.
If encountering issues with node interactions, adjusting the defaultEdge type 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.
问题描述
官方示例:自定义节点/Dom节点 的图图表示例,在设置 modes: { default: ['drag-canvas', 'zoom-canvas']}后,在拖动或者缩放图表后,自定义dom的点击事件失效
重现链接
https://g6.antv.antgroup.com/examples/item/customNode/#svgDom
重现步骤
import G6 from '@antv/g6';
/**
*/
/**
*/
G6.registerNode('dom-node', {
draw: (cfg, group) => {
const stroke = cfg.style ? cfg.style.stroke || '#5B8FF9' : '#5B8FF9';
const shape = group.addShape('dom', {
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,
});
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
The text was updated successfully, but these errors were encountered: