add button is now a context menu

2 files changed, 31 insertions, 27 deletions

diff --git a/src/client/views/ContextMenu.tsx b/src/client/views/ContextMenu.tsx
index fcb934860..d68dc6e66 100644
--- a/src/client/views/ContextMenu.tsx
+++ b/src/client/views/ContextMenu.tsx
@@ -13,6 +13,8 @@ export class ContextMenu extends React.Component {
     @observable private _pageY: number = 0;
     @observable private _display: string = "none";
     @observable private _searchString: string = "";
+    // afaik displaymenu can be called before all the items are added to the menu, so can't determine in displayMenu what the height of the menu will be
+    @observable private _yRelativeToTop: boolean = true;
 
 
     private ref: React.RefObject<HTMLDivElement>;
@@ -45,7 +47,10 @@ export class ContextMenu extends React.Component {
     @action
     displayMenu(x: number, y: number) {
         this._pageX = x
-        this._pageY = y
+        this._pageY = window.innerHeight - y >= 100 ? y : window.innerHeight - y;
+
+        // y pos absolute to top only when there's enough space
+        this._yRelativeToTop = window.innerHeight - y >= 100;
 
         this._searchString = "";
 
@@ -54,8 +59,13 @@ export class ContextMenu extends React.Component {
 
     intersects = (x: number, y: number): boolean => {
         if (this.ref.current && this._display !== "none") {
-            if (x >= this._pageX && x <= this._pageX + this.ref.current.getBoundingClientRect().width) {
-                if (y >= this._pageY && y <= this._pageY + this.ref.current.getBoundingClientRect().height) {
+            let menuSize = { width: this.ref.current.getBoundingClientRect().width, height: this.ref.current.getBoundingClientRect().height };
+
+            let upperLeft = { x: this._pageX, y: this._yRelativeToTop ? this._pageY : window.innerHeight - (this._pageY + menuSize.height) };
+            let bottomRight = { x: this._pageX + menuSize.width, y: this._yRelativeToTop ? this._pageY + menuSize.height : window.innerHeight - this._pageY };
+
+            if (x >= upperLeft.x && x <= bottomRight.x) {
+                if (y >= upperLeft.y && y <= bottomRight.y) {
                     return true;
                 }
             }
@@ -64,8 +74,11 @@ export class ContextMenu extends React.Component {
     }
 
     render() {
+        let style = this._yRelativeToTop ? { left: this._pageX, top: this._pageY, display: this._display } :
+            { left: this._pageX, bottom: this._pageY, display: this._display };
+
         return (
-            <div className="contextMenu-cont" style={{ left: this._pageX, top: this._pageY, display: this._display }} ref={this.ref}>
+            <div className="contextMenu-cont" style={style} ref={this.ref}>
                 <input className="contextMenu-item" type="text" placeholder="Search . . ." value={this._searchString} onChange={this.onChange}></input>
                 {this._items.filter(prop => {
                     return prop.description.toLowerCase().indexOf(this._searchString.toLowerCase()) !== -1;
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index ca3bb76d2..369e6ae66 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -52,11 +52,6 @@ Documents.initProtos(mainDocId, (res?: Document) => {
         }, 0);
     }
 
-
-    let specificContextMenu = (e: React.MouseEvent): void => {
-        ContextMenu.Instance.addItem({ description: "Freeform", event: () => console.log("dsjflkaj") });
-    }
-
     let imgurl = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg";
     let pdfurl = "http://www.adobe.com/support/products/enterprise/knowledgecenter/media/c4611_sample_explain.pdf"
     let weburl = "https://cs.brown.edu/courses/cs166/";
@@ -68,6 +63,16 @@ Documents.initProtos(mainDocId, (res?: Document) => {
     let addImageNode = action(() => Documents.ImageDocument(imgurl, { width: 200, height: 200, title: "an image of a cat" }));
     let addWebNode = action(() => Documents.WebDocument(weburl, { width: 200, height: 200, title: "a sample web page" }));
 
+    let addNodesContextMenu = (e: React.MouseEvent): void => {
+        ContextMenu.Instance.displayMenu(e.pageX, e.pageY);
+        ContextMenu.Instance.addItem({ description: "Textbox", event: addClick(addTextNode) });
+        ContextMenu.Instance.addItem({ description: "Image", event: addClick(addImageNode) });
+        ContextMenu.Instance.addItem({ description: "PDF", event: addClick(addPDFNode) });
+        ContextMenu.Instance.addItem({ description: "Website", event: addClick(addWebNode) });
+        ContextMenu.Instance.addItem({ description: "Collection", event: addClick(addColNode) });
+        ContextMenu.Instance.addItem({ description: "Schema", event: addClick(addSchemaNode) });
+    }
+
     let addClick = (creator: () => Document) => action(() =>
         mainfreeform.GetList<Document>(KeyStore.Data, []).push(creator())
     );
@@ -93,24 +98,10 @@ Documents.initProtos(mainDocId, (res?: Document) => {
             <DocumentDecorations />
             <ContextMenu />
             <button className="clear-db-button" onClick={clearDatabase}>Clear Database</button>
-            <button className="add-button" onClick={specificContextMenu}>+</button>
-            <ul>
-                <li><div className="main-buttonDiv" ref={imgRef} >
-                    <button onPointerDown={setupDrag(imgRef, addImageNode)} onClick={addClick(addImageNode)}>Add Image</button></div></li>
-                <li><div className="main-buttonDiv" ref={webRef} >
-                    <button onPointerDown={setupDrag(webRef, addWebNode)} onClick={addClick(addWebNode)}>Add Web</button></div></li>
-                <li><div className="main-buttonDiv" ref={textRef}>
-                    <button onPointerDown={setupDrag(textRef, addTextNode)} onClick={addClick(addTextNode)}>Add Text</button></div></li>
-                <li><div className="main-buttonDiv" ref={colRef}>
-                    <button onPointerDown={setupDrag(colRef, addColNode)} onClick={addClick(addColNode)}>Add Collection</button></div></li>
-                <li><div className="main-buttonDiv" ref={schemaRef}>
-                    <button onPointerDown={setupDrag(schemaRef, addSchemaNode)} onClick={addClick(addSchemaNode)}>Add Schema</button></div></li>
-                <li></li>
-                <li><div className="main-buttonDiv" ref={pdfRef}>
-                    <button onPointerDown={setupDrag(pdfRef, addPDFNode)} onClick={addClick(addPDFNode)}>Add PDF</button></div></li>
-                <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
-                <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
-            </ul>
+            <button className="add-button" onClick={addNodesContextMenu}>+</button>
+
+            <button className="main-undoButtons" style={{ bottom: '25px' }} onClick={() => UndoManager.Undo()}>Undo</button>
+            <button className="main-undoButtons" style={{ bottom: '0px' }} onClick={() => UndoManager.Redo()}>Redo</button>
 
             <InkingControl />
         </div>),