From ebf2a8bb395b78b5bc513fb1ec17e1222dcb0f1d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Ulrich-Matthias=20Sch=C3=A4fer?= Date: Thu, 24 May 2018 20:26:59 +0200 Subject: [PATCH] go through specs and make fixes where needed --- gulpfile.js | 1 + spec/SpecRunner.html | 14 ++++++------- spec/spec/morphing.js | 14 ++++++------- spec/spec/runner.js | 48 +++++++++++++++++++++++-------------------- src/morph.js | 45 +++++++++++++++++++++------------------- src/runner.js | 22 ++++++++++++++++---- 6 files changed, 81 insertions(+), 63 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 7f22df3..b14067b 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -87,6 +87,7 @@ var parts = [ // // TODO: ADD THESE // + // 'src/morph.js' // 'src/runner.js' // 'src/timeline.js' ] diff --git a/spec/SpecRunner.html b/spec/SpecRunner.html index 7c69811..5e70186 100644 --- a/spec/SpecRunner.html +++ b/spec/SpecRunner.html @@ -16,7 +16,10 @@ + + + @@ -99,13 +102,8 @@ --> - - - - - - - - + + diff --git a/spec/spec/morphing.js b/spec/spec/morphing.js index 1bc2cd6..63a6cf2 100644 --- a/spec/spec/morphing.js +++ b/spec/spec/morphing.js @@ -1,6 +1,4 @@ describe('Morphing', function () { - var morphing - describe('constructors', function () { it('SVG.Morphable with Number', function () { @@ -128,36 +126,36 @@ describe('Morphing', function () { describe('from()', function () { it('sets the type of the runner', function () { var morpher = new SVG.Morphable().from(5) - expect(this.type()).toBe(SVG.Number) + expect(morpher.type()).toBe(SVG.Number) }) it('sets the from attribute to an array representation of the morphable type', function () { var morpher = new SVG.Morphable().from(5) - expect(this.from()).toEqual(jasmine.arrayContaining([5])) + expect(morpher.from()).toEqual(jasmine.arrayContaining([5])) }) }) describe('type()', function () { it('sets the type of the runner', function () { var morpher = new SVG.Morphable().type(SVG.Number) - expect(this._type).toBe(SVG.Number) + expect(morpher._type).toBe(SVG.Number) }) it('gets the type of the runner', function () { var morpher = new SVG.Morphable().type(SVG.Number) - expect(this.type()).toBe(SVG.Number) + expect(morpher.type()).toBe(SVG.Number) }) }) describe('to()', function () { it('sets the type of the runner', function () { var morpher = new SVG.Morphable().to(5) - expect(this.type()).toBe(SVG.Number) + expect(morpher.type()).toBe(SVG.Number) }) it('sets the from attribute to an array representation of the morphable type', function () { var morpher = new SVG.Morphable().to(5) - expect(this.to()).toEqual(jasmine.arrayContaining([5])) + expect(morpher.to()).toEqual(jasmine.arrayContaining([5])) }) }) }) diff --git a/spec/spec/runner.js b/spec/spec/runner.js index e63c751..b09cd43 100644 --- a/spec/spec/runner.js +++ b/spec/spec/runner.js @@ -3,36 +3,41 @@ describe('SVG.Runner', function () { var initFn = jasmine.createSpy('initFn') var runFn = jasmine.createSpy('runFn') + beforeEach(function () { + initFn.calls.reset() + runFn.calls.reset() + }) + describe('())', function () { it('creates a runner with defaults', function () { var runner = new SVG.Runner() expect(runner instanceof SVG.Runner).toBe(true) - expect(runner._duration).toBe(SVG.timeline.duration) - expect(runner._ease).toBe(SVG.timeline.ease) - expect(runner._stepper).toBe(null) + expect(runner._duration).toBe(SVG.defaults.timeline.duration) + expect(runner._stepper instanceof SVG.Ease).toBe(true) }) it('creates a runner with duration set', function () { var runner = new SVG.Runner(1000) expect(runner instanceof SVG.Runner).toBe(true) expect(runner._duration).toBe(1000) - expect(runner._ease).toBe(SVG.timeline.ease) - expect(runner._stepper).toBe(null) + expect(runner._stepper instanceof SVG.Ease).toBe(true) }) it('creates a runner with controller set', function () { var runner = new SVG.Runner(runFn) expect(runner instanceof SVG.Runner).toBe(true) - expect(runner._duration).toBe(null) - expect(runner._ease).toBe(SVG.timeline.ease) - expect(runner._stepper).toBe(runFn) + expect(runner._duration).toBeFalsy() + expect(runner._stepper instanceof SVG.Controller).toBe(true) }) }) describe('constructors', function () { describe('animate()', function () { it('creates a runner with the element set and schedules it on the timeline', function () { - spyOn(SVG, 'Runner').and.callTrough() + var orginalRunner = SVG.Runner + spyOn(SVG, 'Runner').and.callFake(function() { + return new orginalRunner() + }) var element = SVG('') var runner = element.animate() @@ -49,10 +54,8 @@ describe('SVG.Runner', function () { spyOn(element, 'animate') element.loop() - expect(element.animate).toHaveBeenCalledWith(objectContaining({ - duration: SVG.defaults.timeline.duration, - times: Infinity, - swing: false + expect(element.animate).toHaveBeenCalledWith(jasmine.objectContaining({ + times: Infinity })); }) }) @@ -73,7 +76,7 @@ describe('SVG.Runner', function () { var runner = new SVG.Runner() runner.queue(initFn, runFn, true) - expect(runner.functions[0]).toEqual(jasmine.objectContaining({ + expect(runner._functions[0]).toEqual(jasmine.objectContaining({ alwaysInitialise: true, initialiser: initFn, runner: runFn @@ -106,6 +109,7 @@ describe('SVG.Runner', function () { }) describe('step()', function () { + it('calls initFn once and runFn at every step when alwaysInitialise is false', function() { var runner = new SVG.Runner() runner.queue(initFn, runFn, false) @@ -115,7 +119,7 @@ describe('SVG.Runner', function () { expect(runFn).toHaveBeenCalled() runner.step() - expect(init.calls.count()).toBe(1) + expect(initFn.calls.count()).toBe(1) expect(runFn.calls.count()).toBe(2) }) @@ -143,7 +147,7 @@ describe('SVG.Runner', function () { var runner = new SVG.Runner() runner.queue(initFn, runFn, false) - expect(runner.step()).toBe(true) + expect(runner.step(SVG.defaults.timeline.duration)).toBe(true) }) }) @@ -201,7 +205,7 @@ describe('SVG.Runner', function () { var element = SVG('') var runner2 = element.animate() - expect(runner1.element()).toBe(element) + expect(runner2.element()).toBe(element) }) it('sets an element to be bound to the runner', function () { @@ -220,10 +224,10 @@ describe('SVG.Runner', function () { it('calls queue giving only a function to call on every step', function () { var runner = new SVG.Runner() - spyOn(runner.queue) + spyOn(runner, 'queue') runner.during(runFn) - expect(runner.queue).toHaveBeenCalledWith(null, runFn) + expect(runner.queue).toHaveBeenCalledWith(null, runFn, false) }) }) @@ -235,7 +239,7 @@ describe('SVG.Runner', function () { it('calls step with Infinity as arument', function () { var runner = new SVG.Runner() - spyOn(runner.step) + spyOn(runner, 'step') runner.finish() expect(runner.step).toHaveBeenCalledWith(Infinity) @@ -250,7 +254,7 @@ describe('SVG.Runner', function () { it('reverses the runner by setting the time to the end and going backwards', function () { var runner = new SVG.Runner() - spyOn(runner.time) + spyOn(runner, 'time') runner.reverse() expect(runner.time).toHaveBeenCalledWith(SVG.defaults.timeline.duration) @@ -267,7 +271,7 @@ describe('SVG.Runner', function () { var runner = new SVG.Runner() runner.ease(function () {}) - expect(runner._stepper instanceof SVG.Stepper).toBe(true) + expect(runner._stepper instanceof SVG.Ease).toBe(true) }) }) }) diff --git a/src/morph.js b/src/morph.js index 15b227b..c6e2152 100644 --- a/src/morph.js +++ b/src/morph.js @@ -2,15 +2,11 @@ SVG.Morphable = SVG.invent({ create: function (stepper) { // FIXME: the default stepper does not know about easing - this._stepper = stepper || function (from, to, pos) { - if(typeof from !== 'number') { - return pos < 1 ? from : to - } - return from + (to - from) * pos - } + this._stepper = stepper || new SVG.Ease('-') this._from = null this._to = null + this._type = null this._context = null this.modifier = function(arr) { return arr } }, @@ -27,7 +23,7 @@ SVG.Morphable = SVG.invent({ to: function (val, modifier) { if(val == null) - return this._from + return this._to this._to = this._set(val) this.modifier = modifier || this.modifier @@ -55,20 +51,29 @@ SVG.Morphable = SVG.invent({ _set: function (value) { if(!this._type) { - if (typeof value === 'number') { + var type = typeof value + + if (type === 'number') { this.type(SVG.Number) - } else if (SVG.Color.isColor(value)) { - this.type(SVG.Color) + } else if (type === 'string') { - } else if (SVG.regex.delimiter.test(value)) { - this.type(SVG.regex.pathLetters.test(value) - ? SVG.PathArray - : SVG.Array - ) + if (SVG.Color.isColor(value)) { + this.type(SVG.Color) - } else if (SVG.regex.numberAndUnit.test(value)) { - this.type(SVG.Number) + } else if (SVG.regex.delimiter.test(value)) { + this.type(SVG.regex.pathLetters.test(value) + ? SVG.PathArray + : SVG.Array + ) + + } else if (SVG.regex.numberAndUnit.test(value)) { + this.type(SVG.Number) + + } else { + this.type(SVG.Morphable.NonMorphable) + + } } else if (value in SVG.MorphableTypes) { this.type(value.constructor) @@ -76,8 +81,8 @@ SVG.Morphable = SVG.invent({ } else if (Array.isArray(value)) { this.type(SVG.Array) - } else if (typeof value === 'object') { - this.type(SVG.ObjectBag) + } else if (type === 'object') { + this.type(SVG.Morphable.ObjectBag) } else { this.type(SVG.Morphable.NonMorphable) @@ -198,8 +203,6 @@ SVG.Morphable.ObjectBag = SVG.invent({ this.values.push(keys[i]) this.values.push(objOrArr[keys[i]]) } - - console.log(this.values) }, extend: { diff --git a/src/runner.js b/src/runner.js index fa3df5e..9ed5bbb 100644 --- a/src/runner.js +++ b/src/runner.js @@ -12,8 +12,14 @@ SVG.Runner = SVG.invent({ create: function (options) { + // ensure a default value options = options || SVG.defaults.timeline.duration + // ensure that we get a controller + options = typeof options === 'function' + ? new SVG.Controller(options) : + options + // Declare all of the variables this._element = null this._functions = [] @@ -95,6 +101,7 @@ SVG.Runner = SVG.invent({ */ element: function (element) { + if(element == null) return this._element this._element = element return this }, @@ -153,6 +160,8 @@ SVG.Runner = SVG.invent({ */ time: function (time) { + if (time == null) return this._time + let dt = time - this._time this.step(dt) return this @@ -166,8 +175,8 @@ SVG.Runner = SVG.invent({ // Increment the time and read out the parameters var duration = this._duration - var time = this._time this._time += dt || 16 + var time = this._time // Work out if we are in range to run the function var timeInside = 0 <= time && time <= duration @@ -178,6 +187,7 @@ SVG.Runner = SVG.invent({ // initialise only what needs to be initialised on the rising edge var justStarted = this._last <= 0 && time >= 0 var justFinished = this._last <= duration && finished + this._initialise(justStarted) this._last = time @@ -191,27 +201,31 @@ SVG.Runner = SVG.invent({ : position // If running, ) || finished + // FIXME: for the sake of unifirmity this method should return This + // we can then add a functon isFinished to see if a runner is finished // Work out if we are finished return finished }, finish: function () { + // FIXME: this is wrong as long as step returns a boolean return this.step(Infinity) }, + // TODO // Sets the time to the end time and makes the time advance backwards reverse: function () { - + return this }, // Changes the animation easing function ease: function (fn) { - this._stepper = SVG.Ease(fn) + this._stepper = new SVG.Ease(fn) return this }, active: function (enabled) { - if(active == null) return this._enabled + if(enabled == null) return this._enabled this._enabled = enabled return this }, -- 2.39.5