fixed images, groups, circular images, repeating events

9 years ago · 9cd6c4ae06
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@ -5,17 +5,18 @@

  <style>
    body {
      font: 10pt arial;
        color:#ffffff;
        font: 10pt arial;
        background-color:#222222;
    }
    #mynetwork {
      width: 1900px;
      height: 900px;
      width: 600px;
      height: 600px;
      border: 1px solid lightgray;
      background-color:#222222;
    }
  </style>

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript" src="../../dist/vis.js"></script>
  <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />

@ -25,11 +26,6 @@
    var network = null;
    var nodesData = null;

    google.load('visualization', '1');

    // Set callback to run when API is loaded
    google.setOnLoadCallback(draw);

    function destroy() {
      if (network !== null) {
        network.destroy();
@ -37,7 +33,6 @@
      }
    }

    // Called when the Visualization API is loaded.
    function draw() {
      destroy();

@ -140,14 +135,12 @@
        edges: edges
      };
      var options = {
        stabilize: true,
        nodes: {
          shape: 'dot',
            shape: 'dot',
            radius:30,
            fontColor:'#ffffff',
            font:{color:'#ffffff'},
            borderWidth:2
        },
        physics: {barnesHut:{springLength: 100}}
        }
      };
      network = new vis.Network(container, data, options);
    }
@ -158,9 +151,9 @@
 <body onload="draw()">
 <form onsubmit= "javascript: draw(); return false;">
  Number of groups:
  <input type="text" value="20" id="groupCount" style="width: 50px;">
  <input type="text" value="10" id="groupCount" style="width: 50px;">
  Number of nodes per group:
  <input type="text" value="1" id="nodeCount" style="width: 50px;">
  <input type="text" value="3" id="nodeCount" style="width: 50px;">
  <input type="submit" value="Go">
 </form>
 <br>
--- a/examples/network/34_circular_images.html
+++ b/examples/network/34_circular_images.html
@ -65,7 +65,7 @@
        {from: 11, to: 12},
        {from: 12, to: 13},
        {from: 13, to: 14},
        {from: 14, to: 15}
 //        {from: 14, to: 15}
      ];

      // create a network
