text: /*!
   * wordcloud2.js
   * http://timdream.org/wordcloud2.js/
   *
   * Copyright 2011 - 2019 Tim Guan-tin Chien and contributors.
   * Released under the MIT license
   */
  
  'use strict'
  
  // setImmediate
  if (!window.setImmediate) {
      window.setImmediate = (function setupSetImmediate () {
          return window.msSetImmediate ||
              window.webkitSetImmediate ||
              window.mozSetImmediate ||
              window.oSetImmediate ||
              (function setupSetZeroTimeout () {
                  if (!window.postMessage || !window.addEventListener) {
                      return null
                  }
  
                  var callbacks = [undefined]
                  var message = 'zero-timeout-message'
  
                  // Like setTimeout, but only takes a function argument.  There's
                  // no time argument (always zero) and no arguments (you have to
                  // use a closure).
                  var setZeroTimeout = function setZeroTimeout (callback) {
                      var id = callbacks.length
                      callbacks.push(callback)
                      window.postMessage(message + id.toString(36), '*')
  
                      return id
                  }
  
                  window.addEventListener('message', function setZeroTimeoutMessage (evt) {
                      // Skipping checking event source, retarded IE confused this window
                      // object with another in the presence of iframe
                      if (typeof evt.data !== 'string' ||
                          evt.data.substr(0, message.length) !== message/* ||
              evt.source !== window */) {
                          return
                      }
  
                      evt.stopImmediatePropagation()
  
                      var id = parseInt(evt.data.substr(message.length), 36)
                      if (!callbacks[id]) {
                          return
                      }
  
                      callbacks[id]()
                      callbacks[id] = undefined
                  }, true)
  
                  /* specify clearImmediate() here since we need the scope */
                  window.clearImmediate = function clearZeroTimeout (id) {
                      if (!callbacks[id]) {
                          return
                      }
  
                      callbacks[id] = undefined
                  }
  
                  return setZeroTimeout
              })() ||
              // fallback
              function setImmediateFallback (fn) {
                  window.setTimeout(fn, 0)
              }
      })()
  }
  
  if (!window.clearImmediate) {
      window.clearImmediate = (function setupClearImmediate () {
          return window.msClearImmediate ||
              window.webkitClearImmediate ||
              window.mozClearImmediate ||
              window.oClearImmediate ||
              // "clearZeroTimeout" is implement on the previous block ||
              // fallback
              function clearImmediateFallback (timer) {
                  window.clearTimeout(timer)
              }
      })()
  }
  
  (function (global) {
      // Check if WordCloud can run on this browser
      var isSupported = (function isSupported () {
          var canvas = document.createElement('canvas')
          if (!canvas || !canvas.getContext) {
              return false
          }
  
          var ctx = canvas.getContext('2d')
          if (!ctx) {
              return false
          }
          if (!ctx.getImageData) {
              return false
          }
          if (!ctx.fillText) {
              return false
          }
  
          if (!Array.prototype.some) {
              return false
          }
          if (!Array.prototype.push) {
              return false
          }
  
          return true
      }())
  
      // Find out if the browser impose minium font size by
      // drawing small texts on a canvas and measure it's width.
      var minFontSize = (function getMinFontSize () {
          if (!isSupported) {
              return
          }
  
          var ctx = document.createElement('canvas').getContext('2d')
  
          // start from 20
          var size = 20
  
          // two sizes to measure
          var hanWidth, mWidth
  
          while (size) {
              ctx.font = size.toString(10) + 'px sans-serif'
              if ((ctx.measureText('\uFF37').width === hanWidth) &&
                  (ctx.measureText('m').width) === mWidth) {
                  return (size + 1)
              }
  
              hanWidth = ctx.measureText('\uFF37').width
              mWidth = ctx.measureText('m').width
  
              size--
          }
  
          return 0
      })()
  
      var getItemExtraData = function (item) {
          if (Array.isArray(item)) {
              var itemCopy = item.slice()
              // remove data we already have (word and weight)
              itemCopy.splice(0, 2)
              return itemCopy
          } else {
              return []
          }
      }
  
      // Based on http://jsfromhell.com/array/shuffle
      var shuffleArray = function shuffleArray (arr) {
          for (var j, x, i = arr.length; i;) {
              j = Math.floor(Math.random() * i)
              x = arr[--i]
              arr[i] = arr[j]
              arr[j] = x
          }
          return arr
      }
  
      var timer = {};
      var WordCloud = function WordCloud (elements, options) {
          if (!isSupported) {
              return
          }
  
          var timerId = Math.floor(Math.random() * Date.now())
  
          if (!Array.isArray(elements)) {
              elements = [elements]
          }
  
          elements.forEach(function (el, i) {
              if (typeof el === 'string') {
                  elements[i] = document.getElementById(el)
                  if (!elements[i]) {
                      throw new Error('The element id specified is not found.')
                  }
              } else if (!el.tagName && !el.appendChild) {
                  throw new Error('You must pass valid HTML elements, or ID of the element.')
              }
          })
  
          /* Default values to be overwritten by options object */
          var settings = {
              list: [],
              fontFamily: '"Trebuchet MS", "Heiti TC", "微軟正黑體", ' +
                  '"Arial Unicode MS", "Droid Fallback Sans", sans-serif',
              fontWeight: 'normal',
              color: 'random-dark',
              minSize: 0, // 0 to disable
              weightFactor: 1,
              clearCanvas: true,
              backgroundColor: '#fff', // opaque white = rgba(255, 255, 255, 1)
  
              gridSize: 8,
              drawOutOfBound: false,
              shrinkToFit: false,
              origin: null,
  
              drawMask: false,
              maskColor: 'rgba(255,0,0,0.3)',
              maskGapWidth: 0.3,
  
              wait: 0,
              abortThreshold: 0, // disabled
              abort: function noop () {},
  
              minRotation: -Math.PI / 2,
              maxRotation: Math.PI / 2,
              rotationSteps: 0,
  
              shuffle: true,
              rotateRatio: 0.1,
  
              shape: 'circle',
              ellipticity: 0.65,
  
              classes: null,
  
              hover: null,
              click: null
          }
  
          if (options) {
              for (var key in options) {
                  if (key in settings) {
                      settings[key] = options[key]
                  }
              }
          }
  
          /* Convert weightFactor into a function */
          if (typeof settings.weightFactor !== 'function') {
              var factor = settings.weightFactor
              settings.weightFactor = function weightFactor (pt) {
                  return pt * factor // in px
              }
          }
  
          /* Convert shape into a function */
          if (typeof settings.shape !== 'function') {
              switch (settings.shape) {
                  case 'circle':
                  /* falls through */
                  default:
                      // 'circle' is the default and a shortcut in the code loop.
                      settings.shape = 'circle'
                      break
  
                  case 'cardioid':
                      settings.shape = function shapeCardioid (theta) {
                          return 1 - Math.sin(theta)
                      }
                      break
  
                  /*
                  To work out an X-gon, one has to calculate "m",
                  where 1/(cos(2*PI/X)+m*sin(2*PI/X)) = 1/(cos(0)+m*sin(0))
                  http://www.wolframalpha.com/input/?i=1%2F%28cos%282*PI%2FX%29%2Bm*sin%28
                  2*PI%2FX%29%29+%3D+1%2F%28cos%280%29%2Bm*sin%280%29%29
                  Copy the solution into polar equation r = 1/(cos(t') + m*sin(t'))
                  where t' equals to mod(t, 2PI/X)
                 */
  
                  case 'diamond':
                      // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
                      // %28t%2C+PI%2F2%29%29%2Bsin%28mod+%28t%2C+PI%2F2%29%29%29%2C+t+%3D
                      // +0+..+2*PI
                      settings.shape = function shapeSquare (theta) {
                          var thetaPrime = theta % (2 * Math.PI / 4)
                          return 1 / (Math.cos(thetaPrime) + Math.sin(thetaPrime))
                      }
                      break
  
                  case 'square':
                      // http://www.wolframalpha.com/input/?i=plot+r+%3D+min(1%2Fabs(cos(t
                      // )),1%2Fabs(sin(t)))),+t+%3D+0+..+2*PI
                      settings.shape = function shapeSquare (theta) {
                          return Math.min(
                              1 / Math.abs(Math.cos(theta)),
                              1 / Math.abs(Math.sin(theta))
                          )
                      }
                      break
  
                  case 'triangle-forward':
                      // http://www.wolframalpha.com/input/?i=plot+r+%3D+1%2F%28cos%28mod+
                      // %28t%2C+2*PI%2F3%29%29%2Bsqrt%283%29sin%28mod+%28t%2C+2*PI%2F3%29
                      // %29%29%2C+t+%3D+0+..+2*PI
                      settings.shape = function shapeTriangle (theta) {
                          var thetaPrime = theta % (2 * Math.PI / 3)
                          return 1 / (Math.cos(thetaPrime) +
                              Math.sqrt(3) * Math.sin(thetaPrime))
                      }
                      break
  
                  case 'triangle':
                  case 'triangle-upright':
                      settings.shape = function shapeTriangle (theta) {
                          var thetaPrime = (theta + Math.PI * 3 / 2) % (2 * Math.PI / 3)
                          return 1 / (Math.cos(thetaPrime) +
                              Math.sqrt(3) * Math.sin(thetaPrime))
                      }
                      break
  
                  case 'pentagon':
                      settings.shape = function shapePentagon (theta) {
                          var thetaPrime = (theta + 0.955) % (2 * Math.PI / 5)
                          return 1 / (Math.cos(thetaPrime) +
                              0.726543 * Math.sin(thetaPrime))
                      }
                      break
  
                  case 'star':
                      settings.shape = function shapeStar (theta) {
                          var thetaPrime = (theta + 0.955) % (2 * Math.PI / 10)
                          if ((theta + 0.955) % (2 * Math.PI / 5) - (2 * Math.PI / 10) >= 0) {
                              return 1 / (Math.cos((2 * Math.PI / 10) - thetaPrime) +
                                  3.07768 * Math.sin((2 * Math.PI / 10) - thetaPrime))
                          } else {
                              return 1 / (Math.cos(thetaPrime) +
                                  3.07768 * Math.sin(thetaPrime))
                          }
                      }
                      break
              }
          }
  
          /* Make sure gridSize is a whole number and is not smaller than 4px */
          settings.gridSize = Math.max(Math.floor(settings.gridSize), 4)
  
          /* shorthand */
          var g = settings.gridSize
          var maskRectWidth = g - settings.maskGapWidth
  
          /* normalize rotation settings */
          var rotationRange = Math.abs(settings.maxRotation - settings.minRotation)
          var rotationSteps = Math.abs(Math.floor(settings.rotationSteps))
          var minRotation = Math.min(settings.maxRotation, settings.minRotation)
  
          /* information/object available to all functions, set when start() */
          var grid, // 2d array containing filling information
              ngx, ngy, // width and height of the grid
              center, // position of the center of the cloud
              maxRadius
  
          /* timestamp for measuring each putWord() action */
          var escapeTime
  
          /* function for getting the color of the text */
          var getTextColor
          function randomHslColor (min, max) {
              return 'hsl(' +
                  (Math.random() * 360).toFixed() + ',' +
                  (Math.random() * 30 + 70).toFixed() + '%,' +
                  (Math.random() * (max - min) + min).toFixed() + '%)'
          }
          switch (settings.color) {
              case 'random-dark':
                  getTextColor = function getRandomDarkColor () {
                      return randomHslColor(10, 50)
                  }
                  break
  
              case 'random-light':
                  getTextColor = function getRandomLightColor () {
                      return randomHslColor(50, 90)
                  }
                  break
  
              default:
                  if (typeof settings.color === 'function') {
                      getTextColor = settings.color
                  }
                  break
          }
  
          /* function for getting the font-weight of the text */
          var getTextFontWeight
          if (typeof settings.fontWeight === 'function') {
              getTextFontWeight = settings.fontWeight
          }
  
          /* function for getting the classes of the text */
          var getTextClasses = null
          if (typeof settings.classes === 'function') {
              getTextClasses = settings.classes
          }
  
          /* Interactive */
          var interactive = false
          var infoGrid = []
          var hovered
  
          var getInfoGridFromMouseTouchEvent =
              function getInfoGridFromMouseTouchEvent (evt) {
                  var canvas = evt.currentTarget
                  var rect = canvas.getBoundingClientRect()
                  var clientX
                  var clientY
                  /** Detect if touches are available */
                  if (evt.touches) {
                      clientX = evt.touches[0].clientX
                      clientY = evt.touches[0].clientY
                  } else {
                      clientX = evt.clientX
                      clientY = evt.clientY
                  }
                  var eventX = clientX - rect.left
                  var eventY = clientY - rect.top
  
                  var x = Math.floor(eventX * ((canvas.width / rect.width) || 1) / g)
                  var y = Math.floor(eventY * ((canvas.height / rect.height) || 1) / g)
  
                  return infoGrid[x][y]
              }
  
          var wordcloudhover = function wordcloudhover (evt) {
              var info = getInfoGridFromMouseTouchEvent(evt)
  
              if (hovered === info) {
                  return
              }
  
              hovered = info
              if (!info) {
                  settings.hover(undefined, undefined, evt)
  
                  return
              }
  
              settings.hover(info.item, info.dimension, evt)
          }
  
          var wordcloudclick = function wordcloudclick (evt) {
              var info = getInfoGridFromMouseTouchEvent(evt)
              if (!info) {
                  return
              }
  
              settings.click(info.item, info.dimension, evt)
              evt.preventDefault()
          }
  
          /* Get points on the grid for a given radius away from the center */
          var pointsAtRadius = []
          var getPointsAtRadius = function getPointsAtRadius (radius) {
              if (pointsAtRadius[radius]) {
                  return pointsAtRadius[radius]
              }
  
              // Look for these number of points on each radius
              var T = radius * 8
  
              // Getting all the points at this radius
              var t = T
              var points = []
  
              if (radius === 0) {
                  points.push([center[0], center[1], 0])
              }
  
              while (t--) {
                  // distort the radius to put the cloud in shape
                  var rx = 1
                  if (settings.shape !== 'circle') {
                      rx = settings.shape(t / T * 2 * Math.PI) // 0 to 1
                  }
  
                  // Push [x, y, t] t is used solely for getTextColor()
                  points.push([
                      center[0] + radius * rx * Math.cos(-t / T * 2 * Math.PI),
                      center[1] + radius * rx * Math.sin(-t / T * 2 * Math.PI) *
                      settings.ellipticity,
                      t / T * 2 * Math.PI])
              }
  
              pointsAtRadius[radius] = points
              return points
          }
  
          /* Return true if we had spent too much time */
          var exceedTime = function exceedTime () {
              return ((settings.abortThreshold > 0) &&
                  ((new Date()).getTime() - escapeTime > settings.abortThreshold))
          }
  
          /* Get the deg of rotation according to settings, and luck. */
          var getRotateDeg = function getRotateDeg () {
              if (settings.rotateRatio === 0) {
                  return 0
              }
  
              if (Math.random() > settings.rotateRatio) {
                  return 0
              }
  
              if (rotationRange === 0) {
                  return minRotation
              }
  
              if (rotationSteps > 0) {
                  // Min rotation + zero or more steps * span of one step
                  return minRotation +
                      Math.floor(Math.random() * rotationSteps) *
                      rotationRange / (rotationSteps - 1)
              } else {
                  return minRotation + Math.random() * rotationRange
              }
          }
  
          var getTextInfo = function getTextInfo (word, weight, rotateDeg, extraDataArray) {
              // calculate the acutal font size
              // fontSize === 0 means weightFactor function wants the text skipped,
              // and size < minSize means we cannot draw the text.
              var debug = false
              var fontSize = settings.weightFactor(weight)
              if (fontSize <= settings.minSize) {
                  return false
              }
  
              // Scale factor here is to make sure fillText is not limited by
              // the minium font size set by browser.
              // It will always be 1 or 2n.
              var mu = 1
              if (fontSize < minFontSize) {
                  mu = (function calculateScaleFactor () {
                      var mu = 2
                      while (mu * fontSize < minFontSize) {
                          mu += 2
                      }
                      return mu
                  })()
              }
  
              // Get fontWeight that will be used to set fctx.font
              var fontWeight
              if (getTextFontWeight) {
                  fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray)
              } else {
                  fontWeight = settings.fontWeight
              }
  
              var fcanvas = document.createElement('canvas')
              var fctx = fcanvas.getContext('2d', { willReadFrequently: true })
  
              fctx.font = fontWeight + ' ' +
                  (fontSize * mu).toString(10) + 'px ' + settings.fontFamily
  
              // Estimate the dimension of the text with measureText().
              var fw = fctx.measureText(word).width / mu
              var fh = Math.max(fontSize * mu,
                  fctx.measureText('m').width,
                  fctx.measureText('\uFF37').width
              ) / mu
  
              // Create a boundary box that is larger than our estimates,
              // so text don't get cut of (it sill might)
              var boxWidth = fw + fh * 2
              var boxHeight = fh * 3
              var fgw = Math.ceil(boxWidth / g)
              var fgh = Math.ceil(boxHeight / g)
              boxWidth = fgw * g
              boxHeight = fgh * g
  
              // Calculate the proper offsets to make the text centered at
              // the preferred position.
  
              // This is simply half of the width.
              var fillTextOffsetX = -fw / 2
              // Instead of moving the box to the exact middle of the preferred
              // position, for Y-offset we move 0.4 instead, so Latin alphabets look
              // vertical centered.
              var fillTextOffsetY = -fh * 0.4
  
              // Calculate the actual dimension of the canvas, considering the rotation.
              var cgh = Math.ceil((boxWidth * Math.abs(Math.sin(rotateDeg)) +
                  boxHeight * Math.abs(Math.cos(rotateDeg))) / g)
              var cgw = Math.ceil((boxWidth * Math.abs(Math.cos(rotateDeg)) +
                  boxHeight * Math.abs(Math.sin(rotateDeg))) / g)
              var width = cgw * g
              var height = cgh * g
  
              fcanvas.setAttribute('width', width)
              fcanvas.setAttribute('height', height)
  
              if (debug) {
                  // Attach fcanvas to the DOM
                  document.body.appendChild(fcanvas)
                  // Save it's state so that we could restore and draw the grid correctly.
                  fctx.save()
              }
  
              // Scale the canvas with |mu|.
              fctx.scale(1 / mu, 1 / mu)
              fctx.translate(width * mu / 2, height * mu / 2)
              fctx.rotate(-rotateDeg)
  
              // Once the width/height is set, ctx info will be reset.
              // Set it again here.
              fctx.font = fontWeight + ' ' +
                  (fontSize * mu).toString(10) + 'px ' + settings.fontFamily
  
              // Fill the text into the fcanvas.
              // XXX: We cannot because textBaseline = 'top' here because
              // Firefox and Chrome uses different default line-height for canvas.
              // Please read https://bugzil.la/737852#c6.
              // Here, we use textBaseline = 'middle' and draw the text at exactly
              // 0.5 * fontSize lower.
              fctx.fillStyle = '#000'
              fctx.textBaseline = 'middle'
              fctx.fillText(
                  word, fillTextOffsetX * mu,
                  (fillTextOffsetY + fontSize * 0.5) * mu
              )
  
              // Get the pixels of the text
              var imageData = fctx.getImageData(0, 0, width, height).data
  
              if (exceedTime()) {
                  return false
              }
  
              if (debug) {
                  // Draw the box of the original estimation
                  fctx.strokeRect(
                      fillTextOffsetX * mu,
                      fillTextOffsetY, fw * mu, fh * mu
                  )
                  fctx.restore()
              }
  
              // Read the pixels and save the information to the occupied array
              var occupied = []
              var gx = cgw
              var gy, x, y
              var bounds = [cgh / 2, cgw / 2, cgh / 2, cgw / 2]
              while (gx--) {
                  gy = cgh
                  while (gy--) {
                      y = g
                      /* eslint no-labels: ["error", { "allowLoop": true }] */
                      singleGridLoop: while (y--) {
                          x = g
                          while (x--) {
                              if (imageData[((gy * g + y) * width +
                                  (gx * g + x)) * 4 + 3]) {
                                  occupied.push([gx, gy])
  
                                  if (gx < bounds[3]) {
                                      bounds[3] = gx
                                  }
                                  if (gx > bounds[1]) {
                                      bounds[1] = gx
                                  }
                                  if (gy < bounds[0]) {
                                      bounds[0] = gy
                                  }
                                  if (gy > bounds[2]) {
                                      bounds[2] = gy
                                  }
  
                                  if (debug) {
                                      fctx.fillStyle = 'rgba(255, 0, 0, 0.5)'
                                      fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5)
                                  }
                                  break singleGridLoop
                              }
                          }
                      }
                      if (debug) {
                          fctx.fillStyle = 'rgba(0, 0, 255, 0.5)'
                          fctx.fillRect(gx * g, gy * g, g - 0.5, g - 0.5)
                      }
                  }
              }
  
              if (debug) {
                  fctx.fillStyle = 'rgba(0, 255, 0, 0.5)'
                  fctx.fillRect(
                      bounds[3] * g,
                      bounds[0] * g,
                      (bounds[1] - bounds[3] + 1) * g,
                      (bounds[2] - bounds[0] + 1) * g
                  )
              }
  
              // Return information needed to create the text on the real canvas
              return {
                  mu: mu,
                  occupied: occupied,
                  bounds: bounds,
                  gw: cgw,
                  gh: cgh,
                  fillTextOffsetX: fillTextOffsetX,
                  fillTextOffsetY: fillTextOffsetY,
                  fillTextWidth: fw,
                  fillTextHeight: fh,
                  fontSize: fontSize
              }
          }
  
          /* Determine if there is room available in the given dimension */
          var canFitText = function canFitText (gx, gy, gw, gh, occupied) {
              // Go through the occupied points,
              // return false if the space is not available.
              var i = occupied.length
              while (i--) {
                  var px = gx + occupied[i][0]
                  var py = gy + occupied[i][1]
  
                  if (px >= ngx || py >= ngy || px < 0 || py < 0) {
                      if (!settings.drawOutOfBound) {
                          return false
                      }
                      continue
                  }
  
                  if (!grid[px][py]) {
                      return false
                  }
              }
              return true
          }
  
          /* Actually draw the text on the grid */
          var drawText = function drawText (gx, gy, info, word, weight, distance, theta, rotateDeg, attributes, extraDataArray) {
              var fontSize = info.fontSize
              var color
              if (getTextColor) {
                  color = getTextColor(word, weight, fontSize, distance, theta, extraDataArray)
              } else {
                  color = settings.color
              }
  
              // get fontWeight that will be used to set ctx.font and font style rule
              var fontWeight
              if (getTextFontWeight) {
                  fontWeight = getTextFontWeight(word, weight, fontSize, extraDataArray)
              } else {
                  fontWeight = settings.fontWeight
              }
  
              var classes
              if (getTextClasses) {
                  classes = getTextClasses(word, weight, fontSize, extraDataArray)
              } else {
                  classes = settings.classes
              }
  
              elements.forEach(function (el) {
                  if (el.getContext) {
                      var ctx = el.getContext('2d')
                      var mu = info.mu
  
                      // Save the current state before messing it
                      ctx.save()
                      ctx.scale(1 / mu, 1 / mu)
  
                      ctx.font = fontWeight + ' ' +
                          (fontSize * mu).toString(10) + 'px ' + settings.fontFamily
                      ctx.fillStyle = color
  
                      // Translate the canvas position to the origin coordinate of where
                      // the text should be put.
                      ctx.translate(
                          (gx + info.gw / 2) * g * mu,
                          (gy + info.gh / 2) * g * mu
                      )
  
                      if (rotateDeg !== 0) {
                          ctx.rotate(-rotateDeg)
                      }
  
                      // Finally, fill the text.
  
                      // XXX: We cannot because textBaseline = 'top' here because
                      // Firefox and Chrome uses different default line-height for canvas.
                      // Please read https://bugzil.la/737852#c6.
                      // Here, we use textBaseline = 'middle' and draw the text at exactly
                      // 0.5 * fontSize lower.
                      ctx.textBaseline = 'middle'
                      ctx.fillText(
                          word, info.fillTextOffsetX * mu,
                          (info.fillTextOffsetY + fontSize * 0.5) * mu
                      )
  
                      // The below box is always matches how <span>s are positioned
                      /* ctx.strokeRect(info.fillTextOffsetX, info.fillTextOffsetY,
                        info.fillTextWidth, info.fillTextHeight) */
  
                      // Restore the state.
                      ctx.restore()
                  } else {
                      // drawText on DIV element
                      var span = document.createElement('span')
                      var transformRule = ''
                      transformRule = 'rotate(' + (-rotateDeg / Math.PI * 180) + 'deg) '
                      if (info.mu !== 1) {
                          transformRule +=
                              'translateX(-' + (info.fillTextWidth / 4) + 'px) ' +
                              'scale(' + (1 / info.mu) + ')'
                      }
                      var styleRules = {
                          position: 'absolute',
                          display: 'block',
                          font: fontWeight + ' ' +
                              (fontSize * info.mu) + 'px ' + settings.fontFamily,
                          left: ((gx + info.gw / 2) * g + info.fillTextOffsetX) + 'px',
                          top: ((gy + info.gh / 2) * g + info.fillTextOffsetY) + 'px',
                          width: info.fillTextWidth + 'px',
                          height: info.fillTextHeight + 'px',
                          lineHeight: fontSize + 'px',
                          whiteSpace: 'nowrap',
                          transform: transformRule,
                          webkitTransform: transformRule,
                          msTransform: transformRule,
                          transformOrigin: '50% 40%',
                          webkitTransformOrigin: '50% 40%',
                          msTransformOrigin: '50% 40%'
                      }
                      if (color) {
                          styleRules.color = color
                      }
                      span.textContent = word
                      for (var cssProp in styleRules) {
                          span.style[cssProp] = styleRules[cssProp]
                      }
                      if (attributes) {
                          for (var attribute in attributes) {
                              span.setAttribute(attribute, attributes[attribute])
                          }
                      }
                      if (classes) {
                          span.className += classes
                      }
                      el.appendChild(span)
                  }
              })
          }
  
          /* Help function to updateGrid */
          var fillGridAt = function fillGridAt (x, y, drawMask, dimension, item) {
              if (x >= ngx || y >= ngy || x < 0 || y < 0) {
                  return
              }
  
              grid[x][y] = false
  
              if (drawMask) {
                  var ctx = elements[0].getContext('2d')
                  ctx.fillRect(x * g, y * g, maskRectWidth, maskRectWidth)
              }
  
              if (interactive) {
                  infoGrid[x][y] = { item: item, dimension: dimension }
              }
          }
  
          /* Update the filling information of the given space with occupied points.
             Draw the mask on the canvas if necessary. */
          var updateGrid = function updateGrid (gx, gy, gw, gh, info, item) {
              var occupied = info.occupied
              var drawMask = settings.drawMask
              var ctx
              if (drawMask) {
                  ctx = elements[0].getContext('2d')
                  ctx.save()
                  ctx.fillStyle = settings.maskColor
              }
  
              var dimension
              if (interactive) {
                  var bounds = info.bounds
                  dimension = {
                      x: (gx + bounds[3]) * g,
                      y: (gy + bounds[0]) * g,
                      w: (bounds[1] - bounds[3] + 1) * g,
                      h: (bounds[2] - bounds[0] + 1) * g
                  }
              }
  
              var i = occupied.length
              while (i--) {
                  var px = gx + occupied[i][0]
                  var py = gy + occupied[i][1]
  
                  if (px >= ngx || py >= ngy || px < 0 || py < 0) {
                      continue
                  }
  
                  fillGridAt(px, py, drawMask, dimension, item)
              }
  
              if (drawMask) {
                  ctx.restore()
              }
          }
  
          /* putWord() processes each item on the list,
             calculate it's size and determine it's position, and actually
             put it on the canvas. */
          var putWord = function putWord (item) {
              var word, weight, attributes
              if (Array.isArray(item)) {
                  word = item[0]
                  weight = item[1]
              } else {
                  word = item.word
                  weight = item.weight
                  attributes = item.attributes
              }
              var rotateDeg = getRotateDeg()
  
              var extraDataArray = getItemExtraData(item)
  
              // get info needed to put the text onto the canvas
              var info = getTextInfo(word, weight, rotateDeg, extraDataArray)
  
              // not getting the info means we shouldn't be drawing this one.
              if (!info) {
                  return false
              }
  
              if (exceedTime()) {
                  return false
              }
  
              // If drawOutOfBound is set to false,
              // skip the loop if we have already know the bounding box of
              // word is larger than the canvas.
              if (!settings.drawOutOfBound && !settings.shrinkToFit) {
                  var bounds = info.bounds;
                  if ((bounds[1] - bounds[3] + 1) > ngx ||
                      (bounds[2] - bounds[0] + 1) > ngy) {
                      return false
                  }
              }
  
              // Determine the position to put the text by
              // start looking for the nearest points
              var r = maxRadius + 1
  
              var tryToPutWordAtPoint = function (gxy) {
                  var gx = Math.floor(gxy[0] - info.gw / 2)
                  var gy = Math.floor(gxy[1] - info.gh / 2)
                  var gw = info.gw
                  var gh = info.gh
  
                  // If we cannot fit the text at this position, return false
                  // and go to the next position.
                  if (!canFitText(gx, gy, gw, gh, info.occupied)) {
                      return false
                  }
  
                  // Actually put the text on the canvas
                  drawText(gx, gy, info, word, weight,
                      (maxRadius - r), gxy[2], rotateDeg, attributes, extraDataArray)
  
                  // Mark the spaces on the grid as filled
                  updateGrid(gx, gy, gw, gh, info, item)
  
                  // Return true so some() will stop and also return true.
                  return true
              }
  
              while (r--) {
                  var points = getPointsAtRadius(maxRadius - r)
  
                  if (settings.shuffle) {
                      points = [].concat(points)
                      shuffleArray(points)
                  }
  
                  // Try to fit the words by looking at each point.
                  // array.some() will stop and return true
                  // when putWordAtPoint() returns true.
                  // If all the points returns false, array.some() returns false.
                  var drawn = points.some(tryToPutWordAtPoint)
  
                  if (drawn) {
                      // leave putWord() and return true
                      return true
                  }
              }
              if (settings.shrinkToFit) {
                  if (Array.isArray(item)) {
                      item[1] = item[1] * 3 / 4
                  } else {
                      item.weight = item.weight * 3 / 4
                  }
                  return putWord(item)
              }
              // we tried all distances but text won't fit, return false
              return false
          }
  
          /* Send DOM event to all elements. Will stop sending event and return
             if the previous one is canceled (for cancelable events). */
          var sendEvent = function sendEvent (type, cancelable, details) {
              if (cancelable) {
                  return !elements.some(function (el) {
                      var event = new CustomEvent(type, {
                          detail: details || {}
                      })
                      return !el.dispatchEvent(event)
                  }, this)
              } else {
                  elements.forEach(function (el) {
                      var event = new CustomEvent(type, {
                          detail: details || {}
                      })
                      el.dispatchEvent(event)
                  }, this)
              }
          }
  
          /* Start drawing on a canvas */
          var start = function start () {
              // For dimensions, clearCanvas etc.,
              // we only care about the first element.
              var canvas = elements[0]
  
              if (canvas.getContext) {
                  ngx = Math.ceil(canvas.width / g)
                  ngy = Math.ceil(canvas.height / g)
              } else {
                  var rect = canvas.getBoundingClientRect()
                  ngx = Math.ceil(rect.width / g)
                  ngy = Math.ceil(rect.height / g)
              }
  
              // Sending a wordcloudstart event which cause the previous loop to stop.
              // Do nothing if the event is canceled.
              if (!sendEvent('wordcloudstart', true)) {
                  return
              }
  
              // Determine the center of the word cloud
              center = (settings.origin)
                  ? [settings.origin[0] / g, settings.origin[1] / g]
                  : [ngx / 2, ngy / 2]
  
              // Maxium radius to look for space
              maxRadius = Math.floor(Math.sqrt(ngx * ngx + ngy * ngy))
  
              /* Clear the canvas only if the clearCanvas is set,
                 if not, update the grid to the current canvas state */
              grid = []
  
              var gx, gy, i
              if (!canvas.getContext || settings.clearCanvas) {
                  elements.forEach(function (el) {
                      if (el.getContext) {
                          var ctx = el.getContext('2d')
                          ctx.fillStyle = settings.backgroundColor
                          ctx.clearRect(0, 0, ngx * (g + 1), ngy * (g + 1))
                          ctx.fillRect(0, 0, ngx * (g + 1), ngy * (g + 1))
                      } else {
                          el.textContent = ''
                          el.style.backgroundColor = settings.backgroundColor
                          el.style.position = 'relative'
                      }
                  })
  
                  /* fill the grid with empty state */
                  gx = ngx
                  while (gx--) {
                      grid[gx] = []
                      gy = ngy
                      while (gy--) {
                          grid[gx][gy] = true
                      }
                  }
              } else {
                  /* Determine bgPixel by creating
                     another canvas and fill the specified background color. */
                  var bctx = document.createElement('canvas').getContext('2d')
  
                  bctx.fillStyle = settings.backgroundColor
                  bctx.fillRect(0, 0, 1, 1)
                  var bgPixel = bctx.getImageData(0, 0, 1, 1).data
  
                  /* Read back the pixels of the canvas we got to tell which part of the
                     canvas is empty.
                     (no clearCanvas only works with a canvas, not divs) */
                  var imageData =
                      canvas.getContext('2d').getImageData(0, 0, ngx * g, ngy * g).data
  
                  gx = ngx
                  var x, y
                  while (gx--) {
                      grid[gx] = []
                      gy = ngy
                      while (gy--) {
                          y = g
                          /* eslint no-labels: ["error", { "allowLoop": true }] */
                          singleGridLoop: while (y--) {
                              x = g
                              while (x--) {
                                  i = 4
                                  while (i--) {
                                      if (imageData[((gy * g + y) * ngx * g +
                                          (gx * g + x)) * 4 + i] !== bgPixel[i]) {
                                          grid[gx][gy] = false
                                          break singleGridLoop
                                      }
                                  }
                              }
                          }
                          if (grid[gx][gy] !== false) {
                              grid[gx][gy] = true
                          }
                      }
                  }
  
                  imageData = bctx = bgPixel = undefined
              }
  
              // fill the infoGrid with empty state if we need it
              if (settings.hover || settings.click) {
                  interactive = true
  
                  /* fill the grid with empty state */
                  gx = ngx + 1
                  while (gx--) {
                      infoGrid[gx] = []
                  }
  
                  if (settings.hover) {
                      canvas.addEventListener('mousemove', wordcloudhover)
                  }
  
                  if (settings.click) {
                      canvas.addEventListener('click', wordcloudclick)
                      canvas.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)'
                  }
  
                  canvas.addEventListener('wordcloudstart', function stopInteraction () {
                      canvas.removeEventListener('wordcloudstart', stopInteraction)
                      canvas.removeEventListener('mousemove', wordcloudhover)
                      canvas.removeEventListener('click', wordcloudclick)
                      hovered = undefined
                  })
              }
  
              i = 0
              var loopingFunction, stoppingFunction
              if (settings.wait !== 0) {
                  loopingFunction = window.setTimeout
                  stoppingFunction = window.clearTimeout
              } else {
                  loopingFunction = window.setImmediate
                  stoppingFunction = window.clearImmediate
              }
  
              var addEventListener = function addEventListener (type, listener) {
                  elements.forEach(function (el) {
                      el.addEventListener(type, listener)
                  }, this)
              }
  
              var removeEventListener = function removeEventListener (type, listener) {
                  elements.forEach(function (el) {
                      el.removeEventListener(type, listener)
                  }, this)
              }
  
              var anotherWordCloudStart = function anotherWordCloudStart () {
                  removeEventListener('wordcloudstart', anotherWordCloudStart)
                  stoppingFunction(timer[timerId])
              }
  
              addEventListener('wordcloudstart', anotherWordCloudStart)
              timer[timerId] = loopingFunction(function loop () {
                  if (i >= settings.list.length) {
                      stoppingFunction(timer[timerId])
                      sendEvent('wordcloudstop', false)
                      removeEventListener('wordcloudstart', anotherWordCloudStart)
                      delete timer[timerId];
                      return
                  }
                  escapeTime = (new Date()).getTime()
                  var drawn = putWord(settings.list[i])
                  var canceled = !sendEvent('wordclouddrawn', true, {
                      item: settings.list[i],
                      drawn: drawn
                  })
                  if (exceedTime() || canceled) {
                      stoppingFunction(timer[timerId])
                      settings.abort()
                      sendEvent('wordcloudabort', false)
                      sendEvent('wordcloudstop', false)
                      removeEventListener('wordcloudstart', anotherWordCloudStart)
                      delete timer[timerId]
                      return
                  }
                  i++
                  timer[timerId] = loopingFunction(loop, settings.wait)
              }, settings.wait)
          }
  
          // All set, start the drawing
          start()
      }
  
      WordCloud.isSupported = isSupported
      WordCloud.minFontSize = minFontSize
      WordCloud.stop = function stop () {
          if (timer) {
              for (var timerId in timer) {
                  window.clearImmediate(timer[timerId])
              }
          }
      }
  
      // Expose the library as an AMD module
      if (typeof define === 'function' && define.amd) { // eslint-disable-line no-undef
          global.WordCloud = WordCloud
          define('wordcloud', [], function () { return WordCloud }) // eslint-disable-line no-undef
      } else if (typeof module !== 'undefined' && module.exports) { // eslint-disable-line no-undef
          module.exports = WordCloud // eslint-disable-line no-undef
      } else {
          global.WordCloud = WordCloud
      }
  })(this) // jshint ignore:line