From e31b1a16c1928a9daa873d60d1fac336df3333bb Mon Sep 17 00:00:00 2001
From: Francesco Gallarotti <info@gallarotti.net>
Date: Thu, 9 Jan 2014 14:12:46 +0100
Subject: [PATCH] Added ability to create relationships

---
 graph-editor.js | 55 ++++++++++++++++++++++++++++++++++++++++++++++++
 index.html      | 56 +++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 111 insertions(+)

diff --git a/graph-editor.js b/graph-editor.js
index bc4d3fb..ddcf62c 100644
--- a/graph-editor.js
+++ b/graph-editor.js
@@ -179,6 +179,11 @@ window.onload = function()
         draw();
     } );
 
+    d3.select( "#add_relationship_button" ).on( "click", function ()
+    {
+        createNewRelationship();
+    } );
+
     function onControlEnter(saveChange)
     {
         return function()
@@ -198,6 +203,9 @@ window.onload = function()
 
         var node = this.__data__.model;
 
+        var idField = editor.select("#node_id");
+        idField.node().value = node.id || "";
+
         var captionField = editor.select("#node_caption");
         captionField.node().value = node.caption() || "";
         captionField.node().select();
@@ -241,6 +249,43 @@ window.onload = function()
         editor.select("#edit_node_delete").on("click", deleteNode);
     }
 
+    function createNewRelationship()
+    {
+        var editor = d3.select(".pop-up-editor.newrelationship");
+        appendModalBackdrop();
+        editor.classed( "hide", false );
+
+        var newrelationshipTypeField = editor.select("#newrelationship_type");
+        newrelationshipTypeField.node().select();
+        var newrelationshipFromField = editor.select("#newrelationship_from");
+        var newrelationshipToField = editor.select("#newrelationship_to");
+        var newpropertiesField = editor.select("#newrelationship_properties");
+
+        function saveChange()
+        {
+            var newrelationship = graphModel.createRelationship(
+                graphModel.lookupNode(newrelationshipFromField.node().value), 
+                graphModel.lookupNode(newrelationshipToField.node().value));
+            newrelationship.relationshipType( newrelationshipTypeField.node().value );
+            newrelationship.properties().clearAll();
+            newpropertiesField.node().value.split("\n").forEach(function(line) {
+                var tokens = line.split(/: */);
+                if (tokens.length === 2) {
+                    var key = tokens[0].trim();
+                    var value = tokens[1].trim();
+                    if (key.length > 0 && value.length > 0) {
+                        newrelationship.properties().set(key, value);
+                    }
+                }
+            });
+            save( formatMarkup() );
+            draw();
+            cancelModal();
+        }
+
+        editor.select("#new_relationship_save").on("click", saveChange);
+    }
+
     function editRelationship()
     {
         var editor = d3.select(".pop-up-editor.relationship");
@@ -249,6 +294,14 @@ window.onload = function()
 
         var relationship = this.__data__.model;
 
+        var relationshipFromField = editor.select("#relationship_from");
+        relationshipFromField.node().value = relationship.start.id || "";
+        relationshipFromField.node().select();
+
+        var relationshipToField = editor.select("#relationship_to");
+        relationshipToField.node().value = relationship.end.id || "";
+        relationshipToField.node().select();
+
         var relationshipTypeField = editor.select("#relationship_type");
         relationshipTypeField.node().value = relationship.relationshipType() || "";
         relationshipTypeField.node().select();
@@ -260,6 +313,8 @@ window.onload = function()
 
         function saveChange()
         {
+            relationship.start = graphModel.lookupNode(relationshipFromField.node().value);
+            relationship.end = graphModel.lookupNode(relationshipToField.node().value);
             relationship.relationshipType( relationshipTypeField.node().value );
             relationship.properties().clearAll();
             propertiesField.node().value.split("\n").forEach(function(line) {
diff --git a/index.html b/index.html
index fcaf945..947396b 100644
--- a/index.html
+++ b/index.html
@@ -32,6 +32,7 @@
 
 <div class="tools form-inline well">
   <button class="btn" id="add_node_button"><i class="icon-plus"></i> Node</button>
+  <button class="btn" id="add_relationship_button"><i class="icon-plus"></i> Relationship</button>
   <button class="btn" id="exportMarkupButton">Export Markup</button>
   <button class="btn" id="exportSvgButton">Export SVG</button>
   <label for="internalScale">Internal Scale</label>
@@ -80,6 +81,12 @@ <h3>Edit Node</h3>
   </div>
   <div class="modal-body">
     <div class="form-horizontal">
+      <div class="control-group">
+        <label class="control-label" for="node_id">ID</label>
+        <div class="controls">
+          <input id="node_id" type="text" value="" disabled>
+        </div>
+      </div>
       <div class="control-group">
         <label class="control-label" for="node_caption">Caption</label>
         <div class="controls">
@@ -115,6 +122,18 @@ <h3>Edit Relationship</h3>
           <input id="relationship_type" type="text" value="R">
         </div>
       </div>
+      <div class="control-group">
+        <label class="control-label" for="relationship_from">From Node</label>
+        <div class="controls">
+          <input id="relationship_from" type="text" value="">
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="relationship_to">To Node</label>
+        <div class="controls">
+          <input id="relationship_to" type="text" value="">
+        </div>
+      </div>
       <div class="control-group">
         <label class="control-label" for="relationship_properties">Properties</label>
         <div class="controls">
@@ -128,6 +147,43 @@ <h3>Edit Relationship</h3>
     <a href="#" class="btn btn-primary" id="edit_relationship_save">Save</a>
   </div>
 </div>
+<div class="modal hide pop-up-editor newrelationship" tabindex="-1">
+  <div class="modal-header">
+    <h3>Create Relationship</h3>
+  </div>
+  <div class="modal-body">
+    <div class="form-horizontal">
+      <div class="control-group">
+        <label class="control-label" for="newrelationship_type">Type</label>
+        <div class="controls">
+          <input id="newrelationship_type" type="text" value="R">
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="newrelationship_from">From Node</label>
+        <div class="controls">
+          <input id="newrelationship_from" type="text" value="0">
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="newrelationship_to">To Node</label>
+        <div class="controls">
+          <input id="newrelationship_to" type="text" value="1">
+        </div>
+      </div>
+      <div class="control-group">
+        <label class="control-label" for="newrelationship_properties">Properties</label>
+        <div class="controls">
+          <textarea id="newrelationship_properties" rows="6"></textarea>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <a href="#" class="btn cancel">Cancel</a>
+    <a href="#" class="btn btn-primary" id="new_relationship_save">Save</a>
+  </div>
+</div>
 
 <div id="canvas"></div>