js-draw 0.23.1 → 0.24.1

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

@@ -1,18 +0,0 @@
-"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

@@ -1,23 +0,0 @@
-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

@@ -1,24 +0,0 @@
-"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.js

@@ -1,122 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const waitForAll_1 = __importDefault(require("../util/waitForAll"));
-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;
-    }
-    apply(editor) {
-        if (this.applyChunkSize === undefined) {
-            const results = this.commands.map(cmd => cmd.apply(editor));
-            return (0, waitForAll_1.default)(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 (0, waitForAll_1.default)(results);
-        }
-        else {
-            return editor.asyncUnapplyCommands(commands, this.applyChunkSize, false);
-        }
-    }
-    onDrop(editor) {
-        this.commands.forEach(command => command.onDrop(editor));
-    }
-    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() {
-        if (this.serializedData) {
-            return this.serializedData;
-        }
-        return {
-            applyChunkSize: this.applyChunkSize,
-            data: this.commands.map(command => command.serialize()),
-        };
-    }
-    apply(editor) {
-        // Cache this' serialized form -- applying this may change how commands serialize.
-        this.serializedData = this.serializeToJSON();
-        return this.nonserializableCommand.apply(editor);
-    }
-    unapply(editor) {
-        return this.nonserializableCommand.unapply(editor);
-    }
-    onDrop(editor) {
-        this.nonserializableCommand.onDrop(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

@@ -1,85 +0,0 @@
-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. 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;
-}

package/dist/cjs/src/components/AbstractComponent.js

@@ -1,273 +0,0 @@
-"use strict";
-var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
-    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
-    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a;
-Object.defineProperty(exports, "__esModule", { value: true });
-const SerializableCommand_1 = __importDefault(require("../commands/SerializableCommand"));
-const EditorImage_1 = __importDefault(require("../EditorImage"));
-const Mat33_1 = __importDefault(require("../math/Mat33"));
-const UnresolvedCommand_1 = __importDefault(require("../commands/UnresolvedCommand"));
-/**
- * A base class for everything that can be added to an {@link EditorImage}.
- */
-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. This can be a slight overestimate if doing so
-     * 			significantly improves performance.
-     */
-    getBBox() {
-        return this.contentBBox;
-    }
-    /**
-     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
-     */
-    getExactBBox() {
-        return this.getBBox();
-    }
-    /** 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.
-     *
-     * 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) {
-        // If this component intersects the given rectangle,
-        // it is either contained entirely within rect or intersects one of rect's edges.
-        // If contained within,
-        if (rect.containsRect(this.getExactBBox())) {
-            return true;
-        }
-        // Otherwise check if it intersects one of the rectangle's edges.
-        const testLines = rect.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_1.default.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 UnresolvedCommand_1.default {
-        // 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_1.default.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,
-            };
-        }
-    },
-    __setFunctionName(_a, "TransformElementCommand"),
-    (() => {
-        SerializableCommand_1.default.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_1.default(...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);
-exports.default = AbstractComponent;

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

@@ -1,62 +0,0 @@
-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,
-    Grid = 1,
-    None = 2
-}
-export declare const imageBackgroundCSSClassName = "js-draw-image-background";
-export declare const imageBackgroundGridSizeCSSPrefix = "js-draw-image-background-grid-";
-export declare const imageBackgroundNonAutomaticSecondaryColorCSSClassName = "js-draw-image-background-non-automatic-secondary-color";
-export declare const backgroundTypeToClassNameMap: {
-    1: string;
-    0: string;
-    2: string;
-};
-export default class BackgroundComponent extends AbstractComponent implements RestyleableComponent {
-    private backgroundType;
-    private mainColor;
-    protected contentBBox: Rect2;
-    private viewportSizeChangeListener;
-    private gridSize;
-    private gridStrokeWidth;
-    private secondaryColor;
-    readonly isRestylableComponent: true;
-    constructor(backgroundType: BackgroundType, mainColor: Color4);
-    static ofGrid(backgroundColor: Color4, gridSize?: number, gridColor?: Color4, gridStrokeWidth?: number): BackgroundComponent;
-    getBackgroundType(): BackgroundType;
-    getMainColor(): Color4;
-    getSecondaryColor(): Color4 | null;
-    getGridSize(): number;
-    getStyle(): ComponentStyle;
-    updateStyle(style: ComponentStyle): SerializableCommand;
-    forceStyle(style: ComponentStyle, editor: Editor | null): void;
-    onAddToImage(image: EditorImage): void;
-    onRemoveFromImage(): void;
-    private recomputeBBox;
-    private generateGridPath;
-    render(canvas: AbstractRenderer, visibleRect?: Rect2): void;
-    intersects(lineSegment: LineSegment2): boolean;
-    isSelectable(): boolean;
-    isBackground(): boolean;
-    protected serializeToJSON(): {
-        mainColor: string;
-        secondaryColor: string | undefined;
-        backgroundType: BackgroundType;
-        gridSize: number;
-        gridStrokeWidth: number;
-    };
-    protected applyTransformation(_affineTransfm: Mat33): void;
-    description(localizationTable: ImageComponentLocalization): string;
-    protected createClone(): AbstractComponent;
-    static deserializeFromJSON(json: any): BackgroundComponent;
-}