edges can now be created

editor.css

@@ -156,3 +156,23 @@ a:hover {
 a:active {
   color: rgb(110, 212, 212);
 }
+
+button {
+  padding: 5 5 5 5;
+  border-radius: 5px;
+  border-style: solid;
+  border-color: transparent;
+  background: rgba(120, 120, 120, 0.555);
+  color: white;
+}
+
+button:disabled {
+  border-color: rgba(0, 0, 0, 0.267);
+  background: rgba(120, 120, 120, 0.116);
+  color: rgba(0, 0, 0, 0.267);
+  border-width: 1px;
+}
+
+select, option {
+  padding: 2 2 2 2;
+}

editor.html

@@ -33,6 +33,7 @@
       <div id="sidebuttons">
         <button type="submit" disabled="disabled">Save</button>
         <button type="reset" disabled="disabled">Cancel</button>
+        <button type="submit" disabled="disabled" style="position: absolute; right: 0px;">Delete</button>
       </div>
     </div>
     <div id="ctmenubg" class="contextmenu"> <!--Context menu displayed after right-clicking the background-->
@@ -50,13 +51,13 @@
       </div>
     </div>
     <div id="ctmenust" class="contextmenu"> <!--Context menu displayed after right-clicking a state-->
-      <div class="menutop">
+      <div class="menutop" onclick="markEdgeFrom()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,1 9,9" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
         </svg>
         &nbsp;New Edge from here
       </div>
-      <div class="menucenter">
+      <div class="menucenter" onclick="markEdgeTo()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,9 9,1" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" />
         </svg>

editor.js

@@ -150,7 +150,7 @@ var highlightedTargets = [];
 
 function selectActor() {
   contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
-  rightSelection = null;
+  edgeFrom = edgeTo = rightSelection = null;
   highlightedSources = [];
   highlightedTargets = [];
   selectedViewer.value = NO_VIEWER;
@@ -164,7 +164,7 @@ function selectActor() {
 
 function selectViewer() {
   contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
-  rightSelection = null;
+  edgeFrom = edgeTo = rightSelection = null;
   highlightedSources = [];
   highlightedTargets = [];
   selectedActor.value = NO_ACTOR;
@@ -183,6 +183,8 @@ const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlappi
 
 var selection = null; // The currently selected node/edge.
 var rightSelection = null; // The currently right clicked node/edge.
+var edgeTo = null; // Target of an edge to be created.
+var edgeFrom = null; // Start on an edge to be created.
 const sidePanel = document.getElementById('sidepanel');
 const sideContent = document.getElementById('sidecontent');
 const sideHeading = document.getElementById('sideheading');
@@ -309,7 +311,7 @@ function generatePanelContent(selection) {
  */
 function select(item) {
   contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
-  rightSelection = null;
+  edgeFrom = edgeTo = rightSelection = null;
   selection = selection === item ? null : item;
   if (selection === item) {
     while (sideContent.firstChild)
@@ -360,9 +362,12 @@ function updateGraph() {
  */
 function connect(source, target) {
   let linkId = actionIdCounter ++;
-  action = {id: linkId, source: source, target: target, name: 'action_' + linkId};
+  action = {id: linkId, source: source, target: target, name: 'action_' + linkId, actionData: {
+    viewerNames: [], actorNames: []
+  }};
   workflow.actions.push(action);
   updateGraph();
+  select(action);
 }
 
 
@@ -379,8 +384,14 @@ function addState() {
   select(state);
 }
 
-function addEdge() {
+function markEdgeTo() {
-  //TODO
+  edgeTo = rightSelection;
+  contextMenuSt.style.display = 'none';
+}
+
+function markEdgeFrom() {
+  edgeFrom = rightSelection;
+  contextMenuSt.style.display = 'none';
 }
 
 function removeRightSelection() {
@@ -388,7 +399,7 @@ function removeRightSelection() {
     if (rightSelection.actionData) removeAction(rightSelection);
     else removeState(rightSelection);
     if (selection === rightSelection) deselect();
-    rightSelection = null;
+    edgeFrom = edgeTo = rightSelection = null;
     contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
   }
 }
@@ -611,7 +622,15 @@ const Graph = ForceGraph()
       node.fx = node.x;
       node.fy = node.y;
     })
-    .onNodeClick((node, _) => select(node))
+    .onNodeClick((node, _) => {
+      if (edgeFrom) {
+        connect(edgeFrom, node);
+        edgeFrom = null;
+      } else if (edgeTo) {
+        connect(node, edgeTo);
+        edgeTo = null;
+      } else select(node);
+    })
     .onNodeRightClick((node, event) => {
       openContextMenu(event.layerX, event.layerY, contextMenuSt);
       contextMenuBg.style.display = contextMenuEd.style.display = 'none';
@@ -626,13 +645,13 @@ const Graph = ForceGraph()
     .onBackgroundClick(_ => {
       contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
       deselect();
-      rightSelection = null;
+      edgeFrom = edgeTo = rightSelection = null;
     })
     .onBackgroundRightClick(event => {
       newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY);
       openContextMenu(event.layerX, event.layerY, contextMenuBg);
       contextMenuEd.style.display = contextMenuSt.style.display = 'none';
-      rightSelection = null;
+      edgeFrom = edgeTo = rightSelection = null;
     })
     .autoPauseRedraw(false);