From 3814ff18c4dfa4de633628c551b2708b59f11d28 Mon Sep 17 00:00:00 2001 From: Alex de Mulder Date: Mon, 9 Feb 2015 14:32:10 +0100 Subject: [PATCH] added documentation --- HISTORY.md | 5 +- dist/vis.js | 20 +++--- docs/network.html | 62 ++++++++++++++++++- .../network/29_neighbourhood_highlight.html | 39 ++++-------- lib/network/Network.js | 10 +-- lib/network/mixins/ManipulationMixin.js | 10 +-- 6 files changed, 94 insertions(+), 52 deletions(-) diff --git a/HISTORY.md b/HISTORY.md index 6196bb44..f5d11c0d 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -13,9 +13,10 @@ http://visjs.org - Added fade in of labels (on nodes) near the fontDrawThreshold. - Added nodes option to zoomExtent to zoom in on specific set of nodes. - Added stabilizationIterationsDone event which fires at the end of the internal stabilization run. Does not imply that the network is stabilized. -- Added setFreezeSimulation method. -- Added clusterByZoom option and increaseClusterLevel and decreaseClusterLevel methods. +- Added freezeSimulation method. +- Added clusterByZoom option. - Fixed bug when redrawing was not right on zoomed-out browsers. +- Added opacity to edges. Opacity is only used for the unselected state. ### DataSet/DataView diff --git a/dist/vis.js b/dist/vis.js index 8e03f5b7..ff98e855 100644 --- a/dist/vis.js +++ b/dist/vis.js @@ -23037,7 +23037,7 @@ return /******/ (function(modules) { // webpackBootstrap this.setOptions(options); // other vars - this.freezeSimulation = false;// freeze the simulation + this.freezeSimulationEnabled = false;// freeze the simulation this.cachedFunctions = {}; this.startedStabilization = false; this.stabilized = false; @@ -25055,7 +25055,7 @@ return /******/ (function(modules) { // webpackBootstrap * @private */ Network.prototype._physicsTick = function() { - if (!this.freezeSimulation) { + if (!this.freezeSimulationEnabled) { if (this.moving == true) { var mainMovingStatus = false; var supportMovingStatus = false; @@ -25195,13 +25195,13 @@ return /******/ (function(modules) { // webpackBootstrap /** * Freeze the _animationStep */ - Network.prototype.setFreezeSimulation = function(freeze) { + Network.prototype.freezeSimulation = function(freeze) { if (freeze == true) { - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; this.moving = false; } else { - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; this.moving = true; this.start(); } @@ -33378,7 +33378,7 @@ return /******/ (function(modules) { // webpackBootstrap delete this.sectors['support']['nodes']['targetNode']; delete this.sectors['support']['nodes']['targetViaNode']; this.controlNodesActive = false; - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; }; /** @@ -33447,7 +33447,7 @@ return /******/ (function(modules) { // webpackBootstrap this._restoreOverloadedFunctions(); // resume calculation - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; // reset global variables this.blockConnectingEdgeSelection = false; @@ -33617,7 +33617,7 @@ return /******/ (function(modules) { // webpackBootstrap // clear the toolbar this._clearManipulatorBar(); this._unselectAll(true); - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; if (this.boundFunction) { this.off('select', this.boundFunction); @@ -33748,7 +33748,7 @@ return /******/ (function(modules) { // webpackBootstrap this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y)); if (this.selectedControlNode !== null) { this.selectedControlNode.select(); - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; } this._redraw(); }; @@ -33792,7 +33792,7 @@ return /******/ (function(modules) { // webpackBootstrap else { this.edgeBeingEdited._restoreControlNodes(); } - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; this._redraw(); }; diff --git a/docs/network.html b/docs/network.html index ac277441..d1c2e9af 100644 --- a/docs/network.html +++ b/docs/network.html @@ -959,6 +959,38 @@ mySize = minSize + diff * scale; 14 Font size in pixels for label in the node. + + scaleFontWithValue + Boolean + false + When using values, you can let the font scale with the size of the nodes if you enable the this option. + + + fontSizeMin + Number + 14 + When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the minimum value of the fontSize. + + + fontSizeMax + Number + 30 + When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. This is the maximum value of the fontSize. + + + fontSizeMaxVisible + Number + 30 + When using values, you can let the font scale with the size of the nodes if you enable the scaleFontWithValue option. If you have a wide distribution of values and have a large max fontSize, + the text will become huge if you zoom in on it. This option limits the percieved fontSize to avoid this. If you set it to 20, no label will be larger than fontsize 20 (at scale = 1) regardless of the scale. + + + fontDrawThreshold + Number + 3 + When zooming out, the text becomes smaller. This option sets the minimum size of the label before not being drawn. Just like the fontSizeMaxVisible option, this is the relative fontSize (fontSize * scale). + You can combine this with the min and max values to have the labels of influential nodes show earlier when zooming in. + fontFill String @@ -1229,7 +1261,12 @@ var options = { Possible values: "line-above", "line-center", "line-below". The alignment of the label when drawn on the edge. If horizontal it will align the label absolute horizontial. - + + opacity + Number + 1.0 + Possible values: [0 .. 1]. This opacity value is added on top of the color information. This only happens for the unselected state. + style string @@ -1759,7 +1796,8 @@ var options = { radius: 1}, maxNodeSizeIncrements: 600, activeAreaBoxSize: 100, - clusterLevelDifference: 2 + clusterLevelDifference: 2, + clusterByZoom: true } } // OR to just load the module with default values: @@ -1902,6 +1940,12 @@ var options = { If the highest level of your network at any given time is 3, nodes that have not clustered or have clustered only once will join their neighbour with the lowest cluster level. + + clusterByZoom + Boolean + true + You can toggle the clustering by zoom level using this option. + @@ -2246,6 +2290,13 @@ var options = { Returns a bounding box for the node including label in the format: {top:Number,left:Number,right:Number,bottom:Number}. These values are in canvas space. + + getConnectedNodes(nodeId) + Array + Returns an array with nodeIds of nodes that are connected to this node. Network keeps track of the connected nodes so this function allows you + to quickly get them without iterating over all edges manually. This is a lot faster for cases with many edges. + + getSelection() Array of ids @@ -2272,6 +2323,13 @@ var options = { easeInQuint, easeOutQuint, easeInOutQuint

