@egjs/axes
Version:
A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates. You can easily create a UI that responds to user actions.
256 lines • 11.3 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { getInsidePosition, isCircularable, getCirculatedPos, getDuration, } from "../Coordinate";
import { requestAnimationFrame, cancelAnimationFrame, map, every, filter, equal, roundNumber, getDecimalPlace, inversePow, } from "../utils";
var clamp = function (value, min, max) {
return Math.max(Math.min(value, max), min);
};
var AnimationManager = (function () {
function AnimationManager(_a) {
var options = _a.options, interruptManager = _a.interruptManager, eventManager = _a.eventManager, axisManager = _a.axisManager;
this._options = options;
this.interruptManager = interruptManager;
this.eventManager = eventManager;
this.axisManager = axisManager;
this.animationEnd = this.animationEnd.bind(this);
}
AnimationManager.prototype.getDuration = function (depaPos, destPos, wishDuration) {
var _this = this;
var duration;
if (typeof wishDuration !== "undefined") {
duration = wishDuration;
}
else {
var durations_1 = map(destPos, function (v, k) {
return getDuration(Math.abs(v - depaPos[k]), _this._options.deceleration);
});
duration = Object.keys(durations_1).reduce(function (max, v) { return Math.max(max, durations_1[v]); }, -Infinity);
}
return clamp(duration, this._options.minimumDuration, this._options.maximumDuration);
};
AnimationManager.prototype.getDisplacement = function (velocity) {
var totalVelocity = Math.pow(velocity.reduce(function (total, v) { return total + v * v; }, 0), 1 / velocity.length);
var duration = Math.abs(totalVelocity / -this._options.deceleration);
return velocity.map(function (v) { return (v / 2) * duration; });
};
AnimationManager.prototype.stopAnimation = function (option) {
if (this._animateParam) {
var orgPos_1 = this.axisManager.get();
var pos = this.axisManager.map(orgPos_1, function (v, opt) {
return getCirculatedPos(v, opt.range, opt.circular);
});
if (!every(pos, function (v, k) { return orgPos_1[k] === v; })) {
this.eventManager.triggerChange(pos, orgPos_1, option, !!option);
}
this._animateParam = null;
if (this._raf) {
cancelAnimationFrame(this._raf);
}
this._raf = null;
this.eventManager.triggerAnimationEnd(!!(option === null || option === void 0 ? void 0 : option.event));
}
};
AnimationManager.prototype.getEventInfo = function () {
if (this._animateParam &&
this._animateParam.input &&
this._animateParam.inputEvent) {
return {
input: this._animateParam.input,
event: this._animateParam.inputEvent,
};
}
else {
return null;
}
};
AnimationManager.prototype.restore = function (option) {
var pos = this.axisManager.get();
var destPos = this.axisManager.map(pos, function (v, opt) {
return Math.min(opt.range[1], Math.max(opt.range[0], v));
});
this.stopAnimation();
this.animateTo(destPos, this.getDuration(pos, destPos), option);
};
AnimationManager.prototype.animationEnd = function () {
var beforeParam = this.getEventInfo();
this._animateParam = null;
var circularTargets = this.axisManager.filter(this.axisManager.get(), function (v, opt) { return isCircularable(v, opt.range, opt.circular); });
if (Object.keys(circularTargets).length > 0) {
this.setTo(this.axisManager.map(circularTargets, function (v, opt) {
return getCirculatedPos(v, opt.range, opt.circular);
}));
}
this.interruptManager.setInterrupt(false);
this.eventManager.triggerAnimationEnd(!!beforeParam);
if (this.axisManager.isOutside()) {
this.restore(beforeParam);
}
else {
this.finish(!!beforeParam);
}
};
AnimationManager.prototype.finish = function (isTrusted) {
this._animateParam = null;
this.interruptManager.setInterrupt(false);
this.eventManager.triggerFinish(isTrusted);
};
AnimationManager.prototype.getUserControl = function (param) {
var userWish = param.setTo();
userWish.destPos = this.axisManager.get(userWish.destPos);
userWish.duration = clamp(userWish.duration, this._options.minimumDuration, this._options.maximumDuration);
return userWish;
};
AnimationManager.prototype.animateTo = function (destPos, duration, option) {
var _this = this;
this.stopAnimation();
var param = this._createAnimationParam(destPos, duration, option);
var depaPos = __assign({}, param.depaPos);
var retTrigger = this.eventManager.triggerAnimationStart(param);
var userWish = this.getUserControl(param);
if (!retTrigger &&
this.axisManager.every(userWish.destPos, function (v, opt) {
return isCircularable(v, opt.range, opt.circular);
})) {
console.warn("You can't stop the 'animation' event when 'circular' is true.");
}
if (retTrigger && !equal(userWish.destPos, depaPos)) {
var inputEvent = (option === null || option === void 0 ? void 0 : option.event) || null;
this._animateLoop({
depaPos: depaPos,
destPos: userWish.destPos,
duration: userWish.duration,
delta: this.axisManager.getDelta(depaPos, userWish.destPos),
isTrusted: !!inputEvent,
inputEvent: inputEvent,
input: (option === null || option === void 0 ? void 0 : option.input) || null,
}, function () { return _this.animationEnd(); });
}
};
AnimationManager.prototype.setTo = function (pos, duration) {
if (duration === void 0) { duration = 0; }
var axes = Object.keys(pos);
var orgPos = this.axisManager.get(axes);
if (equal(pos, orgPos)) {
return this;
}
this.interruptManager.setInterrupt(true);
var movedPos = filter(pos, function (v, k) { return orgPos[k] !== v; });
if (!Object.keys(movedPos).length) {
return this;
}
movedPos = this.axisManager.map(movedPos, function (v, opt) {
var range = opt.range, circular = opt.circular;
if (circular && (circular[0] || circular[1])) {
return v;
}
else {
return getInsidePosition(v, range, circular);
}
});
if (equal(movedPos, orgPos)) {
return this;
}
if (duration > 0) {
this.animateTo(movedPos, duration);
}
else {
this.stopAnimation();
this.eventManager.triggerChange(movedPos);
this.finish(false);
}
return this;
};
AnimationManager.prototype.setBy = function (pos, duration) {
if (duration === void 0) { duration = 0; }
return this.setTo(map(this.axisManager.get(Object.keys(pos)), function (v, k) { return v + pos[k]; }), duration);
};
AnimationManager.prototype.setOptions = function (options) {
this._options = __assign(__assign({}, this._options), options);
};
AnimationManager.prototype._createAnimationParam = function (pos, duration, option) {
var depaPos = this.axisManager.get();
var destPos = pos;
var inputEvent = (option === null || option === void 0 ? void 0 : option.event) || null;
return {
depaPos: depaPos,
destPos: destPos,
duration: clamp(duration, this._options.minimumDuration, this._options.maximumDuration),
delta: this.axisManager.getDelta(depaPos, destPos),
inputEvent: inputEvent,
input: (option === null || option === void 0 ? void 0 : option.input) || null,
isTrusted: !!inputEvent,
done: this.animationEnd,
};
};
AnimationManager.prototype._animateLoop = function (param, complete) {
var _this = this;
if (param.duration) {
this._animateParam = __assign(__assign({}, param), { startTime: new Date().getTime() });
var originalIntendedPos_1 = map(param.destPos, function (v) { return v; });
var state_1 = this._initState(this._animateParam);
var loop_1 = function () {
_this._raf = null;
var animateParam = _this._animateParam;
var nextState = _this._getNextState(state_1);
var isCanceled = !_this.eventManager.triggerChange(nextState.pos, state_1.pos);
state_1 = nextState;
if (nextState.finished) {
animateParam.destPos = _this._getFinalPos(animateParam.destPos, originalIntendedPos_1);
if (!equal(animateParam.destPos, _this.axisManager.get(Object.keys(animateParam.destPos)))) {
_this.eventManager.triggerChange(animateParam.destPos, nextState.pos);
}
complete();
return;
}
else if (isCanceled) {
_this.finish(false);
}
else {
_this._raf = requestAnimationFrame(loop_1);
}
};
loop_1();
}
else {
this.eventManager.triggerChange(param.destPos);
complete();
}
};
AnimationManager.prototype._getFinalPos = function (destPos, originalIntendedPos) {
var _this = this;
var ERROR_LIMIT = 0.000001;
var finalPos = map(destPos, function (value, key) {
if (value >= originalIntendedPos[key] - ERROR_LIMIT &&
value <= originalIntendedPos[key] + ERROR_LIMIT) {
return originalIntendedPos[key];
}
else {
var roundUnit = _this._getRoundUnit(value, key);
var result = roundNumber(value, roundUnit);
return result;
}
});
return finalPos;
};
AnimationManager.prototype._getRoundUnit = function (val, key) {
var roundUnit = this._options.round;
var minRoundUnit = null;
if (!roundUnit) {
var options = this.axisManager.getAxisOptions(key);
minRoundUnit = inversePow(Math.max(getDecimalPlace(options.range[0]), getDecimalPlace(options.range[1]), getDecimalPlace(val)));
}
return minRoundUnit || roundUnit;
};
return AnimationManager;
}());
export { AnimationManager };
//# sourceMappingURL=AnimationManager.js.map