diff options
author | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2021-01-13 17:26:33 +0100 |
---|---|---|
committer | Ulrich-Matthias Schäfer <ulima.ums@googlemail.com> | 2021-01-13 17:26:33 +0100 |
commit | 4524c20b48abe08e69c25a7382a289592d147496 (patch) | |
tree | 3e475fe673d5acd800180282e84df03d396106f3 /src | |
parent | 4f4dc2afa62cb899a5cae72c359150f8adf27edb (diff) | |
download | svg.js-4524c20b48abe08e69c25a7382a289592d147496.tar.gz svg.js-4524c20b48abe08e69c25a7382a289592d147496.zip |
update dependencies, apply new linter fixes
Diffstat (limited to 'src')
38 files changed, 456 insertions, 384 deletions
diff --git a/src/animation/Animator.js b/src/animation/Animator.js index 21c735c..fc3df10 100644 --- a/src/animation/Animator.js +++ b/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() } diff --git a/src/animation/Controller.js b/src/animation/Controller.js index ae49de9..303fb71 100644 --- a/src/animation/Controller.js +++ b/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) { diff --git a/src/animation/Morphable.js b/src/animation/Morphable.js index 3344480..3f98b8c 100644 --- a/src/animation/Morphable.js +++ b/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) { diff --git a/src/animation/Queue.js b/src/animation/Queue.js index e01c3d6..ba484dc 100644 --- a/src/animation/Queue.js +++ b/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 diff --git a/src/animation/Runner.js b/src/animation/Runner.js index faeeed6..cf18201 100644 --- a/src/animation/Runner.js +++ b/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 () { diff --git a/src/animation/Timeline.js b/src/animation/Timeline.js index 25e6554..928c334 100644 --- a/src/animation/Timeline.js +++ b/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 diff --git a/src/elements/A.js b/src/elements/A.js index 478c36d..173fc92 100644 --- a/src/elements/A.js +++ b/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 } diff --git a/src/elements/Dom.js b/src/elements/Dom.js index c874353..e127f8c 100644 --- a/src/elements/Dom.js +++ b/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) } diff --git a/src/elements/Ellipse.js b/src/elements/Ellipse.js index b993687..7f4e853 100644 --- a/src/elements/Ellipse.js +++ b/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)) diff --git a/src/elements/Image.js b/src/elements/Image.js index 347269c..c51bc9a 100644 --- a/src/elements/Image.js +++ b/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) { diff --git a/src/elements/Line.js b/src/elements/Line.js index 1b72a7d..9350a23 100644 --- a/src/elements/Line.js +++ b/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()) } } diff --git a/src/elements/Marker.js b/src/elements/Marker.js index 56ac3e8..d6f98c8 100644 --- a/src/elements/Marker.js +++ b/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) diff --git a/src/elements/Mask.js b/src/elements/Mask.js index 3d2119e..e43d83f 100644 --- a/src/elements/Mask.js +++ b/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) diff --git a/src/elements/Path.js b/src/elements/Path.js index ae2fac6..2aa0a51 100644 --- a/src/elements/Path.js +++ b/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)) } diff --git a/src/elements/Style.js b/src/elements/Style.js index 62467d8..f7c3c57 100644 --- a/src/elements/Style.js +++ b/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] + ';' } diff --git a/src/elements/Text.js b/src/elements/Text.js index cc8db4a..f716f83 100644 --- a/src/elements/Text.js +++ b/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]) } } diff --git a/src/elements/TextPath.js b/src/elements/TextPath.js index edac399..2a17854 100644 --- a/src/elements/TextPath.js +++ b/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)) { diff --git a/src/elements/Tspan.js b/src/elements/Tspan.js index 59860f7..73cd52d 100644 --- a/src/elements/Tspan.js +++ b/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) { diff --git a/src/modules/core/attr.js b/src/modules/core/attr.js index 52c10a0..d54b235 100644 --- a/src/modules/core/attr.js +++ b/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()) } diff --git a/src/modules/core/event.js b/src/modules/core/event.js index 976e13d..3594fc4 100644 --- a/src/modules/core/event.js +++ b/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) { diff --git a/src/modules/core/poly.js b/src/modules/core/poly.js index d96d1bc..d422028 100644 --- a/src/modules/core/poly.js +++ b/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 diff --git a/src/modules/optional/arrange.js b/src/modules/optional/arrange.js index 30151c1..9aaeef1 100644 --- a/src/modules/optional/arrange.js +++ b/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) diff --git a/src/modules/optional/class.js b/src/modules/optional/class.js index b08c82b..4e544be 100644 --- a/src/modules/optional/class.js +++ b/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(' ')) } diff --git a/src/modules/optional/data.js b/src/modules/optional/data.js index 9986c3d..00bb8ea 100644 --- a/src/modules/optional/data.js +++ b/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) ) } diff --git a/src/modules/optional/memory.js b/src/modules/optional/memory.js index 6478367..459dcf1 100644 --- a/src/modules/optional/memory.js +++ b/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]] } } diff --git a/src/modules/optional/sugar.js b/src/modules/optional/sugar.js index 13806f1..d4c3da5 100644 --- a/src/modules/optional/sugar.js +++ b/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) diff --git a/src/modules/optional/transform.js b/src/modules/optional/transform.js index 68455ed..d8e7381 100644 --- a/src/modules/optional/transform.js +++ b/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) } diff --git a/src/polyfills/innerHTML.js b/src/polyfills/innerHTML.js index 138277e..4f4140b 100644 --- a/src/polyfills/innerHTML.js +++ b/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(/&/, '&').replace(/</, '<').replace('>', '>')) } 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)); diff --git a/src/types/Box.js b/src/types/Box.js index 71d1e2a..f8976d4 100644 --- a/src/types/Box.js +++ b/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 diff --git a/src/types/Color.js b/src/types/Color.js index d5f0efa..c050ecc 100644 --- a/src/types/Color.js +++ b/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) } diff --git a/src/types/Matrix.js b/src/types/Matrix.js index d4f516c..406cb84 100644 --- a/src/types/Matrix.js +++ b/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) } diff --git a/src/types/PathArray.js b/src/types/PathArray.js index e021238..10e7b07 100644 --- a/src/types/PathArray.js +++ b/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 diff --git a/src/types/Point.js b/src/types/Point.js index cb09bf3..f028e6d 100644 --- a/src/types/Point.js +++ b/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 diff --git a/src/types/PointArray.js b/src/types/PointArray.js index 28e649c..69d0cd6 100644 --- a/src/types/PointArray.js +++ b/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(',')) } diff --git a/src/types/SVGNumber.js b/src/types/SVGNumber.js index f9bee28..25c87c1 100644 --- a/src/types/SVGNumber.js +++ b/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 } diff --git a/src/utils/adopter.js b/src/utils/adopter.js index a440e4c..048eb9c 100644 --- a/src/utils/adopter.js +++ b/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 ] diff --git a/src/utils/pathParser.js b/src/utils/pathParser.js index 54e22e6..1d0ee86 100644 --- a/src/utils/pathParser.js +++ b/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) } } diff --git a/src/utils/utils.js b/src/utils/utils.js index 927f044..7d08e22 100644 --- a/src/utils/utils.js +++ b/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 } } |