js-draw 0.1.11 → 0.2.0

package/src/UndoRedoHistory.ts

@@ -9,6 +9,7 @@ class UndoRedoHistory {
 	private undoStack: Command[];
 	private redoStack: Command[];
 
+	// @internal
 	public constructor(
 		private readonly editor: Editor,
 		private announceRedoCallback: AnnounceRedoCallback,
@@ -37,7 +38,12 @@ class UndoRedoHistory {
 			elem.onDrop(this.editor);
 		}
 		this.redoStack = [];
+
 		this.fireUpdateEvent();
+		this.editor.notifier.dispatch(EditorEventType.CommandDone, {
+			kind: EditorEventType.CommandDone,
+			command,
+		});
 	}
 
 	// Remove the last command from this' undo stack and apply it.
@@ -47,8 +53,13 @@ class UndoRedoHistory {
 			this.redoStack.push(command);
 			command.unapply(this.editor);
 			this.announceUndoCallback(command);
+
+			this.fireUpdateEvent();
+			this.editor.notifier.dispatch(EditorEventType.CommandUndone, {
+				kind: EditorEventType.CommandUndone,
+				command,
+			});
 		}
-		this.fireUpdateEvent();
 	}
 
 	public redo() {
@@ -57,8 +68,13 @@ class UndoRedoHistory {
 			this.undoStack.push(command);
 			command.apply(this.editor);
 			this.announceRedoCallback(command);
+
+			this.fireUpdateEvent();
+			this.editor.notifier.dispatch(EditorEventType.CommandDone, {
+				kind: EditorEventType.CommandDone,
+				command,
+			});
 		}
-		this.fireUpdateEvent();
 	}
 
 	public get undoStackSize(): number {

package/src/Viewport.ts

@@ -1,19 +1,23 @@
 import Command from './commands/Command';
 import { CommandLocalization } from './commands/localization';
 import Editor from './Editor';
-import Mat33 from './geometry/Mat33';
-import Rect2 from './geometry/Rect2';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import Mat33 from './math/Mat33';
+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;
 
+export abstract class ViewportTransform extends Command {
+	public abstract readonly transform: Mat33;
+}
+
 export class Viewport {
 	// Command that translates/scales the viewport.
-	public static ViewportTransform = class extends Command {
+	private static ViewportTransform = class extends ViewportTransform {
 		readonly #inverseTransform: Mat33;
 
 		public constructor(public readonly transform: Mat33) {
@@ -33,14 +37,14 @@ export class Viewport {
 			editor.queueRerender();
 		}
 
-		public description(localizationTable: CommandLocalization): string {
+		public description(editor: Editor, localizationTable: CommandLocalization): string {
 			const result: string[] = [];
 
 			// Describe the transformation's affect on the viewport (note that transformation transforms
 			// the **elements** within the viewport). Assumes the transformation only does rotation/scale/translation.
-			const origVec = Vec2.unitX;
+			const origVec = editor.viewport.visibleRect.center;
 			const linearTransformedVec = this.transform.transformVec3(Vec2.unitX);
-			const affineTransformedVec = this.transform.transformVec2(Vec2.unitX);
+			const affineTransformedVec = this.transform.transformVec2(origVec);
 
 			const scale = linearTransformedVec.magnitude();
 			const rotation = 180 / Math.PI * linearTransformedVec.angle();
@@ -48,8 +52,7 @@ export class Viewport {
 
 			if (scale > 1.2) {
 				result.push(localizationTable.zoomedIn);
-			}
-			else if (scale < 0.8) {
+			} else if (scale < 0.8) {
 				result.push(localizationTable.zoomedOut);
 			}
 
@@ -64,7 +67,7 @@ export class Viewport {
 				result.push(localizationTable.movedRight);
 			}
 
-			if (translation.y < minTranslation) {
+			if (translation.y < -minTranslation) {
 				result.push(localizationTable.movedDown);
 			} else if (translation.y > minTranslation) {
 				result.push(localizationTable.movedUp);
@@ -78,11 +81,13 @@ export class Viewport {
 	private inverseTransform: Mat33;
 	private screenRect: Rect2;
 
+	// @internal
 	public constructor(private notifier: EditorNotifier) {
 		this.resetTransform(Mat33.identity);
 		this.screenRect = Rect2.empty;
 	}
 
+	// @internal
 	public updateScreenSize(screenSize: Vec2) {
 		this.screenRect = this.screenRect.resizedTo(screenSize);
 	}
@@ -100,7 +105,11 @@ export class Viewport {
 		return this.transform.transformVec2(canvasPoint);
 	}
 
-	// Updates the transformation directly. Using ViewportTransform is preferred.
+	public static transformBy(transform: Mat33): ViewportTransform {
+		return new Viewport.ViewportTransform(transform);
+	}
+
+	// Updates the transformation directly. Using `transformBy` is preferred.
 	// [newTransform] should map from canvas coordinates to screen coordinates.
 	public resetTransform(newTransform: Mat33 = Mat33.identity) {
 		const oldTransform = this.transform;
@@ -131,6 +140,7 @@ export class Viewport {
 		return this.transform.transformVec3(Vec3.unitX).magnitude();
 	}
 
+	// Returns the size of one screen pixel in canvas units.
 	public getSizeOfPixelOnCanvas(): number {
 		return 1/this.getScaleFactor();
 	}
@@ -140,7 +150,7 @@ export class Viewport {
 		return this.transform.transformVec3(Vec3.unitX).angle();
 	}
 
-	// Rounds the given [point] to a multiple of 10 such that it is within [tolerance] of
+	// Rounds the given `point` to a multiple of 10 such that it is within `tolerance` of
 	// its original location. This is useful for preparing data for base-10 conversion.
 	public static roundPoint<T extends Point2|number>(
 		point: T, tolerance: number,
@@ -231,9 +241,4 @@ export class Viewport {
 	}
 }
 
-export namespace Viewport { // eslint-disable-line
-	// Needed to allow accessing as a type. See https://stackoverflow.com/a/68201883
-	export type ViewportTransform = typeof Viewport.ViewportTransform.prototype;
-}
-
 export default Viewport;

package/src/bundle/bundled.ts

@@ -2,7 +2,6 @@
 
 import '../styles';
 import Editor from '../Editor';
-import getLocalizationTable from '../localizations/getLocalizationTable';
+export * from '../lib';
 
 export default Editor;
-export { Editor, getLocalizationTable };

package/src/commands/Command.ts

@@ -8,7 +8,7 @@ export abstract class Command {
 	// Called when the command is being deleted
 	public onDrop(_editor: Editor) { }
 
-	public abstract description(localizationTable: EditorLocalization): string;
+	public abstract description(editor: Editor, localizationTable: EditorLocalization): string;
 
 	public static union(a: Command, b: Command): Command {
 		return new class extends Command {
@@ -22,9 +22,9 @@ export abstract class Command {
 				a.unapply(editor);
 			}
 
-			public description(localizationTable: EditorLocalization) {
-				const aDescription = a.description(localizationTable);
-				const bDescription = b.description(localizationTable);
+			public description(editor: Editor, localizationTable: EditorLocalization) {
+				const aDescription = a.description(editor, localizationTable);
+				const bDescription = b.description(editor, localizationTable);
 
 				if (aDescription === bDescription) {
 					return aDescription;
@@ -36,7 +36,7 @@ export abstract class Command {
 	}
 
 	public static readonly empty = new class extends Command {
-		public description(_localizationTable: EditorLocalization) { return ''; }
+		public description(_editor: Editor, _localizationTable: EditorLocalization) { return ''; }
 		public apply(_editor: Editor) { }
 		public unapply(_editor: Editor) { }
 	};

package/src/commands/Duplicate.ts

@@ -24,7 +24,7 @@ export default class Duplicate extends SerializableCommand {
 		this.reverse.apply(editor);
 	}
 
-	public description(localizationTable: EditorLocalization): string {
+	public description(_editor: Editor, localizationTable: EditorLocalization): string {
 		if (this.duplicates.length === 0) {
 			return localizationTable.duplicatedNoElements;
 		}
@@ -35,13 +35,12 @@ export default class Duplicate extends SerializableCommand {
 		);
 	}
 
-	protected serializeToString(): string {
-		return JSON.stringify(this.toDuplicate.map(elem => elem.getId()));
+	protected serializeToJSON() {
+		return this.toDuplicate.map(elem => elem.getId());
 	}
 
 	static {
-		SerializableCommand.register('duplicate', (data: string, editor: Editor) => {
-			const json = JSON.parse(data);
+		SerializableCommand.register('duplicate', (json: any, editor: Editor) => {
 			const elems = json.map((id: string) => editor.image.lookupElement(id));
 			return new Duplicate(elems);
 		});

package/src/commands/Erase.ts

@@ -49,7 +49,7 @@ export default class Erase extends SerializableCommand {
 		}
 	}
 
-	public description(localizationTable: EditorLocalization): string {
+	public description(_editor: Editor, localizationTable: EditorLocalization): string {
 		if (this.toRemove.length === 0) {
 			return localizationTable.erasedNoElements;
 		}
@@ -58,15 +58,16 @@ export default class Erase extends SerializableCommand {
 		return localizationTable.eraseAction(description, this.toRemove.length);
 	}
 
-	protected serializeToString() {
+	protected serializeToJSON() {
 		const elemIds = this.toRemove.map(elem => elem.getId());
-		return JSON.stringify(elemIds);
+		return elemIds;
 	}
 
 	static {
-		SerializableCommand.register('erase', (data: string, editor: Editor) => {
-			const json = JSON.parse(data);
-			const elems = json.map((elemId: string) => editor.image.lookupElement(elemId));
+		SerializableCommand.register('erase', (json: any, editor) => {
+			const elems = json
+				.map((elemId: string) => editor.image.lookupElement(elemId))
+				.filter((elem: AbstractComponent|null) => elem !== null);
 			return new Erase(elems);
 		});
 	}

package/src/commands/SerializableCommand.ts

@@ -1,7 +1,7 @@
 import Editor from '../Editor';
 import Command from './Command';
 
-type DeserializationCallback = (data: string, editor: Editor) => SerializableCommand;
+export type DeserializationCallback = (data: Record<string, any>|any[], editor: Editor) => SerializableCommand;
 
 export default abstract class SerializableCommand extends Command {
 	public constructor(private commandTypeId: string) {
@@ -14,27 +14,35 @@ export default abstract class SerializableCommand extends Command {
 		}
 	}
 
-	protected abstract serializeToString(): string;
+	protected abstract serializeToJSON(): string|Record<string, any>|any[];
 	private static deserializationCallbacks: Record<string, DeserializationCallback> = {};
 
-	public serialize(): string {
-		return JSON.stringify({
-			data: this.serializeToString(),
+	// Convert this command to an object that can be passed to `JSON.stringify`.
+	//
+	// Do not rely on the stability of the optupt of this function — it can change
+	// form without a major version increase.
+	public serialize(): Record<string|symbol, any> {
+		return {
+			data: this.serializeToJSON(),
 			commandType: this.commandTypeId,
-		});
+		};
 	}
 
-	public static deserialize(data: string, editor: Editor): SerializableCommand {
-		const json = JSON.parse(data);
+	// Convert a `string` containing JSON data (or the output of `JSON.parse`) into a
+	// `Command`.
+	public static deserialize(data: string|Record<string, any>, editor: Editor): SerializableCommand {
+		const json = typeof data === 'string' ? JSON.parse(data) : data;
 		const commandType = json.commandType as string;
 
 		if (!(commandType in SerializableCommand.deserializationCallbacks)) {
 			throw new Error(`Unrecognised command type ${commandType}!`);
 		}
 
-		return SerializableCommand.deserializationCallbacks[commandType](json.data as string, editor);
+		return SerializableCommand.deserializationCallbacks[commandType](json.data, editor);
 	}
 
+	// Register a deserialization callback. This must be called at least once for every subclass of
+	// `SerializableCommand`.
 	public static register(commandTypeId: string, deserialize: DeserializationCallback) {
 		SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
 	}

package/src/commands/invertCommand.ts

@@ -0,0 +1,51 @@
+import Editor from '../Editor';
+import { EditorLocalization } from '../localization';
+import Command from './Command';
+import SerializableCommand from './SerializableCommand';
+
+// Returns a command taht does the opposite of the given command --- `result.apply()` calls
+// `command.unapply()` and `result.unapply()` calls `command.apply()`.
+const invertCommand = <T extends Command> (command: T): T extends SerializableCommand ? SerializableCommand : Command => {
+	if (command instanceof SerializableCommand) {
+		// SerializableCommand that does the inverse of [command]
+		return new class extends SerializableCommand {
+			protected serializeToJSON() {
+				return command.serialize();
+			}
+			public apply(editor: Editor): void {
+				command.unapply(editor);
+			}
+			public unapply(editor: Editor): void {
+				command.unapply(editor);
+			}
+			public description(editor: Editor, localizationTable: EditorLocalization): string {
+				return localizationTable.inverseOf(command.description(editor, localizationTable));
+			}
+		}('inverse');
+	} else {
+		// Command that does the inverse of [command].
+		const result = new class extends Command {
+			public apply(editor: Editor) {
+				command.unapply(editor);
+			}
+
+			public unapply(editor: Editor) {
+				command.apply(editor);
+			}
+
+			public description(editor: Editor, localizationTable: EditorLocalization) {
+				return localizationTable.inverseOf(command.description(editor, localizationTable));
+			}
+		};
+
+		// We know that T does not extend SerializableCommand, and thus returning a Command
+		// is appropriate.
+		return result as any;
+	}
+};
+
+SerializableCommand.register('inverse', (data, editor) => {
+	return invertCommand(SerializableCommand.deserialize(data, editor));
+});
+
+export default invertCommand;

package/src/commands/lib.ts

@@ -0,0 +1,14 @@
+import Command from './Command';
+import Duplicate from './Duplicate';
+import Erase from './Erase';
+import invertCommand from './invertCommand';
+import SerializableCommand from './SerializableCommand';
+
+export {
+	Command,
+	Duplicate,
+	Erase,
+	SerializableCommand,
+
+	invertCommand,
+};

package/src/commands/localization.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../geometry/Rect2';
+import Rect2 from '../math/Rect2';
 
 export interface CommandLocalization {
 	movedLeft: string;
@@ -17,6 +17,7 @@ export interface CommandLocalization {
 	addElementAction: (elemDescription: string) => string;
 	eraseAction: (elemDescription: string, numElems: number) => string;
 	duplicateAction: (elemDescription: string, count: number)=> string;
+	inverseOf: (actionDescription: string)=> string;
 
 	selectedElements: (count: number)=>string;
 }
@@ -28,6 +29,7 @@ export const defaultCommandLocalization: CommandLocalization = {
 	addElementAction: (componentDescription: string) => `Added ${componentDescription}`,
 	eraseAction: (componentDescription: string, numElems: number) => `Erased ${numElems} ${componentDescription}`,
 	duplicateAction: (componentDescription: string, numElems: number) => `Duplicated ${numElems} ${componentDescription}`,
+	inverseOf: (actionDescription: string) => `Inverse of ${actionDescription}`,
 	elements: 'Elements',
 	erasedNoElements: 'Erased nothing',
 	duplicatedNoElements: 'Duplicated nothing',

package/src/components/AbstractComponent.ts

@@ -1,17 +1,16 @@
-import Command from '../commands/Command';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
 
-type LoadSaveData = (string[]|Record<symbol, string|number>);
+export type LoadSaveData = (string[]|Record<symbol, string|number>);
 export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-type DeserializeCallback = (data: string)=>AbstractComponent;
+export type DeserializeCallback = (data: string)=>AbstractComponent;
 type ComponentId = string;
 
 export default abstract class AbstractComponent {
@@ -38,6 +37,8 @@ export default abstract class AbstractComponent {
 		}
 	}
 
+	// Returns a unique ID for this element.
+	// @see { @link EditorImage!default.lookupElement }
 	public getId() {
 		return this.id;
 	}
@@ -77,14 +78,14 @@ export default abstract class AbstractComponent {
 	public abstract intersects(lineSegment: LineSegment2): boolean;
 
 	// Return null iff this object cannot be safely serialized/deserialized.
-	protected abstract serializeToString(): string|null;
+	protected abstract serializeToJSON(): any[]|Record<string, any>|number|string|null;
 
 	// Private helper for transformBy: Apply the given transformation to all points of this.
 	protected abstract applyTransformation(affineTransfm: Mat33): void;
 
 	// Returns a command that, when applied, transforms this by [affineTransfm] and
 	// updates the editor.
-	public transformBy(affineTransfm: Mat33): Command {
+	public transformBy(affineTransfm: Mat33): SerializableCommand {
 		return new AbstractComponent.TransformElementCommand(affineTransfm, this);
 	}
 
@@ -128,13 +129,12 @@ export default abstract class AbstractComponent {
 			editor.queueRerender();
 		}
 
-		public description(localizationTable: EditorLocalization) {
+		public description(_editor: Editor, localizationTable: EditorLocalization) {
 			return localizationTable.transformedElements(1);
 		}
 
 		static {
-			SerializableCommand.register('transform-element', (data: string, editor: Editor) => {
-				const json = JSON.parse(data);
+			SerializableCommand.register('transform-element', (json: any, editor: Editor) => {
 				const elem = editor.image.lookupElement(json.id);
 
 				if (!elem) {
@@ -154,11 +154,11 @@ export default abstract class AbstractComponent {
 			});
 		}
 
-		protected serializeToString(): string {
-			return JSON.stringify({
+		protected serializeToJSON() {
+			return {
 				id: this.component.getId(),
 				transfm: this.affineTransfm.toArray(),
-			});
+			};
 		}
 	};
 
@@ -178,26 +178,33 @@ export default abstract class AbstractComponent {
 		return clone;
 	}
 
+	// Convert the component to an object that can be passed to
+	// `JSON.stringify`.
+	//
+	// Do not rely on the output of this function to take a particular form —
+	// this function's output can change form without a major version increase.
 	public serialize() {
-		const data = this.serializeToString();
+		const data = this.serializeToJSON();
 
 		if (data === null) {
 			throw new Error(`${this} cannot be serialized.`);
 		}
 
-		return JSON.stringify({
+		return {
 			name: this.componentKind,
 			zIndex: this.zIndex,
 			id: this.id,
 			loadSaveData: this.loadSaveData,
 			data,
-		});
+		};
 	}
 
-	// Returns true if [data] is not deserializable. May return false even if [data]
+	// Returns true if `data` is not deserializable. May return false even if [data]
 	// is not deserializable.
-	private static isNotDeserializable(data: string) {
-		const json = JSON.parse(data);
+	private static isNotDeserializable(json: any|string) {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
 
 		if (typeof json !== 'object') {
 			return true;
@@ -214,12 +221,16 @@ export default abstract class AbstractComponent {
 		return false;
 	}
 
-	public static deserialize(data: string): AbstractComponent {
-		if (AbstractComponent.isNotDeserializable(data)) {
-			throw new Error(`Element with data ${data} cannot be deserialized.`);
+	// Convert a string or an object produced by `JSON.parse` into an `AbstractComponent`.
+	public static deserialize(json: string|any): AbstractComponent {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
+		if (AbstractComponent.isNotDeserializable(json)) {
+			throw new Error(`Element with data ${json} cannot be deserialized.`);
 		}
 
-		const json = JSON.parse(data);
 		const instance = this.deserializationCallbacks[json.name]!(json.data);
 		instance.zIndex = json.zIndex;
 		instance.id = json.id;

package/src/components/SVGGlobalAttributesObject.ts

@@ -1,6 +1,13 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @internal
+// @packageDocumentation
+//
+
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -44,7 +51,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
 		return localization.svgObject;
 	}
 
-	protected serializeToString(): string | null {
+	protected serializeToJSON(): string | null {
 		return JSON.stringify(this.attrs);
 	}
 

package/src/components/Stroke.test.ts

@@ -1,12 +1,10 @@
-/* @jest-environment jsdom */
-
 import Color4 from '../Color4';
-import Path from '../geometry/Path';
-import { Vec2 } from '../geometry/Vec2';
+import Path from '../math/Path';
+import { Vec2 } from '../math/Vec2';
 import Stroke from './Stroke';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';
 import createEditor from '../testing/createEditor';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 
 loadExpectExtensions();
 
@@ -60,7 +58,7 @@ describe('Stroke', () => {
 	});
 
 	it('strokes should deserialize from JSON data', () => {
-		const deserialized = Stroke.deserializeFromString(`[
+		const deserialized = Stroke.deserializeFromJSON(`[
 			{
 				"style": { "fill": "#f00" },
 				"path": "m0,0 l10,10z"

package/src/components/Stroke.ts

@@ -1,7 +1,7 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Path from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
@@ -111,19 +111,23 @@ export default class Stroke extends AbstractComponent {
 		return new Stroke(this.parts);
 	}
 
-	protected serializeToString(): string | null {
-		return JSON.stringify(this.parts.map(part => {
+	protected serializeToJSON() {
+		return this.parts.map(part => {
 			return {
 				style: styleToJSON(part.style),
 				path: part.path.serialize(),
 			};
-		}));
+		});
 	}
 
-	public static deserializeFromString(data: string): Stroke {
-		const json = JSON.parse(data);
+	/** @internal */
+	public static deserializeFromJSON(json: any): Stroke {
+		if (typeof json === 'string') {
+			json = JSON.parse(json);
+		}
+
 		if (typeof json !== 'object' || typeof json.length !== 'number') {
-			throw new Error(`${data} is missing required field, parts, or parts is of the wrong type.`);
+			throw new Error(`${json} is missing required field, parts, or parts is of the wrong type.`);
 		}
 
 		const pathSpec: RenderablePathSpec[] = json.map((part: any) => {
@@ -134,4 +138,4 @@ export default class Stroke extends AbstractComponent {
 	}
 }
 
-AbstractComponent.registerComponent('stroke', Stroke.deserializeFromString);
+AbstractComponent.registerComponent('stroke', Stroke.deserializeFromJSON);

package/src/components/Text.test.ts

@@ -1,6 +1,6 @@
 import Color4 from '../Color4';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractComponent from './AbstractComponent';
 import Text, { TextStyle } from './Text';
 import { loadExpectExtensions } from '../testing/loadExpectExtensions';