فهرست منبع

Revert "fixed silder's GUI thumbWith issue, #3359"

This reverts commit 3581a1bf09c5bf7422b68b41d104efdf758ef7a3.
Jean Philippe 7 سال پیش
والد
کامیت
88e4832b94

تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 10277 - 10277
dist/preview release/babylon.d.ts


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 2 - 2
dist/preview release/inspector/babylon.inspector.bundle.js


تفاوت فایلی نمایش داده نمی شود زیرا این فایل بسیار بزرگ است
+ 8 - 8
dist/preview release/viewer/babylon.viewer.js


+ 8 - 12
gui/src/controls/slider.ts

@@ -111,13 +111,13 @@ module BABYLON.GUI {
 
         public set value(value: number) {
             value = Math.max(Math.min(value, this._maximum), this._minimum);
-
             if (this._value === value) {
                 return;
             }
 
             this._value = value;
             this._markAsDirty();
+
             this.onValueChangedObservable.notifyObservers(this._value);
         }
 
@@ -173,9 +173,9 @@ module BABYLON.GUI {
                 }
 
 
-                var left = this._currentMeasure.left;
-                var width = this._currentMeasure.width;
-                var thumbPosition = ((this._value - this._minimum) / (this._maximum - this._minimum)) * (width - effectiveThumbWidth);
+                var left = this._currentMeasure.left + effectiveThumbWidth / 2;
+                var width = this._currentMeasure.width - effectiveThumbWidth;
+                var thumbPosition = (this._value - this._minimum) / (this._maximum - this._minimum) * width;
 
                 // Bar
                 context.fillStyle = this._background;
@@ -188,8 +188,7 @@ module BABYLON.GUI {
                 }
 
                 context.fillStyle = this.color;
-                context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, width, this._currentMeasure.height - effectiveBarOffset * 2);
-
+                context.fillRect(left, this._currentMeasure.top + effectiveBarOffset, thumbPosition, this._currentMeasure.height - effectiveBarOffset * 2);
 
                 if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                     context.shadowColor = this.shadowColor;
