Skip to content

Commit 21afce8

Browse files
Eric RowellEric Rowell
Eric Rowell
authored and
Eric Rowell
committed
1 parent ac5a289 commit 21afce8

File tree

13 files changed

+69
-56
lines changed

13 files changed

+69
-56
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
# Changlog
22

3+
## v2.3.0
4+
* new edgeSize property
5+
* now supporting usecases where some nodes have labels and some nodes do not
6+
37
## v2.2.1
48
* oops, mobile devices don't support webgl2 yet. Rolled back to webgl
59
* now using gray color channels, rather than alpha, to focus on groups when clicking. Results are much nicer.

‎TODOS.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
# TODOS
22

33
## P0
4-
* new edgeSize property
54
* tooltips: false to disable tooltips
65
* fixed bug with tooltips interfering with chart controls
7-
* now supporting usecases where some nodes have labels and some nodes do not
86
* dynamic viewport resizing
97

108
## P1

‎engine/dist/ElGrapho.js‎

Lines changed: 31 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,8 @@ uniform float nodeSize;
432432

433433
varying vec4 vVertexColor;
434434

435+
const float MAX_NODE_SIZE = 16.0;
436+
435437
// unsigned rIntValue = (u_color / 256 / 256) % 256;
436438
// unsigned gIntValue = (u_color / 256 ) % 256;
437439
// unsigned bIntValue = (u_color ) % 256;
@@ -451,10 +453,10 @@ void main() {
451453
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
452454

453455
if (magicZoom) {
454-
gl_PointSize = nodeSize;
456+
gl_PointSize = MAX_NODE_SIZE;
455457
}
456458
else {
457-
float size = nodeSize * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
459+
float size = nodeSize * MAX_NODE_SIZE * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
458460
gl_PointSize = max(size, 5.0);
459461
}
460462

@@ -522,6 +524,8 @@ uniform float focusedGroup;
522524

523525
varying vec4 vVertexColor;
524526

527+
const float MAX_NODE_SIZE = 16.0;
528+
525529
// const PALETTE_HEX = [
526530
// '3366CC',
527531
// 'DC3912',
@@ -549,10 +553,10 @@ void main() {
549553
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
550554

551555
if (magicZoom) {
552-
gl_PointSize = nodeSize;
556+
gl_PointSize = MAX_NODE_SIZE;
553557
}
554558
else {
555-
gl_PointSize = nodeSize * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
559+
gl_PointSize = nodeSize * MAX_NODE_SIZE * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
556560
}
557561

558562
float validColor = mod(aVertexColor, 8.0);
@@ -651,16 +655,17 @@ uniform int hoverNode;
651655
varying vec4 vVertexColor;
652656

653657
const float POINT_STROKE_WIDTH_FACTOR = 1.5;
658+
const float MAX_NODE_SIZE = 16.0;
654659

655660
void main() {
656661
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
657662
//gl_Position.z = 0.0;
658663

659664
if (magicZoom) {
660-
gl_PointSize = nodeSize * POINT_STROKE_WIDTH_FACTOR;
665+
gl_PointSize = MAX_NODE_SIZE * POINT_STROKE_WIDTH_FACTOR;
661666
}
662667
else {
663-
gl_PointSize = nodeSize * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1])) * POINT_STROKE_WIDTH_FACTOR;
668+
gl_PointSize = nodeSize * MAX_NODE_SIZE * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1])) * POINT_STROKE_WIDTH_FACTOR;
664669
}
665670

666671

@@ -721,10 +726,11 @@ attribute float aVertexColor;
721726
uniform mat4 uModelViewMatrix;
722727
uniform mat4 uProjectionMatrix;
723728
uniform bool magicZoom;
724-
uniform float nodeSize;
729+
uniform float nodeSize; // 0 - 1
725730
uniform float focusedGroup;
731+
uniform float edgeSize; // 0 - 1
726732

