Skip to content

Commit

Permalink
Fix #108 and #109
Browse files Browse the repository at this point in the history
  • Loading branch information
@sheymann
sheymann committed May 20, 2015
1 parent c410859 commit ab2bb33
Show file tree
Hide file tree
Showing 3 changed files with 120 additions and 61 deletions.
10 changes: 9 additions & 1 deletion examples/locate.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,8 +157,16 @@ <h3>a group of nodes</h3>
};
var locate = sigma.plugins.locate(s, conf);

if (!s.settings('autoRescale'))
locate.setPadding({
// top:250,
// bottom: 250,
right:250,
// left:250
});

if (!s.settings('autoRescale')) {
sigma.utils.zoomTo(s.camera, 0, 0, conf.zoomDef);
}

var categories = {};

Expand Down
21 changes: 21 additions & 0 deletions plugins/sigma.plugins.locate/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,13 @@ var locate = sigma.plugins.locate(sigInst, {
duration: 300
}
},
// PADDING:
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// GLOBAL SETTINGS:
// **********
focusOut: true,
Expand All @@ -53,6 +60,10 @@ var locate = sigma.plugins.locate(sigInst, {
* The different animation options when calling `nodes()`, `edges()`, and `center()`. See [`sigma.misc.animation.camera`](https://github.com/jacomyal/sigma.js/blob/master/src/misc/sigma.misc.animation.js#l47) for a list of accepted parameters.
* type: *object*
* default value: see above
* **padding**
* The space (in screen pixels) between the renderer border and the renderer content. The parameters are `top`, `right`, `bottom`, `left`.
* type: *object*
* default value: see above
* **focusOut**
* Make to zoom out to reach a halfway point between the current position to the target position during camera animation, to help the user orientate in space (see Google Maps for instance).
* type: *boolean*
Expand Down Expand Up @@ -99,6 +110,16 @@ locate.edges(['e0', 'e1']);
locate.center(1);
````

**setPadding( *object* )** : *sigma.plugins.locate*
* This method set the padding, i.e. the space (in screen pixels) between the renderer border and the renderer content. The parameters are `top`, `right`, `bottom`, `left`.
* The method returns the instance itself.

````javascript
locate.setPadding({
right:250
});
````

#### Optional argument

These functions may take an optional parameter to configure the animation, e.g.:
Expand Down
150 changes: 90 additions & 60 deletions plugins/sigma.plugins.locate/sigma.plugins.locate.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,13 @@
duration: 300
}
},
// PADDING:
padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
// GLOBAL SETTINGS:
// **********
// If true adds a halfway point while animating the camera.
Expand All @@ -55,9 +62,7 @@
zoomDef: null
};

var _instance = {},
_s = null,
_o = null;
var _instance = {}

