js-draw 0.1.11 → 0.2.0

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

@@ -1,4 +1,4 @@
-import Rect2 from '../geometry/Rect2';
+import Rect2 from '../math/Rect2';
 export interface CommandLocalization {
     movedLeft: string;
     movedUp: string;
@@ -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 LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+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

@@ -1,7 +1,7 @@
 var _a;
 import SerializableCommand from '../commands/SerializableCommand';
 import EditorImage from '../EditorImage';
-import Mat33 from '../geometry/Mat33';
+import Mat33 from '../math/Mat33';
 export default class AbstractComponent {
     constructor(
     // A unique identifier for the type of component
@@ -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;
@@ -132,19 +144,18 @@ AbstractComponent.TransformElementCommand = (_a = class extends SerializableComm
             this.updateTransform(editor, this.affineTransfm.inverse());
             editor.queueRerender();
         }
-        description(localizationTable) {
+        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

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
@@ -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,4 +1,10 @@
-import Rect2 from '../geometry/Rect2';
+//
+// 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';
 const componentKind = 'svg-global-attributes';
@@ -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

@@ -1,7 +1,7 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Path from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer, { RenderablePathSpec } from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
@@ -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

@@ -1,5 +1,5 @@
-import Path from '../geometry/Path';
-import Rect2 from '../geometry/Rect2';
+import Path from '../math/Path';
+import Rect2 from '../math/Rect2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 export default class Stroke extends AbstractComponent {
@@ -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

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import RenderingStyle from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
@@ -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

@@ -1,12 +1,13 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import { styleFromJSON, styleToJSON } from '../rendering/RenderingStyle';
 import AbstractComponent from './AbstractComponent';
 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

@@ -1,6 +1,6 @@
-import LineSegment2 from '../geometry/LineSegment2';
-import Mat33 from '../geometry/Mat33';
-import Rect2 from '../geometry/Rect2';
+import LineSegment2 from '../math/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/Rect2';
 import AbstractRenderer from '../rendering/renderers/AbstractRenderer';
 import AbstractComponent from './AbstractComponent';
 import { ImageComponentLocalization } from './localization';
@@ -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,4 +1,9 @@
-import Rect2 from '../geometry/Rect2';
+//
+// 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';
 const componentId = 'unknown-svg-object';
@@ -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/builders/ArrowBuilder.d.ts

@@ -1,4 +1,4 @@
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
 import { StrokeDataPoint } from '../../types';
 import AbstractComponent from '../AbstractComponent';

package/dist/src/components/builders/ArrowBuilder.js

@@ -1,4 +1,4 @@
-import { PathCommandType } from '../../geometry/Path';
+import { PathCommandType } from '../../math/Path';
 import Stroke from '../Stroke';
 export const makeArrowBuilder = (initialPoint, _viewport) => {
     return new ArrowBuilder(initialPoint);

package/dist/src/components/builders/FreehandLineBuilder.d.ts

@@ -1,5 +1,5 @@
 import AbstractRenderer from '../../rendering/renderers/AbstractRenderer';
-import Rect2 from '../../geometry/Rect2';
+import Rect2 from '../../math/Rect2';
 import Stroke from '../Stroke';
 import { StrokeDataPoint } from '../../types';
 import { ComponentBuilder, ComponentBuilderFactory } from './types';
@@ -8,7 +8,11 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     private startPoint;
     private minFitAllowed;
     private maxFitAllowed;
-    private segments;
+    private isFirstSegment;
+    private pathStartConnector;
+    private mostRecentConnector;
+    private upperSegments;
+    private lowerSegments;
     private buffer;
     private lastPoint;
     private lastExitingVec;
@@ -20,7 +24,8 @@ export default class FreehandLineBuilder implements ComponentBuilder {
     constructor(startPoint: StrokeDataPoint, minFitAllowed: number, maxFitAllowed: number);
     getBBox(): Rect2;
     private getRenderingStyle;
-    private getPreview;
+    private previewPath;
+    private previewStroke;
     preview(renderer: AbstractRenderer): void;
     build(): Stroke;
     private roundPoint;