updateGraphState: function(props) {
const nodes = this.initNodes(props.nodes, this.state.nodes);
const edges = this.initEdges(props.nodes, nodes);
const expanse = Math.min(props.height, props.width);
const nodeSize = expanse / 2;
const n = _.size(props.nodes);
const nodeScale = d3.scale.linear().range([0, nodeSize / Math.pow(n, 0.7)]);
const timedLayouter = timely(NodesLayout.doLayout);
const graph = timedLayouter(
nodes,
edges,
props.width,
props.height,
nodeScale,
MARGINS
);
debug('graph layout took ' + timedLayouter.time + 'ms');
// adjust layout based on viewport
const xFactor = (props.width - MARGINS.left - MARGINS.right) / graph.width;
const yFactor = props.height / graph.height;
const zoomFactor = Math.min(xFactor, yFactor);
let zoomScale = this.state.scale;
if (this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
zoomScale = zoomFactor;
// saving in d3's behavior cache
this.zoom.scale(zoomFactor);
}
this.setState({
nodes: nodes,
edges: edges,
nodeScale: nodeScale,
scale: zoomScale
});
},
updateGraphState(props, state) {
const n = props.nodes.size;
if (n === 0) {
return {
nodes: makeMap(),
edges: makeMap()
};
}
const stateNodes = this.initNodes(props.nodes, state.nodes);
const stateEdges = this.initEdges(props.nodes, stateNodes);
const nodeScale = this.getNodeScale(props.nodes, state.width, state.height);
const nextState = { nodeScale };
const options = {
width: state.width,
height: state.height,
scale: nodeScale,
margins: MARGINS,
forceRelayout: props.forceRelayout,
topologyId: this.props.topologyId,
topologyOptions: this.props.topologyOptions
};
const timedLayouter = timely(doLayout);
const graph = timedLayouter(stateNodes, stateEdges, options);
log(`graph layout took ${timedLayouter.time}ms`);
// extract coords and save for restore
const graphNodes = graph.nodes.map(node => makeMap({
x: node.get('x'),
px: node.get('x'),
y: node.get('y'),
py: node.get('y')
}));
const layoutNodes = stateNodes.mergeDeep(graphNodes);
const layoutEdges = graph.edges
.map(edge => edge.set('ppoints', edge.get('points')));
// adjust layout based on viewport
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;
if (!state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
zoomScale = zoomFactor;
// saving in d3's behavior cache
this.zoom.scale(zoomFactor);
}
nextState.scale = zoomScale;
if (!isDeepEqual(layoutNodes, state.nodes)) {
nextState.nodes = layoutNodes;
}
if (!isDeepEqual(layoutEdges, state.edges)) {
nextState.edges = layoutEdges;
}
return nextState;
}
updateGraphState(props, state) {
const n = props.nodes.size;
if (n === 0) {
return {
nodes: makeMap(),
edges: makeMap()
};
}
let stateNodes = this.initNodes(props.nodes, state.nodes);
let stateEdges = this.initEdges(props.nodes, stateNodes);
const nodeScale = this.getNodeScale(props);
const options = {
width: props.width,
height: props.height,
scale: nodeScale,
margins: MARGINS,
forceRelayout: props.forceRelayout,
topologyId: this.props.topologyId
};
const timedLayouter = timely(doLayout);
const graph = timedLayouter(stateNodes, stateEdges, options);
log('graph layout took ' + timedLayouter.time + 'ms');
// layout was aborted
if (!graph) {
return {maxNodesExceeded: true};
}
stateNodes = graph.nodes;
stateEdges = graph.edges;
// save coordinates for restore
stateNodes = stateNodes.map(node => {
return node.merge({
px: node.get('x'),
py: node.get('y')
});
});
stateEdges = stateEdges.map(edge => {
return 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 zoomFactor = Math.min(xFactor, yFactor);
let zoomScale = this.state.scale;
if (this.zoom && !this.state.hasZoomed && zoomFactor > 0 && zoomFactor < 1) {
zoomScale = zoomFactor;
// saving in d3's behavior cache
this.zoom.scale(zoomFactor);
}
return {
nodes: stateNodes,
edges: stateEdges,
scale: zoomScale,
nodeScale: nodeScale,
maxNodesExceeded: false
};
}