js-draw 0.11.2 → 0.12.0

package/dist/src/tools/Eraser.d.ts

@@ -4,11 +4,20 @@ import Editor from '../Editor';
 export default class Eraser extends BaseTool {
     private editor;
     private lastPoint;
+    private isFirstEraseEvt;
     private toRemove;
+    private thickness;
     private partialCommands;
     constructor(editor: Editor, description: string);
+    private clearPreview;
+    private getSizeOnCanvas;
+    private drawPreviewAt;
+    private getEraserRect;
+    private eraseTo;
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
-    onPointerUp(_event: PointerEvt): void;
+    onPointerUp(event: PointerEvt): void;
     onGestureCancel(): void;
+    getThickness(): number;
+    setThickness(thickness: number): void;
 }

package/dist/src/tools/Eraser.js

@@ -1,31 +1,55 @@
+import { EditorEventType } from '../types';
 import BaseTool from './BaseTool';
+import { Vec2 } from '../math/Vec2';
 import LineSegment2 from '../math/LineSegment2';
 import Erase from '../commands/Erase';
 import { PointerDevice } from '../Pointer';
+import Color4 from '../Color4';
+import Rect2 from '../math/Rect2';
 export default class Eraser extends BaseTool {
     constructor(editor, description) {
         super(editor.notifier, description);
         this.editor = editor;
+        this.lastPoint = null;
+        this.isFirstEraseEvt = true;
+        this.thickness = 10;
         // Commands that each remove one element
         this.partialCommands = [];
     }
-    onPointerDown(event) {
-        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
-            this.lastPoint = event.current.canvasPos;
-            this.toRemove = [];
-            return true;
-        }
-        return false;
+    clearPreview() {
+        this.editor.clearWetInk();
     }
-    onPointerMove(event) {
-        const currentPoint = event.current.canvasPos;
-        if (currentPoint.minus(this.lastPoint).magnitude() === 0) {
+    getSizeOnCanvas() {
+        return this.thickness / this.editor.viewport.getScaleFactor();
+    }
+    drawPreviewAt(point) {
+        this.clearPreview();
+        const size = this.getSizeOnCanvas();
+        const renderer = this.editor.display.getWetInkRenderer();
+        const rect = this.getEraserRect(point);
+        const fill = {
+            fill: Color4.gray,
+        };
+        renderer.drawRect(rect, size / 4, fill);
+    }
+    getEraserRect(centerPoint) {
+        const size = this.getSizeOnCanvas();
+        const halfSize = Vec2.of(size / 2, size / 2);
+        return Rect2.fromCorners(centerPoint.minus(halfSize), centerPoint.plus(halfSize));
+    }
+    eraseTo(currentPoint) {
+        if (!this.isFirstEraseEvt && currentPoint.minus(this.lastPoint).magnitude() === 0) {
             return;
         }
+        this.isFirstEraseEvt = false;
+        // Currently only objects within eraserRect or that intersect a straight line
+        // from the center of the current rect to the previous are erased. TODO: Erase
+        // all objects as if there were pointerMove events between the two points.
+        const eraserRect = this.getEraserRect(currentPoint);
         const line = new LineSegment2(this.lastPoint, currentPoint);
-        const region = line.bbox;
+        const region = Rect2.union(line.bbox, eraserRect);
         const intersectingElems = this.editor.image.getElementsIntersectingRegion(region).filter(component => {
-            return component.intersects(line);
+            return component.intersects(line) || component.intersectsRect(eraserRect);
         });
         // Remove any intersecting elements.
         this.toRemove.push(...intersectingElems);
@@ -33,9 +57,25 @@ export default class Eraser extends BaseTool {
         const newPartialCommands = intersectingElems.map(elem => new Erase([elem]));
         newPartialCommands.forEach(cmd => cmd.apply(this.editor));
         this.partialCommands.push(...newPartialCommands);
+        this.drawPreviewAt(currentPoint);
         this.lastPoint = currentPoint;
     }
-    onPointerUp(_event) {
+    onPointerDown(event) {
+        if (event.allPointers.length === 1 || event.current.device === PointerDevice.Eraser) {
+            this.lastPoint = event.current.canvasPos;
+            this.toRemove = [];
+            this.isFirstEraseEvt = true;
+            this.drawPreviewAt(event.current.canvasPos);
+            return true;
+        }
+        return false;
+    }
+    onPointerMove(event) {
+        const currentPoint = event.current.canvasPos;
+        this.eraseTo(currentPoint);
+    }
+    onPointerUp(event) {
+        this.eraseTo(event.current.canvasPos);
         if (this.toRemove.length > 0) {
             // Undo commands for each individual component and unite into a single command.
             this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
@@ -43,9 +83,21 @@ export default class Eraser extends BaseTool {
             const command = new Erase(this.toRemove);
             this.editor.dispatch(command); // dispatch: Makes undo-able.
         }
+        this.clearPreview();
     }
     onGestureCancel() {
         this.partialCommands.forEach(cmd => cmd.unapply(this.editor));
         this.partialCommands = [];
+        this.clearPreview();
+    }
+    getThickness() {
+        return this.thickness;
+    }
+    setThickness(thickness) {
+        this.thickness = thickness;
+        this.editor.notifier.dispatch(EditorEventType.ToolUpdated, {
+            kind: EditorEventType.ToolUpdated,
+            tool: this,
+        });
     }
 }

package/dist/src/tools/SelectionTool/Selection.d.ts

@@ -19,6 +19,7 @@ export default class Selection {
     private backgroundElem;
     private hasParent;
     constructor(startPoint: Point2, editor: Editor);
+    getBackgroundElem(): HTMLElement;
     getTransform(): Mat33;
     get preTransformRegion(): Rect2;
     get region(): Rect2;
@@ -36,7 +37,9 @@ export default class Selection {
     getMinCanvasSize(): number;
     getSelectedItemCount(): number;
     updateUI(): void;
+    private removedFromImage;
     private addRemoveSelectionFromImage;
+    private removeDeletedElemsFromSelection;
     private targetHandle;
     private backgroundDragging;
     onDragStart(pointer: Pointer, target: EventTarget): boolean;
@@ -45,7 +48,7 @@ export default class Selection {
     onDragCancel(): void;
     scrollTo(): Promise<void>;
     deleteSelectedObjects(): Command;
-    duplicateSelectedObjects(): Command;
+    duplicateSelectedObjects(): Promise<Command>;
     addTo(elem: HTMLElement): void;
     setToPoint(point: Point2): void;
     cancelSelection(): void;

package/dist/src/tools/SelectionTool/Selection.js

@@ -32,6 +32,8 @@ export default class Selection {
         this.transform = Mat33.identity;
         this.selectedElems = [];
         this.hasParent = true;
+        // Maps IDs to whether we removed the component from the image
+        this.removedFromImage = {};
         this.targetHandle = null;
         this.backgroundDragging = false;
         this.originalRegion = new Rect2(startPoint.x, startPoint.y, 0, 0);
@@ -58,6 +60,10 @@ export default class Selection {
             handle.addTo(this.backgroundElem);
         }
     }
+    // @internal Intended for unit tests
+    getBackgroundElem() {
+        return this.backgroundElem;
+    }
     getTransform() {
         return this.transform;
     }
@@ -140,16 +146,7 @@ export default class Selection {
             singleItemSelectionMode = true;
         }
         this.selectedElems = this.editor.image.getElementsIntersectingRegion(this.region).filter(elem => {
-            if (this.region.containsRect(elem.getBBox())) {
-                return true;
-            }
-            // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
-            // As such, test with more lines than just this' edges.
-            const testLines = [];
-            for (const subregion of this.region.divideIntoGrid(2, 2)) {
-                testLines.push(...subregion.getEdges());
-            }
-            return testLines.some(edge => elem.intersects(edge));
+            return elem.intersectsRect(this.region);
         });
         if (singleItemSelectionMode && this.selectedElems.length > 0) {
             this.selectedElems = [this.selectedElems[this.selectedElems.length - 1]];
@@ -215,30 +212,45 @@ export default class Selection {
     //
     // If removed from the image, selected elements are drawn as wet ink.
     addRemoveSelectionFromImage(inImage) {
-        return __awaiter(this, void 0, void 0, function* () {
-            // Don't hide elements if doing so will be slow.
-            if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
-                return;
+        // Don't hide elements if doing so will be slow.
+        if (!inImage && this.selectedElems.length > maxPreviewElemCount) {
+            return;
+        }
+        for (const elem of this.selectedElems) {
+            const parent = this.editor.image.findParent(elem);
+            if (!inImage && parent) {
+                this.removedFromImage[elem.getId()] = true;
+                parent.remove();
             }
-            for (const elem of this.selectedElems) {
-                const parent = this.editor.image.findParent(elem);
-                if (!inImage) {
-                    parent === null || parent === void 0 ? void 0 : parent.remove();
-                }
-                // If we're making things visible and the selected object wasn't previously
-                // visible,
-                else if (!parent) {
-                    EditorImage.addElement(elem).apply(this.editor);
-                }
+            // If we're making things visible and the selected object wasn't previously
+            // visible,
+            else if (!parent && this.removedFromImage[elem.getId()]) {
+                EditorImage.addElement(elem).apply(this.editor);
+                this.removedFromImage[elem.getId()] = false;
+                delete this.removedFromImage[elem.getId()];
             }
-            yield this.editor.queueRerender();
+        }
+        // Don't await queueRerender. If we're running in a test, the re-render might never
+        // happen.
+        this.editor.queueRerender().then(() => {
             if (!inImage) {
                 this.previewTransformCmds();
             }
         });
     }
+    removeDeletedElemsFromSelection() {
+        // Remove any deleted elements from the selection.
+        this.selectedElems = this.selectedElems.filter(elem => {
+            const hasParent = !!this.editor.image.findParent(elem);
+            // If we removed the element and haven't added it back yet, don't remove it
+            // from the selection.
+            const weRemoved = this.removedFromImage[elem.getId()];
+            return hasParent || weRemoved;
+        });
+    }
     onDragStart(pointer, target) {
-        void this.addRemoveSelectionFromImage(false);
+        this.removeDeletedElemsFromSelection();
+        this.addRemoveSelectionFromImage(false);
         for (const handle of this.handles) {
             if (handle.isTarget(target)) {
                 handle.handleDragStart(pointer);
@@ -299,10 +311,34 @@ export default class Selection {
         });
     }
     deleteSelectedObjects() {
+        if (this.backgroundDragging || this.targetHandle) {
+            this.onDragEnd();
+        }
         return new Erase(this.selectedElems);
     }
     duplicateSelectedObjects() {
-        return new Duplicate(this.selectedElems);
+        return __awaiter(this, void 0, void 0, function* () {
+            const wasTransforming = this.backgroundDragging || this.targetHandle;
+            let tmpApplyCommand = null;
+            if (wasTransforming) {
+                // Don't update the selection's focus when redoing/undoing
+                const selectionToUpdate = null;
+                tmpApplyCommand = new Selection.ApplyTransformationCommand(selectionToUpdate, this.selectedElems, this.transform);
+                // Transform to ensure that the duplicates are in the correct location
+                yield tmpApplyCommand.apply(this.editor);
+                // Show items again
+                this.addRemoveSelectionFromImage(true);
+            }
+            const duplicateCommand = new Duplicate(this.selectedElems);
+            if (wasTransforming) {
+                // Move the selected objects back to the correct location.
+                yield (tmpApplyCommand === null || tmpApplyCommand === void 0 ? void 0 : tmpApplyCommand.unapply(this.editor));
+                this.addRemoveSelectionFromImage(false);
+                this.previewTransformCmds();
+                this.updateUI();
+            }
+            return duplicateCommand;
+        });
     }
     addTo(elem) {
         if (this.container.parentElement) {
@@ -323,6 +359,7 @@ export default class Selection {
         this.hasParent = false;
     }
     setSelectedObjects(objects, bbox) {
+        this.addRemoveSelectionFromImage(true);
         this.originalRegion = bbox;
         this.selectedElems = objects.filter(object => object.isSelectable());
         this.updateUI();

package/dist/src/tools/SelectionTool/SelectionTool.js

@@ -241,7 +241,9 @@ export default class SelectionTool extends BaseTool {
         }
         else if (evt.ctrlKey) {
             if (this.selectionBox && evt.key === 'd') {
-                this.editor.dispatch(this.selectionBox.duplicateSelectedObjects());
+                this.selectionBox.duplicateSelectedObjects().then(command => {
+                    this.editor.dispatch(command);
+                });
                 return true;
             }
             else if (evt.key === 'a') {

package/dist/src/tools/TextTool.js

@@ -63,11 +63,20 @@ export default class TextTool extends BaseTool {
         // Estimate
         return style.size * 2 / 3;
     }
-    flushInput() {
+    // Take input from this' textInputElem and add it to the EditorImage.
+    // If [removeInput], the HTML input element is removed. Otherwise, its value
+    // is cleared.
+    flushInput(removeInput = true) {
         if (this.textInputElem && this.textTargetPosition) {
             const content = this.textInputElem.value.trimEnd();
-            this.textInputElem.remove();
-            this.textInputElem = null;
+            this.textInputElem.value = '';
+            if (removeInput) {
+                // In some browsers, .remove() triggers a .blur event (synchronously).
+                // Clear this.textInputElem before removal
+                const input = this.textInputElem;
+                this.textInputElem = null;
+                input.remove();
+            }
             if (content === '') {
                 return;
             }
@@ -134,9 +143,15 @@ export default class TextTool extends BaseTool {
             }
         };
         this.textInputElem.onblur = () => {
-            // Don't remove the input within the context of a blur event handler.
-            // Doing so causes errors.
-            setTimeout(() => this.flushInput(), 0);
+            // Delay removing the input -- flushInput may be called within a blur()
+            // event handler
+            const removeInput = false;
+            const input = this.textInputElem;
+            this.flushInput(removeInput);
+            this.textInputElem = null;
+            setTimeout(() => {
+                input === null || input === void 0 ? void 0 : input.remove();
+            }, 0);
         };
         this.textInputElem.onkeyup = (evt) => {
             var _a, _b;

package/dist/src/tools/ToolController.js

@@ -21,13 +21,13 @@ export default class ToolController {
         this.primaryToolGroup = primaryToolGroup;
         const panZoomTool = new PanZoom(editor, PanZoomMode.TwoFingerTouchGestures | PanZoomMode.RightClickDrags, localization.touchPanTool);
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
-        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
+        const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 8 });
         const primaryTools = [
             // Three pens
             primaryPenTool,
             new Pen(editor, localization.penTool(2), { color: Color4.clay, thickness: 4 }),
-            // Highlighter-like pen with width=64
-            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 64 }, makePressureSensitiveFreehandLineBuilder),
+            // Highlighter-like pen with width=40
+            new Pen(editor, localization.penTool(3), { color: Color4.ofRGBA(1, 1, 0, 0.5), thickness: 40 }, makePressureSensitiveFreehandLineBuilder),
             new Eraser(editor, localization.eraserTool),
             new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),

package/dist/src/types.d.ts

@@ -129,8 +129,8 @@ export interface ToolbarDropdownShownEvent {
     readonly parentWidget: BaseWidget;
 }
 export type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
-export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
-export type ComponentAddedListener = (component: AbstractComponent) => void;
+export type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null | void;
+export type ComponentAddedListener = (component: AbstractComponent) => Promise<void> | void;
 export type OnDetermineExportRectListener = (exportRect: Rect2) => void;
 export interface ImageLoader {
     start(onAddComponent: ComponentAddedListener, onProgressListener: OnProgressListener, onDetermineExportRect?: OnDetermineExportRectListener): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.11.2",
+	"version": "0.12.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"main": "./dist/src/lib.d.ts",
 	"types": "./dist/src/lib.js",

package/src/Color4.ts

@@ -176,5 +176,6 @@ export default class Color4 {
 	public static yellow = Color4.ofRGB(1, 1, 0.1);
 	public static clay = Color4.ofRGB(0.8, 0.4, 0.2);
 	public static black = Color4.ofRGB(0, 0, 0);
+	public static gray = Color4.ofRGB(0.5, 0.5, 0.5);
 	public static white = Color4.ofRGB(1, 1, 1);
 }

package/src/Editor.ts

@@ -292,8 +292,7 @@ export class Editor {
 		const toolbar = new HTMLToolbar(this, this.container, this.localization);
 
 		if (defaultLayout) {
-			toolbar.addDefaultToolWidgets();
-			toolbar.addDefaultActionButtons();
+			toolbar.addDefaults();
 		}
 
 		return toolbar;
@@ -946,8 +945,8 @@ export class Editor {
 		this.showLoadingWarning(0);
 		this.display.setDraftMode(true);
 
-		await loader.start((component) => {
-			this.dispatchNoAnnounce(EditorImage.addElement(component));
+		await loader.start(async (component) => {
+			await this.dispatchNoAnnounce(EditorImage.addElement(component));
 		}, (countProcessed: number, totalToProcess: number) => {
 			if (countProcessed % 500 === 0) {
 				this.showLoadingWarning(countProcessed / totalToProcess);

package/src/EditorImage.ts

@@ -320,17 +320,7 @@ export class ImageNode {
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
 		} else {
-			this.bbox = Rect2.empty;
-			let isFirst = true;
-
-			for (const child of this.children) {
-				if (isFirst) {
-					this.bbox = child.getBBox();
-					isFirst = false;
-				} else {
-					this.bbox = this.bbox.union(child.getBBox());
-				}
-			}
+			this.bbox = Rect2.union(...this.children.map(child => child.getBBox()));
 		}
 
 		if (bubbleUp && !oldBBox.eq(this.bbox)) {

package/src/SVGLoader.ts

@@ -156,7 +156,7 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	// Adds a stroke with a single path
-	private addPath(node: SVGPathElement) {
+	private async addPath(node: SVGPathElement) {
 		let elem: AbstractComponent;
 		try {
 			const strokeData = this.strokeDataFromElem(node);
@@ -181,7 +181,7 @@ export default class SVGLoader implements ImageLoader {
 				return;
 			}
 		}
-		this.onAddComponent?.(elem);
+		await this.onAddComponent?.(elem);
 	}
 
 	// If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
@@ -274,10 +274,10 @@ export default class SVGLoader implements ImageLoader {
 		return result;
 	}
 
-	private addText(elem: SVGTextElement|SVGTSpanElement) {
+	private async addText(elem: SVGTextElement|SVGTSpanElement) {
 		try {
 			const textElem = this.makeText(elem);
-			this.onAddComponent?.(textElem);
+			await this.onAddComponent?.(textElem);
 		} catch (e) {
 			console.error('Invalid text object in node', elem, '. Continuing.... Error:', e);
 			this.addUnknownNode(elem);
@@ -300,17 +300,17 @@ export default class SVGLoader implements ImageLoader {
 				new Set([ 'transform' ])
 			);
 
-			this.onAddComponent?.(imageElem);
+			await this.onAddComponent?.(imageElem);
 		} catch (e) {
 			console.error('Error loading image:', e, '. Element: ', elem, '. Continuing...');
-			this.addUnknownNode(elem);
+			await this.addUnknownNode(elem);
 		}
 	}
 
-	private addUnknownNode(node: SVGElement) {
+	private async addUnknownNode(node: SVGElement) {
 		if (this.storeUnknown) {
 			const component = new UnknownSVGObject(node);
-			this.onAddComponent?.(component);
+			await this.onAddComponent?.(component);
 		}
 	}
 
@@ -335,9 +335,9 @@ export default class SVGLoader implements ImageLoader {
 		this.onDetermineExportRect?.(this.rootViewBox);
 	}
 
-	private updateSVGAttrs(node: SVGSVGElement) {
+	private async updateSVGAttrs(node: SVGSVGElement) {
 		if (this.storeUnknown) {
-			this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
+			await this.onAddComponent?.(new SVGGlobalAttributesObject(this.getSourceAttrs(node)));
 		}
 	}
 
@@ -350,10 +350,10 @@ export default class SVGLoader implements ImageLoader {
 			// Continue -- visit the node's children.
 			break;
 		case 'path':
-			this.addPath(node as SVGPathElement);
+			await this.addPath(node as SVGPathElement);
 			break;
 		case 'text':
-			this.addText(node as SVGTextElement);
+			await this.addText(node as SVGTextElement);
 			visitChildren = false;
 			break;
 		case 'image':
@@ -367,7 +367,7 @@ export default class SVGLoader implements ImageLoader {
 			this.updateSVGAttrs(node as SVGSVGElement);
 			break;
 		case 'style':
-			this.addUnknownNode(node as SVGStyleElement);
+			await this.addUnknownNode(node as SVGStyleElement);
 			break;
 		default:
 			console.warn('Unknown SVG element,', node);
@@ -377,7 +377,7 @@ export default class SVGLoader implements ImageLoader {
 				);
 			}
 
-			this.addUnknownNode(node as SVGElement);
+			await this.addUnknownNode(node as SVGElement);
 			return;
 		}
 

package/src/components/AbstractComponent.ts

@@ -78,6 +78,25 @@ export default abstract class AbstractComponent {
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 
+	public intersectsRect(rect: Rect2): boolean {
+		// If this component intersects rect,
+		// it is either contained entirely within rect or intersects one of rect's edges.
+
+		// If contained within,
+		if (rect.containsRect(this.getBBox())) {
+			return true;
+		}
+
+		// Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+		// As such, test with more lines than just the rect's edges.
+		const testLines = [];
+		for (const subregion of rect.divideIntoGrid(2, 2)) {
+			testLines.push(...subregion.getEdges());
+		}
+
+		return testLines.some(edge => this.intersects(edge));
+	}
+
 	// Return null iff this object cannot be safely serialized/deserialized.
 	protected abstract serializeToJSON(): any[]|Record<string, any>|number|string|null;
 

package/src/math/Rect2.test.ts

@@ -46,6 +46,28 @@ describe('Rect2', () => {
 		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
 	});
 
+	it('should handle empty unions', () => {
+		expect(Rect2.union()).toStrictEqual(Rect2.empty);
+	});
+
+	it('should correctly union multiple rectangles', () => {
+		expect(Rect2.union(new Rect2(0, 0, 1, 1), new Rect2(1, 1, 2, 2))).objEq(
+			new Rect2(0, 0, 3, 3)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, 1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, 0, 4, 10.1)
+		);
+
+		expect(
+			Rect2.union(new Rect2(-1, 0, 1, 1), new Rect2(1, -11.1, 2, 2), new Rect2(1, 10, 1, 0.1))
+		).objEq(
+			new Rect2(-1, -11.1, 4, 21.2)
+		);
+	});
+
 	it('should contain points that are within a rectangle', () => {
 		expect(new Rect2(-1, -1, 2, 2).containsPoint(Vec2.zero)).toBe(true);
 		expect(new Rect2(-1, -1, 0, 0).containsPoint(Vec2.zero)).toBe(false);

package/src/math/Rect2.ts

@@ -278,6 +278,32 @@ export default class Rect2 {
 		);
 	}
 
+	// @returns a rectangle that contains all of the given rectangles, the bounding box
+	//     of the given rectangles.
+	public static union(...rects: Rect2[]): Rect2 {
+		if (rects.length === 0) {
+			return Rect2.empty;
+		}
+
+		const firstRect = rects[0];
+		let minX: number = firstRect.topLeft.x;
+		let minY: number = firstRect.topLeft.y;
+		let maxX: number = firstRect.bottomRight.x;
+		let maxY: number = firstRect.bottomRight.y;
+
+		for (let i = 1; i < rects.length; i++) {
+			const rect = rects[i];
+			minX = Math.min(minX, rect.topLeft.x);
+			minY = Math.min(minY, rect.topLeft.y);
+			maxX = Math.max(maxX, rect.bottomRight.x);
+			maxY = Math.max(maxY, rect.bottomRight.y);
+		}
+
+		return new Rect2(
+			minX, minY, maxX - minX, maxY - minY,
+		);
+	}
+
 	public static of(template: RectTemplate) {
 		const width = template.width ?? template.w ?? 0;
 		const height = template.height ?? template.h ?? 0;