Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
coredesign1234 opened this issue Jan 26, 2024 · 0 comments

Comments

@coredesign1234
Copy link

coredesign1234 commented Jan 26, 2024

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:https://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

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

Additional context

No response

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant