antvis / Graphin

A React toolkit for graph visualization based on G6
https://graphin.antv.antgroup.com
MIT License
980 stars 263 forks source link

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

Open coredesign1234 opened 3 months ago

coredesign1234 commented 3 months ago

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

  1. 运行程序
  2. 浏览器切换为移动端兼容模式,即竖屏模式
  3. 点击一个节点,然后接着点击下一个
  4. 前一个节点的高亮不会取消

Expected behavior

前一个的高亮能够取消

Screenshots or Videos

screenshot-20240204-141631

No response

Platform

Additional context

No response