New xxInPixels properties for GUI

dist/preview release/babylon.max.js

@@ -16730,7 +16730,7 @@ var BABYLON;
             this._previousHasSwiped = false;
             this._currentPickResult = null;
             this._previousPickResult = null;
-            this._isButtonPressed = false;
+            this._totalPointersPressed = 0;
             this._doubleClickOccured = false;
             /** Define this parameter if you are using multiple cameras and you want to specify which one should be used for pointer position */
             this.cameraToUseForPointers = null;
@@ -17530,7 +17530,7 @@ var BABYLON;
                             var _this = this;
                             var pickResult = this.pick(this._unTranslatedPointerX, this._unTranslatedPointerY, function (mesh) { return mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.actionManager && mesh.actionManager.hasSpecificTrigger(BABYLON.ActionManager.OnLongPressTrigger) && mesh == _this._pickedDownMesh; }, false, this.cameraToUseForPointers);
                             if (pickResult && pickResult.hit && pickResult.pickedMesh) {
-                                if (this._isButtonPressed &&
+                                if (this._totalPointersPressed !== 0 &&
                                     ((new Date().getTime() - this._startingPointerTime) > Scene.LongPressDelay) &&
                                     (Math.abs(this._startingPointerPosition.x - this._pointerX) < Scene.DragMovementThreshold &&
                                         Math.abs(this._startingPointerPosition.y - this._pointerY) < Scene.DragMovementThreshold)) {
@@ -17774,7 +17774,7 @@ var BABYLON;
                 _this._processPointerMove(pickResult, evt);
             };
             this._onPointerDown = function (evt) {
-                _this._isButtonPressed = true;
+                _this._totalPointersPressed++;
                 _this._pickedDownMesh = null;
                 _this._meshPickProceed = false;
                 _this._updatePointerPosition(evt);
@@ -17828,10 +17828,10 @@ var BABYLON;
                 }
             };
             this._onPointerUp = function (evt) {
-                if (!_this._isButtonPressed) {
+                if (_this._totalPointersPressed === 0) {
                     return; // So we need to test it the pointer down was pressed before.
                 }
-                _this._isButtonPressed = false;
+                _this._totalPointersPressed--;
                 _this._pickedUpMesh = null;
                 _this._meshPickProceed = false;
                 _this._updatePointerPosition(evt);

dist/preview release/customConfigurations/minimalGLTFViewer/babylon.max.js

@@ -16730,7 +16730,7 @@ var BABYLON;
             this._previousHasSwiped = false;
             this._currentPickResult = null;
             this._previousPickResult = null;
-            this._isButtonPressed = false;
+            this._totalPointersPressed = 0;
             this._doubleClickOccured = false;
             /** Define this parameter if you are using multiple cameras and you want to specify which one should be used for pointer position */
             this.cameraToUseForPointers = null;
@@ -17530,7 +17530,7 @@ var BABYLON;
                             var _this = this;
                             var pickResult = this.pick(this._unTranslatedPointerX, this._unTranslatedPointerY, function (mesh) { return mesh.isPickable && mesh.isVisible && mesh.isReady() && mesh.actionManager && mesh.actionManager.hasSpecificTrigger(BABYLON.ActionManager.OnLongPressTrigger) && mesh == _this._pickedDownMesh; }, false, this.cameraToUseForPointers);
                             if (pickResult && pickResult.hit && pickResult.pickedMesh) {
-                                if (this._isButtonPressed &&
+                                if (this._totalPointersPressed !== 0 &&
                                     ((new Date().getTime() - this._startingPointerTime) > Scene.LongPressDelay) &&
                                     (Math.abs(this._startingPointerPosition.x - this._pointerX) < Scene.DragMovementThreshold &&
                                         Math.abs(this._startingPointerPosition.y - this._pointerY) < Scene.DragMovementThreshold)) {
@@ -17774,7 +17774,7 @@ var BABYLON;
                 _this._processPointerMove(pickResult, evt);
             };
             this._onPointerDown = function (evt) {
-                _this._isButtonPressed = true;
+                _this._totalPointersPressed++;
                 _this._pickedDownMesh = null;
                 _this._meshPickProceed = false;
                 _this._updatePointerPosition(evt);
@@ -17828,10 +17828,10 @@ var BABYLON;
                 }
             };
             this._onPointerUp = function (evt) {
-                if (!_this._isButtonPressed) {
+                if (_this._totalPointersPressed === 0) {
                     return; // So we need to test it the pointer down was pressed before.
                 }
-                _this._isButtonPressed = false;
+                _this._totalPointersPressed--;
                 _this._pickedUpMesh = null;
                 _this._meshPickProceed = false;
                 _this._updatePointerPosition(evt);

dist/preview release/gui/babylon.gui.d.ts

@@ -219,9 +219,12 @@ declare module BABYLON.GUI {
         horizontalAlignment: number;
         verticalAlignment: number;
         width: string | number;
+        readonly widthInPixels: number;
         height: string | number;
+        readonly heightInPixels: number;
         fontFamily: string;
         fontStyle: string;
+        readonly fontSizeInPixels: number;
         fontSize: string | number;
         color: string;
         zIndex: number;
@@ -229,13 +232,21 @@ declare module BABYLON.GUI {
         isVisible: boolean;
         readonly isDirty: boolean;
         paddingLeft: string | number;
+        readonly paddingLeftInPixels: number;
         paddingRight: string | number;
+        readonly paddingRightInPixels: number;
         paddingTop: string | number;
+        readonly paddingTopInPixels: number;
         paddingBottom: string | number;
+        readonly paddingBottomInPixels: number;
         left: string | number;
+        readonly leftInPixels: number;
         top: string | number;
+        readonly topInPixels: number;
         linkOffsetX: string | number;
+        readonly linkOffsetXInPixels: number;
         linkOffsetY: string | number;
+        readonly linkOffsetYInPixels: number;
         readonly centerX: number;
         readonly centerY: number;
         constructor(name?: string);

dist/preview release/gui/babylon.gui.js

@@ -941,6 +941,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "widthInPixels", {
+                get: function () {
+                    return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "height", {
                 get: function () {
                     return this._height.toString(this._host);
@@ -956,6 +963,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "heightInPixels", {
+                get: function () {
+                    return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "fontFamily", {
                 get: function () {
                     return this._fontFamily;
@@ -984,6 +998,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "fontSizeInPixels", {
+                get: function () {
+                    return this._fontSize.getValueInPixel(this._host, 100);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "fontSize", {
                 get: function () {
                     return this._fontSize.toString(this._host);
@@ -1077,6 +1098,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "paddingLeftInPixels", {
+                get: function () {
+                    return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "paddingRight", {
                 get: function () {
                     return this._paddingRight.toString(this._host);
@@ -1089,6 +1117,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "paddingRightInPixels", {
+                get: function () {
+                    return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "paddingTop", {
                 get: function () {
                     return this._paddingTop.toString(this._host);
@@ -1101,6 +1136,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "paddingTopInPixels", {
+                get: function () {
+                    return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "paddingBottom", {
                 get: function () {
                     return this._paddingBottom.toString(this._host);
@@ -1113,6 +1155,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "paddingBottomInPixels", {
+                get: function () {
+                    return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "left", {
                 get: function () {
                     return this._left.toString(this._host);
@@ -1125,6 +1174,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "leftInPixels", {
+                get: function () {
+                    return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "top", {
                 get: function () {
                     return this._top.toString(this._host);
@@ -1137,6 +1193,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "topInPixels", {
+                get: function () {
+                    return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "linkOffsetX", {
                 get: function () {
                     return this._linkOffsetX.toString(this._host);
@@ -1149,6 +1212,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "linkOffsetXInPixels", {
+                get: function () {
+                    return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "linkOffsetY", {
                 get: function () {
                     return this._linkOffsetY.toString(this._host);
@@ -1161,6 +1231,13 @@ var BABYLON;
                 enumerable: true,
                 configurable: true
             });
+            Object.defineProperty(Control.prototype, "linkOffsetYInPixels", {
+                get: function () {
+                    return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                },
+                enumerable: true,
+                configurable: true
+            });
             Object.defineProperty(Control.prototype, "centerX", {
                 get: function () {
                     return this._currentMeasure.left + this._currentMeasure.width / 2;

dist/preview release/gui/babylon.gui.module.d.ts

@@ -224,9 +224,12 @@ declare module BABYLON.GUI {
         horizontalAlignment: number;
         verticalAlignment: number;
         width: string | number;
+        readonly widthInPixels: number;
         height: string | number;
+        readonly heightInPixels: number;
         fontFamily: string;
         fontStyle: string;
+        readonly fontSizeInPixels: number;
         fontSize: string | number;
         color: string;
         zIndex: number;
@@ -234,13 +237,21 @@ declare module BABYLON.GUI {
         isVisible: boolean;
         readonly isDirty: boolean;
         paddingLeft: string | number;
+        readonly paddingLeftInPixels: number;
         paddingRight: string | number;
+        readonly paddingRightInPixels: number;
         paddingTop: string | number;
+        readonly paddingTopInPixels: number;
         paddingBottom: string | number;
+        readonly paddingBottomInPixels: number;
         left: string | number;
+        readonly leftInPixels: number;
         top: string | number;
+        readonly topInPixels: number;
         linkOffsetX: string | number;
+        readonly linkOffsetXInPixels: number;
         linkOffsetY: string | number;
+        readonly linkOffsetYInPixels: number;
         readonly centerX: number;
         readonly centerY: number;
         constructor(name?: string);

gui/src/controls/control.ts

@@ -208,6 +208,10 @@ module BABYLON.GUI {
             return this._width.toString(this._host);
         }
 
+        public get widthInPixels(): number  {
+            return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }
+
         public set width(value: string | number ) {
             if (this._width.toString(this._host) === value) {
                 return;
@@ -222,6 +226,10 @@ module BABYLON.GUI {
             return this._height.toString(this._host);
         }
 
+        public get heightInPixels(): number  {
+            return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        }
+
         public set height(value: string | number ) {
             if (this._height.toString(this._host) === value) {
                 return;
@@ -256,7 +264,11 @@ module BABYLON.GUI {
 
             this._fontStyle = value;
             this._fontSet = true;
-        }        
+        }     
+        
+        public get fontSizeInPixels(): number  {
+            return this._fontSize.getValueInPixel(this._host, 100);
+        }
 
         public get fontSize(): string | number  {
             return this._fontSize.toString(this._host);
@@ -336,6 +348,10 @@ module BABYLON.GUI {
             return this._paddingLeft.toString(this._host);
         }
 
+        public get paddingLeftInPixels(): number  {
+            return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }             
+
         public set paddingLeft(value: string | number ) {
             if (this._paddingLeft.fromString(value)) {
                 this._markAsDirty();
@@ -346,6 +362,10 @@ module BABYLON.GUI {
             return this._paddingRight.toString(this._host);
         }
 
+        public get paddingRightInPixels(): number  {
+            return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }         
+
         public set paddingRight(value: string | number ) {
             if (this._paddingRight.fromString(value)) {
                 this._markAsDirty();
@@ -356,6 +376,10 @@ module BABYLON.GUI {
             return this._paddingTop.toString(this._host);
         }
 
+        public get paddingTopInPixels(): number  {
+            return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        }         
+
         public set paddingTop(value: string | number ) {
             if (this._paddingTop.fromString(value)) {
                 this._markAsDirty();
@@ -366,6 +390,10 @@ module BABYLON.GUI {
             return this._paddingBottom.toString(this._host);
         }
 
+        public get paddingBottomInPixels(): number  {
+            return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        }                 
+
         public set paddingBottom(value: string | number ) {
             if (this._paddingBottom.fromString(value)) {
                 this._markAsDirty();
@@ -376,6 +404,10 @@ module BABYLON.GUI {
             return this._left.toString(this._host);
         }
 
+        public get leftInPixels(): number  {
+            return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }          
+
         public set left(value: string | number ) {
             if (this._left.fromString(value)) {
                 this._markAsDirty();
@@ -386,6 +418,10 @@ module BABYLON.GUI {
             return this._top.toString(this._host);
         }
 
+        public get topInPixels(): number  {
+            return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        }        
+
         public set top(value: string | number ) {
             if (this._top.fromString(value)) {
                 this._markAsDirty();
@@ -396,6 +432,10 @@ module BABYLON.GUI {
             return this._linkOffsetX.toString(this._host);
         }
 
+        public get linkOffsetXInPixels(): number  {
+            return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
+        }        
+
         public set linkOffsetX(value: string | number ) {
             if (this._linkOffsetX.fromString(value)) {
                 this._markAsDirty();
@@ -406,6 +446,10 @@ module BABYLON.GUI {
             return this._linkOffsetY.toString(this._host);
         }
 
+        public get linkOffsetYInPixels(): number  {
+            return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
+        }        
+
         public set linkOffsetY(value: string | number ) {
             if (this._linkOffsetY.fromString(value)) {
                 this._markAsDirty();