Merge branch 'develop' of https://github.com/almende/vis into develop

docs/timeline/index.html

@@ -1562,6 +1562,16 @@ timeline.off('select', onSelect);
       </td>
     </tr>
 
+    <tr>
+      <td>drop</td>
+      <td>
+        Passes a properties object as returned by the method <a href="#getEventProperties"><code>Timeline.getEventProperties(event)</code></a>.
+      </td>
+      <td>Fired when dropping inside the Timeline.
+      </td>
+    </tr>
+
+
     <tr>
       <td>mouseOver</td>
       <td>

examples/network/events/interactionEvents.html

@@ -24,6 +24,7 @@
 <pre id="eventSpan"></pre>
 
 <script type="text/javascript">
+
     // create an array with nodes
     var nodes = new vis.DataSet([
         {id: 1, label: 'Node 1', title: 'I have a popup!'},
@@ -53,6 +54,7 @@
     network.on("click", function (params) {
         params.event = "[original event]";
         document.getElementById('eventSpan').innerHTML = '<h2>Click event:</h2>' + JSON.stringify(params, null, 4);
+        console.log('click event, getNodeAt returns: ' + this.getNodeAt(params.pointer.DOM));
     });
     network.on("doubleClick", function (params) {
         params.event = "[original event]";

lib/network/modules/NodesHandler.js

@@ -171,7 +171,7 @@ class NodesHandler {
         for (let nodeId in this.body.nodes) {
           if (this.body.nodes.hasOwnProperty(nodeId)) {
             this.body.nodes[nodeId].updateLabelModule();
-            this.body.nodes[nodeId]._reset();
+            this.body.nodes[nodeId].needsRefresh();
           }
         }
       }
@@ -180,12 +180,12 @@ class NodesHandler {
       if (options.size !== undefined) {
         for (let nodeId in this.body.nodes) {
           if (this.body.nodes.hasOwnProperty(nodeId)) {
-            this.body.nodes[nodeId]._reset();
+            this.body.nodes[nodeId].needsRefresh();
           }
         }
       }
 
-      // update the state of the letiables if needed
+      // update the state of the variables if needed
       if (options.hidden !== undefined || options.physics !== undefined) {
         this.body.emitter.emit('_dataChanged');
       }

lib/network/modules/components/Edge.js

@@ -209,7 +209,7 @@ class Edge {
   choosify(options) {
     this.chooser = true;
 
-    let pile = [options, this.options, this.defaultOptions];
+    let pile = [options, this.options, this.edgeOptions, this.defaultOptions];
 
     let chosen = util.topMost(pile, 'chosen');
     if (typeof chosen === 'boolean') {

lib/network/modules/components/Node.js

@@ -352,7 +352,7 @@ class Node {
           break;
       }
     }
-    this._reset();
+    this.needsRefresh();
   }
 
 
@@ -361,7 +361,7 @@ class Node {
    */
   select() {
     this.selected = true;
-    this._reset();
+    this.needsRefresh();
   }
 
 
@@ -370,18 +370,16 @@ class Node {
    */
   unselect() {
     this.selected = false;
-    this._reset();
+    this.needsRefresh();
   }
 
 
 
   /**
    * Reset the calculated size of the node, forces it to recalculate its size
-   * @private
    */
-  _reset() {
-    this.shape.width = undefined;
-    this.shape.height = undefined;
+  needsRefresh() {
+    this.shape.refreshNeeded = true;
   }
 
 

lib/network/modules/components/nodes/shapes/Box.js

@@ -9,7 +9,7 @@ class Box extends NodeBase {
   }
 
   resize(ctx, selected = this.selected, hover = this.hover) {
-    if ((this.width === undefined) || this.labelModule.differentState(selected, hover)) {
+    if (this.needsRefresh(selected, hover)) {
       this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
       this.width = this.textSize.width + this.margin.right + this.margin.left;
       this.height = this.textSize.height + this.margin.top + this.margin.bottom;

lib/network/modules/components/nodes/shapes/Circle.js

@@ -8,8 +8,8 @@ class Circle extends CircleImageBase {
     this._setMargins(labelModule);
   }
 
-  resize(ctx, selected = this.selected, hover = this.hover, values = { size: this.options.size}) {
-    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
+  resize(ctx, selected = this.selected, hover = this.hover) {
+    if (this.needsRefresh(selected, hover)) {
       this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
       var diameter = Math.max(this.textSize.width + this.margin.right + this.margin.left,
                               this.textSize.height + this.margin.top + this.margin.bottom);
@@ -26,8 +26,9 @@ class Circle extends CircleImageBase {
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    this._drawRawCircle(ctx, x, y, selected, hover, values);
+    this._drawRawCircle(ctx, x, y, values);
 
+    // TODO: values overwritten by updateBoundingBox(); is this bit necessary?
     this.boundingBox.top = y - values.size;
     this.boundingBox.left = x - values.size;
     this.boundingBox.right = x + values.size;

lib/network/modules/components/nodes/shapes/CircularImage.js

@@ -7,26 +7,23 @@ class CircularImage extends CircleImageBase {
     super(options, body, labelModule);
 
     this.setImages(imageObj, imageObjAlt);
-
-    this._swapToImageResizeWhenImageLoaded = true;
   }
 
   resize(ctx, selected = this.selected, hover = this.hover) {
-    if ((this.imageObj.src === undefined) ||
+    var imageAbsent = (this.imageObj.src === undefined) ||
         (this.imageObj.width === undefined) ||
-        (this.imageObj.height === undefined) ||
-        (this.labelModule.differentState(selected, hover))) {
+        (this.imageObj.height === undefined);
+
+    if (imageAbsent) {
       var diameter = this.options.size * 2;
       this.width = diameter;
       this.height = diameter;
-      this._swapToImageResizeWhenImageLoaded = true;
       this.radius = 0.5*this.width;
-    } else {
-      if (this._swapToImageResizeWhenImageLoaded) {
-        this.width = undefined;
-        this.height = undefined;
-        this._swapToImageResizeWhenImageLoaded = false;
-      }
+			return;
+    }
+
+    // At this point, an image is present, i.e. this.imageObj is valid.
+    if (this.needsRefresh(selected, hover)) {
       this._resizeImage();
     }
   }
@@ -37,15 +34,14 @@ class CircularImage extends CircleImageBase {
       this.switchImages(selected);
     }
 
-    this.resize();
+    this.selected = selected;
 
+    this.resize(ctx, selected, hover);
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 
-    let size = Math.min(0.5*this.height, 0.5*this.width);
-
     // draw the background circle. IMPORTANT: the stroke in this method is used by the clip method below.
-    this._drawRawCircle(ctx, x, y, selected, hover, values);
+    this._drawRawCircle(ctx, x, y, values);
 
     // now we draw in the circle, we save so we can revert the clip operation after drawing.
     ctx.save();
@@ -61,11 +57,14 @@ class CircularImage extends CircleImageBase {
     this.updateBoundingBox(x,y);
   }
 
+  // TODO: compare with Circle.updateBoundingBox(), consolidate? More stuff is happening here
   updateBoundingBox(x,y) {
     this.boundingBox.top = y - this.options.size;
     this.boundingBox.left = x - this.options.size;
     this.boundingBox.right = x + this.options.size;
     this.boundingBox.bottom = y + this.options.size;
+
+    // TODO: compare with Image.updateBoundingBox(), consolidate?
     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);
     this.boundingBox.bottom = Math.max(this.boundingBox.bottom, this.boundingBox.bottom + this.labelOffset);

lib/network/modules/components/nodes/shapes/Database.js

@@ -9,7 +9,7 @@ class Database extends NodeBase {
   }
 
   resize(ctx, selected, hover) {
-    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
+    if (this.needsRefresh(selected, hover)) {
       this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
       var size = this.textSize.width + this.margin.right + this.margin.left;
       this.width = size;

lib/network/modules/components/nodes/shapes/Ellipse.js

@@ -8,7 +8,7 @@ class Ellipse extends NodeBase {
   }
 
   resize(ctx, selected = this.selected, hover = this.hover) {
-    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
+    if (this.needsRefresh(selected, hover)) {
       var textSize = this.labelModule.getTextSize(ctx, selected, hover);
 
       this.height = textSize.height * 2;

lib/network/modules/components/nodes/shapes/Icon.js

@@ -9,7 +9,7 @@ class Icon extends NodeBase {
   }
 
   resize(ctx, selected, hover) {
-    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
+    if (this.needsRefresh(selected, hover)) {
       this.iconSize = {
         width: Number(this.options.icon.size),
         height: Number(this.options.icon.size)

lib/network/modules/components/nodes/shapes/Image.js

@@ -9,8 +9,10 @@ class Image extends CircleImageBase {
     this.setImages(imageObj, imageObjAlt);
   }
 
-  resize() {
-    this._resizeImage();
+  resize(ctx, selected = this.selected, hover = this.hover) {
+    if (this.needsRefresh(selected, hover)) {
+      this._resizeImage();
+    }
   }
 
   draw(ctx, x, y, selected, hover, values) {
@@ -21,7 +23,7 @@ class Image extends CircleImageBase {
 
     this.selected = selected;
 
-    this.resize();
+    this.resize(ctx, selected, hover);
     this.left = x - this.width / 2;
     this.top = y - this.height / 2;
 

lib/network/modules/components/nodes/shapes/Text.js

@@ -9,7 +9,7 @@ class Text extends NodeBase {
   }
 
   resize(ctx, selected, hover) {
-    if ((this.width === undefined) || this.labelModule.differentState(selected, hover)) {
+    if (this.needsRefresh(selected, hover)) {
       this.textSize = this.labelModule.getTextSize(ctx, selected, hover);
       this.width = this.textSize.width + this.margin.right + this.margin.left;
       this.height = this.textSize.height + this.margin.top + this.margin.bottom;

lib/network/modules/components/nodes/util/CircleImageBase.js

@@ -1,10 +1,22 @@
 import NodeBase from '../util/NodeBase'
 
+/**
+ * NOTE: This is a bad base class
+ *
+ * Child classes are:
+ *
+ *   Image       - uses *only* image methods
+ *   Circle      - uses *only* _drawRawCircle
+ *   CircleImage - uses all
+ *
+ * TODO: Refactor, move _drawRawCircle to different module, derive Circle from NodeBase
+ *       Rename this to ImageBase
+ *       Consolidate common code in Image and CircleImage to base class
+ */
 class CircleImageBase extends NodeBase {
   constructor(options, body, labelModule) {
     super(options, body, labelModule);
     this.labelOffset = 0;
-    this.imageLoaded = false;
     this.selected = false;
   }
 
@@ -38,57 +50,43 @@ class CircleImageBase extends NodeBase {
   }
 
   /**
-   * This function resizes the image by the options size when the image has not yet loaded. If the image has loaded, we
-   * force the update of the size again.
+   * Adjust the node dimensions for a loaded image.
    *
-   * @private
+   * Pre: this.imageObj is valid
    */
   _resizeImage() {
-    let force = false;
-    if (!this.imageObj.width || !this.imageObj.height) { // undefined or 0
-      this.imageLoaded = false;
-    }
-    else if (this.imageLoaded === false) {
-      this.imageLoaded = true;
-      force = true;
-    }
+    var width, height;
 
-    if (!this.width || !this.height || force === true) {  // undefined or 0
-      var width, height, ratio;
-      if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
-        width = 0;
-        height = 0;
-      }
-      if (this.options.shapeProperties.useImageSize === false) {
-        if (this.imageObj.width > this.imageObj.height) {
-          ratio = this.imageObj.width / this.imageObj.height;
-          width = this.options.size * 2 * ratio || this.imageObj.width;
-          height = this.options.size * 2 || this.imageObj.height;
+    if (this.options.shapeProperties.useImageSize === false) {
+      // Use the size property
+      var ratio_width  = 1;
+      var ratio_height = 1;
+
+      // Only calculate the proper ratio if both width and height not zero
+      if (this.imageObj.width && this.imageObj.height) {
+      	if (this.imageObj.width > this.imageObj.height) {
+        	ratio_width = this.imageObj.width / this.imageObj.height;
         }
         else {
-          if (this.imageObj.width && this.imageObj.height) { // not undefined or 0
-            ratio = this.imageObj.height / this.imageObj.width;
-          }
-          else {
-            ratio = 1;
-          }
-          width = this.options.size * 2;
-          height = this.options.size * 2 * ratio;
+        	ratio_height = this.imageObj.height / this.imageObj.width;
         }
       }
-      else {
-        // when not using the size property, we use the image size
-        width = this.imageObj.width;
-        height = this.imageObj.height;
-      }
-      this.width = width;
-      this.height = height;
-      this.radius = 0.5 * this.width;
+
+      width  = this.options.size * 2 * ratio_width;
+      height = this.options.size * 2 * ratio_height;
+    }
+    else {
+      // Use the image size
+      width  = this.imageObj.width;
+      height = this.imageObj.height;
     }
 
+    this.width = width;
+    this.height = height;
+    this.radius = 0.5 * this.width;
   }
 
-  _drawRawCircle(ctx, x, y, selected, hover, values) {
+  _drawRawCircle(ctx, x, y, values) {
     var borderWidth = values.borderWidth / this.body.view.scale;
     ctx.lineWidth = Math.min(this.width, borderWidth);
 

lib/network/modules/components/nodes/util/NodeBase.js

@@ -9,6 +9,7 @@ class NodeBase {
     this.width = undefined;
     this.radius = undefined;
     this.margin = undefined;
+    this.refreshNeeded = true;
     this.boundingBox = {top: 0, left: 0, right: 0, bottom: 0};
   }
 
@@ -89,6 +90,23 @@ class NodeBase {
       }
     }
   }
+
+
+  /**
+   * Determine if the shape of a node needs to be recalculated.
+   *
+   * @protected
+   */
+  needsRefresh(selected, hover) {
+    if (this.refreshNeeded === true) {
+      // This is probably not the best location to reset this member.
+      // However, in the current logic, it is the most convenient one.
+      this.refreshNeeded = false;
+      return true;
+    }
+
+    return  (this.width === undefined) || (this.labelModule.differentState(selected, hover));
+  }
 }
 
 export default NodeBase;

lib/network/modules/components/nodes/util/ShapeBase.js

@@ -6,7 +6,7 @@ class ShapeBase extends NodeBase {
   }
 
   _resizeShape(selected = this.selected, hover = this.hover, values = { size: this.options.size }) {
-    if ((this.width === undefined) || (this.labelModule.differentState(selected, hover))) {
+    if (this.needsRefresh(selected, hover)) {
       var size = 2 * values.size;
       this.width = size;
       this.height = size;

lib/timeline/Core.js

@@ -262,7 +262,7 @@ Core.prototype._create = function (container) {
       y: event.clientY
     }
     me.itemSet._onAddItem(event);
-
+    me.emit('drop', me.getEventProperties(event))
     return false;
   }
 

lib/timeline/component/ItemSet.js

@@ -2031,25 +2031,17 @@ ItemSet.prototype._onAddItem = function (event) {
     var scale = this.body.util.getScale();
     var step = this.body.util.getStep();
 
-    var newItemData = {
-      start: snap ? snap(start, scale, step) : start,
-      content: 'new item'
-    };
-
+    var newItemData;
     if (event.type == 'drop') {
-      var itemData = JSON.parse(event.dataTransfer.getData("text"))
-      newItemData.content = itemData.content; // content is required 
-      newItemData.type = itemData.type || 'box';
-      newItemData[this.itemsData._fieldId] = itemData.id || util.randomUUID();
-
-      if (itemData.type == 'range' || (itemData.end && itemData.start)) {
-        if (!itemData.end) {
-          var end = this.body.util.toTime(x + this.props.width / 5);
-          newItemData.end = snap ? snap(end, scale, step) : end;
-        } else {
-          newItemData.end = itemData.end;
-          newItemData.start = itemData.start;
-        }
+      newItemData = JSON.parse(event.dataTransfer.getData("text"))
+      newItemData.content = newItemData.content ? newItemData.content : 'new item'
+      newItemData.start = newItemData.start ? newItemData.start : (snap ? snap(start, scale, step) : start) 
+      newItemData.type = newItemData.type || 'box';
+      newItemData[this.itemsData._fieldId] = newItemData.id || util.randomUUID();
+
+      if (newItemData.type == 'range' && !newItemData.end) {
+        var end = this.body.util.toTime(x + this.props.width / 5);
+        newItemData.end = snap ? snap(end, scale, step) : end;
       }
     } else {
       newItemData[this.itemsData._fieldId] = util.randomUUID();