added focus button to side panel

editor.css

@@ -76,13 +76,20 @@ body {
   /* height: 40px; */
   width: 100%;
   border-radius: 10px;
-  border: 1px solid rgba(0, 0, 0, 0.123);
   padding-left: 38px;
   padding-right: 10px;
   outline: none;
   transition: all 100ms ease-out 50ms;
 }
 
+.menu-lightmode #search-container input {
+  border: 1px solid rgba(0, 0, 0, 0.123);
+}
+
+.menu-darkmode #search-container input {
+  border: 1px solid rgba(255, 255, 255, 0.123);
+}
+
 #search-container:hover input, #search-container input:active, #search-container input:focus {
   /* border: 2px solid rgb(117, 117, 117); */
   box-shadow: 0 0px 10px 0 rgba(0, 0, 0, 0.12);
@@ -127,6 +134,7 @@ body {
 #search-results {
   width: 400px;
   overflow: hidden;
+  padding-bottom: 20px;
 }
 
 #search-options {
@@ -137,7 +145,12 @@ body {
 #search-result-list {
   overflow-y: auto;
   overflow-x: hidden;
-  padding: 15px;
+  /* padding: 15px; */
+}
+
+#search-result-list > * {
+  padding-left: 15px;
+  padding-right: 15px;
 }
 
 #search-result-list div div {
@@ -267,6 +280,7 @@ body {
   text-align: center;
   font-size: 2em;
   font-style: normal;
+  margin-top: 40px;
 }
 
 #sidecontent {

editor.html

@@ -184,8 +184,9 @@
       </div>
       <div id="sidecontent"></div>
       <div id="sidebuttons">
-        <button type="submit">Save</button>
+        <button type="submit">Apply</button>
         <button type="reset" onclick="deselect()">Cancel</button>
+        <button type="submit" onclick="focusSelection()">Focus</button>
         <button type="submit" onclick="removeSelection()" style="position: absolute; right: 0px;">Delete</button>
       </div>
     </div>

editor.js

@@ -133,6 +133,19 @@ function openAboutMenu(menuitem) {
   openMenuItem(menuitem);
 }
 
+function focusSelection() {
+  var x = y = null;
+  if (selection.actionData) {
+    x = selection.source.x + (selection.target.x - selection.source.x) / 2;
+    y = selection.source.y + (selection.target.y - selection.source.y) / 2;
+  } else {
+    x = selection.x;
+    y = selection.y;
+  }
+  wfGraph.centerAt(x, y, 400);
+  wfGraph.zoom(5, 400);
+}
+
 function openSearchMenu(menuitem) {
   if (selectedMenuItem === menuitem) return;
   var val = document.getElementById('search-input').value;
@@ -161,20 +174,11 @@ function search(text) {
   var actionResults = searchActions ? actionIndex.search(text, searchStates ? 5 : 10) : null;
 
   function defineFocus(div, target) {
-    div.onclick = (_ => {
-      var x = y = null;
-      if (target.actionData) {
-        x = target.source.x + (target.target.x - target.source.x);
-        y = target.source.y + (target.target.y - target.source.y);
-      } else {
-        x = target.x;
-        y = target.y;
-      }
+    div.onclick = (_ =>  {
       document.getElementById('search-input').value = null;
       closeMenuItem();
-      wfGraph.centerAt(x, y, 400);
-      wfGraph.zoom(5, 400);
       select(target);
+      focusSelection();
     });      
   }
 
@@ -206,7 +210,7 @@ function search(text) {
       defineFocus(r, target);
     })
   }
-  searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight - 80;
+  searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight;
   // console.log('maxh', searchResults.style.maxHeight - searchOptions.offsetHeight)
   stateResults  && format(workflow.states,  stateResults,  'States');
   actionResults && format(workflow.actions, actionResults, 'Edges');