Merge pull request #4242 from RaananW/touch-action-none-ios-ftw

animation names, touch-action none, input scroll

Viewer/assets/templates/default/defaultViewer.html

@@ -19,7 +19,7 @@
     }
 </style>
 
-<canvas class="babylonjs-canvas" id="{{canvasId}}">
+<canvas class="babylonjs-canvas" id="{{canvasId}}" touch-action="none">
 </canvas>
 
 <nav-bar></nav-bar>

Viewer/assets/templates/default/fillContainer.html

@@ -2,6 +2,10 @@
     fill-container {
         display: flex;
     }
+
+    fill-container>* {
+        touch-action: none;
+    }
 </style>
 
 {{#unless disable}}

Viewer/assets/templates/default/navbar.html

@@ -153,22 +153,6 @@
         cursor: pointer;
     }
 
-    .progress-bar-container {
-        position: relative;
-        overflow: hidden;
-    }
-
-    .progress-bar {
-        align-self: center;
-        flex: 1;
-        background-color: rgb(255, 255, 255);
-        height: 2px;
-        position: absolute;
-        width: 100%;
-        right: 0;
-        pointer-events: none;
-    }
-
     .animation-number {
         margin: 0 6px;
     }
@@ -177,13 +161,6 @@
         margin-right: 6px;
     }
 
