移动端使用时,如果使用node:touchstart事件将可以选择多个node而非一个
- Dominant language
- TypeScript
- Stars
- 1.1k
- Forks
- 275
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
使用如下代码操作时,如果浏览器切换为移动端兼容模式,或者放到移动端时候,点击一个节点,前一个选中的节点的高亮不会取消
```js preview
/* 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 (
);
};
export default App;
```
### Your Example Website or App
https://codesandbox.io/p/sandbox/gifted-panka-3gmkkq
NAN
### Steps to Reproduce the Bug or Issue
1. 运行程序
2. 浏览器切换为移动端兼容模式,即竖屏模式
3. 点击一个节点,然后接着点击下一个
4. 前一个节点的高亮不会取消
### Expected behavior
前一个的高亮能够取消
### Screenshots or Videos

_No response_
### Platform
- OS: Windows
- Browser: Chrome
- Version: 最新版本
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.