master
Rohan Vazarkar 2018-08-03 00:43:06 -04:00
parent 455d20ef7a
commit a7cf9998a6
1 changed files with 162 additions and 2 deletions

View File

@ -650,6 +650,7 @@ export default class GraphContainer extends Component {
}
doQueryNative(params) {
this.clearScale();
if (appStore.performance.debug) {
emitter.emit("setRawQuery", params.statement);
}
@ -1055,6 +1056,16 @@ export default class GraphContainer extends Component {
};
};
lockScale(){
let graph = this.state.sigmaInstance.graph;
graph.initScale = graph.currentScale;
}
clearScale(){
let graph = this.state.sigmaInstance.graph;
graph.initScale = null;
}
//Function taken from the DragNodes code https://github.com/jacomyal/sigma.js/blob/master/plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js
calculateClickPos(clientX, clientY){
let _s = this.state.sigmaInstance;
@ -1096,7 +1107,9 @@ export default class GraphContainer extends Component {
glyphTextColor: "white",
glyphTextThreshold: 1,
zoomingRatio: 1.4,
scalingMode: "inside"
scalingMode: "inside",
autoRescale: true,
sideMargin: 20
});
//Monkeypatch the drawIcon function to add font-weight to the canvas drawing for drawIcon
@ -1125,6 +1138,150 @@ export default class GraphContainer extends Component {
context.restore();
}
//Monkeypatch the middleware with a customized patch from here: https://github.com/jacomyal/sigma.js/pull/302/files
sigma.middlewares.rescale = function(readPrefix, writePrefix, options) {
var _this = this,
i,
l,
a,
b,
c,
d,
scale,
margin,
n = this.graph.nodes(),
e = this.graph.edges(),
settings = this.settings.embedObjects(options || {}),
bounds = settings('bounds') || sigma.utils.getBoundaries(
this.graph,
readPrefix,
true
),
minX = bounds.minX,
minY = bounds.minY,
maxX = bounds.maxX,
maxY = bounds.maxY,
sizeMax = bounds.sizeMax,
weightMax = bounds.weightMax,
w = settings('width') || 1,
h = settings('height') || 1,
rescaleSettings = settings('autoRescale'),
validSettings = {
nodePosition: 1,
nodeSize: 1,
edgeSize: 1
};
/**
* What elements should we rescale?
*/
if (!(rescaleSettings instanceof Array))
rescaleSettings = ['nodePosition', 'nodeSize', 'edgeSize'];
for (i = 0, l = rescaleSettings.length; i < l; i++)
if (!validSettings[rescaleSettings[i]])
throw new Error(
'The rescale setting "' + rescaleSettings[i] + '" is not recognized.'
);
var np = ~rescaleSettings.indexOf('nodePosition'),
ns = ~rescaleSettings.indexOf('nodeSize'),
es = ~rescaleSettings.indexOf('edgeSize');
if (np) {
/**
* First, we compute the scaling ratio, without considering the sizes
* of the nodes : Each node will have its center in the canvas, but might
* be partially out of it.
*/
scale = settings('scalingMode') === 'outside' ?
Math.max(
w / Math.max(maxX - minX, 1),
h / Math.max(maxY - minY, 1)
) :
Math.min(
w / Math.max(maxX - minX, 1),
h / Math.max(maxY - minY, 1)
);
_this.graph.currentScale = scale;
/**
* Then, we correct that scaling ratio considering a margin, which is
* basically the size of the biggest node.
* This has to be done as a correction since to compare the size of the
* biggest node to the X and Y values, we have to first get an
* approximation of the scaling ratio.
**/
margin =
(
settings('rescaleIgnoreSize') ?
0 :
(settings('maxNodeSize') || sizeMax) / scale
) +
(settings('sideMargin') || 0);
maxX += margin;
minX -= margin;
maxY += margin;
minY -= margin;
// Fix the scaling with the new extrema:
scale = settings('scalingMode') === 'outside' ?
Math.max(
w / Math.max(maxX - minX, 1),
h / Math.max(maxY - minY, 1)
) :
Math.min(
w / Math.max(maxX - minX, 1),
h / Math.max(maxY - minY, 1)
);
_this.graph.currentScale = scale;
}
// Size homothetic parameters:
if (!settings('maxNodeSize') && !settings('minNodeSize')) {
a = 1;
b = 0;
} else if (settings('maxNodeSize') === settings('minNodeSize')) {
a = 0;
b = +settings('maxNodeSize');
} else {
a = (settings('maxNodeSize') - settings('minNodeSize')) / sizeMax;
b = +settings('minNodeSize');
}
if (!settings('maxEdgeSize') && !settings('minEdgeSize')) {
c = 1;
d = 0;
} else if (settings('maxEdgeSize') === settings('minEdgeSize')) {
c = 0;
d = +settings('minEdgeSize');
} else {
c = (settings('maxEdgeSize') - settings('minEdgeSize')) / weightMax;
d = +settings('minEdgeSize');
}
// Rescale the nodes and edges:
for (i = 0, l = e.length; i < l; i++)
e[i][writePrefix + 'size'] =
e[i][readPrefix + 'size'] * (es ? c : 1) + (es ? d : 0);
for (i = 0, l = n.length; i < l; i++) {
n[i][writePrefix + 'size'] =
n[i][readPrefix + 'size'] * (ns ? a : 1) + (ns ? b : 0);
if (np) {
n[i][writePrefix + 'x'] =
(n[i][readPrefix + 'x'] - (maxX + minX) / 2) * (this.graph.initScale || scale);
n[i][writePrefix + 'y'] =
(n[i][readPrefix + 'y'] - (maxY + minY) / 2) * (this.graph.initScale || scale);
}
else {
n[i][writePrefix + 'x'] = n[i][readPrefix + 'x'];
n[i][writePrefix + 'y'] = n[i][readPrefix + 'y'];
}
}
};
//Bind sigma events
sigmaInstance.renderers[0].bind("render", function(e) {
sigmaInstance.renderers[0].glyphs();
@ -1342,7 +1499,7 @@ export default class GraphContainer extends Component {
rankDir: "LR"
});
dagreListener.bind("stop", function(event) {
dagreListener.bind("stop", event => {
var needsfix = false;
sigmaInstance.graph.nodes().forEach(function(node) {
if (isNaN(node.x) || isNaN(node.y)) {
@ -1354,6 +1511,7 @@ export default class GraphContainer extends Component {
}, this);
if (!needsfix) {
emitter.emit("updateLoadingText", "Done!");
this.lockScale();
sigma.canvas.edges.autoCurve(sigmaInstance);
setTimeout(function() {
emitter.emit("showLoadingIndicator", false);
@ -1378,7 +1536,9 @@ export default class GraphContainer extends Component {
noverlapListener.bind("stop", function(event) {
emitter.emit("updateLoadingText", "Done!");
this.lockScale();
sigma.canvas.edges.autoCurve(sigmaInstance);
sigmaInstance.settings("scalingMode","fixedScaling");
setTimeout(function() {
emitter.emit("showLoadingIndicator", false);
}, 1500);