- Fixed #1358: Fixed example for clustering on zoom. Also removed private keyword from public methods. Let physics listen to data updates instead of being called from network.

HISTORY.md

@@ -19,6 +19,7 @@ http://visjs.org
 - Fixed #1362: Layout of hierarchicaly systems no longer overlaps NODES.
 - Fixed #1414: Fixed color references for nodes and edges.
 - Fixed #1408: Unclustering without release function respects fixed positions now.
+- Fixed #1358: Fixed example for clustering on zoom.
 
 ### Timeline
 

dist/vis.js

@@ -27312,7 +27312,6 @@ return /******/ (function(modules) { // webpackBootstrap
     this.body.emitter.on("_dataChanged", function () {
       // update shortcut lists
       _this3._updateVisibleIndices();
-      _this3.physics.updatePhysicsData();
       _this3.body.emitter.emit("_requestRedraw");
       // call the dataUpdated event because the only difference between the two is the updating of the indices
       _this3.body.emitter.emit("_dataUpdated");
@@ -33394,6 +33393,11 @@ return /******/ (function(modules) { // webpackBootstrap
           _this.stopSimulation(false);
           _this.body.emitter.off();
         });
+        // 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", function () {
+          // update shortcut lists
+          _this.updatePhysicsData();
+        });
       }
 
       /**
@@ -33886,7 +33890,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * Find a stable position for all nodes
-       * @private
        */
     }, {
       key: 'stabilize',
@@ -35887,7 +35890,6 @@ return /******/ (function(modules) { // webpackBootstrap
       * Get the stack clusterId's that a certain node resides in. cluster A -> cluster B -> cluster C -> node
       * @param nodeId
       * @returns {Array}
-      * @private
       */
     }, {
       key: 'findNode',
@@ -38711,7 +38713,6 @@ return /******/ (function(modules) { // webpackBootstrap
        *
        * @param {{x: Number, y: Number}} pointer
        * @return {Node | undefined} node
-       * @private
        */
     }, {
       key: "getNodeAt",
@@ -38772,7 +38773,6 @@ return /******/ (function(modules) { // webpackBootstrap
        *
        * @param pointer
        * @returns {undefined}
-       * @private
        */
     }, {
       key: "getEdgeAt",
@@ -38844,8 +38844,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * Unselect all. The selectionObj is useful for this.
-       *
-       * @private
        */
     }, {
       key: "unselectAll",
@@ -40167,8 +40165,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * Create the toolbar for adding Nodes
-       *
-       * @private
        */
     }, {
       key: 'addNodeMode',
@@ -40198,8 +40194,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * call the bound function to handle the editing of the node. The node has to be selected.
-       *
-       * @private
        */
     }, {
       key: 'editNode',
@@ -40246,8 +40240,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * create the toolbar to connect nodes
-       *
-       * @private
        */
     }, {
       key: 'addEdgeMode',
@@ -40284,8 +40276,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * create the toolbar to edit edges
-       *
-       * @private
        */
     }, {
       key: 'editEdgeMode',
@@ -40361,8 +40351,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
       /**
        * delete everything in the selection
-       *
-       * @private
        */
     }, {
       key: 'deleteSelected',

examples/network/other/clusteringByZoom.html

@@ -72,7 +72,7 @@ Stabilize when clustering:
         nodes: nodes,
         edges: edges
     };
-    var options = {layout: {randomSeed: 8}};
+    var options = {layout: {randomSeed: 8}, physics:{adaptiveTimestep:false}};
     var network = new vis.Network(container, data, options);
 
     // set the first initial zoom level
@@ -125,6 +125,8 @@ Stabilize when clustering:
         }
         network.clusterOutliers(clusterOptionsByData);
         if (document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
             network.stabilize();
         }
     }
@@ -145,6 +147,8 @@ Stabilize when clustering:
         }
         clusters = newClusters;
         if (declustered === true && document.getElementById('stabilizeCheckbox').checked === true) {
+            // since we use the scale as a unique identifier, we do NOT want to fit after the stabilization
+            network.setOptions({physics:{stabilization:{fit: false}}});
             network.stabilize();
         }
     }

lib/network/Network.js

@@ -270,7 +270,6 @@ Network.prototype.bindEventListeners = function () {
   this.body.emitter.on("_dataChanged", () => {
     // update shortcut lists
     this._updateVisibleIndices();
-    this.physics.updatePhysicsData();
     this.body.emitter.emit("_requestRedraw");
     // call the dataUpdated event because the only difference between the two is the updating of the indices
     this.body.emitter.emit("_dataUpdated");

lib/network/modules/Clustering.js

@@ -686,7 +686,6 @@ class ClusterEngine {
   * Get the stack clusterId's that a certain node resides in. cluster A -> cluster B -> cluster C -> node
   * @param nodeId
   * @returns {Array}
-  * @private
   */
   findNode(nodeId) {
     let stack = [];

lib/network/modules/ManipulationSystem.js

@@ -221,8 +221,6 @@ class ManipulationSystem {
 
   /**
    * Create the toolbar for adding Nodes
-   *
-   * @private
    */
   addNodeMode() {
     // when using the gui, enable edit mode if it wasnt already.
@@ -250,8 +248,6 @@ class ManipulationSystem {
 
   /**
    * call the bound function to handle the editing of the node. The node has to be selected.
-   *
-   * @private
    */
   editNode() {
     // when using the gui, enable edit mode if it wasnt already.
@@ -298,8 +294,6 @@ class ManipulationSystem {
 
   /**
    * create the toolbar to connect nodes
-   *
-   * @private
    */
   addEdgeMode() {
     // when using the gui, enable edit mode if it wasnt already.
@@ -334,8 +328,6 @@ class ManipulationSystem {
 
   /**
    * create the toolbar to edit edges
-   *
-   * @private
    */
   editEdgeMode() {
     // when using the gui, enable edit mode if it wasnt already.
@@ -406,8 +398,6 @@ class ManipulationSystem {
 
   /**
    * delete everything in the selection
-   *
-   * @private
    */
   deleteSelected() {
     // when using the gui, enable edit mode if it wasnt already.

lib/network/modules/PhysicsEngine.js

@@ -112,6 +112,12 @@ class PhysicsEngine {
       this.stopSimulation(false);
       this.body.emitter.off();
     });
+    // 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", () => {
+      // update shortcut lists
+      this.updatePhysicsData();
+    });
+
   }
 
 
@@ -587,7 +593,6 @@ class PhysicsEngine {
 
   /**
    * Find a stable position for all nodes
-   * @private
    */
   stabilize(iterations = this.options.stabilization.iterations) {
     if (typeof iterations !== 'number') {

lib/network/modules/SelectionHandler.js

@@ -159,7 +159,6 @@ class SelectionHandler {
    *
    * @param {{x: Number, y: Number}} pointer
    * @return {Node | undefined} node
-   * @private
    */
   getNodeAt(pointer, returnNode = true) {
     // we first check if this is an navigation controls element
@@ -217,7 +216,6 @@ class SelectionHandler {
    *
    * @param pointer
    * @returns {undefined}
-   * @private
    */
   getEdgeAt(pointer, returnEdge = true) {
     let positionObject = this._pointerToPositionObject(pointer);
@@ -286,8 +284,6 @@ class SelectionHandler {
 
   /**
    * Unselect all. The selectionObj is useful for this.
-   *
-   * @private
    */
   unselectAll() {
     for(let nodeId in this.selectionObj.nodes) {