Merge pull request #446 from fschmenger/view_animation_config

Refactor ViewAnimation to accept only subconfiguration

Author: fschmenger

src/components/attributeTable/AttributeTable.vue

@@ -251,7 +251,7 @@ export default {
       }
 
       // zoom to feature
-      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);
+      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);
       viewAnimationUtil.to(this.map.getView(), foundFeature.getGeometry());
 
       // add to map selection

src/components/geocoder/Geocoder.vue

@@ -187,7 +187,7 @@ export default {
       // Position Map on result
       const result = item.value;
       const mapProjection = this.map.getView().getProjection();
-      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);
+      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);
 
       // Prefer zooming to bounding box if present in result
       if (Object.prototype.hasOwnProperty.call(result, 'boundingbox')) {

src/components/geolocator/Geolocator.vue

@@ -83,7 +83,7 @@ export default {
             this.map.addLayer(geolocLayer);
 
             // zoom to geolocation position
-            const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);
+            const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);
             viewAnimationUtil.to(this.map.getView(), currentPosGeom);
           } else {
             console.error('The map is not defined in the getCurrentPosition callback');

src/components/maxextentbutton/ZoomToMaxExtentButton.vue

@@ -24,7 +24,7 @@ export default {
       // derive correct initial zoom and center
       const initialCenter = this.$appConfig.mapCenter;
       const initalZoom = this.$appConfig.mapZoom;
-      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);
+      const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);
       viewAnimationUtil.to(this.map.getView(), initialCenter, null, {
         zoom: initalZoom,
         maxZoom: initalZoom

src/components/ol/Map.vue

@@ -335,7 +335,7 @@ export default {
         ddSource.addFeatures(event.features);
 
         if (mapDdConf.zoomToData === true) {
-          const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);
+          const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);
           viewAnimationUtil.to(this.map.getView(), ddSource.getExtent());
         }
       }, this);

src/util/Layer.js

