mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-21 17:25:36 +00:00
Bug 1416106 - Part 7: Implement color graph. r=gl
MozReview-Commit-ID: 4ek6LXtsmKc --HG-- extra : rebase_source : 07d9957c5e93712f40c0229049b743222e7579e3
This commit is contained in:
parent
be29184c93
commit
77faaa1357
@ -17,6 +17,7 @@ class AnimatedPropertyItem extends PureComponent {
|
||||
property: PropTypes.string.isRequired,
|
||||
simulateAnimation: PropTypes.func.isRequired,
|
||||
state: PropTypes.object.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
values: PropTypes.array.isRequired,
|
||||
};
|
||||
}
|
||||
@ -26,6 +27,7 @@ class AnimatedPropertyItem extends PureComponent {
|
||||
property,
|
||||
simulateAnimation,
|
||||
state,
|
||||
type,
|
||||
values,
|
||||
} = this.props;
|
||||
|
||||
@ -42,6 +44,7 @@ class AnimatedPropertyItem extends PureComponent {
|
||||
KeyframesGraph(
|
||||
{
|
||||
simulateAnimation,
|
||||
type,
|
||||
values,
|
||||
}
|
||||
)
|
||||
|
@ -54,8 +54,9 @@ class AnimatedPropertyList extends PureComponent {
|
||||
emitEventForTest,
|
||||
} = this.props;
|
||||
const animatedPropertyMap = await getAnimatedPropertyMap(animation);
|
||||
const animationTypes = await animation.getAnimationTypes(animatedPropertyMap.keys());
|
||||
|
||||
this.setState({ animatedPropertyMap });
|
||||
this.setState({ animatedPropertyMap, animationTypes });
|
||||
|
||||
emitEventForTest("animation-keyframes-rendered");
|
||||
}
|
||||
@ -66,6 +67,7 @@ class AnimatedPropertyList extends PureComponent {
|
||||
} = this.props;
|
||||
const {
|
||||
animatedPropertyMap,
|
||||
animationTypes,
|
||||
} = this.state;
|
||||
|
||||
if (!animatedPropertyMap) {
|
||||
@ -78,11 +80,13 @@ class AnimatedPropertyList extends PureComponent {
|
||||
},
|
||||
[...animatedPropertyMap.entries()].map(([property, values]) => {
|
||||
const state = this.getPropertyState(property);
|
||||
const type = animationTypes[property];
|
||||
return AnimatedPropertyItem(
|
||||
{
|
||||
property,
|
||||
simulateAnimation,
|
||||
state,
|
||||
type,
|
||||
values,
|
||||
}
|
||||
);
|
||||
|
@ -0,0 +1,142 @@
|
||||
/* 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 dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
|
||||
const {colorUtils} = require("devtools/shared/css/color.js");
|
||||
|
||||
const ComputedStylePath = require("./ComputedStylePath");
|
||||
|
||||
/* Count for linearGradient ID */
|
||||
let LINEAR_GRADIENT_ID_COUNT = 0;
|
||||
|
||||
class ColorPath extends ComputedStylePath {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = this.propToState(props);
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState(this.propToState(nextProps));
|
||||
}
|
||||
|
||||
getPropertyName() {
|
||||
return "color";
|
||||
}
|
||||
|
||||
getPropertyValue(keyframe) {
|
||||
return keyframe.value;
|
||||
}
|
||||
|
||||
propToState({ values }) {
|
||||
const maxObject = { distance: 0 };
|
||||
|
||||
for (let i = 0; i < values.length - 1; i++) {
|
||||
const value1 = getRGBA(values[i].value);
|
||||
for (let j = i + 1; j < values.length; j++) {
|
||||
const value2 = getRGBA(values[j].value);
|
||||
const distance = getRGBADistance(value1, value2);
|
||||
|
||||
if (maxObject.distance >= distance) {
|
||||
continue;
|
||||
}
|
||||
|
||||
maxObject.distance = distance;
|
||||
maxObject.value1 = value1;
|
||||
maxObject.value2 = value2;
|
||||
}
|
||||
}
|
||||
|
||||
const maxDistance = maxObject.distance;
|
||||
const baseValue =
|
||||
maxObject.value1 < maxObject.value2 ? maxObject.value1 : maxObject.value2;
|
||||
|
||||
return { baseValue, maxDistance };
|
||||
}
|
||||
|
||||
toSegmentValue(computedStyle) {
|
||||
const { baseValue, maxDistance } = this.state;
|
||||
const value = getRGBA(computedStyle);
|
||||
return getRGBADistance(baseValue, value) / maxDistance;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overide parent's method.
|
||||
*/
|
||||
renderPathSegments(segments) {
|
||||
for (const segment of segments) {
|
||||
segment.y = 1;
|
||||
}
|
||||
|
||||
const lastSegment = segments[segments.length - 1];
|
||||
const id = `color-property-${ LINEAR_GRADIENT_ID_COUNT++ }`;
|
||||
const path = super.renderPathSegments(segments, { fill: `url(#${ id })` });
|
||||
const linearGradient = dom.linearGradient(
|
||||
{ id },
|
||||
segments.map(segment => {
|
||||
return dom.stop(
|
||||
{
|
||||
"stopColor": segment.computedStyle,
|
||||
"offset": segment.x / lastSegment.x,
|
||||
}
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
return [path, linearGradient];
|
||||
}
|
||||
|
||||
render() {
|
||||
return dom.g(
|
||||
{
|
||||
className: "color-path",
|
||||
},
|
||||
super.renderGraph()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse given RGBA string.
|
||||
*
|
||||
* @param {String} colorString
|
||||
* e.g. rgb(0, 0, 0) or rgba(0, 0, 0, 0.5) and so on.
|
||||
* @return {Object}
|
||||
* RGBA {r: r, g: g, b: b, a: a}.
|
||||
*/
|
||||
function getRGBA(colorString) {
|
||||
const color = new colorUtils.CssColor(colorString);
|
||||
return color.getRGBATuple();
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the distance from give two RGBA.
|
||||
*
|
||||
* @param {Object} rgba1
|
||||
* RGBA (format is same to getRGBA)
|
||||
* @param {Object} rgba2
|
||||
* RGBA (format is same to getRGBA)
|
||||
* @return {Number}
|
||||
* The range is 0 - 1.0.
|
||||
*/
|
||||
function getRGBADistance(rgba1, rgba2) {
|
||||
const startA = rgba1.a;
|
||||
const startR = rgba1.r * startA;
|
||||
const startG = rgba1.g * startA;
|
||||
const startB = rgba1.b * startA;
|
||||
const endA = rgba2.a;
|
||||
const endR = rgba2.r * endA;
|
||||
const endG = rgba2.g * endA;
|
||||
const endB = rgba2.b * endA;
|
||||
const diffA = startA - endA;
|
||||
const diffR = startR - endR;
|
||||
const diffG = startG - endG;
|
||||
const diffB = startB - endB;
|
||||
return Math.sqrt(diffA * diffA + diffR * diffR + diffG * diffG + diffB * diffB);
|
||||
}
|
||||
|
||||
module.exports = ColorPath;
|
@ -133,9 +133,10 @@ class ComputedStylePath extends PureComponent {
|
||||
* Return react dom fron given path segments.
|
||||
*
|
||||
* @param {Array} segments
|
||||
* @param {Object} style
|
||||
* @return {Element}
|
||||
*/
|
||||
renderPathSegments(segments) {
|
||||
renderPathSegments(segments, style) {
|
||||
const { graphHeight } = this.props;
|
||||
|
||||
for (const segment of segments) {
|
||||
@ -146,7 +147,7 @@ class ComputedStylePath extends PureComponent {
|
||||
d += toPathString(segments);
|
||||
d += `L${ segments[segments.length - 1].x },0 Z`;
|
||||
|
||||
return dom.path({ d });
|
||||
return dom.path({ d, style });
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -14,6 +14,7 @@ class KeyframesGraph extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
simulateAnimation: PropTypes.func.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
values: PropTypes.array.isRequired,
|
||||
};
|
||||
}
|
||||
@ -21,6 +22,7 @@ class KeyframesGraph extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
simulateAnimation,
|
||||
type,
|
||||
values,
|
||||
} = this.props;
|
||||
|
||||
@ -31,6 +33,7 @@ class KeyframesGraph extends PureComponent {
|
||||
KeyframesGraphPath(
|
||||
{
|
||||
simulateAnimation,
|
||||
type,
|
||||
values,
|
||||
}
|
||||
)
|
||||
|
@ -9,6 +9,7 @@ const dom = require("devtools/client/shared/vendor/react-dom-factories");
|
||||
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
|
||||
const ReactDOM = require("devtools/client/shared/vendor/react-dom");
|
||||
|
||||
const ColorPath = createFactory(require("./ColorPath"));
|
||||
const DistancePath = createFactory(require("./DistancePath"));
|
||||
|
||||
const {
|
||||
@ -20,6 +21,7 @@ class KeyframesGraphPath extends PureComponent {
|
||||
static get propTypes() {
|
||||
return {
|
||||
simulateAnimation: PropTypes.func.isRequired,
|
||||
type: PropTypes.string.isRequired,
|
||||
values: PropTypes.array.isRequired,
|
||||
};
|
||||
}
|
||||
@ -36,6 +38,15 @@ class KeyframesGraphPath extends PureComponent {
|
||||
this.updateState();
|
||||
}
|
||||
|
||||
getPathComponent(type) {
|
||||
switch (type) {
|
||||
case "color" :
|
||||
return ColorPath;
|
||||
default :
|
||||
return DistancePath;
|
||||
}
|
||||
}
|
||||
|
||||
updateState() {
|
||||
const thisEl = ReactDOM.findDOMNode(this);
|
||||
this.setState({ componentWidth: thisEl.parentNode.clientWidth });
|
||||
@ -44,6 +55,7 @@ class KeyframesGraphPath extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
simulateAnimation,
|
||||
type,
|
||||
values,
|
||||
} = this.props;
|
||||
const { componentWidth } = this.state;
|
||||
@ -52,6 +64,8 @@ class KeyframesGraphPath extends PureComponent {
|
||||
return dom.svg();
|
||||
}
|
||||
|
||||
const pathComponent = this.getPathComponent(type);
|
||||
|
||||
return dom.svg(
|
||||
{
|
||||
className: "keyframes-graph-path",
|
||||
@ -59,7 +73,7 @@ class KeyframesGraphPath extends PureComponent {
|
||||
viewBox: `0 -${ DEFAULT_GRAPH_HEIGHT } `
|
||||
+ `${ DEFAULT_KEYFRAMES_GRAPH_DURATION } ${ DEFAULT_GRAPH_HEIGHT }`,
|
||||
},
|
||||
DistancePath(
|
||||
pathComponent(
|
||||
{
|
||||
componentWidth,
|
||||
graphHeight: DEFAULT_GRAPH_HEIGHT,
|
||||
|
@ -3,6 +3,7 @@
|
||||
# file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
|
||||
DevToolsModules(
|
||||
'ColorPath.js',
|
||||
'ComputedStylePath.js',
|
||||
'DistancePath.js',
|
||||
'KeyframesGraph.js',
|
||||
|
Loading…
Reference in New Issue
Block a user