tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

EffectTimingPath.js (2298B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
      8 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
      9 
     10 const {
     11  createSummaryGraphPathStringFunction,
     12  SummaryGraphHelper,
     13 } = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
     14 const TimingPath = require("resource://devtools/client/inspector/animation/components/graph/TimingPath.js");
     15 
     16 class EffectTimingPath extends TimingPath {
     17  static get propTypes() {
     18    return {
     19      animation: PropTypes.object.isRequired,
     20      durationPerPixel: PropTypes.number.isRequired,
     21      offset: PropTypes.number.isRequired,
     22      simulateAnimation: PropTypes.func.isRequired,
     23      totalDuration: PropTypes.number.isRequired,
     24    };
     25  }
     26 
     27  render() {
     28    const {
     29      animation,
     30      durationPerPixel,
     31      offset,
     32      simulateAnimation,
     33      totalDuration,
     34    } = this.props;
     35 
     36    const { state } = animation;
     37    const effectTiming = Object.assign({}, state, {
     38      iterations: state.iterationCount ? state.iterationCount : Infinity,
     39    });
     40 
     41    const simulatedAnimation = simulateAnimation(null, effectTiming, false);
     42 
     43    if (!simulatedAnimation) {
     44      return null;
     45    }
     46 
     47    const endTime = simulatedAnimation.effect.getComputedTiming().endTime;
     48 
     49    const getValueFunc = time => {
     50      if (time < 0) {
     51        return 0;
     52      }
     53 
     54      simulatedAnimation.currentTime = time < endTime ? time : endTime;
     55      return Math.max(
     56        simulatedAnimation.effect.getComputedTiming().progress,
     57        0
     58      );
     59    };
     60 
     61    const toPathStringFunc = createSummaryGraphPathStringFunction(
     62      endTime,
     63      state.playbackRate
     64    );
     65    const helper = new SummaryGraphHelper(
     66      state,
     67      null,
     68      totalDuration,
     69      durationPerPixel,
     70      getValueFunc,
     71      toPathStringFunc
     72    );
     73 
     74    return dom.g(
     75      {
     76        className: "animation-effect-timing-path",
     77        transform: `translate(${offset})`,
     78      },
     79      super.renderGraph(state, helper)
     80    );
     81  }
     82 }
     83 
     84 module.exports = EffectTimingPath;