From b4bd63b3c4a53dbf5072a2d70914dd67389bef15 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 17:05:24 +0800 Subject: [PATCH 01/16] feat: add the paused and progress feature to transition --- README.md | 21 +++++++++++++++++ src/transition/index.js | 4 ++++ src/transition/paused.js | 23 ++++++++++++++++++ src/transition/progress.js | 23 ++++++++++++++++++ src/transition/schedule.js | 13 ++++++++++ test/transition/paused-test.js | 43 ++++++++++++++++++++++++++++++++++ 6 files changed, 127 insertions(+) create mode 100644 src/transition/paused.js create mode 100644 src/transition/progress.js create mode 100644 test/transition/paused-test.js diff --git a/README.md b/README.md index 02221fe..6581103 100644 --- a/README.md +++ b/README.md @@ -362,6 +362,27 @@ If a *value* is not specified, returns the current easing function for the first ### Control Flow +The [paused](#transition_paused) and [progress](#transition_progress) of a transition is configurable in runtime. + +# transition.paused([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/paused.js "Source") + +To pause the transition animation, set the transition paused to `true`, or `false` to resume. he *value* may be specified either as a constant or a function. + +```js +transition.paused(true); +``` + +If a *value* is not specified, returns the current value of the paused for the first (non-null) element in the transition. This is generally useful only if you know that the transition contains exactly one element. + + +# transition.progress([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/progress.js "Source") + +The progress is a value between 0(begin) to 1(end). You can set the progress of the transition at any time, but you can only get the progress on paused status. + +```js +transition.progress(0.5); +``` + For advanced usage, transitions provide methods for custom control flow. # transition.end() [<>](https://github.com/d3/d3-transition/blob/master/src/transition/end.js "Source") diff --git a/src/transition/index.js b/src/transition/index.js index 59acc31..01f8bec 100644 --- a/src/transition/index.js +++ b/src/transition/index.js @@ -18,6 +18,8 @@ import transition_textTween from "./textTween.js"; import transition_transition from "./transition.js"; import transition_tween from "./tween.js"; import transition_end from "./end.js"; +import transition_paused from "./paused.js"; +import transition_progress from "./progress.js"; var id = 0; @@ -63,6 +65,8 @@ Transition.prototype = transition.prototype = { tween: transition_tween, delay: transition_delay, duration: transition_duration, + paused: transition_paused, + progress: transition_progress, ease: transition_ease, end: transition_end }; diff --git a/src/transition/paused.js b/src/transition/paused.js new file mode 100644 index 0000000..e4040ed --- /dev/null +++ b/src/transition/paused.js @@ -0,0 +1,23 @@ +import {get} from "./schedule.js"; + +function pausedFunction(id, value) { + return function() { + get(this, id).paused = Boolean(value.apply(this, arguments)); + }; +} + +function pausedConstant(id, value) { + return value = Boolean(value), function() { + get(this, id).paused = value; + }; +} + +export default function(value) { + var id = this._id; + + return arguments.length + ? this.each((typeof value === "function" + ? pausedFunction + : pausedConstant)(id, value)) + : get(this.node(), id).paused; +} diff --git a/src/transition/progress.js b/src/transition/progress.js new file mode 100644 index 0000000..34b05f3 --- /dev/null +++ b/src/transition/progress.js @@ -0,0 +1,23 @@ +import {get} from "./schedule.js"; + +function progressFunction(id, value) { + return function() { + get(this, id).progress = +value.apply(this, arguments); + }; +} + +function progressConstant(id, value) { + return value = +value, function() { + get(this, id).progress = value; + }; +} + +export default function(value) { + var id = this._id; + + return arguments.length + ? this.each((typeof value === "function" + ? progressFunction + : progressConstant)(id, value)) + : get(this.node(), id).progress; +} diff --git a/src/transition/schedule.js b/src/transition/schedule.js index f4e88d7..841e30d 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -127,7 +127,20 @@ function create(node, id, self) { tween.length = j + 1; } + function getProgress(elapsed) { + if (self.paused) { + if (self.progress >= 0) elapsed = self.progress * self.duration; + else self.progress = elapsed / self.duration; + } else if (self.progress >= 0) { + self.timer.restart(tick, 0, self.time + self.progress * self.duration); + elapsed = self.progress = -1; + } + return elapsed; + } + function tick(elapsed) { + elapsed = getProgress(elapsed); + if (elapsed < 0) return; var t = elapsed < self.duration ? self.ease.call(null, elapsed / self.duration) : (self.timer.restart(stop), self.state = ENDING, 1), i = -1, n = tween.length; diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js new file mode 100644 index 0000000..cafc54a --- /dev/null +++ b/test/transition/paused-test.js @@ -0,0 +1,43 @@ +var tape = require("tape"), + jsdom = require("../jsdom"), + d3_ease = require("d3-ease"), + d3_timer = require("d3-timer"), + d3_interpolate = require("d3-interpolate"), + d3_selection = require("d3-selection"); + +require("../../"); + +tape("transition.paused(true) allows pause the transition animation", function(test) { + var root = jsdom().documentElement, + ease = d3_ease.easeCubic, + tElapsed, + duration = 100, + interpolate = d3_interpolate.interpolateNumber(0, 100), + selection = d3_selection.select(root).attr("t", 0), + transition = selection.transition().duration(duration).attr("t", 100).on("end", ended); + var beginTime = d3_timer.now(); + + d3_timer.timeout(function(elapsed) { + transition.paused(true); + test.strictEqual(root.__transition[transition._id].paused, true); + test.strictEqual(transition.paused(), true); + test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(elapsed / duration))); + tElapsed = elapsed; + }, 50); + + d3_timer.timeout(function(elapsed) { + var progress = root.__transition[transition._id].progress; + test.strictEqual(transition.progress(), progress); + test.ok(progress >= 0.5); + test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(progress))); + transition.paused(false); + test.strictEqual(root.__transition[transition._id].paused, false); + test.strictEqual(transition.paused(), false); + }, 150); + + function ended() { + var t = d3_timer.now() - beginTime; + test.ok(t > 150); + test.end(); + } +}); From 41cdb089332462995ad0f0170cb768a4fa7242f0 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 17:23:12 +0800 Subject: [PATCH 02/16] fix: can get progress on runtime now --- README.md | 2 +- src/transition/schedule.js | 3 ++- test/transition/paused-test.js | 36 ++++++++++++++++++++++++++++++++-- 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6581103..6b3336c 100644 --- a/README.md +++ b/README.md @@ -377,7 +377,7 @@ If a *value* is not specified, returns the current value of the paused for the f # transition.progress([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/progress.js "Source") -The progress is a value between 0(begin) to 1(end). You can set the progress of the transition at any time, but you can only get the progress on paused status. +The progress is a value between 0(begin) to 1(end). You can set the progress of the transition at any time, Note: the value is negative if get the progress on the runtime status. ```js transition.progress(0.5); diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 841e30d..fde6ea4 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -134,7 +134,8 @@ function create(node, id, self) { } else if (self.progress >= 0) { self.timer.restart(tick, 0, self.time + self.progress * self.duration); elapsed = self.progress = -1; - } + } else + self.progress = - (elapsed / self.duration); return elapsed; } diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index cafc54a..e3dab4f 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -10,7 +10,6 @@ require("../../"); tape("transition.paused(true) allows pause the transition animation", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, - tElapsed, duration = 100, interpolate = d3_interpolate.interpolateNumber(0, 100), selection = d3_selection.select(root).attr("t", 0), @@ -22,7 +21,6 @@ tape("transition.paused(true) allows pause the transition animation", function(t test.strictEqual(root.__transition[transition._id].paused, true); test.strictEqual(transition.paused(), true); test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(elapsed / duration))); - tElapsed = elapsed; }, 50); d3_timer.timeout(function(elapsed) { @@ -41,3 +39,37 @@ tape("transition.paused(true) allows pause the transition animation", function(t test.end(); } }); + +tape.only("transition.progress() allows get the progrss of the transition animation", function(test) { + var root = jsdom().documentElement, + ease = d3_ease.easeCubic, + duration = 100, + interpolate = d3_interpolate.interpolateNumber(0, 100), + selection = d3_selection.select(root).attr("t", 0), + transition = selection.transition().duration(duration).attr("t", 100).on("end", ended); + var beginTime = d3_timer.now(); + + d3_timer.timeout(function(elapsed) { + // get the progress on runtime + var progress = root.__transition[transition._id].progress; + test.strictEqual(transition.progress(), progress); + test.ok(progress < 0); + test.ok(Math.abs(progress) >= 0.5); + test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(-progress))); + transition.paused(true); + }, 50); + + d3_timer.timeout(function(elapsed) { + var progress = root.__transition[transition._id].progress; + test.strictEqual(transition.progress(), progress); + test.ok(progress >= 0.5); + test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(progress))); + transition.paused(false); + }, 150); + + function ended() { + var t = d3_timer.now() - beginTime; + test.ok(t > 150); + test.end(); + } +}); From 0cfb5560acc8cde5efc3c17d557b46c07b935e92 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 17:24:46 +0800 Subject: [PATCH 03/16] test: remove debug only --- test/transition/paused-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index e3dab4f..933b8fc 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -40,7 +40,7 @@ tape("transition.paused(true) allows pause the transition animation", function(t } }); -tape.only("transition.progress() allows get the progrss of the transition animation", function(test) { +tape("transition.progress() allows get the progrss of the transition animation", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 100, From 01fd96d708c8d751ba999a8d71a1d3acbdde3910 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 17:55:37 +0800 Subject: [PATCH 04/16] fix: progress can return positive value always now --- README.md | 2 +- src/transition/progress.js | 7 ++++++- src/transition/schedule.js | 5 ++++- test/transition/paused-test.js | 12 ++++++++---- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 6b3336c..e3cb615 100644 --- a/README.md +++ b/README.md @@ -377,7 +377,7 @@ If a *value* is not specified, returns the current value of the paused for the f # transition.progress([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/progress.js "Source") -The progress is a value between 0(begin) to 1(end). You can set the progress of the transition at any time, Note: the value is negative if get the progress on the runtime status. +The progress is a value between 0(begin) to 1(end). You can set or get the progress of the transition at any time. ```js transition.progress(0.5); diff --git a/src/transition/progress.js b/src/transition/progress.js index 34b05f3..4c3afbf 100644 --- a/src/transition/progress.js +++ b/src/transition/progress.js @@ -12,6 +12,11 @@ function progressConstant(id, value) { }; } +function abs(value) { + if (value < 0) value = -value; + return value; +} + export default function(value) { var id = this._id; @@ -19,5 +24,5 @@ export default function(value) { ? this.each((typeof value === "function" ? progressFunction : progressConstant)(id, value)) - : get(this.node(), id).progress; + : abs(get(this.node(), id).progress); } diff --git a/src/transition/schedule.js b/src/transition/schedule.js index fde6ea4..11bf85c 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -134,8 +134,11 @@ function create(node, id, self) { } else if (self.progress >= 0) { self.timer.restart(tick, 0, self.time + self.progress * self.duration); elapsed = self.progress = -1; - } else + } else if (elapsed >= self.duration) { + self.progress = -1; + } else { self.progress = - (elapsed / self.duration); + } return elapsed; } diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 933b8fc..6e0635c 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -48,20 +48,23 @@ tape("transition.progress() allows get the progrss of the transition animation", selection = d3_selection.select(root).attr("t", 0), transition = selection.transition().duration(duration).attr("t", 100).on("end", ended); var beginTime = d3_timer.now(); + var oldProgress; d3_timer.timeout(function(elapsed) { // get the progress on runtime - var progress = root.__transition[transition._id].progress; + var progress = -root.__transition[transition._id].progress; test.strictEqual(transition.progress(), progress); - test.ok(progress < 0); - test.ok(Math.abs(progress) >= 0.5); - test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(-progress))); + test.ok(progress >= 0.5); + test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(progress))); transition.paused(true); + oldProgress = progress; + transition.progress(progress); }, 50); d3_timer.timeout(function(elapsed) { var progress = root.__transition[transition._id].progress; test.strictEqual(transition.progress(), progress); + test.strictEqual(oldProgress, progress); test.ok(progress >= 0.5); test.strictEqual(Number(root.getAttribute("t")), interpolate(ease(progress))); transition.paused(false); @@ -70,6 +73,7 @@ tape("transition.progress() allows get the progrss of the transition animation", function ended() { var t = d3_timer.now() - beginTime; test.ok(t > 150); + test.strictEqual(transition.progress(), 1); test.end(); } }); From e15397d79dd2e7bcc5d9b642fcf921f0750ddbab Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 18:35:22 +0800 Subject: [PATCH 05/16] feat: add progress event to transition --- README.md | 1 + src/transition/schedule.js | 21 ++++++++++------ test/transition/paused-test.js | 45 ++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index e3cb615..af73351 100644 --- a/README.md +++ b/README.md @@ -394,6 +394,7 @@ Returns a promise that resolves when every selected element finishes transitioni Adds or removes a *listener* to each selected element for the specified event *typenames*. The *typenames* is one of the following string event types: * `start` - when the transition starts. +* `progress` - notify the the transition progress. * `end` - when the transition ends. * `interrupt` - when the transition is interrupted. * `cancel` - when the transition is cancelled. diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 11bf85c..4ac6f1d 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -1,7 +1,7 @@ import {dispatch} from "d3-dispatch"; import {timer, timeout} from "d3-timer"; -var emptyOn = dispatch("start", "end", "cancel", "interrupt"); +var emptyOn = dispatch("start", "end", "cancel", "interrupt", "progress"); var emptyTween = []; export var CREATED = 0; @@ -129,15 +129,22 @@ function create(node, id, self) { function getProgress(elapsed) { if (self.paused) { - if (self.progress >= 0) elapsed = self.progress * self.duration; - else self.progress = elapsed / self.duration; + if (self.progress >= 0) { + elapsed = self.progress * self.duration; + } else { + self.progress = elapsed / self.duration; + self.on.call("progress", node, node.__data__, self.index, self.group, self.progress); + } } else if (self.progress >= 0) { self.timer.restart(tick, 0, self.time + self.progress * self.duration); - elapsed = self.progress = -1; - } else if (elapsed >= self.duration) { - self.progress = -1; + elapsed = self.progress = - (self.progress + 1e-10); } else { - self.progress = - (elapsed / self.duration); + if (elapsed >= self.duration) { + self.progress = -1; + } else { + self.progress = - (elapsed / self.duration); + } + self.on.call("progress", node, node.__data__, self.index, self.group, -self.progress); } return elapsed; } diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 6e0635c..56e5ac6 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -77,3 +77,48 @@ tape("transition.progress() allows get the progrss of the transition animation", test.end(); } }); + +tape("transition.on(\"progress\", listener) event to notify animation progress", function(test) { + var root = jsdom().documentElement, + duration = 100, + selection = d3_selection.select(root).attr("t", 0), + transition = selection.transition().duration(duration).attr("t", 100) + .on('progress', onProgress) + .on("end", ended); + var beginTime = d3_timer.now(); + var oldProgress; + var lastProgress = 0; + + d3_timer.timeout(function(elapsed) { + // get the progress on runtime + var progress = -root.__transition[transition._id].progress; + test.strictEqual(transition.progress(), progress); + test.strictEqual(lastProgress, progress); + test.ok(progress >= 0.5); + transition.paused(true); + oldProgress = progress; + transition.progress(progress); + }, 50); + + d3_timer.timeout(function(elapsed) { + var progress = root.__transition[transition._id].progress; + test.strictEqual(transition.progress(), progress); + test.strictEqual(oldProgress, progress); + test.strictEqual(lastProgress, progress); + test.ok(progress >= 0.5); + transition.paused(false); + }, 150); + + function onProgress(data, index, grp, progress) { + test.ok(progress > lastProgress, progress); + lastProgress = progress; + } + + function ended() { + var t = d3_timer.now() - beginTime; + test.ok(t > 150); + test.strictEqual(transition.progress(), 1); + test.strictEqual(lastProgress, 1); + test.end(); + } +}); From 3452f5f2835b9f4b53c6784e3074646ef0bcab4d Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 19:06:18 +0800 Subject: [PATCH 06/16] fix: progress event should work on paused status --- src/transition/schedule.js | 3 +++ test/transition/paused-test.js | 39 +++++++++++++++++++++++++++++++++- 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 4ac6f1d..0b73cac 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -133,7 +133,10 @@ function create(node, id, self) { elapsed = self.progress * self.duration; } else { self.progress = elapsed / self.duration; + } + if (self._lastprogress !== self.progress) { self.on.call("progress", node, node.__data__, self.index, self.group, self.progress); + self._lastprogress = self.progress; } } else if (self.progress >= 0) { self.timer.restart(tick, 0, self.time + self.progress * self.duration); diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 56e5ac6..2470f79 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -110,7 +110,7 @@ tape("transition.on(\"progress\", listener) event to notify animation progress", }, 150); function onProgress(data, index, grp, progress) { - test.ok(progress > lastProgress, progress); + test.ok(progress >= lastProgress, `${progress} >= ${lastProgress}`); lastProgress = progress; } @@ -122,3 +122,40 @@ tape("transition.on(\"progress\", listener) event to notify animation progress", test.end(); } }); + +tape("transition.on(\"progress\", listener) event should work on paused status", function(test) { + var root = jsdom().documentElement, + duration = 100, + selection = d3_selection.select(root).attr("t", 0), + transition = selection.transition().duration(duration).attr("t", 100).paused(true) + .on('progress', onProgress) + .on("end", ended); + var beginTime = d3_timer.now(); + var progresses = []; + + d3_timer.timeout(function(elapsed) { + test.ok(progresses.length); + test.strictEqual(transition.progress(), progresses[0]); + transition.progress(0.2); + }, 50); + + d3_timer.timeout(function(elapsed) { + test.ok(progresses.length === 2, `progresses.length(${progresses.length}) === 2`); + test.strictEqual(transition.progress(), progresses[1]); + transition.progress(1); + }, 100); + + function onProgress(data, index, grp, progress) { + progresses.push(progress); + } + + function ended() { + var t = d3_timer.now() - beginTime; + test.ok(t >= 100); + test.ok(t < 150); + test.ok(progresses.length === 3, `progresses.length(${progresses.length}) === 3`); + test.strictEqual(progresses[2], 1); + test.strictEqual(transition.progress(), 1); + test.end(); + } +}); From 919ffa5a061d73fdb5c839791f19bfd0aa10d981 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Wed, 11 Mar 2020 19:25:25 +0800 Subject: [PATCH 07/16] perf: do not repaint when paused --- src/transition/schedule.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 0b73cac..68d7f69 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -130,7 +130,7 @@ function create(node, id, self) { function getProgress(elapsed) { if (self.paused) { if (self.progress >= 0) { - elapsed = self.progress * self.duration; + elapsed = self._lastprogress !== self.progress ? self.progress * self.duration : -1; } else { self.progress = elapsed / self.duration; } From ab0d02e7fca6cd0f8a4aba75e4e9438c303a2f6e Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 08:55:53 +0800 Subject: [PATCH 08/16] doc: README typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index af73351..9980adb 100644 --- a/README.md +++ b/README.md @@ -366,7 +366,7 @@ The [paused](#transition_paused) and [progress](#transition_progress) of a trans # transition.paused([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/paused.js "Source") -To pause the transition animation, set the transition paused to `true`, or `false` to resume. he *value* may be specified either as a constant or a function. +To pause the transition animation, set the transition paused to `true`, or `false` to resume. The *value* may be specified either as a constant or a function. ```js transition.paused(true); From 8c0787e1ce99b69cda89c6b1a33befc0ce18dbbb Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 08:56:42 +0800 Subject: [PATCH 09/16] docs: README typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9980adb..f248c4d 100644 --- a/README.md +++ b/README.md @@ -377,7 +377,7 @@ If a *value* is not specified, returns the current value of the paused for the f # transition.progress([value]) [<>](https://github.com/d3/d3-transition/blob/master/src/transition/progress.js "Source") -The progress is a value between 0(begin) to 1(end). You can set or get the progress of the transition at any time. +The progress is a value between 0 (begin) to 1 (end). You can set or get the progress of the transition at any time. ```js transition.progress(0.5); From d78dea7702f4e810913496de11962ddc362ba618 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 08:59:25 +0800 Subject: [PATCH 10/16] test: typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- test/transition/paused-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 2470f79..37fada9 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -40,7 +40,7 @@ tape("transition.paused(true) allows pause the transition animation", function(t } }); -tape("transition.progress() allows get the progrss of the transition animation", function(test) { +tape("transition.progress() allows to get the progress of the transition animation", function(test) { var root = jsdom().documentElement, ease = d3_ease.easeCubic, duration = 100, From 90fee7279a4f6da406573f447840993ffadaaeac Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 09:00:33 +0800 Subject: [PATCH 11/16] test: keep double quote instead of single quote typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- test/transition/paused-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 37fada9..ae69fbb 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -83,7 +83,7 @@ tape("transition.on(\"progress\", listener) event to notify animation progress", duration = 100, selection = d3_selection.select(root).attr("t", 0), transition = selection.transition().duration(duration).attr("t", 100) - .on('progress', onProgress) + .on("progress", onProgress) .on("end", ended); var beginTime = d3_timer.now(); var oldProgress; From 7cb791b879ccabccd427bce65fb16d9e6551a95c Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 09:01:28 +0800 Subject: [PATCH 12/16] test: keep double quote instead of single quote typo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- test/transition/paused-test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index ae69fbb..2f6ad96 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -128,7 +128,7 @@ tape("transition.on(\"progress\", listener) event should work on paused status", duration = 100, selection = d3_selection.select(root).attr("t", 0), transition = selection.transition().duration(duration).attr("t", 100).paused(true) - .on('progress', onProgress) + .on("progress", onProgress) .on("end", ended); var beginTime = d3_timer.now(); var progresses = []; From 6db856a1d0956da8a3de1524389544b18b0f977d Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 09:01:45 +0800 Subject: [PATCH 13/16] docs: Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f248c4d..e83c34c 100644 --- a/README.md +++ b/README.md @@ -394,7 +394,7 @@ Returns a promise that resolves when every selected element finishes transitioni Adds or removes a *listener* to each selected element for the specified event *typenames*. The *typenames* is one of the following string event types: * `start` - when the transition starts. -* `progress` - notify the the transition progress. +* `progress` - notify when the transition progresses. * `end` - when the transition ends. * `interrupt` - when the transition is interrupted. * `cancel` - when the transition is cancelled. From fa950b34c9db61d287ce5dc2cea0d90ff155cf6c Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 12:52:14 +0800 Subject: [PATCH 14/16] test: add test pause animation feature --- test/transition/paused-test.js | 38 ++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index 2f6ad96..ee8db93 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -159,3 +159,41 @@ tape("transition.on(\"progress\", listener) event should work on paused status", test.end(); } }); + +tape.only("transition.progress(true) should pause the animation", function(test) { + var root = jsdom().documentElement, + duration = 1500, + selection = d3_selection.select(root).attr("t", 0), + transition = selection.transition().duration(duration).attr("t", 100) + .on("progress", onProgress) + .on("end", ended); + var needCheck = 0; + var lastProgress; + var lastProgress2; + + d3_timer.timeout(function(elapsed) { + transition.paused(true); + lastProgress = transition.progress(); + test.ok(lastProgress >= 0.5, "lastProgress should >= 0.5"); + test.ok(lastProgress <= 0.6, "lastProgress should <= 0.6"); + }, 750); + + d3_timer.timeout(function(elapsed) { + needCheck = 1; + transition.paused(false); + }, 1600); + + function onProgress(data, index, grp, progress) { + if (needCheck && needCheck <=2) { + if (needCheck === 2) lastProgress2 = progress; + test.ok(progress - lastProgress <= 0.1, "(progress - lastProgress) should <= 0.1 "); + needCheck++; + } + } + + function ended() { + test.ok(typeof lastProgress2 === 'number', 'already checked'); + test.strictEqual(transition.progress(), 1, 'progress should be end'); + test.end(); + } +}); From bc061cda20d0cfa3bcef4b4eceebcecacd032256 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 13:39:54 +0800 Subject: [PATCH 15/16] fix: elapsed error after resume animation --- src/transition/schedule.js | 5 +++-- test/transition/paused-test.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 68d7f69..60fa3e0 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -139,8 +139,9 @@ function create(node, id, self) { self._lastprogress = self.progress; } } else if (self.progress >= 0) { - self.timer.restart(tick, 0, self.time + self.progress * self.duration); - elapsed = self.progress = - (self.progress + 1e-10); + elapsed = self.progress * self.duration; + self.timer.restart(tick, 0, self.time + elapsed); + self.progress = - (self.progress + 1e-10); } else { if (elapsed >= self.duration) { self.progress = -1; diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index ee8db93..c2c909b 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -160,7 +160,7 @@ tape("transition.on(\"progress\", listener) event should work on paused status", } }); -tape.only("transition.progress(true) should pause the animation", function(test) { +tape("transition.progress(true) should pause the animation", function(test) { var root = jsdom().documentElement, duration = 1500, selection = d3_selection.select(root).attr("t", 0), From 401f29934c6073aebf858a30d8c0d0f1b547cd88 Mon Sep 17 00:00:00 2001 From: Riceball LEE Date: Thu, 9 Jul 2020 15:01:29 +0800 Subject: [PATCH 16/16] fix: elapsed time error after sleep --- src/transition/schedule.js | 4 ++-- test/transition/paused-test.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/transition/schedule.js b/src/transition/schedule.js index 60fa3e0..290de8a 100644 --- a/src/transition/schedule.js +++ b/src/transition/schedule.js @@ -139,9 +139,9 @@ function create(node, id, self) { self._lastprogress = self.progress; } } else if (self.progress >= 0) { - elapsed = self.progress * self.duration; + elapsed = elapsed - (self.progress * self.duration); self.timer.restart(tick, 0, self.time + elapsed); - self.progress = - (self.progress + 1e-10); + elapsed = self.progress = - (self.progress + 1e-10); } else { if (elapsed >= self.duration) { self.progress = -1; diff --git a/test/transition/paused-test.js b/test/transition/paused-test.js index c2c909b..d419ea5 100644 --- a/test/transition/paused-test.js +++ b/test/transition/paused-test.js @@ -162,7 +162,7 @@ tape("transition.on(\"progress\", listener) event should work on paused status", tape("transition.progress(true) should pause the animation", function(test) { var root = jsdom().documentElement, - duration = 1500, + duration = 2000, selection = d3_selection.select(root).attr("t", 0), transition = selection.transition().duration(duration).attr("t", 100) .on("progress", onProgress) @@ -174,14 +174,14 @@ tape("transition.progress(true) should pause the animation", function(test) { d3_timer.timeout(function(elapsed) { transition.paused(true); lastProgress = transition.progress(); - test.ok(lastProgress >= 0.5, "lastProgress should >= 0.5"); - test.ok(lastProgress <= 0.6, "lastProgress should <= 0.6"); - }, 750); + test.ok(lastProgress >= 0.25, lastProgress + " progress should >= 0.25"); + test.ok(lastProgress <= 0.35, lastProgress + " progress should <= 0.35"); + }, 600); d3_timer.timeout(function(elapsed) { needCheck = 1; transition.paused(false); - }, 1600); + }, 2100); function onProgress(data, index, grp, progress) { if (needCheck && needCheck <=2) {