vis-rails 0.0.4 → 0.0.5

data/vendor/assets/vis/graph/Node.js

@@ -21,6 +21,7 @@
  *                                            retrieving group properties
  * @param {Object}               constants    An object with default values for
  *                                            example for the color
+ *
  */
 function Node(properties, imagelist, grouplist, constants) {
   this.selected = false;
@@ -33,6 +34,7 @@ function Node(properties, imagelist, grouplist, constants) {
   this.fontSize = constants.nodes.fontSize;
   this.fontFace = constants.nodes.fontFace;
   this.fontColor = constants.nodes.fontColor;
+  this.fontDrawThreshold = 3;
 
   this.color = constants.nodes.color;
 
@@ -51,11 +53,20 @@ function Node(properties, imagelist, grouplist, constants) {
   this.radiusFixed = false;
   this.radiusMin = constants.nodes.radiusMin;
   this.radiusMax = constants.nodes.radiusMax;
+  this.level = -1;
 
   this.imagelist = imagelist;
-
   this.grouplist = grouplist;
 
+  // physics properties
+  this.fx = 0.0;  // external force x
+  this.fy = 0.0;  // external force y
+  this.vx = 0.0;  // velocity x
+  this.vy = 0.0;  // velocity y
+  this.minForce = constants.minForce;
+  this.damping = constants.physics.damping;
+  this.mass = 1;  // kg
+
   this.setProperties(properties, constants);
 
   // creating the variables for clustering
@@ -65,20 +76,15 @@ function Node(properties, imagelist, grouplist, constants) {
   this.clusterSizeWidthFactor  = constants.clustering.nodeScaling.width;
   this.clusterSizeHeightFactor = constants.clustering.nodeScaling.height;
   this.clusterSizeRadiusFactor = constants.clustering.nodeScaling.radius;
+  this.maxNodeSizeIncrements = constants.clustering.maxNodeSizeIncrements;
+  this.growthIndicator = 0;
 
-  // mass, force, velocity
-  this.mass = 1;  // kg (mass is adjusted for the number of connected edges)
-  this.fx = 0.0;  // external force x
-  this.fy = 0.0;  // external force y
-  this.vx = 0.0;  // velocity x
-  this.vy = 0.0;  // velocity y
-  this.minForce = constants.minForce;
-  this.damping = 0.9;
-  this.dampingFactor = 75;
-
+  // variables to tell the node about the graph.
   this.graphScaleInv = 1;
+  this.graphScale = 1;
   this.canvasTopLeft = {"x": -300, "y": -300};
   this.canvasBottomRight = {"x":  300, "y":  300};
+  this.parentEdgeId = null;
 }
 
 /**
@@ -105,7 +111,6 @@ Node.prototype.attachEdge = function(edge) {
     this.dynamicEdges.push(edge);
   }
   this.dynamicEdgesLength = this.dynamicEdges.length;
-  this._updateMass();
 };
 
 /**
@@ -119,17 +124,8 @@ Node.prototype.detachEdge = function(edge) {
     this.dynamicEdges.splice(index, 1);
   }
   this.dynamicEdgesLength = this.dynamicEdges.length;
-  this._updateMass();
 };
 
-/**
- * Update the nodes mass, which is determined by the number of edges connecting
- * to it (more edges -> heavier node).
- * @private
- */
-Node.prototype._updateMass = function() {
-  this.mass = 1 + 0.6 * this.edges.length; // kg
-};
 
 /**
  * Set or overwrite properties for the node
@@ -149,6 +145,13 @@ Node.prototype.setProperties = function(properties, constants) {
   if (properties.x !== undefined)         {this.x = properties.x;}
   if (properties.y !== undefined)         {this.y = properties.y;}
   if (properties.value !== undefined)     {this.value = properties.value;}
+  if (properties.level !== undefined)     {this.level = properties.level;}
+
+
+  // physics
+  if (properties.internalMultiplier !== undefined)  {this.internalMultiplier = properties.internalMultiplier;}
+  if (properties.damping !== undefined)             {this.dampingBase = properties.damping;}
+  if (properties.mass !== undefined)                {this.mass = properties.mass;}
 
   // navigation controls properties
   if (properties.horizontalAlignLeft !== undefined) {this.horizontalAlignLeft = properties.horizontalAlignLeft;}
@@ -188,8 +191,8 @@ Node.prototype.setProperties = function(properties, constants) {
     }
   }
 
-  this.xFixed = this.xFixed || (properties.x !== undefined);
-  this.yFixed = this.yFixed || (properties.y !== undefined);
+  this.xFixed = this.xFixed || (properties.x !== undefined && !properties.allowedToMove);
+  this.yFixed = this.yFixed || (properties.y !== undefined && !properties.allowedToMove);
   this.radiusFixed = this.radiusFixed || (properties.radius !== undefined);
 
   if (this.shape == 'image') {
@@ -226,15 +229,32 @@ Node.prototype.setProperties = function(properties, constants) {
 Node.parseColor = function(color) {
   var c;
   if (util.isString(color)) {
-    c = {
-      border: color,
-      background: color,
-      highlight: {
-        border: color,
-        background: color
-      }
-    };
-    // TODO: automatically generate a nice highlight color
+    if (util.isValidHex(color)) {
+      var hsv = util.hexToHSV(color);
+      var lighterColorHSV = {h:hsv.h,s:hsv.s * 0.45,v:Math.min(1,hsv.v * 1.05)};
+      var darkerColorHSV  = {h:hsv.h,s:Math.min(1,hsv.v * 1.25),v:hsv.v*0.6};
+      var darkerColorHex  = util.HSVToHex(darkerColorHSV.h ,darkerColorHSV.h ,darkerColorHSV.v);
+      var lighterColorHex = util.HSVToHex(lighterColorHSV.h,lighterColorHSV.s,lighterColorHSV.v);
+
+      c = {
+        background: color,
+        border:darkerColorHex,
+        highlight: {
+          background:lighterColorHex,
+          border:darkerColorHex
+        }
+      };
+    }
+    else {
+      c = {
+        background:color,
+        border:color,
+        highlight: {
+          background:color,
+          border:color
+        }
+      };
+    }
   }
   else {
     c = {};
@@ -312,7 +332,6 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
     this.resize(ctx);
   }
 
-  //noinspection FallthroughInSwitchStatementJS
   switch (this.shape) {
     case 'circle':
     case 'dot':
@@ -344,7 +363,6 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
       }
 
   }
-
   // TODO: implement calculation of distance to border for all shapes
 };
 
@@ -375,21 +393,44 @@ Node.prototype._addForce = function(fx, fy) {
  */
 Node.prototype.discreteStep = function(interval) {
   if (!this.xFixed) {
-    var dx   = -this.damping * this.vx;     // damping force
-    var ax   = (this.fx + dx) / this.mass;  // acceleration
+    var dx   = this.damping * this.vx;     // damping force
+    var ax   = (this.fx - dx) / this.mass;  // acceleration
     this.vx += ax * interval;               // velocity
     this.x  += this.vx * interval;          // position
   }
 
   if (!this.yFixed) {
-    var dy   = -this.damping * this.vy;     // damping force
-    var ay   = (this.fy + dy) / this.mass;  // acceleration
+    var dy   = this.damping * this.vy;     // damping force
+    var ay   = (this.fy - dy) / this.mass;  // acceleration
     this.vy += ay * interval;               // velocity
     this.y  += this.vy * interval;          // position
   }
 };
 
 
+
+/**
+ * Perform one discrete step for the node
+ * @param {number} interval    Time interval in seconds
+ */
+Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
+  if (!this.xFixed) {
+    var dx   = this.damping * this.vx;     // damping force
+    var ax   = (this.fx - dx) / this.mass;  // acceleration
+    this.vx += ax * interval;               // velocity
+    this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
+    this.x  += this.vx * interval;          // position
+  }
+
+  if (!this.yFixed) {
+    var dy   = this.damping * this.vy;     // damping force
+    var ay   = (this.fy - dy) / this.mass;  // acceleration
+    this.vy += ay * interval;               // velocity
+    this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
+    this.y  += this.vy * interval;          // position
+  }
+};
+
 /**
  * Check if this node has a fixed x and y position
  * @return {boolean}      true if fixed, false if not
@@ -405,16 +446,7 @@ Node.prototype.isFixed = function() {
  */
 // TODO: replace this method with calculating the kinetic energy
 Node.prototype.isMoving = function(vmin) {
-
-  if (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin) {
-//    console.log(vmin,this.vx,this.vy);
-    return true;
-  }
-  else {
-    this.vx = 0; this.vy = 0;
-    return false;
-  }
-  //return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
+  return (Math.abs(this.vx) > vmin || Math.abs(this.vy) > vmin);
 };
 
 /**
@@ -519,10 +551,12 @@ Node.prototype._resizeImage = function (ctx) {
     this.width  = width;
     this.height = height;
 
+    this.growthIndicator = 0;
     if (this.width > 0 && this.height > 0) {
-      this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
-      this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
-      this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
+      this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements)  * this.clusterSizeWidthFactor;
+      this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+      this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+      this.growthIndicator = this.width - width;
     }
   }
 
@@ -567,9 +601,11 @@ Node.prototype._resizeBox = function (ctx) {
     this.width = textSize.width + 2 * margin;
     this.height = textSize.height + 2 * margin;
 
-    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
-    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
-//    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
+    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+    this.growthIndicator = this.width - (textSize.width + 2 * margin);
+//    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+
   }
 };
 
@@ -616,9 +652,10 @@ Node.prototype._resizeDatabase = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
-    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
-    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
+    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.width - size;
   }
 };
 
@@ -665,9 +702,10 @@ Node.prototype._resizeCircle = function (ctx) {
     this.height = diameter;
 
     // scaling used for clustering
-//    this.width  += (this.clusterSize - 1) * 0.5 * this.clusterSizeWidthFactor;
-//    this.height += (this.clusterSize - 1) * 0.5 * this.clusterSizeHeightFactor;
-    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
+//    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
+//    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
+    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.radius - 0.5*diameter;
   }
 };
 
@@ -711,11 +749,13 @@ Node.prototype._resizeEllipse = function (ctx) {
     if (this.width < this.height) {
       this.width = this.height;
     }
+    var defaultSize = this.width;
 
-    // scaling used for clustering
-    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
-    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
-    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
+      // scaling used for clustering
+    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.width - defaultSize;
   }
 };
 
@@ -778,9 +818,10 @@ Node.prototype._resizeShape = function (ctx) {
     this.height = size;
 
     // scaling used for clustering
-    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
-    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
-    this.radius += (this.clusterSize - 1) * 0.5 * this.clusterSizeRadiusFactor;
+    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.width - size;
   }
 };
 
@@ -837,9 +878,10 @@ Node.prototype._resizeText = function (ctx) {
     this.height = textSize.height + 2 * margin;
 
     // scaling used for clustering
-    this.width  += (this.clusterSize - 1) * this.clusterSizeWidthFactor;
-    this.height += (this.clusterSize - 1) * this.clusterSizeHeightFactor;
-    this.radius += (this.clusterSize - 1) * this.clusterSizeRadiusFactor;
+    this.width  += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
+    this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
+    this.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
+    this.growthIndicator = this.width - (textSize.width + 2 * margin);
   }
 };
 
@@ -853,7 +895,7 @@ Node.prototype._drawText = function (ctx) {
 
 
 Node.prototype._label = function (ctx, text, x, y, align, baseline) {
-  if (text) {
+  if (text && this.fontSize * this.graphScale > this.fontDrawThreshold) {
     ctx.font = (this.selected ? "bold " : "") + this.fontSize + "px " + this.fontFace;
     ctx.fillStyle = this.fontColor || "black";
     ctx.textAlign = align || "center";
@@ -907,7 +949,7 @@ Node.prototype.inArea = function() {
   else {
     return true;
   }
-}
+};
 
 /**
  * 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() {
           this.x < this.canvasBottomRight.x &&
           this.y >= this.canvasTopLeft.y    &&
           this.y < this.canvasBottomRight.y);
-}
+};
 
 /**
  * This allows the zoom level of the graph to influence the rendering
@@ -930,6 +972,7 @@ Node.prototype.inView = function() {
  */
 Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight) {
   this.graphScaleInv = 1.0/scale;
+  this.graphScale = scale;
   this.canvasTopLeft = canvasTopLeft;
   this.canvasBottomRight = canvasBottomRight;
 };
@@ -942,17 +985,9 @@ Node.prototype.setScaleAndPos = function(scale,canvasTopLeft,canvasBottomRight)
  */
 Node.prototype.setScale = function(scale) {
   this.graphScaleInv = 1.0/scale;
+  this.graphScale = scale;
 };
 
-/**
- * This function updates the damping parameter for clusters, based ont he
- *
- * @param {Number} numberOfNodes
- */
-Node.prototype.updateDamping = function(numberOfNodes) {
-  this.damping = (0.8 + 0.1*this.clusterSize * (1 + Math.pow(numberOfNodes,-2)));
-  this.damping *= this.dampingFactor;
-};
 
 
 /**
@@ -971,8 +1006,10 @@ Node.prototype.clearVelocity = function() {
  */
 Node.prototype.updateVelocity = function(massBeforeClustering) {
   var energyBefore = this.vx * this.vx * massBeforeClustering;
+  //this.vx = (this.vx < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
   this.vx = Math.sqrt(energyBefore/this.mass);
   energyBefore = this.vy * this.vy * massBeforeClustering;
+  //this.vy = (this.vy < 0) ? -Math.sqrt(energyBefore/this.mass) : Math.sqrt(energyBefore/this.mass);
   this.vy = Math.sqrt(energyBefore/this.mass);
 };
 

data/vendor/assets/vis/graph/css/graph-manipulation.css

@@ -0,0 +1,128 @@
+div.graph-manipulationDiv {
+    border-width:0px;
+    border-bottom: 1px;
+    border-style:solid;
+    border-color: #d6d9d8;
+    background: #ffffff; /* Old browsers */
+    background: -moz-linear-gradient(top,  #ffffff 0%, #fcfcfc 48%, #fafafa 50%, #fcfcfc 100%); /* FF3.6+ */
+    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+ */
+    background: -webkit-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffffff 0%,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fcfcfc',GradientType=0 ); /* IE6-9 */
+
+    width: 600px;
+    height:30px;
+    z-index:10;
+    position:absolute;
+}
+
+div.graph-manipulation-editMode {
+    height:30px;
+    z-index:10;
+    position:absolute;
+    margin-top:20px;
+}
+
+div.graph-manipulation-closeDiv {
+    height:30px;
+    width:30px;
+    z-index:11;
+    position:absolute;
+    margin-top:3px;
+    margin-left:590px;
+    background-position: 0px 0px;
+    background-repeat:no-repeat;
+    background-image: url("img/graph/cross.png");
+    cursor: pointer;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+span.graph-manipulationUI {
+    font-family: verdana;
+    font-size: 12px;
+    -moz-border-radius: 15px;
+    border-radius: 15px;
+    display:inline-block;
+    background-position: 0px 0px;
+    background-repeat:no-repeat;
+    height:24px;
+    margin: -14px 0px 0px 10px;
+    vertical-align:middle;
+    cursor: pointer;
+    padding: 0px 8px 0px 8px;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+span.graph-manipulationUI:hover {
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.20);
+}
+
+span.graph-manipulationUI:active {
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.50);
+}
+
+span.graph-manipulationUI.back {
+    background-image: url("img/graph/backIcon.png");
+}
+
+span.graph-manipulationUI.none:hover {
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+    cursor: default;
+}
+span.graph-manipulationUI.none:active {
+    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.0);
+}
+span.graph-manipulationUI.none {
+    padding: 0px 0px 0px 0px;
+}
+span.graph-manipulationUI.notification{
+    margin: 2px;
+    font-weight: bold;
+}
+
+span.graph-manipulationUI.add {
+    background-image: url("img/graph/addNodeIcon.png");
+}
+
+span.graph-manipulationUI.edit {
+    background-image: url("img/graph/editIcon.png");
+}
+
+span.graph-manipulationUI.edit.editmode {
+    background-color: #fcfcfc;
+    border-style:solid;
+    border-width:1px;
+    border-color: #cccccc;
+}
+
+span.graph-manipulationUI.connect {
+    background-image: url("img/graph/connectIcon.png");
+}
+
+span.graph-manipulationUI.delete {
+    background-image: url("img/graph/deleteIcon.png");
+}
+/* top right bottom left */
+span.graph-manipulationLabel {
+    margin: 0px 0px 0px 23px;
+    line-height: 25px;
+}
+div.graph-seperatorLine {
+    display:inline-block;
+    width:1px;
+    height:20px;
+    background-color: #bdbdbd;
+    margin: 5px 7px 0px 15px;
+}