@babylonjs/gui 5.0.0-beta.6 → 5.0.0-beta.8-snapshot

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/button.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAI/D;;GAEG;AACH;IAA4B,0BAAS;IAuCjC;;;OAGG;IACH,gBAAmB,IAAa;QAAhC,YACI,kBAAM,IAAI,CAAC,SA2Bd;QA5BkB,UAAI,GAAJ,IAAI,CAAS;QAzBhC;;WAEG;QACI,+BAAyB,GAAG,KAAK,CAAC;QAyBrC,KAAI,CAAC,SAAS,GAAG,CAAC,CAAC;QACnB,KAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,IAAI,UAAU,GAAqB,IAAI,CAAC;QAExC,KAAI,CAAC,qBAAqB,GAAG;YACzB,UAAU,GAAG,KAAI,CAAC,KAAK,CAAC;YACxB,KAAI,CAAC,KAAK,IAAI,GAAG,CAAC;QACtB,CAAC,CAAC;QAEF,KAAI,CAAC,mBAAmB,GAAG;YACvB,IAAI,UAAU,KAAK,IAAI,EAAE;gBACrB,KAAI,CAAC,KAAK,GAAG,UAAU,CAAC;aAC3B;QACL,CAAC,CAAC;QAEF,KAAI,CAAC,oBAAoB,GAAG;YACxB,KAAI,CAAC,MAAM,IAAI,IAAI,CAAC;YACpB,KAAI,CAAC,MAAM,IAAI,IAAI,CAAC;QACxB,CAAC,CAAC;QAEF,KAAI,CAAC,kBAAkB,GAAG;YACtB,KAAI,CAAC,MAAM,IAAI,IAAI,CAAC;YACpB,KAAI,CAAC,MAAM,IAAI,IAAI,CAAC;QACxB,CAAC,CAAC;;IACN,CAAC;IA5CD,sBAAW,yBAAK;QAHhB;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,MAAM,CAAC;QACvB,CAAC;;;OAAA;IAMD,sBAAW,6BAAS;QAHpB;;WAEG;aACH;YACI,OAAO,IAAI,CAAC,UAAU,CAAC;QAC3B,CAAC;;;OAAA;IAoCS,6BAAY,GAAtB;QACI,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,8DAA8D;IAC9D,cAAc;IACP,gCAAe,GAAtB,UAAuB,CAAS,EAAE,CAAS,EAAE,EAAmB,EAAE,IAAY,EAAE,SAAiB,EAAE,WAAmB,EAAE,MAAe,EAAE,MAAe;QACpJ,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,aAAa,EAAE;YACrF,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,iBAAM,QAAQ,YAAC,CAAC,EAAE,CAAC,CAAC,EAAE;YACvB,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,IAAI,CAAC,yBAAyB,EAAE;YAChC,IAAI,QAAQ,GAAG,KAAK,CAAC;YACrB,KAAK,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE;gBAC7D,IAAI,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;gBAClC,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE;oBAC9G,QAAQ,GAAG,IAAI,CAAC;oBAChB,MAAM;iBACT;aACJ;YAED,IAAI,CAAC,QAAQ,EAAE;gBACX,OAAO,KAAK,CAAC;aAChB;SACJ;QAED,IAAI,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEjF,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,cAAc;IACP,gCAAe,GAAtB,UAAuB,MAAe,EAAE,EAAmB;QACvD,IAAI,CAAC,iBAAM,eAAe,YAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YACpC,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,qBAAqB,EAAE;YAChD,IAAI,CAAC,qBAAqB,EAAE,CAAC;SAChC;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,cAAc;IACP,8BAAa,GAApB,UAAqB,MAAe,EAAE,EAAmB,EAAE,KAAa;QAAb,sBAAA,EAAA,aAAa;QACpE,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC9C,IAAI,CAAC,mBAAmB,EAAE,CAAC;SAC9B;QAED,iBAAM,aAAa,YAAC,MAAM,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;IAC3C,CAAC;IAED,cAAc;IACP,+BAAc,GAArB,UAAsB,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QACpH,IAAI,CAAC,iBAAM,cAAc,YAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE;YACxE,OAAO,KAAK,CAAC;SAChB;QAED,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC/C,IAAI,CAAC,oBAAoB,EAAE,CAAC;SAC/B;QAED,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,cAAc;IACP,6BAAY,GAAnB,UAAoB,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,WAAoB,EAAE,EAAmB;QACxI,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC7C,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC7B;QAED,iBAAM,YAAY,YAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC;IACrF,CAAC;IAED;;;MAGE;IACK,0BAAS,GAAhB,UAAiB,mBAAwB;QACrC,iBAAM,SAAS,YAAC,mBAAmB,CAAC,CAAC;QAErC,IAAI,IAAI,CAAC,UAAU,EAAE;YACjB,mBAAmB,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;SAC5D;QACD,IAAI,IAAI,CAAC,MAAM,EAAE;YACb,mBAAmB,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC;SACpD;IACL,CAAC;IAED,cAAc;IACP,kCAAiB,GAAxB,UAAyB,gBAAqB,EAAE,IAA4B;QACxE,iBAAM,iBAAiB,YAAC,gBAAgB,EAAE,IAAI,CAAC,CAAC;QAEhD,IAAI,gBAAgB,CAAC,aAAa,EAAE;YAChC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,aAAa,CAAwB,CAAC;SAChG;QAED,IAAI,gBAAgB,CAAC,SAAS,EAAE;YAC5B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,gBAAgB,CAAC,SAAS,CAAoB,CAAC;SACpF;IACL,CAAC;IAED,UAAU;IACV;;;;;;OAMG;IACW,wBAAiB,GAA/B,UAAgC,IAAY,EAAE,IAAY,EAAE,QAAgB;QACxE,IAAI,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,cAAc;QACd,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,EAAE,IAAI,CAAC,CAAC;QACtD,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9B,SAAS,CAAC,uBAAuB,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,SAAS,CAAC,WAAW,GAAG,KAAK,CAAC;QAC9B,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,eAAe;QACf,IAAI,SAAS,GAAG,IAAI,KAAK,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpD,SAAS,CAAC,KAAK,GAAG,KAAK,CAAC;QACxB,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,eAAe,CAAC;QAC1C,SAAS,CAAC,mBAAmB,GAAG,OAAO,CAAC,yBAAyB,CAAC;QAClE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,QAAQ;QACR,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;QAC1B,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,OAAO,MAAM,CAAC;IAClB,CAAC;IAED;;;;;OAKG;IACW,4BAAqB,GAAnC,UAAoC,IAAY,EAAE,QAAgB;QAC9D,IAAI,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,eAAe;QACf,IAAI,SAAS,GAAG,IAAI,KAAK,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;QACvC,SAAS,CAAC,mBAAmB,GAAG,OAAO,CAAC,yBAAyB,CAAC;QAClE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,QAAQ;QACR,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;QAE1B,OAAO,MAAM,CAAC;IAClB,CAAC;IAED;;;;;OAKG;IACW,yBAAkB,GAAhC,UAAiC,IAAY,EAAE,IAAY;QACvD,IAAI,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,cAAc;QACd,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,EAAE,IAAI,CAAC,CAAC;QACtD,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9B,SAAS,CAAC,uBAAuB,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,QAAQ;QACR,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,OAAO,MAAM,CAAC;IAClB,CAAC;IAED;;;;;;OAMG;IACW,sCAA+B,GAA7C,UAA8C,IAAY,EAAE,IAAY,EAAE,QAAgB;QACtF,IAAI,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC;QAE5B,eAAe;QACf,IAAI,SAAS,GAAG,IAAI,KAAK,CAAC,IAAI,GAAG,OAAO,EAAE,QAAQ,CAAC,CAAC;QACpD,SAAS,CAAC,OAAO,GAAG,KAAK,CAAC,YAAY,CAAC;QACvC,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,cAAc;QACd,IAAI,SAAS,GAAG,IAAI,SAAS,CAAC,IAAI,GAAG,SAAS,EAAE,IAAI,CAAC,CAAC;QACtD,SAAS,CAAC,YAAY,GAAG,IAAI,CAAC;QAC9B,SAAS,CAAC,uBAAuB,GAAG,OAAO,CAAC,2BAA2B,CAAC;QACxE,MAAM,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;QAE7B,QAAQ;QACR,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC;QAC1B,MAAM,CAAC,UAAU,GAAG,SAAS,CAAC;QAE9B,OAAO,MAAM,CAAC;IAClB,CAAC;IACL,aAAC;AAAD,CAAC,AAzRD,CAA4B,SAAS,GAyRpC;;AACD,aAAa,CAAC,oBAAoB,EAAE,MAAM,CAAC,CAAC","sourcesContent":["import { Nullable } from \"@babylonjs/core/types\";\r\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\r\n\r\nimport { Rectangle } from \"./rectangle\";\r\nimport { Control } from \"./control\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { Image } from \"./image\";\r\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\r\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\r\nimport { AdvancedDynamicTexture } from \"../advancedDynamicTexture\";\r\n\r\n/**\r\n * Class used to create 2D buttons\r\n */\r\nexport class Button extends Rectangle {\r\n    /**\r\n     * Function called to generate a pointer enter animation\r\n     */\r\n    public pointerEnterAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer out animation\r\n     */\r\n    public pointerOutAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer down animation\r\n     */\r\n    public pointerDownAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer up animation\r\n     */\r\n    public pointerUpAnimation: () => void;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating that the button will let internal controls handle picking instead of doing it directly using its bounding info\r\n     */\r\n    public delegatePickingToChildren = false;\r\n\r\n    private _image: Nullable<Image>;\r\n    /**\r\n     * Returns the image part of the button (if any)\r\n     */\r\n    public get image(): Nullable<Image> {\r\n        return this._image;\r\n    }\r\n\r\n    private _textBlock: Nullable<TextBlock>;\r\n    /**\r\n     * Returns the image part of the button (if any)\r\n     */\r\n    public get textBlock(): Nullable<TextBlock> {\r\n        return this._textBlock;\r\n    }\r\n\r\n    /**\r\n     * Creates a new Button\r\n     * @param name defines the name of the button\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n\r\n        this.thickness = 1;\r\n        this.isPointerBlocker = true;\r\n\r\n        let alphaStore: Nullable<number> = null;\r\n\r\n        this.pointerEnterAnimation = () => {\r\n            alphaStore = this.alpha;\r\n            this.alpha -= 0.1;\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            if (alphaStore !== null) {\r\n                this.alpha = alphaStore;\r\n            }\r\n        };\r\n\r\n        this.pointerDownAnimation = () => {\r\n            this.scaleX -= 0.05;\r\n            this.scaleY -= 0.05;\r\n        };\r\n\r\n        this.pointerUpAnimation = () => {\r\n            this.scaleX += 0.05;\r\n            this.scaleY += 0.05;\r\n        };\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Button\";\r\n    }\r\n\r\n    // While being a container, the button behaves like a control.\r\n    /** @hidden */\r\n    public _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean {\r\n        if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {\r\n            return false;\r\n        }\r\n\r\n        if (!super.contains(x, y)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.delegatePickingToChildren) {\r\n            let contains = false;\r\n            for (var index = this._children.length - 1; index >= 0; index--) {\r\n                var child = this._children[index];\r\n                if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {\r\n                    contains = true;\r\n                    break;\r\n                }\r\n            }\r\n\r\n            if (!contains) {\r\n                return false;\r\n            }\r\n        }\r\n\r\n        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerEnter(target: Control, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerEnter(target, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly && this.pointerEnterAnimation) {\r\n            this.pointerEnterAnimation();\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerOut(target: Control, pi: PointerInfoBase, force = false): void {\r\n        if (!this.isReadOnly && this.pointerOutAnimation) {\r\n            this.pointerOutAnimation();\r\n        }\r\n\r\n        super._onPointerOut(target, pi, force);\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly && this.pointerDownAnimation) {\r\n            this.pointerDownAnimation();\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: PointerInfoBase): void {\r\n        if (!this.isReadOnly && this.pointerUpAnimation) {\r\n            this.pointerUpAnimation();\r\n        }\r\n\r\n        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);\r\n    }\r\n\r\n    /**\r\n    * Serializes the current button\r\n    * @param serializationObject defines the JSON serialized object\r\n    */\r\n    public serialize(serializationObject: any) {\r\n        super.serialize(serializationObject);\r\n\r\n        if (this._textBlock) {\r\n            serializationObject.textBlockName = this._textBlock.name;\r\n        }\r\n        if (this._image) {\r\n            serializationObject.imageName = this._image.name;\r\n        }\r\n    }\r\n\r\n    /** @hidden */\r\n    public _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {\r\n        super._parseFromContent(serializedObject, host);\r\n\r\n        if (serializedObject.textBlockName) {\r\n            this._textBlock = this.getChildByName(serializedObject.textBlockName) as Nullable<TextBlock>;\r\n        }\r\n\r\n        if (serializedObject.imageName) {\r\n            this._image = this.getChildByName(serializedObject.imageName) as Nullable<Image>;\r\n        }\r\n    }\r\n\r\n    // Statics\r\n    /**\r\n     * Creates a new button made with an image and a text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageButton(name: string, text: string, imageUrl: string): Button {\r\n        var result = new this(name);\r\n\r\n        // Adding text\r\n        var textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        textBlock.paddingLeft = \"20%\";\r\n        result.addControl(textBlock);\r\n\r\n        // Adding image\r\n        var iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.width = \"20%\";\r\n        iconImage.stretch = Image.STRETCH_UNIFORM;\r\n        iconImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        result.addControl(iconImage);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with an image\r\n     * @param name defines the name of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageOnlyButton(name: string, imageUrl: string): Button {\r\n        var result = new this(name);\r\n\r\n        // Adding image\r\n        var iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.stretch = Image.STRETCH_FILL;\r\n        iconImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        result.addControl(iconImage);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with a text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @returns a new Button\r\n     */\r\n    public static CreateSimpleButton(name: string, text: string): Button {\r\n        var result = new this(name);\r\n\r\n        // Adding text\r\n        var textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        result.addControl(textBlock);\r\n\r\n        // Store\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with an image and a centered text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageWithCenterTextButton(name: string, text: string, imageUrl: string): Button {\r\n        var result = new this(name);\r\n\r\n        // Adding image\r\n        var iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.stretch = Image.STRETCH_FILL;\r\n        result.addControl(iconImage);\r\n\r\n        // Adding text\r\n        var textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        result.addControl(textBlock);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Button\", Button);"]}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/button.ts"],"names":[],"mappings":"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","sourcesContent":["import { Nullable } from \"core/types\";\r\nimport { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Rectangle } from \"./rectangle\";\r\nimport { Control } from \"./control\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { Image } from \"./image\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { AdvancedDynamicTexture } from \"../advancedDynamicTexture\";\r\n\r\n/**\r\n * Class used to create 2D buttons\r\n */\r\nexport class Button extends Rectangle {\r\n    /**\r\n     * Function called to generate a pointer enter animation\r\n     */\r\n    public pointerEnterAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer out animation\r\n     */\r\n    public pointerOutAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer down animation\r\n     */\r\n    public pointerDownAnimation: () => void;\r\n    /**\r\n     * Function called to generate a pointer up animation\r\n     */\r\n    public pointerUpAnimation: () => void;\r\n\r\n    /**\r\n     * Gets or sets a boolean indicating that the button will let internal controls handle picking instead of doing it directly using its bounding info\r\n     */\r\n    public delegatePickingToChildren = false;\r\n\r\n    private _image: Nullable<Image>;\r\n    /**\r\n     * Returns the image part of the button (if any)\r\n     */\r\n    public get image(): Nullable<Image> {\r\n        return this._image;\r\n    }\r\n\r\n    private _textBlock: Nullable<TextBlock>;\r\n    /**\r\n     * Returns the image part of the button (if any)\r\n     */\r\n    public get textBlock(): Nullable<TextBlock> {\r\n        return this._textBlock;\r\n    }\r\n\r\n    /**\r\n     * Creates a new Button\r\n     * @param name defines the name of the button\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n\r\n        this.thickness = 1;\r\n        this.isPointerBlocker = true;\r\n\r\n        let alphaStore: Nullable<number> = null;\r\n\r\n        this.pointerEnterAnimation = () => {\r\n            alphaStore = this.alpha;\r\n            this.alpha -= 0.1;\r\n        };\r\n\r\n        this.pointerOutAnimation = () => {\r\n            if (alphaStore !== null) {\r\n                this.alpha = alphaStore;\r\n            }\r\n        };\r\n\r\n        this.pointerDownAnimation = () => {\r\n            this.scaleX -= 0.05;\r\n            this.scaleY -= 0.05;\r\n        };\r\n\r\n        this.pointerUpAnimation = () => {\r\n            this.scaleX += 0.05;\r\n            this.scaleY += 0.05;\r\n        };\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Button\";\r\n    }\r\n\r\n    // While being a container, the button behaves like a control.\r\n    /** @hidden */\r\n    public _processPicking(x: number, y: number, pi: PointerInfoBase, type: number, pointerId: number, buttonIndex: number, deltaX?: number, deltaY?: number): boolean {\r\n        if (!this._isEnabled || !this.isHitTestVisible || !this.isVisible || this.notRenderable) {\r\n            return false;\r\n        }\r\n\r\n        if (!super.contains(x, y)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.delegatePickingToChildren) {\r\n            let contains = false;\r\n            for (let index = this._children.length - 1; index >= 0; index--) {\r\n                const child = this._children[index];\r\n                if (child.isEnabled && child.isHitTestVisible && child.isVisible && !child.notRenderable && child.contains(x, y)) {\r\n                    contains = true;\r\n                    break;\r\n                }\r\n            }\r\n\r\n            if (!contains) {\r\n                return false;\r\n            }\r\n        }\r\n\r\n        this._processObservables(type, x, y, pi, pointerId, buttonIndex, deltaX, deltaY);\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerEnter(target: Control, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerEnter(target, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly && this.pointerEnterAnimation) {\r\n            this.pointerEnterAnimation();\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerOut(target: Control, pi: PointerInfoBase, force = false): void {\r\n        if (!this.isReadOnly && this.pointerOutAnimation) {\r\n            this.pointerOutAnimation();\r\n        }\r\n\r\n        super._onPointerOut(target, pi, force);\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly && this.pointerDownAnimation) {\r\n            this.pointerDownAnimation();\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /** @hidden */\r\n    public _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean, pi: PointerInfoBase): void {\r\n        if (!this.isReadOnly && this.pointerUpAnimation) {\r\n            this.pointerUpAnimation();\r\n        }\r\n\r\n        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick, pi);\r\n    }\r\n\r\n    /**\r\n     * Serializes the current button\r\n     * @param serializationObject defines the JSON serialized object\r\n     */\r\n    public serialize(serializationObject: any) {\r\n        super.serialize(serializationObject);\r\n\r\n        if (this._textBlock) {\r\n            serializationObject.textBlockName = this._textBlock.name;\r\n        }\r\n        if (this._image) {\r\n            serializationObject.imageName = this._image.name;\r\n        }\r\n    }\r\n\r\n    /** @hidden */\r\n    public _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {\r\n        super._parseFromContent(serializedObject, host);\r\n\r\n        if (serializedObject.textBlockName) {\r\n            this._textBlock = this.getChildByName(serializedObject.textBlockName) as Nullable<TextBlock>;\r\n        }\r\n\r\n        if (serializedObject.imageName) {\r\n            this._image = this.getChildByName(serializedObject.imageName) as Nullable<Image>;\r\n        }\r\n    }\r\n\r\n    // Statics\r\n    /**\r\n     * Creates a new button made with an image and a text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageButton(name: string, text: string, imageUrl: string): Button {\r\n        const result = new this(name);\r\n\r\n        // Adding text\r\n        const textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        textBlock.paddingLeft = \"20%\";\r\n        result.addControl(textBlock);\r\n\r\n        // Adding image\r\n        const iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.width = \"20%\";\r\n        iconImage.stretch = Image.STRETCH_UNIFORM;\r\n        iconImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        result.addControl(iconImage);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with an image\r\n     * @param name defines the name of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageOnlyButton(name: string, imageUrl: string): Button {\r\n        const result = new this(name);\r\n\r\n        // Adding image\r\n        const iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.stretch = Image.STRETCH_FILL;\r\n        iconImage.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        result.addControl(iconImage);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with a text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @returns a new Button\r\n     */\r\n    public static CreateSimpleButton(name: string, text: string): Button {\r\n        const result = new this(name);\r\n\r\n        // Adding text\r\n        const textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        result.addControl(textBlock);\r\n\r\n        // Store\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n\r\n    /**\r\n     * Creates a new button made with an image and a centered text\r\n     * @param name defines the name of the button\r\n     * @param text defines the text of the button\r\n     * @param imageUrl defines the url of the image\r\n     * @returns a new Button\r\n     */\r\n    public static CreateImageWithCenterTextButton(name: string, text: string, imageUrl: string): Button {\r\n        const result = new this(name);\r\n\r\n        // Adding image\r\n        const iconImage = new Image(name + \"_icon\", imageUrl);\r\n        iconImage.stretch = Image.STRETCH_FILL;\r\n        result.addControl(iconImage);\r\n\r\n        // Adding text\r\n        const textBlock = new TextBlock(name + \"_button\", text);\r\n        textBlock.textWrapping = true;\r\n        textBlock.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_CENTER;\r\n        result.addControl(textBlock);\r\n\r\n        // Store\r\n        result._image = iconImage;\r\n        result._textBlock = textBlock;\r\n\r\n        return result;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Button\", Button);\r\n"]}

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

