antvis / antvis/Graphin

移动端使用时,如果使用node:touchstart事件将可以选择多个node而非一个

Open
#529 0 comments 0 reactions 0 assignees View on GitHub
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
![screenshot-20240204-141631](https://github.com/antvis/Graphin/assets/35952640/f5a31a1e-edf9-45bc-a840-7a91f6ebbb1a)

_No response_

### Platform

- OS: Windows
- Browser: Chrome
- Version: 最新版本

### Additional context

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.