js-draw 0.0.10 → 0.1.0

package/src/EditorImage.ts

@@ -1,10 +1,15 @@
 import Editor from './Editor';
-import AbstractRenderer from './rendering/AbstractRenderer';
+import AbstractRenderer from './rendering/renderers/AbstractRenderer';
 import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
 import Rect2 from './geometry/Rect2';
 import { EditorLocalization } from './localization';
+import RenderingCache from './rendering/caching/RenderingCache';
+
+export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
+	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
+};
 
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
@@ -20,7 +25,7 @@ export default class EditorImage {
 
 	// Returns the parent of the given element, if it exists.
 	public findParent(elem: AbstractComponent): ImageNode|null {
-		const candidates = this.root.getLeavesInRegion(elem.getBBox());
+		const candidates = this.root.getLeavesIntersectingRegion(elem.getBBox());
 		for (const candidate of candidates) {
 			if (candidate.getContent() === elem) {
 				return candidate;
@@ -29,25 +34,18 @@ export default class EditorImage {
 		return null;
 	}
 
-	private sortLeaves(leaves: ImageNode[]) {
-		leaves.sort((a, b) => a.getContent()!.zIndex - b.getContent()!.zIndex);
+	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
+		cache.render(screenRenderer, this.root, viewport);
 	}
 
-	public render(renderer: AbstractRenderer, viewport: Viewport, minFraction: number = 0.001) {
-		// Don't render components that are < 0.1% of the viewport.
-		const leaves = this.root.getLeavesInRegion(viewport.visibleRect, minFraction);
-		this.sortLeaves(leaves);
-
-		for (const leaf of leaves) {
-			// Leaves by definition have content
-			leaf.getContent()!.render(renderer, viewport.visibleRect);
-		}
+	public render(renderer: AbstractRenderer, viewport: Viewport) {
+		this.root.render(renderer, viewport.visibleRect);
 	}
 
 	// Renders all nodes, even ones not within the viewport
 	public renderAll(renderer: AbstractRenderer) {
 		const leaves = this.root.getLeaves();
-		this.sortLeaves(leaves);
+		sortLeavesByZIndex(leaves);
 
 		for (const leaf of leaves) {
 			leaf.getContent()!.render(renderer, leaf.getBBox());
@@ -55,8 +53,9 @@ export default class EditorImage {
 	}
 
 	public getElementsIntersectingRegion(region: Rect2): AbstractComponent[] {
-		const leaves = this.root.getLeavesInRegion(region);
-		this.sortLeaves(leaves);
+		const leaves = this.root.getLeavesIntersectingRegion(region);
+		sortLeavesByZIndex(leaves);
+
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
@@ -100,15 +99,17 @@ export default class EditorImage {
 }
 
 export type AddElementCommand = typeof EditorImage.AddElementCommand.prototype;
+type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
-
+// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
 export class ImageNode {
 	private content: AbstractComponent|null;
 	private bbox: Rect2;
 	private children: ImageNode[];
 	private targetChildCount: number = 30;
-	private minZIndex: number|null;
-	private maxZIndex: number|null;
+
+	private id: number;
+	private static idCounter: number = 0;
 
 	public constructor(
 		private parent: ImageNode|null = null
@@ -117,8 +118,15 @@ export class ImageNode {
 		this.bbox = Rect2.empty;
 		this.content = null;
 
-		this.minZIndex = null;
-		this.maxZIndex = null;
+		this.id = ImageNode.idCounter++;
+	}
+
+	public getId() {
+		return this.id;
+	}
+
+	public onContentChange() {
+		this.id = ImageNode.idCounter++;
 	}
 
 	public getContent(): AbstractComponent|null {
@@ -129,18 +137,25 @@ export class ImageNode {
 		return this.parent;
 	}
 
-	private getChildrenInRegion(region: Rect2): ImageNode[] {
+	public getChildrenInRegion(region: Rect2): ImageNode[] {
 		return this.children.filter(child => {
 			return child.getBBox().intersects(region);
 		});
 	}
 
+	public getChildrenOrSelfIntersectingRegion(region: Rect2): ImageNode[] {
+		if (this.content) {
+			return [this];
+		}
+		return this.getChildrenInRegion(region);
+	}
+
 	// Returns a list of `ImageNode`s with content (and thus no children).
-	public getLeavesInRegion(region: Rect2, minFractionOfRegion: number = 0): ImageNode[] {
+	public getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[] {
 		const result: ImageNode[] = [];
 
 		// Don't render if too small
-		if (this.bbox.maxDimension / region.maxDimension <= minFractionOfRegion) {
+		if (isTooSmall?.(this.bbox)) {
 			return [];
 		}
 
@@ -150,7 +165,7 @@ export class ImageNode {
 
 		const children = this.getChildrenInRegion(region);
 		for (const child of children) {
-			result.push(...child.getLeavesInRegion(region, minFractionOfRegion));
+			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
 		}
 
 		return result;
@@ -172,6 +187,8 @@ export class ImageNode {
 	}
 
 	public addLeaf(leaf: AbstractComponent): ImageNode {
+		this.onContentChange();
+
 		if (this.content === null && this.children.length === 0) {
 			this.content = leaf;
 			this.recomputeBBox(true);
@@ -239,12 +256,8 @@ export class ImageNode {
 		const oldBBox = this.bbox;
 		if (this.content !== null) {
 			this.bbox = this.content.getBBox();
-			this.minZIndex = this.content.zIndex;
-			this.maxZIndex = this.content.zIndex;
 		} else {
 			this.bbox = Rect2.empty;
-			this.minZIndex = null;
-			this.maxZIndex = null;
 			let isFirst = true;
 
 			for (const child of this.children) {
@@ -254,15 +267,6 @@ export class ImageNode {
 				} else {
 					this.bbox = this.bbox.union(child.getBBox());
 				}
-
-				this.minZIndex ??= child.minZIndex;
-				this.maxZIndex ??= child.maxZIndex;
-				if (child.minZIndex !== null && this.minZIndex !== null) {
-					this.minZIndex = Math.min(child.minZIndex, this.minZIndex);
-				}
-				if (child.maxZIndex !== null && this.maxZIndex !== null) {
-					this.maxZIndex = Math.max(child.maxZIndex, this.maxZIndex);
-				}
 			}
 		}
 
@@ -295,9 +299,6 @@ export class ImageNode {
 
 	// Remove this node and all of its children
 	public remove() {
-		this.minZIndex = null;
-		this.maxZIndex = null;
-
 		if (!this.parent) {
 			this.content = null;
 			this.children = [];
@@ -322,4 +323,15 @@ export class ImageNode {
 		this.parent = null;
 		this.children = [];
 	}
+
+	public render(renderer: AbstractRenderer, visibleRect: Rect2) {
+		// Don't render components that are < 0.1% of the viewport.
+		const leaves = this.getLeavesIntersectingRegion(visibleRect, rect => renderer.isTooSmallToRender(rect));
+		sortLeavesByZIndex(leaves);
+
+		for (const leaf of leaves) {
+			// Leaves by definition have content
+			leaf.getContent()!.render(renderer, visibleRect);
+		}
+	}
 }

package/src/SVGLoader.ts

@@ -5,8 +5,8 @@ import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import UnknownSVGObject from './components/UnknownSVGObject';
 import Path from './geometry/Path';
 import Rect2 from './geometry/Rect2';
-import { RenderablePathSpec, RenderingStyle } from './rendering/AbstractRenderer';
-import { ComponentAddedListener, ImageLoader, OnProgressListener } from './types';
+import { RenderablePathSpec, RenderingStyle } from './rendering/renderers/AbstractRenderer';
+import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 
 type OnFinishListener = ()=> void;
 
@@ -16,6 +16,8 @@ export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 export default class SVGLoader implements ImageLoader {
 	private onAddComponent: ComponentAddedListener|null = null;
 	private onProgress: OnProgressListener|null = null;
+	private onDetermineExportRect: OnDetermineExportRectListener|null = null;
+
 	private processedCount: number = 0;
 	private totalToProcess: number = 0;
 	private rootViewBox: Rect2|null;
@@ -126,6 +128,7 @@ export default class SVGLoader implements ImageLoader {
 		}
 
 		this.rootViewBox = new Rect2(x, y, width, height);
+		this.onDetermineExportRect?.(this.rootViewBox);
 	}
 
 	private updateSVGAttrs(node: SVGSVGElement) {
@@ -172,10 +175,12 @@ export default class SVGLoader implements ImageLoader {
 	}
 
 	public async start(
-		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener
-	): Promise<Rect2> {
+		onAddComponent: ComponentAddedListener, onProgress: OnProgressListener,
+		onDetermineExportRect: OnDetermineExportRectListener|null = null
+	): Promise<void> {
 		this.onAddComponent = onAddComponent;
 		this.onProgress = onProgress;
+		this.onDetermineExportRect = onDetermineExportRect;
 
 		// Estimate the number of tags to process.
 		this.totalToProcess = this.source.childElementCount;
@@ -185,14 +190,12 @@ export default class SVGLoader implements ImageLoader {
 		await this.visit(this.source);
 
 		const viewBox = this.rootViewBox;
-		let result = defaultSVGViewRect;
 
-		if (viewBox) {
-			result = Rect2.of(viewBox);
+		if (!viewBox) {
+			this.onDetermineExportRect?.(defaultSVGViewRect);
 		}
 
 		this.onFinish?.();
-		return result;
 	}
 
 	// TODO: Handling unsafe data! Tripple-check that this is secure!

package/src/Viewport.ts

@@ -118,12 +118,20 @@ export class Viewport {
 		return this.transform;
 	}
 
+	public getResolution(): Vec2 {
+		return this.screenRect.size;
+	}
+
 	// Returns the amount a vector on the canvas is scaled to become a vector on the screen.
 	public getScaleFactor(): number {
 		// Use transformVec3 to avoid translating the vector
 		return this.transform.transformVec3(Vec3.unitX).magnitude();
 	}
 
+	public getSizeOfPixelOnCanvas(): number {
+		return 1/this.getScaleFactor();
+	}
+
 	// Returns the angle of the canvas in radians
 	public getRotationAngle(): number {
 		return this.transform.transformVec3(Vec3.unitX).angle();
@@ -158,6 +166,54 @@ export class Viewport {
 	public roundPoint(point: Point2): Point2 {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
+
+	// Returns a Command that transforms the view such that [rect] is visible, and perhaps
+	// centered in the viewport.
+	// Returns null if no transformation is necessary
+	public zoomTo(toMakeVisible: Rect2): Command {
+		let transform = Mat33.identity;
+
+		// Try to move the selection within the center 2/3rds of the viewport.
+		const recomputeTargetRect = () => {
+			// transform transforms objects on the canvas. As such, we need to invert it
+			// to transform the viewport.
+			const visibleRect = this.visibleRect.transformedBoundingBox(transform.inverse());
+			return visibleRect.transformedBoundingBox(Mat33.scaling2D(2 / 3, visibleRect.center));
+		};
+
+		let targetRect = recomputeTargetRect();
+		const largerThanTarget = targetRect.w < toMakeVisible.w || targetRect.h < toMakeVisible.h;
+
+		// Ensure that toMakeVisible is at least 1/8th of the visible region.
+		const muchSmallerThanTarget = toMakeVisible.maxDimension / targetRect.maxDimension < 0.125;
+
+		if (largerThanTarget || muchSmallerThanTarget) {
+			// If larger than the target, ensure that the longest axis is visible.
+			// If smaller, shrink the visible rectangle as much as possible
+			const multiplier = (largerThanTarget ? Math.max : Math.min)(
+				toMakeVisible.w / targetRect.w, toMakeVisible.h / targetRect.h
+			);
+			const visibleRectTransform = Mat33.scaling2D(multiplier, targetRect.topLeft);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			transform = transform.rightMul(viewportContentTransform);
+		}
+
+		targetRect = recomputeTargetRect();
+
+		// Ensure that the center of the region is visible
+		if (!targetRect.containsRect(toMakeVisible)) {
+			// target position - current position
+			const translation = toMakeVisible.center.minus(targetRect.center);
+			const visibleRectTransform = Mat33.translation(translation);
+			const viewportContentTransform = visibleRectTransform.inverse();
+
+			transform = transform.rightMul(viewportContentTransform);
+		}
+		
+
+		return new Viewport.ViewportTransform(transform);
+	}
 }
 
 export namespace Viewport { // eslint-disable-line

package/src/components/AbstractComponent.ts

@@ -4,13 +4,13 @@ import EditorImage from '../EditorImage';
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
 export default abstract class AbstractComponent {
 	protected lastChangedTime: number;
 	protected abstract contentBBox: Rect2;
-	public zIndex: number;
+	private zIndex: number;
 
 	// Topmost z-index
 	private static zIndexCounter: number = 0;
@@ -20,6 +20,10 @@ export default abstract class AbstractComponent {
 		this.zIndex = AbstractComponent.zIndexCounter++;
 	}
 
+	public getZIndex(): number {
+		return this.zIndex;
+	}
+
 	public getBBox(): Rect2 {
 		return this.contentBBox;
 	}

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/Stroke.ts

@@ -2,7 +2,7 @@ import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Path from '../geometry/Path';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderablePathSpec, RenderingStyle } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/UnknownSVGObject.ts

@@ -1,8 +1,8 @@
 import LineSegment2 from '../geometry/LineSegment2';
 import Mat33 from '../geometry/Mat33';
 import Rect2 from '../geometry/Rect2';
-import AbstractRenderer from '../rendering/AbstractRenderer';
-import SVGRenderer from '../rendering/SVGRenderer';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
 

package/src/components/builders/ArrowBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/FreehandLineBuilder.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/AbstractRenderer';
+import AbstractRenderer, { RenderingStyle, RenderablePathSpec } from '../../rendering/renderers/AbstractRenderer';
 import { Point2, Vec2 } from '../../geometry/Vec2';
 import Rect2 from '../../geometry/Rect2';
 import { PathCommand, PathCommandType } from '../../geometry/Path';

package/src/components/builders/LineBuilder.ts

@@ -1,6 +1,6 @@
 import { PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/RectangleBuilder.ts

@@ -1,6 +1,6 @@
 import Path from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/components/builders/types.ts

@@ -1,5 +1,5 @@
 import Rect2 from '../../geometry/Rect2';
-import AbstractRenderer from '../../rendering/AbstractRenderer';
+import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import Viewport from '../../Viewport';
 import AbstractComponent from '../AbstractComponent';

package/src/geometry/Mat33.ts

@@ -7,6 +7,9 @@ import Vec3 from './Vec3';
 export default class Mat33 {
 	private readonly rows: Vec3[];
 
+	// ⎡ a1 a2 a3 ⎤
+	// ⎢ b1 b2 b3 ⎥
+	// ⎣ c1 c2 c3 ⎦
 	public constructor(
 		public readonly a1: number,
 		public readonly a2: number,

package/src/geometry/Path.toString.test.ts

@@ -19,13 +19,23 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.100001, 0.199999), [
+		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.400002),
+				endPoint: Vec2.of(0.000300001, 1.40000002),
 			},
 		]);
 		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
 	});
+
+	it('should not remove trailing zeroes before decimal points', () => {
+		const path = new Path(Vec2.of(1000, 2_000_000), [
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(30.0001, 40.000000001),
+			},
+		]);
+		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
+	});
 });

package/src/geometry/Path.ts

@@ -1,5 +1,5 @@
 import { Bezier } from 'bezier-js';
-import { RenderingStyle, RenderablePathSpec } from '../rendering/AbstractRenderer';
+import { RenderingStyle, RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import LineSegment2 from './LineSegment2';
 import Mat33 from './Mat33';
 import Rect2 from './Rect2';
@@ -288,8 +288,8 @@ export default class Path {
 		const toRoundedString = (num: number): string => {
 			// Try to remove rounding errors. If the number ends in at least three/four zeroes
 			// (or nines) just one or two digits, it's probably a rounding error.
-			const fixRoundingUpExp = /^([-]?\d*\.?\d*[1-9.])0{4,}\d$/;
-			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d*9{4,}\d)$/;
+			const fixRoundingUpExp = /^([-]?\d*\.\d{3,})0{4,}\d$/;
+			const hasRoundingDownExp = /^([-]?)(\d*)\.(\d{3,}9{4,}\d)$/;
 
 			let text = num.toString();
 			if (text.indexOf('.') === -1) {
@@ -314,7 +314,11 @@ export default class Path {
 			}
 
 			text = text.replace(fixRoundingUpExp, '$1');
-			// Remove trailing period (if it exists)
+
+			// Remove trailing zeroes
+			text = text.replace(/([.][^0]*)0+$/, '$1');
+
+			// Remove trailing period
 			return text.replace(/[.]$/, '');
 		};
 

package/src/geometry/Rect2.test.ts

@@ -6,8 +6,8 @@ import Mat33 from './Mat33';
 
 loadExpectExtensions();
 
-describe('Rect2 tests', () => {
-	it('Positive width, height', () => {
+describe('Rect2', () => {
+	it('width, height should always be positive', () => {
 		expect(new Rect2(-1, -2, -3, 4)).objEq(new Rect2(-4, -2, 3, 4));
 		expect(new Rect2(0, 0, 0, 0).size).objEq(Vec2.zero);
 		expect(Rect2.fromCorners(
@@ -19,7 +19,7 @@ describe('Rect2 tests', () => {
 		));
 	});
 
-	it('Bounding box', () => {
+	it('bounding boxes should be correctly computed', () => {
 		expect(Rect2.bboxOf([
 			Vec2.zero,
 		])).objEq(Rect2.empty);
@@ -42,14 +42,14 @@ describe('Rect2 tests', () => {
 		));
 	});
 
-	it('"union"ing', () => {
+	it('"union"s should contain both composite rectangles.', () => {
 		expect(new Rect2(0, 0, 1, 1).union(new Rect2(1, 1, 2, 2))).objEq(
 			new Rect2(0, 0, 3, 3)
 		);
 		expect(Rect2.empty.union(Rect2.empty)).objEq(Rect2.empty);
 	});
 
-	it('contains', () => {
+	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);
 		expect(new Rect2(1, 2, 3, 4).containsRect(Rect2.empty)).toBe(false);
@@ -67,14 +67,15 @@ describe('Rect2 tests', () => {
 		expect(Rect2.empty.containsRect(new Rect2(-1, -1, 3, 3))).toBe(false);
 	});
 
-	it('Intersection testing', () => {
+	it('intersecting rectangles should be identified as intersecting', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersects(Rect2.empty)).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 1, 1))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0, 0, 10, 10))).toBe(true);
 		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(3, 3, 10, 10))).toBe(false);
+		expect(new Rect2(-1, -1, 2, 2).intersects(new Rect2(0.2, 0.1, 0, 0))).toBe(true);
 	});
 
-	it('Computing intersections', () => {
+	it('intersecting rectangles should have their intersections correctly computed', () => {
 		expect(new Rect2(-1, -1, 2, 2).intersection(Rect2.empty)).objEq(Rect2.empty);
 		expect(new Rect2(-1, -1, 2, 2).intersection(new Rect2(0, 0, 3, 3))).objEq(
 			new Rect2(0, 0, 1, 1)
@@ -93,7 +94,7 @@ describe('Rect2 tests', () => {
 		expect(transformedBBox.containsRect(rect)).toBe(true);
 	});
 
-	describe('Grown to include a point', () => {
+	describe('should correctly expand to include a given point', () => {
 		it('Growing an empty rectange to include (1, 0)', () => {
 			const originalRect = Rect2.empty;
 			const grownRect = originalRect.grownToPoint(Vec2.unitX);
@@ -118,4 +119,33 @@ describe('Rect2 tests', () => {
 			expect(grown).objEq(new Rect2(0, 0, 2, 2));
 		});
 	});
+
+	describe('divideIntoGrid', () => {
+		it('division of unit square', () => {
+			expect(Rect2.unitSquare.divideIntoGrid(2, 2)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.5, 0.5), new Rect2(0.5, 0, 0.5, 0.5),
+					new Rect2(0, 0.5, 0.5, 0.5), new Rect2(0.5, 0.5, 0.5, 0.5),
+				]
+			);
+			expect(Rect2.unitSquare.divideIntoGrid(0, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(100, 0).length).toBe(0);
+			expect(Rect2.unitSquare.divideIntoGrid(4, 1)).toMatchObject(
+				[
+					new Rect2(0, 0, 0.25, 1), new Rect2(0.25, 0, 0.25, 1),
+					new Rect2(0.5, 0, 0.25, 1), new Rect2(0.75, 0, 0.25, 1),
+				]
+			);
+		});
+		it('division of translated square', () => {
+			expect(new Rect2(3, -3, 4, 4).divideIntoGrid(2, 1)).toMatchObject(
+				[
+					new Rect2(3, -3, 2, 4), new Rect2(5, -3, 2, 4),
+				]
+			);
+		});
+		it('division of empty square', () => {
+			expect(Rect2.empty.divideIntoGrid(1000, 10000).length).toBe(1);
+		});
+	});
 });

package/src/geometry/Rect2.ts

@@ -71,7 +71,7 @@ export default class Rect2 {
 	}
 
 	// Returns the overlap of this and [other], or null, if no such
-	// /         overlap exists
+	//          overlap exists
 	public intersection(other: Rect2): Rect2|null {
 		const topLeft = this.topLeft.zip(other.topLeft, Math.max);
 		const bottomRight = this.bottomRight.zip(other.bottomRight, Math.min);
@@ -97,6 +97,37 @@ export default class Rect2 {
 		);
 	}
 
+	// Returns a the subdivision of this into [columns] columns
+	// and [rows] rows. For example,
+	//	 Rect2.unitSquare.divideIntoGrid(2, 2)
+	//		-> [ Rect2(0, 0, 0.5, 0.5), Rect2(0.5, 0, 0.5, 0.5), Rect2(0, 0.5, 0.5, 0.5), Rect2(0.5, 0.5, 0.5, 0.5) ]
+	// The rectangles are ordered in row-major order.
+	public divideIntoGrid(columns: number, rows: number): Rect2[] {
+		const result: Rect2[] = [];
+		if (columns <= 0 || rows <= 0) {
+			return result;
+		}
+
+		const eachRectWidth = this.w / columns;
+		const eachRectHeight = this.h / rows;
+
+		if (eachRectWidth === 0) {
+			columns = 1;
+		}
+		if (eachRectHeight === 0) {
+			rows = 1;
+		}
+
+		for (let j = 0; j < rows; j++) {
+			for (let i = 0; i < columns; i++) {
+				const x = eachRectWidth * i + this.x;
+				const y = eachRectHeight * j + this.y;
+				result.push(new Rect2(x, y, eachRectWidth, eachRectHeight));
+			}
+		}
+		return result;
+	}
+
 	// Returns a rectangle containing this and [point].
 	// [margin] is the minimum distance between the new point and the edge
 	// of the resultant rectangle.