Node is moved just by clicking on it

[adeas31]

问题描述

I followed the basic tutorial example. I noticed that the node is moving just by clicking on it. So if I click on the node and then move the cursor then the node moves as well. I expect it to move with click and drag as it is doing in all the online examples.

重现链接

No link

重现步骤

Click on the node and then move without holding/dragging the click. The node moves around.

预期行为

Should move with only click and drag.

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• X6 版本: [2.11.1]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[x6-bot]

👋 @adeas31

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.

[NewByVector]

My guess is that the mouse position flutters when clicked, causing the node to move. You can add the moveThreshold parameter to test the effect.

[NewByVector]

@adeas31 May I ask whether the above answer solves your problem?

[adeas31]

@NewByVector the moveThreshold option does not work. I can still move the node just with single click.

[NewByVector]

Can you provide an example that can be repeated?

[adeas31]

I am testing with very basic example https://codesandbox.io/s/rl62nt

Here is the code,

import React from 'react'
import { Graph } from '@antv/x6'
import './App.css'

const data = {
  nodes: [
    {
      id: 'node1',
      shape: 'rect',
      x: 40,
      y: 40,
      width: 100,
      height: 40,
      label: 'hello',
      attrs: {
        // body 是选择器名称，选中的是 rect 元素
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
    {
      id: 'node2',
      shape: 'rect',
      x: 160,
      y: 180,
      width: 100,
      height: 40,
      label: 'world',
      attrs: {
        body: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
          fill: '#fff',
          rx: 6,
          ry: 6,
        },
      },
    },
  ],
  edges: [
    {
      shape: 'edge',
      source: 'node1',
      target: 'node2',
      label: 'x6',
      attrs: {
        // line 是选择器名称，选中的边的 path 元素
        line: {
          stroke: '#8f8f8f',
          strokeWidth: 1,
        },
      },
    },
  ],
}

export default class Example extends React.Component {
  private container: HTMLDivElement

  componentDidMount() {
    const graph = new Graph({
      container: this.container,
      // 设置画布背景颜色
      background: {
        color: '#F2F7FA',
      },
    })

    graph.fromJSON(data) // 渲染元素
    graph.centerContent() // 居中显示
  }

  refContainer = (container: HTMLDivElement) => {
    this.container = container
  }

  render() {
    return (
      <div className="App">
        <div className="App-content" ref={this.refContainer} />
      </div>
    )
  }
}

On the codesandbox it works as expected i.e., to move a node you click hold and drag it. On my machine it moves just with click i.e., when I do a single click on a node without holding and dragging it. So the node follows the cursor after one click and then I need to click again to stop it from moving.

[adeas31]

@NewByVector did you manage to reproduce the issue?

[NewByVector]

It feels like codesanbox's problem.

[adeas31]

No, the codesandbox works as expected.
How does it work for you on your machine with the sample code?

[NewByVector]

Everything is normal on my machine.

[monkeykingblack]

@adeas31 are you found the solution for this issue? I have similar problem as your

[adeas31]

No, I didn't found any solution yet. I also didn't get time to work on it. I am guessing it has something to do with the version compatibility between X6 and NodeJS.

[monkeykingblack]

@NewByVector
I create both sample on Stackblitz and Code Sandbox.

• In Stackblizt environment that nodes are created without id is working fine (source1 and target1 in sample), but when provide node id field then that node will moving just only one click
• In CodeSandbox is working well, that weird

[adeas31]

In Stackblizt environment that nodes are created without id is working fine (source1 and target1 in sample), but when provide node id field then that node will moving just only one click

I confirm this behaviour. It works fine for me also on my local machine when I remove the id attribute of the node. But how to make edges without id?

[piyapanw]

I faced the same issue. My workaround is to use Xflow. You can try it with the quick start example, and you will see that the node can only be moved by dragging."