Fix #787 markers: add gotoMarkerSpeed option

mistic100 · Nov 27, 2022 · 109b53e · 109b53e
1 parent f763c22
commit 109b53e
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 9 deletions.
diff --git a/docs/plugins/plugin-markers.md b/docs/plugins/plugin-markers.md
@@ -494,6 +494,12 @@ lang: {
 
 _Note: this option is not part of the plugin but is merged with the main [`lang`](../guide/config.md#lang) object._
 
+#### `gotoMarkerSpeed` <Badge text="4.8.1"/>
+- type: `string|number`
+- default `'8rpm'`
+
+Default animation speed for `gotoMarker` method.
+
 #### `clickEventOnMarker`
 - type: `boolean`
 - default: `false`
@@ -529,7 +535,7 @@ Returns the last marker clicked by the user.
 Moves the view to face a specific marker.
 
 ```js
-markersPlugin.gotoMarker('marker-1', 1500)
+markersPlugin.gotoMarker('marker-1', '4rpm')
   .then(() => /* animation complete */);
 ```
 

diff --git a/example/plugin-markers.html b/example/plugin-markers.html
@@ -426,11 +426,11 @@ <h2>Lorem ipsum</h2>
           });
 
           // add markers all hover the sphere
-          for (let i = 0; i < Math.PI * 2; i += Math.PI / 4) {
-            for (let j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4) {
+          for (let i = 0, k = 1; i < Math.PI * 2; i += Math.PI / 4) {
+            for (let j = -Math.PI / 2 + Math.PI / 4; j < Math.PI / 2; j += Math.PI / 4, k++) {
               a.push({
-                id       : '#' + a.length,
-                tooltip  : '#' + a.length,
+                id       : '#' + k,
+                tooltip  : '#' + k,
                 latitude : j,
                 longitude: i,
                 image    : 'assets/pin-red.png',

diff --git a/src/Viewer.js b/src/Viewer.js
@@ -6,7 +6,15 @@ import { Notification } from './components/Notification';
 import { Overlay } from './components/Overlay';
 import { Panel } from './components/Panel';
 import { CONFIG_PARSERS, DEFAULTS, DEPRECATED_OPTIONS, getConfig, READONLY_OPTIONS } from './data/config';
-import { CHANGE_EVENTS, DEFAULT_TRANSITION, EVENTS, IDS, SPHERE_RADIUS, VIEWER_DATA } from './data/constants';
+import {
+  ANIMATION_MIN_DURATION,
+  CHANGE_EVENTS,
+  DEFAULT_TRANSITION,
+  EVENTS,
+  IDS,
+  SPHERE_RADIUS,
+  VIEWER_DATA
+} from './data/constants';
 import { SYSTEM } from './data/system';
 import errorIcon from './icons/error.svg';
 import { AbstractPlugin } from './plugins/AbstractPlugin';
@@ -877,7 +885,7 @@ export class Viewer extends EventEmitter {
 
     this.prop.animationPromise = new Animation({
       properties: animProperties,
-      duration  : duration,
+      duration  : Math.max(ANIMATION_MIN_DURATION, duration),
       easing    : 'inOutSine',
       onTick    : (properties) => {
         if (positionProvided) {

diff --git a/src/data/constants.js b/src/data/constants.js
@@ -10,6 +10,14 @@
  */
 export const DEFAULT_TRANSITION = 1500;
 
+/**
+ * @summary Minimum duration of the animations created with {@link Viewer#animate}
+ * @memberOf PSV.constants
+ * @type {number}
+ * @constant
+ */
+export const ANIMATION_MIN_DURATION = 500;
+
 /**
  * @summary Number of pixels bellow which a mouse move will be considered as a click
  * @memberOf PSV.constants

diff --git a/src/plugins/markers/index.js b/src/plugins/markers/index.js
@@ -18,6 +18,7 @@ import './style.scss';
 /**
  * @typedef {Object} PSV.plugins.MarkersPlugin.Options
  * @property {boolean} [clickEventOnMarker=false] If a `click` event is triggered on the viewer additionally to the `select-marker` event.
+ * @property {string | number} [gotoMarkerSpeed=8rpm] Default animation speed for `gotoMarker` method
  * @property {PSV.plugins.MarkersPlugin.Properties[]} [markers]
  */
 
@@ -82,6 +83,7 @@ export class MarkersPlugin extends AbstractPlugin {
      */
     this.config = {
       clickEventOnMarker: false,
+      gotoMarkerSpeed: '8rpm',
       ...options,
     };
 
@@ -438,7 +440,7 @@ export class MarkersPlugin extends AbstractPlugin {
    * @fires PSV.plugins.MarkersPlugin.goto-marker-done
    * @return {PSV.utils.Animation}  A promise that will be resolved when the animation finishes
    */
-  gotoMarker(markerId, speed) {
+  gotoMarker(markerId, speed = this.config.gotoMarkerSpeed) {
     const marker = this.getMarker(markerId);
 
     return this.psv.animate({
@@ -560,7 +562,7 @@ export class MarkersPlugin extends AbstractPlugin {
 
           this.trigger(EVENTS.SELECT_MARKER_LIST, marker);
 
-          this.gotoMarker(marker, 1000);
+          this.gotoMarker(marker);
           this.hideMarkersList();
         }
       },

diff --git a/types/plugins/markers/index.d.ts b/types/plugins/markers/index.d.ts
@@ -61,6 +61,7 @@ export type SelectMarkerData = {
 
 export type MarkersPluginOptions = {
   clickEventOnMarker?: boolean;
+  gotoMarkerSpeed?: string | number;
   markers?: MarkerProperties[];
 };