Allow return single Style instance from style function

ghettovoice · Oct 3, 2019 · 42614ff · 42614ff
1 parent 02a16d1
commit 42614ff
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 113 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/component/style-func/style.vue b/src/component/style-func/style.vue
@@ -1,4 +1,5 @@
 <script>
+  import { Style } from 'ol/style'
   import { style, stylesContainer } from '../../mixin'
   import { hasMap } from '../../util/assert'
   import { warn } from '../../util/log'
@@ -10,115 +11,9 @@
    * Plays the role of both a style that mounts itself to style target component (vl-layer-vector, vl-feature & etc.)
    * and style target for inner style containers (vl-style-box) as fallback style.
    */
-
-  const props = {
-    /**
-     * @type {function(): function(feature: Feature): Style}
-     */
-    factory: {
-      type: Function,
-      required: true,
-    },
-  }
-
-  const computed = {
-    styleFunc () {
-      let func = this.factory()
-      if (!isFunction(func)) {
-        if (process.env.NODE_ENV !== 'production') {
-          warn(`Factory returned a value not of Function type, fallback style will be used`)
-        }
-        func = noop
-      }
-
-      return func
-    },
-  }
-
-  const methods = {
-    /**
-     * @return {function(feature: Feature): Style}
-     * @protected
-     */
-    createStyle () {
-      hasMap(this)
-      // user provided style function
-      const providedStyleFunc = this.styleFunc
-      // fallback style function made from inner style containers
-      const fallbackStyleFunc = this.createStyleFunc()
-
-      return function __styleFunc (feature, resolution) {
-        const styles = providedStyleFunc(feature, resolution)
-        // not empty or null style
-        if (
-          styles === null ||
-          (Array.isArray(styles) && styles.length)
-        ) {
-          return styles
-        }
-        return fallbackStyleFunc(feature, resolution)
-      }
-    },
-    /**
-     * @return {void}
-     * @protected
-     */
-    mount () {
-      this.$stylesContainer && this.$stylesContainer.addStyle(this)
-    },
-    /**
-     * @return {void}
-     * @protected
-     */
-    unmount () {
-      this.$stylesContainer && this.$stylesContainer.removeStyle(this)
-    },
-    /**
-     * @returns {Object}
-     * @protected
-     */
-    getServices () {
-      const vm = this
-
-      return mergeDescriptors(this::style.methods.getServices(), {
-        get stylesContainer () { return vm },
-      })
-    },
-    /**
-     * Overrides stylesContainer `setStyle` method
-     * @param {Array<{ style: Style, condition: (function|boolean|undefined) }>|function(feature: Feature): Style|Vue|undefined} styles
-     * @return {void}
-     */
-    setStyle (styles) {
-      if (styles !== this._styles) {
-        // simply save all inner styles and
-        // use them later in style function as fallback
-        this._styles = styles
-        this.scheduleRefresh()
-      }
-    },
-    /**
-     * @return {Promise}
-     */
-    refresh () {
-      // recreate style
-      return this.recreate()
-    },
-  }
-
-  const watch = {
-    factory () {
-      this.scheduleRefresh()
-    },
-  }
-
   export default {
     name: 'vl-style-func',
     mixins: [style, stylesContainer],
-    props,
-    computed,
-    methods,
-    watch,
     stubVNode: {
       empty: false,
       attrs () {
@@ -128,5 +23,103 @@
         }
       },
     },
+    props: {
+      /**
+       * @type {function(): function(feature: Feature): Style}
+       */
+      factory: {
+        type: Function,
+        required: true,
+      },
+    },
+    computed: {
+      styleFunc () {
+        let func = this.factory()
+        if (!isFunction(func)) {
+          if (process.env.NODE_ENV !== 'production') {
+            warn(`Factory returned a value not of Function type, fallback style will be used`)
+          }
+          func = noop
+        }
+
+        return func
+      },
+    },
+    methods: {
+      /**
+       * @return {function(feature: Feature): Style}
+       * @protected
+       */
+      createStyle () {
+        hasMap(this)
+        // user provided style function
+        const providedStyleFunc = this.styleFunc
+        // fallback style function made from inner style containers
+        const fallbackStyleFunc = this.createStyleFunc()
+
+        return function __styleFunc (feature, resolution) {
+          const styles = providedStyleFunc(feature, resolution)
+          // not empty or null style
+          if (
+            styles === null ||
+            (Array.isArray(styles) && styles.length) ||
+            styles instanceof Style
+          ) {
+            return styles
+          }
+          return fallbackStyleFunc(feature, resolution)
+        }
+      },
+      /**
+       * @return {void}
+       * @protected
+       */
+      mount () {
+        this.$stylesContainer && this.$stylesContainer.addStyle(this)
+      },
+      /**
+       * @return {void}
+       * @protected
+       */
+      unmount () {
+        this.$stylesContainer && this.$stylesContainer.removeStyle(this)
+      },
+      /**
+       * @returns {Object}
+       * @protected
+       */
+      getServices () {
+        const vm = this
+
+        return mergeDescriptors(this::style.methods.getServices(), {
+          get stylesContainer () { return vm },
+        })
+      },
+      /**
+       * Overrides stylesContainer `setStyle` method
+       * @param {Array<{ style: Style, condition: (function|boolean|undefined) }>|function(feature: Feature): Style|Vue|undefined} styles
+       * @return {void}
+       */
+      setStyle (styles) {
+        if (styles !== this._styles) {
+          // simply save all inner styles and
+          // use them later in style function as fallback
+          this._styles = styles
+          this.scheduleRefresh()
+        }
+      },
+      /**
+       * @return {Promise}
+       */
+      refresh () {
+        // recreate style
+        return this.recreate()
+      },
+    },
+    watch: {
+      factory () {
+        this.scheduleRefresh()
+      },
+    },
   }
 </script>
diff --git a/src/mixin/styles-container.js b/src/mixin/styles-container.js
@@ -1,4 +1,5 @@
 import Vue from 'vue'
+import { Style } from 'ol/style'
 import { warn } from '../util/log'
 import { isFunction, reduce } from '../util/minilo'
 
@@ -149,7 +150,8 @@ export default {
         // not empty or null style
         if (
           styles === null ||
-          (Array.isArray(styles) && styles.length)
+          (Array.isArray(styles) && styles.length) ||
+          styles instanceof Style
         ) {
           return styles
         }

diff --git a/test/app.vue b/test/app.vue
@@ -19,6 +19,7 @@
 
         <vl-layer-vector id="countries" render-mode="image">
           <vl-source-vector ident="countries-source" :features.sync="countries" :url="countriesUrl" />
+          <vl-style-func :factory="createCountriesStyleFunc" />
         </vl-layer-vector>
 
         <vl-layer-vector id="draw-target">
@@ -33,7 +34,7 @@
 </template>
 
 <script>
-  import { findPointOnSurface } from '../src/ol-ext'
+  import { findPointOnSurface, createStyle } from '../src/ol-ext'
 
   export default {
     name: 'app',
@@ -76,6 +77,14 @@
     },
     methods: {
       pointOnSurface: findPointOnSurface,
+      createCountriesStyleFunc () {
+        return () => {
+          return createStyle({
+            fillColor: 'rgba(0, 0, 0, 0.4)',
+            strokeColor: 'blue',
+          })
+        }
+      },
     },
     mounted () {
     },