Source code
Revision control
Copy as Markdown
Other Tools
/* 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
"use strict";
const {
createFactory,
PureComponent,
} = require("resource://devtools/client/shared/vendor/react.js");
const dom = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
const PropTypes = require("resource://devtools/client/shared/vendor/react-prop-types.js");
const ReactDOM = require("resource://devtools/client/shared/vendor/react-dom.js");
const ColorPath = createFactory(
require("resource://devtools/client/inspector/animation/components/keyframes-graph/ColorPath.js")
);
const DiscretePath = createFactory(
require("resource://devtools/client/inspector/animation/components/keyframes-graph/DiscretePath.js")
);
const DistancePath = createFactory(
require("resource://devtools/client/inspector/animation/components/keyframes-graph/DistancePath.js")
);
const {
DEFAULT_EASING_HINT_STROKE_WIDTH,
DEFAULT_GRAPH_HEIGHT,
DEFAULT_KEYFRAMES_GRAPH_DURATION,
} = require("resource://devtools/client/inspector/animation/utils/graph-helper.js");
class KeyframesGraphPath extends PureComponent {
static get propTypes() {
return {
getComputedStyle: PropTypes.func.isRequired,
keyframes: PropTypes.array.isRequired,
name: PropTypes.string.isRequired,
simulateAnimation: PropTypes.func.isRequired,
type: PropTypes.string.isRequired,
};
}
constructor(props) {
super(props);
this.state = {
componentHeight: 0,
componentWidth: 0,
};
}
componentDidMount() {
this.updateState();
}
getPathComponent(type) {
switch (type) {
case "color":
return ColorPath;
case "discrete":
return DiscretePath;
default:
return DistancePath;
}
}
updateState() {
const thisEl = ReactDOM.findDOMNode(this);
this.setState({
componentHeight: thisEl.parentNode.clientHeight,
componentWidth: thisEl.parentNode.clientWidth,
});
}
render() {
const { getComputedStyle, keyframes, name, simulateAnimation, type } =
this.props;
const { componentHeight, componentWidth } = this.state;
if (!componentWidth) {
return dom.svg();
}
const pathComponent = this.getPathComponent(type);
const strokeWidthInViewBox =
(DEFAULT_EASING_HINT_STROKE_WIDTH / 2 / componentHeight) *
DEFAULT_GRAPH_HEIGHT;
return dom.svg(
{
className: "keyframes-graph-path",
preserveAspectRatio: "none",
viewBox:
`0 -${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox} ` +
`${DEFAULT_KEYFRAMES_GRAPH_DURATION} ` +
`${DEFAULT_GRAPH_HEIGHT + strokeWidthInViewBox * 2}`,
},
pathComponent({
componentWidth,
easingHintStrokeWidth: DEFAULT_EASING_HINT_STROKE_WIDTH,
getComputedStyle,
graphHeight: DEFAULT_GRAPH_HEIGHT,
keyframes,
name,
simulateAnimation,
totalDuration: DEFAULT_KEYFRAMES_GRAPH_DURATION,
})
);
}
}
module.exports = KeyframesGraphPath;