Merge pull request #5564 from BabylonJSGuide/master

Added Mouse Wheel Scrolling to Scroll Viewer

dist/preview release/what's new.md

@@ -18,7 +18,7 @@
 - GUI:
   - Added new [ImageBasedSlider](http://doc.babylonjs.com/how_to/gui#imagebasedslider) to let users customize sliders using images ([Deltakosh](https://github.com/deltakosh))
   - Added support for clipboard events to let users perform `cut`, `copy` and `paste` events ([Saket Saurabh](https://github.com/ssaket))
-  - Added new [ScrollViewer](https://doc.babylonjs.com/how_to/scrollviewer) for larger containers to be viewed using Sliders ([JohnK](https://github.com/BabylonJSGuide/))
+  - Added new [ScrollViewer](https://doc.babylonjs.com/how_to/scrollviewer) with mouse wheel scrolling for larger containers to be viewed using Sliders ([JohnK](https://github.com/BabylonJSGuide/))
 
 ## Updates
 

gui/src/2D/controls/scrollViewer.ts

@@ -28,6 +28,8 @@ export class ScrollViewer extends Rectangle {
     private _endTop: number;
     private _window: Container;
     private _windowContents: Control;
+    private _pointerIsOver: Boolean = false;
+    private _wheelPrecision: number = 0.05;
 
     /**
      * Adds windowContents to the grid view window
@@ -145,6 +147,14 @@ export class ScrollViewer extends Rectangle {
             }
         });
 
+        this.onPointerEnterObservable.add(() => {
+            this._pointerIsOver = true;
+        });
+
+        this.onPointerOutObservable.add(() => {
+            this._pointerIsOver = false;
+        });
+
         this._grid = new Grid();
         this._horizontalBar = new Slider();
         this._verticalBar = new Slider();
@@ -227,6 +237,30 @@ export class ScrollViewer extends Rectangle {
         this._grid.addControl(this._dragSpace, 1, 1);
     }
 
+    /**
+     * Gets or sets the mouse wheel precision
+     * from 0 to 1 with a default value of 0.05
+     * */
+    public get wheelPrecision(): number {
+        return this._wheelPrecision;
+    }
+
+    public set wheelPrecision(value: number) {
+        if (this._wheelPrecision === value) {
+            return;
+        }
+
+        if (value < 0) {
+            value = 0;
+        }
+
+        if (value > 1) {
+            value = 1;
+        }
+
+        this._wheelPrecision = value;
+    }
+
     /** Gets or sets the bar color */
     public get barColor(): string {
         return this._barColor;
@@ -287,6 +321,8 @@ export class ScrollViewer extends Rectangle {
 
         this._grid.setColumnDefinition(0, innerWidth, true);
         this._grid.setRowDefinition(0, innerHeight, true);
+
+        this._attachWheel();
     }
 
     /** @hidden */
@@ -361,4 +397,28 @@ export class ScrollViewer extends Rectangle {
             this._updateScroller(windowContents);
         });
     }
+
+    /** @hidden */
+    private _attachWheel() {
+        let scene = this._host.getScene();
+        scene!.onPointerObservable.add((pi, state) => {
+            if (!this._pointerIsOver || pi.type !== BABYLON.PointerEventTypes.POINTERWHEEL) {
+                return;
+            }
+            if (this._verticalBar.isVisible == true) {
+                if ((<MouseWheelEvent>pi.event).deltaY < 0 && this._verticalBar.value > 0) {
+                    this._verticalBar.value -= this._wheelPrecision * 100;
+                } else if ((<MouseWheelEvent>pi.event).deltaY > 0 && this._verticalBar.value < this._verticalBar.maximum) {
+                    this._verticalBar.value += this._wheelPrecision * 100;
+                }
+            }
+            if (this._horizontalBar.isVisible == true) {
+                if ((<MouseWheelEvent>pi.event).deltaX < 0 && this._horizontalBar.value < this._horizontalBar.maximum) {
+                    this._horizontalBar.value += this._wheelPrecision * 100;
+                } else if ((<MouseWheelEvent>pi.event).deltaX > 0 && this._horizontalBar.value > 0) {
+                    this._horizontalBar.value -= this._wheelPrecision * 100;
+                }
+            }
+        });
+    }
 }