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

[Bug]: After setting the ports attribute to style in node, there is a difference between the end and the mouse position when using the create-edge plugin to create edges #6714

Open
2 of 10 tasks
fxLion opened this issue Jan 9, 2025 · 1 comment
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer

Comments

@fxLion
Copy link

fxLion commented Jan 9, 2025

Describe the bug / 问题描述

创建边无异常的代码

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node1', target: 'node3' },
      { source: 'node1', target: 'node4' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  layout: {
    type: 'grid',
  },
  node: {
    style: {
      // ports: [
      //   {
      //     "key": "top",
      //     "placement": [0.5, 0],
      //   },
      // ]
    }
  },
  behaviors: [
    {
      type: 'create-edge',
      trigger: 'drag',
      style: {
        fill: 'red',
        lineWidth: 2,
      },
    },
  ],
});

graph.render();

添加ports属性后,创建边的末端与鼠标位置有差异

import { Graph } from '@antv/g6';

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
    edges: [
      { source: 'node1', target: 'node2' },
      { source: 'node1', target: 'node3' },
      { source: 'node1', target: 'node4' },
      { source: 'node2', target: 'node3' },
      { source: 'node3', target: 'node4' },
      { source: 'node4', target: 'node5' },
    ],
  },
  layout: {
    type: 'grid',
  },
  node: {
    style: {
      ports: [
        {
          "key": "top",
          "placement": [0.5, 0],
        },
      ]
    }
  },
  behaviors: [
    {
      type: 'create-edge',
      trigger: 'drag',
      style: {
        fill: 'red',
        lineWidth: 2,
      },
    },
  ],
});

graph.render();

效果图如下
image

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他
@fxLion fxLion added the status: waiting for maintainer These issues have not yet been reviewed by a maintainer label Jan 9, 2025
@github-actions github-actions bot changed the title [Bug]: node中style设置ports属性后,使用create-edge插件创建边时末端与鼠标位置有差异 [Bug]: After setting the ports attribute to style in node, there is a difference between the end and the mouse position when using the create-edge plugin to create edges Jan 9, 2025
@uhobnil
Copy link
Contributor

uhobnil commented Jan 10, 2025

It looks as expected

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues have not yet been reviewed by a maintainer
Projects
None yet
Development

No branches or pull requests

2 participants