js-draw 0.1.1 → 0.1.4

package/src/components/Text.ts

@@ -0,0 +1,140 @@
+import LineSegment2 from '../geometry/LineSegment2';
+import Mat33 from '../geometry/Mat33';
+import Rect2 from '../geometry/Rect2';
+import AbstractRenderer, { RenderingStyle } from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+
+export interface TextStyle {
+	size: number;
+	fontFamily: string;
+	fontWeight?: string;
+	fontVariant?: string;
+	renderingStyle: RenderingStyle;
+}
+
+
+export default class Text extends AbstractComponent {
+	protected contentBBox: Rect2;
+
+	public constructor(protected textObjects: Array<string|Text>, private transform: Mat33, private style: TextStyle) {
+		super();
+		this.recomputeBBox();
+	}
+
+	public static applyTextStyles(ctx: CanvasRenderingContext2D, style: TextStyle) {
+		// Quote the font family if necessary.
+		const fontFamily = style.fontFamily.match(/\s/) ? style.fontFamily.replace(/["]/g, '\\"') : style.fontFamily;
+
+		ctx.font =	[
+			(style.size ?? 12) + 'px',
+			style.fontWeight ?? '',
+			`${fontFamily}`,
+			style.fontWeight
+		].join(' ');
+
+		ctx.textAlign = 'left';
+	}
+
+	private static textMeasuringCtx: CanvasRenderingContext2D;
+	private static getTextDimens(text: string, style: TextStyle): Rect2 {
+		Text.textMeasuringCtx ??= document.createElement('canvas').getContext('2d')!;
+		const ctx = Text.textMeasuringCtx;
+		Text.applyTextStyles(ctx, style);
+
+		const measure = ctx.measureText(text);
+
+		// Text is drawn with (0,0) at the bottom left of the baseline.
+		const textY = -measure.actualBoundingBoxAscent;
+		const textHeight = measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+		return new Rect2(0, textY, measure.width, textHeight);
+	}
+
+	private computeBBoxOfPart(part: string|Text) {
+		if (typeof part === 'string') {
+			const textBBox = Text.getTextDimens(part, this.style);
+			return textBBox.transformedBoundingBox(this.transform);
+		} else {
+			const bbox = part.contentBBox.transformedBoundingBox(this.transform);
+			return bbox;
+		}
+	}
+
+	private recomputeBBox() {
+		let bbox: Rect2|null = null;
+
+		for (const textObject of this.textObjects) {
+			const currentBBox = this.computeBBoxOfPart(textObject);
+			bbox ??= currentBBox;
+			bbox = bbox.union(currentBBox);
+		}
+
+		this.contentBBox = bbox ?? Rect2.empty;
+	}
+
+	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		const cursor = this.transform;
+
+		canvas.startObject(this.contentBBox);
+		for (const textObject of this.textObjects) {
+			if (typeof textObject === 'string') {
+				canvas.drawText(textObject, cursor, this.style);
+			} else {
+				canvas.pushTransform(cursor);
+				textObject.render(canvas);
+				canvas.popTransform();
+			}
+		}
+		canvas.endObject(this.getLoadSaveData());
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+
+		// Convert canvas space to internal space.
+		const invTransform = this.transform.inverse();
+		const p1InThisSpace = invTransform.transformVec2(lineSegment.p1);
+		const p2InThisSpace = invTransform.transformVec2(lineSegment.p2);
+		lineSegment = new LineSegment2(p1InThisSpace, p2InThisSpace);
+
+		for (const subObject of this.textObjects) {
+			if (typeof subObject === 'string') {
+				const textBBox = Text.getTextDimens(subObject, this.style);
+
+				// TODO: Use a better intersection check. Perhaps draw the text onto a CanvasElement and
+				// use pixel-testing to check for intersection with its contour.
+				if (textBBox.getEdges().some(edge => lineSegment.intersection(edge) !== null)) {
+					return true;
+				}
+			} else {
+				if (subObject.intersects(lineSegment)) {
+					return true;
+				}
+			}
+		}
+
+		return false;
+	}
+
+	protected applyTransformation(affineTransfm: Mat33): void {
+		this.transform = affineTransfm.rightMul(this.transform);
+		this.recomputeBBox();
+	}
+
+	private getText() {
+		const result: string[] = [];
+
+		for (const textObject of this.textObjects) {
+			if (typeof textObject === 'string') {
+				result.push(textObject);
+			} else {
+				result.push(textObject.getText());
+			}
+		}
+
+		return result.join(' ');
+	}
+
+	public description(localizationTable: ImageComponentLocalization): string {
+		return localizationTable.text(this.getText());
+	}
+}

package/src/components/localization.ts

@@ -1,4 +1,5 @@
 export interface ImageComponentLocalization {
+	text: (text: string)=> string;
 	stroke: string;
     svgObject: string;
 }
@@ -6,4 +7,5 @@ export interface ImageComponentLocalization {
 export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
+	text: (text) => `Text object: ${text}`,
 };

package/src/geometry/Mat33.test.ts

@@ -141,4 +141,48 @@ describe('Mat33 tests', () => {
 			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
 		).objEq(Vec2.unitX, fuzz);
 	});
