Close #526 Add move buttons, rework move and zoom

.eslintrc.json

@@ -14,6 +14,7 @@
     "no-bitwise": "off",
     "no-else-return": "off",
     "no-multiple-empty-lines": "off",
+    "no-param-reassign": "off",
     "no-plusplus": "off",
     "no-restricted-properties": "off",
     "no-underscore-dangle": "off",
@@ -55,12 +56,6 @@
         "switches": "never"
       }
     ],
-    "no-param-reassign": [
-      "error",
-      {
-        "props": false
-      }
-    ],
     "no-console": [
       "error",
       {

docs/.vuepress/components/Playground.vue

@@ -178,20 +178,14 @@
         <div class="md-layout md-gutter">
           <div class="md-layout-item md-size-33">
             <md-field>
-              <label>Mouse move speed</label>
+              <label>Move speed</label>
               <md-input type="number" min="0" step="0.1" v-model="options.moveSpeed" :disabled="!imageData"/>
             </md-field>
           </div>
           <div class="md-layout-item md-size-33">
             <md-field>
-              <label>Mousewheel speed</label>
-              <md-input type="number" min="0" step="0.1" v-model="options.mousewheelSpeed" :disabled="!imageData"/>
-            </md-field>
-          </div>
-          <div class="md-layout-item md-size-33">
-            <md-field>
-              <label>Zoom buttons step</label>
-              <md-input type="number" min="0" v-model="options.zoomButtonIncrement" :disabled="!imageData"/>
+              <label>Zoom speed</label>
+              <md-input type="number" min="0" step="0.1" v-model="options.zoomSpeed" :disabled="!imageData"/>
             </md-field>
           </div>
         </div>

docs/guide/config.md

@@ -218,19 +218,13 @@ In a future version the order in which the angles are applied will change. It is
 - type: `double`
 - default `1`
 
-Speed multiplicator for manual moves.
+Speed multiplicator for panorama moves. Used for click move, touch move and navbar buttons.
 
-#### `zoomButtonIncrement`
+#### `zoomSpeed`
 - type: `double`
-- default `2`
-
-Zoom increment when using the keyboard or the navbar buttons.
-
-#### `mousewheelSpeed`
-- type: `double`
-- default: `1`
+- default `1`
 
-Zoom speed when using the mouse wheel.
+Speed multiplicator for panorama zooms. Used for mouse wheel, touch pinch and navbar buttons.
 
 #### `useXmpData`
 - type: `boolean`

docs/guide/migration-v3.md

@@ -59,15 +59,14 @@ Be sure to rename your configuration properties, the old naming is not supported
 - `time_anim` → `autorotateDelay`
 - `default_fov`→ `defaultZoomLvl`
 - `mousemove_hover` → `captureCursor`
-- `zoom_speed` → `zoomButtonIncrement`
-- `mousewheel_factor` → `mousewheelSpeed`
 
 ### Deleted options
 
 - `transition` → use `transition` and `showLoader` options of `setPanorama()`
 - `tooltip` → the properties of the tooltip are now extracted from the stylesheet
 - `webgl` → WebGL is now always enabled since three.js deprecated the CanvasRenderer
 - `panorama_roll` → use `sphereCorrection` with the `roll` property
+- `mousewheel_factor`
 
 
 ## Methods

docs/guide/navbar.md

@@ -6,19 +6,25 @@
 
 The `navbar` option is an array which can contain the following elements:
 
-  - `autorotate` : toggles the automatic rotation
-  - `zoomOut` : zooms in
-  - `zoomRange` : zoom slider
-  - `zoomIn` :  zooms out
-  - `zoom`: `zoomOut` + `zoomRange` + `zoomIn`
-  - `download` : download the source image
-  - `caption` : the caption
-  - `fullscreen` : toggles fullscreen view
-  - ~~`markers` : toggles the markers~~ now part of a [plugin](../plugins/plugin-markers.md)
-  - ~~`markersList` : shows the markers list~~ now part of a [plugin](../plugins/plugin-markers.md)
-  - ~~`gyroscope` : toggles the gyroscope~~ now part of a [plugin](../plugins/plugin-gyroscope.md)
-  - ~~`stereo` : toggles stereo view (VR)~~ now part of a [plugin](../plugins/plugin-stereo.md)
-
+  - `autorotate`
+  - `zoomOut`
+  - `zoomRange`
+  - `zoomIn`
+  - `zoom` = `zoomOut` + `zoomRange` + `zoomIn`
+  - `moveLeft`
+  - `moveRight`
+  - `moveTop`
+  - `moveDown`
+  - `move` = `moveLeft` + `moveRight` + `moveTop` + `moveDown`
+  - `download`
+  - `caption`
+  - `fullscreen`
+  - ~~`markers`~~ now part of a [plugin](../plugins/plugin-markers.md)
+  - ~~`markersList`~~ now part of a [plugin](../plugins/plugin-markers.md)
+  - ~~`gyroscope`~~ now part of a [plugin](../plugins/plugin-gyroscope.md)
+  - ~~`stereo`~~ now part of a [plugin](../plugins/plugin-stereo.md)
+
+Other buttons can be made available by plugins.
 
 ## Custom buttons
 

example/cubemap.html

@@ -71,7 +71,7 @@
     caption   : panos[0].desc,
     loadingImg: 'assets/photosphere-logo.gif',
     navbar    : [
-      'autorotate', 'zoom', 'download', 'markers', 'markersList',
+      'autorotate', 'zoom', 'move',
       {
         title    : 'Change image',
         className: 'custom-button',

example/equirectangular.html

@@ -60,8 +60,10 @@
     touchmoveTwoFingers: false,
     mousewheelCtrlKey  : false,
     captureCursor      : false,
+    moveSpeed          : 1,
+    zoomSpeed          : 1,
     navbar             : [
-      'autorotate', 'zoom', 'download',
+      'autorotate', 'zoom', 'move', 'download',
       {
         title    : 'Change image',
         className: 'custom-button',

example/plugin-autorotate-keypoints.html

@@ -45,7 +45,6 @@
     autorotateDelay: 1000,
     navbar         : [
       'autorotate',
-      'zoom',
       {
         title  : 'Change points',
         content: '🔄',

example/plugin-markers.html

@@ -114,7 +114,7 @@ <h3>Header Level 3</h3>
     caption   : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
     loadingImg: 'assets/photosphere-logo.gif',
     navbar    : [
-      'autorotate', 'zoom', 'download', 'markers', 'markersList',
+      'markers', 'markersList',
       {
         content  : '💬',
         title    : 'Show all tooltips',
@@ -123,7 +123,7 @@ <h3>Header Level 3</h3>
           markers.toggleAllTooltips();
         }
       },
-      'caption', 'gyroscope', 'stereo', 'fullscreen',
+      'caption', 'fullscreen',
     ],
     plugins   : [
       PhotoSphereViewer.GyroscopePlugin,

example/plugin-resolution.html

@@ -40,6 +40,7 @@
     panorama  : 'sphere_small.jpg',
     caption   : 'Parc national du Mercantour <b>&copy; Damien Sorel</b>',
     loadingImg: 'assets/photosphere-logo.gif',
+    navbar    : ['caption', 'settings', 'fullscreen'],
     plugins   : [
       PhotoSphereViewer.SettingsPlugin,
       [PhotoSphereViewer.ResolutionPlugin, {