antvis/G6



The issue has been closed
把1节点拖拽到2节点的左上角后,鼠标移上去高亮失效、点击事件也不生效 #4740
zmhweb posted onGitHub
Describe the bug
import React, { FC, memo, useEffect, useRef } from 'react'; import G6 from '@antv/g6';
const RoomView: FC = memo(() => {
const graphRef = useRef<any>(null);
const graphDom = useRef<any>(null);
useEffect(() => {
initGraph()
}, []);
// 初始化图
const initGraph = () => {
if (graphRef.current) {
graphRef.current.destroy();
}
graphRef.current = new G6.Graph({
container: graphDom.current,
fitView: true,
width: 800,
height: 800,
// groupByTypes: false,
defaultNode: {
type: 'image',
size: [50, 40],
style: {
cursor: 'pointer',
},
labelCfg: {
style: {
fontSize: 16,
fill: '#fff',
fontFamily: 'PingFang SC',
fontWeight: 500,
},
},
anchorPoints: [[0.5, 0.5]],
},
defaultEdge: {
shape: 'arc',
type: 'arc',
curveOffset: 1,
labelCfg: {
autoRotate: true,
refY: -10,
},
style: {
lineWidth: 2,
stroke: 'rgba(0, 143, 92, 1)',
cursor: 'pointer',
},
},
edgeStateStyles: {
hover: {
lineWidth: 6,
stroke: 'rgba(0, 143, 92, 1)',
},
active: {
lineWidth: 4,
stroke: 'rgba(0, 143, 92, 1)',
},
inactive: {
stroke: 'rgba(0, 143, 92, 1)',
lineWidth: 1,
opacity: 0.5,
},
},
defaultCombo: {
type: 'rect',
zIndex: 1,
style: {
lineWidth: 1,
zIndex: 1,
lineDash: [8, 8],
fill: 'transparent',
},
padding: [10, 200, 41, 200],
labelCfg: {
refY: 20,
refX: 30,
position: 'top',
style: {
fill: 'rgb(202, 255, 255)',
fontSize: 20,
fontFamily: 'PingFang SC',
shadowColor: 'rgba(55, 128, 255, 1)',
shadowBlur: 9.22,
cursor: 'pointer',
},
},
},
modes: {
default: [
'zoom-canvas',
'drag-canvas',
'drag-combo',
{
type: 'activate-relations',
activeState: 'active',
inactiveState: 'inactive',
},
'drag-node',
],
}
});
drawGraph();
};
// 绘制图
const drawGraph = () => {
const testData = {
nodes: [{
"size": [100, 100],
"id": "1",
"type": "image",
"label": "1",
"x": 1400,
"y": 0
}, {
"size": [100, 100],
"id": "2",
"type": "image",
"label": "2",
"x": 940,
"y": 460
}],
edges: [
{
"source": "1",
"target": "2",
},
]
}
graphRef.current.data(testData);
graphRef.current.render();
attachEvent();
};
const attachEvent = () => {
graphRef.current.off('edge:mouseenter').on('edge:mouseenter', (evt: any) => {
const { item } = evt;
graphRef.current.setItemState(item, 'hover', true);
});
graphRef.current.off('edge:mouseleave').on('edge:mouseleave', (evt: any) => {
const { item } = evt;
graphRef.current.setItemState(item, 'hover', false);
});
};
return (
<div style={{
width: '800px',
height: '800px',
}}>
<div ref={graphDom}></div>
</div>
);
});
export default RoomView;
Your Example Website or App
代码如上
Steps to Reproduce the Bug or Issue
节点拖拽后,鼠标移上去高亮失效、点击事件也不生效
Expected behavior
节点拖拽后,鼠标移上去高亮失效、点击事件也不生效
Screenshots or Videos
No response
Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 91.1]
Additional context
No response