+
+	it('should convert CSS matrix(...) strings to matricies', () => {
+		// From MDN:
+		// 		⎡ a c e ⎤
+		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
+		// 		⎣ 0 0 1 ⎦
+		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
+		expect(identity).objEq(Mat33.identity);
+		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1e2, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
+			-1, 0.03, -5.123,
+			2, 4, -6.5,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
+			1.6, 3e-3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
+			-1, 	3E-2,  	-6.5e-1,
+			2e6,	-5.123,	0.01,
+			0,  	0,     	1,
+		));
+	});
 });

package/src/geometry/Mat33.ts

@@ -268,4 +268,45 @@ export default class Mat33 {
 		// Translate such that [center] goes to (0, 0)
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
+
+	// Converts a CSS-form matrix(a, b, c, d, e, f) to a Mat33.
+	public static fromCSSMatrix(cssString: string): Mat33 {
+		if (cssString === '' || cssString === 'none') {
+			return Mat33.identity;
+		}
+
+		const numberExp = '([-]?\\d*(?:\\.\\d*)?(?:[eE][-]?\\d+)?)';
+		const numberSepExp = '[, \\t\\n]';
+		const regExpSource = `^\\s*matrix\\s*\\(${
+			[
+				// According to MDN, matrix(a,b,c,d,e,f) has form:
+				// 		⎡ a c e ⎤
+				// 		⎢ b d f ⎥
+				// 		⎣ 0 0 1 ⎦
+				numberExp, numberExp, numberExp, // a, c, e
+				numberExp, numberExp, numberExp, // b, d, f
+			].join(`${numberSepExp}+`)
+		}${numberSepExp}*\\)\\s*$`;
+		const matrixExp = new RegExp(regExpSource, 'i');
+		const match = matrixExp.exec(cssString);
+
+		if (!match) {
+			throw new Error(`Unsupported transformation: ${cssString}`);
+		}
+
+		const matrixData = match.slice(1).map(entry => parseFloat(entry));
+		const a = matrixData[0];
+		const b = matrixData[1];
+		const c = matrixData[2];
+		const d = matrixData[3];
+		const e = matrixData[4];
+		const f = matrixData[5];
+
+		const transform = new Mat33(
+			a, c, e,
+			b, d, f,
+			0, 0, 1
+		);
+		return transform;
+	}
 }

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

@@ -90,15 +90,38 @@ describe('Path.fromString', () => {
 		]);
 	});
 
