fix: should filter the points when calculate the polyline shape's bou…

…nding box. Closed #468

src/graphic/shape/polyline.js

@@ -2,6 +2,19 @@ const Shape = require('../shape');
 const Smooth = require('../util/smooth');
 const bbox = require('../util/bbox');
 
+// filter the point which x or y is NaN
+function _filterPoints(points) {
+  const filteredPoints = [];
+  for (let i = 0, len = points.length; i < len; i++) {
+    const point = points[i];
+    if (!isNaN(point.x) && !isNaN(point.y)) {
+      filteredPoints.push(point);
+    }
+  }
+
+  return filteredPoints;
+}
+
 class Polyline extends Shape {
   _initProperties() {
     super._initProperties();
@@ -23,14 +36,7 @@ class Polyline extends Shape {
     const attrs = self.get('attrs');
     const { points, smooth } = attrs;
 
-    const filteredPoints = [];
-    // filter the point which x or y is NaN
-    for (let i = 0, len = points.length; i < len; i++) {
-      const point = points[i];
-      if (!isNaN(point.x) && !isNaN(point.y)) {
-        filteredPoints.push(point);
-      }
-    }
+    const filteredPoints = _filterPoints(points);
 
     context.beginPath();
     if (filteredPoints.length) {
@@ -60,25 +66,26 @@ class Polyline extends Shape {
     const attrs = this.get('attrs');
     const { points, smooth, lineWidth } = attrs;
 
+    const filteredPoints = _filterPoints(points);
     if (smooth) {
       const newPoints = [];
       const constaint = [
         [ 0, 0 ],
         [ 1, 1 ]
       ];
-      const sps = Smooth.smooth(points, false, constaint);
+      const sps = Smooth.smooth(filteredPoints, false, constaint);
       for (let i = 0, n = sps.length; i < n; i++) {
         const sp = sps[i];
         if (i === 0) {
-          newPoints.push([ points[0].x, points[0].y, sp[1], sp[2], sp[3], sp[4], sp[5], sp[6] ]);
+          newPoints.push([ filteredPoints[0].x, filteredPoints[0].y, sp[1], sp[2], sp[3], sp[4], sp[5], sp[6] ]);
         } else {
           const lastPoint = sps[ i - 1 ];
           newPoints.push([ lastPoint[5], lastPoint[6], sp[1], sp[2], sp[3], sp[4], sp[5], sp[6] ]);
         }
       }
       return bbox.getBBoxFromBezierGroup(newPoints, lineWidth);
     }
-    return bbox.getBBoxFromPoints(points, lineWidth);
+    return bbox.getBBoxFromPoints(filteredPoints, lineWidth);
   }
 }
 

test/bug/issue-468-spec.js

@@ -0,0 +1,58 @@
+const expect = require('chai').expect;
+const Polyline = require('../../src/graphic/shape/polyline');
+const Canvas = require('../../src/graphic/canvas');
+
+describe('Issue 468', () => {
+  let canvas;
+  let dom;
+  before(() => {
+    dom = document.createElement('canvas');
+    dom.id = 'issue468';
+    document.body.appendChild(dom);
+
+    canvas = new Canvas({
+      el: 'issue468',
+      width: 200,
+      height: 200
+    });
+  });
+
+  it('calculateBBox when points have NaN', () => {
+    const polyline = new Polyline({
+      attrs: {
+        points: [
+          { x: 10, y: 100 },
+          { x: 42, y: 98 },
+          { x: 55, y: 103 },
+          { x: NaN, y: 110 },
+          { x: NaN, y: 89 },
+          { x: NaN, y: 99 },
+          { x: NaN, y: 120 },
+          { x: NaN, y: 120 },
+          { x: NaN, y: 120 },
+          { x: 55, y: 10 },
+          { x: 42, y: 10 },
+          { x: 10, y: 10 }
+        ],
+        lineWidth: 4,
+        strokeStyle: '#223273'
+      }
+    });
+
+    canvas.add(polyline);
+    canvas.draw();
+
+    const bbox = polyline.calculateBox();
+    expect(bbox).to.eql({
+      minX: 8,
+      minY: 8,
+      maxX: 57,
+      maxY: 105
+    });
+  });
+
+  after(() => {
+    canvas.destroy();
+    document.body.removeChild(dom);
+  });
+});