js-draw 0.23.0 → 0.24.0

package/dist/cjs/commands/Erase.js

@@ -0,0 +1,101 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var describeComponentList_1 = require("../components/util/describeComponentList");
+var EditorImage_1 = require("../EditorImage");
+var SerializableCommand_1 = require("./SerializableCommand");
+/**
+ * Removes the given {@link AbstractComponent}s from the image.
+ *
+ * @example
+ * ```ts
+ * // Given some editor...
+ *
+ * // Find all elements intersecting the rectangle with top left (-10,-30) and
+ * // (width,height)=(50,100).
+ * const elems = editor.image.getElementsIntersectingRegion(
+ * 	new Rect2(-10, -30, 50, 100)
+ * );
+ *
+ * // Create a command that erases [elems] when applied
+ * const eraseElemsCmd = new Erase(elems);
+ *
+ * // Apply the command (and make it undoable)
+ * editor.dispatch(eraseElemsCmd);
+ * ```
+ */
+var Erase = /** @class */ (function (_super) {
+    __extends(Erase, _super);
+    function Erase(toRemove) {
+        var _this = _super.call(this, 'erase') || this;
+        // Clone the list
+        _this.toRemove = toRemove.map(function (elem) { return elem; });
+        _this.applied = false;
+        return _this;
+    }
+    Erase.prototype.apply = function (editor) {
+        for (var _i = 0, _a = this.toRemove; _i < _a.length; _i++) {
+            var part = _a[_i];
+            var parent_1 = editor.image.findParent(part);
+            if (parent_1) {
+                parent_1.remove();
+            }
+        }
+        this.applied = true;
+        editor.queueRerender();
+    };
+    Erase.prototype.unapply = function (editor) {
+        for (var _i = 0, _a = this.toRemove; _i < _a.length; _i++) {
+            var part = _a[_i];
+            if (!editor.image.findParent(part)) {
+                EditorImage_1.default.addElement(part).apply(editor);
+            }
+        }
+        this.applied = false;
+        editor.queueRerender();
+    };
+    Erase.prototype.onDrop = function (editor) {
+        if (this.applied) {
+            for (var _i = 0, _a = this.toRemove; _i < _a.length; _i++) {
+                var part = _a[_i];
+                editor.image.onDestroyElement(part);
+            }
+        }
+    };
+    Erase.prototype.description = function (_editor, localizationTable) {
+        var _a;
+        if (this.toRemove.length === 0) {
+            return localizationTable.erasedNoElements;
+        }
+        var description = (_a = (0, describeComponentList_1.default)(localizationTable, this.toRemove)) !== null && _a !== void 0 ? _a : localizationTable.elements;
+        return localizationTable.eraseAction(description, this.toRemove.length);
+    };
+    Erase.prototype.serializeToJSON = function () {
+        var elemIds = this.toRemove.map(function (elem) { return elem.getId(); });
+        return elemIds;
+    };
+    return Erase;
+}(SerializableCommand_1.default));
+(function () {
+    SerializableCommand_1.default.register('erase', function (json, editor) {
+        var elems = json
+            .map(function (elemId) { return editor.image.lookupElement(elemId); })
+            .filter(function (elem) { return elem !== null; });
+        return new Erase(elems);
+    });
+})();
+exports.default = Erase;

package/dist/cjs/commands/SerializableCommand.js

