- Fixed #1398: Support nodes start with the correct positions.

10 years ago · 759cff058b
--- a/HISTORY.md
+++ b/HISTORY.md
@ -12,6 +12,7 @@ http://visjs.org
 ### Network

 - Fixed #1343: Connected edges are now deselected too when deselecting a node.
 - Fixed #1398: Support nodes start with the correct positions.

 ### Timeline

--- a/dist/vis.js
+++ b/dist/vis.js
--- a/lib/network/modules/components/edges/BezierEdgeDynamic.js
+++ b/lib/network/modules/components/edges/BezierEdgeDynamic.js
@ -9,16 +9,27 @@ class BezierEdgeDynamic extends BezierEdgeBase {
  }

  setOptions(options) {
    // check if the physics has changed.
    let physicsChange = false;
    if (this.options.physics !== options.physics) {
      physicsChange = true;
    }

    // set the options and the to and from nodes
    this.options = options;
    this.id = this.options.id;
    this.from = this.body.nodes[this.options.from];
    this.to = this.body.nodes[this.options.to];

    // setup the support node and connect
    this.setupSupportNode();
    this.connect();

    // when we change the physics state of the edge, we reposition the support node.
    if (this.options.physics !== options.physics) {
    if (physicsChange === true) {
      this.via.setOptions({physics: this.options.physics})
      this.positionBezierNode();
    }
    this.connect();
  }

  connect() {
--- a/lib/network/modules/components/edges/util/EdgeBase.js
+++ b/lib/network/modules/components/edges/util/EdgeBase.js
@ -4,6 +4,7 @@ class EdgeBase {
  constructor(options, body, labelModule) {
    this.body = body;
    this.labelModule = labelModule;
    this.options = {};
    this.setOptions(options);
    this.colorDirty = true;
    this.color = {};
--- a/test/networkTest.html
+++ b/test/networkTest.html
@ -1,60 +1,106 @@
 <!doctype html>
 <!DOCTYPE html>
 <html>
 <head>
    <title>Network | Basic usage</title>
    <script src="../dist/vis.js"></script>
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.9.0/vis.min.css">

    <script type="text/javascript" src="../dist/vis.js"></script>
    <link href="../dist/vis.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        #mynetwork {
            width: 600px;
    <style>
        #network {
            width: 100%;
            height: 400px;
            border: 1px solid lightgray;
            border: 1px solid gray;
        }
    </style>
    <script type="text/javascript">




        function addChild(Parent){

            var newNodes = 5;
            var angle = 2* Math.PI / newNodes;
            var r = 150;
            var shift = Math.random() * Math.PI;

            for(i=0; i< newNodes; i++) {

                var xnew = network.getPositions(Parent)[Parent].x + Math.cos(angle * i + shift) * r;
                var ynew = network.getPositions(Parent)[Parent].y + Math.sin(angle * i + shift) * r;

                var newId = guid();

                try {
                    nodes.add(
                            {id: newId,
                                label: "New Node",
                                x: xnew,
                                y: ynew  })
                }

                catch (err) {}

                var edgeId = guid();

                try {
                    edges.add(
                            {id: edgeId,
                                from: Parent,
                                to: newId})
                }

                catch (err) {}

            }
        };


        function guid() {
            function s4() {
                return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
            }
            return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
                    s4() + '-' + s4() + s4() + s4();
        };



        var nodes, edges, network;

        function draw() {
            nodes = new vis.DataSet([
                {"id": "1",
                    "label": "Start"}]);

            edges = new vis.DataSet([]);

            var container = document.getElementById('network');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {
                "edges": {arrows:'to', "smooth": {"type": 'dynamic'}},
                "physics": {
                    "forceAtlas2Based": {
                        "gravitationalConstant": -514,
                        "springLength": 150,
                        "springConstant": 0.1,
                        "damping": 0.9},
                    "maxVelocity": 15,
                    "minVelocity": 1,
                    "timestep": 0.9,
                    "solver": "forceAtlas2Based"}};
            network = new vis.Network(container, data, options);
            network.fit();

            network.on("click", function (params) {
                if(params.nodes[0]!=null){addChild(params.nodes[0])}});
        }

    </script>
 </head>
 <body>

 <p>
    Create a simple network with some nodes and edges.
 </p>

 <div id="mynetwork"></div>

 <script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([
        {id: 1, label: 'Node 1'},
        {id: 2, label: 'Node 2'},
        {id: 3, label: 'Node 3'},
        {id: 4, label: 'Node 4'},
        {id: 5, label: 'Node 5'}
    ]);

    // create an array with edges
    var edges = new vis.DataSet([
        {from: 1, to: 3},
        {from: 1, to: 2},
        {from: 2, to: 4},
        {from: 2, to: 5}
    ]);

    // create a network
    var container = document.getElementById('mynetwork');
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {manipulation:{
        initiallyActive:true,
        addNode: false,
 //        addEdge: false
 //        editNode: true
    }};
    var network = new vis.Network(container, data, options);
 </script>

 <script src="../googleAnalytics.js"></script>
 <body onload="draw();">
 <div id="network"></div>
 </body>
 </html>