js-draw 0.19.0 → 0.21.0

package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.js

@@ -1,8 +1,34 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const Erase_1 = __importDefault(require("../../commands/Erase"));
+const uniteCommands_1 = __importDefault(require("../../commands/uniteCommands"));
+const BackgroundComponent_1 = __importStar(require("../../components/BackgroundComponent"));
 const EditorImage_1 = require("../../EditorImage");
 const Rect2_1 = __importDefault(require("../../math/Rect2"));
 const types_1 = require("../../types");
@@ -11,7 +37,7 @@ const makeColorInput_1 = __importDefault(require("../makeColorInput"));
 const BaseWidget_1 = __importDefault(require("./BaseWidget"));
 class DocumentPropertiesWidget extends BaseWidget_1.default {
     constructor(editor, localizationTable) {
-        super(editor, 'zoom-widget', localizationTable);
+        super(editor, 'document-properties-widget', localizationTable);
         this.updateDropdownContent = () => { };
         this.dropdownUpdateQueued = false;
         // Make it possible to open the dropdown, even if this widget isn't selected.
@@ -51,6 +77,33 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
     getBackgroundColor() {
         return this.editor.estimateBackgroundColor();
     }
+    removeBackgroundComponents() {
+        const previousBackgrounds = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof BackgroundComponent_1.default) {
+                previousBackgrounds.push(component);
+            }
+        }
+        return new Erase_1.default(previousBackgrounds);
+    }
+    /** Replace existing background components with a background of the given type. */
+    setBackgroundType(backgroundType) {
+        const prevBackgroundColor = this.editor.estimateBackgroundColor();
+        const newBackground = new BackgroundComponent_1.default(backgroundType, prevBackgroundColor);
+        const addBackgroundCommand = this.editor.image.addElement(newBackground);
+        return (0, uniteCommands_1.default)([this.removeBackgroundComponents(), addBackgroundCommand]);
+    }
+    /** Returns the type of the topmost background component */
+    getBackgroundType() {
+        const backgroundComponents = this.editor.image.getBackgroundComponents();
+        for (let i = backgroundComponents.length - 1; i >= 0; i--) {
+            const component = backgroundComponents[i];
+            if (component instanceof BackgroundComponent_1.default) {
+                return component.getBackgroundType();
+            }
+        }
+        return BackgroundComponent_1.BackgroundType.None;
+    }
     updateImportExportRectSize(size) {
         const filterDimension = (dim) => {
             if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
@@ -79,6 +132,27 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
         colorInput.id = `${HTMLToolbar_1.toolbarCSSPrefix}docPropertiesColorInput-${DocumentPropertiesWidget.idCounter++}`;
         backgroundColorLabel.htmlFor = colorInput.id;
         backgroundColorRow.replaceChildren(backgroundColorLabel, backgroundColorInputContainer);
+        const useGridRow = document.createElement('div');
+        const useGridLabel = document.createElement('label');
+        const useGridCheckbox = document.createElement('input');
+        useGridCheckbox.id = `${HTMLToolbar_1.toolbarCSSPrefix}docPropertiesUseGridCheckbox-${DocumentPropertiesWidget.idCounter++}`;
+        useGridLabel.htmlFor = useGridCheckbox.id;
+        useGridCheckbox.type = 'checkbox';
+        useGridLabel.innerText = this.localizationTable.useGridOption;
+        useGridCheckbox.oninput = () => {
+            const prevBackgroundType = this.getBackgroundType();
+            const wasGrid = prevBackgroundType === BackgroundComponent_1.BackgroundType.Grid;
+            if (wasGrid === useGridCheckbox.checked) {
+                // Already the requested background type.
+                return;
+            }
+            let newBackgroundType = BackgroundComponent_1.BackgroundType.SolidColor;
+            if (useGridCheckbox.checked) {
+                newBackgroundType = BackgroundComponent_1.BackgroundType.Grid;
+            }
+            this.editor.dispatch(this.setBackgroundType(newBackgroundType));
+        };
+        useGridRow.replaceChildren(useGridLabel, useGridCheckbox);
         const addDimensionRow = (labelContent, onChange) => {
             const row = document.createElement('div');
             const label = document.createElement('label');
@@ -115,9 +189,10 @@ class DocumentPropertiesWidget extends BaseWidget_1.default {
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            useGridCheckbox.checked = this.getBackgroundType() === BackgroundComponent_1.BackgroundType.Grid;
         };
         this.updateDropdownContent();
-        container.replaceChildren(backgroundColorRow, imageWidthRow.element, imageHeightRow.element);
+        container.replaceChildren(backgroundColorRow, useGridRow, imageWidthRow.element, imageHeightRow.element);
         dropdown.replaceChildren(container);
         return true;
     }

package/dist/cjs/src/toolbar/widgets/PenToolWidget.js

@@ -115,7 +115,7 @@ class PenToolWidget extends BaseToolWidget_1.default {
         objectTypeSelect.id = `${HTMLToolbar_1.toolbarCSSPrefix}penBuilderSelect${PenToolWidget.idCounter++}`;
         thicknessLabel.innerText = this.localizationTable.thicknessLabel;
         thicknessLabel.setAttribute('for', thicknessInput.id);
-        objectSelectLabel.innerText = this.localizationTable.selectObjectType;
+        objectSelectLabel.innerText = this.localizationTable.selectPenType;
         objectSelectLabel.setAttribute('for', objectTypeSelect.id);
         // Use a logarithmic scale for thicknessInput (finer control over thinner strokewidths.)
         const inverseThicknessInputFn = (t) => Math.log10(t);

package/dist/cjs/src/tools/FindTool.js

@@ -1,5 +1,5 @@
 "use strict";
-// Displays a find dialog that allows the user to search for and focus text. 
+// Displays a find dialog that allows the user to search for and focus text.
 //
 // @packageDocumentation
 var __importDefault = (this && this.__importDefault) || function (mod) {

package/dist/cjs/src/tools/SoundUITool.js

@@ -74,7 +74,7 @@ class SoundFeedback {
     announceBoundaryCross(boundaryCrossCount) {
         this.boundaryGain.gain.cancelScheduledValues(this.ctx.currentTime);
         this.boundaryGain.gain.setValueAtTime(0, this.ctx.currentTime);
-        this.boundaryGain.gain.linearRampToValueAtTime(0.01, this.ctx.currentTime + 0.1);
+        this.boundaryGain.gain.linearRampToValueAtTime(0.018, this.ctx.currentTime + 0.1);
         this.boundaryOsc.frequency.setValueAtTime(440 + Math.atan(boundaryCrossCount / 2) * 100, this.ctx.currentTime);
         this.boundaryGain.gain.linearRampToValueAtTime(0, this.ctx.currentTime + 0.25);
     }

package/dist/mjs/src/Color4.mjs

@@ -167,8 +167,8 @@ export default class Color4 {
         //     \    |   /
         //       \  | /
         //   .     \/      .
-        //                 
-        //        .        
+        //
+        //        .
         //
         // Let z be up and (x, y, 0) be in the plane.
         //
@@ -181,7 +181,7 @@ export default class Color4 {
         //       /|
         //    1/  | (√3)/2
         //    /   |
-        //      1/2   
+        //      1/2
         //
         const minComponent = Math.min(this.r, this.g, this.b);
         const maxComponent = Math.max(this.r, this.g, this.b);

package/dist/mjs/src/Editor.d.ts

@@ -191,7 +191,10 @@ export declare class Editor {
      * });
      * ```
      */
-    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): void;
+    handlePointerEventsFrom(elem: HTMLElement, filter?: HTMLPointerEventFilter): {
+        /** Remove all event listeners registered by this function. */
+        remove: () => void;
+    };
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem: HTMLElement): void;
     /** `apply` a command. `command` will be announced for accessibility. */

package/dist/mjs/src/Editor.mjs

@@ -31,7 +31,7 @@ import  fileToBase64  from './util/fileToBase64.mjs';
 import  uniteCommands  from './commands/uniteCommands.mjs';
 import  SelectionTool  from './tools/SelectionTool/SelectionTool.mjs';
 import  Erase  from './commands/Erase.mjs';
-import  ImageBackground, { BackgroundType }  from './components/ImageBackground.mjs';
+import  BackgroundComponent, { BackgroundType }  from './components/BackgroundComponent.mjs';
 import  sendPenEvent  from './testing/sendPenEvent.mjs';
 /**
  * The main entrypoint for the full editor.
@@ -455,20 +455,38 @@ export class Editor {
     handlePointerEventsFrom(elem, filter) {
         // May be required to prevent text selection on iOS/Safari:
         // See https://stackoverflow.com/a/70992717/17055750
-        elem.addEventListener('touchstart', evt => evt.preventDefault());
-        elem.addEventListener('contextmenu', evt => {
+        const touchstartListener = (evt) => evt.preventDefault();
+        const contextmenuListener = (evt) => {
             // Don't show a context menu
             evt.preventDefault();
-        });
+        };
+        const listeners = {
+            'touchstart': touchstartListener,
+            'contextmenu': contextmenuListener,
+        };
         const eventNames = ['pointerdown', 'pointermove', 'pointerup', 'pointercancel'];
         for (const eventName of eventNames) {
-            elem.addEventListener(eventName, evt => {
-                if (filter && !filter(eventName, evt)) {
+            listeners[eventName] = (evt) => {
+                // This listener will only be called in the context of PointerEvents.
+                const event = evt;
+                if (filter && !filter(eventName, event)) {
                     return true;
                 }
-                return this.handleHTMLPointerEvent(eventName, evt);
-            });
+                return this.handleHTMLPointerEvent(eventName, event);
+            };
         }
+        // Add all listeners.
+        for (const eventName in listeners) {
+            elem.addEventListener(eventName, listeners[eventName]);
+        }
+        return {
+            /** Remove all event listeners registered by this function. */
+            remove: () => {
+                for (const eventName in listeners) {
+                    elem.removeEventListener(eventName, listeners[eventName]);
+                }
+            },
+        };
     }
     /** Adds event listners for keypresses to `elem` and forwards those events to the editor. */
     handleKeyEventsFrom(elem) {
@@ -816,7 +834,7 @@ export class Editor {
         // Find a background component, if one exists.
         // Use the last (topmost) background component if there are multiple.
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground) {
+            if (component instanceof BackgroundComponent) {
                 background = component;
             }
         }
@@ -829,7 +847,7 @@ export class Editor {
         let background = this.getTopmostBackgroundComponent();
         if (!background) {
             const backgroundType = color.eq(Color4.transparent) ? BackgroundType.None : BackgroundType.SolidColor;
-            background = new ImageBackground(backgroundType, color);
+            background = new BackgroundComponent(backgroundType, color);
             return this.image.addElement(background);
         }
         else {
@@ -844,7 +862,7 @@ export class Editor {
         var _a;
         const backgroundColors = [];
         for (const component of this.image.getBackgroundComponents()) {
-            if (component instanceof ImageBackground) {
+            if (component instanceof BackgroundComponent) {
                 backgroundColors.push((_a = component.getStyle().color) !== null && _a !== void 0 ? _a : Color4.transparent);
             }
         }

package/dist/mjs/src/SVGLoader.mjs

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import  Color4  from './Color4.mjs';
-import  ImageBackground, { BackgroundType, imageBackgroundCSSClassName }  from './components/ImageBackground.mjs';
+import  BackgroundComponent, { BackgroundType, backgroundTypeToClassNameMap, imageBackgroundCSSClassName, imageBackgroundGridSizeCSSPrefix, imageBackgroundNonAutomaticSecondaryColorCSSClassName }  from './components/BackgroundComponent.mjs';
 import  ImageComponent  from './components/ImageComponent.mjs';
 import  Stroke  from './components/Stroke.mjs';
 import  SVGGlobalAttributesObject  from './components/SVGGlobalAttributesObject.mjs';
@@ -150,11 +150,69 @@ export default class SVGLoader {
         });
     }
     addBackground(node) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         return __awaiter(this, void 0, void 0, function* () {
-            const fill = Color4.fromString((_b = (_a = node.getAttribute('fill')) !== null && _a !== void 0 ? _a : node.style.fill) !== null && _b !== void 0 ? _b : 'black');
-            const elem = new ImageBackground(BackgroundType.SolidColor, fill);
-            yield ((_c = this.onAddComponent) === null || _c === void 0 ? void 0 : _c.call(this, elem));
+            // If a grid background,
+            if (node.classList.contains(backgroundTypeToClassNameMap[BackgroundType.Grid])) {
+                let foregroundStr;
+                let backgroundStr;
+                let gridStrokeWidthStr;
+                // If a group,
+                if (node.tagName.toLowerCase() === 'g') {
+                    // We expect exactly two children. One of these is the solid
+                    // background of the grid
+                    if (node.children.length !== 2) {
+                        yield this.addUnknownNode(node);
+                        return;
+                    }
+                    const background = node.children[0];
+                    const grid = node.children[1];
+                    backgroundStr = background.getAttribute('fill');
+                    foregroundStr = grid.getAttribute('stroke');
+                    gridStrokeWidthStr = grid.getAttribute('stroke-width');
+                }
+                else {
+                    backgroundStr = node.getAttribute('fill');
+                    foregroundStr = node.getAttribute('stroke');
+                    gridStrokeWidthStr = node.getAttribute('stroke-width');
+                }
+                // Default to a transparent background.
+                backgroundStr !== null && backgroundStr !== void 0 ? backgroundStr : (backgroundStr = Color4.transparent.toHexString());
+                // A grid must have a foreground color specified.
+                if (!foregroundStr) {
+                    yield this.addUnknownNode(node);
+                    return;
+                }
+                // Extract the grid size from the class name
+                let gridSize = undefined;
+                for (const className of node.classList) {
+                    if (className.startsWith(imageBackgroundGridSizeCSSPrefix)) {
+                        const sizeStr = className.substring(imageBackgroundGridSizeCSSPrefix.length);
+                        gridSize = parseFloat(sizeStr.replace(/p/g, '.'));
+                    }
+                }
+                let gridStrokeWidth = undefined;
+                if (gridStrokeWidthStr) {
+                    gridStrokeWidth = parseFloat(gridStrokeWidthStr);
+                }
+                const backgroundColor = Color4.fromString(backgroundStr);
+                let foregroundColor = Color4.fromString(foregroundStr);
+                // Should the foreground color be determined automatically?
+                if (!node.classList.contains(imageBackgroundNonAutomaticSecondaryColorCSSClassName)) {
+                    foregroundColor = undefined;
+                }
+                const elem = BackgroundComponent.ofGrid(backgroundColor, gridSize, foregroundColor, gridStrokeWidth);
+                yield ((_a = this.onAddComponent) === null || _a === void 0 ? void 0 : _a.call(this, elem));
+            }
+            // Otherwise, if just a <path/>, it's a solid color background.
+            else if (node.tagName.toLowerCase() === 'path') {
+                const fill = Color4.fromString((_c = (_b = node.getAttribute('fill')) !== null && _b !== void 0 ? _b : node.style.fill) !== null && _c !== void 0 ? _c : 'black');
+                const elem = new BackgroundComponent(BackgroundType.SolidColor, fill);
+                yield ((_d = this.onAddComponent) === null || _d === void 0 ? void 0 : _d.call(this, elem));
+            }
+            else {
+                yield this.addUnknownNode(node);
+            }
         });
     }
     // If given, 'supportedAttrs' will have x, y, etc. attributes that were used in computing the transform added to it,
@@ -322,7 +380,11 @@ export default class SVGLoader {
             let visitChildren = true;
             switch (node.tagName.toLowerCase()) {
                 case 'g':
-                    // Continue -- visit the node's children.
+                    if (node.classList.contains(imageBackgroundCSSClassName)) {
+                        yield this.addBackground(node);
+                        visitChildren = false;
+                    }
+                    // Otherwise, continue -- visit the node's children.
                     break;
                 case 'path':
                     if (node.classList.contains(imageBackgroundCSSClassName)) {

package/dist/mjs/src/Viewport.d.ts

@@ -50,6 +50,8 @@ export declare class Viewport {
      */
     getScaleFactorToNearestPowerOfTen(): number;
     private getScaleFactorToNearestPowerOf;
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    static getGridSize(scaleFactor: number): number;
     snapToGrid(canvasPos: Point2): Vec3;
     /** Returns the size of one screen pixel in canvas units. */
     getSizeOfPixelOnCanvas(): number;

package/dist/mjs/src/Viewport.mjs

@@ -97,10 +97,14 @@ export class Viewport {
         const scaleFactor = this.getScaleFactor();
         return Math.pow(powerOf, Math.round(Math.log(scaleFactor) / Math.log(powerOf)));
     }
+    /** Returns the size of a grid cell (in canvas units) as used by {@link snapToGrid}. */
+    static getGridSize(scaleFactor) {
+        return 50 / scaleFactor;
+    }
     snapToGrid(canvasPos) {
+        const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
         const snapCoordinate = (coordinate) => {
-            const scaleFactor = this.getScaleFactorToNearestPowerOf(2);
-            const roundFactor = scaleFactor / 50;
+            const roundFactor = 1 / Viewport.getGridSize(scaleFactor);
             const snapped = Math.round(coordinate * roundFactor) / roundFactor;
             return snapped;
         };

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

@@ -32,8 +32,15 @@ export default abstract class AbstractComponent {
     /** See {@link attachLoadSaveData} */
     getLoadSaveData(): LoadSaveDataTable;
     getZIndex(): number;
-    /** @returns the bounding box of this. */
+    /**
+     * @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;
@@ -43,6 +50,11 @@ export default abstract class AbstractComponent {
     /**
      * @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;

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

@@ -55,30 +55,40 @@ export default class AbstractComponent {
     getZIndex() {
         return this.zIndex;
     }
-    /** @returns the bounding box of this. */
+    /**
+     * @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 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.getBBox())) {
+        if (rect.containsRect(this.getExactBBox())) {
             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());
-        }
+        // 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

package/dist/mjs/src/components/{ImageBackground.d.ts → BackgroundComponent.d.ts}

@@ -11,32 +11,52 @@ import { ImageComponentLocalization } from './localization';
 import RestyleableComponent, { ComponentStyle } from './RestylableComponent';
 export declare enum BackgroundType {
     SolidColor = 0,
-    None = 1
+    Grid = 1,
+    None = 2
 }
 export declare const imageBackgroundCSSClassName = "js-draw-image-background";
-export default class ImageBackground extends AbstractComponent implements RestyleableComponent {
+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): ImageBackground;
+    static deserializeFromJSON(json: any): BackgroundComponent;
 }