@ -77,11 +77,12 @@
      var options = {
        nodes: {
          borderWidth:4,
            size:30,
 	      color: {
            border: '#222222',
            background: '#666666'
          },
          fontColor:'#eeeeee'
          font:{color:'#eeeeee'}
        },
        edges: {
          color: 'lightgray'
--- a/lib/network/Images.js
+++ b/lib/network/Images.js
@ -45,16 +45,10 @@ Images.prototype.load = function(url, brokenUrl) {
      }
      else {
        if (me.imageBroken[url] === true) {
          if (this.src == brokenUrl) {
            console.error("Could not load brokenImage:", brokenUrl);
            delete this.src;
            if (me.callback) {
              me.callback(this);
            }
          }
          else {
            console.error("Could not load image:", url);
            this.src = brokenUrl;
          console.error("Could not load brokenImage:", brokenUrl);
          delete this.src;
          if (me.callback) {
            me.callback(this);
          }
        }
        else {
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@ -118,8 +118,6 @@ function Network (container, data, options) {
  this.nodesHandler       = new NodesHandler(this.body, images, groups, this.layoutEngine);   // Handle adding, deleting and updating of nodes as well as global options
  this.edgesHandler       = new EdgesHandler(this.body, images, groups);   // Handle adding, deleting and updating of edges as well as global options



  // this event will trigger a rebuilding of the cache everything. Used when nodes or edges have been added or removed.
  this.body.emitter.on("_dataChanged", (params) => {
    var t0 = new Date().valueOf();
@ -238,10 +236,13 @@ Network.prototype.setData = function(data) {
    }
  }
  else {
    this.nodesHandler.setData(data && data.nodes);
    this.edgesHandler.setData(data && data.edges);
    this.nodesHandler.setData(data && data.nodes, true);
    this.edgesHandler.setData(data && data.edges, true);
  }

  // emit change in data
  this.body.emitter.emit("_dataChanged");

  // find a stable position or start animating to a stable position
  this.body.emitter.emit("initPhysics");
 };
@ -347,7 +348,7 @@ Network.prototype.destroy = function() {
  this.body.emitter.off();

  // remove the container and everything inside it recursively
  this.util.recursiveDOMDelete(this.body.container);
  util.recursiveDOMDelete(this.body.container);
 };


@ -549,49 +550,13 @@ Network.prototype._updateValueRange = function(obj) {
 };


 /**
 * Set the translation of the network
 * @param {Number} offsetX    Horizontal offset
 * @param {Number} offsetY    Vertical offset
 * @private
 */
 Network.prototype._setTranslation = function(offsetX, offsetY) {
  if (this.translation === undefined) {
    this.translation = {
      x: 0,
      y: 0
    };
  }

  if (offsetX !== undefined) {
    this.translation.x = offsetX;
  }
  if (offsetY !== undefined) {
    this.translation.y = offsetY;
  }

  this.emit('viewChanged');
 };

 /**
 * Get the translation of the network
 * @return {Object} translation    An object with parameters x and y, both a number
 * @private
 */
 Network.prototype._getTranslation = function() {
  return {
    x: this.translation.x,
    y: this.translation.y
  };
 };

 /**
 * Scale the network
 * @param {Number} scale   Scaling factor 1.0 is unscaled
 * @private
 */
 Network.prototype._setScale = function(scale) {
  this.scale = scale;
  this.body.view.scale = scale;
 };

 /**
@ -600,21 +565,7 @@ Network.prototype._setScale = function(scale) {
 * @private
 */
 Network.prototype._getScale = function() {
  return this.scale;
 };


 /**
 * load the functions that load the mixins into the prototype.
 *
 * @private
 */
 Network.prototype._initializeMixinLoaders = function () {
  for (var mixin in MixinLoader) {
    if (MixinLoader.hasOwnProperty(mixin)) {
      Network.prototype[mixin] = MixinLoader[mixin];
    }
  }
  return this.body.view.scale;
 };


@ -622,6 +573,7 @@ Network.prototype._initializeMixinLoaders = function () {
 * Load the XY positions of the nodes into the dataset.
 */
 Network.prototype.storePositions = function() {
  // todo: incorporate fixed instead of allowedtomove, add support for clusters and hierarchical.
  var dataArray = [];
  for (var nodeId in this.body.nodes) {
    if (this.body.nodes.hasOwnProperty(nodeId)) {
--- a/lib/network/modules/EdgesHandler.js
+++ b/lib/network/modules/EdgesHandler.js
@ -119,7 +119,7 @@ class EdgesHandler {
   * @private
   * @private
   */
  setData(edges) {
  setData(edges, doNotEmit = false) {
    var oldEdgesData = this.body.data.edges;

    if (edges instanceof DataSet || edges instanceof DataView) {
@ -152,10 +152,12 @@ class EdgesHandler {

      // draw all new nodes
      var ids = this.body.data.edges.getIds();
      this.add(ids);
      this.add(ids, true);
    }

    this.body.emitter.emit("_dataChanged");
    if (doNotEmit === false) {
      this.body.emitter.emit("_dataChanged");
    }
  }


@ -164,7 +166,7 @@ class EdgesHandler {
   * @param {Number[] | String[]} ids
   * @private
   */
  add(ids) {
  add(ids, doNotEmit = false) {
    var edges = this.body.edges;
    var edgesData = this.body.data.edges;

@ -180,7 +182,9 @@ class EdgesHandler {
      edges[id] = this.create(data);
    }

    this.body.emitter.emit("_dataChanged");
    if (doNotEmit === false) {
      this.body.emitter.emit("_dataChanged");
    }
  }


--- a/lib/network/modules/NodesHandler.js
+++ b/lib/network/modules/NodesHandler.js
@ -87,12 +87,11 @@ class NodesHandler {
        }
      },
      shape: 'ellipse',
      size: 10,
      size: 25,
      value: 1
    };
    util.extend(this.options, this.defaultOptions);

    this.setOptions(options);
  }

  setOptions(options) {
@ -110,7 +109,7 @@ class NodesHandler {
   * @param {Array | DataSet | DataView} nodes         The data containing the nodes.
   * @private
   */
  setData(nodes) {
  setData(nodes, doNotEmit = false) {
    var oldNodesData = this.body.data.nodes;

    if (nodes instanceof DataSet || nodes instanceof DataView) {
@ -146,9 +145,12 @@ class NodesHandler {

      // draw all new nodes
      var ids = this.body.data.nodes.getIds();
      this.add(ids);
      this.add(ids, true);
    }

    if (doNotEmit === false) {
      this.body.emitter.emit("_dataChanged");
    }
    this.body.emitter.emit("_dataChanged");
  }


@ -157,7 +159,7 @@ class NodesHandler {
   * @param {Number[] | String[]} ids
   * @private
   */
  add(ids) {
  add(ids, doNotEmit = false) {
    var id;
    var newNodes = [];
    for (var i = 0; i < ids.length; i++) {
@ -170,7 +172,9 @@ class NodesHandler {

    this.layoutEngine.positionInitially(newNodes);

    this.body.emitter.emit("_dataChanged");
    if (doNotEmit === false) {
      this.body.emitter.emit("_dataChanged");
    }
  }

  /**
--- a/lib/network/modules/View.js
+++ b/lib/network/modules/View.js
@ -43,17 +43,17 @@ class View {
    if (specificNodes.length > 0) {
      for (var i = 0; i < specificNodes.length; i++) {
        node = this.body.nodes[specificNodes[i]];
        if (minX > (node.boundingBox.left)) {
          minX = node.boundingBox.left;
        if (minX > (node.shape.boundingBox.left)) {
          minX = node.shape.boundingBox.left;
        }
        if (maxX < (node.boundingBox.right)) {
          maxX = node.boundingBox.right;
        if (maxX < (node.shape.boundingBox.right)) {
          maxX = node.shape.boundingBox.right;
        }
        if (minY > (node.boundingBox.bottom)) {
          minY = node.boundingBox.top;
        if (minY > (node.shape.boundingBox.bottom)) {
          minY = node.shape.boundingBox.top;
        } // top is negative, bottom is positive
        if (maxY < (node.boundingBox.top)) {
          maxY = node.boundingBox.bottom;
        if (maxY < (node.shape.boundingBox.top)) {
          maxY = node.shape.boundingBox.bottom;
        } // top is negative, bottom is positive
      }
    }
@ -61,17 +61,17 @@ class View {
      for (var nodeId in this.body.nodes) {
        if (this.body.nodes.hasOwnProperty(nodeId)) {
          node = this.body.nodes[nodeId];
          if (minX > (node.boundingBox.left)) {
            minX = node.boundingBox.left;
          if (minX > (node.shape.boundingBox.left)) {
            minX = node.shape.boundingBox.left;
          }
          if (maxX < (node.boundingBox.right)) {
            maxX = node.boundingBox.right;
          if (maxX < (node.shape.boundingBox.right)) {
            maxX = node.shape.boundingBox.right;
          }
          if (minY > (node.boundingBox.bottom)) {
            minY = node.boundingBox.top;
          if (minY > (node.shape.boundingBox.bottom)) {
            minY = node.shape.boundingBox.top;
          } // top is negative, bottom is positive
          if (maxY < (node.boundingBox.top)) {
            maxY = node.boundingBox.bottom;
          if (maxY < (node.shape.boundingBox.top)) {
            maxY = node.shape.boundingBox.bottom;
          } // top is negative, bottom is positive
        }
      }
@ -105,7 +105,7 @@ class View {
    var range;
    var zoomLevel;

    if (initialZoom == true) {
    if (initialZoom === true) {
      // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
      var positionDefined = 0;
      for (var nodeId in this.body.nodes) {
@ -145,7 +145,6 @@ class View {
      zoomLevel = 1.0;
    }


    var center = this._findCenter(range);
    var animationOptions = {position: center, scale: zoomLevel, animation: options};
    this.moveTo(animationOptions);
--- a/lib/network/modules/components/Node.js
+++ b/lib/network/modules/components/Node.js
@ -50,8 +50,6 @@ class Node {

    // set defaults for the options
    this.id = undefined;
    this.boundingBox = {top: 0, left: 0, right: 0, bottom: 0};

    this.imagelist = imagelist;
    this.grouplist = grouplist;

--- a/lib/network/modules/components/nodes/shapes/circularImage.js
+++ b/lib/network/modules/components/nodes/shapes/circularImage.js
@ -54,7 +54,7 @@ class CircularImage extends drawUtil {
    this.boundingBox.right = x + this.options.size;
    this.boundingBox.bottom = y + this.options.size;

    this._drawImageLabel(ctx);
    this._drawImageLabel(ctx, x, y, selected);

    this.boundingBox.left = Math.min(this.boundingBox.left, this.labelModule.size.left);
    this.boundingBox.right = Math.max(this.boundingBox.right, this.labelModule.size.left + this.labelModule.size.width);
--- a/lib/network/modules/components/nodes/util/drawUtil.js
+++ b/lib/network/modules/components/nodes/util/drawUtil.js
@ -47,7 +47,6 @@ class drawUtil extends BaseNode {
    }

    yLabel = y + offset;

    this.labelModule.draw(ctx, x, yLabel, selected, 'hanging');
  }
 }
--- a/lib/network/modules/components/unified/label.js
+++ b/lib/network/modules/components/unified/label.js
@ -37,7 +37,7 @@ class Label {
        this.fontOptions.color = optionsArray[2];
      }
      else if (typeof options.font == 'object') {
        util.extend(this.fontOptions, options.font);
        util.protoExtend(this.fontOptions, options.font);
      }
      this.fontOptions.size = Number(this.fontOptions.size);
    }
--- a/lib/util.js
+++ b/lib/util.js
@ -121,6 +121,24 @@ exports.assignAllKeys = function (obj, value) {
  }
 }


 /**
 * Extend object a with the properties of object b or a series of objects
 * Only properties with defined values are copied
 * @param {Object} a
 * @param {... Object} b
 * @return {Object} a
 */
 exports.protoExtend = function (a, b) {
  for (var i = 1; i < arguments.length; i++) {
    var other = arguments[i];
    for (var prop in other) {
      a[prop] = other[prop];
    }
  }
  return a;
 };

 /**
 * Extend object a with the properties of object b or a series of objects
 * Only properties with defined values are copied