fixed viewable area check as per #812

dist/vis.css

@@ -222,7 +222,7 @@
   box-sizing: border-box;
 }
 
-.vis-item.background {
+.vis-item.vis-background {
   border: none;
   background-color: rgba(213, 221, 246, 0.4);
   box-sizing: border-box;
@@ -244,7 +244,7 @@
   display: inline-block;
 }
 
-.vis-item.background .vis-item-content {
+.vis-item.vis-background .vis-item-content {
   position: absolute;
   display: inline-block;
 }

lib/network/dotparser.js

@@ -769,7 +769,7 @@ function DOTToGraph (data) {
       merge(graphEdge, dotEdge.attr);
       graphEdge.style = (dotEdge.type === '->') ? 'arrow' : 'line';
       return graphEdge;
-    }
+    };
 
     dotData.edges.forEach(function (dotEdge) {
       var from, to;

lib/network/modules/Canvas.js

@@ -22,7 +22,7 @@ class Canvas {
       width:'100%',
       height:'100%',
       autoResize: true
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this.bindEventListeners();
@@ -157,6 +157,8 @@ class Canvas {
     // init hammer
     this.hammer = new Hammer(this.frame.canvas);
     this.hammer.get('pinch').set({enable: true});
+    // enable to get better response, todo: test on mobile.
+    //this.hammer.get('pan').set({threshold:2});
 
     hammerUtil.onTouch(this.hammer, (event) => {this.body.eventListeners.onTouch(event)});
     this.hammer.on('tap',       (event) => {this.body.eventListeners.onTap(event)});

lib/network/modules/CanvasRenderer.js

@@ -3,7 +3,7 @@ if (typeof window !== 'undefined') {
   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
 }
 
-var util = require('../../util');
+let util = require('../../util');
 
 
 class CanvasRenderer {
@@ -24,7 +24,7 @@ class CanvasRenderer {
     this.defaultOptions = {
       hideEdgesOnDrag: false,
       hideNodesOnDrag: false
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this._determineBrowserMethod();
@@ -136,14 +136,14 @@ class CanvasRenderer {
     this.body.emitter.emit("initRedraw");
 
     this.redrawRequested = false;
-    var ctx = this.canvas.frame.canvas.getContext('2d');
+    let ctx = this.canvas.frame.canvas.getContext('2d');
 
     // when the container div was hidden, this fixes it back up!
     if (this.canvas.frame.canvas.width === 0 || this.canvas.frame.canvas.height === 0) {
       this.canvas.setSize();
     }
 
-    if (this.pixelRation === undefined) {
+    if (this.pixelRatio === undefined) {
       this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
       ctx.mozBackingStorePixelRatio ||
       ctx.msBackingStorePixelRatio ||
@@ -154,8 +154,8 @@ class CanvasRenderer {
     ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
 
     // clear the canvas
-    var w = this.canvas.frame.canvas.clientWidth;
-    var h = this.canvas.frame.canvas.clientHeight;
+    let w = this.canvas.frame.canvas.clientWidth;
+    let h = this.canvas.frame.canvas.clientHeight;
     ctx.clearRect(0, 0, w, h);
 
 
@@ -190,8 +190,6 @@ class CanvasRenderer {
     if (hidden === true) {
       ctx.clearRect(0, 0, w, h);
     }
-
-
   }
 
 
@@ -203,10 +201,18 @@ class CanvasRenderer {
    * @private
    */
   _drawNodes(ctx, alwaysShow = false) {
-    var nodes = this.body.nodes;
-    var nodeIndices = this.body.nodeIndices;
-    var node;
-    var selected = [];
+    let nodes = this.body.nodes;
+    let nodeIndices = this.body.nodeIndices;
+    let node;
+    let selected = [];
+    let margin = 20;
+    let topLeft = this.canvas.DOMtoCanvas({x:-margin,y:-margin});
+    let bottomRight = this.canvas.DOMtoCanvas({
+      x: this.canvas.frame.canvas.clientWidth+margin,
+      y: this.canvas.frame.canvas.clientHeight+margin
+    });
+    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++) {
@@ -219,10 +225,12 @@ class CanvasRenderer {
         if (alwaysShow === true) {
           node.draw(ctx);
         }
-        // todo: replace check
-        //else if (node.inArea() === true) {
-        node.draw(ctx);
-        //}
+        else if (node.isBoundingBoxOverlappingWith(viewableArea) === true) {
+          node.draw(ctx);
+        }
+        else {
+          console.log("hidden")
+        }
       }
     }
 
@@ -241,9 +249,9 @@ class CanvasRenderer {
    * @private
    */
   _drawEdges(ctx) {
-    var edges = this.body.edges;
-    var edgeIndices = this.body.edgeIndices;
-    var edge;
+    let edges = this.body.edges;
+    let edgeIndices = this.body.edgeIndices;
+    let edge;
 
     for (let i = 0; i < edgeIndices.length; i++) {
       edge = edges[edgeIndices[i]];
@@ -260,9 +268,9 @@ class CanvasRenderer {
    * @private
    */
   _drawControlNodes(ctx) {
-    var edges = this.body.edges;
-    var edgeIndices = this.body.edgeIndices;
-    var edge;
+    let edges = this.body.edges;
+    let edgeIndices = this.body.edgeIndices;
+    let edge;
 
     for (let i = 0; i < edgeIndices.length; i++) {
       edge = edges[edgeIndices[i]];
@@ -277,7 +285,7 @@ class CanvasRenderer {
    */
   _determineBrowserMethod() {
     if (typeof window !== 'undefined') {
-      var browserType = navigator.userAgent.toLowerCase();
+      let browserType = navigator.userAgent.toLowerCase();
       this.requiresTimeout = false;
       if (browserType.indexOf('msie 9.0') != -1) { // IE 9
         this.requiresTimeout = true;

lib/network/modules/Clustering.js

@@ -59,7 +59,7 @@ class ClusterEngine {
     options = this._checkOptions(options);
 
     let childNodesObj = {};
-    let childEdgesObj = {}
+    let childEdgesObj = {};
 
     // collect the nodes that will be in the cluster
     for (let i = 0; i < this.body.nodeIndices.length; i++) {
@@ -143,7 +143,7 @@ class ClusterEngine {
 
 
     let childNodesObj = {};
-    let childEdgesObj = {}
+    let childEdgesObj = {};
     let parentNodeId = node.id;
     let parentClonedOptions = this._cloneOptions(parentNodeId);
     childNodesObj[parentNodeId] = node;
@@ -388,7 +388,7 @@ class ClusterEngine {
       return this.body.nodes[nodeId].isCluster === true;
     }
     else {
-      console.log("Node does not exist.")
+      console.log("Node does not exist.");
       return false;
     }
   }
@@ -426,8 +426,10 @@ class ClusterEngine {
     // kill conditions
     if (clusterNodeId === undefined)             {throw new Error("No clusterNodeId supplied to openCluster.");}
     if (this.body.nodes[clusterNodeId] === undefined) {throw new Error("The clusterNodeId supplied to openCluster does not exist.");}
-    if (this.body.nodes[clusterNodeId].containedNodes === undefined) {console.log("The node:" + clusterNodeId + " is not a cluster."); return};
-
+    if (this.body.nodes[clusterNodeId].containedNodes === undefined) {
+      console.log("The node:" + clusterNodeId + " is not a cluster.");
+      return
+    }
     let clusterNode = this.body.nodes[clusterNodeId];
     let containedNodes = clusterNode.containedNodes;
     let containedEdges = clusterNode.containedEdges;
@@ -492,7 +494,7 @@ class ClusterEngine {
     if (from === true) {
       edge.from = clusterStack[clusterStack.length - 1];
       edge.fromId = clusterStack[clusterStack.length - 1].id;
-      clusterStack.pop()
+      clusterStack.pop();
       edge.fromArray = clusterStack;
     }
     else {

lib/network/modules/ConfigurationSystem.js

@@ -27,7 +27,7 @@ class ConfigurationSystem {
       enabled: false,
       filter: true,
       container: undefined
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this.configureOptions = configureOptions;
@@ -371,7 +371,7 @@ class ConfigurationSystem {
     value = value === undefined ? defaultColor : value;
     div.onclick = () => {
       this._showColorPicker(value,div,path);
-    }
+    };
 
     let label = this._makeLabel(path[path.length-1], path);
     this._makeItem(path,label, div);

lib/network/modules/Groups.js

@@ -34,13 +34,13 @@ class Groups {
       {border: "#FFC0CB", background: "#FD5A77", highlight: {border: "#FFD1D9", background: "#FD5A77"}, hover: {border: "#FFD1D9", background: "#FD5A77"}}, // 18: pink
       {border: "#C2FABC", background: "#74D66A", highlight: {border: "#E6FFE3", background: "#74D66A"}, hover: {border: "#E6FFE3", background: "#74D66A"}}, // 19: mint
 
-      {border: "#EE0000", background: "#990000", highlight: {border: "#FF3333", background: "#BB0000"}, hover: {border: "#FF3333", background: "#BB0000"}}, // 20:bright red
+      {border: "#EE0000", background: "#990000", highlight: {border: "#FF3333", background: "#BB0000"}, hover: {border: "#FF3333", background: "#BB0000"}} // 20:bright red
     ];
 
     this.options = {};
     this.defaultOptions = {
       useDefaultGroups: true
-    }
+    };
     util.extend(this.options, this.defaultOptions);
   }
 

lib/network/modules/InteractionHandler.js

@@ -47,7 +47,7 @@ class InteractionHandler {
         speed: {x: 10, y: 10, zoom: 0.02},
         bindToWindow: true
       }
-    }
+    };
     util.extend(this.options,this.defaultOptions);
 
     this.bindEventListeners()
@@ -477,7 +477,7 @@ class InteractionHandler {
       // if the popup was not hidden above
       if (this.popup.hidden === false) {
         popupVisible = true;
-        this.popup.setPosition(pointer.x + 3, pointer.y - 5)
+        this.popup.setPosition(pointer.x + 3, pointer.y - 5);
         this.popup.show();
       }
     }

lib/network/modules/LayoutEngine.js

@@ -17,7 +17,7 @@ class LayoutEngine {
         direction: 'UD',   // UD, DU, LR, RL
         sortMethod: 'hubsize' // hubsize, directed
       }
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this.hierarchicalLevels = {};
@@ -28,7 +28,7 @@ class LayoutEngine {
   bindEventListeners() {
     this.body.emitter.on('_dataChanged', () => {
       this.setupHierarchicalLayout();
-    })
+    });
     this.body.emitter.on('_resetHierarchicalLayout', () => {
       this.setupHierarchicalLayout();
     });

lib/network/modules/ManipulationSystem.js

@@ -49,7 +49,7 @@ class ManipulationSystem {
         borderWidth: 2,
         borderWidthSelected: 2
       }
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this.body.emitter.on('destroy',     () => {this._clean();});

lib/network/modules/NodesHandler.js

@@ -216,7 +216,7 @@ class NodesHandler {
     for (let i = 0; i < ids.length; i++) {
       id = ids[i];
       let properties = this.body.data.nodes.get(id);
-      let node = this.create(properties);;
+      let node = this.create(properties);
       newNodes.push(node);
       this.body.nodes[id] = node; // note: this may replace an existing node
     }
@@ -386,7 +386,7 @@ class NodesHandler {
         }
         else if (edge.fromId === nodeId) {
           if (nodeObj[edge.toId] === undefined) {
-            nodeList.push(edge.toId)
+            nodeList.push(edge.toId);
             nodeObj[edge.toId] = true;
           }
         }

lib/network/modules/PhysicsEngine.js

@@ -60,7 +60,7 @@ class PhysicsEngine {
         fit: true
       },
       timestep: 0.5
-    }
+    };
     util.extend(this.options, this.defaultOptions);
 
     this.bindEventListeners();
@@ -80,7 +80,7 @@ class PhysicsEngine {
       if (this.ready === true) {
         this.startSimulation();
       }
-    })
+    });
     this.body.emitter.on('stopSimulation',  () => {this.stopSimulation();});
     this.body.emitter.on('destroy',         () => {
       this.stopSimulation(false);
@@ -135,7 +135,7 @@ class PhysicsEngine {
       else {
         this.stabilized = false;
         this.ready = true;
-        this.body.emitter.emit('fit', {}, true)
+        this.body.emitter.emit('fit', {}, true);
         this.startSimulation();
       }
     }

lib/network/modules/SelectionHandler.js

@@ -37,7 +37,7 @@ class SelectionHandler {
     let selected = false;
     if (this.options.select === true) {
       this.unselectAll();
-      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
+      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);
       if (obj !== undefined) {
         selected = this.selectObject(obj);
       }
@@ -49,8 +49,7 @@ class SelectionHandler {
   selectAdditionalOnPoint(pointer) {
     let selectionChanged = false;
     if (this.options.select === true) {
-      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);;
-
+      let obj = this.getNodeAt(pointer) || this.getEdgeAt(pointer);
       if (obj !== undefined) {
         selectionChanged = true;
         if (obj.isSelected() === true) {
@@ -71,7 +70,7 @@ class SelectionHandler {
     properties['pointer'] = {
       DOM: {x: pointer.x, y: pointer.y},
       canvas: this.canvas.DOMtoCanvas(pointer)
-    }
+    };
     properties['event'] = event;
 
     if (oldSelection !== undefined) {

lib/network/modules/components/Edge.js

@@ -104,7 +104,7 @@ class Edge {
       'to',
       'title',
       'value',
-      'width',
+      'width'
     ];
 
     // only deep extend the items in the field array. These do not have shorthand.

lib/network/modules/components/Node.js

@@ -393,6 +393,20 @@ class Node {
     );
   }
 
+  /**
+   * Check if this object is overlapping with the provided object
+   * @param {Object} obj   an object with parameters left, top, right, bottom
+   * @return {boolean}     True if location is located on 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
+    );
+  }
+
 
 }
 

lib/network/modules/components/edges/util/EdgeBase.js

@@ -1,4 +1,4 @@
-let util = require("../../../../../util")
+let util = require("../../../../../util");
 
 class EdgeBase {
   constructor(options, body, labelModule) {
@@ -198,7 +198,7 @@ class EdgeBase {
     let radius = this.options.selfReferenceSize;
     let pos, angle, distanceToBorder, distanceToPoint, difference;
     let threshold = 0.05;
-    let middle = (low + high) * 0.5
+    let middle = (low + high) * 0.5;
 
     while (low <= high && iteration < maxIterations) {
       middle = (low + high) * 0.5;

lib/network/modules/components/shared/Label.js

@@ -90,7 +90,7 @@ class Label {
           break;
         case 'bottom':
           ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
-          break
+          break;
         default:
           ctx.fillRect(this.size.left, this.size.top, this.size.width, this.size.height);
           break;