fix errors related to debounced version of refresh, remount and `…

…recreate`

docs/_coverpage.md

@@ -2,7 +2,7 @@
 
 <img class="logo" src="/_media/logo.svg" data-origin="_media/logo.svg" alt="VueLayers Logo" />
 
-# VueLayers <small>v0.10.24</small>
+# VueLayers <small>v0.10.25</small>
 
 > Web map [Vue](https://vuejs.org/ "Vue Homepage") components with the power of [OpenLayers](https://openlayers.org/ "OpenLayers Homepage")
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuelayers",
   "fullname": "VueLayers",
-  "version": "0.10.24",
+  "version": "0.10.25",
   "description": "Web map Vue components with the power of OpenLayers",
   "author": "Vladimir Vershinin <ghettovoice@gmail.com>",
   "main": "lib/index.js",

src/component/style-func/style.vue

@@ -5,8 +5,6 @@
    * and style target for inner style containers (vl-style-box) as fallback style.
    * @module style-func/style
    */
-  import { first as firstObs, toPromise as obsToPromise } from 'rxjs/operator'
-  import { observableFromOlEvent } from '../../rx-ext'
   import style from '../../mixin/style'
   import stylesContainer from '../../mixin/styles-container'
   import { hasMap } from '../../util/assert'
@@ -104,20 +102,8 @@
      * @return {Promise}
      */
     refresh () {
-      if (this.$olObject == null) return Promise.resolve()
       // recreate style
       return this.recreate()
-        .then(() => {
-          if (!this.$map) {
-            return
-          }
-
-          this.$map.render()
-
-          return observableFromOlEvent(this.$map, 'postcompose')
-            ::firstObs()
-            ::obsToPromise()
-        })
     },
   }
 

src/component/vector-source/source.vue

@@ -1,9 +1,9 @@
 <script>
-  import { fetch } from 'whatwg-fetch'
   import VectorSource from 'ol/source/vector'
+  import { fetch } from 'whatwg-fetch'
   import vectorSource from '../../mixin/vector-source'
-  import { getFeatureId, createGeoJsonFmt, loadingAll, transform } from '../../ol-ext'
-  import { constant, stubArray, isFinite, isFunction, difference, isEmpty } from '../../util/minilo'
+  import { createGeoJsonFmt, getFeatureId, loadingAll, transform } from '../../ol-ext'
+  import { constant, difference, isEmpty, isFinite, isFunction, stubArray } from '../../util/minilo'
 
   const props = {
     /**
@@ -192,10 +192,16 @@
         credentials: 'same-origin',
         mode: 'cors',
       }).then(response => response.text())
-        .then(text => vm.$source.getFormat().readFeatures(text, {
-          featureProjection: vm.viewProjection,
-          dataProjection: vm.resolvedDataProjection,
-        }))
+        .then(text => {
+          if (!vm.$source) {
+            return []
+          }
+
+          return vm.$source.getFormat().readFeatures(text, {
+            featureProjection: vm.viewProjection,
+            dataProjection: vm.resolvedDataProjection,
+          })
+        })
     }
   }
 

src/mixin/features-container.js

@@ -105,7 +105,4 @@ const methods = {
 export default {
   mixins: [projTransforms],
   methods,
-  destroyed () {
-    this.clearFeatures()
-  },
 }

src/mixin/image-style.js

@@ -1,5 +1,3 @@
-import { first as firstObs, toPromise as obsToPromise } from 'rxjs/operator'
-import { observableFromOlEvent } from '../rx-ext'
 import { isEqual } from '../util/minilo'
 import style from './style'
 
@@ -50,20 +48,8 @@ const methods = {
    * @return {Promise}
    */
   refresh () {
-    if (this.$olObject == null) return Promise.resolve()
     // recreate style
     return this.recreate()
-      .then(() => {
-        if (!this.$map) {
-          return
-        }
-
-        this.$map.render()
-
-        return observableFromOlEvent(this.$map, 'postcompose')
-          ::firstObs()
-          ::obsToPromise()
-      })
   },
 }
 

src/mixin/ol-cmp.js

@@ -115,9 +115,6 @@ const methods = {
       }
     })
   },
