86 lines
2.2 KiB
JavaScript
86 lines
2.2 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.Transition = void 0;
|
|
var _d3Timer = require("@mui/x-charts-vendor/d3-timer");
|
|
/**
|
|
* A resumable transition class inspired by d3-transition.
|
|
* Allows for starting, and stopping and resuming transitions.
|
|
*
|
|
* The transition is started automatically.
|
|
* A transition cannot be restarted after it has finished.
|
|
* Resuming a transition will continue from the point it was stopped, i.e., easing will continue from the point it was
|
|
* stopped.
|
|
*/
|
|
class Transition {
|
|
elapsed = 0;
|
|
timer = null;
|
|
/**
|
|
* Create a new ResumableTransition.
|
|
* @param duration Duration in milliseconds
|
|
* @param easingFn The easing function
|
|
* @param onTick Callback function called on each animation frame with the eased time in range [0, 1].
|
|
*/
|
|
constructor(duration, easingFn, onTick) {
|
|
this.duration = duration;
|
|
this.easingFn = easingFn;
|
|
this.onTickCallback = onTick;
|
|
this.resume();
|
|
}
|
|
get running() {
|
|
return this.timer !== null;
|
|
}
|
|
timerCallback(elapsed) {
|
|
this.elapsed = Math.min(elapsed, this.duration);
|
|
const t = this.duration === 0 ? 1 : this.elapsed / this.duration;
|
|
const easedT = this.easingFn(t);
|
|
|
|
// Call the tick callback with the current value
|
|
this.onTickCallback(easedT);
|
|
if (this.elapsed >= this.duration) {
|
|
this.stop();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Resume the transition
|
|
*/
|
|
resume() {
|
|
if (this.running || this.elapsed >= this.duration) {
|
|
return this;
|
|
}
|
|
|
|
/* If we're resuming the transition, then subtract elapsed to continue the easing. */
|
|
const time = (0, _d3Timer.now)() - this.elapsed;
|
|
this.timer = (0, _d3Timer.timer)(elapsed => this.timerCallback(elapsed), 0, time);
|
|
(0, _d3Timer.timerFlush)();
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Stops the transition.
|
|
*/
|
|
stop() {
|
|
if (!this.running) {
|
|
return this;
|
|
}
|
|
if (this.timer) {
|
|
this.timer.stop();
|
|
this.timer = null;
|
|
}
|
|
return this;
|
|
}
|
|
|
|
/**
|
|
* Immediately finishes the transition and calls the tick callback with the final value.
|
|
*/
|
|
finish() {
|
|
this.stop();
|
|
(0, _d3Timer.timeout)(() => this.timerCallback(this.duration));
|
|
(0, _d3Timer.timerFlush)();
|
|
return this;
|
|
}
|
|
}
|
|
exports.Transition = Transition; |