@@ -0,0 +1,57 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var Command_1 = require("./Command");
+var SerializableCommand = /** @class */ (function (_super) {
+    __extends(SerializableCommand, _super);
+    function SerializableCommand(commandTypeId) {
+        var _this = _super.call(this) || this;
+        _this.commandTypeId = commandTypeId;
+        if (!(commandTypeId in SerializableCommand.deserializationCallbacks)) {
+            throw new Error("Command ".concat(commandTypeId, " must have a registered deserialization callback. To do this, call SerializableCommand.register."));
+        }
+        return _this;
+    }
+    // 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.
+    SerializableCommand.prototype.serialize = function () {
+        return {
+            data: this.serializeToJSON(),
+            commandType: this.commandTypeId,
+        };
+    };
+    // Convert a `string` containing JSON data (or the output of `JSON.parse`) into a
+    // `Command`.
+    SerializableCommand.deserialize = function (data, editor) {
+        var json = typeof data === 'string' ? JSON.parse(data) : data;
+        var commandType = json.commandType;
+        if (!(commandType in SerializableCommand.deserializationCallbacks)) {
+            throw new Error("Unrecognised command type ".concat(commandType, "!"));
+        }
+        return SerializableCommand.deserializationCallbacks[commandType](json.data, editor);
+    };
+    // Register a deserialization callback. This must be called at least once for every subclass of
+    // `SerializableCommand`.
+    SerializableCommand.register = function (commandTypeId, deserialize) {
+        SerializableCommand.deserializationCallbacks[commandTypeId] = deserialize;
+    };
+    SerializableCommand.deserializationCallbacks = {};
+    return SerializableCommand;
+}(Command_1.default));
+exports.default = SerializableCommand;

package/dist/cjs/commands/UnresolvedCommand.js

@@ -0,0 +1,43 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var SerializableCommand_1 = require("./SerializableCommand");
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+var UnresolvedSerializableCommand = /** @class */ (function (_super) {
+    __extends(UnresolvedSerializableCommand, _super);
+    function UnresolvedSerializableCommand(commandId, componentID, component) {
+        var _this = _super.call(this, commandId) || this;
+        _this.component = component !== null && component !== void 0 ? component : null;
+        _this.componentID = componentID;
+        return _this;
+    }
+    UnresolvedSerializableCommand.prototype.resolveComponent = function (image) {
+        if (this.component) {
+            return;
+        }
+        var component = image.lookupElement(this.componentID);
+        if (!component) {
+            throw new Error("Unable to resolve component with ID ".concat(this.componentID));
+        }
+        this.component = component;
+    };
+    return UnresolvedSerializableCommand;
+}(SerializableCommand_1.default));
+exports.default = UnresolvedSerializableCommand;

package/dist/cjs/commands/invertCommand.js

@@ -0,0 +1,77 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var Command_1 = require("./Command");
+var SerializableCommand_1 = require("./SerializableCommand");
+// Returns a command that does the opposite of the given command --- `result.apply()` calls
+// `command.unapply()` and `result.unapply()` calls `command.apply()`.
+var invertCommand = function (command) {
+    if (command instanceof SerializableCommand_1.default) {
+        // SerializableCommand that does the inverse of [command]
+        return new /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            function class_1() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            class_1.prototype.serializeToJSON = function () {
+                return command.serialize();
+            };
+            class_1.prototype.apply = function (editor) {
+                command.unapply(editor);
+            };
+            class_1.prototype.unapply = function (editor) {
+                command.unapply(editor);
+            };
+            class_1.prototype.onDrop = function (editor) {
+                command.onDrop(editor);
+            };
+            class_1.prototype.description = function (editor, localizationTable) {
+                return localizationTable.inverseOf(command.description(editor, localizationTable));
+            };
+            return class_1;
+        }(SerializableCommand_1.default))('inverse');
+    }
+    else {
+        // Command that does the inverse of [command].
+        var result = new /** @class */ (function (_super) {
+            __extends(class_2, _super);
+            function class_2() {
+                return _super !== null && _super.apply(this, arguments) || this;
+            }
+            class_2.prototype.apply = function (editor) {
+                command.unapply(editor);
+            };
+            class_2.prototype.unapply = function (editor) {
+                command.apply(editor);
+            };
+            class_2.prototype.onDrop = function (editor) {
+                command.onDrop(editor);
+            };
+            class_2.prototype.description = function (editor, localizationTable) {
+                return localizationTable.inverseOf(command.description(editor, localizationTable));
+            };
+            return class_2;
+        }(Command_1.default));
+        // We know that T does not extend SerializableCommand, and thus returning a Command
+        // is appropriate.
+        return result;
+    }
+};
+SerializableCommand_1.default.register('inverse', function (data, editor) {
+    return invertCommand(SerializableCommand_1.default.deserialize(data, editor));
+});
+exports.default = invertCommand;

