From 4788eddb018ce764c7152e4d39149ee7a7e3aa73 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 17 Jul 2019 12:40:38 -0400
Subject: pushing

---
 src/client/views/ContextMenu.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index c163c56a0..e68e5c73f 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -27,12 +27,18 @@ export class ContextMenu extends React.Component {
     @observable private _width: number = 0;
     @observable private _height: number = 0;
 
+    @observable private _mouseDown: boolean = false;
+
     constructor(props: Readonly<{}>) {
         super(props);
 
         ContextMenu.Instance = this;
     }
 
+    componentDidMount = () => {
+
+    }
+
     @action
     clearItems() {
         this._items = [];
@@ -79,6 +85,8 @@ export class ContextMenu extends React.Component {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
 
+        console.log("opening?")
+
         this._pageX = x;
         this._pageY = y;
 
-- 
cgit v1.2.3-70-g09d2


From 1b6e2dbab9a3d06b1ae5999324c7bd15899b75e1 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 17 Jul 2019 12:51:56 -0400
Subject: changes

---
 src/client/views/ContextMenu.tsx | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index e68e5c73f..0a8c98ec9 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -36,7 +36,12 @@ export class ContextMenu extends React.Component {
     }
 
     componentDidMount = () => {
-
+        document.addEventListener("pointerdown", e => {
+            this._mouseDown = true;
+        });
+        document.addEventListener("pointerup", e => {
+            this._mouseDown = false;
+        })
     }
 
     @action
@@ -85,14 +90,20 @@ export class ContextMenu extends React.Component {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
 
-        console.log("opening?")
+        if (!this._mouseDown) {
+            this._pageX = x;
+            this._pageY = y;
+            this._searchString = "";
+            this._display = true;
+        }
 
-        this._pageX = x;
-        this._pageY = y;
 
-        this._searchString = "";
+        // this._pageX = x;
+        // this._pageY = y;
+        
+        // this._searchString = "";
 
-        this._display = true;
+        // this._display = true;
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 45d955f32f1896731bde03e885566026ae1d6d77 Mon Sep 17 00:00:00 2001
From: monikahedman <monikahedman@monikas-mbp.devices.brown.edu>
Date: Wed, 17 Jul 2019 13:13:39 -0400
Subject: contexrt menu mac fixed

---
 src/client/views/ContextMenu.tsx | 47 ++++++++++++++++++++++++----------------
 1 file changed, 28 insertions(+), 19 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 0a8c98ec9..0b14b68f6 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
-import { observable, action, computed } from "mobx";
+import { observable, action, computed, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss";
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -27,7 +27,9 @@ export class ContextMenu extends React.Component {
     @observable private _width: number = 0;
     @observable private _height: number = 0;
 
-    @observable private _mouseDown: boolean = false;
+    @observable private _mouseX: number = -1;
+    @observable private _mouseY: number = -1;
+    @observable private _shouldDisplay: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -35,12 +37,28 @@ export class ContextMenu extends React.Component {
         ContextMenu.Instance = this;
     }
 
+    @action
     componentDidMount = () => {
         document.addEventListener("pointerdown", e => {
-            this._mouseDown = true;
+            runInAction(() => {
+                this._mouseX = e.clientX;
+                this._mouseY = e.clientY;
+            });
         });
         document.addEventListener("pointerup", e => {
-            this._mouseDown = false;
+            let curX = e.clientX;
+            let curY = e.clientY;
+            if (this._mouseX !== curX || this._mouseY !== curY) {
+                runInAction(() => {
+                    this._shouldDisplay = false;
+                });
+            }
+
+            if (this._shouldDisplay) {
+                runInAction(() => {
+                    this._display = true;
+                });
+            }
         })
     }
 
@@ -86,30 +104,21 @@ export class ContextMenu extends React.Component {
     }
 
     @action
-    displayMenu(x: number, y: number) {
+    displayMenu = (x: number, y: number) => {
         //maxX and maxY will change if the UI/font size changes, but will work for any amount
         //of items added to the menu
 
-        if (!this._mouseDown) {
-            this._pageX = x;
-            this._pageY = y;
-            this._searchString = "";
-            this._display = true;
-        }
-
-
-        // this._pageX = x;
-        // this._pageY = y;
-        
-        // this._searchString = "";
-
-        // this._display = true;
+        this._pageX = x;
+        this._pageY = y;
+        this._searchString = "";
+        this._shouldDisplay = true;
     }
 
     @action
     closeMenu = () => {
         this.clearItems();
         this._display = false;
+        this._shouldDisplay = false;
     }
 
     @computed get filteredItems(): (OriginalMenuProps | string[])[] {
-- 
cgit v1.2.3-70-g09d2


From 6bf6cad2fd500f9bb5b527f6950373566f1d6810 Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 17 Jul 2019 13:38:47 -0400
Subject: mght work

---
 src/client/views/ContextMenu.tsx | 27 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 0b14b68f6..c97cbd076 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { ContextMenuItem, ContextMenuProps, OriginalMenuProps } from "./ContextMenuItem";
-import { observable, action, computed, runInAction } from "mobx";
+import { observable, action, computed, runInAction, IReactionDisposer, reaction } from "mobx";
 import { observer } from "mobx-react";
 import "./ContextMenu.scss";
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -31,6 +31,8 @@ export class ContextMenu extends React.Component {
     @observable private _mouseY: number = -1;
     @observable private _shouldDisplay: boolean = false;
 
+    private _reactionDisposer?: IReactionDisposer;
+
     constructor(props: Readonly<{}>) {
         super(props);
 
@@ -54,12 +56,23 @@ export class ContextMenu extends React.Component {
                 });
             }
 
-            if (this._shouldDisplay) {
-                runInAction(() => {
-                    this._display = true;
-                });
-            }
-        })
+            // if (this._shouldDisplay) {
+            //     runInAction(() => {
+            //         this._display = true;
+            //     });
+            // }
+        });
+
+        this._reactionDisposer = reaction(
+            () => this._shouldDisplay,
+            () => {
+                if (this._shouldDisplay) {
+                    runInAction(() => {
+                        this._display = true;
+                    });
+                }
+            },
+        );
     }
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 9d16c6d15809c7691e7f32be238a3b22cd0edcb5 Mon Sep 17 00:00:00 2001
From: monikahedman <monikahedman@monikas-mbp.devices.brown.edu>
Date: Wed, 17 Jul 2019 13:45:01 -0400
Subject: does this work

---
 src/client/views/ContextMenu.tsx | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index c97cbd076..1347d4197 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -30,6 +30,7 @@ export class ContextMenu extends React.Component {
     @observable private _mouseX: number = -1;
     @observable private _mouseY: number = -1;
     @observable private _shouldDisplay: boolean = false;
+    @observable private _mouseDown: boolean = false;
 
     private _reactionDisposer?: IReactionDisposer;
 
@@ -43,11 +44,15 @@ export class ContextMenu extends React.Component {
     componentDidMount = () => {
         document.addEventListener("pointerdown", e => {
             runInAction(() => {
+                this._mouseDown = true;
                 this._mouseX = e.clientX;
                 this._mouseY = e.clientY;
             });
         });
         document.addEventListener("pointerup", e => {
+            runInAction(() => {
+                this._mouseDown = false;
+            })
             let curX = e.clientX;
             let curY = e.clientY;
             if (this._mouseX !== curX || this._mouseY !== curY) {
@@ -56,17 +61,17 @@ export class ContextMenu extends React.Component {
                 });
             }
 
-            // if (this._shouldDisplay) {
-            //     runInAction(() => {
-            //         this._display = true;
-            //     });
-            // }
+            if (this._shouldDisplay) {
+                runInAction(() => {
+                    this._display = true;
+                });
+            }
         });
 
         this._reactionDisposer = reaction(
             () => this._shouldDisplay,
             () => {
-                if (this._shouldDisplay) {
+                if (this._shouldDisplay && !this._mouseDown) {
                     runInAction(() => {
                         this._display = true;
                     });
-- 
cgit v1.2.3-70-g09d2


From b78da60d91e37889c30b4428a88c838a9dafe5ca Mon Sep 17 00:00:00 2001
From: monikahedman <monika_hedman@brown.edu>
Date: Wed, 17 Jul 2019 15:02:33 -0400
Subject: search auto focuses

---
 src/client/views/ContextMenu.tsx      |   2 +-
 src/client/views/MainView.tsx         |   5 +-
 src/client/views/SearchBox.tsx        | 182 ----------------------------------
 src/client/views/search/SearchBox.tsx |  15 ++-
 4 files changed, 18 insertions(+), 186 deletions(-)
 delete mode 100644 src/client/views/SearchBox.tsx

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 1347d4197..60658b7f0 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -52,7 +52,7 @@ export class ContextMenu extends React.Component {
         document.addEventListener("pointerup", e => {
             runInAction(() => {
                 this._mouseDown = false;
-            })
+            });
             let curX = e.clientX;
             let curY = e.clientY;
             if (this._mouseX !== curX || this._mouseY !== curY) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index ce7369220..5cb1d06cb 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,6 +39,8 @@ import { PreviewCursor } from './PreviewCursor';
 import { FilterBox } from './search/FilterBox';
 import { CollectionTreeView } from './collections/CollectionTreeView';
 import { ClientUtils } from '../util/ClientUtils';
+import { SearchBox } from './search/SearchBox';
+
 
 @observer
 export class MainView extends React.Component {
@@ -439,12 +441,11 @@ export class MainView extends React.Component {
     }
 
     @observable isSearchVisible = false;
-    @action
+    @action.bound
     toggleSearch = () => {
         this.isSearchVisible = !this.isSearchVisible;
     }
 
-
     render() {
         return (
             <div id="main-div">
diff --git a/src/client/views/SearchBox.tsx b/src/client/views/SearchBox.tsx
deleted file mode 100644
index 1b9be841f..000000000
--- a/src/client/views/SearchBox.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faObjectGroup, faSearch } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { action, observable, runInAction } from 'mobx';
-import { observer } from 'mobx-react';
-import * as React from 'react';
-import * as rp from 'request-promise';
-import { Doc } from '../../new_fields/Doc';
-import { Id } from '../../new_fields/FieldSymbols';
-import { NumCast } from '../../new_fields/Types';
-import { DocServer } from '../DocServer';
-import { Docs } from '../documents/Documents';
-import { SetupDrag } from '../util/DragManager';
-import { SearchItem } from './search/SearchItem';
-import "./SearchBox.scss";
-
-library.add(faSearch);
-library.add(faObjectGroup);
-
-@observer
-export class SearchBox extends React.Component {
-    @observable
-    searchString: string = "";
-
-    @observable private _open: boolean = false;
-    @observable private _resultsOpen: boolean = false;
-
-    @observable
-    private _results: Doc[] = [];
-
-    @action.bound
-    onChange(e: React.ChangeEvent<HTMLInputElement>) {
-        this.searchString = e.target.value;
-    }
-
-    @action
-    submitSearch = async () => {
-        let query = this.searchString;
-        //gets json result into a list of documents that can be used
-        const results = await this.getResults(query);
-
-        runInAction(() => {
-            this._resultsOpen = true;
-            this._results = results;
-        });
-    }
-
-    @action
-    getResults = async (query: string) => {
-        let response = await rp.get(DocServer.prepend('/search'), {
-            qs: {
-                query
-            }
-        });
-        let res: string[] = JSON.parse(response);
-        const fields = await DocServer.GetRefFields(res);
-        const docs: Doc[] = [];
-        for (const id of res) {
-            const field = fields[id];
-            if (field instanceof Doc) {
-                docs.push(field);
-            }
-        }
-        return docs;
-    }
-
-    @action
-    handleClickFilter = (e: Event): void => {
-        var className = (e.target as any).className;
-        var id = (e.target as any).id;
-        if (className !== "filter-button" && className !== "filter-form") {
-            this._open = false;
-        }
-
-    }
-
-    @action
-    handleClickResults = (e: Event): void => {
-        var className = (e.target as any).className;
-        var id = (e.target as any).id;
-        if (id !== "result") {
-            this._resultsOpen = false;
-            this._results = [];
-        }
-
-    }
-
-    componentWillMount() {
-        document.addEventListener('mousedown', this.handleClickFilter, false);
-        document.addEventListener('mousedown', this.handleClickResults, false);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('mousedown', this.handleClickFilter, false);
-        document.removeEventListener('mousedown', this.handleClickResults, false);
-    }
-
-    @action
-    toggleFilterDisplay = () => {
-        this._open = !this._open;
-    }
-
-    enter = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === "Enter") {
-            this.submitSearch();
-        }
-    }
-
-    collectionRef = React.createRef<HTMLSpanElement>();
-    startDragCollection = async () => {
-        const results = await this.getResults(this.searchString);
-        const docs = results.map(doc => {
-            const isProto = Doc.GetT(doc, "isPrototype", "boolean", true);
-            if (isProto) {
-                return Doc.MakeDelegate(doc);
-            } else {
-                return Doc.MakeAlias(doc);
-            }
-        });
-        let x = 0;
-        let y = 0;
-        for (const doc of docs) {
-            doc.x = x;
-            doc.y = y;
-            const size = 200;
-            const aspect = NumCast(doc.nativeHeight) / NumCast(doc.nativeWidth, 1);
-            if (aspect > 1) {
-                doc.height = size;
-                doc.width = size / aspect;
-            } else if (aspect > 0) {
-                doc.width = size;
-                doc.height = size * aspect;
-            } else {
-                doc.width = size;
-                doc.height = size;
-            }
-            doc.zoomBasis = 1;
-            x += 250;
-            if (x > 1000) {
-                x = 0;
-                y += 300;
-            }
-        }
-        return Docs.Create.FreeformDocument(docs, { width: 400, height: 400, panX: 175, panY: 175, backgroundColor: "grey", title: `Search Docs: "${this.searchString}"` });
-    }
-
-    // Useful queries:
-    // Delegates of a document: {!join from=id to=proto_i}id:{protoId}
-    // Documents in a collection: {!join from=data_l to=id}id:{collectionProtoId}
-    render() {
-        return (
-            <div>
-                <div className="searchBox-container">
-                    <div className="searchBox-bar">
-                        <span onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef}>
-                            <FontAwesomeIcon icon="object-group" className="searchBox-barChild" size="lg" />
-                        </span>
-                        <input value={this.searchString} onChange={this.onChange} type="text" placeholder="Search..."
-                            className="searchBox-barChild searchBox-input" onKeyPress={this.enter}
-                            style={{ width: this._resultsOpen ? "500px" : undefined }} />
-                        {/* <button className="searchBox-barChild searchBox-filter" onClick={this.toggleFilterDisplay}>Filter</button> */}
-                        {/* <FontAwesomeIcon icon="search" size="lg" className="searchBox-barChild searchBox-submit" /> */}
-                    </div>
-                    {this._resultsOpen ? (
-                        <div className="searchBox-results">
-                            {this._results.map(result => <SearchItem doc={result} key={result[Id]} highlighting={[]} />)}
-                        </div>
-                    ) : null}
-                </div>
-                {this._open ? (
-                    <div className="filter-form" id="filter" style={this._open ? { display: "flex" } : { display: "none" }}>
-                        <div className="filter-form" id="header">Filter Search Results</div>
-                        <div className="filter-form" id="option">
-                            filter by collection, key, type of node
-                    </div>
-
-                    </div>
-                ) : null}
-            </div>
-        );
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 8399605fb..b2a44f448 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -15,6 +15,9 @@ import { Id } from '../../../new_fields/FieldSymbols';
 import { SearchUtil } from '../../util/SearchUtil';
 import { RouteStore } from '../../../server/RouteStore';
 import { FilterBox } from './FilterBox';
+import { ReadStream } from 'fs';
+import * as $ from 'jquery';
+
 
 
 @observer
@@ -29,6 +32,7 @@ export class SearchBox extends React.Component {
     @observable private _visibleElements: JSX.Element[] = [];
 
     private resultsRef = React.createRef<HTMLDivElement>();
+    public inputRef = React.createRef<HTMLInputElement>();
 
     private _isSearch: ("search" | "placeholder" | undefined)[] = [];
     private _numTotalResults = -1;
@@ -46,6 +50,15 @@ export class SearchBox extends React.Component {
         this.resultsScrolled = this.resultsScrolled.bind(this);
     }
 
+    componentDidMount = () => {
+        if (this.inputRef.current) {
+            this.inputRef.current.focus();
+            runInAction(() => {
+                this._searchbarOpen = true;
+            });
+        }
+    }
+
     @action
     getViews = async (doc: Doc) => {
         const results = await SearchUtil.GetViewsOfDocument(doc);
@@ -321,7 +334,7 @@ export class SearchBox extends React.Component {
                     <span className="searchBox-barChild searchBox-collection" onPointerDown={SetupDrag(this.collectionRef, this.startDragCollection)} ref={this.collectionRef} title="Drag Results as Collection">
                         <FontAwesomeIcon icon="object-group" size="lg" />
                     </span>
-                    <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..."
+                    <input value={this._searchString} onChange={this.onChange} type="text" placeholder="Search..." id="search-input" ref={this.inputRef}
                         className="searchBox-barChild searchBox-input" onPointerDown={this.openSearch} onKeyPress={this.enter}
                         style={{ width: this._searchbarOpen ? "500px" : "100px" }} />
                     <button className="searchBox-barChild searchBox-submit" onClick={this.submitSearch} onPointerDown={FilterBox.Instance.stopProp}>Submit</button>
-- 
cgit v1.2.3-70-g09d2


From 5da62eef1dbf9509ac7bce73d927d835d98716d4 Mon Sep 17 00:00:00 2001
From: Bob Zeleznik <zzzman@gmail.com>
Date: Thu, 15 Aug 2019 22:32:15 -0400
Subject: cleaned up on closing contextMenu

---
 src/client/views/ContextMenu.tsx | 58 ++++++++++++++++++----------------------
 1 file changed, 26 insertions(+), 32 deletions(-)

(limited to 'src/client/views/ContextMenu.tsx')

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index 39192c382..760736501 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -41,42 +41,36 @@ export class ContextMenu extends React.Component {
     }
 
     @action
-    componentDidMount = () => {
-        document.addEventListener("pointerdown", e => {
-            runInAction(() => {
-                this._mouseDown = true;
-                this._mouseX = e.clientX;
-                this._mouseY = e.clientY;
-            });
-        });
-        document.addEventListener("pointerup", e => {
-            runInAction(() => {
-                this._mouseDown = false;
-            });
-            let curX = e.clientX;
-            let curY = e.clientY;
-            if (this._mouseX !== curX || this._mouseY !== curY) {
-                runInAction(() => {
-                    this._shouldDisplay = false;
-                });
-            }
+    onPointerDown = (e: PointerEvent) => {
+        this._mouseDown = true;
+        this._mouseX = e.clientX;
+        this._mouseY = e.clientY;
+    }
+    @action
+    onPointerUp = (e: PointerEvent) => {
+        this._mouseDown = false;
+        let curX = e.clientX;
+        let curY = e.clientY;
+        if (this._mouseX !== curX || this._mouseY !== curY) {
+            this._shouldDisplay = false;
+        }
 
-            if (this._shouldDisplay) {
-                runInAction(() => {
-                    this._display = true;
-                });
-            }
-        });
+        this._shouldDisplay && (this._display = true);
+    }
+    componentWillUnmount() {
+        document.removeEventListener("pointerdown", this.onPointerDown);
+        document.removeEventListener("pointerup", this.onPointerUp);
+        this._reactionDisposer && this._reactionDisposer();
+    }
+
+    @action
+    componentDidMount = () => {
+        document.addEventListener("pointerdown", this.onPointerDown);
+        document.addEventListener("pointerup", this.onPointerUp);
 
         this._reactionDisposer = reaction(
             () => this._shouldDisplay,
-            () => {
-                if (this._shouldDisplay && !this._mouseDown) {
-                    runInAction(() => {
-                        this._display = true;
-                    });
-                }
-            },
+            () => this._shouldDisplay && !this._mouseDown && runInAction(() => this._display = true)
         );
     }
 
-- 
cgit v1.2.3-70-g09d2

