Merge pull request #755 from jonobr1/747-nested-group-client-rect

747 Fix Nested Group and Shallow Bounding Box Calculations

Author: jonobr1

build/two.js

@@ -766,8 +766,8 @@ var Two = (() => {
       svg: "SVGRenderer",
       canvas: "CanvasRenderer"
     },
-    Version: "v0.8.15",
-    PublishDate: "2025-01-01T01:30:08.872Z",
+    Version: "v0.8.16",
+    PublishDate: "2025-01-06T21:30:44.526Z",
     Identifier: "two-",
     Resolution: 12,
     AutoCalculateImportedMatrices: true,
@@ -6186,10 +6186,10 @@ var Two = (() => {
           const [bx, by] = matrix.multiply(rect.right, rect.top);
           const [cx, cy] = matrix.multiply(rect.left, rect.bottom);
           const [dx, dy] = matrix.multiply(rect.right, rect.bottom);
-          top = min3(ay, by, cy, dy);
-          left = min3(ax, bx, cx, dx);
-          right = max3(ax, bx, cx, dx);
-          bottom = max3(ay, by, cy, dy);
+          top = min3(ay, by, cy, dy, top);
+          left = min3(ax, bx, cx, dx, left);
+          right = max3(ax, bx, cx, dx, right);
+          bottom = max3(ay, by, cy, dy, bottom);
         } else {
           top = min3(rect.top, top);
           left = min3(rect.left, left);

build/two.min.js

@@ -782,8 +782,8 @@ var Constants = {
     svg: "SVGRenderer",
     canvas: "CanvasRenderer"
   },
-  Version: "v0.8.15",
-  PublishDate: "2025-01-01T01:30:08.872Z",
+  Version: "v0.8.16",
+  PublishDate: "2025-01-06T21:30:44.526Z",
   Identifier: "two-",
   Resolution: 12,
   AutoCalculateImportedMatrices: true,
@@ -6206,10 +6206,10 @@ var _Group = class extends Shape {
         const [bx, by] = matrix.multiply(rect.right, rect.top);
         const [cx, cy] = matrix.multiply(rect.left, rect.bottom);
         const [dx, dy] = matrix.multiply(rect.right, rect.bottom);
-        top = min3(ay, by, cy, dy);
-        left = min3(ax, bx, cx, dx);
-        right = max3(ax, bx, cx, dx);
-        bottom = max3(ay, by, cy, dy);
+        top = min3(ay, by, cy, dy, top);
+        left = min3(ax, bx, cx, dx, left);
+        right = max3(ax, bx, cx, dx, right);
+        bottom = max3(ay, by, cy, dy, bottom);
       } else {
         top = min3(rect.top, top);
         left = min3(rect.left, left);

build/two.module.js

@@ -672,10 +672,10 @@ export class Group extends Shape {
         const [cx, cy] = matrix.multiply(rect.left, rect.bottom);
         const [dx, dy] = matrix.multiply(rect.right, rect.bottom);
 
-        top = min(ay, by, cy, dy);
-        left = min(ax, bx, cx, dx);
-        right = max(ax, bx, cx, dx);
-        bottom = max(ay, by, cy, dy);
+        top = min(ay, by, cy, dy, top);
+        left = min(ax, bx, cx, dx, left);
+        right = max(ax, bx, cx, dx, right);
+        bottom = max(ay, by, cy, dy, bottom);
       } else {
         top = min(rect.top, top);
         left = min(rect.left, left);

src/group.js

@@ -1186,6 +1186,52 @@ QUnit.test('Two.Group Object Conversion', function (assert) {
   // );
 });
 
+QUnit.test('Two.Group.getBoundingClientRect(shallow)', function (assert) {
+  assert.expect(6);
+
+  const group = new Two.Group();
+
+  for (let i = 0; i < 3; i++) {
+    const x = i * 100;
+    const width = 100;
+    const height = 50;
+    const child = new Two.Rectangle(x, 0, width, height);
+    group.add(child);
+  }
+
+  const rect = group.getBoundingClientRect(true);
+  assert.equal(
+    rect.top,
+    -25.5,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates top property.'
+  );
+  assert.equal(
+    rect.bottom,
+    25.5,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates bottom property.'
+  );
+  assert.equal(
+    rect.left,
+    -50.5,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates left property.'
+  );
+  assert.equal(
+    rect.right,
+    250.5,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates right property.'
+  );
+  assert.equal(
+    rect.width,
+    301,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates width property.'
+  );
+  assert.equal(
+    rect.height,
+    51,
+    'Two.Group.getBoundingClientRect(shallow) correctly calculates height property.'
+  );
+});
+
 QUnit.test('Two.Text Object Conversion', function (assert) {
   assert.expect(9);
 

tests/suite/core.js

@@ -14,6 +14,7 @@ All notable changes to this project will be documented in this file. The format
 ## Nightly
 
 + `Two.ZUI.reset` updates the surfaces to be reflect reset orientation
++ `Two.Group.getBoundingClientRect(shallow)` correctly infers min and max values to calculate dimensions correctly
 
 ## Dec 31, 2024 v0.8.15