lib: add general curtain for escape and click off of menus, search, p…

…alette, etc. closes #48

lib/mod.ts

@@ -397,11 +397,15 @@ export async function setup(document: Document, target: HTMLElement, backend: Ba
       workspace.commands.executeCommand(binding.command, workspace.context);
       e.stopPropagation();
       e.preventDefault();
+      return;
     }
-  });
 
-  document.addEventListener("click", (e) => {
-    workspace.hideMenu();
+    // TODO: find a better way to do this?
+    if (e.key === "Escape") {
+      if (workspace.curtain && workspace.curtain.onclick) {
+        workspace.curtain.onclick(e);
+      }
+    }
   });
 
 

lib/ui/app.tsx

@@ -68,7 +68,16 @@ export const App: m.Component = {
             ))}
           </div>
         </div>
-
+
+        {workspace.curtain && 
+          <div onclick={workspace.curtain.onclick} style={{
+            zIndex: "10",
+            position: "absolute",
+            background: "black",
+            opacity: (workspace.curtain.visible)?"50%":"0%",
+            width: "100%",
+            height: "100%"
+          }}></div>}
         {workspace.menu && <Menu workspace={workspace} {...workspace.menu} />}
         {workspace.palette && <CommandPalette workspace={workspace} {...workspace.palette} />}
         {workspace.quickadd && <QuickAdd workspace={workspace} />}

lib/ui/menu.tsx

@@ -31,7 +31,8 @@ export const Menu: m.Component = {
   background: "white",
   filter: "drop-shadow(2px 2px 4px #5555)",
   fontSize: "14px",
-  minWidth: "200px"
+  minWidth: "200px",
+  zIndex: "20"
 })}>
   {items.filter(i => !i.when || i.when()).map(i => {
     let title = "";

lib/ui/palette.tsx

@@ -40,9 +40,6 @@ export const CommandPalette: m.Component = {
         }
         return false;
       }
-      if (e.key === "Escape") {
-        workspace.hidePalette();
-      }
     }
     const autocomplete = (e) => {
       state.filter = e.target.value;
@@ -59,7 +56,8 @@ export const CommandPalette: m.Component = {
         padding: "0.5rem",
         background: "white",
         fontSize: "14px",
-        minWidth: "400px"
+        minWidth: "400px",
+        zIndex: "20"
       }}>
         <div><input style={{width: "98%", outline: "0", border: "0"}} type="text" onkeydown={onkeydown} oninput={autocomplete} placeholder="Enter command..." /></div>
         <div class="commands" style={{

lib/ui/search.tsx

@@ -10,28 +10,17 @@ export const Search: m.Component = {
   view({attrs: {workspace}, state}) {
 
     state.query = (state.query === undefined) ? "" : state.query;
-
-
-    let results = [];
-    if (state.query) {
-      results = workspace.backend.index.search(state.query).map(id => {
-        let node = workspace.nodes.find(id);
-        if (!node) {
-          return undefined;
-        }
-        // if component value, get the parent
-        if (node.getValue()) {
-          node = node.getParent();
-          // parent might not actually exist
-          if (!node.raw) return;
-        }
-        return node;
-      }).filter(n => n !== undefined);
+    state.results = (state.results === undefined) ? [] : state.results;
+
+    const clear = () => {
+      state.query = "";
+      state.results = [];
+      workspace.curtain = null;
     }
 
     const open = (node) => {
       workspace.open(node);
-      state.query = "";
+      clear();
     }
 
     const onkeydown = (e) => {
@@ -41,50 +30,80 @@ export const Search: m.Component = {
           state.selected = 0;
           return;
         }
-        state.selected = mod(state.selected+1, results.length);
+        state.selected = mod(state.selected+1, state.results.length);
         return false;
       }
       if (e.key === "ArrowUp") {
         if (state.selected === undefined) {
           state.selected = 0;
         }
-        state.selected = mod(state.selected-1, results.length);
+        state.selected = mod(state.selected-1, state.results.length);
         return false;
       }
       if (e.key === "Enter") {
         if (state.selected !== undefined) {
-          open(results[state.selected]);
+          open(state.results[state.selected]);
         }
         return false;
       }
       if (e.key === "Escape") {
-        state.query = "";
+        clear();
       }
     }
+
     const autocomplete = (e) => {
       state.query = e.target.value;
       state.selected = 0;
+
+      if (state.query) {
+        state.results = workspace.backend.index.search(state.query).map(id => {
+          let node = workspace.nodes.find(id);
+          if (!node) {
+            return undefined;
+          }
+          // if component value, get the parent
+          if (node.getValue()) {
+            node = node.getParent();
+            // parent might not actually exist
+            if (!node.raw) return;
+          }
+          return node;
+        }).filter(n => n !== undefined);
+      } else {
+        state.results = [];
+      }
+
+      if (state.query && state.results.length > 0) {
+        workspace.curtain = {
+          visible: false,
+          onclick: () => clear()
+        };
+      } else {
+        workspace.curtain = null;
+      }
+
     }
+
     return (
       <div class="search" style={{position: "relative", display: "flex", flexGrow: "1", padding: "calc(var(--padding)/2)"}}>
         <div style={{
             width: "95%",
             padding: "calc(var(--padding)/2)",
             borderRadius: "0.25rem",
-            border: (results.length > 0)?"1px solid var(--dark)":"none",
+            border: (state.results.length > 0)?"1px solid var(--dark)":"none",
             position: "absolute",
-            zIndex: "100",
-            background: (results.length > 0)?"white":null
+            zIndex: (state.results.length > 0)?"100":"1",
+            background: (state.results.length > 0)?"white":null
           }}>
           <input type="text" placeholder="Search" value={state.query} onkeydown={onkeydown} oninput={autocomplete} style={{width: "99%", border: "0", outline: "0", background: "transparent", marginRight: "var(--padding)"}} />
-          {(results.length > 0)?
+          {(state.results.length > 0)?
             <div class="results" style={{
               marginTop: "0.25rem",
               overflowX: "hidden",
               overflowY: "auto",
               maxHeight: "400px"
             }}>
-              {results.map((result, idx) => <div onclick={() => open(result)} class={(state.selected===idx)?"selected":""}>{result.getName()}</div>)}
+              {state.results.map((result, idx) => <div onclick={() => open(result)} class={(state.selected===idx)?"selected":""}>{result.getName()}</div>)}
             </div>
           :null}
         </div>

lib/workspace.ts

@@ -50,6 +50,8 @@ export class Workspace {
   notice: any;
   palette: any;
   quickadd: any;
+  curtain: any;
+
   expanded: {[key: string]: {[key: string]: boolean}}; // [rootid][id]
 
   constructor(backend: Backend) {
@@ -239,21 +241,31 @@ export class Workspace {
       commands: cmds,
       align: align
     };
+    this.curtain = {
+      visible: false,
+      onclick: () => this.hideMenu()
+    }
     m.redraw();
   }
 
   hideMenu() {
     this.menu = null;
+    this.curtain = null;
     m.redraw();
   }
 
   showPalette(x: number, y: number, ctx: Context) {
     this.palette = {x, y, ctx: ctx};
+    this.curtain = {
+      visible: false,
+      onclick: () => this.hidePalette()
+    }
     m.redraw();
   }
 
   hidePalette() {
     this.palette = null;
+    this.curtain = null;
     m.redraw();
   }