Update to use cytoscape@3.4.0 release rather than a snapshot and simp…

…lify the demo
cytoscape · Feb 6, 2019 · aa9cbef · aa9cbef
1 parent ff290d6
commit aa9cbef
Show file tree

Hide file tree

Showing 6 changed files with 208 additions and 71 deletions.
diff --git a/cytoscape.3.4.0-snapshot.umd.js b/cytoscape.3.4.0-snapshot.umd.js
diff --git a/demo-testing.html b/demo-testing.html
@@ -0,0 +1,202 @@
+<!DOCTYPE>
+
+<html>
+
+  <head>
+    <title>cytoscape-compound-drag-and-drop testing demo</title>
+
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+
+    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
+
+    <script src="cytoscape-compound-drag-and-drop.js"></script>
+
+    <style>
+      body {
+        font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
+        font-size: 14px;
+      }
+
+      #cy {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+      }
+
+      h1 {
+        opacity: 0.5;
+        font-size: 1em;
+        font-weight: bold;
+      }
+
+      #options {
+        z-index: 2;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin: 0.5em;
+      }
+    </style>
+
+    <script>
+      document.addEventListener('DOMContentLoaded', function(){
+
+        var cy = window.cy = cytoscape({
+          container: document.getElementById('cy'),
+
+          style: [
+            {
+              selector: 'node',
+              style: {
+                'label': 'data(id)'
+              }
+            },
+
+            {
+              selector: 'node:parent',
+              style: {
+                'label': ''
+              }
+            },
+
+            {
+              selector: 'edge',
+              style: {
+                'curve-style': 'bezier',
+                'target-arrow-shape': 'triangle'
+              }
+            },
+
+            {
+              selector: '.cdnd-grabbed-node',
+              style: {
+                'background-color': 'red'
+              }
+            },
+
+            {
+              selector: '.cdnd-drop-sibling',
+              style: {
+                'background-color': 'red'
+              }
+            },
+
+            {
+              selector: '.cdnd-drop-target',
+              style: {
+                'border-color': 'red',
+                'border-style': 'dashed'
+              }
+            }
+          ],
+
+          elements: {
+            nodes: [
+              { data: { id: 'a' } },
+              { data: { id: 'b' } },
+              { data: { id: 'c' } },
+              { data: { id: 'd', parent: 'p' } },
+              { data: { id: 'p'} }
+            ],
+            edges: [
+
+            ]
+          }
+        });
+
+        var cdnd = cy.compoundDragAndDrop();
+        var removeEmptyParents = false;
+        var T = 5000;
+
+        var isParentOfOneChild = function(node){
+          return node.isParent() && node.children().length === 1;
+        };
+
+        var removeParent = function(parent){
+          parent.children().move({ parent: null });
+          parent.remove();
+        };
+
+        var removeParentsOfOneChild = function(){
+          cy.nodes().filter(isParentOfOneChild).forEach(removeParent);
+        };
+
+        // custom handler to remove parents with only 1 child on drop
+        cy.on('cdndout', function(event, dropTarget){
+          if( removeEmptyParents && isParentOfOneChild(dropTarget) ){
+            removeParent(dropTarget);
+          }
+        });
+
+        // custom handler to remove parents with only 1 child (on remove of drop target or drop sibling)
+        cy.on('remove', function(event){
+          if( removeEmptyParents ){
+            removeParentsOfOneChild();
+          }
+        });
+
+        var onClick = function(id, handler){
+          document.getElementById(id).addEventListener('click', handler);
+        };
+
+        onClick('remove-1ch-parents', function(){
+          removeEmptyParents = !removeEmptyParents;
+
+          if( removeEmptyParents ){
+            removeParentsOfOneChild();
+          }
+        });
+
+        onClick('rm-a', function(){
+          setTimeout(function(){ cy.$('#a').remove(); }, T);
+        });
+
+        onClick('rm-b', function(){
+          setTimeout(function(){ cy.$('#b').remove(); }, T);
+        });
+
+        onClick('rm-c', function(){
+          setTimeout(function(){ cy.$('#c').remove(); }, T);
+        });
+
+        onClick('rm-d', function(){
+          setTimeout(function(){ cy.$('#d').remove(); }, T);
+        });
+
+        onClick('rm-p', function(){
+          setTimeout(function(){ cy.$('#p').remove(); }, T);
+        });
+
+        onClick('add-e', function(){
+          setTimeout(function(){ cy.add({ data: { id: 'e' }, position: { x: 540, y: 400 } }); }, T);
+        });
+
+      });
+    </script>
+  </head>
+
+  <body>
+    <h1>cytoscape-compound-drag-and-drop testing demo</h1>
+
+    <div id="cy"></div>
+
+    <div id="options">
+        <input id="remove-1ch-parents" type="checkbox" value="false" />
+        <label for="remove-1ch-parents">Remove parents with only one child</label>
+        &nbsp;|&nbsp;
+        <label>Remove after 5s:</label>
+        <button id="rm-a">a</button>
+        <button id="rm-b">b</button>
+        <button id="rm-c">c</button>
+        <button id="rm-d">d</button>
+        <button id="rm-p">p</button>
+        &nbsp;|&nbsp;
+        <label>Add after 5s:</label>
+        <button id="add-e">e</button>
+    </div>
+  </body>
+
+</html>
diff --git a/demo.html b/demo.html
@@ -3,14 +3,11 @@
 <html>
 
   <head>