@@ -1,11 +1,11 @@
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
 import { Control } from "./control";
 import { StackPanel } from "./stackPanel";
-import { Nullable } from '@babylonjs/core/types';
-import { Measure } from '../measure';
-import { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';
-import { ICanvasRenderingContext } from '@babylonjs/core/Engines/ICanvas';
+import { Nullable } from "@babylonjs/core/types.js";
+import { Measure } from "../measure";
+import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
 /**
  * Class used to represent a 2D checkbox
  */

package/2D/controls/checkbox.js

@@ -3,8 +3,8 @@ import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Control } from "./control.js";
 import { StackPanel } from "./stackPanel.js";
 import { TextBlock } from "./textBlock.js";
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-import { serialize } from '@babylonjs/core/Misc/decorators.js';
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
 /**
  * Class used to represent a 2D checkbox
  */

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../sourceES6/gui/src/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"@babylonjs/core/Misc/observable\";\r\nimport { Vector2 } from \"@babylonjs/core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from '@babylonjs/core/Misc/typeStore';\r\nimport { Nullable } from '@babylonjs/core/types';\r\nimport { Measure } from '../measure';\r\nimport { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';\r\nimport { serialize } from '@babylonjs/core/Misc/decorators';\r\nimport { ICanvasRenderingContext } from '@babylonjs/core/Engines/ICanvas';\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\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    /**\r\n     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\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 a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /** @hidden */\r\n    public _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        let actualWidth = this._currentMeasure.width - this._thickness;\r\n        let actualHeight = this._currentMeasure.height - this._thickness;\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        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\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._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            let offsetWidth = actualWidth * this._checkSizeRatio;\r\n            let offseHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2, offsetWidth, offseHeight);\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly) {\r\n            this.isChecked = !this.isChecked;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        var panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        var checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        var header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { Nullable } from \"core/types\";\r\nimport { Measure } from \"../measure\";\r\nimport { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\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    /**\r\n     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\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 a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /** @hidden */\r\n    public _draw(context: ICanvasRenderingContext, invalidatedRectangle?: Nullable<Measure>): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        const actualWidth = this._currentMeasure.width - this._thickness;\r\n        const actualHeight = this._currentMeasure.height - this._thickness;\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        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\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._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            const offsetWidth = actualWidth * this._checkSizeRatio;\r\n            const offseHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(\r\n                this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2,\r\n                this._currentMeasure.top + this._thickness / 2 + (actualHeight - offseHeight) / 2,\r\n                offsetWidth,\r\n                offseHeight\r\n            );\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /** @hidden */\r\n    public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (!this.isReadOnly) {\r\n            this.isChecked = !this.isChecked;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        const panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        const checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        const header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}

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

