X6 icon indicating copy to clipboard operation
X6 copied to clipboard

自定义节点,锚点问题问题

Open light-years-run opened this issue 1 year ago • 0 comments

问题描述

image

自定义一个节点,作为edge的source,锚点应该是节点bbox,但却是内部元素

重现链接

代码如下

重现步骤

import { Graph } from '@antv/x6' import { Transform } from '@antv/x6-plugin-transform' const graph = new Graph({ container: document.getElementById('container'), connecting:{ router:'normal', connector: { name:'normal', args:{radius:8}
}, anchor:'midSide', connectionPoint:'bbox',
}, grid: true, })

let source = graph.addNode({ x: 500, y: 200, width: 100, height: 100, markup: [
{ tagName: 'polygon', selector: 'polygon4' }, { tagName: 'rect', selector: 'polygon4rect', refFlag: true }, { tagName: 'rect', selector: 'bg' }, ], attrs: { bg: { fill: "none", pointerEvents: "all", refHeight: "100%", refWidth: "100%", stroke: "none" },
rect: { fill: "#ffffff", stroke: "#333333", strokeWidth: 2 }, body: { refWidth: "100%", refHeight: "100%", fill: "none", strokeWidth: 0, stroke: "none" }, polygon4: { refWidth: "100%", refHeight: "100%", stroke: "#8f8f8f", strokeWidth: 2, fill: "transparent", rx: 0, ry: 0, refPoints: "38,36 68,36 68,62 38,62", refX: 0, refY: 0, ref: "polygon4rect", id: "c642e4b4-a05c-4f6d-b2b3-5f220b329347" }, polygon4rect: { refX: 0.38, refY: 0.36, refWidth: 0.3, refHeight: 0.26, fill: "none", stroke: "none" },
} })

graph.use( new Transform({ resizing: true, rotating: true, }), ) let target = graph.addNode({ id: 'b', x: 800, y: 260, width: 100, height: 40, attrs: { body: { fill: '#f5f5f5', stroke: '#d9d9d9', }, }, })

let edge = graph.addEdge({ source, target, // https://x6.antv.vision/zh/docs/api/registry/connector#normal // connector: { name: 'normal' }, attrs: { line: { stroke: '#722ed1', }, }, }) console.log(edge)

预期行为

期望是bbox

平台

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

屏幕截图或视频(可选)

No response

补充说明(可选)

No response

light-years-run avatar Feb 05 '24 03:02 light-years-run