Update demos to use fcose layout and resolve #122

iVis-at-Bilkent · Mar 5, 2021 · 680aaca · 680aaca
1 parent 69c2825
commit 680aaca
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 26 deletions.
diff --git a/demo/demo-compounds-collapsed.html b/demo/demo-compounds-collapsed.html
@@ -15,7 +15,7 @@
   <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
   <script src="https://unpkg.com/layout-base/layout-base.js"></script>
   <script src="https://unpkg.com/cose-base/cose-base.js"></script>
-  <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
+  <script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
   <script src="https://unpkg.com/cytoscape-graphml/cytoscape-graphml.js"></script>
   <script src="../cytoscape-expand-collapse.js"></script>
   <script src="demo-compounds.js"></script>

diff --git a/demo/demo-compounds.js b/demo/demo-compounds.js
@@ -221,15 +221,21 @@ function main() {
     container: document.getElementById('cy'),
 
     ready: function () {
-      var api = this.expandCollapse({
+      this.layout({
+        name: 'fcose',
+        randomize: true,
+        fit: true,
+        animate: false
+      }).run();      
+      var api = this.expandCollapse({        
         layoutBy: {
-          name: "cose-bilkent",
-          animate: "end",
+          name: "fcose",
+          animate: true,
           randomize: false,
           fit: true
         },
         fisheye: true,
-        animate: false,
+        animate: true,
         undoable: false
       });
       api.collapseAll();
@@ -371,19 +377,24 @@ function main() {
     if (clusteringDepth < 1)
       return;
     var createdNodeIds = [];
-    cy.startBatch();
+    //cy.startBatch();
+
     for (var i = 0; i < clusteringDepth; i++) {
       //get clusters for this depth level
       let clusters = cy.elements().markovClustering();
 
       for (var j = 0; j < clusters.length; j++) {
         let parentId = "p_" + i + "_" + j;
-
-        cy.add({
+
+        let clusterBoundingBox = clusters[j].bb();
+        let parentPos = {x: clusterBoundingBox.x1 + clusterBoundingBox.w / 2, y: clusterBoundingBox.y1 + clusterBoundingBox.h / 2};
+
+        var newNode = cy.add({
           group: 'nodes',
           data: {
             id: parentId
-          }
+          },
+          position: parentPos
         });
         createdNodeIds.push(parentId);
         clusters[j].move({
@@ -397,16 +408,11 @@ function main() {
         }
       });
       cy.remove(nodesToRemove);
-      api.collapseAll();
-      cy.makeLayout({
-        name: 'cose-bilkent',
-        randomize: true,
-        fit: true,
-        animate: false
-      }).run();
 
+      api.collapseAll();
     }
-    cy.endBatch();
+
+    //cy.endBatch();
     setClusterBtn(false);
   }
 
@@ -421,10 +427,17 @@ function main() {
 
       cy.startBatch();
       cy.elements().remove();
-      cy.graphml({ layoutBy: 'cose-bilkent' });
+      cy.graphml({ layoutBy: 'preset'});
       cy.graphml(contents);
       cy.endBatch();
 
+      cy.makeLayout({
+        name: 'fcose',
+        randomize: true,
+        fit: true,
+        animate: false
+      }).run();
+
       //to be able to open the same file again
       document.getElementById("graphml-input").value = "";
       //avoid adding the same listener multiple times

diff --git a/demo/demo-undoable.html b/demo/demo-undoable.html
@@ -13,7 +13,7 @@
   <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
   <script src="https://unpkg.com/layout-base/layout-base.js"></script>
   <script src="https://unpkg.com/cose-base/cose-base.js"></script>
-  <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
+  <script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
   <script src="https://unpkg.com/cytoscape-undo-redo/cytoscape-undo-redo.js"></script>
   <script src="../cytoscape-expand-collapse.js"></script>
 
@@ -23,7 +23,7 @@
       var cy = window.cy = cytoscape({
         container: document.getElementById('cy'),
         layout: {
-          name: 'cose-bilkent'
+          name: 'fcose'
         },
         style: [
           {
@@ -77,8 +77,8 @@
 
       cy.expandCollapse({
         layoutBy: {
-          name: "cose-bilkent",
-          animate: "end",
+          name: "fcose",
+          animate: true,
           randomize: false,
           fit: true
         },

diff --git a/demo/demo.html b/demo/demo.html
@@ -14,7 +14,7 @@
   <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
   <script src="https://unpkg.com/layout-base/layout-base.js"></script>
   <script src="https://unpkg.com/cose-base/cose-base.js"></script>
-  <script src="https://unpkg.com/cytoscape-cose-bilkent/cytoscape-cose-bilkent.js"></script>
+  <script src="https://unpkg.com/cytoscape-fcose/cytoscape-fcose.js"></script>
   <script src="../cytoscape-expand-collapse.js"></script>
 
   <script>
@@ -23,7 +23,7 @@
       var cy = window.cy = cytoscape({
         container: document.getElementById('cy'),
         layout: {
-          name: 'cose-bilkent'
+          name: 'fcose'
         },
         style: [
           {
@@ -75,8 +75,8 @@
 
       var api = cy.expandCollapse({
         layoutBy: {
-          name: "cose-bilkent",
-          animate: "end",
+          name: "fcose",
+          animate: true,
           randomize: false,
           fit: true
         },