@@ -1,11 +1,11 @@
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
 import { Control } from "./control";
 import { Measure } from "../measure";
 import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { PointerInfoBase } from '@babylonjs/core/Events/pointerEvents';
-import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
 /** Class used to create color pickers */
 export declare class ColorPicker extends Control {
     name?: string | undefined;

package/2D/controls/colorpicker.js

@@ -6,9 +6,9 @@ import { Rectangle } from "./rectangle.js";
 import { Button } from "./button.js";
 import { Grid } from "./grid.js";
 import { TextBlock } from "../controls/textBlock.js";
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-import { Color3 } from '@babylonjs/core/Maths/math.color.js';
-import { serialize } from '@babylonjs/core/Misc/decorators.js';
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
 import { EngineStore } from "@babylonjs/core/Engines/engineStore.js";
 /** Class used to create color pickers */
 var ColorPicker = /** @class */ (function (_super) {
@@ -37,7 +37,7 @@ var ColorPicker = /** @class */ (function (_super) {
         _this.onValueChangedObservable = new Observable();
         // Events
         _this._pointerIsDown = false;
-        _this.value = new Color3(.88, .1, .1);
+        _this.value = new Color3(0.88, 0.1, 0.1);
         _this.size = "200px";
         _this.isPointerBlocker = true;
         return _this;
@@ -94,7 +94,7 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             if (this._width.fromString(value)) {
                 if (this._width.getValue(this._host) === 0) {
-                    value = '1px';
+                    value = "1px";
                     this._width.fromString(value);
                 }
                 this._height.fromString(value);
@@ -119,7 +119,7 @@ var ColorPicker = /** @class */ (function (_super) {
             }
             if (this._height.fromString(value)) {
                 if (this._height.getValue(this._host) === 0) {
-                    value = '1px';
+                    value = "1px";
                     this._height.fromString(value);
                 }
                 this._width.fromString(value);
@@ -153,24 +153,24 @@ var ColorPicker = /** @class */ (function (_super) {
         }
     };
     ColorPicker.prototype._updateSquareProps = function () {
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
-        var wheelThickness = radius * .2;
+        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+        var wheelThickness = radius * 0.2;
         var innerDiameter = (radius - wheelThickness) * 2;
-        var squareSize = innerDiameter / (Math.sqrt(2));
-        var offset = radius - squareSize * .5;
+        var squareSize = innerDiameter / Math.sqrt(2);
+        var offset = radius - squareSize * 0.5;
         this._squareLeft = this._currentMeasure.left + offset;
         this._squareTop = this._currentMeasure.top + offset;
         this._squareSize = squareSize;
     };
     ColorPicker.prototype._drawGradientSquare = function (hueValue, left, top, width, height, context) {
         var lgh = context.createLinearGradient(left, top, width + left, top);
-        lgh.addColorStop(0, '#fff');
-        lgh.addColorStop(1, 'hsl(' + hueValue + ', 100%, 50%)');
+        lgh.addColorStop(0, "#fff");
+        lgh.addColorStop(1, "hsl(" + hueValue + ", 100%, 50%)");
         context.fillStyle = lgh;
         context.fillRect(left, top, width, height);
         var lgv = context.createLinearGradient(left, top, left, height + top);
-        lgv.addColorStop(0, 'rgba(0,0,0,0)');
-        lgv.addColorStop(1, '#000');
+        lgv.addColorStop(0, "rgba(0,0,0,0)");
+        lgv.addColorStop(1, "#000");
         context.fillStyle = lgv;
         context.fillRect(left, top, width, height);
     };
@@ -178,12 +178,12 @@ var ColorPicker = /** @class */ (function (_super) {
         context.beginPath();
         context.arc(centerX, centerY, radius + 1, 0, 2 * Math.PI, false);
         context.lineWidth = 3;
-        context.strokeStyle = '#333333';
+        context.strokeStyle = "#333333";
         context.stroke();
         context.beginPath();
         context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
         context.lineWidth = 3;
-        context.strokeStyle = '#ffffff';
+        context.strokeStyle = "#ffffff";
         context.stroke();
     };
     ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
@@ -208,16 +208,16 @@ var ColorPicker = /** @class */ (function (_super) {
                 }
                 var dist = Math.sqrt(distSq);
                 var ang = Math.atan2(y, x);
-                Color3.HSVtoRGBToRef(ang * 180 / Math.PI + 180, dist / radius, 1, color);
-                var index = ((x + radius) + ((y + radius) * 2 * radius)) * 4;
+                Color3.HSVtoRGBToRef((ang * 180) / Math.PI + 180, dist / radius, 1, color);
+                var index = (x + radius + (y + radius) * 2 * radius) * 4;
                 data[index] = color.r * 255;
                 data[index + 1] = color.g * 255;
                 data[index + 2] = color.b * 255;
                 var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
                 //apply less alpha to bigger color pickers
-                var alphaAmount = .2;
-                var maxAlpha = .2;
-                var minAlpha = .04;
+                var alphaAmount = 0.2;
+                var maxAlpha = 0.2;
+                var minAlpha = 0.04;
                 var lowerRadius = 50;
                 var upperRadius = 150;
                 if (radius < lowerRadius) {
@@ -227,14 +227,14 @@ var ColorPicker = /** @class */ (function (_super) {
                     alphaAmount = minAlpha;
                 }
                 else {
-                    alphaAmount = (minAlpha - maxAlpha) * (radius - lowerRadius) / (upperRadius - lowerRadius) + maxAlpha;
+                    alphaAmount = ((minAlpha - maxAlpha) * (radius - lowerRadius)) / (upperRadius - lowerRadius) + maxAlpha;
                 }
                 var alphaRatio = (dist - innerRadius) / (radius - innerRadius);
                 if (alphaRatio < alphaAmount) {
                     data[index + 3] = 255 * (alphaRatio / alphaAmount);
                 }
                 else if (alphaRatio > 1 - alphaAmount) {
-                    data[index + 3] = 255 * (1.0 - ((alphaRatio - (1 - alphaAmount)) / alphaAmount));
+                    data[index + 3] = 255 * (1.0 - (alphaRatio - (1 - alphaAmount)) / alphaAmount);
                 }
                 else {
                     data[index + 3] = 255;
@@ -248,8 +248,8 @@ var ColorPicker = /** @class */ (function (_super) {
     ColorPicker.prototype._draw = function (context) {
         context.save();
         this._applyStates(context);
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
-        var wheelThickness = radius * .2;
+        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
+        var wheelThickness = radius * 0.2;
         var left = this._currentMeasure.left;
         var top = this._currentMeasure.top;
         if (!this._colorWheelCanvas || this._colorWheelCanvas.width != radius * 2) {
@@ -272,19 +272,19 @@ var ColorPicker = /** @class */ (function (_super) {
         this._drawGradientSquare(this._h, this._squareLeft, this._squareTop, this._squareSize, this._squareSize, context);
         var cx = this._squareLeft + this._squareSize * this._s;
         var cy = this._squareTop + this._squareSize * (1 - this._v);
-        this._drawCircle(cx, cy, radius * .04, context);
-        var dist = radius - wheelThickness * .5;
-        cx = left + radius + Math.cos((this._h - 180) * Math.PI / 180) * dist;
-        cy = top + radius + Math.sin((this._h - 180) * Math.PI / 180) * dist;
-        this._drawCircle(cx, cy, wheelThickness * .35, context);
+        this._drawCircle(cx, cy, radius * 0.04, context);
+        var dist = radius - wheelThickness * 0.5;
+        cx = left + radius + Math.cos(((this._h - 180) * Math.PI) / 180) * dist;
+        cy = top + radius + Math.sin(((this._h - 180) * Math.PI) / 180) * dist;
+        this._drawCircle(cx, cy, wheelThickness * 0.35, context);
         context.restore();
     };
     ColorPicker.prototype._updateValueFromPointer = function (x, y) {
         if (this._pointerStartedOnWheel) {
-            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
+            var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
             var centerX = radius + this._currentMeasure.left;
             var centerY = radius + this._currentMeasure.top;
-            this._h = Math.atan2(y - centerY, x - centerX) * 180 / Math.PI + 180;
+            this._h = (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI + 180;
         }
         else if (this._pointerStartedOnSquare) {
             this._updateSquareProps();
@@ -303,17 +303,16 @@ var ColorPicker = /** @class */ (function (_super) {
         var left = this._squareLeft;
         var top = this._squareTop;
         var size = this._squareSize;
-        if (x >= left && x <= left + size &&
-            y >= top && y <= top + size) {
+        if (x >= left && x <= left + size && y >= top && y <= top + size) {
             return true;
         }
         return false;
     };
     ColorPicker.prototype._isPointOnWheel = function (x, y) {
-        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * .5;
+        var radius = Math.min(this._currentMeasure.width, this._currentMeasure.height) * 0.5;
         var centerX = radius + this._currentMeasure.left;
         var centerY = radius + this._currentMeasure.top;
-        var wheelThickness = radius * .2;
+        var wheelThickness = radius * 0.2;
         var innerRadius = radius - wheelThickness;
         var radiusSq = radius * radius;
         var innerRadiusSq = innerRadius * innerRadius;
@@ -398,7 +397,7 @@ var ColorPicker = /** @class */ (function (_super) {
             var gutterSize = Math.floor(rawSwatchSize * 0.25);
             var colGutters = gutterSize * (options.numSwatchesPerLine + 1);
             var swatchSize = Math.floor((parseFloat(options.pickerWidth) - colGutters) / options.numSwatchesPerLine);
-            var drawerMaxSize = (swatchSize * drawerMaxRows) + (gutterSize * (drawerMaxRows + 1));
+            var drawerMaxSize = swatchSize * drawerMaxRows + gutterSize * (drawerMaxRows + 1);
             var containerSize = (parseInt(options.pickerHeight) + drawerMaxSize + Math.floor(swatchSize * 0.25)).toString() + "px";
             // Button Colors
             var buttonColor = "#c0c0c0";
@@ -442,10 +441,10 @@ var ColorPicker = /** @class */ (function (_super) {
             var lastVal;
             var activeField;
             /**
-            * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
-            * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
-            * are will receive no update. This is to prevent the input from the user being overwritten.
-            */
+             * Will update all values for InputText and ColorPicker controls based on the BABYLON.Color3 passed to this function.
+             * Each InputText control and the ColorPicker control will be tested to see if they are the activeField and if they
+             * are will receive no update. This is to prevent the input from the user being overwritten.
+             */
             function updateValues(value, inputField) {
                 activeField = inputField;
                 var pickedColor = value.toHexString();
@@ -469,8 +468,8 @@ var ColorPicker = /** @class */ (function (_super) {
                     bValDec.text = value.b.toString();
                 }
                 if (hexVal.name != activeField) {
-                    var minusPound = pickedColor.split("#");
-                    hexVal.text = minusPound[1];
+                    var minusPound_1 = pickedColor.split("#");
+                    hexVal.text = minusPound_1[1];
                 }
                 if (picker.name != activeField) {
                     picker.value = value;
@@ -506,13 +505,13 @@ var ColorPicker = /** @class */ (function (_super) {
                     var newSwatchRGB = Color3.FromHexString(newSwatch.background);
                     if (activeField == field.name) {
                         if (channel == "r") {
-                            updateValues(new Color3((parseInt(newValue)) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
+                            updateValues(new Color3(parseInt(newValue) / 255, newSwatchRGB.g, newSwatchRGB.b), field.name);
                         }
                         else if (channel == "g") {
-                            updateValues(new Color3(newSwatchRGB.r, (parseInt(newValue)) / 255, newSwatchRGB.b), field.name);
+                            updateValues(new Color3(newSwatchRGB.r, parseInt(newValue) / 255, newSwatchRGB.b), field.name);
                         }
                         else {
-                            updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, (parseInt(newValue)) / 255), field.name);
+                            updateValues(new Color3(newSwatchRGB.r, newSwatchRGB.g, parseInt(newValue) / 255), field.name);
                         }
                     }
                 }
@@ -580,39 +579,39 @@ var ColorPicker = /** @class */ (function (_super) {
                     else {
                         var icon = "";
                     }
-                    var swatch = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
-                    swatch.fontFamily = "BabylonJSglyphs";
+                    var swatch_1 = Button.CreateSimpleButton("Swatch_" + swatchNumber, icon);
+                    swatch_1.fontFamily = "BabylonJSglyphs";
                     var swatchColor = Color3.FromHexString(options.savedColors[swatchNumber]);
                     var swatchLuminence = swatchColor.r + swatchColor.g + swatchColor.b;
                     // Set color of outline and textBlock based on luminance of the color swatch so feedback always visible
                     if (swatchLuminence > luminanceLimit) {
-                        swatch.color = iconColorDark;
+                        swatch_1.color = iconColorDark;
                     }
                     else {
-                        swatch.color = iconColorLight;
+                        swatch_1.color = iconColorLight;
                     }
-                    swatch.fontSize = Math.floor(swatchSize * 0.7);
-                    swatch.textBlock.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-                    swatch.height = swatch.width = (swatchSize).toString() + "px";
-                    swatch.background = options.savedColors[swatchNumber];
-                    swatch.thickness = 2;
+                    swatch_1.fontSize = Math.floor(swatchSize * 0.7);
+                    swatch_1.textBlock.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+                    swatch_1.height = swatch_1.width = swatchSize.toString() + "px";
+                    swatch_1.background = options.savedColors[swatchNumber];
+                    swatch_1.thickness = 2;
                     var metadata_1 = swatchNumber;
-                    swatch.pointerDownAnimation = function () {
-                        swatch.thickness = 4;
+                    swatch_1.pointerDownAnimation = function () {
+                        swatch_1.thickness = 4;
                     };
-                    swatch.pointerUpAnimation = function () {
-                        swatch.thickness = 3;
+                    swatch_1.pointerUpAnimation = function () {
+                        swatch_1.thickness = 3;
                     };
-                    swatch.pointerEnterAnimation = function () {
-                        swatch.thickness = 3;
+                    swatch_1.pointerEnterAnimation = function () {
+                        swatch_1.thickness = 3;
                     };
-                    swatch.pointerOutAnimation = function () {
-                        swatch.thickness = 2;
+                    swatch_1.pointerOutAnimation = function () {
+                        swatch_1.thickness = 2;
                     };
-                    swatch.onPointerClickObservable.add(function () {
+                    swatch_1.onPointerClickObservable.add(function () {
                         if (!editSwatchMode) {
                             if (options.savedColors) {
-                                updateValues(Color3.FromHexString(options.savedColors[metadata_1]), swatch.name);
+                                updateValues(Color3.FromHexString(options.savedColors[metadata_1]), swatch_1.name);
                             }
                         }
                         else {
@@ -620,7 +619,7 @@ var ColorPicker = /** @class */ (function (_super) {
                             updateSwatches("", butSave);
                         }
                     });
-                    return swatch;
+                    return swatch_1;
                 }
                 else {
                     return null;
@@ -684,16 +683,16 @@ var ColorPicker = /** @class */ (function (_super) {
                             }
                         }
                     }
-                    swatchDrawer.height = ((swatchSize * rowCount) + (gutterCount * gutterSize)).toString() + "px";
+                    swatchDrawer.height = (swatchSize * rowCount + gutterCount * gutterSize).toString() + "px";
                     for (var y = 1, thisRow = 1; y < rowCount + gutterCount; y += 2, thisRow++) {
                         // Determine number of buttons to create per row based on the button limit per row and number of saved colors
                         if (options.savedColors.length > thisRow * options.numSwatchesPerLine) {
                             var totalButtonsThisRow = options.numSwatchesPerLine;
                         }
                         else {
-                            var totalButtonsThisRow = options.savedColors.length - ((thisRow - 1) * options.numSwatchesPerLine);
+                            var totalButtonsThisRow = options.savedColors.length - (thisRow - 1) * options.numSwatchesPerLine;
                         }
-                        var buttonIterations = (Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine));
+                        var buttonIterations = Math.min(Math.max(totalButtonsThisRow, 0), options.numSwatchesPerLine);
                         for (var x = 0, w = 1; x < buttonIterations; x++) {
                             if (x > options.numSwatchesPerLine) {
                                 continue;
@@ -723,7 +722,7 @@ var ColorPicker = /** @class */ (function (_super) {
                     butEdit = Button.CreateSimpleButton("butEdit", "Edit");
                     butEdit.width = buttonWidth;
                     butEdit.height = buttonHeight;
-                    butEdit.left = (Math.floor(parseInt(buttonWidth) * 0.1)).toString() + "px";
+                    butEdit.left = Math.floor(parseInt(buttonWidth) * 0.1).toString() + "px";
                     butEdit.top = (parseFloat(butEdit.left) * -1).toString() + "px";
                     butEdit.verticalAlignment = Control.VERTICAL_ALIGNMENT_BOTTOM;
                     butEdit.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
@@ -774,12 +773,12 @@ var ColorPicker = /** @class */ (function (_super) {
                 if (options.savedColors && options.savedColors.length > 0) {
                     resolve({
                         savedColors: options.savedColors,
-                        pickedColor: color
+                        pickedColor: color,
                     });
                 }
                 else {
                     resolve({
-                        pickedColor: color
+                        pickedColor: color,
                     });
                 }
                 advancedTexture.removeControl(dialogContainer);
@@ -813,9 +812,9 @@ var ColorPicker = /** @class */ (function (_super) {
                 else {
                     var gutterCount = initialRows + 1;
                 }
-                swatchDrawer.height = ((swatchSize * initialRows) + (gutterCount * gutterSize)).toString() + "px";
+                swatchDrawer.height = (swatchSize * initialRows + gutterCount * gutterSize).toString() + "px";
                 swatchDrawer.top = Math.floor(swatchSize * 0.25).toString() + "px";
-                for (var i = 0; i < (Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2) + 1; i++) {
+                for (var i = 0; i < Math.ceil(options.savedColors.length / options.numSwatchesPerLine) * 2 + 1; i++) {
                     if (i % 2 != 0) {
                         swatchDrawer.addRowDefinition(swatchSize, true);
                     }
@@ -860,8 +859,7 @@ var ColorPicker = /** @class */ (function (_super) {
             closeButton.height = closeButton.width = options.headerHeight;
             closeButton.background = header.background;
             closeButton.thickness = 0;
-            closeButton.pointerDownAnimation = function () {
-            };
+            closeButton.pointerDownAnimation = function () { };
             closeButton.pointerUpAnimation = function () {
                 closeButton.background = header.background;
             };
@@ -910,6 +908,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 editSwatches(false);
             });
             picker.onValueChangedObservable.add(function (value) {
+                // value is a color3
                 if (activeField == picker.name) {
                     updateValues(value, picker.name);
                 }
@@ -947,8 +946,8 @@ var ColorPicker = /** @class */ (function (_super) {
             activeSwatches.addRowDefinition(0.5, false);
             activeSwatches.addRowDefinition(0.5, false);
             pickerSwatches.addControl(activeSwatches, 2, 0);
-            var labelWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11));
-            var labelHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5));
+            var labelWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[0] * 0.11);
+            var labelHeight = Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * pickeSwatchesRows[1] * 0.5);
             if (options.pickerWidth > options.pickerHeight) {
                 var labelTextSize = labelHeight;
             }
@@ -1003,8 +1002,9 @@ var ColorPicker = /** @class */ (function (_super) {
             buttonGrid.addRowDefinition(buttonGridRows, false);
             pickerSwatchesButtons.addControl(buttonGrid, 0, 1);
             // Determine pixel width and height for all buttons from overall panel dimensions
-            buttonWidth = (Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67)).toString() + "px";
-            buttonHeight = (Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7)).toString() + "px";
+            buttonWidth = Math.floor(parseInt(options.pickerWidth) * dialogBodyCols[1] * pickerButtonsCol[1] * 0.67).toString() + "px";
+            buttonHeight =
+                Math.floor(parseInt(options.pickerHeight) * pickerPanelRows[1] * pickerBodyRightRows[0] * (parseFloat(buttonGrid.height.toString()) / 100) * buttonGridRows * 0.7).toString() + "px";
             // Determine button type size
             if (parseFloat(buttonWidth) > parseFloat(buttonHeight)) {
                 buttonFontSize = Math.floor(parseFloat(buttonHeight) * 0.45);
@@ -1021,8 +1021,12 @@ var ColorPicker = /** @class */ (function (_super) {
             butOK.color = buttonColor;
             butOK.fontSize = buttonFontSize;
             butOK.background = buttonBackgroundColor;
-            butOK.onPointerEnterObservable.add(function () { butOK.background = buttonBackgroundHoverColor; });
-            butOK.onPointerOutObservable.add(function () { butOK.background = buttonBackgroundColor; });
+            butOK.onPointerEnterObservable.add(function () {
+                butOK.background = buttonBackgroundHoverColor;
+            });
+            butOK.onPointerOutObservable.add(function () {
+                butOK.background = buttonBackgroundColor;
+            });
             butOK.pointerDownAnimation = function () {
                 butOK.background = buttonBackgroundClickColor;
             };
@@ -1042,8 +1046,12 @@ var ColorPicker = /** @class */ (function (_super) {
             butCancel.color = buttonColor;
             butCancel.fontSize = buttonFontSize;
             butCancel.background = buttonBackgroundColor;
-            butCancel.onPointerEnterObservable.add(function () { butCancel.background = buttonBackgroundHoverColor; });
-            butCancel.onPointerOutObservable.add(function () { butCancel.background = buttonBackgroundColor; });
+            butCancel.onPointerEnterObservable.add(function () {
+                butCancel.background = buttonBackgroundHoverColor;
+            });
+            butCancel.onPointerOutObservable.add(function () {
+                butCancel.background = buttonBackgroundColor;
+            });
             butCancel.pointerDownAnimation = function () {
                 butCancel.background = buttonBackgroundClickColor;
             };
@@ -1360,7 +1368,7 @@ var ColorPicker = /** @class */ (function (_super) {
                 else {
                     if (hexVal.text.length < 6) {
                         var leadingZero = 6 - hexVal.text.length;
-                        for (var i = 0; i < leadingZero; i++) {
+                        for (var i_1 = 0; i_1 < leadingZero; i_1++) {
                             newHexValue = "0" + newHexValue;
                         }
                     }