-    <title>cytoscape-compound-drag-and-drop.js demo</title>
+    <title>cytoscape-compound-drag-and-drop demo</title>
 
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
 
-    <!-- <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script> -->
-
-    <!-- for testing with local version of cytoscape.js -->
-    <script src="cytoscape.3.4.0-snapshot.umd.js"></script>
+    <script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
 
     <script src="cytoscape-compound-drag-and-drop.js"></script>
 
@@ -112,7 +109,6 @@
 
         var cdnd = cy.compoundDragAndDrop();
         var removeEmptyParents = false;
-        var T = 5000;
 
         var isParentOfOneChild = function(node){
           return node.isParent() && node.children().length === 1;
@@ -141,42 +137,14 @@
           }
         });
 
-        var onClick = function(id, handler){
-          document.getElementById(id).addEventListener('click', handler);
-        };
-
-        onClick('remove-1ch-parents', function(){
+        // toggle check handler
+        document.getElementById('remove-1ch-parents').addEventListener('click', function(){
           removeEmptyParents = !removeEmptyParents;
 
           if( removeEmptyParents ){
             removeParentsOfOneChild();
           }
         });
-
-        onClick('rm-a', function(){
-          setTimeout(function(){ cy.$('#a').remove(); }, T);
-        });
-
-        onClick('rm-b', function(){
-          setTimeout(function(){ cy.$('#b').remove(); }, T);
-        });
-
-        onClick('rm-c', function(){
-          setTimeout(function(){ cy.$('#c').remove(); }, T);
-        });
-
-        onClick('rm-d', function(){
-          setTimeout(function(){ cy.$('#d').remove(); }, T);
-        });
-
-        onClick('rm-p', function(){
-          setTimeout(function(){ cy.$('#p').remove(); }, T);
-        });
-
-        onClick('add-e', function(){
-          setTimeout(function(){ cy.add({ data: { id: 'e' }, position: { x: 540, y: 400 } }); }, T);
-        });
-
       });
     </script>
   </head>
@@ -189,16 +157,6 @@ <h1>cytoscape-compound-drag-and-drop demo</h1>
     <div id="options">
         <input id="remove-1ch-parents" type="checkbox" value="false" />
         <label for="remove-1ch-parents">Remove parents with only one child</label>
-        &nbsp;|&nbsp;
-        <label>Remove after 5s:</label>
-        <button id="rm-a">a</button>
-        <button id="rm-b">b</button>
-        <button id="rm-c">c</button>
-        <button id="rm-d">d</button>
-        <button id="rm-p">p</button>
-        &nbsp;|&nbsp;
-        <label>Add after 5s:</label>
-        <button id="add-e">e</button>
     </div>
   </body>
 

diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "webpack": "^2.6.1"
   },
   "peerDependencies": {
-    "cytoscape": "^3.3.0"
+    "cytoscape": "^3.4.0"
   },
   "dependencies": {}
 }
diff --git a/pages/cytoscape.3.4.0-snapshot.umd.js b/pages/cytoscape.3.4.0-snapshot.umd.js
diff --git a/pages/demo-testing.html b/pages/demo-testing.html
@@ -0,0 +1 @@
+../demo-testing.html