+ + freezeSimulation(Boolean) + none + Calling freezeSimulation(true) immmediately stops the simulation and triggerst the stabilized event. This does not mean that the network + is physically stabilized but the nodes are not moving anymore. To continue the simulation call freezeSimulation(false). + + releaseNode() none diff --git a/examples/network/29_neighbourhood_highlight.html b/examples/network/29_neighbourhood_highlight.html index e72b4cdd..09bd570a 100644 --- a/examples/network/29_neighbourhood_highlight.html +++ b/examples/network/29_neighbourhood_highlight.html @@ -10027,7 +10027,12 @@ function redrawAll() { radiusMin: 10, radiusMax: 30, fontSize: 12, - fontFace: "Tahoma" + fontFace: "Tahoma", + scaleFontWithValue:true, + fontSizeMin:8, + fontSizeMax:20, + fontThreshold:12, + fontSizeMaxVisible:20 }, edges: { width: 0.15, @@ -10047,7 +10052,7 @@ function redrawAll() { }; network = new vis.Network(container, data, options); -// network.on("click",onClick); + network.on("click",onClick); } @@ -10071,8 +10076,6 @@ function onClick(selectedItems) { } } else { - var allEdges = edges.get(); - // we clear the level of separation in all nodes. clearLevelOfSeperation(allNodes); @@ -10083,7 +10086,7 @@ function onClick(selectedItems) { // any data can be added to a node, this is just stored in the nodeObject. storeLevelOfSeperation(connectedNodes,0, allNodes); for (var i = 1; i < degrees + 1; i++) { - appendConnectedNodes(connectedNodes, allEdges); + appendConnectedNodes(connectedNodes); storeLevelOfSeperation(connectedNodes, i, allNodes); } for (nodeId in allNodes) { @@ -10153,7 +10156,7 @@ function clearLevelOfSeperation(allNodes) { * * */ -function appendConnectedNodes(sourceNodes, allEdges) { +function appendConnectedNodes(sourceNodes) { var tempSourceNodes = []; // first we make a copy of the nodes so we do not extend the array we loop over. for (var i = 0; i < sourceNodes.length; i++) { @@ -10165,7 +10168,8 @@ function appendConnectedNodes(sourceNodes, allEdges) { if (sourceNodes.indexOf(nodeId) == -1) { sourceNodes.push(nodeId); } - addUnique(getConnectedNodes(nodeId, allEdges),sourceNodes); + var connectedNodes = network.getConnectedNodes(nodeId); + addUnique(connectedNodes,sourceNodes); } tempSourceNodes = null; } @@ -10183,27 +10187,6 @@ function addUnique(fromArray, toArray) { } } -/** - * Get a list of nodes that are connected to the supplied nodeId with edges. - * @param nodeId - * @returns {Array} - */ -function getConnectedNodes(nodeId, allEdges) { - var edgesArray = allEdges; - var connectedNodes = []; - - for (var i = 0; i < edgesArray.length; i++) { - var edge = edgesArray[i]; - if (edge.to == nodeId) { - connectedNodes.push(edge.from); - } - else if (edge.from == nodeId) { - connectedNodes.push(edge.to) - } - } - return connectedNodes; -} - redrawAll() diff --git a/lib/network/Network.js b/lib/network/Network.js index dd3b70fb..7665dbc1 100644 --- a/lib/network/Network.js +++ b/lib/network/Network.js @@ -292,7 +292,7 @@ function Network (container, data, options) { this.setOptions(options); // other vars - this.freezeSimulation = false;// freeze the simulation + this.freezeSimulationEnabled = false;// freeze the simulation this.cachedFunctions = {}; this.startedStabilization = false; this.stabilized = false; @@ -2310,7 +2310,7 @@ Network.prototype._revertPhysicsTick = function() { * @private */ Network.prototype._physicsTick = function() { - if (!this.freezeSimulation) { + if (!this.freezeSimulationEnabled) { if (this.moving == true) { var mainMovingStatus = false; var supportMovingStatus = false; @@ -2450,13 +2450,13 @@ Network.prototype._handleNavigation = function() { /** * Freeze the _animationStep */ -Network.prototype.setFreezeSimulation = function(freeze) { +Network.prototype.freezeSimulation = function(freeze) { if (freeze == true) { - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; this.moving = false; } else { - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; this.moving = true; this.start(); } diff --git a/lib/network/mixins/ManipulationMixin.js b/lib/network/mixins/ManipulationMixin.js index cd3ed4f7..cd5c0cc0 100644 --- a/lib/network/mixins/ManipulationMixin.js +++ b/lib/network/mixins/ManipulationMixin.js @@ -15,7 +15,7 @@ exports._clearManipulatorBar = function() { delete this.sectors['support']['nodes']['targetNode']; delete this.sectors['support']['nodes']['targetViaNode']; this.controlNodesActive = false; - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; }; /** @@ -84,7 +84,7 @@ exports._createManipulatorBar = function() { this._restoreOverloadedFunctions(); // resume calculation - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; // reset global variables this.blockConnectingEdgeSelection = false; @@ -254,7 +254,7 @@ exports._createAddEdgeToolbar = function() { // clear the toolbar this._clearManipulatorBar(); this._unselectAll(true); - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; if (this.boundFunction) { this.off('select', this.boundFunction); @@ -385,7 +385,7 @@ exports._selectControlNode = function(pointer) { this.selectedControlNode = this.edgeBeingEdited._getSelectedControlNode(this._XconvertDOMtoCanvas(pointer.x),this._YconvertDOMtoCanvas(pointer.y)); if (this.selectedControlNode !== null) { this.selectedControlNode.select(); - this.freezeSimulation = true; + this.freezeSimulationEnabled = true; } this._redraw(); }; @@ -429,7 +429,7 @@ exports._releaseControlNode = function(pointer) { else { this.edgeBeingEdited._restoreControlNodes(); } - this.freezeSimulation = false; + this.freezeSimulationEnabled = false; this._redraw(); };