diff --git a/HISTORY.md b/HISTORY.md index 07d29c9a..4f0e5055 100644 --- a/HISTORY.md +++ b/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 diff --git a/dist/vis.js b/dist/vis.js index 4d5c2203..12b97bff 100644 --- a/dist/vis.js +++ b/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; } /** diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js index b7aec423..a6c4ae1b 100644 --- a/lib/network/modules/CanvasRenderer.js +++ b/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 diff --git a/lib/network/modules/ManipulationSystem.js b/lib/network/modules/ManipulationSystem.js index 13f0b5ff..00f15e68 100644 --- a/lib/network/modules/ManipulationSystem.js +++ b/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; } diff --git a/lib/network/modules/components/Node.js b/lib/network/modules/components/Node.js index 3c808945..184ad327 100644 --- a/lib/network/modules/components/Node.js +++ b/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 ); } } diff --git a/test/networkTest.html b/test/networkTest.html index 74b609f8..fe0e11cb 100644 --- a/test/networkTest.html +++ b/test/networkTest.html @@ -1,69 +1,138 @@ - +
+ +