+	it('should break compoents at -s', () => {
+		const path = Path.fromString('m1-1 L-1-1-3-4-5-6,5-1');
+		expect(path.parts.length).toBe(4);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-1, -1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-5, -6),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(5, -1),
+			},
+		]);
+	});
+
 	it('should properly handle cubic Bézier curves', () => {
-		const path = Path.fromString('c1,1 0,-3 4 5 C1,1 0.1, 0.1 0, 0');
+		const path = Path.fromString('m1,1 c1,1 0-3 4 5 C1,1 0.1, 0.1 0, 0');
 		expect(path.parts.length).toBe(2);
 		expect(path.parts).toMatchObject([
 			{
 				kind: PathCommandType.CubicBezierTo,
-				controlPoint1: Vec2.of(1, 1),
+				controlPoint1: Vec2.of(2, 2),
 				controlPoint2: Vec2.of(1, -2),
-				endPoint: Vec2.of(5, 3),
+				endPoint: Vec2.of(5, 6),
 			},
 			{
 				kind: PathCommandType.CubicBezierTo,
@@ -120,7 +143,7 @@ describe('Path.fromString', () => {
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(1, 1),
-				endPoint: Vec2.of(-2, -3),
+				endPoint: Vec2.of(-1, -1),
 			},
 			{
 				kind: PathCommandType.QuadraticBezierTo,
@@ -130,4 +153,71 @@ describe('Path.fromString', () => {
 		]);
 		expect(path.startPoint).toMatchObject(Vec2.of(1, 1));
 	});
+
+	it('should correctly handle a command followed by multiple sets of arguments', () => {
+		// Commands followed by multiple sets of arguments, for example,
+		//  l 5,10 5,4 3,2,
+		// should be interpreted as multiple commands. Our example, is therefore equivalent to,
+		//  l 5,10 l 5,4 l 3,2
+		
+		const path = Path.fromString(`
+			L5,10 1,1
+			 2,2 -3,-1
+			q 1,2 1,1
+			  -1,-1 -3,-4
+			h -4 -1
+			V 3 5 1
+		`);
+		expect(path.parts).toMatchObject([
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(1, 1),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(2, 2),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-3, -1),
+			},
+
+			// q 1,2 1,1    -1,-1 -3,-4
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-2, 1),
+				endPoint: Vec2.of(-2, 0),
+			},
+			{
+				kind: PathCommandType.QuadraticBezierTo,
+				controlPoint: Vec2.of(-3, -1),
+				endPoint: Vec2.of(-5, -4),
+			},
+
+			// h -4 -1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-9, -4),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, -4),
+			},
+
+			// V 3 5 1
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 3),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 5),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(-10, 1),
+			},
+		]);
+		expect(path.startPoint).toMatchObject(Vec2.of(5, 10));
+	});
 });

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

