fix(g-base): bbox for container should not contain Infinity and -Infi…

…nity, close antvis#407
openwayne · Feb 19, 2020 · c91c89e · c91c89e
1 parent 25a12b1
commit c91c89e
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 29 deletions.
diff --git a/packages/g-base/src/abstract/container.ts b/packages/g-base/src/abstract/container.ts
@@ -93,38 +93,44 @@ abstract class Container extends Element implements IContainer {
     const children = this.getChildren();
     if (children.length > 0) {
       each(children, (child: IElement) => {
-        if (child.get('visible')) {
-          // 如果分组没有子元素，则直接跳过
-          if (child.isGroup() && child.get('children').length === 0) {
-            return true;
-          }
-          const box = child.getBBox();
-          // 计算 4 个顶点
-          const leftTop = child.applyToMatrix([box.minX, box.minY, 1]);
-          const leftBottom = child.applyToMatrix([box.minX, box.maxY, 1]);
-          const rightTop = child.applyToMatrix([box.maxX, box.minY, 1]);
-          const rightBottom = child.applyToMatrix([box.maxX, box.maxY, 1]);
-          // 从中取最小的范围
-          const boxMinX = Math.min(leftTop[0], leftBottom[0], rightTop[0], rightBottom[0]);
-          const boxMaxX = Math.max(leftTop[0], leftBottom[0], rightTop[0], rightBottom[0]);
-          const boxMinY = Math.min(leftTop[1], leftBottom[1], rightTop[1], rightBottom[1]);
-          const boxMaxY = Math.max(leftTop[1], leftBottom[1], rightTop[1], rightBottom[1]);
-
-          if (boxMinX < minX) {
-            minX = boxMinX;
-          }
+        // 可见元素返回正常的 bbox，不可见元素返回默认的 bbox
+        const box = child.get('visible')
+          ? child.getBBox()
+          : {
+              x: 0,
+              y: 0,
+              minX: 0,
+              minY: 0,
+              maxX: 0,
+              maxY: 0,
+              width: 0,
+              height: 0,
+            };
+        // 计算 4 个顶点
+        const leftTop = child.applyToMatrix([box.minX, box.minY, 1]);
+        const leftBottom = child.applyToMatrix([box.minX, box.maxY, 1]);
+        const rightTop = child.applyToMatrix([box.maxX, box.minY, 1]);
+        const rightBottom = child.applyToMatrix([box.maxX, box.maxY, 1]);
+        // 从中取最小的范围
+        const boxMinX = Math.min(leftTop[0], leftBottom[0], rightTop[0], rightBottom[0]);
+        const boxMaxX = Math.max(leftTop[0], leftBottom[0], rightTop[0], rightBottom[0]);
+        const boxMinY = Math.min(leftTop[1], leftBottom[1], rightTop[1], rightBottom[1]);
+        const boxMaxY = Math.max(leftTop[1], leftBottom[1], rightTop[1], rightBottom[1]);
+
+        if (boxMinX < minX) {
+          minX = boxMinX;
+        }
 
-          if (boxMaxX > maxX) {
-            maxX = boxMaxX;
-          }
+        if (boxMaxX > maxX) {
+          maxX = boxMaxX;
+        }
 
-          if (boxMinY < minY) {
-            minY = boxMinY;
-          }
+        if (boxMinY < minY) {
+          minY = boxMinY;
+        }
 
-          if (boxMaxY > maxY) {
-            maxY = boxMaxY;
-          }
+        if (boxMaxY > maxY) {
+          maxY = boxMaxY;
         }
       });
     } else {

diff --git a/packages/g-canvas/tests/bugs/issue-407-spec.js b/packages/g-canvas/tests/bugs/issue-407-spec.js
@@ -0,0 +1,56 @@
+const expect = require('chai').expect;
+import Canvas from '../../src/canvas';
+
+const dom = document.createElement('div');
+document.body.appendChild(dom);
+dom.id = 'c1';
+
+describe('#407', () => {
+  const canvas = new Canvas({
+    container: dom,
+    width: 400,
+    height: 400,
+  });
+
+  it('bbox for container should not contain Infinity and -Infinity', () => {
+    // case 1: child is a empty group
+    const group1 = canvas.addGroup();
+    group1.addGroup();
+
+    expect(group1.getBBox()).eqls({
+      x: 0,
+      y: 0,
+      minX: 0,
+      minY: 0,
+      maxX: 0,
+      maxY: 0,
+      width: 0,
+      height: 0,
+    });
+
+    // case 2: child's visible is false
+    const group2 = canvas.addGroup();
+    group2.addShape('circle', {
+      visible: false,
+      attrs: {
+        x: 100,
+        y: 100,
+        r: 50,
+        lineWidth: 5,
+        fill: 'red',
+        stroke: 'blue',
+      },
+    });
+
+    expect(group2.getBBox()).eqls({
+      x: 0,
+      y: 0,
+      minX: 0,
+      minY: 0,
+      maxX: 0,
+      maxY: 0,
+      width: 0,
+      height: 0,
+    });
+  });
+});