From 1bbbb660e8f1f5e0165e4ab6d3d4ac1340cb2e23 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 8 Apr 2020 23:23:52 -0700 Subject: menu no longer buried under search resuslts, filter booleans now passed onto new search docs, and minor ui tweaks --- src/client/views/nodes/QueryBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 7016b4f04..419768719 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -28,7 +28,7 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - + ; } } \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 5cad16a30c983690f5a2b9c14fa59779df933df3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 14 Apr 2020 22:14:47 -0700 Subject: adding linear doc wrapper to docs in seaarch menu --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/SearchDocBox.tsx | 432 ---------------------------------- src/client/views/nodes/QueryBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 97 +++++++- 4 files changed, 95 insertions(+), 438 deletions(-) delete mode 100644 src/client/views/SearchDocBox.tsx (limited to 'src/client/views/nodes') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index 5fee47e8f..657969121 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -81262 +5763 diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx deleted file mode 100644 index cd9666af8..000000000 --- a/src/client/views/SearchDocBox.tsx +++ /dev/null @@ -1,432 +0,0 @@ -import { library } from "@fortawesome/fontawesome-svg-core"; -import { faBullseye, faLink } from "@fortawesome/free-solid-svg-icons"; -import { action, computed, observable, runInAction } from "mobx"; -import { observer } from "mobx-react"; -//import "./SearchBoxDoc.scss"; -import { Doc, DocListCast } from "../../new_fields/Doc"; -import { Id } from "../../new_fields/FieldSymbols"; -import { BoolCast, Cast, NumCast, StrCast } from "../../new_fields/Types"; -import { returnFalse } from "../../Utils"; -import { Docs } from "../documents/Documents"; -import { SearchUtil } from "../util/SearchUtil"; -import { EditableView } from "./EditableView"; -import { ContentFittingDocumentView } from "./nodes/ContentFittingDocumentView"; -import { FieldView, FieldViewProps } from "./nodes/FieldView"; -import { FilterBox } from "./search/FilterBox"; -import { SearchItem } from "./search/SearchItem"; -import React = require("react"); - -export interface RecProps { - documents: { preview: Doc, similarity: number }[]; - node: Doc; - -} - -library.add(faBullseye, faLink); -export const keyPlaceholder = "Query"; - -@observer -export class SearchDocBox extends React.Component { - - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchDocBox, fieldKey); } - - // @observable private _display: boolean = false; - @observable private _pageX: number = 0; - @observable private _pageY: number = 0; - @observable private _width: number = 0; - @observable private _height: number = 0; - @observable.shallow private _docViews: JSX.Element[] = []; - // @observable private _documents: { preview: Doc, score: number }[] = []; - private previewDocs: Doc[] = []; - - constructor(props: FieldViewProps) { - super(props); - this.editingMetadata = this.editingMetadata || false; - //SearchBox.Instance = this; - this.resultsScrolled = this.resultsScrolled.bind(this); - } - - - @computed - private get editingMetadata() { - return BoolCast(this.props.Document.editingMetadata); - } - - private set editingMetadata(value: boolean) { - this.props.Document.editingMetadata = value; - } - - static readonly buffer = 20; - - componentDidMount() { - runInAction(() => { - console.log("didit" - ); - this.query = StrCast(this.props.Document.searchText); - this.content = (Docs.Create.TreeDocument(DocListCast(Doc.GetProto(this.props.Document).data), { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query })); - - }); - if (this.inputRef.current) { - this.inputRef.current.focus(); - runInAction(() => { - this._searchbarOpen = true; - }); - } - } - - @observable - private content: Doc | undefined; - - @action - updateKey = async (newKey: string) => { - this.query = newKey; - if (newKey.length > 1) { - let newdocs = await this.getAllResults(this.query); - let things = newdocs.docs - console.log(things); - console.log(this.content); - runInAction(() => { - this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }); - }); - console.log(this.content); - } - - - //this.keyRef.current && this.keyRef.current.setIsFocused(false); - //this.query.length === 0 && (this.query = keyPlaceholder); - return true; - } - - @computed - public get query() { - return StrCast(this.props.Document.query); - } - - public set query(value: string) { - this.props.Document.query = value; - } - - @observable private _searchString: string = ""; - @observable private _resultsOpen: boolean = false; - @observable private _searchbarOpen: boolean = false; - @observable private _results: [Doc, string[], string[]][] = []; - private _resultsSet = new Map(); - @observable private _openNoResults: boolean = false; - @observable private _visibleElements: JSX.Element[] = []; - - private resultsRef = React.createRef(); - public inputRef = React.createRef(); - - private _isSearch: ("search" | "placeholder" | undefined)[] = []; - private _numTotalResults = -1; - private _endIndex = -1; - - - private _maxSearchIndex: number = 0; - private _curRequest?: Promise = undefined; - - @action - getViews = async (doc: Doc) => { - const results = await SearchUtil.GetViewsOfDocument(doc); - let toReturn: Doc[] = []; - await runInAction(() => { - toReturn = results; - }); - return toReturn; - } - - @action.bound - onChange(e: React.ChangeEvent) { - this._searchString = e.target.value; - - this._openNoResults = false; - this._results = []; - this._resultsSet.clear(); - this._visibleElements = []; - this._numTotalResults = -1; - this._endIndex = -1; - this._curRequest = undefined; - this._maxSearchIndex = 0; - } - - enter = async (e: React.KeyboardEvent) => { - console.log(e.key); - if (e.key === "Enter") { - let newdocs = await this.getAllResults(this.query) - let things = newdocs.docs - console.log(things); - this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs: "Results"` }); - - } - } - - - @action - submitSearch = async () => { - let query = this._searchString; - query = FilterBox.Instance.getFinalQuery(query); - this._results = []; - this._resultsSet.clear(); - this._isSearch = []; - this._visibleElements = []; - FilterBox.Instance.closeFilter(); - - //if there is no query there should be no result - if (query === "") { - return; - } - else { - this._endIndex = 12; - this._maxSearchIndex = 0; - this._numTotalResults = -1; - await this.getResults(query); - } - - runInAction(() => { - this._resultsOpen = true; - this._searchbarOpen = true; - this._openNoResults = true; - this.resultsScrolled(); - }); - } - - getAllResults = async (query: string) => { - return SearchUtil.Search(query, true, { fq: this.filterQuery, start: 0, rows: 10000000 }); - } - - private get filterQuery() { - const types = FilterBox.Instance.filterTypes; - const includeDeleted = FilterBox.Instance.getDataStatus(); - return "NOT baseProto_b:true" + (includeDeleted ? "" : " AND NOT deleted_b:true") + (types ? ` AND (${types.map(type => `({!join from=id to=proto_i}type_t:"${type}" AND NOT type_t:*) OR type_t:"${type}" OR type_t:"extension"`).join(" ")})` : ""); - } - - - private NumResults = 25; - private lockPromise?: Promise; - getResults = async (query: string) => { - if (this.lockPromise) { - await this.lockPromise; - } - this.lockPromise = new Promise(async res => { - while (this._results.length <= this._endIndex && (this._numTotalResults === -1 || this._maxSearchIndex < this._numTotalResults)) { - this._curRequest = SearchUtil.Search(query, true, { fq: this.filterQuery, start: this._maxSearchIndex, rows: this.NumResults, hl: true, "hl.fl": "*" }).then(action(async (res: SearchUtil.DocSearchResult) => { - - // happens at the beginning - if (res.numFound !== this._numTotalResults && this._numTotalResults === -1) { - this._numTotalResults = res.numFound; - } - - const highlighting = res.highlighting || {}; - const highlightList = res.docs.map(doc => highlighting[doc[Id]]); - const lines = new Map(); - res.docs.map((doc, i) => lines.set(doc[Id], res.lines[i])); - const docs = await Promise.all(res.docs.map(async doc => (await Cast(doc.extendsDoc, Doc)) || doc)); - const highlights: typeof res.highlighting = {}; - docs.forEach((doc, index) => highlights[doc[Id]] = highlightList[index]); - const filteredDocs = FilterBox.Instance.filterDocsByType(docs); - runInAction(() => { - // this._results.push(...filteredDocs); - filteredDocs.forEach(doc => { - const index = this._resultsSet.get(doc); - const highlight = highlights[doc[Id]]; - const line = lines.get(doc[Id]) || []; - const hlights = highlight ? Object.keys(highlight).map(key => key.substring(0, key.length - 2)) : []; - if (index === undefined) { - this._resultsSet.set(doc, this._results.length); - this._results.push([doc, hlights, line]); - } else { - this._results[index][1].push(...hlights); - this._results[index][2].push(...line); - } - }); - }); - - this._curRequest = undefined; - })); - this._maxSearchIndex += this.NumResults; - - await this._curRequest; - } - this.resultsScrolled(); - res(); - }); - return this.lockPromise; - } - - collectionRef = React.createRef(); - startDragCollection = async () => { - const res = await this.getAllResults(FilterBox.Instance.getFinalQuery(this._searchString)); - const filtered = FilterBox.Instance.filterDocsByType(res.docs); - // console.log(this._results) - const docs = filtered.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.map(d => Doc.Layout(d))) { - 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; - } - x += 250; - if (x > 1000) { - x = 0; - y += 300; - } - } - //return Docs.Create.TreeDocument(docs, { _width: 200, _height: 400, backgroundColor: "grey", title: `Search Docs: "${this._searchString}"` }); - return Docs.Create.QueryDocument(docs, { _width: 200, _height: 400, searchText: this._searchString, title: `Query Docs: "${this._searchString}"` }); - } - - @action.bound - openSearch(e: React.SyntheticEvent) { - e.stopPropagation(); - this._openNoResults = false; - FilterBox.Instance.closeFilter(); - this._resultsOpen = true; - this._searchbarOpen = true; - FilterBox.Instance._pointerTime = e.timeStamp; - } - - @action.bound - closeSearch = () => { - FilterBox.Instance.closeFilter(); - this.closeResults(); - this._searchbarOpen = false; - } - - @action.bound - closeResults() { - this._resultsOpen = false; - this._results = []; - this._resultsSet.clear(); - this._visibleElements = []; - this._numTotalResults = -1; - this._endIndex = -1; - this._curRequest = undefined; - } - - @action - resultsScrolled = (e?: React.UIEvent) => { - if (!this.resultsRef.current) return; - const scrollY = e ? e.currentTarget.scrollTop : this.resultsRef.current ? this.resultsRef.current.scrollTop : 0; - const itemHght = 53; - const startIndex = Math.floor(Math.max(0, scrollY / itemHght)); - const endIndex = Math.ceil(Math.min(this._numTotalResults - 1, startIndex + (this.resultsRef.current.getBoundingClientRect().height / itemHght))); - - this._endIndex = endIndex === -1 ? 12 : endIndex; - - if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { - this._visibleElements = [
No Search Results
]; - return; - } - - if (this._numTotalResults <= this._maxSearchIndex) { - this._numTotalResults = this._results.length; - } - - // only hit right at the beginning - // visibleElements is all of the elements (even the ones you can't see) - else if (this._visibleElements.length !== this._numTotalResults) { - // undefined until a searchitem is put in there - this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders - this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - } - - for (let i = 0; i < this._numTotalResults; i++) { - //if the index is out of the window then put a placeholder in - //should ones that have already been found get set to placeholders? - if (i < startIndex || i > endIndex) { - if (this._isSearch[i] !== "placeholder") { - this._isSearch[i] = "placeholder"; - this._visibleElements[i] =
Loading...
; - } - } - else { - if (this._isSearch[i] !== "search") { - let result: [Doc, string[], string[]] | undefined = undefined; - if (i >= this._results.length) { - this.getResults(this._searchString); - if (i < this._results.length) result = this._results[i]; - if (result) { - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - } - else { - result = this._results[i]; - if (result) { - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - this._visibleElements[i] = ; - this._isSearch[i] = "search"; - } - } - } - } - } - if (this._maxSearchIndex >= this._numTotalResults) { - this._visibleElements.length = this._results.length; - this._isSearch.length = this._results.length; - } - } - - @computed - get resFull() { return this._numTotalResults <= 8; } - - @computed - get resultHeight() { return this._numTotalResults * 70; } - - render() { - const isEditing = this.editingMetadata; - return ( -
- - -
{ this.editingMetadata = !this.editingMetadata })} - /> -
- ""} - /> -
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 419768719..1b3f6280a 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -28,7 +28,7 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - +
; } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index bc77bff2e..f23525bdb 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -8,9 +8,9 @@ import * as rp from 'request-promise'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { Cast, NumCast, StrCast } from '../../../new_fields/Types'; -import { Utils } from '../../../Utils'; -import { Docs } from '../../documents/Documents'; -import { SetupDrag } from '../../util/DragManager'; +import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne } from '../../../Utils'; +import { Docs, DocumentOptions } from '../../documents/Documents'; +import { SetupDrag, DragManager } from '../../util/DragManager'; import { SearchUtil } from '../../util/SearchUtil'; import "./SearchBox.scss"; import { SearchItem } from './SearchItem'; @@ -20,11 +20,20 @@ import { DocumentType } from "../../documents/DocumentTypes"; import { DocumentView } from '../nodes/DocumentView'; import { SelectionManager } from '../../util/SelectionManager'; import { FilterQuery } from 'mongodb'; +import { CollectionLinearView } from '../collections/CollectionLinearView'; +import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; +import { CollectionDockingView } from '../collections/CollectionDockingView'; +import { ScriptField } from '../../../new_fields/ScriptField'; +import { PrefetchProxy } from '../../../new_fields/Proxy'; +import { List } from '../../../new_fields/List'; +import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; + library.add(faTimes); export interface SearchProps { id: string; + Document: Doc; searchQuery?: string; filterQuery?: filterData; } @@ -80,8 +89,14 @@ export class SearchBox extends React.Component { SearchBox.Instance = this; this.resultsScrolled = this.resultsScrolled.bind(this); } - + @observable setupButtons =false; componentDidMount = () => { + console.log(this.setupButtons); + if (this.setupButtons==false){ + console.log("Yuh"); + this.setupDocTypeButtons(); + runInAction(()=>this.setupButtons==true); + } if (this.inputRef.current) { this.inputRef.current.focus(); runInAction(() => this._searchbarOpen = true); @@ -663,6 +678,79 @@ export class SearchBox extends React.Component { @action.bound updateDataStatus() { this._deletedDocsStatus = !this._deletedDocsStatus; } + addButtonDoc = (doc: Doc) => Doc.AddDocToList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); + remButtonDoc = (doc: Doc) => Doc.RemoveDocFromList(CurrentUserUtils.UserDocument.expandingButtons as Doc, "data", doc); + moveButtonDoc = (doc: Doc, targetCollection: Doc | undefined, addDocument: (document: Doc) => boolean) => this.remButtonDoc(doc) && addDocument(doc); + + @computed get docButtons() { + const nodeBtns = this.props.Document.nodeButtons; + if (nodeBtns instanceof Doc) { + return
+ +
; + } + return (null); + } + + setupDocTypeButtons() { + let doc = this.props.Document; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { + ...opts, + _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", dontDecorateSelection: true, forceActive: true, + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), + backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true + })) as any as Doc; + + + doc.None = ficon({ onClick: undefined, title: "none button", icon: "ban" }); + doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); + doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); + doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); + doc.Image = ficon({ onClick: undefined, title: "image button", icon: "image" }); + doc.Link = ficon({ onClick: undefined, title: "link button", icon: "link" }); + doc.PDF = ficon({ onClick: undefined, title: "pdf button", icon: "file-pdf" }); + doc.TEXT = ficon({ onClick: undefined, title: "text button", icon: "sticky-note" }); + doc.Vid = ficon({ onClick: undefined, title: "vid button", icon: "video" }); + doc.Web = ficon({ onClick: undefined, title: "web button", icon: "globe-asia" }); + + let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, + doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; + + const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), { + _width: 500, _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", + dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 + }); + doc.nodeButtons= dragCreators; + } + render() { return ( @@ -685,6 +773,7 @@ export class SearchBox extends React.Component {
+ {this.docButtons}
-- cgit v1.2.3-70-g09d2 From c7c146adbd0b188eba56139ab914edaf73774d3f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 15 Apr 2020 19:07:01 -0700 Subject: search menu is now partially a nested document --- src/client/views/nodes/QueryBox.tsx | 7 +++- src/client/views/search/SearchBox.tsx | 76 +++++++++++++++++------------------ 2 files changed, 44 insertions(+), 39 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index 1b3f6280a..04f815e91 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -26,9 +26,14 @@ export class QueryBox extends DocAnnotatableComponent e.stopPropagation()} > - +
; } } \ No newline at end of file diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index f23525bdb..532b151c5 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -8,7 +8,7 @@ import * as rp from 'request-promise'; import { Doc } from '../../../new_fields/Doc'; import { Id } from '../../../new_fields/FieldSymbols'; import { Cast, NumCast, StrCast } from '../../../new_fields/Types'; -import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne } from '../../../Utils'; +import { Utils, returnTrue, emptyFunction, returnFalse, emptyPath, returnOne, returnEmptyString } from '../../../Utils'; import { Docs, DocumentOptions } from '../../documents/Documents'; import { SetupDrag, DragManager } from '../../util/DragManager'; import { SearchUtil } from '../../util/SearchUtil'; @@ -27,6 +27,8 @@ import { ScriptField } from '../../../new_fields/ScriptField'; import { PrefetchProxy } from '../../../new_fields/Proxy'; import { List } from '../../../new_fields/List'; import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMusic, faLink, faChartBar, faGlobeAsia, faBan, faVideo, faCaretDown } from '@fortawesome/free-solid-svg-icons'; +import { Transform } from '../../util/Transform'; +import { MainView } from "../MainView"; library.add(faTimes); @@ -34,6 +36,7 @@ library.add(faTimes); export interface SearchProps { id: string; Document: Doc; + sideBar?: Boolean; searchQuery?: string; filterQuery?: filterData; } @@ -508,7 +511,7 @@ export class SearchBox extends React.Component { else if (this._visibleElements.length !== this._numTotalResults) { // undefined until a searchitem is put in there this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders + // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -684,36 +687,37 @@ export class SearchBox extends React.Component { @computed get docButtons() { const nodeBtns = this.props.Document.nodeButtons; + let width = () => NumCast(this.props.Document.width); + if (this.props.sideBar===true){ + width = MainView.Instance.flyoutWidthFunc; + } if (nodeBtns instanceof Doc) { - return
- + return
+ 100} + renderDepth={0} + backgroundColor={returnEmptyString} + focus={emptyFunction} + parentActive={returnTrue} + whenActiveChanged={emptyFunction} + bringToFront={emptyFunction} + ContainingCollectionView={undefined} + ContainingCollectionDoc={undefined} + zoomToScale={emptyFunction} + getScale={returnOne} + />
; } return (null); @@ -721,16 +725,13 @@ export class SearchBox extends React.Component { setupDocTypeButtons() { let doc = this.props.Document; - const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, dontDecorateSelection: true, backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; const blist = (opts: DocumentOptions, docs: Doc[]) => new PrefetchProxy(Docs.Create.LinearDocument(docs, { ...opts, _gridGap: 5, _xMargin: 5, _yMargin: 5, _height: 42, _width: 100, boxShadow: "0 0", dontDecorateSelection: true, forceActive: true, dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), backgroundColor: "black", treeViewPreventOpen: true, lockedPosition: true, _chromeStatus: "disabled", linearViewIsExpanded: true })) as any as Doc; - - - doc.None = ficon({ onClick: undefined, title: "none button", icon: "ban" }); doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -744,8 +745,8 @@ export class SearchBox extends React.Component { let buttons = [doc.None as Doc, doc.Music as Doc, doc.Col as Doc, doc.Hist as Doc, doc.Image as Doc, doc.Link as Doc, doc.PDF as Doc, doc.TEXT as Doc, doc.Vid as Doc, doc.Web as Doc]; - const dragCreators = Docs.Create.MasonryDocument(CurrentUserUtils.setupCreatorButtons(doc), { - _width: 500, _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", + const dragCreators = Docs.Create.MasonryDocument(buttons, { + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 }); doc.nodeButtons= dragCreators; @@ -772,7 +773,6 @@ export class SearchBox extends React.Component {
- {this.docButtons}
-- cgit v1.2.3-70-g09d2 From 0e192cd810be35c9c81cd93e8f4d550d8fe02d59 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 22 Apr 2020 01:58:17 -0700 Subject: document buttons change on hover and click --- src/client/documents/Documents.ts | 4 ++- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/LabelBox.tsx | 15 ++++++++--- src/client/views/search/SearchBox.scss | 40 ++++++++++++++-------------- src/client/views/search/SearchBox.tsx | 46 ++++++++++++++++++++++++++------- 5 files changed, 71 insertions(+), 36 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 2b5727254..db423fc84 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -157,9 +157,11 @@ export interface DocumentOptions { selectedIndex?: number; syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text searchText?: string, //for searchbox - searchQuery?: string, // for queryBox + searchQuery?: string, // for quersyBox filterQuery?: filterData, linearViewIsExpanded?: boolean; // is linear view expanded + border?: string; //for searchbox + hovercolor?:string; } class EmptyBox { diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index c0d530160..40a29b6b9 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1153,7 +1153,7 @@ export class DocumentView extends DocComponent(Docu pointerEvents: this.ignorePointerEvents ? "none" : "all", color: StrCast(this.layoutDoc.color, "inherit"), outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px", - border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, + border: this.layoutDoc.border ? StrCast(this.layoutDoc.border) : highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, boxShadow: this.props.Document.isTemplateForField ? "black 0.2vw 0.2vw 0.8vw" : undefined, background: finalColor, opacity: this.Document.opacity diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx index 391e359cc..fca38763e 100644 --- a/src/client/views/nodes/LabelBox.tsx +++ b/src/client/views/nodes/LabelBox.tsx @@ -1,6 +1,6 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit } from '@fortawesome/free-regular-svg-icons'; -import { action } from 'mobx'; +import { action, computed, observable, runInAction } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; import { Doc, DocListCast } from '../../../new_fields/Doc'; @@ -61,17 +61,26 @@ export class LabelBox extends ViewBoxBaseComponent m + ":").join(" ") + ")") render() { const params = Cast(this.paramsDoc["onClick-paramFieldKeys"], listSpec("string"), []); const missingParams = params?.filter(p => !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... + console.log(this.backColor); return ( -
runInAction(()=>{this.clicked=!this.clicked; this.clicked? this.backColor=StrCast(this.layoutDoc.hovercolor) : this.backColor ="unset"})} onMouseLeave={()=>runInAction(()=>{ !this.clicked ?this.backColor="unset" : null})} + onMouseOver={()=>runInAction(()=>{this.backColor=StrCast(this.layoutDoc.hovercolor);})}ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this.layoutDoc.opacity ? StrCast(this.layoutDoc.boxShadow) : "" }}>
{ if (this.setupButtons==false){ console.log("Yuh"); this.setupDocTypeButtons(); - this.setupKeyButtons() + this.setupKeyButtons(); + this.setupDefaultButtons(); runInAction(()=>this.setupButtons==true); } if (this.inputRef.current) { @@ -563,6 +564,7 @@ export class SearchBox extends React.Component { @action.bound handleNodeChange = () => { + console.log("oi!"); this._nodeStatus = !this._nodeStatus; if (this._nodeStatus) { this.expandSection(`node${this.props.id}`); @@ -718,7 +720,6 @@ export class SearchBox extends React.Component { return (null); } - @computed get keyButtons() { const nodeBtns = this.props.Document.keyButtons; let width = () => NumCast(this.props.Document.width); @@ -726,7 +727,7 @@ export class SearchBox extends React.Component { width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { - return
+ return
{ setupDocTypeButtons() { let doc = this.props.Document; - const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, backgroundColor: "#121721", dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, _height: 100 })) as any as Doc; + const ficon = (opts: DocumentOptions) => new PrefetchProxy(Docs.Create.FontIconDocument({ ...opts, + dropAction: "alias", removeDropProperties: new List(["dropAction"]), _nativeWidth: 100, _nativeHeight: 100, _width: 100, + _height: 100 })) as any as Doc; + //backgroundColor: "#121721", doc.Music = ficon({ onClick: undefined, title: "mussic button", icon: "music" }); doc.Col = ficon({ onClick: undefined, title: "col button", icon: "object-group" }); doc.Hist = ficon({ onClick: undefined, title: "hist button", icon: "chart-bar" }); @@ -784,16 +788,39 @@ export class SearchBox extends React.Component { setupKeyButtons() { let doc = this.props.Document; const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts, - _width: 35, _height: 25, fontSize: 10, - letterSpacing: "0px", textTransform: "unset", borderRounding: "16px", + _width: 35, _height: 30, + borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + fontSize: 7, }))as any as Doc; doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange()`)}); + doc.author = button({ title: "Author", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); - let buttons = [doc.title as Doc]; + let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; const dragCreators = Docs.Create.MasonryDocument(buttons, { - _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 35, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons", - //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), _yMargin: 5 + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 + //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), + }); + doc.keyButtons= dragCreators; + } + + setupDefaultButtons() { + let doc = this.props.Document; + const button = (opts: DocumentOptions) => new PrefetchProxy( Docs.Create.ButtonDocument({...opts, + _width: 35, _height: 30, + borderRounding: "16px", border:"1px solid grey", color:"white", hovercolor: "rgb(170, 170, 163)", letterSpacing: "2px", + fontSize: 7, + }))as any as Doc; + doc.title=button({ title: "Title", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + doc.deleted=button({ title: "Deleted", onClick:ScriptField.MakeScript(`this.handleNodeChange`)}); + doc.nodes = button({ title: "Nodes", onClick:ScriptField.MakeScript("this.updateTitleStatus")}); + + let buttons = [doc.title as Doc, doc.deleted as Doc, doc.author as Doc]; + + const dragCreators = Docs.Create.MasonryDocument(buttons, { + _width: 500, backgroundColor:"#121721", _autoHeight: true, columnWidth: 50, ignoreClick: true, lockedPosition: true, _chromeStatus: "disabled", title: "buttons",_yMargin: 5 + //dropConverter: ScriptField.MakeScript("convertToButtons(dragData)", { dragData: DragManager.DocumentDragData.name }), }); doc.keyButtons= dragCreators; } @@ -827,7 +854,6 @@ export class SearchBox extends React.Component { */} {this.keyButtons} - {/*
*/}
Date: Mon, 27 Apr 2020 15:44:43 -0700 Subject: refactored searchbox doctype out from querybox class to help with displaying search results as different collection types --- src/client/documents/DocumentTypes.ts | 2 +- src/client/documents/Documents.ts | 10 +- src/client/views/nodes/DocumentContentsView.tsx | 4 +- src/client/views/nodes/QueryBox.tsx | 7 +- src/client/views/search/SearchBox.tsx | 114 ++++++++++++++------- .../authentication/models/current_user_utils.ts | 7 +- 6 files changed, 93 insertions(+), 51 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index de366763b..3c34ff1c8 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -13,7 +13,7 @@ export enum DocumentType { INK = "ink", // ink stroke SCREENSHOT = "screenshot", // view of a desktop application FONTICON = "fonticonbox", // font icon - QUERY = "query", // search query + SEARCH = "search", // search query LABEL = "label", // simple text label BUTTON = "button", // onClick button WEBCAM = "webcam", // webcam diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index db423fc84..50326231c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -39,7 +39,7 @@ import { filterData} from "../views/search/SearchBox"; //import { PresField } from "../../new_fields/PresField"; import { PresElementBox } from "../views/presentationview/PresElementBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; -import { QueryBox } from "../views/nodes/QueryBox"; +import { SearchBox } from "../views/search/SearchBox"; import { ColorBox } from "../views/nodes/ColorBox"; import { LinkAnchorBox } from "../views/nodes/LinkAnchorBox"; import { DocHolderBox } from "../views/nodes/DocumentBox"; @@ -191,8 +191,8 @@ export namespace Docs { layout: { view: FormattedTextBox, dataField: "text" }, options: { _height: 150, _xMargin: 10, _yMargin: 10 } }], - [DocumentType.QUERY, { - layout: { view: QueryBox, dataField: data }, + [DocumentType.SEARCH, { + layout: { view: SearchBox, dataField: data }, options: { _width: 400 } }], [DocumentType.COLOR, { @@ -534,8 +534,8 @@ export namespace Docs { return instance; } - export function QueryDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.QUERY), "", options); + export function SearchDocument(options: DocumentOptions = {}) { + return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), "", options); } export function ColorDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 7522af3a3..083638198 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -24,7 +24,7 @@ import { ImageBox } from "./ImageBox"; import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; import { PresBox } from "./PresBox"; -import { QueryBox } from "./QueryBox"; +import { SearchBox } from "../search/SearchBox"; import { ColorBox } from "./ColorBox"; import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { LinkAnchorBox } from "./LinkAnchorBox"; @@ -111,7 +111,7 @@ export class DocumentContentsView extends React.Component e.stopPropagation()} > - + +
; } -} \ No newline at end of file +} + +// diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index a33cb1e06..327617319 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -15,7 +15,7 @@ import { SearchUtil } from '../../util/SearchUtil'; import "./SearchBox.scss"; import { SearchItem } from './SearchItem'; import { IconBar } from './IconBar'; -import { FieldView } from '../nodes/FieldView'; +import { FieldView, FieldViewProps } from '../nodes/FieldView'; import { DocumentType } from "../../documents/DocumentTypes"; import { DocumentView } from '../nodes/DocumentView'; import { SelectionManager } from '../../util/SelectionManager'; @@ -30,17 +30,31 @@ import { faSearch, faFilePdf, faFilm, faImage, faObjectGroup, faStickyNote, faMu import { Transform } from '../../util/Transform'; import { MainView } from "../MainView"; import { Scripting } from '../../util/Scripting'; - +import { CollectionView, CollectionViewType } from '../collections/CollectionView'; +import { ViewBoxBaseComponent } from "../DocComponent"; +import { documentSchema } from "../../../new_fields/documentSchemas"; +import { makeInterface, createSchema } from '../../../new_fields/Schema'; library.add(faTimes); -export interface SearchProps { - id: string; - Document: Doc; - sideBar?: Boolean; - searchQuery?: string; - filterQuery?: filterData; -} +// export interface SearchProps { +// id: string; +// Document: Doc; +// sideBar?: Boolean; +// searchQuery?: string; +// filterQuery?: filterData; +// } + +export const searchSchema = createSchema({ + id: "string", + Document: Doc, + sideBar: "boolean", + searchQuery: "string", +}); + +//add back filterquery + + export enum Keys { TITLE = "title", @@ -55,8 +69,13 @@ export interface filterData{ basicWordStatus:boolean; icons: string[]; } + +type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>; +const SearchBoxDocument = makeInterface(documentSchema, searchSchema); + +//React.Component @observer -export class SearchBox extends React.Component { +export class SearchBox extends ViewBoxBaseComponent(SearchBoxDocument) { @observable private _searchString: string = ""; @observable private _resultsOpen: boolean = false; @@ -64,6 +83,7 @@ export class SearchBox extends React.Component { @observable private _results: [Doc, string[], string[]][] = []; @observable private _openNoResults: boolean = false; @observable private _visibleElements: JSX.Element[] = []; + @observable private _visibleDocuments: Doc[] = []; private _resultsSet = new Map(); private _resultsRef = React.createRef(); @@ -107,20 +127,20 @@ export class SearchBox extends React.Component { this.inputRef.current.focus(); runInAction(() => this._searchbarOpen = true); } - if (this.props.searchQuery && this.props.filterQuery && this.newAssign) { - console.log(this.props.searchQuery); - const sq = this.props.searchQuery; + if (this.rootDoc.searchQuery&& this.newAssign) { + console.log(this.rootDoc.searchQuery); + const sq = this.rootDoc.searchQuery; runInAction(() => { - this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus; - this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus - this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus; - this._basicWordStatus=this.props.filterQuery!.basicWordStatus; - this._icons=this.props.filterQuery!.icons; + // this._deletedDocsStatus=this.props.filterQuery!.deletedDocsStatus; + // this._authorFieldStatus=this.props.filterQuery!.authorFieldStatus + // this._titleFieldStatus=this.props.filterQuery!.titleFieldStatus; + // this._basicWordStatus=this.props.filterQuery!.basicWordStatus; + // this._icons=this.props.filterQuery!.icons; this.newAssign=false; }); runInAction(() => { - this._searchString = sq; + this._searchString = StrCast(sq); this.submitSearch(); }); } @@ -334,6 +354,7 @@ export class SearchBox extends React.Component { this._resultsSet.clear(); this._isSearch = []; this._visibleElements = []; + this._visibleDocuments = []; if (query !== "") { this._endIndex = 12; this._maxSearchIndex = 0; @@ -457,7 +478,7 @@ export class SearchBox extends React.Component { basicWordStatus: this._basicWordStatus, icons: this._icons, } - return Docs.Create.QueryDocument({ _autoHeight: true, title: this._searchString, filterQuery: filter, searchQuery: this._searchString }); + return Docs.Create.SearchDocument({ _autoHeight: true, title: this._searchString, filterQuery: filter, searchQuery: this._searchString }); } @action.bound @@ -480,6 +501,7 @@ export class SearchBox extends React.Component { this._results = []; this._resultsSet.clear(); this._visibleElements = []; + this._visibleDocuments=[]; this._numTotalResults = -1; this._endIndex = -1; this._curRequest = undefined; @@ -497,6 +519,7 @@ export class SearchBox extends React.Component { this._endIndex=30; if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { this._visibleElements = [
No Search Results
]; + //this._visibleDocuments= Docs.Create. return; } @@ -509,6 +532,8 @@ export class SearchBox extends React.Component { else if (this._visibleElements.length !== this._numTotalResults) { // undefined until a searchitem is put in there this._visibleElements = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + this._visibleDocuments = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); + // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -531,6 +556,7 @@ export class SearchBox extends React.Component { if (result) { const highlights = Array.from([...Array.from(new Set(result[1]).values())]); this._visibleElements[i] = ; + this._visibleDocuments[i]= result[0]; this._isSearch[i] = "search"; } } @@ -539,6 +565,7 @@ export class SearchBox extends React.Component { if (result) { const highlights = Array.from([...Array.from(new Set(result[1]).values())]); this._visibleElements[i] = ; + this._visibleDocuments[i] = result[0]; this._isSearch[i] = "search"; } } @@ -547,6 +574,7 @@ export class SearchBox extends React.Component { } if (this._maxSearchIndex >= this._numTotalResults) { this._visibleElements.length = this._results.length; + this._visibleDocuments.length = this._results.length; this._isSearch.length = this._results.length; } } @@ -568,10 +596,10 @@ export class SearchBox extends React.Component { console.log("oi!"); this._nodeStatus = !this._nodeStatus; if (this._nodeStatus) { - this.expandSection(`node${this.props.id}`); + this.expandSection(`node${this.props.Document[Id]}`); } else { - this.collapseSection(`node${this.props.id}`); + this.collapseSection(`node${this.props.Document[Id]}`); } } @@ -579,10 +607,10 @@ export class SearchBox extends React.Component { handleKeyChange = () => { this._keyStatus = !this._keyStatus; if (this._keyStatus) { - this.expandSection(`key${this.props.id}`); + this.expandSection(`key${this.props.Document[Id]}`); } else { - this.collapseSection(`key${this.props.id}`); + this.collapseSection(`key${this.props.Document[Id]}`); } } @@ -590,11 +618,11 @@ export class SearchBox extends React.Component { handleFilterChange = () => { this._filterOpen = !this._filterOpen; if (this._filterOpen) { - this.expandSection(`filterhead${this.props.id}`); - document.getElementById(`filterhead${this.props.id}`)!.style.padding = "5"; + this.expandSection(`filterhead${this.props.Document[Id]}`); + document.getElementById(`filterhead${this.props.Document[Id]}`)!.style.padding = "5"; } else { - this.collapseSection(`filterhead${this.props.id}`); + this.collapseSection(`filterhead${this.props.Document[Id]}`); } @@ -607,7 +635,7 @@ export class SearchBox extends React.Component { collapseSection(thing: string) { - const id = this.props.id; + const id = this.props.Document[Id]; const element = document.getElementById(thing)!; // get the height of the element's inner content, regardless of its actual size const sectionHeight = element.scrollHeight; @@ -686,7 +714,7 @@ export class SearchBox extends React.Component { @computed get docButtons() { const nodeBtns = this.props.Document.nodeButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { @@ -724,7 +752,7 @@ export class SearchBox extends React.Component { @computed get keyButtons() { const nodeBtns = this.props.Document.keyButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (nodeBtns instanceof Doc) { @@ -762,7 +790,7 @@ export class SearchBox extends React.Component { @computed get defaultButtons() { const defBtns = this.props.Document.defaultButtons; let width = () => NumCast(this.props.Document.width); - if (this.props.sideBar===true){ + if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } if (defBtns instanceof Doc) { @@ -861,11 +889,11 @@ export class SearchBox extends React.Component { }); doc.defaultButtons= dragCreators; } - + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().presentationTemplate, Doc, null) : undefined; render() { return ( -
+
this._searchString ? this.startDragCollection() : undefined)} ref={this.collectionRef} title="Drag Results as Collection"> @@ -876,17 +904,17 @@ export class SearchBox extends React.Component {
-
0 ? {overflow:"visible"} : {overflow:"hidden"}}> -
+
0 ? {overflow:"visible"} : {overflow:"hidden"}}> +
{this.defaultButtons} {/* */}
-
+
{this.docButtons}
-
+
{/*
*/} {/* @@ -894,12 +922,22 @@ export class SearchBox extends React.Component { {this.keyButtons}
+ {/* */}
{this._visibleElements} + +
); @@ -910,7 +948,7 @@ export class SearchBox extends React.Component { // console.log("oi"); // doc.handleNodeChange(); -// // const dv = DocumentManager.Instance.getDocumentView(doc); +// // const dv = DocumentManager.Instance.getD ocumentView(doc); // // if (dv?.props.Document.layoutKey === layoutKey) dv?.switchViews(otherKey !== "layout", otherKey.replace("layout_", "")); // // else dv?.switchViews(true, layoutKey.replace("layout_", "")); // }); \ No newline at end of file diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 9235a97b0..c03779002 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -87,7 +87,7 @@ export class CurrentUserUtils { { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc }, { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc }, { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc }, - { title: "query", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.QueryDocument({ _width: 200, title: "an image of a cat" })' }, + { title: "query", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.SearchDocument({ _width: 200, title: "an image of a cat" })' }, // { title: "buxton", icon: "cloud-upload-alt", ignoreClick: true, drag: "Docs.Create.Buxton()" }, ]; return docProtoData.filter(d => !alreadyCreatedButtons?.includes(d.title)).map(data => Docs.Create.FontIconDocument({ @@ -254,7 +254,7 @@ export class CurrentUserUtils { return Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: Docs.Create.QueryDocument({ title: "search stack", }), + sourcePanel: Docs.Create.SearchDocument({ title: "search stack", }), targetContainer: sidebarContainer, lockedPosition: true, onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel") @@ -279,11 +279,12 @@ export class CurrentUserUtils { })); } + // forceActive: true /// sets up the default list of buttons to be shown in the expanding button menu at the bottom of the Dash window static setupExpandingButtons(doc: Doc) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.QueryDocument({ title: "query", _height: 200, forceActive: true }), + Docs.Create.SearchDocument({ title: "query", _height: 200, forceActive:true }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true, forceActive: true }) ], { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, _autoHeight: false, forceActive: true, hideFilterView: true }); -- cgit v1.2.3-70-g09d2 From e4b7b54eecc307ec52f6105f92c3d87449458641 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 28 Apr 2020 02:02:40 -0700 Subject: nested collection view now in search box, search item doc type cast over stacking view, but with bugs --- src/client/documents/DocumentTypes.ts | 1 + src/client/documents/Documents.ts | 8 +++ src/client/views/nodes/FieldView.tsx | 3 + src/client/views/nodes/QueryBox.tsx | 2 +- src/client/views/search/SearchBox.tsx | 40 ++++++++++--- src/client/views/search/SearchItem.tsx | 69 ++++++++++++---------- .../authentication/models/current_user_utils.ts | 3 + 7 files changed, 86 insertions(+), 40 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts index 3c34ff1c8..36d3e1c52 100644 --- a/src/client/documents/DocumentTypes.ts +++ b/src/client/documents/DocumentTypes.ts @@ -31,6 +31,7 @@ export enum DocumentType { COLOR = "color", // color picker (view of a color picker for a color string) YOUTUBE = "youtube", // youtube directory (view of you tube search results) DOCHOLDER = "docholder", // nested document (view of a document) + SEARCHITEM= "searchitem", LINKDB = "linkdb", // database of links ??? why do we have this RECOMMENDATION = "recommendation", // view of a recommendation diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 50326231c..e5b3c8a97 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -38,6 +38,7 @@ import { filterData} from "../views/search/SearchBox"; //import { PresBox } from "../views/nodes/PresBox"; //import { PresField } from "../../new_fields/PresField"; import { PresElementBox } from "../views/presentationview/PresElementBox"; +import { SearchItem } from "../views/search/SearchItem"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; import { SearchBox } from "../views/search/SearchBox"; import { ColorBox } from "../views/nodes/ColorBox"; @@ -277,6 +278,9 @@ export namespace Docs { [DocumentType.PRESELEMENT, { layout: { view: PresElementBox, dataField: data } }], + [DocumentType.SEARCHITEM, { + layout: { view: SearchItem, dataField: data } + }], [DocumentType.INK, { layout: { view: InkingStroke, dataField: data }, options: { backgroundColor: "transparent" } @@ -671,6 +675,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } + export function SearchItemBoxDocument(options?: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.SEARCHITEM), undefined, { ...(options || {}) }); + } + export function DockDocument(documents: Array, config: string, options: DocumentOptions, id?: string) { const inst = InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _viewType: CollectionViewType.Docking, dockingConfig: config }, id); Doc.GetProto(inst).data = new List(documents); diff --git a/src/client/views/nodes/FieldView.tsx b/src/client/views/nodes/FieldView.tsx index a3790d38b..6198212b5 100644 --- a/src/client/views/nodes/FieldView.tsx +++ b/src/client/views/nodes/FieldView.tsx @@ -51,6 +51,9 @@ export interface FieldViewProps { ContentScaling: () => number; ChromeHeight?: () => number; childLayoutTemplate?: () => Opt; + highlighting?: string[]; + lines?: string[]; + doc?: Doc; } @observer diff --git a/src/client/views/nodes/QueryBox.tsx b/src/client/views/nodes/QueryBox.tsx index eb57b98d2..fb47a01d7 100644 --- a/src/client/views/nodes/QueryBox.tsx +++ b/src/client/views/nodes/QueryBox.tsx @@ -34,7 +34,7 @@ export class QueryBox extends ViewBoxAnnotatableComponent e.stopPropagation()} > - +
; } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 327617319..5ef71ca41 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -533,7 +533,6 @@ export class SearchBox extends ViewBoxBaseComponent(this._numTotalResults === -1 ? 0 : this._numTotalResults); this._visibleDocuments = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); - // indicates if things are placeholders this._isSearch = Array(this._numTotalResults === -1 ? 0 : this._numTotalResults); } @@ -555,7 +554,10 @@ export class SearchBox extends ViewBoxBaseComponent; + result[0].query=this._searchString; + this._visibleElements[i] = ; + Doc.AddDocToList(this.props.Document, undefined, result[0]) + this._visibleDocuments[i]= result[0]; this._isSearch[i] = "search"; } @@ -564,8 +566,10 @@ export class SearchBox extends ViewBoxBaseComponent; + result[0].query=this._searchString; + this._visibleElements[i] = ; this._visibleDocuments[i] = result[0]; + Doc.AddDocToList(this.props.Document, undefined, result[0]) this._isSearch[i] = "search"; } } @@ -729,7 +733,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -767,7 +771,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -805,7 +809,7 @@ export class SearchBox extends ViewBoxBaseComponent 100} @@ -889,7 +893,23 @@ export class SearchBox extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().presentationTemplate, Doc, null) : undefined; + childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? Cast(Doc.UserDoc().searchItemTemplate, Doc, null) : undefined; + getTransform = () => { + return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight + } + panelHeight = () => { + return this.props.PanelHeight() - 50; + } + selectElement = (doc: Doc) => { + //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); + } + + addDocument = (doc: Doc) => { + const newPinDoc = Doc.MakeAlias(doc); + newPinDoc.presentationTargetDoc = doc; + return Doc.AddDocToList(this.dataDoc, this.fieldKey, newPinDoc); + } + render() { return ( @@ -922,14 +942,16 @@ export class SearchBox extends ViewBoxBaseComponent
- {/* */} + ScreenToLocalTransform={this.getTransform} />
{ } + +type SearchSchema = makeInterface<[typeof documentSchema]>; +const SearchDocument = makeInterface(documentSchema); + @observer -export class SearchItem extends React.Component { +export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { + public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } @observable _selected: boolean = false; onClick = () => { // I dont think this is the best functionality because clicking the name of the collection does that. Change it back if you'd like - DocumentManager.Instance.jumpToDocument(this.props.doc, false); + DocumentManager.Instance.jumpToDocument(this.props.doc!, false); } @observable _useIcons = true; @observable _displayDim = 50; componentDidMount() { - Doc.SetSearchQuery(this.props.query); - this.props.doc.searchMatch = true; + Doc.SetSearchQuery(StrCast(this.props.doc!.query)); + this.props.doc!.searchMatch = true; } componentWillUnmount() { - this.props.doc.searchMatch = undefined; + this.props.doc!.searchMatch = undefined; } //@computed @action public DocumentIcon() { - const layoutresult = StrCast(this.props.doc.type); + const layoutresult = StrCast(this.props.doc!.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -156,10 +165,10 @@ export class SearchItem extends React.Component { })} onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { nextHighlight = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); - this.props.doc.searchMatch = false; - setTimeout(() => this.props.doc.searchMatch = true, 0); + this.props.doc!.searchMatch = false; + setTimeout(() => this.props.doc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { - if (this.props.doc.type === DocumentType.LINK) { - if (this.props.doc.anchor1 && this.props.doc.anchor2) { + if (this.props.doc!.type === DocumentType.LINK) { + if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { - const doc1 = Cast(this.props.doc.anchor1, Doc, null); - const doc2 = Cast(this.props.doc.anchor2, Doc, null); + const doc1 = Cast(this.props.doc!.anchor1, Doc, null); + const doc2 = Cast(this.props.doc!.anchor2, Doc, null); Doc.BrushDoc(doc1); Doc.BrushDoc(doc2); } } else { - Doc.BrushDoc(this.props.doc); + Doc.BrushDoc(this.props.doc!); } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.props.doc.type === DocumentType.LINK) { - if (this.props.doc.anchor1 && this.props.doc.anchor2) { + if (this.props.doc!.type === DocumentType.LINK) { + if (this.props.doc!.anchor1 && this.props.doc!.anchor2) { - const doc1 = Cast(this.props.doc.anchor1, Doc, null); - const doc2 = Cast(this.props.doc.anchor2, Doc, null); + const doc1 = Cast(this.props.doc!.anchor1, Doc, null); + const doc2 = Cast(this.props.doc!.anchor2, Doc, null); Doc.UnBrushDoc(doc1); Doc.UnBrushDoc(doc2); } } else { - Doc.UnBrushDoc(this.props.doc); + Doc.UnBrushDoc(this.props.doc!); } } @@ -236,7 +245,7 @@ export class SearchItem extends React.Component { ContextMenu.Instance.clearItems(); ContextMenu.Instance.addItem({ description: "Copy ID", event: () => { - Utils.CopyText(this.props.doc[Id]); + Utils.CopyText(this.props.doc![Id]); }, icon: "fingerprint" }); @@ -261,7 +270,7 @@ export class SearchItem extends React.Component { Math.abs(e.clientY - this._downY) > Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.props.doc) ? Doc.MakeDelegate(this.props.doc) : this.props.doc; + const doc = Doc.IsPrototype(this.props.doc!) ? Doc.MakeDelegate(this.props.doc!) : this.props.doc!; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -272,29 +281,29 @@ export class SearchItem extends React.Component { @computed get contextButton() { - return CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } render() { - const doc1 = Cast(this.props.doc.anchor1, Doc); - const doc2 = Cast(this.props.doc.anchor2, Doc); + const doc1 = Cast(this.props.doc!.anchor1, Doc); + const doc2 = Cast(this.props.doc!.anchor2, Doc); return
-
{StrCast(this.props.doc.title)}
-
{this.props.highlighting.length ? "Matched fields:" + this.props.highlighting.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
- {this.props.lines.filter((m, i) => i).map((l, i) =>
`${l}`
)} +
{StrCast(this.props.doc!.title)}
+
{this.props.highlighting!.length ? "Matched fields:" + this.props.highlighting!.join(", ") : this.props.lines.length ? this.props.lines[0] : ""}
+ {this.props.lines!.filter((m, i) => i).map((l, i) =>
`${l}`
)}
{this.DocumentIcon()}
-
{this.props.doc.type ? this.props.doc.type : "Other"}
+
{this.props.doc!.type ? this.props.doc!.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc.type === DocumentType.LINK ? : + {(doc1 instanceof Doc && doc2 instanceof Doc) && this.props.doc!.type === DocumentType.LINK ? : this.contextButton}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index c03779002..3ca6b1b3a 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -251,6 +251,7 @@ export class CurrentUserUtils { // setup the Search button which will display the search panel. static setupSearchPanel(sidebarContainer: Doc) { + return Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", @@ -331,6 +332,8 @@ export class CurrentUserUtils { // the initial presentation Doc to use static setupDefaultPresentation(doc: Doc) { + doc.searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); + doc.presentationTemplate = new PrefetchProxy(Docs.Create.PresElementBoxDocument({ title: "pres element template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); doc.curPresentation = Docs.Create.PresDocument(new List(), { title: "Presentation", _viewType: CollectionViewType.Stacking, _LODdisable: true, _chromeStatus: "replaced", _showTitle: "title", boxShadow: "0 0" }); } -- cgit v1.2.3-70-g09d2 From 9aab1f5e7dc7438dfa8a93afe03bd5746315c994 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 29 Apr 2020 13:49:55 -0700 Subject: bugfixing --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 3 ++- src/client/views/search/SearchBox.tsx | 31 +++++++++++++++++-------- 3 files changed, 24 insertions(+), 12 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e5b3c8a97..d440ed287 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -539,7 +539,7 @@ export namespace Docs { } export function SearchDocument(options: DocumentOptions = {}) { - return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), "", options); + return InstanceFromProto(Prototypes.get(DocumentType.SEARCH), new List([]), options); } export function ColorDocument(options: DocumentOptions = {}) { diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 083638198..cb9e9f5ba 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -25,6 +25,7 @@ import { KeyValueBox } from "./KeyValueBox"; import { PDFBox } from "./PDFBox"; import { PresBox } from "./PresBox"; import { SearchBox } from "../search/SearchBox"; +import { SearchItem } from "../search/SearchItem" import { ColorBox } from "./ColorBox"; import { DashWebRTCVideo } from "../webcam/DashWebRTCVideo"; import { LinkAnchorBox } from "./LinkAnchorBox"; @@ -111,7 +112,7 @@ export class DocumentContentsView extends React.Component { + this.dataDoc[this.fieldKey] = new List([]); const query = this._searchString; this.getFinalQuery(query); this._results = []; @@ -555,10 +556,15 @@ export class SearchBox extends ViewBoxBaseComponent; - Doc.AddDocToList(this.props.Document, undefined, result[0]) + //Make alias + result[0].lines=new List(result[2]); + result[0].highlighting=new List(highlights); - this._visibleDocuments[i]= result[0]; + this._visibleElements[i] = ; + debugger; + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) + //this.fieldkey + dash search results + //ask about document parmater in collection view this._isSearch[i] = "search"; } } @@ -567,9 +573,13 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + result[0].highlighting=new List(highlights); + this._visibleElements[i] = ; - this._visibleDocuments[i] = result[0]; - Doc.AddDocToList(this.props.Document, undefined, result[0]) + debugger; + + Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]) this._isSearch[i] = "search"; } } @@ -632,6 +642,8 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -755,7 +767,7 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -793,7 +805,7 @@ export class SearchBox extends ViewBoxBaseComponent NumCast(this.props.Document.width); + let width = () => NumCast(this.props.Document._width); if (this.rootDoc.sideBar===true){ width = MainView.Instance.flyoutWidthFunc; } @@ -909,7 +921,7 @@ export class SearchBox extends ViewBoxBaseComponent
Date: Wed, 10 Jun 2020 18:23:27 -0400 Subject: highlights --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 3 +++ src/client/views/search/SearchItem.tsx | 2 ++ 2 files changed, 5 insertions(+) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fc131cd38..cb84921f8 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -253,10 +253,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); + console.log(res); let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); + console.log(flattened); const lastSel = Math.min(flattened.length - 1, this._searchIndex); + console.log(lastSel) flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 74750a40c..35fc211af 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -248,6 +248,8 @@ export class SearchItem extends ViewBoxBaseComponent this.targetDoc!.searchMatch = true, 0); } highlightDoc = (e: React.PointerEvent) => { + console.log(Cast(this.targetDoc.lines, listSpec("string"))!.length); + if (this.targetDoc!.type === DocumentType.LINK) { if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { -- cgit v1.2.3-70-g09d2 From db97843dccf820231bec0f9a2f8d9de0b64bb71f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 11 Jun 2020 20:56:48 -0400 Subject: ability to parse back and forth through internal seaarch results --- .../views/nodes/formattedText/FormattedTextBox.tsx | 48 ++++++++- src/client/views/pdf/PDFViewer.tsx | 11 ++ src/client/views/search/SearchItem.tsx | 115 ++++++++++++++------- 3 files changed, 130 insertions(+), 44 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index cb84921f8..aad4e82b5 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -248,24 +248,61 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._editorView.dispatch(tr.addMark(flattened[lastSel].from, flattened[lastSel].to, link)); } } - public highlightSearchTerms = (terms: string[]) => { + public highlightSearchTerms = (terms: string[])=> { if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { + const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); - console.log(res); + let length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); - console.log(flattened); + if (this._searchIndex>1){ + this._searchIndex+=-2; + } + else if (this._searchIndex===1){ + this._searchIndex=length-1; + } + else if (this._searchIndex===0){ + this._searchIndex=length-2; + } + + const lastSel = Math.min(flattened.length - 1, this._searchIndex); + flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); + this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; + this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + let index = this._searchIndex; + console.log(index); + + Doc.GetProto(this.dataDoc).searchIndex = index; + Doc.GetProto(this.dataDoc).length=length; + } + } + + public highlightSearchTerms2 = (terms: string[])=> { + if (this._editorView && (this._editorView as any).docView && terms.some(t => t)) { + + const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); + const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); + const res = terms.filter(t => t).map(term => this.findInNode(this._editorView!, this._editorView!.state.doc, term)); + let length = res[0].length; + let tr = this._editorView.state.tr; + const flattened: TextSelection[] = []; + res.map(r => r.map(h => flattened.push(h))); const lastSel = Math.min(flattened.length - 1, this._searchIndex); - console.log(lastSel) flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + let index = this._searchIndex; + console.log(index); + + Doc.GetProto(this.dataDoc).searchIndex = index; + Doc.GetProto(this.dataDoc).length=length; } } + public unhighlightSearchTerms = () => { if (this._editorView && (this._editorView as any).docView) { const mark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight); @@ -668,6 +705,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._disposers.search = reaction(() => this.rootDoc.searchMatch, search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), { fireImmediately: true }); + this._disposers.search2 = reaction(() => this.rootDoc.searchMatch2, + search => search ? this.highlightSearchTerms2([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), + { fireImmediately: true }); this._disposers.record = reaction(() => this._recording, () => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 5bad248be..882e48de7 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -333,6 +333,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { this.Index = Math.min(this.Index + 1, this.allAnnotations.length - 1); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); + this.Document.searchIndex = this.Index; + this.Document.length=this.allAnnotations.length; + console.log(this.Index); + } @action @@ -399,6 +403,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { @@ -412,7 +419,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { - DocumentManager.Instance.jumpToDocument(this.targetDoc, false); + DocumentManager.Instance.jumpToDocument(this.rootDoc, false); } @observable _useIcons = true; @observable _displayDim = 50; @@ -175,17 +175,29 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc.searchIndex, + search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } + ); + Doc.SetSearchQuery(this.query); - this.targetDoc.searchMatch = true; + this.rootDoc.searchMatch = true; } componentWillUnmount() { - this.targetDoc.searchMatch = undefined; + this.rootDoc.searchMatch = undefined; + this._reactionDisposer && this._reactionDisposer(); } + + @observable searchPos: number|undefined =0; + + private _reactionDisposer?: IReactionDisposer; + + @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)} + @action public DocumentIcon() { - const layoutresult = StrCast(this.targetDoc.type); + const layoutresult = StrCast(this.rootDoc.type); if (!this._useIcons) { const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); const returnYDimension = () => this._displayDim; @@ -196,10 +208,10 @@ export class SearchItem extends ViewBoxBaseComponent this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); } - nextHighlight = (e: React.PointerEvent) => { + @action + nextHighlight = (e: React.MouseEvent) => { e.preventDefault(); - e.button === 0 && SearchBox.Instance.openSearch(e); - this.targetDoc!.searchMatch = false; - setTimeout(() => this.targetDoc!.searchMatch = true, 0); + //e.button === 0 && SearchBox.Instance.openSearch(e); + + this.rootDoc!.searchMatch = false; + setTimeout(() => this.rootDoc!.searchMatch = true, 0); + this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); + + this.searchPos=NumCast(this.rootDoc!.searchIndex); + this.length=NumCast(this.rootDoc!.length); } - highlightDoc = (e: React.PointerEvent) => { - console.log(Cast(this.targetDoc.lines, listSpec("string"))!.length); - if (this.targetDoc!.type === DocumentType.LINK) { - if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + @action + nextHighlight2 = (e: React.MouseEvent) => { + e.preventDefault(); + //e.button === 0 && SearchBox.Instance.openSearch(e); + + this.rootDoc!.searchMatch2 = false; + setTimeout(() => this.rootDoc!.searchMatch2 = true, 0); + this.rootDoc.searchIndex=NumCast(this.rootDoc.searchIndex); + + this.searchPos=NumCast(this.rootDoc!.searchIndex); + this.length=NumCast(this.rootDoc!.length); + } - const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + @observable length:number|undefined = 0; + + highlightDoc = (e: React.PointerEvent) => { + if (this.rootDoc!.type === DocumentType.LINK) { + if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) { + + const doc1 = Cast(this.rootDoc!.anchor1, Doc, null); + const doc2 = Cast(this.rootDoc!.anchor2, Doc, null); Doc.BrushDoc(doc1); Doc.BrushDoc(doc2); } } else { - Doc.BrushDoc(this.targetDoc!); + Doc.BrushDoc(this.rootDoc!); } e.stopPropagation(); } unHighlightDoc = (e: React.PointerEvent) => { - if (this.targetDoc!.type === DocumentType.LINK) { - if (this.targetDoc!.anchor1 && this.targetDoc!.anchor2) { + if (this.rootDoc!.type === DocumentType.LINK) { + if (this.rootDoc!.anchor1 && this.rootDoc!.anchor2) { - const doc1 = Cast(this.targetDoc!.anchor1, Doc, null); - const doc2 = Cast(this.targetDoc!.anchor2, Doc, null); + const doc1 = Cast(this.rootDoc!.anchor1, Doc, null); + const doc2 = Cast(this.rootDoc!.anchor2, Doc, null); Doc.UnBrushDoc(doc1); Doc.UnBrushDoc(doc2); } } else { - Doc.UnBrushDoc(this.targetDoc!); + Doc.UnBrushDoc(this.rootDoc!); } } @@ -284,7 +316,7 @@ export class SearchItem extends ViewBoxBaseComponent { - Utils.CopyText(StrCast(this.targetDoc[Id])); + Utils.CopyText(StrCast(this.rootDoc[Id])); }, icon: "fingerprint" }); @@ -309,7 +341,7 @@ export class SearchItem extends ViewBoxBaseComponent Utils.DRAG_THRESHOLD) { document.removeEventListener("pointermove", this.onPointerMoved); document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.targetDoc) ? Doc.MakeDelegate(this.targetDoc) : this.targetDoc; + const doc = Doc.IsPrototype(this.rootDoc) ? Doc.MakeDelegate(this.rootDoc) : this.rootDoc; DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); } } @@ -320,7 +352,7 @@ export class SearchItem extends ViewBoxBaseComponent CollectionDockingView.AddRightSplit(doc)} />; + return CollectionDockingView.AddRightSplit(doc)} />; } @computed get searchElementDoc() { return this.rootDoc; } @@ -350,12 +382,12 @@ export class SearchItem extends ViewBoxBaseComponent
} - else if (this.targetDoc.isBucket === false){ + else if (this.rootDoc.isBucket === false){ this.props.Document._chromeStatus='disabled'; return
@@ -385,23 +417,26 @@ export class SearchItem extends ViewBoxBaseComponent -
+
-
{StrCast(this.targetDoc.title)}
+
{StrCast(this.rootDoc.title)}
- {StrCast(this.targetDoc.highlighting).length ? "Matched fields:" + StrCast(this.targetDoc.highlighting) : Cast(this.targetDoc.lines, listSpec("string"))!.length ? Cast(this.targetDoc.lines, listSpec("string"))![0] : ""}
- {/* {Cast(this.targetDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} -
+ {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
+ {/* {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)} */} +
{this.DocumentIcon()}
-
{this.targetDoc.type ? this.targetDoc.type : "Other"}
+
{this.rootDoc.type ? this.rootDoc.type : "Other"}
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.targetDoc!.type === DocumentType.LINK ? : + {(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? : this.contextButton}
-- cgit v1.2.3-70-g09d2 From fb5291760d908fe54ec0134cbe3868d666b02b19 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Mon, 15 Jun 2020 20:49:10 -0400 Subject: bugfixing with expading search terms within a bucket --- .../views/nodes/formattedText/FormattedTextBox.tsx | 10 ++-- src/client/views/pdf/PDFViewer.tsx | 18 +++++-- src/client/views/search/SearchBox.tsx | 32 +++++------- src/client/views/search/SearchItem.tsx | 60 +++++++++++++++++----- 4 files changed, 77 insertions(+), 43 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index aad4e82b5..dff42bcb1 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -273,7 +273,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; - console.log(index); Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length=length; @@ -295,7 +294,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; - console.log(index); Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length=length; @@ -702,12 +700,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.setupEditor(this.config, this.props.fieldKey); - this._disposers.search = reaction(() => this.rootDoc.searchMatch, - search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), - { fireImmediately: true }); - this._disposers.search2 = reaction(() => this.rootDoc.searchMatch2, + this._disposers.search = reaction(() => this.rootDoc.searchMatch2, search => search ? this.highlightSearchTerms2([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), { fireImmediately: true }); + this._disposers.search2 = reaction(() => this.rootDoc.searchMatch, + search => search ? this.highlightSearchTerms([Doc.SearchQuery()]) : this.unhighlightSearchTerms(), + { fireImmediately: true }); this._disposers.record = reaction(() => this._recording, () => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 882e48de7..f23923279 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -107,6 +107,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent = React.createRef(); private _mainCont: React.RefObject = React.createRef(); private _selectionText: string = ""; @@ -144,6 +145,17 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._showWaiting = this._showCover = true); this.props.startupLive && this.setupPdfJsViewer(); this._searchReactionDisposer = reaction(() => this.Document.searchMatch, search => { + if (search) { + this.search(Doc.SearchQuery(), false); + this._lastSearch = Doc.SearchQuery(); + } + else { + setTimeout(() => this._lastSearch === "mxytzlaf" && this.search("mxytzlaf", true), 200); // bcz: how do we clear search highlights? + this._lastSearch && (this._lastSearch = "mxytzlaf"); + } + }, { fireImmediately: true }); + + this._searchReactionDisposer2 = reaction(() => this.Document.searchMatch2, search => { if (search) { this.search(Doc.SearchQuery(), true); this._lastSearch = Doc.SearchQuery(); @@ -325,7 +337,10 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { + console.log(this.Index); this.Index = Math.max(this.Index - 1, 0); + console.log(this.Index); + console.log(this.allAnnotations); this.scrollToAnnotation(this.allAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y))[this.Index]); } @@ -335,7 +350,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent NumCast(a.y) - NumCast(b.y))[this.Index]); this.Document.searchIndex = this.Index; this.Document.length=this.allAnnotations.length; - console.log(this.Index); } @@ -403,7 +417,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent([]); this.buckets=[]; this.new_buckets={}; @@ -430,7 +429,6 @@ export class SearchBox extends ViewBoxBaseComponentNo Search Results
]; //this._visibleDocuments= Docs.Create. let noResult= Docs.Create.TextDocument("",{title:"noResult"}) - noResult.targetDoc=noResult; noResult.isBucket =false; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, noResult); return; @@ -673,10 +668,9 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - result[0].lines=lines + result[0].lines=lines; result[0].highlighting=highlights.join(", "); this._visibleDocuments[i] = result[0]; - result[0].targetDoc=result[0]; this._isSearch[i] = "search"; } @@ -694,11 +688,13 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + + let lines = new List(result[2]); + + result[0].lines= lines; result[0].highlighting=highlights.join(", "); if(i(result[2]); + let lines = new List(result[2]); + result[0].lines= lines; result[0].highlighting=highlights.join(", "); - result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } this._isSorted[i]="sorted"; } } } - console.log(this.bucketcount[0]); - console.log(this.bucketcount[1]); - console.log(this.bucketcount[2]); + if (this.buckets![0]){ this.buckets![0]._height = this.bucketcount[0]*55 + 25; } @@ -760,11 +753,10 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + let lines = new List(result[2]); + result[0].lines= lines; result[0].highlighting=highlights.join(", "); - result[0].targetDoc=result[0]; Doc.AddDocToList(this.dataDoc, this.props.fieldKey, result[0]); } } diff --git a/src/client/views/search/SearchItem.tsx b/src/client/views/search/SearchItem.tsx index 63baf625e..c1fd2d0b8 100644 --- a/src/client/views/search/SearchItem.tsx +++ b/src/client/views/search/SearchItem.tsx @@ -174,16 +174,40 @@ export class SearchItem extends ViewBoxBaseComponent this.rootDoc.searchIndex, search => {console.log(NumCast(search));this.searchPos=NumCast(search) },{ fireImmediately: true } ); - this._reactionDisposer2 = reaction( () => this._useIcons, - el=> {console.log("YUH"); + el=> { + if (this.rootDoc.parent){ + parent = Cast(this.rootDoc.parent, Doc, null) as Doc; + height=(NumCast(parent._height)); + }; + console.log(height); + console.log(this._oldHeight); + setTimeout(() =>{this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null; + parent!==undefined? this._mainRef.current?.getBoundingClientRect()? parent._height= -this._oldHeight + height +this._mainRef.current?.getBoundingClientRect().height : null: null; + this._mainRef.current?.getBoundingClientRect()? this._oldHeight= this._mainRef.current?.getBoundingClientRect().height : null; + // this._oldHeight 55? this._oldHeight =55:null; + }, 1); + } + ); + + this._reactionDisposer3 = reaction( + () => this._displayLines, + el=> { setTimeout(() =>(this._mainRef.current?.getBoundingClientRect()? this.props.Document._height= this._mainRef.current?.getBoundingClientRect().height : null), 1); } ); @@ -195,6 +219,7 @@ export class SearchItem extends ViewBoxBaseComponent this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; @@ -398,23 +425,20 @@ export class SearchItem extends ViewBoxBaseComponent1){ if (!this._displayLines) { - return
{ this._displayLines = !this._displayLines; //this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); })} //onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > - {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
`${l}`
)} + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) =>
{l}
)}
;; } - else { - return ; - } + } } //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); @@ -423,14 +447,21 @@ export class SearchItem extends ViewBoxBaseComponent - {this.returnLines()} +
+ {this.rootDoc!.type === DocumentType.PDF? : null} {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} +
+
+ {this.returnLines()} +
} @@ -472,6 +503,7 @@ export class SearchItem extends ViewBoxBaseComponent } else { + console.log(this.rootDoc.highlighting); return
@@ -480,7 +512,7 @@ export class SearchItem extends ViewBoxBaseComponent {this.rootDoc.highlighting? StrCast(this.rootDoc.highlighting).length ? "Matched fields:" + StrCast(this.rootDoc.highlighting) : Cast(this.rootDoc.lines, listSpec("string"))!.length ? Cast(this.rootDoc.lines, listSpec("string"))![0] : "":null}
- {NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} + {NumCast(this.rootDoc.length) > 1 ?this.returnButtons(): null}
-- cgit v1.2.3-70-g09d2 From 7a291cbffb9e609633759cfff8b459e1a32b4fc3 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Thu, 25 Jun 2020 17:23:43 -0400 Subject: bugfixing search, refreshing docs, ghost buckets, etc. --- src/client/documents/Documents.ts | 1 - src/client/util/CurrentUserUtils.ts | 6 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 15 ++++++---- src/client/views/search/SearchBox.tsx | 35 ++++++++++++++-------- 4 files changed, 35 insertions(+), 22 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c32d187a0..ebdae1ce5 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -181,7 +181,6 @@ export interface DocumentOptions { flexDirection?: "unset" | "row" | "column" | "row-reverse" | "column-reverse"; selectedIndex?: number; syntaxColor?: string; // can be applied to text for syntax highlighting all matches in the text - searchText?: string, //for searchbox searchQuery?: string, // for quersyBox filterQuery?: filterData, linearViewIsExpanded?: boolean; // is linear view expanded diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index a7cb29815..0e0942496 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -42,10 +42,10 @@ export class CurrentUserUtils { if (doc["template-button-query"] === undefined) { const queryTemplate = Docs.Create.MulticolumnDocument( [ - Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, title: "query", _height: 200 }), + Docs.Create.SearchDocument({ _viewType: CollectionViewType.Stacking, ignoreClick: true, forceActive: true, lockedPosition: true, title: "query", _height: 200 }), Docs.Create.FreeformDocument([], { title: "data", _height: 100, _LODdisable: true }) ], - { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } + { _width: 400, _height: 300, title: "queryView", _chromeStatus: "disabled", _xMargin: 3, _yMargin: 3, hideFilterView: true } ); queryTemplate.isTemplateDoc = makeTemplate(queryTemplate); doc["template-button-query"] = CurrentUserUtils.ficon({ @@ -628,7 +628,7 @@ export class CurrentUserUtils { doc["tabs-button-search"] = new PrefetchProxy(Docs.Create.ButtonDocument({ _width: 50, _height: 25, title: "Search", _fontSize: 10, letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)", - sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({_viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, + sourcePanel: new PrefetchProxy(Docs.Create.SearchDocument({ignoreClick: true, childDropAction: "alias", lockedPosition: true, _viewType: CollectionViewType.Stacking, title: "sidebar search stack", })) as any as Doc, searchFileTypes: new List([DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.VID, DocumentType.WEB, DocumentType.SCRIPTING]), targetContainer: new PrefetchProxy(sidebarContainer) as any as Doc, lockedPosition: true, diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b522f6d1..ca7db2cd4 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -261,20 +261,23 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); + + + const lastSel = Math.min(flattened.length - 1, this._searchIndex); + flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); + this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; + this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); + + console.log(this._searchIndex, length); if (this._searchIndex>1){ this._searchIndex+=-2; } else if (this._searchIndex===1){ this._searchIndex=length-1; } - else if (this._searchIndex===0){ + else if (this._searchIndex===0 && length!==1){ this._searchIndex=length-2; } - - const lastSel = Math.min(flattened.length - 1, this._searchIndex); - flattened.forEach((h: TextSelection, ind: number) => tr = tr.addMark(h.from, h.to, ind === lastSel ? activeMark : mark)); - this._searchIndex = ++this._searchIndex > flattened.length - 1 ? 0 : this._searchIndex; - this._editorView.dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(flattened[lastSel].from), tr.doc.resolve(flattened[lastSel].to))).scrollIntoView()); let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 37d358b02..d1e1818c2 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -315,6 +315,7 @@ export class SearchBox extends ViewBoxBaseComponent { const layout: string = StrCast(element.props.Document.layout); + console.log(layout); //checks if selected view (element) is a collection. if it is, adds to list to search through if (layout.indexOf("Collection") > -1) { //makes sure collections aren't added more than once @@ -391,13 +392,13 @@ export class SearchBox extends ViewBoxBaseComponent{ - console.log("Resubmitting search"); - this.submitSearch(); - }, 10000); + if (StrCast(this.props.Document.searchQuery)){ + if (this._timeout){clearTimeout(this._timeout); this._timeout=undefined}; + this._timeout= setTimeout(()=>{ + console.log("Resubmitting search"); + this.submitSearch(); + }, 60000); + } if (query !== "") { this._endIndex = 12; @@ -442,7 +443,7 @@ export class SearchBox extends ViewBoxBaseComponent { @@ -539,6 +549,7 @@ export class SearchBox extends ViewBoxBaseComponent key.substring(0, key.length - 2)) : []; + doc? console.log(Cast(doc.context, Doc)) : null; if (this.findCommonElements(hlights)){ } else{ @@ -619,7 +630,7 @@ export class SearchBox extends ViewBoxBaseComponent Date: Sun, 28 Jun 2020 19:09:12 -0400 Subject: some weird pdf css was causing .pdfViewer .page styles to get added when pdfs were not -interactive. This made the page jump on deselect. so changed pdfViewer csss labels to pdfViewerDash --- src/client/views/nodes/PDFBox.scss | 4 ++-- src/client/views/pdf/PDFViewer.scss | 20 ++++++++++---------- src/client/views/pdf/PDFViewer.tsx | 22 +++++++++++----------- 3 files changed, 23 insertions(+), 23 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index f55c4f7d6..c6a83b662 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -199,7 +199,7 @@ } .pdfBox { - .pdfViewer-text { + .pdfViewerDash-text { .textLayer { span { user-select: none; @@ -210,7 +210,7 @@ .pdfBox-interactive { pointer-events: all; - .pdfViewer-text { + .pdfViewerDash-text { .textLayer { span { user-select: text; diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index affffc44e..cfe0b3d4b 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -1,5 +1,5 @@ -.pdfViewer, .pdfViewer-interactive { +.pdfViewerDash, .pdfViewerDash-interactive { width: 100%; height: 100%; position: absolute; @@ -31,26 +31,26 @@ position: relative; border: unset; } - .pdfViewer-text-selected { + .pdfViewerDash-text-selected { .textLayer{ pointer-events: all; user-select: text; } } - .pdfViewer-text { + .pdfViewerDash-text { transform-origin: top left; .textLayer { will-change: transform; } } - .pdfViewer-dragAnnotationBox { + .pdfViewerDash-dragAnnotationBox { position:absolute; background-color: transparent; opacity: 0.1; } - .pdfViewer-overlay, .pdfViewer-overlay-inking { + .pdfViewerDash-overlay, .pdfViewerDash-overlay-inking { transform-origin: left top; position: absolute; top: 0px; @@ -58,11 +58,11 @@ display: inline-block; width:100%; } - .pdfViewer-overlay { + .pdfViewerDash-overlay { pointer-events: none; } - .pdfViewer-annotationLayer { + .pdfViewerDash-annotationLayer { position: absolute; transform-origin: left top; top: 0; @@ -70,12 +70,12 @@ pointer-events: none; mix-blend-mode: multiply; // bcz: makes text fuzzy! - .pdfViewer-annotationBox { + .pdfViewerDash-annotationBox { position: absolute; background-color: rgba(245, 230, 95, 0.616); } } - .pdfViewer-waiting { + .pdfViewerDash-waiting { width: 70%; height: 70%; margin : 15%; @@ -86,7 +86,7 @@ } } -.pdfViewer-interactive { +.pdfViewerDash-interactive { pointer-events: all; } \ No newline at end of file diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 9f40a3ad7..8185dd67f 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -357,7 +357,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent NumCast(a.y) - NumCast(b.y))[this.Index]); this.Document.searchIndex = this.Index; - this.Document.length=this.allAnnotations.length; + this.Document.length = this.allAnnotations.length; } @@ -426,7 +426,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { @@ -441,7 +441,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 10 || this._marqueeHeight > 10) { - const marquees = this._mainCont.current!.getElementsByClassName("pdfViewer-dragAnnotationBox"); + const marquees = this._mainCont.current!.getElementsByClassName("pdfViewerDash-dragAnnotationBox"); if (marquees && marquees.length) { // copy the marquee and convert it to a permanent annotation. const style = (marquees[0] as HTMLDivElement).style; const copy = document.createElement("div"); @@ -558,7 +558,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent + return
{this.nonDocAnnotations.sort((a, b) => NumCast(a.y) - NumCast(b.y)).map(anno => ) } @@ -718,13 +718,13 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling(); } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} - {this._showWaiting ? : (null)} + {this._showWaiting ? : (null)} ; } marqueeWidth = () => this._marqueeWidth; @@ -736,7 +736,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._zoomed; render() { TraceMobx(); - return
{ render() { - return !this.props.isMarqueeing() ? (null) :