github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-07-28 01:31:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Simplified spring usage.

Browse Source
This commit is contained in:
Filip Barl
2017-09-11 18:50:23 +02:00
parent 736770c978
commit 75e0d383fe
5 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/app/scripts/charts/edge-container.js
View File

@@ -1,11 +1,11 @@
import React from 'react';
import { Motion, spring } from 'react-motion';
import { Motion } from 'react-motion';
import { fromJS, Map as makeMap } from 'immutable';
import { line, curveBasis } from 'd3-shape';
import { times, constant } from 'lodash';
import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
import { NODE_BASE_SIZE, EDGE_WAYPOINTS_CAP } from '../constants/styles';
import { weakSpring } from '../utils/animation-utils';
import Edge from './edge';
@@ -35,8 +35,8 @@ const waypointsMapToArray = (waypointsMap) => {
const waypointsArrayToMap = (waypointsArray) => {
let waypointsMap = makeMap();
waypointsArray.forEach((point, index) => {
waypointsMap = waypointsMap.set(`x${index}`, spring(point.get('x'), NODES_SPRING_ANIMATION_CONFIG));
waypointsMap = waypointsMap.set(`y${index}`, spring(point.get('y'), NODES_SPRING_ANIMATION_CONFIG));
waypointsMap = waypointsMap.set(`x${index}`, weakSpring(point.get('x')));
waypointsMap = waypointsMap.set(`y${index}`, weakSpring(point.get('y')));
});
return waypointsMap;
};
@@ -81,7 +81,7 @@ export default class EdgeContainer extends React.PureComponent {
// { x0: 11, y0: 22, x1: 33, y1: 44 } that we convert to the array format when rendering.
<Motion
style={{
thickness: spring(this.state.thickness, NODES_SPRING_ANIMATION_CONFIG),
thickness: weakSpring(this.state.thickness),
...this.state.waypointsMap.toJS(),
}}
>

11
client/app/scripts/charts/node-container.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
import { Motion, spring } from 'react-motion';
import { Motion } from 'react-motion';
import { NODES_SPRING_ANIMATION_CONFIG } from '../constants/animation';
import { weakSpring } from '../utils/animation-utils';
import Node from './node';
@@ -24,12 +24,7 @@ export default class NodeContainer extends React.PureComponent {
return (
// Animate the node if the layout is sufficiently small
<Motion
style={{
x: spring(dx, NODES_SPRING_ANIMATION_CONFIG),
y: spring(dy, NODES_SPRING_ANIMATION_CONFIG),
k: spring(scale, NODES_SPRING_ANIMATION_CONFIG),
}}>
<Motion style={{ x: weakSpring(dx), y: weakSpring(dy), k: weakSpring(scale) }}>
{interpolated => transformedNode(forwardedProps, interpolated)}
</Motion>
);

8
client/app/scripts/components/time-travel-timeline.js
View File

@@ -6,9 +6,10 @@ import { connect } from 'react-redux';
import { drag } from 'd3-drag';
import { scaleUtc } from 'd3-scale';
import { event as d3Event, select } from 'd3-selection';
import { Motion, spring } from 'react-motion';
import { Motion } from 'react-motion';
import { zoomFactor } from '../utils/zoom-utils';
import { strongSpring } from '../utils/animation-utils';
import { linearGradientValue } from '../utils/math-utils';
import { trackMixpanelEvent } from '../utils/tracking-utils';
import {
@@ -17,7 +18,6 @@ import {
scaleDuration,
} from '../utils/time-utils';
import { NODES_SPRING_FAST_ANIMATION_CONFIG } from '../constants/animation';
import { TIMELINE_TICK_INTERVAL, ZOOM_TRACK_DEBOUNCE_INTERVAL } from '../constants/timer';
@@ -359,8 +359,8 @@ class TimeTravelTimeline extends React.Component {
return (
<Motion
style={{
focusedTimestampValue: spring(focusedTimestampValue, NODES_SPRING_FAST_ANIMATION_CONFIG),
durationPerPixelValue: spring(durationPerPixelValue, NODES_SPRING_FAST_ANIMATION_CONFIG),
focusedTimestampValue: strongSpring(focusedTimestampValue),
durationPerPixelValue: strongSpring(durationPerPixelValue),
}}>
{interpolated => this.renderAxis({
focusedTimestamp: moment(interpolated.focusedTimestampValue),

3
client/app/scripts/constants/animation.js
View File

@@ -1,3 +0,0 @@
export const NODES_SPRING_ANIMATION_CONFIG = { stiffness: 100, damping: 18, precision: 1 };
export const NODES_SPRING_FAST_ANIMATION_CONFIG = { stiffness: 800, damping: 50, precision: 1 };

10
client/app/scripts/utils/animation-utils.js Normal file
View File

@@ -0,0 +1,10 @@
import { spring } from 'react-motion';
export function weakSpring(value) {
return spring(value, { stiffness: 100, damping: 18, precision: 1 });
}
export function strongSpring(value) {
return spring(value, { stiffness: 800, damping: 50, precision: 1 });
}