Fixed phantom edges during clustering #1281

9 years ago · 68c117280f
--- a/HISTORY.md
+++ b/HISTORY.md
@ -1,6 +1,11 @@
 # vis.js history
 http://visjs.org

 ## 2015-09-07, version 4.8.2-SNAPSHOT NOT YET RELEASED

 ### Network

 - Fixed Phantom Edges during clustering.

 ## 2015-09-07, version 4.8.1

--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
--- a/lib/network/modules/Clustering.js
+++ b/lib/network/modules/Clustering.js
@ -654,6 +654,8 @@ class ClusterEngine {
      if (containedEdges.hasOwnProperty(edgeId)) {
        let edge = containedEdges[edgeId];
        edge.setOptions({physics: true, hidden: false});
        edge.hiddenByCluster = undefined;
        delete edge.hiddenByCluster;
      }
    }

--- a/test/networkTest.html
+++ b/test/networkTest.html
@ -26,53 +26,56 @@
        var network2 = null;

        function draw() {
            var nodes = [];
            var edges = [];
            nodes.push({ id: 1, label: 'Node1' });
            nodes.push({ id: 2, label: 'Node2' });
            edges.push({ from: 2, to: 1 });
            // create an array with nodes
            var nodes = [
                {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 = [
                {from: 1, to: 2},
                {from: 2, to: 3},
                {from: 3, to: 4},
                {from: 4, to: 5}
            ];

            // create a network
            var container = document.getElementById('mynetwork');
            var data = {
                nodes: nodes,
                edges: edges
            };
            var options = {layout:{randomSeed:8}};
            network = new vis.Network(container, data, options);

            // create a network
            var container = document.getElementById('mynetwork');
            var options = {
                layout: {
                    hierarchical: {
                        direction: "UD"
                    }
            setTimeout(function() {
                var clusterOptionsByData = {
                    joinCondition:function(childOptions) {
                        return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
                    },
                    clusterNodeProperties: {id:'cid1', label:'cid1'}
                }
            };
            network = new vis.Network(container, data, options);
                network.cluster(clusterOptionsByData);
            },100);

            $('#divTreemapPopUp').modal('show');
            setTimeout(function() {
                var itemId = 'cid1';
                network.openCluster([itemId]);
            },300);

 //
 //            var nodes2 = [];
 //            var edges2 = [];
 //            nodes2.push({ id: 1, label: 'Node1' });
 //            nodes2.push({ id: 2, label: 'Node2' });
 //            edges2.push({ from: 2, to: 1 });
 //
 //            var data2 = {
 //                nodes: nodes2,
 //                edges: edges2
 //            };
 //
 //            // create a network
 //            var container2 = document.getElementById('mynetwork2');
 //            var options2 = {
 //                layout: {
 //                    hierarchical: {
 //                        direction: "UD"
 //                    }
 //                }
 //            };
 //            network2 = new vis.Network(container2, data2, options2);
 //            setTimeout(function() {console.log('redraw');network.redraw()},1000)
            setTimeout(function() {
                var clusterOptionsByData = {
                    joinCondition:function(childOptions) {
                        return childOptions.id == 2 || childOptions.id == 3 || childOptions.id == 4;
                    },
                    clusterNodeProperties: {id:'cid2', label:'cid2'}
                }
                network.cluster(clusterOptionsByData);
            },1000);
        }
    </script>
 </head>
@ -80,15 +83,7 @@
 <body onload="draw();">
 <h2>Popup Example</h2>

 <div style='display: none;' class='modal fade' id='divTreemapPopUp' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' aria-hidden='true'>
    <div class='modal-dialog'><div class='modal-content'><div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
        <h4 class='modal-title'>TreeMap</h4></div>
        <div class='modal-body'>
            <div id='mynetwork'></div></div>
        <div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button></div></div></div></div>

 <div id='mynetwork2'></div>
 <div id='mynetwork'></div>

 </body>
 </html>