summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/animation/utils/timescale.js
blob: 77297f748c3cb73a8a20b40454e406dbcc9f96b2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/* 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 {
  getFormatStr,
} = require("resource://devtools/client/inspector/animation/utils/l10n.js");

// If total duration for all animations is eqaul to or less than
// TIME_FORMAT_MAX_DURATION_IN_MS, the text which expresses time is in milliseconds,
// and seconds otherwise. Use in formatTime function.
const TIME_FORMAT_MAX_DURATION_IN_MS = 4000;

/**
 * TimeScale object holds the total duration, start time and end time and zero position
 * time information for all animations which should be displayed, and is used to calculate
 * the displayed area for each animation.
 */
class TimeScale {
  constructor(animations) {
    let resultCurrentTime = -Number.MAX_VALUE;
    let resultMinStartTime = Infinity;
    let resultMaxEndTime = 0;
    let resultZeroPositionTime = 0;

    for (const animation of animations) {
      const {
        currentTime,
        currentTimeAtCreated,
        delay,
        endTime,
        startTimeAtCreated,
      } = animation.state.absoluteValues;
      let { startTime } = animation.state.absoluteValues;

      const negativeDelay = Math.min(delay, 0);
      let zeroPositionTime = 0;

      // To shift the zero position time is the following two patterns.
      //  * Animation has negative current time which is smaller than negative delay.
      //  * Animation has negative delay.
      // Furthermore, we should override the zero position time if we will need to
      // expand the duration due to this negative current time or negative delay of
      // this target animation.
      if (currentTimeAtCreated < negativeDelay) {
        startTime = startTimeAtCreated;
        zeroPositionTime = Math.abs(currentTimeAtCreated);
      } else if (negativeDelay < 0) {
        zeroPositionTime = Math.abs(negativeDelay);
      }

      if (startTime < resultMinStartTime) {
        resultMinStartTime = startTime;
        // Override the previous calculated zero position only if the duration will be
        // expanded.
        resultZeroPositionTime = zeroPositionTime;
      } else {
        resultZeroPositionTime = Math.max(
          resultZeroPositionTime,
          zeroPositionTime
        );
      }

      resultMaxEndTime = Math.max(resultMaxEndTime, endTime);
      resultCurrentTime = Math.max(resultCurrentTime, currentTime);
    }

    this.minStartTime = resultMinStartTime;
    this.maxEndTime = resultMaxEndTime;
    this.currentTime = resultCurrentTime;
    this.zeroPositionTime = resultZeroPositionTime;
  }

  /**
   *  Convert a distance in % to a time, in the current time scale. The time
   *  will be relative to the zero position time.
   *  i.e., If zeroPositionTime will be negative and specified time is shorter
   *  than the absolute value of zero position time, relative time will be
   *  negative time.
   *
   * @param {Number} distance
   * @return {Number}
   */
  distanceToRelativeTime(distance) {
    return (this.getDuration() * distance) / 100 - this.zeroPositionTime;
  }

  /**
   * Depending on the time scale, format the given time as milliseconds or
   * seconds.
   *
   * @param {Number} time
   * @return {String} The formatted time string.
   */
  formatTime(time) {
    // Ignore negative zero
    if (Math.abs(time) < 1 / 1000) {
      time = 0.0;
    }

    // Format in milliseconds if the total duration is short enough.
    if (this.getDuration() <= TIME_FORMAT_MAX_DURATION_IN_MS) {
      return getFormatStr("timeline.timeGraduationLabel", time.toFixed(0));
    }

    // Otherwise format in seconds.
    return getFormatStr("player.timeLabel", (time / 1000).toFixed(1));
  }

  /**
   * Return entire animations duration.
   *
   * @return {Number} duration
   */
  getDuration() {
    return this.maxEndTime - this.minStartTime;
  }

  /**
   * Return current time of this time scale represents.
   *
   * @return {Number}
   */
  getCurrentTime() {
    return this.currentTime - this.minStartTime;
  }

  /**
   * Return end time of given animation.
   * This time does not include playbackRate and cratedTime.
   * Also, if the animation has infinite iterations, this returns Infinity.
   *
   * @param {Object} animation
   * @return {Numbber} end time
   */
  getEndTime({ state }) {
    return state.iterationCount
      ? state.delay + state.duration * state.iterationCount + state.endDelay
      : Infinity;
  }
}

module.exports = TimeScale;