Label addition is working.

Author: Jabbath

src/creator.js

@@ -1,3 +1,45 @@
+var selectedNode,
+    writing = false;
+
+function writeLabel(evt){
+    //Enable writing labels for the node we are hovering over
+    selectedNode = evt.target;
+    writing = true;
+}
+
+function stopWrite(evt){
+    //Disable writing labels after we move off the node
+    writing = false;
+}
+
+
+$(document).on('keyup', function(key){
+    /*
+    Listen for when we press a key and change a node's label if
+    we are hovering over it.
+
+    INPUT
+    key: A jquery keyup event
+    */
+    if(!writing) return;
+
+    //Detect backspace and otherwise input characters
+    if(key.keyCode === 8){
+        //Check if our label is already empty
+        if(selectedNode.style('label').length === 0) return;
+            
+        //Remove the last character
+        selectedNode.style('label', selectedNode.style('label').slice(0, -1));
+    }
+    else if(key.keyCode >= 32 && key.keyCode < 127){
+        selectedNode.style('label',
+        selectedNode.style('label') + String.fromCharCode(key.keyCode).toLowerCase());
+    }
+});
+//************************************************************************
+//BASIC GRAPH MANIPULATION
+//************************************************************************
+
 var selected  = [];
 
 function addEdge(evt){

src/cytoInit.js

@@ -4,14 +4,32 @@ var cy;
 function renderGraph(img){
     cy = cytoscape({
         'container': $('#container'),
+        'userZoomingEnabled': false,
+        'userPanningEnabled': false,
         'style': [{
             'selector': 'edge',
             'style': {
-                'line-color': '#ff0000',
+                'line-color': '#3399ff',
+                'opacity': 0.7,
                 'curve-style': 'bezier',
                 'control-point-step-size': '50px'
             }
+        },
+        {
+            'selector': 'node',
+            'style': {
+                'border-color': '#ff0000',
+                'width': 25,
+                'height': 25,
+                'background-opacity': 0,
+                'border-opacity': 1,
+                'border-width': 3,
+                'shape': 'ellipse',
+                'font-size': 20,
+                'label': ''
+            }
         }]
+
     });
 
     //Set our background image
@@ -22,5 +40,8 @@ function renderGraph(img){
     cy.on('tap', 'node', removeNode);
     cy.on('tap', addNode);
     cy.on('tap', 'node', addEdge);
+
+    cy.on('mouseover', 'node', writeLabel);
+    cy.on('mouseout', 'node', stopWrite);
 }