js-draw 0.18.1 → 0.19.0

package/dist/mjs/src/commands/UnresolvedCommand.mjs

@@ -0,0 +1,22 @@
+import  SerializableCommand  from './SerializableCommand.mjs';
+/**
+ * A command that requires a component that may or may not be present in the editor when
+ * the command is created.
+ */
+export default class UnresolvedSerializableCommand extends SerializableCommand {
+    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;
+    }
+}

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

@@ -0,0 +1,44 @@
+import  Command  from './Command.mjs';
+import  SerializableCommand  from './SerializableCommand.mjs';
+// 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) {
+        // 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/mjs/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/mjs/src/commands/lib.mjs

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

package/dist/mjs/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/mjs/src/commands/localization.mjs

@@ -0,0 +1,21 @@
+export const 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/mjs/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/mjs/src/commands/uniteCommands.mjs

@@ -0,0 +1,116 @@
+import  Command  from './Command.mjs';
+import  SerializableCommand  from './SerializableCommand.mjs';
+class NonSerializableUnion extends Command {
+    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 {
+    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)) {
+            allSerializable = false;
+            break;
+        }
+    }
+    if (!allSerializable) {
+        return new NonSerializableUnion(commands, applyChunkSize);
+    }
+    else {
+        const castedCommands = commands;
+        return new SerializableUnion(castedCommands, applyChunkSize);
+    }
+};
+SerializableCommand.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.deserialize(part, editor));
+    }
+    return uniteCommands(commands, applyChunkSize);
+});
+export default uniteCommands;

package/dist/mjs/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;
+}

package/dist/mjs/src/components/AbstractComponent.mjs

