js-draw 0.1.11 → 0.2.0

package/dist/src/EditorImage.js

@@ -1,12 +1,14 @@
 var _a;
 import AbstractComponent from './components/AbstractComponent';
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import SerializableCommand from './commands/SerializableCommand';
+// @internal
 export const sortLeavesByZIndex = (leaves) => {
     leaves.sort((a, b) => a.getContent().getZIndex() - b.getContent().getZIndex());
 };
 // Handles lookup/storage of elements in the image
 export default class EditorImage {
+    // @internal
     constructor() {
         this.root = new ImageNode();
         this.componentsById = {};
@@ -21,13 +23,15 @@ export default class EditorImage {
         }
         return null;
     }
+    /** @internal */
     renderWithCache(screenRenderer, cache, viewport) {
         cache.render(screenRenderer, this.root, viewport);
     }
+    /** @internal */
     render(renderer, 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 */
     renderAll(renderer) {
         const leaves = this.root.getLeaves();
         sortLeavesByZIndex(leaves);
@@ -40,6 +44,7 @@ export default class EditorImage {
         sortLeavesByZIndex(leaves);
         return leaves.map(leaf => leaf.getContent());
     }
+    /** @internal */
     onDestroyElement(elem) {
         delete this.componentsById[elem.getId()];
     }
@@ -83,24 +88,25 @@ EditorImage.AddElementCommand = (_a = class extends SerializableCommand {
             container === null || container === void 0 ? void 0 : container.remove();
             editor.queueRerender();
         }
-        description(localization) {
+        description(_editor, localization) {
             return localization.addElementAction(this.element.description(localization));
         }
-        serializeToString() {
-            return JSON.stringify({
+        serializeToJSON() {
+            return {
                 elemData: this.element.serialize(),
-            });
+            };
         }
     },
     (() => {
-        SerializableCommand.register('add-element', (data, _editor) => {
-            const json = JSON.parse(data);
-            const elem = AbstractComponent.deserialize(json.elemData);
+        SerializableCommand.register('add-element', (json, editor) => {
+            const id = json.elemData.id;
+            const foundElem = editor.image.lookupElement(id);
+            const elem = foundElem !== null && foundElem !== void 0 ? foundElem : AbstractComponent.deserialize(json.elemData);
             return new EditorImage.AddElementCommand(elem);
         });
     })(),
     _a);
-// 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 {
     constructor(parent = null) {
         this.parent = parent;
@@ -136,16 +142,22 @@ export class ImageNode {
     // Returns a list of `ImageNode`s with content (and thus no children).
     getLeavesIntersectingRegion(region, isTooSmall) {
         const result = [];
-        // Don't render if too small
-        if (isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(this.bbox)) {
-            return [];
-        }
-        if (this.content !== null && this.getBBox().intersects(region)) {
-            result.push(this);
-        }
-        const children = this.getChildrenIntersectingRegion(region);
-        for (const child of children) {
-            result.push(...child.getLeavesIntersectingRegion(region, isTooSmall));
+        let current;
+        const workList = [];
+        workList.push(this);
+        const toNext = () => {
+            current = undefined;
+            const next = workList.pop();
+            if (next && !(isTooSmall === null || isTooSmall === void 0 ? void 0 : isTooSmall(next.bbox))) {
+                current = next;
+                if (current.content !== null && current.getBBox().intersection(region)) {
+                    result.push(current);
+                }
+                workList.push(...current.getChildrenIntersectingRegion(region));
+            }
+        };
+        while (workList.length > 0) {
+            toNext();
         }
         return result;
     }
@@ -180,13 +192,17 @@ 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);
         }
         const containingNodes = this.children.filter(child => child.getBBox().containsRect(leafBBox));

package/dist/src/EventDispatcher.d.ts

@@ -1,3 +1,20 @@
+/**
+ * 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
+ */
 declare type CallbackHandler<EventType> = (data: EventType) => void;
 export default class EventDispatcher<EventKeyType extends string | symbol | number, EventMessageType> {
     private listeners;
@@ -6,6 +23,7 @@ export default class EventDispatcher<EventKeyType extends string | symbol | numb
     on(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): {
         remove: () => boolean;
     };
+    /** Removes an event listener. This is equivalent to calling `.remove()` on the object returned by `.on`. */
     off(eventName: EventKeyType, callback: CallbackHandler<EventMessageType>): void;
 }
 export {};

package/dist/src/EventDispatcher.js

@@ -1,6 +1,21 @@
-// Code shared with Joplin
-// 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`)
+/**
+ * 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
+ */
+// { @inheritDoc EventDispatcher! }
 export default class EventDispatcher {
     constructor() {
         this.listeners = {};
@@ -26,7 +41,7 @@ export default class EventDispatcher {
             },
         };
     }
-    // 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`. */
     off(eventName, callback) {
         const listeners = this.listeners[eventName];
         if (!listeners)

package/dist/src/Pointer.d.ts

@@ -1,4 +1,4 @@
-import { Point2 } from './geometry/Vec2';
+import { Point2 } from './math/Vec2';
 import Viewport from './Viewport';
 export declare enum PointerDevice {
     Pen = 0,

package/dist/src/Pointer.js

@@ -1,4 +1,4 @@
-import { Vec2 } from './geometry/Vec2';
+import { Vec2 } from './math/Vec2';
 export var PointerDevice;
 (function (PointerDevice) {
     PointerDevice[PointerDevice["Pen"] = 0] = "Pen";
@@ -9,7 +9,7 @@ export var PointerDevice;
     PointerDevice[PointerDevice["Other"] = 5] = "Other";
 })(PointerDevice || (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 {
     constructor(
     // The (x, y) position of the pointer relative to the top-left corner
@@ -20,7 +20,7 @@ export default class Pointer {
     canvasPos, pressure, isPrimary, down, device, 
     // Unique ID for the pointer
     id, 
-    // Numeric timestamp (milliseconds, as from (new Date).getTime())
+    // Numeric timestamp (milliseconds, as from `(new Date).getTime()`)
     timeStamp) {
         this.screenPos = screenPos;
         this.canvasPos = canvasPos;
@@ -31,6 +31,7 @@ export default class Pointer {
         this.id = id;
         this.timeStamp = timeStamp;
     }
+    // Creates a Pointer from a DOM event.
     static ofEvent(evt, isDown, viewport) {
         var _a, _b;
         const screenPos = Vec2.of(evt.offsetX, evt.offsetY);

package/dist/src/SVGLoader.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from './geometry/Rect2';
+import Rect2 from './math/Rect2';
 import { ComponentAddedListener, ImageLoader, OnDetermineExportRectListener, OnProgressListener } from './types';
 export declare const defaultSVGViewRect: Rect2;
 export declare const svgAttributesDataKey = "svgAttrs";

package/dist/src/SVGLoader.js

@@ -12,10 +12,10 @@ import Stroke from './components/Stroke';
 import SVGGlobalAttributesObject from './components/SVGGlobalAttributesObject';
 import Text 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';
 // Size of a loaded image if no size is specified.
 export const defaultSVGViewRect = new Rect2(0, 0, 500, 500);
 // Key to retrieve unrecognised attributes from an AbstractComponent
@@ -171,8 +171,16 @@ export default class SVGLoader {
         if (transformProperty === '' || transformProperty === 'none') {
             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');

package/dist/src/UndoRedoHistory.js

@@ -1,5 +1,6 @@
 import { EditorEventType } from './types';
 class UndoRedoHistory {
+    // @internal
     constructor(editor, announceRedoCallback, announceUndoCallback) {
         this.editor = editor;
         this.announceRedoCallback = announceRedoCallback;
@@ -25,6 +26,10 @@ class UndoRedoHistory {
         }
         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.
     undo() {
@@ -33,8 +38,12 @@ 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();
     }
     redo() {
         const command = this.redoStack.pop();
@@ -42,8 +51,12 @@ 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();
     }
     get undoStackSize() {
         return this.undoStack.length;

package/dist/src/Viewport.d.ts

@@ -1,31 +1,16 @@
 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 Mat33 from './math/Mat33';
+import Rect2 from './math/Rect2';
+import { Point2, Vec2 } from './math/Vec2';
 import { StrokeDataPoint } from './types';
 import { EditorNotifier } from './types';
 declare type PointDataType<T extends Point2 | StrokeDataPoint | number> = T extends Point2 ? Point2 : number;
+export declare abstract class ViewportTransform extends Command {
+    abstract readonly transform: Mat33;
+}
 export declare class Viewport {
     private notifier;
-    static ViewportTransform: {
-        new (transform: Mat33): {
-            readonly "__#679@#inverseTransform": Mat33;
-            readonly transform: Mat33;
-            apply(editor: Editor): void;
-            unapply(editor: Editor): void;
-            description(localizationTable: CommandLocalization): string;
-            onDrop(_editor: Editor): void;
-        };
-        union(a: Command, b: Command): Command;
-        readonly empty: {
-            description(_localizationTable: import("./localization").EditorLocalization): string;
-            apply(_editor: Editor): void;
-            unapply(_editor: Editor): void;
-            onDrop(_editor: Editor): void;
-        };
-    };
+    private static ViewportTransform;
     private transform;
     private inverseTransform;
     private screenRect;
@@ -34,6 +19,7 @@ export declare class Viewport {
     get visibleRect(): Rect2;
     screenToCanvas(screenPoint: Point2): Point2;
     canvasToScreen(canvasPoint: Point2): Point2;
+    static transformBy(transform: Mat33): ViewportTransform;
     resetTransform(newTransform?: Mat33): void;
     get screenToCanvasTransform(): Mat33;
     get canvasToScreenTransform(): Mat33;
@@ -45,7 +31,4 @@ export declare class Viewport {
     roundPoint(point: Point2): Point2;
     zoomTo(toMakeVisible: Rect2, allowZoomIn?: boolean, allowZoomOut?: boolean): Command;
 }
-export declare namespace Viewport {
-    type ViewportTransform = typeof Viewport.ViewportTransform.prototype;
-}
 export default Viewport;

package/dist/src/Viewport.js

@@ -11,17 +11,21 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _inverseTransform, _a;
 import Command from './commands/Command';
-import Mat33 from './geometry/Mat33';
-import Rect2 from './geometry/Rect2';
-import { Vec2 } from './geometry/Vec2';
-import Vec3 from './geometry/Vec3';
+import Mat33 from './math/Mat33';
+import Rect2 from './math/Rect2';
+import { Vec2 } from './math/Vec2';
+import Vec3 from './math/Vec3';
 import { EditorEventType } from './types';
+export class ViewportTransform extends Command {
+}
 export class Viewport {
+    // @internal
     constructor(notifier) {
         this.notifier = notifier;
         this.resetTransform(Mat33.identity);
         this.screenRect = Rect2.empty;
     }
+    // @internal
     updateScreenSize(screenSize) {
         this.screenRect = this.screenRect.resizedTo(screenSize);
     }
@@ -35,7 +39,10 @@ export class Viewport {
     canvasToScreen(canvasPoint) {
         return this.transform.transformVec2(canvasPoint);
     }
-    // Updates the transformation directly. Using ViewportTransform is preferred.
+    static transformBy(transform) {
+        return new Viewport.ViewportTransform(transform);
+    }
+    // Updates the transformation directly. Using `transformBy` is preferred.
     // [newTransform] should map from canvas coordinates to screen coordinates.
     resetTransform(newTransform = Mat33.identity) {
         const oldTransform = this.transform;
@@ -61,6 +68,7 @@ export class Viewport {
         // Use transformVec3 to avoid translating the vector
         return this.transform.transformVec3(Vec3.unitX).magnitude();
     }
+    // Returns the size of one screen pixel in canvas units.
     getSizeOfPixelOnCanvas() {
         return 1 / this.getScaleFactor();
     }
@@ -132,7 +140,7 @@ export class Viewport {
     }
 }
 // Command that translates/scales the viewport.
-Viewport.ViewportTransform = (_a = class extends Command {
+Viewport.ViewportTransform = (_a = class extends ViewportTransform {
         constructor(transform) {
             super();
             this.transform = transform;
@@ -149,13 +157,13 @@ Viewport.ViewportTransform = (_a = class extends Command {
             viewport.resetTransform(viewport.transform.rightMul(__classPrivateFieldGet(this, _inverseTransform, "f")));
             editor.queueRerender();
         }
-        description(localizationTable) {
+        description(editor, localizationTable) {
             const result = [];
             // 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();
             const translation = affineTransformedVec.minus(origVec);
@@ -175,7 +183,7 @@ Viewport.ViewportTransform = (_a = class extends Command {
             else if (translation.x < -minTranslation) {
                 result.push(localizationTable.movedRight);
             }
-            if (translation.y < minTranslation) {
+            if (translation.y < -minTranslation) {
                 result.push(localizationTable.movedDown);
             }
             else if (translation.y > minTranslation) {

package/dist/src/bundle/bundled.d.ts

@@ -1,5 +1,4 @@
 import '../styles';
 import Editor from '../Editor';
-import getLocalizationTable from '../localizations/getLocalizationTable';
+export * from '../lib';
 export default Editor;
-export { Editor, getLocalizationTable };

package/dist/src/bundle/bundled.js

@@ -1,6 +1,5 @@
 // Main entrypoint for Webpack when building a bundle for release.
 import '../styles';
 import Editor from '../Editor';
-import getLocalizationTable from '../localizations/getLocalizationTable';
+export * from '../lib';
 export default Editor;
-export { Editor, getLocalizationTable };

package/dist/src/commands/Command.d.ts

@@ -4,10 +4,10 @@ export declare abstract class Command {
     abstract apply(editor: Editor): void;
     abstract unapply(editor: Editor): void;
     onDrop(_editor: Editor): void;
-    abstract description(localizationTable: EditorLocalization): string;
+    abstract description(editor: Editor, localizationTable: EditorLocalization): string;
     static union(a: Command, b: Command): Command;
     static readonly empty: {
-        description(_localizationTable: EditorLocalization): string;
+        description(_editor: Editor, _localizationTable: EditorLocalization): string;
         apply(_editor: Editor): void;
         unapply(_editor: Editor): void;
         onDrop(_editor: Editor): void;

package/dist/src/commands/Command.js

@@ -11,9 +11,9 @@ export class Command {
                 b.unapply(editor);
                 a.unapply(editor);
             }
-            description(localizationTable) {
-                const aDescription = a.description(localizationTable);
-                const bDescription = b.description(localizationTable);
+            description(editor, localizationTable) {
+                const aDescription = a.description(editor, localizationTable);
+                const bDescription = b.description(editor, localizationTable);
                 if (aDescription === bDescription) {
                     return aDescription;
                 }
@@ -23,7 +23,7 @@ export class Command {
     }
 }
 Command.empty = new class extends Command {
-    description(_localizationTable) { return ''; }
+    description(_editor, _localizationTable) { return ''; }
     apply(_editor) { }
     unapply(_editor) { }
 };

package/dist/src/commands/Duplicate.d.ts

@@ -9,6 +9,6 @@ export default class Duplicate extends SerializableCommand {
     constructor(toDuplicate: AbstractComponent[]);
     apply(editor: Editor): void;
     unapply(editor: Editor): void;
-    description(localizationTable: EditorLocalization): string;
-    protected serializeToString(): string;
+    description(_editor: Editor, localizationTable: EditorLocalization): string;
+    protected serializeToJSON(): string[];
 }

package/dist/src/commands/Duplicate.js

@@ -14,20 +14,19 @@ export default class Duplicate extends SerializableCommand {
     unapply(editor) {
         this.reverse.apply(editor);
     }
-    description(localizationTable) {
+    description(_editor, localizationTable) {
         var _a;
         if (this.duplicates.length === 0) {
             return localizationTable.duplicatedNoElements;
         }
         return localizationTable.duplicateAction((_a = describeComponentList(localizationTable, this.duplicates)) !== null && _a !== void 0 ? _a : localizationTable.elements, this.duplicates.length);
     }
-    serializeToString() {
-        return JSON.stringify(this.toDuplicate.map(elem => elem.getId()));
+    serializeToJSON() {
+        return this.toDuplicate.map(elem => elem.getId());
     }
 }
 (() => {
-    SerializableCommand.register('duplicate', (data, editor) => {
-        const json = JSON.parse(data);
+    SerializableCommand.register('duplicate', (json, editor) => {
         const elems = json.map((id) => editor.image.lookupElement(id));
         return new Duplicate(elems);
     });

package/dist/src/commands/Erase.d.ts

@@ -9,6 +9,6 @@ export default class Erase extends SerializableCommand {
     apply(editor: Editor): void;
     unapply(editor: Editor): void;
     onDrop(editor: Editor): void;
-    description(localizationTable: EditorLocalization): string;
-    protected serializeToString(): string;
+    description(_editor: Editor, localizationTable: EditorLocalization): string;
+    protected serializeToJSON(): string[];
 }

package/dist/src/commands/Erase.js

@@ -34,7 +34,7 @@ export default class Erase extends SerializableCommand {
             }
         }
     }
-    description(localizationTable) {
+    description(_editor, localizationTable) {
         var _a;
         if (this.toRemove.length === 0) {
             return localizationTable.erasedNoElements;
@@ -42,15 +42,16 @@ export default class Erase extends SerializableCommand {
         const description = (_a = describeComponentList(localizationTable, this.toRemove)) !== null && _a !== void 0 ? _a : localizationTable.elements;
         return localizationTable.eraseAction(description, this.toRemove.length);
     }
-    serializeToString() {
+    serializeToJSON() {
         const elemIds = this.toRemove.map(elem => elem.getId());
-        return JSON.stringify(elemIds);
+        return elemIds;
     }
 }
 (() => {
-    SerializableCommand.register('erase', (data, editor) => {
-        const json = JSON.parse(data);
-        const elems = json.map((elemId) => editor.image.lookupElement(elemId));
+    SerializableCommand.register('erase', (json, editor) => {
+        const elems = json
+            .map((elemId) => editor.image.lookupElement(elemId))
+            .filter((elem) => elem !== null);
         return new Erase(elems);
     });
 })();

package/dist/src/commands/SerializableCommand.d.ts

@@ -1,13 +1,12 @@
 import Editor from '../Editor';
 import Command from './Command';
-declare type DeserializationCallback = (data: string, editor: Editor) => SerializableCommand;
+export declare type DeserializationCallback = (data: Record<string, any> | any[], editor: Editor) => SerializableCommand;
 export default abstract class SerializableCommand extends Command {
     private commandTypeId;
     constructor(commandTypeId: string);
-    protected abstract serializeToString(): string;
+    protected abstract serializeToJSON(): string | Record<string, any> | any[];
     private static deserializationCallbacks;
-    serialize(): string;
-    static deserialize(data: string, editor: Editor): SerializableCommand;
+    serialize(): Record<string | symbol, any>;
+    static deserialize(data: string | Record<string, any>, editor: Editor): SerializableCommand;
     static register(commandTypeId: string, deserialize: DeserializationCallback): void;
 }
-export {};

package/dist/src/commands/SerializableCommand.js

@@ -7,20 +7,28 @@ export default class SerializableCommand extends Command {
             throw new Error(`Command ${commandTypeId} must have a registered deserialization callback. To do this, call SerializableCommand.register.`);
         }
     }
+    // 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.
     serialize() {
-        return JSON.stringify({
-            data: this.serializeToString(),
+        return {
+            data: this.serializeToJSON(),
             commandType: this.commandTypeId,
-        });
+        };
     }
+    // Convert a `string` containing JSON data (or the output of `JSON.parse`) into a
+    // `Command`.
     static deserialize(data, editor) {
-        const json = JSON.parse(data);
+        const json = typeof data === 'string' ? JSON.parse(data) : data;
         const commandType = json.commandType;
         if (!(commandType in SerializableCommand.deserializationCallbacks)) {
             throw new Error(`Unrecognised command type ${commandType}!`);
         }
         return SerializableCommand.deserializationCallbacks[commandType](json.data, editor);
     }
+    // Register a deserialization callback. This must be called at least once for every subclass of
+    // `SerializableCommand`.
     static register(commandTypeId, deserialize) {
         SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
     }

package/dist/src/commands/invertCommand.d.ts

@@ -0,0 +1,4 @@
+import Command from './Command';
+import SerializableCommand from './SerializableCommand';
+declare const invertCommand: <T extends Command>(command: T) => T extends SerializableCommand ? SerializableCommand : Command;
+export default invertCommand;