}} selection
+ */
+ value: function getSelection() {
+ var nodeIds = this.getSelectedNodes();
+ var edgeIds = this.getSelectedEdges();
+ return { nodes: nodeIds, edges: edgeIds };
+ },
+ writable: true,
+ configurable: true
+ },
+ getSelectedNodes: {
+
+ /**
+ *
+ * retrieve the currently selected nodes
+ * @return {String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function getSelectedNodes() {
+ var idArray = [];
+ if (this.options.select == true) {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ idArray.push(nodeId);
+ }
+ }
+ }
+ return idArray;
+ },
+ writable: true,
+ configurable: true
+ },
+ getSelectedEdges: {
+
+ /**
+ *
+ * retrieve the currently selected edges
+ * @return {Array} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function getSelectedEdges() {
+ var idArray = [];
+ if (this.options.select == true) {
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ idArray.push(edgeId);
+ }
+ }
+ }
+ return idArray;
+ },
+ writable: true,
+ configurable: true
+ },
+ selectNodes: {
- this.lineTo(xe, ymb);
- this.bezierCurveTo(xe, ymb + oy, xm + ox, yeb, xm, yeb);
- this.bezierCurveTo(xm - ox, yeb, x, ymb + oy, x, ymb);
+ /**
+ * select zero or more nodes with the option to highlight edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ * @param {boolean} [highlightEdges]
+ */
+ value: function selectNodes(selection, highlightEdges) {
+ var i, iMax, id;
- this.lineTo(x, ym);
- };
+ if (!selection || selection.length == undefined) throw "Selection must be an array with ids";
+ // first unselect any selected node
+ this._unselectAll(true);
- /**
- * Draw an arrow point (no line)
- */
- CanvasRenderingContext2D.prototype.arrow = function(x, y, angle, length) {
- // tail
- var xt = x - length * Math.cos(angle);
- var yt = y - length * Math.sin(angle);
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
- // inner tail
- // TODO: allow to customize different shapes
- var xi = x - length * 0.9 * Math.cos(angle);
- var yi = y - length * 0.9 * Math.sin(angle);
+ var node = this.body.nodes[id];
+ if (!node) {
+ throw new RangeError("Node with id \"" + id + "\" not found");
+ }
+ this._selectObject(node, true, true, highlightEdges, true);
+ }
+ this.redraw();
+ },
+ writable: true,
+ configurable: true
+ },
+ selectEdges: {
- // left
- var xl = xt + length / 3 * Math.cos(angle + 0.5 * Math.PI);
- var yl = yt + length / 3 * Math.sin(angle + 0.5 * Math.PI);
- // right
- var xr = xt + length / 3 * Math.cos(angle - 0.5 * Math.PI);
- var yr = yt + length / 3 * Math.sin(angle - 0.5 * Math.PI);
+ /**
+ * select zero or more edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ value: function selectEdges(selection) {
+ var i, iMax, id;
- this.beginPath();
- this.moveTo(x, y);
- this.lineTo(xl, yl);
- this.lineTo(xi, yi);
- this.lineTo(xr, yr);
- this.closePath();
- };
+ if (!selection || selection.length == undefined) throw "Selection must be an array with ids";
- /**
- * Sets up the dashedLine functionality for drawing
- * Original code came from http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas
- * @author David Jordan
- * @date 2012-08-08
- */
- CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){
- if (!dashArray) dashArray=[10,5];
- if (dashLength==0) dashLength = 0.001; // Hack for Safari
- var dashCount = dashArray.length;
- this.moveTo(x, y);
- var dx = (x2-x), dy = (y2-y);
- var slope = dy/dx;
- var distRemaining = Math.sqrt( dx*dx + dy*dy );
- var dashIndex=0, draw=true;
- while (distRemaining>=0.1){
- var dashLength = dashArray[dashIndex++%dashCount];
- if (dashLength > distRemaining) dashLength = distRemaining;
- var xStep = Math.sqrt( dashLength*dashLength / (1 + slope*slope) );
- if (dx<0) xStep = -xStep;
- x += xStep;
- y += slope*xStep;
- this[draw ? 'lineTo' : 'moveTo'](x,y);
- distRemaining -= dashLength;
- draw = !draw;
+ // first unselect any selected node
+ this._unselectAll(true);
+
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
+
+ var edge = this.body.edges[id];
+ if (!edge) {
+ throw new RangeError("Edge with id \"" + id + "\" not found");
+ }
+ this._selectObject(edge, true, true, false, true);
+ }
+ this.redraw();
+ },
+ writable: true,
+ configurable: true
+ },
+ _updateSelection: {
+
+ /**
+ * Validate the selection: remove ids of nodes which no longer exist
+ * @private
+ */
+ value: function _updateSelection() {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ if (!this.body.nodes.hasOwnProperty(nodeId)) {
+ delete this.selectionObj.nodes[nodeId];
+ }
+ }
+ }
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ if (!this.body.edges.hasOwnProperty(edgeId)) {
+ delete this.selectionObj.edges[edgeId];
+ }
+ }
+ }
+ },
+ writable: true,
+ configurable: true
}
- };
+ });
- // TODO: add diamond shape
- }
+ return SelectionHandler;
+ })();
+ exports.SelectionHandler = SelectionHandler;
+ Object.defineProperty(exports, "__esModule", {
+ value: true
+ });
/***/ }
/******/ ])
diff --git a/dist/vis.min.css b/dist/vis.min.css
index ce5ab00d..f624ec20 100644
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
@@ -1 +1 @@
-.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis.timeline.root{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right,.vis.timeline .vispanel.top{border:1px #bfbfbf}.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.top{border-left-style:solid;border-right-style:solid}.vis.timeline .background{overflow:hidden}.vis.timeline .vispanel>.content{position:relative}.vis.timeline .vispanel .shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis.timeline .vispanel .shadow.top{top:-1px;left:0}.vis.timeline .vispanel .shadow.bottom{bottom:-1px;left:0}.vis.timeline .labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel:last-child{border-bottom:none}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .labelset .vlabel .inner.hidden{padding:0}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .itemset .background,.vis.timeline .itemset .foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis.timeline .axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis.timeline .foreground .group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .foreground .group:last-child{border-bottom:none}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;padding:5px}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:2}.vis.timeline .editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.background{overflow:hidden;border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis.timeline .item.range .content{position:relative;display:inline-block;max-width:100%;overflow:hidden}.vis.timeline .item.background .content{position:absolute;display:inline-block;overflow:hidden;max-width:100%;margin:5px}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;overflow:hidden}.vis.timeline .item .delete{background:url(img/timeline/delete.png) top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize}.vis.timeline .item.range .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize}.vis.timeline .timeaxis{position:relative;overflow:hidden}.vis.timeline .timeaxis.foreground{top:0;left:0;width:100%}.vis.timeline .timeaxis.background{position:absolute;top:0;left:0;width:100%;height:100%}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;border-left:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:1}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis.timeline .vispanel.background.horizontal .grid.horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis.timeline .vispanel.background.horizontal .grid.minor{border-color:#e5e5e5}.vis.timeline .vispanel.background.horizontal .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.major.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis.timeline .dataaxis .yAxis.title.measure{padding:0;margin:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title.left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis.timeline .dataaxis .yAxis.title.right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis.timeline .legend{background-color:rgba(247,252,255,.65);padding:5px;border-color:#b3b3b3;border-style:solid;border-width:1px;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis.timeline .legendText{white-space:nowrap;display:inline-block}.vis.timeline .graphGroup0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis.timeline .graphGroup1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis.timeline .graphGroup2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis.timeline .graphGroup3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis.timeline .graphGroup4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis.timeline .graphGroup5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis.timeline .graphGroup6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis.timeline .graphGroup7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis.timeline .graphGroup8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis.timeline .graphGroup9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis.timeline .fill{fill-opacity:.1;stroke:none}.vis.timeline .bar{fill-opacity:.5;stroke-width:1px}.vis.timeline .point{stroke-width:2px;fill-opacity:1}.vis.timeline .legendBackground{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis.timeline .outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis.timeline .iconFill{fill-opacity:.3;stroke:none}div.network-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);position:absolute;left:0;top:0;width:100%;height:30px}div.network-manipulation-editMode{position:absolute;left:0;top:15px;height:30px}div.network-manipulation-closeDiv{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-manipulation-closeDiv:hover{opacity:.6}div.network-manipulationUI{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.network-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.network-manipulationUI.back{background-image:url(img/network/backIcon.png)}div.network-manipulationUI.none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.network-manipulationUI.none:active{box-shadow:1px 1px 8px transparent}div.network-manipulationUI.none{padding:0}div.network-manipulationUI.notification{margin:2px;font-weight:700}div.network-manipulationUI.add{background-image:url(img/network/addNodeIcon.png)}div.network-manipulationUI.edit{background-image:url(img/network/editIcon.png)}div.network-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}div.network-manipulationUI.connect{background-image:url(img/network/connectIcon.png)}div.network-manipulationUI.delete{background-image:url(img/network/deleteIcon.png)}div.network-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.network-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.network-navigation_wrapper{position:absolute;left:0;top:0;width:100%;height:100%}div.network-navigation{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.network-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.network-navigation.up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.network-navigation.down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.network-navigation.left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.network-navigation.right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.network-navigation.zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.network-navigation.zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.network-navigation.zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid;box-shadow:3px 3px 10px rgba(128,128,128,.5)}
\ No newline at end of file
+.vis .overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}.vis-active{box-shadow:0 0 10px #86d5f8}.vis [class*=span]{min-height:0;width:auto}.vis.timeline.root{position:relative;border:1px solid #bfbfbf;overflow:hidden;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel{position:absolute;padding:0;margin:0;box-sizing:border-box}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right,.vis.timeline .vispanel.top{border:1px #bfbfbf}.vis.timeline .vispanel.center,.vis.timeline .vispanel.left,.vis.timeline .vispanel.right{border-top-style:solid;border-bottom-style:solid;overflow:hidden}.vis.timeline .vispanel.bottom,.vis.timeline .vispanel.center,.vis.timeline .vispanel.top{border-left-style:solid;border-right-style:solid}.vis.timeline .background{overflow:hidden}.vis.timeline .vispanel>.content{position:relative}.vis.timeline .vispanel .shadow{position:absolute;width:100%;height:1px;box-shadow:0 0 10px rgba(0,0,0,.8)}.vis.timeline .vispanel .shadow.top{top:-1px;left:0}.vis.timeline .vispanel .shadow.bottom{bottom:-1px;left:0}.vis.timeline .labelset{position:relative;overflow:hidden;box-sizing:border-box}.vis.timeline .labelset .vlabel{position:relative;left:0;top:0;width:100%;color:#4d4d4d;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .labelset .vlabel:last-child{border-bottom:none}.vis.timeline .labelset .vlabel .inner{display:inline-block;padding:5px}.vis.timeline .labelset .vlabel .inner.hidden{padding:0}.vis.timeline .itemset{position:relative;padding:0;margin:0;box-sizing:border-box}.vis.timeline .itemset .background,.vis.timeline .itemset .foreground{position:absolute;width:100%;height:100%;overflow:visible}.vis.timeline .axis{position:absolute;width:100%;height:0;left:0;z-index:1}.vis.timeline .foreground .group{position:relative;box-sizing:border-box;border-bottom:1px solid #bfbfbf}.vis.timeline .foreground .group:last-child{border-bottom:none}.vis.timeline .item{position:absolute;color:#1A1A1A;border-color:#97B0F8;border-width:1px;background-color:#D5DDF6;display:inline-block;overflow:hidden}.vis.timeline .item.selected{border-color:#FFC200;background-color:#FFF785;z-index:2}.vis.timeline .editable .item.selected{cursor:move}.vis.timeline .item.point.selected{background-color:#FFF785}.vis.timeline .item.box{text-align:center;border-style:solid;border-radius:2px}.vis.timeline .item.point{background:0 0}.vis.timeline .item.dot{position:absolute;padding:0;border-width:4px;border-style:solid;border-radius:4px}.vis.timeline .item.range{border-style:solid;border-radius:2px;box-sizing:border-box}.vis.timeline .item.background{border:none;background-color:rgba(213,221,246,.4);box-sizing:border-box;padding:0;margin:0}.vis.timeline .item.range .content{position:relative;display:inline-block;max-width:100%}.vis.timeline .item.background .content{position:absolute;display:inline-block;max-width:100%;margin:5px}.vis.timeline .item.line{padding:0;position:absolute;width:0;border-left-width:1px;border-left-style:solid}.vis.timeline .item .content{white-space:nowrap;box-sizing:border-box;padding:5px}.vis.timeline .item .delete{background:url(img/timeline/delete.png) top center no-repeat;position:absolute;width:24px;height:24px;top:0;right:-24px;cursor:pointer}.vis.timeline .item.range .drag-left{position:absolute;width:24px;height:100%;top:0;left:-4px;cursor:w-resize}.vis.timeline .item.range .drag-right{position:absolute;width:24px;height:100%;top:0;right:-4px;cursor:e-resize}.vis.timeline .timeaxis{position:relative;overflow:hidden}.vis.timeline .timeaxis.foreground{top:0;left:0;width:100%}.vis.timeline .timeaxis.background{position:absolute;top:0;left:0;width:100%;height:100%}.vis.timeline .timeaxis .text{position:absolute;color:#4d4d4d;padding:3px;white-space:nowrap}.vis.timeline .timeaxis .text.measure{position:absolute;padding-left:0;padding-right:0;margin-left:0;margin-right:0;visibility:hidden}.vis.timeline .timeaxis .grid.vertical{position:absolute;border-left:1px solid}.vis.timeline .timeaxis .grid.minor{border-color:#e5e5e5}.vis.timeline .timeaxis .grid.major{border-color:#bfbfbf}.vis.timeline .currenttime{background-color:#FF7F6E;width:2px;z-index:1}.vis.timeline .customtime{background-color:#6E94FF;width:2px;cursor:move;z-index:1}.vis.timeline .vispanel.background.horizontal .grid.horizontal{position:absolute;width:100%;height:0;border-bottom:1px solid}.vis.timeline .vispanel.background.horizontal .grid.minor{border-color:#e5e5e5}.vis.timeline .vispanel.background.horizontal .grid.major{border-color:#bfbfbf}.vis.timeline .dataaxis .yAxis.major{width:100%;position:absolute;color:#4d4d4d;white-space:nowrap}.vis.timeline .dataaxis .yAxis.major.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.minor{position:absolute;width:100%;color:#bebebe;white-space:nowrap}.vis.timeline .dataaxis .yAxis.minor.measure{padding:0;margin:0;border:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title{position:absolute;color:#4d4d4d;white-space:nowrap;bottom:20px;text-align:center}.vis.timeline .dataaxis .yAxis.title.measure{padding:0;margin:0;visibility:hidden;width:auto}.vis.timeline .dataaxis .yAxis.title.left{bottom:0;-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}.vis.timeline .dataaxis .yAxis.title.right{bottom:0;-webkit-transform-origin:right bottom;-moz-transform-origin:right bottom;-ms-transform-origin:right bottom;-o-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}.vis.timeline .legend{background-color:rgba(247,252,255,.65);padding:5px;border-color:#b3b3b3;border-style:solid;border-width:1px;box-shadow:2px 2px 10px rgba(154,154,154,.55)}.vis.timeline .legendText{white-space:nowrap;display:inline-block}.vis.timeline .graphGroup0{fill:#4f81bd;fill-opacity:0;stroke-width:2px;stroke:#4f81bd}.vis.timeline .graphGroup1{fill:#f79646;fill-opacity:0;stroke-width:2px;stroke:#f79646}.vis.timeline .graphGroup2{fill:#8c51cf;fill-opacity:0;stroke-width:2px;stroke:#8c51cf}.vis.timeline .graphGroup3{fill:#75c841;fill-opacity:0;stroke-width:2px;stroke:#75c841}.vis.timeline .graphGroup4{fill:#ff0100;fill-opacity:0;stroke-width:2px;stroke:#ff0100}.vis.timeline .graphGroup5{fill:#37d8e6;fill-opacity:0;stroke-width:2px;stroke:#37d8e6}.vis.timeline .graphGroup6{fill:#042662;fill-opacity:0;stroke-width:2px;stroke:#042662}.vis.timeline .graphGroup7{fill:#00ff26;fill-opacity:0;stroke-width:2px;stroke:#00ff26}.vis.timeline .graphGroup8{fill:#f0f;fill-opacity:0;stroke-width:2px;stroke:#f0f}.vis.timeline .graphGroup9{fill:#8f3938;fill-opacity:0;stroke-width:2px;stroke:#8f3938}.vis.timeline .fill{fill-opacity:.1;stroke:none}.vis.timeline .bar{fill-opacity:.5;stroke-width:1px}.vis.timeline .point{stroke-width:2px;fill-opacity:1}.vis.timeline .legendBackground{stroke-width:1px;fill-opacity:.9;fill:#fff;stroke:#c2c2c2}.vis.timeline .outline{stroke-width:1px;fill-opacity:1;fill:#fff;stroke:#e5e5e5}.vis.timeline .iconFill{fill-opacity:.3;stroke:none}div.network-manipulationDiv{border-width:0;border-bottom:1px;border-style:solid;border-color:#d6d9d8;background:#fff;background:-moz-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(48%,#fcfcfc),color-stop(50%,#fafafa),color-stop(100%,#fcfcfc));background:-webkit-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-o-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:-ms-linear-gradient(top,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);background:linear-gradient(to bottom,#fff 0,#fcfcfc 48%,#fafafa 50%,#fcfcfc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fcfcfc', GradientType=0);position:absolute;left:0;top:0;width:100%;height:30px}div.network-manipulation-editMode{position:absolute;left:0;top:15px;height:30px}div.network-manipulation-closeDiv{position:absolute;right:0;top:0;width:30px;height:30px;background-position:20px 3px;background-repeat:no-repeat;background-image:url(img/network/cross.png);cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-manipulation-closeDiv:hover{opacity:.6}div.network-manipulationUI{position:relative;top:-7px;font-family:verdana;font-size:12px;-moz-border-radius:15px;border-radius:15px;display:inline-block;background-position:0 0;background-repeat:no-repeat;height:24px;margin:0 0 0 10px;vertical-align:middle;cursor:pointer;padding:0 8px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-manipulationUI:hover{box-shadow:1px 1px 8px rgba(0,0,0,.2)}div.network-manipulationUI:active{box-shadow:1px 1px 8px rgba(0,0,0,.5)}div.network-manipulationUI.back{background-image:url(img/network/backIcon.png)}div.network-manipulationUI.none:hover{box-shadow:1px 1px 8px transparent;cursor:default}div.network-manipulationUI.none:active{box-shadow:1px 1px 8px transparent}div.network-manipulationUI.none{padding:0}div.network-manipulationUI.notification{margin:2px;font-weight:700}div.network-manipulationUI.add{background-image:url(img/network/addNodeIcon.png)}div.network-manipulationUI.edit{background-image:url(img/network/editIcon.png)}div.network-manipulationUI.edit.editmode{background-color:#fcfcfc;border-style:solid;border-width:1px;border-color:#ccc}div.network-manipulationUI.connect{background-image:url(img/network/connectIcon.png)}div.network-manipulationUI.delete{background-image:url(img/network/deleteIcon.png)}div.network-manipulationLabel{margin:0 0 0 23px;line-height:25px}div.network-seperatorLine{display:inline-block;width:1px;height:20px;background-color:#bdbdbd;margin:5px 7px 0 15px}div.network-navigation_wrapper{position:absolute;left:0;top:0;width:100%;height:100%}div.network-navigation{width:34px;height:34px;-moz-border-radius:17px;border-radius:17px;position:absolute;display:inline-block;background-position:2px 2px;background-repeat:no-repeat;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div.network-navigation:hover{box-shadow:0 0 3px 3px rgba(56,207,21,.3)}div.network-navigation:active{box-shadow:0 0 1px 3px rgba(56,207,21,.95)}div.network-navigation.up{background-image:url(img/network/upArrow.png);bottom:50px;left:55px}div.network-navigation.down{background-image:url(img/network/downArrow.png);bottom:10px;left:55px}div.network-navigation.left{background-image:url(img/network/leftArrow.png);bottom:10px;left:15px}div.network-navigation.right{background-image:url(img/network/rightArrow.png);bottom:10px;left:95px}div.network-navigation.zoomIn{background-image:url(img/network/plus.png);bottom:10px;right:15px}div.network-navigation.zoomOut{background-image:url(img/network/minus.png);bottom:10px;right:55px}div.network-navigation.zoomExtends{background-image:url(img/network/zoomExtends.png);bottom:50px;right:15px}div.network-tooltip{position:absolute;visibility:hidden;padding:5px;white-space:nowrap;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;border:1px solid;box-shadow:3px 3px 10px rgba(128,128,128,.5)}
\ No newline at end of file
diff --git a/docs/timeline.html b/docs/timeline.html
index cc07b99a..26fcefd9 100644
--- a/docs/timeline.html
+++ b/docs/timeline.html
@@ -1401,10 +1401,10 @@ To load a locale into the Timeline not supported by default, one can add a new l
Current date today, tomorrow, yesterday, current-week, current-month, current-year
- Hours 0h, 1h, ..., 23hHours h0, h1, ..., h23
- Grouped hours 0-4h to 20-24hGrouped hours h0-h4 to h20-h24
Weekday monday, tuesday, wednesday, thursday, friday, saturday, sundayNetwork | Basic usage
+
+
+
+
+
+
+
+
diff --git a/examples/timeline/18_range_overflow.html b/examples/timeline/18_range_overflow.html
index 8f9f7506..d222fa75 100644
--- a/examples/timeline/18_range_overflow.html
+++ b/examples/timeline/18_range_overflow.html
@@ -11,7 +11,7 @@
font-family: sans-serif;
}
- .vis.timeline .item.range .content {
+ .vis.timeline .item.range {
overflow: visible;
}
@@ -22,7 +22,7 @@
In case of ranges being spread over a wide range of time, it can be interesting to have the text contents of the ranges overflow the box. This can be achieved by changing the overflow property of the contents to visible with css:
-.vis.timeline .item.range .content {
+.vis.timeline .item.range {
overflow: visible;
}
diff --git a/gulpfile.js b/gulpfile.js
index 71986d51..176b868e 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -34,7 +34,6 @@ var bannerPlugin = new webpack.BannerPlugin(createBanner(), {
raw: true
});
-// TODO: the moment.js language files should be excluded by default (they are quite big)
var webpackConfig = {
entry: ENTRY,
output: {
@@ -44,8 +43,12 @@ var webpackConfig = {
filename: VIS_JS,
sourcePrefix: ' '
},
- // exclude requires of moment.js language files
module: {
+ loaders: [
+ { test: /\.js$/, exclude: /node_modules/, loader: '6to5-loader'}
+ ],
+
+ // exclude requires of moment.js language files
wrappedContextRegExp: /$^/
},
plugins: [ bannerPlugin ],
diff --git a/lib/DataSet.js b/lib/DataSet.js
index ccb2c2d6..fff1b989 100644
--- a/lib/DataSet.js
+++ b/lib/DataSet.js
@@ -153,9 +153,7 @@ DataSet.prototype.subscribe = DataSet.prototype.on;
DataSet.prototype.off = function(event, callback) {
var subscribers = this._subscribers[event];
if (subscribers) {
- this._subscribers[event] = subscribers.filter(function (listener) {
- return (listener.callback != callback);
- });
+ this._subscribers[event] = subscribers.filter(listener => listener.callback != callback);
}
};
diff --git a/lib/network/Edge.js b/lib/network/Edge.js
index ccb091c1..b91697d0 100644
--- a/lib/network/Edge.js
+++ b/lib/network/Edge.js
@@ -16,18 +16,16 @@ var Node = require('./Node');
* @param {Object} constants An object with default values for
* example for the color
*/
-function Edge (properties, network, networkConstants) {
- if (!network) {
- throw "No network provided";
+function Edge (properties, body, networkConstants) {
+ if (body === undefined) {
+ throw "No body provided";
}
- var fields = ['edges','physics'];
+ var fields = ['edges'];
var constants = util.selectiveBridgeObject(fields,networkConstants);
this.options = constants.edges;
- this.physics = constants.physics;
- this.options['smoothCurves'] = networkConstants['smoothCurves'];
-
- this.network = network;
+ this.options['smoothCurves'] = networkConstants['smoothCurves'];
+ this.body = body;
// initialize variables
this.id = undefined;
@@ -46,13 +44,13 @@ function Edge (properties, network, networkConstants) {
this.to = null; // a node
this.via = null; // a temp node
- this.fromBackup = null; // used to clean up after reconnect
- this.toBackup = null;; // used to clean up after reconnect
+ this.fromBackup = null; // used to clean up after reconnect (used for manipulation)
+ this.toBackup = null; // used to clean up after reconnect (used for manipulation)
// we use this to be able to reconnect the edge to a cluster if its node is put into a cluster
// by storing the original information we can revert to the original connection when the cluser is opened.
- this.originalFromId = [];
- this.originalToId = [];
+ this.fromArray = [];
+ this.toArray = [];
this.connected = false;
@@ -76,10 +74,11 @@ Edge.prototype.setProperties = function(properties) {
if (!properties) {
return;
}
+ this.properties = properties;
var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity',
- 'customScalingFunction','useGradients'
+ 'customScalingFunction','useGradients','value'
];
util.selectiveDeepExtend(fields, this.options, properties);
@@ -106,9 +105,7 @@ Edge.prototype.setProperties = function(properties) {
}
}
-
-
- // A node is connected when it has a from and to node.
+ // A node is connected when it has a from and to node that both exist in the network.body.nodes.
this.connect();
this.widthFixed = this.widthFixed || (properties.width !== undefined);
@@ -133,11 +130,11 @@ Edge.prototype.setProperties = function(properties) {
Edge.prototype.connect = function () {
this.disconnect();
- this.from = this.network.nodes[this.fromId] || null;
- this.to = this.network.nodes[this.toId] || null;
- this.connected = (this.from && this.to);
+ this.from = this.body.nodes[this.fromId] || null;
+ this.to = this.body.nodes[this.toId] || null;
+ this.connected = (this.from !== null && this.to !== null);
- if (this.connected) {
+ if (this.connected === true) {
this.from.attachEdge(this);
this.to.attachEdge(this);
}
@@ -259,6 +256,7 @@ Edge.prototype._getColor = function(ctx) {
}
if (this.colorDirty === true) {
+
if (this.options.inheritColor == "to") {
colorObj = {
highlight: this.to.options.color.highlight.border,
diff --git a/lib/network/Network.js b/lib/network/Network.js
index 7b011750..76d1cb14 100644
--- a/lib/network/Network.js
+++ b/lib/network/Network.js
@@ -19,6 +19,13 @@ var locales = require('./locales');
// Load custom shapes into CanvasRenderingContext2D
require('./shapes');
+import { PhysicsEngine } from './modules/PhysicsEngine'
+import { ClusterEngine } from './modules/Clustering'
+import { CanvasRenderer } from './modules/CanvasRenderer'
+import { Canvas } from './modules/Canvas'
+import { View } from './modules/View'
+import { TouchEventHandler } from './modules/TouchEventHandler'
+
/**
* @constructor Network
* Create a network visualization, displaying nodes and edges.
@@ -35,20 +42,10 @@ function Network (container, data, options) {
throw new SyntaxError('Constructor must be called with the new operator');
}
- this._determineBrowserMethod();
this._initializeMixinLoaders();
- // create variables and set default values
- this.containerElement = container;
// render and calculation settings
- this.renderRefreshRate = 60; // hz (fps)
- this.renderTimestep = 1000 / this.renderRefreshRate; // ms -- saves calculation later on
- this.renderTime = 0; // measured time it takes to render a frame
- this.physicsTime = 0; // measured time it takes to render a frame
- this.runDoubleSpeed = false;
- this.physicsDiscreteStepsize = 0.50; // discrete stepsize of the simulation
-
this.initializing = true;
this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
@@ -62,6 +59,7 @@ function Network (container, data, options) {
return Math.max(0,(value - min)*scale);
}
};
+
// set constant values
this.defaultOptions = {
nodes: {
@@ -85,6 +83,7 @@ function Network (container, data, options) {
fontSizeMin: 14,
fontSizeMax: 30,
fontSizeMaxVisible: 30,
+ value: 1,
level: -1,
color: {
border: '#2B7CE9',
@@ -109,6 +108,7 @@ function Network (container, data, options) {
width: 1,
widthSelectionMultiplier: 2,
hoverWidth: 1.5,
+ value:1,
style: 'line',
color: {
color:'#848484',
@@ -133,58 +133,6 @@ function Network (container, data, options) {
useGradients: false // release in 4.0
},
configurePhysics:false,
- physics: {
- barnesHut: {
- enabled: true,
- thetaInverted: 1 / 0.5, // inverted to save time during calculation
- gravitationalConstant: -2000,
- centralGravity: 0.3,
- springLength: 95,
- springConstant: 0.04,
- damping: 0.09
- },
- repulsion: {
- centralGravity: 0.0,
- springLength: 200,
- springConstant: 0.05,
- nodeDistance: 100,
- damping: 0.09
- },
- hierarchicalRepulsion: {
- enabled: false,
- centralGravity: 0.0,
- springLength: 100,
- springConstant: 0.01,
- nodeDistance: 150,
- damping: 0.09
- },
- damping: null,
- centralGravity: null,
- springLength: null,
- springConstant: null
- },
- clustering: { // Per Node in Cluster = PNiC
- enabled: false, // (Boolean) | global on/off switch for clustering.
- initialMaxNodes: 100, // (# nodes) | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
- clusterThreshold:500, // (# nodes) | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
- reduceToNodes:300, // (# nodes) | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
- chainThreshold: 0.4, // (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
- clusterEdgeThreshold: 20, // (px) | edge length threshold. if smaller, this node is clustered.
- sectorThreshold: 100, // (# nodes in cluster) | cluster size threshold. If larger, expanding in own sector.
- screenSizeThreshold: 0.2, // (% of canvas) | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
- fontSizeMultiplier: 4.0, // (px PNiC) | how much the cluster font size grows per node in cluster (in px).
- maxFontSize: 1000,
- forceAmplification: 0.1, // (multiplier PNiC) | factor of increase fo the repulsion force of a cluster (per node in cluster).
- distanceAmplification: 0.1, // (multiplier PNiC) | factor how much the repulsion distance of a cluster increases (per node in cluster).
- edgeGrowth: 20, // (px PNiC) | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
- nodeScaling: {width: 1, // (px PNiC) | growth of the width per node in cluster.
- height: 1, // (px PNiC) | growth of the height per node in cluster.
- radius: 1}, // (px PNiC) | growth of the radius per node in cluster.
- maxNodeSizeIncrements: 600, // (# increments) | max growth of the width per node in cluster.
- activeAreaBoxSize: 80, // (px) | box area around the curser where clusters are popped open.
- clusterLevelDifference: 2, // used for normalization of the cluster levels
- clusterByZoom: true // enable clustering through zooming in and out
- },
navigation: {
enabled: false
},
@@ -204,18 +152,13 @@ function Network (container, data, options) {
direction: "UD", // UD, DU, LR, RL
layout: "hubsize" // hubsize, directed
},
- freezeForStabilization: false,
+
smoothCurves: {
enabled: true,
dynamic: true,
type: "continuous",
roundness: 0.5
},
- maxVelocity: 50,
- minVelocity: 0.1, // px/s
- stabilize: true, // stabilize before displaying the network
- stabilizationIterations: 1000, // maximum number of iteration to stabilize
- zoomExtentOnStabilize: true,
locale: 'en',
locales: locales,
tooltip: {
@@ -240,34 +183,67 @@ function Network (container, data, options) {
useDefaultGroups: true
};
this.constants = util.extend({}, this.defaultOptions);
- this.pixelRatio = 1;
-
-
+
+ // containers for nodes and edges
+ this.body = {
+ nodes: {},
+ nodeIndices: [],
+ supportNodes: {},
+ supportNodeIndices: [],
+ edges: {},
+ data: {
+ nodes: null, // A DataSet or DataView
+ edges: null // A DataSet or DataView
+ },
+ functions:{
+ createNode: this._createNode.bind(this),
+ createEdge: this._createEdge.bind(this)
+ },
+ emitter: {
+ on: this.on.bind(this),
+ off: this.off.bind(this),
+ emit: this.emit.bind(this),
+ once: this.once.bind(this)
+ },
+ eventListeners: {
+ onTap: function() {},
+ onTouch: function() {},
+ onDoubleTap: function() {},
+ onHold: function() {},
+ onDragStart: function() {},
+ onDrag: function() {},
+ onDragEnd: function() {},
+ onMouseWheel: function() {},
+ onPinch: function() {},
+ onMouseMove: function() {},
+ onRelease: function() {}
+ },
+ container: container
+ };
+
+ // modules
+ this.view = new View(this.body);
+ this.renderer = new CanvasRenderer(this.body);
+ this.clustering = new ClusterEngine(this.body);
+ this.physics = new PhysicsEngine(this.body);
+ this.canvas = new Canvas(this.body);
+ this.touchHandler = new TouchEventHandler(this.body);
+
+ this.renderer.setCanvas(this.canvas);
+ this.view.setCanvas(this.canvas);
+ this.touchHandler.setCanvas(this.canvas);
+
this.hoverObj = {nodes:{},edges:{}};
this.controlNodesActive = false;
this.navigationHammers = [];
this.manipulationHammers = [];
- // animation properties
- this.animationSpeed = 1/this.renderRefreshRate;
- this.animationEasingFunction = "easeInOutQuint";
- this.animating = false;
- this.easingTime = 0;
- this.sourceScale = 0;
- this.targetScale = 0;
- this.sourceTranslation = 0;
- this.targetTranslation = 0;
- this.lockedOnNodeId = null;
- this.lockedOnNodeOffset = null;
- this.touchTime = 0;
- this.redrawRequested = false;
-
// Node variables
- var network = this;
+ var me = this;
this.groups = new Groups(); // object with groups
this.images = new Images(); // object with images
this.images.setOnloadCallback(function (status) {
- network._requestRedraw();
+ me._requestRedraw();
});
// keyboard navigation variables
@@ -277,90 +253,68 @@ function Network (container, data, options) {
// loading all the mixins:
// load the force calculation functions, grouped under the physics system.
- this._loadPhysicsSystem();
+ //this._loadPhysicsSystem();
// create a frame and canvas
- this._create();
- // load the sector system. (mandatory, fully integrated with Network)
- this._loadSectorSystem();
// load the cluster system. (mandatory, even when not using the cluster system, there are function calls to it)
- this._loadClusterSystem();
// load the selection system. (mandatory, required by Network)
this._loadSelectionSystem();
// load the selection system. (mandatory, required by Network)
- this._loadHierarchySystem();
-
+ //this._loadHierarchySystem();
// apply options
- this._setTranslation(this.frame.clientWidth / 2, this.frame.clientHeight / 2);
- this._setScale(1);
this.setOptions(options);
// other vars
- this.freezeSimulationEnabled = false;// freeze the simulation
this.cachedFunctions = {};
this.startedStabilization = false;
this.stabilized = false;
this.stabilizationIterations = null;
this.draggingNodes = false;
- // containers for nodes and edges
- this.calculationNodes = {};
- this.calculationNodeIndices = [];
- this.nodeIndices = []; // array with all the indices of the nodes. Used to speed up forces calculation
- this.nodes = {}; // object with Node objects
- this.edges = {}; // object with Edge objects
-
// position and scale variables and objects
- this.canvasTopLeft = {"x": 0,"y": 0}; // coordinates of the top left of the canvas. they will be set during _redraw.
- this.canvasBottomRight = {"x": 0,"y": 0}; // coordinates of the bottom right of the canvas. they will be set during _redraw
+
this.pointerPosition = {"x": 0,"y": 0}; // coordinates of the bottom right of the canvas. they will be set during _redraw
- this.areaCenter = {}; // object with x and y elements used for determining the center of the zoom action
this.scale = 1; // defining the global scale variable in the constructor
- this.previousScale = this.scale; // this is used to check if the zoom operation is zooming in or out
-
- // datasets or dataviews
- this.nodesData = null; // A DataSet or DataView
- this.edgesData = null; // A DataSet or DataView
// create event listeners used to subscribe on the DataSets of the nodes and edges
this.nodesListeners = {
'add': function (event, params) {
- network._addNodes(params.items);
- network.start();
+ me._addNodes(params.items);
+ me.start();
},
'update': function (event, params) {
- network._updateNodes(params.items, params.data);
- network.start();
+ me._updateNodes(params.items, params.data);
+ me.start();
},
'remove': function (event, params) {
- network._removeNodes(params.items);
- network.start();
+ me._removeNodes(params.items);
+ me.start();
}
};
this.edgesListeners = {
'add': function (event, params) {
- network._addEdges(params.items);
- network.start();
+ me._addEdges(params.items);
+ me.start();
},
'update': function (event, params) {
- network._updateEdges(params.items);
- network.start();
+ me._updateEdges(params.items);
+ me.start();
},
'remove': function (event, params) {
- network._removeEdges(params.items);
- network.start();
+ me._removeEdges(params.items);
+ me.start();
}
};
+
// properties for the animation
this.moving = true;
- this.timer = undefined; // Scheduling function. Is definded in this.start();
+ this.renderTimer = undefined; // Scheduling function. Is definded in this.start();
// load data (the disable start variable will be the same as the enabled clustering)
- this.setData(data,this.constants.clustering.enabled || this.constants.hierarchicalLayout.enabled);
+ this.setData(data, this.constants.hierarchicalLayout.enabled);
// hierarchical layout
- this.initializing = false;
if (this.constants.hierarchicalLayout.enabled == true) {
this._setupHierarchicalLayout();
}
@@ -371,224 +325,48 @@ function Network (container, data, options) {
}
}
- // if clustering is disabled, the simulation will have started in the setData function
- if (this.constants.clustering.enabled) {
- this.startWithClustering();
+ if (this.constants.stabilize == false) {
+ this.initializing = false;
}
+
+ var me = this;
+ // this event will trigger a rebuilding of the cache of colors, nodes etc.
+ this.on("_dataChanged", function () {
+ me._updateNodeIndexList();
+ me.physics._updateCalculationNodes();
+ me._markAllEdgesAsDirty();
+ if (me.initializing !== true) {
+ me.moving = true;
+ me.start();
+ }
+ })
+
+ this.on("_newEdgesCreated", this._createBezierNodes.bind(this));
+ //this.on("stabilizationIterationsDone", function () {me.initializing = false; me.start();}.bind(this));
}
// Extend Network with an Emitter mixin
Emitter(Network.prototype);
-/**
- * Determine if the browser requires a setTimeout or a requestAnimationFrame. This was required because
- * some implementations (safari and IE9) did not support requestAnimationFrame
- * @private
- */
-Network.prototype._determineBrowserMethod = function() {
- var browserType = navigator.userAgent.toLowerCase();
- this.requiresTimeout = false;
- if (browserType.indexOf('msie 9.0') != -1) { // IE 9
- this.requiresTimeout = true;
- }
- else if (browserType.indexOf('safari') != -1) { // safari
- if (browserType.indexOf('chrome') <= -1) {
- this.requiresTimeout = true;
- }
- }
-}
-
-
-/**
- * Get the script path where the vis.js library is located
- *
- * @returns {string | null} path Path or null when not found. Path does not
- * end with a slash.
- * @private
- */
-Network.prototype._getScriptPath = function() {
- var scripts = document.getElementsByTagName( 'script' );
-
- // find script named vis.js or vis.min.js
- for (var i = 0; i < scripts.length; i++) {
- var src = scripts[i].src;
- var match = src && /\/?vis(.min)?\.js$/.exec(src);
- if (match) {
- // return path without the script name
- return src.substring(0, src.length - match[0].length);
- }
- }
-
- return null;
-};
-
-
-/**
- * Find the center position of the network
- * @private
- */
-Network.prototype._getRange = function(specificNodes) {
- var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
- if (specificNodes.length > 0) {
- for (var i = 0; i < specificNodes.length; i++) {
- node = this.nodes[specificNodes[i]];
- if (minX > (node.boundingBox.left)) {
- minX = node.boundingBox.left;
- }
- if (maxX < (node.boundingBox.right)) {
- maxX = node.boundingBox.right;
- }
- if (minY > (node.boundingBox.bottom)) {
- minY = node.boundingBox.top;
- } // top is negative, bottom is positive
- if (maxY < (node.boundingBox.top)) {
- maxY = node.boundingBox.bottom;
- } // top is negative, bottom is positive
- }
- }
- else {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (minX > (node.boundingBox.left)) {
- minX = node.boundingBox.left;
- }
- if (maxX < (node.boundingBox.right)) {
- maxX = node.boundingBox.right;
- }
- if (minY > (node.boundingBox.bottom)) {
- minY = node.boundingBox.top;
- } // top is negative, bottom is positive
- if (maxY < (node.boundingBox.top)) {
- maxY = node.boundingBox.bottom;
- } // top is negative, bottom is positive
- }
- }
- }
-
- if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
- minY = 0, maxY = 0, minX = 0, maxX = 0;
- }
- return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
-};
-
-/**
- * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
- * @returns {{x: number, y: number}}
- * @private
- */
-Network.prototype._findCenter = function(range) {
- return {x: (0.5 * (range.maxX + range.minX)),
- y: (0.5 * (range.maxY + range.minY))};
-};
-
-
-/**
- * This function zooms out to fit all data on screen based on amount of nodes
- *
- * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
- * @param {Boolean} [disableStart] | If true, start is not called.
- */
-Network.prototype.zoomExtent = function(options, initialZoom, disableStart) {
- this._redraw(true);
-
- if (initialZoom === undefined) {initialZoom = false;}
- if (disableStart === undefined) {disableStart = false;}
- if (options === undefined) {options = {nodes:[]};}
- if (options.nodes === undefined) {
- options.nodes = [];
- }
-
- var range;
- var zoomLevel;
-
- if (initialZoom == true) {
- // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
- var positionDefined = 0;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.predefinedPosition == true) {
- positionDefined += 1;
- }
- }
- }
- if (positionDefined > 0.5 * this.nodeIndices.length) {
- this.zoomExtent(options,false,disableStart);
- return;
- }
-
- range = this._getRange(options.nodes);
-
- var numberOfNodes = this.nodeIndices.length;
- if (this.constants.smoothCurves == true) {
- if (this.constants.clustering.enabled == true &&
- numberOfNodes >= this.constants.clustering.initialMaxNodes) {
- zoomLevel = 49.07548 / (numberOfNodes + 142.05338) + 9.1444e-04; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- else {
- zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- }
- else {
- if (this.constants.clustering.enabled == true &&
- numberOfNodes >= this.constants.clustering.initialMaxNodes) {
- zoomLevel = 77.5271985 / (numberOfNodes + 187.266146) + 4.76710517e-05; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- else {
- zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
- }
- }
-
- // correct for larger canvasses.
- var factor = Math.min(this.frame.canvas.clientWidth / 600, this.frame.canvas.clientHeight / 600);
- zoomLevel *= factor;
- }
- else {
- range = this._getRange(options.nodes);
- var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
- var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
-
- var xZoomLevel = this.frame.canvas.clientWidth / xDistance;
- var yZoomLevel = this.frame.canvas.clientHeight / yDistance;
- zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
- }
+Network.prototype._createNode = function(properties) {
+ return new Node(properties, this.images, this.groups, this.constants)
+}
- if (zoomLevel > 1.0) {
- zoomLevel = 1.0;
- }
+Network.prototype._createEdge = function(properties) {
+ return new Edge(properties, this.body, this.constants)
+}
- var center = this._findCenter(range);
- if (disableStart == false) {
- var options = {position: center, scale: zoomLevel, animation: options};
- this.moveTo(options);
- this.moving = true;
- this.start();
- }
- else {
- center.x *= zoomLevel;
- center.y *= zoomLevel;
- center.x -= 0.5 * this.frame.canvas.clientWidth;
- center.y -= 0.5 * this.frame.canvas.clientHeight;
- this._setScale(zoomLevel);
- this._setTranslation(-center.x,-center.y);
- }
-};
/**
- * Update the this.nodeIndices with the most recent node index list
+ * Update the this.body.nodeIndices with the most recent node index list
* @private
*/
Network.prototype._updateNodeIndexList = function() {
- this._clearNodeIndexList();
- for (var idx in this.nodes) {
- if (this.nodes.hasOwnProperty(idx)) {
- this.nodeIndices.push(idx);
- }
- }
+ this.body.supportNodeIndices = Object.keys(this.body.supportNodes)
+ this.body.nodeIndices = Object.keys(this.body.nodes);
};
@@ -647,7 +425,7 @@ Network.prototype.setData = function(data, disableStart) {
this._setNodes(data && data.nodes);
this._setEdges(data && data.edges);
}
- this._putDataInSector();
+
if (disableStart == false) {
if (this.constants.hierarchicalLayout.enabled == true) {
this._resetLevels();
@@ -655,13 +433,12 @@ Network.prototype.setData = function(data, disableStart) {
}
else {
// find a stable position or start animating to a stable position
- if (this.constants.stabilize == true) {
- this._stabilize();
- }
+ this.physics.startSimulation()
}
- this.start();
}
- this.initializing = false;
+ else {
+ this.initializing = false;
+ }
};
/**
@@ -671,7 +448,7 @@ Network.prototype.setData = function(data, disableStart) {
Network.prototype.setOptions = function (options) {
if (options) {
var prop;
- var fields = ['nodes','edges','smoothCurves','hierarchicalLayout','clustering','navigation',
+ var fields = ['nodes','edges','smoothCurves','hierarchicalLayout','navigation',
'keyboard','dataManipulation','onAdd','onEdit','onEditEdge','onConnect','onDelete','clickToUse'
];
// extend all but the values in fields
@@ -680,27 +457,16 @@ Network.prototype.setOptions = function (options) {
util.selectiveNotDeepExtend(['color','length'],this.constants.edges, options.edges);
this.groups.useDefaultGroups = this.constants.useDefaultGroups;
- if (options.physics) {
- util.mergeOptions(this.constants.physics, options.physics,'barnesHut');
- util.mergeOptions(this.constants.physics, options.physics,'repulsion');
-
- if (options.physics.hierarchicalRepulsion) {
- this.constants.hierarchicalLayout.enabled = true;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this.constants.physics.barnesHut.enabled = false;
- for (prop in options.physics.hierarchicalRepulsion) {
- if (options.physics.hierarchicalRepulsion.hasOwnProperty(prop)) {
- this.constants.physics.hierarchicalRepulsion[prop] = options.physics.hierarchicalRepulsion[prop];
- }
- }
- }
- }
- if (options.onAdd) {this.triggerFunctions.add = options.onAdd;}
- if (options.onEdit) {this.triggerFunctions.edit = options.onEdit;}
+ this.physics.setOptions(options.physics);
+ this.canvas.setOptions(this.constants);
+
+
+ if (options.onAdd) {this.triggerFunctions.add = options.onAdd;}
+ if (options.onEdit) {this.triggerFunctions.edit = options.onEdit;}
if (options.onEditEdge) {this.triggerFunctions.editEdge = options.onEditEdge;}
- if (options.onConnect) {this.triggerFunctions.connect = options.onConnect;}
- if (options.onDelete) {this.triggerFunctions.del = options.onDelete;}
+ if (options.onConnect) {this.triggerFunctions.connect = options.onConnect;}
+ if (options.onDelete) {this.triggerFunctions.del = options.onDelete;}
util.mergeOptions(this.constants, options,'smoothCurves');
util.mergeOptions(this.constants, options,'hierarchicalLayout');
@@ -790,175 +556,89 @@ Network.prototype.setOptions = function (options) {
throw new Error('Option "labels" is deprecated. Use options "locale" and "locales" instead.');
}
-
// (Re)loading the mixins that can be enabled or disabled in the options.
// load the force calculation functions, grouped under the physics system.
- this._loadPhysicsSystem();
// load the navigation system.
- this._loadNavigationControls();
- // load the data manipulation system
- this._loadManipulationSystem();
- // configure the smooth curves
- this._configureSmoothCurves();
+ //this._loadNavigationControls();
+ //// load the data manipulation system
+ //this._loadManipulationSystem();
+ //// configure the smooth curves
+ //this._configureSmoothCurves();
// bind hammer
- this._bindHammer();
+ this.canvas._bindHammer();
// bind keys. If disabled, this will not do anything;
- this._createKeyBinds();
+ //this._createKeyBinds();
this._markAllEdgesAsDirty();
- this.setSize(this.constants.width, this.constants.height);
- this.moving = true;
+ this.canvas.setSize(this.constants.width, this.constants.height);
if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
this._resetLevels();
this._setupHierarchicalLayout();
}
- this.start();
- }
-};
-
-
-
-/**
- * Create the main frame for the Network.
- * This function is executed once when a Network object is created. The frame
- * contains a canvas, and this canvas contains all objects like the axis and
- * nodes.
- * @private
- */
-Network.prototype._create = function () {
- // remove all elements from the container element.
- while (this.containerElement.hasChildNodes()) {
- this.containerElement.removeChild(this.containerElement.firstChild);
- }
-
- this.frame = document.createElement('div');
- this.frame.className = 'vis network-frame';
- this.frame.style.position = 'relative';
- this.frame.style.overflow = 'hidden';
- this.frame.tabIndex = 900;
-
-
-//////////////////////////////////////////////////////////////////
-
- this.frame.canvas = document.createElement("canvas");
- this.frame.canvas.style.position = 'relative';
- this.frame.appendChild(this.frame.canvas);
-
- if (!this.frame.canvas.getContext) {
- var noCanvas = document.createElement( 'DIV' );
- noCanvas.style.color = 'red';
- noCanvas.style.fontWeight = 'bold' ;
- noCanvas.style.padding = '10px';
- noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
- this.frame.canvas.appendChild(noCanvas);
- }
- else {
- var ctx = this.frame.canvas.getContext("2d");
- this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
- ctx.mozBackingStorePixelRatio ||
- ctx.msBackingStorePixelRatio ||
- ctx.oBackingStorePixelRatio ||
- ctx.backingStorePixelRatio || 1);
- //this.pixelRatio = Math.max(1,this.pixelRatio); // this is to account for browser zooming out. The pixel ratio is ment to switch between 1 and 2 for HD screens.
- this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+ if (this.initializing !== true) {
+ this.moving = true;
+ this.start();
+ }
}
-
- this._bindHammer();
};
-/**
- * This function binds hammer, it can be repeated over and over due to the uniqueness check.
- * @private
- */
-Network.prototype._bindHammer = function() {
- var me = this;
- if (this.hammer !== undefined) {
- this.hammer.dispose();
- }
- this.drag = {};
- this.pinch = {};
- this.hammer = Hammer(this.frame.canvas, {
- prevent_default: true
- });
- this.hammer.on('tap', me._onTap.bind(me) );
- this.hammer.on('doubletap', me._onDoubleTap.bind(me) );
- this.hammer.on('hold', me._onHold.bind(me) );
- this.hammer.on('touch', me._onTouch.bind(me) );
- this.hammer.on('dragstart', me._onDragStart.bind(me) );
- this.hammer.on('drag', me._onDrag.bind(me) );
- this.hammer.on('dragend', me._onDragEnd.bind(me) );
-
- if (this.constants.zoomable == true) {
- this.hammer.on('mousewheel', me._onMouseWheel.bind(me));
- this.hammer.on('DOMMouseScroll', me._onMouseWheel.bind(me)); // for FF
- this.hammer.on('pinch', me._onPinch.bind(me) );
- }
-
- this.hammer.on('mousemove', me._onMouseMoveTitle.bind(me) );
-
- this.hammerFrame = Hammer(this.frame, {
- prevent_default: true
- });
- this.hammerFrame.on('release', me._onRelease.bind(me) );
-
- // add the frame to the container element
- this.containerElement.appendChild(this.frame);
-}
/**
* Binding the keys for keyboard navigation. These functions are defined in the NavigationMixin
* @private
*/
Network.prototype._createKeyBinds = function() {
- var me = this;
- if (this.keycharm !== undefined) {
- this.keycharm.destroy();
- }
-
- if (this.constants.keyboard.bindToWindow == true) {
- this.keycharm = keycharm({container: window, preventDefault: false});
- }
- else {
- this.keycharm = keycharm({container: this.frame, preventDefault: false});
- }
-
- this.keycharm.reset();
-
- if (this.constants.keyboard.enabled && this.isActive()) {
- this.keycharm.bind("up", this._moveUp.bind(me) , "keydown");
- this.keycharm.bind("up", this._yStopMoving.bind(me), "keyup");
- this.keycharm.bind("down", this._moveDown.bind(me) , "keydown");
- this.keycharm.bind("down", this._yStopMoving.bind(me), "keyup");
- this.keycharm.bind("left", this._moveLeft.bind(me) , "keydown");
- this.keycharm.bind("left", this._xStopMoving.bind(me), "keyup");
- this.keycharm.bind("right",this._moveRight.bind(me), "keydown");
- this.keycharm.bind("right",this._xStopMoving.bind(me), "keyup");
- this.keycharm.bind("=", this._zoomIn.bind(me), "keydown");
- this.keycharm.bind("=", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("num+", this._zoomIn.bind(me), "keydown");
- this.keycharm.bind("num+", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("num-", this._zoomOut.bind(me), "keydown");
- this.keycharm.bind("num-", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("-", this._zoomOut.bind(me), "keydown");
- this.keycharm.bind("-", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("[", this._zoomIn.bind(me), "keydown");
- this.keycharm.bind("[", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("]", this._zoomOut.bind(me), "keydown");
- this.keycharm.bind("]", this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("pageup",this._zoomIn.bind(me), "keydown");
- this.keycharm.bind("pageup",this._stopZoom.bind(me), "keyup");
- this.keycharm.bind("pagedown",this._zoomOut.bind(me),"keydown");
- this.keycharm.bind("pagedown",this._stopZoom.bind(me), "keyup");
- }
-
- if (this.constants.dataManipulation.enabled == true) {
- this.keycharm.bind("esc",this._createManipulatorBar.bind(me));
- this.keycharm.bind("delete",this._deleteSelected.bind(me));
- }
+ return;
+
+ //var me = this;
+ //if (this.keycharm !== undefined) {
+ // this.keycharm.destroy();
+ //}
+ //
+ //if (this.constants.keyboard.bindToWindow == true) {
+ // this.keycharm = keycharm({container: window, preventDefault: false});
+ //}
+ //else {
+ // this.keycharm = keycharm({container: this.frame, preventDefault: false});
+ //}
+ //
+ //this.keycharm.reset();
+ //
+ //if (this.constants.keyboard.enabled && this.isActive()) {
+ // this.keycharm.bind("up", this._moveUp.bind(me) , "keydown");
+ // this.keycharm.bind("up", this._yStopMoving.bind(me), "keyup");
+ // this.keycharm.bind("down", this._moveDown.bind(me) , "keydown");
+ // this.keycharm.bind("down", this._yStopMoving.bind(me), "keyup");
+ // this.keycharm.bind("left", this._moveLeft.bind(me) , "keydown");
+ // this.keycharm.bind("left", this._xStopMoving.bind(me), "keyup");
+ // this.keycharm.bind("right",this._moveRight.bind(me), "keydown");
+ // this.keycharm.bind("right",this._xStopMoving.bind(me), "keyup");
+ // this.keycharm.bind("=", this._zoomIn.bind(me), "keydown");
+ // this.keycharm.bind("=", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("num+", this._zoomIn.bind(me), "keydown");
+ // this.keycharm.bind("num+", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("num-", this._zoomOut.bind(me), "keydown");
+ // this.keycharm.bind("num-", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("-", this._zoomOut.bind(me), "keydown");
+ // this.keycharm.bind("-", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("[", this._zoomIn.bind(me), "keydown");
+ // this.keycharm.bind("[", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("]", this._zoomOut.bind(me), "keydown");
+ // this.keycharm.bind("]", this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("pageup",this._zoomIn.bind(me), "keydown");
+ // this.keycharm.bind("pageup",this._stopZoom.bind(me), "keyup");
+ // this.keycharm.bind("pagedown",this._zoomOut.bind(me),"keydown");
+ // this.keycharm.bind("pagedown",this._stopZoom.bind(me), "keyup");
+ //}
+ //
+ //if (this.constants.dataManipulation.enabled == true) {
+ // this.keycharm.bind("esc",this._createManipulatorBar.bind(me));
+ // this.keycharm.bind("delete",this._deleteSelected.bind(me));
+ //}
};
/**
@@ -970,7 +650,7 @@ Network.prototype._createKeyBinds = function() {
Network.prototype.destroy = function() {
this.start = function () {};
this.redraw = function () {};
- this.timer = false;
+ this.renderTimer = false;
// cleanup physicsConfiguration if it exists
this._cleanupPhysicsConfiguration();
@@ -995,529 +675,91 @@ Network.prototype._recursiveDOMDelete = function(DOMobject) {
}
/**
- * Get the pointer location from a touch location
- * @param {{pageX: Number, pageY: Number}} touch
- * @return {{x: Number, y: Number}} pointer
+ * Check if there is an element on the given position in the network
+ * (a node or edge). If so, and if this element has a title,
+ * show a popup window with its title.
+ *
+ * @param {{x:Number, y:Number}} pointer
* @private
*/
-Network.prototype._getPointer = function (touch) {
- return {
- x: touch.pageX - util.getAbsoluteLeft(this.frame.canvas),
- y: touch.pageY - util.getAbsoluteTop(this.frame.canvas)
+Network.prototype._checkShowPopup = function (pointer) {
+ var obj = {
+ left: this._XconvertDOMtoCanvas(pointer.x),
+ top: this._YconvertDOMtoCanvas(pointer.y),
+ right: this._XconvertDOMtoCanvas(pointer.x),
+ bottom: this._YconvertDOMtoCanvas(pointer.y)
};
-};
-/**
- * On start of a touch gesture, store the pointer
- * @param event
- * @private
- */
-Network.prototype._onTouch = function (event) {
- if (new Date().valueOf() - this.touchTime > 100) {
- this.drag.pointer = this._getPointer(event.gesture.center);
- this.drag.pinched = false;
- this.pinch.scale = this._getScale();
+ var id;
+ var previousPopupObjId = this.popupObj === undefined ? "" : this.popupObj.id;
+ var nodeUnderCursor = false;
+ var popupType = "node";
- // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
- this.touchTime = new Date().valueOf();
+ if (this.popupObj == undefined) {
+ // search the nodes for overlap, select the top one in case of multiple nodes
+ var nodes = this.body.nodes;
+ var overlappingNodes = [];
+ for (id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ var node = nodes[id];
+ if (node.isOverlappingWith(obj)) {
+ if (node.getTitle() !== undefined) {
+ overlappingNodes.push(id);
+ }
+ }
+ }
+ }
- this._handleTouch(this.drag.pointer);
+ if (overlappingNodes.length > 0) {
+ // if there are overlapping nodes, select the last one, this is the
+ // one which is drawn on top of the others
+ this.popupObj = this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
+ // if you hover over a node, the title of the edge is not supposed to be shown.
+ nodeUnderCursor = true;
+ }
}
-};
-
-/**
- * handle drag start event
- * @private
- */
-Network.prototype._onDragStart = function (event) {
- this._handleDragStart(event);
-};
+ if (this.popupObj === undefined && nodeUnderCursor == false) {
+ // search the edges for overlap
+ var edges = this.body.edges;
+ var overlappingEdges = [];
+ for (id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ if (edge.connected === true && (edge.getTitle() !== undefined) &&
+ edge.isOverlappingWith(obj)) {
+ overlappingEdges.push(id);
+ }
+ }
+ }
-/**
- * This function is called by _onDragStart.
- * It is separated out because we can then overload it for the datamanipulation system.
- *
- * @private
- */
-Network.prototype._handleDragStart = function(event) {
- // in case the touch event was triggered on an external div, do the initial touch now.
- if (this.drag.pointer === undefined) {
- this._onTouch(event);
+ if (overlappingEdges.length > 0) {
+ this.popupObj = this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
+ popupType = "edge";
+ }
}
- var node = this._getNodeAt(this.drag.pointer);
- // note: drag.pointer is set in _onTouch to get the initial touch location
+ if (this.popupObj) {
+ // show popup message window
+ if (this.popupObj.id != previousPopupObjId) {
+ if (this.popup === undefined) {
+ this.popup = new Popup(this.frame, this.constants.tooltip);
+ }
- this.drag.dragging = true;
- this.drag.selection = [];
- this.drag.translation = this._getTranslation();
- this.drag.nodeId = null;
- this.draggingNodes = false;
+ this.popup.popupTargetType = popupType;
+ this.popup.popupTargetId = this.popupObj.id;
- if (node != null && this.constants.dragNodes == true) {
- this.draggingNodes = true;
- this.drag.nodeId = node.id;
- // select the clicked node if not yet selected
- if (!node.isSelected()) {
- this._selectObject(node,false);
+ // adjust a small offset such that the mouse cursor is located in the
+ // bottom left location of the popup, and you can easily move over the
+ // popup area
+ this.popup.setPosition(pointer.x + 3, pointer.y - 5);
+ this.popup.setText(this.popupObj.getTitle());
+ this.popup.show();
}
-
- this.emit("dragStart",{nodeIds:this.getSelection().nodes});
-
- // create an array with the selected nodes and their original location and status
- for (var objectId in this.selectionObj.nodes) {
- if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
- var object = this.selectionObj.nodes[objectId];
- var s = {
- id: object.id,
- node: object,
-
- // store original x, y, xFixed and yFixed, make the node temporarily Fixed
- x: object.x,
- y: object.y,
- xFixed: object.xFixed,
- yFixed: object.yFixed
- };
-
- object.xFixed = true;
- object.yFixed = true;
-
- this.drag.selection.push(s);
- }
- }
- }
-};
-
-
-/**
- * handle drag event
- * @private
- */
-Network.prototype._onDrag = function (event) {
- this._handleOnDrag(event)
-};
-
-
-/**
- * This function is called by _onDrag.
- * It is separated out because we can then overload it for the datamanipulation system.
- *
- * @private
- */
-Network.prototype._handleOnDrag = function(event) {
- if (this.drag.pinched) {
- return;
- }
-
- // remove the focus on node if it is focussed on by the focusOnNode
- this.releaseNode();
-
- var pointer = this._getPointer(event.gesture.center);
- var me = this;
- var drag = this.drag;
- var selection = drag.selection;
- if (selection && selection.length && this.constants.dragNodes == true) {
- // calculate delta's and new location
- var deltaX = pointer.x - drag.pointer.x;
- var deltaY = pointer.y - drag.pointer.y;
-
- // update position of all selected nodes
- selection.forEach(function (s) {
- var node = s.node;
-
- if (!s.xFixed) {
- node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
- }
-
- if (!s.yFixed) {
- node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
- }
- });
-
-
- // start _animationStep if not yet running
- if (!this.moving) {
- this.moving = true;
- this.start();
- }
- }
- else {
- // move the network
- if (this.constants.dragNetwork == true) {
- // if the drag was not started properly because the click started outside the network div, start it now.
- if (this.drag.pointer === undefined) {
- this._handleDragStart(event);
- return;
- }
- var diffX = pointer.x - this.drag.pointer.x;
- var diffY = pointer.y - this.drag.pointer.y;
-
- this._setTranslation(
- this.drag.translation.x + diffX,
- this.drag.translation.y + diffY
- );
- this._redraw();
- }
- }
-};
-
-/**
- * handle drag start event
- * @private
- */
-Network.prototype._onDragEnd = function (event) {
- this._handleDragEnd(event);
-};
-
-
-Network.prototype._handleDragEnd = function(event) {
- this.drag.dragging = false;
- var selection = this.drag.selection;
- if (selection && selection.length) {
- selection.forEach(function (s) {
- // restore original xFixed and yFixed
- s.node.xFixed = s.xFixed;
- s.node.yFixed = s.yFixed;
- });
- this.moving = true;
- this.start();
- }
- else {
- this._redraw();
- }
- if (this.draggingNodes == false) {
- this.emit("dragEnd",{nodeIds:[]});
- }
- else {
- this.emit("dragEnd",{nodeIds:this.getSelection().nodes});
- }
-
-}
-/**
- * handle tap/click event: select/unselect a node
- * @private
- */
-Network.prototype._onTap = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this.pointerPosition = pointer;
- this._handleTap(pointer);
-
-};
-
-
-/**
- * handle doubletap event
- * @private
- */
-Network.prototype._onDoubleTap = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this._handleDoubleTap(pointer);
-};
-
-
-/**
- * handle long tap event: multi select nodes
- * @private
- */
-Network.prototype._onHold = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this.pointerPosition = pointer;
- this._handleOnHold(pointer);
-};
-
-/**
- * handle the release of the screen
- *
- * @private
- */
-Network.prototype._onRelease = function (event) {
- var pointer = this._getPointer(event.gesture.center);
- this._handleOnRelease(pointer);
-};
-
-/**
- * Handle pinch event
- * @param event
- * @private
- */
-Network.prototype._onPinch = function (event) {
- var pointer = this._getPointer(event.gesture.center);
-
- this.drag.pinched = true;
- if (!('scale' in this.pinch)) {
- this.pinch.scale = 1;
- }
-
- // TODO: enabled moving while pinching?
- var scale = this.pinch.scale * event.gesture.scale;
- this._zoom(scale, pointer)
-};
-
-/**
- * Zoom the network in or out
- * @param {Number} scale a number around 1, and between 0.01 and 10
- * @param {{x: Number, y: Number}} pointer Position on screen
- * @return {Number} appliedScale scale is limited within the boundaries
- * @private
- */
-Network.prototype._zoom = function(scale, pointer) {
- if (this.constants.zoomable == true) {
- var scaleOld = this._getScale();
- if (scale < 0.00001) {
- scale = 0.00001;
- }
- if (scale > 10) {
- scale = 10;
- }
-
- var preScaleDragPointer = null;
- if (this.drag !== undefined) {
- if (this.drag.dragging == true) {
- preScaleDragPointer = this.DOMtoCanvas(this.drag.pointer);
- }
- }
- // + this.frame.canvas.clientHeight / 2
- var translation = this._getTranslation();
-
- var scaleFrac = scale / scaleOld;
- var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
- var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
-
- this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
- "y" : this._YconvertDOMtoCanvas(pointer.y)};
-
- this._setScale(scale);
- this._setTranslation(tx, ty);
- this.updateClustersDefault();
-
- if (preScaleDragPointer != null) {
- var postScaleDragPointer = this.canvasToDOM(preScaleDragPointer);
- this.drag.pointer.x = postScaleDragPointer.x;
- this.drag.pointer.y = postScaleDragPointer.y;
- }
-
- this._redraw();
-
- if (scaleOld < scale) {
- this.emit("zoom", {direction:"+"});
- }
- else {
- this.emit("zoom", {direction:"-"});
- }
-
- return scale;
- }
-};
-
-
-/**
- * Event handler for mouse wheel event, used to zoom the timeline
- * See http://adomas.org/javascript-mouse-wheel/
- * https://github.com/EightMedia/hammer.js/issues/256
- * @param {MouseEvent} event
- * @private
- */
-Network.prototype._onMouseWheel = function(event) {
- // retrieve delta
- var delta = 0;
- if (event.wheelDelta) { /* IE/Opera. */
- delta = event.wheelDelta/120;
- } else if (event.detail) { /* Mozilla case. */
- // In Mozilla, sign of delta is different than in IE.
- // Also, delta is multiple of 3.
- delta = -event.detail/3;
- }
-
- // If delta is nonzero, handle it.
- // Basically, delta is now positive if wheel was scrolled up,
- // and negative, if wheel was scrolled down.
- if (delta) {
-
- // calculate the new scale
- var scale = this._getScale();
- var zoom = delta / 10;
- if (delta < 0) {
- zoom = zoom / (1 - zoom);
- }
- scale *= (1 + zoom);
-
- // calculate the pointer location
- var gesture = hammerUtil.fakeGesture(this, event);
- var pointer = this._getPointer(gesture.center);
-
- // apply the new scale
- this._zoom(scale, pointer);
- }
-
- // Prevent default actions caused by mouse wheel.
- event.preventDefault();
-};
-
-
-/**
- * Mouse move handler for checking whether the title moves over a node with a title.
- * @param {Event} event
- * @private
- */
-Network.prototype._onMouseMoveTitle = function (event) {
- var gesture = hammerUtil.fakeGesture(this, event);
- var pointer = this._getPointer(gesture.center);
- var popupVisible = false;
-
- // check if the previously selected node is still selected
- if (this.popup !== undefined) {
- if (this.popup.hidden === false) {
- this._checkHidePopup(pointer);
- }
-
- // 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.show();
- }
- }
-
- // if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over
- if (this.constants.keyboard.bindToWindow == false && this.constants.keyboard.enabled == true) {
- this.frame.focus();
- }
-
- // start a timeout that will check if the mouse is positioned above an element
- if (popupVisible === false) {
- var me = this;
- var checkShow = function () {
- me._checkShowPopup(pointer);
- };
- if (this.popupTimer) {
- clearInterval(this.popupTimer); // stop any running calculationTimer
- }
- if (!this.drag.dragging) {
- this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
- }
- }
-
- /**
- * Adding hover highlights
- */
- if (this.constants.hover == true) {
- // removing all hover highlights
- for (var edgeId in this.hoverObj.edges) {
- if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
- this.hoverObj.edges[edgeId].hover = false;
- delete this.hoverObj.edges[edgeId];
- }
- }
-
- // adding hover highlights
- var obj = this._getNodeAt(pointer);
- if (obj == null) {
- obj = this._getEdgeAt(pointer);
- }
- if (obj != null) {
- this._hoverObject(obj);
- }
-
- // removing all node hover highlights except for the selected one.
- for (var nodeId in this.hoverObj.nodes) {
- if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
- if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
- this._blurObject(this.hoverObj.nodes[nodeId]);
- delete this.hoverObj.nodes[nodeId];
- }
- }
- }
- this.redraw();
- }
-};
-
-/**
- * Check if there is an element on the given position in the network
- * (a node or edge). If so, and if this element has a title,
- * show a popup window with its title.
- *
- * @param {{x:Number, y:Number}} pointer
- * @private
- */
-Network.prototype._checkShowPopup = function (pointer) {
- var obj = {
- left: this._XconvertDOMtoCanvas(pointer.x),
- top: this._YconvertDOMtoCanvas(pointer.y),
- right: this._XconvertDOMtoCanvas(pointer.x),
- bottom: this._YconvertDOMtoCanvas(pointer.y)
- };
-
- var id;
- var previousPopupObjId = this.popupObj === undefined ? "" : this.popupObj.id;
- var nodeUnderCursor = false;
- var popupType = "node";
-
- if (this.popupObj == undefined) {
- // search the nodes for overlap, select the top one in case of multiple nodes
- var nodes = this.nodes;
- var overlappingNodes = [];
- for (id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- var node = nodes[id];
- if (node.isOverlappingWith(obj)) {
- if (node.getTitle() !== undefined) {
- overlappingNodes.push(id);
- }
- }
- }
- }
-
- if (overlappingNodes.length > 0) {
- // if there are overlapping nodes, select the last one, this is the
- // one which is drawn on top of the others
- this.popupObj = this.nodes[overlappingNodes[overlappingNodes.length - 1]];
- // if you hover over a node, the title of the edge is not supposed to be shown.
- nodeUnderCursor = true;
- }
- }
-
- if (this.popupObj === undefined && nodeUnderCursor == false) {
- // search the edges for overlap
- var edges = this.edges;
- var overlappingEdges = [];
- for (id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- if (edge.connected && (edge.getTitle() !== undefined) &&
- edge.isOverlappingWith(obj)) {
- overlappingEdges.push(id);
- }
- }
- }
-
- if (overlappingEdges.length > 0) {
- this.popupObj = this.edges[overlappingEdges[overlappingEdges.length - 1]];
- popupType = "edge";
- }
- }
-
- if (this.popupObj) {
- // show popup message window
- if (this.popupObj.id != previousPopupObjId) {
- if (this.popup === undefined) {
- this.popup = new Popup(this.frame, this.constants.tooltip);
- }
-
- this.popup.popupTargetType = popupType;
- this.popup.popupTargetId = this.popupObj.id;
-
- // adjust a small offset such that the mouse cursor is located in the
- // bottom left location of the popup, and you can easily move over the
- // popup area
- this.popup.setPosition(pointer.x + 3, pointer.y - 5);
- this.popup.setText(this.popupObj.getTitle());
- this.popup.show();
- }
- }
- else {
- if (this.popup) {
- this.popup.hide();
+ }
+ else {
+ if (this.popup) {
+ this.popup.hide();
}
}
};
@@ -1539,7 +781,7 @@ Network.prototype._checkHidePopup = function (pointer) {
var stillOnObj = false;
if (this.popup.popupTargetType == 'node') {
- stillOnObj = this.nodes[this.popup.popupTargetId].isOverlappingWith(pointerObj);
+ stillOnObj = this.body.nodes[this.popup.popupTargetId].isOverlappingWith(pointerObj);
if (stillOnObj === true) {
var overNode = this._getNodeAt(pointer);
stillOnObj = overNode.id == this.popup.popupTargetId;
@@ -1547,7 +789,7 @@ Network.prototype._checkHidePopup = function (pointer) {
}
else {
if (this._getNodeAt(pointer) === null) {
- stillOnObj = this.edges[this.popup.popupTargetId].isOverlappingWith(pointerObj);
+ stillOnObj = this.body.edges[this.popup.popupTargetId].isOverlappingWith(pointerObj);
}
}
@@ -1559,68 +801,23 @@ Network.prototype._checkHidePopup = function (pointer) {
};
-/**
- * Set a new size for the network
- * @param {string} width Width in pixels or percentage (for example '800px'
- * or '50%')
- * @param {string} height Height in pixels or percentage (for example '400px'
- * or '30%')
- */
-Network.prototype.setSize = function(width, height) {
- var emitEvent = false;
- var oldWidth = this.frame.canvas.width;
- var oldHeight = this.frame.canvas.height;
- if (width != this.constants.width || height != this.constants.height || this.frame.style.width != width || this.frame.style.height != height) {
- this.frame.style.width = width;
- this.frame.style.height = height;
-
- this.frame.canvas.style.width = '100%';
- this.frame.canvas.style.height = '100%';
-
- this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
- this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
-
- this.constants.width = width;
- this.constants.height = height;
-
- emitEvent = true;
- }
- else {
- // this would adapt the width of the canvas to the width from 100% if and only if
- // there is a change.
-
- if (this.frame.canvas.width != this.frame.canvas.clientWidth * this.pixelRatio) {
- this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
- emitEvent = true;
- }
- if (this.frame.canvas.height != this.frame.canvas.clientHeight * this.pixelRatio) {
- this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
- emitEvent = true;
- }
- }
-
- if (emitEvent == true) {
- this.emit('resize', {width:this.frame.canvas.width * this.pixelRatio,height:this.frame.canvas.height * this.pixelRatio, oldWidth: oldWidth * this.pixelRatio, oldHeight: oldHeight * this.pixelRatio});
- }
-};
-
/**
* Set a data set with nodes for the network
* @param {Array | DataSet | DataView} nodes The data containing the nodes.
* @private
*/
Network.prototype._setNodes = function(nodes) {
- var oldNodesData = this.nodesData;
+ var oldNodesData = this.body.data.nodes;
if (nodes instanceof DataSet || nodes instanceof DataView) {
- this.nodesData = nodes;
+ this.body.data.nodes = nodes;
}
else if (Array.isArray(nodes)) {
- this.nodesData = new DataSet();
- this.nodesData.add(nodes);
+ this.body.data.nodes = new DataSet();
+ this.body.data.nodes.add(nodes);
}
else if (!nodes) {
- this.nodesData = new DataSet();
+ this.body.data.nodes = new DataSet();
}
else {
throw new TypeError('Array or DataSet expected');
@@ -1634,17 +831,17 @@ Network.prototype._setNodes = function(nodes) {
}
// remove drawn nodes
- this.nodes = {};
+ this.body.nodes = {};
- if (this.nodesData) {
+ if (this.body.data.nodes) {
// subscribe to new dataset
var me = this;
util.forEach(this.nodesListeners, function (callback, event) {
- me.nodesData.on(event, callback);
+ me.body.data.nodes.on(event, callback);
});
// draw all new nodes
- var ids = this.nodesData.getIds();
+ var ids = this.body.data.nodes.getIds();
this._addNodes(ids);
}
this._updateSelection();
@@ -1659,9 +856,9 @@ Network.prototype._addNodes = function(ids) {
var id;
for (var i = 0, len = ids.length; i < len; i++) {
id = ids[i];
- var data = this.nodesData.get(id);
+ var data = this.body.data.nodes.get(id);
var node = new Node(data, this.images, this.groups, this.constants);
- this.nodes[id] = node; // note: this may replace an existing node
+ this.body.nodes[id] = node; // note: this may replace an existing node
if ((node.xFixed == false || node.yFixed == false) && (node.x === null || node.y === null)) {
var radius = 10 * 0.1*ids.length + 10;
var angle = 2 * Math.PI * Math.random();
@@ -1676,10 +873,9 @@ Network.prototype._addNodes = function(ids) {
this._resetLevels();
this._setupHierarchicalLayout();
}
- this._updateCalculationNodes();
+ this.physics._updateCalculationNodes();
this._reconnectEdges();
- this._updateValueRange(this.nodes);
- this.updateLabels();
+ this._updateValueRange(this.body.nodes);
};
/**
@@ -1688,7 +884,7 @@ Network.prototype._addNodes = function(ids) {
* @private
*/
Network.prototype._updateNodes = function(ids,changedData) {
- var nodes = this.nodes;
+ var nodes = this.body.nodes;
for (var i = 0, len = ids.length; i < len; i++) {
var id = ids[i];
var node = nodes[id];
@@ -1715,8 +911,8 @@ Network.prototype._updateNodes = function(ids,changedData) {
Network.prototype._markAllEdgesAsDirty = function() {
- for (var edgeId in this.edges) {
- this.edges[edgeId].colorDirty = true;
+ for (var edgeId in this.body.edges) {
+ this.body.edges[edgeId].colorDirty = true;
}
}
@@ -1726,13 +922,13 @@ Network.prototype._markAllEdgesAsDirty = function() {
* @private
*/
Network.prototype._removeNodes = function(ids) {
- var nodes = this.nodes;
+ var nodes = this.body.nodes;
// remove from selection
for (var i = 0, len = ids.length; i < len; i++) {
if (this.selectionObj.nodes[ids[i]] !== undefined) {
- this.nodes[ids[i]].unselect();
- this._removeFromSelection(this.nodes[ids[i]]);
+ this.body.nodes[ids[i]].unselect();
+ this._removeFromSelection(this.body.nodes[ids[i]]);
}
}
@@ -1748,7 +944,7 @@ Network.prototype._removeNodes = function(ids) {
this._resetLevels();
this._setupHierarchicalLayout();
}
- this._updateCalculationNodes();
+ this.physics._updateCalculationNodes();
this._reconnectEdges();
this._updateSelection();
this._updateValueRange(nodes);
@@ -1761,17 +957,17 @@ Network.prototype._removeNodes = function(ids) {
* @private
*/
Network.prototype._setEdges = function(edges) {
- var oldEdgesData = this.edgesData;
+ var oldEdgesData = this.body.data.edges;
if (edges instanceof DataSet || edges instanceof DataView) {
- this.edgesData = edges;
+ this.body.data.edges = edges;
}
else if (Array.isArray(edges)) {
- this.edgesData = new DataSet();
- this.edgesData.add(edges);
+ this.body.data.edges = new DataSet();
+ this.body.data.edges.add(edges);
}
else if (!edges) {
- this.edgesData = new DataSet();
+ this.body.data.edges = new DataSet();
}
else {
throw new TypeError('Array or DataSet expected');
@@ -1785,17 +981,17 @@ Network.prototype._setEdges = function(edges) {
}
// remove drawn edges
- this.edges = {};
+ this.body.edges = {};
- if (this.edgesData) {
+ if (this.body.data.edges) {
// subscribe to new dataset
var me = this;
util.forEach(this.edgesListeners, function (callback, event) {
- me.edgesData.on(event, callback);
+ me.body.data.edges.on(event, callback);
});
// draw all new nodes
- var ids = this.edgesData.getIds();
+ var ids = this.body.data.edges.getIds();
this._addEdges(ids);
}
@@ -1808,8 +1004,8 @@ Network.prototype._setEdges = function(edges) {
* @private
*/
Network.prototype._addEdges = function (ids) {
- var edges = this.edges,
- edgesData = this.edgesData;
+ var edges = this.body.edges,
+ edgesData = this.body.data.edges;
for (var i = 0, len = ids.length; i < len; i++) {
var id = ids[i];
@@ -1820,12 +1016,12 @@ Network.prototype._addEdges = function (ids) {
}
var data = edgesData.get(id, {"showInternalIds" : true});
- edges[id] = new Edge(data, this, this.constants);
+ edges[id] = new Edge(data, this.body, this.constants);
}
this.moving = true;
this._updateValueRange(edges);
this._createBezierNodes();
- this._updateCalculationNodes();
+ this.physics._updateCalculationNodes();
if (this.constants.hierarchicalLayout.enabled == true && this.initializing == false) {
this._resetLevels();
this._setupHierarchicalLayout();
@@ -1838,8 +1034,8 @@ Network.prototype._addEdges = function (ids) {
* @private
*/
Network.prototype._updateEdges = function (ids) {
- var edges = this.edges,
- edgesData = this.edgesData;
+ var edges = this.body.edges;
+ var edgesData = this.body.data.edges;
for (var i = 0, len = ids.length; i < len; i++) {
var id = ids[i];
@@ -1848,13 +1044,13 @@ Network.prototype._updateEdges = function (ids) {
if (edge) {
// update edge
edge.disconnect();
- edge.setProperties(data, this.constants);
+ edge.setProperties(data);
edge.connect();
}
else {
// create edge
- edge = new Edge(data, this, this.constants);
- this.edges[id] = edge;
+ edge = new Edge(data, this.body, this.constants);
+ this.body.edges[id] = edge;
}
}
@@ -1873,7 +1069,7 @@ Network.prototype._updateEdges = function (ids) {
* @private
*/
Network.prototype._removeEdges = function (ids) {
- var edges = this.edges;
+ var edges = this.body.edges;
// remove from selection
for (var i = 0, len = ids.length; i < len; i++) {
@@ -1888,7 +1084,7 @@ Network.prototype._removeEdges = function (ids) {
var edge = edges[id];
if (edge) {
if (edge.via != null) {
- delete this.sectors['support']['nodes'][edge.via.id];
+ delete this.body.supportNodes[edge.via.id];
}
edge.disconnect();
delete edges[id];
@@ -1901,7 +1097,7 @@ Network.prototype._removeEdges = function (ids) {
this._resetLevels();
this._setupHierarchicalLayout();
}
- this._updateCalculationNodes();
+ this.physics._updateCalculationNodes();
};
/**
@@ -1910,12 +1106,11 @@ Network.prototype._removeEdges = function (ids) {
*/
Network.prototype._reconnectEdges = function() {
var id,
- nodes = this.nodes,
- edges = this.edges;
+ nodes = this.body.nodes,
+ edges = this.body.edges;
for (id in nodes) {
if (nodes.hasOwnProperty(id)) {
nodes[id].edges = [];
- nodes[id].dynamicEdges = [];
}
}
@@ -1965,92 +1160,11 @@ Network.prototype._updateValueRange = function(obj) {
}
};
-/**
- * Redraw the network with the current data
- * chart will be resized too.
- */
-Network.prototype.redraw = function() {
- this.setSize(this.constants.width, this.constants.height);
- this._redraw();
-};
/**
- * Redraw the network with the current data
- * @param hidden | used to get the first estimate of the node sizes. only the nodes are drawn after which they are quickly drawn over.
- * @private
- */
-Network.prototype._requestRedraw = function(hidden) {
- if (this.redrawRequested !== true) {
- this.redrawRequested = true;
- if (this.requiresTimeout === true) {
- window.setTimeout(this._redraw.bind(this, hidden),0);
- }
- else {
- window.requestAnimationFrame(this._redraw.bind(this, hidden, true));
- }
- }
-};
-
-Network.prototype._redraw = function(hidden, requested) {
- if (hidden === undefined) {
- hidden = false;
- }
- this.redrawRequested = false;
- var ctx = this.frame.canvas.getContext('2d');
-
- ctx.setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
-
- // clear the canvas
- var w = this.frame.canvas.clientWidth;
- var h = this.frame.canvas.clientHeight;
- ctx.clearRect(0, 0, w, h);
-
- // set scaling and translation
- ctx.save();
- ctx.translate(this.translation.x, this.translation.y);
- ctx.scale(this.scale, this.scale);
-
- this.canvasTopLeft = {
- "x": this._XconvertDOMtoCanvas(0),
- "y": this._YconvertDOMtoCanvas(0)
- };
- this.canvasBottomRight = {
- "x": this._XconvertDOMtoCanvas(this.frame.canvas.clientWidth),
- "y": this._YconvertDOMtoCanvas(this.frame.canvas.clientHeight)
- };
-
- if (hidden === false) {
- this._doInAllSectors("_drawAllSectorNodes", ctx);
- if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
- this._doInAllSectors("_drawEdges", ctx);
- }
- }
-
- if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
- this._doInAllSectors("_drawNodes",ctx,false);
- }
-
- if (hidden === false) {
- if (this.controlNodesActive == true) {
- this._doInAllSectors("_drawControlNodes", ctx);
- }
- }
-
-// this._doInSupportSector("_drawNodes",ctx,true);
-// this._drawTree(ctx,"#F00F0F");
-
- // restore original scaling and translation
- ctx.restore();
-
- if (hidden === true) {
- ctx.clearRect(0, 0, w, h);
- }
-}
-
-/**
- * Set the translation of the network
- * @param {Number} offsetX Horizontal offset
- * @param {Number} offsetY Vertical offset
+ * Set the translation of the network
+ * @param {Number} offsetX Horizontal offset
+ * @param {Number} offsetY Vertical offset
* @private
*/
Network.prototype._setTranslation = function(offsetX, offsetY) {
@@ -2101,418 +1215,6 @@ Network.prototype._getScale = function() {
return this.scale;
};
-/**
- * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} x
- * @returns {number}
- * @private
- */
-Network.prototype._XconvertDOMtoCanvas = function(x) {
- return (x - this.translation.x) / this.scale;
-};
-
-/**
- * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} x
- * @returns {number}
- * @private
- */
-Network.prototype._XconvertCanvasToDOM = function(x) {
- return x * this.scale + this.translation.x;
-};
-
-/**
- * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
- * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
- * @param {number} y
- * @returns {number}
- * @private
- */
-Network.prototype._YconvertDOMtoCanvas = function(y) {
- return (y - this.translation.y) / this.scale;
-};
-
-/**
- * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
- * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
- * @param {number} y
- * @returns {number}
- * @private
- */
-Network.prototype._YconvertCanvasToDOM = function(y) {
- return y * this.scale + this.translation.y ;
-};
-
-
-/**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
-Network.prototype.canvasToDOM = function (pos) {
- return {x: this._XconvertCanvasToDOM(pos.x), y: this._YconvertCanvasToDOM(pos.y)};
-};
-
-/**
- *
- * @param {object} pos = {x: number, y: number}
- * @returns {{x: number, y: number}}
- * @constructor
- */
-Network.prototype.DOMtoCanvas = function (pos) {
- return {x: this._XconvertDOMtoCanvas(pos.x), y: this._YconvertDOMtoCanvas(pos.y)};
-};
-
-/**
- * Redraw all nodes
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @param {Boolean} [alwaysShow]
- * @private
- */
-Network.prototype._drawNodes = function(ctx,alwaysShow) {
- if (alwaysShow === undefined) {
- alwaysShow = false;
- }
-
- // first draw the unselected nodes
- var nodes = this.nodes;
- var selected = [];
-
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
- if (nodes[id].isSelected()) {
- selected.push(id);
- }
- else {
- if (nodes[id].inArea() || alwaysShow) {
- nodes[id].draw(ctx);
- }
- }
- }
- }
-
- // draw the selected nodes on top
- for (var s = 0, sMax = selected.length; s < sMax; s++) {
- if (nodes[selected[s]].inArea() || alwaysShow) {
- nodes[selected[s]].draw(ctx);
- }
- }
-};
-
-/**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
-Network.prototype._drawEdges = function(ctx) {
- var edges = this.edges;
- for (var id in edges) {
- if (edges.hasOwnProperty(id)) {
- var edge = edges[id];
- edge.setScale(this.scale);
- if (edge.connected) {
- edges[id].draw(ctx);
- }
- }
- }
-};
-
-/**
- * Redraw all edges
- * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
- * @param {CanvasRenderingContext2D} ctx
- * @private
- */
-Network.prototype._drawControlNodes = function(ctx) {
- var edges = this.edges;
- for (var id in edges) {
- if (edges.hasOwnProperty(id)) {
- edges[id]._drawControlNodes(ctx);
- }
- }
-};
-
-/**
- * Find a stable position for all nodes
- * @private
- */
-Network.prototype._stabilize = function() {
- if (this.constants.freezeForStabilization == true) {
- this._freezeDefinedNodes();
- }
-
- // find stable position
- var count = 0;
- while (this.moving && count < this.constants.stabilizationIterations) {
- this._physicsTick();
- count++;
- }
-
-
- if (this.constants.zoomExtentOnStabilize == true) {
- this.zoomExtent({duration:0}, false, true);
- }
-
- if (this.constants.freezeForStabilization == true) {
- this._restoreFrozenNodes();
- }
-
- this.emit("stabilizationIterationsDone");
-};
-
-/**
- * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
- * because only the supportnodes for the smoothCurves have to settle.
- *
- * @private
- */
-Network.prototype._freezeDefinedNodes = function() {
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].x != null && nodes[id].y != null) {
- nodes[id].fixedData.x = nodes[id].xFixed;
- nodes[id].fixedData.y = nodes[id].yFixed;
- nodes[id].xFixed = true;
- nodes[id].yFixed = true;
- }
- }
- }
-};
-
-/**
- * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
- *
- * @private
- */
-Network.prototype._restoreFrozenNodes = function() {
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes.hasOwnProperty(id)) {
- if (nodes[id].fixedData.x != null) {
- nodes[id].xFixed = nodes[id].fixedData.x;
- nodes[id].yFixed = nodes[id].fixedData.y;
- }
- }
- }
-};
-
-
-/**
- * Check if any of the nodes is still moving
- * @param {number} vmin the minimum velocity considered as 'moving'
- * @return {boolean} true if moving, false if non of the nodes is moving
- * @private
- */
-Network.prototype._isMoving = function(vmin) {
- var nodes = this.nodes;
- for (var id in nodes) {
- if (nodes[id] !== undefined) {
- if (nodes[id].isMoving(vmin) == true) {
- return true;
- }
- }
- }
- return false;
-};
-
-
-/**
- * /**
- * Perform one discrete step for all nodes
- *
- * @private
- */
-Network.prototype._discreteStepNodes = function() {
- var interval = this.physicsDiscreteStepsize;
- var nodes = this.nodes;
- var nodeId;
- var nodesPresent = false;
-
- if (this.constants.maxVelocity > 0) {
- for (nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- nodes[nodeId].discreteStepLimited(interval, this.constants.maxVelocity);
- nodesPresent = true;
- }
- }
- }
- else {
- for (nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- nodes[nodeId].discreteStep(interval);
- nodesPresent = true;
- }
- }
- }
-
- if (nodesPresent == true) {
- var vminCorrected = this.constants.minVelocity / Math.max(this.scale,0.05);
- if (vminCorrected > 0.5*this.constants.maxVelocity) {
- return true;
- }
- else {
- return this._isMoving(vminCorrected);
- }
- }
- return false;
-};
-
-
-Network.prototype._revertPhysicsState = function() {
- var nodes = this.nodes;
- for (var nodeId in nodes) {
- if (nodes.hasOwnProperty(nodeId)) {
- nodes[nodeId].revertPosition();
- }
- }
-}
-
-Network.prototype._revertPhysicsTick = function() {
- this._doInAllActiveSectors("_revertPhysicsState");
- if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
- this._doInSupportSector("_revertPhysicsState");
- }
-}
-
-/**
- * A single simulation step (or "tick") in the physics simulation
- *
- * @private
- */
-Network.prototype._physicsTick = function() {
- if (!this.freezeSimulationEnabled) {
- if (this.moving == true) {
- var mainMovingStatus = false;
- var supportMovingStatus = false;
-
- this._doInAllActiveSectors("_initializeForceCalculation");
- var mainMoving = this._doInAllActiveSectors("_discreteStepNodes");
- if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
- supportMovingStatus = this._doInSupportSector("_discreteStepNodes");
- }
-
- // gather movement data from all sectors, if one moves, we are NOT stabilzied
- for (var i = 0; i < mainMoving.length; i++) {
- mainMovingStatus = mainMoving[i] || mainMovingStatus;
- }
-
- // determine if the network has stabilzied
- this.moving = mainMovingStatus || supportMovingStatus;
- if (this.moving == false) {
- this._revertPhysicsTick();
- }
- else {
- // this is here to ensure that there is no start event when the network is already stable.
- if (this.startedStabilization == false) {
- this.emit("startStabilization");
- this.startedStabilization = true;
- }
- }
-
- this.stabilizationIterations++;
- }
- }
-};
-
-
-/**
- * This function runs one step of the animation. It calls an x amount of physics ticks and one render tick.
- * It reschedules itself at the beginning of the function
- *
- * @private
- */
-Network.prototype._animationStep = function() {
- // reset the timer so a new scheduled animation step can be set
- this.timer = undefined;
-
- if (this.requiresTimeout == true) {
- // this schedules a new animation step
- this.start();
- }
-
- // handle the keyboad movement
- this._handleNavigation();
-
- // check if the physics have settled
- if (this.moving == true) {
- var startTime = Date.now();
- this._physicsTick();
- var physicsTime = Date.now() - startTime;
-
- // run double speed if it is a little graph
- if ((this.renderTimestep - this.renderTime > 2 * physicsTime || this.runDoubleSpeed == true) && this.moving == true) {
- this._physicsTick();
-
- // this makes sure there is no jitter. The decision is taken once to run it at double speed.
- if (this.renderTime != 0) {
- this.runDoubleSpeed = true
- }
- }
- }
-
- var renderStartTime = Date.now();
- this._redraw();
- this.renderTime = Date.now() - renderStartTime;
-
- if (this.requiresTimeout == false) {
- // this schedules a new animation step
- this.start();
- }
-};
-
-if (typeof window !== 'undefined') {
- window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
- window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-}
-
-/**
- * Schedule a animation step with the refreshrate interval.
- */
-Network.prototype.start = function() {
- if (this.freezeSimulationEnabled == true) {
- this.moving = false;
- }
- if (this.moving == true || this.xIncrement != 0 || this.yIncrement != 0 || this.zoomIncrement != 0 || this.animating == true) {
- if (!this.timer) {
- if (this.requiresTimeout == true) {
- this.timer = window.setTimeout(this._animationStep.bind(this), this.renderTimestep); // wait this.renderTimeStep milliseconds and perform the animation step function
- }
- else {
- this.timer = window.requestAnimationFrame(this._animationStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
- }
- }
- }
- else {
- this._requestRedraw();
- // this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
- if (this.stabilizationIterations > 1) {
- // trigger the "stabilized" event.
- // The event is triggered on the next tick, to prevent the case that
- // it is fired while initializing the Network, in which case you would not
- // be able to catch it
- var me = this;
- var params = {
- iterations: me.stabilizationIterations
- };
- this.stabilizationIterations = 0;
- this.startedStabilization = false;
- setTimeout(function () {
- me.emit("stabilized", params);
- }, 0);
- }
- else {
- this.stabilizationIterations = 0;
- }
- }
-};
-
/**
* Move the network according to the keyboard presses.
@@ -2556,33 +1258,31 @@ Network.prototype.freezeSimulation = function(freeze) {
* @param {boolean} [disableStart]
* @private
*/
-Network.prototype._configureSmoothCurves = function(disableStart) {
- if (disableStart === undefined) {
- disableStart = true;
- }
+Network.prototype._configureSmoothCurves = function(disableStart = true) {
if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
this._createBezierNodes();
// cleanup unused support nodes
- for (var nodeId in this.sectors['support']['nodes']) {
- if (this.sectors['support']['nodes'].hasOwnProperty(nodeId)) {
- if (this.edges[this.sectors['support']['nodes'][nodeId].parentEdgeId] === undefined) {
- delete this.sectors['support']['nodes'][nodeId];
- }
+ for (let i = 0; i < this.body.supportNodeIndices.length; i++) {
+ let nodeId = this.body.supportNodeIndices[i];
+ // delete support nodes for edges that have been deleted
+ if (this.body.edges[this.body.supportNodes[nodeId].parentEdgeId] === undefined) {
+ delete this.body.supportNodes[nodeId];
}
}
}
else {
// delete the support nodes
- this.sectors['support']['nodes'] = {};
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- this.edges[edgeId].via = null;
+ this.body.supportNodes = {};
+ for (var edgeId in this.body.edges) {
+ if (this.body.edges.hasOwnProperty(edgeId)) {
+ this.body.edges[edgeId].via = null;
}
}
}
- this._updateCalculationNodes();
+ this._updateNodeIndexList();
+ this.physics._updateCalculationNodes();
if (!disableStart) {
this.moving = true;
this.start();
@@ -2596,26 +1296,28 @@ Network.prototype._configureSmoothCurves = function(disableStart) {
*
* @private
*/
-Network.prototype._createBezierNodes = function() {
+Network.prototype._createBezierNodes = function(specificEdges = this.body.edges) {
if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- var edge = this.edges[edgeId];
+ for (var edgeId in specificEdges) {
+ if (specificEdges.hasOwnProperty(edgeId)) {
+ var edge = specificEdges[edgeId];
if (edge.via == null) {
var nodeId = "edgeId:".concat(edge.id);
- this.sectors['support']['nodes'][nodeId] = new Node(
+ var node = new Node(
{id:nodeId,
mass:1,
shape:'circle',
image:"",
internalMultiplier:1
},{},{},this.constants);
- edge.via = this.sectors['support']['nodes'][nodeId];
+ this.body.supportNodes[nodeId] = node;
+ edge.via = node;
edge.via.parentEdgeId = edge.id;
edge.positionBezierNode();
}
}
}
+ this._updateNodeIndexList();
}
};
@@ -2645,17 +1347,17 @@ Network.prototype.storePosition = function() {
*/
Network.prototype.storePositions = function() {
var dataArray = [];
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- var allowedToMoveX = !this.nodes.xFixed;
- var allowedToMoveY = !this.nodes.yFixed;
- if (this.nodesData._data[nodeId].x != Math.round(node.x) || this.nodesData._data[nodeId].y != Math.round(node.y)) {
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ var node = this.body.nodes[nodeId];
+ var allowedToMoveX = !this.body.nodes.xFixed;
+ var allowedToMoveY = !this.body.nodes.yFixed;
+ if (this.body.data.nodes._data[nodeId].x != Math.round(node.x) || this.body.data.nodes._data[nodeId].y != Math.round(node.y)) {
dataArray.push({id:nodeId,x:Math.round(node.x),y:Math.round(node.y),allowedToMoveX:allowedToMoveX,allowedToMoveY:allowedToMoveY});
}
}
}
- this.nodesData.update(dataArray);
+ this.body.data.nodes.update(dataArray);
};
/**
@@ -2666,23 +1368,23 @@ Network.prototype.getPositions = function(ids) {
if (ids !== undefined) {
if (Array.isArray(ids) == true) {
for (var i = 0; i < ids.length; i++) {
- if (this.nodes[ids[i]] !== undefined) {
- var node = this.nodes[ids[i]];
+ if (this.body.nodes[ids[i]] !== undefined) {
+ var node = this.body.nodes[ids[i]];
dataArray[ids[i]] = {x: Math.round(node.x), y: Math.round(node.y)};
}
}
}
else {
- if (this.nodes[ids] !== undefined) {
- var node = this.nodes[ids];
+ if (this.body.nodes[ids] !== undefined) {
+ var node = this.body.nodes[ids];
dataArray[ids] = {x: Math.round(node.x), y: Math.round(node.y)};
}
}
}
else {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ var node = this.body.nodes[nodeId];
dataArray[nodeId] = {x: Math.round(node.x), y: Math.round(node.y)};
}
}
@@ -2691,190 +1393,6 @@ Network.prototype.getPositions = function(ids) {
};
-
-/**
- * Center a node in view.
- *
- * @param {Number} nodeId
- * @param {Number} [options]
- */
-Network.prototype.focusOnNode = function (nodeId, options) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (options === undefined) {
- options = {};
- }
- var nodePosition = {x: this.nodes[nodeId].x, y: this.nodes[nodeId].y};
- options.position = nodePosition;
- options.lockedOnNode = nodeId;
-
- this.moveTo(options)
- }
- else {
- console.log("This nodeId cannot be found.");
- }
-};
-
-/**
- *
- * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
- * | options.scale = Number // scale to move to
- * | options.position = {x:Number, y:Number} // position to move to
- * | options.animation = {duration:Number, easingFunction:String} || Boolean // position to move to
- */
-Network.prototype.moveTo = function (options) {
- if (options === undefined) {
- options = {};
- return;
- }
- if (options.offset === undefined) {options.offset = {x: 0, y: 0}; }
- if (options.offset.x === undefined) {options.offset.x = 0; }
- if (options.offset.y === undefined) {options.offset.y = 0; }
- if (options.scale === undefined) {options.scale = this._getScale(); }
- if (options.position === undefined) {options.position = this._getTranslation();}
- if (options.animation === undefined) {options.animation = {duration:0}; }
- if (options.animation === false ) {options.animation = {duration:0}; }
- if (options.animation === true ) {options.animation = {}; }
- if (options.animation.duration === undefined) {options.animation.duration = 1000; } // default duration
- if (options.animation.easingFunction === undefined) {options.animation.easingFunction = "easeInOutQuad"; } // default easing function
-
- this.animateView(options);
-};
-
-/**
- *
- * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
- * | options.time = Number // animation time in milliseconds
- * | options.scale = Number // scale to animate to
- * | options.position = {x:Number, y:Number} // position to animate to
- * | options.easingFunction = String // linear, easeInQuad, easeOutQuad, easeInOutQuad,
- * // easeInCubic, easeOutCubic, easeInOutCubic,
- * // easeInQuart, easeOutQuart, easeInOutQuart,
- * // easeInQuint, easeOutQuint, easeInOutQuint
- */
-Network.prototype.animateView = function (options) {
- if (options === undefined) {
- options = {};
- return;
- }
-
- // release if something focussed on the node
- this.releaseNode();
- if (options.locked == true) {
- this.lockedOnNodeId = options.lockedOnNode;
- this.lockedOnNodeOffset = options.offset;
- }
-
- // forcefully complete the old animation if it was still running
- if (this.easingTime != 0) {
- this._transitionRedraw(1); // by setting easingtime to 1, we finish the animation.
- }
-
- this.sourceScale = this._getScale();
- this.sourceTranslation = this._getTranslation();
- this.targetScale = options.scale;
-
- // set the scale so the viewCenter is based on the correct zoom level. This is overridden in the transitionRedraw
- // but at least then we'll have the target transition
- this._setScale(this.targetScale);
- var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
- var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
- x: viewCenter.x - options.position.x,
- y: viewCenter.y - options.position.y
- };
- this.targetTranslation = {
- x: this.sourceTranslation.x + distanceFromCenter.x * this.targetScale + options.offset.x,
- y: this.sourceTranslation.y + distanceFromCenter.y * this.targetScale + options.offset.y
- };
-
- // if the time is set to 0, don't do an animation
- if (options.animation.duration == 0) {
- if (this.lockedOnNodeId != null) {
- this._classicRedraw = this._redraw;
- this._redraw = this._lockedRedraw;
- }
- else {
- this._setScale(this.targetScale);
- this._setTranslation(this.targetTranslation.x, this.targetTranslation.y);
- this._redraw();
- }
- }
- else {
- this.animating = true;
- this.animationSpeed = 1 / (this.renderRefreshRate * options.animation.duration * 0.001) || 1 / this.renderRefreshRate;
- this.animationEasingFunction = options.animation.easingFunction;
- this._classicRedraw = this._redraw;
- this._redraw = this._transitionRedraw;
- this._redraw();
- this.start();
- }
-};
-
-/**
- * used to animate smoothly by hijacking the redraw function.
- * @private
- */
-Network.prototype._lockedRedraw = function () {
- var nodePosition = {x: this.nodes[this.lockedOnNodeId].x, y: this.nodes[this.lockedOnNodeId].y};
- var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
- var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
- x: viewCenter.x - nodePosition.x,
- y: viewCenter.y - nodePosition.y
- };
- var sourceTranslation = this._getTranslation();
- var targetTranslation = {
- x: sourceTranslation.x + distanceFromCenter.x * this.scale + this.lockedOnNodeOffset.x,
- y: sourceTranslation.y + distanceFromCenter.y * this.scale + this.lockedOnNodeOffset.y
- };
-
- this._setTranslation(targetTranslation.x,targetTranslation.y);
- this._classicRedraw();
-}
-
-Network.prototype.releaseNode = function () {
- if (this.lockedOnNodeId != null) {
- this._redraw = this._classicRedraw;
- this.lockedOnNodeId = null;
- this.lockedOnNodeOffset = null;
- }
-}
-
-/**
- *
- * @param easingTime
- * @private
- */
-Network.prototype._transitionRedraw = function (easingTime) {
- this.easingTime = easingTime || this.easingTime + this.animationSpeed;
- this.easingTime += this.animationSpeed;
-
- var progress = util.easingFunctions[this.animationEasingFunction](this.easingTime);
-
- this._setScale(this.sourceScale + (this.targetScale - this.sourceScale) * progress);
- this._setTranslation(
- this.sourceTranslation.x + (this.targetTranslation.x - this.sourceTranslation.x) * progress,
- this.sourceTranslation.y + (this.targetTranslation.y - this.sourceTranslation.y) * progress
- );
-
- this._classicRedraw();
-
- // cleanup
- if (this.easingTime >= 1.0) {
- this.animating = false;
- this.easingTime = 0;
- if (this.lockedOnNodeId != null) {
- this._redraw = this._lockedRedraw;
- }
- else {
- this._redraw = this._classicRedraw;
- }
- this.emit("animationFinished");
- }
-};
-
-Network.prototype._classicRedraw = function () {
- // placeholder function to be overloaded by animations;
-};
-
/**
* Returns true when the Network is active.
* @returns {boolean}
@@ -2902,6 +1420,21 @@ Network.prototype.getScale = function () {
};
+/**
+ * Check if a node is a cluster.
+ * @param nodeId
+ * @returns {*}
+ */
+Network.prototype.isCluster = function(nodeId) {
+ if (this.body.nodes[nodeId] !== undefined) {
+ return this.body.nodes[nodeId].isCluster;
+ }
+ else {
+ console.log("Node does not exist.")
+ return false;
+ }
+};
+
/**
* Returns the scale
* @returns {Number}
@@ -2912,15 +1445,15 @@ Network.prototype.getCenterCoordinates = function () {
Network.prototype.getBoundingBox = function(nodeId) {
- if (this.nodes[nodeId] !== undefined) {
- return this.nodes[nodeId].boundingBox;
+ if (this.body.nodes[nodeId] !== undefined) {
+ return this.body.nodes[nodeId].boundingBox;
}
}
Network.prototype.getConnectedNodes = function(nodeId) {
var nodeList = [];
- if (this.nodes[nodeId] !== undefined) {
- var node = this.nodes[nodeId];
+ if (this.body.nodes[nodeId] !== undefined) {
+ var node = this.body.nodes[nodeId];
var nodeObj = {nodeId : true}; // used to quickly check if node already exists
for (var i = 0; i < node.edges.length; i++) {
var edge = node.edges[i];
@@ -2944,8 +1477,8 @@ Network.prototype.getConnectedNodes = function(nodeId) {
Network.prototype.getEdgesFromNode = function(nodeId) {
var edgesList = [];
- if (this.nodes[nodeId] !== undefined) {
- var node = this.nodes[nodeId];
+ if (this.body.nodes[nodeId] !== undefined) {
+ var node = this.body.nodes[nodeId];
for (var i = 0; i < node.edges.length; i++) {
edgesList.push(node.edges[i].id);
}
diff --git a/lib/network/Node.js b/lib/network/Node.js
index b88ba8e1..820311fd 100644
--- a/lib/network/Node.js
+++ b/lib/network/Node.js
@@ -33,8 +33,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
this.hover = false;
this.edges = []; // all edges connected to this node
- this.dynamicEdges = [];
- this.reroutedEdges = {};
// set defaults for the properties
this.id = undefined;
@@ -56,10 +54,6 @@ function Node(properties, imagelist, grouplist, networkConstants) {
this.grouplist = grouplist;
// physics properties
- this.fx = 0.0; // external force x
- this.fy = 0.0; // external force y
- this.vx = 0.0; // velocity x
- this.vy = 0.0; // velocity y
this.x = null;
this.y = null;
this.predefinedPosition = false; // used to check if initial zoomExtent should just take the range or approximate
@@ -67,52 +61,19 @@ function Node(properties, imagelist, grouplist, networkConstants) {
// used for reverting to previous position on stabilization
this.previousState = {vx:0,vy:0,x:0,y:0};
- this.damping = networkConstants.physics.damping; // written every time gravity is calculated
this.fixedData = {x:null,y:null};
this.setProperties(properties, constants);
- // creating the variables for clustering
- this.resetCluster();
- this.clusterSession = 0;
- this.clusterSizeWidthFactor = networkConstants.clustering.nodeScaling.width;
- this.clusterSizeHeightFactor = networkConstants.clustering.nodeScaling.height;
- this.clusterSizeRadiusFactor = networkConstants.clustering.nodeScaling.radius;
- this.maxNodeSizeIncrements = networkConstants.clustering.maxNodeSizeIncrements;
- this.growthIndicator = 0;
-
// variables to tell the node about the network.
this.networkScaleInv = 1;
this.networkScale = 1;
- this.canvasTopLeft = {"x": -300, "y": -300};
- this.canvasBottomRight = {"x": 300, "y": 300};
+ this.canvasTopLeft = {x: -300, y: -300};
+ this.canvasBottomRight = {x: 300, y: 300};
this.parentEdgeId = null;
}
-/**
- * Revert the position and velocity of the previous step.
- */
-Node.prototype.revertPosition = function() {
- this.x = this.previousState.x;
- this.y = this.previousState.y;
- this.vx = this.previousState.vx;
- this.vy = this.previousState.vy;
-}
-
-
-/**
- * (re)setting the clustering variables and objects
- */
-Node.prototype.resetCluster = function() {
- // clustering variables
- this.formationScale = undefined; // this is used to determine when to open the cluster
- this.clusterSize = 1; // this signifies the total amount of nodes in this cluster
- this.containedNodes = {};
- this.containedEdges = {};
- this.clusterSessions = [];
-};
-
/**
* Attach a edge to the node
* @param {Edge} edge
@@ -121,9 +82,6 @@ Node.prototype.attachEdge = function(edge) {
if (this.edges.indexOf(edge) == -1) {
this.edges.push(edge);
}
- if (this.dynamicEdges.indexOf(edge) == -1) {
- this.dynamicEdges.push(edge);
- }
};
/**
@@ -135,10 +93,6 @@ Node.prototype.detachEdge = function(edge) {
if (index != -1) {
this.edges.splice(index, 1);
}
- index = this.dynamicEdges.indexOf(edge);
- if (index != -1) {
- this.dynamicEdges.splice(index, 1);
- }
};
@@ -151,10 +105,12 @@ Node.prototype.setProperties = function(properties, constants) {
if (!properties) {
return;
}
+ this.properties = properties;
- var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
- 'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
- 'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction','iconFontFace', 'icon', 'iconColor', 'iconSize'
+ var fields = ['borderWidth', 'borderWidthSelected', 'shape', 'image', 'brokenImage', 'radius', 'fontColor',
+ 'fontSize', 'fontFace', 'fontFill', 'fontStrokeWidth', 'fontStrokeColor', 'group', 'mass', 'fontDrawThreshold',
+ 'scaleFontWithValue', 'fontSizeMaxVisible', 'customScalingFunction', 'iconFontFace', 'icon', 'iconColor', 'iconSize',
+ 'value'
];
util.selectiveDeepExtend(fields, this.options, properties);
@@ -332,99 +288,6 @@ Node.prototype.distanceToBorder = function (ctx, angle) {
// TODO: implement calculation of distance to border for all shapes
};
-/**
- * Set forces acting on the node
- * @param {number} fx Force in horizontal direction
- * @param {number} fy Force in vertical direction
- */
-Node.prototype._setForce = function(fx, fy) {
- this.fx = fx;
- this.fy = fy;
-};
-
-/**
- * Add forces acting on the node
- * @param {number} fx Force in horizontal direction
- * @param {number} fy Force in vertical direction
- * @private
- */
-Node.prototype._addForce = function(fx, fy) {
- this.fx += fx;
- this.fy += fy;
-};
-
-/**
- * Store the state before the next step
- */
-Node.prototype.storeState = function() {
- this.previousState.x = this.x;
- this.previousState.y = this.y;
- this.previousState.vx = this.vx;
- this.previousState.vy = this.vy;
-}
-
-/**
- * Perform one discrete step for the node
- * @param {number} interval Time interval in seconds
- */
-Node.prototype.discreteStep = function(interval) {
- this.storeState();
- if (!this.xFixed) {
- var dx = this.damping * this.vx; // damping force
- var ax = (this.fx - dx) / this.options.mass; // acceleration
- this.vx += ax * interval; // velocity
- this.x += this.vx * interval; // position
- }
- else {
- this.fx = 0;
- this.vx = 0;
- }
-
- if (!this.yFixed) {
- var dy = this.damping * this.vy; // damping force
- var ay = (this.fy - dy) / this.options.mass; // acceleration
- this.vy += ay * interval; // velocity
- this.y += this.vy * interval; // position
- }
- else {
- this.fy = 0;
- this.vy = 0;
- }
-};
-
-
-
-/**
- * Perform one discrete step for the node
- * @param {number} interval Time interval in seconds
- * @param {number} maxVelocity The speed limit imposed on the velocity
- */
-Node.prototype.discreteStepLimited = function(interval, maxVelocity) {
- this.storeState();
- if (!this.xFixed) {
- var dx = this.damping * this.vx; // damping force
- var ax = (this.fx - dx) / this.options.mass; // acceleration
- this.vx += ax * interval; // velocity
- this.vx = (Math.abs(this.vx) > maxVelocity) ? ((this.vx > 0) ? maxVelocity : -maxVelocity) : this.vx;
- this.x += this.vx * interval; // position
- }
- else {
- this.fx = 0;
- this.vx = 0;
- }
-
- if (!this.yFixed) {
- var dy = this.damping * this.vy; // damping force
- var ay = (this.fy - dy) / this.options.mass; // acceleration
- this.vy += ay * interval; // velocity
- this.vy = (Math.abs(this.vy) > maxVelocity) ? ((this.vy > 0) ? maxVelocity : -maxVelocity) : this.vy;
- this.y += this.vy * interval; // position
- }
- else {
- this.fy = 0;
- this.vy = 0;
- }
-};
/**
* Check if this node has a fixed x and y position
@@ -434,17 +297,6 @@ Node.prototype.isFixed = function() {
return (this.xFixed && this.yFixed);
};
-/**
- * Check if this node is moving
- * @param {number} vmin the minimum velocity considered as "moving"
- * @return {boolean} true if moving, false if it has no velocity
- */
-Node.prototype.isMoving = function(vmin) {
- var velocity = Math.sqrt(Math.pow(this.vx,2) + Math.pow(this.vy,2));
-// this.velocity = Math.sqrt(Math.pow(this.vx,2) + Math.pow(this.vy,2))
- return (velocity > vmin);
-};
-
/**
* check if this node is selecte
* @return {boolean} selected True if node is selected, else false
@@ -547,29 +399,11 @@ Node.prototype._resizeImage = function (ctx) {
}
this.width = width;
this.height = height;
-
- this.growthIndicator = 0;
- if (this.width > 0 && this.height > 0) {
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - width;
- }
}
};
Node.prototype._drawImageAtPosition = function (ctx) {
if (this.imageObj.width != 0 ) {
- // draw the shade
- if (this.clusterSize > 1) {
- var lineWidth = ((this.clusterSize > 1) ? 10 : 0.0);
- lineWidth *= this.networkScaleInv;
- lineWidth = Math.min(0.2 * this.width,lineWidth);
-
- ctx.globalAlpha = 0.5;
- ctx.drawImage(this.imageObj, this.left - lineWidth, this.top - lineWidth, this.width + 2*lineWidth, this.height + 2*lineWidth);
- }
-
// draw the image
ctx.globalAlpha = 1.0;
ctx.drawImage(this.imageObj, this.left, this.top, this.width, this.height);
@@ -619,12 +453,6 @@ Node.prototype._resizeCircularImage = function (ctx) {
var diameter = this.options.radius * 2;
this.width = diameter;
this.height = diameter;
-
- // scaling used for clustering
- //this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
- //this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
- this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.options.radius- 0.5*diameter;
this._swapToImageResizeWhenImageLoaded = true;
}
}
@@ -678,12 +506,6 @@ Node.prototype._resizeBox = function (ctx) {
var textSize = this.getTextSize(ctx);
this.width = textSize.width + 2 * margin;
this.height = textSize.height + 2 * margin;
-
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
- this.growthIndicator = this.width - (textSize.width + 2 * margin);
-// this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
-
}
};
@@ -693,22 +515,11 @@ Node.prototype._drawBox = function (ctx) {
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
- var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
-
- ctx.roundRect(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth, this.options.radius);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+ ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
@@ -734,12 +545,6 @@ Node.prototype._resizeDatabase = function (ctx) {
var size = textSize.width + 2 * margin;
this.width = size;
this.height = size;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - size;
}
};
@@ -748,22 +553,11 @@ Node.prototype._drawDatabase = function (ctx) {
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
- var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
-
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
-
- ctx.database(this.x - this.width/2 - 2*ctx.lineWidth, this.y - this.height*0.5 - 2*ctx.lineWidth, this.width + 4*ctx.lineWidth, this.height + 4*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+ ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
@@ -790,32 +584,16 @@ Node.prototype._resizeCircle = function (ctx) {
this.width = diameter;
this.height = diameter;
-
- // scaling used for clustering
-// this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeWidthFactor;
-// this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeHeightFactor;
- this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.options.radius- 0.5*diameter;
}
};
Node.prototype._drawRawCircle = function (ctx, x, y, radius) {
- var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
-
- ctx.circle(x, y, radius+2*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+ ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
@@ -850,12 +628,6 @@ Node.prototype._resizeEllipse = function (ctx) {
this.width = this.height;
}
var defaultSize = this.width;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - defaultSize;
}
};
@@ -864,22 +636,12 @@ Node.prototype._drawEllipse = function (ctx) {
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
- var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
-
- ctx.ellipse(this.left-2*ctx.lineWidth, this.top-2*ctx.lineWidth, this.width+4*ctx.lineWidth, this.height+4*ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+ ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
@@ -923,12 +685,6 @@ Node.prototype._resizeShape = function (ctx) {
var size = 2 * this.options.radius;
this.width = size;
this.height = size;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * 0.5 * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - size;
}
};
@@ -938,7 +694,6 @@ Node.prototype._drawShape = function (ctx, shape) {
this.left = this.x - this.width / 2;
this.top = this.y - this.height / 2;
- var clusterLineWidth = 2.5;
var borderWidth = this.options.borderWidth;
var selectionLineWidth = this.options.borderWidthSelected || 2 * this.options.borderWidth;
var radiusMultiplier = 2;
@@ -953,16 +708,7 @@ Node.prototype._drawShape = function (ctx, shape) {
}
ctx.strokeStyle = this.selected ? this.options.color.highlight.border : this.hover ? this.options.color.hover.border : this.options.color.border;
- // draw the outer border
- if (this.clusterSize > 1) {
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
- ctx.lineWidth *= this.networkScaleInv;
- ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
-
- ctx[shape](this.x, this.y, this.options.radius+ radiusMultiplier * ctx.lineWidth);
- ctx.stroke();
- }
- ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth) + ((this.clusterSize > 1) ? clusterLineWidth : 0.0);
+ ctx.lineWidth = (this.selected ? selectionLineWidth : borderWidth);
ctx.lineWidth *= this.networkScaleInv;
ctx.lineWidth = Math.min(this.width,ctx.lineWidth);
@@ -990,12 +736,6 @@ Node.prototype._resizeText = function (ctx) {
var textSize = this.getTextSize(ctx);
this.width = textSize.width + 2 * margin;
this.height = textSize.height + 2 * margin;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius+= Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - (textSize.width + 2 * margin);
}
};
@@ -1022,12 +762,6 @@ Node.prototype._resizeIcon = function (ctx) {
};
this.width = iconSize.width + 2 * margin;
this.height = iconSize.height + 2 * margin;
-
- // scaling used for clustering
- this.width += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeWidthFactor;
- this.height += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeHeightFactor;
- this.options.radius += Math.min(this.clusterSize - 1, this.maxNodeSizeIncrements) * this.clusterSizeRadiusFactor;
- this.growthIndicator = this.width - (iconSize.width + 2 * margin);
}
};
@@ -1160,13 +894,14 @@ Node.prototype.getTextSize = function(ctx) {
width = Math.max(width, ctx.measureText(lines[i]).width);
}
- return {"width": width, "height": height, lineCount: lines.length};
+ return {width: width, height: height, lineCount: lines.length};
}
else {
- return {"width": 0, "height": 0, lineCount: 0};
+ return {width: 0, height: 0, lineCount: 0};
}
};
+
/**
* this is used to determine if a node is visible at all. this is used to determine when it needs to be drawn.
* there is a safety margin of 0.3 * width;
@@ -1185,16 +920,6 @@ Node.prototype.inArea = function() {
}
};
-/**
- * checks if the core of the node is in the display area, this is used for opening clusters around zoom
- * @returns {boolean}
- */
-Node.prototype.inView = function() {
- return (this.x >= this.canvasTopLeft.x &&
- this.x < this.canvasBottomRight.x &&
- this.y >= this.canvasTopLeft.y &&
- this.y < this.canvasBottomRight.y);
-};
/**
* This allows the zoom level of the network to influence the rendering
diff --git a/lib/network/mixins/ClusterMixin.js b/lib/network/mixins/ClusterMixin.js
deleted file mode 100644
index f3a33587..00000000
--- a/lib/network/mixins/ClusterMixin.js
+++ /dev/null
@@ -1,1129 +0,0 @@
-/**
- * Creation of the ClusterMixin var.
- *
- * This contains all the functions the Network object can use to employ clustering
- */
-
-/**
-* This is only called in the constructor of the network object
-*
-*/
-exports.startWithClustering = function() {
- // cluster if the data set is big
- this.clusterToFit(this.constants.clustering.initialMaxNodes, true);
-
- // updates the lables after clustering
- this.updateLabels();
-
- // this is called here because if clusterin is disabled, the start and stabilize are called in
- // the setData function.
- if (this.constants.stabilize == true) {
- this._stabilize();
- }
- this.start();
-};
-
-/**
- * This function clusters until the initialMaxNodes has been reached
- *
- * @param {Number} maxNumberOfNodes
- * @param {Boolean} reposition
- */
-exports.clusterToFit = function(maxNumberOfNodes, reposition) {
- var numberOfNodes = this.nodeIndices.length;
-
- var maxLevels = 50;
- var level = 0;
-
- // we first cluster the hubs, then we pull in the outliers, repeat
- while (numberOfNodes > maxNumberOfNodes && level < maxLevels) {
- if (level % 3 == 0.0) {
- this.forceAggregateHubs(true);
- this.normalizeClusterLevels();
- }
- else {
- this.increaseClusterLevel(); // this also includes a cluster normalization
- }
- this.forceAggregateHubs(true);
- numberOfNodes = this.nodeIndices.length;
- level += 1;
- }
-
- // after the clustering we reposition the nodes to reduce the initial chaos
- if (level > 0 && reposition == true) {
- this.repositionNodes();
- }
- this._updateCalculationNodes();
-};
-
-/**
- * This function can be called to open up a specific cluster.
- * It will unpack the cluster back one level.
- *
- * @param node | Node object: cluster to open.
- */
-exports.openCluster = function(node) {
- var isMovingBeforeClustering = this.moving;
- if (node.clusterSize > this.constants.clustering.sectorThreshold && this._nodeInActiveArea(node) &&
- !(this._sector() == "default" && this.nodeIndices.length == 1)) {
- // this loads a new sector, loads the nodes and edges and nodeIndices of it.
- this._addSector(node);
- var level = 0;
-
- // we decluster until we reach a decent number of nodes
- while ((this.nodeIndices.length < this.constants.clustering.initialMaxNodes) && (level < 10)) {
- this.decreaseClusterLevel();
- level += 1;
- }
-
- }
- else {
- this._expandClusterNode(node,false,true);
-
- // update the index list and labels
- this._updateNodeIndexList();
- this._updateCalculationNodes();
- this.updateLabels();
- }
-
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
-};
-
-
-/**
- * This calls the updateClustes with default arguments
- */
-exports.updateClustersDefault = function() {
- if (this.constants.clustering.enabled == true && this.constants.clustering.clusterByZoom == true) {
- this.updateClusters(0,false,false);
- }
-};
-
-
-/**
- * This function can be called to increase the cluster level. This means that the nodes with only one edge connection will
- * be clustered with their connected node. This can be repeated as many times as needed.
- * This can be called externally (by a keybind for instance) to reduce the complexity of big datasets.
- */
-exports.increaseClusterLevel = function() {
- this.updateClusters(-1,false,true);
-};
-
-
-/**
- * This function can be called to decrease the cluster level. This means that the nodes with only one edge connection will
- * be unpacked if they are a cluster. This can be repeated as many times as needed.
- * This can be called externally (by a key-bind for instance) to look into clusters without zooming.
- */
-exports.decreaseClusterLevel = function() {
- this.updateClusters(1,false,true);
-};
-
-
-/**
- * This is the main clustering function. It clusters and declusters on zoom or forced
- * This function clusters on zoom, it can be called with a predefined zoom direction
- * If out, check if we can form clusters, if in, check if we can open clusters.
- * This function is only called from _zoom()
- *
- * @param {Number} zoomDirection | -1 / 0 / +1 for zoomOut / determineByZoom / zoomIn
- * @param {Boolean} recursive | enabled or disable recursive calling of the opening of clusters
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} doNotStart | if true do not call start
- *
- */
-exports.updateClusters = function(zoomDirection,recursive,force,doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- var detectedZoomingIn = (this.previousScale < this.scale && zoomDirection == 0);
- var detectedZoomingOut = (this.previousScale > this.scale && zoomDirection == 0);
-
- // on zoom out collapse the sector if the scale is at the level the sector was made
- if (detectedZoomingOut == true) {
- this._collapseSector();
- }
-
- // check if we zoom in or out
- if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
- // forming clusters when forced pulls outliers in. When not forced, the edge length of the
- // outer nodes determines if it is being clustered
- this._formClusters(force);
- }
- else if (detectedZoomingIn == true || zoomDirection == 1) { // zoom in
- if (force == true) {
- // _openClusters checks for each node if the formationScale of the cluster is smaller than
- // the current scale and if so, declusters. When forced, all clusters are reduced by one step
- this._openClusters(recursive,force);
- }
- else {
- // if a cluster takes up a set percentage of the active window
- //this._openClustersBySize();
- this._openClusters(recursive, false);
- }
- }
- this._updateNodeIndexList();
-
- // if a cluster was NOT formed and the user zoomed out, we try clustering by hubs
- if (this.nodeIndices.length == amountOfNodes && (detectedZoomingOut == true || zoomDirection == -1)) {
- this._aggregateHubs(force);
- this._updateNodeIndexList();
- }
-
- // we now reduce chains.
- if (detectedZoomingOut == true || zoomDirection == -1) { // zoom out
- this.handleChains();
- this._updateNodeIndexList();
- }
-
- this.previousScale = this.scale;
-
- // update labels
- this.updateLabels();
-
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length < amountOfNodes) { // this means a clustering operation has taken place
- this.clusterSession += 1;
- // if clusters have been made, we normalize the cluster level
- this.normalizeClusterLevels();
- }
-
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- }
-
- this._updateCalculationNodes();
-};
-
-/**
- * This function handles the chains. It is called on every updateClusters().
- */
-exports.handleChains = function() {
- // after clustering we check how many chains there are
- var chainPercentage = this._getChainFraction();
- if (chainPercentage > this.constants.clustering.chainThreshold) {
- this._reduceAmountOfChains(1 - this.constants.clustering.chainThreshold / chainPercentage)
-
- }
-};
-
-/**
- * this functions starts clustering by hubs
- * The minimum hub threshold is set globally
- *
- * @private
- */
-exports._aggregateHubs = function(force) {
- this._getHubSize();
- this._formClustersByHub(force,false);
-};
-
-
-/**
- * This function forces hubs to form.
- *
- */
-exports.forceAggregateHubs = function(doNotStart) {
- var isMovingBeforeClustering = this.moving;
- var amountOfNodes = this.nodeIndices.length;
-
- this._aggregateHubs(true);
-
- // update the index list, dynamic edges and labels
- this._updateNodeIndexList();
- this.updateLabels();
-
- this._updateCalculationNodes();
-
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
-
- if (doNotStart == false || doNotStart === undefined) {
- // if the simulation was settled, we restart the simulation if a cluster has been formed or expanded
- if (this.moving != isMovingBeforeClustering) {
- this.start();
- }
- }
-};
-
-/**
- * If a cluster takes up more than a set percentage of the screen, open the cluster
- *
- * @private
- */
-exports._openClustersBySize = function() {
- if (this.constants.clustering.clusterByZoom == true) {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.inView() == true) {
- if ((node.width * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
- (node.height * this.scale > this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
- this.openCluster(node);
- }
- }
- }
- }
- }
-};
-
-
-/**
- * This function loops over all nodes in the nodeIndices list. For each node it checks if it is a cluster and if it
- * has to be opened based on the current zoom level.
- *
- * @private
- */
-exports._openClusters = function(recursive,force) {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- this._expandClusterNode(node,recursive,force);
- this._updateCalculationNodes();
- }
-};
-
-/**
- * This function checks if a node has to be opened. This is done by checking the zoom level.
- * If the node contains child nodes, this function is recursively called on the child nodes as well.
- * This recursive behaviour is optional and can be set by the recursive argument.
- *
- * @param {Node} parentNode | to check for cluster and expand
- * @param {Boolean} recursive | enabled or disable recursive calling
- * @param {Boolean} force | enabled or disable forcing
- * @param {Boolean} [openAll] | This will recursively force all nodes in the parent to be released
- * @private
- */
-exports._expandClusterNode = function(parentNode, recursive, force, openAll) {
- // first check if node is a cluster
- if (parentNode.clusterSize > 1) {
- if (openAll === undefined) {
- openAll = false;
- }
- // this means that on a double tap event or a zoom event, the cluster fully unpacks if it is smaller than 20
-
- recursive = openAll || recursive;
- // if the last child has been added on a smaller scale than current scale decluster
- if (parentNode.formationScale < this.scale || force == true) {
- // we will check if any of the contained child nodes should be removed from the cluster
- for (var containedNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(containedNodeId)) {
- var childNode = parentNode.containedNodes[containedNodeId];
-
- // force expand will expand the largest cluster size clusters. Since we cluster from outside in, we assume that
- // the largest cluster is the one that comes from outside
- if (force == true) {
- if (childNode.clusterSession == parentNode.clusterSessions[parentNode.clusterSessions.length-1]
- || openAll) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- else {
- if (this._nodeInActiveArea(parentNode)) {
- this._expelChildFromParent(parentNode,containedNodeId,recursive,force,openAll);
- }
- }
- }
- }
- }
- }
-};
-
-/**
- * ONLY CALLED FROM _expandClusterNode
- *
- * This function will expel a child_node from a parent_node. This is to de-cluster the node. This function will remove
- * the child node from the parent contained_node object and put it back into the global nodes object.
- * The same holds for the edge that was connected to the child node. It is moved back into the global edges object.
- *
- * @param {Node} parentNode | the parent node
- * @param {String} containedNodeId | child_node id as it is contained in the containedNodes object of the parent node
- * @param {Boolean} recursive | This will also check if the child needs to be expanded.
- * With force and recursive both true, the entire cluster is unpacked
- * @param {Boolean} force | This will disregard the zoom level and will expel this child from the parent
- * @param {Boolean} openAll | This will recursively force all nodes in the parent to be released
- * @private
- */
-exports._expelChildFromParent = function(parentNode, containedNodeId, recursive, force, openAll) {
- var childNode = parentNode.containedNodes[containedNodeId]
-
- // if child node has been added on smaller scale than current, kick out
- if (childNode.formationScale < this.scale || force == true) {
- // unselect all selected items
- this._unselectAll();
-
- // put the child node back in the global nodes object
- this.nodes[containedNodeId] = childNode;
-
- // release the contained edges from this childNode back into the global edges
- this._releaseContainedEdges(parentNode,childNode);
-
- // reconnect rerouted edges to the childNode
- this._connectEdgeBackToChild(parentNode,childNode);
-
- // validate all edges in dynamicEdges
- this._validateEdges(parentNode);
-
- // undo the changes from the clustering operation on the parent node
- parentNode.options.mass -= childNode.options.mass;
- parentNode.clusterSize -= childNode.clusterSize;
- parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*(parentNode.clusterSize-1));
-
- // place the child node near the parent, not at the exact same location to avoid chaos in the system
- childNode.x = parentNode.x + parentNode.growthIndicator * (0.5 - Math.random());
- childNode.y = parentNode.y + parentNode.growthIndicator * (0.5 - Math.random());
-
- // remove node from the list
- delete parentNode.containedNodes[containedNodeId];
-
- // check if there are other childs with this clusterSession in the parent.
- var othersPresent = false;
- for (var childNodeId in parentNode.containedNodes) {
- if (parentNode.containedNodes.hasOwnProperty(childNodeId)) {
- if (parentNode.containedNodes[childNodeId].clusterSession == childNode.clusterSession) {
- othersPresent = true;
- break;
- }
- }
- }
- // if there are no others, remove the cluster session from the list
- if (othersPresent == false) {
- parentNode.clusterSessions.pop();
- }
-
- this._repositionBezierNodes(childNode);
-// this._repositionBezierNodes(parentNode);
-
- // remove the clusterSession from the child node
- childNode.clusterSession = 0;
-
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // restart the simulation to reorganise all nodes
- this.moving = true;
- }
-
- // check if a further expansion step is possible if recursivity is enabled
- if (recursive == true) {
- this._expandClusterNode(childNode,recursive,force,openAll);
- }
-};
-
-
-/**
- * position the bezier nodes at the center of the edges
- *
- * @param node
- * @private
- */
-exports._repositionBezierNodes = function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- node.dynamicEdges[i].positionBezierNode();
- }
-};
-
-
-/**
- * This function checks if any nodes at the end of their trees have edges below a threshold length
- * This function is called only from updateClusters()
- * forceLevelCollapse ignores the length of the edge and collapses one level
- * This means that a node with only one edge will be clustered with its connected node
- *
- * @private
- * @param {Boolean} force
- */
-exports._formClusters = function(force) {
- if (force == false) {
- if (this.constants.clustering.clusterByZoom == true) {
- this._formClustersByZoom();
- }
- }
- else {
- this._forceClustersByZoom();
- }
-};
-
-
-/**
- * This function handles the clustering by zooming out, this is based on a minimum edge distance
- *
- * @private
- */
-exports._formClustersByZoom = function() {
- var dx,dy,length;
- var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
-
- // check if any edges are shorter than minLength and start the clustering
- // the clustering favours the node with the larger mass
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- var edge = this.edges[edgeId];
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
-
- if (length < minLength) {
- // first check which node is larger
- var parentNode = edge.from;
- var childNode = edge.to;
- if (edge.to.options.mass > edge.from.options.mass) {
- parentNode = edge.to;
- childNode = edge.from;
- }
-
- if (childNode.dynamicEdges.length == 1) {
- this._addToCluster(parentNode,childNode,false);
- }
- else if (parentNode.dynamicEdges.length == 1) {
- this._addToCluster(childNode,parentNode,false);
- }
- }
- }
- }
- }
- }
-};
-
-/**
- * This function forces the network to cluster all nodes with only one connecting edge to their
- * connected node.
- *
- * @private
- */
-exports._forceClustersByZoom = function() {
- for (var nodeId in this.nodes) {
- // another node could have absorbed this child.
- if (this.nodes.hasOwnProperty(nodeId)) {
- var childNode = this.nodes[nodeId];
-
- // the edges can be swallowed by another decrease
- if (childNode.dynamicEdges.length == 1) {
- var edge = childNode.dynamicEdges[0];
- var parentNode = (edge.toId == childNode.id) ? this.nodes[edge.fromId] : this.nodes[edge.toId];
- // group to the largest node
- if (childNode.id != parentNode.id) {
- if (parentNode.options.mass > childNode.options.mass) {
- this._addToCluster(parentNode,childNode,true);
- }
- else {
- this._addToCluster(childNode,parentNode,true);
- }
- }
- }
- }
- }
-};
-
-
-/**
- * To keep the nodes of roughly equal size we normalize the cluster levels.
- * This function clusters a node to its smallest connected neighbour.
- *
- * @param node
- * @private
- */
-exports._clusterToSmallestNeighbour = function(node) {
- var smallestNeighbour = -1;
- var smallestNeighbourNode = null;
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- if (node.dynamicEdges[i] !== undefined) {
- var neighbour = null;
- if (node.dynamicEdges[i].fromId != node.id) {
- neighbour = node.dynamicEdges[i].from;
- }
- else if (node.dynamicEdges[i].toId != node.id) {
- neighbour = node.dynamicEdges[i].to;
- }
-
-
- if (neighbour != null && smallestNeighbour > neighbour.clusterSessions.length) {
- smallestNeighbour = neighbour.clusterSessions.length;
- smallestNeighbourNode = neighbour;
- }
- }
- }
-
- if (neighbour != null && this.nodes[neighbour.id] !== undefined) {
- this._addToCluster(neighbour, node, true);
- }
-};
-
-
-/**
- * This function forms clusters from hubs, it loops over all nodes
- *
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
- * @private
- */
-exports._formClustersByHub = function(force, onlyEqual) {
- // we loop over all nodes in the list
- for (var nodeId in this.nodes) {
- // we check if it is still available since it can be used by the clustering in this loop
- if (this.nodes.hasOwnProperty(nodeId)) {
- this._formClusterFromHub(this.nodes[nodeId],force,onlyEqual);
- }
- }
-};
-
-/**
- * This function forms a cluster from a specific preselected hub node
- *
- * @param {Node} hubNode | the node we will cluster as a hub
- * @param {Boolean} force | Disregard zoom level
- * @param {Boolean} onlyEqual | This only clusters a hub with a specific number of edges
- * @param {Number} [absorptionSizeOffset] |
- * @private
- */
-exports._formClusterFromHub = function(hubNode, force, onlyEqual, absorptionSizeOffset) {
- if (absorptionSizeOffset === undefined) {
- absorptionSizeOffset = 0;
- }
- //this.hubThreshold = 43
- //if (hubNode.dynamicEdgesLength < 0) {
- // console.error(hubNode.dynamicEdgesLength, this.hubThreshold, onlyEqual)
- //}
- // we decide if the node is a hub
- if ((hubNode.dynamicEdges.length >= this.hubThreshold && onlyEqual == false) ||
- (hubNode.dynamicEdges.length == this.hubThreshold && onlyEqual == true)) {
- // initialize variables
- var dx,dy,length;
- var minLength = this.constants.clustering.clusterEdgeThreshold/this.scale;
- var allowCluster = false;
-
- // we create a list of edges because the dynamicEdges change over the course of this loop
- var edgesIdarray = [];
- var amountOfInitialEdges = hubNode.dynamicEdges.length;
- for (var j = 0; j < amountOfInitialEdges; j++) {
- edgesIdarray.push(hubNode.dynamicEdges[j].id);
- }
-
- // if the hub clustering is not forced, we check if one of the edges connected
- // to a cluster is small enough based on the constants.clustering.clusterEdgeThreshold
- if (force == false) {
- allowCluster = false;
- for (j = 0; j < amountOfInitialEdges; j++) {
- var edge = this.edges[edgesIdarray[j]];
- if (edge !== undefined) {
- if (edge.connected) {
- if (edge.toId != edge.fromId) {
- dx = (edge.to.x - edge.from.x);
- dy = (edge.to.y - edge.from.y);
- length = Math.sqrt(dx * dx + dy * dy);
-
- if (length < minLength) {
- allowCluster = true;
- break;
- }
- }
- }
- }
- }
- }
-
- // start the clustering if allowed
- if ((!force && allowCluster) || force) {
- var children = [];
- var childrenIds = {};
- // we loop over all edges INITIALLY connected to this hub to get a list of the childNodes
- for (j = 0; j < amountOfInitialEdges; j++) {
- edge = this.edges[edgesIdarray[j]];
- var childNode = this.nodes[(edge.fromId == hubNode.id) ? edge.toId : edge.fromId];
- if (childrenIds[childNode.id] === undefined) {
- childrenIds[childNode.id] = true;
- children.push(childNode);
- }
- }
-
- for (j = 0; j < children.length; j++) {
- var childNode = children[j];
- // we do not want hubs to merge with other hubs nor do we want to cluster itself.
- if ((childNode.dynamicEdges.length <= (this.hubThreshold + absorptionSizeOffset)) &&
- (childNode.id != hubNode.id)) {
- this._addToCluster(hubNode,childNode,force);
-
- }
- else {
- //console.log("WILL NOT MERGE:",childNode.dynamicEdges.length , (this.hubThreshold + absorptionSizeOffset))
- }
- }
-
- }
- }
-};
-
-
-
-/**
- * This function adds the child node to the parent node, creating a cluster if it is not already.
- *
- * @param {Node} parentNode | this is the node that will house the child node
- * @param {Node} childNode | this node will be deleted from the global this.nodes and stored in the parent node
- * @param {Boolean} force | true will only update the remainingEdges at the very end of the clustering, ensuring single level collapse
- * @private
- */
-exports._addToCluster = function(parentNode, childNode, force) {
- // join child node in the parent node
- parentNode.containedNodes[childNode.id] = childNode;
- //console.log(parentNode.id, childNode.id)
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < childNode.dynamicEdges.length; i++) {
- var edge = childNode.dynamicEdges[i];
- if (edge.toId == parentNode.id || edge.fromId == parentNode.id) { // edge connected to parentNode
- //console.log("COLLECT",parentNode.id, childNode.id, edge.toId, edge.fromId)
- this._addToContainedEdges(parentNode,childNode,edge);
- }
- else {
- //console.log("REWIRE",parentNode.id, childNode.id, edge.toId, edge.fromId)
- this._connectEdgeToCluster(parentNode,childNode,edge);
- }
- }
- // a contained node has no dynamic edges.
- childNode.dynamicEdges = [];
-
- // remove circular edges from clusters
- this._containCircularEdgesFromNode(parentNode,childNode);
-
-
- // remove the childNode from the global nodes object
- delete this.nodes[childNode.id];
-
- // update the properties of the child and parent
- var massBefore = parentNode.options.mass;
- childNode.clusterSession = this.clusterSession;
- parentNode.options.mass += childNode.options.mass;
- parentNode.clusterSize += childNode.clusterSize;
- parentNode.options.fontSize = Math.min(this.constants.clustering.maxFontSize, this.constants.nodes.fontSize + this.constants.clustering.fontSizeMultiplier*parentNode.clusterSize);
-
- // keep track of the clustersessions so we can open the cluster up as it has been formed.
- if (parentNode.clusterSessions[parentNode.clusterSessions.length - 1] != this.clusterSession) {
- parentNode.clusterSessions.push(this.clusterSession);
- }
-
- // forced clusters only open from screen size and double tap
- if (force == true) {
- parentNode.formationScale = 0;
- }
- else {
- parentNode.formationScale = this.scale; // The latest child has been added on this scale
- }
-
- // recalculate the size of the node on the next time the node is rendered
- parentNode.clearSizeCache();
-
- // set the pop-out scale for the childnode
- parentNode.containedNodes[childNode.id].formationScale = parentNode.formationScale;
-
- // nullify the movement velocity of the child, this is to avoid hectic behaviour
- childNode.clearVelocity();
-
- // the mass has altered, preservation of energy dictates the velocity to be updated
- parentNode.updateVelocity(massBefore);
-
- // restart the simulation to reorganise all nodes
- this.moving = true;
-};
-
-
-/**
- * This adds an edge from the childNode to the contained edges of the parent node
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
- * @private
- */
-exports._addToContainedEdges = function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- if (parentNode.containedEdges[childNode.id] === undefined) {
- parentNode.containedEdges[childNode.id] = []
- }
- // add this edge to the list
- parentNode.containedEdges[childNode.id].push(edge);
-
- // remove the edge from the global edges object
- delete this.edges[edge.id];
-
- // remove the edge from the parent object
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- if (parentNode.dynamicEdges[i].id == edge.id) {
- parentNode.dynamicEdges.splice(i,1);
- break;
- }
- }
-};
-
-/**
- * This function connects an edge that was connected to a child node to the parent node.
- * It keeps track of which nodes it has been connected to with the originalId array.
- *
- * @param {Node} parentNode | Node object
- * @param {Node} childNode | Node object
- * @param {Edge} edge | Edge object
- * @private
- */
-exports._connectEdgeToCluster = function(parentNode, childNode, edge) {
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
- }
- else {
- if (edge.toId == childNode.id) { // edge connected to other node on the "to" side
- edge.originalToId.push(childNode.id);
- edge.to = parentNode;
- edge.toId = parentNode.id;
- }
- else { // edge connected to other node with the "from" side
- edge.originalFromId.push(childNode.id);
- edge.from = parentNode;
- edge.fromId = parentNode.id;
- }
-
- this._addToReroutedEdges(parentNode,childNode,edge);
- }
-};
-
-
-/**
- * If a node is connected to itself, a circular edge is drawn. When clustering we want to contain
- * these edges inside of the cluster.
- *
- * @param parentNode
- * @param childNode
- * @private
- */
-exports._containCircularEdgesFromNode = function(parentNode, childNode) {
- // manage all the edges connected to the child and parent nodes
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- // handle circular edges
- if (edge.toId == edge.fromId) {
- this._addToContainedEdges(parentNode, childNode, edge);
- }
- }
-};
-
-
-/**
- * This adds an edge from the childNode to the rerouted edges of the parent node
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @param edge | Edge object
- * @private
- */
-exports._addToReroutedEdges = function(parentNode, childNode, edge) {
- // create an array object if it does not yet exist for this childNode
- // we store the edge in the rerouted edges so we can restore it when the cluster pops open
- if (!(parentNode.reroutedEdges.hasOwnProperty(childNode.id))) {
- parentNode.reroutedEdges[childNode.id] = [];
- }
- parentNode.reroutedEdges[childNode.id].push(edge);
-
- // this edge becomes part of the dynamicEdges of the cluster node
- parentNode.dynamicEdges.push(edge);
- };
-
-
-
-/**
- * This function connects an edge that was connected to a cluster node back to the child node.
- *
- * @param parentNode | Node object
- * @param childNode | Node object
- * @private
- */
-exports._connectEdgeBackToChild = function(parentNode, childNode) {
- if (parentNode.reroutedEdges.hasOwnProperty(childNode.id)) {
- for (var i = 0; i < parentNode.reroutedEdges[childNode.id].length; i++) {
- var edge = parentNode.reroutedEdges[childNode.id][i];
- if (edge.originalFromId[edge.originalFromId.length-1] == childNode.id) {
- edge.originalFromId.pop();
- edge.fromId = childNode.id;
- edge.from = childNode;
- }
- else {
- edge.originalToId.pop();
- edge.toId = childNode.id;
- edge.to = childNode;
- }
-
- // append this edge to the list of edges connecting to the childnode
- childNode.dynamicEdges.push(edge);
-
- // remove the edge from the parent object
- for (var j = 0; j < parentNode.dynamicEdges.length; j++) {
- if (parentNode.dynamicEdges[j].id == edge.id) {
- parentNode.dynamicEdges.splice(j,1);
- break;
- }
- }
- }
- // remove the entry from the rerouted edges
- delete parentNode.reroutedEdges[childNode.id];
- }
-};
-
-
-/**
- * When loops are clustered, an edge can be both in the rerouted array and the contained array.
- * This function is called last to verify that all edges in dynamicEdges are in fact connected to the
- * parentNode
- *
- * @param parentNode | Node object
- * @private
- */
-exports._validateEdges = function(parentNode) {
- var dynamicEdges = []
- for (var i = 0; i < parentNode.dynamicEdges.length; i++) {
- var edge = parentNode.dynamicEdges[i];
- if (parentNode.id == edge.toId || parentNode.id == edge.fromId) {
- dynamicEdges.push(edge);
- }
- }
- parentNode.dynamicEdges = dynamicEdges;
-};
-
-
-/**
- * This function released the contained edges back into the global domain and puts them back into the
- * dynamic edges of both parent and child.
- *
- * @param {Node} parentNode |
- * @param {Node} childNode |
- * @private
- */
-exports._releaseContainedEdges = function(parentNode, childNode) {
- for (var i = 0; i < parentNode.containedEdges[childNode.id].length; i++) {
- var edge = parentNode.containedEdges[childNode.id][i];
-
- // put the edge back in the global edges object
- this.edges[edge.id] = edge;
-
- // put the edge back in the dynamic edges of the child and parent
- childNode.dynamicEdges.push(edge);
- parentNode.dynamicEdges.push(edge);
- }
- // remove the entry from the contained edges
- delete parentNode.containedEdges[childNode.id];
-
-};
-
-
-
-
-// ------------------- UTILITY FUNCTIONS ---------------------------- //
-
-
-/**
- * This updates the node labels for all nodes (for debugging purposes)
- */
-exports.updateLabels = function() {
- var nodeId;
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
- if (node.clusterSize > 1) {
- node.label = "[".concat(String(node.clusterSize),"]");
- }
- }
- }
-
- // update node labels
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
- if (node.clusterSize == 1) {
- if (node.originalLabel !== undefined) {
- node.label = node.originalLabel;
- }
- else {
- node.label = String(node.id);
- }
- }
- }
- }
-
-// /* Debug Override */
-// for (nodeId in this.nodes) {
-// if (this.nodes.hasOwnProperty(nodeId)) {
-// node = this.nodes[nodeId];
-// node.label = String(node.clusterSize + ":" + node.dynamicEdges.length);
-// }
-// }
-
-};
-
-
-/**
- * We want to keep the cluster level distribution rather small. This means we do not want unclustered nodes
- * if the rest of the nodes are already a few cluster levels in.
- * To fix this we use this function. It determines the min and max cluster level and sends nodes that have not
- * clustered enough to the clusterToSmallestNeighbours function.
- */
-exports.normalizeClusterLevels = function() {
- var maxLevel = 0;
- var minLevel = 1e9;
- var clusterLevel = 0;
- var nodeId;
-
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- clusterLevel = this.nodes[nodeId].clusterSessions.length;
- if (maxLevel < clusterLevel) {maxLevel = clusterLevel;}
- if (minLevel > clusterLevel) {minLevel = clusterLevel;}
- }
- }
-
- if (maxLevel - minLevel > this.constants.clustering.clusterLevelDifference) {
- var amountOfNodes = this.nodeIndices.length;
- var targetLevel = maxLevel - this.constants.clustering.clusterLevelDifference;
- // we loop over all nodes in the list
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].clusterSessions.length < targetLevel) {
- this._clusterToSmallestNeighbour(this.nodes[nodeId]);
- }
- }
- }
- this._updateNodeIndexList();
- // if a cluster was formed, we increase the clusterSession
- if (this.nodeIndices.length != amountOfNodes) {
- this.clusterSession += 1;
- }
- }
-};
-
-
-
-/**
- * This function determines if the cluster we want to decluster is in the active area
- * this means around the zoom center
- *
- * @param {Node} node
- * @returns {boolean}
- * @private
- */
-exports._nodeInActiveArea = function(node) {
- return (
- Math.abs(node.x - this.areaCenter.x) <= this.constants.clustering.activeAreaBoxSize/this.scale
- &&
- Math.abs(node.y - this.areaCenter.y) <= this.constants.clustering.activeAreaBoxSize/this.scale
- )
-};
-
-
-/**
- * This is an adaptation of the original repositioning function. This is called if the system is clustered initially
- * It puts large clusters away from the center and randomizes the order.
- *
- */
-exports.repositionNodes = function() {
- for (var i = 0; i < this.nodeIndices.length; i++) {
- var node = this.nodes[this.nodeIndices[i]];
- if ((node.xFixed == false || node.yFixed == false)) {
- var radius = 10 * 0.1*this.nodeIndices.length * Math.min(100,node.options.mass);
- var angle = 2 * Math.PI * Math.random();
- if (node.xFixed == false) {node.x = radius * Math.cos(angle);}
- if (node.yFixed == false) {node.y = radius * Math.sin(angle);}
- this._repositionBezierNodes(node);
- }
- }
-};
-
-
-/**
- * We determine how many connections denote an important hub.
- * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
- *
- * @private
- */
-exports._getHubSize = function() {
- var average = 0;
- var averageSquared = 0;
- var hubCounter = 0;
- var largestHub = 0;
-
- for (var i = 0; i < this.nodeIndices.length; i++) {
-
- var node = this.nodes[this.nodeIndices[i]];
- if (node.dynamicEdges.length > largestHub) {
- largestHub = node.dynamicEdges.length;
- }
- average += node.dynamicEdges.length;
- averageSquared += Math.pow(node.dynamicEdges.length,2);
- hubCounter += 1;
- }
- average = average / hubCounter;
- averageSquared = averageSquared / hubCounter;
-
- var variance = averageSquared - Math.pow(average,2);
-
- var standardDeviation = Math.sqrt(variance);
-
- this.hubThreshold = Math.floor(average + 2*standardDeviation);
-
- // always have at least one to cluster
- if (this.hubThreshold > largestHub) {
- this.hubThreshold = largestHub;
- }
-
-// console.log("average",average,"averageSQ",averageSquared,"var",variance,"std",standardDeviation);
-// console.log("hubThreshold:",this.hubThreshold);
-};
-
-
-/**
- * We reduce the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @param {Number} fraction | between 0 and 1, the percentage of chains to reduce
- * @private
- */
-exports._reduceAmountOfChains = function(fraction) {
- this.hubThreshold = 2;
- var reduceAmount = Math.floor(this.nodeIndices.length * fraction);
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdges.length == 2) {
- if (reduceAmount > 0) {
- this._formClusterFromHub(this.nodes[nodeId],true,true,1);
- reduceAmount -= 1;
- }
- }
- }
- }
-};
-
-/**
- * We get the amount of "extension nodes" or chains. These are not quickly clustered with the outliers and hubs methods
- * with this amount we can cluster specifically on these chains.
- *
- * @private
- */
-exports._getChainFraction = function() {
- var chains = 0;
- var total = 0;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- if (this.nodes[nodeId].dynamicEdges.length == 2) {
- chains += 1;
- }
- total += 1;
- }
- }
- return chains/total;
-};
diff --git a/lib/network/mixins/HierarchicalLayoutMixin.js b/lib/network/mixins/HierarchicalLayoutMixin.js
index 4d4cd54e..1fe143af 100644
--- a/lib/network/mixins/HierarchicalLayoutMixin.js
+++ b/lib/network/mixins/HierarchicalLayoutMixin.js
@@ -1,7 +1,7 @@
exports._resetLevels = function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- var node = this.nodes[nodeId];
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ var node = this.body.nodes[nodeId];
if (node.preassignedLevel == false) {
node.level = -1;
node.hierarchyEnumerated = false;
@@ -24,9 +24,9 @@ exports._setupHierarchicalLayout = function() {
var definedLevel = false;
var undefinedLevel = false;
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
if (node.level != -1) {
definedLevel = true;
}
@@ -64,11 +64,8 @@ exports._setupHierarchicalLayout = function() {
// check the distribution of the nodes per level.
var distribution = this._getDistribution();
- // place the nodes on the canvas. This also stablilizes the system.
+ // place the nodes on the canvas. This also stablilizes the system. Redraw in started automatically after stabilize.
this._placeNodesByHierarchy(distribution);
-
- // start the simulation.
- this.start();
}
}
};
@@ -129,9 +126,9 @@ exports._getDistribution = function() {
// we fix Y because the hierarchy is vertical, we fix X so we do not give a node an x position for a second time.
// the fix of X is removed after the x value has been set.
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
node.xFixed = true;
node.yFixed = true;
if (this.constants.hierarchicalLayout.direction == "UD" || this.constants.hierarchicalLayout.direction == "DU") {
@@ -181,9 +178,9 @@ exports._determineLevels = function(hubsize) {
var nodeId, node;
// determine hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
if (node.edges.length == hubsize) {
node.level = 0;
}
@@ -191,9 +188,9 @@ exports._determineLevels = function(hubsize) {
}
// branch from hubs
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
if (node.level == 0) {
this._setLevel(1,node.edges,node.id);
}
@@ -214,22 +211,22 @@ exports._determineLevelsDirected = function() {
var minLevel = 10000;
// set first node to source
- firstNode = this.nodes[this.nodeIndices[0]];
+ firstNode = this.body.nodes[this.nodeIndices[0]];
firstNode.level = minLevel;
this._setLevelDirected(minLevel,firstNode.edges,firstNode.id);
// get the minimum level
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
minLevel = node.level < minLevel ? node.level : minLevel;
}
}
// subtract the minimum from the set so we have a range starting from 0
- for (nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
node.level -= minLevel;
}
}
@@ -357,7 +354,7 @@ exports._setLevel = function(level, edges, parentId) {
* @private
*/
exports._setLevelDirected = function(level, edges, parentId) {
- this.nodes[parentId].hierarchyEnumerated = true;
+ this.body.nodes[parentId].hierarchyEnumerated = true;
var childNode, direction;
for (var i = 0; i < edges.length; i++) {
direction = 1;
@@ -390,10 +387,10 @@ exports._setLevelDirected = function(level, edges, parentId) {
* @private
*/
exports._restoreNodes = function() {
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.nodes[nodeId].xFixed = false;
- this.nodes[nodeId].yFixed = false;
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ this.body.nodes[nodeId].xFixed = false;
+ this.body.nodes[nodeId].yFixed = false;
}
}
};
diff --git a/lib/network/mixins/ManipulationMixin.js b/lib/network/mixins/ManipulationMixin.js
index 26f634d8..9052b780 100644
--- a/lib/network/mixins/ManipulationMixin.js
+++ b/lib/network/mixins/ManipulationMixin.js
@@ -15,10 +15,10 @@ exports._clearManipulatorBar = function() {
this._cleanManipulatorHammers();
this._manipulationReleaseOverload = function () {};
- delete this.sectors['support']['nodes']['targetNode'];
- delete this.sectors['support']['nodes']['targetViaNode'];
+ delete this.body.sectors['support']['nodes']['targetNode'];
+ delete this.body.sectors['support']['nodes']['targetViaNode'];
this.controlNodesActive = false;
- this.freezeSimulation(false);
+ this.freezeSimulationEnabled = false;
};
@@ -276,7 +276,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);
@@ -284,7 +284,6 @@ exports._createAddEdgeToolbar = function() {
var locale = this.constants.locales[this.constants.locale];
- this._unselectAll();
this.forceAppendSelection = false;
this.blockConnectingEdgeSelection = true;
@@ -466,22 +465,22 @@ exports._handleConnect = function(pointer) {
var node = this._getNodeAt(pointer);
if (node != null) {
- if (node.clusterSize > 1) {
+ if (this.isCluster(node.id) == true) {
alert(this.constants.locales[this.constants.locale]['createEdgeError'])
}
else {
this._selectObject(node,false);
- var supportNodes = this.sectors['support']['nodes'];
+ var supportNodes = this.body.sectors['support']['nodes'];
// create a node the temporary line can look at
- supportNodes['targetNode'] = new Node({id:'targetNode'},{},{},this.constants);
+ supportNodes['targetNode'] = this.body.functions.createNode({id:'targetNode'});
var targetNode = supportNodes['targetNode'];
targetNode.x = node.x;
targetNode.y = node.y;
// create a temporary edge
- this.edges['connectionEdge'] = new Edge({id:"connectionEdge",from:node.id,to:targetNode.id}, this, this.constants);
- var connectionEdge = this.edges['connectionEdge'];
+ this.body.edges['connectionEdge'] = this.body.functions.createEdge({id:"connectionEdge",from:node.id,to:targetNode.id});
+ var connectionEdge = this.body.edges['connectionEdge'];
connectionEdge.from = node;
connectionEdge.connected = true;
connectionEdge.options.smoothCurves = {enabled: true,
@@ -495,15 +494,12 @@ exports._handleConnect = function(pointer) {
this.cachedFunctions["_handleOnDrag"] = this._handleOnDrag;
var me = this;
this._handleOnDrag = function(event) {
- var pointer = this._getPointer(event.gesture.center);
- var connectionEdge = me.edges['connectionEdge'];
+ var pointer = me._getPointer(event.gesture.center);
+ var connectionEdge = me.body.edges['connectionEdge'];
connectionEdge.to.x = me._XconvertDOMtoCanvas(pointer.x);
connectionEdge.to.y = me._YconvertDOMtoCanvas(pointer.y);
me._redraw();
};
-
- this.moving = true;
- this.start();
}
}
}
@@ -517,16 +513,16 @@ exports._finishConnect = function(event) {
delete this.cachedFunctions["_handleOnDrag"];
// remember the edge id
- var connectFromId = this.edges['connectionEdge'].fromId;
+ var connectFromId = this.body.edges['connectionEdge'].fromId;
// remove the temporary nodes and edge
- delete this.edges['connectionEdge'];
- delete this.sectors['support']['nodes']['targetNode'];
- delete this.sectors['support']['nodes']['targetViaNode'];
+ delete this.body.edges['connectionEdge'];
+ delete this.body.sectors['support']['nodes']['targetNode'];
+ delete this.body.sectors['support']['nodes']['targetViaNode'];
var node = this._getNodeAt(pointer);
if (node != null) {
- if (node.clusterSize > 1) {
+ if (this.isCluster(node.id) === true) {
alert(this.constants.locales[this.constants.locale]["createEdgeError"])
}
else {
@@ -550,7 +546,7 @@ exports._addNode = function() {
if (this.triggerFunctions.add.length == 2) {
var me = this;
this.triggerFunctions.add(defaultData, function(finalizedData) {
- me.nodesData.add(finalizedData);
+ me.body.data.nodes.add(finalizedData);
me._createManipulatorBar();
me.moving = true;
me.start();
@@ -564,7 +560,7 @@ exports._addNode = function() {
}
}
else {
- this.nodesData.add(defaultData);
+ this.body.data.nodes.add(defaultData);
this._createManipulatorBar();
this.moving = true;
this.start();
@@ -585,7 +581,7 @@ exports._createEdge = function(sourceNodeId,targetNodeId) {
if (this.triggerFunctions.connect.length == 2) {
var me = this;
this.triggerFunctions.connect(defaultData, function(finalizedData) {
- me.edgesData.add(finalizedData);
+ me.body.data.edges.add(finalizedData);
me.moving = true;
me.start();
});
@@ -597,7 +593,7 @@ exports._createEdge = function(sourceNodeId,targetNodeId) {
}
}
else {
- this.edgesData.add(defaultData);
+ this.body.data.edges.add(defaultData);
this.moving = true;
this.start();
}
@@ -612,11 +608,12 @@ exports._createEdge = function(sourceNodeId,targetNodeId) {
exports._editEdge = function(sourceNodeId,targetNodeId) {
if (this.editMode == true) {
var defaultData = {id: this.edgeBeingEdited.id, from:sourceNodeId, to:targetNodeId};
+ console.log(defaultData);
if (this.triggerFunctions.editEdge) {
if (this.triggerFunctions.editEdge.length == 2) {
var me = this;
this.triggerFunctions.editEdge(defaultData, function(finalizedData) {
- me.edgesData.update(finalizedData);
+ me.body.data.edges.update(finalizedData);
me.moving = true;
me.start();
});
@@ -628,7 +625,7 @@ exports._editEdge = function(sourceNodeId,targetNodeId) {
}
}
else {
- this.edgesData.update(defaultData);
+ this.body.data.edges.update(defaultData);
this.moving = true;
this.start();
}
@@ -658,7 +655,7 @@ exports._editNode = function() {
if (this.triggerFunctions.edit.length == 2) {
var me = this;
this.triggerFunctions.edit(data, function (finalizedData) {
- me.nodesData.update(finalizedData);
+ me.body.data.nodes.update(finalizedData);
me._createManipulatorBar();
me.moving = true;
me.start();
@@ -691,8 +688,8 @@ exports._deleteSelected = function() {
var data = {nodes: selectedNodes, edges: selectedEdges};
if (this.triggerFunctions.del.length == 2) {
this.triggerFunctions.del(data, function (finalizedData) {
- me.edgesData.remove(finalizedData.edges);
- me.nodesData.remove(finalizedData.nodes);
+ me.body.data.edges.remove(finalizedData.edges);
+ me.body.data.nodes.remove(finalizedData.nodes);
me._unselectAll();
me.moving = true;
me.start();
@@ -703,8 +700,8 @@ exports._deleteSelected = function() {
}
}
else {
- this.edgesData.remove(selectedEdges);
- this.nodesData.remove(selectedNodes);
+ this.body.data.edges.remove(selectedEdges);
+ this.body.data.nodes.remove(selectedNodes);
this._unselectAll();
this.moving = true;
this.start();
diff --git a/lib/network/mixins/MixinLoader.js b/lib/network/mixins/MixinLoader.js
index cd7e96cf..568e15d6 100644
--- a/lib/network/mixins/MixinLoader.js
+++ b/lib/network/mixins/MixinLoader.js
@@ -1,6 +1,3 @@
-var PhysicsMixin = require('./physics/PhysicsMixin');
-var ClusterMixin = require('./ClusterMixin');
-var SectorsMixin = require('./SectorsMixin');
var SelectionMixin = require('./SelectionMixin');
var ManipulationMixin = require('./ManipulationMixin');
var NavigationMixin = require('./NavigationMixin');
@@ -53,43 +50,6 @@ exports._loadPhysicsSystem = function () {
};
-/**
- * Mixin the cluster system and initialize the parameters required.
- *
- * @private
- */
-exports._loadClusterSystem = function () {
- this.clusterSession = 0;
- this.hubThreshold = 5;
- this._loadMixin(ClusterMixin);
-};
-
-
-/**
- * Mixin the sector system and initialize the parameters required
- *
- * @private
- */
-exports._loadSectorSystem = function () {
- this.sectors = {};
- this.activeSector = ["default"];
- this.sectors["active"] = {};
- this.sectors["active"]["default"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
- this.sectors["frozen"] = {};
- this.sectors["support"] = {"nodes": {},
- "edges": {},
- "nodeIndices": [],
- "formationScale": 1.0,
- "drawingNode": undefined };
-
- this.nodeIndices = this.sectors["active"]["default"]["nodeIndices"]; // the node indices list is used to speed up the computation of the repulsion fields
-
- this._loadMixin(SectorsMixin);
-};
/**
diff --git a/lib/network/mixins/SectorsMixin.js b/lib/network/mixins/SectorsMixin.js
index 22b53965..802b4422 100644
--- a/lib/network/mixins/SectorsMixin.js
+++ b/lib/network/mixins/SectorsMixin.js
@@ -16,9 +16,9 @@ var Node = require('../Node');
* @private
*/
exports._putDataInSector = function() {
- this.sectors["active"][this._sector()].nodes = this.nodes;
- this.sectors["active"][this._sector()].edges = this.edges;
- this.sectors["active"][this._sector()].nodeIndices = this.nodeIndices;
+ this.body.sectors["active"][this._sector()].nodes = this.body.nodes;
+ this.body.sectors["active"][this._sector()].edges = this.body.edges;
+ this.body.sectors["active"][this._sector()].nodeIndices = this.body.nodeIndices;
};
@@ -49,9 +49,9 @@ exports._switchToSector = function(sectorId, sectorType) {
* @private
*/
exports._switchToActiveSector = function(sectorId) {
- this.nodeIndices = this.sectors["active"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["active"][sectorId]["nodes"];
- this.edges = this.sectors["active"][sectorId]["edges"];
+ this.body.nodeIndices = this.body.sectors["active"][sectorId]["nodeIndices"];
+ this.body.nodes = this.body.sectors["active"][sectorId]["nodes"];
+ this.body.edges = this.body.sectors["active"][sectorId]["edges"];
};
@@ -62,9 +62,9 @@ exports._switchToActiveSector = function(sectorId) {
* @private
*/
exports._switchToSupportSector = function() {
- this.nodeIndices = this.sectors["support"]["nodeIndices"];
- this.nodes = this.sectors["support"]["nodes"];
- this.edges = this.sectors["support"]["edges"];
+ this.body.nodeIndices = this.body.sectors["support"]["nodeIndices"];
+ this.body.nodes = this.body.sectors["support"]["nodes"];
+ this.body.edges = this.body.sectors["support"]["edges"];
};
@@ -76,9 +76,9 @@ exports._switchToSupportSector = function() {
* @private
*/
exports._switchToFrozenSector = function(sectorId) {
- this.nodeIndices = this.sectors["frozen"][sectorId]["nodeIndices"];
- this.nodes = this.sectors["frozen"][sectorId]["nodes"];
- this.edges = this.sectors["frozen"][sectorId]["edges"];
+ this.body.nodeIndices = this.body.sectors["frozen"][sectorId]["nodeIndices"];
+ this.body.nodes = this.body.sectors["frozen"][sectorId]["nodes"];
+ this.body.edges = this.body.sectors["frozen"][sectorId]["edges"];
};
@@ -153,21 +153,21 @@ exports._forgetLastSector = function() {
*/
exports._createNewSector = function(newId) {
// create the new sector
- this.sectors["active"][newId] = {"nodes":{},
+ this.body.sectors["active"][newId] = {"nodes":{},
"edges":{},
"nodeIndices":[],
"formationScale": this.scale,
"drawingNode": undefined};
// create the new sector render node. This gives visual feedback that you are in a new sector.
- this.sectors["active"][newId]['drawingNode'] = new Node(
+ this.body.sectors["active"][newId]['drawingNode'] = new Node(
{id:newId,
color: {
background: "#eaefef",
border: "495c5e"
}
},{},{},this.constants);
- this.sectors["active"][newId]['drawingNode'].clusterSize = 2;
+ this.body.sectors["active"][newId]['drawingNode'].clusterSize = 2;
};
@@ -179,7 +179,7 @@ exports._createNewSector = function(newId) {
* @private
*/
exports._deleteActiveSector = function(sectorId) {
- delete this.sectors["active"][sectorId];
+ delete this.body.sectors["active"][sectorId];
};
@@ -191,7 +191,7 @@ exports._deleteActiveSector = function(sectorId) {
* @private
*/
exports._deleteFrozenSector = function(sectorId) {
- delete this.sectors["frozen"][sectorId];
+ delete this.body.sectors["frozen"][sectorId];
};
@@ -204,7 +204,7 @@ exports._deleteFrozenSector = function(sectorId) {
*/
exports._freezeSector = function(sectorId) {
// we move the set references from the active to the frozen stack.
- this.sectors["frozen"][sectorId] = this.sectors["active"][sectorId];
+ this.body.sectors["frozen"][sectorId] = this.body.sectors["active"][sectorId];
// we have moved the sector data into the frozen set, we now remove it from the active set
this._deleteActiveSector(sectorId);
@@ -220,7 +220,7 @@ exports._freezeSector = function(sectorId) {
*/
exports._activateSector = function(sectorId) {
// we move the set references from the frozen to the active stack.
- this.sectors["active"][sectorId] = this.sectors["frozen"][sectorId];
+ this.body.sectors["active"][sectorId] = this.body.sectors["frozen"][sectorId];
// we have moved the sector data into the active set, we now remove it from the frozen stack
this._deleteFrozenSector(sectorId);
@@ -238,22 +238,22 @@ exports._activateSector = function(sectorId) {
*/
exports._mergeThisWithFrozen = function(sectorId) {
// copy all nodes
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.sectors["frozen"][sectorId]["nodes"][nodeId] = this.nodes[nodeId];
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ this.body.sectors["frozen"][sectorId]["nodes"][nodeId] = this.body.nodes[nodeId];
}
}
// copy all edges (if not fully clustered, else there are no edges)
- for (var edgeId in this.edges) {
- if (this.edges.hasOwnProperty(edgeId)) {
- this.sectors["frozen"][sectorId]["edges"][edgeId] = this.edges[edgeId];
+ for (var edgeId in this.body.edges) {
+ if (this.body.edges.hasOwnProperty(edgeId)) {
+ this.body.sectors["frozen"][sectorId]["edges"][edgeId] = this.body.edges[edgeId];
}
}
// merge the nodeIndices
- for (var i = 0; i < this.nodeIndices.length; i++) {
- this.sectors["frozen"][sectorId]["nodeIndices"].push(this.nodeIndices[i]);
+ for (var i = 0; i < this.body.nodeIndices.length; i++) {
+ this.body.sectors["frozen"][sectorId]["nodeIndices"].push(this.body.nodeIndices[i]);
}
};
@@ -280,7 +280,7 @@ exports._addSector = function(node) {
var sector = this._sector();
// // this should allow me to select nodes from a frozen set.
-// if (this.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) {
+// if (this.body.sectors['active'][sector]["nodes"].hasOwnProperty(node.id)) {
// console.log("the node is part of the active sector");
// }
// else {
@@ -288,7 +288,7 @@ exports._addSector = function(node) {
// }
// when we switch to a new sector, we remove the node that will be expanded from the current nodes list.
- delete this.nodes[node.id];
+ delete this.body.nodes[node.id];
var unqiueIdentifier = util.randomUUID();
@@ -305,7 +305,7 @@ exports._addSector = function(node) {
this._switchToSector(this._sector());
// finally we add the node we removed from our previous active sector to the new active sector
- this.nodes[node.id] = node;
+ this.body.nodes[node.id] = node;
};
@@ -321,9 +321,9 @@ exports._collapseSector = function() {
// we cannot collapse the default sector
if (sector != "default") {
- if ((this.nodeIndices.length == 1) ||
- (this.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
- (this.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
+ if ((this.body.nodeIndices.length == 1) ||
+ (this.body.sectors["active"][sector]["drawingNode"].width*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientWidth) ||
+ (this.body.sectors["active"][sector]["drawingNode"].height*this.scale < this.constants.clustering.screenSizeThreshold * this.frame.canvas.clientHeight)) {
var previousSector = this._previousSector();
// we collapse the sector back to a single cluster
@@ -368,8 +368,8 @@ exports._collapseSector = function() {
exports._doInAllActiveSectors = function(runFunction,argument) {
var returnValues = [];
if (argument === undefined) {
- for (var sector in this.sectors["active"]) {
- if (this.sectors["active"].hasOwnProperty(sector)) {
+ for (var sector in this.body.sectors["active"]) {
+ if (this.body.sectors["active"].hasOwnProperty(sector)) {
// switch the global references to those of this sector
this._switchToActiveSector(sector);
returnValues.push( this[runFunction]() );
@@ -377,8 +377,8 @@ exports._doInAllActiveSectors = function(runFunction,argument) {
}
}
else {
- for (var sector in this.sectors["active"]) {
- if (this.sectors["active"].hasOwnProperty(sector)) {
+ for (var sector in this.body.sectors["active"]) {
+ if (this.body.sectors["active"].hasOwnProperty(sector)) {
// switch the global references to those of this sector
this._switchToActiveSector(sector);
var args = Array.prototype.splice.call(arguments, 1);
@@ -439,8 +439,8 @@ exports._doInSupportSector = function(runFunction,argument) {
*/
exports._doInAllFrozenSectors = function(runFunction,argument) {
if (argument === undefined) {
- for (var sector in this.sectors["frozen"]) {
- if (this.sectors["frozen"].hasOwnProperty(sector)) {
+ for (var sector in this.body.sectors["frozen"]) {
+ if (this.body.sectors["frozen"].hasOwnProperty(sector)) {
// switch the global references to those of this sector
this._switchToFrozenSector(sector);
this[runFunction]();
@@ -448,8 +448,8 @@ exports._doInAllFrozenSectors = function(runFunction,argument) {
}
}
else {
- for (var sector in this.sectors["frozen"]) {
- if (this.sectors["frozen"].hasOwnProperty(sector)) {
+ for (var sector in this.body.sectors["frozen"]) {
+ if (this.body.sectors["frozen"].hasOwnProperty(sector)) {
// switch the global references to those of this sector
this._switchToFrozenSector(sector);
var args = Array.prototype.splice.call(arguments, 1);
@@ -495,15 +495,15 @@ exports._doInAllSectors = function(runFunction,argument) {
/**
- * This clears the nodeIndices list. We cannot use this.nodeIndices = [] because we would break the link with the
- * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.nodeIndices to it.
+ * This clears the nodeIndices list. We cannot use this.body.nodeIndices = [] because we would break the link with the
+ * active sector. Thus we clear the nodeIndices in the active sector, then reconnect the this.body.nodeIndices to it.
*
* @private
*/
exports._clearNodeIndexList = function() {
var sector = this._sector();
- this.sectors["active"][sector]["nodeIndices"] = [];
- this.nodeIndices = this.sectors["active"][sector]["nodeIndices"];
+ this.body.sectors["active"][sector]["nodeIndices"] = [];
+ this.body.nodeIndices = this.body.sectors["active"][sector]["nodeIndices"];
};
@@ -516,16 +516,16 @@ exports._clearNodeIndexList = function() {
*/
exports._drawSectorNodes = function(ctx,sectorType) {
var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
- for (var sector in this.sectors[sectorType]) {
- if (this.sectors[sectorType].hasOwnProperty(sector)) {
- if (this.sectors[sectorType][sector]["drawingNode"] !== undefined) {
+ for (var sector in this.body.sectors[sectorType]) {
+ if (this.body.sectors[sectorType].hasOwnProperty(sector)) {
+ if (this.body.sectors[sectorType][sector]["drawingNode"] !== undefined) {
this._switchToSector(sector,sectorType);
minY = 1e9; maxY = -1e9; minX = 1e9; maxX = -1e9;
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- node = this.nodes[nodeId];
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
node.resize(ctx);
if (minX > node.x - 0.5 * node.width) {minX = node.x - 0.5 * node.width;}
if (maxX < node.x + 0.5 * node.width) {maxX = node.x + 0.5 * node.width;}
@@ -533,7 +533,7 @@ exports._drawSectorNodes = function(ctx,sectorType) {
if (maxY < node.y + 0.5 * node.height) {maxY = node.y + 0.5 * node.height;}
}
}
- node = this.sectors[sectorType][sector]["drawingNode"];
+ node = this.body.sectors[sectorType][sector]["drawingNode"];
node.x = 0.5 * (maxX + minX);
node.y = 0.5 * (maxY + minY);
node.width = 2 * (node.x - minX);
diff --git a/lib/network/mixins/SelectionMixin.js b/lib/network/mixins/SelectionMixin.js
index 51c1e700..09d74c91 100644
--- a/lib/network/mixins/SelectionMixin.js
+++ b/lib/network/mixins/SelectionMixin.js
@@ -1,14 +1,13 @@
var Node = require('../Node');
/**
- * This function can be called from the _doInAllSectors function
*
* @param object
* @param overlappingNodes
* @private
*/
exports._getNodesOverlappingWith = function(object, overlappingNodes) {
- var nodes = this.nodes;
+ var nodes = this.body.nodes;
for (var nodeId in nodes) {
if (nodes.hasOwnProperty(nodeId)) {
if (nodes[nodeId].isOverlappingWith(object)) {
@@ -26,7 +25,7 @@ exports._getNodesOverlappingWith = function(object, overlappingNodes) {
*/
exports._getAllNodesOverlappingWith = function (object) {
var overlappingNodes = [];
- this._doInAllActiveSectors("_getNodesOverlappingWith",object,overlappingNodes);
+ this._getNodesOverlappingWith(object,overlappingNodes);
return overlappingNodes;
};
@@ -66,7 +65,7 @@ exports._getNodeAt = function (pointer) {
// if there are overlapping nodes, select the last one, this is the
// one which is drawn on top of the others
if (overlappingNodes.length > 0) {
- return this.nodes[overlappingNodes[overlappingNodes.length - 1]];
+ return this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
}
else {
return null;
@@ -81,7 +80,7 @@ exports._getNodeAt = function (pointer) {
* @private
*/
exports._getEdgesOverlappingWith = function (object, overlappingEdges) {
- var edges = this.edges;
+ var edges = this.body.edges;
for (var edgeId in edges) {
if (edges.hasOwnProperty(edgeId)) {
if (edges[edgeId].isOverlappingWith(object)) {
@@ -100,7 +99,7 @@ exports._getEdgesOverlappingWith = function (object, overlappingEdges) {
*/
exports._getAllEdgesOverlappingWith = function (object) {
var overlappingEdges = [];
- this._doInAllActiveSectors("_getEdgesOverlappingWith",object,overlappingEdges);
+ this._getEdgesOverlappingWith(object,overlappingEdges);
return overlappingEdges;
};
@@ -117,7 +116,7 @@ exports._getEdgeAt = function(pointer) {
var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
if (overlappingEdges.length > 0) {
- return this.edges[overlappingEdges[overlappingEdges.length - 1]];
+ return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
}
else {
return null;
@@ -355,8 +354,8 @@ exports._clusterInSelection = function() {
* @private
*/
exports._selectConnectedEdges = function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
edge.select();
this._addToSelection(edge);
}
@@ -369,8 +368,8 @@ exports._selectConnectedEdges = function(node) {
* @private
*/
exports._hoverConnectedEdges = function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
edge.hover = true;
this._addToHover(edge);
}
@@ -384,8 +383,8 @@ exports._hoverConnectedEdges = function(node) {
* @private
*/
exports._unselectConnectedEdges = function(node) {
- for (var i = 0; i < node.dynamicEdges.length; i++) {
- var edge = node.dynamicEdges[i];
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
edge.unselect();
this._removeFromSelection(edge);
}
@@ -650,7 +649,7 @@ exports.selectNodes = function(selection, highlightEdges) {
for (i = 0, iMax = selection.length; i < iMax; i++) {
id = selection[i];
- var node = this.nodes[id];
+ var node = this.body.nodes[id];
if (!node) {
throw new RangeError('Node with id "' + id + '" not found');
}
@@ -677,7 +676,7 @@ exports.selectEdges = function(selection) {
for (i = 0, iMax = selection.length; i < iMax; i++) {
id = selection[i];
- var edge = this.edges[id];
+ var edge = this.body.edges[id];
if (!edge) {
throw new RangeError('Edge with id "' + id + '" not found');
}
@@ -693,14 +692,14 @@ exports.selectEdges = function(selection) {
exports._updateSelection = function () {
for(var nodeId in this.selectionObj.nodes) {
if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
- if (!this.nodes.hasOwnProperty(nodeId)) {
+ if (!this.body.nodes.hasOwnProperty(nodeId)) {
delete this.selectionObj.nodes[nodeId];
}
}
}
for(var edgeId in this.selectionObj.edges) {
if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
- if (!this.edges.hasOwnProperty(edgeId)) {
+ if (!this.body.edges.hasOwnProperty(edgeId)) {
delete this.selectionObj.edges[edgeId];
}
}
diff --git a/lib/network/mixins/physics/BarnesHutMixin.js b/lib/network/mixins/physics/BarnesHutMixin.js
deleted file mode 100644
index b70f474c..00000000
--- a/lib/network/mixins/physics/BarnesHutMixin.js
+++ /dev/null
@@ -1,399 +0,0 @@
-/**
- * This function calculates the forces the nodes apply on eachother based on a gravitational model.
- * The Barnes Hut method is used to speed up this N-body simulation.
- *
- * @private
- */
-exports._calculateNodeForces = function() {
- if (this.constants.physics.barnesHut.gravitationalConstant != 0) {
- var node;
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
- var nodeCount = nodeIndices.length;
-
- this._formBarnesHutTree(nodes,nodeIndices);
-
- var barnesHutTree = this.barnesHutTree;
-
- // place the nodes one by one recursively
- for (var i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- // starting with root is irrelevant, it never passes the BarnesHut condition
- this._getForceContribution(barnesHutTree.root.children.NW,node);
- this._getForceContribution(barnesHutTree.root.children.NE,node);
- this._getForceContribution(barnesHutTree.root.children.SW,node);
- this._getForceContribution(barnesHutTree.root.children.SE,node);
- }
- }
- }
-};
-
-
-/**
- * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
- * If a region contains a single node, we check if it is not itself, then we apply the force.
- *
- * @param parentBranch
- * @param node
- * @private
- */
-exports._getForceContribution = function(parentBranch,node) {
- // we get no force contribution from an empty region
- if (parentBranch.childrenCount > 0) {
- var dx,dy,distance;
-
- // get the distance from the center of mass to the node.
- dx = parentBranch.centerOfMass.x - node.x;
- dy = parentBranch.centerOfMass.y - node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- // BarnesHut condition
- // original condition : s/d < thetaInverted = passed === d/s > 1/theta = passed
- // calcSize = 1/s --> d * 1/s > 1/theta = passed
- if (distance * parentBranch.calcSize > this.constants.physics.barnesHut.thetaInverted) {
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.1*Math.random();
- dx = distance;
- }
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
- }
- else {
- // Did not pass the condition, go into children if available
- if (parentBranch.childrenCount == 4) {
- this._getForceContribution(parentBranch.children.NW,node);
- this._getForceContribution(parentBranch.children.NE,node);
- this._getForceContribution(parentBranch.children.SW,node);
- this._getForceContribution(parentBranch.children.SE,node);
- }
- else { // parentBranch must have only one node, if it was empty we wouldnt be here
- if (parentBranch.children.data.id != node.id) { // if it is not self
- // duplicate code to reduce function calls to speed up program
- if (distance == 0) {
- distance = 0.5*Math.random();
- dx = distance;
- }
- var gravityForce = this.constants.physics.barnesHut.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
- var fx = dx * gravityForce;
- var fy = dy * gravityForce;
- node.fx += fx;
- node.fy += fy;
- }
- }
- }
- }
-};
-
-/**
- * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
- *
- * @param nodes
- * @param nodeIndices
- * @private
- */
-exports._formBarnesHutTree = function(nodes,nodeIndices) {
- var node;
- var nodeCount = nodeIndices.length;
-
- var minX = Number.MAX_VALUE,
- minY = Number.MAX_VALUE,
- maxX =-Number.MAX_VALUE,
- maxY =-Number.MAX_VALUE;
-
- // get the range of the nodes
- for (var i = 0; i < nodeCount; i++) {
- var x = nodes[nodeIndices[i]].x;
- var y = nodes[nodeIndices[i]].y;
- if (nodes[nodeIndices[i]].options.mass > 0) {
- if (x < minX) { minX = x; }
- if (x > maxX) { maxX = x; }
- if (y < minY) { minY = y; }
- if (y > maxY) { maxY = y; }
- }
- }
- // make the range a square
- var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
- if (sizeDiff > 0) {minY -= 0.5 * sizeDiff; maxY += 0.5 * sizeDiff;} // xSize > ySize
- else {minX += 0.5 * sizeDiff; maxX -= 0.5 * sizeDiff;} // xSize < ySize
-
-
- var minimumTreeSize = 1e-5;
- var rootSize = Math.max(minimumTreeSize,Math.abs(maxX - minX));
- var halfRootSize = 0.5 * rootSize;
- var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
-
- // construct the barnesHutTree
- var barnesHutTree = {
- root:{
- centerOfMass: {x:0, y:0},
- mass:0,
- range: {
- minX: centerX-halfRootSize,maxX:centerX+halfRootSize,
- minY: centerY-halfRootSize,maxY:centerY+halfRootSize
- },
- size: rootSize,
- calcSize: 1 / rootSize,
- children: { data:null},
- maxWidth: 0,
- level: 0,
- childrenCount: 4
- }
- };
- this._splitBranch(barnesHutTree.root);
-
- // place the nodes one by one recursively
- for (i = 0; i < nodeCount; i++) {
- node = nodes[nodeIndices[i]];
- if (node.options.mass > 0) {
- this._placeInTree(barnesHutTree.root,node);
- }
- }
-
- // make global
- this.barnesHutTree = barnesHutTree
-};
-
-
-/**
- * this updates the mass of a branch. this is increased by adding a node.
- *
- * @param parentBranch
- * @param node
- * @private
- */
-exports._updateBranchMass = function(parentBranch, node) {
- var totalMass = parentBranch.mass + node.options.mass;
- var totalMassInv = 1/totalMass;
-
- parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
- parentBranch.centerOfMass.x *= totalMassInv;
-
- parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
- parentBranch.centerOfMass.y *= totalMassInv;
-
- parentBranch.mass = totalMass;
- var biggestSize = Math.max(Math.max(node.height,node.radius),node.width);
- parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
-
-};
-
-
-/**
- * determine in which branch the node will be placed.
- *
- * @param parentBranch
- * @param node
- * @param skipMassUpdate
- * @private
- */
-exports._placeInTree = function(parentBranch,node,skipMassUpdate) {
- if (skipMassUpdate != true || skipMassUpdate === undefined) {
- // update the mass of the branch.
- this._updateBranchMass(parentBranch,node);
- }
-
- if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
- if (parentBranch.children.NW.range.maxY > node.y) { // in NW
- this._placeInRegion(parentBranch,node,"NW");
- }
- else { // in SW
- this._placeInRegion(parentBranch,node,"SW");
- }
- }
- else { // in NE or SE
- if (parentBranch.children.NW.range.maxY > node.y) { // in NE
- this._placeInRegion(parentBranch,node,"NE");
- }
- else { // in SE
- this._placeInRegion(parentBranch,node,"SE");
- }
- }
-};
-
-
-/**
- * actually place the node in a region (or branch)
- *
- * @param parentBranch
- * @param node
- * @param region
- * @private
- */
-exports._placeInRegion = function(parentBranch,node,region) {
- switch (parentBranch.children[region].childrenCount) {
- case 0: // place node here
- parentBranch.children[region].children.data = node;
- parentBranch.children[region].childrenCount = 1;
- this._updateBranchMass(parentBranch.children[region],node);
- break;
- case 1: // convert into children
- // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
- // we move one node a pixel and we do not put it in the tree.
- if (parentBranch.children[region].children.data.x == node.x &&
- parentBranch.children[region].children.data.y == node.y) {
- node.x += Math.random();
- node.y += Math.random();
- }
- else {
- this._splitBranch(parentBranch.children[region]);
- this._placeInTree(parentBranch.children[region],node);
- }
- break;
- case 4: // place in branch
- this._placeInTree(parentBranch.children[region],node);
- break;
- }
-};
-
-
-/**
- * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
- * after the split is complete.
- *
- * @param parentBranch
- * @private
- */
-exports._splitBranch = function(parentBranch) {
- // if the branch is shaded with a node, replace the node in the new subset.
- var containedNode = null;
- if (parentBranch.childrenCount == 1) {
- containedNode = parentBranch.children.data;
- parentBranch.mass = 0; parentBranch.centerOfMass.x = 0; parentBranch.centerOfMass.y = 0;
- }
- parentBranch.childrenCount = 4;
- parentBranch.children.data = null;
- this._insertRegion(parentBranch,"NW");
- this._insertRegion(parentBranch,"NE");
- this._insertRegion(parentBranch,"SW");
- this._insertRegion(parentBranch,"SE");
-
- if (containedNode != null) {
- this._placeInTree(parentBranch,containedNode);
- }
-};
-
-
-/**
- * This function subdivides the region into four new segments.
- * Specifically, this inserts a single new segment.
- * It fills the children section of the parentBranch
- *
- * @param parentBranch
- * @param region
- * @param parentRange
- * @private
- */
-exports._insertRegion = function(parentBranch, region) {
- var minX,maxX,minY,maxY;
- var childSize = 0.5 * parentBranch.size;
- switch (region) {
- case "NW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "NE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY;
- maxY = parentBranch.range.minY + childSize;
- break;
- case "SW":
- minX = parentBranch.range.minX;
- maxX = parentBranch.range.minX + childSize;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- case "SE":
- minX = parentBranch.range.minX + childSize;
- maxX = parentBranch.range.maxX;
- minY = parentBranch.range.minY + childSize;
- maxY = parentBranch.range.maxY;
- break;
- }
-
-
- parentBranch.children[region] = {
- centerOfMass:{x:0,y:0},
- mass:0,
- range:{minX:minX,maxX:maxX,minY:minY,maxY:maxY},
- size: 0.5 * parentBranch.size,
- calcSize: 2 * parentBranch.calcSize,
- children: {data:null},
- maxWidth: 0,
- level: parentBranch.level+1,
- childrenCount: 0
- };
-};
-
-
-/**
- * This function is for debugging purposed, it draws the tree.
- *
- * @param ctx
- * @param color
- * @private
- */
-exports._drawTree = function(ctx,color) {
- if (this.barnesHutTree !== undefined) {
-
- ctx.lineWidth = 1;
-
- this._drawBranch(this.barnesHutTree.root,ctx,color);
- }
-};
-
-
-/**
- * This function is for debugging purposes. It draws the branches recursively.
- *
- * @param branch
- * @param ctx
- * @param color
- * @private
- */
-exports._drawBranch = function(branch,ctx,color) {
- if (color === undefined) {
- color = "#FF0000";
- }
-
- if (branch.childrenCount == 4) {
- this._drawBranch(branch.children.NW,ctx);
- this._drawBranch(branch.children.NE,ctx);
- this._drawBranch(branch.children.SE,ctx);
- this._drawBranch(branch.children.SW,ctx);
- }
- ctx.strokeStyle = color;
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.minY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.minY);
- ctx.lineTo(branch.range.maxX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.maxX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.maxY);
- ctx.stroke();
-
- ctx.beginPath();
- ctx.moveTo(branch.range.minX,branch.range.maxY);
- ctx.lineTo(branch.range.minX,branch.range.minY);
- ctx.stroke();
-
- /*
- if (branch.mass > 0) {
- ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
- ctx.stroke();
- }
- */
-};
diff --git a/lib/network/mixins/physics/HierarchialRepulsionMixin.js b/lib/network/mixins/physics/HierarchialRepulsionMixin.js
deleted file mode 100644
index 774b4257..00000000
--- a/lib/network/mixins/physics/HierarchialRepulsionMixin.js
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * Calculate the forces the nodes apply on eachother based on a repulsion field.
- * This field is linearly approximated.
- *
- * @private
- */
-exports._calculateNodeForces = function () {
- var dx, dy, distance, fx, fy,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.hierarchicalRepulsion.nodeDistance;
-
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
-
- // nodes only affect nodes on their level
- if (node1.level == node2.level) {
-
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
-
- var steepness = 0.05;
- if (distance < nodeDistance) {
- repulsingForce = -Math.pow(steepness*distance,2) + Math.pow(steepness*nodeDistance,2);
- }
- else {
- repulsingForce = 0;
- }
- // normalize force with
- if (distance == 0) {
- distance = 0.01;
- }
- else {
- repulsingForce = repulsingForce / distance;
- }
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
-
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
- }
- }
- }
-};
-
-
-/**
- * this function calculates the effects of the springs in the case of unsmooth curves.
- *
- * @private
- */
-exports._calculateHierarchicalSpringForces = function () {
- var edgeLength, edge, edgeId;
- var dx, dy, fx, fy, springForce, distance;
- var edges = this.edges;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
-
- for (var i = 0; i < nodeIndices.length; i++) {
- var node1 = nodes[nodeIndices[i]];
- node1.springFx = 0;
- node1.springFy = 0;
- }
-
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- edgeLength = edge.physics.springLength;
- // this implies that the edges between big clusters are longer
- edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
-
- dx = (edge.from.x - edge.to.x);
- dy = (edge.from.y - edge.to.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
-
-
- if (edge.to.level != edge.from.level) {
- edge.to.springFx -= fx;
- edge.to.springFy -= fy;
- edge.from.springFx += fx;
- edge.from.springFy += fy;
- }
- else {
- var factor = 0.5;
- edge.to.fx -= factor*fx;
- edge.to.fy -= factor*fy;
- edge.from.fx += factor*fx;
- edge.from.fy += factor*fy;
- }
- }
- }
- }
- }
-
- // normalize spring forces
- var springForce = 1;
- var springFx, springFy;
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- springFx = Math.min(springForce,Math.max(-springForce,node.springFx));
- springFy = Math.min(springForce,Math.max(-springForce,node.springFy));
-
- node.fx += springFx;
- node.fy += springFy;
- }
-
- // retain energy balance
- var totalFx = 0;
- var totalFy = 0;
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- totalFx += node.fx;
- totalFy += node.fy;
- }
- var correctionFx = totalFx / nodeIndices.length;
- var correctionFy = totalFy / nodeIndices.length;
-
- for (i = 0; i < nodeIndices.length; i++) {
- var node = nodes[nodeIndices[i]];
- node.fx -= correctionFx;
- node.fy -= correctionFy;
- }
-
-};
\ No newline at end of file
diff --git a/lib/network/mixins/physics/PhysicsMixin.js b/lib/network/mixins/physics/PhysicsMixin.js
deleted file mode 100644
index c17cacf7..00000000
--- a/lib/network/mixins/physics/PhysicsMixin.js
+++ /dev/null
@@ -1,724 +0,0 @@
-var util = require('../../../util');
-var RepulsionMixin = require('./RepulsionMixin');
-var HierarchialRepulsionMixin = require('./HierarchialRepulsionMixin');
-var BarnesHutMixin = require('./BarnesHutMixin');
-
-/**
- * Toggling barnes Hut calculation on and off.
- *
- * @private
- */
-exports._toggleBarnesHut = function () {
- this.constants.physics.barnesHut.enabled = !this.constants.physics.barnesHut.enabled;
- this._loadSelectedForceSolver();
- this.moving = true;
- this.start();
-};
-
-
-/**
- * This loads the node force solver based on the barnes hut or repulsion algorithm
- *
- * @private
- */
-exports._loadSelectedForceSolver = function () {
- // this overloads the this._calculateNodeForces
- if (this.constants.physics.barnesHut.enabled == true) {
- this._clearMixin(RepulsionMixin);
- this._clearMixin(HierarchialRepulsionMixin);
-
- this.constants.physics.centralGravity = this.constants.physics.barnesHut.centralGravity;
- this.constants.physics.springLength = this.constants.physics.barnesHut.springLength;
- this.constants.physics.springConstant = this.constants.physics.barnesHut.springConstant;
- this.constants.physics.damping = this.constants.physics.barnesHut.damping;
-
- this._loadMixin(BarnesHutMixin);
- }
- else if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
- this._clearMixin(BarnesHutMixin);
- this._clearMixin(RepulsionMixin);
-
- this.constants.physics.centralGravity = this.constants.physics.hierarchicalRepulsion.centralGravity;
- this.constants.physics.springLength = this.constants.physics.hierarchicalRepulsion.springLength;
- this.constants.physics.springConstant = this.constants.physics.hierarchicalRepulsion.springConstant;
- this.constants.physics.damping = this.constants.physics.hierarchicalRepulsion.damping;
-
- this._loadMixin(HierarchialRepulsionMixin);
- }
- else {
- this._clearMixin(BarnesHutMixin);
- this._clearMixin(HierarchialRepulsionMixin);
- this.barnesHutTree = undefined;
-
- this.constants.physics.centralGravity = this.constants.physics.repulsion.centralGravity;
- this.constants.physics.springLength = this.constants.physics.repulsion.springLength;
- this.constants.physics.springConstant = this.constants.physics.repulsion.springConstant;
- this.constants.physics.damping = this.constants.physics.repulsion.damping;
-
- this._loadMixin(RepulsionMixin);
- }
-};
-
-/**
- * Before calculating the forces, we check if we need to cluster to keep up performance and we check
- * if there is more than one node. If it is just one node, we dont calculate anything.
- *
- * @private
- */
-exports._initializeForceCalculation = function () {
- // stop calculation if there is only one node
- if (this.nodeIndices.length == 1) {
- this.nodes[this.nodeIndices[0]]._setForce(0, 0);
- }
- else {
- // if there are too many nodes on screen, we cluster without repositioning
- if (this.nodeIndices.length > this.constants.clustering.clusterThreshold && this.constants.clustering.enabled == true) {
- this.clusterToFit(this.constants.clustering.reduceToNodes, false);
- }
-
- // we now start the force calculation
- this._calculateForces();
- }
-};
-
-
-/**
- * Calculate the external forces acting on the nodes
- * Forces are caused by: edges, repulsing forces between nodes, gravity
- * @private
- */
-exports._calculateForces = function () {
- // Gravity is required to keep separated groups from floating off
- // the forces are reset to zero in this loop by using _setForce instead
- // of _addForce
-
- this._calculateGravitationalForces();
- this._calculateNodeForces();
-
- if (this.constants.physics.springConstant > 0) {
- if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
- this._calculateSpringForcesWithSupport();
- }
- else {
- if (this.constants.physics.hierarchicalRepulsion.enabled == true) {
- this._calculateHierarchicalSpringForces();
- }
- else {
- this._calculateSpringForces();
- }
- }
- }
-};
-
-
-/**
- * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
- * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
- * This function joins the datanodes and invisible (called support) nodes into one object.
- * We do this so we do not contaminate this.nodes with the support nodes.
- *
- * @private
- */
-exports._updateCalculationNodes = function () {
- if (this.constants.smoothCurves.enabled == true && this.constants.smoothCurves.dynamic == true) {
- this.calculationNodes = {};
- this.calculationNodeIndices = [];
-
- for (var nodeId in this.nodes) {
- if (this.nodes.hasOwnProperty(nodeId)) {
- this.calculationNodes[nodeId] = this.nodes[nodeId];
- }
- }
- var supportNodes = this.sectors['support']['nodes'];
- for (var supportNodeId in supportNodes) {
- if (supportNodes.hasOwnProperty(supportNodeId)) {
- if (this.edges.hasOwnProperty(supportNodes[supportNodeId].parentEdgeId)) {
- this.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
- }
- else {
- supportNodes[supportNodeId]._setForce(0, 0);
- }
- }
- }
-
- for (var idx in this.calculationNodes) {
- if (this.calculationNodes.hasOwnProperty(idx)) {
- this.calculationNodeIndices.push(idx);
- }
- }
- }
- else {
- this.calculationNodes = this.nodes;
- this.calculationNodeIndices = this.nodeIndices;
- }
-};
-
-
-/**
- * this function applies the central gravity effect to keep groups from floating off
- *
- * @private
- */
-exports._calculateGravitationalForces = function () {
- var dx, dy, distance, node, i;
- var nodes = this.calculationNodes;
- var gravity = this.constants.physics.centralGravity;
- var gravityForce = 0;
-
- for (i = 0; i < this.calculationNodeIndices.length; i++) {
- node = nodes[this.calculationNodeIndices[i]];
- node.damping = this.constants.physics.damping; // possibly add function to alter damping properties of clusters.
- // gravity does not apply when we are in a pocket sector
- if (this._sector() == "default" && gravity != 0) {
- dx = -node.x;
- dy = -node.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- gravityForce = (distance == 0) ? 0 : (gravity / distance);
- node.fx = dx * gravityForce;
- node.fy = dy * gravityForce;
- }
- else {
- node.fx = 0;
- node.fy = 0;
- }
- }
-};
-
-
-
-
-/**
- * this function calculates the effects of the springs in the case of unsmooth curves.
- *
- * @private
- */
-exports._calculateSpringForces = function () {
- var edgeLength, edge, edgeId;
- var dx, dy, fx, fy, springForce, distance;
- var edges = this.edges;
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- edgeLength = edge.physics.springLength;
- // this implies that the edges between big clusters are longer
- edgeLength += (edge.to.clusterSize + edge.from.clusterSize - 2) * this.constants.clustering.edgeGrowth;
-
- dx = (edge.from.x - edge.to.x);
- dy = (edge.from.y - edge.to.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
- edge.from.fx += fx;
- edge.from.fy += fy;
- edge.to.fx -= fx;
- edge.to.fy -= fy;
- }
- }
- }
- }
-};
-
-
-
-
-/**
- * This function calculates the springforces on the nodes, accounting for the support nodes.
- *
- * @private
- */
-exports._calculateSpringForcesWithSupport = function () {
- var edgeLength, edge, edgeId, combinedClusterSize;
- var edges = this.edges;
-
- // forces caused by the edges, modelled as springs
- for (edgeId in edges) {
- if (edges.hasOwnProperty(edgeId)) {
- edge = edges[edgeId];
- if (edge.connected) {
- // only calculate forces if nodes are in the same sector
- if (this.nodes.hasOwnProperty(edge.toId) && this.nodes.hasOwnProperty(edge.fromId)) {
- if (edge.via != null) {
- var node1 = edge.to;
- var node2 = edge.via;
- var node3 = edge.from;
-
- edgeLength = edge.physics.springLength;
-
- combinedClusterSize = node1.clusterSize + node3.clusterSize - 2;
-
- // this implies that the edges between big clusters are longer
- edgeLength += combinedClusterSize * this.constants.clustering.edgeGrowth;
- this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
- this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
- }
- }
- }
- }
- }
-};
-
-
-/**
- * This is the code actually performing the calculation for the function above. It is split out to avoid repetition.
- *
- * @param node1
- * @param node2
- * @param edgeLength
- * @private
- */
-exports._calculateSpringForce = function (node1, node2, edgeLength) {
- var dx, dy, fx, fy, springForce, distance;
-
- dx = (node1.x - node2.x);
- dy = (node1.y - node2.y);
- distance = Math.sqrt(dx * dx + dy * dy);
-
- if (distance == 0) {
- distance = 0.01;
- }
-
- // the 1/distance is so the fx and fy can be calculated without sine or cosine.
- springForce = this.constants.physics.springConstant * (edgeLength - distance) / distance;
-
- fx = dx * springForce;
- fy = dy * springForce;
-
- node1.fx += fx;
- node1.fy += fy;
- node2.fx -= fx;
- node2.fy -= fy;
-};
-
-
-exports._cleanupPhysicsConfiguration = function() {
- if (this.physicsConfiguration !== undefined) {
- while (this.physicsConfiguration.hasChildNodes()) {
- this.physicsConfiguration.removeChild(this.physicsConfiguration.firstChild);
- }
-
- this.physicsConfiguration.parentNode.removeChild(this.physicsConfiguration);
- this.physicsConfiguration = undefined;
- }
-}
-
-/**
- * Load the HTML for the physics config and bind it
- * @private
- */
-exports._loadPhysicsConfiguration = function () {
- if (this.physicsConfiguration === undefined) {
- this.backupConstants = {};
- util.deepExtend(this.backupConstants,this.constants);
-
- var maxGravitational = Math.max(20000, (-1 * this.constants.physics.barnesHut.gravitationalConstant) * 10);
- var maxSpring = Math.min(0.05, this.constants.physics.barnesHut.springConstant * 10)
-
- var hierarchicalLayoutDirections = ["LR", "RL", "UD", "DU"];
- this.physicsConfiguration = document.createElement('div');
- this.physicsConfiguration.className = "PhysicsConfiguration";
- this.physicsConfiguration.innerHTML = '' +
- '' +
- '' +
- '' +
- '' +
- ''
- this.containerElement.parentElement.insertBefore(this.physicsConfiguration, this.containerElement);
- this.optionsDiv = document.createElement("div");
- this.optionsDiv.style.fontSize = "14px";
- this.optionsDiv.style.fontFamily = "verdana";
- this.containerElement.parentElement.insertBefore(this.optionsDiv, this.containerElement);
-
- var rangeElement;
- rangeElement = document.getElementById('graph_BH_gc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_gc', -1, "physics_barnesHut_gravitationalConstant");
- rangeElement = document.getElementById('graph_BH_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_BH_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_BH_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_BH_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_BH_damp', 1, "physics_damping");
-
- rangeElement = document.getElementById('graph_R_nd');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_nd', 1, "physics_repulsion_nodeDistance");
- rangeElement = document.getElementById('graph_R_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_R_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_R_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_R_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_R_damp', 1, "physics_damping");
-
- rangeElement = document.getElementById('graph_H_nd');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
- rangeElement = document.getElementById('graph_H_cg');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_cg', 1, "physics_centralGravity");
- rangeElement = document.getElementById('graph_H_sc');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sc', 1, "physics_springConstant");
- rangeElement = document.getElementById('graph_H_sl');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_sl', 1, "physics_springLength");
- rangeElement = document.getElementById('graph_H_damp');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_damp', 1, "physics_damping");
- rangeElement = document.getElementById('graph_H_direction');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_direction', hierarchicalLayoutDirections, "hierarchicalLayout_direction");
- rangeElement = document.getElementById('graph_H_levsep');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_levsep', 1, "hierarchicalLayout_levelSeparation");
- rangeElement = document.getElementById('graph_H_nspac');
- rangeElement.onchange = showValueOfRange.bind(this, 'graph_H_nspac', 1, "hierarchicalLayout_nodeSpacing");
-
- var radioButton1 = document.getElementById("graph_physicsMethod1");
- var radioButton2 = document.getElementById("graph_physicsMethod2");
- var radioButton3 = document.getElementById("graph_physicsMethod3");
- radioButton2.checked = true;
- if (this.constants.physics.barnesHut.enabled) {
- radioButton1.checked = true;
- }
- if (this.constants.hierarchicalLayout.enabled) {
- radioButton3.checked = true;
- }
-
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- var graph_repositionNodes = document.getElementById("graph_repositionNodes");
- var graph_generateOptions = document.getElementById("graph_generateOptions");
-
- graph_toggleSmooth.onclick = graphToggleSmoothCurves.bind(this);
- graph_repositionNodes.onclick = graphRepositionNodes.bind(this);
- graph_generateOptions.onclick = graphGenerateOptions.bind(this);
- if (this.constants.smoothCurves == true && this.constants.dynamicSmoothCurves == false) {
- graph_toggleSmooth.style.background = "#A4FF56";
- }
- else {
- graph_toggleSmooth.style.background = "#FF8532";
- }
-
-
- switchConfigurations.apply(this);
-
- radioButton1.onchange = switchConfigurations.bind(this);
- radioButton2.onchange = switchConfigurations.bind(this);
- radioButton3.onchange = switchConfigurations.bind(this);
- }
-};
-
-/**
- * This overwrites the this.constants.
- *
- * @param constantsVariableName
- * @param value
- * @private
- */
-exports._overWriteGraphConstants = function (constantsVariableName, value) {
- var nameArray = constantsVariableName.split("_");
- if (nameArray.length == 1) {
- this.constants[nameArray[0]] = value;
- }
- else if (nameArray.length == 2) {
- this.constants[nameArray[0]][nameArray[1]] = value;
- }
- else if (nameArray.length == 3) {
- this.constants[nameArray[0]][nameArray[1]][nameArray[2]] = value;
- }
-};
-
-
-/**
- * this function is bound to the toggle smooth curves button. That is also why it is not in the prototype.
- */
-function graphToggleSmoothCurves () {
- this.constants.smoothCurves.enabled = !this.constants.smoothCurves.enabled;
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
- else {graph_toggleSmooth.style.background = "#FF8532";}
-
- this._configureSmoothCurves(false);
-}
-
-/**
- * this function is used to scramble the nodes
- *
- */
-function graphRepositionNodes () {
- for (var nodeId in this.calculationNodes) {
- if (this.calculationNodes.hasOwnProperty(nodeId)) {
- this.calculationNodes[nodeId].vx = 0; this.calculationNodes[nodeId].vy = 0;
- this.calculationNodes[nodeId].fx = 0; this.calculationNodes[nodeId].fy = 0;
- }
- }
- if (this.constants.hierarchicalLayout.enabled == true) {
- this._setupHierarchicalLayout();
- showValueOfRange.call(this, 'graph_H_nd', 1, "physics_hierarchicalRepulsion_nodeDistance");
- showValueOfRange.call(this, 'graph_H_cg', 1, "physics_centralGravity");
- showValueOfRange.call(this, 'graph_H_sc', 1, "physics_springConstant");
- showValueOfRange.call(this, 'graph_H_sl', 1, "physics_springLength");
- showValueOfRange.call(this, 'graph_H_damp', 1, "physics_damping");
- }
- else {
- this.repositionNodes();
- }
- this.moving = true;
- this.start();
-}
-
-/**
- * this is used to generate an options file from the playing with physics system.
- */
-function graphGenerateOptions () {
- var options = "No options are required, default values used.";
- var optionsSpecific = [];
- var radioButton1 = document.getElementById("graph_physicsMethod1");
- var radioButton2 = document.getElementById("graph_physicsMethod2");
- if (radioButton1.checked == true) {
- if (this.constants.physics.barnesHut.gravitationalConstant != this.backupConstants.physics.barnesHut.gravitationalConstant) {optionsSpecific.push("gravitationalConstant: " + this.constants.physics.barnesHut.gravitationalConstant);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.barnesHut.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.barnesHut.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.barnesHut.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.barnesHut.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options = "var options = {";
- options += "physics: {barnesHut: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}}'
- }
- if (this.constants.smoothCurves.enabled != this.backupConstants.smoothCurves.enabled) {
- if (optionsSpecific.length == 0) {options = "var options = {";}
- else {options += ", "}
- options += "smoothCurves: " + this.constants.smoothCurves.enabled;
- }
- if (options != "No options are required, default values used.") {
- options += '};'
- }
- }
- else if (radioButton2.checked == true) {
- options = "var options = {";
- options += "physics: {barnesHut: {enabled: false}";
- if (this.constants.physics.repulsion.nodeDistance != this.backupConstants.physics.repulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.repulsion.nodeDistance);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.repulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.repulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.repulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.repulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options += ", repulsion: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}}'
- }
- if (optionsSpecific.length == 0) {options += "}"}
- if (this.constants.smoothCurves != this.backupConstants.smoothCurves) {
- options += ", smoothCurves: " + this.constants.smoothCurves;
- }
- options += '};'
- }
- else {
- options = "var options = {";
- if (this.constants.physics.hierarchicalRepulsion.nodeDistance != this.backupConstants.physics.hierarchicalRepulsion.nodeDistance) {optionsSpecific.push("nodeDistance: " + this.constants.physics.hierarchicalRepulsion.nodeDistance);}
- if (this.constants.physics.centralGravity != this.backupConstants.physics.hierarchicalRepulsion.centralGravity) {optionsSpecific.push("centralGravity: " + this.constants.physics.centralGravity);}
- if (this.constants.physics.springLength != this.backupConstants.physics.hierarchicalRepulsion.springLength) {optionsSpecific.push("springLength: " + this.constants.physics.springLength);}
- if (this.constants.physics.springConstant != this.backupConstants.physics.hierarchicalRepulsion.springConstant) {optionsSpecific.push("springConstant: " + this.constants.physics.springConstant);}
- if (this.constants.physics.damping != this.backupConstants.physics.hierarchicalRepulsion.damping) {optionsSpecific.push("damping: " + this.constants.physics.damping);}
- if (optionsSpecific.length != 0) {
- options += "physics: {hierarchicalRepulsion: {";
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", ";
- }
- }
- options += '}},';
- }
- options += 'hierarchicalLayout: {';
- optionsSpecific = [];
- if (this.constants.hierarchicalLayout.direction != this.backupConstants.hierarchicalLayout.direction) {optionsSpecific.push("direction: " + this.constants.hierarchicalLayout.direction);}
- if (Math.abs(this.constants.hierarchicalLayout.levelSeparation) != this.backupConstants.hierarchicalLayout.levelSeparation) {optionsSpecific.push("levelSeparation: " + this.constants.hierarchicalLayout.levelSeparation);}
- if (this.constants.hierarchicalLayout.nodeSpacing != this.backupConstants.hierarchicalLayout.nodeSpacing) {optionsSpecific.push("nodeSpacing: " + this.constants.hierarchicalLayout.nodeSpacing);}
- if (optionsSpecific.length != 0) {
- for (var i = 0; i < optionsSpecific.length; i++) {
- options += optionsSpecific[i];
- if (i < optionsSpecific.length - 1) {
- options += ", "
- }
- }
- options += '}'
- }
- else {
- options += "enabled:true}";
- }
- options += '};'
- }
-
-
- this.optionsDiv.innerHTML = options;
-}
-
-/**
- * this is used to switch between barnesHut, repulsion and hierarchical.
- *
- */
-function switchConfigurations () {
- var ids = ["graph_BH_table", "graph_R_table", "graph_H_table"];
- var radioButton = document.querySelector('input[name="graph_physicsMethod"]:checked').value;
- var tableId = "graph_" + radioButton + "_table";
- var table = document.getElementById(tableId);
- table.style.display = "block";
- for (var i = 0; i < ids.length; i++) {
- if (ids[i] != tableId) {
- table = document.getElementById(ids[i]);
- table.style.display = "none";
- }
- }
- this._restoreNodes();
- if (radioButton == "R") {
- this.constants.hierarchicalLayout.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = false;
- this.constants.physics.barnesHut.enabled = false;
- }
- else if (radioButton == "H") {
- if (this.constants.hierarchicalLayout.enabled == false) {
- this.constants.hierarchicalLayout.enabled = true;
- this.constants.physics.hierarchicalRepulsion.enabled = true;
- this.constants.physics.barnesHut.enabled = false;
- this.constants.smoothCurves.enabled = false;
- this._setupHierarchicalLayout();
- }
- }
- else {
- this.constants.hierarchicalLayout.enabled = false;
- this.constants.physics.hierarchicalRepulsion.enabled = false;
- this.constants.physics.barnesHut.enabled = true;
- }
- this._loadSelectedForceSolver();
- var graph_toggleSmooth = document.getElementById("graph_toggleSmooth");
- if (this.constants.smoothCurves.enabled == true) {graph_toggleSmooth.style.background = "#A4FF56";}
- else {graph_toggleSmooth.style.background = "#FF8532";}
- this.moving = true;
- this.start();
-}
-
-
-/**
- * this generates the ranges depending on the iniital values.
- *
- * @param id
- * @param map
- * @param constantsVariableName
- */
-function showValueOfRange (id,map,constantsVariableName) {
- var valueId = id + "_value";
- var rangeValue = document.getElementById(id).value;
-
- if (Array.isArray(map)) {
- document.getElementById(valueId).value = map[parseInt(rangeValue)];
- this._overWriteGraphConstants(constantsVariableName,map[parseInt(rangeValue)]);
- }
- else {
- document.getElementById(valueId).value = parseInt(map) * parseFloat(rangeValue);
- this._overWriteGraphConstants(constantsVariableName, parseInt(map) * parseFloat(rangeValue));
- }
-
- if (constantsVariableName == "hierarchicalLayout_direction" ||
- constantsVariableName == "hierarchicalLayout_levelSeparation" ||
- constantsVariableName == "hierarchicalLayout_nodeSpacing") {
- this._setupHierarchicalLayout();
- }
- this.moving = true;
- this.start();
-}
-
-
diff --git a/lib/network/mixins/physics/RepulsionMixin.js b/lib/network/mixins/physics/RepulsionMixin.js
deleted file mode 100644
index 4b3ef6ac..00000000
--- a/lib/network/mixins/physics/RepulsionMixin.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * Calculate the forces the nodes apply on each other based on a repulsion field.
- * This field is linearly approximated.
- *
- * @private
- */
-exports._calculateNodeForces = function () {
- var dx, dy, angle, distance, fx, fy, combinedClusterSize,
- repulsingForce, node1, node2, i, j;
-
- var nodes = this.calculationNodes;
- var nodeIndices = this.calculationNodeIndices;
-
- // approximation constants
- var a_base = -2 / 3;
- var b = 4 / 3;
-
- // repulsing forces between nodes
- var nodeDistance = this.constants.physics.repulsion.nodeDistance;
- var minimumDistance = nodeDistance;
-
- // we loop from i over all but the last entree in the array
- // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
- for (i = 0; i < nodeIndices.length - 1; i++) {
- node1 = nodes[nodeIndices[i]];
- for (j = i + 1; j < nodeIndices.length; j++) {
- node2 = nodes[nodeIndices[j]];
- combinedClusterSize = node1.clusterSize + node2.clusterSize - 2;
-
- dx = node2.x - node1.x;
- dy = node2.y - node1.y;
- distance = Math.sqrt(dx * dx + dy * dy);
-
- // same condition as BarnesHut, making sure nodes are never 100% overlapping.
- if (distance == 0) {
- distance = 0.1*Math.random();
- dx = distance;
- }
-
- minimumDistance = (combinedClusterSize == 0) ? nodeDistance : (nodeDistance * (1 + combinedClusterSize * this.constants.clustering.distanceAmplification));
- var a = a_base / minimumDistance;
- if (distance < 2 * minimumDistance) {
- if (distance < 0.5 * minimumDistance) {
- repulsingForce = 1.0;
- }
- else {
- repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / minimumDistance - 1) * steepness))
- }
-
- // amplify the repulsion for clusters.
- repulsingForce *= (combinedClusterSize == 0) ? 1 : 1 + combinedClusterSize * this.constants.clustering.forceAmplification;
- repulsingForce = repulsingForce / Math.max(distance,0.01*minimumDistance);
-
- fx = dx * repulsingForce;
- fy = dy * repulsingForce;
- node1.fx -= fx;
- node1.fy -= fy;
- node2.fx += fx;
- node2.fy += fy;
-
- }
- }
- }
-};
diff --git a/lib/network/modules/Canvas.js b/lib/network/modules/Canvas.js
new file mode 100644
index 00000000..73cd8b27
--- /dev/null
+++ b/lib/network/modules/Canvas.js
@@ -0,0 +1,229 @@
+/**
+ * Created by Alex on 26-Feb-15.
+ */
+
+
+var Hammer = require('../../module/hammer');
+
+class Canvas {
+ /**
+ * Create the main frame for the Network.
+ * This function is executed once when a Network object is created. The frame
+ * contains a canvas, and this canvas contains all objects like the axis and
+ * nodes.
+ * @private
+ */
+ constructor(body, options) {
+ this.body = body;
+ this.setOptions(options);
+
+ this.translation = {x: 0, y: 0};
+ this.scale = 1.0;
+ this.body.emitter.on("_setScale", (scale) => {this.scale = scale});
+ this.body.emitter.on("_setTranslation", (translation) => {this.translation.x = translation.x; this.translation.y = translation.y;});
+ this.body.emitter.once("resize", (obj) => {this.translation.x = obj.width * 0.5; this.translation.y = obj.height * 0.5; this.body.emitter.emit("_setTranslation", this.translation)});
+
+ this.pixelRatio = 1;
+
+ // remove all elements from the container element.
+ while (this.body.container.hasChildNodes()) {
+ this.body.container.removeChild(this.body.container.firstChild);
+ }
+
+ this.frame = document.createElement('div');
+ this.frame.className = 'vis network-frame';
+ this.frame.style.position = 'relative';
+ this.frame.style.overflow = 'hidden';
+ this.frame.tabIndex = 900;
+
+ //////////////////////////////////////////////////////////////////
+
+ this.frame.canvas = document.createElement("canvas");
+ this.frame.canvas.style.position = 'relative';
+ this.frame.appendChild(this.frame.canvas);
+
+ if (!this.frame.canvas.getContext) {
+ var noCanvas = document.createElement( 'DIV' );
+ noCanvas.style.color = 'red';
+ noCanvas.style.fontWeight = 'bold' ;
+ noCanvas.style.padding = '10px';
+ noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
+ this.frame.canvas.appendChild(noCanvas);
+ }
+ else {
+ var ctx = this.frame.canvas.getContext("2d");
+ this.pixelRatio = (window.devicePixelRatio || 1) / (ctx.webkitBackingStorePixelRatio ||
+ ctx.mozBackingStorePixelRatio ||
+ ctx.msBackingStorePixelRatio ||
+ ctx.oBackingStorePixelRatio ||
+ ctx.backingStorePixelRatio || 1);
+
+ //this.pixelRatio = Math.max(1,this.pixelRatio); // this is to account for browser zooming out. The pixel ratio is ment to switch between 1 and 2 for HD screens.
+ this.frame.canvas.getContext("2d").setTransform(this.pixelRatio, 0, 0, this.pixelRatio, 0, 0);
+ }
+
+ // add the frame to the container element
+ this.body.container.appendChild(this.frame);
+
+ this.body.emitter.emit("_setScale", 1);;
+ this.body.emitter.emit("_setTranslation", {x: 0.5 * this.frame.canvas.clientWidth,y: 0.5 * this.frame.canvas.clientHeight});;
+
+ this._bindHammer();
+ }
+
+
+ /**
+ * This function binds hammer, it can be repeated over and over due to the uniqueness check.
+ * @private
+ */
+ _bindHammer() {
+ var me = this;
+ if (this.hammer !== undefined) {
+ this.hammer.dispose();
+ }
+ this.drag = {};
+ this.pinch = {};
+ this.hammer = Hammer(this.frame.canvas, {
+ prevent_default: true
+ });
+ this.hammer.on('tap', me.body.eventListeners.onTap );
+ this.hammer.on('doubletap', me.body.eventListeners.onDoubleTap );
+ this.hammer.on('hold', me.body.eventListeners.onHold );
+ this.hammer.on('touch', me.body.eventListeners.onTouch );
+ this.hammer.on('dragstart', me.body.eventListeners.onDragStart );
+ this.hammer.on('drag', me.body.eventListeners.onDrag );
+ this.hammer.on('dragend', me.body.eventListeners.onDragEnd );
+
+ if (this.options.zoomable == true) {
+ this.hammer.on('mousewheel', me.body.eventListeners.onMouseWheel.bind(me));
+ this.hammer.on('DOMMouseScroll', me.body.eventListeners.onMouseWheel.bind(me)); // for FF
+ this.hammer.on('pinch', me.body.eventListeners.onPinch.bind(me) );
+ }
+
+ this.hammer.on('mousemove', me.body.eventListeners.onMouseMove.bind(me) );
+
+ this.hammerFrame = Hammer(this.frame, {
+ prevent_default: true
+ });
+ this.hammerFrame.on('release', me.body.eventListeners.onRelease.bind(me) );
+ }
+
+
+ setOptions(options = {}) {
+ this.options = options;
+ }
+
+ /**
+ * Set a new size for the network
+ * @param {string} width Width in pixels or percentage (for example '800px'
+ * or '50%')
+ * @param {string} height Height in pixels or percentage (for example '400px'
+ * or '30%')
+ */
+ setSize(width, height) {
+ var emitEvent = false;
+ var oldWidth = this.frame.canvas.width;
+ var oldHeight = this.frame.canvas.height;
+ if (width != this.options.width || height != this.options.height || this.frame.style.width != width || this.frame.style.height != height) {
+ this.frame.style.width = width;
+ this.frame.style.height = height;
+
+ this.frame.canvas.style.width = '100%';
+ this.frame.canvas.style.height = '100%';
+
+ this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
+ this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
+
+ this.options.width = width;
+ this.options.height = height;
+
+ emitEvent = true;
+ }
+ else {
+ // this would adapt the width of the canvas to the width from 100% if and only if
+ // there is a change.
+
+ if (this.frame.canvas.width != this.frame.canvas.clientWidth * this.pixelRatio) {
+ this.frame.canvas.width = this.frame.canvas.clientWidth * this.pixelRatio;
+ emitEvent = true;
+ }
+ if (this.frame.canvas.height != this.frame.canvas.clientHeight * this.pixelRatio) {
+ this.frame.canvas.height = this.frame.canvas.clientHeight * this.pixelRatio;
+ emitEvent = true;
+ }
+ }
+
+ if (emitEvent === true) {
+ this.body.emitter.emit('resize', {width:this.frame.canvas.width * this.pixelRatio,height:this.frame.canvas.height * this.pixelRatio, oldWidth: oldWidth * this.pixelRatio, oldHeight: oldHeight * this.pixelRatio});
+ }
+ };
+
+
+ /**
+ * Convert the X coordinate in DOM-space (coordinate point in browser relative to the container div) to
+ * the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+ _XconvertDOMtoCanvas(x) {
+ return (x - this.translation.x) / this.scale;
+ }
+
+ /**
+ * Convert the X coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+ * the X coordinate in DOM-space (coordinate point in browser relative to the container div)
+ * @param {number} x
+ * @returns {number}
+ * @private
+ */
+ _XconvertCanvasToDOM(x) {
+ return x * this.scale + this.translation.x;
+ }
+
+ /**
+ * Convert the Y coordinate in DOM-space (coordinate point in browser relative to the container div) to
+ * the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon)
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+ _YconvertDOMtoCanvas(y) {
+ return (y - this.translation.y) / this.scale;
+ }
+
+ /**
+ * Convert the Y coordinate in canvas-space (the simulation sandbox, which the camera looks upon) to
+ * the Y coordinate in DOM-space (coordinate point in browser relative to the container div)
+ * @param {number} y
+ * @returns {number}
+ * @private
+ */
+ _YconvertCanvasToDOM(y) {
+ return y * this.scale + this.translation.y ;
+ }
+
+
+ /**
+ *
+ * @param {object} pos = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+ canvasToDOM (pos) {
+ return {x: this._XconvertCanvasToDOM(pos.x), y: this._YconvertCanvasToDOM(pos.y)};
+ }
+
+ /**
+ *
+ * @param {object} pos = {x: number, y: number}
+ * @returns {{x: number, y: number}}
+ * @constructor
+ */
+ DOMtoCanvas (pos) {
+ return {x: this._XconvertDOMtoCanvas(pos.x), y: this._YconvertDOMtoCanvas(pos.y)};
+ }
+
+}
+
+export {Canvas};
\ No newline at end of file
diff --git a/lib/network/modules/CanvasRenderer.js b/lib/network/modules/CanvasRenderer.js
new file mode 100644
index 00000000..50bbb4df
--- /dev/null
+++ b/lib/network/modules/CanvasRenderer.js
@@ -0,0 +1,246 @@
+/**
+ * Created by Alex on 26-Feb-15.
+ */
+
+if (typeof window !== 'undefined') {
+ window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+ window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+}
+
+class CanvasRenderer {
+ constructor(body) {
+ this.body = body;
+
+ this.redrawRequested = false;
+ this.renderTimer = false;
+ this.requiresTimeout = true;
+ this.continueRendering = true;
+ this.renderRequests = 0;
+
+ this.translation = {x: 0, y: 0};
+ this.scale = 1.0;
+ this.canvasTopLeft = {x: 0, y: 0};
+ this.canvasBottomRight = {x: 0, y: 0};
+
+ this.body.emitter.on("_setScale", (scale) => this.scale = scale);
+ this.body.emitter.on("_setTranslation", (translation) => {this.translation.x = translation.x; this.translation.y = translation.y;});
+ this.body.emitter.on("_redraw", this._redraw.bind(this));
+ this.body.emitter.on("_redrawHidden", this._redraw.bind(this, true));
+ this.body.emitter.on("_requestRedraw", this._requestRedraw.bind(this));
+ this.body.emitter.on("_startRendering", () => {this.renderRequests += 1; this.continueRendering = true; this.startRendering();});
+ this.body.emitter.on("_stopRendering", () => {this.renderRequests -= 1; this.continueRendering = this.renderRequests > 0;});
+
+ this._determineBrowserMethod();
+ }
+
+
+ startRendering() {
+ if (this.continueRendering === true) {
+ if (!this.renderTimer) {
+ if (this.requiresTimeout == true) {
+ this.renderTimer = window.setTimeout(this.renderStep.bind(this), this.simulationInterval); // wait this.renderTimeStep milliseconds and perform the animation step function
+ }
+ else {
+ this.renderTimer = window.requestAnimationFrame(this.renderStep.bind(this)); // wait this.renderTimeStep milliseconds and perform the animation step function
+ }
+ }
+ }
+ else {
+
+ }
+ }
+
+ renderStep() {
+ // reset the renderTimer so a new scheduled animation step can be set
+ this.renderTimer = undefined;
+
+ if (this.requiresTimeout == true) {
+ // this schedules a new simulation step
+ this.startRendering();
+ }
+
+ this._redraw();
+
+ if (this.requiresTimeout == false) {
+ // this schedules a new simulation step
+ this.startRendering();
+ }
+ }
+
+ setCanvas(canvas) {
+ this.canvas = canvas;
+ }
+ /**
+ * Redraw the network with the current data
+ * chart will be resized too.
+ */
+ redraw() {
+ this.setSize(this.constants.width, this.constants.height);
+ this._redraw();
+ }
+
+ /**
+ * Redraw the network with the current data
+ * @param hidden | used to get the first estimate of the node sizes. only the nodes are drawn after which they are quickly drawn over.
+ * @private
+ */
+ _requestRedraw(hidden) {
+ if (this.redrawRequested !== true) {
+ this.redrawRequested = true;
+ if (this.requiresTimeout === true) {
+ window.setTimeout(this._redraw.bind(this, hidden),0);
+ }
+ else {
+ window.requestAnimationFrame(this._redraw.bind(this, hidden, true));
+ }
+ }
+ }
+
+ _redraw(hidden = false) {
+ this.body.emitter.emit("_beforeRender");
+
+ this.redrawRequested = false;
+ var ctx = this.canvas.frame.canvas.getContext('2d');
+
+ 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;
+ ctx.clearRect(0, 0, w, h);
+
+ // set scaling and translation
+ ctx.save();
+ ctx.translate(this.translation.x, this.translation.y);
+ ctx.scale(this.scale, this.scale);
+
+ this.canvasTopLeft = this.canvas.DOMtoCanvas({x:0,y:0});
+ this.canvasBottomRight = this.canvas.DOMtoCanvas({x:this.canvas.frame.canvas.clientWidth,y:this.canvas.frame.canvas.clientHeight});
+
+ if (hidden === false) {
+ // todo: solve this
+ //if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideEdgesOnDrag == false) {
+ this._drawEdges(ctx);
+ //}
+ }
+
+ // todo: solve this
+ //if (this.drag.dragging == false || this.drag.dragging === undefined || this.constants.hideNodesOnDrag == false) {
+ this._drawNodes(ctx, this.body.nodes, hidden);
+ //}
+
+ if (hidden === false) {
+ if (this.controlNodesActive == true) {
+ this._drawControlNodes(ctx);
+ }
+ }
+
+ //this._drawNodes(ctx,this.body.supportNodes,true);
+ // this.physics.nodesSolver._debug(ctx,"#F00F0F");
+
+ // restore original scaling and translation
+ ctx.restore();
+
+ if (hidden === true) {
+ ctx.clearRect(0, 0, w, h);
+ }
+ }
+
+
+ /**
+ * Redraw all nodes
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {Boolean} [alwaysShow]
+ * @private
+ */
+ _drawNodes(ctx,nodes,alwaysShow = false) {
+ // first draw the unselected nodes
+ var selected = [];
+
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ nodes[id].setScaleAndPos(this.scale,this.canvasTopLeft,this.canvasBottomRight);
+ if (nodes[id].isSelected()) {
+ selected.push(id);
+ }
+ else {
+ if (alwaysShow === true) {
+ nodes[id].draw(ctx);
+ }
+ else if (nodes[id].inArea() === true) {
+ nodes[id].draw(ctx);
+ }
+ }
+ }
+ }
+
+ // draw the selected nodes on top
+ for (var s = 0, sMax = selected.length; s < sMax; s++) {
+ if (nodes[selected[s]].inArea() || alwaysShow) {
+ nodes[selected[s]].draw(ctx);
+ }
+ }
+ }
+
+
+ /**
+ * Redraw all edges
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ _drawEdges(ctx) {
+ var edges = this.body.edges;
+ for (var id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ var edge = edges[id];
+ edge.setScale(this.scale);
+ if (edge.connected === true) {
+ edges[id].draw(ctx);
+ }
+ }
+ }
+ }
+
+ /**
+ * Redraw all edges
+ * The 2d context of a HTML canvas can be retrieved by canvas.getContext('2d');
+ * @param {CanvasRenderingContext2D} ctx
+ * @private
+ */
+ _drawControlNodes(ctx) {
+ var edges = this.body.edges;
+ for (var id in edges) {
+ if (edges.hasOwnProperty(id)) {
+ edges[id]._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
+ * @private
+ */
+ _determineBrowserMethod() {
+ if (typeof window !== 'undefined') {
+ var browserType = navigator.userAgent.toLowerCase();
+ this.requiresTimeout = false;
+ if (browserType.indexOf('msie 9.0') != -1) { // IE 9
+ this.requiresTimeout = true;
+ }
+ else if (browserType.indexOf('safari') != -1) { // safari
+ if (browserType.indexOf('chrome') <= -1) {
+ this.requiresTimeout = true;
+ }
+ }
+ }
+ else {
+ this.requiresTimeout = true;
+ }
+ }
+
+}
+
+export {CanvasRenderer};
\ No newline at end of file
diff --git a/lib/network/modules/Clustering.js b/lib/network/modules/Clustering.js
new file mode 100644
index 00000000..186c9fc3
--- /dev/null
+++ b/lib/network/modules/Clustering.js
@@ -0,0 +1,620 @@
+/**
+ * Created by Alex on 24-Feb-15.
+ */
+
+var util = require("../../util");
+
+class ClusterEngine {
+ constructor(body) {
+ this.body = body;
+ this.clusteredNodes = {};
+ }
+
+
+ /**
+ *
+ * @param hubsize
+ * @param options
+ */
+ clusterByConnectionCount(hubsize, options) {
+ if (hubsize === undefined) {
+ hubsize = this._getHubSize();
+ }
+ else if (tyepof(hubsize) == "object") {
+ options = this._checkOptions(hubsize);
+ hubsize = this._getHubSize();
+ }
+
+ var nodesToCluster = [];
+ for (var i = 0; i < this.body.nodeIndices.length; i++) {
+ var node = this.body.nodes[this.body.nodeIndices[i]];
+ if (node.edges.length >= hubsize) {
+ nodesToCluster.push(node.id);
+ }
+ }
+
+ for (var i = 0; i < nodesToCluster.length; i++) {
+ var node = this.body.nodes[nodesToCluster[i]];
+ this.clusterByConnection(node,options,{},{},true);
+ }
+ this.body.emitter.emit('_dataChanged');
+ }
+
+
+ /**
+ * loop over all nodes, check if they adhere to the condition and cluster if needed.
+ * @param options
+ * @param doNotUpdateCalculationNodes
+ */
+ clusterByNodeData(options = {}, doNotUpdateCalculationNodes = false) {
+ if (options.joinCondition === undefined) {throw new Error("Cannot call clusterByNodeData without a joinCondition function in the options.");}
+
+ // check if the options object is fine, append if needed
+ options = this._checkOptions(options);
+
+ var childNodesObj = {};
+ var childEdgesObj = {}
+
+ // collect the nodes that will be in the cluster
+ for (var i = 0; i < this.body.nodeIndices.length; i++) {
+ var nodeId = this.body.nodeIndices[i];
+ var clonedOptions = this._cloneOptions(nodeId);
+ if (options.joinCondition(clonedOptions) == true) {
+ childNodesObj[nodeId] = this.body.nodes[nodeId];
+ }
+ }
+
+ this._cluster(childNodesObj, childEdgesObj, options, doNotUpdateCalculationNodes);
+ }
+
+
+ /**
+ * Cluster all nodes in the network that have only 1 edge
+ * @param options
+ * @param doNotUpdateCalculationNodes
+ */
+ clusterOutliers(options, doNotUpdateCalculationNodes) {
+ options = this._checkOptions(options);
+ var clusters = [];
+
+ // collect the nodes that will be in the cluster
+ for (var i = 0; i < this.body.nodeIndices.length; i++) {
+ var childNodesObj = {};
+ var childEdgesObj = {};
+ var nodeId = this.body.nodeIndices[i];
+ if (this.body.nodes[nodeId].edges.length == 1) {
+ var edge = this.body.nodes[nodeId].edges[0];
+ var childNodeId = this._getConnectedId(edge, nodeId);
+ if (childNodeId != nodeId) {
+ if (options.joinCondition === undefined) {
+ childNodesObj[nodeId] = this.body.nodes[nodeId];
+ childNodesObj[childNodeId] = this.body.nodes[childNodeId];
+ }
+ else {
+ var clonedOptions = this._cloneOptions(nodeId);
+ if (options.joinCondition(clonedOptions) == true) {
+ childNodesObj[nodeId] = this.body.nodes[nodeId];
+ }
+ clonedOptions = this._cloneOptions(childNodeId);
+ if (options.joinCondition(clonedOptions) == true) {
+ childNodesObj[childNodeId] = this.body.nodes[childNodeId];
+ }
+ }
+ clusters.push({nodes:childNodesObj, edges:childEdgesObj})
+ }
+ }
+ }
+
+ for (var i = 0; i < clusters.length; i++) {
+ this._cluster(clusters[i].nodes, clusters[i].edges, options, true)
+ }
+
+ if (doNotUpdateCalculationNodes !== true) {
+ this.body.emitter.emit('_dataChanged');
+ }
+ }
+
+ /**
+ *
+ * @param nodeId
+ * @param options
+ * @param doNotUpdateCalculationNodes
+ */
+ clusterByConnection(nodeId, options, doNotUpdateCalculationNodes) {
+ // kill conditions
+ if (nodeId === undefined) {throw new Error("No nodeId supplied to clusterByConnection!");}
+ if (this.body.nodes[nodeId] === undefined) {throw new Error("The nodeId given to clusterByConnection does not exist!");}
+
+ var node = this.body.nodes[nodeId];
+ options = this._checkOptions(options, node);
+ if (options.clusterNodeProperties.x === undefined) {options.clusterNodeProperties.x = node.x; options.clusterNodeProperties.allowedToMoveX = !node.xFixed;}
+ if (options.clusterNodeProperties.y === undefined) {options.clusterNodeProperties.y = node.y; options.clusterNodeProperties.allowedToMoveY = !node.yFixed;}
+
+ var childNodesObj = {};
+ var childEdgesObj = {}
+ var parentNodeId = node.id;
+ var parentClonedOptions = this._cloneOptions(parentNodeId);
+ childNodesObj[parentNodeId] = node;
+
+ // collect the nodes that will be in the cluster
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
+ var childNodeId = this._getConnectedId(edge, parentNodeId);
+
+ if (childNodeId !== parentNodeId) {
+ if (options.joinCondition === undefined) {
+ childEdgesObj[edge.id] = edge;
+ childNodesObj[childNodeId] = this.body.nodes[childNodeId];
+ }
+ else {
+ // clone the options and insert some additional parameters that could be interesting.
+ var childClonedOptions = this._cloneOptions(childNodeId);
+ if (options.joinCondition(parentClonedOptions, childClonedOptions) == true) {
+ childEdgesObj[edge.id] = edge;
+ childNodesObj[childNodeId] = this.body.nodes[childNodeId];
+ }
+ }
+ }
+ else {
+ childEdgesObj[edge.id] = edge;
+ }
+ }
+
+ this._cluster(childNodesObj, childEdgesObj, options, doNotUpdateCalculationNodes);
+ }
+
+
+ /**
+ * This returns a clone of the options or properties of the edge or node to be used for construction of new edges or check functions for new nodes.
+ * @param objId
+ * @param type
+ * @returns {{}}
+ * @private
+ */
+ _cloneOptions(objId, type) {
+ var clonedOptions = {};
+ if (type === undefined || type == 'node') {
+ util.deepExtend(clonedOptions, this.body.nodes[objId].options, true);
+ util.deepExtend(clonedOptions, this.body.nodes[objId].properties, true);
+ clonedOptions.amountOfConnections = this.body.nodes[objId].edges.length;
+ }
+ else {
+ util.deepExtend(clonedOptions, this.body.edges[objId].properties, true);
+ }
+ return clonedOptions;
+ }
+
+
+ /**
+ * This function creates the edges that will be attached to the cluster.
+ *
+ * @param childNodesObj
+ * @param childEdgesObj
+ * @param newEdges
+ * @param options
+ * @private
+ */
+ _createClusterEdges (childNodesObj, childEdgesObj, newEdges, options) {
+ var edge, childNodeId, childNode;
+
+ var childKeys = Object.keys(childNodesObj);
+ for (var i = 0; i < childKeys.length; i++) {
+ childNodeId = childKeys[i];
+ childNode = childNodesObj[childNodeId];
+
+ // mark all edges for removal from global and construct new edges from the cluster to others
+ for (var j = 0; j < childNode.edges.length; j++) {
+ edge = childNode.edges[j];
+ childEdgesObj[edge.id] = edge;
+
+ var otherNodeId = edge.toId;
+ var otherOnTo = true;
+ if (edge.toId != childNodeId) {
+ otherNodeId = edge.toId;
+ otherOnTo = true;
+ }
+ else if (edge.fromId != childNodeId) {
+ otherNodeId = edge.fromId;
+ otherOnTo = false;
+ }
+
+ if (childNodesObj[otherNodeId] === undefined) {
+ var clonedOptions = this._cloneOptions(edge.id, 'edge');
+ util.deepExtend(clonedOptions, options.clusterEdgeProperties);
+ if (otherOnTo === true) {
+ clonedOptions.from = options.clusterNodeProperties.id;
+ clonedOptions.to = otherNodeId;
+ }
+ else {
+ clonedOptions.from = otherNodeId;
+ clonedOptions.to = options.clusterNodeProperties.id;
+ }
+ clonedOptions.id = 'clusterEdge:' + util.randomUUID();
+ newEdges.push(this.body.functions.createEdge(clonedOptions))
+ }
+ }
+ }
+ }
+
+
+ /**
+ * This function checks the options that can be supplied to the different cluster functions
+ * for certain fields and inserts defaults if needed
+ * @param options
+ * @returns {*}
+ * @private
+ */
+ _checkOptions(options = {}) {
+ if (options.clusterEdgeProperties === undefined) {options.clusterEdgeProperties = {};}
+ if (options.clusterNodeProperties === undefined) {options.clusterNodeProperties = {};}
+
+ return options;
+ }
+
+ /**
+ *
+ * @param {Object} childNodesObj | object with node objects, id as keys, same as childNodes except it also contains a source node
+ * @param {Object} childEdgesObj | object with edge objects, id as keys
+ * @param {Array} options | object with {clusterNodeProperties, clusterEdgeProperties, processProperties}
+ * @param {Boolean} doNotUpdateCalculationNodes | when true, do not wrap up
+ * @private
+ */
+ _cluster(childNodesObj, childEdgesObj, options, doNotUpdateCalculationNodes = false) {
+ // kill condition: no children so cant cluster
+ if (Object.keys(childNodesObj).length == 0) {return;}
+
+ // check if we have an unique id;
+ if (options.clusterNodeProperties.id === undefined) {options.clusterNodeProperties.id = 'cluster:' + util.randomUUID();}
+ var clusterId = options.clusterNodeProperties.id;
+
+ // create the new edges that will connect to the cluster
+ var newEdges = [];
+ this._createClusterEdges(childNodesObj, childEdgesObj, newEdges, options);
+
+ // construct the clusterNodeProperties
+ var clusterNodeProperties = options.clusterNodeProperties;
+ if (options.processProperties !== undefined) {
+ // get the childNode options
+ var childNodesOptions = [];
+ for (var nodeId in childNodesObj) {
+ var clonedOptions = this._cloneOptions(nodeId);
+ childNodesOptions.push(clonedOptions);
+ }
+
+ // get clusterproperties based on childNodes
+ var childEdgesOptions = [];
+ for (var edgeId in childEdgesObj) {
+ var clonedOptions = this._cloneOptions(edgeId, 'edge');
+ childEdgesOptions.push(clonedOptions);
+ }
+
+ clusterNodeProperties = options.processProperties(clusterNodeProperties, childNodesOptions, childEdgesOptions);
+ if (!clusterNodeProperties) {
+ throw new Error("The processClusterProperties function does not return properties!");
+ }
+ }
+ if (clusterNodeProperties.label === undefined) {
+ clusterNodeProperties.label = 'cluster';
+ }
+
+
+ // give the clusterNode a postion if it does not have one.
+ var pos = undefined;
+ if (clusterNodeProperties.x === undefined) {
+ pos = this._getClusterPosition(childNodesObj);
+ clusterNodeProperties.x = pos.x;
+ clusterNodeProperties.allowedToMoveX = true;
+ }
+ if (clusterNodeProperties.x === undefined) {
+ if (pos === undefined) {
+ pos = this._getClusterPosition(childNodesObj);
+ }
+ clusterNodeProperties.y = pos.y;
+ clusterNodeProperties.allowedToMoveY = true;
+ }
+
+
+ // force the ID to remain the same
+ clusterNodeProperties.id = clusterId;
+
+
+ // create the clusterNode
+ var clusterNode = this.body.functions.createNode(clusterNodeProperties);
+ clusterNode.isCluster = true;
+ clusterNode.containedNodes = childNodesObj;
+ clusterNode.containedEdges = childEdgesObj;
+
+
+ // delete contained edges from global
+ for (var edgeId in childEdgesObj) {
+ if (childEdgesObj.hasOwnProperty(edgeId)) {
+ if (this.body.edges[edgeId] !== undefined) {
+ if (this.body.edges[edgeId].via !== null) {
+ var viaId = this.body.edges[edgeId].via.id;
+ if (viaId) {
+ this.body.edges[edgeId].via = null
+ delete this.body.supportNodes[viaId];
+ }
+ }
+ this.body.edges[edgeId].disconnect();
+ delete this.body.edges[edgeId];
+ }
+ }
+ }
+
+
+ // remove contained nodes from global
+ for (var nodeId in childNodesObj) {
+ if (childNodesObj.hasOwnProperty(nodeId)) {
+ this.clusteredNodes[nodeId] = {clusterId:clusterNodeProperties.id, node: this.body.nodes[nodeId]};
+ delete this.body.nodes[nodeId];
+ }
+ }
+
+
+ // finally put the cluster node into global
+ this.body.nodes[clusterNodeProperties.id] = clusterNode;
+
+
+ // push new edges to global
+ for (var i = 0; i < newEdges.length; i++) {
+ this.body.edges[newEdges[i].id] = newEdges[i];
+ this.body.edges[newEdges[i].id].connect();
+ }
+
+
+ // create bezier nodes for smooth curves if needed
+ this.body.emitter.emit("_newEdgesCreated");
+
+
+ // set ID to undefined so no duplicates arise
+ clusterNodeProperties.id = undefined;
+
+
+ // wrap up
+ if (doNotUpdateCalculationNodes !== true) {
+ this.body.emitter.emit('_dataChanged');
+ }
+ }
+
+
+ /**
+ * Check if a node is a cluster.
+ * @param nodeId
+ * @returns {*}
+ */
+ isCluster(nodeId) {
+ if (this.body.nodes[nodeId] !== undefined) {
+ return this.body.nodes[nodeId].isCluster;
+ }
+ else {
+ console.log("Node does not exist.")
+ return false;
+ }
+ }
+
+ /**
+ * get the position of the cluster node based on what's inside
+ * @param {object} childNodesObj | object with node objects, id as keys
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ _getClusterPosition(childNodesObj) {
+ var childKeys = Object.keys(childNodesObj);
+ var minX = childNodesObj[childKeys[0]].x;
+ var maxX = childNodesObj[childKeys[0]].x;
+ var minY = childNodesObj[childKeys[0]].y;
+ var maxY = childNodesObj[childKeys[0]].y;
+ var node;
+ for (var i = 0; i < childKeys.lenght; i++) {
+ node = childNodesObj[childKeys[0]];
+ minX = node.x < minX ? node.x : minX;
+ maxX = node.x > maxX ? node.x : maxX;
+ minY = node.y < minY ? node.y : minY;
+ maxY = node.y > maxY ? node.y : maxY;
+ }
+ return {x: 0.5*(minX + maxX), y: 0.5*(minY + maxY)};
+ }
+
+
+ /**
+ * Open a cluster by calling this function.
+ * @param {String} clusterNodeId | the ID of the cluster node
+ * @param {Boolean} doNotUpdateCalculationNodes | wrap up afterwards if not true
+ */
+ openCluster(clusterNodeId, doNotUpdateCalculationNodes) {
+ // 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};
+
+ var node = this.body.nodes[clusterNodeId];
+ var containedNodes = node.containedNodes;
+ var containedEdges = node.containedEdges;
+
+ // release nodes
+ for (var nodeId in containedNodes) {
+ if (containedNodes.hasOwnProperty(nodeId)) {
+ this.body.nodes[nodeId] = containedNodes[nodeId];
+ // inherit position
+ this.body.nodes[nodeId].x = node.x;
+ this.body.nodes[nodeId].y = node.y;
+
+ // inherit speed
+ this.body.nodes[nodeId].vx = node.vx;
+ this.body.nodes[nodeId].vy = node.vy;
+
+ delete this.clusteredNodes[nodeId];
+ }
+ }
+
+ // release edges
+ for (var edgeId in containedEdges) {
+ if (containedEdges.hasOwnProperty(edgeId)) {
+ this.body.edges[edgeId] = containedEdges[edgeId];
+ this.body.edges[edgeId].connect();
+ var edge = this.body.edges[edgeId];
+ if (edge.connected === false) {
+ if (this.clusteredNodes[edge.fromId] !== undefined) {
+ this._connectEdge(edge, edge.fromId, true);
+ }
+ if (this.clusteredNodes[edge.toId] !== undefined) {
+ this._connectEdge(edge, edge.toId, false);
+ }
+ }
+ }
+ }
+
+ this.body.emitter.emit("_newEdgesCreated",containedEdges);
+
+
+ var edgeIds = [];
+ for (var i = 0; i < node.edges.length; i++) {
+ edgeIds.push(node.edges[i].id);
+ }
+
+ // remove edges in clusterNode
+ for (var i = 0; i < edgeIds.length; i++) {
+ var edge = this.body.edges[edgeIds[i]];
+ // if the edge should have been connected to a contained node
+ if (edge.fromArray.length > 0 && edge.fromId == clusterNodeId) {
+ // the node in the from array was contained in the cluster
+ if (this.body.nodes[edge.fromArray[0].id] !== undefined) {
+ this._connectEdge(edge, edge.fromArray[0].id, true);
+ }
+ }
+ else if (edge.toArray.length > 0 && edge.toId == clusterNodeId) {
+ // the node in the to array was contained in the cluster
+ if (this.body.nodes[edge.toArray[0].id] !== undefined) {
+ this._connectEdge(edge, edge.toArray[0].id, false);
+ }
+ }
+ else {
+ var edgeId = edgeIds[i];
+ var viaId = this.body.edges[edgeId].via.id;
+ if (viaId) {
+ this.body.edges[edgeId].via = null
+ delete this.body.supportNodes[viaId];
+ }
+ // this removes the edge from node.edges, which is why edgeIds is formed
+ this.body.edges[edgeId].disconnect();
+ delete this.body.edges[edgeId];
+ }
+ }
+
+ // remove clusterNode
+ delete this.body.nodes[clusterNodeId];
+
+ if (doNotUpdateCalculationNodes !== true) {
+ this.body.emitter.emit('_dataChanged');
+ }
+ }
+
+
+
+ /**
+ * Connect an edge that was previously contained from cluster A to cluster B if the node that it was originally connected to
+ * is currently residing in cluster B
+ * @param edge
+ * @param nodeId
+ * @param from
+ * @private
+ */
+ _connectEdge(edge, nodeId, from) {
+ var clusterStack = this._getClusterStack(nodeId);
+ if (from == true) {
+ edge.from = clusterStack[clusterStack.length - 1];
+ edge.fromId = clusterStack[clusterStack.length - 1].id;
+ clusterStack.pop()
+ edge.fromArray = clusterStack;
+ }
+ else {
+ edge.to = clusterStack[clusterStack.length - 1];
+ edge.toId = clusterStack[clusterStack.length - 1].id;
+ clusterStack.pop();
+ edge.toArray = clusterStack;
+ }
+ edge.connect();
+ }
+
+ /**
+ * Get the stack clusterId's that a certain node resides in. cluster A -> cluster B -> cluster C -> node
+ * @param nodeId
+ * @returns {Array}
+ * @private
+ */
+ _getClusterStack(nodeId) {
+ var stack = [];
+ var max = 100;
+ var counter = 0;
+
+ while (this.clusteredNodes[nodeId] !== undefined && counter < max) {
+ stack.push(this.clusteredNodes[nodeId].node);
+ nodeId = this.clusteredNodes[nodeId].clusterId;
+ counter++;
+ }
+ stack.push(this.body.nodes[nodeId]);
+ return stack;
+ }
+
+
+ /**
+ * Get the Id the node is connected to
+ * @param edge
+ * @param nodeId
+ * @returns {*}
+ * @private
+ */
+ _getConnectedId(edge, nodeId) {
+ if (edge.toId != nodeId) {
+ return edge.toId;
+ }
+ else if (edge.fromId != nodeId) {
+ return edge.fromId;
+ }
+ else {
+ return edge.fromId;
+ }
+ }
+
+ /**
+ * We determine how many connections denote an important hub.
+ * We take the mean + 2*std as the important hub size. (Assuming a normal distribution of data, ~2.2%)
+ *
+ * @private
+ */
+ _getHubSize() {
+ var average = 0;
+ var averageSquared = 0;
+ var hubCounter = 0;
+ var largestHub = 0;
+
+ for (var i = 0; i < this.body.nodeIndices.length; i++) {
+ var node = this.body.nodes[this.body.nodeIndices[i]];
+ if (node.edges.length > largestHub) {
+ largestHub = node.edges.length;
+ }
+ average += node.edges.length;
+ averageSquared += Math.pow(node.edges.length,2);
+ hubCounter += 1;
+ }
+ average = average / hubCounter;
+ averageSquared = averageSquared / hubCounter;
+
+ var variance = averageSquared - Math.pow(average,2);
+ var standardDeviation = Math.sqrt(variance);
+
+ var hubThreshold = Math.floor(average + 2*standardDeviation);
+
+ // always have at least one to cluster
+ if (hubThreshold > largestHub) {
+ hubThreshold = largestHub;
+ }
+
+ return hubThreshold;
+ };
+
+}
+
+
+export { ClusterEngine };
diff --git a/lib/network/modules/PhysicsEngine.js b/lib/network/modules/PhysicsEngine.js
new file mode 100644
index 00000000..a7194e15
--- /dev/null
+++ b/lib/network/modules/PhysicsEngine.js
@@ -0,0 +1,419 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+import {BarnesHutSolver} from "./components/physics/BarnesHutSolver";
+import {Repulsion} from "./components/physics/RepulsionSolver";
+import {HierarchicalRepulsion} from "./components/physics/HierarchicalRepulsionSolver";
+
+import {SpringSolver} from "./components/physics/SpringSolver";
+import {HierarchicalSpringSolver} from "./components/physics/HierarchicalSpringSolver";
+
+import {CentralGravitySolver} from "./components/physics/CentralGravitySolver";
+
+var util = require('../../util');
+
+
+class PhysicsEngine {
+ constructor(body, options) {
+ this.body = body;
+ this.physicsBody = {calculationNodes: {}, calculationNodeIndices:[], forces: {}, velocities: {}};
+ this.scale = 1;
+ this.viewFunction = undefined;
+
+ this.body.emitter.on("_setScale", (scale) => this.scale = scale);
+
+ this.simulationInterval = 1000 / 60;
+ this.requiresTimeout = true;
+ this.previousStates = {};
+ this.renderTimer == undefined;
+
+ this.stabilized = false;
+ this.stabilizationIterations = 0;
+
+ // default options
+ this.options = {
+ barnesHut: {
+ thetaInverted: 1 / 0.5, // inverted to save time during calculation
+ gravitationalConstant: -2000,
+ centralGravity: 0.3,
+ springLength: 95,
+ springConstant: 0.04,
+ damping: 0.09
+ },
+ repulsion: {
+ centralGravity: 0.0,
+ springLength: 200,
+ springConstant: 0.05,
+ nodeDistance: 100,
+ damping: 0.09
+ },
+ hierarchicalRepulsion: {
+ centralGravity: 0.0,
+ springLength: 100,
+ springConstant: 0.01,
+ nodeDistance: 150,
+ damping: 0.09
+ },
+ model: 'BarnesHut',
+ timestep: 0.5,
+ maxVelocity: 50,
+ minVelocity: 0.1, // px/s
+ stabilization: {
+ enabled: true,
+ iterations: 1000, // maximum number of iteration to stabilize
+ updateInterval: 100,
+ onlyDynamicEdges: false,
+ zoomExtent: true
+ }
+ }
+
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ if (options !== undefined) {
+ if (typeof options.stabilization == 'boolean') {
+ options.stabilization = {
+ enabled: options.stabilization
+ }
+ }
+ util.deepExtend(this.options, options);
+ }
+ this.init();
+ }
+
+
+ init() {
+ var options;
+ if (this.options.model == "repulsion") {
+ options = this.options.repulsion;
+ this.nodesSolver = new Repulsion(this.body, this.physicsBody, options);
+ this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
+ }
+ else if (this.options.model == "hierarchicalRepulsion") {
+ options = this.options.hierarchicalRepulsion;
+ this.nodesSolver = new HierarchicalRepulsion(this.body, this.physicsBody, options);
+ this.edgesSolver = new HierarchicalSpringSolver(this.body, this.physicsBody, options);
+ }
+ else { // barnesHut
+ options = this.options.barnesHut;
+ this.nodesSolver = new BarnesHutSolver(this.body, this.physicsBody, options);
+ this.edgesSolver = new SpringSolver(this.body, this.physicsBody, options);
+ }
+
+ this.gravitySolver = new CentralGravitySolver(this.body, this.physicsBody, options);
+ this.modelOptions = options;
+ }
+
+ startSimulation() {
+ this.stabilized = false;
+ if (this.options.stabilization.enabled === true) {
+ this.stabilize();
+ }
+ else {
+ this.runSimulation();
+ }
+ }
+
+ runSimulation() {
+ if (this.viewFunction === undefined) {
+ this.viewFunction = this.simulationStep.bind(this);
+ this.body.emitter.on("_beforeRender", this.viewFunction);
+ this.body.emitter.emit("_startRendering");
+ }
+ }
+
+ simulationStep() {
+ // check if the physics have settled
+ var startTime = Date.now();
+ this.physicsTick();
+ var physicsTime = Date.now() - startTime;
+
+ // run double speed if it is a little graph
+ if ((physicsTime < 0.4 * this.simulationInterval || this.runDoubleSpeed == true) && this.stabilized === false) {
+ this.physicsTick();
+
+ // this makes sure there is no jitter. The decision is taken once to run it at double speed.
+ this.runDoubleSpeed = true;
+ }
+
+ if (this.stabilized === true) {
+ if (this.stabilizationIterations > 1) {
+ // trigger the "stabilized" event.
+ // The event is triggered on the next tick, to prevent the case that
+ // it is fired while initializing the Network, in which case you would not
+ // be able to catch it
+ var me = this;
+ var params = {
+ iterations: this.stabilizationIterations
+ };
+ this.stabilizationIterations = 0;
+ this.startedStabilization = false;
+ setTimeout(function () {
+ me.body.emitter.emit("stabilized", params);
+ }, 0);
+ }
+ else {
+ this.stabilizationIterations = 0;
+ }
+ this.body.emitter.emit("_stopRendering");
+ }
+ }
+
+ /**
+ * A single simulation step (or "tick") in the physics simulation
+ *
+ * @private
+ */
+ physicsTick() {
+ if (this.stabilized === false) {
+ this.calculateForces();
+ this.stabilized = this.moveNodes();
+
+ // determine if the network has stabilzied
+ if (this.stabilized === true) {
+ this.revert();
+ }
+ else {
+ // this is here to ensure that there is no start event when the network is already stable.
+ if (this.startedStabilization == false) {
+ this.body.emitter.emit("startStabilizing");
+ this.startedStabilization = true;
+ }
+ }
+
+ this.stabilizationIterations++;
+ }
+ }
+
+ /**
+ * Smooth curves are created by adding invisible nodes in the center of the edges. These nodes are also
+ * handled in the calculateForces function. We then use a quadratic curve with the center node as control.
+ * This function joins the datanodes and invisible (called support) nodes into one object.
+ * We do this so we do not contaminate this.body.nodes with the support nodes.
+ *
+ * @private
+ */
+ _updateCalculationNodes() {
+ this.physicsBody.calculationNodes = {};
+ this.physicsBody.forces = {};
+ this.physicsBody.calculationNodeIndices = [];
+
+ for (let i = 0; i < this.body.nodeIndices.length; i++) {
+ let nodeId = this.body.nodeIndices[i];
+ this.physicsBody.calculationNodes[nodeId] = this.body.nodes[nodeId];
+ }
+
+ // if support nodes are used, we have them here
+ var supportNodes = this.body.supportNodes;
+ for (let i = 0; i < this.body.supportNodeIndices.length; i++) {
+ let supportNodeId = this.body.supportNodeIndices[i];
+ if (this.body.edges[supportNodes[supportNodeId].parentEdgeId] !== undefined) {
+ this.physicsBody.calculationNodes[supportNodeId] = supportNodes[supportNodeId];
+ }
+ else {
+ console.error("Support node detected that does not have an edge!")
+ }
+ }
+
+ this.physicsBody.calculationNodeIndices = Object.keys(this.physicsBody.calculationNodes);
+ for (let i = 0; i < this.physicsBody.calculationNodeIndices.length; i++) {
+ let nodeId = this.physicsBody.calculationNodeIndices[i];
+ this.physicsBody.forces[nodeId] = {x:0,y:0};
+
+ // forces can be reset because they are recalculated. Velocities have to persist.
+ if (this.physicsBody.velocities[nodeId] === undefined) {
+ this.physicsBody.velocities[nodeId] = {x:0,y:0};
+ }
+ }
+
+ // clean deleted nodes from the velocity vector
+ for (let nodeId in this.physicsBody.velocities) {
+ if (this.physicsBody.calculationNodes[nodeId] === undefined) {
+ delete this.physicsBody.velocities[nodeId];
+ }
+ }
+ }
+
+
+ revert() {
+ var nodeIds = Object.keys(this.previousStates);
+ var nodes = this.physicsBody.calculationNodes;
+ var velocities = this.physicsBody.velocities;
+
+ for (let i = 0; i < nodeIds.length; i++) {
+ let nodeId = nodeIds[i];
+ if (nodes[nodeId] !== undefined) {
+ velocities[nodeId].x = this.previousStates[nodeId].vx;
+ velocities[nodeId].y = this.previousStates[nodeId].vy;
+ nodes[nodeId].x = this.previousStates[nodeId].x;
+ nodes[nodeId].y = this.previousStates[nodeId].y;
+ }
+ else {
+ delete this.previousStates[nodeId];
+ }
+ }
+ }
+
+ moveNodes() {
+ var nodesPresent = false;
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var maxVelocity = this.options.maxVelocity === 0 ? 1e9 : this.options.maxVelocity;
+ var stabilized = true;
+ var vminCorrected = this.options.minVelocity / Math.max(this.scale,0.05);
+
+ for (let i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ let nodeVelocity = this._performStep(nodeId, maxVelocity);
+ // stabilized is true if stabilized is true and velocity is smaller than vmin --> all nodes must be stabilized
+ stabilized = nodeVelocity < vminCorrected && stabilized === true;
+ nodesPresent = true;
+ }
+
+
+ if (nodesPresent == true) {
+ if (vminCorrected > 0.5*this.options.maxVelocity) {
+ return false;
+ }
+ else {
+ return stabilized;
+ }
+ }
+ return true;
+ }
+
+ _performStep(nodeId,maxVelocity) {
+ var node = this.physicsBody.calculationNodes[nodeId];
+ var timestep = this.options.timestep;
+ var forces = this.physicsBody.forces;
+ var velocities = this.physicsBody.velocities;
+
+ // store the state so we can revert
+ this.previousStates[nodeId] = {x:node.x, y:node.y, vx:velocities[nodeId].x, vy:velocities[nodeId].y};
+
+ if (!node.xFixed) {
+ let dx = this.modelOptions.damping * velocities[nodeId].x; // damping force
+ let ax = (forces[nodeId].x - dx) / node.options.mass; // acceleration
+ velocities[nodeId].x += ax * timestep; // velocity
+ velocities[nodeId].x = (Math.abs(velocities[nodeId].x) > maxVelocity) ? ((velocities[nodeId].x > 0) ? maxVelocity : -maxVelocity) : velocities[nodeId].x;
+ node.x += velocities[nodeId].x * timestep; // position
+ }
+ else {
+ forces[nodeId].x = 0;
+ velocities[nodeId].x = 0;
+ }
+
+ if (!node.yFixed) {
+ let dy = this.modelOptions.damping * velocities[nodeId].y; // damping force
+ let ay = (forces[nodeId].y - dy) / node.options.mass; // acceleration
+ velocities[nodeId].y += ay * timestep; // velocity
+ velocities[nodeId].y = (Math.abs(velocities[nodeId].y) > maxVelocity) ? ((velocities[nodeId].y > 0) ? maxVelocity : -maxVelocity) : velocities[nodeId].y;
+ node.y += velocities[nodeId].y * timestep; // position
+ }
+ else {
+ forces[nodeId].y = 0;
+ velocities[nodeId].y = 0;
+ }
+
+ var totalVelocity = Math.sqrt(Math.pow(velocities[nodeId].x,2) + Math.pow(velocities[nodeId].y,2));
+ return totalVelocity;
+ }
+
+ calculateForces() {
+ this.gravitySolver.solve();
+ this.nodesSolver.solve();
+ this.edgesSolver.solve();
+ }
+
+
+
+
+
+
+
+
+
+ /**
+ * When initializing and stabilizing, we can freeze nodes with a predefined position. This greatly speeds up stabilization
+ * because only the supportnodes for the smoothCurves have to settle.
+ *
+ * @private
+ */
+ _freezeNodes() {
+ var nodes = this.body.nodes;
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ if (nodes[id].x != null && nodes[id].y != null) {
+ nodes[id].fixedData.x = nodes[id].xFixed;
+ nodes[id].fixedData.y = nodes[id].yFixed;
+ nodes[id].xFixed = true;
+ nodes[id].yFixed = true;
+ }
+ }
+ }
+ }
+
+ /**
+ * Unfreezes the nodes that have been frozen by _freezeDefinedNodes.
+ *
+ * @private
+ */
+ _restoreFrozenNodes() {
+ var nodes = this.body.nodes;
+ for (var id in nodes) {
+ if (nodes.hasOwnProperty(id)) {
+ if (nodes[id].fixedData.x != null) {
+ nodes[id].xFixed = nodes[id].fixedData.x;
+ nodes[id].yFixed = nodes[id].fixedData.y;
+ }
+ }
+ }
+ }
+
+ /**
+ * Find a stable position for all nodes
+ * @private
+ */
+ stabilize() {
+ if (this.options.stabilization.onlyDynamicEdges == true) {
+ this._freezeNodes();
+ }
+ this.stabilizationSteps = 0;
+
+ setTimeout(this._stabilizationBatch.bind(this),0);
+ }
+
+ _stabilizationBatch() {
+ var count = 0;
+ while (this.stabilized == false && count < this.options.stabilization.updateInterval && this.stabilizationSteps < this.options.stabilization.iterations) {
+ this.physicsTick();
+ this.stabilizationSteps++;
+ count++;
+ }
+
+ if (this.stabilized == false && this.stabilizationSteps < this.options.stabilization.iterations) {
+ this.body.emitter.emit("stabilizationProgress", {steps: this.stabilizationSteps, total: this.options.stabilization.iterations});
+ setTimeout(this._stabilizationBatch.bind(this),0);
+ }
+ else {
+ this._finalizeStabilization();
+ }
+ }
+
+ _finalizeStabilization() {
+ if (this.options.stabilization.zoomExtent == true) {
+ this.body.emitter.emit("zoomExtent", {duration:0});
+ }
+
+ if (this.options.stabilization.onlyDynamicEdges == true) {
+ this._restoreFrozenNodes();
+ }
+
+ this.body.emitter.emit("stabilizationIterationsDone");
+ this.body.emitter.emit("_requestRedraw");
+ }
+
+}
+
+export {PhysicsEngine};
\ No newline at end of file
diff --git a/lib/network/modules/TouchEventHandler.js b/lib/network/modules/TouchEventHandler.js
new file mode 100644
index 00000000..b5b07473
--- /dev/null
+++ b/lib/network/modules/TouchEventHandler.js
@@ -0,0 +1,460 @@
+/**
+ * Created by Alex on 2/27/2015.
+ *
+ */
+
+import {SelectionHandler} from "./components/SelectionHandler"
+var util = require('../../util');
+
+class TouchEventHandler {
+ constructor(body) {
+ this.body = body;
+
+ this.body.eventListeners.onTap = this.onTap.bind(this);
+ this.body.eventListeners.onTouch = this.onTouch.bind(this);
+ this.body.eventListeners.onDoubleTap = this.onDoubleTap.bind(this);
+ this.body.eventListeners.onHold = this.onHold.bind(this);
+ this.body.eventListeners.onDragStart = this.onDragStart.bind(this);
+ this.body.eventListeners.onDrag = this.onDrag.bind(this);
+ this.body.eventListeners.onDragEnd = this.onDragEnd.bind(this);
+ this.body.eventListeners.onMouseWheel = this.onMouseWheel.bind(this);
+ this.body.eventListeners.onPinch = this.onPinch.bind(this);
+ this.body.eventListeners.onMouseMove = this.onMouseMove.bind(this);
+ this.body.eventListeners.onRelease = this.onRelease.bind(this);
+
+ this.touchTime = 0;
+ this.drag = {};
+ this.pinch = {};
+ this.pointerPosition = {x:0,y:0};
+
+ this.scale = 1.0;
+ this.body.emitter.on("_setScale", (scale) => this.scale = scale);
+
+ this.selectionHandler = new SelectionHandler(body);
+ }
+
+ setCanvas(canvas) {
+ this.canvas = canvas;
+ this.selectionHandler.setCanvas(canvas);
+ }
+
+ /**
+ * Get the pointer location from a touch location
+ * @param {{pageX: Number, pageY: Number}} touch
+ * @return {{x: Number, y: Number}} pointer
+ * @private
+ */
+ getPointer(touch) {
+ return {
+ x: touch.pageX - util.getAbsoluteLeft(this.canvas.frame.canvas),
+ y: touch.pageY - util.getAbsoluteTop(this.canvas.frame.canvas)
+ };
+ }
+
+
+ /**
+ * On start of a touch gesture, store the pointer
+ * @param event
+ * @private
+ */
+ onTouch(event) {
+ if (new Date().valueOf() - this.touchTime > 100) {
+ this.drag.pointer = this.getPointer(event.gesture.center);
+ this.drag.pinched = false;
+ this.pinch.scale = this.scale;
+
+ // to avoid double fireing of this event because we have two hammer instances. (on canvas and on frame)
+ this.touchTime = new Date().valueOf();
+ }
+ }
+
+ /**
+ * handle tap/click event: select/unselect a node
+ * @private
+ */
+ onTap(event) {
+ console.log("tap",event)
+ var pointer = this.getPointer(event.gesture.center);
+ this.pointerPosition = pointer;
+ this.selectionHandler.selectOnPoint(pointer);
+ }
+
+ /**
+ * handle drag start event
+ * @private
+ */
+
+ /**
+ * This function is called by onDragStart.
+ * It is separated out because we can then overload it for the datamanipulation system.
+ *
+ * @private
+ */
+ onDragStart(event) {
+ // in case the touch event was triggered on an external div, do the initial touch now.
+ //if (this.drag.pointer === undefined) {
+ // this.onTouch(event);
+ //}
+ //
+ //var node = this._getNodeAt(this.drag.pointer);
+ //// note: drag.pointer is set in onTouch to get the initial touch location
+ //
+ //this.drag.dragging = true;
+ //this.drag.selection = [];
+ //this.drag.translation = this._getTranslation();
+ //this.drag.nodeId = null;
+ //this.draggingNodes = false;
+ //
+ //if (node != null && this.constants.dragNodes == true) {
+ // this.draggingNodes = true;
+ // this.drag.nodeId = node.id;
+ // // select the clicked node if not yet selected
+ // if (!node.isSelected()) {
+ // this._selectObject(node, false);
+ // }
+ //
+ // this.emit("dragStart", {nodeIds: this.getSelection().nodes});
+ //
+ // // create an array with the selected nodes and their original location and status
+ // for (var objectId in this.selectionObj.nodes) {
+ // if (this.selectionObj.nodes.hasOwnProperty(objectId)) {
+ // var object = this.selectionObj.nodes[objectId];
+ // var s = {
+ // id: object.id,
+ // node: object,
+ //
+ // // store original x, y, xFixed and yFixed, make the node temporarily Fixed
+ // x: object.x,
+ // y: object.y,
+ // xFixed: object.xFixed,
+ // yFixed: object.yFixed
+ // };
+ //
+ // object.xFixed = true;
+ // object.yFixed = true;
+ //
+ // this.drag.selection.push(s);
+ // }
+ // }
+ //}
+ }
+
+
+ /**
+ * handle drag event
+ * @private
+ */
+ onDrag(event) {
+ //if (this.drag.pinched) {
+ // return;
+ //}
+ //
+ //// remove the focus on node if it is focussed on by the focusOnNode
+ //this.releaseNode();
+ //
+ //var pointer = this.getPointer(event.gesture.center);
+ //var me = this;
+ //var drag = this.drag;
+ //var selection = drag.selection;
+ //if (selection && selection.length && this.constants.dragNodes == true) {
+ // // calculate delta's and new location
+ // var deltaX = pointer.x - drag.pointer.x;
+ // var deltaY = pointer.y - drag.pointer.y;
+ //
+ // // update position of all selected nodes
+ // selection.forEach(function (s) {
+ // var node = s.node;
+ //
+ // if (!s.xFixed) {
+ // node.x = me._XconvertDOMtoCanvas(me._XconvertCanvasToDOM(s.x) + deltaX);
+ // }
+ //
+ // if (!s.yFixed) {
+ // node.y = me._YconvertDOMtoCanvas(me._YconvertCanvasToDOM(s.y) + deltaY);
+ // }
+ // });
+ //
+ //
+ // // start _animationStep if not yet running
+ // if (!this.moving) {
+ // this.moving = true;
+ // this.start();
+ // }
+ //}
+ //else {
+ // // move the network
+ // if (this.constants.dragNetwork == true) {
+ // // if the drag was not started properly because the click started outside the network div, start it now.
+ // if (this.drag.pointer === undefined) {
+ // this._handleDragStart(event);
+ // return;
+ // }
+ // var diffX = pointer.x - this.drag.pointer.x;
+ // var diffY = pointer.y - this.drag.pointer.y;
+ //
+ // this._setTranslation(
+ // this.drag.translation.x + diffX,
+ // this.drag.translation.y + diffY
+ // );
+ // this._redraw();
+ // }
+ //}
+ }
+
+
+ /**
+ * handle drag start event
+ * @private
+ */
+ onDragEnd(event) {
+ //this.drag.dragging = false;
+ //var selection = this.drag.selection;
+ //if (selection && selection.length) {
+ // selection.forEach(function (s) {
+ // // restore original xFixed and yFixed
+ // s.node.xFixed = s.xFixed;
+ // s.node.yFixed = s.yFixed;
+ // });
+ // this.moving = true;
+ // this.start();
+ //}
+ //else {
+ // this._redraw();
+ //}
+ //if (this.draggingNodes == false) {
+ // this.emit("dragEnd", {nodeIds: []});
+ //}
+ //else {
+ // this.emit("dragEnd", {nodeIds: this.getSelection().nodes});
+ //}
+ }
+
+ /**
+ * handle doubletap event
+ * @private
+ */
+ onDoubleTap(event) {
+ //var pointer = this.getPointer(event.gesture.center);
+ //this._handleDoubleTap(pointer);
+ }
+
+
+
+ /**
+ * handle long tap event: multi select nodes
+ * @private
+ */
+ onHold(event) {
+ //var pointer = this.getPointer(event.gesture.center);
+ //this.pointerPosition = pointer;
+ //this._handleOnHold(pointer);
+ }
+
+
+ /**
+ * handle the release of the screen
+ *
+ * @private
+ */
+ onRelease(event) {
+ //var pointer = this.getPointer(event.gesture.center);
+ //this._handleOnRelease(pointer);
+ }
+
+
+ /**
+ * Handle pinch event
+ * @param event
+ * @private
+ */
+ onPinch(event) {
+ //var pointer = this.getPointer(event.gesture.center);
+ //
+ //this.drag.pinched = true;
+ //if (!('scale' in this.pinch)) {
+ // this.pinch.scale = 1;
+ //}
+ //
+ //// TODO: enabled moving while pinching?
+ //var scale = this.pinch.scale * event.gesture.scale;
+ //this._zoom(scale, pointer)
+ }
+
+
+ /**
+ * Zoom the network in or out
+ * @param {Number} scale a number around 1, and between 0.01 and 10
+ * @param {{x: Number, y: Number}} pointer Position on screen
+ * @return {Number} appliedScale scale is limited within the boundaries
+ * @private
+ */
+ _zoom(scale, pointer) {
+ //if (this.constants.zoomable == true) {
+ // var scaleOld = this._getScale();
+ // if (scale < 0.00001) {
+ // scale = 0.00001;
+ // }
+ // if (scale > 10) {
+ // scale = 10;
+ // }
+ //
+ // var preScaleDragPointer = null;
+ // if (this.drag !== undefined) {
+ // if (this.drag.dragging == true) {
+ // preScaleDragPointer = this.canvas.DOMtoCanvas(this.drag.pointer);
+ // }
+ // }
+ // // + this.canvas.frame.canvas.clientHeight / 2
+ // var translation = this._getTranslation();
+ //
+ // var scaleFrac = scale / scaleOld;
+ // var tx = (1 - scaleFrac) * pointer.x + translation.x * scaleFrac;
+ // var ty = (1 - scaleFrac) * pointer.y + translation.y * scaleFrac;
+ //
+ // this._setScale(scale);
+ // this._setTranslation(tx, ty);
+ //
+ // if (preScaleDragPointer != null) {
+ // var postScaleDragPointer = this.canvas.canvasToDOM(preScaleDragPointer);
+ // this.drag.pointer.x = postScaleDragPointer.x;
+ // this.drag.pointer.y = postScaleDragPointer.y;
+ // }
+ //
+ // this._redraw();
+ //
+ // if (scaleOld < scale) {
+ // this.emit("zoom", {direction: "+"});
+ // }
+ // else {
+ // this.emit("zoom", {direction: "-"});
+ // }
+ //
+ // return scale;
+ //}
+ }
+
+
+ /**
+ * Event handler for mouse wheel event, used to zoom the timeline
+ * See http://adomas.org/javascript-mouse-wheel/
+ * https://github.com/EightMedia/hammer.js/issues/256
+ * @param {MouseEvent} event
+ * @private
+ */
+ onMouseWheel(event) {
+ //// retrieve delta
+ //var delta = 0;
+ //if (event.wheelDelta) { /* IE/Opera. */
+ // delta = event.wheelDelta / 120;
+ //} else if (event.detail) { /* Mozilla case. */
+ // // In Mozilla, sign of delta is different than in IE.
+ // // Also, delta is multiple of 3.
+ // delta = -event.detail / 3;
+ //}
+ //
+ //// If delta is nonzero, handle it.
+ //// Basically, delta is now positive if wheel was scrolled up,
+ //// and negative, if wheel was scrolled down.
+ //if (delta) {
+ //
+ // // calculate the new scale
+ // var scale = this._getScale();
+ // var zoom = delta / 10;
+ // if (delta < 0) {
+ // zoom = zoom / (1 - zoom);
+ // }
+ // scale *= (1 + zoom);
+ //
+ // // calculate the pointer location
+ // var gesture = hammerUtil.fakeGesture(this, event);
+ // var pointer = this.getPointer(gesture.center);
+ //
+ // // apply the new scale
+ // this._zoom(scale, pointer);
+ //}
+ //
+ //// Prevent default actions caused by mouse wheel.
+ //event.preventDefault();
+ }
+
+
+ /**
+ * Mouse move handler for checking whether the title moves over a node with a title.
+ * @param {Event} event
+ * @private
+ */
+ onMouseMove(event) {
+ //var gesture = hammerUtil.fakeGesture(this, event);
+ //var pointer = this.getPointer(gesture.center);
+ //var popupVisible = false;
+ //
+ //// check if the previously selected node is still selected
+ //if (this.popup !== undefined) {
+ // if (this.popup.hidden === false) {
+ // this._checkHidePopup(pointer);
+ // }
+ //
+ // // 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.show();
+ // }
+ //}
+ //
+ //// if we bind the keyboard to the div, we have to highlight it to use it. This highlights it on mouse over
+ //if (this.constants.keyboard.bindToWindow == false && this.constants.keyboard.enabled == true) {
+ // this.canvas.frame.focus();
+ //}
+ //
+ //// start a timeout that will check if the mouse is positioned above an element
+ //if (popupVisible === false) {
+ // var me = this;
+ // var checkShow = function() {
+ // me._checkShowPopup(pointer);
+ // };
+ //
+ // if (this.popupTimer) {
+ // clearInterval(this.popupTimer); // stop any running calculationTimer
+ // }
+ // if (!this.drag.dragging) {
+ // this.popupTimer = setTimeout(checkShow, this.constants.tooltip.delay);
+ // }
+ //}
+ //
+ ///**
+ // * Adding hover highlights
+ // */
+ //if (this.constants.hover == true) {
+ // // removing all hover highlights
+ // for (var edgeId in this.hoverObj.edges) {
+ // if (this.hoverObj.edges.hasOwnProperty(edgeId)) {
+ // this.hoverObj.edges[edgeId].hover = false;
+ // delete this.hoverObj.edges[edgeId];
+ // }
+ // }
+ //
+ // // adding hover highlights
+ // var obj = this._getNodeAt(pointer);
+ // if (obj == null) {
+ // obj = this._getEdgeAt(pointer);
+ // }
+ // if (obj != null) {
+ // this._hoverObject(obj);
+ // }
+ //
+ // // removing all node hover highlights except for the selected one.
+ // for (var nodeId in this.hoverObj.nodes) {
+ // if (this.hoverObj.nodes.hasOwnProperty(nodeId)) {
+ // if (obj instanceof Node && obj.id != nodeId || obj instanceof Edge || obj == null) {
+ // this._blurObject(this.hoverObj.nodes[nodeId]);
+ // delete this.hoverObj.nodes[nodeId];
+ // }
+ // }
+ // }
+ // this.redraw();
+ //}
+ }
+}
+
+export {TouchEventHandler};
diff --git a/lib/network/modules/View.js b/lib/network/modules/View.js
new file mode 100644
index 00000000..58a3cb45
--- /dev/null
+++ b/lib/network/modules/View.js
@@ -0,0 +1,342 @@
+/**
+ * Created by Alex on 26-Feb-15.
+ */
+
+var util = require('../../util');
+
+class View {
+ constructor(body, options) {
+ this.body = body;
+ this.setOptions(options);
+
+ this.animationSpeed = 1/this.renderRefreshRate;
+ this.animationEasingFunction = "easeInOutQuint";
+ this.easingTime = 0;
+ this.sourceScale = 0;
+ this.targetScale = 0;
+ this.sourceTranslation = 0;
+ this.targetTranslation = 0;
+ this.lockedOnNodeId = null;
+ this.lockedOnNodeOffset = null;
+ this.touchTime = 0;
+
+ this.translation = {x: 0, y: 0};
+ this.scale = 1.0;
+
+ this.viewFunction = undefined;
+
+ this.body.emitter.on("zoomExtent", this.zoomExtent.bind(this));
+ this.body.emitter.on("_setScale", (scale) => this.scale = scale);
+ this.body.emitter.on("_setTranslation", (translation) => {this.translation.x = translation.x; this.translation.y = translation.y;});
+ this.body.emitter.on("animationFinished", () => {this.body.emitter.emit("_stopRendering");});
+ this.body.emitter.on("unlockNode", this.releaseNode.bind(this));
+ }
+
+
+ setOptions(options = {}) {
+ this.options = options;
+ }
+
+ setCanvas(canvas) {
+ this.canvas = canvas;
+ }
+
+ // zoomExtent
+ /**
+ * Find the center position of the network
+ * @private
+ */
+ _getRange(specificNodes = []) {
+ var minY = 1e9, maxY = -1e9, minX = 1e9, maxX = -1e9, node;
+ if (specificNodes.length > 0) {
+ for (var i = 0; i < specificNodes.length; i++) {
+ node = this.body.nodes[specificNodes[i]];
+ if (minX > (node.boundingBox.left)) {
+ minX = node.boundingBox.left;
+ }
+ if (maxX < (node.boundingBox.right)) {
+ maxX = node.boundingBox.right;
+ }
+ if (minY > (node.boundingBox.bottom)) {
+ minY = node.boundingBox.top;
+ } // top is negative, bottom is positive
+ if (maxY < (node.boundingBox.top)) {
+ maxY = node.boundingBox.bottom;
+ } // top is negative, bottom is positive
+ }
+ }
+ else {
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ node = this.body.nodes[nodeId];
+ if (minX > (node.boundingBox.left)) {
+ minX = node.boundingBox.left;
+ }
+ if (maxX < (node.boundingBox.right)) {
+ maxX = node.boundingBox.right;
+ }
+ if (minY > (node.boundingBox.bottom)) {
+ minY = node.boundingBox.top;
+ } // top is negative, bottom is positive
+ if (maxY < (node.boundingBox.top)) {
+ maxY = node.boundingBox.bottom;
+ } // top is negative, bottom is positive
+ }
+ }
+ }
+
+ if (minX == 1e9 && maxX == -1e9 && minY == 1e9 && maxY == -1e9) {
+ minY = 0, maxY = 0, minX = 0, maxX = 0;
+ }
+ return {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+ }
+
+
+ /**
+ * @param {object} range = {minX: minX, maxX: maxX, minY: minY, maxY: maxY};
+ * @returns {{x: number, y: number}}
+ * @private
+ */
+ _findCenter(range) {
+ return {x: (0.5 * (range.maxX + range.minX)),
+ y: (0.5 * (range.maxY + range.minY))};
+ }
+
+
+ /**
+ * This function zooms out to fit all data on screen based on amount of nodes
+ * @param {Object}
+ * @param {Boolean} [initialZoom] | zoom based on fitted formula or range, true = fitted, default = false;
+ * @param {Boolean} [disableStart] | If true, start is not called.
+ */
+ zoomExtent(options = {nodes:[]}, initialZoom = false) {
+ var range;
+ var zoomLevel;
+
+ if (initialZoom == true) {
+ // check if more than half of the nodes have a predefined position. If so, we use the range, not the approximation.
+ var positionDefined = 0;
+ for (var nodeId in this.body.nodes) {
+ if (this.body.nodes.hasOwnProperty(nodeId)) {
+ var node = this.body.nodes[nodeId];
+ if (node.predefinedPosition == true) {
+ positionDefined += 1;
+ }
+ }
+ }
+ if (positionDefined > 0.5 * this.body.nodeIndices.length) {
+ this.zoomExtent(options,false);
+ return;
+ }
+
+ range = this._getRange(options.nodes);
+
+ var numberOfNodes = this.body.nodeIndices.length;
+ if (this.options.smoothCurves == true) {
+ zoomLevel = 12.662 / (numberOfNodes + 7.4147) + 0.0964822; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+ }
+ else {
+ zoomLevel = 30.5062972 / (numberOfNodes + 19.93597763) + 0.08413486; // this is obtained from fitting a dataset from 5 points with scale levels that looked good.
+ }
+
+ // correct for larger canvasses.
+ var factor = Math.min(this.canvas.frame.canvas.clientWidth / 600, this.canvas.frame.canvas.clientHeight / 600);
+ zoomLevel *= factor;
+ }
+ else {
+ this.body.emitter.emit("_redrawHidden");
+ range = this._getRange(options.nodes);
+ var xDistance = Math.abs(range.maxX - range.minX) * 1.1;
+ var yDistance = Math.abs(range.maxY - range.minY) * 1.1;
+
+ var xZoomLevel = this.canvas.frame.canvas.clientWidth / xDistance;
+ var yZoomLevel = this.canvas.frame.canvas.clientHeight / yDistance;
+ zoomLevel = (xZoomLevel <= yZoomLevel) ? xZoomLevel : yZoomLevel;
+ }
+
+ if (zoomLevel > 1.0) {
+ zoomLevel = 1.0;
+ }
+
+
+ var center = this._findCenter(range);
+ var animationOptions = {position: center, scale: zoomLevel, animation: options};
+ this.moveTo(animationOptions);
+ }
+
+ // animation
+
+ /**
+ * Center a node in view.
+ *
+ * @param {Number} nodeId
+ * @param {Number} [options]
+ */
+ focusOnNode(nodeId, options = {}) {
+ if (this.body.nodes[nodeId] !== undefined) {
+ var nodePosition = {x: this.body.nodes[nodeId].x, y: this.body.nodes[nodeId].y};
+ options.position = nodePosition;
+ options.lockedOnNode = nodeId;
+
+ this.moveTo(options)
+ }
+ else {
+ console.log("Node: " + nodeId + " cannot be found.");
+ }
+ }
+
+ /**
+ *
+ * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
+ * | options.scale = Number // scale to move to
+ * | options.position = {x:Number, y:Number} // position to move to
+ * | options.animation = {duration:Number, easingFunction:String} || Boolean // position to move to
+ */
+ moveTo(options) {
+ if (options === undefined) {
+ options = {};
+ return;
+ }
+ if (options.offset === undefined) {options.offset = {x: 0, y: 0}; }
+ if (options.offset.x === undefined) {options.offset.x = 0; }
+ if (options.offset.y === undefined) {options.offset.y = 0; }
+ if (options.scale === undefined) {options.scale = this.scale; }
+ if (options.position === undefined) {options.position = this.translation;}
+ if (options.animation === undefined) {options.animation = {duration:0}; }
+ if (options.animation === false ) {options.animation = {duration:0}; }
+ if (options.animation === true ) {options.animation = {}; }
+ if (options.animation.duration === undefined) {options.animation.duration = 1000; } // default duration
+ if (options.animation.easingFunction === undefined) {options.animation.easingFunction = "easeInOutQuad"; } // default easing function
+
+ this.animateView(options);
+ }
+
+ /**
+ *
+ * @param {Object} options | options.offset = {x:Number, y:Number} // offset from the center in DOM pixels
+ * | options.time = Number // animation time in milliseconds
+ * | options.scale = Number // scale to animate to
+ * | options.position = {x:Number, y:Number} // position to animate to
+ * | options.easingFunction = String // linear, easeInQuad, easeOutQuad, easeInOutQuad,
+ * // easeInCubic, easeOutCubic, easeInOutCubic,
+ * // easeInQuart, easeOutQuart, easeInOutQuart,
+ * // easeInQuint, easeOutQuint, easeInOutQuint
+ */
+ animateView(options) {
+ if (options === undefined) {
+ return;
+ }
+ this.animationEasingFunction = options.animation.easingFunction;
+ // release if something focussed on the node
+ this.releaseNode();
+ if (options.locked == true) {
+ this.lockedOnNodeId = options.lockedOnNode;
+ this.lockedOnNodeOffset = options.offset;
+ }
+
+ // forcefully complete the old animation if it was still running
+ if (this.easingTime != 0) {
+ this._transitionRedraw(true); // by setting easingtime to 1, we finish the animation.
+ }
+
+ this.sourceScale = this.scale;
+ this.sourceTranslation = this.translation;
+ this.targetScale = options.scale;
+
+ // set the scale so the viewCenter is based on the correct zoom level. This is overridden in the transitionRedraw
+ // but at least then we'll have the target transition
+ this.body.emitter.emit("_setScale",this.targetScale);
+ var viewCenter = this.canvas.DOMtoCanvas({x: 0.5 * this.canvas.frame.canvas.clientWidth, y: 0.5 * this.canvas.frame.canvas.clientHeight});
+ var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
+ x: viewCenter.x - options.position.x,
+ y: viewCenter.y - options.position.y
+ };
+ this.targetTranslation = {
+ x: this.sourceTranslation.x + distanceFromCenter.x * this.targetScale + options.offset.x,
+ y: this.sourceTranslation.y + distanceFromCenter.y * this.targetScale + options.offset.y
+ };
+
+ // if the time is set to 0, don't do an animation
+ if (options.animation.duration == 0) {
+ if (this.lockedOnNodeId != null) {
+ this.viewFunction = this._lockedRedraw.bind(this);
+ this.body.emitter.on("_beforeRender", this.viewFunction);
+ }
+ else {
+ this.body.emitter.emit("_setScale", this.targetScale);;
+ this.body.emitter.emit("_setTranslation", this.targetTranslation);
+ this.body.emitter.emit("_requestRedraw");
+ }
+ }
+ else {
+ this.animationSpeed = 1 / (60 * options.animation.duration * 0.001) || 1 / 60; // 60 for 60 seconds, 0.001 for milli's
+ this.animationEasingFunction = options.animation.easingFunction;
+
+
+ this.viewFunction = this._transitionRedraw.bind(this);
+ this.body.emitter.on("_beforeRender", this.viewFunction);
+ this.body.emitter.emit("_startRendering");
+ }
+ }
+
+ /**
+ * used to animate smoothly by hijacking the redraw function.
+ * @private
+ */
+ _lockedRedraw() {
+ var nodePosition = {x: this.body.nodes[this.lockedOnNodeId].x, y: this.body.nodes[this.lockedOnNodeId].y};
+ var viewCenter = this.DOMtoCanvas({x: 0.5 * this.frame.canvas.clientWidth, y: 0.5 * this.frame.canvas.clientHeight});
+ var distanceFromCenter = { // offset from view, distance view has to change by these x and y to center the node
+ x: viewCenter.x - nodePosition.x,
+ y: viewCenter.y - nodePosition.y
+ };
+ var sourceTranslation = this.translation;
+ var targetTranslation = {
+ x: sourceTranslation.x + distanceFromCenter.x * this.scale + this.lockedOnNodeOffset.x,
+ y: sourceTranslation.y + distanceFromCenter.y * this.scale + this.lockedOnNodeOffset.y
+ };
+
+ this.body.emitter.emit("_setTranslation", targetTranslation);
+ }
+
+ releaseNode() {
+ if (this.lockedOnNodeId !== undefined) {
+ this.body.emitter.off("_beforeRender", this.viewFunction);
+ this.lockedOnNodeId = undefined;
+ this.lockedOnNodeOffset = undefined;
+ }
+ }
+
+ /**
+ *
+ * @param easingTime
+ * @private
+ */
+ _transitionRedraw(finished = false) {
+ this.easingTime += this.animationSpeed;
+ this.easingTime = finished === true ? 1.0 : this.easingTime;
+
+ var progress = util.easingFunctions[this.animationEasingFunction](this.easingTime);
+
+ this.body.emitter.emit("_setScale", this.sourceScale + (this.targetScale - this.sourceScale) * progress);
+ this.body.emitter.emit("_setTranslation", {
+ x: this.sourceTranslation.x + (this.targetTranslation.x - this.sourceTranslation.x) * progress,
+ y: this.sourceTranslation.y + (this.targetTranslation.y - this.sourceTranslation.y) * progress
+ });
+
+ // cleanup
+ if (this.easingTime >= 1.0) {
+ this.body.emitter.off("_beforeRender", this.viewFunction);
+ this.easingTime = 0;
+ if (this.lockedOnNodeId != null) {
+ this.viewFunction = this._lockedRedraw.bind(this);
+ this.body.emitter.on("_beforeRender", this.viewFunction);
+ }
+ this.body.emitter.emit("animationFinished");
+ }
+ };
+
+
+}
+
+export {View};
\ No newline at end of file
diff --git a/lib/network/modules/components/SelectionHandler.js b/lib/network/modules/components/SelectionHandler.js
new file mode 100644
index 00000000..800395ba
--- /dev/null
+++ b/lib/network/modules/components/SelectionHandler.js
@@ -0,0 +1,640 @@
+/**
+ * Created by Alex on 2/27/2015.
+ */
+
+var Node = require("../../Node");
+
+class SelectionHandler {
+ constructor(body) {
+ this.body = body;
+ this.selectionObj = {nodes:[], edges:[]};
+
+ this.options = {
+ select: true,
+ selectConnectedEdges: true
+ }
+ }
+
+ setCanvas(canvas) {
+ this.canvas = canvas;
+ }
+
+
+ /**
+ * handles the selection part of the tap;
+ *
+ * @param {Object} pointer
+ * @private
+ */
+ selectOnPoint(pointer) {
+ if (this.options.select === true) {
+ if (this._getSelectedObjectCount() > 0) {this._unselectAll();}
+
+ this.selectObject(pointer);
+ this._generateClickEvent(pointer);
+
+ this.body.emitter.emit("_requestRedraw");
+ }
+ }
+
+ _generateClickEvent(pointer) {
+ var properties = this.getSelection();
+ properties['pointer'] = {
+ DOM: {x: pointer.x, y: pointer.y},
+ canvas: this.canvas.DOMtoCanvas(pointer)
+ }
+ this.body.emitter.emit("click", properties);
+ }
+
+ selectObject(pointer) {
+ var obj = this._getNodeAt(pointer);
+ if (obj != null) {
+ if (this.options.selectConnectedEdges === true) {
+ this._selectConnectedEdges(obj);
+ }
+ }
+ else {
+ obj = this._getEdgeAt(pointer);
+ }
+
+ if (obj !== null) {
+ obj.select();
+ this._addToSelection(obj);
+ this.body.emitter.emit('selected', this.getSelection())
+ }
+ return obj;
+ }
+
+
+ /**
+ *
+ * @param object
+ * @param overlappingNodes
+ * @private
+ */
+ _getNodesOverlappingWith(object, overlappingNodes) {
+ var nodes = this.body.nodes;
+ for (var nodeId in nodes) {
+ if (nodes.hasOwnProperty(nodeId)) {
+ if (nodes[nodeId].isOverlappingWith(object)) {
+ overlappingNodes.push(nodeId);
+ }
+ }
+ }
+ }
+
+ /**
+ * retrieve all nodes overlapping with given object
+ * @param {Object} object An object with parameters left, top, right, bottom
+ * @return {Number[]} An array with id's of the overlapping nodes
+ * @private
+ */
+ _getAllNodesOverlappingWith(object) {
+ var overlappingNodes = [];
+ this._getNodesOverlappingWith(object,overlappingNodes);
+ return overlappingNodes;
+ }
+
+
+ /**
+ * Return a position object in canvasspace from a single point in screenspace
+ *
+ * @param pointer
+ * @returns {{left: number, top: number, right: number, bottom: number}}
+ * @private
+ */
+ _pointerToPositionObject(pointer) {
+ var canvasPos = this.canvas.DOMtoCanvas(pointer);
+ return {
+ left: canvasPos.x,
+ top: canvasPos.y,
+ right: canvasPos.x,
+ bottom: canvasPos.y
+ };
+ }
+
+
+ /**
+ * Get the top node at the a specific point (like a click)
+ *
+ * @param {{x: Number, y: Number}} pointer
+ * @return {Node | null} node
+ * @private
+ */
+ _getNodeAt(pointer) {
+ // we first check if this is an navigation controls element
+ var positionObject = this._pointerToPositionObject(pointer);
+ var overlappingNodes = this._getAllNodesOverlappingWith(positionObject);
+
+ // if there are overlapping nodes, select the last one, this is the
+ // one which is drawn on top of the others
+ if (overlappingNodes.length > 0) {
+ return this.body.nodes[overlappingNodes[overlappingNodes.length - 1]];
+ }
+ else {
+ return null;
+ }
+ }
+
+
+ /**
+ * retrieve all edges overlapping with given object, selector is around center
+ * @param {Object} object An object with parameters left, top, right, bottom
+ * @return {Number[]} An array with id's of the overlapping nodes
+ * @private
+ */
+ _getEdgesOverlappingWith(object, overlappingEdges) {
+ var edges = this.body.edges;
+ for (var edgeId in edges) {
+ if (edges.hasOwnProperty(edgeId)) {
+ if (edges[edgeId].isOverlappingWith(object)) {
+ overlappingEdges.push(edgeId);
+ }
+ }
+ }
+ }
+
+
+ /**
+ * retrieve all nodes overlapping with given object
+ * @param {Object} object An object with parameters left, top, right, bottom
+ * @return {Number[]} An array with id's of the overlapping nodes
+ * @private
+ */
+ _getAllEdgesOverlappingWith(object) {
+ var overlappingEdges = [];
+ this._getEdgesOverlappingWith(object,overlappingEdges);
+ return overlappingEdges;
+ }
+
+
+ /**
+ * Place holder. To implement change the _getNodeAt to a _getObjectAt. Have the _getObjectAt call
+ * _getNodeAt and _getEdgesAt, then priortize the selection to user preferences.
+ *
+ * @param pointer
+ * @returns {null}
+ * @private
+ */
+ _getEdgeAt(pointer) {
+ var positionObject = this._pointerToPositionObject(pointer);
+ var overlappingEdges = this._getAllEdgesOverlappingWith(positionObject);
+
+ if (overlappingEdges.length > 0) {
+ return this.body.edges[overlappingEdges[overlappingEdges.length - 1]];
+ }
+ else {
+ return null;
+ }
+ }
+
+
+ /**
+ * Add object to the selection array.
+ *
+ * @param obj
+ * @private
+ */
+ _addToSelection(obj) {
+ if (obj instanceof Node) {
+ this.selectionObj.nodes[obj.id] = obj;
+ }
+ else {
+ this.selectionObj.edges[obj.id] = obj;
+ }
+ }
+
+ /**
+ * Add object to the selection array.
+ *
+ * @param obj
+ * @private
+ */
+ _addToHover(obj) {
+ if (obj instanceof Node) {
+ this.hoverObj.nodes[obj.id] = obj;
+ }
+ else {
+ this.hoverObj.edges[obj.id] = obj;
+ }
+ }
+
+
+ /**
+ * Remove a single option from selection.
+ *
+ * @param {Object} obj
+ * @private
+ */
+ _removeFromSelection(obj) {
+ if (obj instanceof Node) {
+ delete this.selectionObj.nodes[obj.id];
+ }
+ else {
+ delete this.selectionObj.edges[obj.id];
+ }
+ }
+
+ /**
+ * Unselect all. The selectionObj is useful for this.
+ *
+ * @param {Boolean} [doNotTrigger] | ignore trigger
+ * @private
+ */
+ _unselectAll(doNotTrigger = false) {
+ for(var nodeId in this.selectionObj.nodes) {
+ if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ this.selectionObj.nodes[nodeId].unselect();
+ }
+ }
+ for(var edgeId in this.selectionObj.edges) {
+ if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ this.selectionObj.edges[edgeId].unselect();
+ }
+ }
+
+ this.selectionObj = {nodes:{},edges:{}};
+
+ if (doNotTrigger == false) {
+ this.body.emitter.emit('select', this.getSelection());
+ }
+ }
+
+
+ /**
+ * return the number of selected nodes
+ *
+ * @returns {number}
+ * @private
+ */
+ _getSelectedNodeCount() {
+ var count = 0;
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ count += 1;
+ }
+ }
+ return count;
+ }
+
+ /**
+ * return the selected node
+ *
+ * @returns {number}
+ * @private
+ */
+ _getSelectedNode() {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ return this.selectionObj.nodes[nodeId];
+ }
+ }
+ return null;
+ }
+
+ /**
+ * return the selected edge
+ *
+ * @returns {number}
+ * @private
+ */
+ _getSelectedEdge() {
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ return this.selectionObj.edges[edgeId];
+ }
+ }
+ return null;
+ }
+
+
+ /**
+ * return the number of selected edges
+ *
+ * @returns {number}
+ * @private
+ */
+ _getSelectedEdgeCount() {
+ var count = 0;
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ count += 1;
+ }
+ }
+ return count;
+ }
+
+
+ /**
+ * return the number of selected objects.
+ *
+ * @returns {number}
+ * @private
+ */
+ _getSelectedObjectCount() {
+ var count = 0;
+ for(var nodeId in this.selectionObj.nodes) {
+ if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ count += 1;
+ }
+ }
+ for(var edgeId in this.selectionObj.edges) {
+ if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ count += 1;
+ }
+ }
+ return count;
+ }
+
+ /**
+ * Check if anything is selected
+ *
+ * @returns {boolean}
+ * @private
+ */
+ _selectionIsEmpty() {
+ for(var nodeId in this.selectionObj.nodes) {
+ if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ return false;
+ }
+ }
+ for(var edgeId in this.selectionObj.edges) {
+ if(this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ return false;
+ }
+ }
+ return true;
+ }
+
+
+ /**
+ * check if one of the selected nodes is a cluster.
+ *
+ * @returns {boolean}
+ * @private
+ */
+ _clusterInSelection() {
+ for(var nodeId in this.selectionObj.nodes) {
+ if(this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ if (this.selectionObj.nodes[nodeId].clusterSize > 1) {
+ return true;
+ }
+ }
+ }
+ return false;
+ }
+
+ /**
+ * select the edges connected to the node that is being selected
+ *
+ * @param {Node} node
+ * @private
+ */
+ _selectConnectedEdges(node) {
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
+ edge.select();
+ this._addToSelection(edge);
+ }
+ }
+
+ /**
+ * select the edges connected to the node that is being selected
+ *
+ * @param {Node} node
+ * @private
+ */
+ _hoverConnectedEdges(node) {
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
+ edge.hover = true;
+ this._addToHover(edge);
+ }
+ }
+
+
+ /**
+ * unselect the edges connected to the node that is being selected
+ *
+ * @param {Node} node
+ * @private
+ */
+ _unselectConnectedEdges(node) {
+ for (var i = 0; i < node.edges.length; i++) {
+ var edge = node.edges[i];
+ edge.unselect();
+ this._removeFromSelection(edge);
+ }
+ }
+
+
+
+
+
+
+ /**
+ * This is called when someone clicks on a node. either select or deselect it.
+ * If there is an existing selection and we don't want to append to it, clear the existing selection
+ *
+ * @param {Node || Edge} object
+ * @private
+ */
+ _blurObject(object) {
+ if (object.hover == true) {
+ object.hover = false;
+ this.body.emitter.emit("blurNode",{node:object.id});
+ }
+ }
+
+ /**
+ * This is called when someone clicks on a node. either select or deselect it.
+ * If there is an existing selection and we don't want to append to it, clear the existing selection
+ *
+ * @param {Node || Edge} object
+ * @private
+ */
+ _hoverObject(object) {
+ if (object.hover == false) {
+ object.hover = true;
+ this._addToHover(object);
+ if (object instanceof Node) {
+ this.body.emitter.emit("hoverNode",{node:object.id});
+ }
+ }
+ if (object instanceof Node) {
+ this._hoverConnectedEdges(object);
+ }
+ }
+
+
+
+
+ /**
+ * handles the selection part of the double tap and opens a cluster if needed
+ *
+ * @param {Object} pointer
+ * @private
+ */
+ _handleDoubleTap(pointer) {
+ var node = this._getNodeAt(pointer);
+ if (node != null && node !== undefined) {
+ // we reset the areaCenter here so the opening of the node will occur
+ this.areaCenter = {"x" : this._XconvertDOMtoCanvas(pointer.x),
+ "y" : this._YconvertDOMtoCanvas(pointer.y)};
+ this.openCluster(node);
+ }
+ var properties = this.getSelection();
+ properties['pointer'] = {
+ DOM: {x: pointer.x, y: pointer.y},
+ canvas: {x: this._XconvertDOMtoCanvas(pointer.x), y: this._YconvertDOMtoCanvas(pointer.y)}
+ }
+ this.body.emitter.emit("doubleClick", properties);
+ }
+
+
+ /**
+ * Handle the onHold selection part
+ *
+ * @param pointer
+ * @private
+ */
+ _handleOnHold(pointer) {
+ var node = this._getNodeAt(pointer);
+ if (node != null) {
+ this._selectObject(node,true);
+ }
+ else {
+ var edge = this._getEdgeAt(pointer);
+ if (edge != null) {
+ this._selectObject(edge,true);
+ }
+ }
+ this._requestRedraw();
+ }
+
+
+ /**
+ *
+ * retrieve the currently selected objects
+ * @return {{nodes: Array., edges: Array.}} selection
+ */
+ getSelection() {
+ var nodeIds = this.getSelectedNodes();
+ var edgeIds = this.getSelectedEdges();
+ return {nodes:nodeIds, edges:edgeIds};
+ }
+
+ /**
+ *
+ * retrieve the currently selected nodes
+ * @return {String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ getSelectedNodes() {
+ var idArray = [];
+ if (this.options.select == true) {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ idArray.push(nodeId);
+ }
+ }
+ }
+ return idArray
+ }
+
+ /**
+ *
+ * retrieve the currently selected edges
+ * @return {Array} selection An array with the ids of the
+ * selected nodes.
+ */
+ getSelectedEdges() {
+ var idArray = [];
+ if (this.options.select == true) {
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ idArray.push(edgeId);
+ }
+ }
+ }
+ return idArray;
+ }
+
+
+ /**
+ * select zero or more nodes with the option to highlight edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ * @param {boolean} [highlightEdges]
+ */
+ selectNodes(selection, highlightEdges) {
+ var i, iMax, id;
+
+ if (!selection || (selection.length == undefined))
+ throw 'Selection must be an array with ids';
+
+ // first unselect any selected node
+ this._unselectAll(true);
+
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
+
+ var node = this.body.nodes[id];
+ if (!node) {
+ throw new RangeError('Node with id "' + id + '" not found');
+ }
+ this._selectObject(node,true,true,highlightEdges,true);
+ }
+ this.redraw();
+ }
+
+
+ /**
+ * select zero or more edges
+ * @param {Number[] | String[]} selection An array with the ids of the
+ * selected nodes.
+ */
+ selectEdges(selection) {
+ var i, iMax, id;
+
+ if (!selection || (selection.length == undefined))
+ throw 'Selection must be an array with ids';
+
+ // first unselect any selected node
+ this._unselectAll(true);
+
+ for (i = 0, iMax = selection.length; i < iMax; i++) {
+ id = selection[i];
+
+ var edge = this.body.edges[id];
+ if (!edge) {
+ throw new RangeError('Edge with id "' + id + '" not found');
+ }
+ this._selectObject(edge,true,true,false,true);
+ }
+ this.redraw();
+ }
+
+ /**
+ * Validate the selection: remove ids of nodes which no longer exist
+ * @private
+ */
+ _updateSelection() {
+ for (var nodeId in this.selectionObj.nodes) {
+ if (this.selectionObj.nodes.hasOwnProperty(nodeId)) {
+ if (!this.body.nodes.hasOwnProperty(nodeId)) {
+ delete this.selectionObj.nodes[nodeId];
+ }
+ }
+ }
+ for (var edgeId in this.selectionObj.edges) {
+ if (this.selectionObj.edges.hasOwnProperty(edgeId)) {
+ if (!this.body.edges.hasOwnProperty(edgeId)) {
+ delete this.selectionObj.edges[edgeId];
+ }
+ }
+ }
+ }
+}
+
+export {SelectionHandler};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/BarnesHutSolver.js b/lib/network/modules/components/physics/BarnesHutSolver.js
new file mode 100644
index 00000000..5f555eb5
--- /dev/null
+++ b/lib/network/modules/components/physics/BarnesHutSolver.js
@@ -0,0 +1,446 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+class BarnesHutSolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.barnesHutTree;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+
+
+ /**
+ * This function calculates the forces the nodes apply on eachother based on a gravitational model.
+ * The Barnes Hut method is used to speed up this N-body simulation.
+ *
+ * @private
+ */
+ solve() {
+ if (this.options.gravitationalConstant != 0) {
+ var node;
+ var nodes = this.physicsBody.calculationNodes;
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var nodeCount = nodeIndices.length;
+
+ // create the tree
+ var barnesHutTree = this._formBarnesHutTree(nodes, nodeIndices);
+
+ // for debugging
+ this.barnesHutTree = barnesHutTree;
+
+ // place the nodes one by one recursively
+ for (var i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ // starting with root is irrelevant, it never passes the BarnesHutSolver condition
+ this._getForceContribution(barnesHutTree.root.children.NW, node);
+ this._getForceContribution(barnesHutTree.root.children.NE, node);
+ this._getForceContribution(barnesHutTree.root.children.SW, node);
+ this._getForceContribution(barnesHutTree.root.children.SE, node);
+ }
+ }
+ }
+ }
+
+
+ /**
+ * This function traverses the barnesHutTree. It checks when it can approximate distant nodes with their center of mass.
+ * If a region contains a single node, we check if it is not itself, then we apply the force.
+ *
+ * @param parentBranch
+ * @param node
+ * @private
+ */
+ _getForceContribution(parentBranch, node) {
+ // we get no force contribution from an empty region
+ if (parentBranch.childrenCount > 0) {
+ var dx, dy, distance;
+
+ // get the distance from the center of mass to the node.
+ dx = parentBranch.centerOfMass.x - node.x;
+ dy = parentBranch.centerOfMass.y - node.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ // BarnesHutSolver condition
+ // original condition : s/d < thetaInverted = passed === d/s > 1/theta = passed
+ // calcSize = 1/s --> d * 1/s > 1/theta = passed
+ if (distance * parentBranch.calcSize > this.options.thetaInverted) {
+ // duplicate code to reduce function calls to speed up program
+ if (distance == 0) {
+ distance = 0.1 * Math.random();
+ dx = distance;
+ }
+ var gravityForce = this.options.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
+ var fx = dx * gravityForce;
+ var fy = dy * gravityForce;
+
+ this.physicsBody.forces[node.id].x += fx;
+ this.physicsBody.forces[node.id].y += fy;
+ }
+ else {
+ // Did not pass the condition, go into children if available
+ if (parentBranch.childrenCount == 4) {
+ this._getForceContribution(parentBranch.children.NW, node);
+ this._getForceContribution(parentBranch.children.NE, node);
+ this._getForceContribution(parentBranch.children.SW, node);
+ this._getForceContribution(parentBranch.children.SE, node);
+ }
+ else { // parentBranch must have only one node, if it was empty we wouldnt be here
+ if (parentBranch.children.data.id != node.id) { // if it is not self
+ // duplicate code to reduce function calls to speed up program
+ if (distance == 0) {
+ distance = 0.5 * Math.random();
+ dx = distance;
+ }
+ var gravityForce = this.options.gravitationalConstant * parentBranch.mass * node.options.mass / (distance * distance * distance);
+ var fx = dx * gravityForce;
+ var fy = dy * gravityForce;
+
+ this.physicsBody.forces[node.id].x += fx;
+ this.physicsBody.forces[node.id].y += fy;
+ }
+ }
+ }
+ }
+ }
+
+
+ /**
+ * This function constructs the barnesHut tree recursively. It creates the root, splits it and starts placing the nodes.
+ *
+ * @param nodes
+ * @param nodeIndices
+ * @private
+ */
+ _formBarnesHutTree(nodes, nodeIndices) {
+ var node;
+ var nodeCount = nodeIndices.length;
+
+ var minX = Number.MAX_VALUE,
+ minY = Number.MAX_VALUE,
+ maxX = -Number.MAX_VALUE,
+ maxY = -Number.MAX_VALUE;
+
+ // get the range of the nodes
+ for (var i = 0; i < nodeCount; i++) {
+ var x = nodes[nodeIndices[i]].x;
+ var y = nodes[nodeIndices[i]].y;
+ if (nodes[nodeIndices[i]].options.mass > 0) {
+ if (x < minX) {
+ minX = x;
+ }
+ if (x > maxX) {
+ maxX = x;
+ }
+ if (y < minY) {
+ minY = y;
+ }
+ if (y > maxY) {
+ maxY = y;
+ }
+ }
+ }
+ // make the range a square
+ var sizeDiff = Math.abs(maxX - minX) - Math.abs(maxY - minY); // difference between X and Y
+ if (sizeDiff > 0) {
+ minY -= 0.5 * sizeDiff;
+ maxY += 0.5 * sizeDiff;
+ } // xSize > ySize
+ else {
+ minX += 0.5 * sizeDiff;
+ maxX -= 0.5 * sizeDiff;
+ } // xSize < ySize
+
+
+ var minimumTreeSize = 1e-5;
+ var rootSize = Math.max(minimumTreeSize, Math.abs(maxX - minX));
+ var halfRootSize = 0.5 * rootSize;
+ var centerX = 0.5 * (minX + maxX), centerY = 0.5 * (minY + maxY);
+
+ // construct the barnesHutTree
+ var barnesHutTree = {
+ root: {
+ centerOfMass: {x: 0, y: 0},
+ mass: 0,
+ range: {
+ minX: centerX - halfRootSize, maxX: centerX + halfRootSize,
+ minY: centerY - halfRootSize, maxY: centerY + halfRootSize
+ },
+ size: rootSize,
+ calcSize: 1 / rootSize,
+ children: {data: null},
+ maxWidth: 0,
+ level: 0,
+ childrenCount: 4
+ }
+ };
+ this._splitBranch(barnesHutTree.root);
+
+ // place the nodes one by one recursively
+ for (i = 0; i < nodeCount; i++) {
+ node = nodes[nodeIndices[i]];
+ if (node.options.mass > 0) {
+ this._placeInTree(barnesHutTree.root, node);
+ }
+ }
+
+ // make global
+ return barnesHutTree
+ }
+
+
+ /**
+ * this updates the mass of a branch. this is increased by adding a node.
+ *
+ * @param parentBranch
+ * @param node
+ * @private
+ */
+ _updateBranchMass(parentBranch, node) {
+ var totalMass = parentBranch.mass + node.options.mass;
+ var totalMassInv = 1 / totalMass;
+
+ parentBranch.centerOfMass.x = parentBranch.centerOfMass.x * parentBranch.mass + node.x * node.options.mass;
+ parentBranch.centerOfMass.x *= totalMassInv;
+
+ parentBranch.centerOfMass.y = parentBranch.centerOfMass.y * parentBranch.mass + node.y * node.options.mass;
+ parentBranch.centerOfMass.y *= totalMassInv;
+
+ parentBranch.mass = totalMass;
+ var biggestSize = Math.max(Math.max(node.height, node.radius), node.width);
+ parentBranch.maxWidth = (parentBranch.maxWidth < biggestSize) ? biggestSize : parentBranch.maxWidth;
+
+ }
+
+
+ /**
+ * determine in which branch the node will be placed.
+ *
+ * @param parentBranch
+ * @param node
+ * @param skipMassUpdate
+ * @private
+ */
+ _placeInTree(parentBranch, node, skipMassUpdate) {
+ if (skipMassUpdate != true || skipMassUpdate === undefined) {
+ // update the mass of the branch.
+ this._updateBranchMass(parentBranch, node);
+ }
+
+ if (parentBranch.children.NW.range.maxX > node.x) { // in NW or SW
+ if (parentBranch.children.NW.range.maxY > node.y) { // in NW
+ this._placeInRegion(parentBranch, node, "NW");
+ }
+ else { // in SW
+ this._placeInRegion(parentBranch, node, "SW");
+ }
+ }
+ else { // in NE or SE
+ if (parentBranch.children.NW.range.maxY > node.y) { // in NE
+ this._placeInRegion(parentBranch, node, "NE");
+ }
+ else { // in SE
+ this._placeInRegion(parentBranch, node, "SE");
+ }
+ }
+ }
+
+
+ /**
+ * actually place the node in a region (or branch)
+ *
+ * @param parentBranch
+ * @param node
+ * @param region
+ * @private
+ */
+ _placeInRegion(parentBranch, node, region) {
+ switch (parentBranch.children[region].childrenCount) {
+ case 0: // place node here
+ parentBranch.children[region].children.data = node;
+ parentBranch.children[region].childrenCount = 1;
+ this._updateBranchMass(parentBranch.children[region], node);
+ break;
+ case 1: // convert into children
+ // if there are two nodes exactly overlapping (on init, on opening of cluster etc.)
+ // we move one node a pixel and we do not put it in the tree.
+ if (parentBranch.children[region].children.data.x == node.x &&
+ parentBranch.children[region].children.data.y == node.y) {
+ node.x += Math.random();
+ node.y += Math.random();
+ }
+ else {
+ this._splitBranch(parentBranch.children[region]);
+ this._placeInTree(parentBranch.children[region], node);
+ }
+ break;
+ case 4: // place in branch
+ this._placeInTree(parentBranch.children[region], node);
+ break;
+ }
+ }
+
+
+ /**
+ * this function splits a branch into 4 sub branches. If the branch contained a node, we place it in the subbranch
+ * after the split is complete.
+ *
+ * @param parentBranch
+ * @private
+ */
+ _splitBranch(parentBranch) {
+ // if the branch is shaded with a node, replace the node in the new subset.
+ var containedNode = null;
+ if (parentBranch.childrenCount == 1) {
+ containedNode = parentBranch.children.data;
+ parentBranch.mass = 0;
+ parentBranch.centerOfMass.x = 0;
+ parentBranch.centerOfMass.y = 0;
+ }
+ parentBranch.childrenCount = 4;
+ parentBranch.children.data = null;
+ this._insertRegion(parentBranch, "NW");
+ this._insertRegion(parentBranch, "NE");
+ this._insertRegion(parentBranch, "SW");
+ this._insertRegion(parentBranch, "SE");
+
+ if (containedNode != null) {
+ this._placeInTree(parentBranch, containedNode);
+ }
+ }
+
+
+ /**
+ * This function subdivides the region into four new segments.
+ * Specifically, this inserts a single new segment.
+ * It fills the children section of the parentBranch
+ *
+ * @param parentBranch
+ * @param region
+ * @param parentRange
+ * @private
+ */
+ _insertRegion(parentBranch, region) {
+ var minX, maxX, minY, maxY;
+ var childSize = 0.5 * parentBranch.size;
+ switch (region) {
+ case "NW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "NE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY;
+ maxY = parentBranch.range.minY + childSize;
+ break;
+ case "SW":
+ minX = parentBranch.range.minX;
+ maxX = parentBranch.range.minX + childSize;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
+ case "SE":
+ minX = parentBranch.range.minX + childSize;
+ maxX = parentBranch.range.maxX;
+ minY = parentBranch.range.minY + childSize;
+ maxY = parentBranch.range.maxY;
+ break;
+ }
+
+
+ parentBranch.children[region] = {
+ centerOfMass: {x: 0, y: 0},
+ mass: 0,
+ range: {minX: minX, maxX: maxX, minY: minY, maxY: maxY},
+ size: 0.5 * parentBranch.size,
+ calcSize: 2 * parentBranch.calcSize,
+ children: {data: null},
+ maxWidth: 0,
+ level: parentBranch.level + 1,
+ childrenCount: 0
+ };
+ }
+
+
+
+
+ //--------------------------- DEBUGGING BELOW ---------------------------//
+
+
+ /**
+ * This function is for debugging purposed, it draws the tree.
+ *
+ * @param ctx
+ * @param color
+ * @private
+ */
+ _debug(ctx, color) {
+ if (this.barnesHutTree !== undefined) {
+
+ ctx.lineWidth = 1;
+
+ this._drawBranch(this.barnesHutTree.root, ctx, color);
+ }
+ }
+
+
+ /**
+ * This function is for debugging purposes. It draws the branches recursively.
+ *
+ * @param branch
+ * @param ctx
+ * @param color
+ * @private
+ */
+ _drawBranch(branch, ctx, color) {
+ if (color === undefined) {
+ color = "#FF0000";
+ }
+
+ if (branch.childrenCount == 4) {
+ this._drawBranch(branch.children.NW, ctx);
+ this._drawBranch(branch.children.NE, ctx);
+ this._drawBranch(branch.children.SE, ctx);
+ this._drawBranch(branch.children.SW, ctx);
+ }
+ ctx.strokeStyle = color;
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX, branch.range.minY);
+ ctx.lineTo(branch.range.maxX, branch.range.minY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX, branch.range.minY);
+ ctx.lineTo(branch.range.maxX, branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.maxX, branch.range.maxY);
+ ctx.lineTo(branch.range.minX, branch.range.maxY);
+ ctx.stroke();
+
+ ctx.beginPath();
+ ctx.moveTo(branch.range.minX, branch.range.maxY);
+ ctx.lineTo(branch.range.minX, branch.range.minY);
+ ctx.stroke();
+
+ /*
+ if (branch.mass > 0) {
+ ctx.circle(branch.centerOfMass.x, branch.centerOfMass.y, 3*branch.mass);
+ ctx.stroke();
+ }
+ */
+ }
+}
+
+
+export {BarnesHutSolver};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/CentralGravitySolver.js b/lib/network/modules/components/physics/CentralGravitySolver.js
new file mode 100644
index 00000000..c288985f
--- /dev/null
+++ b/lib/network/modules/components/physics/CentralGravitySolver.js
@@ -0,0 +1,40 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+class CentralGravitySolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+
+ solve() {
+ var dx, dy, distance, node, i;
+ var nodes = this.physicsBody.calculationNodes;
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var forces = this.physicsBody.forces;
+
+ var gravity = this.options.centralGravity;
+ var gravityForce = 0;
+
+ for (i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ node = nodes[nodeId];
+ dx = -node.x;
+ dy = -node.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ gravityForce = (distance == 0) ? 0 : (gravity / distance);
+ forces[nodeId].x = dx * gravityForce;
+ forces[nodeId].y = dy * gravityForce;
+ }
+ }
+}
+
+
+export {CentralGravitySolver};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/HierarchicalRepulsionSolver.js b/lib/network/modules/components/physics/HierarchicalRepulsionSolver.js
new file mode 100644
index 00000000..2a7db867
--- /dev/null
+++ b/lib/network/modules/components/physics/HierarchicalRepulsionSolver.js
@@ -0,0 +1,73 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+class HierarchicalRepulsionSolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+
+ /**
+ * Calculate the forces the nodes apply on each other based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ solve() {
+ var dx, dy, distance, fx, fy, repulsingForce, node1, node2, i, j;
+
+ var nodes = this.physicsBody.calculationNodes;
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var forces = this.physicsBody.forces;
+
+ // repulsing forces between nodes
+ var nodeDistance = this.options.nodeDistance;
+
+ // we loop from i over all but the last entree in the array
+ // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+ for (i = 0; i < nodeIndices.length - 1; i++) {
+ node1 = nodes[nodeIndices[i]];
+ for (j = i + 1; j < nodeIndices.length; j++) {
+ node2 = nodes[nodeIndices[j]];
+
+ // nodes only affect nodes on their level
+ if (node1.level == node2.level) {
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ var steepness = 0.05;
+ if (distance < nodeDistance) {
+ repulsingForce = -Math.pow(steepness * distance, 2) + Math.pow(steepness * nodeDistance, 2);
+ }
+ else {
+ repulsingForce = 0;
+ }
+ // normalize force with
+ if (distance == 0) {
+ distance = 0.01;
+ }
+ else {
+ repulsingForce = repulsingForce / distance;
+ }
+ fx = dx * repulsingForce;
+ fy = dy * repulsingForce;
+
+ forces[node1.id].x -= fx;
+ forces[node1.id].y -= fy;
+ forces[node2.id].x += fx;
+ forces[node2.id].y += fy;
+ }
+ }
+ }
+ }
+}
+
+
+export {HierarchicalRepulsionSolver};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/HierarchicalSpringSolver.js b/lib/network/modules/components/physics/HierarchicalSpringSolver.js
new file mode 100644
index 00000000..745a91bd
--- /dev/null
+++ b/lib/network/modules/components/physics/HierarchicalSpringSolver.js
@@ -0,0 +1,104 @@
+/**
+ * Created by Alex on 2/25/2015.
+ */
+
+class HierarchicalSpringSolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+
+ /**
+ * This function calculates the springforces on the nodes, accounting for the support nodes.
+ *
+ * @private
+ */
+ solve() {
+ var edgeLength, edge, edgeId;
+ var dx, dy, fx, fy, springForce, distance;
+ var edges = this.body.edges;
+
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var forces = this.physicsBody.forces;
+
+ // initialize the spring force counters
+ for (let i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ forces[nodeId].springFx = 0;
+ forces[nodeId].springFy = 0;
+ }
+
+
+ // forces caused by the edges, modelled as springs
+ for (edgeId in edges) {
+ if (edges.hasOwnProperty(edgeId)) {
+ edge = edges[edgeId];
+ if (edge.connected === true) {
+ edgeLength = edge.properties.length === undefined ? this.options.springLength : edge.properties.length;
+
+ dx = (edge.from.x - edge.to.x);
+ dy = (edge.from.y - edge.to.y);
+ distance = Math.sqrt(dx * dx + dy * dy);
+ distance = distance == 0 ? 0.01 : distance;
+
+ // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+ springForce = this.options.springConstant * (edgeLength - distance) / distance;
+
+ fx = dx * springForce;
+ fy = dy * springForce;
+
+ if (edge.to.level != edge.from.level) {
+ forces[edge.toId].springFx -= fx;
+ forces[edge.toId].springFy -= fy;
+ forces[edge.fromId].springFx += fx;
+ forces[edge.fromId].springFy += fy;
+ }
+ else {
+ let factor = 0.5;
+ forces[edge.toId].x -= factor*fx;
+ forces[edge.toId].y -= factor*fy;
+ forces[edge.fromId].x += factor*fx;
+ forces[edge.fromId].y += factor*fy;
+ }
+ }
+ }
+ }
+
+ // normalize spring forces
+ var springForce = 1;
+ var springFx, springFy;
+ for (let i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ springFx = Math.min(springForce,Math.max(-springForce,forces[nodeId].springFx));
+ springFy = Math.min(springForce,Math.max(-springForce,forces[nodeId].springFy));
+
+ forces[nodeId].x += springFx;
+ forces[nodeId].y += springFy;
+ }
+
+ // retain energy balance
+ var totalFx = 0;
+ var totalFy = 0;
+ for (let i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ totalFx += forces[nodeId].x;
+ totalFy += forces[nodeId].y;
+ }
+ var correctionFx = totalFx / nodeIndices.length;
+ var correctionFy = totalFy / nodeIndices.length;
+
+ for (let i = 0; i < nodeIndices.length; i++) {
+ let nodeId = nodeIndices[i];
+ forces[nodeId].x -= correctionFx;
+ forces[nodeId].y -= correctionFy;
+ }
+ }
+
+}
+
+export {HierarchicalSpringSolver};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/RepulsionSolver.js b/lib/network/modules/components/physics/RepulsionSolver.js
new file mode 100644
index 00000000..97c29b7d
--- /dev/null
+++ b/lib/network/modules/components/physics/RepulsionSolver.js
@@ -0,0 +1,75 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+class RepulsionSolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+ /**
+ * Calculate the forces the nodes apply on each other based on a repulsion field.
+ * This field is linearly approximated.
+ *
+ * @private
+ */
+ solve() {
+ var dx, dy, distance, fx, fy, repulsingForce, node1, node2;
+
+ var nodes = this.physicsBody.calculationNodes;
+ var nodeIndices = this.physicsBody.calculationNodeIndices;
+ var forces = this.physicsBody.forces;
+
+ // repulsing forces between nodes
+ var nodeDistance = this.options.nodeDistance;
+
+ // approximation constants
+ var a = (-2 / 3) / nodeDistance;
+ var b = 4 / 3;
+
+ // we loop from i over all but the last entree in the array
+ // j loops from i+1 to the last. This way we do not double count any of the indices, nor i == j
+ for (let i = 0; i < nodeIndices.length - 1; i++) {
+ node1 = nodes[nodeIndices[i]];
+ for (let j = i + 1; j < nodeIndices.length; j++) {
+ node2 = nodes[nodeIndices[j]];
+
+ dx = node2.x - node1.x;
+ dy = node2.y - node1.y;
+ distance = Math.sqrt(dx * dx + dy * dy);
+
+ // same condition as BarnesHutSolver, making sure nodes are never 100% overlapping.
+ if (distance == 0) {
+ distance = 0.1*Math.random();
+ dx = distance;
+ }
+
+ if (distance < 2 * nodeDistance) {
+ if (distance < 0.5 * nodeDistance) {
+ repulsingForce = 1.0;
+ }
+ else {
+ repulsingForce = a * distance + b; // linear approx of 1 / (1 + Math.exp((distance / nodeDistance - 1) * steepness))
+ }
+ repulsingForce = repulsingForce / distance;
+
+ fx = dx * repulsingForce;
+ fy = dy * repulsingForce;
+
+ forces[node1.id].x -= fx;
+ forces[node1.id].y -= fy;
+ forces[node2.id].x += fx;
+ forces[node2.id].y += fy;
+ }
+ }
+ }
+ }
+}
+
+
+export {RepulsionSolver};
\ No newline at end of file
diff --git a/lib/network/modules/components/physics/SpringSolver.js b/lib/network/modules/components/physics/SpringSolver.js
new file mode 100644
index 00000000..2905667d
--- /dev/null
+++ b/lib/network/modules/components/physics/SpringSolver.js
@@ -0,0 +1,80 @@
+/**
+ * Created by Alex on 2/23/2015.
+ */
+
+class SpringSolver {
+ constructor(body, physicsBody, options) {
+ this.body = body;
+ this.physicsBody = physicsBody;
+ this.setOptions(options);
+ }
+
+ setOptions(options) {
+ this.options = options;
+ }
+
+ /**
+ * This function calculates the springforces on the nodes, accounting for the support nodes.
+ *
+ * @private
+ */
+ solve() {
+ var edgeLength, edge, edgeId;
+ var edges = this.body.edges;
+
+ // forces caused by the edges, modelled as springs
+ for (edgeId in edges) {
+ if (edges.hasOwnProperty(edgeId)) {
+ edge = edges[edgeId];
+ if (edge.connected === true) {
+ // only calculate forces if nodes are in the same sector
+ if (this.body.nodes[edge.toId] !== undefined && this.body.nodes[edge.fromId] !== undefined) {
+ edgeLength = edge.properties.length === undefined ? this.options.springLength : edge.properties.length;
+ if (edge.via != null) {
+ var node1 = edge.to;
+ var node2 = edge.via;
+ var node3 = edge.from;
+
+ this._calculateSpringForce(node1, node2, 0.5 * edgeLength);
+ this._calculateSpringForce(node2, node3, 0.5 * edgeLength);
+ }
+ else {
+ this._calculateSpringForce(edge.from, edge.to, edgeLength);
+ }
+ }
+ }
+ }
+ }
+ }
+
+
+ /**
+ * This is the code actually performing the calculation for the function above.
+ *
+ * @param node1
+ * @param node2
+ * @param edgeLength
+ * @private
+ */
+ _calculateSpringForce(node1, node2, edgeLength) {
+ var dx, dy, fx, fy, springForce, distance;
+
+ dx = (node1.x - node2.x);
+ dy = (node1.y - node2.y);
+ distance = Math.sqrt(dx * dx + dy * dy);
+ distance = distance == 0 ? 0.01 : distance;
+
+ // the 1/distance is so the fx and fy can be calculated without sine or cosine.
+ springForce = this.options.springConstant * (edgeLength - distance) / distance;
+
+ fx = dx * springForce;
+ fy = dy * springForce;
+
+ this.physicsBody.forces[node1.id].x += fx;
+ this.physicsBody.forces[node1.id].y += fy;
+ this.physicsBody.forces[node2.id].x -= fx;
+ this.physicsBody.forces[node2.id].y -= fy;
+ }
+}
+
+export {SpringSolver};
\ No newline at end of file
diff --git a/lib/timeline/Core.js b/lib/timeline/Core.js
index 25273b94..cc3fef4f 100644
--- a/lib/timeline/Core.js
+++ b/lib/timeline/Core.js
@@ -229,9 +229,7 @@ Core.prototype.setOptions = function (options) {
}
// propagate options to all components
- this.components.forEach(function (component) {
- component.setOptions(options);
- });
+ this.components.forEach(component => component.setOptions(options));
// TODO: remove deprecation error one day (deprecated since version 0.8.0)
if (options && options.order) {
@@ -285,9 +283,7 @@ Core.prototype.destroy = function () {
this.hammer = null;
// give all components the opportunity to cleanup
- this.components.forEach(function (component) {
- component.destroy();
- });
+ this.components.forEach(component => component.destroy());
this.body = null;
};
@@ -449,9 +445,7 @@ Core.prototype.clear = function(what) {
// clear options of timeline and of each of the components
if (!what || what.options) {
- this.components.forEach(function (component) {
- component.setOptions(component.defaultOptions);
- });
+ this.components.forEach(component => component.setOptions(component.defaultOptions));
this.setOptions(this.defaultOptions); // this will also do a redraw
}
diff --git a/lib/timeline/TimeStep.js b/lib/timeline/TimeStep.js
index 8d8bc7cb..5313ace1 100644
--- a/lib/timeline/TimeStep.js
+++ b/lib/timeline/TimeStep.js
@@ -576,9 +576,9 @@ TimeStep.prototype.getClassName = function() {
case 'hour':
var hours = date.hours();
if (this.step == 4) {
- hours = hours + '-' + (hours + 4);
+ hours = hours + '-h' + (hours + 4);
}
- return hours + 'h' + today(date) + even(date.hours());
+ return 'h' + hours + today(date) + even(date.hours());
case 'weekday':
return date.format('dddd').toLowerCase() +
diff --git a/lib/timeline/component/CurrentTime.js b/lib/timeline/component/CurrentTime.js
index 2cbb4f70..a97757a8 100644
--- a/lib/timeline/component/CurrentTime.js
+++ b/lib/timeline/component/CurrentTime.js
@@ -122,7 +122,7 @@ CurrentTime.prototype.start = function() {
me.redraw();
- // start a timer to adjust for the new time
+ // start a renderTimer to adjust for the new time
me.currentTimeTimer = setTimeout(update, interval);
}
diff --git a/lib/timeline/component/css/item.css b/lib/timeline/component/css/item.css
index bdc67340..8b766ab5 100644
--- a/lib/timeline/component/css/item.css
+++ b/lib/timeline/component/css/item.css
@@ -6,7 +6,7 @@
border-width: 1px;
background-color: #D5DDF6;
display: inline-block;
- padding: 5px;
+ overflow: hidden;
}
.vis.timeline .item.selected {
@@ -50,7 +50,6 @@
}
.vis.timeline .item.background {
- overflow: hidden;
border: none;
background-color: rgba(213, 221, 246, 0.4);
box-sizing: border-box;
@@ -62,13 +61,11 @@
position: relative;
display: inline-block;
max-width: 100%;
- overflow: hidden;
}
.vis.timeline .item.background .content {
position: absolute;
display: inline-block;
- overflow: hidden;
max-width: 100%;
margin: 5px;
}
@@ -83,7 +80,8 @@
.vis.timeline .item .content {
white-space: nowrap;
- overflow: hidden;
+ box-sizing: border-box;
+ padding: 5px;
}
.vis.timeline .item .delete {
diff --git a/lib/timeline/component/graph2d_types/bar.js b/lib/timeline/component/graph2d_types/bar.js
index 3dee4b21..1ba41365 100644
--- a/lib/timeline/component/graph2d_types/bar.js
+++ b/lib/timeline/component/graph2d_types/bar.js
@@ -58,7 +58,8 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
combinedData.push({
x: processedGroupData[groupIds[i]][j].x,
y: processedGroupData[groupIds[i]][j].y,
- groupId: groupIds[i]
+ groupId: groupIds[i],
+ label: processedGroupData[groupIds[i]][j].label
});
barPoints += 1;
}
@@ -114,7 +115,8 @@ Bargraph.draw = function (groupIds, processedGroupData, framework) {
DOMutil.drawBar(combinedData[i].x + drawData.offset, combinedData[i].y - heightOffset, drawData.width, group.zeroPosition - combinedData[i].y, group.className + ' bar', framework.svgElements, framework.svg);
// draw points
if (group.options.drawPoints.enabled == true) {
- DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
+ Points.draw([combinedData[i]], group, framework, drawData.offset);
+ //DOMutil.drawPoint(combinedData[i].x + drawData.offset, combinedData[i].y, group, framework.svgElements, framework.svg);
}
}
};
diff --git a/lib/util.js b/lib/util.js
index c1a1d2a2..8184f42b 100644
--- a/lib/util.js
+++ b/lib/util.js
@@ -225,22 +225,24 @@ exports.selectiveNotDeepExtend = function (props, a, b) {
* Deep extend an object a with the properties of object b
* @param {Object} a
* @param {Object} b
+ * @param {Boolean} protoExtend --> optional parameter. If true, the prototype values will also be extended.
+ * (ie. the options objects that inherit from others will also get the inherited options)
* @returns {Object}
*/
-exports.deepExtend = function(a, b) {
+exports.deepExtend = function(a, b, protoExtend) {
// TODO: add support for Arrays to deepExtend
if (Array.isArray(b)) {
throw new TypeError('Arrays are not supported by deepExtend');
}
for (var prop in b) {
- if (b.hasOwnProperty(prop)) {
+ if (b.hasOwnProperty(prop) || protoExtend === true) {
if (b[prop] && b[prop].constructor === Object) {
if (a[prop] === undefined) {
a[prop] = {};
}
if (a[prop].constructor === Object) {
- exports.deepExtend(a[prop], b[prop]);
+ exports.deepExtend(a[prop], b[prop], protoExtend);
}
else {
a[prop] = b[prop];
diff --git a/package.json b/package.json
index 188ad4e3..39dbf275 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "vis",
- "version": "3.10.1-SNAPSHOT",
+ "version": "4.0.0-SNAPSHOT",
"description": "A dynamic, browser-based visualization library.",
"homepage": "http://visjs.org/",
"repository": {
@@ -35,6 +35,9 @@
"propagating-hammerjs": "^1.2.0"
},
"devDependencies": {
+ "6to5": "^3.5.3",
+ "6to5-loader": "^3.0.0",
+ "6to5ify": "^4.1.0",
"clean-css": "latest",
"gulp": "^3.8.11",
"gulp-concat": "^2.4.3",
diff --git a/test/DataSet.test.js b/test/DataSet.test.js
index 0def1526..23344a02 100644
--- a/test/DataSet.test.js
+++ b/test/DataSet.test.js
@@ -1,7 +1,9 @@
var assert = require('assert');
-var moment = require('moment');
-var DataSet = require('../lib/DataSet');
-var Queue = require('../lib/Queue');
+var vis = require('../dist/vis');
+var moment = vis.moment;
+var DataSet = vis.DataSet;
+var Queue = vis.Queue;
+// TODO: test the source code immediately, but this is ES6
var now = new Date();
diff --git a/test/DataView.test.js b/test/DataView.test.js
index bb8ff1f9..17aa7680 100644
--- a/test/DataView.test.js
+++ b/test/DataView.test.js
@@ -1,7 +1,9 @@
var assert = require('assert');
-var moment = require('moment');
-var DataSet = require('../lib/DataSet');
-var DataView = require('../lib/DataView');
+var vis = require('../dist/vis');
+var moment = vis.moment;
+var DataSet = vis.DataSet;
+var DataView = vis.DataView;
+// TODO: test the source code immediately, but this is ES6
// TODO: improve DataView tests, split up in one test per function
describe('DataView', function () {