update dependencies, apply new linter fixes

package.json

@@ -77,44 +77,44 @@
     "checkTests": "node spec/checkForAllTests.js"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/plugin-external-helpers": "^7.8.3",
-    "@babel/plugin-transform-classes": "^7.9.5",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/polyfill": "^7.8.7",
-    "@babel/preset-env": "^7.9.6",
-    "@babel/runtime": "^7.9.6",
-    "@babel/runtime-corejs3": "^7.9.6",
-    "@rollup/plugin-babel": "^5.0.0",
-    "@rollup/plugin-commonjs": "^11.1.0",
-    "@rollup/plugin-multi-entry": "^3.0.0",
-    "@rollup/plugin-node-resolve": "^7.1.3",
+    "@babel/core": "^7.12.10",
+    "@babel/plugin-external-helpers": "^7.12.1",
+    "@babel/plugin-transform-classes": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.10",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/runtime": "^7.12.5",
+    "@babel/runtime-corejs3": "^7.12.5",
+    "@rollup/plugin-babel": "^5.2.2",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-multi-entry": "^4.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
     "@target/custom-event-polyfill": "github:Adobe-Marketing-Cloud/custom-event-polyfill",
     "babel-eslint": "^10.1.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.8.2",
     "coveralls": "^3.1.0",
-    "eslint": "^7.0.0",
-    "eslint-config-standard": "^14.1.1",
-    "eslint-plugin-import": "^2.20.2",
+    "eslint": "^7.17.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-sort-class-members": "^1.7.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-sort-class-members": "^1.9.0",
+    "eslint-plugin-standard": "^5.0.0",
     "esm": "^3.2.25",
     "http-server": "^0.12.3",
-    "jasmine": "^3.5.0",
-    "jasmine-core": "^3.5.0",
-    "karma": "^5.0.5",
+    "jasmine": "^3.6.3",
+    "jasmine-core": "^3.6.0",
+    "karma": "^5.2.3",
     "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage": "^2.0.2",
