From edfa132fcee6bde00d074b1855936576e632c41a Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Mon, 7 Apr 2014 10:23:44 +0200 Subject: [PATCH] hierarchical layout is now recalculated on addition and removal of node or edge and edit of edge --- dist/vis.js | 42 +++++++++++++++++-- src/graph/Graph.js | 22 ++++++++++ src/graph/Node.js | 4 +- .../graphMixins/HierarchicalLayoutMixin.js | 12 ++++++ 4 files changed, 76 insertions(+), 4 deletions(-) diff --git a/dist/vis.js b/dist/vis.js index 990efc90..f1842d66 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -4,8 +4,8 @@ * * A dynamic, browser-based visualization library. * - * @version @@version - * @date @@date + * @version 0.7.2-SNAPSHOT + * @date 2014-04-07 * * @license * Copyright (C) 2011-2014 Almende B.V, http://almende.com @@ -9465,6 +9465,8 @@ function Node(properties, imagelist, grouplist, constants) { this.radiusMin = constants.nodes.radiusMin; this.radiusMax = constants.nodes.radiusMax; this.level = -1; + this.preassignedLevel = false; + this.imagelist = imagelist; this.grouplist = grouplist; @@ -9557,7 +9559,7 @@ Node.prototype.setProperties = function(properties, constants) { if (properties.x !== undefined) {this.x = properties.x;} if (properties.y !== undefined) {this.y = properties.y;} if (properties.value !== undefined) {this.value = properties.value;} - if (properties.level !== undefined) {this.level = properties.level;} + if (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;} // physics @@ -12599,6 +12601,18 @@ var repulsionMixin = { var HierarchicalLayoutMixin = { + + _resetLevels : function() { + for (var nodeId in this.nodes) { + if (this.nodes.hasOwnProperty(nodeId)) { + var node = this.nodes[nodeId]; + if (node.preassignedLevel == false) { + node.level = -1; + } + } + } + }, + /** * This is the main function to layout the nodes in a hierarchical way. * It checks if the node details are supplied correctly @@ -16032,6 +16046,7 @@ function Graph (container, data, options) { this.stabilize = true; // stabilize before displaying the graph this.selectable = true; + this.initializing = true; // these functions are triggered when the dataset is edited this.triggerFunctions = {add:null,edit:null,connect:null,delete:null}; @@ -16250,6 +16265,7 @@ function Graph (container, data, options) { this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled); // hierarchical layout + this.initializing = false; if (this.constants.hierarchicalLayout.enabled == true) { this._setupHierarchicalLayout(); } @@ -17284,6 +17300,10 @@ Graph.prototype._addNodes = function(ids) { this.moving = true; } this._updateNodeIndexList(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); this._reconnectEdges(); this._updateValueRange(this.nodes); @@ -17333,6 +17353,10 @@ Graph.prototype._removeNodes = function(ids) { delete nodes[id]; } this._updateNodeIndexList(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); this._reconnectEdges(); this._updateSelection(); @@ -17411,6 +17435,10 @@ Graph.prototype._addEdges = function (ids) { this.moving = true; this._updateValueRange(edges); this._createBezierNodes(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); }; @@ -17441,6 +17469,10 @@ Graph.prototype._updateEdges = function (ids) { } this._createBezierNodes(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this.moving = true; this._updateValueRange(edges); }; @@ -17466,6 +17498,10 @@ Graph.prototype._removeEdges = function (ids) { this.moving = true; this._updateValueRange(edges); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); }; diff --git a/src/graph/Graph.js b/src/graph/Graph.js index b69dfe69..ef189c26 100644 --- a/src/graph/Graph.js +++ b/src/graph/Graph.js @@ -27,6 +27,7 @@ function Graph (container, data, options) { this.stabilize = true; // stabilize before displaying the graph this.selectable = true; + this.initializing = true; // these functions are triggered when the dataset is edited this.triggerFunctions = {add:null,edit:null,connect:null,delete:null}; @@ -245,6 +246,7 @@ function Graph (container, data, options) { this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled); // hierarchical layout + this.initializing = false; if (this.constants.hierarchicalLayout.enabled == true) { this._setupHierarchicalLayout(); } @@ -1279,6 +1281,10 @@ Graph.prototype._addNodes = function(ids) { this.moving = true; } this._updateNodeIndexList(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); this._reconnectEdges(); this._updateValueRange(this.nodes); @@ -1328,6 +1334,10 @@ Graph.prototype._removeNodes = function(ids) { delete nodes[id]; } this._updateNodeIndexList(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); this._reconnectEdges(); this._updateSelection(); @@ -1406,6 +1416,10 @@ Graph.prototype._addEdges = function (ids) { this.moving = true; this._updateValueRange(edges); this._createBezierNodes(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); }; @@ -1436,6 +1450,10 @@ Graph.prototype._updateEdges = function (ids) { } this._createBezierNodes(); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this.moving = true; this._updateValueRange(edges); }; @@ -1461,6 +1479,10 @@ Graph.prototype._removeEdges = function (ids) { this.moving = true; this._updateValueRange(edges); + if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) { + this._resetLevels(); + this._setupHierarchicalLayout(); + } this._updateCalculationNodes(); }; diff --git a/src/graph/Node.js b/src/graph/Node.js index 3e2f2869..4b363df9 100644 --- a/src/graph/Node.js +++ b/src/graph/Node.js @@ -54,6 +54,8 @@ function Node(properties, imagelist, grouplist, constants) { this.radiusMin = constants.nodes.radiusMin; this.radiusMax = constants.nodes.radiusMax; this.level = -1; + this.preassignedLevel = false; + this.imagelist = imagelist; this.grouplist = grouplist; @@ -146,7 +148,7 @@ Node.prototype.setProperties = function(properties, constants) { if (properties.x !== undefined) {this.x = properties.x;} if (properties.y !== undefined) {this.y = properties.y;} if (properties.value !== undefined) {this.value = properties.value;} - if (properties.level !== undefined) {this.level = properties.level;} + if (properties.level !== undefined) {this.level = properties.level; this.preassignedLevel = true;} // physics diff --git a/src/graph/graphMixins/HierarchicalLayoutMixin.js b/src/graph/graphMixins/HierarchicalLayoutMixin.js index 8b689a11..ca18927f 100644 --- a/src/graph/graphMixins/HierarchicalLayoutMixin.js +++ b/src/graph/graphMixins/HierarchicalLayoutMixin.js @@ -1,6 +1,18 @@ var HierarchicalLayoutMixin = { + + _resetLevels : function() { + for (var nodeId in this.nodes) { + if (this.nodes.hasOwnProperty(nodeId)) { + var node = this.nodes[nodeId]; + if (node.preassignedLevel == false) { + node.level = -1; + } + } + } + }, + /** * This is the main function to layout the nodes in a hierarchical way. * It checks if the node details are supplied correctly