js-draw 0.18.1 → 0.19.0

package/dist/cjs/src/commands/SerializableCommand.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Command_1 = __importDefault(require("./Command"));
+class SerializableCommand extends Command_1.default {
+    constructor(commandTypeId) {
+        super();
+        this.commandTypeId = commandTypeId;
+        if (!(commandTypeId in SerializableCommand.deserializationCallbacks)) {
+            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 {
+            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 = 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;
+    }
+}
+exports.default = SerializableCommand;
+SerializableCommand.deserializationCallbacks = {};

package/dist/cjs/src/commands/UnresolvedCommand.d.ts

@@ -0,0 +1,14 @@
+import EditorImage from '../EditorImage';
+import AbstractComponent from '../components/AbstractComponent';
+import SerializableCommand from './SerializableCommand';
+export type ResolveFromComponentCallback = () => SerializableCommand;
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+export default abstract class UnresolvedSerializableCommand extends SerializableCommand {
+    protected component: AbstractComponent | null;
+    protected readonly componentID: string;
+    protected constructor(commandId: string, componentID: string, component?: AbstractComponent);
+    protected resolveComponent(image: EditorImage): void;
+}

package/dist/cjs/src/commands/UnresolvedCommand.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+class UnresolvedSerializableCommand extends SerializableCommand_1.default {
+    constructor(commandId, componentID, component) {
+        super(commandId);
+        this.component = component !== null && component !== void 0 ? component : null;
+        this.componentID = componentID;
+    }
+    resolveComponent(image) {
+        if (this.component) {
+            return;
+        }
+        const component = image.lookupElement(this.componentID);
+        if (!component) {
+            throw new Error(`Unable to resolve component with ID ${this.componentID}`);
+        }
+        this.component = component;
+    }
+}
+exports.default = UnresolvedSerializableCommand;

package/dist/cjs/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/cjs/src/commands/invertCommand.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Command_1 = __importDefault(require("./Command"));
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+// Returns a command that 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_1.default) {
+        // SerializableCommand that does the inverse of [command]
+        return new class extends SerializableCommand_1.default {
+            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_1.default {
+            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_1.default.register('inverse', (data, editor) => {
+    return invertCommand(SerializableCommand_1.default.deserialize(data, editor));
+});
+exports.default = invertCommand;

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

@@ -0,0 +1,7 @@
+import Command from './Command';
+import Duplicate from './Duplicate';
+import Erase from './Erase';
+import invertCommand from './invertCommand';
+import SerializableCommand from './SerializableCommand';
+import uniteCommands from './uniteCommands';
+export { Command, Duplicate, Erase, SerializableCommand, invertCommand, uniteCommands, };

package/dist/cjs/src/commands/lib.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uniteCommands = exports.invertCommand = exports.SerializableCommand = exports.Erase = exports.Duplicate = exports.Command = void 0;
+const Command_1 = __importDefault(require("./Command"));
+exports.Command = Command_1.default;
+const Duplicate_1 = __importDefault(require("./Duplicate"));
+exports.Duplicate = Duplicate_1.default;
+const Erase_1 = __importDefault(require("./Erase"));
+exports.Erase = Erase_1.default;
+const invertCommand_1 = __importDefault(require("./invertCommand"));
+exports.invertCommand = invertCommand_1.default;
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+exports.SerializableCommand = SerializableCommand_1.default;
+const uniteCommands_1 = __importDefault(require("./uniteCommands"));
+exports.uniteCommands = uniteCommands_1.default;

package/dist/cjs/src/commands/localization.d.ts

@@ -0,0 +1,23 @@
+import Rect2 from '../math/Rect2';
+export interface CommandLocalization {
+    movedLeft: string;
+    movedUp: string;
+    movedDown: string;
+    movedRight: string;
+    rotatedBy: (degrees: number) => string;
+    zoomedOut: string;
+    zoomedIn: string;
+    erasedNoElements: string;
+    duplicatedNoElements: string;
+    elements: string;
+    updatedViewport: string;
+    transformedElements: (elemCount: number) => string;
+    resizeOutputCommand: (newSize: Rect2) => string;
+    addElementAction: (elemDescription: string) => string;
+    eraseAction: (elemDescription: string, numElems: number) => string;
+    duplicateAction: (elemDescription: string, count: number) => string;
+    inverseOf: (actionDescription: string) => string;
+    unionOf: (actionDescription: string, actionCount: number) => string;
+    selectedElements: (count: number) => string;
+}
+export declare const defaultCommandLocalization: CommandLocalization;

package/dist/cjs/src/commands/localization.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCommandLocalization = void 0;
+exports.defaultCommandLocalization = {
+    updatedViewport: 'Transformed Viewport',
+    transformedElements: (elemCount) => `Transformed ${elemCount} element${elemCount === 1 ? '' : 's'}`,
+    resizeOutputCommand: (newSize) => `Resized image to ${newSize.w}x${newSize.h}`,
+    addElementAction: (componentDescription) => `Added ${componentDescription}`,
+    eraseAction: (componentDescription, numElems) => `Erased ${numElems} ${componentDescription}`,
+    duplicateAction: (componentDescription, numElems) => `Duplicated ${numElems} ${componentDescription}`,
+    unionOf: (actionDescription, actionCount) => `Union: ${actionCount} ${actionDescription}`,
+    inverseOf: (actionDescription) => `Inverse of ${actionDescription}`,
+    elements: 'Elements',
+    erasedNoElements: 'Erased nothing',
+    duplicatedNoElements: 'Duplicated nothing',
+    rotatedBy: (degrees) => `Rotated by ${Math.abs(degrees)} degrees ${degrees < 0 ? 'clockwise' : 'counter-clockwise'}`,
+    movedLeft: 'Moved left',
+    movedUp: 'Moved up',
+    movedDown: 'Moved down',
+    movedRight: 'Moved right',
+    zoomedOut: 'Zoomed out',
+    zoomedIn: 'Zoomed in',
+    selectedElements: (count) => `Selected ${count} element${count === 1 ? '' : 's'}`,
+};

package/dist/cjs/src/commands/uniteCommands.d.ts

@@ -0,0 +1,4 @@
+import Command from './Command';
+import SerializableCommand from './SerializableCommand';
+declare const uniteCommands: <T extends Command>(commands: T[], applyChunkSize?: number) => T extends SerializableCommand ? SerializableCommand : Command;
+export default uniteCommands;

package/dist/cjs/src/commands/uniteCommands.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Command_1 = __importDefault(require("./Command"));
+const SerializableCommand_1 = __importDefault(require("./SerializableCommand"));
+class NonSerializableUnion extends Command_1.default {
+    constructor(commands, applyChunkSize) {
+        super();
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+    }
+    static waitForAll(commands) {
+        // If any are Promises...
+        if (commands.some(command => command && command['then'])) {
+            console.log('waiting...');
+            // Wait for all commands to finish.
+            return Promise.all(commands)
+                // Ensure we return a Promise<void> and not a Promise<void[]>
+                .then(() => { });
+        }
+        return;
+    }
+    apply(editor) {
+        if (this.applyChunkSize === undefined) {
+            const results = this.commands.map(cmd => cmd.apply(editor));
+            return NonSerializableUnion.waitForAll(results);
+        }
+        else {
+            return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+        }
+    }
+    unapply(editor) {
+        const commands = [...this.commands];
+        commands.reverse();
+        if (this.applyChunkSize === undefined) {
+            const results = commands.map(cmd => cmd.unapply(editor));
+            return NonSerializableUnion.waitForAll(results);
+        }
+        else {
+            return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
+        }
+    }
+    description(editor, localizationTable) {
+        const descriptions = [];
+        let lastDescription = null;
+        let duplicateDescriptionCount = 0;
+        for (const part of this.commands) {
+            const description = part.description(editor, localizationTable);
+            if (description !== lastDescription && lastDescription !== null) {
+                descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+                lastDescription = null;
+                duplicateDescriptionCount = 0;
+            }
+            duplicateDescriptionCount++;
+            lastDescription !== null && lastDescription !== void 0 ? lastDescription : (lastDescription = description);
+        }
+        if (duplicateDescriptionCount > 1) {
+            descriptions.push(localizationTable.unionOf(lastDescription, duplicateDescriptionCount));
+        }
+        else if (duplicateDescriptionCount === 1) {
+            descriptions.push(lastDescription);
+        }
+        return descriptions.join(', ');
+    }
+}
+class SerializableUnion extends SerializableCommand_1.default {
+    constructor(commands, applyChunkSize) {
+        super('union');
+        this.commands = commands;
+        this.applyChunkSize = applyChunkSize;
+        this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+    }
+    serializeToJSON() {
+        return {
+            applyChunkSize: this.applyChunkSize,
+            data: this.commands.map(command => command.serialize()),
+        };
+    }
+    apply(editor) {
+        return this.nonserializableCommand.apply(editor);
+    }
+    unapply(editor) {
+        return this.nonserializableCommand.unapply(editor);
+    }
+    description(editor, localizationTable) {
+        return this.nonserializableCommand.description(editor, localizationTable);
+    }
+}
+const uniteCommands = (commands, applyChunkSize) => {
+    let allSerializable = true;
+    for (const command of commands) {
+        if (!(command instanceof SerializableCommand_1.default)) {
+            allSerializable = false;
+            break;
+        }
+    }
+    if (!allSerializable) {
+        return new NonSerializableUnion(commands, applyChunkSize);
+    }
+    else {
+        const castedCommands = commands;
+        return new SerializableUnion(castedCommands, applyChunkSize);
+    }
+};
+SerializableCommand_1.default.register('union', (data, editor) => {
+    if (typeof data.data.length !== 'number') {
+        throw new Error('Unions of commands must serialize to lists of serialization data.');
+    }
+    const applyChunkSize = data.applyChunkSize;
+    if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
+        throw new Error('serialized applyChunkSize is neither undefined nor a number.');
+    }
+    const commands = [];
+    for (const part of data.data) {
+        commands.push(SerializableCommand_1.default.deserialize(part, editor));
+    }
+    return uniteCommands(commands, applyChunkSize);
+});
+exports.default = uniteCommands;

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

@@ -0,0 +1,73 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import EditorImage from '../EditorImage';
+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';
+export type LoadSaveData = (string[] | Record<symbol, string | number>);
+export type LoadSaveDataTable = Record<string, Array<LoadSaveData>>;
+export type DeserializeCallback = (data: string) => AbstractComponent;
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
+export default abstract class AbstractComponent {
+    private readonly componentKind;
+    protected lastChangedTime: number;
+    protected abstract contentBBox: Rect2;
+    private zIndex;
+    private id;
+    private static zIndexCounter;
+    protected constructor(componentKind: string, initialZIndex?: number);
+    getId(): string;
+    private static deserializationCallbacks;
+    static registerComponent(componentKind: string, deserialize: DeserializeCallback | null): void;
+    private loadSaveData;
+    /**
+     * Attach data that can be used while exporting the component (e.g. to SVG).
+     *
+     * This is intended for use by an {@link ImageLoader}.
+     */
+    attachLoadSaveData(key: string, data: LoadSaveData): void;
+    /** See {@link attachLoadSaveData} */
+    getLoadSaveData(): LoadSaveDataTable;
+    getZIndex(): number;
+    /** @returns the bounding box of this. */
+    getBBox(): Rect2;
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image: EditorImage): void;
+    onRemoveFromImage(): void;
+    abstract render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    /** @return true if `lineSegment` intersects this component. */
+    abstract intersects(lineSegment: LineSegment2): boolean;
+    /**
+     * @returns true if this component intersects `rect` -- it is entirely contained
+     *  within the rectangle or one of the rectangle's edges intersects this component.
+     */
+    intersectsRect(rect: Rect2): boolean;
+    protected abstract serializeToJSON(): any[] | Record<string, any> | number | string | null;
+    protected abstract applyTransformation(affineTransfm: Mat33): void;
+    transformBy(affineTransfm: Mat33): SerializableCommand;
+    setZIndex(newZIndex: number): SerializableCommand;
+    isSelectable(): boolean;
+    isBackground(): boolean;
+    getProportionalRenderingTime(): number;
+    private static transformElementCommandId;
+    private static TransformElementCommand;
+    /**
+     * @return a description that could be read by a screen reader
+     *     (e.g. when adding/erasing the component)
+     */
+    abstract description(localizationTable: ImageComponentLocalization): string;
+    protected abstract createClone(): AbstractComponent;
+    clone(): AbstractComponent;
+    serialize(): {
+        name: string;
+        zIndex: number;
+        id: string;
+        loadSaveData: LoadSaveDataTable;
+        data: string | number | any[] | Record<string, any>;
+    };
+    private static isNotDeserializable;
+    static deserialize(json: string | any): AbstractComponent;
+}