add box selection

code.js

@@ -166,6 +166,8 @@ $(function () { // on dom ready
 	function visual_pathway(obj) {
 		$('#cy').cytoscape({
 			style: cytoscape.stylesheet()
+
+				// node elements default css (unselected state)
 				.selector('node').css({
 					'content': 'data(name)',
 					'text-valign': 'center',
@@ -210,6 +212,8 @@ $(function () { // on dom ready
 					'text-halign': 'center',
 					'text-valign': 'top'
 				})
+
+				// edge elements default css (unselected)
 				.selector('edge').css({
 					'line-color': 'black',
 					'line-style': 'solid',
@@ -235,15 +239,19 @@ $(function () { // on dom ready
 					'line-color': 'yellow',
 					'line-style': 'solid'
 				})
+
+				// node & edge elements (selected state)
 				.selector('edge:selected').css({
 					'background-color': 'black',
 					'line-color': 'black',
 					'target-arrow-color': 'black',
 					'source-arrow-color': 'black'
 				})
 				.selector('node:selected').css({
-					'width': 10
+					'background-color': 'yellow'
 				})
+
+				// misc
 				.selector('.faded').css({
 					'opacity': 1,
 					'text-opacity': 0
@@ -263,24 +271,23 @@ $(function () { // on dom ready
 				name: 'preset',
 				padding: 10
 			},
-			//style: {
-			//    name: 'WikiPathways'
-			//},
-
-			// on graph initial layout done (could be async depending on layout...)
-
+//style: {
+//name: 'WikiPathways'
+//},
 
+			//on graph initial layout done (could be async depending on layout...)
 			ready: function () {
 				window.cy = this;
 
-				cy.elements().unselectify();
+//cy.elements().unselectify();
 
 				var selectedNodes = [];
 				var counts = {};
 				var str_info;
 
-				//$('#information').append("You have selected:" + "<br>");
+//$('#information').append("You have selected:" + "<br>");
 
+				/* custom event handlers */
 				cy.off('click', 'node').on('click', 'node', function (e) {
 					e.preventDefault();
 
@@ -301,8 +308,40 @@ $(function () { // on dom ready
 						$('#params').append(node_name + ":" + "low" + "\n");
 					}
 				});
-			}
-		});
+			},
+
+  			// initial viewport state:
+  			zoom: 1,
+  			pan: { x: 0, y: 0 },
+
+			// interaction options:
+  			minZoom: 1e-50,
+  			maxZoom: 1e50,
+  			zoomingEnabled: true,
+  			userZoomingEnabled: true,
+  			panningEnabled: true,
+  			userPanningEnabled: true,
+ 	 		boxSelectionEnabled: true,
+  			selectionType: 'single',
+  			touchTapThreshold: 8,
+  			desktopTapThreshold: 4,
+  			autolock: false,
+  			autoungrabify: false,
+  			autounselectify: false,
+
+  			// rendering options:
+  			headless: false,
+  			styleEnabled: true,
+  			hideEdgesOnViewport: false,
+  			hideLabelsOnViewport: false,
+  			textureOnViewport: false,
+  			motionBlur: false,
+  			motionBlurOpacity: 0.2,
+  			wheelSensitivity: 1,
+  			pixelRatio: 1,
+  			initrender: function(evt){ /* ... */ },
+  			renderer: { /* ... */ }
+		});	
 	}
 
 	document.getElementById('file').addEventListener('change', onChange);

index.php

@@ -13,6 +13,7 @@
 	<title content="Json pathway file reader">Json pathway file reader</title>
 	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
 	<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
 	<script src="code.js"></script>
 	<script src="html2canvas.js"></script>
 	<style>

style.css

@@ -24,3 +24,10 @@ body {
     border: 1px solid #000;
     margin: 10px 5px 0 0;
 }
+
+rect.selection {
+    stroke          : red;
+    stroke-dasharray: 4px;
+    stroke-opacity  : 1.0;
+    fill            : transparent;
+}