-
Notifications
You must be signed in to change notification settings - Fork 274
Open
Description
Describe the bug
使用如下代码操作时,如果浏览器切换为移动端兼容模式,或者放到移动端时候,点击一个节点,前一个选中的节点的高亮不会取消
/* eslint-disable no-undef */
import React, { useContext, useEffect } from 'react';
import Graphin, { Utils, GraphinContext, IG6GraphEvent } from '@antv/graphin';
import IconLoader from '@antv/graphin-icons'
import { INode, NodeConfig } from '@antv/g6'
const icons = Graphin.registerFontFamily(IconLoader)
const SampleBehavior = () => {
const { graph, apis } = useContext(GraphinContext);
useEffect(() => {
// 初始化聚焦到`node-1`
const handleTouchDown = (evt: IG6GraphEvent) => {
const node = evt.item as INode;
const model = node.getModel() as NodeConfig;
apis.focusNodeById(model.id);
}
// 每次点击聚焦到点击节点上
graph.on('node:touchstart', handleTouchDown);
return () => {
graph.off('node:touchstart', handleTouchDown);
};
}, []);
return null;
}
const App = () => {
const [state, setState] = React.useState({
selected: [],
data: Utils.mock(20).circle().graphin(),
});
const { data } = state;
data.nodes.forEach(node => node.style = {
keyshape: {
size: 60
},
icon: {
type: 'image',
value: `http://i0.sinaimg.cn/edu/2012/0614/U3834P42DT20120614140120.jpg`,
size: [40, 60],
// clip: {
// r: 20,
// },
},
label: {
value: '裁剪 icon',
offset: [0, 20]
},
})
const basicLayout = {
type: 'graphin-force',
animation: false,
preset: {
type: 'concentric', // 力导的前置布局
},
preventOverlap: true,
nodeSize: 40,
}
return (
<div className="App">
<Graphin
fitView
data={data}
layout={{
...basicLayout,
leafCluster: true, // 是否需要叶子节点聚类
nodeClusterBy: 'cluster', // 节点聚类的映射字段
clusterNodeStrength: 20, // 节点聚类作用力系数
}}
>
<SampleBehavior />
</Graphin>
</div>
);
};
export default App;Your Example Website or App
https://codesandbox.io/p/sandbox/gifted-panka-3gmkkq
NAN
Steps to Reproduce the Bug or Issue
- 运行程序
- 浏览器切换为移动端兼容模式,即竖屏模式
- 点击一个节点,然后接着点击下一个
- 前一个节点的高亮不会取消
Expected behavior
前一个的高亮能够取消
Screenshots or Videos
No response
Platform
- OS: Windows
- Browser: Chrome
- Version: 最新版本
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels
