tor-browser

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

KeyframesGraphPath.js (3198B)

      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 {
      8  createFactory,
      9  PureComponent,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
     12 const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.mjs");
     13 const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.mjs");
     14 
     15 const ColorPath = createFactory(
     16  require("resource://devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js")
     17 );
     18 const DiscretePath = createFactory(
     19  require("resource://devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js")
     20 );
     21 const DistancePath = createFactory(
     22  require("resource://devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js")
     23 );
     24 
     25 const {
     26  DEFAULT_EASING_HINT_STROKE_WIDTH,
     27  DEFAULT_GRAPH_HEIGHT,
     28  DEFAULT_KEYFRAMES_GRAPH_DURATION,
     29 } = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
     30 
     31 class KeyframesGraphPath extends PureComponent {
     32  static get propTypes() {
     33    return {
     34      getComputedStyle: PropTypes.func.isRequired,
     35      keyframes: PropTypes.array.isRequired,
     36      name: PropTypes.string.isRequired,
     37      simulateAnimation: PropTypes.func.isRequired,
     38      type: PropTypes.string.isRequired,
     39    };
     40  }
     41 
     42  constructor(props) {
     43    super(props);
     44 
     45    this.state = {
     46      componentHeight: 0,
     47      componentWidth: 0,
     48    };
     49  }
     50 
     51  componentDidMount() {
     52    this.updateState();
     53  }
     54 
     55  getPathComponent(type) {
     56    switch (type) {
     57      case "color":
     58        return ColorPath;
     59      case "discrete":
     60        return DiscretePath;
     61      default:
     62        return DistancePath;
     63    }
     64  }
     65 
     66  updateState() {
     67    const thisEl = ReactDOM.findDOMNode(this);
     68    this.setState({
     69      componentHeight: thisEl.parentNode.clientHeight,
     70      componentWidth: thisEl.parentNode.clientWidth,
     71    });
     72  }
     73 
     74  render() {
     75    const { getComputedStyle, keyframes, name, simulateAnimation, type } =
     76      this.props;
     77    const { componentHeight, componentWidth } = this.state;
     78 
     79    if (!componentWidth) {
     80      return dom.svg();
     81    }
     82 
     83    const pathComponent = this.getPathComponent(type);
     84    const strokeWidthInViewBox =
     85      (DEFAULT_EASING_HINT_STROKE_WIDTH / 2 / componentHeight) *
     86      DEFAULT_GRAPH_HEIGHT;
     87 
     88    return dom.svg(
     89      {
     90        className: "keyframes-graph-path",
     91        preserveAspectRatio: "none",
     92        viewBox:
     93          `0 -${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox} ` +
     94          `${DEFAULT_KEYFRAMES_GRAPH_DURATION} ` +
     95          `${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox * 2}`,
     96      },
     97      pathComponent({
     98        componentWidth,
     99        easingHintStrokeWidth: DEFAULT_EASING_HINT_STROKE_WIDTH,
    100        getComputedStyle,
    101        graphHeight: DEFAULT_GRAPH_HEIGHT,
    102        keyframes,
    103        name,
    104        simulateAnimation,
    105        totalDuration: DEFAULT_KEYFRAMES_GRAPH_DURATION,
    106      })
    107    );
    108  }
    109 }
    110 
    111 module.exports = KeyframesGraphPath;