节点拖拽，鼠标抬起无法释放

[Yukixieyuya821]

问题描述

在React18.0中， 添加一个新的Node， 如果Node配置有id字段，那么添加完成后， 鼠标左键点击节点进行拖拽移动， 鼠标抬起后节点还是可以移动， 需要再次点击鼠标左键或右键才可以释放这个拖拽~ 如果没有id字段， 则是我正常预期，鼠标抬起后则不跟随鼠标移动~
graph.addNode({
id: 'node-1',
x: 200,
y: 240,
width: 120,
height: 60,
label: 'rect',
attrs: {
body: {
fill: '#efdbff',
stroke: '#9254de',
},
label: {
refX: 0.5,
refY: 0.5,
textAnchor: 'middle',
textVerticalAnchor: 'middle',
},
},
})

重现链接

https://codesandbox.io/p/sandbox/condescending-shadow-3drc6c

重现步骤

1. 进入上述连接
2. 点击节点移动
3. 鼠标按键抬起再移动
   现象： 节点依旧跟随鼠标移动

预期行为

我期望这种情况下， 鼠标按键抬起，立即释放拖拽，节点不会再跟随鼠标移动

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome, Edge ...]
• X6 版本: [2.18.1， 2.17.1， 2.16.1 ...]

屏幕截图或视频（可选）

20240909-175207.mp4

补充说明（可选）

上述视频 节点移动过程中， 鼠标是抬起的噢~

[x6-bot]

👋 @Yukixieyuya821

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[zlecheng]

你的在线代码编辑不了啊，没法验证

[Yukixieyuya821]

你的在线代码编辑不了啊，没法验证

你登录一下codesanbox才能编辑啊，权限是公开的

[resetsix]

我今天也遇到这个问题。我是这样解决的：

问题描述

正常情况下拖拽 node 需要长按鼠标选中，但是我单击 node 即使鼠标已经松开了却仍然可以拖动，只有再次点击 node 才会取消拖动状态。

初步分析

官网示例全都是 class 示例，而我本地(antv/x6 v2.18.1)使用的是FC组件，我以为是这个原因导致的。随后我将官网文档的 class 示例原封不动搬到本地，还是存在单击拖动的问题。

最终解决

在函数式组件中，当画布渲染时需要保证销毁上一次的 graph 实例。

export const Demo01: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<Graph | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      const graph = new Graph({
        container: containerRef.current,
        background: {
          color: "#F2F7FA",
        },
      });
      graphRef.current = graph;

      graph.fromJSON(data);
      graph.centerContent();
    }

    // 增加这个：销毁实例
    return () => graphRef.current?.dispose();
  }, []);

  return (
    <div ref={containerRef} style={{ width: "50vw", height: "50vh" }} />
  );
};

[Yukixieyuya821]

我今天也遇到这个问题。我是这样解决的：

问题描述

正常情况下拖拽 node 需要长按鼠标选中，但是我单击 node 即使鼠标已经松开了却仍然可以拖动，只有再次点击 node 才会取消拖动状态。

初步分析

官网示例全都是 class 示例，而我本地(antv/x6 v2.18.1)使用的是FC组件，我以为是这个原因导致的。随后我将官网文档的 class 示例原封不动搬到本地，还是存在单击拖动的问题。

最终解决

在函数式组件中，当画布渲染时需要保证销毁上一次的 graph 实例。

export const Demo01: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<Graph | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      const graph = new Graph({
        container: containerRef.current,
        background: {
          color: "#F2F7FA",
        },
      });
      graphRef.current = graph;

      graph.fromJSON(data);
      graph.centerContent();
    }

    // 增加这个：销毁实例
    return () => graphRef.current?.dispose();
  }, []);

  return (
    <div ref={containerRef} style={{ width: "50vw", height: "50vh" }} />
  );
};

感谢大佬提点，因为在React中开启了StrictMode， 开发环境下Mount会执行两次, 导致创建了两个实例，这种情况下需要做一次销毁

[lingchuL]

我今天也遇到这个问题。我是这样解决的：

问题描述

正常情况下拖拽 node 需要长按鼠标选中，但是我单击 node 即使鼠标已经松开了却仍然可以拖动，只有再次点击 node 才会取消拖动状态。

初步分析

官网示例全都是 class 示例，而我本地(antv/x6 v2.18.1)使用的是FC组件，我以为是这个原因导致的。随后我将官网文档的 class 示例原封不动搬到本地，还是存在单击拖动的问题。

最终解决

在函数式组件中，当画布渲染时需要保证销毁上一次的 graph 实例。

export const Demo01: React.FC = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const graphRef = useRef<Graph | null>(null);

  useEffect(() => {
    if (containerRef.current) {
      const graph = new Graph({
        container: containerRef.current,
        background: {
          color: "#F2F7FA",
        },
      });
      graphRef.current = graph;

      graph.fromJSON(data);
      graph.centerContent();
    }

    // 增加这个：销毁实例
    return () => graphRef.current?.dispose();
  }, []);

  return (
    <div ref={containerRef} style={{ width: "50vw", height: "50vh" }} />
  );
};

像这样解决了！非常感谢