-    .progress-wrapper {
-        height: 0px;
-        background-color: rgba(91, 93, 107, .75);
-        width: 100%;
-        border-top: 2px solid rgba(204, 210, 214, .4);
-    }
-
     .progress-circle {
         width: 12px;
         height: 12px;
@@ -271,6 +248,26 @@
         .animation-label {
             display: block;
             margin-left: 6px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+
+        nav-bar button.animation-buttons {
+            padding: 0 8px;
+            justify-content: left;
+        }
+
+        .icon.up-icon {
+            margin-left: 8px;
+        }
+
+        nav-bar button.animation-buttons>div {
+            display: flex;
+            pointer-events: none;
+        }
+
+        .animation-number {
+            display: none;
         }
 
         .progress-bar-container {
@@ -284,6 +281,90 @@
             width: 144px;
         }
     }
+
+
+    .progress-wrapper {
+        -webkit-appearance: none;
+        cursor: pointer;
+        width: 100%;
+        outline: none;
+        margin: 0 12px;
+        background-color: transparent;
+    }
+
+    /*Chrome -webkit */
+
+    .progress-wrapper::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        width: 20px;
+        height: 20px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: rgba(91, 93, 107, 1);
+        margin-top: -10px;
+    }
+
+    .progress-wrapper::-webkit-slider-runnable-track {
+        height: 2px;
+        -webkit-appearance: none;
+        background-color: white;
+    }
+
+
+    /** FireFox -moz */
+
+    .progress-wrapper::-moz-range-progress {
+        background-color: white;
+        height: 2px;
+    }
+
+    .progress-wrapper::-moz-range-thumb {
+        width: 20px;
+        height: 20px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: rgba(91, 93, 107, 1);
+    }
+
+    .progress-wrapper::-moz-range-track {
+        background: white;
+        height: 2px;
+    }
+
+    /** IE -ms */
+
+    .progress-wrapper::-ms-track {
+        height: 2px;
+
+        /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+        background: transparent;
+
+        /*leave room for the larger thumb to overflow with a transparent border */
+        border-color: transparent;
+        border-width: 10px 0;
+
+        /*remove default tick marks*/
+        color: transparent;
+    }
+
+    .progress-wrapper::-ms-fill-lower {
+        background: white;
+        border-radius: 5px;
+    }
+
+    .progress-wrapper::-ms-fill-upper {
+        background: white;
+        border-radius: 5px;
+    }
+
+    .progress-wrapper::-ms-thumb {
+        width: 16px;
+        height: 16px;
+        border: 2px solid white;
+        border-radius: 50%;
+        background: rgba(91, 93, 107, 1);
+        margin-top: 0px;
+    }
 </style>
 
 {{#if (or (not animations) hideAnimations)}} {{#if hideLogo}}
@@ -327,20 +408,24 @@
     {{/unless}}{{#unless (or (not animations) hideAnimations)}}
     <div class="animation-control">
         <div class="types">
-            <button class="flex-container" id="types-button">
+            <button class="flex-container animation-buttons" id="types-button">
+                <!-- <div> -->
                 <span class="icon types-icon"></span>
-                <span class="control-text animation-label">Animation</span>
+                <span class="control-text animation-label">{{selectedAnimationName}}</span>
                 <span class="control-text animation-number">{{selectedAnimation}}</span>
+                <!-- </div> -->
                 {{#if (gt (count animations) 1)}}
                 <span class="icon up-icon"></span>
                 {{/if}}
             </button>
             <div class="menu-options">
                 {{#each animations}} {{#unless (eq ../selectedAnimation (add @index 1))}}
-                <button class="flex-container" id="label-option-button" data-value="{{this}}">
+                <button class="flex-container animation-buttons" id="label-option-button" data-value="{{this}}">
+                    <!-- <div> -->
                     <span class="icon types-icon"></span>
-                    <span class="control-text animation-label">Animation</span>
+                    <span class="control-text animation-label">{{this}}</span>
                     <span class="control-text animation-number">{{add @index 1}}</span>
+                    <!-- </div> -->
                 </button>
                 {{/unless}} {{/each}}
             </div>
@@ -353,13 +438,7 @@
                 <span class="icon pause-icon"></span>
                 {{/if}}
             </button>
-            <div class="progress-bar-container flex-container" id="progress-bar-container">
-                <div class="progress-bar">
-                    <div class="progress-wrapper" id="progress-wrapper">
-                        <div class="progress-circle" id="progress-circle"></div>
-                    </div>
-                </div>
-            </div>
+            <input class="progress-wrapper" id="progress-wrapper" type="range" min="0" max="100" step="0.01">
         </div>
         <div class="speed">
             <button class="flex-container" id="speed-button">

Viewer/src/configuration/types/default.ts

@@ -24,12 +24,7 @@ export let defaultConfiguration: ViewerConfiguration = {
             }
         },
         viewer: {
-            html: require("../../../assets/templates/default/defaultViewer.html"),
-            events: {
-                pointerout: true,
-                pointerdown: true,
-                pointerup: true
-            }
+            html: require("../../../assets/templates/default/defaultViewer.html")
         },
         navBar: {
             html: require("../../../assets/templates/default/navbar.html"),
@@ -51,7 +46,12 @@ export let defaultConfiguration: ViewerConfiguration = {
                     'navbar-control': true,
                     'help-button': true
                 },
-                pointerover: true,
+                input: {
+                    'progress-wrapper': true
+                },
+                pointerup: {
+                    'progress-wrapper': true
+                }
             }
         },
         overlay: {
@@ -89,30 +89,6 @@ export let defaultConfiguration: ViewerConfiguration = {
         wheelPrecision: 200,
     },
     skybox: {
-        /*cubeTexture: {
-            url: 'https://playground.babylonjs.com/textures/environment.dds',
-            gammaSpace: false
-        },*/
-        /*pbr: true,
-        blur: 0.7,
-        infiniteDistance: false,*/
-        /*material: {
-            imageProcessingConfiguration: {
-                colorCurves: {
-                    globalDensity: 89,
-                    globalHue: 58.88,
-                    globalSaturation: 94
-                },
-                colorCurvesEnabled: true,
-                exposure: 1.5,
-                contrast: 1.66,
-                toneMappingEnabled: true,
-                vignetteEnabled: true,
-                vignetteWeight: 5,
-                vignetteColor: { r: 0.8, g: 0.6, b: 0.4 },
-                vignetteM: true
-            }
-        }*/
     },
     ground: {
         receiveShadows: true

Viewer/src/templateManager.ts

@@ -599,8 +599,14 @@ export class Template {
 
                     // if boolean, set the parent as the event listener
                     if (typeof this._configuration.events[eventName] === 'boolean') {
-                        let binding = functionToFire.bind(this, '#' + this.parent.id);
-                        this.parent.addEventListener(eventName, functionToFire.bind(this, '#' + this.parent.id), false);
+                        let selector = this.parent.id
+                        if (selector) {
+                            selector = '#' + selector
+                        } else {
+                            selector = this.parent.tagName
+                        }
+                        let binding = functionToFire.bind(this, selector);
+                        this.parent.addEventListener(eventName, functionToFire.bind(this, selector), false);
                         this._registeredEvents.push({
                             htmlElement: this.parent,
                             eventName: eventName,

Viewer/src/viewer/defaultViewer.ts

@@ -7,7 +7,7 @@ import { SpotLight, MirrorTexture, Plane, ShadowGenerator, Texture, BackgroundMa
 import { CameraBehavior } from '../interfaces';
 import { ViewerModel } from '../model/viewerModel';
 import { extendClassWithConfig } from '../helper';
-import { IModelAnimation } from '../model/modelAnimation';
+import { IModelAnimation, AnimationState } from '../model/modelAnimation';
 
 /**
  * The Default viewer is the default implementation of the AbstractViewer.
@@ -58,12 +58,29 @@ export class DefaultViewer extends AbstractViewer {
             this.templateManager.eventManager.registerCallback("navBar", () => {
                 // do your thing
             }, "pointerdown", "#help-button");
+
+            this.templateManager.eventManager.registerCallback("navBar", (event: EventCallback) => {
+                let element = <HTMLInputElement>event.event.srcElement;
+                console.log(element.value);
+                if (!this._currentAnimation) return;
+                const gotoFrame = +element.value / 100 * this._currentAnimation.frames;
+                if (isNaN(gotoFrame)) return;
+                this._currentAnimation.goToFrame(gotoFrame);
+            }, "input");
+
+            this.templateManager.eventManager.registerCallback("navBar", (e) => {
+                if (this._resumePlay) {
+                    this._togglePlayPause(true);
+                }
+                this._resumePlay = false;
+            }, "pointerup", "#progress-wrapper");
         }
     }
 
     private _animationList: string[];
     private _currentAnimation: IModelAnimation;
     private _isAnimationPaused: boolean;
+    private _resumePlay: boolean;
 
     private _handlePointerDown = (event: EventCallback) => {
 
@@ -103,11 +120,11 @@ export class DefaultViewer extends AbstractViewer {
                 if (speed)
                     this._updateAnimationSpeed(speed);
                 break;
-            case "progress-bar-container":
-                if (!this._currentAnimation) return;
-                const gotoFrame = (pointerDown.offsetX / element.clientWidth) * this._currentAnimation.frames;
-                if (isNaN(gotoFrame)) return;
-                this._currentAnimation.goToFrame(gotoFrame);
+            case "progress-wrapper":
+                this._resumePlay = !this._isAnimationPaused;
+                if (this._resumePlay) {
+                    this._togglePlayPause(true);
+                }
                 break;
             case "fullscreen-button":
                 this.toggleFullscreen();
@@ -119,7 +136,7 @@ export class DefaultViewer extends AbstractViewer {
     /**
      * Plays or Pauses animation
      */
-    private _togglePlayPause = () => {
+    private _togglePlayPause = (noUiUpdate?: boolean) => {
         if (!this._currentAnimation) {
             return;
         }
@@ -131,6 +148,8 @@ export class DefaultViewer extends AbstractViewer {
 
         this._isAnimationPaused = !this._isAnimationPaused;
 
+        if (noUiUpdate) return;
+
         let navbar = this.templateManager.getTemplate('navBar');
         if (!navbar) return;
 
@@ -139,15 +158,33 @@ export class DefaultViewer extends AbstractViewer {
         });
     }
 
+    private _oldIdleRotationValue: number;
+
     /**
      * Control progress bar position based on animation current frame
      */
     private _updateProgressBar = () => {
-        var progressWrapper = document.getElementById("progress-wrapper");
-        if (progressWrapper && this._currentAnimation) {
+        let navbar = this.templateManager.getTemplate('navBar');
+        if (!navbar) return;
+        var progressSlider = <HTMLInputElement>navbar.parent.querySelector("input.progress-wrapper");
+        if (progressSlider && this._currentAnimation) {
             const progress = this._currentAnimation.currentFrame / this._currentAnimation.frames * 100;
-            if (isNaN(progress)) return;
-            progressWrapper.style.transform = "translateX(" + progress + "%)";
+            var currentValue = progressSlider.valueAsNumber;
+            if (Math.abs(currentValue - progress) > 0.1) { // Only move if greater than a 1% change
+                progressSlider.value = '' + progress;
+            }
+
+            if (this._currentAnimation.state === AnimationState.PLAYING) {
+                if (this.sceneManager.camera.autoRotationBehavior && !this._oldIdleRotationValue) {
+                    this._oldIdleRotationValue = this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed;
+                    this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = 0;
+                }
+            } else {
+                if (this.sceneManager.camera.autoRotationBehavior && this._oldIdleRotationValue) {
+                    this.sceneManager.camera.autoRotationBehavior.idleRotationSpeed = this._oldIdleRotationValue;
+                    this._oldIdleRotationValue = 0;
+                }
+            }
         }
     }
 
@@ -186,10 +223,12 @@ export class DefaultViewer extends AbstractViewer {
         }
 
         if (paramsObject) {
-            paramsObject.selectedAnimation = (this._animationList.indexOf(label) + 1)
+            paramsObject.selectedAnimation = (this._animationList.indexOf(label) + 1);
+            paramsObject.selectedAnimationName = label;
         } else {
             navbar.updateParams({
                 selectedAnimation: (this._animationList.indexOf(label) + 1),
+                selectedAnimationName: label
             });
         }