Update demo to use the same example graph as the other FD layouts. Move

the old demo to demo-proteins.html.
cytoscape · Jul 31, 2018 · b973a09 · b973a09
1 parent 6072546
commit b973a09
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@ cytoscape-spread
 
 ## Description
 
-The Spread physics simulation layout for Cytoscape.js ([demo](https://cytoscape.github.io/cytoscape.js-spread/))
+The Spread physics simulation layout for Cytoscape.js
+([demo](https://cytoscape.github.io/cytoscape.js-spread))
+([proteins demo](https://cytoscape.github.io/cytoscape.js-spread/demo-proteins.html))
 
 The spread layout uses a force-directed physics simulation with several external libraries.  The layout tries to keep elements spread out evenly, making good use of constrained space.
 

diff --git a/demo-proteins.html b/demo-proteins.html
@@ -0,0 +1,83 @@
+<!DOCTYPE>
+
+<html>
+
+	<head>
+		<title>cytoscape-spread.js demo (proteins)</title>
+
+		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>
+		<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
+		<script src="https://unpkg.com/weaverjs@1.2.0/dist/weaver.min.js"></script>
+
+		<!-- for testing with local version of cytoscape.js -->
+		<!-- <script src="../cytoscape.js/build/cytoscape.js"></script> -->
+
+		<script src="cytoscape-spread.js"></script>
+
+		<style>
+			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;
+			}
+		</style>
+
+		<script>
+			window.addEventListener('DOMContentLoaded', function(){
+
+				var cy = window.cy = cytoscape({
+					container: document.getElementById('cy'),
+
+					layout: {
+						name: 'spread',
+						minDist: 40
+					},
+
+					style: [
+						{
+							selector: 'node',
+							style: {
+								'background-color': '#ea8a31'
+							}
+						},
+
+						{
+							selector: 'edge',
+							style: {
+								'curve-style': 'haystack',
+								'haystack-radius': 0,
+								'width': 3,
+								'opacity': 0.666,
+								'line-color': '#fcc694'
+							}
+						}
+					],
+          elements: fetch('./example-graphs/proteins.json').then(function( res ){ return res.json(); })
+				});
+			});
+		</script>
+	</head>
+
+	<body>
+		<h1>cytoscape-spread demo (proteins)</h1>
+
+		<div id="cy"></div>
+
+	</body>
+
+</html>
diff --git a/demo.html b/demo.html
diff --git a/example-graphs/planar-chain.json b/example-graphs/planar-chain.json
diff --git a/example-graphs/proteins.json b/example-graphs/proteins.json