From 4788eddb018ce764c7152e4d39149ee7a7e3aa73 Mon Sep 17 00:00:00 2001 From: monikahedman 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 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 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 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 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 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 (
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) { - 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) => { - if (e.key === "Enter") { - this.submitSearch(); - } - } - - collectionRef = React.createRef(); - 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 ( -
-
-
- - - - - {/* */} - {/* */} -
- {this._resultsOpen ? ( -
- {this._results.map(result => )} -
- ) : null} -
- {this._open ? ( -
- -
- filter by collection, key, type of node -
- -
- ) : null} -
- ); - } -} \ 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(); + public inputRef = React.createRef(); 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 { - -- cgit v1.2.3-70-g09d2 From 5da62eef1dbf9509ac7bce73d927d835d98716d4 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik 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