js-draw 0.23.1 → 0.24.0

package/dist/mjs/components/AbstractComponent.mjs

@@ -0,0 +1,298 @@
+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 __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 __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));
+};
+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}.
+ */
+var AbstractComponent = /** @class */ (function () {
+    function AbstractComponent(
+    // 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 = "".concat(new Date().getTime(), "-").concat(Math.random());
+        if (AbstractComponent.deserializationCallbacks[componentKind] === undefined) {
+            throw new Error("Component ".concat(componentKind, " has not been registered using AbstractComponent.registerComponent"));
+        }
+    }
+    // Returns a unique ID for this element.
+    // @see { @link EditorImage.lookupElement }
+    AbstractComponent.prototype.getId = function () {
+        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.
+    AbstractComponent.registerComponent = function (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}.
+     */
+    AbstractComponent.prototype.attachLoadSaveData = function (key, data) {
+        if (!this.loadSaveData[key]) {
+            this.loadSaveData[key] = [];
+        }
+        this.loadSaveData[key].push(data);
+    };
+    /** See {@link attachLoadSaveData} */
+    AbstractComponent.prototype.getLoadSaveData = function () {
+        return this.loadSaveData;
+    };
+    AbstractComponent.prototype.getZIndex = function () {
+        return this.zIndex;
+    };
+    /**
+     * @returns the bounding box of this. This can be a slight overestimate if doing so
+     * 			significantly improves performance.
+     */
+    AbstractComponent.prototype.getBBox = function () {
+        return this.contentBBox;
+    };
+    /**
+     * @returns the bounding box of this. Unlike `getBBox`, this should **not** be a rough estimate.
+     */
+    AbstractComponent.prototype.getExactBBox = function () {
+        return this.getBBox();
+    };
+    /** Called when this component is added to the given image. */
+    AbstractComponent.prototype.onAddToImage = function (_image) { };
+    AbstractComponent.prototype.onRemoveFromImage = function () { };
+    /**
+     * @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.
+     */
+    AbstractComponent.prototype.intersectsRect = function (rect) {
+        // If this component intersects the given rectangle,
+        // it is either contained entirely within rect or intersects one of rect's edges.
+        var _this = this;
+        // If contained within,
+        if (rect.containsRect(this.getExactBBox())) {
+            return true;
+        }
+        // Otherwise check if it intersects one of the rectangle's edges.
+        var testLines = rect.getEdges();
+        return testLines.some(function (edge) { return _this.intersects(edge); });
+    };
+    // Returns a command that, when applied, transforms this by [affineTransfm] and
+    // updates the editor.
+    AbstractComponent.prototype.transformBy = function (affineTransfm) {
+        return new AbstractComponent.TransformElementCommand(affineTransfm, this.getId(), this);
+    };
+    // Returns a command that updates this component's z-index.
+    AbstractComponent.prototype.setZIndex = function (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.)
+    AbstractComponent.prototype.isSelectable = function () {
+        return true;
+    };
+    // @returns true iff this component should be added to the background, rather than the
+    // foreground of the image.
+    AbstractComponent.prototype.isBackground = function () {
+        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.
+    AbstractComponent.prototype.getProportionalRenderingTime = function () {
+        return 1;
+    };
+    // Returns a copy of this component.
+    AbstractComponent.prototype.clone = function () {
+        var clone = this.createClone();
+        for (var attachmentKey in this.loadSaveData) {
+            for (var _i = 0, _a = this.loadSaveData[attachmentKey]; _i < _a.length; _i++) {
+                var val = _a[_i];
+                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.
+    AbstractComponent.prototype.serialize = function () {
+        var data = this.serializeToJSON();
+        if (data === null) {
+            throw new Error("".concat(this, " cannot be serialized."));
+        }
+        return {
+            name: this.componentKind,
+            zIndex: this.zIndex,
+            id: this.id,
+            loadSaveData: this.loadSaveData,
+            data: data,
+        };
+    };
+    // Returns true if `data` is not deserializable. May return false even if [data]
+    // is not deserializable.
+    AbstractComponent.isNotDeserializable = function (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`.
+    AbstractComponent.deserialize = function (json) {
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (AbstractComponent.isNotDeserializable(json)) {
+            throw new Error("Element with data ".concat(json, " cannot be deserialized."));
+        }
+        var 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;
+    };
+    var _a;
+    // Topmost z-index
+    AbstractComponent.zIndexCounter = 0;
+    AbstractComponent.deserializationCallbacks = {};
+    AbstractComponent.transformElementCommandId = 'transform-element';
+    AbstractComponent.TransformElementCommand = (_a = /** @class */ (function (_super) {
+            __extends(class_1, _super);
+            // 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.
+            function class_1(affineTransfm, componentID, component, targetZIndex, origZIndex) {
+                var _this = _super.call(this, AbstractComponent.transformElementCommandId, componentID, component) || this;
+                _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();
+                }
+                return _this;
+            }
+            class_1.prototype.resolveComponent = function (image) {
+                var _a;
+                if (this.component) {
+                    return;
+                }
+                _super.prototype.resolveComponent.call(this, image);
+                (_a = this.origZIndex) !== null && _a !== void 0 ? _a : (this.origZIndex = this.component.getZIndex());
+            };
+            class_1.prototype.updateTransform = function (editor, newTransfm) {
+                if (!this.component) {
+                    throw new Error('this.component is undefined or null!');
+                }
+                // Any parent should have only one direct child.
+                var parent = editor.image.findParent(this.component);
+                var 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);
+                }
+            };
+            class_1.prototype.apply = function (editor) {
+                this.resolveComponent(editor.image);
+                this.component.zIndex = this.targetZIndex;
+                this.updateTransform(editor, this.affineTransfm);
+                editor.queueRerender();
+            };
+            class_1.prototype.unapply = function (editor) {
+                this.resolveComponent(editor.image);
+                this.component.zIndex = this.origZIndex;
+                this.updateTransform(editor, this.affineTransfm.inverse());
+                editor.queueRerender();
+            };
+            class_1.prototype.description = function (_editor, localizationTable) {
+                return localizationTable.transformedElements(1);
+            };
+            class_1.prototype.serializeToJSON = function () {
+                return {
+                    id: this.componentID,
+                    transfm: this.affineTransfm.toArray(),
+                    targetZIndex: this.targetZIndex,
+                    origZIndex: this.origZIndex,
+                };
+            };
+            return class_1;
+        }(UnresolvedSerializableCommand)),
+        __setFunctionName(_a, "TransformElementCommand"),
+        (function () {
+            SerializableCommand.register(AbstractComponent.transformElementCommandId, function (json, editor) {
+                var _a, _b;
+                var elem = (_a = editor.image.lookupElement(json.id)) !== null && _a !== void 0 ? _a : undefined;
+                var transform = new (Mat33.bind.apply(Mat33, __spreadArray([void 0], json.transfm, false)))();
+                var targetZIndex = json.targetZIndex;
+                var origZIndex = (_b = json.origZIndex) !== null && _b !== void 0 ? _b : undefined;
+                return new AbstractComponent.TransformElementCommand(transform, json.id, elem, targetZIndex, origZIndex);
+            });
+        })(),
+        _a);
+    return AbstractComponent;
+}());
+export default AbstractComponent;

package/dist/mjs/components/AbstractComponent.transformBy.test.d.ts

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

package/dist/mjs/components/BackgroundComponent.d.ts

@@ -0,0 +1,62 @@
+import Color4 from '../Color4';
+import Editor from '../Editor';
+import EditorImage from '../EditorImage';
+import SerializableCommand from '../commands/SerializableCommand';
+import LineSegment2 from '../math/shapes/LineSegment2';
+import Mat33 from '../math/Mat33';
+import Rect2 from '../math/shapes/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;
+    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;
+        backgroundType: BackgroundType;
+        gridSize: number;
+        gridStrokeWidth: number;
+    };
+    protected applyTransformation(_affineTransfm: Mat33): void;
+    description(localizationTable: ImageComponentLocalization): string;
+    protected createClone(): AbstractComponent;
+    static deserializeFromJSON(json: any): BackgroundComponent;
+}

package/dist/mjs/components/BackgroundComponent.mjs

@@ -0,0 +1,308 @@
+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 _a;
+import  Color4  from '../Color4.mjs';
+import  { EditorImageEventType }  from '../EditorImage.mjs';
+import  Rect2  from '../math/shapes/Rect2.mjs';
+import  AbstractComponent  from './AbstractComponent.mjs';
+import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
+import  Path, { PathCommandType }  from '../math/shapes/Path.mjs';
+import  { Vec2 }  from '../math/Vec2.mjs';
+import  Viewport  from '../Viewport.mjs';
+import  { toRoundedString }  from '../math/rounding.mjs';
+export var BackgroundType;
+(function (BackgroundType) {
+    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
+    BackgroundType[BackgroundType["Grid"] = 1] = "Grid";
+    BackgroundType[BackgroundType["None"] = 2] = "None";
+})(BackgroundType || (BackgroundType = {}));
+export var imageBackgroundCSSClassName = 'js-draw-image-background';
+// Class name prefix indicating the size of the background's grid cells (if present).
+export var imageBackgroundGridSizeCSSPrefix = 'js-draw-image-background-grid-';
+// Flag included in rendered SVGs (etc) that indicates that the secondary color of the
+// background has been manually set.
+export var imageBackgroundNonAutomaticSecondaryColorCSSClassName = 'js-draw-image-background-non-automatic-secondary-color';
+export var backgroundTypeToClassNameMap = (_a = {},
+    _a[BackgroundType.Grid] = 'js-draw-image-background-grid',
+    _a[BackgroundType.SolidColor] = imageBackgroundCSSClassName,
+    _a[BackgroundType.None] = '',
+    _a);
+// Represents the background of the editor's canvas.
+var BackgroundComponent = /** @class */ (function (_super) {
+    __extends(BackgroundComponent, _super);
+    function BackgroundComponent(backgroundType, mainColor) {
+        var _this = _super.call(this, 'image-background', 0) || this;
+        _this.backgroundType = backgroundType;
+        _this.mainColor = mainColor;
+        _this.viewportSizeChangeListener = null;
+        _this.gridSize = Viewport.getGridSize(2);
+        _this.gridStrokeWidth = 0.7;
+        _this.secondaryColor = null;
+        // eslint-disable-next-line @typescript-eslint/prefer-as-const
+        _this.isRestylableComponent = true;
+        _this.contentBBox = Rect2.empty;
+        return _this;
+    }
+    BackgroundComponent.ofGrid = function (backgroundColor, gridSize, gridColor, gridStrokeWidth) {
+        var background = new BackgroundComponent(BackgroundType.Grid, backgroundColor);
+        if (gridSize !== undefined) {
+            background.gridSize = gridSize;
+        }
+        if (gridColor !== undefined) {
+            background.secondaryColor = gridColor;
+        }
+        if (gridStrokeWidth !== undefined) {
+            background.gridStrokeWidth = gridStrokeWidth;
+        }
+        return background;
+    };
+    BackgroundComponent.prototype.getBackgroundType = function () {
+        return this.backgroundType;
+    };
+    // @internal
+    BackgroundComponent.prototype.getMainColor = function () {
+        return this.mainColor;
+    };
+    // @internal
+    BackgroundComponent.prototype.getSecondaryColor = function () {
+        return this.secondaryColor;
+    };
+    // @internal
+    BackgroundComponent.prototype.getGridSize = function () {
+        return this.gridSize;
+    };
+    BackgroundComponent.prototype.getStyle = function () {
+        var color = this.mainColor;
+        if (this.backgroundType === BackgroundType.None) {
+            color = undefined;
+        }
+        return {
+            color: color,
+        };
+    };
+    BackgroundComponent.prototype.updateStyle = function (style) {
+        return createRestyleComponentCommand(this.getStyle(), style, this);
+    };
+    // @internal
+    BackgroundComponent.prototype.forceStyle = function (style, editor) {
+        var fill = style.color;
+        if (!fill) {
+            return;
+        }
+        this.mainColor = fill;
+        // A solid background and transparent fill is equivalent to no background.
+        if (fill.eq(Color4.transparent) && this.backgroundType === BackgroundType.SolidColor) {
+            this.backgroundType = BackgroundType.None;
+        }
+        else if (this.backgroundType === BackgroundType.None) {
+            this.backgroundType = BackgroundType.SolidColor;
+        }
+        if (editor) {
+            editor.image.queueRerenderOf(this);
+            editor.queueRerender();
+        }
+    };
+    BackgroundComponent.prototype.onAddToImage = function (image) {
+        var _this = this;
+        if (this.viewportSizeChangeListener) {
+            console.warn('onAddToImage called when background is already in an image');
+            this.onRemoveFromImage();
+        }
+        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, function () {
+            _this.recomputeBBox(image);
+        });
+        this.recomputeBBox(image);
+    };
+    BackgroundComponent.prototype.onRemoveFromImage = function () {
+        var _a;
+        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
+        this.viewportSizeChangeListener = null;
+    };
+    BackgroundComponent.prototype.recomputeBBox = function (image) {
+        var importExportRect = image.getImportExportViewport().visibleRect;
+        if (!this.contentBBox.eq(importExportRect)) {
+            this.contentBBox = importExportRect;
+            // Re-render this if already added to the EditorImage.
+            image.queueRerenderOf(this);
+        }
+    };
+    BackgroundComponent.prototype.generateGridPath = function (visibleRect) {
+        var _this = this;
+        var _a, _b;
+        var targetRect = (_b = (_a = visibleRect === null || visibleRect === void 0 ? void 0 : visibleRect.grownBy(this.gridStrokeWidth)) === null || _a === void 0 ? void 0 : _a.intersection(this.contentBBox)) !== null && _b !== void 0 ? _b : this.contentBBox;
+        var roundDownToGrid = function (coord) { return Math.floor(coord / _this.gridSize) * _this.gridSize; };
+        var roundUpToGrid = function (coord) { return Math.ceil(coord / _this.gridSize) * _this.gridSize; };
+        var startY = roundUpToGrid(targetRect.y);
+        var endY = roundDownToGrid(targetRect.y + targetRect.h);
+        var startX = roundUpToGrid(targetRect.x);
+        var endX = roundDownToGrid(targetRect.x + targetRect.w);
+        var result = [];
+        // Don't generate grids with a huge number of rows/columns -- such grids
+        // take a long time to render and are likely invisible due to the number of
+        // cells.
+        var rowCount = (endY - startY) / this.gridSize;
+        var colCount = (endX - startX) / this.gridSize;
+        var maxGridCols = 1000;
+        var maxGridRows = 1000;
+        if (rowCount > maxGridRows || colCount > maxGridCols) {
+            return Path.empty;
+        }
+        var startPoint = Vec2.of(targetRect.x, startY);
+        for (var y = startY; y <= endY; y += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(targetRect.x, y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(targetRect.x + targetRect.w, y),
+            });
+        }
+        for (var x = startX; x <= endX; x += this.gridSize) {
+            result.push({
+                kind: PathCommandType.MoveTo,
+                point: Vec2.of(x, targetRect.y),
+            });
+            result.push({
+                kind: PathCommandType.LineTo,
+                point: Vec2.of(x, targetRect.y + targetRect.h)
+            });
+        }
+        return new Path(startPoint, result);
+    };
+    BackgroundComponent.prototype.render = function (canvas, visibleRect) {
+        if (this.backgroundType === BackgroundType.None) {
+            return;
+        }
+        var clip = this.backgroundType === BackgroundType.Grid;
+        canvas.startObject(this.contentBBox, clip);
+        if (this.backgroundType === BackgroundType.SolidColor || this.backgroundType === BackgroundType.Grid) {
+            // If the rectangle for this region contains the visible rect,
+            // we can fill the entire visible rectangle (which may be more efficient than
+            // filling the entire region for this.)
+            if (visibleRect) {
+                var intersection = visibleRect.intersection(this.contentBBox);
+                if (intersection) {
+                    canvas.fillRect(intersection, this.mainColor);
+                }
+            }
+            else {
+                canvas.fillRect(this.contentBBox, this.mainColor);
+            }
+        }
+        if (this.backgroundType === BackgroundType.Grid) {
+            var gridColor = this.secondaryColor;
+            gridColor !== null && gridColor !== void 0 ? gridColor : (gridColor = Color4.ofRGBA(1 - this.mainColor.r, 1 - this.mainColor.g, 1 - this.mainColor.b, 0.2));
+            // If the background fill is completely transparent, ensure visibility on otherwise light
+            // and dark backgrounds.
+            if (this.mainColor.a === 0) {
+                gridColor = Color4.ofRGBA(0.5, 0.5, 0.5, 0.2);
+            }
+            var style = {
+                fill: Color4.transparent,
+                stroke: { width: this.gridStrokeWidth, color: gridColor }
+            };
+            canvas.drawPath(this.generateGridPath(visibleRect).toRenderable(style));
+        }
+        var backgroundTypeCSSClass = backgroundTypeToClassNameMap[this.backgroundType];
+        var classNames = [imageBackgroundCSSClassName];
+        if (backgroundTypeCSSClass !== imageBackgroundCSSClassName) {
+            classNames.push(backgroundTypeCSSClass);
+            var gridSizeStr = toRoundedString(this.gridSize).replace(/[.]/g, 'p');
+            classNames.push(imageBackgroundGridSizeCSSPrefix + gridSizeStr);
+        }
+        if (this.secondaryColor !== null) {
+            classNames.push(imageBackgroundNonAutomaticSecondaryColorCSSClassName);
+        }
+        canvas.endObject(this.getLoadSaveData(), classNames);
+    };
+    BackgroundComponent.prototype.intersects = function (lineSegment) {
+        return this.contentBBox.getEdges().some(function (edge) { return edge.intersects(lineSegment); });
+    };
+    BackgroundComponent.prototype.isSelectable = function () {
+        return false;
+    };
+    BackgroundComponent.prototype.isBackground = function () {
+        return true;
+    };
+    BackgroundComponent.prototype.serializeToJSON = function () {
+        var _a;
+        return {
+            mainColor: this.mainColor.toHexString(),
+            secondaryColor: (_a = this.secondaryColor) === null || _a === void 0 ? void 0 : _a.toHexString(),
+            backgroundType: this.backgroundType,
+            gridSize: this.gridSize,
+            gridStrokeWidth: this.gridStrokeWidth,
+        };
+    };
+    BackgroundComponent.prototype.applyTransformation = function (_affineTransfm) {
+        // Do nothing — it doesn't make sense to transform the background.
+    };
+    BackgroundComponent.prototype.description = function (localizationTable) {
+        if (this.backgroundType === BackgroundType.SolidColor) {
+            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
+        }
+        else if (this.backgroundType === BackgroundType.None) {
+            return localizationTable.emptyBackground;
+        }
+        else if (this.backgroundType === BackgroundType.Grid) {
+            return localizationTable.gridBackground;
+        }
+        else {
+            var exhaustivenessCheck = this.backgroundType;
+            return exhaustivenessCheck;
+        }
+    };
+    BackgroundComponent.prototype.createClone = function () {
+        return new BackgroundComponent(this.backgroundType, this.mainColor);
+    };
+    // @internal
+    BackgroundComponent.deserializeFromJSON = function (json) {
+        var _a, _b;
+        if (typeof json === 'string') {
+            json = JSON.parse(json);
+        }
+        if (typeof json.mainColor !== 'string') {
+            throw new Error('Error deserializing — mainColor must be of type string.');
+        }
+        var backgroundType;
+        var jsonBackgroundType = json.backgroundType;
+        if (jsonBackgroundType === BackgroundType.None || jsonBackgroundType === BackgroundType.Grid
+            || jsonBackgroundType === BackgroundType.SolidColor) {
+            backgroundType = jsonBackgroundType;
+        }
+        else {
+            var exhaustivenessCheck = jsonBackgroundType;
+            return exhaustivenessCheck;
+        }
+        var mainColor = Color4.fromHex(json.mainColor);
+        var secondaryColor = json.secondaryColor ? Color4.fromHex(json.secondaryColor) : null;
+        var gridSize = (_a = json.gridSize) !== null && _a !== void 0 ? _a : undefined;
+        var gridStrokeWidth = (_b = json.gridStrokeWidth) !== null && _b !== void 0 ? _b : undefined;
+        var result = new BackgroundComponent(backgroundType, mainColor);
+        result.secondaryColor = secondaryColor;
+        if (gridSize) {
+            result.gridSize = gridSize;
+        }
+        if (gridStrokeWidth) {
+            result.gridStrokeWidth = gridStrokeWidth;
+        }
+        return result;
+    };
+    return BackgroundComponent;
+}(AbstractComponent));
+export default BackgroundComponent;
+AbstractComponent.registerComponent('image-background', BackgroundComponent.deserializeFromJSON);

package/dist/mjs/components/BackgroundComponent.test.d.ts

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