官方示例：自定义节点/Dom节点 的图图表示例，在设置 modes: { default: ['drag-canvas', 'zoom-canvas']}后，在拖动或者缩放图表后，自定义dom的点击事件失效

[worryzyy]

问题描述

官方示例：自定义节点/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', {
  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节点，绑定了原生事件后，拖动、缩放图表会影响原生事件的触发。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.8.21]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[dosubot]

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:

1. For mobile compatibility, consider changing event listeners from node:click to node:touchstart and adjust the built-in drag-canvas behavior.
2. If encountering issues with node interactions, adjusting the defaultEdge type or other graph settings might help.
3. 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

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.