Skip to content

Commit d2de033

Browse files
YomguitherealYomguithereal
committed
Merge branch 'master' of github.com:jacomyal/sigma.js
2 parents 344dfb1 + d1c2d34 commit d2de033

File tree

6 files changed

+250
-10
lines changed

6 files changed

+250
-10
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ git clone git@github.com:jacomyal/sigma.js.git
2121

2222
To build the code:
2323

24-
- Install [Node.js](http://nodejs.org/), [NPM](https://npmjs.org/) and [Grunt](http://gruntjs.com/installing-grunt).
24+
- Install [Node.js](http://nodejs.org/).
2525
- Install [gjslint](https://developers.google.com/closure/utilities/docs/linter_howto?hl=en).
2626
- Use `npm install` to install sigma development dependencies.
27-
- Use `grunt uglify` to minify the code with [Uglify](https://github.com/mishoo/UglifyJS). The minified file `sigma.min.js` will then be accessible in the `build/` folder.
27+
- Use `npm run build` to minify the code with [Uglify](https://github.com/mishoo/UglifyJS). The minified file `sigma.min.js` will then be accessible in the `build/` folder.
2828

2929
Also, you can customize the build by adding or removing files from the `coreJsFiles` array in `Gruntfile.js` before applying the grunt task.
3030

‎examples/drag-nodes.html

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!-- START SIGMA IMPORTS -->
2+
<script src="../src/sigma.core.js"></script>
3+
<script src="../src/conrad.js"></script>
4+
<script src="../src/utils/sigma.utils.js"></script>
5+
<script src="../src/utils/sigma.polyfills.js"></script>
6+
<script src="../src/sigma.settings.js"></script>
7+
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
8+
<script src="../src/classes/sigma.classes.configurable.js"></script>
9+
<script src="../src/classes/sigma.classes.graph.js"></script>
10+
<script src="../src/classes/sigma.classes.camera.js"></script>
11+
<script src="../src/classes/sigma.classes.quad.js"></script>
12+
<script src="../src/captors/sigma.captors.mouse.js"></script>
13+
<script src="../src/captors/sigma.captors.touch.js"></script>
14+
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
15+
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
16+
<script src="../src/renderers/sigma.renderers.def.js"></script>
17+
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
18+
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
19+
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
20+
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
21+
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
22+
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
23+
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
24+
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
25+
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
26+
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
27+
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
28+
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
29+
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
30+
<script src="../src/misc/sigma.misc.animation.js"></script>
31+
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
32+
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
33+
<!-- END SIGMA IMPORTS -->
34+
<script src="../plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
35+
<div id="container">
36+
<style>
37+
#graph-container {
38+
top: 0;
39+
bottom: 0;
40+
left: 0;
41+
right: 0;
42+
position: absolute;
43+
}
44+
</style>
45+
<div id="graph-container"></div>
46+
</div>
47+
<script>
48+
/**
49+
* This example shows how to use the dragNodes plugin.
50+
*/
51+
var i,
52+
s,
53+
N = 100,
54+
E = 500,
55+
g = {
56+
nodes: [],
57+
edges: []
58+
};
59+
60+
// Generate a random graph:
61+
for (i = 0; i < N; i++)
62+
g.nodes.push({
63+
id: 'n' + i,
64+
label: 'Node ' + i,
65+
x: Math.random(),
66+
y: Math.random(),
67+
size: Math.random(),
68+
color: '#666'
69+
});
70+
71+
for (i = 0; i < E; i++)
72+
g.edges.push({
73+
id: 'e' + i,
74+
source: 'n' + (Math.random() * N | 0),
75+
target: 'n' + (Math.random() * N | 0),
76+
size: Math.random(),
77+
color: '#ccc'
78+
});
79+
sigma.renderers.def = sigma.renderers.canvas
80+
// Instanciate sigma:
81+
s = new sigma({
82+
graph: g,
83+
container: 'graph-container'
84+
});
85+
86+
// Initialize the dragNodes plugin:
87+
sigma.plugins.dragNodes(s, s.renderers[0]);
88+
</script>

‎package.json

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@
1010
},
1111
"license": "MIT",
1212
"devDependencies": {
13-
"grunt": "~0.4.1",
14-
"grunt-contrib-qunit": "~0.3.0",
15-
"grunt-contrib-uglify": "~0.2.7",
13+
"grunt-cli": "^0.1.13",
14+
"grunt": "~0.4.4",
15+
"grunt-contrib-qunit": "~0.4.0",
16+
"grunt-contrib-uglify": "~0.4.0",
1617
"grunt-closure-linter": "~0.1.4",
17-
"grunt-contrib-jshint": "~0.7.1",
18-
"grunt-contrib-concat": "~0.3.0",
19-
"load-grunt-tasks": "~0.2.0",
18+
"grunt-contrib-jshint": "~0.9.2",
19+
"grunt-contrib-concat": "~0.4.0",
20+
"load-grunt-tasks": "~0.4.0",
2021
"grunt-sed": "~0.1.1",
21-
"grunt-zip": "~0.12.0",
22+
"grunt-zip": "~0.13.0",
2223
"http-server": "~0.6.1"
2324
},
2425
"scripts": {
2526
"start": "http-server -p 8000",
26-
"test": "grunt travis"
27+
"test": "grunt travis",
28+
"build": "grunt uglify"
2729
}
2830
}

‎plugins/sigma.plugins.dragNodes/README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
sigma.plugins.dragNodes
2+
=====================
3+
4+
Plugin developed by [José M. Camacho](https://github.com/josemazo).
5+
6+
---
7+
8+
This plugin provides a method to drag & drop nodes. At the moment, this plugin is not compatible with the WebGL renderer. Check the sigma.plugins.dragNodes function doc or the examples/drag-nodes.html code sample to know more.

‎plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
/**
2+
* This plugin provides a method to drag & drop nodes. Check the
3+
* sigma.plugins.dragNodes function doc or the examples/basic.html &
4+
* examples/api-candy.html code samples to know more.
5+
*/
6+
(function() {
7+
'use strict';
8+
9+
if (typeof sigma === 'undefined')
10+
throw 'sigma is not declared';
11+
12+
sigma.utils.pkg('sigma.plugins');
13+
14+
/**
15+
* This function will add `mousedown`, `mouseup` & `mousemove` events to the
16+
* nodes in the `overNode`event to perform drag & drop operations. It uses
17+
* `linear interpolation` [http://en.wikipedia.org/wiki/Linear_interpolation]
18+
* and `rotation matrix` [http://en.wikipedia.org/wiki/Rotation_matrix] to
19+
* calculate the X and Y coordinates from the `cam` or `renderer` node
20+
* attributes. These attributes represent the coordinates of the nodes in
21+
* the real container, not in canvas.
22+
*
23+
* Recognized parameters:
24+
* **********************
25+
* @param {sigma} s The related sigma instance.
26+
* @param {renderer} renderer The related renderer instance.
27+
*/
28+
sigma.plugins.dragNodes = function(s, renderer) {
29+
// A quick hardcoded rule to prevent people from using this plugin with the
30+
// WebGL renderer (which is impossible at the moment):
31+
if (
32+
sigma.renderers.webgl &&
33+
renderer instanceof sigma.renderers.webgl
34+
)
35+
throw new Error(
36+
'The sigma.plugins.dragNodes is not compatible with the WebGL renderer'
37+
);
38+
39+
var _body = document.body,
40+
_container = renderer.container,
41+
_mouse = _container.lastChild,
42+
_camera = renderer.camera,
43+
_node = null,
44+
_prefix = '',
45+
_isOverNode = false,
46+
_isMouseOverCanvas = false;
47+
48+
// It removes the initial substring ('read_') if it's a WegGL renderer.
49+
if (renderer instanceof sigma.renderers.webgl) {
50+
_prefix = renderer.options.prefix.substr(5);
51+
} else {
52+
_prefix = renderer.options.prefix;
53+
}
54+
55+
var nodeMouseOver = function(event) {
56+
if (!_isOverNode) {
57+
_node = event.data.node;
58+
_mouse.addEventListener('mousedown', nodeMouseDown);
59+
_isOverNode = true;
60+
}
61+
};
62+
63+
var treatOutNode = function(event) {
64+
if (_isOverNode) {
65+
_mouse.removeEventListener('mousedown', nodeMouseDown);
66+
_isOverNode = false;
67+
}
68+
};
69+
70+
var nodeMouseDown = function(event) {
71+
var size = s.graph.nodes().length;
72+
if (size > 1) {
73+
_mouse.removeEventListener('mousedown', nodeMouseDown);
74+
_body.addEventListener('mousemove', nodeMouseMove);
75+
_body.addEventListener('mouseup', nodeMouseUp);
76+
77+
renderer.unbind('outNode', treatOutNode);
78+
79+
// Deactivate drag graph.
80+
renderer.settings({mouseEnabled: false, enableHovering: false});
81+
s.refresh();
82+
}
83+
};
84+
85+
var nodeMouseUp = function(event) {
86+
_mouse.addEventListener('mousedown', nodeMouseDown);
87+
_body.removeEventListener('mousemove', nodeMouseMove);
88+
_body.removeEventListener('mouseup', nodeMouseUp);
89+
90+
treatOutNode();
91+
renderer.bind('outNode', treatOutNode);
92+
93+
// Activate drag graph.
94+
renderer.settings({mouseEnabled: true, enableHovering: true});
95+
s.refresh();
96+
};
97+
98+
var nodeMouseMove = function(event) {
99+
var x = event.pageX - _container.offsetLeft,
100+
y = event.pageY - _container.offsetTop,
101+
cos = Math.cos(_camera.angle),
102+
sin = Math.sin(_camera.angle),
103+
nodes = s.graph.nodes(),
104+
ref = [];
105+
106+
// Getting and derotating the reference coordinates.
107+
for (var i = 0; i < 2; i++) {
108+
var n = nodes[i];
109+
var aux = {
110+
x: n.x * cos + n.y * sin,
111+
y: n.y * cos - n.x * sin,
112+
renX: n[_prefix + 'x'],
113+
renY: n[_prefix + 'y'],
114+
};
115+
ref.push(aux);
116+
}
117+
118+
// Applying linear interpolation.
119+
x = ((x - ref[0].renX) / (ref[1].renX - ref[0].renX)) *
120+
(ref[1].x - ref[0].x) + ref[0].x;
121+
y = ((y - ref[0].renY) / (ref[1].renY - ref[0].renY)) *
122+
(ref[1].y - ref[0].y) + ref[0].y;
123+
124+
// Rotating the coordinates.
125+
_node.x = x * cos - y * sin;
126+
_node.y = y * cos + x * sin;
127+
128+
s.refresh();
129+
};
130+
131+
renderer.bind('overNode', nodeMouseOver);
132+
renderer.bind('outNode', treatOutNode);
133+
};
134+
135+
}).call(window);

‎src/sigma.core.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -633,6 +633,13 @@
633633

634634

635635

636+
/**
637+
* The current version of sigma:
638+
*/
639+
sigma.version = '1.0.1';
640+
641+
642+
636643

637644
/**
638645
* EXPORT:

0 commit comments

Comments
 (0)