Skip to content
New issue

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

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

Already on GitHub? # to your account

Port left 布局设置指定坐标会超出图形 #4195

Closed
America-first-melon opened this issue Feb 2, 2024 · 2 comments
Closed

Port left 布局设置指定坐标会超出图形 #4195

America-first-melon opened this issue Feb 2, 2024 · 2 comments

Comments

@America-first-melon
Copy link

问题描述

场景:我的Node左侧有一排port(设计上只有左侧有port,所以选用了left布局),默认使用的是left布局自动计算。目前加上了elk的自动布局计算,需要给port添加指定的坐标点来覆盖left布局的坐标点。

重现链接

https://x6.antv.antgroup.com/zh/examples/node/port/#group

重现步骤

如果是 absolute 布局, 页面显示正常。
image

import { Graph } from '@antv/x6'

const graph = new Graph({
  container: document.getElementById('container'),
  grid: true,
})

const rect = graph.addNode({
  x: 133,
  y: 54,
  width: 300,
  height: 140,
  attrs: {
    body: {
      fill: '#f5f5f5',
      stroke: '#d9d9d9',
      strokeWidth: 1,
    },
  },
  ports: {
    groups: {
      left: {
        position: 'absolute',
        label: {
          position: {
            name: 'left'
          }
        },
        markup: {
          tagName: 'rect',
          selector: 'rect',
          attrs: {
            width: 10,
            height: 10,
            y: -5,
          },
        },
        attrs: {
          rect: {
            x: -10
          }
        }
      },
    },
    items: [
      {
        "id": "1JMHB2LZ7byw8n2L_t0XW",
        "group": "left",
        "attrs": {
          "rect": {
            "x": -10,
            "y": 8.7625
          }
        }
      },
      {
        "id": "c9Q96glHBadWmlL8iVt8e",
        "group": "left",
        "attrs": {
          "rect": {
            "x": 0,
            "y": 30
          }
        }
      },
      {
        "id": "3fttVEw3Cjb7yQfn_YO-E",
        "group": "left",
        "attrs": {
          "rect": {
            "x": 10,
            "y": 102.575
          }
        }
      }
    ]
  },
})

如果将 groups的position改为left,那么覆盖的坐标将超出图形。
image

使用姿势有问题吗?

预期行为

传入坐标之后以坐标为准。
image

平台

  • 操作系统: [macOS, Windows, Linux, React Native ...]
  • 网页浏览器: [Google Chrome, Safari, Firefox ...]
  • X6 版本: [2.11.1 ...]

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

@America-first-melon
Copy link
Author

页面的最终位置是:left 布局成功之后的坐标 和 attrs 或者 args 传入的参数,做一次加法

该场景可以通过传入 args 的 dx 和 dy 参数实现。

@x6-bot
Copy link
Contributor

x6-bot bot commented Feb 18, 2025

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.

@x6-bot x6-bot bot locked as resolved and limited conversation to collaborators Feb 18, 2025
# for free to subscribe to this conversation on GitHub. Already have an account? #.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant