g.Rect: add methods to find a union of rectangles or points (#1446)

Author: ceitflow

docs/src/geometry/api/g/Point/prototype/update.html

@@ -1,2 +1,4 @@
 <pre class="docs-method-signature"><code>point.update(x, y)</code></pre>
+<pre class="docs-method-signature"><code>point.update(p)</code></pre>
 <p>Update the point's <code>x</code> and <code>y</code> coordinates with new values and return the point itself. Useful for chaining.</p>
+<p>Also accepts a single argument in the form of an object <code>{ x: [number], y: [number] }</code>.</p>

docs/src/geometry/api/g/Rect/constructor.html

@@ -1,4 +1,4 @@
 <pre class="docs-method-signature"><code>g.Rect(x, y, width, height)</code></pre>
 <p>Return a new rectangle object with top left corner at point with coordinates <code>x</code>, <code>y</code> and dimensions <code>width</code> and <code>height</code>.</p>
 
-<p>Also accepts as a single argument an object in the form <code>{ x: [number], y: [number], width: [number], height: [number] }</code>.</p>
+<p>Also accepts a single argument in the form of an object <code>{ x: [number], y: [number], width: [number], height: [number] }</code>.</p>

docs/src/geometry/api/g/Rect/fromPointUnion.html

@@ -0,0 +1,5 @@
+<pre class="docs-method-signature"><code>g.Rect.fromPointUnion(...points)</code></pre>
+<p>Returns a new rectangle object that is large enough to contain given <code>points</code>, where each point is an object with <code>x</code> and <code>y</code> properties. Examples:</p>
+<pre><code>const rect = g.Rect.fromPointUnion(new g.Point(0, 0), new g.Point(20, 20));
+const rect2 = g.Rect.fromPointUnion({ x: 0, y: 0 }, { x: 20, y: 20 });
+// { x: 0, y: 0, width: 20, height: 20 }</code></pre>

docs/src/geometry/api/g/Rect/fromRectUnion.html

@@ -0,0 +1,5 @@
+<pre class="docs-method-signature"><code>g.Rect.fromRectUnion(...rects)</code></pre>
+<p>Returns a new rectangle object that is large enough to contain given <code>rects</code>, where each rect is an object with <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code> properties. Examples:</p>
+<pre><code>const rect = g.Rect.fromRectUnion(new g.Rect(0, 0, 10, 10), new g.Rect(10, 10, 10, 10));
+const rect2 = g.Rect.fromRectUnion({ x: 0, y: 0, height: 10, width: 10 }, { x: 10, y: 10, height: 10, width: 10 });
+// { x: 0, y: 0, width: 20, height: 20 }</code></pre>

docs/src/geometry/api/g/Rect/prototype/update.html

@@ -0,0 +1,4 @@
+<pre class="docs-method-signature"><code>rect.update(x, y, width, height)</code></pre>
+<pre class="docs-method-signature"><code>rect.update(r)</code></pre>
+<p>Update the rect's <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code> properties with new values and return the rect itself. Useful for chaining.</p>
+<p>Also accepts a single argument in the form of an object <code>{ x: [number], y: [number], width: [number], height: [number] }</code>.</p>

src/g/index.mjs

@@ -3346,6 +3346,11 @@ Point.prototype = {
 
     update: function(x, y) {
 
+        if ((Object(x) === x)) {
+            y = x.y;
+            x = x.x;
+        }
+
         this.x = x || 0;
         this.y = y || 0;
         return this;
@@ -4104,6 +4109,54 @@ Rect.fromEllipse = function(e) {
     return new Rect(e.x - e.a, e.y - e.b, 2 * e.a, 2 * e.b);
 };
 
+Rect.fromPointUnion = function(...points) {
+
+    if (points.length === 0) return null;
+
+    const p = new Point();
+    let minX, minY, maxX, maxY;
+    minX = minY = Infinity;
+    maxX = maxY = -Infinity;
+
+    for (let i = 0; i < points.length; i++) {
+        p.update(points[i]);
+        const x = p.x;
+        const y = p.y;
+
+        if (x < minX) minX = x;
+        if (x > maxX) maxX = x;
+        if (y < minY) minY = y;
+        if (y > maxY) maxY = y;
+    }
+
+    return new Rect(minX, minY, maxX - minX, maxY - minY);
+};
+
+Rect.fromRectUnion = function(...rects) {
+
+    if (rects.length === 0) return null;
+
+    const r = new Rect();
+    let minX, minY, maxX, maxY;
+    minX = minY = Infinity;
+    maxX = maxY = -Infinity;
+
+    for (let i = 0; i < rects.length; i++) {
+        r.update(rects[i]);
+        const x = r.x;
+        const y = r.y;
+        const mX = x + r.width;
+        const mY = y + r.height;
+
+        if (x < minX) minX = x;
+        if (mX > maxX) maxX = mX;
+        if (y < minY) minY = y;
+        if (mY > maxY) maxY = mY;
+    }
+
+    return new Rect(minX, minY, maxX - minX, maxY - minY);
+};
+
 Rect.prototype = {
 
     // Find my bounding box when I'm rotated with the center of rotation in the center of me.
@@ -4532,14 +4585,23 @@ Rect.prototype = {
     // @return {rect} representing the union of both rectangles.
     union: function(rect) {
 
-        const u = new Rect(rect);
-        const { x, y, width, height } = this;
-        const { x: rx, y: ry, width: rw, height: rh } = u;
-        const ux = u.x = min(x, rx);
-        const uy = u.y = min(y, ry);
-        u.width = max(x + width, rx + rw) - ux;
-        u.height = max(y + height, ry + rh) - uy;
-        return u;
+        return Rect.fromRectUnion(this, rect);
+    },
+
+    update: function(x, y, w, h) {
+
+        if ((Object(x) === x)) {
+            y = x.y;
+            w = x.width;
+            h = x.height;
+            x = x.x;
+        }
+
+        this.x = x || 0;
+        this.y = y || 0;
+        this.width = w || 0;
+        this.height = h || 0;
+        return this;
     }
 };
 

test/geometry/point.js

@@ -345,6 +345,19 @@ QUnit.module('point', function() {
                 point.update(16, 24);
                 assert.equal(point.toString(), '16@24');
             });
+
+            QUnit.test('changes the values of x and y with object arg', function(assert) {
+
+                var point = new g.Point(2, 15);
+                point.update({x: 10, y: 20});
+                assert.equal(point.toString(), '10@20');
+
+                point.update({x: 5});
+                assert.equal(point.toString(), '5@0');
+
+                point.update({});
+                assert.equal(point.toString(), '0@0');
+            });
         });
 
         QUnit.module('dot(p)', function() {

test/geometry/rect.js

@@ -29,6 +29,83 @@ QUnit.module('rect', function() {
         });
     });
 
+    QUnit.module('fromPointUnion(points)', function() {
+
+        QUnit.test('returns null if no arguments are passed', function(assert) {
+            assert.ok(g.Rect.fromPointUnion() === null);
+        });
+
+        QUnit.test('creates a new Rect object from points', function(assert) {
+            var r0 = new g.Rect(10, 20, 5, 5);
+            var topRightR0 = r0.topRight();
+            var bottomLeftR0 = r0.bottomLeft();
+            var originR0 = r0.origin();
+            var cornerR0 = r0.corner();
+
+            var r1 = new g.Rect(-10, -20, 40, 60);
+            var originR1 = r1.origin();
+            var cornerR1 = r1.corner();
+
+            var r2 = new g.Rect();
+
+            var unionR0R1 = new g.Rect(-10, -20, 40, 60);
+            var unionR0R2 = new g.Rect(0, 0, 15, 25);
+
+            assert.ok(g.Rect.fromPointUnion(originR0, cornerR0).equals(r0), 'rect from g.Points');
+            assert.ok(g.Rect.fromPointUnion(topRightR0, bottomLeftR0).equals(r0), 'rect from g.Points 2');
+            assert.ok(g.Rect.fromPointUnion({ x: r0.x, y: r0.y }, { x: r0.x + r0.width, y: r0.y + r0.height }).equals(r0), 'rect from PlainPoints');
+            assert.ok(g.Rect.fromPointUnion(cornerR1, { x: r0.x, y: r0.y}, {x: r0.x + r0.width, y: r0.y + r0.height }, originR1).equals(unionR0R1), 'rect from g.Points and PlainPoints');
+            assert.ok(g.Rect.fromPointUnion(originR0).equals(new g.Rect(r0.x, r0.y, 0, 0)), 'rect from single g.Point has width and height equal to 0');
+            assert.ok(g.Rect.fromPointUnion({ x: r0.x, y: r0.y }).equals(new g.Rect(r0.x, r0.y, 0, 0)), 'rect from single PlainPoint has width and height equal to 0');
+            assert.ok(g.Rect.fromPointUnion(originR0, cornerR1, cornerR0, originR1).equals(unionR0R1), 'rect from multiple g.Points');
+            assert.ok(g.Rect.fromPointUnion({ x: r1.x + r1.width, y: r1.y + r1.height }, originR0, { x: r0.x, y: r0.y }, originR1).equals(unionR0R1), 'rect from multiple g.Points and PlainPoints');
+            assert.ok(g.Rect.fromPointUnion({}, {}).equals(r2), 'creates default rect if cannot read x and y from arguments');
+            assert.ok(g.Rect.fromPointUnion({}, topRightR0, bottomLeftR0).equals(unionR0R2), 'creates default rect if cannot read x and y from argument');
+        });
+    });
+
+    QUnit.module('fromRectUnion(rects)', function() {
+
+        QUnit.test('returns null if no arguments are passed', function(assert) {
+            assert.ok(g.Rect.fromRectUnion() === null);
+        });
+
+        QUnit.test('creates a new Rect object from rects', function(assert) {
+            var r0 = new g.Rect();
+            assert.ok(g.Rect.fromRectUnion(r0).equals(r0), 'rect from g.Rect');
+            assert.ok(g.Rect.fromRectUnion({ x: r0.x, y: r0.y, width: r0.width, height: r0.height }).equals(r0), 'rect from PlainRect');
+
+            var r1 = new g.Rect(-10, -20, 40, 60);
+            var r2 = new g.Rect(10, 20, 70, 90);
+            var r3 = new g.Rect(80, 90, 110, 130);
+            var r2Plain = { x: r2.x, y: r2.y, width: r2.width, height: r2.height };
+            var r3Plain = { x: r3.x, y: r3.y, width: r3.width, height: r3.height };
+
+            var unionR1R2R3 = new g.Rect(-10, -20, 200, 240);
+            var unionR0R3 = new g.Rect(0, 0, 190, 220);
+
+            assert.ok(g.Rect.fromRectUnion(r1, r2, r3).equals(unionR1R2R3), 'rect from multiple g.Rects');
+            assert.ok(g.Rect.fromRectUnion(r3, r2, r1).equals(unionR1R2R3), 'rect from multiple g.Rects 2');
+            assert.ok(g.Rect.fromRectUnion(r3, r1, r2).equals(unionR1R2R3), 'rect from multiple g.Rects 3');
+            assert.ok(g.Rect.fromRectUnion(r3Plain, r1, r2Plain).equals(unionR1R2R3), 'rect from multiple g.Rects and PlainRects');
+            assert.ok(g.Rect.fromRectUnion({}, {}).equals(r0), 'creates default Rect if cannot read x, y, width and height from arguments');
+            assert.ok(g.Rect.fromRectUnion(r3, {}).equals(unionR0R3), 'creates default Rect if cannot read x, y, width and height from argument');
+
+            var r4 = new g.Rect(10, 10, 50, 50);
+            var r5 = new g.Rect(100, 100, 50, 50);
+            var r6 = new g.Rect(20, 20, 10, 10);
+            var r7 = new g.Rect(20, 20, 50, 50);
+
+            var unionR4R5 = new g.Rect(10, 10, 140, 140);
+            var unionR4R7 = new g.Rect(10, 10, 60, 60);
+
+            assert.ok(g.Rect.fromRectUnion(r4, r5).equals(unionR4R5), 'rect of distant rectangles');
+            assert.ok(g.Rect.fromRectUnion(r4, r6).equals(r4), 'rect of embedded rectangles');
+            assert.ok(g.Rect.fromRectUnion(r4, r4).equals(r4), 'rect of embedded rectangles 2');
+            assert.ok(g.Rect.fromRectUnion(r4, r7).equals(unionR4R7), 'rect of intersecting rectangles');
+        });
+    });
+
     QUnit.module('prototype', function() {
 
         QUnit.module('bbox()', function() {
@@ -296,5 +373,34 @@ QUnit.module('rect', function() {
                 assert.equal((new g.Rect(20, 20, 150, 150)).union(new g.Rect(50, 50, 200, 200)).toString(), (new g.Rect(20, 20, 230, 230)).toString(), 'union of intersecting rectangles');
             });
         });
+
+        QUnit.module('update(x, y, width, height)', function() {
+
+            QUnit.test('changes the values of x, y, width and height', function(assert) {
+
+                var rect = new g.Rect(12, 25);
+                rect.update(1, 2, 3, 4);
+                assert.equal(rect.toString(), '1@2 4@6');
+
+                rect.update(5, 6);
+                assert.equal(rect.toString(), '5@6 5@6');
+
+                rect.update();
+                assert.equal(rect.toString(), '0@0 0@0');
+            });
+
+            QUnit.test('changes the values of x, y, width and height with object arg', function(assert) {
+
+                var rect = new g.Rect(12, 25);
+                rect.update({ x: 1, y: 2, width: 3, height: 4 });
+                assert.equal(rect.toString(), '1@2 4@6');
+
+                rect.update({ x: 5, y: 6 });
+                assert.equal(rect.toString(), '5@6 5@6');
+
+                rect.update({});
+                assert.equal(rect.toString(), '0@0 0@0');
+            });
+        });
     });
 });

types/geometry.d.ts

@@ -509,6 +509,7 @@ export namespace g {
         translate(tx: PlainPoint): this;
 
         update(x?: number, y?: number): this;
+        update(p: PlainPoint): this;
 
         vectorAngle(p: PlainPoint) : number;
 
@@ -664,7 +665,14 @@ export namespace g {
 
         union(rect: PlainRect): Rect;
 
+        update(x?: number, y?: number, width?: number, height?: number): this;
+        update(rect: PlainRect): this;
+
         static fromEllipse(e: Ellipse): Rect;
+
+        static fromPointUnion(...points: PlainPoint[]): Rect | null;
+
+        static fromRectUnion(...rects: PlainRect[]): Rect | null;
     }
 
     namespace bezier {