js-draw 0.3.0 → 0.3.1

package/dist/src/tools/BaseTool.js

@@ -48,4 +48,10 @@ export default class BaseTool {
         }
         this.group = group;
     }
+    getToolGroup() {
+        if (this.group) {
+            return this.group;
+        }
+        return null;
+    }
 }

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

@@ -1,7 +1,7 @@
 import Color4 from '../Color4';
 import Editor from '../Editor';
 import Pointer from '../Pointer';
-import { PointerEvt, StrokeDataPoint } from '../types';
+import { KeyPressEvent, PointerEvt, StrokeDataPoint } from '../types';
 import BaseTool from './BaseTool';
 import { ComponentBuilder, ComponentBuilderFactory } from '../components/builders/types';
 export interface PenStyle {
@@ -30,4 +30,5 @@ export default class Pen extends BaseTool {
     getThickness(): number;
     getColor(): Color4;
     getStrokeFactory(): ComponentBuilderFactory;
+    onKeyPress({ key }: KeyPressEvent): boolean;
 }

package/dist/src/tools/Pen.js

@@ -121,4 +121,20 @@ export default class Pen extends BaseTool {
     getThickness() { return this.style.thickness; }
     getColor() { return this.style.color; }
     getStrokeFactory() { return this.builderFactory; }
+    onKeyPress({ key }) {
+        key = key.toLowerCase();
+        let newThickness;
+        if (key === '-' || key === '_') {
+            newThickness = this.getThickness() * 2 / 3;
+        }
+        else if (key === '+' || key === '=') {
+            newThickness = this.getThickness() * 3 / 2;
+        }
+        if (newThickness !== undefined) {
+            newThickness = Math.min(Math.max(1, newThickness), 128);
+            this.setThickness(newThickness);
+            return true;
+        }
+        return false;
+    }
 }

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

@@ -11,6 +11,7 @@ export default class ToolController {
     constructor(editor: Editor, localization: ToolLocalization);
     setTools(tools: BaseTool[], primaryToolGroup?: ToolEnabledGroup): void;
     addPrimaryTool(tool: BaseTool): void;
+    getPrimaryTools(): BaseTool[];
     addTool(tool: BaseTool): void;
     dispatchInputEvent(event: InputEvt): boolean;
     getMatchingTools<Type extends BaseTool>(type: new (...args: any[]) => Type): Type[];

package/dist/src/tools/ToolController.js

@@ -8,6 +8,7 @@ import Color4 from '../Color4';
 import UndoRedoShortcut from './UndoRedoShortcut';
 import TextTool from './TextTool';
 import PipetteTool from './PipetteTool';
+import ToolSwitcherShortcut from './ToolSwitcherShortcut';
 export default class ToolController {
     /** @internal */
     constructor(editor, localization) {
@@ -18,13 +19,13 @@ export default class ToolController {
         const keyboardPanZoomTool = new PanZoom(editor, PanZoomMode.Keyboard, localization.keyboardPanZoom);
         const primaryPenTool = new Pen(editor, localization.penTool(1), { color: Color4.purple, thickness: 16 });
         const primaryTools = [
-            new SelectionTool(editor, localization.selectionTool),
-            new Eraser(editor, localization.eraserTool),
             // 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 }),
+            new Eraser(editor, localization.eraserTool),
+            new SelectionTool(editor, localization.selectionTool),
             new TextTool(editor, localization.textTool, localization),
         ];
         this.tools = [
@@ -33,6 +34,7 @@ export default class ToolController {
             ...primaryTools,
             keyboardPanZoomTool,
             new UndoRedoShortcut(editor),
+            new ToolSwitcherShortcut(editor),
         ];
         primaryTools.forEach(tool => tool.setToolGroup(primaryToolGroup));
         panZoomTool.setEnabled(true);
@@ -64,6 +66,11 @@ export default class ToolController {
         }
         this.addTool(tool);
     }
+    getPrimaryTools() {
+        return this.tools.filter(tool => {
+            return tool.getToolGroup() === this.primaryToolGroup;
+        });
+    }
     // Add a tool to the end of this' tool list (the added tool receives events after tools already added to this).
     // This should be called before creating the app's toolbar.
     addTool(tool) {

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

@@ -0,0 +1,8 @@
+import Editor from '../Editor';
+import { KeyPressEvent } from '../types';
+import BaseTool from './BaseTool';
+export default class ToolSwitcherShortcut extends BaseTool {
+    private editor;
+    constructor(editor: Editor);
+    onKeyPress({ key }: KeyPressEvent): boolean;
+}

package/dist/src/tools/ToolSwitcherShortcut.js

@@ -0,0 +1,26 @@
+// Handles ctrl+1, ctrl+2, ctrl+3, ..., shortcuts for switching tools.
+// @packageDocumentation
+import BaseTool from './BaseTool';
+// {@inheritDoc ToolSwitcherShortcut!}
+export default class ToolSwitcherShortcut extends BaseTool {
+    constructor(editor) {
+        super(editor.notifier, editor.localization.changeTool);
+        this.editor = editor;
+    }
+    onKeyPress({ key }) {
+        const toolController = this.editor.toolController;
+        const primaryTools = toolController.getPrimaryTools();
+        // Map keys 0-9 to primary tools.
+        const keyMatch = /^[0-9]$/.exec(key);
+        let targetTool;
+        if (keyMatch) {
+            const targetIdx = parseInt(keyMatch[0], 10) - 1;
+            targetTool = primaryTools[targetIdx];
+        }
+        if (targetTool) {
+            targetTool.setEnabled(true);
+            return true;
+        }
+        return false;
+    }
+}

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

@@ -5,6 +5,7 @@ export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool, PenStyle } from './Pen';
 export { default as TextTool } from './TextTool';

package/dist/src/tools/lib.js

@@ -5,6 +5,7 @@ export { default as BaseTool } from './BaseTool';
 export { default as ToolController } from './ToolController';
 export { default as ToolEnabledGroup } from './ToolEnabledGroup';
 export { default as UndoRedoShortcut } from './UndoRedoShortcut';
+export { default as ToolSwitcherShortcut } from './ToolSwitcherShortcut';
 export { default as PanZoomTool, PanZoomMode } from './PanZoom';
 export { default as PenTool } from './Pen';
 export { default as TextTool } from './TextTool';

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

@@ -10,6 +10,7 @@ export interface ToolLocalization {
     rightClickDragPanTool: string;
     textTool: string;
     enterTextToInsert: string;
+    changeTool: string;
     toolEnabledAnnouncement: (toolName: string) => string;
     toolDisabledAnnouncement: (toolName: string) => string;
 }

package/dist/src/tools/localization.js

@@ -10,6 +10,7 @@ export const defaultToolLocalization = {
     keyboardPanZoom: 'Keyboard pan/zoom shortcuts',
     textTool: 'Text',
     enterTextToInsert: 'Text to insert',
+    changeTool: 'Change tool',
     toolEnabledAnnouncement: (toolName) => `${toolName} enabled`,
     toolDisabledAnnouncement: (toolName) => `${toolName} disabled`,
 };

package/dist/src/types.d.ts

@@ -8,6 +8,7 @@ import Rect2 from './math/Rect2';
 import Pointer from './Pointer';
 import Color4 from './Color4';
 import Command from './commands/Command';
+import { BaseWidget } from './lib';
 export interface PointerEvtListener {
     onPointerDown(event: PointerEvt): boolean;
     onPointerMove(event: PointerEvt): void;
@@ -68,7 +69,8 @@ export declare enum EditorEventType {
     ViewportChanged = 7,
     DisplayResized = 8,
     ColorPickerToggled = 9,
-    ColorPickerColorSelected = 10
+    ColorPickerColorSelected = 10,
+    ToolbarDropdownShown = 11
 }
 declare type EditorToolEventType = EditorEventType.ToolEnabled | EditorEventType.ToolDisabled | EditorEventType.ToolUpdated;
 export interface EditorToolEvent {
@@ -109,7 +111,11 @@ export interface ColorPickerColorSelected {
     readonly kind: EditorEventType.ColorPickerColorSelected;
     readonly color: Color4;
 }
-export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected;
+export interface ToolbarDropdownShownEvent {
+    readonly kind: EditorEventType.ToolbarDropdownShown;
+    readonly parentWidget: BaseWidget;
+}
+export declare type EditorEventDataType = EditorToolEvent | EditorObjectEvent | EditorViewportChangedEvent | DisplayResizedEvent | EditorUndoStackUpdated | CommandDoneEvent | CommandUndoneEvent | ColorPickerToggled | ColorPickerColorSelected | ToolbarDropdownShownEvent;
 export declare type OnProgressListener = (amountProcessed: number, totalToProcess: number) => Promise<void> | null;
 export declare type ComponentAddedListener = (component: AbstractComponent) => void;
 export declare type OnDetermineExportRectListener = (exportRect: Rect2) => void;

package/dist/src/types.js

@@ -22,4 +22,5 @@ export var EditorEventType;
     EditorEventType[EditorEventType["DisplayResized"] = 8] = "DisplayResized";
     EditorEventType[EditorEventType["ColorPickerToggled"] = 9] = "ColorPickerToggled";
     EditorEventType[EditorEventType["ColorPickerColorSelected"] = 10] = "ColorPickerColorSelected";
+    EditorEventType[EditorEventType["ToolbarDropdownShown"] = 11] = "ToolbarDropdownShown";
 })(EditorEventType || (EditorEventType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.3.0",
+	"version": "0.3.1",
 	"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",
@@ -72,7 +72,7 @@
 		"linter-precommit": "eslint --fix --ext .js --ext .ts",
 		"lint-staged": "lint-staged",
 		"prepare": "husky install && yarn build",
-		"prepack": "yarn build && pinst --disable",
+		"prepack": "yarn build && yarn test && pinst --disable",
 		"postpack": "pinst --enable"
 	},
 	"dependencies": {

package/src/components/Stroke.test.ts

@@ -64,6 +64,11 @@ describe('Stroke', () => {
 				"path": "m0,0 l10,10z"
 			}
 		]`);
+		const path = deserialized.getPath();
+
+		// Should cache the original string representation.
+		expect(deserialized.getPath().toString()).toBe('m0,0 l10,10z');
+		path['cachedStringVersion'] = null;
 		expect(deserialized.getPath().toString()).toBe('M0,0L10,10L0,0');
 	});
 });

package/src/components/Stroke.ts

@@ -9,7 +9,6 @@ import { ImageComponentLocalization } from './localization';
 
 interface StrokePart extends RenderablePathSpec {
 	path: Path;
-	bbox: Rect2;
 }
 
 export default class Stroke extends AbstractComponent {
@@ -19,7 +18,7 @@ export default class Stroke extends AbstractComponent {
 	public constructor(parts: RenderablePathSpec[]) {
 		super('stroke');
 
-		this.parts = parts.map(section => {
+		this.parts = parts.map((section): StrokePart => {
 			const path = Path.fromRenderable(section);
 			const pathBBox = this.bboxForPart(path.bbox, section.style);
 
@@ -31,7 +30,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path,
-				bbox: pathBBox,
 
 				// To implement RenderablePathSpec
 				startPoint: path.startPoint,
@@ -54,10 +52,19 @@ export default class Stroke extends AbstractComponent {
 	public render(canvas: AbstractRenderer, visibleRect?: Rect2): void {
 		canvas.startObject(this.getBBox());
 		for (const part of this.parts) {
-			const bbox = part.bbox;
-			if (!visibleRect || bbox.intersects(visibleRect)) {
-				canvas.drawPath(part);
+			const bbox = this.bboxForPart(part.path.bbox, part.style);
+			if (visibleRect) {
+				if (!bbox.intersects(visibleRect)) {
+					continue;
+				}
+
+				const muchBiggerThanVisible = bbox.size.x > visibleRect.size.x * 2 || bbox.size.y > visibleRect.size.y * 2;
+				if (muchBiggerThanVisible && !part.path.closedRoughlyIntersects(visibleRect)) {
+					continue;
+				}
 			}
+
+			canvas.drawPath(part);
 		}
 		canvas.endObject(this.getLoadSaveData());
 	}
@@ -89,7 +96,6 @@ export default class Stroke extends AbstractComponent {
 
 			return {
 				path: newPath,
-				bbox: newBBox,
 				startPoint: newPath.startPoint,
 				commands: newPath.parts,
 				style: part.style,

package/src/components/builders/FreehandLineBuilder.ts

@@ -12,9 +12,9 @@ import RenderingStyle from '../../rendering/RenderingStyle';
 
 export const makeFreehandLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
 	// Don't smooth if input is more than ± 7 pixels from the true curve, do smooth if
-	// less than ± 2 px from the curve.
+	// less than ±1 px from the curve.
 	const maxSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 7;
-	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas() * 2;
+	const minSmoothingDist = viewport.getSizeOfPixelOnCanvas();
 
 	return new FreehandLineBuilder(
 		initialPoint, minSmoothingDist, maxSmoothingDist
@@ -197,7 +197,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				return;
 			}
 
-			const width = Viewport.roundPoint(this.startPoint.width / 3.5, this.minFitAllowed);
+			const width = Viewport.roundPoint(this.startPoint.width / 3.5, Math.min(this.minFitAllowed, this.startPoint.width / 4));
 			const center = this.roundPoint(this.startPoint.pos);
 
 			// Start on the right, cycle clockwise:
@@ -492,7 +492,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 				const dist = proj.minus(point).magnitude();
 
 				const minFit = Math.max(
-					Math.min(this.curveStartWidth, this.curveEndWidth) / 2,
+					Math.min(this.curveStartWidth, this.curveEndWidth) / 3,
 					this.minFitAllowed
 				);
 				if (dist > minFit || dist > this.maxFitAllowed) {
@@ -503,7 +503,7 @@ export default class FreehandLineBuilder implements ComponentBuilder {
 		};
 
 		const approxCurveLen = controlPoint.minus(segmentStart).magnitude() + segmentEnd.minus(controlPoint).magnitude();
-		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 2) {
+		if (this.buffer.length > 3 && approxCurveLen > this.curveEndWidth / 3) {
 			if (!curveMatchesPoints(this.currentCurve)) {
 				// Use a curve that better fits the points
 				this.currentCurve = prevCurve;

package/src/math/LineSegment2.ts

@@ -126,6 +126,10 @@ export default class LineSegment2 {
 		};
 	}
 
+	public intersects(other: LineSegment2) {
+		return this.intersection(other) !== null;
+	}
+
 	// Returns the closest point on this to [target]
 	public closestPointTo(target: Point2) {
 		// Distance from P1 along this' direction.
@@ -144,4 +148,8 @@ export default class LineSegment2 {
 			return this.p1;
 		}
 	}
+
+	public toString() {
+		return `LineSegment(${this.p1.toString()}, ${this.p2.toString()})`;
+	}
 }

package/src/math/Path.test.ts

@@ -1,6 +1,7 @@
 import { Bezier } from 'bezier-js';
 import LineSegment2 from './LineSegment2';
 import Path, { PathCommandType } from './Path';
+import Rect2 from './Rect2';
 import { Vec2 } from './Vec2';
 
 describe('Path', () => {
@@ -93,4 +94,56 @@ describe('Path', () => {
 			y: 100,
 		});
 	});
+
+	describe('polylineApproximation', () => {
+		it('should approximate Bézier curves with polylines', () => {
+			const path = Path.fromString('m0,0 l4,4 Q 1,4 4,1z');
+
+			expect(path.polylineApproximation()).toMatchObject([
+				new LineSegment2(Vec2.of(0, 0), Vec2.of(4, 4)),
+				new LineSegment2(Vec2.of(4, 4), Vec2.of(1, 4)),
+				new LineSegment2(Vec2.of(1, 4), Vec2.of(4, 1)),
+				new LineSegment2(Vec2.of(4, 1), Vec2.of(0, 0)),
+			]);
+		});
+	});
+
+	describe('roughlyIntersectsClosed', () => {
+		it('small, line-only path', () => {
+			const path = Path.fromString('m0,0 l10,10 L0,10 z');
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(20, 20)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(Rect2.fromCorners(Vec2.zero, Vec2.of(2, 2)))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(10, 1, 1, 1))
+			).toBe(false);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(1, 5, 1, 1))
+			).toBe(true);
+		});
+
+		it('path with Bézier curves', () => {
+			const path = Path.fromString(`
+				M1090,2560
+				L1570,2620
+				Q1710,1300 1380,720
+				Q980,100 -460,-640
+				L-680,-200
+				Q670,470 960,980
+				Q1230,1370 1090,2560
+			`);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 500, 500))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(0, 0, 5, 5))
+			).toBe(true);
+			expect(
+				path.closedRoughlyIntersects(new Rect2(-10000, 0, 500, 500))
+			).toBe(false);
+		});
+	});
 });

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

@@ -42,13 +42,15 @@ describe('Path.toString', () => {
 			},
 		]);
 
-		expect(path.toString()).toBe('M1000,2000000L30.0001,40');
+		expect(path.toString()).toBe('M1000,2000000l-970-1999960');
 	});
 
 	it('deserialized path should serialize to the same/similar path, but with rounded components', () => {
 		const path1 = Path.fromString('M100,100 L101,101 Q102,102 90.000000001,89.99999999 Z');
+		path1['cachedStringVersion'] = null; // Clear the cache.
+
 		expect(path1.toString()).toBe([
-			'M100,100', 'L101,101', 'Q102,102 90,90', 'L100,100'
+			'M100,100', 'l1,1', 'q1,1 -11-11', 'l10,10'
 		].join(''));
 	});
 });

package/src/math/Path.ts

@@ -47,12 +47,9 @@ interface IntersectionResult {
 
 type GeometryArrayType = Array<LineSegment2|Bezier>;
 export default class Path {
-	private cachedGeometry: GeometryArrayType|null;
 	public readonly bbox: Rect2;
 
 	public constructor(public readonly startPoint: Point2, public readonly parts: PathCommand[]) {
-		this.cachedGeometry = null;
-
 		// Initial bounding box contains one point: the start point.
 		this.bbox = Rect2.bboxOf([startPoint]);
 
@@ -63,6 +60,8 @@ export default class Path {
 		}
 	}
 
+	private cachedGeometry: GeometryArrayType|null = null;
+
 	// Lazy-loads and returns this path's geometry
 	public get geometry(): Array<LineSegment2|Bezier> {
 		if (this.cachedGeometry) {
@@ -106,6 +105,41 @@ export default class Path {
 		return this.cachedGeometry;
 	}
 
+	private cachedPolylineApproximation: LineSegment2[]|null = null;
+
+	// Approximates this path with a group of line segments.
+	public polylineApproximation(): LineSegment2[] {
+		if (this.cachedPolylineApproximation) {
+			return this.cachedPolylineApproximation;
+		}
+
+		const points: Point2[] = [];
+
+		for (const part of this.parts) {
+			switch (part.kind) {
+			case PathCommandType.CubicBezierTo:
+				points.push(part.controlPoint1, part.controlPoint2, part.endPoint);
+				break;
+			case PathCommandType.QuadraticBezierTo:
+				points.push(part.controlPoint, part.endPoint);
+				break;
+			case PathCommandType.MoveTo:
+			case PathCommandType.LineTo:
+				points.push(part.point);
+				break;
+			}
+		}
+
+		const result: LineSegment2[] = [];
+		let prevPoint = this.startPoint;
+		for (const point of points) {
+			result.push(new LineSegment2(prevPoint, point));
+			prevPoint = point;
+		}
+
+		return result;
+	}
+
 	public static computeBBoxForSegment(startPoint: Point2, part: PathCommand): Rect2 {
 		const points = [startPoint];
 		let exhaustivenessCheck: never;
@@ -129,6 +163,10 @@ export default class Path {
 	}
 
 	public intersection(line: LineSegment2): IntersectionResult[] {
+		if (!line.bbox.intersects(this.bbox)) {
+			return [];
+		}
+
 		const result: IntersectionResult[] = [];
 		for (const part of this.geometry) {
 			if (part instanceof LineSegment2) {
@@ -229,6 +267,55 @@ export default class Path {
 		]);
 	}
 
+	// Treats this as a closed path and returns true if part of `rect` is roughly within
+	// this path's interior.
+	//
+	// Note: Assumes that this is a closed, non-self-intersecting path.
+	public closedRoughlyIntersects(rect: Rect2): boolean {
+		if (rect.containsRect(this.bbox)) {
+			return true;
+		}
+
+		// Choose a point outside of the path.
+		const startPt = this.bbox.topLeft.minus(Vec2.of(1, 1));
+		const testPts = rect.corners;
+		const polygon = this.polylineApproximation();
+
+		for (const point of testPts) {
+			const testLine = new LineSegment2(point, startPt);
+
+			let intersectionCount = 0;
+			for (const line of polygon) {
+				if (line.intersects(testLine)) {
+					intersectionCount ++;
+				}
+			}
+
+			// Odd? The point is within the polygon!
+			if (intersectionCount % 2 === 1) {
+				return true;
+			}
+		}
+
+		// Grow the rectangle for possible additional precision.
+		const grownRect = rect.grownBy(Math.min(rect.size.x, rect.size.y));
+		const edges = [];
+		for (const subrect of grownRect.divideIntoGrid(4, 4)) {
+			edges.push(...subrect.getEdges());
+		}
+
+		for (const edge of edges) {
+			for (const line of polygon) {
+				if (edge.intersects(line)) {
+					return true;
+				}
+			}
+		}
+
+		// Even? Probably no intersection.
+		return false;
+	}
+
 	// Returns a path that outlines [rect]. If [lineWidth] is not given, the resultant path is
 	// the outline of [rect]. Otherwise, the resultant path represents a line of width [lineWidth]
 	// that traces [rect].
@@ -273,6 +360,10 @@ export default class Path {
 	}
 
 	public static fromRenderable(renderable: RenderablePathSpec): Path {
+		if (renderable.path) {
+			return renderable.path;
+		}
+
 		return new Path(renderable.startPoint, renderable.commands);
 	}
 
@@ -281,18 +372,23 @@ export default class Path {
 			startPoint: this.startPoint,
 			style: fill,
 			commands: this.parts,
+			path: this,
 		};
 	}
 
+	private cachedStringVersion: string|null = null;
+
 	public toString(): string {
+		if (this.cachedStringVersion) {
+			return this.cachedStringVersion;
+		}
+
 		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-		//            If we're near (0, 0), it probably isn't worth it and if bounding boxes are large,
-		//            it also probably isn't worth it.
-		const makeRelativeCommands =
-			Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.size.x) < 2
-			&& Math.abs(this.bbox.topLeft.y) > 10 && Math.abs(this.bbox.size.y) < 2;
+		const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
 
-		return Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		this.cachedStringVersion = result;
+		return result;
 	}
 
 	public serialize(): string {
@@ -301,7 +397,7 @@ export default class Path {
 
 	// @param onlyAbsCommands - True if we should avoid converting absolute coordinates to relative offsets -- such
 	//   conversions can lead to smaller output strings, but also take time.
-	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands: boolean = true): string {
+	public static toString(startPoint: Point2, parts: PathCommand[], onlyAbsCommands?: boolean): string {
 		const result: string[] = [];
 
 		let prevPoint: Point2|undefined;
@@ -561,7 +657,9 @@ export default class Path {
 			}
 		}
 
-		return new Path(startPos ?? Vec2.zero, commands);
+		const result = new Path(startPos ?? Vec2.zero, commands);
+		result.cachedStringVersion = pathString;
+		return result;
 	}
 
 	public static empty: Path = new Path(Vec2.zero, []);

package/src/math/Rect2.ts

@@ -12,7 +12,7 @@ export interface RectTemplate {
 	height?: number;
 }
 
-// invariant: w > 0, h > 0.
+// invariant: w ≥ 0, h ≥ 0.
 export default class Rect2 {
 	// Derived state:
 

package/src/math/Triangle.ts

@@ -0,0 +1,29 @@
+import Mat33 from './Mat33';
+import Vec3 from './Vec3';
+
+export default class Triangle {
+	public constructor(
+        public readonly vertex1: Vec3,
+        public readonly vertex2: Vec3,
+        public readonly vertex3: Vec3,
+	) {}
+
+	public map(mapping: (vertex: Vec3)=>Vec3): Triangle {
+		return new Triangle(
+			mapping(this.vertex1),
+			mapping(this.vertex2),
+			mapping(this.vertex3),
+		);
+	}
+
+	// Transform, treating this as composed of 2D points.
+	public transformed2DBy(affineTransform: Mat33) {
+		return this.map(affineTransform.transformVec2);
+	}
+
+	// Transforms this by a linear transform --- verticies are treated as
+	// 3D points.
+	public transformedBy(linearTransform: Mat33) {
+		return this.map(linearTransform.transformVec3);
+	}
+}