From 5a02d10db7d7cf377b87a2b70615e98dbf2fa3c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AF=B8=E5=B2=B3?= <fuping.dfp@antfin.com>
Date: Wed, 20 Nov 2019 11:16:17 +0800
Subject: [PATCH] fix(g-canvas): bbox calculation should be correct for path
 when angle is null, 0 and PI, close #254

---
 packages/g-canvas/src/util/path.ts             | 13 ++++++++-----
 packages/g-canvas/tests/bugs/issue-210-spec.js |  8 ++++++--
 packages/g-canvas/tests/bugs/issue-232-spec.js |  4 ++--
 packages/g-canvas/tests/bugs/issue-252-spec.js | 10 ++++++++--
 packages/g-canvas/tests/bugs/issue-254-spec.js |  2 +-
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/g-canvas/src/util/path.ts b/packages/g-canvas/src/util/path.ts
index 214d15df1..9df65c78b 100644
--- a/packages/g-canvas/src/util/path.ts
+++ b/packages/g-canvas/src/util/path.ts
@@ -6,7 +6,6 @@ import getArcParams from './arc-params';
 import QuadUtil from '@antv/g-math/lib/quadratic';
 import CubicUtil from '@antv/g-math/lib/cubic';
 import EllipseArcUtil from '@antv/g-math/lib/arc';
-import { getBBoxByArray } from '@antv/g-math/lib/util';
 import { inBox } from './util';
 import inLine from './in-stroke/line';
 import inArc from './in-stroke/arc';
@@ -30,9 +29,9 @@ function hasArc(path) {
 
 function getSegments(path) {
   const segments = [];
-  let currentPoint = [0, 0]; // 当前图形
+  let currentPoint = null; // 当前图形
   let nextParams = null; // 下一节点的 path 参数
-  let startMovePoint = [0, 0]; // 开始 M 的点，可能会有多个
+  let startMovePoint = null; // 开始 M 的点，可能会有多个
   let lastStartMovePointIndex = 0; // 最近一个开始点 M 的索引
   const count = path.length;
   for (let i = 0; i < count; i++) {
@@ -188,8 +187,12 @@ function getExtraFromSegmentWithAngle(segment, lineWidth) {
   const currentAngle = Math.acos(
     (currentAndPre + currentAndNext - preAndNext) / (2 * Math.sqrt(currentAndPre) * Math.sqrt(currentAndNext))
   );
-  if (Math.sin(currentAngle) === 0) {
-    return 0;
+  // 夹角为空、 0 或 PI 时，不需要计算夹角处的额外宽度
+  if (!currentAngle || Math.sin(currentAngle) === 0) {
+    return {
+      xExtra: 0,
+      yExtra: 0,
+    };
   }
   let xAngle = Math.abs(Math.atan2(nextPoint[1] - currentPoint[1], nextPoint[0] - currentPoint[0]));
   let yAngle = Math.abs(Math.atan2(nextPoint[0] - currentPoint[0], nextPoint[1] - currentPoint[1]));
diff --git a/packages/g-canvas/tests/bugs/issue-210-spec.js b/packages/g-canvas/tests/bugs/issue-210-spec.js
index 709117f42..fa5a6a4e5 100644
--- a/packages/g-canvas/tests/bugs/issue-210-spec.js
+++ b/packages/g-canvas/tests/bugs/issue-210-spec.js
@@ -5,7 +5,7 @@ const dom = document.createElement('div');
 document.body.appendChild(dom);
 dom.id = 'c1';
 
-describe('#187', () => {
+describe('#210', () => {
   const canvas = new Canvas({
     container: dom,
     width: 500,
@@ -15,7 +15,11 @@ describe('#187', () => {
   it('bbox calculation should ignore NaN of path', () => {
     const path = canvas.addShape('path', {
       attrs: {
-        path: [['M', 100, 100], ['L', 200, 200], ['L', 300, NaN]],
+        path: [
+          ['M', 100, 100],
+          ['L', 200, 200],
+          ['L', 300, NaN],
+        ],
         stroke: 'red',
       },
     });
diff --git a/packages/g-canvas/tests/bugs/issue-232-spec.js b/packages/g-canvas/tests/bugs/issue-232-spec.js
index 740e0dfa6..64ec95aec 100644
--- a/packages/g-canvas/tests/bugs/issue-232-spec.js
+++ b/packages/g-canvas/tests/bugs/issue-232-spec.js
@@ -55,8 +55,8 @@ describe('#232', () => {
     setTimeout(() => {
       bbox = shape.getBBox();
       expect(bbox.minX).eqls(72.82280392116971);
-      expect(bbox.minY).eqls(31.487390015101695);
-      expect(bbox.maxX).eqls(386.8131061130099);
+      expect(bbox.minY).eqls(31.711318897448876);
+      expect(bbox.maxX).eqls(389.8131061130099);
       expect(bbox.maxY).eqls(377.36);
       done();
     }, 600);
diff --git a/packages/g-canvas/tests/bugs/issue-252-spec.js b/packages/g-canvas/tests/bugs/issue-252-spec.js
index 25cc3db21..3ce9be782 100644
--- a/packages/g-canvas/tests/bugs/issue-252-spec.js
+++ b/packages/g-canvas/tests/bugs/issue-252-spec.js
@@ -18,7 +18,13 @@ describe('#252', () => {
       type: 'path',
       attrs: {
         lineWidth: 2,
-        path: [['M', 75, 200], ['L', 75, 100], ['L', 175, 100], ['L', 175, 200], ['L', 75, 200]],
+        path: [
+          ['M', 75, 200],
+          ['L', 75, 100],
+          ['L', 175, 100],
+          ['L', 175, 200],
+          ['L', 75, 200],
+        ],
         stroke: 'red',
       },
     });
@@ -31,7 +37,7 @@ describe('#252', () => {
   });
 
   // 水平和垂直方向具有凸起角
-  it.only('bbox calculation for path with prominent angle should be correct', () => {
+  it('bbox calculation for path with prominent angle should be correct', () => {
     const shape = canvas.addShape({
       type: 'path',
       attrs: {
diff --git a/packages/g-canvas/tests/bugs/issue-254-spec.js b/packages/g-canvas/tests/bugs/issue-254-spec.js
index fedbc6052..7b202689a 100644
--- a/packages/g-canvas/tests/bugs/issue-254-spec.js
+++ b/packages/g-canvas/tests/bugs/issue-254-spec.js
@@ -12,7 +12,7 @@ describe('#254', () => {
     height: 600,
   });
 
-  it('bbox calculation for path should be correct when angle is 0 and π', () => {
+  it('bbox calculation for path should be correct when angle is null, 0 and π', () => {
     const shape = canvas.addShape({
       type: 'path',
       attrs: {