The issue has been closed

V5.0.0-beta.27 sourceAnchor 设置后不生效 #5209

America-first-melon posted onGitHub

问题描述

使用 v5 连线demo测试 sourceAnchor 与 targetAnchor 是否可以正常连接。

按文档所理解， sourceAnchor 为输入数据或内部数据，在 data 传入后，并不是按照 anchorPoint 进行的连线

import { Graph, Extensions, extend } from '@antv/g6';

const data = {
  nodes: [

    {
      id: 'node2',
      data: {
        x: 550,
        y: 250,
      },
    },
    {
      id: 'node4',
      data: {
        x: 340,
        y: 130,
      },
    },
    {
      id: 'node5',
      data: {
        x: 100,
        y: 350,
      },
    },

    {
      id: 'enhanced-node',
      data: {
        x: 400,
        y: 130,
        preventPolylineEdgeOverlap: true,
        label: 'Enhanced Node',
      },
    },
    {
      id: 'normal-node',
      data: {
        x: 300,
        y: 300,
        label: 'Normal Node',
      },
    },
  ],
  edges: [
    {
      id: 'edge1',
      source: 'node4',
      target: 'node2',
      data: {
        color: 'red',
        label: 'test',
        sourceAnchor: 0,
        targetAnchor: 1
      },
    },
  ],
};

const container = document.getElementById('container');
const width = container.scrollWidth;
const height = container.scrollHeight || 500;

const ExtGraph = extend(Graph, {
  edges: {
    'polyline-edge': Extensions.PolylineEdge,
  },
});

const graph = new ExtGraph({
  container: 'container',
  width,
  height,
  modes: {
    default: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'],
  },
  plugins: [
    {
      // lod-controller will be automatically assigned to graph with `disableLod: false` to graph if it is not configured as following
      type: 'lod-controller',
      disableLod: true,
    },
  ],
  data,
  node: {
    type: 'rect-node',
    labelShape: {
      text: {
        fields: ['label'],
        formatter: (model) => model.data.label,
      },
      position: 'bottom',
      maxLines: 4,
    },
    anchorShapes: [
        {
          position: [0, 0.5],
        },
        {
          position: [0.5, 0],
        },
        {
          position: [0.5, 1],
        },
        {
          position: [1, 0.5],
        },
      ]
  },
  // edge: {
  //   type: 'polyline-edge',
  //   keyShape: {
  //     endArrow: true,
  //     routeCfg: {
  //       /**
  //        * 目前支持正交路由 'orth' 和地铁路由 'er'
  //        */
  //       // name: 'er',
  //       /**
  //        * 是否开启自动避障，默认为 false
  //        * Whether to enable automatic obstacle avoidance, default is false
  //        */
  //       enableObstacleAvoidance: true,
  //     },
  //     /**
  //      * 拐弯处的圆角弧度，默认为直角，值为 0
  //      * The radius of the corner rounding, defaults to a right angle
  //      */
  //     // radius: 20,
  //     /**
  //      * 拐弯处距离节点最小距离, 默认为 2
  //      * Minimum distance from the node at the corner, default is 5.
  //      */
  //     // offset: 0,
  //     /**
  //      * 控制点数组，不指定时根据 A* 算法自动生成折线。若指定了，则按照 controlPoints 指定的位置进行弯折
  //      * An array of control points that, when not specified, automatically generates the bends according to the A* algorithm. If specified, bends are made at the position specified by controlPoints.
  //      */
  //     // controlPoints: [],
  //   },
  // },
});

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.destroyed) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.setSize([container.scrollWidth, container.scrollHeight]);
  };