vis-rails 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +5 -13
- data/lib/vis/rails/version.rb +1 -1
- data/vendor/assets/component/emitter.js +162 -0
- data/vendor/assets/javascripts/vis.js +1 -0
- data/vendor/assets/vis/DataSet.js +8 -2
- data/vendor/assets/vis/DataView.js +8 -4
- data/vendor/assets/vis/graph/Edge.js +210 -78
- data/vendor/assets/vis/graph/Graph.js +474 -652
- data/vendor/assets/vis/graph/Node.js +119 -82
- data/vendor/assets/vis/graph/css/graph-manipulation.css +128 -0
- data/vendor/assets/vis/graph/css/graph-navigation.css +62 -0
- data/vendor/assets/vis/graph/graphMixins/ClusterMixin.js +1141 -0
- data/vendor/assets/vis/graph/graphMixins/HierarchicalLayoutMixin.js +296 -0
- data/vendor/assets/vis/graph/graphMixins/ManipulationMixin.js +433 -0
- data/vendor/assets/vis/graph/graphMixins/MixinLoader.js +201 -0
- data/vendor/assets/vis/graph/graphMixins/NavigationMixin.js +173 -0
- data/vendor/assets/vis/graph/graphMixins/SectorsMixin.js +552 -0
- data/vendor/assets/vis/graph/graphMixins/SelectionMixin.js +558 -0
- data/vendor/assets/vis/graph/graphMixins/physics/BarnesHut.js +373 -0
- data/vendor/assets/vis/graph/graphMixins/physics/HierarchialRepulsion.js +64 -0
- data/vendor/assets/vis/graph/graphMixins/physics/PhysicsMixin.js +513 -0
- data/vendor/assets/vis/graph/graphMixins/physics/Repulsion.js +66 -0
- data/vendor/assets/vis/graph/img/acceptDeleteIcon.png +0 -0
- data/vendor/assets/vis/graph/img/addNodeIcon.png +0 -0
- data/vendor/assets/vis/graph/img/backIcon.png +0 -0
- data/vendor/assets/vis/graph/img/connectIcon.png +0 -0
- data/vendor/assets/vis/graph/img/cross.png +0 -0
- data/vendor/assets/vis/graph/img/cross2.png +0 -0
- data/vendor/assets/vis/graph/img/deleteIcon.png +0 -0
- data/vendor/assets/vis/graph/img/downArrow.png +0 -0
- data/vendor/assets/vis/graph/img/editIcon.png +0 -0
- data/vendor/assets/vis/graph/img/leftArrow.png +0 -0
- data/vendor/assets/vis/graph/img/rightArrow.png +0 -0
- data/vendor/assets/vis/graph/img/upArrow.png +0 -0
- data/vendor/assets/vis/module/exports.js +0 -2
- data/vendor/assets/vis/module/header.js +2 -2
- data/vendor/assets/vis/module/imports.js +1 -2
- data/vendor/assets/vis/timeline/Controller.js +56 -45
- data/vendor/assets/vis/timeline/Range.js +68 -62
- data/vendor/assets/vis/timeline/Stack.js +11 -13
- data/vendor/assets/vis/timeline/TimeStep.js +43 -38
- data/vendor/assets/vis/timeline/Timeline.js +215 -93
- data/vendor/assets/vis/timeline/component/Component.js +19 -3
- data/vendor/assets/vis/timeline/component/CurrentTime.js +1 -1
- data/vendor/assets/vis/timeline/component/CustomTime.js +39 -120
- data/vendor/assets/vis/timeline/component/GroupSet.js +35 -1
- data/vendor/assets/vis/timeline/component/ItemSet.js +272 -9
- data/vendor/assets/vis/timeline/component/RootPanel.js +59 -47
- data/vendor/assets/vis/timeline/component/TimeAxis.js +10 -0
- data/vendor/assets/vis/timeline/component/css/item.css +53 -22
- data/vendor/assets/vis/timeline/component/item/Item.js +40 -5
- data/vendor/assets/vis/timeline/component/item/ItemBox.js +3 -1
- data/vendor/assets/vis/timeline/component/item/ItemPoint.js +3 -1
- data/vendor/assets/vis/timeline/component/item/ItemRange.js +67 -3
- data/vendor/assets/vis/timeline/component/item/ItemRangeOverflow.js +37 -9
- data/vendor/assets/vis/timeline/img/delete.png +0 -0
- data/vendor/assets/vis/util.js +169 -30
- metadata +39 -12
@@ -21,6 +21,7 @@
|
|
21
21
|
* retrieving group properties
|
22
22
|
* @param {Object} constants An object with default values for
|
23
23
|
* example for the color
|
24
|
+
*
|
24
25
|
*/
|
25
26
|
function Node(properties, imagelist, grouplist, constants) {
|
26
27
|
this.selected = false;
|
@@ -33,6 +34,7 @@ function Node(properties, imagelist, grouplist, constants) {
|
|
33
34
|
this.fontSize = constants.nodes.fontSize;
|
34
35
|
this.fontFace = constants.nodes.fontFace;
|
35
36
|
this.fontColor = constants.nodes.fontColor;
|
37
|
+
this.fontDrawThreshold = 3;
|
36
38
|
|
37
39
|
this.color = constants.nodes.color;
|
38
40
|
|
@@ -51,11 +53,20 @@ function Node(properties, imagelist, grouplist, constants) {
|
|
51
53
|
this.radiusFixed = false;
|
52
54
|
this.radiusMin = constants.nodes.radiusMin;
|
53
55
|
this.radiusMax = constants.nodes.radiusMax;
|
56
|
+
this.level = -1;
|
54
57
|
|
55
58
|
this.imagelist = imagelist;
|
56
|
-
|
57
59
|
this.grouplist = grouplist;
|
58
60
|
|
61
|
+
// physics properties
|
62
|
+
this.fx = 0.0; // external force x
|
63
|
+
this.fy = 0.0; // external force y
|
64
|
+
this.vx = 0.0; // velocity x
|
65
|
+
this.vy = 0.0; // velocity y
|
66
|
+
this.minForce = constants.minForce;
|
67
|
+
this.damping = constants.physics.damping;
|
68
|
+
this.mass = 1; // kg
|
69
|
+
|
59
70
|
this.setProperties(properties, constants);
|
60
71
|
|
61
72
|
// creating the variables for clustering
|
@@ -65,20 +76,15 @@ function Node(properties, imagelist, grouplist, constants) {
|
|
65
76
|
this.clusterSizeWidthFactor = constants.clustering.nodeScaling.width;
|
66
77
|
this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
|
67
78
|
this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
|
79
|
+
this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
|
80
|
+
this.growthIndicator = 0;
|
68
81
|
|
69
|
-
//
|
70
|
-
this.mass = 1; // kg (mass is adjusted for the number of connected edges)
|
71
|
-
this.fx = 0.0; // external force x
|
72
|
-
this.fy = 0.0; // external force y
|
73
|
-
this.vx = 0.0; // velocity x
|
74
|
-
this.vy = 0.0; // velocity y
|
75
|
-
this.minForce = constants.minForce;
|
76
|
-
this.damping = 0.9;
|
77
|
-
this.dampingFactor = 75;
|
78
|
-
|
82
|
+
// variables to tell the node about the graph.
|
79
83
|
this.graphScaleInv = 1;
|
84
|
+
this.graphScale = 1;
|
80
85
|
this.canvasTopLeft = {"x": -300, "y": -300};
|
81
86
|
this.canvasBottomRight = {"x": 300, "y": 300};
|
87
|
+
this.parentEdgeId = null;
|
82
88
|
}
|
83
89
|
|
84
90
|
/**
|
@@ -105,7 +111,6 @@ Node.prototype.attachEdge = function(edge) {
|
|
105
111
|
this.dynamicEdges.push(edge);
|
106
112
|
}
|
107
113
|
this.dynamicEdgesLength = this.dynamicEdges.length;
|
108
|
-
this._updateMass();
|
109
114
|
};
|
110
115
|
|
111
116
|
/**
|
@@ -119,17 +124,8 @@ Node.prototype.detachEdge = function(edge) {
|
|
119
124
|
this.dynamicEdges.splice(index, 1);
|
120
125
|
}
|
121
126
|
this.dynamicEdgesLength = this.dynamicEdges.length;
|
122
|
-
this._updateMass();
|
123
127
|
};
|
124
128
|
|
125
|
-
/**
|
126
|
-
* Update the nodes mass, which is determined by the number of edges connecting
|
127
|
-
* to it (more edges -> heavier node).
|
128
|
-
* @private
|
129
|
-
*/
|
130
|
-
Node.prototype._updateMass = function() {
|
131
|
-
this.mass = 1 + 0.6 * this.edges.length; // kg
|
132
|
-
};
|
133
129
|
|
134
130
|
/**
|
135
131
|
* Set or overwrite properties for the node
|
@@ -149,6 +145,13 @@ Node.prototype.setProperties = function(properties, constants) {
|
|
149
145
|
if (properties.x !== undefined) {this.x = properties.x;}
|
150
146
|
if (properties.y !== undefined) {this.y = properties.y;}
|
151
147
|
if (properties.value !== undefined) {this.value = properties.value;}
|
148
|
+
if (properties.level !== undefined) {this.level = properties.level;}
|
149
|
+
|
150
|
+
|
151
|
+
// physics
|
152
|
+
if (properties.internalMultiplier !== undefined) {this.internalMultiplier = properties.internalMultiplier;}
|
153
|
+
if (properties.damping !== undefined) {this.dampingBase = properties.damping;}
|
154
|
+
if (properties.mass !== undefined) {this.mass = properties.mass;}
|
152
155
|
|
153
156
|
// navigation controls properties
|
154
157
|
if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
|
@@ -188,8 +191,8 @@ Node.prototype.setProperties = function(properties, constants) {
|
|
188
191
|
}
|
189
192
|
}
|
190
193
|
|
191
|
-
this.xFixed = this.xFixed || (properties.x !== undefined);
|
192
|
-
this.yFixed = this.yFixed || (properties.y !== undefined);
|
194
|
+
this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMove);
|
195
|
+
this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMove);
|
193
196
|
this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
|
194
197
|
|
195
198
|
if (this.shape == 'image') {
|
@@ -226,15 +229,32 @@ Node.prototype.setProperties = function(properties, constants) {
|
|
226
229
|
Node.parseColor = function(color) {
|
227
230
|
var c;
|
228
231
|
if (util.isString(color)) {
|
229
|
-
|
230
|
-
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
232
|
+
if (util.isValidHex(color)) {
|
233
|
+
var hsv = util.hexToHSV(color);
|
234
|
+
var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
|
235
|
+
var darkerColorHSV = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
|
236
|
+
var darkerColorHex = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
|
237
|
+
var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
|
238
|
+
|
239
|
+
c = {
|
240
|
+
background: color,
|
241
|
+
border:darkerColorHex,
|
242
|
+
highlight: {
|
243
|
+
background:lighterColorHex,
|
244
|
+
border:darkerColorHex
|
245
|
+
}
|
246
|
+
};
|
247
|
+
}
|
248
|
+
else {
|
249
|
+
c = {
|
250
|
+
background:color,
|
251
|
+
border:color,
|
252
|
+
highlight: {
|
253
|
+
background:color,
|
254
|
+
border:color
|
255
|
+
}
|
256
|
+
};
|
257
|
+
}
|
238
258
|
}
|
239
259
|
else {
|
240
260
|
c = {};
|
@@ -312,7 +332,6 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
|
|
312
332
|
this.resize(ctx);
|
313
333
|
}
|
314
334
|
|
315
|
-
//noinspection FallthroughInSwitchStatementJS
|
316
335
|
switch (this.shape) {
|
317
336
|
case 'circle':
|
318
337
|
case 'dot':
|
@@ -344,7 +363,6 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
|
|
344
363
|
}
|
345
364
|
|
346
365
|
}
|
347
|
-
|
348
366
|
// TODO: implement calculation of distance to border for all shapes
|
349
367
|
};
|
350
368
|
|
@@ -375,21 +393,44 @@ Node.prototype._addForce = function(fx, fy) {
|
|
375
393
|
*/
|
376
394
|
Node.prototype.discreteStep = function(interval) {
|
377
395
|
if (!this.xFixed) {
|
378
|
-
var dx =
|
379
|
-
var ax = (this.fx
|
396
|
+
var dx = this.damping * this.vx; // damping force
|
397
|
+
var ax = (this.fx - dx) / this.mass; // acceleration
|
380
398
|
this.vx += ax * interval; // velocity
|
381
399
|
this.x += this.vx * interval; // position
|
382
400
|
}
|
383
401
|
|
384
402
|
if (!this.yFixed) {
|
385
|
-
var dy =
|
386
|
-
var ay = (this.fy
|
403
|
+
var dy = this.damping * this.vy; // damping force
|
404
|
+
var ay = (this.fy - dy) / this.mass; // acceleration
|
387
405
|
this.vy += ay * interval; // velocity
|
388
406
|
this.y += this.vy * interval; // position
|
389
407
|
}
|
390
408
|
};
|
391
409
|
|
392
410
|
|
411
|
+
|
412
|
+
/**
|
413
|
+
* Perform one discrete step for the node
|
414
|
+
* @param {number} interval Time interval in seconds
|
415
|
+
*/
|
416
|
+
Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
|
417
|
+
if (!this.xFixed) {
|
418
|
+
var dx = this.damping * this.vx; // damping force
|
419
|
+
var ax = (this.fx - dx) / this.mass; // acceleration
|
420
|
+
this.vx += ax * interval; // velocity
|
421
|
+
this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
|
422
|
+
this.x += this.vx * interval; // position
|
423
|
+
}
|
424
|
+
|
425
|
+
if (!this.yFixed) {
|
426
|
+
var dy = this.damping * this.vy; // damping force
|
427
|
+
var ay = (this.fy - dy) / this.mass; // acceleration
|
428
|
+
this.vy += ay * interval; // velocity
|
429
|
+
this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
|
430
|
+
this.y += this.vy * interval; // position
|
431
|
+
}
|
432
|
+
};
|
433
|
+
|
393
434
|
/**
|
394
435
|
* Check if this node has a fixed x and y position
|
395
436
|
* @return {boolean} true if fixed, false if not
|
@@ -405,16 +446,7 @@ Node.prototype.isFixed = function() {
|
|
405
446
|
*/
|
406
447
|
// TODO: replace this method with calculating the kinetic energy
|
407
448
|
Node.prototype.isMoving = function(vmin) {
|
408
|
-
|
409
|
-
if (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin) {
|
410
|
-
// console.log(vmin,this.vx,this.vy);
|
411
|
-
return true;
|
412
|
-
}
|
413
|
-
else {
|
414
|
-
this.vx = 0; this.vy = 0;
|
415
|
-
return false;
|
416
|
-
}
|
417
|
-
//return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
|
449
|
+
return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
|
418
450
|
};
|
419
451
|
|
420
452
|
/**
|
@@ -519,10 +551,12 @@ Node.prototype._resizeImage = function (ctx) {
|
|
519
551
|
this.width = width;
|
520
552
|
this.height = height;
|
521
553
|
|
554
|
+
this.growthIndicator = 0;
|
522
555
|
if (this.width > 0 && this.height > 0) {
|
523
|
-
this.width += (this.clusterSize - 1)
|
524
|
-
this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
|
525
|
-
this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
|
556
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
|
557
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
|
558
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
|
559
|
+
this.growthIndicator = this.width - width;
|
526
560
|
}
|
527
561
|
}
|
528
562
|
|
@@ -567,9 +601,11 @@ Node.prototype._resizeBox = function (ctx) {
|
|
567
601
|
this.width = textSize.width + 2 * margin;
|
568
602
|
this.height = textSize.height + 2 * margin;
|
569
603
|
|
570
|
-
this.width += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
|
571
|
-
this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
|
572
|
-
|
604
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
|
605
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
|
606
|
+
this.growthIndicator = this.width - (textSize.width + 2 * margin);
|
607
|
+
// this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
|
608
|
+
|
573
609
|
}
|
574
610
|
};
|
575
611
|
|
@@ -616,9 +652,10 @@ Node.prototype._resizeDatabase = function (ctx) {
|
|
616
652
|
this.height = size;
|
617
653
|
|
618
654
|
// scaling used for clustering
|
619
|
-
this.width += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
|
620
|
-
this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
|
621
|
-
this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
|
655
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
|
656
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
|
657
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
|
658
|
+
this.growthIndicator = this.width - size;
|
622
659
|
}
|
623
660
|
};
|
624
661
|
|
@@ -665,9 +702,10 @@ Node.prototype._resizeCircle = function (ctx) {
|
|
665
702
|
this.height = diameter;
|
666
703
|
|
667
704
|
// scaling used for clustering
|
668
|
-
// this.width += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
|
669
|
-
// this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
|
670
|
-
this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
|
705
|
+
// this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
|
706
|
+
// this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
|
707
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
|
708
|
+
this.growthIndicator = this.radius - 0.5*diameter;
|
671
709
|
}
|
672
710
|
};
|
673
711
|
|
@@ -711,11 +749,13 @@ Node.prototype._resizeEllipse = function (ctx) {
|
|
711
749
|
if (this.width < this.height) {
|
712
750
|
this.width = this.height;
|
713
751
|
}
|
752
|
+
var defaultSize = this.width;
|
714
753
|
|
715
|
-
|
716
|
-
this.width += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
|
717
|
-
this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
|
718
|
-
this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
|
754
|
+
// scaling used for clustering
|
755
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
|
756
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
|
757
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
|
758
|
+
this.growthIndicator = this.width - defaultSize;
|
719
759
|
}
|
720
760
|
};
|
721
761
|
|
@@ -778,9 +818,10 @@ Node.prototype._resizeShape = function (ctx) {
|
|
778
818
|
this.height = size;
|
779
819
|
|
780
820
|
// scaling used for clustering
|
781
|
-
this.width += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
|
782
|
-
this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
|
783
|
-
this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
|
821
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
|
822
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
|
823
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
|
824
|
+
this.growthIndicator = this.width - size;
|
784
825
|
}
|
785
826
|
};
|
786
827
|
|
@@ -837,9 +878,10 @@ Node.prototype._resizeText = function (ctx) {
|
|
837
878
|
this.height = textSize.height + 2 * margin;
|
838
879
|
|
839
880
|
// scaling used for clustering
|
840
|
-
this.width += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
|
841
|
-
this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
|
842
|
-
this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
|
881
|
+
this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
|
882
|
+
this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
|
883
|
+
this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
|
884
|
+
this.growthIndicator = this.width - (textSize.width + 2 * margin);
|
843
885
|
}
|
844
886
|
};
|
845
887
|
|
@@ -853,7 +895,7 @@ Node.prototype._drawText = function (ctx) {
|
|
853
895
|
|
854
896
|
|
855
897
|
Node.prototype._label = function (ctx, text, x, y, align, baseline) {
|
856
|
-
if (text) {
|
898
|
+
if (text && this.fontSize * this.graphScale > this.fontDrawThreshold) {
|
857
899
|
ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
|
858
900
|
ctx.fillStyle = this.fontColor || "black";
|
859
901
|
ctx.textAlign = align || "center";
|
@@ -907,7 +949,7 @@ Node.prototype.inArea = function() {
|
|
907
949
|
else {
|
908
950
|
return true;
|
909
951
|
}
|
910
|
-
}
|
952
|
+
};
|
911
953
|
|
912
954
|
/**
|
913
955
|
* checks if the core of the node is in the display area, this is used for opening clusters around zoom
|
@@ -918,7 +960,7 @@ Node.prototype.inView = function() {
|
|
918
960
|
this.x < this.canvasBottomRight.x &&
|
919
961
|
this.y >= this.canvasTopLeft.y &&
|
920
962
|
this.y < this.canvasBottomRight.y);
|
921
|
-
}
|
963
|
+
};
|
922
964
|
|
923
965
|
/**
|
924
966
|
* This allows the zoom level of the graph to influence the rendering
|
@@ -930,6 +972,7 @@ Node.prototype.inView = function() {
|
|
930
972
|
*/
|
931
973
|
Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
|
932
974
|
this.graphScaleInv = 1.0/scale;
|
975
|
+
this.graphScale = scale;
|
933
976
|
this.canvasTopLeft = canvasTopLeft;
|
934
977
|
this.canvasBottomRight = canvasBottomRight;
|
935
978
|
};
|
@@ -942,17 +985,9 @@ Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight)
|
|
942
985
|
*/
|
943
986
|
Node.prototype.setScale = function(scale) {
|
944
987
|
this.graphScaleInv = 1.0/scale;
|
988
|
+
this.graphScale = scale;
|
945
989
|
};
|
946
990
|
|
947
|
-
/**
|
948
|
-
* This function updates the damping parameter for clusters, based ont he
|
949
|
-
*
|
950
|
-
* @param {Number} numberOfNodes
|
951
|
-
*/
|
952
|
-
Node.prototype.updateDamping = function(numberOfNodes) {
|
953
|
-
this.damping = (0.8 + 0.1*this.clusterSize * (1 + Math.pow(numberOfNodes,-2)));
|
954
|
-
this.damping *= this.dampingFactor;
|
955
|
-
};
|
956
991
|
|
957
992
|
|
958
993
|
/**
|
@@ -971,8 +1006,10 @@ Node.prototype.clearVelocity = function() {
|
|
971
1006
|
*/
|
972
1007
|
Node.prototype.updateVelocity = function(massBeforeClustering) {
|
973
1008
|
var energyBefore = this.vx * this.vx * massBeforeClustering;
|
1009
|
+
//this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
|
974
1010
|
this.vx = Math.sqrt(energyBefore/this.mass);
|
975
1011
|
energyBefore = this.vy * this.vy * massBeforeClustering;
|
1012
|
+
//this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
|
976
1013
|
this.vy = Math.sqrt(energyBefore/this.mass);
|
977
1014
|
};
|
978
1015
|
|
@@ -0,0 +1,128 @@
|
|
1
|
+
div.graph-manipulationDiv {
|
2
|
+
border-width:0px;
|
3
|
+
border-bottom: 1px;
|
4
|
+
border-style:solid;
|
5
|
+
border-color: #d6d9d8;
|
6
|
+
background: #ffffff; /* Old browsers */
|
7
|
+
background: -moz-linear-gradient(top, #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
|
8
|
+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(48%,#fcfcfc), color-stop(50%,#fafafa), color-stop(100%,#fcfcfc)); /* Chrome,Safari4+ */
|
9
|
+
background: -webkit-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
|
10
|
+
background: -o-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
|
11
|
+
background: -ms-linear-gradient(top, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
|
12
|
+
background: linear-gradient(to bottom, #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
|
13
|
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
|
14
|
+
|
15
|
+
width: 600px;
|
16
|
+
height:30px;
|
17
|
+
z-index:10;
|
18
|
+
position:absolute;
|
19
|
+
}
|
20
|
+
|
21
|
+
div.graph-manipulation-editMode {
|
22
|
+
height:30px;
|
23
|
+
z-index:10;
|
24
|
+
position:absolute;
|
25
|
+
margin-top:20px;
|
26
|
+
}
|
27
|
+
|
28
|
+
div.graph-manipulation-closeDiv {
|
29
|
+
height:30px;
|
30
|
+
width:30px;
|
31
|
+
z-index:11;
|
32
|
+
position:absolute;
|
33
|
+
margin-top:3px;
|
34
|
+
margin-left:590px;
|
35
|
+
background-position: 0px 0px;
|
36
|
+
background-repeat:no-repeat;
|
37
|
+
background-image: url("img/graph/cross.png");
|
38
|
+
cursor: pointer;
|
39
|
+
-webkit-touch-callout: none;
|
40
|
+
-webkit-user-select: none;
|
41
|
+
-khtml-user-select: none;
|
42
|
+
-moz-user-select: none;
|
43
|
+
-ms-user-select: none;
|
44
|
+
user-select: none;
|
45
|
+
}
|
46
|
+
|
47
|
+
span.graph-manipulationUI {
|
48
|
+
font-family: verdana;
|
49
|
+
font-size: 12px;
|
50
|
+
-moz-border-radius: 15px;
|
51
|
+
border-radius: 15px;
|
52
|
+
display:inline-block;
|
53
|
+
background-position: 0px 0px;
|
54
|
+
background-repeat:no-repeat;
|
55
|
+
height:24px;
|
56
|
+
margin: -14px 0px 0px 10px;
|
57
|
+
vertical-align:middle;
|
58
|
+
cursor: pointer;
|
59
|
+
padding: 0px 8px 0px 8px;
|
60
|
+
-webkit-touch-callout: none;
|
61
|
+
-webkit-user-select: none;
|
62
|
+
-khtml-user-select: none;
|
63
|
+
-moz-user-select: none;
|
64
|
+
-ms-user-select: none;
|
65
|
+
user-select: none;
|
66
|
+
}
|
67
|
+
|
68
|
+
span.graph-manipulationUI:hover {
|
69
|
+
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
|
70
|
+
}
|
71
|
+
|
72
|
+
span.graph-manipulationUI:active {
|
73
|
+
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
|
74
|
+
}
|
75
|
+
|
76
|
+
span.graph-manipulationUI.back {
|
77
|
+
background-image: url("img/graph/backIcon.png");
|
78
|
+
}
|
79
|
+
|
80
|
+
span.graph-manipulationUI.none:hover {
|
81
|
+
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
|
82
|
+
cursor: default;
|
83
|
+
}
|
84
|
+
span.graph-manipulationUI.none:active {
|
85
|
+
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
|
86
|
+
}
|
87
|
+
span.graph-manipulationUI.none {
|
88
|
+
padding: 0px 0px 0px 0px;
|
89
|
+
}
|
90
|
+
span.graph-manipulationUI.notification{
|
91
|
+
margin: 2px;
|
92
|
+
font-weight: bold;
|
93
|
+
}
|
94
|
+
|
95
|
+
span.graph-manipulationUI.add {
|
96
|
+
background-image: url("img/graph/addNodeIcon.png");
|
97
|
+
}
|
98
|
+
|
99
|
+
span.graph-manipulationUI.edit {
|
100
|
+
background-image: url("img/graph/editIcon.png");
|
101
|
+
}
|
102
|
+
|
103
|
+
span.graph-manipulationUI.edit.editmode {
|
104
|
+
background-color: #fcfcfc;
|
105
|
+
border-style:solid;
|
106
|
+
border-width:1px;
|
107
|
+
border-color: #cccccc;
|
108
|
+
}
|
109
|
+
|
110
|
+
span.graph-manipulationUI.connect {
|
111
|
+
background-image: url("img/graph/connectIcon.png");
|
112
|
+
}
|
113
|
+
|
114
|
+
span.graph-manipulationUI.delete {
|
115
|
+
background-image: url("img/graph/deleteIcon.png");
|
116
|
+
}
|
117
|
+
/* top right bottom left */
|
118
|
+
span.graph-manipulationLabel {
|
119
|
+
margin: 0px 0px 0px 23px;
|
120
|
+
line-height: 25px;
|
121
|
+
}
|
122
|
+
div.graph-seperatorLine {
|
123
|
+
display:inline-block;
|
124
|
+
width:1px;
|
125
|
+
height:20px;
|
126
|
+
background-color: #bdbdbd;
|
127
|
+
margin: 5px 7px 0px 15px;
|
128
|
+
}
|