From ea077c175fc6adf6e59c48c7eec359bf2a6f6268 Mon Sep 17 00:00:00 2001
From: Christian Mayer <chris@meggsimum.de>
Date: Tue, 24 Apr 2018 15:47:09 +0200
Subject: [PATCH] Introduce 'Mapable' mixin

This adds a mixin 'Mapable', which can be used to bind the OpenLayers
map instance to any component.
---
 src/components/layerlist/LayerList.vue    | 21 ++++++++-------------
 src/components/measuretool/MeasureWin.vue | 22 +++++++++-------------
 src/mixins/Mapable.js                     | 20 ++++++++++++++++++++
 3 files changed, 37 insertions(+), 26 deletions(-)
 create mode 100644 src/mixins/Mapable.js

diff --git a/src/components/layerlist/LayerList.vue b/src/components/layerlist/LayerList.vue
index 7906743f..7dd01b9c 100644
--- a/src/components/layerlist/LayerList.vue
+++ b/src/components/layerlist/LayerList.vue
@@ -24,14 +24,14 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
   import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { Mapable } from '../../mixins/Mapable';
 
   export default {
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -44,18 +44,13 @@
         top: '70px'
       }
     },
-    created () {
-      var me = this
-      // Listen to the ol-map-mounted event and receive the OL map instance
-      WguEventBus.$on('ol-map-mounted', function (olMap) {
-        // make the OL map accesible in this component
-        me.map = olMap;
-        // create the layer items from the OL map
-        me.createLayerItems();
-      });
-    },
     methods: {
-
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createLayerItems();
+      },
       /**
        * Creates the layer items from the OpenLayers map.
        */
diff --git a/src/components/measuretool/MeasureWin.vue b/src/components/measuretool/MeasureWin.vue
index fac39c51..ef1a63fe 100644
--- a/src/components/measuretool/MeasureWin.vue
+++ b/src/components/measuretool/MeasureWin.vue
@@ -37,9 +37,8 @@
 </template>
 
 <script>
-  // Import the EventBus
-  import { WguEventBus } from '../../WguEventBus.js'
-  import { DraggableWin } from '../../directives/DraggableWin.js';
+  import { DraggableWin } from '../../directives/DraggableWin';
+  import { Mapable } from '../../mixins/Mapable';
   import DrawInteraction from 'ol/interaction/draw'
   import LineStringGeom from 'ol/geom/linestring'
   import PolygonGeom from 'ol/geom/polygon'
@@ -56,6 +55,7 @@
     directives: {
       DraggableWin
     },
+    mixins: [Mapable],
     props: ['icon'],
     data () {
       return {
@@ -67,16 +67,6 @@
         top: '200px'
       }
     },
-    created () {
-      var me = this;
-      // Listen to the ol-map-mounted event and receive the OL map instance
-      WguEventBus.$on('ol-map-mounted', (olMap) => {
-        // make the OL map accesible in this component
-        me.map = olMap;
-
-        me.createMeasureLayer();
-      });
-    },
     watch: {
       show () {
         var me = this;
@@ -92,6 +82,12 @@
       }
     },
     methods: {
+      /**
+       * This function is executed, after the map is bound (see mixins/Mapable)
+       */
+      onMapBound () {
+        this.createMeasureLayer();
+      },
       /**
        * Creates a vector layer for the measurement results and adds it to the
        * map.
diff --git a/src/mixins/Mapable.js b/src/mixins/Mapable.js
new file mode 100644
index 00000000..cbbe7f69
--- /dev/null
+++ b/src/mixins/Mapable.js
@@ -0,0 +1,20 @@
+// import Vue from 'vue';
+
+import { WguEventBus } from '../WguEventBus.js'
+
+/**
+ * Mixin, which binds the OL map to the target component.
+ * Executes the onMapBound function of the target component, if available.
+ */
+export const Mapable = {
+  created: function () {
+    WguEventBus.$on('ol-map-mounted', (olMap) => {
+      // make the OL map accesible in this component
+      this.map = olMap;
+
+      if (this.onMapBound) {
+        this.onMapBound();
+      }
+    });
+  }
+};