Updates

cytoscape · Dec 24, 2023 · ca0506c · ca0506c
1 parent 5eb0881
commit ca0506c
Show file tree

Hide file tree

Showing 118 changed files with 134,388 additions and 27 deletions.
diff --git a/demos/0365589fdb70b58af282 b/demos/0365589fdb70b58af282
diff --git a/demos/0365589fdb70b58af282/code.js b/demos/0365589fdb70b58af282/code.js
@@ -0,0 +1,41 @@
+fetch('data.json', {mode: 'no-cors'})
+  .then(function(res) {
+    return res.json()
+  })
+  .then(function(data) {
+    var cy = window.cy = cytoscape({
+      container: document.getElementById('cy'),
+
+      boxSelectionEnabled: false,
+      autounselectify: true,
+
+      layout: {
+        name: 'spread',
+        minDist: 40
+      },
+
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'content': 'data(id)',
+            'font-size': 8,
+            'background-color': '#ea8a31'
+          }
+        },
+
+        {
+          selector: 'edge',
+          style: {
+            'curve-style': 'haystack',
+            'haystack-radius': 0,
+            'width': 3,
+            'opacity': 0.666,
+            'line-color': '#fcc694'
+          }
+        }
+      ],
+
+      elements: data
+    });
+  });
diff --git a/demos/0365589fdb70b58af282/data.json b/demos/0365589fdb70b58af282/data.json
diff --git a/demos/0365589fdb70b58af282/index.html b/demos/0365589fdb70b58af282/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE>
+<!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
+<html>
+  <head>
+    <title>cytoscape-spread.js demo</title>
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+    <link href="style.css" rel="stylesheet" />
+
+    <!-- For loading external data files -->
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise,fetch"></script>
+
+    <script src="../../js/cytoscape.min.js"></script>
+
+    <!-- for testing with local version of cytoscape.js -->
+    <!--<script src="../cytoscape.js/build/cytoscape.js"></script>-->
+
+    <script src="https://cdn.rawgit.com/maxkfranz/weaver/v1.2.0/dist/weaver.min.js"></script>
+    <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-spread/1.3.1/cytoscape-spread.js"></script>
+  </head>
+  <body>
+    <h1>cytoscape-spread demo</h1>
+    <div id="cy"></div>
+    <!-- Load application code at the end to ensure DOM is loaded -->
+    <script src="code.js"></script>
+  </body>
+</html>
diff --git a/demos/0365589fdb70b58af282/style.css b/demos/0365589fdb70b58af282/style.css
@@ -0,0 +1,18 @@
+body {
+  font-family: helvetica;
+  font-size: 14px;
+}
+
+#cy {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 999;
+}
+
+h1 {
+  opacity: 0.5;
+  font-size: 1em;
+}
diff --git a/demos/04030586763520be8d7a b/demos/04030586763520be8d7a
diff --git a/demos/04030586763520be8d7a/code.js b/demos/04030586763520be8d7a/code.js
@@ -0,0 +1,40 @@
+fetch('data.json', {mode: 'no-cors'})
+  .then(function(res) {
+    return res.json()
+  })
+  .then(function(data) {
+    var cy = window.cy = cytoscape({
+      container: document.getElementById('cy'),
+
+      boxSelectionEnabled: false,
+      autounselectify: true,
+
+      layout: {
+        name: 'circle'
+      },
+
+      style: [
+        {
+          selector: 'node',
+          style: {
+            'height': 20,
+            'width': 20,
+            'background-color': '#e8e406'
+          }
+        },
+
+        {
+          selector: 'edge',
+          style: {
+            'curve-style': 'haystack',
+            'haystack-radius': 0,
+            'width': 5,
+            'opacity': 0.5,
+            'line-color': '#f2f08c'
+          }
+        }
+      ],
+
+      elements: data
+    });
+  });