github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-08-18 11:56:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a semitransparent layer over the background nodes.

Browse Source
This commit is contained in:
Filip Barl
2017-08-08 10:52:54 +01:00
parent 656fbac4e6
commit 038bbbd5ce
8 changed files with 63 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/app/scripts/charts/node-container.js
+5 -8
View File
@@ -6,24 +6,22 @@ import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
import Node from './node';
const transformedNode = (otherProps, { x, y, k, opacity }) => (
const transformedNode = (otherProps, { x, y, k }) => (
// NOTE: Controlling blurring and transform from here seems to re-render
// faster than adding a CSS class and controlling it from there.
<g transform={`translate(${x},${y}) scale(${k})`} style={{opacity}}>
<g transform={`translate(${x},${y}) scale(${k})`}>
<Node {...otherProps} />
</g>
);
export default class NodeContainer extends React.PureComponent {
render() {
const { dx, dy, isAnimated, scale, blurred, contrastMode } = this.props;
const nodeBlurOpacity = contrastMode ? 0.6 : 0.25;
const forwardedProps = omit(this.props, 'dx', 'dy', 'isAnimated', 'scale', 'blurred');
const opacity = blurred ? nodeBlurOpacity : 1;
const { dx, dy, isAnimated, scale } = this.props;
const forwardedProps = omit(this.props, 'dx', 'dy', 'isAnimated', 'scale');
if (!isAnimated) {
// Show static node for optimized rendering
return transformedNode(forwardedProps, { x: dx, y: dy, k: scale, opacity });
return transformedNode(forwardedProps, { x: dx, y: dy, k: scale });
}
return (
@@ -33,7 +31,6 @@ export default class NodeContainer extends React.PureComponent {
x: spring(dx, NODES_SPRING_ANIMATION_CONFIG),
y: spring(dy, NODES_SPRING_ANIMATION_CONFIG),
k: spring(scale, NODES_SPRING_ANIMATION_CONFIG),
opacity: spring(opacity, NODES_SPRING_ANIMATION_CONFIG),
}}>
{interpolated => transformedNode(forwardedProps, interpolated)}
</Motion>