Revert "perf: 滚动性能优化 (#1323)"

This reverts commit 31e96b2.

Author: xiaoiver

packages/g-base/src/abstract/container.ts

@@ -77,38 +77,29 @@ abstract class Container extends Element implements IContainer {
     let maxX = -Infinity;
     let minY = Infinity;
     let maxY = -Infinity;
-    let hitChild = false;
+    const xArr = [];
+    const yArr = [];
     // 将可见元素、图形以及不为空的图形分组筛选出来，用于包围盒合并
-    this.getChildren().forEach((child) => {
-      if (
-        child.get('visible') &&
-        (!child.isGroup() || (child.isGroup() && (child as IGroup).getChildren().length > 0))
-      ) {
-        hitChild = true;
-        const { minX: childMinX, maxX: childMaxX, minY: childMinY, maxY: childMaxY } = child.getBBox();
-
-        if (childMinX < minX) {
-          minX = childMinX;
-        }
-        if (childMaxX > maxX) {
-          maxX = childMaxX;
-        }
-        if (childMinY < minY) {
-          minY = childMinY;
-        }
-        if (childMaxY > maxY) {
-          maxY = childMaxY;
-        }
-      }
-    });
-
-    if (!hitChild) {
+    const children = this.getChildren().filter(
+      (child) =>
+        child.get('visible') && (!child.isGroup() || (child.isGroup() && (child as IGroup).getChildren().length > 0))
+    );
+    if (children.length > 0) {
+      each(children, (child: IElement) => {
+        const box = child.getBBox();
+        xArr.push(box.minX, box.maxX);
+        yArr.push(box.minY, box.maxY);
+      });
+      minX = min(xArr);
+      maxX = max(xArr);
+      minY = min(yArr);
+      maxY = max(yArr);
+    } else {
       minX = 0;
       maxX = 0;
       minY = 0;
       maxY = 0;
     }
-
     const box = {
       x: minX,
       y: minY,
@@ -128,38 +119,29 @@ abstract class Container extends Element implements IContainer {
     let maxX = -Infinity;
     let minY = Infinity;
     let maxY = -Infinity;
-    let hitChild = false;
+    const xArr = [];
+    const yArr = [];
     // 将可见元素、图形以及不为空的图形分组筛选出来，用于包围盒合并
-    this.getChildren().forEach((child) => {
-      if (
-        child.get('visible') &&
-        (!child.isGroup() || (child.isGroup() && (child as IGroup).getChildren().length > 0))
-      ) {
-        hitChild = true;
-        const { minX: childMinX, maxX: childMaxX, minY: childMinY, maxY: childMaxY } = child.getCanvasBBox();
-
-        if (childMinX < minX) {
-          minX = childMinX;
-        }
-        if (childMaxX > maxX) {
-          maxX = childMaxX;
-        }
-        if (childMinY < minY) {
-          minY = childMinY;
-        }
-        if (childMaxY > maxY) {
-          maxY = childMaxY;
-        }
-      }
-    });
-
-    if (!hitChild) {
+    const children = this.getChildren().filter(
+      (child) =>
+        child.get('visible') && (!child.isGroup() || (child.isGroup() && (child as IGroup).getChildren().length > 0))
+    );
+    if (children.length > 0) {
+      each(children, (child: IElement) => {
+        const box = child.getCanvasBBox();
+        xArr.push(box.minX, box.maxX);
+        yArr.push(box.minY, box.maxY);
+      });
+      minX = min(xArr);
+      maxX = max(xArr);
+      minY = min(yArr);
+      maxY = max(yArr);
+    } else {
       minX = 0;
       maxX = 0;
       minY = 0;
       maxY = 0;
     }
-
     const box = {
       x: minX,
       y: minY,

packages/g-canvas/src/util/draw.ts

@@ -114,24 +114,19 @@ export function clearChanged(elements: IElement[]) {
 
 // 当某个父元素发生改变时，调用这个方法级联设置 refresh
 function setChildrenRefresh(children: IElement[], region: Region) {
-  const len = children.length;
-  for (let i = 0; i < len; i++) {
-    const child = children[i];
-    const { cfg } = child;
-    if (!cfg.visible) {
-      continue;
-    }
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i] as IElement;
     // let refresh = true;
     // 获取缓存的 bbox，如果这个 bbox 还存在则说明父元素不是矩阵发生了改变
     // const bbox = child.cfg.canvasBBox;
     // if (bbox) {
     //   // 如果这时候
     //   refresh = intersectRect(bbox, region);
     // }
-    cfg.refresh = true;
+    child.cfg.refresh = true;
     // 如果需要刷新当前节点，所有的子元素设置 refresh
     if (child.isGroup()) {
-      setChildrenRefresh(cfg.children, region);
+      setChildrenRefresh(child.get('children'), region);
     }
   }
 }
@@ -296,39 +291,27 @@ export function getMergedRegion(elements): Region {
   if (!elements.length) {
     return null;
   }
-  let mergedMinX;
-  let mergedMinY;
-  let mergedMaxX;
-  let mergedMaxY;
+  const minXArr = [];
+  const minYArr = [];
+  const maxXArr = [];
+  const maxYArr = [];
   each(elements, (el: IElement) => {
     const region = getRefreshRegion(el);
-
-    if (!region) {
-      return;
-    }
-
-    const { minX, minY, maxX, maxY } = region;
-
-    if (minX < mergedMinX) {
-      mergedMinX = minX;
-    }
-    if (minY < mergedMinY) {
-      mergedMinY = minY;
-    }
-    if (maxX > mergedMaxX) {
-      mergedMaxX = maxX;
-    }
-    if (maxY > mergedMaxY) {
-      mergedMaxY = maxY;
+    if (region) {
+      minXArr.push(region.minX);
+      minYArr.push(region.minY);
+      maxXArr.push(region.maxX);
+      maxYArr.push(region.maxY);
     }
   });
   return {
-    minX: mergedMinX,
-    minY: mergedMinY,
-    maxX: mergedMaxX,
-    maxY: mergedMaxY,
+    minX: min(minXArr),
+    minY: min(minYArr),
+    maxX: max(maxXArr),
+    maxY: max(maxYArr),
   };
 }
+
 export function mergeView(region, viewRegion) {
   if (!region || !viewRegion) {
     return null;