package/dist/cjs/commands/lib.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uniteCommands = exports.invertCommand = exports.SerializableCommand = exports.Erase = exports.Duplicate = exports.Command = void 0;
+var Command_1 = require("./Command");
+exports.Command = Command_1.default;
+var Duplicate_1 = require("./Duplicate");
+exports.Duplicate = Duplicate_1.default;
+var Erase_1 = require("./Erase");
+exports.Erase = Erase_1.default;
+var invertCommand_1 = require("./invertCommand");
+exports.invertCommand = invertCommand_1.default;
+var SerializableCommand_1 = require("./SerializableCommand");
+exports.SerializableCommand = SerializableCommand_1.default;
+var uniteCommands_1 = require("./uniteCommands");
+exports.uniteCommands = uniteCommands_1.default;

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

@@ -0,0 +1,23 @@
+import Rect2 from '../math/shapes/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/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: function (elemCount) { return "Transformed ".concat(elemCount, " element").concat(elemCount === 1 ? '' : 's'); },
+    resizeOutputCommand: function (newSize) { return "Resized image to ".concat(newSize.w, "x").concat(newSize.h); },
+    addElementAction: function (componentDescription) { return "Added ".concat(componentDescription); },
+    eraseAction: function (componentDescription, numElems) { return "Erased ".concat(numElems, " ").concat(componentDescription); },
+    duplicateAction: function (componentDescription, numElems) { return "Duplicated ".concat(numElems, " ").concat(componentDescription); },
+    unionOf: function (actionDescription, actionCount) { return "Union: ".concat(actionCount, " ").concat(actionDescription); },
+    inverseOf: function (actionDescription) { return "Inverse of ".concat(actionDescription); },
+    elements: 'Elements',
+    erasedNoElements: 'Erased nothing',
+    duplicatedNoElements: 'Duplicated nothing',
+    rotatedBy: function (degrees) { return "Rotated by ".concat(Math.abs(degrees), " degrees ").concat(degrees < 0 ? 'clockwise' : 'counter-clockwise'); },
+    movedLeft: 'Moved left',
+    movedUp: 'Moved up',
+    movedDown: 'Moved down',
+    movedRight: 'Moved right',
+    zoomedOut: 'Zoomed out',
+    zoomedIn: 'Zoomed in',
+    selectedElements: function (count) { return "Selected ".concat(count, " element").concat(count === 1 ? '' : 's'); },
+};

package/dist/cjs/commands/uniteCommands.js

