js-draw 0.19.0 → 0.20.0

package/dist/cjs/src/math/polynomial/solveQuadratic.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+declare const solveQuadratic: (a: number, b: number, c: number) => [number, number];
+export default solveQuadratic;

package/dist/cjs/src/math/polynomial/solveQuadratic.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * Solves an equation of the form ax² + bx + c = 0.
+ * The larger solution is returned first.
+ */
+const solveQuadratic = (a, b, c) => {
+    // See also https://en.wikipedia.org/wiki/Quadratic_formula
+    if (a === 0) {
+        let solution;
+        if (b === 0) {
+            solution = c === 0 ? 0 : NaN;
+        }
+        else {
+            // Then we have bx + c = 0
+            // which implies bx = -c.
+            // Thus, x = -c/b
+            solution = -c / b;
+        }
+        return [solution, solution];
+    }
+    const discriminant = b * b - 4 * a * c;
+    if (discriminant < 0) {
+        return [NaN, NaN];
+    }
+    const rootDiscriminant = Math.sqrt(discriminant);
+    const solution1 = (-b + rootDiscriminant) / (2 * a);
+    const solution2 = (-b - rootDiscriminant) / (2 * a);
+    if (solution1 > solution2) {
+        return [solution1, solution2];
+    }
+    else {
+        return [solution2, solution1];
+    }
+};
+exports.default = solveQuadratic;

package/dist/cjs/src/rendering/renderers/CanvasRenderer.js

@@ -191,14 +191,16 @@ class CanvasRenderer extends AbstractRenderer_1.default {
         }
     }
     endObject() {
+        // Cache this.objectLevel — it may be decremented by super.endObject.
+        const objectLevel = this.objectLevel;
+        this.currentObjectBBox = null;
+        super.endObject();
         if (!this.ignoringObject && this.clipLevels.length > 0) {
-            if (this.clipLevels[this.clipLevels.length - 1] === this.objectLevel) {
+            if (this.clipLevels[this.clipLevels.length - 1] === objectLevel) {
                 this.ctx.restore();
                 this.clipLevels.pop();
             }
         }
-        this.currentObjectBBox = null;
-        super.endObject();
         // If exiting an object with a too-small-to-draw bounding box,
         if (this.ignoreObjectsAboveLevel !== null && this.getNestingLevel() <= this.ignoreObjectsAboveLevel) {
             this.ignoreObjectsAboveLevel = null;

package/dist/cjs/src/rendering/renderers/SVGRenderer.js

@@ -9,6 +9,7 @@ const Path_1 = __importDefault(require("../../math/Path"));
 const rounding_1 = require("../../math/rounding");
 const Vec2_1 = require("../../math/Vec2");
 const SVGLoader_1 = require("../../SVGLoader");
+const RenderingStyle_1 = require("../RenderingStyle");
 const AbstractRenderer_1 = __importDefault(require("./AbstractRenderer"));
 exports.renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -114,11 +115,10 @@ class SVGRenderer extends AbstractRenderer_1.default {
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     drawPath(pathSpec) {
-        var _a;
         const style = pathSpec.style;
         const path = Path_1.default.fromRenderable(pathSpec).transformedBy(this.getCanvasToScreenTransform());
         // Try to extend the previous path, if possible
-        if (!style.fill.eq((_a = this.lastPathStyle) === null || _a === void 0 ? void 0 : _a.fill) || this.lastPathString.length === 0) {
+        if (this.lastPathString.length === 0 || !this.lastPathStyle || !(0, RenderingStyle_1.stylesEqual)(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -232,7 +232,7 @@ class SVGRenderer extends AbstractRenderer_1.default {
         this.objectElems = [];
     }
     endObject(loaderData, elemClassNames) {
-        var _a, _b;
+        var _a;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -254,9 +254,18 @@ class SVGRenderer extends AbstractRenderer_1.default {
             }
         }
         // Add class names to the object, if given.
-        if (elemClassNames) {
-            for (const elem of (_b = this.objectElems) !== null && _b !== void 0 ? _b : []) {
-                elem.classList.add(...elemClassNames);
+        if (elemClassNames && this.objectElems) {
+            if (this.objectElems.length === 1) {
+                this.objectElems[0].classList.add(...elemClassNames);
+            }
+            else {
+                const wrapper = document.createElementNS(svgNameSpace, 'g');
+                wrapper.classList.add(...elemClassNames);
+                for (const elem of this.objectElems) {
+                    elem.remove();
+                    wrapper.appendChild(elem);
+                }
+                this.elem.appendChild(wrapper);
             }
         }
     }

package/dist/cjs/src/toolbar/localization.d.ts

@@ -14,7 +14,7 @@ export interface ToolbarLocalization {
     submit: string;
     freehandPen: string;
     pressureSensitiveFreehandPen: string;
-    selectObjectType: string;
+    selectPenType: string;
     colorLabel: string;
     pen: string;
     eraser: string;
@@ -37,6 +37,7 @@ export interface ToolbarLocalization {
     backgroundColor: string;
     imageWidthOption: string;
     imageHeightOption: string;
+    useGridOption: string;
     toggleOverflow: string;
     errorImageHasZeroSize: string;
     dropdownShown: (toolName: string) => string;

package/dist/cjs/src/toolbar/localization.js

@@ -23,7 +23,7 @@ exports.defaultToolbarLocalization = {
     duplicateSelection: 'Duplicate selection',
     undo: 'Undo',
     redo: 'Redo',
-    selectObjectType: 'Object type: ',
+    selectPenType: 'Pen type: ',
     pickColorFromScreen: 'Pick color from screen',
     clickToPickColorAnnouncement: 'Click on the screen to pick a color',
     selectionToolKeyboardShortcuts: 'Selection tool: Use arrow keys to move selected items, lowercase/uppercase ‘i’ and ‘o’ to resize.',
@@ -31,6 +31,7 @@ exports.defaultToolbarLocalization = {
     backgroundColor: 'Background Color: ',
     imageWidthOption: 'Width: ',
     imageHeightOption: 'Height: ',
+    useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',

package/dist/cjs/src/toolbar/widgets/DocumentPropertiesWidget.d.ts

@@ -12,6 +12,11 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     private updateDropdown;
     private setBackgroundColor;
     private getBackgroundColor;
+    private removeBackgroundComponents;
+    /** Replace existing background components with a background of the given type. */
+    private setBackgroundType;
+    /** Returns the type of the topmost background component */
+    private getBackgroundType;
     private updateImportExportRectSize;
     private static idCounter;
     protected fillDropdown(dropdown: HTMLElement): boolean;

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.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.
@@ -816,7 +816,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 +829,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 +844,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/{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;
 }