made labels seperate. Needs cleaning up and comments

examples/network/01_basic_usage.html

@@ -23,21 +23,18 @@
   // create an array with nodes
   var nodes = [
     {id: 1, label: 'Node 1'},
-    {id: 2, label: 'Node 2'},
+    {id: 2, label: 'Node 2', shape:'dot'},
     {id: 3, label: 'Node 3'},
     {id: 4, label: 'Node 4'},
-    {id: 5, label: 'Node 5', shape:'database'}
+    {id: 5, label: 'Node 5'}
   ];
 
   // create an array with edges
   var edges = [
-//    {from: 1, to: 2, label:'bla', font:{size: 15, face: 'arial', color: 'red'}},
-    {from: 1, to: 3, arrows:{from:false, to:false, middle: true}, label:'bla', dashes:true},
-    {from: 1, to: 2, arrows:{from:false, to:false, middle: true}, smooth:false, label:'bla'},
-    {from: 4, to: 4, arrows:{from:false, to:false, middle: true}, smooth:false, label:'bla'},
-    {from: 5, to: 5, arrows:{from:false, to:false, middle: true}, smooth:false, label:'bla'},
-//    {from: 2, to: 4},
-//    {from: 2, to: 5}
+    {from: 1, to: 3, label:'bla1'},
+    {from: 1, to: 2, label:'bla2'},
+    {from: 2, to: 4, label:'bla4'},
+    {from: 2, to: 5, label:'bla5', font:{align:'top'}}
   ];
 
   // create a network

lib/network/modules/CanvasRenderer.js

