added duplicate button

editor.css

@@ -95,6 +95,7 @@ body {
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
+  cursor: pointer;
 }
 
 .contextmenu .menutop {

editor.html

@@ -28,7 +28,7 @@
     <div id="sidepanel">
       <div id="sideheader">
         <h1 id="sideheading">Hello</h1>
-        <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg">
+        <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg" onclick="deselect()">
           <polyline points="1,1 14,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
           <polyline points="14,1 1,14" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
           X
@@ -70,6 +70,14 @@
         </svg>
         &nbsp;Edit
       </div>
+      <div class="menucenter">
+        <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
+          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
+          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
+          <!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
+        </svg>
+        &nbsp;Duplicate
+      </div>
       <div class="menubottom" onclick="removeRightSelection()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />
@@ -86,6 +94,14 @@
         </svg>
         &nbsp;Edit
       </div>
+      <div class="menucenter">
+        <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
+          <rect width="5" height="5" x="1" y="4" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2"/>
+          <polyline points="4,4 4,1 9,1 9,6 5,6" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" />
+          <!-- <polyline points="1,9 8,2" style="fill:none;stroke:rgb(63, 63, 63);stroke-width:2" stroke-linecap="round" /> -->
+        </svg>
+        &nbsp;Duplicate
+      </div>
       <div class="menubottom" onclick="removeRightSelection()">
         <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg">
           <polyline points="1,1 9,9" style="fill:none;stroke:rgb(183, 76, 76);stroke-width:2" stroke-linecap="round" />

editor.js

@@ -36,6 +36,7 @@ workflow.actions.forEach(action => {
   var viewActors = [];
   action.actionData['actor Viewers'].forEach(v => viewActors.push(new Role(v)));
   action.actionData['actor Viewers'] = viewActors;
+  action.actionData.form = new Payload(action.actionData.form);
 })
 
 //Actors of the workflow
@@ -328,6 +329,11 @@ function rightSelect() {
   select(rightSelection);
 }
 
+function deselect() {
+  sidePanel.style.display = 'none';
+  selection = null;
+}
+
 
 /**
  * Updates the nodes and edges of the workflow graph.
@@ -373,10 +379,7 @@ function removeRightSelection() {
   if (rightSelection) {
     if (rightSelection.actionData) removeAction(rightSelection);
     else removeState(rightSelection);
-    if (selection === rightSelection) {
+    if (selection === rightSelection) deselect();
-      selection = null;
-      sidePanel.style.display = 'none';
-    }
     rightSelection = null;
     contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
   }
@@ -609,9 +612,8 @@ const Graph = ForceGraph()
     })
     .onBackgroundClick(_ => {
       contextMenuEd.style.display = contextMenuSt.style.display = contextMenuBg.style.display = 'none';
-      sidePanel.style.display = 'none';
+      deselect();
       rightSelection = null;
-      selection = null;
     })
     .onBackgroundRightClick(event => {
       newStateCoords = Graph.screen2GraphCoords(event.layerX, event.layerY);

workflow.js

@@ -74,6 +74,7 @@ class Payload {
 
   constructor(json) {
     this.fields = [];
+    if (json === null) return;
     for (var f in json) {
       this.fields.push(f);
     }