js-draw 0.15.0 → 0.15.2

package/src/Viewport.ts

@@ -6,7 +6,6 @@ import Rect2 from './math/Rect2';
 import { Point2, Vec2 } from './math/Vec2';
 import Vec3 from './math/Vec3';
 import { StrokeDataPoint } from './types';
-import { EditorEventType, EditorNotifier } from './types';
 
 // Returns the base type of some type of point/number
 type PointDataType<T extends Point2|StrokeDataPoint|number> = T extends Point2 ? Point2 : number;
@@ -15,6 +14,8 @@ export abstract class ViewportTransform extends Command {
 	public abstract readonly transform: Mat33;
 }
 
+type TransformChangeCallback = (oldTransform: Mat33, newTransform: Mat33)=> void;
+
 export class Viewport {
 	// Command that translates/scales the viewport.
 	private static ViewportTransform = class extends ViewportTransform {
@@ -82,7 +83,7 @@ export class Viewport {
 	private screenRect: Rect2;
 
 	// @internal
-	public constructor(private notifier: EditorNotifier) {
+	public constructor(private onTransformChangeCallback: TransformChangeCallback) {
 		this.resetTransform(Mat33.identity);
 		this.screenRect = Rect2.empty;
 	}
@@ -120,11 +121,7 @@ export class Viewport {
 		const oldTransform = this.transform;
 		this.transform = newTransform;
 		this.inverseTransform = newTransform.inverse();
-		this.notifier.dispatch(EditorEventType.ViewportChanged, {
-			kind: EditorEventType.ViewportChanged,
-			newTransform,
-			oldTransform,
-		});
+		this.onTransformChangeCallback?.(oldTransform, newTransform);
 	}
 
 	public get screenToCanvasTransform(): Mat33 {

package/src/components/AbstractComponent.transformBy.test.ts

@@ -0,0 +1,22 @@
+import { Color4, EditorImage, Mat33, Path, Rect2, Vec2 } from '../lib';
+import createEditor from '../testing/createEditor';
+import Stroke from './Stroke';
+
+describe('AbstractComponent.transformBy', () => {
+	it('should restore the component\'s z-index on undo', () => {
+		const editor = createEditor();
+		const component = new Stroke([ Path.fromRect(Rect2.unitSquare).toRenderable({ fill: Color4.red }) ]);
+		EditorImage.addElement(component).apply(editor);
+
+		const origZIndex = component.getZIndex();
+
+		const transformCommand = component.transformBy(Mat33.translation(Vec2.unitX));
+		transformCommand.apply(editor);
+
+		// Should increase the z-index on applying a transform
+		expect(component.getZIndex()).toBeGreaterThan(origZIndex);
+
+		transformCommand.unapply(editor);
+		expect(component.getZIndex()).toBe(origZIndex);
+	});
+});

package/src/components/AbstractComponent.ts

@@ -37,9 +37,15 @@ export default abstract class AbstractComponent {
 	protected constructor(
 		// A unique identifier for the type of component
 		private readonly componentKind: string,
+		initialZIndex?: number,
 	) {
 		this.lastChangedTime = (new Date()).getTime();
-		this.zIndex = AbstractComponent.zIndexCounter++;
+
+		if (initialZIndex !== undefined) {
+			this.zIndex = initialZIndex;
+		} else {
+			this.zIndex = AbstractComponent.zIndexCounter++;
+		}
 
 		// Create a unique ID.
 		this.id = `${new Date().getTime()}-${Math.random()}`;
@@ -96,6 +102,10 @@ export default abstract class AbstractComponent {
 		return this.contentBBox;
 	}
 
+	/** Called when this component is added to the given image. */
+	public onAddToImage(_image: EditorImage): void { }
+	public onRemoveFromImage(): void { }
+
 	public abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
 
 	/** @return true if `lineSegment` intersects this component. */
@@ -138,7 +148,7 @@ export default abstract class AbstractComponent {
 
 	// Returns a command that updates this component's z-index.
 	public setZIndex(newZIndex: number): SerializableCommand {
-		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex);
+		return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
 	}
 
 	// @returns true iff this component can be selected (e.g. by the selection tool.)
@@ -156,7 +166,6 @@ export default abstract class AbstractComponent {
 	private static transformElementCommandId = 'transform-element';
 
 	private static TransformElementCommand = class extends UnresolvedSerializableCommand {
-		private origZIndex: number|null = null;
 		private targetZIndex: number;
 
 		// Construct a new TransformElementCommand. `component`, while optional, should
@@ -167,6 +176,7 @@ export default abstract class AbstractComponent {
 			componentID: string,
 			component?: AbstractComponent,
 			targetZIndex?: number,
+			private origZIndex?: number,
 		) {
 			super(AbstractComponent.transformElementCommandId, componentID, component);
 			this.targetZIndex = targetZIndex ?? AbstractComponent.zIndexCounter++;
@@ -175,6 +185,10 @@ export default abstract class AbstractComponent {
 			if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
 				AbstractComponent.zIndexCounter = this.targetZIndex + 1;
 			}
+
+			if (component && origZIndex === undefined) {
+				this.origZIndex = component.getZIndex();
+			}
 		}
 
 		protected resolveComponent(image: EditorImage): void {
@@ -183,7 +197,7 @@ export default abstract class AbstractComponent {
 			}
 
 			super.resolveComponent(image);
-			this.origZIndex = this.component!.getZIndex();
+			this.origZIndex ??= this.component!.getZIndex();
 		}
 
 		private updateTransform(editor: Editor, newTransfm: Mat33) {
@@ -233,12 +247,14 @@ export default abstract class AbstractComponent {
 				const elem = editor.image.lookupElement(json.id) ?? undefined;
 				const transform = new Mat33(...(json.transfm as Mat33Array));
 				const targetZIndex = json.targetZIndex;
+				const origZIndex = json.origZIndex ?? undefined;
 
 				return new AbstractComponent.TransformElementCommand(
 					transform,
 					json.id,
 					elem,
 					targetZIndex,
+					origZIndex,
 				);
 			});
 		}
@@ -248,6 +264,7 @@ export default abstract class AbstractComponent {
 				id: this.componentID,
 				transfm: this.affineTransfm.toArray(),
 				targetZIndex: this.targetZIndex,
+				origZIndex: this.origZIndex,
 			};
 		}
 	};

package/src/components/ImageBackground.ts

@@ -0,0 +1,167 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage, { EditorImageEventType } from '../EditorImage';
+import { DispatcherEventListener } from '../EventDispatcher';
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
+import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
+import AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle, createRestyleComponentCommand } from './RestylableComponent';
+
+export enum BackgroundType {
+	SolidColor,
+	None,
+}
+
+export const imageBackgroundCSSClassName = 'js-draw-image-background';
+
+// Represents the background of an image in the editor.
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+	protected contentBBox: Rect2;
+	private viewportSizeChangeListener: DispatcherEventListener|null = null;
+
+	// eslint-disable-next-line @typescript-eslint/prefer-as-const
+	readonly isRestylableComponent: true = true;
+
+	public constructor(
+		private backgroundType: BackgroundType, private mainColor: Color4
+	) {
+		super('image-background', 0);
+		this.contentBBox = Rect2.empty;
+	}
+	
+	public getStyle(): ComponentStyle {
+		let color: Color4|undefined = this.mainColor;
+
+		if (this.backgroundType === BackgroundType.None) {
+			color = undefined;
+		}
+
+		return {
+			color,
+		};
+	}
+
+	public updateStyle(style: ComponentStyle): SerializableCommand {
+		return createRestyleComponentCommand(this.getStyle(), style, this);
+	}
+
+	// @internal
+	public forceStyle(style: ComponentStyle, _editor: Editor | null): void {
+		const fill = style.color;
+
+		if (!fill) {
+			return;
+		}
+
+		this.mainColor = fill;
+		if (fill.eq(Color4.transparent)) {
+			this.backgroundType = BackgroundType.None;
+		} else {
+			this.backgroundType = BackgroundType.SolidColor;
+		}
+	}
+
+	public onAddToImage(image: EditorImage) {
+		if (this.viewportSizeChangeListener) {
+			console.warn('onAddToImage called when background is already in an image');
+			this.onRemoveFromImage();
+		}
+
+		this.viewportSizeChangeListener = image.notifier.on(
+			EditorImageEventType.ExportViewportChanged, () => {
+				this.recomputeBBox(image);
+			});
+		this.recomputeBBox(image);
+	}
+
+	public onRemoveFromImage(): void {
+		this.viewportSizeChangeListener?.remove();
+		this.viewportSizeChangeListener = null;
+	}
+
+	private recomputeBBox(image: EditorImage) {
+		const importExportRect = image.getImportExportViewport().visibleRect;
+		if (!this.contentBBox.eq(importExportRect)) {
+			this.contentBBox = importExportRect;
+
+			// Re-render this if already added to the EditorImage.
+			image.queueRerenderOf(this);
+		}
+	}
+
+	public render(canvas: AbstractRenderer, visibleRect?: Rect2) {
+		if (this.backgroundType === BackgroundType.None) {
+			return;
+		}
+		canvas.startObject(this.contentBBox);
+
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			// If the rectangle for this region contains the visible rect,
+			// we can fill the entire visible rectangle (which may be more efficient than
+			// filling the entire region for this.)
+			if (visibleRect) {
+				const intersection = visibleRect.intersection(this.contentBBox);
+				if (intersection) {
+					canvas.fillRect(intersection, this.mainColor);
+				}
+			} else {
+				canvas.fillRect(this.contentBBox, this.mainColor);
+			}
+		}
+
+		canvas.endObject(this.getLoadSaveData(), [ imageBackgroundCSSClassName ]);
+	}
+
+	public intersects(lineSegment: LineSegment2): boolean {
+		return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
+	}
+
+	public isSelectable(): boolean {
+		return false;
+	}
+
+	protected serializeToJSON() {
+		return {
+			mainColor: this.mainColor.toHexString(),
+			backgroundType: this.backgroundType,
+		};
+	}
+
+	protected applyTransformation(_affineTransfm: Mat33) {
+		// Do nothing — it doesn't make sense to transform the background.
+	}
+
+	public description(localizationTable: ImageComponentLocalization) {
+		if (this.backgroundType === BackgroundType.SolidColor) {
+			return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+		} else {
+			return localizationTable.emptyBackground;
+		}
+	}
+
+	protected createClone(): AbstractComponent {
+		return new ImageBackground(this.backgroundType, this.mainColor);
+	}
+
+	// @internal
+	public static deserializeFromJSON(json: any) {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (typeof json.mainColor !== 'string') {
+			throw new Error('Error deserializing — mainColor must be of type string.');
+		}
+
+		const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
+		const mainColor = Color4.fromHex(json.mainColor);
+
+		return new ImageBackground(backgroundType, mainColor);
+	}
+}
+
+AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);

package/src/components/ImageComponent.ts

@@ -88,7 +88,9 @@ export default class ImageComponent extends AbstractComponent {
 	}
 
 	public render(canvas: AbstractRenderer, _visibleRect?: Rect2): void {
+		canvas.startObject(this.contentBBox);
 		canvas.drawImage(this.image);
+		canvas.endObject(this.getLoadSaveData());
 	}
 
 	public getProportionalRenderingTime(): number {

package/src/components/builders/ArrowBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new ArrowBuilder(initialPoint);
+export const makeArrowBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new ArrowBuilder(initialPoint, viewport);
 };
 
 export default class ArrowBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -28,10 +28,10 @@ export default class ArrowBuilder implements ComponentBuilder {
 	}
 
 	private buildPreview(): Stroke {
-		const startPoint = this.startPoint.pos;
+		const lineStartPoint = this.startPoint.pos;
 		const endPoint = this.endPoint.pos;
-		const toEnd = endPoint.minus(startPoint).normalized();
-		const arrowLength = endPoint.minus(startPoint).length();
+		const toEnd = endPoint.minus(lineStartPoint).normalized();
+		const arrowLength = endPoint.minus(lineStartPoint).length();
 
 		// Ensure that the arrow tip is smaller than the arrow.
 		const arrowTipSize = Math.min(this.getLineWidth(), arrowLength / 2);
@@ -45,42 +45,45 @@ export default class ArrowBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledBaseNormal = lineNormal.times(endSize);
 
+		const path = new Path(arrowTipBase.minus(scaledBaseNormal), [
+			// Stem
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.minus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: lineStartPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(scaledBaseNormal),
+			},
+
+			// Head
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(toEnd.times(endSize)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: arrowTipBase.minus(scaledBaseNormal),
+			},
+		// Round all points in the arrow (to remove unnecessary decimal places)
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
 		const preview = new Stroke([
 			{
-				startPoint: arrowTipBase.minus(scaledBaseNormal),
-				commands: [
-					// Stem
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(scaledBaseNormal),
-					},
-
-					// Head
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(arrowTipSize).plus(scaledBaseNormal))
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(toEnd.times(endSize)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.plus(lineNormal.times(-arrowTipSize).minus(scaledBaseNormal)),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: arrowTipBase.minus(scaledBaseNormal),
-					},
-				],
+				startPoint: path.startPoint,
+				commands: path.parts,
 				style: {
 					fill: this.startPoint.color,
 				}

package/src/components/builders/LineBuilder.ts

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../math/Path';
+import Path, { PathCommandType } from '../../math/Path';
 import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
@@ -7,14 +7,14 @@ import AbstractComponent from '../AbstractComponent';
 import Stroke from '../Stroke';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
 
-export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, _viewport: Viewport) => {
-	return new LineBuilder(initialPoint);
+export const makeLineBuilder: ComponentBuilderFactory = (initialPoint: StrokeDataPoint, viewport: Viewport) => {
+	return new LineBuilder(initialPoint, viewport);
 };
 
 export default class LineBuilder implements ComponentBuilder {
 	private endPoint: StrokeDataPoint;
 
-	public constructor(private readonly startPoint: StrokeDataPoint) {
+	public constructor(private readonly startPoint: StrokeDataPoint, private readonly viewport: Viewport) {
 		this.endPoint = startPoint;
 	}
 
@@ -35,31 +35,29 @@ export default class LineBuilder implements ComponentBuilder {
 		const scaledStartNormal = lineNormal.times(startSize);
 		const scaledEndNormal = lineNormal.times(endSize);
 
-		const preview = new Stroke([
+		const strokeStartPoint = startPoint.minus(scaledStartNormal);
+
+		const path = new Path(strokeStartPoint, [
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.plus(scaledStartNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: endPoint.plus(scaledEndNormal),
+			},
 			{
-				startPoint: startPoint.minus(scaledStartNormal),
-				commands: [
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.plus(scaledStartNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.plus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: endPoint.minus(scaledEndNormal),
-					},
-					{
-						kind: PathCommandType.LineTo,
-						point: startPoint.minus(scaledStartNormal),
-					},
-				],
-				style: {
-					fill: this.startPoint.color,
-				}
-			}
+				kind: PathCommandType.LineTo,
+				point: endPoint.minus(scaledEndNormal),
+			},
+			{
+				kind: PathCommandType.LineTo,
+				point: startPoint.minus(scaledStartNormal),
+			},
+		]).mapPoints(point => this.viewport.roundPoint(point));
+
+		const preview = new Stroke([
+			path.toRenderable({ fill: this.startPoint.color })
 		]);
 
 		return preview;

package/src/components/builders/RectangleBuilder.ts

@@ -49,7 +49,7 @@ export default class RectangleBuilder implements ComponentBuilder {
 		).transformedBy(
 			// Rotate the canvas rectangle so that its rotation matches the screen
 			rotationMat
-		);
+		).mapPoints(point => this.viewport.roundPoint(point));
 
 		const preview = new Stroke([
 			path.toRenderable({

package/src/components/lib.ts

@@ -9,6 +9,7 @@ import Stroke from './Stroke';
 import TextComponent from './TextComponent';
 import ImageComponent from './ImageComponent';
 import RestyleableComponent, { createRestyleComponentCommand } from './RestylableComponent';
+import ImageBackground from './ImageBackground';
 
 export {
 	Stroke,
@@ -18,5 +19,6 @@ export {
 
 	TextComponent,
 	Stroke as StrokeComponent,
+	ImageBackground as BackgroundComponent,
 	ImageComponent,
 };

package/src/components/localization.ts

@@ -4,6 +4,8 @@ export interface ImageComponentLocalization {
 	imageNode: (description: string)=> string;
 	stroke: string;
     svgObject: string;
+	emptyBackground: string;
+	filledBackgroundWithColor: (color: string)=> string;
 
 	restyledElements: string;
 }
@@ -13,6 +15,8 @@ export const defaultComponentLocalization: ImageComponentLocalization = {
 	stroke: 'Stroke',
 	svgObject: 'SVG Object',
 	restyledElements: 'Restyled elements',
+	emptyBackground: 'Empty background',
+	filledBackgroundWithColor: (color) => `Filled background (${color})`,
 	text: (text) => `Text object: ${text}`,
 	imageNode: (description: string) => `Image: ${description}`,
 };

package/src/math/Mat33.test.ts

@@ -72,7 +72,7 @@ describe('Mat33 tests', () => {
 	});
 
 	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
-		const fuzz = 0.01;
+		const fuzz = 0.001;
 
 		const M = Mat33.zRotation(Math.PI / 2);
 		const rotated = M.transformVec2(Vec2.unitX);
@@ -80,6 +80,18 @@ describe('Mat33 tests', () => {
 		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
 	});
 
+	it('z-rotation matricies should preserve the given origin', () => {
+		const testPairs: Array<[number, Vec2]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.of(10, 10) ],
+		];
+
+		for (const [ angle, center ] of testPairs) {
+			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
+		}
+	});
+
 	it('translation matricies should translate Vec2s', () => {
 		const fuzz = 0.01;
 
@@ -140,6 +152,13 @@ describe('Mat33 tests', () => {
 		).objEq(Vec2.unitX, fuzz);
 	});
 
+	it('z-rotation should preserve given origin', () => {
+		const rotationOrigin = Vec2.of(75.16363373235318, 104.29870408043762);
+		const angle = 6.205048847547065;
+
+		expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+	});
+
 	it('should correctly apply a mapping to all components', () => {
 		expect(
 			new Mat33(

package/src/math/Mat33.ts

@@ -240,11 +240,49 @@ export default class Mat33 {
 	}
 
 	public toString(): string {
-		return `
-⎡ ${this.a1},\t ${this.a2},\t ${this.a3}\t ⎤
-⎢ ${this.b1},\t ${this.b2},\t ${this.b3}\t ⎥
-⎣ ${this.c1},\t ${this.c2},\t ${this.c3}\t ⎦
-		`.trimEnd().trimStart();
+		let result = '';
+		const maxColumnLens = [ 0, 0, 0 ];
+
+		// Determine the longest item in each column so we can pad the others to that
+		// length.
+		for (const row of this.rows) {
+			for (let i = 0; i < 3; i++) {
+				maxColumnLens[i] = Math.max(maxColumnLens[0], `${row.at(i)}`.length);
+			}
+		}
+
+		for (let i = 0; i < 3; i++) {
+			if (i === 0) {
+				result += '⎡ ';
+			} else if (i === 1) {
+				result += '⎢ ';
+			} else {
+				result += '⎣ ';
+			}
+
+			// Add each component of the ith row (after padding it)
+			for (let j = 0; j < 3; j++) {
+				const val = this.rows[i].at(j).toString();
+
+				let padding = '';
+				for (let i = val.length; i < maxColumnLens[j]; i++) {
+					padding += ' ';
+				}
+
+				result += val + ', ' + padding;
+			}
+
+			if (i === 0) {
+				result += ' ⎤';
+			} else if (i === 1) {
+				result += ' ⎥';
+			} else {
+				result += ' ⎦';
+			}
+			result += '\n';
+		}
+
+		return result.trimEnd();
 	}
 
 	/**
@@ -302,6 +340,10 @@ export default class Mat33 {
 	}
 
 	public static zRotation(radians: number, center: Point2 = Vec2.zero): Mat33 {
+		if (radians === 0) {
+			return Mat33.identity;
+		}
+
 		const cos = Math.cos(radians);
 		const sin = Math.sin(radians);