js-draw 0.3.2 → 0.4.0

package/src/Editor.ts

@@ -1,18 +1,18 @@
 /**
  * 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
  */
 
@@ -38,6 +38,9 @@ import Rect2 from './math/Rect2';
 import { EditorLocalization } from './localization';
 import getLocalizationTable from './localizations/getLocalizationTable';
 
+type HTMLPointerEventType = 'pointerdown'|'pointermove'|'pointerup'|'pointercancel';
+type HTMLPointerEventFilter = (eventName: HTMLPointerEventType, event: PointerEvent)=>boolean;
+
 export interface EditorSettings {
 	/** Defaults to `RenderingMode.CanvasRenderer` */
 	renderingMode: RenderingMode,
@@ -67,14 +70,14 @@ export class Editor {
 
 	/**
 	 * Handles undo/redo.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 * const editor = new Editor(document.body);
-	 * 
+	 *
 	 * // Do something undoable.
 	 * // ...
-	 * 
+	 *
 	 * // Undo the last action
 	 * editor.history.undo();
 	 * ```
@@ -83,17 +86,17 @@ export class Editor {
 
 	/**
 	 * 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);
 	 * ```
@@ -126,14 +129,14 @@ export class Editor {
 	 * @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({
@@ -224,7 +227,7 @@ export class Editor {
 					if (oldZoom <= this.settings.maxZoom && oldZoom >= this.settings.minZoom) {
 						resetTransform = evt.oldTransform;
 					}
-	
+
 					this.viewport.resetTransform(resetTransform);
 				}
 			}
@@ -233,7 +236,7 @@ export class Editor {
 
 	/**
 	 * @returns a reference to the editor's container.
-	 * 
+	 *
 	 * @example
 	 * ```
 	 *   editor.getRootElement().style.height = '500px';
@@ -285,96 +288,7 @@ export class Editor {
 	}
 
 	private registerListeners() {
-		const pointers: Record<number, Pointer> = {};
-		const getPointerList = () => {
-			const nowTime = (new Date()).getTime();
-
-			const res: Pointer[] = [];
-			for (const id in pointers) {
-				const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
-				if (pointers[id] && (nowTime - pointers[id].timeStamp) < maxUnupdatedTime) {
-					res.push(pointers[id]);
-				}
-			}
-			return res;
-		};
-
-		// May be required to prevent text selection on iOS/Safari:
-		// See https://stackoverflow.com/a/70992717/17055750
-		this.renderingRegion.addEventListener('touchstart', evt => evt.preventDefault());
-		this.renderingRegion.addEventListener('contextmenu', evt => {
-			// Don't show a context menu
-			evt.preventDefault();
-		});
-
-		this.renderingRegion.addEventListener('pointerdown', evt => {
-			const pointer = Pointer.ofEvent(evt, true, this.viewport);
-			pointers[pointer.id] = pointer;
-
-			this.renderingRegion.setPointerCapture(pointer.id);
-			const event: PointerEvt = {
-				kind: InputEvtType.PointerDownEvt,
-				current: pointer,
-				allPointers: getPointerList(),
-			};
-			this.toolController.dispatchInputEvent(event);
-
-			return true;
-		});
-
-		this.renderingRegion.addEventListener('pointermove', evt => {
-			const pointer = Pointer.ofEvent(
-				evt, pointers[evt.pointerId]?.down ?? false, this.viewport
-			);
-			if (pointer.down) {
-				const prevData = pointers[pointer.id];
-
-				if (prevData) {
-					const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
-
-					// If the pointer moved less than two pixels, don't send a new event.
-					if (distanceMoved < 2) {
-						return;
-					}
-				}
-
-				pointers[pointer.id] = pointer;
-				if (this.toolController.dispatchInputEvent({
-					kind: InputEvtType.PointerMoveEvt,
-					current: pointer,
-					allPointers: getPointerList(),
-				})) {
-					evt.preventDefault();
-				}
-			}
-		});
-
-		const pointerEnd = (evt: PointerEvent) => {
-			const pointer = Pointer.ofEvent(evt, false, this.viewport);
-			if (!pointers[pointer.id]) {
-				return;
-			}
-
-			pointers[pointer.id] = pointer;
-			this.renderingRegion.releasePointerCapture(pointer.id);
-			if (this.toolController.dispatchInputEvent({
-				kind: InputEvtType.PointerUpEvt,
-				current: pointer,
-				allPointers: getPointerList(),
-			})) {
-				evt.preventDefault();
-			}
-			delete pointers[pointer.id];
-		};
-
-		this.renderingRegion.addEventListener('pointerup', evt => {
-			pointerEnd(evt);
-		});
-
-		this.renderingRegion.addEventListener('pointercancel', evt => {
-			pointerEnd(evt);
-		});
-
+		this.handlePointerEventsFrom(this.renderingRegion);
 		this.handleKeyEventsFrom(this.renderingRegion);
 
 		this.container.addEventListener('wheel', evt => {
@@ -404,7 +318,10 @@ export class Editor {
 				delta = Vec3.of(0, 0, evt.deltaY);
 			}
 
-			const pos = Vec2.of(evt.offsetX, evt.offsetY);
+			// Ensure that `pos` is relative to `this.container`
+			const bbox = this.container.getBoundingClientRect();
+			const pos = Vec2.of(evt.clientX, evt.clientY).minus(Vec2.of(bbox.left, bbox.top));
+
 			if (this.toolController.dispatchInputEvent({
 				kind: InputEvtType.WheelEvt,
 				delta,
@@ -459,6 +376,91 @@ export class Editor {
 		});
 	}
 
+	private pointers: Record<number, Pointer> = {};
+	private getPointerList() {
+		const nowTime = (new Date()).getTime();
+
+		const res: Pointer[] = [];
+		for (const id in this.pointers) {
+			const maxUnupdatedTime = 2000; // Maximum time without a pointer update (ms)
+			if (this.pointers[id] && (nowTime - this.pointers[id].timeStamp) < maxUnupdatedTime) {
+				res.push(this.pointers[id]);
+			}
+		}
+		return res;
+	}
+
+	/**
+	 * Dispatches a `PointerEvent` to the editor. The target element for `evt` must have the same top left
+	 * as the content of the editor.
+	 */
+	public handleHTMLPointerEvent(eventType: 'pointerdown'|'pointermove'|'pointerup'|'pointercancel', evt: PointerEvent): boolean {
+		const eventsRelativeTo = this.renderingRegion;
+		const eventTarget = (evt.target as HTMLElement|null) ?? this.renderingRegion;
+
+		if (eventType === 'pointerdown') {
+			const pointer = Pointer.ofEvent(evt, true, this.viewport, eventsRelativeTo);
+			this.pointers[pointer.id] = pointer;
+
+			eventTarget.setPointerCapture(pointer.id);
+			const event: PointerEvt = {
+				kind: InputEvtType.PointerDownEvt,
+				current: pointer,
+				allPointers: this.getPointerList(),
+			};
+			this.toolController.dispatchInputEvent(event);
+
+			return true;
+		}
+		else if (eventType === 'pointermove') {
+			const pointer = Pointer.ofEvent(
+				evt, this.pointers[evt.pointerId]?.down ?? false, this.viewport, eventsRelativeTo
+			);
+			if (pointer.down) {
+				const prevData = this.pointers[pointer.id];
+
+				if (prevData) {
+					const distanceMoved = pointer.screenPos.minus(prevData.screenPos).magnitude();
+
+					// If the pointer moved less than two pixels, don't send a new event.
+					if (distanceMoved < 2) {
+						return false;
+					}
+				}
+
+				this.pointers[pointer.id] = pointer;
+				if (this.toolController.dispatchInputEvent({
+					kind: InputEvtType.PointerMoveEvt,
+					current: pointer,
+					allPointers: this.getPointerList(),
+				})) {
+					evt.preventDefault();
+				}
+			}
+			return true;
+		}
+		else if (eventType === 'pointercancel' || eventType === 'pointerup') {
+			const pointer = Pointer.ofEvent(evt, false, this.viewport, eventsRelativeTo);
+			if (!this.pointers[pointer.id]) {
+				return false;
+			}
+
+			this.pointers[pointer.id] = pointer;
+			eventTarget.releasePointerCapture(pointer.id);
+			if (this.toolController.dispatchInputEvent({
+				kind: InputEvtType.PointerUpEvt,
+				current: pointer,
+				allPointers: this.getPointerList(),
+			})) {
+				evt.preventDefault();
+			}
+			delete this.pointers[pointer.id];
+			return true;
+		}
+
+		return eventType;
+	}
+
 	private isEventSink(evtTarget: Element|EventTarget|null) {
 		let currentElem: Element|null = evtTarget as Element|null;
 		while (currentElem !== null) {
@@ -553,6 +555,27 @@ export class Editor {
 		}
 	}
 
+	public handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter) {
+		// May be required to prevent text selection on iOS/Safari:
+		// See https://stackoverflow.com/a/70992717/17055750
+		elem.addEventListener('touchstart', evt => evt.preventDefault());
+		elem.addEventListener('contextmenu', evt => {
+			// Don't show a context menu
+			evt.preventDefault();
+		});
+
+		const eventNames: HTMLPointerEventType[] = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
+		for (const eventName of eventNames) {
+			elem.addEventListener(eventName, evt => {
+				if (filter && !filter(eventName, evt)) {
+					return true;
+				}
+
+				return this.handleHTMLPointerEvent(eventName, evt);
+			});
+		}
+	}
+
 	/** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
 	public handleKeyEventsFrom(elem: HTMLElement) {
 		elem.addEventListener('keydown', evt => {
@@ -567,7 +590,7 @@ export class Editor {
 				evt.preventDefault();
 			} else if (evt.key === 'Escape') {
 				this.renderingRegion.blur();
-			} 
+			}
 		});
 
 		elem.addEventListener('keyup', evt => {
@@ -609,11 +632,11 @@ export class Editor {
 	 * 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;
@@ -755,6 +778,20 @@ export class Editor {
 		return styleSheet;
 	}
 
+	// Dispatch a keyboard event to the currently selected tool.
+	// Intended for unit testing
+	public sendKeyboardEvent(
+		eventType: InputEvtType.KeyPressEvent|InputEvtType.KeyUpEvent,
+		key: string,
+		ctrlKey: boolean = false
+	) {
+		this.toolController.dispatchInputEvent({
+			kind: eventType,
+			key,
+			ctrlKey
+		});
+	}
+
 	// Dispatch a pen event to the currently selected tool.
 	// Intended primarially for unit tests.
 	public sendPenEvent(
@@ -864,7 +901,7 @@ export class Editor {
 
 	/**
 	 * Alias for loadFrom(SVGLoader.fromString).
-	 * 
+	 *
 	 * This is particularly useful when accessing a bundled version of the editor,
 	 * where `SVGLoader.fromString` is unavailable.
 	 */

package/src/Pointer.ts

@@ -36,9 +36,14 @@ export default class Pointer {
 	) {
 	}
 
-	// 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);
+	// Creates a Pointer from a DOM event. If `relativeTo` is given, (0, 0) in screen coordinates is
+	// considered the top left of `relativeTo`.
+	public static ofEvent(evt: PointerEvent, isDown: boolean, viewport: Viewport, relativeTo?: HTMLElement): Pointer {
+		let screenPos = Vec2.of(evt.clientX, evt.clientY);
+		if (relativeTo) {
+			const bbox = relativeTo.getBoundingClientRect();
+			screenPos = screenPos.minus(Vec2.of(bbox.left, bbox.top));
+		}
 
 		const pointerTypeToDevice: Record<string, PointerDevice> = {
 			'mouse': PointerDevice.PrimaryButtonMouse,

package/src/Viewport.ts

@@ -146,7 +146,8 @@ export class Viewport {
 		return 1/this.getScaleFactor();
 	}
 
-	// Returns the angle of the canvas in radians
+	// Returns the angle of the canvas in radians.
+	// This is the angle by which the canvas is rotated relative to the screen.
 	public getRotationAngle(): number {
 		return this.transform.transformVec3(Vec3.unitX).angle();
 	}
@@ -175,12 +176,26 @@ export class Viewport {
 		return point.map(roundComponent);
 	}
 
-
 	// Round a point with a tolerance of ±1 screen unit.
 	public roundPoint(point: Point2): Point2 {
 		return Viewport.roundPoint(point, 1 / this.getScaleFactor());
 	}
 
+	// `roundAmount`: An integer >= 0, larger numbers cause less rounding. Smaller numbers cause more
+	// (as such `roundAmount = 0` does the most rounding).
+	public static roundScaleRatio(scaleRatio: number, roundAmount: number = 1): number {
+		if (Math.abs(scaleRatio) <= 1e-12) {
+			return 0;
+		}
+
+		// Represent as k 10ⁿ for some n, k ∈ ℤ.
+		const decimalComponent = 10 ** Math.floor(Math.log10(Math.abs(scaleRatio)));
+		const roundAnountFactor = 2 ** roundAmount;
+		scaleRatio = Math.round(scaleRatio / decimalComponent * roundAnountFactor) / roundAnountFactor * decimalComponent;
+
+		return scaleRatio;
+	}
+
 	// Computes and returns an affine transformation that makes `toMakeVisible` visible and roughly centered on the screen.
 	public computeZoomToTransform(toMakeVisible: Rect2, allowZoomIn: boolean = true, allowZoomOut: boolean = true): Mat33 {
 		let transform = Mat33.identity;

package/src/components/AbstractComponent.ts

@@ -2,7 +2,7 @@ import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import { EditorLocalization } from '../localization';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
@@ -183,11 +183,7 @@ export default abstract class AbstractComponent {
 			SerializableCommand.register(AbstractComponent.transformElementCommandId, (json: any, editor: Editor) => {
 				const elem = editor.image.lookupElement(json.id);
 
-				const transform = new Mat33(...(json.transfm as [
-					number, number, number,
-					number, number, number,
-					number, number, number,
-				]));
+				const transform = new Mat33(...(json.transfm as Mat33Array));
 
 				if (!elem) {
 					return new AbstractComponent.UnresolvedTransformElementCommand(transform, json.id);

package/src/components/ImageComponent.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderableImage } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -141,11 +141,7 @@ export default class ImageComponent extends AbstractComponent {
 			image: image,
 			base64Url: image.src,
 			label: data.label,
-			transform: new Mat33(...(data.transform as [
-				number, number, number,
-				number, number, number,
-				number, number, number,
-			])),
+			transform: new Mat33(...(data.transform as Mat33Array)),
 		});
 	}
 }

package/src/components/Text.ts

@@ -1,5 +1,5 @@
 import LineSegment2 from '../math/LineSegment2';
-import Mat33 from '../math/Mat33';
+import Mat33, { Mat33Array } from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle, { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
@@ -200,11 +200,7 @@ export default class Text extends AbstractComponent {
 			throw new Error(`Unable to deserialize transform, ${json.transform}.`);
 		}
 
-		const transformData = json.transform as [
-			number, number, number,
-			number, number, number,
-			number, number, number,
-		];
+		const transformData = json.transform as Mat33Array;
 		const transform = new Mat33(...transformData);
 
 		return new Text(textObjects, transform, style, getTextDimens);

package/src/language/assertions.ts

@@ -0,0 +1,6 @@
+
+// Compile-time assertion that a branch of code is unreachable.
+// See https://stackoverflow.com/a/39419171/17055750
+export const assertUnreachable = (key: never): never => {
+    throw new Error(`Should be unreachable. Key: ${key}.`);
+};

package/src/math/Mat33.test.ts

@@ -142,6 +142,20 @@ describe('Mat33 tests', () => {
 		).objEq(Vec2.unitX, fuzz);
 	});
 
+	it('should correctly apply a mapping to all components', () => {
+		expect(
+			new Mat33(
+				1, 2, 3,
+				4, 5, 6,
+				7, 8, 9,
+			).mapEntries(component => component - 1)
+		).toMatchObject(new Mat33(
+			0, 1, 2,
+			3, 4, 5,
+			6, 7, 8,
+		));
+	});
+
 	it('should convert CSS matrix(...) strings to matricies', () => {
 		// From MDN:
 		// 		⎡ a c e ⎤

package/src/math/Mat33.ts

@@ -1,6 +1,12 @@
 import { Point2, Vec2 } from './Vec2';
 import Vec3 from './Vec3';
 
+export type Mat33Array = [
+	number, number, number,
+	number, number, number,
+	number, number, number,
+];
+
 /**
  * Represents a three dimensional linear transformation or
  * a two-dimensional affine transformation. (An affine transformation scales/rotates/shears
@@ -239,7 +245,7 @@ export default class Mat33 {
 	 * ...
 	 * ```
 	 */
-	public toArray(): number[] {
+	public toArray(): Mat33Array {
 		return [
 			this.a1, this.a2, this.a3,
 			this.b1, this.b2, this.b3,
@@ -247,6 +253,27 @@ export default class Mat33 {
 		];
 	}
 
+	/**
+	 * @example
+	 * ```
+	 * new Mat33(
+	 *  1, 2, 3,
+	 *  4, 5, 6,
+	 *  7, 8, 9,
+	 * ).mapEntries(component => component - 1);
+	 * // → ⎡ 0, 1, 2 ⎤
+	 * //   ⎢ 3, 4, 5 ⎥
+	 * //   ⎣ 6, 7, 8 ⎦
+	 * ```
+	 */
+	public mapEntries(mapping: (component: number)=>number): Mat33 {
+		return new Mat33(
+			mapping(this.a1), mapping(this.a2), mapping(this.a3),
+			mapping(this.b1), mapping(this.b2), mapping(this.b3),
+			mapping(this.c1), mapping(this.c2), mapping(this.c3),
+		);
+	}
+
 	/** Constructs a 3x3 translation matrix (for translating `Vec2`s) */
 	public static translation(amount: Vec2): Mat33 {
 		// When transforming Vec2s by a 3x3 matrix, we give the input
@@ -297,7 +324,21 @@ export default class Mat33 {
 		return result.rightMul(Mat33.translation(center.times(-1)));
 	}
 
-	/** Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33. */
+	/** @see {@link !fromCSSMatrix} */
+	public toCSSMatrix(): string {
+		return `matrix(${this.a1},${this.b1},${this.a2},${this.b2},${this.a3},${this.b3})`;
+	}
+
+	/**
+	 * Converts a CSS-form `matrix(a, b, c, d, e, f)` to a Mat33.
+	 * 
+	 * Note that such a matrix has the form,
+	 * ```
+	 * ⎡ a c e ⎤
+	 * ⎢ b d f ⎥
+	 * ⎣ 0 0 1 ⎦
+	 * ```
+	 */
 	public static fromCSSMatrix(cssString: string): Mat33 {
 		if (cssString === '' || cssString === 'none') {
 			return Mat33.identity;

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

@@ -38,7 +38,7 @@ describe('Path.toString', () => {
 		const path = new Path(Vec2.of(1000, 2_000_000), [
 			{
 				kind: PathCommandType.LineTo,
-				point: Vec2.of(30.0001, 40.000000001),
+				point: Vec2.of(30.00000001, 40.000000001),
 			},
 		]);
 
@@ -53,4 +53,15 @@ describe('Path.toString', () => {
 			'M100,100', 'l1,1', 'q1,1 -11-11', 'l10,10'
 		].join(''));
 	});
+
+	it('should not lose precision when saving', () => {
+		const pathStr = 'M184.2,52.3l-.2-.2q-2.7,2.4 -3.2,3.5q-2.8,7 -.9,6.1q4.3-2.6 4.8-6.1q1.2-8.8 .4-8.3q-4.2,5.2 -3.9,3.9q.2-1.6 .3-2.1q.2-1.3 -.2-1q-3.8,6.5 -3.2,3.3q.6-4.1 1.1-5.3q4.1-10 3.3-8.3q-5.3,13.1 -6.6,14.1q-3.3,2.8 -1.8-1.5q2.8-9.7 2.7-8.4q0,.3 0,.4q-1.4,7.1 -2.7,8.5q-2.6,3.2 -2.5,2.9q-.3-1.9 -.7-1.9q-4.1,4.4 -2.9,1.9q1.1-3 .3-2.6q-1.8,2 -2.5,2.4q-4.5,2.8 -4.2,1.9q.3-1.6 .2-1.4q1.5,2.2 1.3,2.9q-.8,3.9 -.5,3.3q.8-7.6 2.5-13.3q2.6-9.2 2.9-6.9q.3,1.4 .3,1.2q-.7-.4 -.9,0q-2.2,11.6 -7.6,13.6q-3.9,1.6 -2.1-1.3q3-5.5 2.6-3.4q-.2,1.8 -.5,1.8q-3.2,.5 -4.1,1.2q-2.6,2.6 -1.9,2.5q4.7-4.4 3.7-5.5q-1.1-.9 -1.6-.6q-7.2,7.5 -3.9,6.5q.3-.1 .4-.4q.6-5.3 -.2-4.9q-2.8,2.3 -3.1,2.4q-3.7,1.5 -3.5,.5q.3-3.6 1.4-3.3q3.5,.7 1.9,2.4q-1.7,2.3 -1.6,.8q0-3.5 -.9-3.1q-5.1,3.3 -4.9,2.8q.1-4 -.8-3.5q-4.3,3.4 -4.6,2.5q-1-2.1 .5-8.7l-.2,0q-1.6,6.6 -.7,8.9q.7,1.2 5.2-2.3q.4-.5 .2,3.1q.1,1 5.5-2.4q.4-.4 .3,2.7q.1,2 2.4-.4q1.7-2.3 -2.1-3.2q-1.7-.3 -2,3.7q0,1.4 4.1-.1q.3-.1 3.1-2.4q.3-.5 -.4,4.5q0-.1 -.2,0q-2.6,1.2 4.5-5.7q0-.2 .8,.6q.9,.6 -3.7,4.7q-.5,1 2.7-1.7q.6-.7 3.7-1.2q.7-.2 .9-2.2q.1-2.7 -3.4,3.2q-1.8,3.4 2.7,1.9q5.6-2.1 7.8-14q-.1,.1 .3,.4q.6,.1 .3-1.6q-.7-2.8 -3.7,6.7q-1.8,5.8 -2.5,13.5q.1,1.1 1.3-3.1q.2-1 -1.3-3.3q-.5-.5 -1,1.6q-.1,1.3 4.8-1.5q1-1 3-2q.1-.4 -1.1,2q-1.1,3.1 3.7-1.3q-.4,0 -.1,1.5q.3,.8 3.3-2.5q1.3-1.6 2.7-8.9q0-.1 0-.4q-.3-1.9 -3.5,8.2q-1.3,4.9 2.4,2.1q1.4-1.2 6.6-14.3q.8-2.4 -3.9,7.9q-.6,1.3 -1.1,5.5q-.3,3.7 4-3.1q-.2,0 -.6,.6q-.2,.6 -.3,2.3q0,1.8 4.7-3.5q.1-.5 -1.2,7.9q-.5,3.2 -4.6,5.7q-1.3,1 1.5-5.5q.4-1.1 3.01-3.5';
+
+		const path1 = Path.fromString(pathStr);
+		path1['cachedStringVersion'] = null; // Clear the cache.
+		const path = Path.fromString(path1.toString(true));
+		path1['cachedStringVersion'] = null; // Clear the cache.
+
+		expect(path.toString(true)).toBe(path1.toString(true));
+	});
 });

package/src/math/Path.ts

@@ -378,15 +378,17 @@ export default class Path {
 
 	private cachedStringVersion: string|null = null;
 
-	public toString(): string {
+	public toString(useNonAbsCommands?: boolean): string {
 		if (this.cachedStringVersion) {
 			return this.cachedStringVersion;
 		}
 
-		// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
-		const makeRelativeCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+		if (useNonAbsCommands === undefined) {
+			// Hueristic: Try to determine whether converting absolute to relative commands is worth it.
+			useNonAbsCommands = Math.abs(this.bbox.topLeft.x) > 10 && Math.abs(this.bbox.topLeft.y) > 10;
+		}
 
-		const result = Path.toString(this.startPoint, this.parts, !makeRelativeCommands);
+		const result = Path.toString(this.startPoint, this.parts, !useNonAbsCommands);
 		this.cachedStringVersion = result;
 		return result;
 	}
@@ -409,10 +411,13 @@ export default class Path {
 			const roundedPrevY = prevPoint ? toRoundedString(prevPoint.y) : '';
 
 			for (const point of points) {
+				const xComponent = toRoundedString(point.x);
+				const yComponent = toRoundedString(point.y);
+
 				// Relative commands are often shorter as strings than absolute commands.
 				if (!makeAbsCommand) {
-					const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint!.x, roundedPrevX, roundedPrevY);
-					const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint!.y, roundedPrevX, roundedPrevY);
+					const xComponentRelative = toStringOfSamePrecision(point.x - prevPoint!.x, xComponent, roundedPrevX, roundedPrevY);
+					const yComponentRelative = toStringOfSamePrecision(point.y - prevPoint!.y, yComponent, roundedPrevX, roundedPrevY);
 
 					// No need for an additional separator if it starts with a '-'
 					if (yComponentRelative.charAt(0) === '-') {
@@ -421,9 +426,6 @@ export default class Path {
 						relativeCommandParts.push(`${xComponentRelative},${yComponentRelative}`);
 					}
 				} else {
-					const xComponent = toRoundedString(point.x);
-					const yComponent = toRoundedString(point.y);
-
 					absoluteCommandParts.push(`${xComponent},${yComponent}`);
 				}
 			}