Commit 180f8d2e authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

optimize plot y animation handler

parent 537afd47
......@@ -44,6 +44,11 @@ export function makePlots(): IPlots {
let yCoordsScale: number;
let xCoordsScale: number;
let yAnimationInProgress: boolean;
let yAnimationTargetScale: number;
let yAnimationTargetOffset: number;
let yAnimationStop: () => void;
return Object.freeze({
render,
renderDataSets,
......@@ -148,17 +153,41 @@ export function makePlots(): IPlots {
}
function setYViewRange(scale: number, offset: number): void {
if (scale === yScale && offset === yOffset) {
return;
}
if (yAnimationInProgress) {
if (
yAnimationTargetOffset === offset &&
yAnimationTargetScale === scale
) {
return;
}
yAnimationStop && yAnimationStop();
}
animateYViewRangeChange(scale, offset);
}
function animateYViewRangeChange(targetScale: number, targetOffset: number) {
makeLinearAnimation(
yAnimationInProgress = true;
yAnimationTargetScale = targetScale;
yAnimationTargetOffset = targetOffset;
yAnimationStop = makeLinearAnimation(
[
{ start: yScale, end: targetScale },
{ start: yOffset, end: targetOffset },
],
200,
([nextScale, nextOffset]) => updateYViewRange(nextScale, nextOffset),
() => {
yAnimationInProgress = false;
yAnimationTargetOffset = null;
yAnimationTargetScale = null;
yAnimationStop = null;
},
);
}
......
......@@ -88,16 +88,20 @@ export function makeLinearAnimation(
animatedProps: IAnimatedProp[],
duration: number,
stepHandler: AnimationStepHandler,
) {
onAnimationEnd?: () => void,
): () => void {
const animationStart = Date.now();
const diffs = animatedProps.map(({ start, end }) => end - start);
let animationStepId: any;
const step = () => {
const timeStamp = Date.now() - animationStart;
if (timeStamp >= duration) {
const finalProps = animatedProps.map(prop => prop.end);
stepHandler(finalProps);
onAnimationEnd && onAnimationEnd();
return;
}
......@@ -107,10 +111,11 @@ export function makeLinearAnimation(
);
stepHandler(nextProps);
window.requestAnimationFrame(step);
animationStepId = window.requestAnimationFrame(step);
};
window.requestAnimationFrame(step);
animationStepId = window.requestAnimationFrame(step);
return () => window.cancelAnimationFrame(animationStepId);
}
export function formatNumber(value: number): string {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment