diff options
| -rw-r--r-- | src/client/views/ContextMenu.tsx | 21 | ||||
| -rw-r--r-- | src/client/views/Main.tsx | 37 |
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>), |