@onerjs/gui 8.23.1

package/2D/controls/displayGrid.js

@@ -0,0 +1,202 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { Control } from "./control.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/** Class used to render a grid  */
+export class DisplayGrid extends Control {
+    /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */
+    get displayMinorLines() {
+        return this._displayMinorLines;
+    }
+    set displayMinorLines(value) {
+        if (this._displayMinorLines === value) {
+            return;
+        }
+        this._displayMinorLines = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */
+    get displayMajorLines() {
+        return this._displayMajorLines;
+    }
+    set displayMajorLines(value) {
+        if (this._displayMajorLines === value) {
+            return;
+        }
+        this._displayMajorLines = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets background color (Black by default) */
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        if (this._background === value) {
+            return;
+        }
+        this._background = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the width of each cell (20 by default) */
+    get cellWidth() {
+        return this._cellWidth;
+    }
+    set cellWidth(value) {
+        this._cellWidth = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the height of each cell (20 by default) */
+    get cellHeight() {
+        return this._cellHeight;
+    }
+    set cellHeight(value) {
+        this._cellHeight = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the tickness of minor lines (1 by default) */
+    get minorLineTickness() {
+        return this._minorLineTickness;
+    }
+    set minorLineTickness(value) {
+        this._minorLineTickness = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the color of minor lines (DarkGray by default) */
+    get minorLineColor() {
+        return this._minorLineColor;
+    }
+    set minorLineColor(value) {
+        this._minorLineColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the tickness of major lines (2 by default) */
+    get majorLineTickness() {
+        return this._majorLineTickness;
+    }
+    set majorLineTickness(value) {
+        this._majorLineTickness = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the color of major lines (White by default) */
+    get majorLineColor() {
+        return this._majorLineColor;
+    }
+    set majorLineColor(value) {
+        this._majorLineColor = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/
+    get majorLineFrequency() {
+        return this._majorLineFrequency;
+    }
+    set majorLineFrequency(value) {
+        this._majorLineFrequency = value;
+        this._markAsDirty();
+    }
+    /**
+     * Creates a new GridDisplayRectangle
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._cellWidth = 20;
+        this._cellHeight = 20;
+        this._minorLineTickness = 1;
+        this._minorLineColor = "DarkGray";
+        this._majorLineTickness = 2;
+        this._majorLineColor = "White";
+        this._majorLineFrequency = 5;
+        this._background = "Black";
+        this._displayMajorLines = true;
+        this._displayMinorLines = true;
+    }
+    _draw(context) {
+        context.save();
+        this._applyStates(context);
+        if (this._isEnabled) {
+            if (this._background) {
+                context.fillStyle = this._background;
+                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);
+            }
+            const cellCountX = this._currentMeasure.width / this._cellWidth;
+            const cellCountY = this._currentMeasure.height / this._cellHeight;
+            // Minor lines
+            const left = this._currentMeasure.left + this._currentMeasure.width / 2;
+            const top = this._currentMeasure.top + this._currentMeasure.height / 2;
+            if (this._displayMinorLines) {
+                context.strokeStyle = this._minorLineColor;
+                context.lineWidth = this._minorLineTickness;
+                for (let x = -cellCountX / 2 + 1; x < cellCountX / 2; x++) {
+                    const cellX = left + x * this.cellWidth;
+                    context.beginPath();
+                    context.moveTo(cellX, this._currentMeasure.top);
+                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                    context.stroke();
+                }
+                for (let y = -cellCountY / 2 + 1; y < cellCountY / 2; y++) {
+                    const cellY = top + y * this.cellHeight;
+                    context.beginPath();
+                    context.moveTo(this._currentMeasure.left, cellY);
+                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                    context.stroke();
+                }
+            }
+            // Major lines
+            if (this._displayMajorLines) {
+                context.strokeStyle = this._majorLineColor;
+                context.lineWidth = this._majorLineTickness;
+                for (let x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {
+                    const cellX = left + x * this.cellWidth;
+                    context.beginPath();
+                    context.moveTo(cellX, this._currentMeasure.top);
+                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);
+                    context.stroke();
+                }
+                for (let y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {
+                    const cellY = top + y * this.cellHeight;
+                    context.moveTo(this._currentMeasure.left, cellY);
+                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);
+                    context.closePath();
+                    context.stroke();
+                }
+            }
+        }
+        context.restore();
+    }
+    _getTypeName() {
+        return "DisplayGrid";
+    }
+}
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "displayMinorLines", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "displayMajorLines", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "background", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "cellWidth", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "cellHeight", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "minorLineTickness", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "minorLineColor", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "majorLineTickness", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "majorLineColor", null);
+__decorate([
+    serialize()
+], DisplayGrid.prototype, "majorLineFrequency", null);
+RegisterClass("BABYLON.GUI.DisplayGrid", DisplayGrid);
+//# sourceMappingURL=displayGrid.js.map

package/2D/controls/displayGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"displayGrid.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/displayGrid.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,0CAA4B;AACpD,OAAO,EAAE,SAAS,EAAE,2CAA6B;AAGjD,mCAAmC;AACnC,MAAM,OAAO,WAAY,SAAQ,OAAO;IAiBpC,2FAA2F;IAE3F,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IAED,IAAW,iBAAiB,CAAC,KAAc;QACvC,IAAI,IAAI,CAAC,kBAAkB,KAAK,KAAK,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,2FAA2F;IAE3F,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IAED,IAAW,iBAAiB,CAAC,KAAc;QACvC,IAAI,IAAI,CAAC,kBAAkB,KAAK,KAAK,EAAE,CAAC;YACpC,OAAO;QACX,CAAC;QAED,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAChC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,uDAAuD;IAEvD,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,0DAA0D;IAE1D,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAED,IAAW,SAAS,CAAC,KAAa;QAC9B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,2DAA2D;IAE3D,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,IAAW,UAAU,CAAC,KAAa;QAC/B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QAEzB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,8DAA8D;IAE9D,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IAED,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAEhC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,kEAAkE;IAElE,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,8DAA8D;IAE9D,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC;IACnC,CAAC;IAED,IAAW,iBAAiB,CAAC,KAAa;QACtC,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;QAEhC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,+DAA+D;IAE/D,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED,IAAW,cAAc,CAAC,KAAa;QACnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAE7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,kFAAkF;IAElF,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,mBAAmB,CAAC;IACpC,CAAC;IAED,IAAW,kBAAkB,CAAC,KAAa;QACvC,IAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC;QAEjC,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACH,YAA4B,IAAa;QACrC,KAAK,CAAC,IAAI,CAAC,CAAC;QADY,SAAI,GAAJ,IAAI,CAAS;QArJjC,eAAU,GAAG,EAAE,CAAC;QAChB,gBAAW,GAAG,EAAE,CAAC;QAEjB,uBAAkB,GAAG,CAAC,CAAC;QACvB,oBAAe,GAAG,UAAU,CAAC;QAE7B,uBAAkB,GAAG,CAAC,CAAC;QACvB,oBAAe,GAAG,OAAO,CAAC;QAE1B,wBAAmB,GAAG,CAAC,CAAC;QAExB,gBAAW,GAAG,OAAO,CAAC;QAEtB,uBAAkB,GAAG,IAAI,CAAC;QAC1B,uBAAkB,GAAG,IAAI,CAAC;IAyIlC,CAAC;IAEe,KAAK,CAAC,OAAgC;QAClD,OAAO,CAAC,IAAI,EAAE,CAAC;QAEf,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAE3B,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACnB,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC;gBACrC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;YACnI,CAAC;YAED,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC;YAChE,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC;YAElE,cAAc;YACd,MAAM,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,GAAG,CAAC,CAAC;YACxE,MAAM,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC;YAEvE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;gBAC3C,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBAE5C,KAAK,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACxD,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;oBAExC,OAAO,CAAC,SAAS,EAAE,CAAC;oBACpB,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;oBAChD,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;oBAE9E,OAAO,CAAC,MAAM,EAAE,CAAC;gBACrB,CAAC;gBAED,KAAK,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;oBACxD,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;oBAExC,OAAO,CAAC,SAAS,EAAE,CAAC;oBACpB,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBACjD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBAC9E,OAAO,CAAC,MAAM,EAAE,CAAC;gBACrB,CAAC;YACL,CAAC;YAED,cAAc;YACd,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBAC1B,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC;gBAC3C,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,kBAAkB,CAAC;gBAE5C,KAAK,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACzG,MAAM,KAAK,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC;oBAExC,OAAO,CAAC,SAAS,EAAE,CAAC;oBACpB,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;oBAChD,OAAO,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;oBAC9E,OAAO,CAAC,MAAM,EAAE,CAAC;gBACrB,CAAC;gBAED,KAAK,IAAI,CAAC,GAAG,CAAC,UAAU,GAAG,CAAC,GAAG,IAAI,CAAC,mBAAmB,EAAE,CAAC,GAAG,UAAU,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,mBAAmB,EAAE,CAAC;oBACzG,MAAM,KAAK,GAAG,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC;oBACxC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;oBACjD,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;oBAC9E,OAAO,CAAC,SAAS,EAAE,CAAC;oBACpB,OAAO,CAAC,MAAM,EAAE,CAAC;gBACrB,CAAC;YACL,CAAC;QACL,CAAC;QAED,OAAO,CAAC,OAAO,EAAE,CAAC;IACtB,CAAC;IAEkB,YAAY;QAC3B,OAAO,aAAa,CAAC;IACzB,CAAC;CACJ;AA/MG;IADC,SAAS,EAAE;oDAGX;AAaD;IADC,SAAS,EAAE;oDAGX;AAaD;IADC,SAAS,EAAE;6CAGX;AAaD;IADC,SAAS,EAAE;4CAGX;AAUD;IADC,SAAS,EAAE;6CAGX;AAUD;IADC,SAAS,EAAE;oDAGX;AAUD;IADC,SAAS,EAAE;iDAGX;AAUD;IADC,SAAS,EAAE;oDAGX;AAUD;IADC,SAAS,EAAE;iDAGX;AAUD;IADC,SAAS,EAAE;qDAGX;AAyFL,aAAa,CAAC,yBAAyB,EAAE,WAAW,CAAC,CAAC","sourcesContent":["import { Control } from \"./control\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/** Class used to render a grid  */\r\nexport class DisplayGrid extends Control {\r\n    private _cellWidth = 20;\r\n    private _cellHeight = 20;\r\n\r\n    private _minorLineTickness = 1;\r\n    private _minorLineColor = \"DarkGray\";\r\n\r\n    private _majorLineTickness = 2;\r\n    private _majorLineColor = \"White\";\r\n\r\n    private _majorLineFrequency = 5;\r\n\r\n    private _background = \"Black\";\r\n\r\n    private _displayMajorLines = true;\r\n    private _displayMinorLines = true;\r\n\r\n    /** Gets or sets a boolean indicating if minor lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMinorLines(): boolean {\r\n        return this._displayMinorLines;\r\n    }\r\n\r\n    public set displayMinorLines(value: boolean) {\r\n        if (this._displayMinorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMinorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if major lines must be rendered (true by default)) */\r\n    @serialize()\r\n    public get displayMajorLines(): boolean {\r\n        return this._displayMajorLines;\r\n    }\r\n\r\n    public set displayMajorLines(value: boolean) {\r\n        if (this._displayMajorLines === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayMajorLines = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color (Black by default) */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the width of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellWidth(): number {\r\n        return this._cellWidth;\r\n    }\r\n\r\n    public set cellWidth(value: number) {\r\n        this._cellWidth = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the height of each cell (20 by default) */\r\n    @serialize()\r\n    public get cellHeight(): number {\r\n        return this._cellHeight;\r\n    }\r\n\r\n    public set cellHeight(value: number) {\r\n        this._cellHeight = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of minor lines (1 by default) */\r\n    @serialize()\r\n    public get minorLineTickness(): number {\r\n        return this._minorLineTickness;\r\n    }\r\n\r\n    public set minorLineTickness(value: number) {\r\n        this._minorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of minor lines (DarkGray by default) */\r\n    @serialize()\r\n    public get minorLineColor(): string {\r\n        return this._minorLineColor;\r\n    }\r\n\r\n    public set minorLineColor(value: string) {\r\n        this._minorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the tickness of major lines (2 by default) */\r\n    @serialize()\r\n    public get majorLineTickness(): number {\r\n        return this._majorLineTickness;\r\n    }\r\n\r\n    public set majorLineTickness(value: number) {\r\n        this._majorLineTickness = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the color of major lines (White by default) */\r\n    @serialize()\r\n    public get majorLineColor(): string {\r\n        return this._majorLineColor;\r\n    }\r\n\r\n    public set majorLineColor(value: string) {\r\n        this._majorLineColor = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets the frequency of major lines (default is 1 every 5 minor lines)*/\r\n    @serialize()\r\n    public get majorLineFrequency(): number {\r\n        return this._majorLineFrequency;\r\n    }\r\n\r\n    public set majorLineFrequency(value: number) {\r\n        this._majorLineFrequency = value;\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new GridDisplayRectangle\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    public override _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n\r\n        if (this._isEnabled) {\r\n            if (this._background) {\r\n                context.fillStyle = this._background;\r\n                context.fillRect(this._currentMeasure.left, this._currentMeasure.top, this._currentMeasure.width, this._currentMeasure.height);\r\n            }\r\n\r\n            const cellCountX = this._currentMeasure.width / this._cellWidth;\r\n            const cellCountY = this._currentMeasure.height / this._cellHeight;\r\n\r\n            // Minor lines\r\n            const left = this._currentMeasure.left + this._currentMeasure.width / 2;\r\n            const top = this._currentMeasure.top + this._currentMeasure.height / 2;\r\n\r\n            if (this._displayMinorLines) {\r\n                context.strokeStyle = this._minorLineColor;\r\n                context.lineWidth = this._minorLineTickness;\r\n\r\n                for (let x = -cellCountX / 2 + 1; x < cellCountX / 2; x++) {\r\n                    const cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n\r\n                    context.stroke();\r\n                }\r\n\r\n                for (let y = -cellCountY / 2 + 1; y < cellCountY / 2; y++) {\r\n                    const cellY = top + y * this.cellHeight;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.stroke();\r\n                }\r\n            }\r\n\r\n            // Major lines\r\n            if (this._displayMajorLines) {\r\n                context.strokeStyle = this._majorLineColor;\r\n                context.lineWidth = this._majorLineTickness;\r\n\r\n                for (let x = -cellCountX / 2 + this._majorLineFrequency; x < cellCountX / 2; x += this._majorLineFrequency) {\r\n                    const cellX = left + x * this.cellWidth;\r\n\r\n                    context.beginPath();\r\n                    context.moveTo(cellX, this._currentMeasure.top);\r\n                    context.lineTo(cellX, this._currentMeasure.top + this._currentMeasure.height);\r\n                    context.stroke();\r\n                }\r\n\r\n                for (let y = -cellCountY / 2 + this._majorLineFrequency; y < cellCountY / 2; y += this._majorLineFrequency) {\r\n                    const cellY = top + y * this.cellHeight;\r\n                    context.moveTo(this._currentMeasure.left, cellY);\r\n                    context.lineTo(this._currentMeasure.left + this._currentMeasure.width, cellY);\r\n                    context.closePath();\r\n                    context.stroke();\r\n                }\r\n            }\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"DisplayGrid\";\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.DisplayGrid\", DisplayGrid);\r\n"]}

package/2D/controls/ellipse.d.ts

@@ -0,0 +1,25 @@
+import { Container } from "./container.js";
+import type { Measure } from "../measure.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/** Class used to create 2D ellipse containers */
+export declare class Ellipse extends Container {
+    name?: string | undefined;
+    private _thickness;
+    /** Gets or sets border thickness */
+    get thickness(): number;
+    set thickness(value: number);
+    private _arc;
+    /** Gets or sets arcing of the ellipse (ratio of the circumference between 0 and 1) */
+    get arc(): number;
+    set arc(value: number);
+    /**
+     * Creates a new Ellipse
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    protected _localDraw(context: ICanvasRenderingContext): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
+    protected _clipForChildren(context: ICanvasRenderingContext): void;
+    _renderHighlightSpecific(context: ICanvasRenderingContext): void;
+}

package/2D/controls/ellipse.js

@@ -0,0 +1,93 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { Container } from "./container.js";
+import { Control } from "./control.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/** Class used to create 2D ellipse containers */
+export class Ellipse extends Container {
+    /** Gets or sets border thickness */
+    get thickness() {
+        return this._thickness;
+    }
+    set thickness(value) {
+        if (this._thickness === value) {
+            return;
+        }
+        this._thickness = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets arcing of the ellipse (ratio of the circumference between 0 and 1) */
+    get arc() {
+        return this._arc;
+    }
+    set arc(value) {
+        if (this._arc === value) {
+            return;
+        }
+        this._arc = value;
+        this._markAsDirty();
+    }
+    /**
+     * Creates a new Ellipse
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._thickness = 1;
+        this._arc = 1;
+    }
+    _getTypeName() {
+        return "Ellipse";
+    }
+    _localDraw(context) {
+        context.save();
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, this._arc, context);
+        if (this._backgroundGradient || this._background) {
+            context.fillStyle = this._getBackgroundColor(context);
+            context.fill();
+        }
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+        }
+        if (this._thickness) {
+            if (this.color) {
+                context.strokeStyle = this.color;
+            }
+            context.lineWidth = this._thickness;
+            context.stroke();
+        }
+        context.restore();
+    }
+    _additionalProcessing(parentMeasure, context) {
+        super._additionalProcessing(parentMeasure, context);
+        this._measureForChildren.width -= 2 * this._thickness;
+        this._measureForChildren.height -= 2 * this._thickness;
+        this._measureForChildren.left += this._thickness;
+        this._measureForChildren.top += this._thickness;
+    }
+    _clipForChildren(context) {
+        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2, this._currentMeasure.height / 2, this._arc, context);
+        context.clip();
+    }
+    _renderHighlightSpecific(context) {
+        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._highlightLineWidth / 2, this._currentMeasure.height / 2 - this._highlightLineWidth / 2, this._arc, context);
+        context.stroke();
+    }
+}
+__decorate([
+    serialize()
+], Ellipse.prototype, "thickness", null);
+__decorate([
+    serialize()
+], Ellipse.prototype, "arc", null);
+RegisterClass("BABYLON.GUI.Ellipse", Ellipse);
+//# sourceMappingURL=ellipse.js.map

package/2D/controls/ellipse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ellipse.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/ellipse.ts"],"names":[],"mappings":"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","sourcesContent":["import { Container } from \"./container\";\r\nimport { Control } from \"./control\";\r\nimport type { Measure } from \"../measure\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/** Class used to create 2D ellipse containers */\r\nexport class Ellipse extends Container {\r\n    private _thickness = 1;\r\n\r\n    /** Gets or sets border thickness */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    private _arc = 1;\r\n\r\n    /** Gets or sets arcing of the ellipse (ratio of the circumference between 0 and 1) */\r\n    @serialize()\r\n    public get arc(): number {\r\n        return this._arc;\r\n    }\r\n\r\n    public set arc(value: number) {\r\n        if (this._arc === value) {\r\n            return;\r\n        }\r\n\r\n        this._arc = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new Ellipse\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"Ellipse\";\r\n    }\r\n\r\n    protected override _localDraw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2,\r\n            this._currentMeasure.height / 2 - this._thickness / 2,\r\n            this._arc,\r\n            context\r\n        );\r\n\r\n        if (this._backgroundGradient || this._background) {\r\n            context.fillStyle = this._getBackgroundColor(context);\r\n\r\n            context.fill();\r\n        }\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        if (this._thickness) {\r\n            if (this.color) {\r\n                context.strokeStyle = this.color;\r\n            }\r\n            context.lineWidth = this._thickness;\r\n\r\n            context.stroke();\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected override _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void {\r\n        super._additionalProcessing(parentMeasure, context);\r\n\r\n        this._measureForChildren.width -= 2 * this._thickness;\r\n        this._measureForChildren.height -= 2 * this._thickness;\r\n        this._measureForChildren.left += this._thickness;\r\n        this._measureForChildren.top += this._thickness;\r\n    }\r\n\r\n    protected override _clipForChildren(context: ICanvasRenderingContext) {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2,\r\n            this._currentMeasure.height / 2,\r\n            this._arc,\r\n            context\r\n        );\r\n\r\n        context.clip();\r\n    }\r\n\r\n    public override _renderHighlightSpecific(context: ICanvasRenderingContext): void {\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._highlightLineWidth / 2,\r\n            this._currentMeasure.height / 2 - this._highlightLineWidth / 2,\r\n            this._arc,\r\n            context\r\n        );\r\n        context.stroke();\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Ellipse\", Ellipse);\r\n"]}

package/2D/controls/focusableButton.d.ts

@@ -0,0 +1,17 @@
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Button } from "./button.js";
+import type { Control } from "./control.js";
+import type { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import type { IFocusableControl } from "./focusableControl.js";
+/**
+ * Class used to create a focusable button that can easily handle keyboard events
+ * @since 5.0.0
+ */
+export declare class FocusableButton extends Button implements IFocusableControl {
+    name?: string | undefined;
+    constructor(name?: string | undefined);
+    /**
+     * @internal
+     */
+    _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+}

package/2D/controls/focusableButton.js

@@ -0,0 +1,25 @@
+import { Button } from "./button.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+/**
+ * Class used to create a focusable button that can easily handle keyboard events
+ * @since 5.0.0
+ */
+export class FocusableButton extends Button {
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._unfocusedColor = this.color;
+    }
+    /**
+     * @internal
+     */
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
+        if (!this.isReadOnly) {
+            // Clicking on button should focus
+            this.focus();
+        }
+        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
+    }
+}
+RegisterClass("BABYLON.GUI.FocusableButton", FocusableButton);
+//# sourceMappingURL=focusableButton.js.map

package/2D/controls/focusableButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusableButton.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/focusableButton.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,aAAa,EAAE,0CAA4B;AAIpD;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,MAAM;IACvC,YAA4B,IAAa;QACrC,KAAK,CAAC,IAAI,CAAC,CAAC;QADY,SAAI,GAAJ,IAAI,CAAS;QAGrC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;IACtC,CAAC;IAED;;OAEG;IACa,cAAc,CAAC,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QAC7H,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,kCAAkC;YAClC,IAAI,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;QAED,OAAO,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IACjF,CAAC;CACJ;AACD,aAAa,CAAC,6BAA6B,EAAE,eAAe,CAAC,CAAC","sourcesContent":["import type { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Button } from \"./button\";\r\nimport type { Control } from \"./control\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport type { IFocusableControl } from \"./focusableControl\";\r\n\r\n/**\r\n * Class used to create a focusable button that can easily handle keyboard events\r\n * @since 5.0.0\r\n */\r\nexport class FocusableButton extends Button implements IFocusableControl {\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n\r\n        this._unfocusedColor = this.color;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!this.isReadOnly) {\r\n            // Clicking on button should focus\r\n            this.focus();\r\n        }\r\n\r\n        return super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.FocusableButton\", FocusableButton);\r\n"]}

package/2D/controls/focusableControl.d.ts

@@ -0,0 +1,43 @@
+import type { IKeyboardEvent } from "@babylonjs/core/Events/deviceInputEvents.js";
+import type { Nullable } from "@babylonjs/core/types.js";
+import type { Control } from "./control.js";
+/**
+ * Interface used to define a control that can receive focus
+ */
+export interface IFocusableControl {
+    /**
+     * Function called when the control receives the focus
+     */
+    onFocus(): void;
+    /**
+     * Function called when the control loses the focus
+     */
+    onBlur(): void;
+    /**
+     * Function called to let the control handle keyboard events
+     * @param evt defines the current keyboard event
+     */
+    processKeyboard(evt: IKeyboardEvent): void;
+    /**
+     * Function called to get the list of controls that should not steal the focus from this control
+     * @returns an array of controls
+     */
+    keepsFocusWith(): Nullable<Control[]>;
+    /**
+     * Function to focus the control programmatically
+     */
+    focus(): void;
+    /**
+     * Function to unfocus the control programmatically
+     */
+    blur(): void;
+    /**
+     * Gets or sets the tabIndex of the control
+     */
+    tabIndex?: number;
+    /**
+     * Gets or sets the color used to draw the focus border
+     * Defaults to "white"
+     */
+    focusBorderColor?: string;
+}

package/2D/controls/focusableControl.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=focusableControl.js.map

package/2D/controls/focusableControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focusableControl.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/focusableControl.ts"],"names":[],"mappings":"","sourcesContent":["import type { IKeyboardEvent } from \"core/Events/deviceInputEvents\";\r\nimport type { Nullable } from \"core/types\";\r\nimport type { Control } from \"./control\";\r\n\r\n/**\r\n * Interface used to define a control that can receive focus\r\n */\r\nexport interface IFocusableControl {\r\n    /**\r\n     * Function called when the control receives the focus\r\n     */\r\n    onFocus(): void;\r\n    /**\r\n     * Function called when the control loses the focus\r\n     */\r\n    onBlur(): void;\r\n    /**\r\n     * Function called to let the control handle keyboard events\r\n     * @param evt defines the current keyboard event\r\n     */\r\n    processKeyboard(evt: IKeyboardEvent): void;\r\n    /**\r\n     * Function called to get the list of controls that should not steal the focus from this control\r\n     * @returns an array of controls\r\n     */\r\n    keepsFocusWith(): Nullable<Control[]>;\r\n    /**\r\n     * Function to focus the control programmatically\r\n     */\r\n    focus(): void;\r\n    /**\r\n     * Function to unfocus the control programmatically\r\n     */\r\n    blur(): void;\r\n\r\n    /**\r\n     * Gets or sets the tabIndex of the control\r\n     */\r\n    tabIndex?: number;\r\n\r\n    /**\r\n     * Gets or sets the color used to draw the focus border\r\n     * Defaults to \"white\"\r\n     */\r\n    focusBorderColor?: string;\r\n}\r\n"]}

package/2D/controls/gradient/BaseGradient.d.ts

@@ -0,0 +1,69 @@
+import type { ICanvasGradient, ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/**
+ * Type that represents a single stop on the gradient.
+ */
+export type GradientColorStop = {
+    /**
+     * Offset from the start where the color will be applied.
+     */
+    offset: number;
+    /**
+     * Color to be applied.
+     */
+    color: string;
+};
+/**
+ * Class that serves as a base for all the gradients created from context.
+ */
+export declare abstract class BaseGradient {
+    private _colorStops;
+    private _canvasGradient;
+    private _context;
+    private _gradientDirty;
+    /**
+     * Overwritten by child classes to create the canvas gradient.
+     * @param context
+     */
+    protected abstract _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;
+    private _addColorStopsToCanvasGradient;
+    /**
+     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+     * reuse the existing gradient.
+     * @param context the context to create the gradient from
+     * @returns the canvas gradient
+     */
+    getCanvasGradient(context: ICanvasRenderingContext): CanvasGradient;
+    /**
+     * Adds a new color stop to the gradient.
+     * @param offset the offset of the stop on the gradient. Should be between 0 and 1
+     * @param color the color of the stop
+     */
+    addColorStop(offset: number, color: string): void;
+    /**
+     * Removes an existing color stop with the specified offset from the gradient
+     * @param offset the offset of the stop to be removed
+     */
+    removeColorStop(offset: number): void;
+    /**
+     * Removes all color stops from the gradient
+     */
+    clearColorStops(): void;
+    /**
+     * Color stops of the gradient
+     */
+    get colorStops(): GradientColorStop[];
+    /**
+     * @returns Type of the gradient
+     */
+    getClassName(): string;
+    /**
+     * Serialize into a json object
+     * @param serializationObject object to serialize into
+     */
+    serialize(serializationObject: any): void;
+    /**
+     * Parse from json object
+     * @param serializationObject object to parse from
+     */
+    parse(serializationObject: any): void;
+}

package/2D/controls/gradient/BaseGradient.js

@@ -0,0 +1,84 @@
+/*
+ * Base Gradient class. Should not be used directly.
+ */
+/**
+ * Class that serves as a base for all the gradients created from context.
+ */
+export class BaseGradient {
+    constructor() {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    }
+    _addColorStopsToCanvasGradient() {
+        for (const stop of this._colorStops) {
+            this._canvasGradient.addColorStop(stop.offset, stop.color);
+        }
+    }
+    /**
+     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,
+     * reuse the existing gradient.
+     * @param context the context to create the gradient from
+     * @returns the canvas gradient
+     */
+    getCanvasGradient(context) {
+        if (this._gradientDirty || this._context !== context) {
+            this._context = context;
+            this._canvasGradient = this._createCanvasGradient(context);
+            this._addColorStopsToCanvasGradient();
+            this._gradientDirty = false;
+        }
+        return this._canvasGradient;
+    }
+    /**
+     * Adds a new color stop to the gradient.
+     * @param offset the offset of the stop on the gradient. Should be between 0 and 1
+     * @param color the color of the stop
+     */
+    addColorStop(offset, color) {
+        this._colorStops.push({ offset, color });
+        this._gradientDirty = true;
+    }
+    /**
+     * Removes an existing color stop with the specified offset from the gradient
+     * @param offset the offset of the stop to be removed
+     */
+    removeColorStop(offset) {
+        this._colorStops = this._colorStops.filter((colorStop) => colorStop.offset !== offset);
+        this._gradientDirty = true;
+    }
+    /**
+     * Removes all color stops from the gradient
+     */
+    clearColorStops() {
+        this._colorStops = [];
+        this._gradientDirty = true;
+    }
+    /**
+     * Color stops of the gradient
+     */
+    get colorStops() {
+        return this._colorStops;
+    }
+    /**
+     * @returns Type of the gradient
+     */
+    getClassName() {
+        return "BaseGradient";
+    }
+    /**
+     * Serialize into a json object
+     * @param serializationObject object to serialize into
+     */
+    serialize(serializationObject) {
+        serializationObject.colorStops = this._colorStops;
+        serializationObject.className = this.getClassName();
+    }
+    /**
+     * Parse from json object
+     * @param serializationObject object to parse from
+     */
+    parse(serializationObject) {
+        this._colorStops = serializationObject.colorStops;
+    }
+}
+//# sourceMappingURL=BaseGradient.js.map

package/2D/controls/gradient/BaseGradient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseGradient.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/2D/controls/gradient/BaseGradient.ts"],"names":[],"mappings":"AAAA;;GAEG;AAkBH;;GAEG;AACH,MAAM,OAAgB,YAAY;IAAlC;QACY,gBAAW,GAAwB,EAAE,CAAC;QAItC,mBAAc,GAAY,IAAI,CAAC;IAuF3C,CAAC;IA/EW,8BAA8B;QAClC,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAClC,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QAC/D,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACI,iBAAiB,CAAC,OAAgC;QACrD,IAAI,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;YACnD,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;YACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC;YAC3D,IAAI,CAAC,8BAA8B,EAAE,CAAC;YACtC,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAChC,CAAC;QACD,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACI,YAAY,CAAC,MAAc,EAAE,KAAa;QAC7C,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;QACzC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACI,eAAe,CAAC,MAAc;QACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC;QACvF,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED;;OAEG;IACI,eAAe;QAClB,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC;QACtB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED;;OAEG;IACI,YAAY;QACf,OAAO,cAAc,CAAC;IAC1B,CAAC;IAED;;;OAGG;IACI,SAAS,CAAC,mBAAwB;QACrC,mBAAmB,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;QAClD,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,mBAAwB;QACjC,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC,UAAU,CAAC;IACtD,CAAC;CACJ","sourcesContent":["/*\r\n * Base Gradient class. Should not be used directly.\r\n */\r\n\r\nimport type { ICanvasGradient, ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Type that represents a single stop on the gradient.\r\n */\r\nexport type GradientColorStop = {\r\n    /**\r\n     * Offset from the start where the color will be applied.\r\n     */\r\n    offset: number;\r\n    /**\r\n     * Color to be applied.\r\n     */\r\n    color: string;\r\n};\r\n\r\n/**\r\n * Class that serves as a base for all the gradients created from context.\r\n */\r\nexport abstract class BaseGradient {\r\n    private _colorStops: GradientColorStop[] = [];\r\n\r\n    private _canvasGradient: CanvasGradient;\r\n    private _context: ICanvasRenderingContext;\r\n    private _gradientDirty: boolean = true;\r\n\r\n    /**\r\n     * Overwritten by child classes to create the canvas gradient.\r\n     * @param context\r\n     */\r\n    protected abstract _createCanvasGradient(context: ICanvasRenderingContext): ICanvasGradient;\r\n\r\n    private _addColorStopsToCanvasGradient() {\r\n        for (const stop of this._colorStops) {\r\n            this._canvasGradient.addColorStop(stop.offset, stop.color);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * If there are any changes or the context changed, regenerate the canvas gradient object. Else,\r\n     * reuse the existing gradient.\r\n     * @param context the context to create the gradient from\r\n     * @returns the canvas gradient\r\n     */\r\n    public getCanvasGradient(context: ICanvasRenderingContext) {\r\n        if (this._gradientDirty || this._context !== context) {\r\n            this._context = context;\r\n            this._canvasGradient = this._createCanvasGradient(context);\r\n            this._addColorStopsToCanvasGradient();\r\n            this._gradientDirty = false;\r\n        }\r\n        return this._canvasGradient;\r\n    }\r\n\r\n    /**\r\n     * Adds a new color stop to the gradient.\r\n     * @param offset the offset of the stop on the gradient. Should be between 0 and 1\r\n     * @param color the color of the stop\r\n     */\r\n    public addColorStop(offset: number, color: string) {\r\n        this._colorStops.push({ offset, color });\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /**\r\n     * Removes an existing color stop with the specified offset from the gradient\r\n     * @param offset the offset of the stop to be removed\r\n     */\r\n    public removeColorStop(offset: number) {\r\n        this._colorStops = this._colorStops.filter((colorStop) => colorStop.offset !== offset);\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /**\r\n     * Removes all color stops from the gradient\r\n     */\r\n    public clearColorStops() {\r\n        this._colorStops = [];\r\n        this._gradientDirty = true;\r\n    }\r\n\r\n    /**\r\n     * Color stops of the gradient\r\n     */\r\n    public get colorStops() {\r\n        return this._colorStops;\r\n    }\r\n\r\n    /**\r\n     * @returns Type of the gradient\r\n     */\r\n    public getClassName() {\r\n        return \"BaseGradient\";\r\n    }\r\n\r\n    /**\r\n     * Serialize into a json object\r\n     * @param serializationObject object to serialize into\r\n     */\r\n    public serialize(serializationObject: any) {\r\n        serializationObject.colorStops = this._colorStops;\r\n        serializationObject.className = this.getClassName();\r\n    }\r\n\r\n    /**\r\n     * Parse from json object\r\n     * @param serializationObject object to parse from\r\n     */\r\n    public parse(serializationObject: any) {\r\n        this._colorStops = serializationObject.colorStops;\r\n    }\r\n}\r\n"]}