js-draw 0.1.12 → 0.2.1

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.js

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

@@ -19,11 +19,13 @@ 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);
     }
@@ -40,7 +42,7 @@ export class Viewport {
     static transformBy(transform) {
         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.
     resetTransform(newTransform = Mat33.identity) {
         const oldTransform = this.transform;
@@ -66,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();
     }

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

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

package/dist/src/commands/Duplicate.js

@@ -21,13 +21,12 @@ export default class Duplicate extends SerializableCommand {
         }
         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

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

package/dist/src/commands/Erase.js

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

package/dist/src/commands/invertCommand.js

@@ -0,0 +1,44 @@
+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 = (command) => {
+    if (command instanceof SerializableCommand) {
+        // SerializableCommand that does the inverse of [command]
+        return new class extends SerializableCommand {
+            serializeToJSON() {
+                return command.serialize();
+            }
+            apply(editor) {
+                command.unapply(editor);
+            }
+            unapply(editor) {
+                command.unapply(editor);
+            }
+            description(editor, localizationTable) {
+                return localizationTable.inverseOf(command.description(editor, localizationTable));
+            }
+        }('inverse');
+    }
+    else {
+        // Command that does the inverse of [command].
+        const result = new class extends Command {
+            apply(editor) {
+                command.unapply(editor);
+            }
+            unapply(editor) {
+                command.apply(editor);
+            }
+            description(editor, localizationTable) {
+                return localizationTable.inverseOf(command.description(editor, localizationTable));
+            }
+        };
+        // We know that T does not extend SerializableCommand, and thus returning a Command
+        // is appropriate.
+        return result;
+    }
+};
+SerializableCommand.register('inverse', (data, editor) => {
+    return invertCommand(SerializableCommand.deserialize(data, editor));
+});
+export default invertCommand;

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

@@ -0,0 +1,6 @@
+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/dist/src/commands/lib.js

@@ -0,0 +1,6 @@
+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/dist/src/commands/localization.d.ts

@@ -16,6 +16,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;
 }
 export declare const defaultCommandLocalization: CommandLocalization;

package/dist/src/commands/localization.js

@@ -5,6 +5,7 @@ export const defaultCommandLocalization = {
     addElementAction: (componentDescription) => `Added ${componentDescription}`,
     eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
     duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
+    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
     elements: 'Elements',
     erasedNoElements: 'Erased nothing',
     duplicatedNoElements: 'Duplicated nothing',

package/dist/src/components/AbstractComponent.d.ts

@@ -1,12 +1,12 @@
-import Command from '../commands/Command';
+import SerializableCommand from '../commands/SerializableCommand';
 import LineSegment2 from '../math/LineSegment2';
 import Mat33 from '../math/Mat33';
 import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import { ImageComponentLocalization } from './localization';
-declare type LoadSaveData = (string[] | Record<symbol, string | number>);
+export declare type LoadSaveData = (string[] | Record<symbol, string | number>);
 export declare type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
-declare type DeserializeCallback = (data: string) => AbstractComponent;
+export declare type DeserializeCallback = (data: string) => AbstractComponent;
 export default abstract class AbstractComponent {
     private readonly componentKind;
     protected lastChangedTime: number;
@@ -25,15 +25,20 @@ export default abstract class AbstractComponent {
     getBBox(): Rect2;
     abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
     abstract intersects(lineSegment: LineSegment2): boolean;
-    protected abstract serializeToString(): string | null;
+    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
     protected abstract applyTransformation(affineTransfm: Mat33): void;
-    transformBy(affineTransfm: Mat33): Command;
+    transformBy(affineTransfm: Mat33): SerializableCommand;
     private static TransformElementCommand;
     abstract description(localizationTable: ImageComponentLocalization): string;
     protected abstract createClone(): AbstractComponent;
     clone(): AbstractComponent;
-    serialize(): string;
+    serialize(): {
+        name: string;
+        zIndex: number;
+        id: string;
+        loadSaveData: LoadSaveDataTable;
+        data: string | number | any[] | Record<string, any>;
+    };
     private static isNotDeserializable;
-    static deserialize(data: string): AbstractComponent;
+    static deserialize(json: string | any): AbstractComponent;
 }
-export {};

package/dist/src/components/AbstractComponent.js

@@ -17,6 +17,8 @@ export default class AbstractComponent {
             throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
         }
     }
+    // Returns a unique ID for this element.
+    // @see { @link EditorImage!default.lookupElement }
     getId() {
         return this.id;
     }
@@ -55,23 +57,30 @@ export default 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.
     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.
-    static isNotDeserializable(data) {
-        const json = JSON.parse(data);
+    static isNotDeserializable(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
         if (typeof json !== 'object') {
             return true;
         }
@@ -83,11 +92,14 @@ export default class AbstractComponent {
         }
         return false;
     }
-    static deserialize(data) {
-        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`.
+    static deserialize(json) {
+        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;
@@ -135,16 +147,15 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
         description(_editor, localizationTable) {
             return localizationTable.transformedElements(1);
         }
-        serializeToString() {
-            return JSON.stringify({
+        serializeToJSON() {
+            return {
                 id: this.component.getId(),
                 transfm: this.affineTransfm.toArray(),
-            });
+            };
         }
     },
     (() => {
-        SerializableCommand.register('transform-element', (data, editor) => {
-            const json = JSON.parse(data);
+        SerializableCommand.register('transform-element', (json, editor) => {
             const elem = editor.image.lookupElement(json.id);
             if (!elem) {
                 throw new Error(`Unable to retrieve non-existent element, ${elem}`);

package/dist/src/components/SVGGlobalAttributesObject.d.ts

@@ -14,7 +14,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     protected applyTransformation(_affineTransfm: Mat33): void;
     protected createClone(): SVGGlobalAttributesObject;
     description(localization: ImageComponentLocalization): string;
-    protected serializeToString(): string | null;
+    protected serializeToJSON(): string | null;
     static deserializeFromString(data: string): AbstractComponent;
 }
 export {};

package/dist/src/components/SVGGlobalAttributesObject.js

@@ -1,3 +1,9 @@
+//
+// Used by `SVGLoader`s to store unrecognised global attributes
+// (e.g. unrecognised XML namespace declarations).
+// @internal
+// @packageDocumentation
+//
 import Rect2 from '../math/Rect2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -29,7 +35,7 @@ export default class SVGGlobalAttributesObject extends AbstractComponent {
     description(localization) {
         return localization.svgObject;
     }
-    serializeToString() {
+    serializeToJSON() {
         return JSON.stringify(this.attrs);
     }
     static deserializeFromString(data) {

package/dist/src/components/Stroke.d.ts

@@ -16,6 +16,16 @@ export default class Stroke extends AbstractComponent {
     getPath(): Path;
     description(localization: ImageComponentLocalization): string;
     protected createClone(): AbstractComponent;
-    protected serializeToString(): string | null;
-    static deserializeFromString(data: string): Stroke;
+    protected serializeToJSON(): {
+        style: {
+            fill: string;
+            stroke: {
+                color: string;
+                width: number;
+            } | undefined;
+        };
+        path: string;
+    }[];
+    /** @internal */
+    static deserializeFromJSON(json: any): Stroke;
 }

package/dist/src/components/Stroke.js

@@ -87,18 +87,21 @@ export default class Stroke extends AbstractComponent {
     createClone() {
         return new Stroke(this.parts);
     }
-    serializeToString() {
-        return JSON.stringify(this.parts.map(part => {
+    serializeToJSON() {
+        return this.parts.map(part => {
             return {
                 style: styleToJSON(part.style),
                 path: part.path.serialize(),
             };
-        }));
+        });
     }
-    static deserializeFromString(data) {
-        const json = JSON.parse(data);
+    /** @internal */
+    static deserializeFromJSON(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
         if (typeof json !== 'object' || typeof json.length !== 'number') {
-            throw new Error(`${data} is missing required field, parts, or parts is of the wrong type.`);
+            throw new Error(`${json} is missing required field, parts, or parts is of the wrong type.`);
         }
         const pathSpec = json.map((part) => {
             const style = styleFromJSON(part.style);
@@ -107,4 +110,4 @@ export default class Stroke extends AbstractComponent {
         return new Stroke(pathSpec);
     }
 }
-AbstractComponent.registerComponent('stroke', Stroke.deserializeFromString);
+AbstractComponent.registerComponent('stroke', Stroke.deserializeFromJSON);

package/dist/src/components/Text.d.ts

@@ -31,7 +31,7 @@ export default class Text extends AbstractComponent {
     protected createClone(): AbstractComponent;
     private getText;
     description(localizationTable: ImageComponentLocalization): string;
-    protected serializeToString(): string;
-    static deserializeFromString(data: string, getTextDimens?: GetTextDimensCallback): Text;
+    protected serializeToJSON(): Record<string, any>;
+    static deserializeFromString(json: any, getTextDimens?: GetTextDimensCallback): Text;
 }
 export {};

package/dist/src/components/Text.js

@@ -7,6 +7,7 @@ const componentTypeId = 'text';
 export default class Text extends AbstractComponent {
     constructor(textObjects, transform, style, 
     // If not given, an HtmlCanvasElement is used to determine text boundaries.
+    // @internal
     getTextDimens = Text.getTextDimens) {
         super(componentTypeId);
         this.textObjects = textObjects;
@@ -117,7 +118,7 @@ export default class Text extends AbstractComponent {
     description(localizationTable) {
         return localizationTable.text(this.getText());
     }
-    serializeToString() {
+    serializeToJSON() {
         const serializableStyle = Object.assign(Object.assign({}, this.style), { renderingStyle: styleToJSON(this.style.renderingStyle) });
         const textObjects = this.textObjects.map(text => {
             if (typeof text === 'string') {
@@ -127,18 +128,17 @@ export default class Text extends AbstractComponent {
             }
             else {
                 return {
-                    json: text.serializeToString(),
+                    json: text.serializeToJSON(),
                 };
             }
         });
-        return JSON.stringify({
+        return {
             textObjects,
             transform: this.transform.toArray(),
             style: serializableStyle,
-        });
+        };
     }
-    static deserializeFromString(data, getTextDimens = Text.getTextDimens) {
-        const json = JSON.parse(data);
+    static deserializeFromString(json, getTextDimens = Text.getTextDimens) {
         const style = {
             renderingStyle: styleFromJSON(json.style.renderingStyle),
             size: json.style.size,

package/dist/src/components/UnknownSVGObject.d.ts

@@ -13,5 +13,5 @@ export default class UnknownSVGObject extends AbstractComponent {
     protected applyTransformation(_affineTransfm: Mat33): void;
     protected createClone(): AbstractComponent;
     description(localization: ImageComponentLocalization): string;
-    protected serializeToString(): string | null;
+    protected serializeToJSON(): string | null;
 }

package/dist/src/components/UnknownSVGObject.js

@@ -1,3 +1,8 @@
+//
+// Stores objects loaded from an SVG that aren't recognised by the editor.
+// @internal
+// @packageDocumentation
+//
 import Rect2 from '../math/Rect2';
 import SVGRenderer from '../rendering/renderers/SVGRenderer';
 import AbstractComponent from './AbstractComponent';
@@ -26,7 +31,7 @@ export default class UnknownSVGObject extends AbstractComponent {
     description(localization) {
         return localization.svgObject;
     }
-    serializeToString() {
+    serializeToJSON() {
         return JSON.stringify({
             html: this.svgObject.outerHTML,
         });

package/dist/src/components/lib.d.ts

@@ -0,0 +1,4 @@
+import AbstractComponent from './AbstractComponent';
+import Stroke from './Stroke';
+import Text from './Text';
+export { AbstractComponent, Stroke, Text, };