overrode keyboard shortcuts

editor.css

@@ -76,7 +76,7 @@ body {
   /* height: 40px; */
   width: 100%;
   border-radius: 10px;
-  border: .5px solid rgba(0, 0, 0, 0.123);
+  border: 1px solid rgba(0, 0, 0, 0.123);
   padding-left: 38px;
   padding-right: 10px;
   outline: none;
@@ -140,22 +140,38 @@ body {
   padding: 15px;
 }
 
-#search-result-list div {
-  line-height: 2;
-  padding-top: 5px;
-  padding-bottom: 5px;
+#search-result-list div div {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   transition: all 100ms ease-out 50ms;
 }
 
-#search-result-list div:hover {
+#search-result-list .search-result-info {
+  font-size: .75em;
+  padding-top: 0px;
+  padding-bottom: 5px;
+}
+
+.menu-lightmode #search-result-list .search-result-info {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.menu-darkmode #search-result-list .search-result-info {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+#search-result-list div .search-result-head {
+  padding-bottom: 0px;
+  padding-top: 5px;
+}
+
+#search-result-list div:hover .search-result-head {
   font-weight: 500;
   color: rgb(75, 151, 151);
 }
 
-#search-result-list div:active {
+#search-result-list div:active .search-result-head {
   font-weight: 600;
 }
 

editor.html

@@ -283,4 +283,5 @@
   
   <script src="./workflow.js"></script>
   <script src="./editor.js"></script>
+  <script src="./keyboard.js"></script>
 </body>

editor.js

@@ -145,8 +145,8 @@ function openSearchMenu(menuitem) {
 document.getElementById('filepanel').style.opacity = 0;
 
 //Search
-const nodeIndex   = new FlexSearch.Index({tokenize: 'forward'});
-const actionIndex = new FlexSearch.Index({tokenize: 'forward'});
+var nodeIndex   = new FlexSearch.Index({tokenize: 'forward'});
+var actionIndex = new FlexSearch.Index({tokenize: 'forward'});
 // const searchDocument = new FlexSearch.Document();
 // const searchWorker = new FlexSearch.Worker();
 const soStates = document.getElementById('search-option-states');
@@ -188,13 +188,25 @@ function search(text) {
         if (stateOrEdge.id === result)
           target = stateOrEdge;
       });
+      if (!target) return;
       var r = document.createElement('div');
-      r.innerHTML = target.name;
+      var head = document.createElement('div');
+      head.innerText = target.name;
+      head.classList.add('search-result-head');
+      r.appendChild(head);
+      var info = document.createElement('div');
+      if (target.actionData)
+        info.innerText = target.source.name + ' → ' + target.target.name;
+      else
+        info.innerText = target.stateData.abbreviation;
+      info.setAttribute('title', info.innerText);
+      info.classList.add('search-result-info');
+      r.appendChild(info);
       searchResultList.appendChild(r);
       defineFocus(r, target);
     })
   }
-  searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight - 60;
+  searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight - 80;
   // console.log('maxh', searchResults.style.maxHeight - searchOptions.offsetHeight)
   stateResults  && format(workflow.states,  stateResults,  'States');
   actionResults && format(workflow.actions, actionResults, 'Edges');
@@ -279,6 +291,8 @@ function defineOnClick(item, url, title) {
       closeFileDisplay();
       for (var key in data) 
         workflow[key] = data[key];
+      nodeIndex   = new FlexSearch.Index({tokenize: 'forward'});
+      actionIndex = new FlexSearch.Index({tokenize: 'forward'});
       prepareWorkflow();
       updateGraph();
       wfGraph.centerAt(0, 0, 400);
@@ -400,7 +414,7 @@ var newStateCoords = {'x': 0, 'y': 0}; //Initial coordinates of the next new sta
 sidePanel.style.top = mainMenu.offsetHeight + 15;
 searchContainer.style.left = mainMenu.offsetWidth / 2 - searchContainer.offsetWidth / 2;
 searchResults.style.left = searchContainer.style.left;
-searchResults.style.maxHeight = 0.6 * window.innerHeight;
+searchResults.style.maxHeight = 0.8 * window.innerHeight;
 
 
 /**

keyboard.js

@@ -0,0 +1,25 @@
+
+
+document.addEventListener('keydown', e => {
+  console.log(e.ctrlKey, e.key);
+  if (e.key === 'Escape') {
+    closeContextMenus(contextMenuEd, contextMenuSt, contextMenuBg);
+    closeMenuItem();
+    closeFileDisplay();
+    deselect();
+    rightSelection = null;
+    document.getElementById('search-input').blur();
+  } else if (!e.ctrlKey) return;
+  switch (e.key) {
+    case 'f':
+      e.preventDefault();
+      document.getElementById('search-input').focus();
+      openSearchMenu(searchContainer.parentElement);
+      break;
+    case 'o':
+      e.preventDefault();
+      openFileDisplay();
+    default:
+      break;
+  }
+})