/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {
FrontClassWithSpec,
registerFront,
} = require(
"resource://devtools/shared/protocol.js");
const {
animationPlayerSpec,
animationsSpec,
} = require(
"resource://devtools/shared/specs/animation.js");
class AnimationPlayerFront
extends FrontClassWithSpec(animationPlayerSpec) {
constructor(conn, targetFront, parentFront) {
super(conn, targetFront, parentFront);
this.state = {};
this.before(
"changed",
this.onChanged.bind(
this));
}
form(form) {
this._form = form;
this.state =
this.initialState;
}
/**
* If the AnimationsActor was given a reference to the WalkerActor previously
* then calling this getter will return the animation target NodeFront.
*/
get animationTargetNodeFront() {
if (!
this._form.animationTargetNodeActorID) {
return null;
}
return this.conn.getFrontByID(
this._form.animationTargetNodeActorID);
}
/**
* Getter for the initial state of the player. Up to date states can be
* retrieved by calling the getCurrentState method.
*/
get initialState() {
return {
type:
this._form.type,
startTime:
this._form.startTime,
currentTime:
this._form.currentTime,
playState:
this._form.playState,
playbackRate:
this._form.playbackRate,
name:
this._form.name,
duration:
this._form.duration,
delay:
this._form.delay,
endDelay:
this._form.endDelay,
iterationCount:
this._form.iterationCount,
iterationStart:
this._form.iterationStart,
easing:
this._form.easing,
fill:
this._form.fill,
direction:
this._form.direction,
animationTimingFunction:
this._form.animationTimingFunction,
isRunningOnCompositor:
this._form.isRunningOnCompositor,
propertyState:
this._form.propertyState,
documentCurrentTime:
this._form.documentCurrentTime,
createdTime:
this._form.createdTime,
currentTimeAtCreated:
this._form.currentTimeAtCreated,
absoluteValues:
this.calculateAbsoluteValues(
this._form),
properties:
this._form.properties,
};
}
/**
* Executed when the AnimationPlayerActor emits a "changed" event. Used to
* update the local knowledge of the state.
*/
onChanged(partialState) {
const { state } =
this.reconstructState(partialState);
this.state = state;
}
/**
* Refresh the current state of this animation on the client from information
* found on the server. Doesn't return anything, just stores the new state.
*/
async refreshState() {
const data = await
this.getCurrentState();
if (
this.currentStateHasChanged) {
this.state = data;
}
}
/**
* getCurrentState interceptor re-constructs incomplete states since the actor
* only sends the values that have changed.
*/
getCurrentState() {
this.currentStateHasChanged =
false;
return super.getCurrentState().then(partialData => {
const { state, hasChanged } =
this.reconstructState(partialData);
this.currentStateHasChanged = hasChanged;
return state;
});
}
reconstructState(data) {
let hasChanged =
false;
for (
const key in
this.state) {
if (
typeof data[key] ===
"undefined") {
data[key] =
this.state[key];
}
else if (data[key] !==
this.state[key]) {
hasChanged =
true;
}
}
data.absoluteValues =
this.calculateAbsoluteValues(data);
return { state: data, hasChanged };
}
calculateAbsoluteValues(data) {
const {
createdTime,
currentTime,
currentTimeAtCreated,
delay,
duration,
endDelay = 0,
fill,
iterationCount,
playbackRate,
} = data;
const toRate = v => v / Math.abs(playbackRate);
const isPositivePlaybackRate = playbackRate > 0;
let absoluteDelay = 0;
let absoluteEndDelay = 0;
let isDelayFilled =
false;
let isEndDelayFilled =
false;
if (isPositivePlaybackRate) {
absoluteDelay = toRate(delay);
absoluteEndDelay = toRate(endDelay);
isDelayFilled = fill ===
"both" || fill ===
"backwards";
isEndDelayFilled = fill ===
"both" || fill ===
"forwards";
}
else {
absoluteDelay = toRate(endDelay);
absoluteEndDelay = toRate(delay);
isDelayFilled = fill ===
"both" || fill ===
"forwards";
isEndDelayFilled = fill ===
"both" || fill ===
"backwards";
}
let endTime = 0;
if (duration === Infinity) {
// Set endTime so as to enable the scrubber with keeping the consinstency of UI
// even the duration was Infinity. In case of delay is longer than zero, handle
// the graph duration as double of the delay amount. In case of no delay, handle
// the duration as 1ms which is short enough so as to make the scrubber movable
// and the limited duration is prioritized.
endTime = absoluteDelay > 0 ? absoluteDelay * 2 : 1;
}
else {
endTime =
absoluteDelay +
toRate(duration * (iterationCount || 1)) +
absoluteEndDelay;
}
const absoluteCreatedTime = isPositivePlaybackRate
? createdTime
: createdTime - endTime;
const absoluteCurrentTimeAtCreated = isPositivePlaybackRate
? currentTimeAtCreated
: endTime - currentTimeAtCreated;
const animationCurrentTime = isPositivePlaybackRate
? currentTime
: endTime - currentTime;
const absoluteCurrentTime =
absoluteCreatedTime + toRate(animationCurrentTime);
const absoluteStartTime = absoluteCreatedTime + Math.min(absoluteDelay, 0);
const absoluteStartTimeAtCreated =
absoluteCreatedTime + absoluteCurrentTimeAtCreated;
// To show whole graph with endDelay, we add negative endDelay amount to endTime.
const endTimeWithNegativeEndDelay = endTime - Math.min(absoluteEndDelay, 0);
const absoluteEndTime = absoluteCreatedTime + endTimeWithNegativeEndDelay;
return {
createdTime: absoluteCreatedTime,
currentTime: absoluteCurrentTime,
currentTimeAtCreated: absoluteCurrentTimeAtCreated,
delay: absoluteDelay,
endDelay: absoluteEndDelay,
endTime: absoluteEndTime,
isDelayFilled,
isEndDelayFilled,
startTime: absoluteStartTime,
startTimeAtCreated: absoluteStartTimeAtCreated,
};
}
}
exports.AnimationPlayerFront = AnimationPlayerFront;
registerFront(AnimationPlayerFront);
class AnimationsFront
extends FrontClassWithSpec(animationsSpec) {
constructor(client, targetFront, parentFront) {
super(client, targetFront, parentFront);
// Attribute name from which to retrieve the actorID out of the target actor's form
this.formAttributeName =
"animationsActor";
}
}
exports.AnimationsFront = AnimationsFront;
registerFront(AnimationsFront);
