js-draw 0.19.0 → 0.20.0

package/dist/mjs/src/rendering/renderers/CanvasRenderer.mjs

@@ -186,14 +186,16 @@ export default class CanvasRenderer extends AbstractRenderer {
         }
     }
     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/mjs/src/rendering/renderers/SVGRenderer.mjs

@@ -3,6 +3,7 @@ import  Path  from '../../math/Path.mjs';
 import  { toRoundedString }  from '../../math/rounding.mjs';
 import  { Vec2 }  from '../../math/Vec2.mjs';
 import  { svgAttributesDataKey, svgStyleAttributesDataKey }  from '../../SVGLoader.mjs';
+import  { stylesEqual }  from '../RenderingStyle.mjs';
 import  AbstractRenderer  from './AbstractRenderer.mjs';
 export const renderedStylesheetId = 'js-draw-style-sheet';
 const svgNameSpace = 'http://www.w3.org/2000/svg';
@@ -108,11 +109,10 @@ export default class SVGRenderer extends AbstractRenderer {
         (_a = this.objectElems) === null || _a === void 0 ? void 0 : _a.push(pathElem);
     }
     drawPath(pathSpec) {
-        var _a;
         const style = pathSpec.style;
         const path = Path.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 || !stylesEqual(this.lastPathStyle, style)) {
             this.addPathToSVG();
             this.lastPathStyle = style;
             this.lastPathString = [];
@@ -226,7 +226,7 @@ export default class SVGRenderer extends AbstractRenderer {
         this.objectElems = [];
     }
     endObject(loaderData, elemClassNames) {
-        var _a, _b;
+        var _a;
         super.endObject(loaderData);
         // Don't extend paths across objects
         this.addPathToSVG();
@@ -248,9 +248,18 @@ export default class SVGRenderer extends AbstractRenderer {
             }
         }
         // 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/mjs/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/mjs/src/toolbar/localization.mjs

@@ -20,7 +20,7 @@ export const 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.',
@@ -28,6 +28,7 @@ export const defaultToolbarLocalization = {
     backgroundColor: 'Background Color: ',
     imageWidthOption: 'Width: ',
     imageHeightOption: 'Height: ',
+    useGridOption: 'Grid: ',
     toggleOverflow: 'More',
     touchPanning: 'Touchscreen panning',
     freehandPen: 'Freehand',

package/dist/mjs/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/mjs/src/toolbar/widgets/DocumentPropertiesWidget.mjs

@@ -1,3 +1,6 @@
+import  Erase  from '../../commands/Erase.mjs';
+import  uniteCommands  from '../../commands/uniteCommands.mjs';
+import  BackgroundComponent, { BackgroundType }  from '../../components/BackgroundComponent.mjs';
 import  { EditorImageEventType }  from '../../EditorImage.mjs';
 import  Rect2  from '../../math/Rect2.mjs';
 import  { EditorEventType }  from '../../types.mjs';
@@ -6,7 +9,7 @@ import  makeColorInput  from '../makeColorInput.mjs';
 import  BaseWidget  from './BaseWidget.mjs';
 export default class DocumentPropertiesWidget extends BaseWidget {
     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.
@@ -46,6 +49,33 @@ export default class DocumentPropertiesWidget extends BaseWidget {
     getBackgroundColor() {
         return this.editor.estimateBackgroundColor();
     }
+    removeBackgroundComponents() {
+        const previousBackgrounds = [];
+        for (const component of this.editor.image.getBackgroundComponents()) {
+            if (component instanceof BackgroundComponent) {
+                previousBackgrounds.push(component);
+            }
+        }
+        return new Erase(previousBackgrounds);
+    }
+    /** Replace existing background components with a background of the given type. */
+    setBackgroundType(backgroundType) {
+        const prevBackgroundColor = this.editor.estimateBackgroundColor();
+        const newBackground = new BackgroundComponent(backgroundType, prevBackgroundColor);
+        const addBackgroundCommand = this.editor.image.addElement(newBackground);
+        return uniteCommands([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) {
+                return component.getBackgroundType();
+            }
+        }
+        return BackgroundType.None;
+    }
     updateImportExportRectSize(size) {
         const filterDimension = (dim) => {
             if (dim !== undefined && (!isFinite(dim) || dim <= 0)) {
@@ -74,6 +104,27 @@ export default class DocumentPropertiesWidget extends BaseWidget {
         colorInput.id = `${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 = `${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 === BackgroundType.Grid;
+            if (wasGrid === useGridCheckbox.checked) {
+                // Already the requested background type.
+                return;
+            }
+            let newBackgroundType = BackgroundType.SolidColor;
+            if (useGridCheckbox.checked) {
+                newBackgroundType = 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');
@@ -110,9 +161,10 @@ export default class DocumentPropertiesWidget extends BaseWidget {
             const importExportRect = this.editor.getImportExportRect();
             imageWidthRow.setValue(importExportRect.width);
             imageHeightRow.setValue(importExportRect.height);
+            useGridCheckbox.checked = this.getBackgroundType() === 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/mjs/src/toolbar/widgets/PenToolWidget.mjs

@@ -110,7 +110,7 @@ export default class PenToolWidget extends BaseToolWidget {
         objectTypeSelect.id = `${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/mjs/src/tools/FindTool.mjs

@@ -1,4 +1,4 @@
-// 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
 import  TextComponent  from '../components/TextComponent.mjs';

package/dist/mjs/src/tools/SoundUITool.mjs

@@ -69,7 +69,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/jest.config.js

@@ -21,7 +21,7 @@ const config = {
 		'\\.(css|lessc)': '<rootDir>/__mocks__/styleMock.js',
 		'@melloware/coloris': '<rootDir>/__mocks__/coloris.ts',
 	},
-	
+
 	testEnvironment: 'jsdom',
 	setupFilesAfterEnv: [ '<rootDir>/src/testing/beforeEachFile.ts' ],
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "js-draw",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"description": "Draw pictures using a pen, touchscreen, or mouse! JS-draw is a drawing library for JavaScript and TypeScript. ",
 	"types": "./dist/mjs/src/lib.d.ts",
 	"main": "./dist/cjs/src/lib.js",
@@ -87,27 +87,27 @@
 	},
 	"devDependencies": {
 		"@types/bezier-js": "^4.1.0",
-		"@types/jest": "^29.4.0",
+		"@types/jest": "^29.4.2",
 		"@types/jsdom": "^21.1.0",
-		"@types/node": "^18.14.0",
-		"@typescript-eslint/eslint-plugin": "^5.53.0",
-		"@typescript-eslint/parser": "^5.53.0",
+		"@types/node": "^18.15.3",
+		"@typescript-eslint/eslint-plugin": "^5.55.0",
+		"@typescript-eslint/parser": "^5.55.0",
 		"css-loader": "^6.7.3",
-		"eslint": "^8.34.0",
+		"eslint": "^8.36.0",
 		"husky": "^8.0.3",
-		"jest": "^29.4.3",
-		"jest-environment-jsdom": "^29.4.3",
-		"jsdom": "^21.1.0",
-		"lint-staged": "^13.1.2",
+		"jest": "^29.5.0",
+		"jest-environment-jsdom": "^29.5.0",
+		"jsdom": "^21.1.1",
+		"lint-staged": "^13.2.0",
 		"pinst": "^3.0.0",
-		"style-loader": "^3.3.1",
-		"terser-webpack-plugin": "^5.3.6",
+		"style-loader": "^3.3.2",
+		"terser-webpack-plugin": "^5.3.7",
 		"ts-jest": "^29.0.5",
 		"ts-loader": "^9.4.2",
 		"ts-node": "^10.9.1",
-		"typedoc": "^0.23.25",
+		"typedoc": "^0.23.28",
 		"typescript": "^4.9.5",
-		"webpack": "^5.75.0"
+		"webpack": "^5.76.1"
 	},
 	"bugs": {
 		"url": "https://github.com/personalizedrefrigerator/js-draw/issues"

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

@@ -1,146 +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.imageBackgroundCSSClassName = exports.BackgroundType = void 0;
-const Color4_1 = __importDefault(require("../Color4"));
-const EditorImage_1 = require("../EditorImage");
-const Rect2_1 = __importDefault(require("../math/Rect2"));
-const AbstractComponent_1 = __importDefault(require("./AbstractComponent"));
-const RestylableComponent_1 = require("./RestylableComponent");
-var BackgroundType;
-(function (BackgroundType) {
-    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
-    BackgroundType[BackgroundType["None"] = 1] = "None";
-})(BackgroundType = exports.BackgroundType || (exports.BackgroundType = {}));
-exports.imageBackgroundCSSClassName = 'js-draw-image-background';
-// Represents the background of the editor's canvas.
-class ImageBackground extends AbstractComponent_1.default {
-    constructor(backgroundType, mainColor) {
-        super('image-background', 0);
-        this.backgroundType = backgroundType;
-        this.mainColor = mainColor;
-        this.viewportSizeChangeListener = null;
-        // eslint-disable-next-line @typescript-eslint/prefer-as-const
-        this.isRestylableComponent = true;
-        this.contentBBox = Rect2_1.default.empty;
-    }
-    getStyle() {
-        let color = this.mainColor;
-        if (this.backgroundType === BackgroundType.None) {
-            color = undefined;
-        }
-        return {
-            color,
-        };
-    }
-    updateStyle(style) {
-        return (0, RestylableComponent_1.createRestyleComponentCommand)(this.getStyle(), style, this);
-    }
-    // @internal
-    forceStyle(style, editor) {
-        const fill = style.color;
-        if (!fill) {
-            return;
-        }
-        this.mainColor = fill;
-        if (fill.eq(Color4_1.default.transparent)) {
-            this.backgroundType = BackgroundType.None;
-        }
-        else {
-            this.backgroundType = BackgroundType.SolidColor;
-        }
-        if (editor) {
-            editor.image.queueRerenderOf(this);
-            editor.queueRerender();
-        }
-    }
-    onAddToImage(image) {
-        if (this.viewportSizeChangeListener) {
-            console.warn('onAddToImage called when background is already in an image');
-            this.onRemoveFromImage();
-        }
-        this.viewportSizeChangeListener = image.notifier.on(EditorImage_1.EditorImageEventType.ExportViewportChanged, () => {
-            this.recomputeBBox(image);
-        });
-        this.recomputeBBox(image);
-    }
-    onRemoveFromImage() {
-        var _a;
-        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
-        this.viewportSizeChangeListener = null;
-    }
-    recomputeBBox(image) {
-        const importExportRect = image.getImportExportViewport().visibleRect;
-        if (!this.contentBBox.eq(importExportRect)) {
-            this.contentBBox = importExportRect;
-            // Re-render this if already added to the EditorImage.
-            image.queueRerenderOf(this);
-        }
-    }
-    render(canvas, visibleRect) {
-        if (this.backgroundType === BackgroundType.None) {
-            return;
-        }
-        canvas.startObject(this.contentBBox);
-        if (this.backgroundType === BackgroundType.SolidColor) {
-            // 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) {
-                const intersection = visibleRect.intersection(this.contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
-            }
-            else {
-                canvas.fillRect(this.contentBBox, this.mainColor);
-            }
-        }
-        canvas.endObject(this.getLoadSaveData(), [exports.imageBackgroundCSSClassName]);
-    }
-    intersects(lineSegment) {
-        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
-    }
-    isSelectable() {
-        return false;
-    }
-    isBackground() {
-        return true;
-    }
-    serializeToJSON() {
-        return {
-            mainColor: this.mainColor.toHexString(),
-            backgroundType: this.backgroundType,
-        };
-    }
-    applyTransformation(_affineTransfm) {
-        // Do nothing — it doesn't make sense to transform the background.
-    }
-    description(localizationTable) {
-        if (this.backgroundType === BackgroundType.SolidColor) {
-            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
-        }
-        else {
-            return localizationTable.emptyBackground;
-        }
-    }
-    createClone() {
-        return new ImageBackground(this.backgroundType, this.mainColor);
-    }
-    // @internal
-    static deserializeFromJSON(json) {
-        if (typeof json === 'string') {
-            json = JSON.parse(json);
-        }
-        if (typeof json.mainColor !== 'string') {
-            throw new Error('Error deserializing — mainColor must be of type string.');
-        }
-        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
-        const mainColor = Color4_1.default.fromHex(json.mainColor);
-        return new ImageBackground(backgroundType, mainColor);
-    }
-}
-exports.default = ImageBackground;
-AbstractComponent_1.default.registerComponent('image-background', ImageBackground.deserializeFromJSON);

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

@@ -1,139 +0,0 @@
-import  Color4  from '../Color4.mjs';
-import  { EditorImageEventType }  from '../EditorImage.mjs';
-import  Rect2  from '../math/Rect2.mjs';
-import  AbstractComponent  from './AbstractComponent.mjs';
-import  { createRestyleComponentCommand }  from './RestylableComponent.mjs';
-export var BackgroundType;
-(function (BackgroundType) {
-    BackgroundType[BackgroundType["SolidColor"] = 0] = "SolidColor";
-    BackgroundType[BackgroundType["None"] = 1] = "None";
-})(BackgroundType || (BackgroundType = {}));
-export const imageBackgroundCSSClassName = 'js-draw-image-background';
-// Represents the background of the editor's canvas.
-export default class ImageBackground extends AbstractComponent {
-    constructor(backgroundType, mainColor) {
-        super('image-background', 0);
-        this.backgroundType = backgroundType;
-        this.mainColor = mainColor;
-        this.viewportSizeChangeListener = null;
-        // eslint-disable-next-line @typescript-eslint/prefer-as-const
-        this.isRestylableComponent = true;
-        this.contentBBox = Rect2.empty;
-    }
-    getStyle() {
-        let color = this.mainColor;
-        if (this.backgroundType === BackgroundType.None) {
-            color = undefined;
-        }
-        return {
-            color,
-        };
-    }
-    updateStyle(style) {
-        return createRestyleComponentCommand(this.getStyle(), style, this);
-    }
-    // @internal
-    forceStyle(style, editor) {
-        const fill = style.color;
-        if (!fill) {
-            return;
-        }
-        this.mainColor = fill;
-        if (fill.eq(Color4.transparent)) {
-            this.backgroundType = BackgroundType.None;
-        }
-        else {
-            this.backgroundType = BackgroundType.SolidColor;
-        }
-        if (editor) {
-            editor.image.queueRerenderOf(this);
-            editor.queueRerender();
-        }
-    }
-    onAddToImage(image) {
-        if (this.viewportSizeChangeListener) {
-            console.warn('onAddToImage called when background is already in an image');
-            this.onRemoveFromImage();
-        }
-        this.viewportSizeChangeListener = image.notifier.on(EditorImageEventType.ExportViewportChanged, () => {
-            this.recomputeBBox(image);
-        });
-        this.recomputeBBox(image);
-    }
-    onRemoveFromImage() {
-        var _a;
-        (_a = this.viewportSizeChangeListener) === null || _a === void 0 ? void 0 : _a.remove();
-        this.viewportSizeChangeListener = null;
-    }
-    recomputeBBox(image) {
-        const importExportRect = image.getImportExportViewport().visibleRect;
-        if (!this.contentBBox.eq(importExportRect)) {
-            this.contentBBox = importExportRect;
-            // Re-render this if already added to the EditorImage.
-            image.queueRerenderOf(this);
-        }
-    }
-    render(canvas, visibleRect) {
-        if (this.backgroundType === BackgroundType.None) {
-            return;
-        }
-        canvas.startObject(this.contentBBox);
-        if (this.backgroundType === BackgroundType.SolidColor) {
-            // 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) {
-                const intersection = visibleRect.intersection(this.contentBBox);
-                if (intersection) {
-                    canvas.fillRect(intersection, this.mainColor);
-                }
-            }
-            else {
-                canvas.fillRect(this.contentBBox, this.mainColor);
-            }
-        }
-        canvas.endObject(this.getLoadSaveData(), [imageBackgroundCSSClassName]);
-    }
-    intersects(lineSegment) {
-        return this.contentBBox.getEdges().some(edge => edge.intersects(lineSegment));
-    }
-    isSelectable() {
-        return false;
-    }
-    isBackground() {
-        return true;
-    }
-    serializeToJSON() {
-        return {
-            mainColor: this.mainColor.toHexString(),
-            backgroundType: this.backgroundType,
-        };
-    }
-    applyTransformation(_affineTransfm) {
-        // Do nothing — it doesn't make sense to transform the background.
-    }
-    description(localizationTable) {
-        if (this.backgroundType === BackgroundType.SolidColor) {
-            return localizationTable.filledBackgroundWithColor(this.mainColor.toString());
-        }
-        else {
-            return localizationTable.emptyBackground;
-        }
-    }
-    createClone() {
-        return new ImageBackground(this.backgroundType, this.mainColor);
-    }
-    // @internal
-    static deserializeFromJSON(json) {
-        if (typeof json === 'string') {
-            json = JSON.parse(json);
-        }
-        if (typeof json.mainColor !== 'string') {
-            throw new Error('Error deserializing — mainColor must be of type string.');
-        }
-        const backgroundType = json.backgroundType === BackgroundType.SolidColor ? BackgroundType.SolidColor : BackgroundType.None;
-        const mainColor = Color4.fromHex(json.mainColor);
-        return new ImageBackground(backgroundType, mainColor);
-    }
-}
-AbstractComponent.registerComponent('image-background', ImageBackground.deserializeFromJSON);