github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-04 10:41:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dont scale nodes after browser window resize

Browse Source 
* track browser dimensions as chart state
* only override on force layout

Fixes #1096
This commit is contained in:
David Kaltschmidt
2016-04-12 16:33:43 +02:00
parent d6eff06bc0
commit af887418b9
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
client/app/scripts/charts/nodes-chart.js
View File

@@ -46,6 +46,8 @@ export default class NodesChart extends React.Component {
scale: 1,
selectedNodeScale: d3.scale.linear(),
hasZoomed: false,
height: 0,
width: 0,
zoomCache: {}
};
}
@@ -80,6 +82,10 @@ export default class NodesChart extends React.Component {
});
}
// reset layout dimensions only when forced
state.height = nextProps.forceRelayout ? nextProps.height : (state.height || nextProps.height);
state.width = nextProps.forceRelayout ? nextProps.width : (state.width || nextProps.width);
// _.assign(state, this.updateGraphState(nextProps, state));
if (nextProps.forceRelayout || nextProps.nodes !== this.props.nodes) {
_.assign(state, this.updateGraphState(nextProps, state));
@@ -242,9 +248,9 @@ export default class NodesChart extends React.Component {
// move origin node to center of viewport
const zoomScale = state.scale;
const translate = [state.panTranslateX, state.panTranslateY];
const centerX = (-translate[0] + (props.width + MARGINS.left
const centerX = (-translate[0] + (state.width + MARGINS.left
- DETAILS_PANEL_WIDTH) / 2) / zoomScale;
const centerY = (-translate[1] + (props.height + MARGINS.top) / 2) / zoomScale;
const centerY = (-translate[1] + (state.height + MARGINS.top) / 2) / zoomScale;
stateNodes = stateNodes.mergeIn([props.selectedNodeId], {
x: centerX,
y: centerY
@@ -253,7 +259,7 @@ export default class NodesChart extends React.Component {
// circle layout for adjacent nodes
const adjacentCount = adjacentLayoutNodeIds.length;
const density = radiusDensity(adjacentCount);
const radius = Math.min(props.width, props.height) / density / zoomScale;
const radius = Math.min(state.width, state.height) / density / zoomScale;
const offsetAngle = Math.PI / 4;
stateNodes = stateNodes.map((node) => {
@@ -285,7 +291,7 @@ export default class NodesChart extends React.Component {
});
// auto-scale node size for selected nodes
const selectedNodeScale = this.getNodeScale(adjacentNodes, props.width, props.height);
const selectedNodeScale = this.getNodeScale(adjacentNodes, state.width, state.height);
return {
selectedNodeScale,
@@ -329,12 +335,12 @@ export default class NodesChart extends React.Component {
const nodeMetrics = stateNodes.map(node => makeMap({
metrics: node.get('metrics')
}));
const nodeScale = this.getNodeScale(props.nodes, props.width, props.height);
const nodeScale = this.getNodeScale(props.nodes, state.width, state.height);
const nextState = { nodeScale };
const options = {
width: props.width,
height: props.height,
width: state.width,
height: state.height,
scale: nodeScale,
margins: MARGINS,
forceRelayout: props.forceRelayout,
@@ -358,8 +364,8 @@ export default class NodesChart extends React.Component {
.map(edge => edge.set('ppoints', edge.get('points')));
// adjust layout based on viewport
const xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
const yFactor = props.height / graph.height;
const xFactor = (state.width - MARGINS.left - MARGINS.right) / graph.width;
const yFactor = state.height / graph.height;
const zoomFactor = Math.min(xFactor, yFactor);
let zoomScale = this.state.scale;