WIP: side panel for information about selection

editor.css

@@ -18,6 +18,7 @@ body {
   position: fixed;
   padding: 8 8 8 8;
   background-color: rgb(230, 230, 230);
+  opacity: 0.95;
   z-index: 2;
   float: left;
   overflow: auto;
@@ -31,3 +32,34 @@ body {
   float: left;
   margin-right: 20;
 }
+
+#sidepanel {
+  position:fixed;
+  background-color: rgb(230, 230, 230);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  top: 80px;
+  bottom:30px;
+  right:20px;
+  width: 500px;
+  opacity: 0.95;
+  padding: 20px;
+  border-radius: 20px;
+  z-index:10;
+  display: none;
+}
+
+#sideheader {
+  width: 100%;
+}
+
+#sideheader h1 {
+  text-align: center;
+  font-size: 2em;
+  font-style: normal;
+}
+
+#sideheader svg {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+}

editor.html

@@ -25,6 +25,17 @@
         <select name="viewer" id="viewer" onchange="selectViewer();"></select>
       </div>
     </div>
+    <div id="sidepanel">
+      <div id="sideheader">
+        <h1 id="sideheading">Hello</h1>
+        <svg height="15" width="15" xmlns="http://www.w3.org/2000/svg">
+          <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
+        </svg>
+      </div>
+      
+    </div>
     <div id="graph"></div>
   </div>
   

editor.js

@@ -153,6 +153,7 @@ 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.
+const sidePanel = document.getElementById('sidepanel');
 
 const edgeColourDefault = '#999999ff';
 const edgeColourSelected = '#000000ff';
@@ -234,7 +235,17 @@ function computeCurvatures() {
  * @param {*} item The node or edge to select.
  */
 function select(item) {
-  selection = item;
+  selection = selection === item ? null : item;
+  if (selection === item) {
+    sidePanel.style.display = 'block'
+    document.getElementById('sideheading').innerHTML = item.name;
+    var data = document.createElement('div');
+    var text = document.createTextNode(JSON.stringify(selection.stateData && selection.stateData || selection.actionData));
+    data.appendChild(text);
+    sidePanel.appendChild(data);
+  } else {
+    sidePanel.style.display = 'none'
+  }
   console.log(item);
   // TODO
 }