Improve ol events transmitting

Let Vue update reactive properties before transmitting ol events.
So at the event time all computed properties (like source features)
should be already updated.

#132 #224 #225 #226

.gitignore

@@ -13,6 +13,34 @@
 # .nfs files are created when an open file is removed but is still being accessed
 .nfs*
 
+### macOS ###
+# General
+.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
 ### Node template
 node_modules
 # Logs
@@ -80,7 +108,7 @@ typings/
 # User-specific stuff:
 .idea/**/workspace.xml
 .idea/**/tasks.xml
-.idea/dictionaries
+#.idea/dictionaries
 
 # Sensitive or high-churn files:
 .idea/**/dataSources/

src/component/cluster-source/source.vue

@@ -1,11 +1,12 @@
 <script>
-  import { hasInnerSource } from 'util/assert'
+  import { hasSource } from 'util/assert'
   import { makeWatchers } from 'util/vue-helpers'
   import sourceContainer from '../../mixin/source-container'
   import vectorSource from '../../mixin/vector-source'
   import { createPointGeom, findPointOnSurface } from '../../ol-ext/geom'
   import mergeDescriptors from '../../util/multi-merge-descriptors'
   import SourceBuilder from './builder'
+  import { observableFromOlEvent } from '../../rx-ext'
 
   export default {
     name: 'vl-source-cluster',
@@ -117,6 +118,16 @@
   }
 
   function subscribeToSourceChanges () {
-    hasInnerSource(this)
+    hasSource(this)
+
+    const adds = observableFromOlEvent(this.$source, 'addfeature')
+    this.subscribeTo(adds, ({ feature }) => {
+      this.addFeature(feature)
+    })
+
+    const removes = observableFromOlEvent(this.$source, 'removefeature')
+    this.subscribeTo(removes, ({ feature }) => {
+      this.removeFeature(feature)
+    })
   }
 </script>

src/mixin/features-container.js

@@ -2,7 +2,7 @@ import Collection from 'ol/Collection'
 import Feature from 'ol/Feature'
 import Vue from 'vue'
 import { merge as mergeObs } from 'rxjs/observable'
-import { tap, debounceTime } from 'rxjs/operators'
+import { debounceTime } from 'rxjs/operators'
 import { getFeatureId, getObjectUid, initializeFeature, mergeFeatures } from '../ol-ext'
 import { instanceOf } from '../util/assert'
 import { forEach, isPlainObject } from '../util/minilo'
@@ -123,39 +123,39 @@ export default {
     this._featuresCollection = new Collection()
     this._featureSubs = {}
 
-    const add = observableFromOlEvent(this._featuresCollection, 'add')
-      .pipe(
-        tap(({ element }) => {
-          const elementUid = getObjectUid(element)
-          const propChanges = observableFromOlEvent(element, 'propertychange')
-          const otherChanges = observableFromOlEvent(element, 'change')
-          const featureChanges = mergeObs(propChanges, otherChanges).pipe(
-            debounceTime(1000 / 60)
-          )
-
-          this._featureSubs[elementUid] = this.subscribeTo(featureChanges, () => {
-            ++this.rev
-          })
-        })
+    const adds = observableFromOlEvent(this._featuresCollection, 'add')
+    this.subscribeTo(adds, ({ element }) => {
+      const elementUid = getObjectUid(element)
+      const propChanges = observableFromOlEvent(element, 'propertychange')
+      const otherChanges = observableFromOlEvent(element, 'change')
+      const featureChanges = mergeObs(propChanges, otherChanges).pipe(
+        debounceTime(1000 / 60)
       )
-    const remove = observableFromOlEvent(this._featuresCollection, 'remove')
-      .pipe(
-        tap(({ element }) => {
-          const elementUid = getObjectUid(element)
-          if (!this._featureSubs[elementUid]) {
-            return
-          }
 
-          this.unsubscribe(this._featureSubs[elementUid])
-          delete this._featureSubs[elementUid]
-        })
-      )
-    const events = mergeObs(add, remove)
+      this._featureSubs[elementUid] = this.subscribeTo(featureChanges, () => {
+        ++this.rev
+      })
 
-    this.subscribeTo(events, ({ type, element }) => {
       ++this.rev
 
-      this.$emit(type + ':feature', element)
+      this.$nextTick(() => {
+        this.$emit('add:feature', element)
+      })
+    })
+
+    const removes = observableFromOlEvent(this._featuresCollection, 'remove')
+    this.subscribeTo(removes, ({ element }) => {
+      const elementUid = getObjectUid(element)
+      if (this._featureSubs[elementUid]) {
+        this.unsubscribe(this._featureSubs[elementUid])
+        delete this._featureSubs[elementUid]
+      }
+
+      ++this.rev
+
+      this.$nextTick(() => {
+        this.$emit('remove:feature', element)
+      })
     })
   },
 }

src/mixin/geometry.js

@@ -293,7 +293,10 @@ function subscribeToGeomChanges () {
 
   this.subscribeTo(changes, ({ prop, value }) => {
     ++this.rev
-    this.$emit(`update:${prop}`, value)
+
+    this.$nextTick(() => {
+      this.$emit(`update:${prop}`, value)
+    })
   })
 }
 

src/mixin/image-source.js

@@ -65,5 +65,11 @@ function subscribeToSourceEvents () {
     'imageloadstart',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }

src/mixin/interactions-container.js

@@ -109,14 +109,15 @@ export default {
      */
     this._interactionsCollection = new Collection()
 
-    const add = observableFromOlEvent(this._interactionsCollection, 'add')
-    const remove = observableFromOlEvent(this._interactionsCollection, 'remove')
-    const events = mergeObs(add, remove)
+    const adds = observableFromOlEvent(this._interactionsCollection, 'add')
+    const removes = observableFromOlEvent(this._interactionsCollection, 'remove')
 
-    this.subscribeTo(events, ({ type, element }) => {
+    this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
       ++this.rev
 
-      this.$emit(type + ':interaction', element)
+      this.$nextTick(() => {
+        this.$emit(type + ':interaction', element)
+      })
     })
   },
 }

src/mixin/layer.js

@@ -276,5 +276,11 @@ function subscribeToLayerEvents () {
     'render',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }

src/mixin/layers-container.js

@@ -86,14 +86,15 @@ export default {
      */
     this._layersCollection = new Collection()
 
-    const add = observableFromOlEvent(this._layersCollection, 'add')
-    const remove = observableFromOlEvent(this._layersCollection, 'remove')
-    const events = mergeObs(add, remove)
+    const adds = observableFromOlEvent(this._layersCollection, 'add')
+    const removes = observableFromOlEvent(this._layersCollection, 'remove')
 
-    this.subscribeTo(events, ({ type, element }) => {
+    this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
       ++this.rev
 
-      this.$emit(type + ':layer', element)
+      this.$nextTick(() => {
+        this.$emit(type + ':layer', element)
+      })
     })
   },
 }