-    "karma-firefox-launcher": "^1.3.0",
-    "karma-jasmine": "^3.1.1",
-    "karma-sauce-launcher": "^4.1.4",
-    "rollup": "^2.9.0",
-    "rollup-plugin-filesize": "^8.0.2",
-    "rollup-plugin-terser": "^5.3.0",
-    "typescript": "^3.8.3",
-    "yargs": "^15.3.1",
+    "karma-coverage": "^2.0.3",
+    "karma-firefox-launcher": "^2.1.0",
+    "karma-jasmine": "^4.0.1",
+    "karma-sauce-launcher": "^4.3.4",
+    "rollup": "^2.36.1",
+    "rollup-plugin-filesize": "^9.1.0",
+    "rollup-plugin-terser": "^7.0.2",
+    "typescript": "^4.1.3",
+    "yargs": "^16.2.0",
     "svgdom": "^0.1.8"
   },
   "browserslist": [

src/animation/Animator.js

@@ -11,7 +11,7 @@ const Animator = {
 
   frame (fn) {
     // Store the node
-    var node = Animator.frames.push({ run: fn })
+    const node = Animator.frames.push({ run: fn })
 
     // Request an animation frame if we don't have one
     if (Animator.nextDraw === null) {
@@ -26,10 +26,10 @@ const Animator = {
     delay = delay || 0
 
     // Work out when the event should fire
-    var time = Animator.timer().now() + delay
+    const time = Animator.timer().now() + delay
 
     // Add the timeout to the end of the queue
-    var node = Animator.timeouts.push({ run: fn, time: time })
+    const node = Animator.timeouts.push({ run: fn, time: time })
 
     // Request another animation frame if we need one
     if (Animator.nextDraw === null) {
@@ -41,7 +41,7 @@ const Animator = {
 
   immediate (fn) {
     // Add the immediate fn to the end of the queue
-    var node = Animator.immediates.push(fn)
+    const node = Animator.immediates.push(fn)
     // Request another animation frame if we need one
     if (Animator.nextDraw === null) {
       Animator.nextDraw = globals.window.requestAnimationFrame(Animator._draw)
@@ -65,8 +65,8 @@ const Animator = {
   _draw (now) {
     // Run all the timeouts we can run, if they are not ready yet, add them
     // to the end of the queue immediately! (bad timeouts!!! [sarcasm])
-    var nextTimeout = null
-    var lastTimeout = Animator.timeouts.last()
+    let nextTimeout = null
+    const lastTimeout = Animator.timeouts.last()
     while ((nextTimeout = Animator.timeouts.shift())) {
       // Run the timeout if its time, or push it to the end
       if (now >= nextTimeout.time) {
@@ -80,13 +80,13 @@ const Animator = {
     }
 
     // Run all of the animation frames
-    var nextFrame = null
-    var lastFrame = Animator.frames.last()
+    let nextFrame = null
+    const lastFrame = Animator.frames.last()
     while ((nextFrame !== lastFrame) && (nextFrame = Animator.frames.shift())) {
       nextFrame.run(now)
     }
 
-    var nextImmediate = null
+    let nextImmediate = null
     while ((nextImmediate = Animator.immediates.shift())) {
       nextImmediate()
     }

src/animation/Controller.js

@@ -140,15 +140,15 @@ export class Controller extends Stepper {
 
 function recalculate () {
   // Apply the default parameters
-  var duration = (this._duration || 500) / 1000
-  var overshoot = this._overshoot || 0
+  const duration = (this._duration || 500) / 1000
+  const overshoot = this._overshoot || 0
 
   // Calculate the PID natural response
-  var eps = 1e-10
-  var pi = Math.PI
-  var os = Math.log(overshoot / 100 + eps)
-  var zeta = -os / Math.sqrt(pi * pi + os * os)
-  var wn = 3.9 / (zeta * duration)
+  const eps = 1e-10
+  const pi = Math.PI
+  const os = Math.log(overshoot / 100 + eps)
+  const zeta = -os / Math.sqrt(pi * pi + os * os)
+  const wn = 3.9 / (zeta * duration)
 
   // Calculate the Spring values
   this.d = 2 * zeta * wn
@@ -173,11 +173,11 @@ export class Spring extends Controller {
     dt /= 1000
 
     // Get the previous velocity
-    var velocity = c.velocity || 0
+    const velocity = c.velocity || 0
 
     // Apply the control to get the new position and store it
-    var acceleration = -this.d * velocity - this.k * (current - target)
-    var newPosition = current
+    const acceleration = -this.d * velocity - this.k * (current - target)
+    const newPosition = current
       + velocity * dt
       + acceleration * dt * dt / 2
 
@@ -208,10 +208,10 @@ export class PID extends Controller {
     if (dt === Infinity) return target
     if (dt === 0) return current
 
-    var p = target - current
-    var i = (c.integral || 0) + p * dt
-    var d = (p - (c.error || 0)) / dt
-    var windup = this._windup
+    const p = target - current
+    let i = (c.integral || 0) + p * dt
+    const d = (p - (c.error || 0)) / dt
+    const windup = this._windup
 
     // antiwindup
     if (windup !== false) {

src/animation/Morphable.js

@@ -50,7 +50,7 @@ export default class Morphable {
   }
 
   at (pos) {
-    var _this = this
+    const _this = this
 
     return this._morphObj.fromArray(
       this._from.map(function (i, index) {
@@ -60,7 +60,7 @@ export default class Morphable {
   }
 
   done () {
-    var complete = this._context
+    const complete = this._context
       .map(this._stepper.done)
       .reduce(function (last, curr) {
         return last && curr
@@ -108,17 +108,21 @@ export default class Morphable {
       this.type(getClassForType(value))
     }
 
-    var result = (new this._type(value))
+    let result = (new this._type(value))
     if (this._type === Color) {
-      result = this._to ? result[this._to[4]]()
-        : this._from ? result[this._from[4]]()
-        : result
+      result = this._to
+        ? result[this._to[4]]()
+        : this._from
+          ? result[this._from[4]]()
+          : result
     }
 
     if (this._type === ObjectBag) {
-      result = this._to ? result.align(this._to)
-        : this._from ? result.align(this._from)
-        : result
+      result = this._to
+        ? result.align(this._to)
+        : this._from
+          ? result.align(this._from)
+          : result
     }
 
     result = result.toArray()
@@ -181,7 +185,7 @@ export class TransformBag {
   }
 
   toArray () {
-    var v = this
+    const v = this
 
     return [
       v.scaleX,
@@ -236,7 +240,7 @@ export class ObjectBag {
     }
 
     objOrArr = objOrArr || {}
-    var entries = []
+    const entries = []
 
     for (const i in objOrArr) {
       const Type = getClassForType(objOrArr[i])
@@ -255,8 +259,8 @@ export class ObjectBag {
   }
 
   valueOf () {
-    var obj = {}
-    var arr = this.values
+    const obj = {}
+    const arr = this.values
 
     // for (var i = 0, len = arr.length; i < len; i += 2) {
     while (arr.length) {

src/animation/Queue.js

@@ -16,7 +16,7 @@ export default class Queue {
 
   push (value) {
     // An item stores an id and the provided value
-    var item = typeof value.next !== 'undefined' ? value : { value: value, next: null, prev: null }
+    const item = typeof value.next !== 'undefined' ? value : { value: value, next: null, prev: null }
 
     // Deal with the queue being empty or populated
     if (this._last) {
@@ -47,7 +47,7 @@ export default class Queue {
 
   shift () {
     // Check if we have a value
-    var remove = this._first
+    const remove = this._first
     if (!remove) return null
 
     // If we do, remove it and relink things

src/animation/Runner.js

@@ -73,9 +73,9 @@ export default class Runner extends EventTarget {
 
   static sanitise (duration, delay, when) {
     // Initialise the default parameters
-    var times = 1
-    var swing = false
-    var wait = 0
+    let times = 1
+    let swing = false
+    let wait = 0
     duration = duration || timeline.duration
     delay = delay || timeline.delay
     when = when || 'last'
@@ -121,8 +121,8 @@ export default class Runner extends EventTarget {
   }
 
   animate (duration, delay, when) {
-    var o = Runner.sanitise(duration, delay, when)
-    var runner = new Runner(o.duration)
+    const o = Runner.sanitise(duration, delay, when)
+    const runner = new Runner(o.duration)
     if (this._timeline) runner.timeline(this._timeline)
     if (this._element) runner.element(this._element)
     return runner.loop(o).schedule(o.delay, o.when)
@@ -196,16 +196,16 @@ export default class Runner extends EventTarget {
   }
 
   loops (p) {
-    var loopDuration = this._duration + this._wait
+    const loopDuration = this._duration + this._wait
     if (p == null) {
-      var loopsDone = Math.floor(this._time / loopDuration)
-      var relativeTime = (this._time - loopsDone * loopDuration)
-      var position = relativeTime / this._duration
+      const loopsDone = Math.floor(this._time / loopDuration)
+      const relativeTime = (this._time - loopsDone * loopDuration)
+      const position = relativeTime / this._duration
       return Math.min(loopsDone + position, this._times)
     }
-    var whole = Math.floor(p)
-    var partial = p % 1
-    var time = loopDuration * whole + this._duration * partial
+    const whole = Math.floor(p)
+    const partial = p % 1
+    const time = loopDuration * whole + this._duration * partial
     return this.time(time)
   }
 
@@ -217,13 +217,13 @@ export default class Runner extends EventTarget {
 
   position (p) {
     // Get all of the variables we need
-    var x = this._time
-    var d = this._duration
-    var w = this._wait
-    var t = this._times
-    var s = this._swing
-    var r = this._reverse
-    var position
+    const x = this._time
+    const d = this._duration
+    const w = this._wait
+    const t = this._times
+    const s = this._swing
+    const r = this._reverse
+    let position
 
     if (p == null) {
       /*
@@ -235,25 +235,27 @@ export default class Runner extends EventTarget {
 
       // Figure out the value without thinking about the start or end time
       const f = function (x) {
-        var swinging = s * Math.floor(x % (2 * (w + d)) / (w + d))
-        var backwards = (swinging && !r) || (!swinging && r)
-        var uncliped = Math.pow(-1, backwards) * (x % (w + d)) / d + backwards
-        var clipped = Math.max(Math.min(uncliped, 1), 0)
+        const swinging = s * Math.floor(x % (2 * (w + d)) / (w + d))
+        const backwards = (swinging && !r) || (!swinging && r)
+        const uncliped = Math.pow(-1, backwards) * (x % (w + d)) / d + backwards
+        const clipped = Math.max(Math.min(uncliped, 1), 0)
         return clipped
       }
 
       // Figure out the value by incorporating the start time
-      var endTime = t * (w + d) - w
-      position = x <= 0 ? Math.round(f(1e-5))
-        : x < endTime ? f(x)
-        : Math.round(f(endTime - 1e-5))
+      const endTime = t * (w + d) - w
+      position = x <= 0
+        ? Math.round(f(1e-5))
+        : x < endTime
+          ? f(x)
+          : Math.round(f(endTime - 1e-5))
       return position
     }
 
     // Work out the loops done and add the position to the loops done
-    var loopsDone = Math.floor(this.loops())
-    var swingForward = s && (loopsDone % 2 === 0)
-    var forwards = (swingForward && !r) || (r && swingForward)
+    const loopsDone = Math.floor(this.loops())
+    const swingForward = s && (loopsDone % 2 === 0)
+    const forwards = (swingForward && !r) || (r && swingForward)
     position = loopsDone + (forwards ? p : 1 - p)
     return this.loops(position)
   }
@@ -279,7 +281,7 @@ export default class Runner extends EventTarget {
       initialised: false,
       finished: false
     })
-    var timeline = this.timeline()
+    const timeline = this.timeline()
     timeline && this.timeline()._continue()
     return this
   }
@@ -321,16 +323,16 @@ export default class Runner extends EventTarget {
     // Update the time and get the new position
     dt = dt == null ? 16 : dt
     this._time += dt
-    var position = this.position()
+    const position = this.position()
 
     // Figure out if we need to run the stepper in this frame
-    var running = this._lastPosition !== position && this._time >= 0
+    const running = this._lastPosition !== position && this._time >= 0
     this._lastPosition = position
 
     // Figure out if we just started
-    var duration = this.duration()
-    var justStarted = this._lastTime <= 0 && this._time > 0
-    var justFinished = this._lastTime < duration && this._time >= duration
+    const duration = this.duration()
+    const justStarted = this._lastTime <= 0 && this._time > 0
+    const justFinished = this._lastTime < duration && this._time >= duration
 
     this._lastTime = this._time
     if (justStarted) {
@@ -340,19 +342,20 @@ export default class Runner extends EventTarget {
     // Work out if the runner is finished set the done flag here so animations
     // know, that they are running in the last step (this is good for
     // transformations which can be merged)
-    var declarative = this._isDeclarative
+    const declarative = this._isDeclarative
     this.done = !declarative && !justFinished && this._time >= duration
 
     // Runner is running. So its not in reseted state anymore
     this._reseted = false
 
+    let converged = false
     // Call initialise and the run function
     if (running || declarative) {
       this._initialise(running)
 
       // clear the transforms on this runner so they dont get added again and again
       this.transforms = new Matrix()
-      var converged = this._run(declarative ? dt : position)
+      converged = this._run(declarative ? dt : position)
 
       this.fire('step', this)
     }
@@ -387,7 +390,7 @@ export default class Runner extends EventTarget {
   }
 
   unschedule () {
-    var timeline = this.timeline()
+    const timeline = this.timeline()
     timeline && timeline.unschedule(this)
     return this
   }
@@ -398,12 +401,12 @@ export default class Runner extends EventTarget {
     if (!running && !this._isDeclarative) return
 
     // Loop through all of the initialisers
-    for (var i = 0, len = this._queue.length; i < len; ++i) {
+    for (let i = 0, len = this._queue.length; i < len; ++i) {
       // Get the current initialiser
-      var current = this._queue[i]
+      const current = this._queue[i]
 
       // Determine whether we need to initialise
-      var needsIt = this._isDeclarative || (!current.initialised && running)
+      const needsIt = this._isDeclarative || (!current.initialised && running)
       running = !current.finished
 
       // Call the initialiser if we need to
@@ -428,7 +431,7 @@ export default class Runner extends EventTarget {
     // and later
     //    anim.move(...)
     if (this._isDeclarative) {
-      var timeline = this.timeline()
+      const timeline = this.timeline()
       timeline && timeline.play()
     }
   }
@@ -437,14 +440,14 @@ export default class Runner extends EventTarget {
   // Run each run function for the position or dt given
   _run (positionOrDt) {
     // Run all of the _queue directly
-    var allfinished = true
-    for (var i = 0, len = this._queue.length; i < len; ++i) {
+    let allfinished = true
+    for (let i = 0, len = this._queue.length; i < len; ++i) {
       // Get the current function to run
-      var current = this._queue[i]
+      const current = this._queue[i]
 
       // Run the function if its not finished, we keep track of the finished
       // flag for the sake of declarative _queue
-      var converged = current.runner.call(this, positionOrDt)
+      const converged = current.runner.call(this, positionOrDt)
       current.finished = current.finished || (converged === true)
       allfinished = allfinished && current.finished
     }
@@ -473,7 +476,7 @@ export default class Runner extends EventTarget {
       }
 
       this._history[method].caller.finished = false
-      var timeline = this.timeline()
+      const timeline = this.timeline()
       timeline && timeline.play()
       return true
     }
@@ -601,8 +604,8 @@ export class RunnerArray {
 registerMethods({
   Element: {
     animate (duration, delay, when) {
-      var o = Runner.sanitise(duration, delay, when)
-      var timeline = this.timeline()
+      const o = Runner.sanitise(duration, delay, when)
+      const timeline = this.timeline()
       return new Runner(o.duration)
         .loop(o)
         .element(this)
@@ -672,7 +675,7 @@ extend(Runner, {
     let attrs = nameOrAttrs
     if (this._tryRetarget(type, attrs)) return this
 
-    var morpher = new Morphable(this._stepper).to(attrs)
+    let morpher = new Morphable(this._stepper).to(attrs)
     let keys = Object.keys(attrs)
 
     this.queue(function () {
@@ -720,7 +723,7 @@ extend(Runner, {
   zoom (level, point) {
     if (this._tryRetarget('zoom', level, point)) return this
 
-    var morpher = new Morphable(this._stepper).to(new SVGNumber(level))
+    let morpher = new Morphable(this._stepper).to(new SVGNumber(level))
 
     this.queue(function () {
       morpher = morpher.from(this.element().zoom())
@@ -761,7 +764,7 @@ extend(Runner, {
     }
 
     // Parse the parameters
-    var isMatrix = Matrix.isMatrixLike(transforms)
+    const isMatrix = Matrix.isMatrixLike(transforms)
     affine = transforms.affine != null
       ? transforms.affine
       : (affine != null ? affine : !isMatrix)
@@ -890,8 +893,8 @@ extend(Runner, {
     if (this._tryRetarget(method, to)) return this
 
     // Make a morpher and queue the animation
-    var morpher = new Morphable(this._stepper).to(to)
-    var from = null
+    const morpher = new Morphable(this._stepper).to(to)
+    let from = null
     this.queue(function () {
       from = this.element()[method]()
       morpher.from(from)
@@ -913,7 +916,7 @@ extend(Runner, {
     if (this._tryRetarget(method, to)) return this
 
     // Make a morpher and queue the animation
-    var morpher = new Morphable(this._stepper).to(to)
+    const morpher = new Morphable(this._stepper).to(to)
     this.queue(function () {
       morpher.from(this.element()[method]())
     }, function (pos) {
@@ -953,7 +956,7 @@ extend(Runner, {
   // Add animatable size
   size (width, height) {
     // animate bbox based size for all other elements
-    var box
+    let box
 
     if (!width || !height) {
       box = this._element.bbox()
@@ -991,7 +994,7 @@ extend(Runner, {
 
     if (this._tryRetarget('plot', a)) return this
 
-    var morpher = new Morphable(this._stepper)
+    const morpher = new Morphable(this._stepper)
       .type(this._element.MorphArray).to(a)
 
     this.queue(function () {

src/animation/Timeline.js

@@ -3,10 +3,10 @@ import { registerMethods } from '../utils/methods.js'
 import Animator from './Animator.js'
 import EventTarget from '../types/EventTarget.js'
 
-var makeSchedule = function (runnerInfo) {
-  var start = runnerInfo.start
-  var duration = runnerInfo.runner.duration()
-  var end = start + duration
+const makeSchedule = function (runnerInfo) {
+  const start = runnerInfo.start
+  const duration = runnerInfo.runner.duration()
+  const end = start + duration
   return { start: start, duration: duration, end: end, runner: runnerInfo.runner }
 }
 
@@ -56,9 +56,9 @@ export default class Timeline extends EventTarget {
 
   // Calculates the end of the timeline
   getEndTime () {
-    var lastRunnerInfo = this.getLastRunnerInfo()
-    var lastDuration = lastRunnerInfo ? lastRunnerInfo.runner.duration() : 0
-    var lastStartTime = lastRunnerInfo ? lastRunnerInfo.start : this._time
+    const lastRunnerInfo = this.getLastRunnerInfo()
+    const lastDuration = lastRunnerInfo ? lastRunnerInfo.runner.duration() : 0
+    const lastStartTime = lastRunnerInfo ? lastRunnerInfo.start : this._time
     return lastStartTime + lastDuration
   }
 
@@ -93,10 +93,10 @@ export default class Timeline extends EventTarget {
   }
 
   reverse (yes) {
-    var currentSpeed = this.speed()
+    const currentSpeed = this.speed()
     if (yes == null) return this.speed(-currentSpeed)
 
-    var positive = Math.abs(currentSpeed)
+    const positive = Math.abs(currentSpeed)
     return this.speed(yes ? -positive : positive)
   }
 
@@ -110,8 +110,8 @@ export default class Timeline extends EventTarget {
     // derived from the current timeline time or it can be relative to the
     // last start time to chain animations directly
 
-    var absoluteStartTime = 0
-    var endTime = this.getEndTime()
+    let absoluteStartTime = 0
+    const endTime = this.getEndTime()
     delay = delay || 0
 
     // Work out when to start the animation
@@ -188,7 +188,7 @@ export default class Timeline extends EventTarget {
 
   // Remove the runner from this timeline
   unschedule (runner) {
-    var index = this._runnerIds.indexOf(runner.id)
+    const index = this._runnerIds.indexOf(runner.id)
     if (index < 0) return this
 
     this._runners.splice(index, 1)
@@ -220,12 +220,12 @@ export default class Timeline extends EventTarget {
 
   _stepFn (immediateStep = false) {
     // Get the time delta from the last time and update the time
-    var time = this._timeSource()
-    var dtSource = time - this._lastSourceTime
+    const time = this._timeSource()
+    let dtSource = time - this._lastSourceTime
 
     if (immediateStep) dtSource = 0
 
-    var dtTime = this._speed * dtSource + (this._time - this._lastStepTime)
+    const dtTime = this._speed * dtSource + (this._time - this._lastStepTime)
     this._lastSourceTime = time
 
     // Only update the time if we use the timeSource.
@@ -249,7 +249,7 @@ export default class Timeline extends EventTarget {
     // runner always wins the reset even if the other runner started earlier
     // and therefore should win the attribute battle
     // this can be solved by reseting them backwards
-    for (var k = this._runners.length; k--;) {
+    for (let k = this._runners.length; k--;) {
       // Get and run the current runner and ignore it if its inactive
       const runnerInfo = this._runners[k]
       const runner = runnerInfo.runner
@@ -266,8 +266,8 @@ export default class Timeline extends EventTarget {
     }
 
     // Run all of the runners directly
-    var runnersLeft = false
-    for (var i = 0, len = this._runners.length; i < len; i++) {
+    let runnersLeft = false
+    for (let i = 0, len = this._runners.length; i < len; i++) {
       // Get and run the current runner and ignore it if its inactive
       const runnerInfo = this._runners[i]
       const runner = runnerInfo.runner
@@ -290,13 +290,13 @@ export default class Timeline extends EventTarget {
 
       // If this runner is still going, signal that we need another animation
       // frame, otherwise, remove the completed runner
-      var finished = runner.step(dt).done
+      const finished = runner.step(dt).done
       if (!finished) {
         runnersLeft = true
         // continue
       } else if (runnerInfo.persist !== true) {
         // runner is finished. And runner might get removed
-        var endTime = runner.duration() - runner.time() + this._time
+        const endTime = runner.duration() - runner.time() + this._time
 
         if (endTime + runnerInfo.persist < this._time) {
           // Delete runner and correct index

src/elements/A.js

@@ -32,17 +32,17 @@ registerMethods({
   },
   Element: {
     unlink () {
-      var link = this.linker()
+      const link = this.linker()
 
       if (!link) return this
 
-      var parent = link.parent()
+      const parent = link.parent()
 
       if (!parent) {
         return this.remove()
       }
 
-      var index = parent.index(link)
+      const index = parent.index(link)
       parent.add(this, index)
 
       link.remove()
@@ -50,7 +50,7 @@ registerMethods({
     },
     linkTo (url) {
       // reuse old link if possible
-      var link = this.linker()
+      let link = this.linker()
 
       if (!link) {
         link = new A()
@@ -66,7 +66,7 @@ registerMethods({
       return this
     },
     linker () {
-      var link = this.parent()
+      const link = this.parent()
       if (link && link.node.nodeName.toLowerCase() === 'a') {
         return link
       }

src/elements/Dom.js

@@ -77,8 +77,8 @@ export default class Dom extends EventTarget {
 
   // Iterates over all children and invokes a given block
   each (block, deep) {
-    var children = this.children()
-    var i, il
+    const children = this.children()
+    let i, il
 
     for (i = 0, il = children.length; i < il; i++) {
       block.apply(children[i], [ i, children ])
@@ -152,7 +152,7 @@ export default class Dom extends EventTarget {
 
   // Returns the parent element instance
   parent (type) {
-    var parent = this
+    let parent = this
 
     // check for parent
     if (!parent.node.parentNode) return null
@@ -262,8 +262,6 @@ export default class Dom extends EventTarget {
 
   // Import / Export raw svg
   xml (xmlOrFn, outerXML, ns) {
-    var well, len, fragment
-
     if (typeof xmlOrFn === 'boolean') {
       ns = outerXML
       outerXML = xmlOrFn
@@ -320,14 +318,14 @@ export default class Dom extends EventTarget {
     outerXML = outerXML == null ? false : outerXML
 
     // Create temporary holder
-    well = create('wrapper', ns)
-    fragment = globals.document.createDocumentFragment()
+    const well = create('wrapper', ns)
+    const fragment = globals.document.createDocumentFragment()
 
     // Dump raw svg
     well.innerHTML = xmlOrFn
 
     // Transplant nodes into the fragment
-    for (len = well.children.length; len--;) {
+    for (let len = well.children.length; len--;) {
       fragment.appendChild(well.firstElementChild)
     }
 

src/elements/Ellipse.js

@@ -16,7 +16,7 @@ export default class Ellipse extends Shape {
   }
 
   size (width, height) {
-    var p = proportionalSize(this, width, height)
+    const p = proportionalSize(this, width, height)
 
     return this
       .rx(new SVGNumber(p.width).divide(2))

src/elements/Image.js

@@ -17,10 +17,10 @@ export default class Image extends Shape {
   load (url, callback) {
     if (!url) return this
 
-    var img = new globals.window.Image()
+    const img = new globals.window.Image()
 
     on(img, 'load', function (e) {
-      var p = this.parent(Pattern)
+      const p = this.parent(Pattern)
 
       // ensure image size
       if (this.width() === 0 && this.height() === 0) {

src/elements/Line.js

@@ -44,7 +44,7 @@ export default class Line extends Shape {
 
   // Set element size to given width and height
   size (width, height) {
-    var p = proportionalSize(this, width, height)
+    const p = proportionalSize(this, width, height)
     return this.attr(this.array().size(p.width, p.height).toLine())
   }
 }

src/elements/Marker.js

@@ -69,7 +69,7 @@ registerMethods({
   marker: {
     // Create and attach markers
     marker (marker, width, height, block) {
-      var attr = [ 'marker' ]
+      let attr = [ 'marker' ]
 
       // Build attribute name
       if (marker !== 'all') attr.push(marker)

src/elements/Mask.js

@@ -39,7 +39,7 @@ registerMethods({
 
     maskWith (element) {
       // use given mask or create a new one
-      var masker = element instanceof Mask
+      const masker = element instanceof Mask
         ? element
         : this.parent().mask().add(element)
 

src/elements/Path.js

@@ -33,13 +33,14 @@ export default class Path extends Shape {
 
   // Plot new path
   plot (d) {
-    return (d == null) ? this.array()
+    return (d == null)
+      ? this.array()
       : this.clear().attr('d', typeof d === 'string' ? d : (this._array = new PathArray(d)))
   }
 
   // Set element size to given width and height
   size (width, height) {
-    var p = proportionalSize(this, width, height)
+    const p = proportionalSize(this, width, height)
     return this.attr('d', this.array().size(p.width, p.height))
   }
 

src/elements/Style.js

@@ -7,9 +7,9 @@ function cssRule (selector, rule) {
   if (!selector) return ''
   if (!rule) return selector
 
-  var ret = selector + '{'
+  let ret = selector + '{'
 
-  for (var i in rule) {
+  for (const i in rule) {
     ret += unCamelCase(i) + ':' + rule[i] + ';'
   }
 

src/elements/Text.js

@@ -43,15 +43,15 @@ export default class Text extends Shape {
 
     // define position of all lines
     if (this._rebuild) {
-      var self = this
-      var blankLineOffset = 0
-      var leading = this.dom.leading
+      const self = this
+      let blankLineOffset = 0
+      const leading = this.dom.leading
 
       this.each(function (i) {
-        var fontSize = globals.window.getComputedStyle(this.node)
+        const fontSize = globals.window.getComputedStyle(this.node)
           .getPropertyValue('font-size')
 
-        var dy = leading * new SVGNumber(fontSize)
+        const dy = leading * new SVGNumber(fontSize)
 
         if (this.dom.newLined) {
           this.attr('x', self.attr('x'))
@@ -82,11 +82,11 @@ export default class Text extends Shape {
   text (text) {
     // act as getter
     if (text === undefined) {
-      var children = this.node.childNodes
-      var firstLine = 0
+      const children = this.node.childNodes
+      let firstLine = 0
       text = ''
 
-      for (var i = 0, len = children.length; i < len; ++i) {
+      for (let i = 0, len = children.length; i < len; ++i) {
         // skip textPaths - they are no lines
         if (children[i].nodeName === 'textPath') {
           if (i === 0) firstLine = 1
@@ -116,7 +116,7 @@ export default class Text extends Shape {
       text = (text + '').split('\n')
 
       // build new lines
-      for (var j = 0, jl = text.length; j < jl; j++) {
+      for (let j = 0, jl = text.length; j < jl; j++) {
         this.newLine(text[j])
       }
     }

src/elements/TextPath.js

@@ -14,15 +14,15 @@ export default class TextPath extends Text {
 
   // return the array of the path track element
   array () {
-    var track = this.track()
+    const track = this.track()
 
     return track ? track.array() : null
   }
 
   // Plot path if any
   plot (d) {
-    var track = this.track()
-    var pathArray = null
+    const track = this.track()
+    let pathArray = null
 
     if (track) {
       pathArray = track.plot(d)
@@ -51,7 +51,7 @@ registerMethods({
   Text: {
     // Create path for text to run on
     path: wrapWithAttrCheck(function (track, importNodes = true) {
-      var textPath = new TextPath()
+      const textPath = new TextPath()
 
       // if track is a path, reuse it
       if (!(track instanceof Path)) {

src/elements/Tspan.js

@@ -34,18 +34,18 @@ export default class Tspan extends Shape {
     this.dom.newLined = true
 
     // fetch parent
-    var text = this.parent()
+    const text = this.parent()
 
     // early return in case we are not in a text element
     if (!(text instanceof Text)) {
       return this
     }
 
-    var i = text.index(this)
+    const i = text.index(this)
 
-    var fontSize = globals.window.getComputedStyle(this.node)
+    const fontSize = globals.window.getComputedStyle(this.node)
       .getPropertyValue('font-size')
-    var dy = text.dom.leading * new SVGNumber(fontSize)
+    const dy = text.dom.leading * new SVGNumber(fontSize)
 
     // apply new position
     return this.dy(i ? dy : 0).attr('x', text.x())
@@ -73,7 +73,7 @@ extend(Tspan, textable)
 registerMethods({
   Tspan: {
     tspan: wrapWithAttrCheck(function (text = '') {
-      var tspan = new Tspan()
+      const tspan = new Tspan()
 
       // clear if build mode is disabled
       if (!this._build) {

src/modules/core/attr.js

@@ -39,9 +39,11 @@ export default function attr (attr, val, ns) {
   } else if (val == null) {
     // act as a getter if the first and only argument is not an object
     val = this.node.getAttribute(attr)
-    return val == null ? defaults[attr]
-      : isNumber.test(val) ? parseFloat(val)
-      : val
+    return val == null
+      ? defaults[attr]
+      : isNumber.test(val)
+        ? parseFloat(val)
+        : val
   } else {
     // Loop through hooks and execute them to convert value
     val = hooks.reduce((_val, hook) => {
@@ -67,7 +69,8 @@ export default function attr (attr, val, ns) {
       }
     } else {
       // set given attribute on node
-      typeof ns === 'string' ? this.node.setAttributeNS(ns, attr, val.toString())
+      typeof ns === 'string'
+        ? this.node.setAttributeNS(ns, attr, val.toString())
         : this.node.setAttribute(attr, val.toString())
     }
 

src/modules/core/event.js

@@ -26,10 +26,10 @@ export function clearEvents (instance) {
 
 // Add event binder in the SVG namespace
 export function on (node, events, listener, binding, options) {
-  var l = listener.bind(binding || node)
-  var instance = makeInstance(node)
-  var bag = getEvents(instance)
-  var n = getEventTarget(instance)
+  const l = listener.bind(binding || node)
+  const instance = makeInstance(node)
+  const bag = getEvents(instance)
+  const n = getEventTarget(instance)
 
   // events can be an array of events or a string of events
   events = Array.isArray(events) ? events : events.split(delimiter)
@@ -40,8 +40,8 @@ export function on (node, events, listener, binding, options) {
   }
 
   events.forEach(function (event) {
-    var ev = event.split('.')[0]
-    var ns = event.split('.')[1] || '*'
+    const ev = event.split('.')[0]
+    const ns = event.split('.')[1] || '*'
 
     // ensure valid object
     bag[ev] = bag[ev] || {}
@@ -57,9 +57,9 @@ export function on (node, events, listener, binding, options) {
 
 // Add event unbinder in the SVG namespace
 export function off (node, events, listener, options) {
-  var instance = makeInstance(node)
-  var bag = getEvents(instance)
-  var n = getEventTarget(instance)
+  const instance = makeInstance(node)
+  const bag = getEvents(instance)
+  const n = getEventTarget(instance)
 
   // listener can be a function or a number
   if (typeof listener === 'function') {
@@ -71,9 +71,9 @@ export function off (node, events, listener, options) {
   events = Array.isArray(events) ? events : (events || '').split(delimiter)
 
   events.forEach(function (event) {
-    var ev = event && event.split('.')[0]
-    var ns = event && event.split('.')[1]
-    var namespace, l
+    const ev = event && event.split('.')[0]
+    const ns = event && event.split('.')[1]
+    let namespace, l
 
     if (listener) {
       // remove listener reference
@@ -122,7 +122,7 @@ export function off (node, events, listener, options) {
 }
 
 export function dispatch (node, event, data, options) {
-  var n = getEventTarget(node)
+  const n = getEventTarget(node)
 
   // Dispatch event
   if (event instanceof globals.window.Event) {

src/modules/core/poly.js

@@ -19,9 +19,11 @@ export function move (x, y) {
 
 // Plot new path
 export function plot (p) {
-  return (p == null) ? this.array()
-    : this.clear().attr('points', typeof p === 'string' ? p
-    : (this._array = new PointArray(p)))
+  return (p == null)
+    ? this.array()
+    : this.clear().attr('points', typeof p === 'string'
+      ? p
+      : (this._array = new PointArray(p)))
 }
 
 // Set element size to given width and height

src/modules/optional/arrange.js

@@ -23,8 +23,8 @@ export function prev () {
 
 // Send given element one step forward
 export function forward () {
-  var i = this.position()
-  var p = this.parent()
+  const i = this.position()
+  const p = this.parent()
 
   // move node one step forward
   p.add(this.remove(), i + 1)
@@ -34,8 +34,8 @@ export function forward () {
 
 // Send given element one step backward
 export function backward () {
-  var i = this.position()
-  var p = this.parent()
+  const i = this.position()
+  const p = this.parent()
 
   p.add(this.remove(), i ? i - 1 : 0)
 
@@ -44,7 +44,7 @@ export function backward () {
 
 // Send given element all the way to the front
 export function front () {
-  var p = this.parent()
+  const p = this.parent()
 
   // Move node forward
   p.add(this.remove())
@@ -54,7 +54,7 @@ export function front () {
 
 // Send given element all the way to the back
 export function back () {
-  var p = this.parent()
+  const p = this.parent()
 
   // Move node back
   p.add(this.remove(), 0)
@@ -67,7 +67,7 @@ export function before (element) {
   element = makeInstance(element)
   element.remove()
 
-  var i = this.position()
+  const i = this.position()
 
   this.parent().add(element, i)
 
@@ -79,7 +79,7 @@ export function after (element) {
   element = makeInstance(element)
   element.remove()
 
-  var i = this.position()
+  const i = this.position()
 
   this.parent().add(element, i + 1)
 

src/modules/optional/class.js

@@ -3,7 +3,7 @@ import { registerMethods } from '../../utils/methods.js'
 
 // Return array of classes on the node
 export function classes () {
-  var attr = this.attr('class')
+  const attr = this.attr('class')
   return attr == null ? [] : attr.trim().split(delimiter)
 }
 
@@ -15,7 +15,7 @@ export function hasClass (name) {
 // Add class to the node
 export function addClass (name) {
   if (!this.hasClass(name)) {
-    var array = this.classes()
+    const array = this.classes()
     array.push(name)
     this.attr('class', array.join(' '))
   }

src/modules/optional/data.js

@@ -24,9 +24,11 @@ export function data (a, v, r) {
     }
   } else {
     this.attr('data-' + a,
-      v === null ? null
-      : r === true || typeof v === 'string' || typeof v === 'number' ? v
-      : JSON.stringify(v)
+      v === null
+        ? null
+        : r === true || typeof v === 'string' || typeof v === 'number'
+          ? v
+          : JSON.stringify(v)
     )
   }
 

src/modules/optional/memory.js

@@ -4,7 +4,7 @@ import { registerMethods } from '../../utils/methods.js'
 export function remember (k, v) {
   // remember every item in an object individually
   if (typeof arguments[0] === 'object') {
-    for (var key in k) {
+    for (const key in k) {
       this.remember(key, k[key])
     }
   } else if (arguments.length === 1) {
@@ -23,7 +23,7 @@ export function forget () {
   if (arguments.length === 0) {
     this._memory = {}
   } else {
-    for (var i = arguments.length - 1; i >= 0; i--) {
+    for (let i = arguments.length - 1; i >= 0; i--) {
       delete this.memory()[arguments[i]]
     }
   }

src/modules/optional/sugar.js

@@ -6,7 +6,7 @@ import Point from '../../types/Point.js'
 import SVGNumber from '../../types/SVGNumber.js'
 
 // Define list of available attributes for stroke and fill
-var sugar = {
+const sugar = {
   stroke: [ 'color', 'width', 'opacity', 'linecap', 'linejoin', 'miterlimit', 'dasharray', 'dashoffset' ],
   fill: [ 'color', 'opacity', 'rule' ],
   prefix: function (t, a) {
@@ -16,8 +16,8 @@ var sugar = {
 
 // Add sugar for fill and stroke
 ;[ 'fill', 'stroke' ].forEach(function (m) {
-  var extension = {}
-  var i
+  const extension = {}
+  let i
 
   extension[m] = function (o) {
     if (typeof o === 'undefined') {
@@ -104,7 +104,7 @@ registerMethods([ 'Element', 'Runner' ], {
 registerMethods('radius', {
   // Add x and y radius
   radius: function (x, y = x) {
-    var type = (this._element || this).type
+    const type = (this._element || this).type
     return type === 'radialGradient'
       ? this.attr('r', new SVGNumber(x))
       : this.rx(x).ry(y)

src/modules/optional/transform.js

@@ -10,11 +10,11 @@ export function untransform () {
 
 // merge the whole transformation chain into one matrix and returns it
 export function matrixify () {
-  var matrix = (this.attr('transform') || '')
+  const matrix = (this.attr('transform') || '')
     // split transformations
     .split(transforms).slice(0, -1).map(function (str) {
       // generate key => value pairs
-      var kv = str.trim().split('(')
+      const kv = str.trim().split('(')
       return [ kv[0],
         kv[1].split(delimiter)
           .map(function (str) {
@@ -37,8 +37,8 @@ export function matrixify () {
 // add an element to another parent without changing the visual representation on the screen
 export function toParent (parent, i) {
   if (this === parent) return this
-  var ctm = this.screenCTM()
-  var pCtm = parent.screenCTM().inverse()
+  const ctm = this.screenCTM()
+  const pCtm = parent.screenCTM().inverse()
 
   this.addTo(parent, i).untransform().transform(pCtm.multiply(ctm))
 
@@ -54,7 +54,7 @@ export function toRoot (i) {
 export function transform (o, relative) {
   // Act as a getter if no object was passed
   if (o == null || typeof o === 'string') {
-    var decomposed = new Matrix(this).decompose()
+    const decomposed = new Matrix(this).decompose()
     return o == null ? decomposed : decomposed[o]
   }
 
@@ -64,8 +64,8 @@ export function transform (o, relative) {
   }
 
   // The user can pass a boolean, an Element or an Matrix or nothing
-  var cleanRelative = relative === true ? this : (relative || false)
-  var result = new Matrix(cleanRelative).transform(o)
+  const cleanRelative = relative === true ? this : (relative || false)
+  const result = new Matrix(cleanRelative).transform(o)
   return this.attr('transform', result)
 }
 

src/polyfills/innerHTML.js

@@ -5,8 +5,8 @@
     if (SVGElement.prototype.innerHTML) return
   } catch (e) { return }
 
-  var serializeXML = function (node, output) {
-    var nodeType = node.nodeType
+  const serializeXML = function (node, output) {
+    const nodeType = node.nodeType
     if (nodeType === 3) {
       output.push(node.textContent.replace(/&/, '&amp;').replace(/</, '&lt;').replace('>', '&gt;'))
     } else if (nodeType === 1) {
@@ -32,8 +32,8 @@
 
   Object.defineProperty(SVGElement.prototype, 'innerHTML', {
     get: function () {
-      var output = []
-      var childNode = this.firstChild
+      const output = []
+      let childNode = this.firstChild
       while (childNode) {
         serializeXML(childNode, output)
         childNode = childNode.nextSibling
@@ -46,13 +46,13 @@
       }
 
       try {
-        var dXML = new DOMParser()
+        const dXML = new DOMParser()
         dXML.async = false
 
-        var sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markupText + '</svg>'
-        var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement
+        const sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markupText + '</svg>'
+        const svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement
 
-        var childNode = svgDocElement.firstChild
+        let childNode = svgDocElement.firstChild
         while (childNode) {
           this.appendChild(this.ownerDocument.importNode(childNode, true))
           childNode = childNode.nextSibling
@@ -65,7 +65,7 @@
 
   Object.defineProperty(SVGElement.prototype, 'outerHTML', {
     get: function () {
-      var output = []
+      const output = []
       serializeXML(this, output)
       return output.join('')
     },
@@ -75,13 +75,13 @@
       }
 
       try {
-        var dXML = new DOMParser()
+        const dXML = new DOMParser()
         dXML.async = false
 
-        var sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markupText + '</svg>'
-        var svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement
+        const sXML = '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + markupText + '</svg>'
+        const svgDocElement = dXML.parseFromString(sXML, 'text/xml').documentElement
 
-        var childNode = svgDocElement.firstChild
+        let childNode = svgDocElement.firstChild
         while (childNode) {
           this.parentNode.insertBefore(this.ownerDocument.importNode(childNode, true), this)
           // this.appendChild(this.ownerDocument.importNode(childNode, true));

src/types/Box.js

@@ -34,13 +34,18 @@ export default class Box {
   }
 
   init (source) {
-    var base = [ 0, 0, 0, 0 ]
-    source = typeof source === 'string' ? source.split(delimiter).map(parseFloat)
-      : Array.isArray(source) ? source
-      : typeof source === 'object' ? [ source.left != null ? source.left
-      : source.x, source.top != null ? source.top : source.y, source.width, source.height ]
-      : arguments.length === 4 ? [].slice.call(arguments)
-      : base
+    const base = [ 0, 0, 0, 0 ]
+    source = typeof source === 'string'
+      ? source.split(delimiter).map(parseFloat)
+      : Array.isArray(source)
+        ? source
+        : typeof source === 'object'
+          ? [ source.left != null
+            ? source.left
+            : source.x, source.top != null ? source.top : source.y, source.width, source.height ]
+          : arguments.length === 4
+            ? [].slice.call(arguments)
+            : base
 
     this.x = source[0] || 0
     this.y = source[1] || 0

src/types/Color.js

@@ -28,13 +28,19 @@ function is (object, space) {
 }
 
 function getParameters (a, b) {
-  const params = is(a, 'rgb') ? { _a: a.r, _b: a.g, _c: a.b, _d: 0, space: 'rgb' }
-    : is(a, 'xyz') ? { _a: a.x, _b: a.y, _c: a.z, _d: 0, space: 'xyz' }
-    : is(a, 'hsl') ? { _a: a.h, _b: a.s, _c: a.l, _d: 0, space: 'hsl' }
-    : is(a, 'lab') ? { _a: a.l, _b: a.a, _c: a.b, _d: 0, space: 'lab' }
-    : is(a, 'lch') ? { _a: a.l, _b: a.c, _c: a.h, _d: 0, space: 'lch' }
-    : is(a, 'cmyk') ? { _a: a.c, _b: a.m, _c: a.y, _d: a.k, space: 'cmyk' }
-    : { _a: 0, _b: 0, _c: 0, space: 'rgb' }
+  const params = is(a, 'rgb')
+    ? { _a: a.r, _b: a.g, _c: a.b, _d: 0, space: 'rgb' }
+    : is(a, 'xyz')
+      ? { _a: a.x, _b: a.y, _c: a.z, _d: 0, space: 'xyz' }
+      : is(a, 'hsl')
+        ? { _a: a.h, _b: a.s, _c: a.l, _d: 0, space: 'hsl' }
+        : is(a, 'lab')
+          ? { _a: a.l, _b: a.a, _c: a.b, _d: 0, space: 'lab' }
+          : is(a, 'lch')
+            ? { _a: a.l, _b: a.c, _c: a.h, _d: 0, space: 'lch' }
+            : is(a, 'cmyk')
+              ? { _a: a.c, _b: a.m, _c: a.y, _d: a.k, space: 'cmyk' }
+              : { _a: 0, _b: 0, _c: 0, space: 'rgb' }
 
   params.space = b || params.space
   return params
@@ -194,14 +200,20 @@ export default class Color {
 
     // Calculate the hue and saturation
     const delta = max - min
-    const s = isGrey ? 0
-      : l > 0.5 ? delta / (2 - max - min)
-      : delta / (max + min)
-    const h = isGrey ? 0
-      : max === r ? ((g - b) / delta + (g < b ? 6 : 0)) / 6
-      : max === g ? ((b - r) / delta + 2) / 6
-      : max === b ? ((r - g) / delta + 4) / 6
-      : 0
+    const s = isGrey
+      ? 0
+      : l > 0.5
+        ? delta / (2 - max - min)
+        : delta / (max + min)
+    const h = isGrey
+      ? 0
+      : max === r
+        ? ((g - b) / delta + (g < b ? 6 : 0)) / 6
+        : max === g
+          ? ((b - r) / delta + 2) / 6
+          : max === b
+            ? ((r - g) / delta + 4) / 6
+            : 0
 
     // Construct and return the new color
     const color = new Color(360 * h, 100 * s, 100 * l, 'hsl')
@@ -249,13 +261,19 @@ export default class Color {
 
     // Now add the components as a convenience
     const { _a, _b, _c, _d } = this
-    const components = this.space === 'rgb' ? { r: _a, g: _b, b: _c }
-      : this.space === 'xyz' ? { x: _a, y: _b, z: _c }
-      : this.space === 'hsl' ? { h: _a, s: _b, l: _c }
-      : this.space === 'lab' ? { l: _a, a: _b, b: _c }
-      : this.space === 'lch' ? { l: _a, c: _b, h: _c }
-      : this.space === 'cmyk' ? { c: _a, m: _b, y: _c, k: _d }
-      : {}
+    const components = this.space === 'rgb'
+      ? { r: _a, g: _b, b: _c }
+      : this.space === 'xyz'
+        ? { x: _a, y: _b, z: _c }
+        : this.space === 'hsl'
+          ? { h: _a, s: _b, l: _c }
+          : this.space === 'lab'
+            ? { l: _a, a: _b, b: _c }
+            : this.space === 'lch'
+              ? { l: _a, c: _b, h: _c }
+              : this.space === 'cmyk'
+                ? { c: _a, m: _b, y: _c, k: _d }
+                : {}
     Object.assign(this, components)
   }
 

src/types/Matrix.js

@@ -15,40 +15,52 @@ export default class Matrix {
 
   static formatTransforms (o) {
     // Get all of the parameters required to form the matrix
-    var flipBoth = o.flip === 'both' || o.flip === true
-    var flipX = o.flip && (flipBoth || o.flip === 'x') ? -1 : 1
-    var flipY = o.flip && (flipBoth || o.flip === 'y') ? -1 : 1
-    var skewX = o.skew && o.skew.length ? o.skew[0]
-      : isFinite(o.skew) ? o.skew
-      : isFinite(o.skewX) ? o.skewX
-      : 0
-    var skewY = o.skew && o.skew.length ? o.skew[1]
-      : isFinite(o.skew) ? o.skew
-      : isFinite(o.skewY) ? o.skewY
-      : 0
-    var scaleX = o.scale && o.scale.length ? o.scale[0] * flipX
-      : isFinite(o.scale) ? o.scale * flipX
-      : isFinite(o.scaleX) ? o.scaleX * flipX
-      : flipX
-    var scaleY = o.scale && o.scale.length ? o.scale[1] * flipY
-      : isFinite(o.scale) ? o.scale * flipY
-      : isFinite(o.scaleY) ? o.scaleY * flipY
-      : flipY
-    var shear = o.shear || 0
-    var theta = o.rotate || o.theta || 0
-    var origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY)
-    var ox = origin.x
-    var oy = origin.y
+    const flipBoth = o.flip === 'both' || o.flip === true
+    const flipX = o.flip && (flipBoth || o.flip === 'x') ? -1 : 1
+    const flipY = o.flip && (flipBoth || o.flip === 'y') ? -1 : 1
+    const skewX = o.skew && o.skew.length
+      ? o.skew[0]
+      : isFinite(o.skew)
+        ? o.skew
+        : isFinite(o.skewX)
+          ? o.skewX
+          : 0
+    const skewY = o.skew && o.skew.length
+      ? o.skew[1]
+      : isFinite(o.skew)
+        ? o.skew
+        : isFinite(o.skewY)
+          ? o.skewY
+          : 0
+    const scaleX = o.scale && o.scale.length
+      ? o.scale[0] * flipX
+      : isFinite(o.scale)
+        ? o.scale * flipX
+        : isFinite(o.scaleX)
+          ? o.scaleX * flipX
+          : flipX
+    const scaleY = o.scale && o.scale.length
+      ? o.scale[1] * flipY
+      : isFinite(o.scale)
+        ? o.scale * flipY
+        : isFinite(o.scaleY)
+          ? o.scaleY * flipY
+          : flipY
+    const shear = o.shear || 0
+    const theta = o.rotate || o.theta || 0
+    const origin = new Point(o.origin || o.around || o.ox || o.originX, o.oy || o.originY)
+    const ox = origin.x
+    const oy = origin.y
     // We need Point to be invalid if nothing was passed because we cannot default to 0 here. Thats why NaN
-    var position = new Point(o.position || o.px || o.positionX || NaN, o.py || o.positionY || NaN)
-    var px = position.x
-    var py = position.y
-    var translate = new Point(o.translate || o.tx || o.translateX, o.ty || o.translateY)
-    var tx = translate.x
-    var ty = translate.y
-    var relative = new Point(o.relative || o.rx || o.relativeX, o.ry || o.relativeY)
-    var rx = relative.x
-    var ry = relative.y
+    const position = new Point(o.position || o.px || o.positionX || NaN, o.py || o.positionY || NaN)
+    const px = position.x
+    const py = position.y
+    const translate = new Point(o.translate || o.tx || o.translateX, o.ty || o.translateY)
+    const tx = translate.x
+    const ty = translate.y
+    const relative = new Point(o.relative || o.rx || o.relativeX, o.ry || o.relativeY)
+    const rx = relative.x
+    const ry = relative.y
 
     // Populate all of the values
     return {
@@ -74,12 +86,12 @@ export default class Matrix {
   // left matrix, right matrix, target matrix which is overwritten
   static matrixMultiply (l, r, o) {
     // Work out the product directly
-    var a = l.a * r.a + l.c * r.b
-    var b = l.b * r.a + l.d * r.b
-    var c = l.a * r.c + l.c * r.d
-    var d = l.b * r.c + l.d * r.d
-    var e = l.e + l.a * r.e + l.c * r.f
-    var f = l.f + l.b * r.e + l.d * r.f
+    const a = l.a * r.a + l.c * r.b
+    const b = l.b * r.a + l.d * r.b
+    const c = l.a * r.c + l.c * r.d
+    const d = l.b * r.c + l.d * r.d
+    const e = l.e + l.a * r.e + l.c * r.f
+    const f = l.f + l.b * r.e + l.d * r.f
 
     // make sure to use local variables because l/r and o could be the same
     o.a = a
@@ -98,8 +110,8 @@ export default class Matrix {
 
   // Transform around a center point
   aroundO (cx, cy, matrix) {
-    var dx = cx || 0
-    var dy = cy || 0
+    const dx = cx || 0
+    const dy = cy || 0
     return this.translateO(-dx, -dy).lmultiplyO(matrix).translateO(dx, dy)
   }
 
@@ -111,29 +123,29 @@ export default class Matrix {
   // Decomposes this matrix into its affine parameters
   decompose (cx = 0, cy = 0) {
     // Get the parameters from the matrix
-    var a = this.a
-    var b = this.b
-    var c = this.c
-    var d = this.d
-    var e = this.e
-    var f = this.f
+    const a = this.a
+    const b = this.b
+    const c = this.c
+    const d = this.d
+    const e = this.e
+    const f = this.f
 
     // Figure out if the winding direction is clockwise or counterclockwise
-    var determinant = a * d - b * c
-    var ccw = determinant > 0 ? 1 : -1
+    const determinant = a * d - b * c
+    const ccw = determinant > 0 ? 1 : -1
 
     // Since we only shear in x, we can use the x basis to get the x scale
     // and the rotation of the resulting matrix
-    var sx = ccw * Math.sqrt(a * a + b * b)
-    var thetaRad = Math.atan2(ccw * b, ccw * a)
-    var theta = 180 / Math.PI * thetaRad
-    var ct = Math.cos(thetaRad)
-    var st = Math.sin(thetaRad)
+    const sx = ccw * Math.sqrt(a * a + b * b)
+    const thetaRad = Math.atan2(ccw * b, ccw * a)
+    const theta = 180 / Math.PI * thetaRad
+    const ct = Math.cos(thetaRad)
+    const st = Math.sin(thetaRad)
 
     // We can then solve the y basis vector simultaneously to get the other
     // two affine parameters directly from these parameters
-    var lam = (a * c + b * d) / determinant
-    var sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a))
+    const lam = (a * c + b * d) / determinant
+    const sy = ((c * sx) / (lam * a - b)) || ((d * sx) / (lam * b + a))
 
     // Use the translations
     const tx = e - cx + cx * ct * sx + cy * (lam * ct * sx - st * sy)
@@ -164,7 +176,7 @@ export default class Matrix {
   // Check if two matrices are equal
   equals (other) {
     if (other === this) return true
-    var comp = new Matrix(other)
+    const comp = new Matrix(other)
     return closeEnough(this.a, comp.a) && closeEnough(this.b, comp.b)
       && closeEnough(this.c, comp.c) && closeEnough(this.d, comp.d)
       && closeEnough(this.e, comp.e) && closeEnough(this.f, comp.f)
@@ -176,23 +188,31 @@ export default class Matrix {
   }
 
   flipO (axis, around) {
-    return axis === 'x' ? this.scaleO(-1, 1, around, 0)
-      : axis === 'y' ? this.scaleO(1, -1, 0, around)
-      : this.scaleO(-1, -1, axis, around || axis) // Define an x, y flip point
+    return axis === 'x'
+      ? this.scaleO(-1, 1, around, 0)
+      : axis === 'y'
+        ? this.scaleO(1, -1, 0, around)
+        : this.scaleO(-1, -1, axis, around || axis) // Define an x, y flip point
   }
 
   // Initialize
   init (source) {
-    var base = Matrix.fromArray([ 1, 0, 0, 1, 0, 0 ])
+    const base = Matrix.fromArray([ 1, 0, 0, 1, 0, 0 ])
 
     // ensure source as object
-    source = source instanceof Element ? source.matrixify()
-      : typeof source === 'string' ? Matrix.fromArray(source.split(delimiter).map(parseFloat))
-      : Array.isArray(source) ? Matrix.fromArray(source)
-      : (typeof source === 'object' && Matrix.isMatrixLike(source)) ? source
-      : (typeof source === 'object') ? new Matrix().transform(source)
-      : arguments.length === 6 ? Matrix.fromArray([].slice.call(arguments))
-      : base
+    source = source instanceof Element
+      ? source.matrixify()
+      : typeof source === 'string'
+        ? Matrix.fromArray(source.split(delimiter).map(parseFloat))
+        : Array.isArray(source)
+          ? Matrix.fromArray(source)
+          : (typeof source === 'object' && Matrix.isMatrixLike(source))
+            ? source
+            : (typeof source === 'object')
+              ? new Matrix().transform(source)
+              : arguments.length === 6
+                ? Matrix.fromArray([].slice.call(arguments))
+                : base
 
     // Merge the source matrix with the base matrix
     this.a = source.a != null ? source.a : base.a
@@ -212,26 +232,26 @@ export default class Matrix {
   // Inverses matrix
   inverseO () {
     // Get the current parameters out of the matrix
-    var a = this.a
-    var b = this.b
-    var c = this.c
-    var d = this.d
-    var e = this.e
-    var f = this.f
+    const a = this.a
+    const b = this.b
+    const c = this.c
+    const d = this.d
+    const e = this.e
+    const f = this.f
 
     // Invert the 2x2 matrix in the top left
-    var det = a * d - b * c
+    const det = a * d - b * c
     if (!det) throw new Error('Cannot invert ' + this)
 
     // Calculate the top 2x2 matrix
-    var na = d / det
-    var nb = -b / det
-    var nc = -c / det
-    var nd = a / det
+    const na = d / det
+    const nb = -b / det
+    const nc = -c / det
+    const nd = a / det
 
     // Apply the inverted matrix to the top right
-    var ne = -(na * e + nc * f)
-    var nf = -(nb * e + nd * f)
+    const ne = -(na * e + nc * f)
+    const nf = -(nb * e + nd * f)
 
     // Construct the inverted matrix
     this.a = na
@@ -249,8 +269,8 @@ export default class Matrix {
   }
 
   lmultiplyO (matrix) {
-    var r = this
-    var l = matrix instanceof Matrix
+    const r = this
+    const l = matrix instanceof Matrix
       ? matrix
       : new Matrix(matrix)
 
@@ -264,8 +284,8 @@ export default class Matrix {
 
   multiplyO (matrix) {
     // Get the matrices
-    var l = this
-    var r = matrix instanceof Matrix
+    const l = this
+    const r = matrix instanceof Matrix
       ? matrix
       : new Matrix(matrix)
 
@@ -391,17 +411,17 @@ export default class Matrix {
   transform (o) {
     // Check if o is a matrix and then left multiply it directly
     if (Matrix.isMatrixLike(o)) {
-      var matrix = new Matrix(o)
+      const matrix = new Matrix(o)
       return matrix.multiplyO(this)
     }
 
     // Get the proposed transformations and the current transformations
-    var t = Matrix.formatTransforms(o)
-    var current = this
+    const t = Matrix.formatTransforms(o)
+    const current = this
     const { x: ox, y: oy } = new Point(t.ox, t.oy).transform(current)
 
     // Construct the resulting matrix
-    var transformer = new Matrix()
+    const transformer = new Matrix()
       .translateO(t.rx, t.ry)
       .lmultiplyO(current)
       .translateO(-ox, -oy)
@@ -460,8 +480,8 @@ export function screenCTM () {
      for the inner coordinate system when getScreenCTM() is called on nested svgs.
      However all other Browsers do that */
   if (typeof this.isRoot === 'function' && !this.isRoot()) {
-    var rect = this.rect(1, 1)
-    var m = rect.node.getScreenCTM()
+    const rect = this.rect(1, 1)
+    const m = rect.node.getScreenCTM()
     rect.remove()
     return new Matrix(m)
   }

src/types/PathArray.js

@@ -4,7 +4,8 @@ import Box from './Box.js'
 import { pathParser } from '../utils/pathParser.js'
 
 function arrayToString (a) {
-  for (var i = 0, il = a.length, s = ''; i < il; i++) {
+  let s = ''
+  for (let i = 0, il = a.length; i < il; i++) {
     s += a[i][0]
 
     if (a[i][1] != null) {
@@ -49,7 +50,7 @@ export default class PathArray extends SVGArray {
   // Move path string
   move (x, y) {
     // get bounding box of current situation
-    var box = this.bbox()
+    const box = this.bbox()
 
     // get relative offset
     x -= box.x
@@ -99,8 +100,8 @@ export default class PathArray extends SVGArray {
   // Resize path string
   size (width, height) {
     // get bounding box of current situation
-    var box = this.bbox()
-    var i, l
+    const box = this.bbox()
+    let i, l
 
     // If the box width or height is 0 then we ignore
     // transformations on the respective axis

src/types/Point.js

@@ -15,9 +15,11 @@ export default class Point {
     const base = { x: 0, y: 0 }
 
     // ensure source as object
-    const source = Array.isArray(x) ? { x: x[0], y: x[1] }
-      : typeof x === 'object' ? { x: x.x, y: x.y }
-      : { x: x, y: y }
+    const source = Array.isArray(x)
+      ? { x: x[0], y: x[1] }
+      : typeof x === 'object'
+        ? { x: x.x, y: x.y }
+        : { x: x, y: y }
 
     // merge source
     this.x = source.x == null ? base.x : source.x

src/types/PointArray.js

@@ -6,10 +6,10 @@ import Matrix from './Matrix.js'
 export default class PointArray extends SVGArray {
   // Get bounding box of points
   bbox () {
-    var maxX = -Infinity
-    var maxY = -Infinity
-    var minX = Infinity
-    var minY = Infinity
+    let maxX = -Infinity
+    let maxY = -Infinity
+    let minX = Infinity
+    let minY = Infinity
     this.forEach(function (el) {
       maxX = Math.max(el[0], maxX)
       maxY = Math.max(el[1], maxY)
@@ -21,7 +21,7 @@ export default class PointArray extends SVGArray {
 
   // Move point string
   move (x, y) {
-    var box = this.bbox()
+    const box = this.bbox()
 
     // get relative offset
     x -= box.x
@@ -29,7 +29,7 @@ export default class PointArray extends SVGArray {
 
     // move every point
     if (!isNaN(x) && !isNaN(y)) {
-      for (var i = this.length - 1; i >= 0; i--) {
+      for (let i = this.length - 1; i >= 0; i--) {
         this[i] = [ this[i][0] + x, this[i][1] + y ]
       }
     }
@@ -39,7 +39,7 @@ export default class PointArray extends SVGArray {
 
   // Parse point string and flat array
   parse (array = [ 0, 0 ]) {
-    var points = []
+    const points = []
 
     // if it is an array, we flatten it and therefore clone it to 1 depths
     if (array instanceof Array) {
@@ -54,7 +54,7 @@ export default class PointArray extends SVGArray {
     if (array.length % 2 !== 0) array.pop()
 
     // wrap points in two-tuples
-    for (var i = 0, len = array.length; i < len; i = i + 2) {
+    for (let i = 0, len = array.length; i < len; i = i + 2) {
       points.push([ array[i], array[i + 1] ])
     }
 
@@ -63,8 +63,8 @@ export default class PointArray extends SVGArray {
 
   // Resize poly string
   size (width, height) {
-    var i
-    var box = this.bbox()
+    let i
+    const box = this.bbox()
 
     // recalculate position of all points according to new size
     for (i = this.length - 1; i >= 0; i--) {
@@ -87,8 +87,9 @@ export default class PointArray extends SVGArray {
 
   // Convert array to string
   toString () {
+    const array = []
     // convert to a poly point string
-    for (var i = 0, il = this.length, array = []; i < il; i++) {
+    for (let i = 0, il = this.length; i < il; i++) {
       array.push(this[i].join(','))
     }
 

src/types/SVGNumber.js

@@ -83,9 +83,11 @@ export default class SVGNumber {
   }
 
   toString () {
-    return (this.unit === '%' ? ~~(this.value * 1e8) / 1e6
-      : this.unit === 's' ? this.value / 1e3
-      : this.value
+    return (this.unit === '%'
+      ? ~~(this.value * 1e8) / 1e6
+      : this.unit === 's'
+        ? this.value / 1e3
+        : this.value
     ) + this.unit
   }
 

src/utils/adopter.js

@@ -29,7 +29,7 @@ export function makeInstance (element, isHTML = false) {
   }
 
   // Make sure, that HTML elements are created with the correct namespace
-  var wrapper = isHTML ? globals.document.createElement('div') : create('svg')
+  const wrapper = isHTML ? globals.document.createElement('div') : create('svg')
   wrapper.innerHTML = element
 
   // We can use firstChild here because we know,
@@ -58,7 +58,7 @@ export function adopt (node) {
   }
 
   // initialize variables
-  var className = capitalize(node.nodeName || 'Dom')
+  let className = capitalize(node.nodeName || 'Dom')
 
   // Make sure that gradients are adopted correctly
   if (className === 'LinearGradient' || className === 'RadialGradient') {
@@ -102,7 +102,7 @@ export function eid (name) {
 // Deep new id assignment
 export function assignNewId (node) {
   // do the same for SVG child nodes as well
-  for (var i = node.children.length - 1; i >= 0; i--) {
+  for (let i = node.children.length - 1; i >= 0; i--) {
     assignNewId(node.children[i])
   }
 
@@ -116,7 +116,7 @@ export function assignNewId (node) {
 
 // Method for extending objects
 export function extend (modules, methods) {
-  var key, i
+  let key, i
 
   modules = Array.isArray(modules) ? modules : [ modules ]
 

src/utils/pathParser.js

@@ -57,7 +57,7 @@ const pathHandlers = {
 
 const mlhvqtcsaz = 'mlhvqtcsaz'.split('')
 
-for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) {
+for (let i = 0, il = mlhvqtcsaz.length; i < il; ++i) {
   pathHandlers[mlhvqtcsaz[i]] = (function (i) {
     return function (c, p, p0) {
       if (i === 'H') c[0] = c[0] + p.x
@@ -66,7 +66,7 @@ for (var i = 0, il = mlhvqtcsaz.length; i < il; ++i) {
         c[5] = c[5] + p.x
         c[6] = c[6] + p.y
       } else {
-        for (var j = 0, jl = c.length; j < jl; ++j) {
+        for (let j = 0, jl = c.length; j < jl; ++j) {
           c[j] = c[j] + (j % 2 ? p.y : p.x)
         }
       }

src/utils/utils.js

@@ -1,8 +1,8 @@
 // Map function
 export function map (array, block) {
-  var i
-  var il = array.length
-  var result = []
+  let i
+  const il = array.length
+  const result = []
 
   for (i = 0; i < il; i++) {
     result.push(block(array[i]))
@@ -13,9 +13,9 @@ export function map (array, block) {
 
 // Filter function
 export function filter (array, block) {
-  var i
-  var il = array.length
-  var result = []
+  let i
+  const il = array.length
+  const result = []
 
   for (i = 0; i < il; i++) {
     if (block(array[i])) {
@@ -81,18 +81,24 @@ export function proportionalSize (element, width, height, box) {
 export function getOrigin (o, element) {
   const origin = o.origin
   // First check if origin is in ox or originX
-  let ox = o.ox != null ? o.ox
-    : o.originX != null ? o.originX
-    : 'center'
-  let oy = o.oy != null ? o.oy
-    : o.originY != null ? o.originY
-    : 'center'
+  let ox = o.ox != null
+    ? o.ox
+    : o.originX != null
+      ? o.originX
+      : 'center'
+  let oy = o.oy != null
+    ? o.oy
+    : o.originY != null
+      ? o.originY
+      : 'center'
 
   // Then check if origin was used and overwrite in that case
   if (origin != null) {
-    [ ox, oy ] = Array.isArray(origin) ? origin
-      : typeof origin === 'object' ? [ origin.x, origin.y ]
-      : [ origin, origin ]
+    [ ox, oy ] = Array.isArray(origin)
+      ? origin
+      : typeof origin === 'object'
+        ? [ origin.x, origin.y ]
+        : [ origin, origin ]
   }
 
   // Make sure to only call bbox when actually needed
@@ -103,15 +109,19 @@ export function getOrigin (o, element) {
 
     // And only overwrite if string was passed for this specific axis
     if (condX) {
-      ox = ox.includes('left') ? x
-        : ox.includes('right') ? x + width
-        : x + width / 2
+      ox = ox.includes('left')
+        ? x
+        : ox.includes('right')
+          ? x + width
+          : x + width / 2
     }
 
     if (condY) {
-      oy = oy.includes('top') ? y
-        : oy.includes('bottom') ? y + height
-        : y + height / 2
+      oy = oy.includes('top')
+        ? y
+        : oy.includes('bottom')
+          ? y + height
+          : y + height / 2
     }
   }