@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.60

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

@@ -5,6 +5,7 @@ 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";
 /** Class used to create color pickers */
 export declare class ColorPicker extends Control {
     name?: string | undefined;
@@ -20,7 +21,7 @@ export declare class ColorPicker extends Control {
     private _h;
     private _s;
     private _v;
-    private _lastPointerDownID;
+    private _lastPointerDownId;
     /**
      * Observable raised when the value changes
      */
@@ -51,13 +52,13 @@ export declare class ColorPicker extends Control {
     constructor(name?: string | undefined);
     protected _getTypeName(): string;
     /** @hidden */
-    protected _preMeasure(parentMeasure: Measure, context: CanvasRenderingContext2D): void;
+    protected _preMeasure(parentMeasure: Measure, context: ICanvasRenderingContext): void;
     private _updateSquareProps;
     private _drawGradientSquare;
     private _drawCircle;
     private _createColorWheelCanvas;
     /** @hidden */
-    _draw(context: CanvasRenderingContext2D): void;
+    _draw(context: ICanvasRenderingContext): void;
     private _pointerIsDown;
     private _updateValueFromPointer;
     private _isPointOnSquare;

package/2D/controls/colorpicker.js

@@ -1,14 +1,15 @@
 import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Control } from "./control";
-import { InputText } from "./inputText";
-import { Rectangle } from "./rectangle";
-import { Button } from "./button";
-import { Grid } from "./grid";
-import { TextBlock } from "../controls/textBlock";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { Color3 } from '@babylonjs/core/Maths/math.color';
-import { serialize } from '@babylonjs/core/Misc/decorators';
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Control } from "./control.js";
+import { InputText } from "./inputText.js";
+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 { Engine } from "@babylonjs/core/Engines/engine.js";
 /** Class used to create color pickers */
 var ColorPicker = /** @class */ (function (_super) {
     __extends(ColorPicker, _super);
@@ -29,7 +30,7 @@ var ColorPicker = /** @class */ (function (_super) {
         _this._h = 360;
         _this._s = 1;
         _this._v = 1;
-        _this._lastPointerDownID = -1;
+        _this._lastPointerDownId = -1;
         /**
          * Observable raised when the value changes
          */
@@ -92,6 +93,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 return;
             }
             if (this._width.fromString(value)) {
+                if (this._width.getValue(this._host) === 0) {
+                    value = '1px';
+                    this._width.fromString(value);
+                }
                 this._height.fromString(value);
                 this._markAsDirty();
             }
@@ -113,6 +118,10 @@ var ColorPicker = /** @class */ (function (_super) {
                 return;
             }
             if (this._height.fromString(value)) {
+                if (this._height.getValue(this._host) === 0) {
+                    value = '1px';
+                    this._height.fromString(value);
+                }
                 this._width.fromString(value);
                 this._markAsDirty();
             }
@@ -178,9 +187,12 @@ var ColorPicker = /** @class */ (function (_super) {
         context.stroke();
     };
     ColorPicker.prototype._createColorWheelCanvas = function (radius, thickness) {
-        var canvas = document.createElement("canvas");
-        canvas.width = radius * 2;
-        canvas.height = radius * 2;
+        // Shoudl abstract platform instead of using LastCreatedEngine
+        var engine = Engine.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        var canvas = engine.createCanvas(radius * 2, radius * 2);
         var context = canvas.getContext("2d");
         var image = context.getImageData(0, 0, radius * 2, radius * 2);
         var data = image.data;
@@ -317,6 +329,9 @@ var ColorPicker = /** @class */ (function (_super) {
         if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
             return false;
         }
+        if (this.isReadOnly) {
+            return true;
+        }
         this._pointerIsDown = true;
         this._pointerStartedOnSquare = false;
         this._pointerStartedOnWheel = false;
@@ -332,20 +347,22 @@ var ColorPicker = /** @class */ (function (_super) {
         }
         this._updateValueFromPointer(x, y);
         this._host._capturingControl[pointerId] = this;
-        this._lastPointerDownID = pointerId;
+        this._lastPointerDownId = pointerId;
         return true;
     };
     ColorPicker.prototype._onPointerMove = function (target, coordinates, pointerId, pi) {
         // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
-        if (pointerId != this._lastPointerDownID) {
+        if (pointerId != this._lastPointerDownId) {
             return;
         }
-        // Invert transform
-        this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
-        var x = this._transformedPosition.x;
-        var y = this._transformedPosition.y;
-        if (this._pointerIsDown) {
-            this._updateValueFromPointer(x, y);
+        if (!this.isReadOnly) {
+            // Invert transform
+            this._invertTransformMatrix.transformCoordinates(coordinates.x, coordinates.y, this._transformedPosition);
+            var x = this._transformedPosition.x;
+            var y = this._transformedPosition.y;
+            if (this._pointerIsDown) {
+                this._updateValueFromPointer(x, y);
+            }
         }
         _super.prototype._onPointerMove.call(this, target, coordinates, pointerId, pi);
     };
@@ -1380,5 +1397,5 @@ var ColorPicker = /** @class */ (function (_super) {
     return ColorPicker;
 }(Control));
 export { ColorPicker };
-_TypeStore.RegisteredTypes["BABYLON.GUI.ColorPicker"] = ColorPicker;
+RegisterClass("BABYLON.GUI.ColorPicker", ColorPicker);
 //# sourceMappingURL=colorpicker.js.map