727-
float MAX_NODE_SIZE = 16.0;
733+
const float MAX_NODE_SIZE = 16.0;
728734
const float PI = 3.1415926535897932384626433832795;
729735

730736
varying vec4 vVertexColor;
@@ -748,14 +754,15 @@ void main() {
748754
// vec2 rotatedNormal = rotate(vec2Normal, zoomAngle);
749755
// vec4 newNormal = vec4(rotatedNormal.x, rotatedNormal.y, 0.0, 0.0);
750756

751-
vec4 newNormal = vec4(normal.x, normal.y, 0.0, 0.0);
757+
vec4 newNormal = MAX_NODE_SIZE * 0.25 * edgeSize * vec4(normal.x, normal.y, 0.0, 0.0);
758+
752759

753760
if (magicZoom) {
754761
gl_Position = uProjectionMatrix * ((uModelViewMatrix * aVertexPosition) + newNormal);
755762
}
756763
else {
757-
newNormal.x = newNormal.x * zoomX * nodeSize / MAX_NODE_SIZE;
758-
newNormal.y = newNormal.y * zoomY * nodeSize / MAX_NODE_SIZE;
764+
newNormal.x = newNormal.x * zoomX * nodeSize;
765+
newNormal.y = newNormal.y * zoomY * nodeSize;
759766
gl_Position = uProjectionMatrix * ((uModelViewMatrix * aVertexPosition) + newNormal);
760767
}
761768

@@ -959,7 +966,6 @@ const RadialTree = __webpack_require__(/*! ./layouts/RadialTree */ "./engine/src
959966

960967
const ZOOM_FACTOR = 2;
961968
const START_SCALE = 1;
962-
const MAX_NODE_SIZE = 16;
963969

964970
let ElGrapho = function(config) {
965971
let that = this;
@@ -992,8 +998,8 @@ ElGrapho.prototype = {
992998
this.width = config.model.width;
993999
this.height = config.model.height;
9941000
this.steps = config.model.steps;
995-
this.nodeSize = config.nodeSize || 1;
996-
this.nodeSize *= MAX_NODE_SIZE;
1001+
this.nodeSize = config.nodeSize || 1; // 0 - 1
1002+
this.edgeSize = config.edgeSize || 0.25; // 0 - 1
9971003
this.focusedGroup = -1;
9981004

9991005
this.animations = [];
@@ -1078,7 +1084,7 @@ ElGrapho.prototype = {
10781084
},
10791085
setHasLabels: function() {
10801086
this.hasLabels = false;
1081-
1087+
10821088
let nodes = this.model.nodes;
10831089
for (let n=0; n<nodes.length; n++) {
10841090
let label = nodes[n].label;
@@ -1611,8 +1617,6 @@ const EasingFunctions = __webpack_require__(/*! ./EasingFunctions */ "./engine/s
16111617
const styles = __webpack_require__(/*! ../dist/styles/ElGrapho.min.css.js */ "./engine/dist/styles/ElGrapho.min.css.js");
16121618
const Enums = __webpack_require__(/*! ./Enums */ "./engine/src/Enums.js");
16131619

1614-
const MAX_NODE_SIZE = 16;
1615-
16161620
let ElGraphoCollection = {
16171621
graphs: [],
16181622
initialized: false,
@@ -1666,9 +1670,9 @@ let ElGraphoCollection = {
16661670
let zoom = Math.min(graph.zoomX, graph.zoomY);
16671671

16681672

1669-
if (graph.nodeSize * zoom >= MAX_NODE_SIZE) {
1673+
if (graph.nodeSize * zoom >= 1) {
16701674
magicZoom = true;
1671-
nodeSize = MAX_NODE_SIZE;
1675+
nodeSize = 1;
16721676
}
16731677
else {
16741678
magicZoom = false;
@@ -1677,7 +1681,7 @@ let ElGraphoCollection = {
16771681

16781682
if (graph.dirty) {
16791683
idle = false;
1680-
graph.webgl.drawScene(graph.panX, graph.panY, graph.zoomX, graph.zoomY, magicZoom, nodeSize, graph.focusedGroup, graph.hoveredDataIndex);
1684+
graph.webgl.drawScene(graph.panX, graph.panY, graph.zoomX, graph.zoomY, magicZoom, nodeSize, graph.focusedGroup, graph.hoveredDataIndex, graph.edgeSize);
16811685

16821686
graph.labelsLayer.scene.clear();
16831687

@@ -1917,7 +1921,7 @@ module.exports = UUID;
19171921
const Profiler = __webpack_require__(/*! ./Profiler */ "./engine/src/Profiler.js");
19181922
const glMatrix = __webpack_require__(/*! gl-matrix */ "./node_modules/gl-matrix/lib/gl-matrix.js");
19191923
const vec2 = glMatrix.vec2;
1920-
const MAX_NODE_SIZE = 16;
1924+
//const MAX_NODE_SIZE = 16;
19211925
const ARROW_WIDTH_MULTIPLIER = 4; // edge width times this number equals arrow width
19221926

19231927
const VertexBridge = {
@@ -1958,7 +1962,6 @@ const VertexBridge = {
19581962
for (let n=0; n<numEdges; n++) {
19591963
let pointIndex0 = edges[n].from;
19601964
let pointIndex1 = edges[n].to;
1961-
let normalDistance = MAX_NODE_SIZE*0.08;
19621965

19631966
let x0 = nodes[pointIndex0].x;
19641967
let x1 = nodes[pointIndex1].x;
@@ -1969,7 +1972,7 @@ const VertexBridge = {
19691972
let vector = vec2.fromValues(vectorX, vectorY);
19701973
let normalizedVector = vec2.normalize(vec2.create(), vector);
19711974
let perpVector = vec2.rotate(vec2.create(), normalizedVector, vec2.create(), Math.PI/2);
1972-
let offsetVector = vec2.scale(vec2.create(), perpVector, normalDistance);
1975+
let offsetVector = perpVector; // vec2.scale(vec2.create(), perpVector, normalDistance);
19731976
let xOffset = -1 * offsetVector[0];
19741977
let yOffset = offsetVector[1];
19751978

@@ -2240,6 +2243,7 @@ WebGL.prototype = {
22402243
shaderProgram.modelViewMatrixUniform = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
22412244
shaderProgram.magicZoom = gl.getUniformLocation(shaderProgram, 'magicZoom');
22422245
shaderProgram.nodeSize = gl.getUniformLocation(shaderProgram, 'nodeSize');
2246+
shaderProgram.edgeSize = gl.getUniformLocation(shaderProgram, 'edgeSize');
22432247
shaderProgram.focusedGroup = gl.getUniformLocation(shaderProgram, 'focusedGroup');
22442248

22452249
return shaderProgram;
@@ -2324,7 +2328,7 @@ WebGL.prototype = {
23242328

23252329
gl.drawArrays(gl.POINTS, 0, buffers.positions.numItems);
23262330
},
2327-
drawSceneTriangles: function(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup) {
2331+
drawSceneTriangles: function(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, edgeSize) {
23282332
let layer = this.layer;
23292333
let gl = layer.scene.context;
23302334
let shaderProgram = this.getTriangleShaderProgram();
@@ -2334,6 +2338,7 @@ WebGL.prototype = {
23342338
gl.uniformMatrix4fv(shaderProgram.modelViewMatrixUniform, false, modelViewMatrix);
23352339
gl.uniform1i(shaderProgram.magicZoom, magicZoom);
23362340
gl.uniform1f(shaderProgram.nodeSize, nodeSize);
2341+
gl.uniform1f(shaderProgram.edgeSize, edgeSize);
23372342
gl.uniform1f(shaderProgram.focusedGroup, focusedGroup);
23382343

23392344
this.bindBuffer(buffers.positions, shaderProgram.vertexPositionAttribute, gl);
@@ -2345,7 +2350,7 @@ WebGL.prototype = {
23452350

23462351
gl.drawArrays(gl.TRIANGLES, 0, buffers.positions.numItems);
23472352
},
2348-
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode) {
2353+
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode, edgeSize) {
23492354
let layer = this.layer;
23502355
let gl = layer.scene.context;
23512356

@@ -2380,7 +2385,7 @@ WebGL.prototype = {
23802385
//console.log(modelViewMatrix);
23812386

23822387
if (this.buffers.triangles) {
2383-
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
2388+
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, edgeSize);
23842389
}
23852390

23862391
if (this.buffers.points) {

‎engine/dist/ElGrapho.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎engine/src/ElGrapho.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ const RadialTree = require('./layouts/RadialTree');
2727

2828
const ZOOM_FACTOR = 2;
2929
const START_SCALE = 1;
30-
const MAX_NODE_SIZE = 16;
3130

3231
let ElGrapho = function(config) {
3332
let that = this;
@@ -60,8 +59,8 @@ ElGrapho.prototype = {
6059
this.width = config.model.width;
6160
this.height = config.model.height;
6261
this.steps = config.model.steps;
63-
this.nodeSize = config.nodeSize || 1;
64-
this.nodeSize *= MAX_NODE_SIZE;
62+
this.nodeSize = config.nodeSize || 1; // 0 - 1
63+
this.edgeSize = config.edgeSize || 0.25; // 0 - 1
6564
this.focusedGroup = -1;
6665

6766
this.animations = [];
@@ -146,7 +145,7 @@ ElGrapho.prototype = {
146145
},
147146
setHasLabels: function() {
148147
this.hasLabels = false;
149-
148+
150149
let nodes = this.model.nodes;
151150
for (let n=0; n<nodes.length; n++) {
152151
let label = nodes[n].label;

‎engine/src/ElGraphoCollection.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ const EasingFunctions = require('./EasingFunctions');
22
const styles = require('../dist/styles/ElGrapho.min.css.js');
33
const Enums = require('./Enums');
44

5-
const MAX_NODE_SIZE = 16;
6-
75
let ElGraphoCollection = {
86
graphs: [],
97
initialized: false,
@@ -57,9 +55,9 @@ let ElGraphoCollection = {
5755
let zoom = Math.min(graph.zoomX, graph.zoomY);
5856

5957

60-
if (graph.nodeSize * zoom >= MAX_NODE_SIZE) {
58+
if (graph.nodeSize * zoom >= 1) {
6159
magicZoom = true;
62-
nodeSize = MAX_NODE_SIZE;
60+
nodeSize = 1;
6361
}
6462
else {
6563
magicZoom = false;
@@ -68,7 +66,7 @@ let ElGraphoCollection = {
6866

6967
if (graph.dirty) {
7068
idle = false;
71-
graph.webgl.drawScene(graph.panX, graph.panY, graph.zoomX, graph.zoomY, magicZoom, nodeSize, graph.focusedGroup, graph.hoveredDataIndex);
69+
graph.webgl.drawScene(graph.panX, graph.panY, graph.zoomX, graph.zoomY, magicZoom, nodeSize, graph.focusedGroup, graph.hoveredDataIndex, graph.edgeSize);
7270

7371
graph.labelsLayer.scene.clear();
7472

‎engine/src/VertexBridge.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const Profiler = require('./Profiler');
22
const glMatrix = require('gl-matrix');
33
const vec2 = glMatrix.vec2;
4-
const MAX_NODE_SIZE = 16;
4+
//const MAX_NODE_SIZE = 16;
55
const ARROW_WIDTH_MULTIPLIER = 4; // edge width times this number equals arrow width
66

77
const VertexBridge = {
@@ -42,7 +42,6 @@ const VertexBridge = {
4242
for (let n=0; n<numEdges; n++) {
4343
let pointIndex0 = edges[n].from;
4444
let pointIndex1 = edges[n].to;
45-
let normalDistance = MAX_NODE_SIZE*0.08;
4645

4746
let x0 = nodes[pointIndex0].x;
4847
let x1 = nodes[pointIndex1].x;
@@ -53,7 +52,7 @@ const VertexBridge = {
5352
let vector = vec2.fromValues(vectorX, vectorY);
5453
let normalizedVector = vec2.normalize(vec2.create(), vector);
5554
let perpVector = vec2.rotate(vec2.create(), normalizedVector, vec2.create(), Math.PI/2);
56-
let offsetVector = vec2.scale(vec2.create(), perpVector, normalDistance);
55+
let offsetVector = perpVector; // vec2.scale(vec2.create(), perpVector, normalDistance);
5756
let xOffset = -1 * offsetVector[0];
5857
let yOffset = offsetVector[1];
5958

‎engine/src/WebGL.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ WebGL.prototype = {
168168
shaderProgram.modelViewMatrixUniform = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix');
169169
shaderProgram.magicZoom = gl.getUniformLocation(shaderProgram, 'magicZoom');
170170
shaderProgram.nodeSize = gl.getUniformLocation(shaderProgram, 'nodeSize');
171+
shaderProgram.edgeSize = gl.getUniformLocation(shaderProgram, 'edgeSize');
171172
shaderProgram.focusedGroup = gl.getUniformLocation(shaderProgram, 'focusedGroup');
172173

173174
return shaderProgram;
@@ -252,7 +253,7 @@ WebGL.prototype = {
252253

253254
gl.drawArrays(gl.POINTS, 0, buffers.positions.numItems);
254255
},
255-
drawSceneTriangles: function(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup) {
256+
drawSceneTriangles: function(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, edgeSize) {
256257
let layer = this.layer;
257258
let gl = layer.scene.context;
258259
let shaderProgram = this.getTriangleShaderProgram();
@@ -262,6 +263,7 @@ WebGL.prototype = {
262263
gl.uniformMatrix4fv(shaderProgram.modelViewMatrixUniform, false, modelViewMatrix);
263264
gl.uniform1i(shaderProgram.magicZoom, magicZoom);
264265
gl.uniform1f(shaderProgram.nodeSize, nodeSize);
266+
gl.uniform1f(shaderProgram.edgeSize, edgeSize);
265267
gl.uniform1f(shaderProgram.focusedGroup, focusedGroup);
266268

267269
this.bindBuffer(buffers.positions, shaderProgram.vertexPositionAttribute, gl);
@@ -273,7 +275,7 @@ WebGL.prototype = {
273275

274276
gl.drawArrays(gl.TRIANGLES, 0, buffers.positions.numItems);
275277
},
276-
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode) {
278+
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode, edgeSize) {
277279
let layer = this.layer;
278280
let gl = layer.scene.context;
279281

@@ -308,7 +310,7 @@ WebGL.prototype = {
308310
//console.log(modelViewMatrix);
309311

310312
if (this.buffers.triangles) {
311-
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
313+
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, edgeSize);
312314
}
313315

314316
if (this.buffers.points) {

‎engine/src/shaders/hitPoint.vert‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ uniform float nodeSize;
1010

1111
varying vec4 vVertexColor;
1212

13+
const float MAX_NODE_SIZE = 16.0;
14+
1315
// unsigned rIntValue = (u_color / 256 / 256) % 256;
1416
// unsigned gIntValue = (u_color / 256 ) % 256;
1517
// unsigned bIntValue = (u_color ) % 256;
@@ -29,10 +31,10 @@ void main() {
2931
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
3032

3133
if (magicZoom) {
32-
gl_PointSize = nodeSize;
34+
gl_PointSize = MAX_NODE_SIZE;
3335
}
3436
else {
35-
float size = nodeSize * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
37+
float size = nodeSize * MAX_NODE_SIZE * min(length(uModelViewMatrix[0]), length(uModelViewMatrix[1]));
3638
gl_PointSize = max(size, 5.0);
3739
}
3840

0 commit comments

Comments
 (0)