function getRescalePosition(s) {
var autoRescale = s.settings('autoRescale');
Expand Down Expand Up @@ -102,18 +107,18 @@
/**
* Locate Object
* ------------------
* @param {sigma} s The related sigma instance.
* @param {sigma} s The related sigma instance.
* @param {object} options The options related to the object.
*/
function Locate(s, options) {
var self = this,
_s = s,
_o = sigma.utils.extend(options, settings);
var self = this;

_o.zoomDef = _o.zoomDef || _s.settings('zoomMax');
this.s = s;
this.settings = sigma.utils.extend(options, settings);
this.settings.zoomDef = this.settings.zoomDef || this.s.settings('zoomMax');

_s.bind('kill', function() {
sigma.plugins.killLocate(_s);
this.s.bind('kill', function() {
sigma.plugins.killLocate(self.s);
});


Expand All @@ -133,22 +138,24 @@
y,
ratio,
width,
height;
height,
rendererWidth,
rendererHeight;

// Center of the boundaries:
x = (boundaries.minX + boundaries.maxX) * 0.5;
y = (boundaries.minY + boundaries.maxY) * 0.5;

// Zoom ratio:
if (getRescalePosition(_s)) {
if (getRescalePosition(self.s)) {
var graphBoundaries,
graphRect,
graphWidth,
graphHeight,
rect;

// Coordinates of the rectangle representing the camera on screen for the selection boundaries:
rect = _s.camera.getRectangle(
rect = self.s.camera.getRectangle(
boundaries.maxX - boundaries.minX,
boundaries.maxY - boundaries.minY
);
Expand All @@ -158,29 +165,38 @@

// Graph boundaries:
graphBoundaries = sigma.utils.getBoundaries(
_s.graph,
_s.camera.readPrefix
self.s.graph,
self.s.camera.readPrefix
);

// Coordinates of the rectangle representing the camera on screen for the graph boundaries:
graphRect = _s.camera.getRectangle(
graphRect = self.s.camera.getRectangle(
graphBoundaries.maxX - graphBoundaries.minX,
graphBoundaries.maxY - graphBoundaries.minY
);

graphWidth = graphRect.x2 - graphRect.x1 || 1;
graphHeight = graphRect.height || 1;

ratio = Math.max(width / graphWidth, height / graphHeight);
rendererWidth = graphWidth - self.settings.padding.left - self.settings.padding.right;
rendererHeight = graphHeight - self.settings.padding.top - self.settings.padding.bottom;

ratio = Math.max(width / rendererWidth, height / rendererHeight);
}
else {
width = boundaries.maxX - boundaries.minX + boundaries.sizeMax * 2;
height = boundaries.maxY - boundaries.minY + boundaries.sizeMax * 2;
ratio = Math.max(width / _s.renderers[0].width, height / _s.renderers[0].height);
rendererWidth = self.s.renderers[0].width - self.settings.padding.left - self.settings.padding.right;
rendererHeight = self.s.renderers[0].height - self.settings.padding.top - self.settings.padding.bottom;
ratio = Math.max(width / rendererWidth, height / rendererHeight);
}

// Normalize ratio:
ratio = Math.max(_s.settings('zoomMin'), Math.min(_s.settings('zoomMax'), ratio));
ratio = Math.max(self.s.settings('zoomMin'), Math.min(self.s.settings('zoomMax'), ratio));

// Update center:
x += (self.settings.padding.right - self.settings.padding.left) * ratio * 0.5;
y += (self.settings.padding.bottom - self.settings.padding.top) * ratio * 0.5;

return {
x: x,
Expand Down Expand Up @@ -221,63 +237,64 @@

var t,
n,
animationOpts = sigma.utils.extend(options, _o.animation.node),
ratio = _s.camera.ratio,
rescalePosition = getRescalePosition(_s);
animationOpts = sigma.utils.extend(options, self.settings.animation.node),
ratio = self.s.camera.ratio,
rescalePosition = getRescalePosition(self.s);

// One node:
if (typeof v === 'string' || typeof v === 'number') {
n = _s.graph.nodes(v);
n = self.s.graph.nodes(v);
if (n === undefined)
throw new Error('Invalid argument: the node of id "' + v + '" does not exist.');

t = {
x: n[_s.camera.readPrefix + 'x'],
y: n[_s.camera.readPrefix + 'y'],
x: n[self.s.camera.readPrefix + 'x'],
y: n[self.s.camera.readPrefix + 'y'],
ratio: rescalePosition ?
_s.settings('zoomMin') : _o.zoomDef
self.s.settings('zoomMin') : self.settings.zoomDef
}
}

// Array of nodes:
else if (Array.isArray(v)) {
var boundaries = getBoundaries(v.map(function(id) {
return _s.graph.nodes(id);
}), _s.camera.readPrefix);
return self.s.graph.nodes(id);
}), self.s.camera.readPrefix);

t = target(boundaries);
}
else
throw new TypeError('Invalid argument: "v" is not a string, a number, or an array, was ' + v);

if (_o.focusOut && rescalePosition) {
if (self.settings.focusOut && rescalePosition) {
sigma.misc.animation.camera(
s.camera,
{
x: (_s.camera.x + t.x) * 0.5,
y: (_s.camera.y + t.y) * 0.5,
ratio: _o.zoomDef
x: (self.s.camera.x + t.x) * 0.5,
y: (self.s.camera.y + t.y) * 0.5,
ratio: self.settings.zoomDef
},
{
duration: animationOpts.duration,
onComplete: function() {
sigma.misc.animation.camera(
_s.camera,
self.s.camera,
t,
animationOpts
);
}
}
);
} else {
// console.log(t);
sigma.misc.animation.camera(
_s.camera,
self.s.camera,
t,
animationOpts
);
}

return this;
return self;
};


Expand Down Expand Up @@ -314,20 +331,20 @@
var t,
e,
boundaries,
animationOpts = sigma.utils.extend(options, _o.animation.edge),
ratio = _s.camera.ratio,
rescalePosition = getRescalePosition(_s);
animationOpts = sigma.utils.extend(options, self.settings.animation.edge),
ratio = self.s.camera.ratio,
rescalePosition = getRescalePosition(self.s);

// One edge:
if (typeof v === 'string' || typeof v === 'number') {
e = _s.graph.edges(v);
e = self.s.graph.edges(v);
if (e === undefined)
throw new Error('Invalid argument: the edge of id "' + v + '" does not exist.');

boundaries = getBoundaries([
_s.graph.nodes(e.source),
_s.graph.nodes(e.target)
], _s.camera.readPrefix);
self.s.graph.nodes(e.source),
self.s.graph.nodes(e.target)
], self.s.camera.readPrefix);

t = target(boundaries);
}
Expand All @@ -339,30 +356,30 @@
nodes = [];

for (i = 0, l = v.length; i < l; i++) {
e = _s.graph.edges(v[i]);
nodes.push(_s.graph.nodes(e.source));
nodes.push(_s.graph.nodes(e.target));
e = self.s.graph.edges(v[i]);
nodes.push(self.s.graph.nodes(e.source));
nodes.push(self.s.graph.nodes(e.target));
}

boundaries = getBoundaries(nodes, _s.camera.readPrefix);
boundaries = getBoundaries(nodes, self.s.camera.readPrefix);
t = target(boundaries);
}
else
throw new TypeError('Invalid argument: "v" is not a string or a number, or an array, was ' + v);

if (_o.focusOut && rescalePosition) {
if (self.settings.focusOut && rescalePosition) {
sigma.misc.animation.camera(
s.camera,
{
x: (_s.camera.x + t.x) * 0.5,
y: (_s.camera.y + t.y) * 0.5,
ratio: _o.zoomDef
x: (self.s.camera.x + t.x) * 0.5,
y: (self.s.camera.y + t.y) * 0.5,
ratio: self.settings.zoomDef
},
{
duration: animationOpts.duration,
onComplete: function() {
sigma.misc.animation.camera(
_s.camera,
self.s.camera,
t,
animationOpts
);
Expand All @@ -371,13 +388,13 @@
);
} else {
sigma.misc.animation.camera(
_s.camera,
self.s.camera,
t,
animationOpts
);
}

return this;
return self;
};


Expand Down Expand Up @@ -407,15 +424,15 @@
* @return {sigma.plugins.locate} Returns the instance itself.
*/
this.center = function(ratio, options) {
var animationOpts = sigma.utils.extend(options, _o.animation.center);
if (_s.graph.nodes().length) {
self.nodes(_s.graph.nodes().map(function(n) {
var animationOpts = sigma.utils.extend(options, self.settings.animation.center);
if (self.s.graph.nodes().length) {
self.nodes(self.s.graph.nodes().map(function(n) {
return n.id;
}), animationOpts);
}
else {
sigma.misc.animation.camera(
_s.camera,
self.s.camera,
{
x: 0,
y: 0,
Expand All @@ -425,12 +442,25 @@
);
}

return this;
return self;
};

/**
* Set the padding, i.e. the space (in screen pixels) between the renderer
* border and the renderer content.
* The parameters are `top`, `right`, `bottom`, `left`.
*
* @param {object} options A dictionary with padding options.
* @return {sigma.plugins.locate} Returns the instance itself.
*/
this.setPadding = function(options) {
self.settings.padding = sigma.utils.extend(options, self.settings.padding);
return self;
}

this.kill = function() {
_o = null;
_s = null;
self.settings = null;
self.s = null;
}

};
Expand Down

0 comments on commit ab2bb33

Please sign in to comment.