update index when adding/deleting nodes/states

editor.css

@@ -116,10 +116,14 @@ body {
   /* background-color: rgb(120, 120, 120); */
 }
 
-#search-container .search-button svg {
+#search-container .search-button .search-icon-lightmode {
   stroke: rgb(117, 117, 117);
 }
 
+#search-container .search-button .search-icon-darkmode {
+  stroke: rgb(138, 138, 138);
+}
+
 #search-results {
   width: 400px;
   overflow: hidden;
@@ -133,6 +137,7 @@ body {
 #search-result-list {
   overflow-y: auto;
   overflow-x: hidden;
+  padding: 15px;
 }
 
 #search-result-list div {

editor.html

@@ -129,9 +129,9 @@
         <div id="search-container">
           <input id="search-input" type="text" placeholder="Search" onclick="showSearchResults()" oninput="search(this.value)">
           <span class="search-button">
-            <svg height="18" width="18" xmlns="http://www.w3.org/2000/svg">
+            <svg id="search-icon" class="search-icon-lightmode" height="18" width="18" xmlns="http://www.w3.org/2000/svg">
               <circle cx="11" cy="7" r="6" stroke-width="2" fill="none" />
-              <polyline points="8,10 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
+              <polyline points="6,12 2,16" style="fill:none;stroke-width:2" stroke-linecap="round" />
             </svg>
           </span>
         </div>

editor.js

@@ -3,7 +3,6 @@ var darkMode = false;
 
 function toggleTheme() {
   darkMode = !darkMode;
-  console.log('dark mode', darkMode);
 
   var menus = [mainMenu, sidePanel, filePanel];
   Array.from(document.getElementsByClassName('menuitem')).forEach(item =>
@@ -23,6 +22,8 @@ function toggleTheme() {
     document.getElementById('sidecontentnode')
   ];
 
+  var searchIcon = document.getElementById('search-icon');
+
   if (darkMode) {
     menus.forEach(target => {
       target.classList.add('menu-darkmode');
@@ -32,6 +33,8 @@ function toggleTheme() {
       hint.classList.add('contenttype-darkmode');
       hint.classList.remove('contenttype-lightmode');
     });
+    searchIcon.classList.add('search-icon-darkmode');
+    searchIcon.classList.remove('search-icon-lightmode');
     wfGraph.backgroundColor('black');
   } else {
     menus.forEach(target => {
@@ -42,6 +45,8 @@ function toggleTheme() {
       hint.classList.add('contenttype-lightmode');
       hint.classList.remove('contenttype-darkmode');
     });
+    searchIcon.classList.add('search-icon-lightmode');
+    searchIcon.classList.remove('search-icon-darkmode');
     wfGraph.backgroundColor('white');
   }
 }
@@ -189,7 +194,8 @@ function search(text) {
       defineFocus(r, target);
     })
   }
-
+  searchResultList.style.maxHeight = parseFloat(searchResults.style.maxHeight) - searchOptions.offsetHeight - 60;
+  // console.log('maxh', searchResults.style.maxHeight - searchOptions.offsetHeight)
   stateResults  && format(workflow.states,  stateResults,  'States');
   actionResults && format(workflow.actions, actionResults, 'Edges');
   positionSubmenuBackdrop();
@@ -384,6 +390,7 @@ const contextMenuEd = document.getElementById('ctmenued'); //Click on edge
 const searchContainer  = document.getElementById('search-container');
 const searchResults    = document.getElementById('search-results');
 const searchResultList = document.getElementById('search-result-list');
+const searchOptions    = document.getElementById('search-options')
 // Counters for placeholder IDs of states/actions added via GUI
 var stateIdCounter  = 0;
 var actionIdCounter = 0;
@@ -458,6 +465,7 @@ function addState() {
   workflow.states.push(state);
   updateGraph();
   select(state);
+  nodeIndex.add(state.id, state.name);
 }
 
 /**
@@ -473,6 +481,7 @@ function connect(source, target) {
   workflow.actions.push(action);
   updateGraph();
   select(action);
+  actionIndex.add(action.id, action.name);
 }
 
 function markEdgeTo() {
@@ -546,6 +555,7 @@ function generatePanelContent(selection) {
  */
 function removeAction(action) {
   workflow.actions.splice(workflow.actions.indexOf(action), 1);
+  actionIndex.remove(action.id);
 }
 
 
@@ -560,6 +570,7 @@ function removeState(state) {
   workflow.states.splice(workflow.states.indexOf(state), 1);
   var abbreviation = state.stateData && state.stateData.abbreviation;
   abbreviation && stateAbbreviations.splice(stateAbbreviations.indexOf(abbreviation), 1);
+  nodeIndex.remove(state.id);
 }
 
 var selfLoops         = {};  // All edges whose targets equal their sources.