- Fixed #1406, control nodes are now drawn immediately without a second redraw.

HISTORY.md

@@ -14,6 +14,7 @@ http://visjs.org
 - Fixed #1531 , #1335:  border distances for arrow positioning
 - Fixed findNode method. It now does not return internal objects anymore.
 - Fixed #1529, clustering and declustering now respects the original settings of the edges for physics and hidden.
+- Fixed #1406, control nodes are now drawn immediately without a second redraw.
 
 ## 2015-12-18, version 4.11.0
 

dist/vis.js

@@ -36968,10 +36968,6 @@ return /******/ (function(modules) { // webpackBootstrap
             this._drawNodes(ctx, hidden);
           }
 
-          if (this.controlNodesActive === true) {
-            this._drawControlNodes(ctx);
-          }
-
           ctx.beginPath();
           this.body.emitter.emit("afterDrawing", ctx);
           ctx.closePath();
@@ -37088,25 +37084,6 @@ return /******/ (function(modules) { // webpackBootstrap
         }
       }
 
-      /**
-       * Redraw all edges
-       * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-       * @param {CanvasRenderingContext2D}   ctx
-       * @private
-       */
-    }, {
-      key: '_drawControlNodes',
-      value: function _drawControlNodes(ctx) {
-        var edges = this.body.edges;
-        var edgeIndices = this.body.edgeIndices;
-        var edge = undefined;
-
-        for (var i = 0; i < edgeIndices.length; i++) {
-          edge = edges[edgeIndices[i]];
-          edge._drawControlNodes(ctx);
-        }
-      }
-
       /**
        * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
        * some implementations (safari and IE9) did not support requestAnimationFrame
@@ -41137,7 +41114,7 @@ return /******/ (function(modules) { // webpackBootstrap
       value: function editEdgeMode() {
         var _this3 = this;
 
-        // when using the gui, enable edit mode if it wasnt already.
+        // when using the gui, enable edit mode if it wasn't already.
         if (this.editMode !== true) {
           this.enableEditMode();
         }
@@ -41352,7 +41329,11 @@ return /******/ (function(modules) { // webpackBootstrap
         controlNodeStyle.x = x;
         controlNodeStyle.y = y;
 
-        return this.body.functions.createNode(controlNodeStyle);
+        // we have to define the bounding box in order for the nodes to be drawn immediately
+        var node = this.body.functions.createNode(controlNodeStyle);
+        node.shape.boundingBox = { left: x, right: x, top: y, bottom: y };
+
+        return node;
       }
 
       /**

lib/network/modules/CanvasRenderer.js

@@ -184,10 +184,6 @@ class CanvasRenderer {
         this._drawNodes(ctx, hidden);
       }
 
-      if (this.controlNodesActive === true) {
-        this._drawControlNodes(ctx);
-      }
-
       ctx.beginPath();
       this.body.emitter.emit("afterDrawing", ctx);
       ctx.closePath();
@@ -259,7 +255,6 @@ class CanvasRenderer {
     });
     let viewableArea = {top:topLeft.y,left:topLeft.x,bottom:bottomRight.y,right:bottomRight.x};
 
-
     // draw unselected nodes;
     for (let i = 0; i < nodeIndices.length; i++) {
       node = nodes[nodeIndices[i]];
@@ -307,23 +302,6 @@ class CanvasRenderer {
     }
   }
 
-  /**
-   * Redraw all edges
-   * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
-   * @param {CanvasRenderingContext2D}   ctx
-   * @private
-   */
-  _drawControlNodes(ctx) {
-    let edges = this.body.edges;
-    let edgeIndices = this.body.edgeIndices;
-    let edge;
-
-    for (let i = 0; i < edgeIndices.length; i++) {
-      edge = edges[edgeIndices[i]];
-      edge._drawControlNodes(ctx);
-    }
-  }
-
   /**
    * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
    * some implementations (safari and IE9) did not support requestAnimationFrame

lib/network/modules/ManipulationSystem.js

@@ -330,7 +330,7 @@ class ManipulationSystem {
    * create the toolbar to edit edges
    */
   editEdgeMode() {
-    // when using the gui, enable edit mode if it wasnt already.
+    // when using the gui, enable edit mode if it wasn't already.
     if (this.editMode !== true) {
       this.enableEditMode();
     }
@@ -547,7 +547,11 @@ class ManipulationSystem {
     controlNodeStyle.x = x;
     controlNodeStyle.y = y;
 
-    return this.body.functions.createNode(controlNodeStyle);
+    // we have to define the bounding box in order for the nodes to be drawn immediately
+    let node = this.body.functions.createNode(controlNodeStyle);
+    node.shape.boundingBox = {left: x, right:x, top:y, bottom:y};
+
+    return node;
   }
 
 

lib/network/modules/components/Node.js

@@ -432,10 +432,10 @@ class Node {
    */
   isBoundingBoxOverlappingWith(obj) {
     return (
-    this.shape.boundingBox.left < obj.right &&
-    this.shape.boundingBox.right > obj.left &&
-    this.shape.boundingBox.top < obj.bottom &&
-    this.shape.boundingBox.bottom > obj.top
+      this.shape.boundingBox.left < obj.right &&
+      this.shape.boundingBox.right > obj.left &&
+      this.shape.boundingBox.top < obj.bottom &&
+      this.shape.boundingBox.bottom > obj.top
     );
   }
 }