From b791e9d3f1d66c0f0c66fd582428994f5c3393a3 Mon Sep 17 00:00:00 2001
From: David Mosbach <david.mosbach@live.de>
Date: Sun, 28 May 2023 20:18:24 +0200
Subject: [PATCH] edges can now be created

---
 editor.css  | 20 ++++++++++++++++++++
 editor.html |  5 +++--
 editor.js   | 41 ++++++++++++++++++++++++++++++-----------
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/editor.css b/editor.css
index afad159..8dd5acb 100644
--- a/editor.css
+++ b/editor.css
@@ -155,4 +155,24 @@ 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;
 }
\ No newline at end of file
diff --git a/editor.html b/editor.html
index baacbef..cf3a658 100644
--- a/editor.html
+++ b/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>
diff --git a/editor.js b/editor.js
index 9fae1eb..03add8b 100644
--- a/editor.js
+++ b/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;
@@ -182,7 +182,9 @@ const selfLoopCurvMin = 0.5; // Minimum curvature of a self loop.
 const curvatureMinMax = 0.2; // Minimum/maximum curvature (1 +/- x) of overlapping edges.
 
 var selection = null; // The currently selected node/edge.
-var rightSelection = null; // The currently right clicked 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() {
-  //TODO
+function markEdgeTo() {
+  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);