@visactor/vrender-animate
Version:
This module provides a graph-based animation system for VRender.
159 lines (155 loc) • 9.77 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: !0
}), exports.StreamLight = void 0;
const vrender_core_1 = require("@visactor/vrender-core"), custom_animate_1 = require("./custom-animate"), vutils_1 = require("@visactor/vutils");
class StreamLight extends custom_animate_1.ACustomAnimate {
constructor(from, to, duration, easing, params) {
super(from, to, duration, easing, params);
}
getEndProps() {
return {};
}
onStart() {
this.target && ("rect" === this.target.type ? this.onStartRect() : "line" === this.target.type ? this.onStartLineOrArea("line") : "area" === this.target.type && this.onStartLineOrArea("area"));
}
onStartLineOrArea(type) {
var _a;
const root = this.target.attachShadow(), line = vrender_core_1.application.graphicService.creator[type](Object.assign({}, null === (_a = this.params) || void 0 === _a ? void 0 : _a.attribute));
this[type] = line, line.pathProxy = new vrender_core_1.CustomPath2D, root.add(line);
}
onStartRect() {
var _a, _b, _c;
const root = this.target.attachShadow(), isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, sizeAttr = isHorizontal ? "height" : "width", otherSizeAttr = isHorizontal ? "width" : "height", size = this.target.AABBBounds[sizeAttr](), y = isHorizontal ? 0 : this.target.AABBBounds.y1, rect = vrender_core_1.application.graphicService.creator.rect(Object.assign(Object.assign({
[sizeAttr]: size,
fill: "#bcdeff",
shadowBlur: 30,
shadowColor: "#bcdeff"
}, null === (_c = this.params) || void 0 === _c ? void 0 : _c.attribute), {
x: 0,
y: y,
[otherSizeAttr]: 0
}));
this.rect = rect, root.add(rect);
}
onBind() {}
onEnd() {
this.target.detachShadow();
}
onUpdate(end, ratio, out) {
return this.rect ? this.onUpdateRect(end, ratio, out) : this.line || this.area ? this.onUpdateLineOrArea(end, ratio, out) : void 0;
}
onUpdateRect(end, ratio, out) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
const isHorizontal = null === (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.isHorizontal) || void 0 === _b || _b, parentAttr = this.target.attribute;
if (isHorizontal) {
const parentWidth = null !== (_d = null !== (_c = parentAttr.width) && void 0 !== _c ? _c : Math.abs(parentAttr.x1 - parentAttr.x)) && void 0 !== _d ? _d : 250, streamLength = null !== (_f = null === (_e = this.params) || void 0 === _e ? void 0 : _e.streamLength) && void 0 !== _f ? _f : parentWidth, maxLength = null !== (_j = null === (_h = null === (_g = this.params) || void 0 === _g ? void 0 : _g.attribute) || void 0 === _h ? void 0 : _h.width) && void 0 !== _j ? _j : 60, startX = -maxLength, currentX = startX + (streamLength - startX) * ratio, x = Math.max(currentX, 0), w = Math.min(Math.min(currentX + maxLength, maxLength), streamLength - currentX), width = w + x > parentWidth ? Math.max(parentWidth - x, 0) : w;
this.rect.setAttributes({
x: x + Math.min(parentAttr.x1 - parentAttr.x, 0),
width: width
}, !1, {
type: vrender_core_1.AttributeUpdateType.ANIMATE_PLAY,
animationState: {
ratio: ratio,
end: end
}
});
} else {
const parentHeight = null !== (_l = null !== (_k = parentAttr.height) && void 0 !== _k ? _k : Math.abs(parentAttr.y1 - parentAttr.y)) && void 0 !== _l ? _l : 250, streamLength = null !== (_o = null === (_m = this.params) || void 0 === _m ? void 0 : _m.streamLength) && void 0 !== _o ? _o : parentHeight, maxLength = null !== (_r = null === (_q = null === (_p = this.params) || void 0 === _p ? void 0 : _p.attribute) || void 0 === _q ? void 0 : _q.height) && void 0 !== _r ? _r : 60, currentY = parentHeight - (streamLength + maxLength) * ratio;
let y = Math.min(currentY, parentHeight);
const h = Math.min(parentHeight - currentY, maxLength);
let height;
y <= 0 ? (height = Math.max(y + h, 0), y = 0) : height = h, this.rect.setAttributes({
y: y + Math.min(parentAttr.y1 - parentAttr.y, 0),
height: height
}, !1, {
type: vrender_core_1.AttributeUpdateType.ANIMATE_PLAY,
animationState: {
ratio: ratio,
end: end
}
});
}
}
onUpdateLineOrArea(end, ratio, out) {
const target = this.line || this.area;
if (!target) return;
const customPath = target.pathProxy, targetLine = this.target;
targetLine.cache || targetLine.cacheArea ? this._onUpdateLineOrAreaWithCache(customPath, targetLine, end, ratio, out) : this._onUpdateLineWithoutCache(customPath, targetLine, end, ratio, out);
const targetAttrs = targetLine.attribute;
target.setAttributes(Object.assign({
stroke: targetAttrs.stroke
}, target.attribute)), target.addUpdateBoundTag();
}
_onUpdateLineOrAreaWithCache(customPath, g, end, ratio, out) {
var _a, _b;
if (customPath.clear(), "line" === g.type) {
let cache = g.cache;
Array.isArray(cache) || (cache = [ cache ]);
const totalLen = cache.reduce(((l, c) => l + c.getLength()), 0), curves = [];
return cache.forEach((c => {
c.curves.forEach((ci => curves.push(ci)));
})), this._updateCurves(customPath, curves, totalLen, ratio);
}
if ("area" === g.type && (null === (_b = null === (_a = g.cacheArea) || void 0 === _a ? void 0 : _a.top) || void 0 === _b ? void 0 : _b.curves)) {
const cache = g.cacheArea, totalLen = cache.top.curves.reduce(((a, b) => a + b.getLength()), 0);
return this._updateCurves(customPath, cache.top.curves, totalLen, ratio);
}
}
_updateCurves(customPath, curves, totalLen, ratio) {
var _a, _b;
const startLen = totalLen * ratio, endLen = Math.min(startLen + (null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength) && void 0 !== _b ? _b : 10), totalLen);
let lastLen = 0, start = !1;
for (let i = 0; i < curves.length; i++) if (!1 !== curves[i].defined) {
const curveItem = curves[i], len = curveItem.getLength(), startPercent = 1 - (lastLen + len - startLen) / len;
let curveForStart, endPercent = 1 - (lastLen + len - endLen) / len;
if (lastLen < startLen && lastLen + len > startLen) if (start = !0, curveItem.p2 && curveItem.p3) {
const [_, curve2] = (0, vrender_core_1.divideCubic)(curveItem, startPercent);
customPath.moveTo(curve2.p0.x, curve2.p0.y), curveForStart = curve2;
} else {
const p = curveItem.getPointAt(startPercent);
customPath.moveTo(p.x, p.y);
}
if (lastLen < endLen && lastLen + len > endLen) {
if (curveItem.p2 && curveItem.p3) {
curveForStart && (endPercent = (endLen - startLen) / curveForStart.getLength());
const [curve1] = (0, vrender_core_1.divideCubic)(curveForStart || curveItem, endPercent);
customPath.bezierCurveTo(curve1.p1.x, curve1.p1.y, curve1.p2.x, curve1.p2.y, curve1.p3.x, curve1.p3.y);
} else {
const p = curveItem.getPointAt(endPercent);
customPath.lineTo(p.x, p.y);
}
break;
}
if (start) if (curveItem.p2 && curveItem.p3) {
const curve = curveForStart || curveItem;
customPath.bezierCurveTo(curve.p1.x, curve.p1.y, curve.p2.x, curve.p2.y, curve.p3.x, curve.p3.y);
} else customPath.lineTo(curveItem.p1.x, curveItem.p1.y);
lastLen += len;
}
}
_onUpdateLineWithoutCache(customPath, line, end, ratio, out) {
var _a, _b;
const {points: points, curveType: curveType} = line.attribute;
if (!points || points.length < 2 || "linear" !== curveType) return;
let totalLen = 0;
for (let i = 1; i < points.length; i++) totalLen += vutils_1.PointService.distancePP(points[i], points[i - 1]);
const startLen = totalLen * ratio, endLen = Math.min(startLen + (null !== (_b = null === (_a = this.params) || void 0 === _a ? void 0 : _a.streamLength) && void 0 !== _b ? _b : 10), totalLen), nextPoints = [];
let lastLen = 0;
for (let i = 1; i < points.length; i++) {
const len = vutils_1.PointService.distancePP(points[i], points[i - 1]);
if (lastLen < startLen && lastLen + len > startLen && nextPoints.push(vutils_1.PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - startLen) / len)),
lastLen < endLen && lastLen + len > endLen) {
nextPoints.push(vutils_1.PointService.pointAtPP(points[i - 1], points[i], 1 - (lastLen + len - endLen) / len));
break;
}
nextPoints.length && nextPoints.push(points[i]), lastLen += len;
}
if (nextPoints.length && !(nextPoints.length < 2)) {
customPath.clear(), customPath.moveTo(nextPoints[0].x, nextPoints[0].y);
for (let i = 1; i < nextPoints.length; i++) customPath.lineTo(nextPoints[i].x, nextPoints[i].y);
}
}
}
exports.StreamLight = StreamLight;
//# sourceMappingURL=streamLight.js.map