fix: create-edge polyline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",

src/global.ts

@@ -1,5 +1,5 @@
 export default {
-  version: '3.8.0',
+  version: '3.8.1',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/graph/graph.ts

@@ -1034,7 +1034,7 @@ export default class Graph extends EventEmitter implements IGraph {
     }
 
     if (model.id && this.findById(model.id as string)) {
-      console.warn('This item exists already. Be sure the id is unique.');
+      console.warn(`This item exists already. Be sure the id %c${model.id}%c is unique.`, 'font-size: 20px; color: red;', '');
       return;
     }
 

src/shape/edges/router.ts

@@ -106,11 +106,14 @@ const pos2GridIx = (pos: number, gridSize: number) => {
 const getObstacleMap = (items: Item[], gridSize: number, offset: number) => {
   const map = {};
   items.forEach((item: Item) => {
-    const bbox = getExpandedBBox(item.getBBox(), offset);
-    for (let x = pos2GridIx(bbox.minX, gridSize); x <= pos2GridIx(bbox.maxX, gridSize); x += 1) {
-      for (let y = pos2GridIx(bbox.minY, gridSize); y <= pos2GridIx(bbox.maxY, gridSize); y += 1) {
-        const gridKey = `${x}-${y}`;
-        map[gridKey] = true;
+    // create-edge 时，当边类型为 polyline 时 endNode 为 null
+    if (item) {
+      const bbox = getExpandedBBox(item.getBBox(), offset);
+      for (let x = pos2GridIx(bbox.minX, gridSize); x <= pos2GridIx(bbox.maxX, gridSize); x += 1) {
+        for (let y = pos2GridIx(bbox.minY, gridSize); y <= pos2GridIx(bbox.maxY, gridSize); y += 1) {
+          const gridKey = `${x}-${y}`;
+          map[gridKey] = true;
+        }
       }
     }
   });
@@ -155,6 +158,11 @@ const estimateCost = (from: PolyPoint, endPoints: PolyPoint[], distFunc) => {
 // 计算考虑 offset 后的 BBox 上的连接点
 const getBoxPoints = (point: PolyPoint, node: INode, cfg: RouterCfg): PolyPoint[] => {
   const points = [];
+  // create-edge 生成边的过程中，endNode 为 null
+  if (!node) {
+    return points
+  }
+
   const { directions, offset } = cfg;
   const bbox = node.getBBox();
   const expandBBox = getExpandedBBox(node.getBBox(), offset);

tests/unit/behavior/create-edge-spec.ts

@@ -63,8 +63,49 @@ describe('create-edge', () => {
     expect(graph.getEdges().length).toEqual(2);
     const loop = graph.getEdges()[1];
     expect(loop.getModel().source).toEqual(loop.getModel().target);
-    console.log(graph)
-    // graph.destroy();
+    graph.destroy();
+  });
+  it('create edge width polyline edge', () => {
+    const graph: Graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: ['create-edge'],
+      },
+      defaultEdge: {
+        type: 'polyline',
+        style: {
+          stroke: '#f00',
+          lineWidth: 2
+        }
+      },
+    });
+    graph.data(data);
+    graph.render();
+    const node0 = graph.getNodes()[0];
+    const node1 = graph.getNodes()[1];
+    graph.emit('node:click', { x: 100, y: 100, item: node0 });
+    graph.emit('mousemove', { x: 110, y: 110 });
+    expect(graph.getEdges().length).toEqual(1);
+    const edge = graph.getEdges()[0];
+
+    // cancel
+    graph.emit('edge:click', { x: 100, y: 100, item: edge });
+    expect(graph.getEdges().length).toEqual(0);
+
+    // create
+    graph.emit('node:click', { x: 100, y: 100, item: node0 });
+    graph.emit('node:click', { x: 120, y: 120, item: node1 });
+    expect(graph.getEdges().length).toEqual(1);
+
+    // loop
+    graph.emit('node:click', { x: 100, y: 100, item: node0 });
+    graph.emit('node:click', { x: 100, y: 100, item: node0 });
+    expect(graph.getEdges().length).toEqual(2);
+    const loop = graph.getEdges()[1];
+    expect(loop.getModel().source).toEqual(loop.getModel().target);
+    graph.destroy();
   });
   it('create edge with drag trigger', () => {
     const graph: Graph = new Graph({