muntadas-app/src/components/mixins.js

// https://forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/5
export default {
  methods: {
    deg2rad (deg) {
      return deg * (Math.PI / 180)
    },
    rad2deg (rad) {
      return rad * (180 / Math.PI)
    },
    createBuildingTitleCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
      console.log('createLabelCanvas', text)
      const size = fontsize
      const borderSize = 5
      let lines = text.split('\n')
      const ctx = document.createElement('canvas').getContext('2d')
      const font = `${size}px bold noto_sans,sans-serif`
      ctx.font = font
      // measure how long the name will be
      const doubleBorderSize = borderSize * 2
      let width = 0
      for (var i = 0; i < lines.length; i++) {
        width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
      }
      const height = size * lines.length + doubleBorderSize
      this.label_size = { x: width / sizefactore, y: height / sizefactore }
      ctx.canvas.width = width
      ctx.canvas.height = height

      // need to set font again after resizing canvas
      ctx.font = font
      ctx.textBaseline = 'top'

      if (bgcolor) {
        ctx.fillStyle = bgcolor
        ctx.fillRect(0, 0, width, height)
      }
      ctx.fillStyle = txtcolor
      for (var j = 0; j < lines.length; j++) {
        ctx.fillText(lines[j], borderSize, borderSize + j * size)
      }
      // console.log('createLabelCanvas', ctx)
      return ctx.canvas
    },
    createLabelCanvas (text, fontsize, sizefactore, txtcolor, bgcolor) {
      console.log('createLabelCanvas', text)
      const size = fontsize
      const borderSize = 5
      let lines = text.split(':')
      const ctx = document.createElement('canvas').getContext('2d')
      const font = `${size}px bold noto_sans,sans-serif`
      ctx.font = font
      // measure how long the name will be
      const doubleBorderSize = borderSize * 2
      let width = 0
      for (var i = 0; i < lines.length; i++) {
        width = Math.max(width, ctx.measureText(lines[i]).width + doubleBorderSize)
      }
      const height = size * lines.length + doubleBorderSize
      this.label_size = { x: width / sizefactore, y: height / sizefactore }
      ctx.canvas.width = width
      ctx.canvas.height = height

      // need to set font again after resizing canvas
      ctx.font = font
      ctx.textBaseline = 'top'

      if (bgcolor) {
        ctx.fillStyle = bgcolor
        ctx.fillRect(0, 0, width, height)
      }
      ctx.fillStyle = txtcolor
      for (var j = 0; j < lines.length; j++) {
        ctx.fillText(lines[j], borderSize, borderSize + j * size)
      }
      // console.log('createLabelCanvas', ctx)
      return ctx.canvas
    },
    createImgCanvas (src) {
      // let vnode = this
      return new Promise((resolve, reject) => {
        var img = new Image()
        // XSS resolution
        // https://www.html5gamedevs.com/topic/31184-solved-cors-problem-with-dynamictexture-on-some-servers-tainted-canvas/
        img.crossOrigin = 'Anonymous'
        img.src = src
        img.onload = function () {
          // console.log('img loaded', this)
          const ctx = document.createElement('canvas').getContext('2d')
          ctx.canvas.width = this.width
          ctx.canvas.height = this.height
          ctx.fillStyle = 'red'
          // ctx.fillRect(0, 0, this.width, this.height)
          ctx.drawImage(this, 0, 0, this.width, this.height)
          resolve({ img: this, canvas: ctx.canvas })
        }
        img.onerror = function () {
          reject(src)
        }
      })
    }
    // createGradientCanvas (c1, c2) {
    //   var ctx = document.createElement('canvas').getContext('2d')
    //   ctx.canvas.width = 1024
    //   ctx.canvas.height = 1024
    //   var lingrad = ctx.createLinearGradient(0, 0, 0, 1024)
    //   lingrad.addColorStop(0, c1)
    //   lingrad.addColorStop(1, c2)
    //   ctx.fillStyle = lingrad
    //   ctx.fillRect(0, 0, 1024, 1024)
    //   return ctx.canvas
    // }
    // ,
    // /**
    //  * Converts an HSL color value to RGB. Conversion formula
    //  * adapted from http://en.wikipedia.org/wiki/HSL_color_space.
    //  * Assumes h, s, and l are contained in the set [0, 1] and
    //  * returns r, g, and b in the set [0, 255].
    //  *
    //  * @param   {number}  h       The hue
    //  * @param   {number}  s       The saturation
    //  * @param   {number}  l       The lightness
    //  * @return  {Array}           The RGB representation
    //  */
    // hslToRgb (h, s, l) {
    //   var r, g, b
    //
    //   if (s === 0) {
    //     r = g = b = l // achromatic
    //   } else {
    //     var hue2rgb = function hue2rgb (p, q, t) {
    //       if (t < 0) t += 1
    //       if (t > 1) t -= 1
    //       if (t < 1 / 6) return p + (q - p) * 6 * t
    //       if (t < 1 / 2) return q
    //       if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6
    //       return p
    //     }
    //
    //     var q = l < 0.5 ? l * (1 + s) : l + s - l * s
    //     var p = 2 * l - q
    //     r = hue2rgb(p, q, h + 1 / 3)
    //     g = hue2rgb(p, q, h)
    //     b = hue2rgb(p, q, h - 1 / 3)
    //   }
    //
    //   return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)]
    // }
  }
}