@@ -0,0 +1,152 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var waitForAll_1 = require("../util/waitForAll");
+var Command_1 = require("./Command");
+var SerializableCommand_1 = require("./SerializableCommand");
+var NonSerializableUnion = /** @class */ (function (_super) {
+    __extends(NonSerializableUnion, _super);
+    function NonSerializableUnion(commands, applyChunkSize) {
+        var _this = _super.call(this) || this;
+        _this.commands = commands;
+        _this.applyChunkSize = applyChunkSize;
+        return _this;
+    }
+    NonSerializableUnion.prototype.apply = function (editor) {
+        if (this.applyChunkSize === undefined) {
+            var results = this.commands.map(function (cmd) { return cmd.apply(editor); });
+            return (0, waitForAll_1.default)(results);
+        }
+        else {
+            return editor.asyncApplyCommands(this.commands, this.applyChunkSize);
+        }
+    };
+    NonSerializableUnion.prototype.unapply = function (editor) {
+        var commands = __spreadArray([], this.commands, true);
+        commands.reverse();
+        if (this.applyChunkSize === undefined) {
+            var results = commands.map(function (cmd) { return cmd.unapply(editor); });
+            return (0, waitForAll_1.default)(results);
+        }
+        else {
+            return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
+        }
+    };
+    NonSerializableUnion.prototype.onDrop = function (editor) {
+        this.commands.forEach(function (command) { return command.onDrop(editor); });
+    };
+    NonSerializableUnion.prototype.description = function (editor, localizationTable) {
+        var descriptions = [];
+        var lastDescription = null;
+        var duplicateDescriptionCount = 0;
+        for (var _i = 0, _a = this.commands; _i < _a.length; _i++) {
+            var part = _a[_i];
+            var 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(', ');
+    };
+    return NonSerializableUnion;
+}(Command_1.default));
+var SerializableUnion = /** @class */ (function (_super) {
+    __extends(SerializableUnion, _super);
+    function SerializableUnion(commands, applyChunkSize) {
+        var _this = _super.call(this, 'union') || this;
+        _this.commands = commands;
+        _this.applyChunkSize = applyChunkSize;
+        _this.nonserializableCommand = new NonSerializableUnion(commands, applyChunkSize);
+        return _this;
+    }
+    SerializableUnion.prototype.serializeToJSON = function () {
+        if (this.serializedData) {
+            return this.serializedData;
+        }
+        return {
+            applyChunkSize: this.applyChunkSize,
+            data: this.commands.map(function (command) { return command.serialize(); }),
+        };
+    };
+    SerializableUnion.prototype.apply = function (editor) {
+        // Cache this' serialized form -- applying this may change how commands serialize.
+        this.serializedData = this.serializeToJSON();
+        return this.nonserializableCommand.apply(editor);
+    };
+    SerializableUnion.prototype.unapply = function (editor) {
+        return this.nonserializableCommand.unapply(editor);
+    };
+    SerializableUnion.prototype.onDrop = function (editor) {
+        this.nonserializableCommand.onDrop(editor);
+    };
+    SerializableUnion.prototype.description = function (editor, localizationTable) {
+        return this.nonserializableCommand.description(editor, localizationTable);
+    };
+    return SerializableUnion;
+}(SerializableCommand_1.default));
+var uniteCommands = function (commands, applyChunkSize) {
+    var allSerializable = true;
+    for (var _i = 0, commands_1 = commands; _i < commands_1.length; _i++) {
+        var command = commands_1[_i];
+        if (!(command instanceof SerializableCommand_1.default)) {
+            allSerializable = false;
+            break;
+        }
+    }
+    if (!allSerializable) {
+        return new NonSerializableUnion(commands, applyChunkSize);
+    }
+    else {
+        var castedCommands = commands;
+        return new SerializableUnion(castedCommands, applyChunkSize);
+    }
+};
+SerializableCommand_1.default.register('union', function (data, editor) {
+    if (typeof data.data.length !== 'number') {
+        throw new Error('Unions of commands must serialize to lists of serialization data.');
+    }
+    var applyChunkSize = data.applyChunkSize;
+    if (typeof applyChunkSize !== 'number' && applyChunkSize !== undefined) {
+        throw new Error('serialized applyChunkSize is neither undefined nor a number.');
+    }
+    var commands = [];
+    for (var _i = 0, _a = data.data; _i < _a.length; _i++) {
+        var part = _a[_i];
+        commands.push(SerializableCommand_1.default.deserialize(part, editor));
+    }
+    return uniteCommands(commands, applyChunkSize);
+});
+exports.default = uniteCommands;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,85 @@
+import SerializableCommand from '../commands/SerializableCommand';
+import EditorImage from '../EditorImage';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/shapes/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. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
+    getBBox(): Rect2;
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    getExactBBox(): 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.
+     *
+     * The default implementation assumes that `this.getExactBBox()` returns a tight bounding box
+     * -- that any horiziontal/vertical line that intersects this' boounding box also
+     * intersects a point in this component. If this is not the case, components must override
+     * this function.
+     */
+    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;
+}