@@ -201,7 +200,7 @@ module BABYLON.GUI {
                 // Thumb
                 if (this._isThumbCircle) {
                     context.beginPath();
-                    context.arc(left + thumbPosition + (effectiveThumbWidth / 2), this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
+                    context.arc(left + thumbPosition, this._currentMeasure.top + this._currentMeasure.height / 2, effectiveThumbWidth / 2, 0, 2 * Math.PI);
                     context.fill();
 
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
@@ -214,8 +213,7 @@ module BABYLON.GUI {
                     context.stroke();
                 }
                 else {
-
-                    context.fillRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                    context.fillRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
 
                     if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
                         context.shadowBlur = 0;
@@ -224,14 +222,12 @@ module BABYLON.GUI {
                     }
 
                     context.strokeStyle = this._borderColor;
-                    context.strokeRect(left + thumbPosition, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
+                    context.strokeRect(left + thumbPosition - effectiveThumbWidth / 2, this._currentMeasure.top, effectiveThumbWidth, this._currentMeasure.height);
                 }
             }
             context.restore();
         }
 
-
-
         // Events
         private _pointerIsDown = false;
 

+ 106 - 108
localDev/index.html

@@ -1,122 +1,120 @@
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml">
 
-    <head>
-        <title>Local Development</title>
-
-        <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
-        <script src="https://preview.babylonjs.com/cannon.js"></script>
-        <script src="https://preview.babylonjs.com/Oimo.js"></script>
-        <script src="../dist/gui/babylon.gui.js"></script>
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
-
-        <script src="../Tools/DevLoader/BabylonLoader.js"></script>
-        <script src="src/webgl-debug.js"></script>
-
-        <style>
-            html,
-            body {
-                width: 100%;
-                height: 100%;
-                padding: 0;
-                margin: 0;
-                overflow: hidden;
-            }
-
-            #renderCanvas {
-                width: 100%;
-                height: 100%;
-            }
-
-            #fps {
-                position: absolute;
-                background-color: black;
-                border: 2px solid red;
-                text-align: center;
-                font-size: 16px;
-                color: white;
-                top: 15px;
-                right: 10px;
-                width: 60px;
-                height: 20px;
-            }
-        </style>
-    </head>
-
-    <body>
-        <div id="fps">0</div>
-        <canvas id="renderCanvas" touch-action="none"></canvas>
-
-        <script>
-            var canvas = document.getElementById("renderCanvas");
-            //	canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
-            var divFps = document.getElementById("fps");
-
-            // Global to simulate PG.
-            var engine = null;
-
-            // Allow querystring to navigate easily in debug in local samples.
-            var indexjs = 'src/index';
-            var sampleSearch = /sample=([0-9]+)/i;
-            var matches = null;
-            if ((matches = sampleSearch.exec(window.location)) !== null) {
-                indexjs += '.';
-                indexjs += matches[1];
-            }
-            indexjs += '.js';
-
-            // Load the scripts + map file to allow vscode debug.
-            BABYLONDEVTOOLS.Loader
-                .require(indexjs)
-                .load(function () {
-                    if (BABYLON.Engine.isSupported()) {
-                        if (typeof createEngine !== "undefined") {
-                            engine = createEngine();
-                        } else {
-                            engine = new BABYLON.Engine(canvas, true, { stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
-                        }
-
-                        BABYLONDEVTOOLS.Loader.debugShortcut(engine);
-
-                        // call the scene creation from the js.
-                        if (typeof delayCreateScene !== "undefined") {
-                            var scene = delayCreateScene();
+<head>
+    <title>Local Development</title>
+
+    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>
+    <script src="https://preview.babylonjs.com/cannon.js"></script>
+    <script src="https://preview.babylonjs.com/Oimo.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
+    <script src="../Tools/DevLoader/BabylonLoader.js"></script>
+    <script src="src/webgl-debug.js"></script>
+
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+
+        #renderCanvas {
+            width: 100%;
+            height: 100%;
+        }
+
+        #fps {
+            position: absolute;
+            background-color: black;
+            border: 2px solid red;
+            text-align: center;
+            font-size: 16px;
+            color: white;
+            top: 15px;
+            right: 10px;
+            width: 60px;
+            height: 20px;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="fps">0</div>
+    <canvas id="renderCanvas" touch-action="none"></canvas>
+
+    <script>
+        var canvas = document.getElementById("renderCanvas");
+        //	canvas = WebGLDebugUtils.makeLostContextSimulatingCanvas(canvas);
+        var divFps = document.getElementById("fps");
+
+        // Global to simulate PG.
+        var engine = null;
+
+        // Allow querystring to navigate easily in debug in local samples.
+        var indexjs = 'src/index';
+        var sampleSearch = /sample=([0-9]+)/i;
+        var matches = null;
+        if ((matches = sampleSearch.exec(window.location)) !== null) {
+            indexjs += '.';
+            indexjs += matches[1];
+        }
+        indexjs += '.js';
+
+        // Load the scripts + map file to allow vscode debug.
+        BABYLONDEVTOOLS.Loader
+            .require(indexjs)
+            .load(function () {
+                if (BABYLON.Engine.isSupported()) {
+                    if (typeof createEngine !== "undefined") {
+                        engine = createEngine();
+                    } else {
+                        engine = new BABYLON.Engine(canvas, true, { stencil: true, disableWebGL2Support: false, preserveDrawingBuffer: true });
+                    }
 
-                            if (scene) {
-                                // Register a render loop to repeatedly render the scene
+                    BABYLONDEVTOOLS.Loader.debugShortcut(engine);
 
-                                engine.runRenderLoop(function () {
-                                    if (scene.activeCamera) {
-                                        scene.render();
-                                    }
-                                    divFps.innerHTML = engine.getFps().toFixed() + " fps";
-                                });
-                            }
-                        }
-                        else {
-                            var scene = createScene();
+                    // call the scene creation from the js.
+                    if (typeof delayCreateScene !== "undefined") {
+                        var scene = delayCreateScene();
 
-                            if (scene) {
-                                // Register a render loop to repeatedly render the scene
+                        if (scene) {
+                            // Register a render loop to repeatedly render the scene
 
-                                engine.runRenderLoop(function () {
+                            engine.runRenderLoop(function () {
+                                if (scene.activeCamera) {
                                     scene.render();
-                                    divFps.innerHTML = engine.getFps().toFixed() + " fps";
-                                });
-                            }
+                                }
+                                divFps.innerHTML = engine.getFps().toFixed() + " fps";
+                            });
                         }
-
-                        // Resize
-                        window.addEventListener("resize", function () {
-                            engine.resize();
-                        });
-
                     }
                     else {
-                        alert('BabylonJS is not supported.')
+                        var scene = createScene();
+
+                        if (scene) {
+                            // Register a render loop to repeatedly render the scene
+
+                            engine.runRenderLoop(function () {
+                                scene.render();
+                                divFps.innerHTML = engine.getFps().toFixed() + " fps";
+                            });
+                        }
                     }
-                });
-        </script>
-    </body>
+
+                    // Resize
+                    window.addEventListener("resize", function () {
+                        engine.resize();
+                    });
+
+                }
+                else {
+                    alert('BabylonJS is not supported.')
+                }
+            });
+    </script>
+</body>
 
 </html>