createTextStyle: enhance font style definition

fix #277

src/ol-ext/style.js

@@ -9,7 +9,7 @@ import Text from 'ol/style/Text'
 import parseColor from 'parse-color'
 import uuid from 'uuid/v4'
 import Vue from 'vue'
-import { isFunction, isNumeric, lowerFirst, pick, reduce, upperFirst } from '../util/minilo'
+import { isFunction, isNumeric, isNumber, lowerFirst, pick, reduce, upperFirst } from '../util/minilo'
 import { GEOMETRY_TYPE } from './consts'
 import * as geomHelper from './geom'
 
@@ -321,16 +321,19 @@ export function createImageStyle (vlStyle) {
  * @returns {Text|undefined}
  */
 export function createTextStyle (vlStyle) {
-  // noinspection JSValidateTypes
   if (vlStyle.text == null) return
   if (vlStyle.text instanceof Text) return vlStyle.text
 
   const textStyle = {
     text: vlStyle.text,
   }
 
-  let fontSize = vlStyle.textFontSize ? vlStyle.textFontSize + 'px' : undefined
-  let font = ['normal', fontSize, vlStyle.textFont].filter(x => !!x).join(' ')
+  let fontSize = '10px'
+  if (vlStyle.textFontSize) {
+    fontSize = isNumber(vlStyle.textFontSize) ? vlStyle.textFontSize + 'px' : vlStyle.textFontSize
+  }
+  let fontName = vlStyle.textFont || 'sans-serif'
+  const font = [vlStyle.textFontWeight, fontSize, fontName].filter(x => !!x).join(' ')
 
   Object.assign(
     textStyle,
@@ -396,7 +399,8 @@ export function createGeomStyle (vlStyle) {
  * Text only
  * @property {string|Text|undefined} text
  * @property {string|undefined} textFont
- * @property {number|undefined} textFontSize
+ * @property {number|string|undefined} textFontSize
+ * @property {string|undefined} textFontWeight
  * @property {string|number[]|undefined} textFillColor
  * @property {string|number[]|undefined} textStrokeColor
  * @property {number|undefined} textStrokeWidth

test/unit/specs/ol-ext/style.spec.js

@@ -6,14 +6,38 @@ describe('ol style helper', () => {
   describe('normalizeColor', () => {
     it('should convert string representation to RGBA array', () => {
       expect(style.normalizeColor('#ffa500')).to.be.deep.equal([ 255, 165, 0, 1 ])
-      expect(style.normalizeColor('rgb(255, 165, 10)')).to.be.deep.equal([ 255, 165, 10, 1 ])
-      expect(style.normalizeColor('rgba(255, 165, 10, 0.5)')).to.be.deep.equal([ 255, 165, 10, 0.5 ])
+      expect(style.normalizeColor('rgb(255, 165, 10)')).to.be.deep.equal([255, 165, 10, 1])
+      expect(style.normalizeColor('rgba(255, 165, 10, 0.5)')).to.be.deep.equal([255, 165, 10, 0.5])
     })
 
     it('should leave array representation as is', () => {
-      const color = [ 123, 200, 100 ]
+      const color = [123, 200, 100]
 
       expect(style.normalizeColor(color)).to.be.deep.equal(color)
     })
   })
+
+  describe('createTextStyle', () => {
+    /** @var ts {ol/style/Text~Text} */
+    let ts
+
+    it('should create default style', () => {
+      ts = style.createTextStyle({
+        text: 'qwerty',
+      })
+      expect(ts.getText()).to.be.equal('qwerty')
+      expect(ts.getFont()).to.be.equal('10px sans-serif')
+    })
+
+    it('should allow font styling', () => {
+      ts = style.createTextStyle({
+        text: 'qwerty',
+        textFontWeight: 'bold',
+        textFontSize: '1.5em',
+        textFont: 'Arial, sans-serif',
+      })
+      expect(ts.getText()).to.be.equal('qwerty')
+      expect(ts.getFont()).to.be.equal('bold 1.5em Arial, sans-serif')
+    })
+  })
 })