adjusted adding new edges to existing nodes

editor.ts

@@ -92,7 +92,7 @@ type FadeDef = {
  * @param {HTMLElement} menuitem 
  */
 function openMenuItem(menuitem: HTMLElement) {
-  edgeTo = edgeFrom = rightSelection = null;
+  edgeTarget = rightSelection = null;
   closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
   if (menuitem === selectedMenuItem) {
     closeMenuItem();
@@ -398,7 +398,7 @@ var highlightedTargets : string[] = [];
 
 export function selectActor() {
   closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
-  edgeFrom = edgeTo = rightSelection = null;
+  edgeTarget = rightSelection = null;
   highlightedSources = [];
   highlightedTargets = [];
   selectedViewer.value = NO_VIEWER;
@@ -412,7 +412,7 @@ export function selectActor() {
 
 export function selectViewer() {
   closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
-  edgeFrom = edgeTo = rightSelection = null;
+  edgeTarget = rightSelection = null;
   highlightedSources = [];
   highlightedTargets = [];
   selectedActor.value = NO_ACTOR;
@@ -426,8 +426,6 @@ export function selectViewer() {
 
 var selection : WF.WFNode | WF.WFGhostNode | WF.WFEdge | null = null; // The currently selected node/edge.
 var rightSelection : WF.WFNode | WF.WFEdge | null = null; // The currently right clicked node/edge.
-var edgeTo : WF.WFNode | null = null; // Target of an edge to be created.
-var edgeFrom : WF.WFNode | null = null; // Start on an edge to be created.
 var edgeTarget : WF.WFNode | null = null; // Possible source/target for an edge after dragging the respective ghost node.
 //Utility elements
 const curtain = <HTMLElement>document.getElementById('curtain');
@@ -498,8 +496,8 @@ document.getElementById('side-panel-delete')?.addEventListener('click', _ => rem
 document.getElementById('file-panel-cancel')?.addEventListener('click', _ => closeFileDisplay());
 document.getElementById('add-state')?.addEventListener('click', _ => addState());
 document.getElementById('add-edge')?.addEventListener('click', _ => addEdge());
-document.getElementById('edge-from')?.addEventListener('click', _ => markEdgeFrom());
+document.getElementById('edge-from')?.addEventListener('click', _ => ghostEdgeFrom());
-document.getElementById('edge-to')?.addEventListener('click', _ => markEdgeTo());
+document.getElementById('edge-to')?.addEventListener('click', _ => ghostEdgeTo());
 document.getElementById('close-side-panel')?.addEventListener('click', _ => deselect());
 document.getElementById('close-file-panel')?.addEventListener('click', _ => closeFileDisplay());
 
@@ -516,7 +514,7 @@ document.querySelectorAll('.delete-item').forEach(elem => elem.addEventListener(
  */
 export function select(item: WF.WFEdge | WF.WFNode | WF.WFGhostNode) {
   closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
-  edgeFrom = edgeTo = rightSelection = null;
+  edgeTarget = rightSelection = null;
   selection = selection === item ? null : item;
   if (!(item instanceof WF.WFGhostNode) && selection === item) {
     while (sideContent.firstChild)
@@ -634,16 +632,38 @@ function connect(source: WF.WFNode | WF.WFGhostNode, target: WF.WFNode | WF.WFGh
   actionIndex.add(action.id, action.name);
 }
 
-export function markEdgeTo() {
+export function ghostEdgeTo() {
-  edgeTo = <WF.WFNode>rightSelection;
+  var to = <WF.WFNode>rightSelection;
+  var x = to.x - 40;
+  var y = to.y - 40;
+  var from = new WF.WFGhostNode({
+    id: `@@ghost.to@${to.name}@(${to.x},${to.y})`,
+    x: x,
+    y: y,
+    fx: x,
+    fy: y,
+    val: 7
+  });
+  workflow.states.push(from);
+  connect(from, to);
   closeContextMenus(contextMenuSt);
-  // contextMenuSt.style.display = 'none';
 }
 
-export function markEdgeFrom() {
+export function ghostEdgeFrom() {
-  edgeFrom = <WF.WFNode>rightSelection;
+  var from = <WF.WFNode>rightSelection;
+  var x = from.x + 40;
+  var y = from.y + 40;
+  var to = new WF.WFGhostNode({
+    id: `@@ghost.from@${from.name}@(${from.x},${from.y})`,
+    x: x,
+    y: y,
+    fx: x,
+    fy: y,
+    val: 7
+  });
+  workflow.states.push(to);
+  connect(from, to);
   closeContextMenus(contextMenuSt);
-  // contextMenuSt.style.display = 'none';
 }
 
 export function removeSelection() {
@@ -651,7 +671,7 @@ export function removeSelection() {
     if (selection.hasOwnProperty('actionData')) removeAction(<WF.WFEdge>selection);
     else removeState(<WF.WFNode>selection);
     deselect();
-    edgeFrom = edgeTo = rightSelection = null;
+    edgeTarget = rightSelection = null;
     closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
   }
 }
@@ -661,7 +681,7 @@ export function removeRightSelection() {
     if (rightSelection.hasOwnProperty('actionData')) removeAction(<WF.WFEdge>rightSelection);
     else removeState(<WF.WFNode>rightSelection);
     if (selection === rightSelection) deselect();
-    edgeFrom = edgeTo = rightSelection = null;
+    edgeTarget = rightSelection = null;
     closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
   }
 }
@@ -954,7 +974,7 @@ function openContextMenu(x: number, y: number, menu: HTMLElement) {
   menu.style.left = (x + 20).toString();
   fadeIn(null, {element: menu, max: 1, step: 0.1})
   // menu.style.display = 'block';
-  edgeFrom = edgeTo = null;
+  edgeTarget = null;
 }
 
 
@@ -1249,18 +1269,13 @@ function getEdgeColour(edge: LinkObject) {
         edgesFrom.forEach(edge => edge.source = <WF.WFNode>edgeTarget);
         edgesTo.forEach(edge => edge.target = <WF.WFNode>edgeTarget);
         removeState(node);
+        edgeTarget = null;
         updateGraph();
       }
     })
     .onNodeClick((node: NodeObject, _: MouseEvent) => {
-      const wfNode = node as (WF.WFNode | WF.WFGhostNode);
+      edgeTarget = null;
-      if (edgeFrom) {
+      (node instanceof WF.WFNode) && select(node as WF.WFNode);
-        connect(edgeFrom, wfNode);
-        edgeFrom = null;
-      } else if (edgeTo) {
-        connect(wfNode, edgeTo);
-        edgeTo = null;
-      } else select(wfNode);
       closeMenuItem();
     })
     .onNodeRightClick((node: NodeObject, event: MouseEvent) => {
@@ -1290,7 +1305,7 @@ function getEdgeColour(edge: LinkObject) {
     .onBackgroundClick((_: Event) => {
       closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
       deselect();
-      edgeFrom = edgeTo = rightSelection = null;
+      edgeTarget = rightSelection = null;
       closeMenuItem();
     })
     .onBackgroundRightClick((event: MouseEvent) => {
@@ -1300,7 +1315,7 @@ function getEdgeColour(edge: LinkObject) {
       openContextMenu(event.layerX, event.layerY, contextMenuBg);
       closeContextMenus(contextMenuEd, contextMenuSt);
       // contextMenuEd.style.display = contextMenuSt.style.display = 'none';
-      edgeFrom = edgeTo = rightSelection = null;
+      edgeTarget = rightSelection = null;
       closeMenuItem();
     })
     .autoPauseRedraw(false);