-  scheduleRefresh: debounce(function () {
-    return this.refresh()
-  }, 10),
   /**
    * Internal usage only in components that doesn't support refreshing.
    * @return {Promise<void>}
@@ -129,9 +126,6 @@ const methods = {
     return Promise.resolve(this.unmount())
       .then(() => this.mount())
   },
-  scheduleRemount: debounce(function () {
-    return this.remount()
-  }, 10),
   /**
    * Only for internal purpose to support watching for properties
    * for which OpenLayers doesn't provide setters.
@@ -146,9 +140,6 @@ const methods = {
       .then(() => this.init())
       .then(() => this.mount())
   },
-  scheduleRecreate: debounce(function () {
-    return this.recreate()
-  }, 10),
 }
 
 /**
@@ -217,6 +208,19 @@ export default {
         get: () => this._mountPromise,
       },
     })
+
+    // bind debounced functions at runtime
+    // for each instance to avoid interfering between
+    // different instances
+    this.scheduleRefresh = debounce(function () {
+      return this.refresh()
+    }, 10)
+    this.scheduleRemount = debounce(function () {
+      return this.remount()
+    }, 10)
+    this.scheduleRecreate = debounce(function () {
+      return this.recreate()
+    }, 10)
   },
   mounted () {
     this.$createPromise.then(this.mount)

src/mixin/style.js

@@ -1,8 +1,6 @@
 /**
  * Basic style mixin.
  */
-import { first as firstObs, toPromise as obsToPromise } from 'rxjs/operator'
-import { observableFromOlEvent } from '../rx-ext'
 import mergeDescriptors from '../util/multi-merge-descriptors'
 import useMapCmp from './use-map-cmp'
 import cmp from './ol-virt-cmp'
@@ -52,20 +50,7 @@ const methods = {
    * @return {Promise}
    */
   refresh () {
-    if (this.$olObject == null) return Promise.resolve()
-
     return this.remount()
-      .then(() => {
-        if (!this.$map) {
-          return
-        }
-
-        this.$map.render()
-
-        return observableFromOlEvent(this.$map, 'postcompose')
-          ::firstObs()
-          ::obsToPromise()
-      })
   },
 }
 

src/mixin/vector-source.js

@@ -38,8 +38,8 @@ const methods = {
    * @protected
    */
   getFeaturesTarget () {
-    if (this._featuresTarget == null) {
-      this._featuresTarget = new SourceCollectionAdapter(/** @type {ol.source.Vector} */this.$source)
+    if (this._featuresTarget == null && this.$source) {
+      this._featuresTarget = new SourceCollectionAdapter(this.$source)
     }
 
     return this._featuresTarget
@@ -80,6 +80,7 @@ const methods = {
    * @protected
    */
   unmount () {
+    this.clear()
     this::source.methods.unmount()
   },
   /**

test/app.vue

@@ -3,6 +3,8 @@
     <div style="height: 100%">
       <div style="position: absolute; text-align: center; top: 0; left: 0; right: 0; z-index: 100">
         <button @click="graticule = !graticule">Graticule</button>
+        <button @click="drawType = 'Polygon'">Draw polygon</button>
+        <button @click="drawType = undefined">Stop draw</button>
       </div>
 
       <vl-map v-if="showMap" ref="map" data-projection="EPSG:4326">
@@ -22,6 +24,38 @@
         <vl-layer-tile id="sputnik">
           <vl-source-stamen layer="toner-lite"/>
         </vl-layer-tile>
+
+        <vl-interaction-select :features.sync="selectedFeatures">
+          <vl-style-box>
+            <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>
+            <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>
+            <vl-style-circle :radius="5">
+              <vl-style-stroke color="#423e9e" :width="7"></vl-style-stroke>
+              <vl-style-fill :color="[254, 178, 76, 0.7]"></vl-style-fill>
+            </vl-style-circle>
+          </vl-style-box>
+          <vl-style-box :z-index="1">
+            <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>
+            <vl-style-circle :radius="5">
+              <vl-style-stroke color="#d43f45" :width="2"></vl-style-stroke>
+            </vl-style-circle>
+          </vl-style-box>
+        </vl-interaction-select>
+
+        <vl-layer-vector id="countries">
+          <vl-source-vector url="https://openlayers.org/en/latest/examples/data/geojson/countries.geojson"></vl-source-vector>
+
+          <vl-style-box>
+            <vl-style-fill :color="[255, 255, 255, 0.5]"></vl-style-fill>
+            <vl-style-stroke color="#219e46" :width="2"></vl-style-stroke>
+          </vl-style-box>
+        </vl-layer-vector>
+
+        <vl-layer-vector id="draw-pane" v-if="drawType != null">
+          <vl-source-vector ident="draw-target" :features.sync="drawnFeatures"></vl-source-vector>
+        </vl-layer-vector>
+
+        <vl-interaction-draw v-if="drawType != null" source="draw-target" :type="drawType"></vl-interaction-draw>
       </vl-map>
     </div>
   </div>