@@ -184,7 +184,6 @@ class CanvasRenderer {
     // draw unselected nodes;
     for (let i = 0; i < nodeIndices.length; i++) {
       node = nodes[nodeIndices[i]];
-      node.setScaleAndPos(this.body.view.scale,this.canvasTopLeft,this.canvasBottomRight);
       // set selected nodes aside
       if (node.isSelected()) {
         selected.push(nodeIndices[i]);
@@ -193,18 +192,17 @@ class CanvasRenderer {
         if (alwaysShow === true) {
           node.draw(ctx);
         }
-        else if (node.inArea() === true) {
+        // todo: replace check
+        //else if (node.inArea() === true) {
           node.draw(ctx);
-        }
+        //}
       }
     }
 
     // draw the selected nodes on top
     for (let i = 0; i < selected.length; i++) {
       node = nodes[selected[i]];
-      if (node.inArea() || alwaysShow) {
-        node.draw(ctx);
-      }
+      node.draw(ctx);
     }
   }
 

lib/network/modules/NodesHandler.js

@@ -5,8 +5,8 @@
 var util = require("../../util");
 var DataSet = require('../../DataSet');
 var DataView = require('../../DataView');
-var Node = require("./components/nodes/NodeMain");
 
+import Node from "./components/nodes/NodeMain";
 
 class NodesHandler {
   constructor(body, images, groups, layoutEngine) {
@@ -28,9 +28,7 @@ class NodesHandler {
     this.options = {};
     this.defaultOptions = {
       mass: 1,
-      //radiusMin: 10,
-      //radiusMax: 30,
-      radius: 10,
+      size: 10,
       scaling: {
         min: 10,
         max: 40,
@@ -53,21 +51,15 @@ class NodesHandler {
       },
       shape: 'ellipse',
       image: undefined, // --> URL
-      //widthMin: 16, // px
-      //widthMax: 64, // px
       label: undefined,
-      labelStyle: {
-        fontColor: 'black',
-        fontSize: 14, // px
-        fontFace: 'verdana',
-        fontFill: undefined,
-        fontStrokeWidth: 0, // px
-        fontStrokeColor: '#ffffff',
-        //scaleFontWithValue: false,
-        //fontSizeMin: 14,
-        //fontSizeMax: 30,
-        //fontSizeMaxVisible: 30,
-        //fontDrawThreshold: 3
+      font: {
+        color: '#343434',
+        size: 14, // px
+        face: 'arial',
+        background: 'none',
+        stroke: 0, // px
+        strokeColor: 'white',
+        align:'horizontal'
       },
       value: 1,
       color: {
@@ -159,8 +151,8 @@ class NodesHandler {
     var newNodes = [];
     for (var i = 0; i < ids.length; i++) {
       id = ids[i];
-      var data = this.body.data.nodes.get(id);
-      var node = new Node(data, this.images, this.groups, this.options);
+      var properties = this.body.data.nodes.get(id);
+      var node = this.create(properties);;
       newNodes.push(node);
       this.body.nodes[id] = node; // note: this may replace an existing node
     }
@@ -189,7 +181,7 @@ class NodesHandler {
       else {
         dataChanged = true;
         // create node
-        node = new Node(properties, this.images, this.groups, this.constants);
+        node = this.create(properties);
         nodes[id] = node;
       }
     }
@@ -221,7 +213,7 @@ class NodesHandler {
 
 
   create(properties) {
-    return new Node(properties, this.images, this.groups, this.options)
+    return new Node(properties, this.body, this.images, this.groups, this.options)
   }
 
 

lib/network/modules/components/edges/EdgeMain.js

@@ -1,5 +1,7 @@
 var util = require('../../../../util');
 
+
+import Label from '../unified/label.js'
 /**
  * @class Edge
  *
@@ -33,7 +35,6 @@ class Edge {
     this.value = undefined;
     this.selected = false;
     this.hover = false;
-    this.labelDimensions = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
     this.labelDirty = true;
     this.colorDirty = true;
 
@@ -51,6 +52,8 @@ class Edge {
 
     this.connected = false;
 
+    this.labelModule = new Label(this.body, this.options);
+
     this.setOptions(options, true);
 
     this.controlNodesEnabled = false;
@@ -101,12 +104,6 @@ class Edge {
     if (options.id !== undefined)   {this.id = options.id;}
     if (options.from !== undefined) {this.fromId = options.from;}
     if (options.to !== undefined)   {this.toId = options.to;}
-
-    if (options.label !== undefined) {
-      this.label = options.label;
-      this.labelDirty = true;
-    }
-
     if (options.title !== undefined) {this.title = options.title;}
     if (options.value !== undefined) {this.value = options.value;}
 
@@ -142,6 +139,8 @@ class Edge {
     this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
 
     this.setupSmoothEdges(doNotEmit);
+
+    this.labelModule.setOptions(this.options);
   }
 
 
@@ -265,11 +264,14 @@ class Edge {
    * @param total
    */
   setValueRange(min, max, total) {
-    if (!this.widthFixed && this.value !== undefined) {
-      var scale = this.options.customScalingFunction(min, max, total, this.value);
-      var widthDiff = this.options.widthMax - this.options.widthMin;
-      this.options.width = this.options.widthMin + scale * widthDiff;
-      this.widthSelected = this.options.width * this.options.widthSelectionMultiplier;
+    if (this.value !== undefined) {
+      var scale = this.options.scaling.customScalingFunction(min, max, total, this.value);
+      var widthDiff = this.options.scaling.max - this.options.scaling.min;
+      if (this.options.scaling.label.enabled == true) {
+        var fontDiff = this.options.scaling.label.max - this.options.scaling.label.min;
+        this.options.font.size = this.options.scaling.label.min + scale * fontDiff;
+      }
+      this.options.width = this.options.scaling.min + scale * widthDiff;
     }
   }
 
@@ -304,13 +306,25 @@ class Edge {
   }
 
   drawLabel(ctx, viaNode) {
-    if (this.label !== undefined) {
+    if (this.options.label !== undefined) {
       // set style
       var node1 = this.from;
       var node2 = this.to;
+      var selected = (this.from.selected || this.to.selected || this.selected);
       if (node1.id != node2.id) {
         var point = this._pointOnEdge(0.5, viaNode);
-        this._label(ctx, this.label, point.x, point.y);
+        ctx.save();
+
+        // if the label has to be rotated:
+        if (this.options.font.align != "horizontal") {
+          this.labelModule.calculateLabelSize(ctx,selected,point.x,point.y);
+          ctx.translate(point.x, this.labelModule.size.yLine);
+          this._rotateForLabelAlignment(ctx);
+        }
+
+        // draw the label
+        this.labelModule.draw(ctx, point.x, point.y, selected);
+        ctx.restore();
       }
       else {
         var x, y;
@@ -324,7 +338,8 @@ class Edge {
           y = node1.y - node1.height * 0.5;
         }
         point = this._pointOnCircle(x, y, radius, 0.125);
-        this._label(ctx, this.label, point.x, point.y);
+
+        this.labelModule.draw(ctx, point.x, point.y, selected);
       }
     }
   }
@@ -378,7 +393,7 @@ class Edge {
         grd.addColorStop(0, fromColor);
         grd.addColorStop(1, toColor);
 
-        // -------------------- this returns the function -------------------- //
+        // -------------------- this returns -------------------- //
         return grd;
       }
 
@@ -726,49 +741,7 @@ class Edge {
    * @param {Number} y
    * @private
    */
-  _label(ctx, text, x, y) {
-    if (text) {
-      ctx.font = ((this.from.selected || this.to.selected) ? "bold " : "") +
-      this.options.font.size + "px " + this.options.font.face;
-      var yLine;
-
-      if (this.labelDirty == true) {
-        var lines = String(text).split('\n');
-        var lineCount = lines.length;
-        var fontSize = Number(this.options.font.size);
-        yLine = y + (1 - lineCount) * 0.5 * fontSize;
-
-        var width = ctx.measureText(lines[0]).width;
-        for (var i = 1; i < lineCount; i++) {
-          var lineWidth = ctx.measureText(lines[i]).width;
-          width = lineWidth > width ? lineWidth : width;
-        }
-        var height = this.options.font.size * lineCount;
-        var left = x - width * 0.5;
-        var top = y - height * 0.5;
 
-        // cache
-        this.labelDimensions = {top: top, left: left, width: width, height: height, yLine: yLine};
-      }
-
-      var yLine = this.labelDimensions.yLine;
-
-      ctx.save();
-
-      if (this.options.font.align != "horizontal") {
-        ctx.translate(x, yLine);
-        this._rotateForLabelAlignment(ctx);
-        x = 0;
-        yLine = 0;
-      }
-
-
-      this._drawLabelRect(ctx);
-      this._drawLabelText(ctx, x, yLine, lines, lineCount, fontSize);
-
-      ctx.restore();
-    }
-  }
 
 
   /**
@@ -790,83 +763,6 @@ class Edge {
   }
 
 
-  /**
-   * Draws the label rectangle
-   * @param {CanvasRenderingContext2D} ctx
-   * @private
-   */
-  _drawLabelRect(ctx) {
-    if (this.options.font.background !== undefined && this.options.font.background !== "none") {
-      ctx.fillStyle = this.options.font.background;
-
-      var lineMargin = 2;
-
-      if (this.options.font.align == 'middle') {
-        ctx.fillRect(-this.labelDimensions.width * 0.5, -this.labelDimensions.height * 0.5, this.labelDimensions.width, this.labelDimensions.height);
-      }
-      else if (this.options.font.align == 'top') {
-        ctx.fillRect(-this.labelDimensions.width * 0.5, -(this.labelDimensions.height + lineMargin), this.labelDimensions.width, this.labelDimensions.height);
-      }
-      else if (this.options.font.align == 'bottom') {
-        ctx.fillRect(-this.labelDimensions.width * 0.5, lineMargin, this.labelDimensions.width, this.labelDimensions.height);
-      }
-      else {
-        ctx.fillRect(this.labelDimensions.left, this.labelDimensions.top, this.labelDimensions.width, this.labelDimensions.height);
-      }
-    }
-  }
-
-
-  /**
-   * Draws the label text
-   * @param {CanvasRenderingContext2D} ctx
-   * @param {Number} x
-   * @param {Number} yLine
-   * @param {Array} lines
-   * @param {Number} lineCount
-   * @param {Number} fontSize
-   * @private
-   */
-  _drawLabelText(ctx, x, yLine, lines, lineCount, fontSize) {
-    // draw text
-    ctx.fillStyle = this.options.font.color || "black";
-    ctx.textAlign = "center";
-
-    // check for label alignment
-    if (this.options.font.align != 'horizontal') {
-      var lineMargin = 2;
-      if (this.options.font.align == 'top') {
-        ctx.textBaseline = "alphabetic";
-        yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
-      }
-      else if (this.options.font.align == 'bottom') {
-        ctx.textBaseline = "hanging";
-        yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
-      }
-      else {
-        ctx.textBaseline = "middle";
-      }
-    }
-    else {
-      ctx.textBaseline = "middle";
-    }
-
-    // check for strokeWidth
-    if (this.options.font.stroke > 0) {
-      ctx.lineWidth = this.options.font.stroke;
-      ctx.strokeStyle = this.options.font.strokeColor;
-      ctx.lineJoin = 'round';
-    }
-    for (var i = 0; i < lineCount; i++) {
-      if (this.options.font.stroke > 0) {
-        ctx.strokeText(lines[i], x, yLine);
-      }
-      ctx.fillText(lines[i], x, yLine);
-      yLine += fontSize;
-    }
-  }
-
-
   /**
    * Redraw a edge as a dashes line
    * Draw this edge in the given canvas
@@ -1266,10 +1162,10 @@ class Edge {
       returnValue = Math.abs(Math.sqrt(dx * dx + dy * dy) - radius);
     }
 
-    if (this.labelDimensions.left < x3 &&
-      this.labelDimensions.left + this.labelDimensions.width > x3 &&
-      this.labelDimensions.top < y3 &&
-      this.labelDimensions.top + this.labelDimensions.height > y3) {
+    if (this.labelModule.size.left < x3 &&
+      this.labelModule.size.left + this.labelModule.size.width > x3 &&
+      this.labelModule.size.top < y3 &&
+      this.labelModule.size.top + this.labelModule.size.height > y3) {
       return 0;
     }
     else {
@@ -1337,6 +1233,55 @@ class Edge {
   }
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+  //*********************** MOVE THESE FUNCTIONS TO THE MANIPULATION SYSTEM ************************//
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+  //*************************************************************************************************//
+
+
+
+
+
+
+
   /**
    * This function draws the control nodes for the manipulator.
    * In order to enable this, only set the this.controlNodesEnabled to true.

lib/network/modules/components/nodes/ellipse.js

@@ -0,0 +1,21 @@
+/**
+ * Created by Alex on 3/18/2015.
+ */
+
+class Ellipse {
+  constructor () {
+
+  }
+
+  resize(ctx) {
+
+  }
+
+  draw(ctx) {
+
+  }
+
+  distanceToBorder() {
+
+  }
+}

lib/network/modules/components/unified/label.js

@@ -0,0 +1,187 @@
+let util = require('../../../../util');
+
+/**
+ * Created by Alex on 3/17/2015.
+ */
+
+class Label {
+  constructor(body,options) {
+    this.body = body;
+    this.setOptions(options);
+
+    this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
+  }
+
+  setOptions(options) {
+    this.options = options;
+    if (options.label !== undefined) {
+      this.labelDirty = true;
+    }
+  }
+
+  draw(ctx, x, y, selected, baseline = 'middle') {
+    if (this.options.label !== undefined) {
+      // check if we have to render the label
+      let relativeFontSize = Number(this.options.font.size) * this.body.view.scale;
+      if (this.options.label && relativeFontSize >= this.options.scaling.label.drawThreshold - 1) {
+
+        // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
+        let fontSize = Number(this.options.font.size);
+        if (relativeFontSize >= this.options.scaling.label.maxVisible) {
+          fontSize = Number(this.options.scaling.label.maxVisible) / this.body.view.scale;
+        }
+
+        // notify the canvas of the fontsize and thickness
+        ctx.font = (selected ? "bold " : "") + fontSize + "px " + this.options.font.face;
+
+        // update the size cache if required
+        if (this.labelDirty == true) {
+          this.calculateLabelSize(ctx, selected, x, y, baseline);
+        }
+
+        // create some of the local variables
+        let yLine = this.size.yLine;
+        let lines = String(this.options.label).split('\n');
+        let lineCount = lines.length;
+
+        // create the fontfill background
+        this._drawLabelRect(ctx);
+        // draw text
+        this._drawLabelText(ctx, x, yLine, lines, lineCount, fontSize, baseline, relativeFontSize);
+      }
+    }
+  }
+
+
+  getTextSize(ctx, selected) {
+    if (this.options.label !== undefined) {
+      this._calculateLabelSize(ctx,selected);
+    }
+    else {
+      this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0};
+    }
+    return this.size;
+  }
+
+  _calculateLabelSize(ctx,selected,x,y,baseline) {
+    ctx.font = (selected ? "bold " : "") + this.options.font.size + "px " + this.options.font.face;
+    let lines = String(this.options.label).split('\n');
+    let lineCount = lines.length;
+    let yLine = y + (1 - lineCount) * 0.5 * this.options.font.size;
+
+    let width = ctx.measureText(lines[0]).width;
+    for (let i = 1; i < lineCount; i++) {
+      let lineWidth = ctx.measureText(lines[i]).width;
+      width = lineWidth > width ? lineWidth : width;
+    }
+    let height = this.options.font.size * lineCount;
+    let left = x - width * 0.5;
+    let top = y - height * 0.5;
+    if (baseline == "hanging") {
+      top += 0.5 * this.options.font.size;
+      top += 4;   // distance from node, required because we use hanging. Hanging has less difference between browsers
+      yLine += 4; // distance from node
+    }
+
+    // cache
+    this.size = {top: top, left: left, width: width, height: height, yLine: yLine};
+  }
+
+  calculateLabelSize(ctx,selected,x=0,y=0,baseline='middle') {
+    if (this.labelDirty == true) {
+      this._calculateLabelSize(ctx, selected, x, y, baseline);
+    }
+  }
+  /**
+   * Draws the label rectangle
+   * @param {CanvasRenderingContext2D} ctx
+   * @private
+   */
+  _drawLabelRect(ctx) {
+    if (this.options.font.background !== undefined && this.options.font.background !== "none") {
+      ctx.fillStyle = this.options.font.background;
+
+      let lineMargin = 2;
+
+      switch (this.options.font.align) {
+        case 'middle':
+          ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
+          break;
+        case 'top':
+          ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
+          break;
+        case 'bottom':
+          ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
+          break
+        default:
+          ctx.fillRect(this.size.left, this.size.top, this.size.width, this.size.height);
+          break;
+      }
+    }
+  }
+
+
+  /**
+   * Draws the label text
+   * @param {CanvasRenderingContext2D} ctx
+   * @param {Number} x
+   * @param {Number} yLine
+   * @param {Array} lines
+   * @param {Number} lineCount
+   * @param {Number} fontSize
+   * @private
+   */
+  _drawLabelText(ctx, x, yLine, lines, lineCount, fontSize, baseline = 'middle', relativeFontSize = this.options.font.size) {
+    // fade in when relative scale is between threshold and threshold - 1
+    let fontColor = this.options.font.color || "#000000";
+    let strokeColor = this.options.font.strokeColor;
+    if (relativeFontSize <= this.options.scaling.label.drawThreshold) {
+      let opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - relativeFontSize)));
+      fontColor = util.overrideOpacity(fontColor, opacity);
+      strokeColor = util.overrideOpacity(strokeColor, opacity);
+    }
+
+    // draw text
+    ctx.fillStyle = fontColor;
+    ctx.textAlign = 'center';
+
+    // check for label alignment (for edges)
+    // TODO: make alignment for nodes
+    if (this.options.font.align !== 'horizontal') {
+      x = 0;
+      yLine = 0;
+
+      let lineMargin = 2;
+      if (this.options.font.align === 'top') {
+        ctx.textBaseline = 'alphabetic';
+        yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
+      }
+      else if (this.options.font.align === 'bottom') {
+        ctx.textBaseline = 'hanging';
+        yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
+      }
+      else {
+        ctx.textBaseline = 'middle';
+      }
+    }
+    else {
+      ctx.textBaseline = baseline;
+    }
+
+    // check for strokeWidth
+    if (this.options.font.stroke > 0) {
+      ctx.lineWidth = this.options.font.stroke;
+      ctx.strokeStyle = strokeColor;
+      ctx.lineJoin = 'round';
+    }
+    for (let i = 0; i < lineCount; i++) {
+      if (this.options.font.stroke > 0) {
+        ctx.strokeText(lines[i], x, yLine);
+      }
+      ctx.fillText(lines[i], x, yLine);
+      yLine += fontSize;
+    }
+  }
+}
+
+export default Label;

lib/network/modules/components/unified/labels.js

@@ -1,3 +0,0 @@
-/**
- * Created by Alex on 3/17/2015.
- */