Optimize getShapesAtPoint with caching and refactor

Introduces a cache object to optimize repeated calls to getShapesAtPoint and refactors hit testing logic into static methods for improved clarity and performance. The changes streamline visibility checks and hit test traversal, reducing allocations and improving maintainability.

Author: jonobr1

src/group.js

@@ -24,6 +24,22 @@ import { Sprite } from './effects/sprite.js';
 const min = Math.min,
   max = Math.max;
 
+const cache = {
+  getShapesAtPoint: {
+    results: [],
+    hitOptions: {},
+    context: {
+      x: 0,
+      y: 0,
+      visibleOnly: true,
+      results: null,
+    },
+    single: [],
+    output: [],
+    empty: [],
+  },
+};
+
 /**
  * @name Two.Group
  * @class
@@ -363,6 +379,111 @@ export class Group extends Shape {
     }
   }
 
+  static IsVisible = function (element, visibleOnly) {
+    if (!visibleOnly) {
+      return true;
+    }
+
+    let current = element;
+    while (current) {
+      if (typeof current.visible === 'boolean' && !current.visible) {
+        return false;
+      }
+      if (typeof current.opacity === 'number' && current.opacity <= 0) {
+        return false;
+      }
+      current = current.parent;
+    }
+
+    return true;
+  };
+
+  static VisitForHitTest = function (
+    group,
+    context,
+    includeGroups,
+    filter,
+    hitOptions,
+    tolerance,
+    stopOnFirst
+  ) {
+    const children = group && group.children;
+    if (!children) {
+      return false;
+    }
+
+    const results = context.results;
+    for (let i = children.length - 1; i >= 0; i--) {
+      const child = children[i];
+
+      if (!child) {
+        continue;
+      }
+
+      if (!Group.IsVisible(child, context.visibleOnly)) {
+        continue;
+      }
+
+      const rect =
+        typeof child.getBoundingClientRect === 'function'
+          ? child.getBoundingClientRect()
+          : null;
+
+      if (rect && !boundsContains(rect, context.x, context.y, tolerance)) {
+        continue;
+      }
+
+      if (child instanceof Group) {
+        if (
+          includeGroups &&
+          (!filter || filter(child)) &&
+          typeof child.contains === 'function' &&
+          child.contains(context.x, context.y, hitOptions)
+        ) {
+          results.push(child);
+          if (stopOnFirst) {
+            return true;
+          }
+        }
+        if (
+          Group.VisitForHitTest(
+            child,
+            context,
+            includeGroups,
+            filter,
+            hitOptions,
+            tolerance,
+            stopOnFirst
+          )
+        ) {
+          return true;
+        }
+        continue;
+      }
+
+      if (!(child instanceof Shape)) {
+        continue;
+      }
+
+      if (filter && !filter(child)) {
+        continue;
+      }
+
+      if (typeof child.contains !== 'function') {
+        continue;
+      }
+
+      if (child.contains(context.x, context.y, hitOptions)) {
+        results.push(child);
+        if (stopOnFirst) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
   /**
    * @name Two.Group#copy
    * @function
@@ -490,127 +611,66 @@ export class Group extends Shape {
 
   getShapesAtPoint(x, y, options) {
     const opts = options || {};
-    const mode =
-      opts.mode === 'deepest' || opts.deepest ? 'deepest' : 'all';
+    const { results, hitOptions, context, single, empty } =
+      cache.getShapesAtPoint;
+
+    results.length = 0;
+
+    const mode = opts.mode === 'deepest' || opts.deepest ? 'deepest' : 'all';
     const visibleOnly = opts.visibleOnly !== false;
     const includeGroups = !!opts.includeGroups;
     const filter = typeof opts.filter === 'function' ? opts.filter : null;
-    const tolerance =
-      typeof opts.tolerance === 'number' ? opts.tolerance : 0;
-
-    const hitOptions = {};
+    const tolerance = typeof opts.tolerance === 'number' ? opts.tolerance : 0;
 
     if (typeof opts.precision === 'number') {
       hitOptions.precision = opts.precision;
+    } else {
+      delete hitOptions.precision;
     }
     if (typeof opts.fill !== 'undefined') {
       hitOptions.fill = opts.fill;
+    } else {
+      delete hitOptions.fill;
     }
     if (typeof opts.stroke !== 'undefined') {
       hitOptions.stroke = opts.stroke;
+    } else {
+      delete hitOptions.stroke;
     }
     hitOptions.tolerance = tolerance;
     hitOptions.ignoreVisibility = !visibleOnly;
 
     const stopOnFirst = mode === 'deepest';
-    const results = [];
-
-    const isVisible = (element) => {
-      if (!visibleOnly) {
-        return true;
-      }
-
-      let current = element;
-      while (current) {
-        if (typeof current.visible === 'boolean' && !current.visible) {
-          return false;
-        }
-        if (
-          typeof current.opacity === 'number' &&
-          current.opacity <= 0
-        ) {
-          return false;
-        }
-        current = current.parent;
-      }
-
-      return true;
-    };
-
-    const visit = (group) => {
-      const children = group && group.children;
-      if (!children) {
-        return false;
-      }
-
-      for (let i = children.length - 1; i >= 0; i--) {
-        const child = children[i];
-
-        if (!child) {
-          continue;
-        }
-
-        if (!isVisible(child)) {
-          continue;
-        }
-
-        const rect =
-          typeof child.getBoundingClientRect === 'function'
-            ? child.getBoundingClientRect()
-            : null;
-
-        if (rect && !boundsContains(rect, x, y, tolerance)) {
-          continue;
-        }
-
-        if (child instanceof Group) {
-          if (
-            includeGroups &&
-            (!filter || filter(child)) &&
-            typeof child.contains === 'function' &&
-            child.contains(x, y, hitOptions)
-          ) {
-            results.push(child);
-            if (stopOnFirst) {
-              return true;
-            }
-          }
-          if (visit(child)) {
-            return true;
-          }
-          continue;
-        }
-
-        if (!(child instanceof Shape)) {
-          continue;
-        }
-
-        if (filter && !filter(child)) {
-          continue;
-        }
-
-        if (typeof child.contains !== 'function') {
-          continue;
-        }
-
-        if (child.contains(x, y, hitOptions)) {
-          results.push(child);
-          if (stopOnFirst) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    };
-
-    visit(this);
+    context.x = x;
+    context.y = y;
+    context.visibleOnly = visibleOnly;
+    context.results = results;
+
+    Group.VisitForHitTest(
+      this,
+      context,
+      includeGroups,
+      filter,
+      hitOptions,
+      tolerance,
+      stopOnFirst
+    );
 
     if (stopOnFirst) {
-      return results.length > 0 ? [results[0]] : [];
+      if (results.length > 0) {
+        const first = results[0];
+        results.length = 0;
+        single[0] = first;
+        single.length = 1;
+        return single;
+      }
+      empty.length = 0;
+      return empty;
     }
 
-    return results;
+    const hits = results.slice();
+    results.length = 0;
+    return hits;
   }
 
   /**

utils/file-sizes.json

@@ -1 +1 @@
-{"development":"89KB","production":"48KB"}
+{"development":"90KB","production":"48KB"}