@@ -0,0 +1,252 @@
+var _a;
+import  SerializableCommand  from '../commands/SerializableCommand.mjs';
+import  EditorImage  from '../EditorImage.mjs';
+import  Mat33  from '../math/Mat33.mjs';
+import  UnresolvedSerializableCommand  from '../commands/UnresolvedCommand.mjs';
+/**
+ * A base class for everything that can be added to an {@link EditorImage}.
+ */
+export default class AbstractComponent {
+    constructor(
+    // A unique identifier for the type of component
+    componentKind, initialZIndex) {
+        this.componentKind = componentKind;
+        // Stores data attached by a loader.
+        this.loadSaveData = {};
+        this.lastChangedTime = (new Date()).getTime();
+        if (initialZIndex !== undefined) {
+            this.zIndex = initialZIndex;
+        }
+        else {
+            this.zIndex = AbstractComponent.zIndexCounter++;
+        }
+        // Create a unique ID.
+        this.id = `${new Date().getTime()}-${Math.random()}`;
+        if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
+            throw new Error(`Component ${componentKind} has not been registered using AbstractComponent.registerComponent`);
+        }
+    }
+    // Returns a unique ID for this element.
+    // @see { @link EditorImage.lookupElement }
+    getId() {
+        return this.id;
+    }
+    // Store the deserialization callback (or lack of it) for [componentKind].
+    // If components are registered multiple times (as may be done in automated tests),
+    // the most recent deserialization callback is used.
+    static registerComponent(componentKind, deserialize) {
+        this.deserializationCallbacks[componentKind] = deserialize !== null && deserialize !== void 0 ? deserialize : null;
+    }
+    /**
+     * 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, data) {
+        if (!this.loadSaveData[key]) {
+            this.loadSaveData[key] = [];
+        }
+        this.loadSaveData[key].push(data);
+    }
+    /** See {@link attachLoadSaveData} */
+    getLoadSaveData() {
+        return this.loadSaveData;
+    }
+    getZIndex() {
+        return this.zIndex;
+    }
+    /** @returns the bounding box of this. */
+    getBBox() {
+        return this.contentBBox;
+    }
+    /** Called when this component is added to the given image. */
+    onAddToImage(_image) { }
+    onRemoveFromImage() { }
+    /**
+     * @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) {
+        // If this component intersects rect,
+        // it is either contained entirely within rect or intersects one of rect's edges.
+        // If contained within,
+        if (rect.containsRect(this.getBBox())) {
+            return true;
+        }
+        // Calculated bounding boxes can be slightly larger than their actual contents' bounding box.
+        // As such, test with more lines than just the rect's edges.
+        const testLines = [];
+        for (const subregion of rect.divideIntoGrid(2, 2)) {
+            testLines.push(...subregion.getEdges());
+        }
+        return testLines.some(edge => this.intersects(edge));
+    }
+    // Returns a command that, when applied, transforms this by [affineTransfm] and
+    // updates the editor.
+    transformBy(affineTransfm) {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
+    }
+    // Returns a command that updates this component's z-index.
+    setZIndex(newZIndex) {
+        return new AbstractComponent.TransformElementCommand(Mat33.identity, this.getId(), this, newZIndex, this.getZIndex());
+    }
+    // @returns true iff this component can be selected (e.g. by the selection tool.)
+    isSelectable() {
+        return true;
+    }
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    isBackground() {
+        return false;
+    }
+    // @returns an approximation of the proportional time it takes to render this component.
+    // This is intended to be a rough estimate, but, for example, a stroke with two points sould have
+    // a renderingWeight approximately twice that of a stroke with one point.
+    getProportionalRenderingTime() {
+        return 1;
+    }
+    // Returns a copy of this component.
+    clone() {
+        const clone = this.createClone();
+        for (const attachmentKey in this.loadSaveData) {
+            for (const val of this.loadSaveData[attachmentKey]) {
+                clone.attachLoadSaveData(attachmentKey, val);
+            }
+        }
+        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.serializeToJSON();
+        if (data === null) {
+            throw new Error(`${this} cannot be serialized.`);
+        }
+        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]
+    // is not deserializable.
+    static isNotDeserializable(json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json !== 'object') {
+            return true;
+        }
+        if (!this.deserializationCallbacks[json === null || json === void 0 ? void 0 : json.name]) {
+            return true;
+        }
+        if (!json.data) {
+            return true;
+        }
+        return false;
+    }
+    // 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 instance = this.deserializationCallbacks[json.name](json.data);
+        instance.zIndex = json.zIndex;
+        instance.id = json.id;
+        // TODO: What should we do with json.loadSaveData?
+        //       If we attach it to [instance], we create a potential security risk — loadSaveData
+        //       is often used to store unrecognised attributes so they can be preserved on output.
+        //       ...but what if we're deserializing data sent across the network?
+        return instance;
+    }
+}
+// Topmost z-index
+AbstractComponent.zIndexCounter = 0;
+AbstractComponent.deserializationCallbacks = {};
+AbstractComponent.transformElementCommandId = 'transform-element';
+AbstractComponent.TransformElementCommand = (_a = class extends UnresolvedSerializableCommand {
+        // Construct a new TransformElementCommand. `component`, while optional, should
+        // be provided if available. If not provided, it will be fetched from the editor's
+        // document when the command is applied.
+        constructor(affineTransfm, componentID, component, targetZIndex, origZIndex) {
+            super(AbstractComponent.transformElementCommandId, componentID, component);
+            this.affineTransfm = affineTransfm;
+            this.origZIndex = origZIndex;
+            this.targetZIndex = targetZIndex !== null && targetZIndex !== void 0 ? targetZIndex : AbstractComponent.zIndexCounter++;
+            // Ensure that we keep drawing on top even after changing the z-index.
+            if (this.targetZIndex >= AbstractComponent.zIndexCounter) {
+                AbstractComponent.zIndexCounter = this.targetZIndex + 1;
+            }
+            if (component && origZIndex === undefined) {
+                this.origZIndex = component.getZIndex();
+            }
+        }
+        resolveComponent(image) {
+            var _a;
+            if (this.component) {
+                return;
+            }
+            super.resolveComponent(image);
+            (_a = this.origZIndex) !== null && _a !== void 0 ? _a : (this.origZIndex = this.component.getZIndex());
+        }
+        updateTransform(editor, newTransfm) {
+            if (!this.component) {
+                throw new Error('this.component is undefined or null!');
+            }
+            // Any parent should have only one direct child.
+            const parent = editor.image.findParent(this.component);
+            let hadParent = false;
+            if (parent) {
+                parent.remove();
+                hadParent = true;
+            }
+            this.component.applyTransformation(newTransfm);
+            this.component.lastChangedTime = (new Date()).getTime();
+            // Add the element back to the document.
+            if (hadParent) {
+                EditorImage.addElement(this.component).apply(editor);
+            }
+        }
+        apply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.targetZIndex;
+            this.updateTransform(editor, this.affineTransfm);
+            editor.queueRerender();
+        }
+        unapply(editor) {
+            this.resolveComponent(editor.image);
+            this.component.zIndex = this.origZIndex;
+            this.updateTransform(editor, this.affineTransfm.inverse());
+            editor.queueRerender();
+        }
+        description(_editor, localizationTable) {
+            return localizationTable.transformedElements(1);
+        }
+        serializeToJSON() {
+            return {
+                id: this.componentID,
+                transfm: this.affineTransfm.toArray(),
+                targetZIndex: this.targetZIndex,
+                origZIndex: this.origZIndex,
+            };
+        }
+    },
+    (() => {
+        SerializableCommand.register(AbstractComponent.transformElementCommandId, (json, editor) => {
+            var _a, _b;
+            const elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
+            const transform = new Mat33(...json.transfm);
+            const targetZIndex = json.targetZIndex;
+            const origZIndex = (_b = json.origZIndex) !== null && _b !== void 0 ? _b : undefined;
+            return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
+        });
+    })(),
+    _a);

package/dist/mjs/src/components/ImageBackground.d.ts

@@ -0,0 +1,42 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+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 AbstractComponent from './AbstractComponent';
+import { ImageComponentLocalization } from './localization';
+import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
+export declare enum BackgroundType {
+    SolidColor = 0,
+    None = 1
+}
+export declare const imageBackgroundCSSClassName = "js-draw-image-background";
+export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+    private backgroundType;
+    private mainColor;
+    protected contentBBox: Rect2;
+    private viewportSizeChangeListener;
+    readonly isRestylableComponent: true;
+    constructor(backgroundType: BackgroundType, mainColor: Color4);
+    getStyle(): ComponentStyle;
+    updateStyle(style: ComponentStyle): SerializableCommand;
+    forceStyle(style: ComponentStyle, editor: Editor | null): void;
+    onAddToImage(image: EditorImage): void;
+    onRemoveFromImage(): void;
+    private recomputeBBox;
+    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
+    intersects(lineSegment: LineSegment2): boolean;
+    isSelectable(): boolean;
+    isBackground(): boolean;
+    protected serializeToJSON(): {
+        mainColor: string;
+        backgroundType: BackgroundType;
+    };
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(json: any): ImageBackground;
+}