106 lines
2.9 KiB
JavaScript
106 lines
2.9 KiB
JavaScript
import { getBarHeightAndYAttr } from './draw-utils';
|
|
|
|
export const UNIT_ANIM_DUR = 350;
|
|
export const PATH_ANIM_DUR = 350;
|
|
export const MARKER_LINE_ANIM_DUR = UNIT_ANIM_DUR;
|
|
export const REPLACE_ALL_NEW_DUR = 250;
|
|
|
|
export const STD_EASING = 'easein';
|
|
|
|
export function translate(unit, oldCoord, newCoord, duration) {
|
|
let old = typeof oldCoord === 'string' ? oldCoord : oldCoord.join(', ');
|
|
return [
|
|
unit,
|
|
{transform: newCoord.join(', ')},
|
|
duration,
|
|
STD_EASING,
|
|
"translate",
|
|
{transform: old}
|
|
];
|
|
}
|
|
|
|
export function translateVertLine(xLine, newX, oldX) {
|
|
return translate(xLine, [oldX, 0], [newX, 0], MARKER_LINE_ANIM_DUR);
|
|
}
|
|
|
|
export function translateHoriLine(yLine, newY, oldY) {
|
|
return translate(yLine, [0, oldY], [0, newY], MARKER_LINE_ANIM_DUR);
|
|
}
|
|
|
|
export function animateRegion(rectGroup, newY1, newY2, oldY2) {
|
|
let newHeight = newY1 - newY2;
|
|
let rect = rectGroup.childNodes[0];
|
|
let width = rect.getAttribute("width");
|
|
let rectAnim = [
|
|
rect,
|
|
{ height: newHeight, 'stroke-dasharray': `${width}, ${newHeight}` },
|
|
MARKER_LINE_ANIM_DUR,
|
|
STD_EASING
|
|
];
|
|
|
|
let groupAnim = translate(rectGroup, [0, oldY2], [0, newY2], MARKER_LINE_ANIM_DUR);
|
|
return [rectAnim, groupAnim];
|
|
}
|
|
|
|
export function animateBar(bar, x, yTop, width, offset=0, meta={}) {
|
|
let [height, y] = getBarHeightAndYAttr(yTop, meta.zeroLine);
|
|
y -= offset;
|
|
if(bar.nodeName !== 'rect') {
|
|
let rect = bar.childNodes[0];
|
|
let rectAnim = [
|
|
rect,
|
|
{width: width, height: height},
|
|
UNIT_ANIM_DUR,
|
|
STD_EASING
|
|
];
|
|
|
|
let oldCoordStr = bar.getAttribute("transform").split("(")[1].slice(0, -1);
|
|
let groupAnim = translate(bar, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
|
|
return [rectAnim, groupAnim];
|
|
} else {
|
|
return [[bar, {width: width, height: height, x: x, y: y}, UNIT_ANIM_DUR, STD_EASING]];
|
|
}
|
|
// bar.animate({height: args.newHeight, y: yTop}, UNIT_ANIM_DUR, mina.easein);
|
|
}
|
|
|
|
export function animateDot(dot, x, y) {
|
|
if(dot.nodeName !== 'circle') {
|
|
let oldCoordStr = dot.getAttribute("transform").split("(")[1].slice(0, -1);
|
|
let groupAnim = translate(dot, oldCoordStr, [x, y], MARKER_LINE_ANIM_DUR);
|
|
return [groupAnim];
|
|
} else {
|
|
return [[dot, {cx: x, cy: y}, UNIT_ANIM_DUR, STD_EASING]];
|
|
}
|
|
// dot.animate({cy: yTop}, UNIT_ANIM_DUR, mina.easein);
|
|
}
|
|
|
|
export function animatePath(paths, newXList, newYList, zeroLine) {
|
|
let pathComponents = [];
|
|
|
|
let pointsStr = newYList.map((y, i) => (newXList[i] + ',' + y));
|
|
let pathStr = pointsStr.join("L");
|
|
|
|
const animPath = [paths.path, {d:"M"+pathStr}, PATH_ANIM_DUR, STD_EASING];
|
|
pathComponents.push(animPath);
|
|
|
|
if(paths.region) {
|
|
let regStartPt = `${newXList[0]},${zeroLine}L`;
|
|
let regEndPt = `L${newXList.slice(-1)[0]}, ${zeroLine}`;
|
|
|
|
const animRegion = [
|
|
paths.region,
|
|
{d:"M" + regStartPt + pathStr + regEndPt},
|
|
PATH_ANIM_DUR,
|
|
STD_EASING
|
|
];
|
|
pathComponents.push(animRegion);
|
|
}
|
|
|
|
return pathComponents;
|
|
}
|
|
|
|
export function animatePathStr(oldPath, pathStr) {
|
|
return [oldPath, {d: pathStr}, UNIT_ANIM_DUR, STD_EASING];
|
|
}
|
|
|