Make track properties in Link interaction configurable

openlayers · Sep 16, 2022 · 2d92d7e · 2d92d7e
1 parent bbc41b3
commit 2d92d7e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 6 deletions.
diff --git a/src/ol/interaction/Link.js b/src/ol/interaction/Link.js
@@ -52,9 +52,13 @@ function differentArray(a, b) {
   return differentNumber(a[0], b[0]) || differentNumber(a[1], b[1]);
 }
 
+/** @typedef {'x'|'y'|'z'|'r'|'l'} TrackProperties */
+
 /**
  * @typedef {Object} Options
  * @property {boolean|import('../View.js').AnimationOptions} [animate=true] Animate view transitions.
+ * @property {Array<TrackProperties>} [trackProperties=['x', 'y', 'z', 'r', 'l']] Properties to track. Default is to track
+ * `x` (center x), `y` (center y), `z` (zoom), `r` (rotation) and `l` (layers).
  * @property {boolean} [replace=false] Replace the current URL without creating the new entry in browser history.
  * By default, changes in the map state result in a new entry being added to the browser history.
  * @property {string} [prefix=''] By default, the URL will be updated with search parameters x, y, z, and r.  To
@@ -76,7 +80,12 @@ class Link extends Interaction {
     super();
 
     options = Object.assign(
-      {animate: true, replace: false, prefix: ''},
+      {
+        animate: true,
+        trackProperties: ['x', 'y', 'z', 'r', 'l'],
+        replace: false,
+        prefix: '',
+      },
       options || {}
     );
 
@@ -95,6 +104,15 @@ class Link extends Interaction {
      */
     this.animationOptions_ = animationOptions;
 
+    /**
+     * @type {Object<TrackProperties, boolean>}
+     * @private
+     */
+    this.trackProperties_ = options.trackProperties.reduce((acc, value) => {
+      acc[value] = true;
+      return acc;
+    }, {});
+
     /**
      * @private
      * @type {boolean}
@@ -151,6 +169,9 @@ class Link extends Interaction {
    * @param {string} value The param value.
    */
   set_(params, name, value) {
+    if (!(name in this.trackProperties_)) {
+      return;
+    }
     params.set(this.getParamName_(name), value);
   }
 
@@ -160,6 +181,9 @@ class Link extends Interaction {
    * @param {string} name The unprefixed parameter name.
    */
   delete_(params, name) {
+    if (!(name in this.trackProperties_)) {
+      return;
+    }
     params.delete(this.getParamName_(name));
   }
 
@@ -259,13 +283,16 @@ class Link extends Interaction {
     const viewProperties = {};
 
     const zoom = readNumber(this.get_(params, 'z'));
-    if (differentNumber(zoom, view.getZoom())) {
+    if ('z' in this.trackProperties_ && differentNumber(zoom, view.getZoom())) {
       updateView = true;
       viewProperties.zoom = zoom;
     }
 
     const rotation = readNumber(this.get_(params, 'r'));
-    if (differentNumber(rotation, view.getRotation())) {
+    if (
+      'r' in this.trackProperties_ &&
+      differentNumber(rotation, view.getRotation())
+    ) {
       updateView = true;
       viewProperties.rotation = rotation;
     }
@@ -274,7 +301,10 @@ class Link extends Interaction {
       readNumber(this.get_(params, 'x')),
       readNumber(this.get_(params, 'y')),
     ];
-    if (differentArray(center, view.getCenter())) {
+    if (
+      ('x' in this.trackProperties_ || 'y' in this.trackProperties_) &&
+      differentArray(center, view.getCenter())
+    ) {
       updateView = true;
       viewProperties.center = center;
     }
@@ -297,7 +327,11 @@ class Link extends Interaction {
 
     const layers = map.getAllLayers();
     const layersParam = this.get_(params, 'l');
-    if (layersParam && layersParam.length === layers.length) {
+    if (
+      'l' in this.trackProperties_ &&
+      layersParam &&
+      layersParam.length === layers.length
+    ) {
       for (let i = 0, ii = layers.length; i < ii; ++i) {
         const value = parseInt(layersParam[i]);
         if (!isNaN(value)) {
@@ -347,7 +381,7 @@ class Link extends Interaction {
 
     if (url.href !== window.location.href) {
       if (initial || this.replace_) {
-        window.history.replaceState(null, '', url);
+        window.history.replaceState(history.state, '', url);
       } else {
         window.history.pushState(null, '', url);
       }

diff --git a/test/browser/spec/ol/interaction/Link.test.js b/test/browser/spec/ol/interaction/Link.test.js
@@ -67,5 +67,25 @@ describe('ol/interaction/Link', () => {
       view.setCenter([3, 4]);
       view.setRotation(0.5);
     });
+
+    it('accepts an array of properties to track', (done) => {
+      map.addInteraction(new Link({trackProperties: ['z', 'r']}));
+
+      map.once('moveend', () => {
+        const url = new URL(window.location.href);
+        const params = url.searchParams;
+        expect(params.get('z')).to.be('2');
+        expect(params.get('x')).to.be(null);
+        expect(params.get('y')).to.be(null);
+        expect(params.get('r')).to.be('0.5');
+        expect(params.get('l')).to.be(null);
+        done();
+      });
+
+      const view = map.getView();
+      view.setZoom(2);
+      view.setCenter([3, 4]);
+      view.setRotation(0.5);
+    });
   });
 });