js-draw 0.1.12 → 0.2.0

package/src/EditorImage.ts

@@ -1,6 +1,5 @@
 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 './math/Rect2';
@@ -8,6 +7,7 @@ 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(editor: Editor, 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

@@ -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/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

@@ -81,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);
 	}
@@ -107,7 +109,7 @@ export class Viewport {
 		return new Viewport.ViewportTransform(transform);
 	}
 
-	// Updates the transformation directly. Using transformBy is preferred.
+	// 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;
@@ -138,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();
 	}
@@ -147,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,

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/Duplicate.ts

@@ -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

@@ -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

@@ -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,4 +1,3 @@
-import Command from '../commands/Command';
 import SerializableCommand from '../commands/SerializableCommand';
 import Editor from '../Editor';
 import EditorImage from '../EditorImage';
@@ -9,9 +8,9 @@ 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);
 	}
 
@@ -133,8 +134,7 @@ export default abstract class AbstractComponent {
 		}
 
 		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,3 +1,10 @@
+//
+// 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';
@@ -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

@@ -58,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"