js-draw 0.1.11 → 0.2.0

package/src/Editor.ts

@@ -1,3 +1,21 @@
+/**
+ * The main entrypoint for the full editor.
+ * 
+ * @example
+ * To create an editor with a toolbar,
+ * ```
+ * const editor = new Editor(document.body);
+ * 
+ * const toolbar = editor.addToolbar();
+ * toolbar.addActionButton('Save', () => {
+ *   const saveData = editor.toSVG().outerHTML;
+ *   // Do something with saveData...
+ * });
+ * ```
+ * 
+ * @packageDocumentation
+ */
+
 
 import EditorImage from './EditorImage';
 import ToolController from './tools/ToolController';
@@ -6,8 +24,8 @@ import Command from './commands/Command';
 import UndoRedoHistory from './UndoRedoHistory';
 import Viewport from './Viewport';
 import EventDispatcher from './EventDispatcher';
-import { Point2, Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import { Point2, Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import HTMLToolbar from './toolbar/HTMLToolbar';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import Display, { RenderingMode } from './rendering/Display';
@@ -15,49 +33,117 @@ import SVGRenderer from './rendering/renderers/SVGRenderer';
 import Color4 from './Color4';
 import SVGLoader from './SVGLoader';
 import Pointer from './Pointer';
-import Mat33 from './geometry/Mat33';
-import Rect2 from './geometry/Rect2';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 
 export interface EditorSettings {
-	// Defaults to RenderingMode.CanvasRenderer
+	/** Defaults to `RenderingMode.CanvasRenderer` */
 	renderingMode: RenderingMode,
 
-	// Uses a default English localization if a translation is not given.
+	/** Uses a default English localization if a translation is not given. */
 	localization: Partial<EditorLocalization>,
 
-	// True if touchpad/mousewheel scrolling should scroll the editor instead of the document.
-	// This does not include pinch-zoom events.
-	// Defaults to true.
+	/**
+	 * `true` if touchpad/mousewheel scrolling should scroll the editor instead of the document.
+	 * This does not include pinch-zoom events.
+	 * Defaults to true.
+	 */
 	wheelEventsEnabled: boolean|'only-if-focused';
 
+	/** Minimum zoom fraction (e.g. 0.5 → 50% zoom). */
 	minZoom: number,
 	maxZoom: number,
 }
 
+// { @inheritDoc Editor! }
 export class Editor {
 	// Wrapper around the viewport and toolbar
 	private container: HTMLElement;
 	private renderingRegion: HTMLElement;
 
-	public history: UndoRedoHistory;
 	public display: Display;
+
+	/**
+	 * Handles undo/redo.
+	 * 
+	 * @example
+	 * ```
+	 * const editor = new Editor(document.body);
+	 * 
+	 * // Do something undoable.
+	 * // ...
+	 * 
+	 * // Undo the last action
+	 * editor.history.undo();
+	 * ```
+	 */
+	public history: UndoRedoHistory;
+
+	/**
+	 * Data structure for adding/removing/querying objects in the image.
+	 * 
+	 * @example
+	 * ```
+	 * const editor = new Editor(document.body);
+	 * 
+	 * // Create a path.
+	 * const stroke = new Stroke([
+	 *   Path.fromString('M0,0 L30,30 z').toRenderable({ fill: Color4.black }),
+	 * ]);
+	 * const addElementCommand = editor.image.addElement(stroke);
+	 * 
+	 * // Add the stroke to the editor
+	 * editor.dispatch(addElementCommand);
+	 * ```
+	 */
 	public image: EditorImage;
 
-	// Viewport for the exported/imported image
+	/** Viewport for the exported/imported image. */
 	private importExportViewport: Viewport;
+
+	/** @internal */
 	public localization: EditorLocalization;
 
 	public viewport: Viewport;
 	public toolController: ToolController;
+
+	/**
+	 * Global event dispatcher/subscriber.
+	 * @see {@link types.EditorEventType}
+	 */
 	public notifier: EditorNotifier;
 
 	private loadingWarning: HTMLElement;
 	private accessibilityAnnounceArea: HTMLElement;
+	private accessibilityControlArea: HTMLTextAreaElement;
 
 	private settings: EditorSettings;
 
+	/**
+	 * @example
+	 * ```
+	 * const container = document.body;
+	 * 
+	 * // Create an editor
+	 * const editor = new Editor(container, {
+	 *   // 2e-10 and 1e12 are the default values for minimum/maximum zoom.
+	 *   minZoom: 2e-10,
+	 *   maxZoom: 1e12,
+	 * });
+	 * 
+	 * // Add the default toolbar
+	 * const toolbar = editor.addToolbar();
+	 * toolbar.addActionButton({
+	 *   label: 'Save'
+	 *   icon: createSaveIcon(),
+	 * }, () => {
+	 *   const saveData = editor.toSVG().outerHTML;
+	 *   // Do something with saveData
+	 * });
+	 * ```
+	 */
 	public constructor(
 		parent: HTMLElement,
 		settings: Partial<EditorSettings> = {},
@@ -86,15 +172,23 @@ export class Editor {
 		this.loadingWarning.ariaLive = 'polite';
 		this.container.appendChild(this.loadingWarning);
 
+		this.accessibilityControlArea = document.createElement('textarea');
+		this.accessibilityControlArea.setAttribute('placeholder', this.localization.accessibilityInputInstructions);
+		this.accessibilityControlArea.style.opacity = '0';
+		this.accessibilityControlArea.style.width = '0';
+		this.accessibilityControlArea.style.height = '0';
+		this.accessibilityControlArea.style.position = 'absolute';
+
 		this.accessibilityAnnounceArea = document.createElement('div');
-		this.accessibilityAnnounceArea.ariaLive = 'assertive';
+		this.accessibilityAnnounceArea.setAttribute('aria-live', 'assertive');
 		this.accessibilityAnnounceArea.className = 'accessibilityAnnouncement';
 		this.container.appendChild(this.accessibilityAnnounceArea);
 
 		this.renderingRegion.style.touchAction = 'none';
 		this.renderingRegion.className = 'imageEditorRenderArea';
+		this.renderingRegion.appendChild(this.accessibilityControlArea);
 		this.renderingRegion.setAttribute('tabIndex', '0');
-		this.renderingRegion.ariaLabel = this.localization.imageEditor;
+		this.renderingRegion.setAttribute('alt', '');
 
 		this.notifier = new EventDispatcher();
 		this.importExportViewport = new Viewport(this.notifier);
@@ -136,14 +230,19 @@ export class Editor {
 		});
 	}
 
-	// Returns a reference to this' container.
-	// Example usage:
-	//   editor.getRootElement().style.height = '500px';
+	/**
+	 * @returns a reference to the editor's container.
+	 * 
+	 * @example
+	 * ```
+	 *   editor.getRootElement().style.height = '500px';
+	 * ```
+	 */
 	public getRootElement(): HTMLElement {
 		return this.container;
 	}
 
-	// [fractionLoaded] should be a number from 0 to 1, where 1 represents completely loaded.
+	/** @param fractionLoaded - should be a number from 0 to 1, where 1 represents completely loaded. */
 	public showLoadingWarning(fractionLoaded: number) {
 		const loadingPercent = Math.round(fractionLoaded * 100);
 		this.loadingWarning.innerText = this.localization.loading(loadingPercent);
@@ -156,10 +255,23 @@ export class Editor {
 		this.announceForAccessibility(this.localization.doneLoading);
 	}
 
+	private previousAccessibilityAnnouncement: string = '';
+
+	// Announce `message` for screen readers. If `message` is the same as the previous
+	// message, it is re-announced.
 	public announceForAccessibility(message: string) {
+		// Force re-announcing an announcement if announced again.
+		if (message === this.previousAccessibilityAnnouncement) {
+			message = message + '. ';
+		}
 		this.accessibilityAnnounceArea.innerText = message;
+		this.previousAccessibilityAnnouncement = message;
 	}
 
+	/**
+	 * Creates a toolbar. If `defaultLayout` is true, default buttons are used.
+	 * @returns a reference to the toolbar.
+	 */
 	public addToolbar(defaultLayout: boolean = true): HTMLToolbar {
 		const toolbar = new HTMLToolbar(this, this.container, this.localization);
 
@@ -319,13 +431,19 @@ export class Editor {
 			});
 			this.queueRerender();
 		});
+
+		this.accessibilityControlArea.addEventListener('input', () => {
+			this.accessibilityControlArea.value = '';
+		});
 	}
 
-	// Adds event listners for keypresses to [elem] and forwards those events to the
-	// editor.
+	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
 	public handleKeyEventsFrom(elem: HTMLElement) {
 		elem.addEventListener('keydown', evt => {
-			if (this.toolController.dispatchInputEvent({
+			if (evt.key === 't' || evt.key === 'T') {
+				evt.preventDefault();
+				this.display.rerenderAsText();
+			} else if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.KeyPressEvent,
 				key: evt.key,
 				ctrlKey: evt.ctrlKey,
@@ -333,7 +451,7 @@ export class Editor {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
 				this.renderingRegion.blur();
-			}
+			} 
 		});
 
 		elem.addEventListener('keyup', evt => {
@@ -347,7 +465,7 @@ export class Editor {
 		});
 	}
 
-	// Adds to history by default
+	/** `apply` a command. `command` will be announced for accessibility. */
 	public dispatch(command: Command, addToHistory: boolean = true) {
 		if (addToHistory) {
 			// .push applies [command] to this
@@ -356,10 +474,24 @@ export class Editor {
 			command.apply(this);
 		}
 
-		this.announceForAccessibility(command.description(this.localization));
+		this.announceForAccessibility(command.description(this, this.localization));
 	}
 
-	// Dispatches a command without announcing it. By default, does not add to history.
+	/**
+	 * Dispatches a command without announcing it. By default, does not add to history.
+	 * Use this to show finalized commands that don't need to have `announceForAccessibility`
+	 * called.
+	 * 
+	 * Prefer `command.apply(editor)` for incomplete commands. `dispatchNoAnnounce` may allow
+	 * clients to listen for the application of commands (e.g. `SerializableCommand`s so they can
+	 * be sent across the network), while `apply` does not.
+	 * 
+	 * @example
+	 * ```
+	 * const addToHistory = false;
+	 * editor.dispatchNoAnnounce(editor.viewport.zoomTo(someRectangle), addToHistory);
+	 * ```
+	 */
 	public dispatchNoAnnounce(command: Command, addToHistory: boolean = false) {
 		if (addToHistory) {
 			this.history.push(command);
@@ -368,11 +500,13 @@ export class Editor {
 		}
 	}
 
-	// Apply a large transformation in chunks.
-	// If [apply] is false, the commands are unapplied.
-	// Triggers a re-render after each [updateChunkSize]-sized group of commands
-	// has been applied.
-	private async asyncApplyOrUnapplyCommands(
+	/**
+	 * Apply a large transformation in chunks.
+	 * If `apply` is `false`, the commands are unapplied.
+	 * Triggers a re-render after each `updateChunkSize`-sized group of commands
+	 * has been applied.
+	 */
+	public async asyncApplyOrUnapplyCommands(
 		commands: Command[], apply: boolean, updateChunkSize: number
 	) {
 		this.display.setDraftMode(true);
@@ -401,23 +535,27 @@ export class Editor {
 		this.hideLoadingWarning();
 	}
 
+	// @see {@link #asyncApplyOrUnapplyCommands }
 	public asyncApplyCommands(commands: Command[], chunkSize: number) {
 		return this.asyncApplyOrUnapplyCommands(commands, true, chunkSize);
 	}
 
+	// @see {@link #asyncApplyOrUnapplyCommands }
 	public asyncUnapplyCommands(commands: Command[], chunkSize: number) {
 		return this.asyncApplyOrUnapplyCommands(commands, false, chunkSize);
 	}
 
 	private announceUndoCallback = (command: Command) => {
-		this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this.localization)));
+		this.announceForAccessibility(this.localization.undoAnnouncement(command.description(this, this.localization)));
 	};
 
 	private announceRedoCallback = (command: Command) => {
-		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this.localization)));
+		this.announceForAccessibility(this.localization.redoAnnouncement(command.description(this, this.localization)));
 	};
 
 	private rerenderQueued: boolean = false;
+	// Schedule a re-render for some time in the near future. Does not schedule an additional
+	// re-render if a re-render is already queued.
 	public queueRerender() {
 		if (!this.rerenderQueued) {
 			this.rerenderQueued = true;
@@ -464,11 +602,13 @@ export class Editor {
 		this.display.getWetInkRenderer().clear();
 	}
 
-	// Focuses the region used for text input
+	// Focuses the region used for text input/key commands.
 	public focus() {
 		this.renderingRegion.focus();
 	}
 
+	// Creates an element that will be positioned on top of the dry/wet ink
+	// renderers.
 	public createHTMLOverlay(overlay: HTMLElement) {
 		overlay.classList.add('overlay');
 		this.container.appendChild(overlay);
@@ -487,7 +627,7 @@ export class Editor {
 	}
 
 	// Dispatch a pen event to the currently selected tool.
-	// Intented for unit tests.
+	// Intended primarially for unit tests.
 	public sendPenEvent(
 		eventType: InputEvtType.PointerDownEvt|InputEvtType.PointerMoveEvt|InputEvtType.PointerUpEvt,
 		point: Point2,
@@ -567,7 +707,7 @@ export class Editor {
 		return this.importExportViewport.visibleRect;
 	}
 
-	// Resize the output SVG
+	// Resize the output SVG to match `imageRect`.
 	public setImportExportRect(imageRect: Rect2): Command {
 		const origSize = this.importExportViewport.visibleRect.size;
 		const origTransform = this.importExportViewport.canvasToScreenTransform;
@@ -587,14 +727,18 @@ export class Editor {
 				editor.queueRerender();
 			}
 
-			public description(localizationTable: EditorLocalization) {
+			public description(_editor: Editor, localizationTable: EditorLocalization) {
 				return localizationTable.resizeOutputCommand(imageRect);
 			}
 		};
 	}
 
-	// Alias for loadFrom(SVGLoader.fromString).
-	// This is particularly useful when accessing a bundled version of the editor.
+	/**
+	 * Alias for loadFrom(SVGLoader.fromString).
+	 * 
+	 * This is particularly useful when accessing a bundled version of the editor,
+	 * where `SVGLoader.fromString` is unavailable.
+	 */
 	public async loadFromSVG(svgData: string) {
 		const loader = SVGLoader.fromString(svgData);
 		await this.loadFrom(loader);

package/src/EditorImage.test.ts

@@ -1,9 +1,7 @@
-/* @jest-environment jsdom */
-
 import EditorImage from './EditorImage';
 import Stroke from './components/Stroke';
-import { Vec2 } from './geometry/Vec2';
-import Path, { PathCommandType } from './geometry/Path';
+import { Vec2 } from './math/Vec2';
+import Path, { PathCommandType } from './math/Path';
 import Color4 from './Color4';
 import DummyRenderer from './rendering/renderers/DummyRenderer';
 import createEditor from './testing/createEditor';

package/src/EditorImage.ts

@@ -1,13 +1,13 @@
 import Editor from './Editor';
 import AbstractRenderer from './rendering/renderers/AbstractRenderer';
-import Command from './commands/Command';
 import Viewport from './Viewport';
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import RenderingCache from './rendering/caching/RenderingCache';
 import SerializableCommand from './commands/SerializableCommand';
 
+// @internal
 export const sortLeavesByZIndex = (leaves: Array<ImageNode>) => {
 	leaves.sort((a, b) => a.getContent()!.getZIndex() - b.getContent()!.getZIndex());
 };
@@ -17,6 +17,7 @@ export default class EditorImage {
 	private root: ImageNode;
 	private componentsById: Record<string, AbstractComponent>;
 
+	// @internal
 	public constructor() {
 		this.root = new ImageNode();
 		this.componentsById = {};
@@ -33,15 +34,17 @@ export default class EditorImage {
 		return null;
 	}
 
+	/** @internal */
 	public renderWithCache(screenRenderer: AbstractRenderer, cache: RenderingCache, viewport: Viewport) {
 		cache.render(screenRenderer, this.root, viewport);
 	}
 
+	/** @internal */
 	public render(renderer: AbstractRenderer, viewport: Viewport) {
 		this.root.render(renderer, viewport.visibleRect);
 	}
 
-	// Renders all nodes, even ones not within the viewport
+	/** Renders all nodes, even ones not within the viewport. @internal */
 	public renderAll(renderer: AbstractRenderer) {
 		const leaves = this.root.getLeaves();
 		sortLeavesByZIndex(leaves);
@@ -58,6 +61,7 @@ export default class EditorImage {
 		return leaves.map(leaf => leaf.getContent()!);
 	}
 
+	/** @internal */
 	public onDestroyElement(elem: AbstractComponent) {
 		delete this.componentsById[elem.getId()];
 	}
@@ -71,7 +75,7 @@ export default class EditorImage {
 		return this.root.addLeaf(elem);
 	}
 
-	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): Command {
+	public static addElement(elem: AbstractComponent, applyByFlattening: boolean = false): SerializableCommand {
 		return new EditorImage.AddElementCommand(elem, applyByFlattening);
 	}
 
@@ -108,20 +112,21 @@ export default class EditorImage {
 			editor.queueRerender();
 		}
 
-		public description(localization: EditorLocalization) {
+		public description(_editor: Editor, localization: EditorLocalization) {
 			return localization.addElementAction(this.element.description(localization));
 		}
 
-		protected serializeToString() {
-			return JSON.stringify({
+		protected serializeToJSON() {
+			return {
 				elemData: this.element.serialize(),
-			});
+			};
 		}
 
 		static {
-			SerializableCommand.register('add-element', (data: string, _editor: Editor) => {
-				const json = JSON.parse(data);
-				const elem = AbstractComponent.deserialize(json.elemData);
+			SerializableCommand.register('add-element', (json: any, editor: Editor) => {
+				const id = json.elemData.id;
+				const foundElem = editor.image.lookupElement(id);
+				const elem = foundElem ?? AbstractComponent.deserialize(json.elemData);
 				return new EditorImage.AddElementCommand(elem);
 			});
 		}
@@ -130,7 +135,7 @@ export default class EditorImage {
 
 type TooSmallToRenderCheck = (rect: Rect2)=> boolean;
 
-// TODO: Assign leaf nodes to CacheNodes. When leaf nodes are modified, the corresponding CacheNodes can be updated.
+/** Part of the Editor's image. @internal */
 export class ImageNode {
 	private content: AbstractComponent|null;
 	private bbox: Rect2;
@@ -182,19 +187,29 @@ export class ImageNode {
 	// Returns a list of `ImageNode`s with content (and thus no children).
 	public getLeavesIntersectingRegion(region: Rect2, isTooSmall?: TooSmallToRenderCheck): ImageNode[] {
 		const result: ImageNode[] = [];
+		let current: ImageNode|undefined;
+		const workList: ImageNode[] = [];
 
-		// Don't render if too small
-		if (isTooSmall?.(this.bbox)) {
-			return [];
-		}
+		workList.push(this);
+		const toNext = () => {
+			current = undefined;
 
-		if (this.content !== null && this.getBBox().intersects(region)) {
-			result.push(this);
-		}
+			const next = workList.pop();
+			if (next && !isTooSmall?.(next.bbox)) {
+				current = next;
+
+				if (current.content !== null && current.getBBox().intersection(region)) {
+					result.push(current);
+				}
 
-		const children = this.getChildrenIntersectingRegion(region);
-		for (const child of children) {
-			result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
+				workList.push(
+					...current.getChildrenIntersectingRegion(region)
+				);
+			}
+		};
+
+		while (workList.length > 0) {
+			toNext();
 		}
 
 		return result;
@@ -239,15 +254,18 @@ export class ImageNode {
 		// share a parent.
 		const leafBBox = leaf.getBBox();
 		if (leafBBox.containsRect(this.getBBox())) {
-			// Create a node for this' children and for the new content..
 			const nodeForNewLeaf = new ImageNode(this);
-			const nodeForChildren = new ImageNode(this);
 
-			nodeForChildren.children = this.children;
-			this.children = [nodeForNewLeaf, nodeForChildren];
-			nodeForChildren.recomputeBBox(true);
-			nodeForChildren.updateParents();
+			if (this.children.length < this.targetChildCount) {
+				this.children.push(nodeForNewLeaf);
+			} else {
+				const nodeForChildren = new ImageNode(this);
 
+				nodeForChildren.children = this.children;
+				this.children = [nodeForNewLeaf, nodeForChildren];
+				nodeForChildren.recomputeBBox(true);
+				nodeForChildren.updateParents();
+			}
 			return nodeForNewLeaf.addLeaf(leaf);
 		}
 

package/src/EventDispatcher.ts

@@ -1,13 +1,28 @@
-// Code shared with Joplin
+/**
+ * Handles notifying listeners of events.
+ *
+ * `EventKeyType` is used to distinguish events (e.g. a `ClickEvent` vs a `TouchEvent`)
+ * while `EventMessageType` is the type of the data sent with an event (can be `void`).
+ *
+ * @example
+ * ```
+ * const dispatcher = new EventDispatcher<'event1'|'event2'|'event3', void>();
+ * dispatcher.on('event1', () => {
+ *   console.log('Event 1 triggered.');
+ * });
+ * dispatcher.dispatch('event1');
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+// Code shared with Joplin (js-draw was originally intended to be part of Joplin).
 
 type Listener<Value> = (data: Value)=> void;
 type CallbackHandler<EventType> = (data: EventType)=> void;
 
-// EventKeyType is used to distinguish events (e.g. a 'ClickEvent' vs a 'TouchEvent')
-// while EventMessageType is the type of the data sent with an event (can be `void`)
+// { @inheritDoc EventDispatcher! }
 export default class EventDispatcher<EventKeyType extends string|symbol|number, EventMessageType> {
-	// Partial marks all fields as optional. To initialize with an empty object, this is required.
-	// See https://stackoverflow.com/a/64526384
 	private listeners: Partial<Record<EventKeyType, Array<Listener<EventMessageType>>>>;
 	public constructor() {
 		this.listeners = {};
@@ -38,7 +53,7 @@ export default class EventDispatcher<EventKeyType extends string|symbol|number,
 		};
 	}
 
-	// Equivalent to calling .remove() on the object returned by .on
+	/** Removes an event listener. This is equivalent to calling `.remove()` on the object returned by `.on`. */
 	public off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>) {
 		const listeners = this.listeners[eventName];
 		if (!listeners) return;

package/src/Pointer.ts

@@ -1,4 +1,4 @@
-import { Point2, Vec2 } from './geometry/Vec2';
+import { Point2, Vec2 } from './math/Vec2';
 import Viewport from './Viewport';
 
 export enum PointerDevice {
@@ -11,7 +11,7 @@ export enum PointerDevice {
 }
 
 // Provides a snapshot containing information about a pointer. A Pointer
-// object is immutable --- it will not be updated when the pointer's information changes.
+// object is immutable — it will not be updated when the pointer's information changes.
 export default class Pointer {
 	private constructor(
         // The (x, y) position of the pointer relative to the top-left corner
@@ -31,11 +31,12 @@ export default class Pointer {
         // Unique ID for the pointer
         public readonly id: number,
 
-        // Numeric timestamp (milliseconds, as from (new Date).getTime())
+        // Numeric timestamp (milliseconds, as from `(new Date).getTime()`)
         public readonly timeStamp: number,
 	) {
 	}
 
+	// Creates a Pointer from a DOM event.
 	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport): Pointer {
 		const screenPos = Vec2.of(evt.offsetX, evt.offsetY);
 

package/src/SVGLoader.ts

@@ -4,10 +4,10 @@ import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import Text, { TextStyle } from './components/Text';
 import UnknownSVGObject from './components/UnknownSVGObject';
-import Mat33 from './geometry/Mat33';
-import Path from './geometry/Path';
-import Rect2 from './geometry/Rect2';
-import { Vec2 } from './geometry/Vec2';
+import Mat33 from './math/Mat33';
+import Path from './math/Path';
+import Rect2 from './math/Rect2';
+import { Vec2 } from './math/Vec2';
 import { RenderablePathSpec } from './rendering/renderers/AbstractRenderer';
 import RenderingStyle from './rendering/RenderingStyle';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
@@ -210,8 +210,16 @@ export default class SVGLoader implements ImageLoader {
 			transformProperty = elem.style.transform || 'none';
 		}
 
-		// Compute transform matrix
-		let transform = Mat33.fromCSSMatrix(transformProperty);
+		// Compute transform matrix. Prefer the actual .style.transform
+		// to the computed stylesheet -- in some browsers, the computedStyles version
+		// can have lower precision.
+		let transform;
+		try {
+			transform = Mat33.fromCSSMatrix(elem.style.transform);
+		} catch(_e) {
+			transform = Mat33.fromCSSMatrix(transformProperty);
+		}
+
 		const supportedAttrs = [];
 		const elemX = elem.getAttribute('x');
 		const elemY = elem.getAttribute('y');