@@ -19,14 +19,18 @@ describe('Path.toString', () => {
 	});
 
 	it('should fix rounding errors', () => {
-		const path = new Path(Vec2.of(0.10000001, 0.19999999), [
+		const path = new Path(Vec2.of(0.100000001, 0.199999999), [
 			{
 				kind: PathCommandType.QuadraticBezierTo,
 				controlPoint: Vec2.of(9999, -10.999999995),
-				endPoint: Vec2.of(0.000300001, 1.40000002),
+				endPoint: Vec2.of(0.000300001, 1.400000002),
 			},
+			{
+				kind: PathCommandType.LineTo,
+				point: Vec2.of(184.00482359999998, 1)
+			}
 		]);
-		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4');
+		expect(path.toString()).toBe('M0.1,0.2Q9999,-11 0.0003,1.4L184.0048236,1');
 	});
 
 	it('should not remove trailing zeroes before decimal points', () => {

package/src/geometry/Path.ts

@@ -303,6 +303,8 @@ export default class Path {
 				const postDecimal = parseInt(roundingDownMatch[3], 10);
 				const preDecimal = parseInt(roundingDownMatch[2], 10);
 
+				const origPostDecimalString = roundingDownMatch[3];
+
 				let newPostDecimal = (postDecimal + 10 - lastDigit).toString();
 				let carry = 0;
 				if (newPostDecimal.length > postDecimal.toString().length) {
@@ -310,13 +312,21 @@ export default class Path {
 					newPostDecimal = newPostDecimal.substring(1);
 					carry = 1;
 				}
+
+				// parseInt(...).toString() removes leading zeroes. Add them back.
+				while (newPostDecimal.length < origPostDecimalString.length) {
+					newPostDecimal = carry.toString(10) + newPostDecimal;
+					carry = 0;
+				}
+
 				text = `${negativeSign + (preDecimal + carry).toString()}.${newPostDecimal}`;
 			}
 
 			text = text.replace(fixRoundingUpExp, '$1');
 
 			// Remove trailing zeroes
-			text = text.replace(/([.][^0]*)0+$/, '$1');
+			text = text.replace(/([.]\d*[^0]+)0+$/, '$1');
+			text = text.replace(/[.]0+$/, '.');
 
 			// Remove trailing period
 			return text.replace(/[.]$/, '');
@@ -371,6 +381,7 @@ export default class Path {
 
 		let lastPos: Point2 = Vec2.zero;
 		let firstPos: Point2|null = null;
+		let startPos: Point2|null = null;
 		let isFirstCommand: boolean = true;
 		const commands: PathCommand[] = [];
 
@@ -413,19 +424,67 @@ export default class Path {
 				endPoint,
 			});
 		};
+		const commandArgCounts: Record<string, number> = {
+			'm': 1,
+			'l': 1,
+			'c': 3,
+			'q': 2,
+			'z': 0,
+			'h': 1,
+			'v': 1,
+		};
 
 		// Each command: Command character followed by anything that isn't a command character
-		const commandExp = /([MmZzLlHhVvCcSsQqTtAa])\s*([^a-zA-Z]*)/g;
+		const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
 		let current;
 		while ((current = commandExp.exec(pathString)) !== null) {
-			const argParts = current[2].trim().split(/[^0-9.-]/).filter(
+			const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(
 				part => part.length > 0
-			);
-			const numericArgs = argParts.map(arg => parseFloat(arg));
+			).reduce((accumualtor: string[], current: string): string[] => {
+				// As of 09/2022, iOS Safari doesn't support support lookbehind in regular
+				// expressions. As such, we need an alternative.
+				// Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
+				// we need special cases:
+				current = current.replace(/([^eE])[-]/g, '$1 -');
+				const parts = current.split(' -');
+				if (parts[0] !== '') {
+					accumualtor.push(parts[0]);
+				}
+				accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+				return accumualtor;
+			}, []);
+
+			let numericArgs = argParts.map(arg => parseFloat(arg));
+
+			let commandChar = current[1].toLowerCase();
+			let uppercaseCommand = current[1] !== commandChar;
+
+			// Convert commands that don't take points into commands that do.
+			if (commandChar === 'v' || commandChar === 'h') {
+				numericArgs = numericArgs.reduce((accumulator: number[], current: number): number[] => {
+					if (commandChar === 'v') {
+						return accumulator.concat(uppercaseCommand ? lastPos.x : 0, current);
+					} else {
+						return accumulator.concat(current, uppercaseCommand ? lastPos.y : 0);
+					}
+				}, []);
+				commandChar = 'l';
+			} else if (commandChar === 'z') {
+				if (firstPos) {
+					numericArgs = [ firstPos.x, firstPos.y ];
+					firstPos = lastPos;
+				} else {
+					continue;
+				}
+
+				// 'z' always acts like an uppercase lineTo(startPos)
+				uppercaseCommand = true;
+				commandChar = 'l';
+			}
+
 
-			const commandChar = current[1];
-			const uppercaseCommand = commandChar !== commandChar.toLowerCase();
-			const args = numericArgs.reduce((
+			const commandArgCount: number = commandArgCounts[commandChar] ?? 0;
+			const allArgs = numericArgs.reduce((
 				accumulator: Point2[], current, index, parts
 			): Point2[] => {
 				if (index % 2 !== 0) {
@@ -435,82 +494,65 @@ export default class Path {
 				} else {
 					return accumulator;
 				}
-			}, []).map((coordinate: Vec2): Point2 => {
+			}, []).map((coordinate, index): Point2 => {
 				// Lowercase commands are relative, uppercase commands use absolute
 				// positioning
+				let newPos;
 				if (uppercaseCommand) {
-					lastPos = coordinate;
-					return coordinate;
+					newPos = coordinate;
 				} else {
-					lastPos = lastPos.plus(coordinate);
-					return lastPos;
+					newPos = lastPos.plus(coordinate);
 				}
-			});
-
-			let expectedPointArgCount;
 
-			switch (commandChar.toLowerCase()) {
-			case 'm':
-				expectedPointArgCount = 1;
-				moveTo(args[0]);
-				break;
-			case 'l':
-				expectedPointArgCount = 1;
-				lineTo(args[0]);
-				break;
-			case 'z':
-				expectedPointArgCount = 0;
-				// firstPos can be null if the stroke data is just 'z'.
-				if (firstPos) {
-					lineTo(firstPos);
+				if ((index + 1) % commandArgCount === 0) {
+					lastPos = newPos;
 				}
-				break;
-			case 'c':
-				expectedPointArgCount = 3;
-				cubicBezierTo(args[0], args[1], args[2]);
-				break;
-			case 'q':
-				expectedPointArgCount = 2;
-				quadraticBeierTo(args[0], args[1]);
-				break;
-
-			// Horizontal line
-			case 'h':
-				expectedPointArgCount = 0;
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(numericArgs[0], lastPos.y));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(numericArgs[0], 0)));
-				}
-				break;
+				return newPos;
+			});
+	
+			if (allArgs.length % commandArgCount !== 0) {
+				throw new Error([
+					`Incorrect number of arguments: got ${JSON.stringify(allArgs)} with a length of ${allArgs.length} ≠ ${commandArgCount}k, k ∈ ℤ.`,
+					`The number of arguments to ${commandChar} must be a multiple of ${commandArgCount}!`,
+					`Command: ${current[0]}`,
+				].join('\n'));
+			}
 
-			// Vertical line
-			case 'v':
-				expectedPointArgCount = 0;
+			for (let argPos = 0; argPos < allArgs.length; argPos += commandArgCount) {
+				const args = allArgs.slice(argPos, argPos + commandArgCount);
 
-				if (uppercaseCommand) {
-					lineTo(Vec2.of(lastPos.x, numericArgs[1]));
-				} else {
-					lineTo(lastPos.plus(Vec2.of(0, numericArgs[1])));
+				switch (commandChar.toLowerCase()) {
+				case 'm':
+					if (argPos === 0) {
+						moveTo(args[0]);
+					} else {
+						lineTo(args[0]);
+					}
+					break;
+				case 'l':
+					lineTo(args[0]);
+					break;
+				case 'c':
+					cubicBezierTo(args[0], args[1], args[2]);
+					break;
+				case 'q':
+					quadraticBeierTo(args[0], args[1]);
+					break;
+				default:
+					throw new Error(`Unknown path command ${commandChar}`);
 				}
-				break;
-			default:
-				throw new Error(`Unknown path command ${commandChar}`);
-			}
 
-			if (args.length !== expectedPointArgCount) {
-				throw new Error(`
-					Incorrect number of arguments: got ${JSON.stringify(args)} with a length of ${args.length} ≠ ${expectedPointArgCount}.
-				`.trim());
+				isFirstCommand = false;
 			}
 
-			if (args.length > 0) {
-				firstPos ??= args[0];
+			if (allArgs.length > 0) {
+				firstPos ??= allArgs[0];
+				startPos ??= firstPos;
+				lastPos = allArgs[allArgs.length - 1];
 			}
-			isFirstCommand = false;
 		}
 
-		return new Path(firstPos ?? Vec2.zero, commands);
+		return new Path(startPos ?? Vec2.zero, commands);
 	}
 }

package/src/geometry/Rect2.ts

@@ -184,6 +184,14 @@ export default class Rect2 {
 		return this.topLeft.plus(Vec2.of(0, this.h));
 	}
 
+	public get width() {
+		return this.w;
+	}
+
+	public get height() {
+		return this.h;
+	}
+
 	// Returns edges in the order
 	// [ rightEdge, topEdge, leftEdge, bottomEdge ]
 	public getEdges(): LineSegment2[] {

package/src/rendering/renderers/AbstractRenderer.ts

@@ -1,4 +1,6 @@
 import Color4 from '../../Color4';
+import { LoadSaveDataTable } from '../../components/AbstractComponent';
+import { TextStyle } from '../../components/Text';
 import Mat33 from '../../geometry/Mat33';
 import Path, { PathCommand, PathCommandType } from '../../geometry/Path';
 import Rect2 from '../../geometry/Rect2';
@@ -28,6 +30,7 @@ const stylesEqual = (a: RenderingStyle, b: RenderingStyle) => {
 export default abstract class AbstractRenderer {
 	// If null, this' transformation is linked to the Viewport
 	private selfTransform: Mat33|null = null;
+	private transformStack: Array<Mat33|null> = [];
 
 	protected constructor(private viewport: Viewport) { }
 
@@ -50,6 +53,7 @@ export default abstract class AbstractRenderer {
 	protected abstract traceQuadraticBezierCurve(
 		controlPoint: Point2, endPoint: Point2,
 	): void;
+	public abstract drawText(text: string, transform: Mat33, style: TextStyle): void;
 
 	// Returns true iff the given rectangle is so small, rendering anything within
 	// it has no effect on the image.
@@ -128,7 +132,7 @@ export default abstract class AbstractRenderer {
 		this.objectLevel ++;
 	}
 
-	public endObject() {
+	public endObject(_loaderData?: LoadSaveDataTable) {
 		// Render the paths all at once
 		this.flushPath();
 		this.currentPaths = null;
@@ -165,6 +169,19 @@ export default abstract class AbstractRenderer {
 		this.selfTransform = transform;
 	}
 
+	public pushTransform(transform: Mat33) {
+		this.transformStack.push(this.selfTransform);
+		this.setTransform(this.getCanvasToScreenTransform().rightMul(transform));
+	}
+
+	public popTransform() {
+		if (this.transformStack.length === 0) {
+			throw new Error('Unable to pop more transforms than have been pushed!');
+		}
+
+		this.setTransform(this.transformStack.pop() ?? null);
+	}
+
 	// Get the matrix that transforms a vector on the canvas to a vector on this'
 	// rendering target.
 	public getCanvasToScreenTransform(): Mat33 {