@@ -44,14 +44,14 @@ const LayerUtil = {
    *
    * @param  {ol.layer.Base} vecLayer OL vector layer
    * @param  {ol.Map} olMap           The map to perform the zoom on
-   * @param {Object} appConfig        The application config containing optional animation configuration
+   * @param {Object} options          Optional animation configuration
    */
-  zoomToLayerExtent (vecLayer, olMap, appConfig) {
+  zoomToLayerExtent (vecLayer, olMap, options) {
     if (!vecLayer || !vecLayer.getSource().getExtent || !olMap) {
       return;
     }
     const extent = vecLayer.getSource().getExtent();
-    const viewAnimationUtil = new ViewAnimationUtil(appConfig);
+    const viewAnimationUtil = new ViewAnimationUtil(options);
     viewAnimationUtil.to(olMap.getView(), extent);
   }
 }

src/util/ViewAnimation.js

@@ -8,11 +8,12 @@ import Geometry from 'ol/geom/Geometry';
  */
 class ViewAnimationUtil {
   /**
-   * Instantiates a view animation util object with current application configuration.
-   * @param {Object} appConfig  Current application configuration
+   * Instantiates a view animation util object with the animation object
+   * configured in the application context.
+   * @param {Object} options  Application wide animation options.
    */
-  constructor (appConfig) {
-    this.appConfig = appConfig
+  constructor (options) {
+    this.options = options;
   }
 
   /**
@@ -29,7 +30,7 @@ class ViewAnimationUtil {
       default: NoAnimation
     };
 
-    const animType = this.appConfig?.viewAnimation?.type;
+    const animType = this.options?.type;
     return animations[animType] || animations.default;
   }
 
@@ -42,7 +43,7 @@ class ViewAnimationUtil {
    * @private
    */
   getOptions (options) {
-    return options || this.appConfig?.viewAnimation?.options || {};
+    return options || this.options?.options || {};
   }
 
   /**

tests/unit/specs/components/geocoder/Geocoder.spec.js

@@ -11,8 +11,16 @@ import { getTransform } from 'ol/proj';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 
-function createWrapper (options = {}) {
-  return mount(Geocoder, options);
+function createWrapper (props = {}, $appConfig = {}) {
+  return mount(Geocoder, {
+    props,
+    attachTo: document.body,
+    global: {
+      mocks: {
+        $appConfig
+      }
+    }
+  });
 }
 
 describe('geocoder/Geocoder.vue', () => {
@@ -96,7 +104,7 @@ describe('geocoder/Geocoder.vue', () => {
         provider: 'photon'
       };
 
-      comp = createWrapper({ props: moduleProps });
+      comp = createWrapper(moduleProps);
       vm = comp.vm;
     });
 
@@ -123,7 +131,7 @@ describe('geocoder/Geocoder.vue', () => {
         provider: 'opencage'
       };
 
-      comp = createWrapper({ props: moduleProps });
+      comp = createWrapper(moduleProps);
       vm = comp.vm;
     });
 
@@ -149,7 +157,7 @@ describe('geocoder/Geocoder.vue', () => {
           maxWidth: 100
         };
 
-        comp = createWrapper({ props: moduleProps });
+        comp = createWrapper(moduleProps);
         vm = comp.vm;
       });
 
@@ -176,7 +184,7 @@ describe('geocoder/Geocoder.vue', () => {
           maxWidth: 100
         };
 
-        comp = createWrapper({ props: moduleProps });
+        comp = createWrapper(moduleProps);
         vm = comp.vm;
       });
 
@@ -262,7 +270,7 @@ describe('geocoder/Geocoder.vue', () => {
         provider: 'osm'
       };
 
-      comp = createWrapper({ props: moduleProps });
+      comp = createWrapper(moduleProps);
       vm = comp.vm;
 
       onQueryResultsSpy = sinon.replace(vm, 'onQueryResults', sinon.fake(vm.onQueryResults));
@@ -373,7 +381,7 @@ describe('geocoder/Geocoder.vue', () => {
 
   describe('user interactions for search activation', () => {
     beforeEach(() => {
-      comp = createWrapper({ attachTo: document.body });
+      comp = createWrapper();
       vm = comp.vm;
     });
 

tests/unit/specs/util/ViewAnimation.spec.js

@@ -19,11 +19,11 @@ const extent = [966000, 6341000, 967000, 6342000];
 const coordinate = [966000, 6341000];
 
 function createViewAnimationUtil (animType) {
-  const $appConfig = {
-    viewAnimation: { type: animType, options }
+  const animOptions = {
+    type: animType, options
   };
 
-  return new ViewAnimationUtil($appConfig);
+  return new ViewAnimationUtil(animOptions);
 }
 
 describe('ViewAnimationUtil', () => {

upgrade-notes.md

@@ -31,7 +31,7 @@ Some changes must be done if you were using those functions directly inside your
   > `ViewAnimationUtil.to(this.map.getView(), foundFeature.getGeometry());`
 
   Should be replaced by:
-  > const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig);  
+  > const viewAnimationUtil = new ViewAnimationUtil(this.$appConfig.viewAnimation);  
   viewAnimationUtil.to(this.map.getView(), foundFeature.getGeometry());
 - `Vue` instances can no longer be used to create an *event bus*. `WguEventBus` was rewritten to make use of `tiny-emitter` because of that. This should be fully transparent, however, some edge cases could be encountered if very specific usage is made of it.
 - `ColorTheme mixin` and `Mapable mixin` were rewritten as `composables`. What should be done to migrate those `mixins` to their `composable` counterparts is easier to see by example. Please take a look at the [ThemeSwitcher component](https://github.com/wegue-oss/wegue/blob/master/src/components/themeswitcher/ThemeSwitcher.vue) and the [BackgroundLayerSwitcher component](https://github.com/wegue-oss/wegue/blob/master/src/components/bglayerswitcher/BgLayerSwitcher.vue) respectively.