src/mixin/overlays-container.js

@@ -86,14 +86,15 @@ export default {
      */
     this._overlaysCollection = new Collection()
 
-    const add = observableFromOlEvent(this._overlaysCollection, 'add')
-    const remove = observableFromOlEvent(this._overlaysCollection, 'remove')
-    const events = mergeObs(add, remove)
+    const adds = observableFromOlEvent(this._overlaysCollection, 'add')
+    const removes = observableFromOlEvent(this._overlaysCollection, 'remove')
 
-    this.subscribeTo(events, ({ type, element }) => {
+    this.subscribeTo(mergeObs(adds, removes), ({ type, element }) => {
       ++this.rev
 
-      this.$emit(type + ':overlay', element)
+      this.$nextTick(() => {
+        this.$emit(type + ':overlay', element)
+      })
     })
   },
 }

src/mixin/tile-source.js

@@ -201,5 +201,11 @@ function subscribeToSourceEvents () {
     'tileloaderror',
   ])
 
-  this.subscribeTo(events, evt => this.$emit(evt.type, evt))
+  this.subscribeTo(events, evt => {
+    ++this.rev
+
+    this.$nextTick(() => {
+      this.$emit(evt.type, evt)
+    })
+  })
 }

src/mixin/vector-source.js

@@ -1,7 +1,4 @@
-import { merge as mergeObs } from 'rxjs/observable'
-import { debounceTime } from 'rxjs/operators'
-import { observableFromOlEvent } from '../rx-ext'
-import { hasSource } from '../util/assert'
+import debounce from 'debounce-promise'
 import mergeDescriptors from '../util/multi-merge-descriptors'
 import { makeWatchers } from '../util/vue-helpers'
 import featuresContainer from './features-container'
@@ -68,7 +65,6 @@ export default {
      */
     subscribeAll () {
       this::source.methods.subscribeAll()
-      this::subscribeToEvents()
     },
     /**
      * @param feature
@@ -93,6 +89,9 @@ export default {
     ], () => function () {
       return this.scheduleRecreate()
     }),
+    featuresDataProj: debounce(function (features) {
+      this.$emit('update:features', features)
+    }, 1000 / 60),
   },
   stubVNode: {
     empty: false,
@@ -104,15 +103,3 @@ export default {
     },
   },
 }
-
-function subscribeToEvents () {
-  hasSource(this)
-
-  const add = observableFromOlEvent(this.getFeaturesCollection(), 'add')
-  const remove = observableFromOlEvent(this.getFeaturesCollection(), 'remove')
-  const events = mergeObs(add, remove).pipe(debounceTime(1000 / 60))
-  // emit event to allow `sync` modifier
-  this.subscribeTo(events, () => {
-    this.$emit('update:features', this.featuresDataProj)
-  })
-}