diff options
| -rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBox.tsx | 10 | ||||
| -rw-r--r-- | src/client/views/pdf/PDFViewer.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/search/SearchBox.tsx | 32 | ||||
| -rw-r--r-- | src/client/views/search/SearchItem.tsx | 60 |
4 files changed, 77 insertions, 43 deletions
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<IViewerProps, PdfDocu private _scrollTopReactionDisposer?: IReactionDisposer; private _filterReactionDisposer?: IReactionDisposer; private _searchReactionDisposer?: IReactionDisposer; + private _searchReactionDisposer2?: IReactionDisposer; private _viewer: React.RefObject<HTMLDivElement> = React.createRef(); private _mainCont: React.RefObject<HTMLDivElement> = React.createRef(); private _selectionText: string = ""; @@ -145,6 +146,17 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu 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<IViewerProps, PdfDocu } @action prevAnnotation = () => { + 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<IViewerProps, PdfDocu 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); } @@ -403,7 +417,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu phraseSearch: true, query: searchString }); - console.log(this.Index); this.Document.searchIndex = this.Index; this.Document.length=this.allAnnotations.length; } @@ -419,7 +432,6 @@ export class PDFViewer extends ViewBoxAnnotatableComponent<IViewerProps, PdfDocu }; this._mainCont.current.addEventListener("pagesloaded", executeFind); this._mainCont.current.addEventListener("pagerendered", executeFind); - console.log(this.Index); this.Document.searchIndex = this.Index; this.Document.length=this.allAnnotations.length; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 5ec911221..596a0cac7 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -376,7 +376,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc if (reset){ this.layoutDoc._searchString=""; } - console.log(this.layoutDoc._searchString); this.dataDoc[this.fieldKey] = new List<Doc>([]); this.buckets=[]; this.new_buckets={}; @@ -430,7 +429,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc } let bucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: `default bucket`}); - bucket.targetDoc = bucket; bucket._viewType === CollectionViewType.Stacking; bucket._height=185; bucket.bucketfield = "results"; @@ -443,7 +441,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc let firstbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.firststring }); firstbucket._height=185; - firstbucket.targetDoc = firstbucket; firstbucket._viewType === CollectionViewType.Stacking; firstbucket.bucketfield = this.firststring; firstbucket.isBucket=true; @@ -456,7 +453,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc if (this.secondstring!==""){ let secondbucket = Docs.Create.StackingDocument([],{ _viewType:CollectionViewType.Stacking,title: this.secondstring }); secondbucket._height=185; - secondbucket.targetDoc = secondbucket; secondbucket._viewType === CollectionViewType.Stacking; secondbucket.bucketfield = this.secondstring; secondbucket.isBucket=true; @@ -622,7 +618,6 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc this._visibleElements = [<div className="no-result">No Search Results</div>]; //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<FieldViewProps, SearchBoxDoc } const highlights = Array.from([...Array.from(new Set(result[1]).values())]); let lines = new List<string>(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<FieldViewProps, SearchBoxDoc this.new_buckets[StrCast(result[0].type)]=this.new_buckets[StrCast(result[0].type)]+1; } const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - result[0].lines=new List<string>(result[2]); + + let lines = new List<string>(result[2]); + + result[0].lines= lines; result[0].highlighting=highlights.join(", "); if(i<this._visibleDocuments.length){ this._visibleDocuments[i]=result[0]; - result[0].targetDoc=result[0]; this._isSearch[i] = "search"; } } @@ -713,33 +709,30 @@ export class SearchBox extends ViewBoxBaseComponent<FieldViewProps, SearchBoxDoc let result = this._results[i]; if (!this.blockedTypes.includes(StrCast(result[0].type))){ if (this._isSearch[i] === "search" && (this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) { - console.log(StrCast(result[0].type)); if (StrCast(result[0].type)=== this.firststring && this.bucketcount[1]<3){ + result[0].parent= this.buckets![1]; Doc.AddDocToList(this.buckets![1], this.props.fieldKey, result[0]); this.bucketcount[1]+=1; - console.log("1 count") } else if (StrCast(result[0].type)=== this.secondstring && this.bucketcount[2]<3){ + result[0].parent= this.buckets![2]; Doc.AddDocToList(this.buckets![2], this.props.fieldKey, result[0]); this.bucketcount[2]+=1; - console.log("2 count") } else if (this.bucketcount[0]<3){ //Doc.AddDocToList(this.buckets![0], this.props.fieldKey, result[0]); //this.bucketcount[0]+=1; const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - result[0].lines=new List<string>(result[2]); + let lines = new List<string>(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<FieldViewProps, SearchBoxDoc if ((this._isSorted[i]===undefined ||this._isSorted[i]==="placeholder" )) { let result = this._results[i]; if (!this.blockedTypes.includes(StrCast(result[0].type))){ - const highlights = Array.from([...Array.from(new Set(result[1]).values())]); - result[0].lines=new List<string>(result[2]); + let lines = new List<string>(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<FieldViewProps, SearchSchem @computed get query() { return StrCast(this.lookupField("query")); } + private _oldHeight: number = 46; + componentDidMount() { + let parent: Doc |undefined = undefined; + let height = 0; + if (this.rootDoc.parent){ + parent = Cast(this.rootDoc.parent, Doc, null) as Doc; + height=(NumCast(parent._height)); + } this._reactionDisposer = reaction( () => 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<FieldViewProps, SearchSchem this.rootDoc.searchMatch = undefined; this._reactionDisposer && this._reactionDisposer(); this._reactionDisposer2 && this._reactionDisposer2(); + this._reactionDisposer3 && this._reactionDisposer3(); } @@ -203,6 +228,8 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem private _reactionDisposer?: IReactionDisposer; private _reactionDisposer2?: IReactionDisposer; + private _reactionDisposer3?: IReactionDisposer; + @computed get highlightPos(){return NumCast(this.rootDoc.searchIndex)} @@ -371,7 +398,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem } @computed get searchElementDoc() { return this.rootDoc; } - @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; } + // @computed get targetDoc() { return this.searchElementDoc?.targetDoc as Doc; } @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); } childLayoutTemplate = () => this.layoutDoc._viewType === CollectionViewType.Stacking ? this.searchItemTemplate: undefined; @@ -398,23 +425,20 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem @action returnLines(){ + if ((Cast(this.rootDoc.lines, listSpec("string")))!.length>1){ if (!this._displayLines) { - return <div style={{height:50, width: 10}} + console.log(Cast(this.rootDoc.lines, listSpec("string"))); + return <div style={{width: 10}} onPointerDown={action(() => { 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) => <div id={i.toString()} className="searchItem-highlighting">`${l}`</div>)} + {Cast(this.rootDoc.lines, listSpec("string"))!.filter((m, i) => i).map((l, i) => <div style={{overflow:"visible"}}id={i.toString()} className="searchItem-highlighting">{l}</div>)} </div>;; } - else { - return <button style={{padding:2}} onClick={action(() => { this._displayLines = false; - })} > - <FontAwesomeIcon icon="arrow-up" size="sm" /> - </button>; - } + } } //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); @@ -423,14 +447,21 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem returnButtons(){ return <div> - {this.returnLines()} + <div> + {this.rootDoc!.type === DocumentType.PDF? <button style={{padding:2}} onClick={action(() => { this._displayLines = false; + })} > + <FontAwesomeIcon icon="arrow-up" size="sm" /> + </button>: null} {`Instance ${NumCast(this.rootDoc.searchIndex)===0? NumCast(this.rootDoc.length):NumCast(this.rootDoc.searchIndex) } of ${NumCast(this.rootDoc.length)}`} <button onClick={this.nextHighlight} style={{padding:2}}> <FontAwesomeIcon icon="arrow-up" size="sm" /> </button> <button onClick={this.nextHighlight2} style={{padding:2}}> <FontAwesomeIcon icon="arrow-down" size="sm" /> - </button> + </button></div> + <div style={{background: "lightgrey"}}> + {this.returnLines()} + </div> </div> } @@ -472,6 +503,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem </div> } else { + console.log(this.rootDoc.highlighting); return <div className="searchItem-overview" onPointerDown={this.pointerDown} onContextMenu={this.onContextMenu}> <div ref={this._mainRef} className="searchItem" onPointerEnter={this.highlightDoc} onPointerLeave={this.unHighlightDoc}> <div className="searchItem-body" onClick={this.onClick}> @@ -480,7 +512,7 @@ export class SearchItem extends ViewBoxBaseComponent<FieldViewProps, SearchSchem <div className="searchItem-highlighting"> {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}</div> <div className={`icon-${this._displayLines ? "q" : "a"}`}> - {NumCast(this.rootDoc.length) > 1? this.returnButtons(): null} + {NumCast(this.rootDoc.length) > 1 ?this.returnButtons(): null} </div> </div> </div> |