From 78227f09b30db57c6f500bd2e2d02f43d133d1da Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 10 Jun 2020 18:23:27 -0400 Subject: highlights --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/client/views/nodes/formattedText') 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()); -- 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/formattedText') 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/formattedText') 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/formattedText') 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: Tue, 28 Jul 2020 15:08:56 -0700 Subject: fix recursion bug and make link turn blue --- src/client/views/nodes/AudioBox.scss | 2 +- src/client/views/nodes/AudioBox.tsx | 34 ++++++++++++++++++---- .../views/nodes/formattedText/FormattedTextBox.tsx | 24 +++++++++++++++ 3 files changed, 54 insertions(+), 6 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 7b0e50e60..6d52988bb 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -194,7 +194,7 @@ background: gray; border-radius: 50%; box-shadow: black 2px 2px 1px; - overflow: auto; + overflow: visible; cursor: pointer; .audiobox-marker { diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 0cab0fc61..02932baac 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -72,6 +72,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; + _first: boolean = false; private _isPointerDown = false; private _currMarker: any; @@ -128,6 +129,22 @@ export class AudioBox extends ViewBoxAnnotatableComponent SelectionManager.SelectedDocuments(), selected => { const sel = selected.length ? selected[0].props.Document : undefined; + // if (sel) { + // DocListCast(sel.links).map((l, i) => { + // let la1 = l.anchor1 as Doc; + // let la2 = l.anchor2 as Doc; + // let linkTime = NumCast(l.anchor2_timecode); + // if (Doc.AreProtosEqual(la1, this.dataDoc)) { + // la1 = l.anchor2 as Doc; + // la2 = l.anchor1 as Doc; + // linkTime = NumCast(l.anchor1_timecode); + // } + // console.log(linkTime); + // if (linkTime) { + // this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFrom(linkTime); + // } + // }); + // } this.layoutDoc.playOnSelect && this.recordingStart && sel && sel.creationDate && !Doc.AreProtosEqual(sel, this.props.Document) && this.playFromTime(DateCast(sel.creationDate).date.getTime()); this.layoutDoc.playOnSelect && this.recordingStart && !sel && this.pause(); }); @@ -186,7 +203,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.pause(), (this._duration) * 1000); } - } else { + } else { // this is getting called because time is greater than duration this.pause(); } } @@ -226,9 +243,9 @@ export class AudioBox extends ViewBoxAnnotatableComponent { const funcs: ContextMenuProps[] = []; funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when document selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); - funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }) - funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }) - funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }) + funcs.push({ description: (this.layoutDoc.hideMarkers ? "Don't hide" : "Hide") + " markers", event: () => this.layoutDoc.hideMarkers = !this.layoutDoc.hideMarkers, icon: "expand-arrows-alt" }); + funcs.push({ description: (this.layoutDoc.hideLabels ? "Don't hide" : "Hide") + " labels", event: () => this.layoutDoc.hideLabels = !this.layoutDoc.hideLabels, icon: "expand-arrows-alt" }); + funcs.push({ description: (this.layoutDoc.playOnClick ? "Don't play" : "Play") + " onClick", event: () => this.layoutDoc.playOnClick = !this.layoutDoc.playOnClick, icon: "expand-arrows-alt" }); ContextMenu.Instance?.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -421,12 +438,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent { console.log("called"); let counter = 0; - if (i == 0) { + if (this._first) { this._markers = []; + this._first = false; } for (let i = 0; i < this._markers.length; i++) { if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { @@ -508,9 +527,14 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + this._first = true; + } + render() { //trace(); const interactive = this.active() ? "-interactive" : ""; + this.reset(); return
{!this.path ?
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 6b6fc5da2..b1d9be73b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1295,6 +1295,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } e.stopPropagation(); if (e.key === "Tab" || e.key === "Enter") { + // console.log(this._recording); + // if (this._editorView) { + // const state = this._editorView.state; + // const now = Date.now(); + // let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); + // if (!this._break && state.selection.to !== state.selection.from) { + // for (let i = state.selection.from; i <= state.selection.to; i++) { + // const pos = state.doc.resolve(i); + // const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); + // if (um) { + // mark = um; + // break; + // } + // } + // } + // const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); + // this._break = false; + // let value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000; + // //let value = "[0:02]"; + // const from = state.selection.from; + // const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); + + // this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); + // } e.preventDefault(); } if (e.key === " " || this._lastTimedMark?.attrs.userid !== Doc.CurrentUserEmail) { -- cgit v1.2.3-70-g09d2 From 28ab7ecd633e92619adfcbd1ce3ca72ddbba7ea8 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Wed, 29 Jul 2020 01:05:43 -0400 Subject: fixed up dot anchors on audio labels/anchors --- src/client/documents/Documents.ts | 5 ++++- .../CollectionFreeFormLinkView.tsx | 6 +++--- src/client/views/nodes/AudioBox.tsx | 25 +++++++++------------- src/client/views/nodes/DocumentView.tsx | 2 +- src/client/views/nodes/LinkAnchorBox.tsx | 2 +- src/client/views/nodes/formattedText/marks_rts.ts | 6 +++--- 6 files changed, 22 insertions(+), 24 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index fb9f6fe46..122383744 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -192,6 +192,7 @@ export interface DocumentOptions { filterQuery?: string; linearViewIsExpanded?: boolean; // is linear view expanded isLabel?: boolean; // whether the document is a label or not (video / audio) + useLinkSmallAnchor?: boolean; // whether links to this document should use a miniature linkAnchorBox audioStart?: number; // the time frame where the audio should begin playing audioEnd?: number; // the time frame where the audio should stop playing } @@ -627,7 +628,7 @@ export namespace Docs { } export function AudioDocument(url: string, options: DocumentOptions = {}) { - const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), options); + const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { hideLinkButton: true, useLinkSmallAnchor: true, ...options }); Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); return instance; } @@ -925,6 +926,8 @@ export namespace DocUtils { if (target.doc === Doc.UserDoc()) return undefined; const linkDoc = Docs.Create.LinkDocument(source, target, { linkRelationship, layoutKey: "layout_linkView", description }, id); + Doc.GetProto(linkDoc)["anchor1-useLinkSmallAnchor"] = source.doc.useLinkSmallAnchor; + Doc.GetProto(linkDoc)["anchor2-useLinkSmallAnchor"] = target.doc.useLinkSmallAnchor; linkDoc.linkDisplay = true; linkDoc.hidden = true; linkDoc.layout_linkView = Cast(Cast(Doc.UserDoc()["template-button-link"], Doc, null).dragFactory, Doc, null); diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index bfe569853..3a2979696 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -54,15 +54,15 @@ export class CollectionFreeFormLinkView extends React.Component ele.getAttribute("targetids")?.includes(AanchorId)); - const targetBhyperlink = linkEles.find((ele: any) => ele.getAttribute("targetids")?.includes(BanchorId)); + const targetAhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(AanchorId)); + const targetBhyperlink = linkEles.find((ele: any) => ele.dataset.targetids?.includes(BanchorId)); if (!targetBhyperlink) { this.props.A.rootDoc[afield + "_x"] = (apt.point.x - abounds.left) / abounds.width * 100; this.props.A.rootDoc[afield + "_y"] = (apt.point.y - abounds.top) / abounds.height * 100; diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 02932baac..34f87fc10 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -355,7 +355,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent e.stopPropagation()}> {/*
*/} @@ -672,15 +665,17 @@ export class AudioBox extends ViewBoxAnnotatableComponent - {/*
*/} -
Doc.linkFollowHighlight(la1)} + backgroundColor={returnTransparent} + ContentScaling={returnOne} + forcedBackgroundColor={returnTransparent} + pointerEvents={false} + LayoutTemplate={undefined} + LayoutTemplateString={LinkAnchorBox.LayoutString(`anchor${Doc.LinkEndpoint(l, la2)}`)} + /> +
Doc.linkFollowHighlight(la1)} onPointerDown={e => { if (e.button === 0 && !e.ctrlKey) { const wasPaused = this.audioState === "paused"; this.playFrom(linkTime); this.pause(); e.stopPropagation(); e.preventDefault(); } }} />
; })} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 74634f837..77932d58e 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -1098,7 +1098,7 @@ export class DocumentView extends DocComponent(Docu return (this.props.treeViewDoc && this.props.LayoutTemplateString) || // render nothing for: tree view anchor dots this.layoutDoc.presBox || // presentationbox nodes this.props.dontRegisterView ? (null) : // view that are not registered - DocUtils.FilterDocs(LinkManager.Instance.getAllDirectLinks(this.Document), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink).map((d, i) => + DocUtils.FilterDocs(LinkManager.Instance.getAllDirectLinks(this.Document), this.props.docFilters(), []).filter(d => !d.hidden && this.isNonTemporalLink(d)).map((d, i) => -- cgit v1.2.3-70-g09d2 From a1950ec49c56f5f9e2612da7e60a1e2615209386 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Fri, 31 Jul 2020 18:25:39 -0400 Subject: bugfix --- src/client/views/DocComponent.tsx | 2 + src/client/views/GlobalKeyHandler.ts | 2 + src/client/views/collections/CollectionView.tsx | 4 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 28 ++++----- src/client/views/search/SearchBox.tsx | 69 ++++++++++++++++------ 5 files changed, 71 insertions(+), 34 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 9b9a28f0f..106250af4 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -146,6 +146,8 @@ export function ViewBoxAnnotatableComponent

doc.context = this.props.Document); targetDataDoc[this.annotationKey] = new List([...docList, ...added]); targetDataDoc[this.annotationKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + } } return true; diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts index c85849adb..2e5c018ba 100644 --- a/src/client/views/GlobalKeyHandler.ts +++ b/src/client/views/GlobalKeyHandler.ts @@ -307,6 +307,8 @@ export default class KeyManager { undoBatch(() => { targetDataDoc[fieldKey] = new List([...docList, ...added]); targetDataDoc[fieldKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + })(); } } diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index 0178cc2e9..f9dc666d6 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -159,6 +159,8 @@ export class CollectionView extends Touchable Doc.AddDocToList(Cast(Doc.UserDoc().myCatalog, Doc, null), "data", add)); targetDataDoc[this.props.fieldKey] = new List([...docList, ...added]); targetDataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now())); + targetDataDoc["lastModified"] = new DateField(new Date(Date.now())); + } } return true; @@ -554,7 +556,7 @@ export class CollectionView extends Touchable {this.showIsTagged()} -

+
{this.collectionViewType !== undefined ? this.SubView(this.collectionViewType, props) : (null)}
{this.lightbox(DocListCast(this.props.Document[this.props.fieldKey]).filter(d => d.type === DocumentType.IMG).map(d => diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 11f25a208..71ba51039 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -228,7 +228,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (!this.dataDoc[AclSym]) { if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) { this._applyingChange = true; - (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))); + (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))) && (this.dataDoc["lastModified"] = new DateField(new Date(Date.now()))); if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) if (json !== curLayout?.Data) { !curText && tx.storedMarks?.map(m => m.type.name === "pFontSize" && (Doc.UserDoc().fontSize = this.layoutDoc._fontSize = m.attrs.fontSize)); @@ -280,7 +280,7 @@ 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); @@ -291,30 +291,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp 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; + if (this._searchIndex > 1) { + this._searchIndex += -2; } - else if (this._searchIndex===1){ - this._searchIndex=length-1; + else if (this._searchIndex === 1) { + this._searchIndex = length - 1; } - else if (this._searchIndex===0 && length!==1){ - this._searchIndex=length-2; + else if (this._searchIndex === 0 && length !== 1) { + this._searchIndex = length - 2; } let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; - Doc.GetProto(this.dataDoc).length=length; + Doc.GetProto(this.dataDoc).length = length; } } - public highlightSearchTerms2 = (terms: string[])=> { + 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); @@ -323,7 +323,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; - res.map(r => r.map(h => flattened.push(h))); + 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; @@ -331,7 +331,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp let index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; - Doc.GetProto(this.dataDoc).length=length; + Doc.GetProto(this.dataDoc).length = length; } } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b17751d44..005f7d1af 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -40,6 +40,7 @@ import * as _ from "lodash"; import { checkIfStateModificationsAreAllowed } from 'mobx/lib/internal'; import { SchemaHeaderField } from '../../../fields/SchemaHeaderField'; import { indexOf } from 'lodash'; +import { protocol } from 'socket.io-client'; library.add(faTimes); @@ -379,22 +380,42 @@ export class SearchBox extends ViewBoxBaseComponent { - let hlights: string[] = []; - const protos = Doc.GetAllPrototypes(d); - let proto = protos[protos.length - 2]; - Object.keys(proto).forEach(key => { - if (StrCast(d[key]).includes(query)) { - console.log(key, d[key]); - hlights.push(key); + let newarray: Doc[] = []; + + while (docs.length > 0) { + console.log("iteration"); + newarray = []; + docs.forEach((d) => { + console.log(d); + if (d.data != undefined) { + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + console.log(newdoc); + newarray.push(newdoc); + + }); } + + + let hlights: string[] = []; + + const protos = Doc.GetAllPrototypes(d); + let proto = protos[protos.length - 1]; + protos.forEach(proto => { + Object.keys(proto).forEach(key => { + // console.log(key, d[key]); + if (StrCast(d[key]).includes(query) && !hlights.includes(key)) { + hlights.push(key); + } + }) + }); + if (hlights.length > 0) { + found.push([d, hlights, []]); + docsforFilter.push(d); + }; }); - if (hlights.length > 0) { - found.push([d, hlights, []]); - docsforFilter.push(d); - }; - }); - console.log(found); + docs = newarray; + } this._results = found; this.docsforfilter = docsforFilter; if (this.filter === true) { @@ -408,6 +429,20 @@ export class SearchBox extends ViewBoxBaseComponent Object.keys(proto).forEach(key => keys[key] = false)); + return Array.from(Object.keys(keys)); + } + applyBasicFieldFilters(query: string) { let finalQuery = ""; @@ -669,7 +704,7 @@ export class SearchBox extends ViewBoxBaseComponent(["title", "author", "creationDate"]); + let headers = new Set(["title", "author", "lastModified"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; @@ -734,12 +769,8 @@ export class SearchBox extends ViewBoxBaseComponent Date: Mon, 3 Aug 2020 12:37:32 -0700 Subject: added timestamps and added delete for markers and changed the way markers are rendered --- src/client/documents/Documents.ts | 2 +- src/client/views/nodes/AudioBox.scss | 1 + src/client/views/nodes/AudioBox.tsx | 113 ++++++++++++------- .../views/nodes/formattedText/FormattedTextBox.tsx | 124 ++++++++++++++++----- 4 files changed, 172 insertions(+), 68 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 88f470576..402f3e82c 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -628,7 +628,7 @@ export namespace Docs { } export function AudioDocument(url: string, options: DocumentOptions = {}) { - const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { ...options }); // hideLinkButton: false, useLinkSmallAnchor: false, + const instance = InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(new URL(url)), { useLinkSmallAnchor: true, ...options }); // hideLinkButton: false, useLinkSmallAnchor: false, Doc.GetProto(instance).backgroundColor = ComputedField.MakeFunction("this._audioState === 'playing' ? 'green':'gray'"); return instance; } diff --git a/src/client/views/nodes/AudioBox.scss b/src/client/views/nodes/AudioBox.scss index 35ab5da8b..0ea4b37cb 100644 --- a/src/client/views/nodes/AudioBox.scss +++ b/src/client/views/nodes/AudioBox.scss @@ -148,6 +148,7 @@ width: 100%; height: 100%; overflow: hidden; + z-index: 0; } .audiobox-linker, diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 3d1932883..7c90547ef 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -75,6 +75,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _first: boolean = false; _buckets: Array = new Array(); + _count: Array = []; private _isPointerDown = false; private _currMarker: any; @@ -516,53 +517,74 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + const increment = NumCast(this.layoutDoc.duration) / 500; + this._count = []; + for (let i = 0; i < 500; i++) { + this._count.push([increment * i, 0]) + } + + } + // Probably need a better way to format - isOverlap = (m: any, i: number) => { - console.log("called"); - let counter = 0; + // isOverlap = (m: any, i: number) => { + // console.log("called"); + // let counter = 0; + // if (this._first) { + // this._markers = []; + // this._first = false; + // } + // for (let i = 0; i < this._markers.length; i++) { + // if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { + // counter++; + // console.log(counter); + // } + // } + + // if (this.dataDoc.markerAmount < counter) { + // this.dataDoc.markerAmount = counter; + // } + + // this._markers.push(m); + + // return counter; + // } + + isOverlap = (m: any) => { if (this._first) { - this._markers = []; this._first = false; - } - for (let i = 0; i < this._markers.length; i++) { - if ((m.audioEnd > this._markers[i].audioStart && m.audioStart < this._markers[i].audioEnd)) { - counter++; - console.log(counter); - } + this.markers(); + console.log(this._count); } - if (this.dataDoc.markerAmount < counter) { - this.dataDoc.markerAmount = counter; - } - this._markers.push(m); + let max = 0 - return counter; - } + for (let i = 0; i < 500; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) { + this._count[i][1]++; - // isOverlap = (m: any) => { - // if (this._markers.length < 1) { - // this._markers = new Array(Math.round(this.dataDoc.duration)).fill(0); - // } - // console.log(this._markers); - // let max = 0 + if (this._count[i][1] > max) { + max = this._count[i][1]; + } + } - // for (let i = Math.round(m.audioStart); i <= Math.round(m.audioEnd); i++) { - // this._markers[i] = this._markers[i] + 1; - // console.log(this._markers[i]); - // if (this._markers[i] > max) { - // max = this._markers[i]; - // } - // } + } - // console.log(max); - // if (this.dataDoc.markerAmount < max) { - // this.dataDoc.markerAmount = max; - // } - // return max - // } + for (let i = 0; i < 500; i++) { + if (this._count[i][0] >= m.audioStart && this._count[i][0] <= m.audioEnd) { + this._count[i][1] = max; + } + + } + + if (this.dataDoc.markerAmount < max) { + this.dataDoc.markerAmount = max; + } + return max - 1 + } formatTime = (time: number) => { const hours = Math.floor(time / 60 / 60); @@ -609,6 +631,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent -
+
{console.log(this.peaks)}
@@ -690,7 +719,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} > +
{ this.playFrom(NumCast(m.audioStart), NumCast(m.audioEnd)); e.stopPropagation() }} >
this.onPointerDown(e, m, true)}>
- {this.formatTime(Math.round(NumCast(this.layoutDoc.duration)))} + {this.formatTime(Math.round(NumCast(this.dataDoc.duration)))}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b1d9be73b..91940466f 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -2,7 +2,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import { faEdit, faSmile, faTextHeight, faUpload } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { isEqual } from "lodash"; -import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction } from "mobx"; +import { action, computed, IReactionDisposer, Lambda, observable, reaction, runInAction, trace } from "mobx"; import { observer } from "mobx-react"; import { baseKeymap, selectAll } from "prosemirror-commands"; import { history } from "prosemirror-history"; @@ -93,6 +93,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp private _undoTyping?: UndoManager.Batch; private _disposers: { [name: string]: IReactionDisposer } = {}; private _dropDisposer?: DragManager.DragDropDisposer; + private _first: Boolean = true; + private _recordingStart: number = 0; + private _currentTime: number = 0; + private _linkTime: number | null = null; + private _pause: boolean = false; @computed get _recording() { return this.dataDoc.audioState === "recording"; } set _recording(value) { this.dataDoc.audioState = value ? "recording" : undefined; } @@ -140,6 +145,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp super(props); FormattedTextBox.Instance = this; this.updateHighlights(); + this._recordingStart = Date.now(); + this.layoutDoc._timeStampOnEnter = true; } public get CurrentDiv(): HTMLDivElement { return this._ref.current!; } @@ -197,9 +204,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } dispatchTransaction = (tx: Transaction) => { + let timeStamp; + clearTimeout(timeStamp); + console.log("hi"); if (this._editorView) { + const metadata = tx.selection.$from.marks().find((m: Mark) => m.type === schema.marks.metadata); if (metadata) { + const range = tx.selection.$from.blockRange(tx.selection.$to); let text = range ? tx.doc.textBetween(range.start, range.end) : ""; let textEndSelection = tx.selection.to; @@ -221,6 +233,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.dataDoc[key] = value; } } + const state = this._editorView.state.apply(tx); this._editorView.updateState(state); (tx.storedMarks && !this._editorView.state.storedMarks) && (this._editorView.state.storedMarks = tx.storedMarks); @@ -234,19 +247,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const json = JSON.stringify(state.toJSON()); let unchanged = true; const effectiveAcl = GetEffectiveAcl(this.dataDoc); + + if (effectiveAcl === AclEdit || effectiveAcl === AclAdmin) { if (!this._applyingChange && json.replace(/"selection":.*/, "") !== curProto?.Data.replace(/"selection":.*/, "")) { this._applyingChange = true; (curText !== Cast(this.dataDoc[this.fieldKey], RichTextField)?.Text) && (this.dataDoc[this.props.fieldKey + "-lastModified"] = new DateField(new Date(Date.now()))); if ((!curTemp && !curProto) || curText || curLayout?.Data.includes("dash")) { // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended) if (json.replace(/"selection":.*/, "") !== curLayout?.Data.replace(/"selection":.*/, "")) { + console.log("type"); + if (!this._pause && !this.layoutDoc._timeStampOnEnter) { + console.log("started"); + timeStamp = setTimeout(() => this.pause(), 10 * 1000); + } + + if (this._pause) { + this._pause = false; + this.insertTime(); + } !curText && tx.storedMarks?.map(m => m.type.name === "pFontSize" && (Doc.UserDoc().fontSize = this.layoutDoc._fontSize = m.attrs.fontSize)); !curText && tx.storedMarks?.map(m => m.type.name === "pFontFamily" && (Doc.UserDoc().fontFamily = this.layoutDoc._fontFamily = m.attrs.fontFamily)); this.dataDoc[this.props.fieldKey] = new RichTextField(json, curText); this.dataDoc[this.props.fieldKey + "-noTemplate"] = (curTemp?.Text || "") !== curText; // mark the data field as being split from the template if it has been edited ScriptCast(this.layoutDoc.onTextChanged, null)?.script.run({ this: this.layoutDoc, self: this.rootDoc, text: curText }); unchanged = false; + } + } else { // if we've deleted all the text in a note driven by a template, then restore the template data this.dataDoc[this.props.fieldKey] = undefined; this._editorView.updateState(EditorState.fromJSON(this.config, JSON.parse((curProto || curTemp).Data))); @@ -260,6 +287,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } } else { + const json = JSON.parse(Cast(this.dataDoc[this.fieldKey], RichTextField)?.Data!); json.selection = state.toJSON().selection; this._editorView.updateState(EditorState.fromJSON(this.config, json)); @@ -267,6 +295,66 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } + pause = () => this._pause = true; + + formatTime = (time: number) => { + const hours = Math.floor(time / 60 / 60); + const minutes = Math.floor(time / 60) - (hours * 60); + const seconds = time % 60; + + return hours.toString().padStart(2, '0') + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); + } + + insertTime = () => { + let linkTime; + if (this._first) { + this._first = false; + DocListCast(this.dataDoc.links).map((l, i) => { + let la1 = l.anchor1 as Doc; + let la2 = l.anchor2 as Doc; + this._linkTime = NumCast(l.anchor2_timecode); + if (Doc.AreProtosEqual(la2, this.dataDoc)) { + la1 = l.anchor2 as Doc; + la2 = l.anchor1 as Doc; + this._linkTime = NumCast(l.anchor1_timecode); + } + + }) + + + + } + this._currentTime = Date.now(); + let time; + console.log(this._linkTime); + this._linkTime ? time = this.formatTime(Math.round(this._linkTime + this._currentTime / 1000 - this._recordingStart / 1000)) : time = null; + + if (this._editorView) { + const state = this._editorView.state; + const now = Date.now(); + let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); + if (!this._break && state.selection.to !== state.selection.from) { + for (let i = state.selection.from; i <= state.selection.to; i++) { + const pos = state.doc.resolve(i); + const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); + if (um) { + mark = um; + break; + } + } + } + if (time) { + let value = ""; + this._break = false; + value = this.layoutDoc._timeStampOnEnter ? "[" + time + "] " : "\n" + "[" + time + "] "; + console.log(value); + const from = state.selection.from; + const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); + this._editorView.dispatch(this._editorView.state.tr.insertText(value)); + } + } + } + updateTitle = () => { if ((this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing StrCast(this.dataDoc.title).startsWith("-") && this._editorView && !this.rootDoc.customTitle) { @@ -501,6 +589,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp uicontrols.push({ description: `${this.layoutDoc._showSidebar ? "Hide" : "Show"} Sidebar`, event: () => this.layoutDoc._showSidebar = !this.layoutDoc._showSidebar, icon: "expand-arrows-alt" }); uicontrols.push({ description: `${this.layoutDoc._showAudio ? "Hide" : "Show"} Dictation Icon`, event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" }); uicontrols.push({ description: "Show Highlights...", noexpand: true, subitems: highlighting, icon: "hand-point-right" }); + uicontrols.push({ description: `Create TimeStamp When ${this.layoutDoc._timeStampOnEnter ? "Pause" : "Enter"}`, event: () => this.layoutDoc._timeStampOnEnter = !this.layoutDoc._timeStampOnEnter, icon: "expand-arrows-alt" }); !Doc.UserDoc().noviceMode && uicontrols.push({ description: "Broadcast Message", event: () => DocServer.GetRefField("rtfProto").then(proto => proto instanceof Doc && (proto.BROADCAST_MESSAGE = Cast(this.rootDoc[this.fieldKey], RichTextField)?.Text)), icon: "expand-arrows-alt" @@ -594,6 +683,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); this._break = false; value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000 + value; + console.log(value); const from = state.selection.from; const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); @@ -1295,30 +1385,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } e.stopPropagation(); if (e.key === "Tab" || e.key === "Enter") { - // console.log(this._recording); - // if (this._editorView) { - // const state = this._editorView.state; - // const now = Date.now(); - // let mark = schema.marks.user_mark.create({ userid: Doc.CurrentUserEmail, modified: Math.floor(now / 1000) }); - // if (!this._break && state.selection.to !== state.selection.from) { - // for (let i = state.selection.from; i <= state.selection.to; i++) { - // const pos = state.doc.resolve(i); - // const um = Array.from(pos.marks()).find(m => m.type === schema.marks.user_mark); - // if (um) { - // mark = um; - // break; - // } - // } - // } - // const recordingStart = DateCast(this.props.Document.recordingStart).date.getTime(); - // this._break = false; - // let value = "" + (mark.attrs.modified * 1000 - recordingStart) / 1000; - // //let value = "[0:02]"; - // const from = state.selection.from; - // const inserted = state.tr.insertText(value).addMark(from, from + value.length + 1, mark); - - // this._editorView.dispatch(inserted.setSelection(TextSelection.create(inserted.doc, from, from + value.length + 1))); - // } + if (e.key === "Enter" && this.layoutDoc._timeStampOnEnter) { + this.insertTime(); + } e.preventDefault(); } if (e.key === " " || this._lastTimedMark?.attrs.userid !== Doc.CurrentUserEmail) { @@ -1371,6 +1440,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp @computed get sidebarColor() { return StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], StrCast(this.layoutDoc[this.props.fieldKey + "-backgroundColor"], "transparent")); } render() { TraceMobx(); + trace(); + // if (this.props.Document.recordingStart) { + // console.log(DateCast(this.props.Document.recordingStart).date.getTime()); + // } + const scale = this.props.ContentScaling() * NumCast(this.layoutDoc._viewScale, 1); const rounded = StrCast(this.layoutDoc.borderRounding) === "100%" ? "-rounded" : ""; const interactive = Doc.GetSelectedTool() === InkTool.None && !this.layoutDoc.isBackground; -- cgit v1.2.3-70-g09d2 From 5afb1157ee888a46df3074ac1445966f514aa372 Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 4 Aug 2020 00:40:35 -0400 Subject: fixed joe k;lm --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index e95a4ccd2..79cf5c5fd 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -270,7 +270,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if ((this.props.Document.isTemplateForField === "text" || !this.props.Document.isTemplateForField) && // only update the title if the data document's data field is changing StrCast(this.dataDoc.title).startsWith("-") && this._editorView && !this.rootDoc.customTitle) { let node = this._editorView.state.doc; - while (node.firstChild) node = node.firstChild; + while (node.firstChild && node.firstChild.type.name !== "text") node = node.firstChild; const str = node.textContent; const titlestr = str.substr(0, Math.min(40, str.length)); this.dataDoc.title = "-" + titlestr + (str.length > 40 ? "..." : ""); -- cgit v1.2.3-70-g09d2 From e83fd812ed3798a7e7c22ad132a2f9e8dccaa76c Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Tue, 4 Aug 2020 22:05:30 -0400 Subject: changes --- src/client/documents/Documents.ts | 14 +- src/client/util/CurrentUserUtils.ts | 12 +- src/client/views/SearchDocBox.tsx | 428 ---------------- .../views/collections/CollectionSchemaCells.tsx | 84 +++- .../views/collections/CollectionSchemaHeaders.tsx | 8 +- .../views/collections/CollectionSchemaView.scss | 2 +- src/client/views/collections/CollectionSubView.tsx | 53 +- src/client/views/collections/SchemaTable.tsx | 47 +- .../collectionFreeForm/PropertiesView.tsx | 2 +- src/client/views/nodes/DocumentContentsView.tsx | 3 +- src/client/views/nodes/LabelBox.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 1 - src/client/views/search/SearchBox.tsx | 419 +++++----------- src/client/views/search/SearchItem.scss | 186 ------- src/client/views/search/SearchItem.tsx | 556 --------------------- 15 files changed, 300 insertions(+), 1517 deletions(-) delete mode 100644 src/client/views/SearchDocBox.tsx delete mode 100644 src/client/views/search/SearchItem.scss delete mode 100644 src/client/views/search/SearchItem.tsx (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e6eaaad60..b809a73b7 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -22,8 +22,7 @@ import { LinkManager } from "../util/LinkManager"; import { Scripting } from "../util/Scripting"; import { UndoManager } from "../util/UndoManager"; import { DocumentType } from "./DocumentTypes"; -import { SearchItem } from "../views/search/SearchItem"; -import { SearchBox, filterData } from "../views/search/SearchBox"; +import { SearchBox } from "../views/search/SearchBox"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { CollectionView, CollectionViewType } from "../views/collections/CollectionView"; import { ContextMenu } from "../views/ContextMenu"; @@ -48,7 +47,6 @@ import { VideoBox } from "../views/nodes/VideoBox"; import { WebBox } from "../views/nodes/WebBox"; import { PresElementBox } from "../views/presentationview/PresElementBox"; import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo"; -import { DocumentType } from "./DocumentTypes"; import { Networking } from "../Network"; import { Upload } from "../../server/SharedMediaTypes"; const path = require('path'); @@ -191,8 +189,7 @@ 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 - searchQuery?: string, // for quersyBox - filterQuery?: filterData, + searchQuery?: string; // for quersyBox linearViewIsExpanded?: boolean; // is linear view expanded border?: string; //for searchbox hovercolor?: string; @@ -316,9 +313,6 @@ export namespace Docs { [DocumentType.PRESELEMENT, { layout: { view: PresElementBox, dataField: defaultDataKey } }], - [DocumentType.SEARCHITEM, { - layout: { view: SearchItem, dataField: defaultDataKey } - }], [DocumentType.INK, { layout: { view: InkingStroke, dataField: defaultDataKey }, options: { backgroundColor: "transparent" } @@ -803,10 +797,6 @@ 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/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 84cd4823b..cd8c09a0e 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -543,7 +543,7 @@ export class CurrentUserUtils { btn.color = "white"; btn._backgroundColor = ""; })); - }) + }); }); return doc.menuStack as Doc; } @@ -761,16 +761,6 @@ export class CurrentUserUtils { } } - static setupSidebarContainer(doc: Doc) { - if (doc["sidebar"] === undefined) { - const sidebarContainer = new Doc(); - sidebarContainer._chromeStatus = "disabled"; - sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()"); - doc["sidebar"] = new PrefetchProxy(sidebarContainer); - } - return doc["sidebar"] as Doc; - } - // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { await CurrentUserUtils.setupToolsBtnPanel(doc); diff --git a/src/client/views/SearchDocBox.tsx b/src/client/views/SearchDocBox.tsx deleted file mode 100644 index 084f952a3..000000000 --- a/src/client/views/SearchDocBox.tsx +++ /dev/null @@ -1,428 +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 "../../fields/Doc"; -import { Id } from "../../fields/FieldSymbols"; -import { BoolCast, Cast, NumCast, StrCast } from "../../fields/Types"; -import { returnFalse, returnZero } 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(() => { - 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) { - const newdocs = await this.getAllResults(this.query); - const things = newdocs.docs; - runInAction(() => { - this.content = Docs.Create.TreeDocument(things, { _width: 200, _height: 400, _chromeStatus: "disabled", title: `Search Docs:` + this.query }); - }); - } - - - //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) => { - if (e.key === "Enter") { - const newdocs = await this.getAllResults(this.query); - this.content = Docs.Create.TreeDocument(newdocs.docs, { _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); - 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({ _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.content ? (null) : ( -
- - -
this.editingMetadata = !this.editingMetadata)} - /> -
- ""} - /> -
-
- ); - } - -} \ No newline at end of file diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index ecd20eb06..6e19bb029 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -242,7 +242,7 @@ export class CollectionSchemaCell extends React.Component { //
// ); trace(); - let positions = []; + const positions = []; if (StrCast(this.props.Document._searchString) !== "") { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); let term = ""; @@ -257,7 +257,7 @@ export class CollectionSchemaCell extends React.Component { term = String(NumCast(cfield)); } } - let search = StrCast(this.props.Document._searchString) + let search = StrCast(this.props.Document._searchString); let start = term.indexOf(search) as number; let tally = 0; if (start !== -1) { @@ -873,3 +873,83 @@ export class CollectionSchemaCheckboxCell extends CollectionSchemaCell { ); } } + + +@observer +export class CollectionSchemaButtons extends CollectionSchemaCell { + + render() { + // const reference = React.createRef(); + // const onItemDown = (e: React.PointerEvent) => { + // (!this.props.CollectionView || !this.props.CollectionView.props.isSelected() ? undefined : + // SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e)); + // }; + let doc = this.props.rowProps.original; + let buttons =
+
; + const type = StrCast(doc.type); + console.log(StrCast(doc.type)); + if (type === "pdf") { + buttons =
+ } + else if (type !== "rtf") { + console.log("sad"); + buttons = undefined; + } + + if (BoolCast(this.props.Document._searchDoc) === true) { + + } + else { + buttons = undefined; + } + + return ( +
{buttons}
+ ); + } +} + diff --git a/src/client/views/collections/CollectionSchemaHeaders.tsx b/src/client/views/collections/CollectionSchemaHeaders.tsx index 5d7ab2c61..e65adcf76 100644 --- a/src/client/views/collections/CollectionSchemaHeaders.tsx +++ b/src/client/views/collections/CollectionSchemaHeaders.tsx @@ -302,7 +302,7 @@ export class KeysDropdown extends React.Component { @action onSelect = (key: string): void => { if (key.slice(0, this._key.length) === this._key && this._key !== key) { - let filter = key.slice(this._key.length - key.length); + const filter = key.slice(this._key.length - key.length); this.props.onSelect(this._key, this._key, this.props.addNew, filter); } else { @@ -395,12 +395,10 @@ export class KeysDropdown extends React.Component { renderFilterOptions = (): JSX.Element[] | JSX.Element => { if (!this._isOpen) return <>; - const keyOptions: string[] = []; - console.log(this._searchTerm.slice(this._key.length)) - let temp = this._searchTerm.slice(this._key.length); + const temp = this._searchTerm.slice(this._key.length); this.props.docs?.forEach((doc) => { - let key = StrCast(doc[this._key]); + const key = StrCast(doc[this._key]); if (keyOptions.includes(key) === false && key.includes(temp)) { keyOptions.push(key); } diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss index 93878d799..2dcd6d6c0 100644 --- a/src/client/views/collections/CollectionSchemaView.scss +++ b/src/client/views/collections/CollectionSchemaView.scss @@ -93,7 +93,7 @@ } .rt-tbody { - width: calc(100% - 2px); + width: 100%; direction: rtl; overflow: visible; } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 88241f519..bf3129a8a 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -130,9 +130,60 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: let childDocs = viewSpecScript ? docs.filter(d => viewSpecScript.script.run({ doc: d }, console.log).result) : docs; const searchDocs = DocListCast(this.props.Document._searchDocs); + // if (searchDocs !== undefined && searchDocs.length > 0) { + // let newdocs: Doc[] = []; + // childDocs.forEach((el) => { + // searchDocs.includes(el) ? newdocs.push(el) : undefined; + // }); + // childDocs = newdocs; + // } + + let docsforFilter: Doc[] = childDocs; if (searchDocs !== undefined && searchDocs.length > 0) { - childDocs = searchDocs; + docsforFilter = []; + // let newdocs: Doc[] = []; + // let newarray: Doc[] = []; + //while (childDocs.length > 0) { + //newarray = []; + childDocs.forEach((d) => { + if (d.data !== undefined) { + console.log(d); + let newdocs = DocListCast(d.data); + if (newdocs.length > 0) { + let vibecheck = false; + + let newarray: Doc[] = []; + + while (newdocs.length > 0) { + newarray = []; + newdocs.forEach((t) => { + if (d.data !== undefined) { + let newdocs = DocListCast(t.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + if (searchDocs.includes(t)) { + vibecheck = true; + } + }); + newdocs = newarray; + } + if (vibecheck === true) { + docsforFilter.push(d); + } + } + } + if (searchDocs.includes(d)) { + docsforFilter.push(d); + } + }); + //childDocs = newarray; + //} } + childDocs = docsforFilter; + + const docFilters = this.docFilters(); const docRangeFilters = this.props.ignoreFields?.includes("_docRangeFilters") ? [] : Cast(this.props.Document._docRangeFilters, listSpec("string"), []); diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 9d02807fd..8b7717ad1 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -19,7 +19,7 @@ import { undoBatch } from "../../util/UndoManager"; import { COLLECTION_BORDER_WIDTH } from '../../views/globalCssVariables.scss'; import { ContextMenu } from "../ContextMenu"; import '../DocumentDecorations.scss'; -import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaDateCell } from "./CollectionSchemaCells"; +import { CellProps, CollectionSchemaCell, CollectionSchemaCheckboxCell, CollectionSchemaDocCell, CollectionSchemaNumberCell, CollectionSchemaStringCell, CollectionSchemaImageCell, CollectionSchemaListCell, CollectionSchemaDateCell, CollectionSchemaButtons } from "./CollectionSchemaCells"; import { CollectionSchemaAddColumnHeader, KeysDropdown } from "./CollectionSchemaHeaders"; import { MovableColumn, MovableRow } from "./CollectionSchemaMovableTableHOC"; import "./CollectionSchemaView.scss"; @@ -160,7 +160,7 @@ export class SchemaTable extends React.Component { const focusedCol = this._focusedCell.col; const isEditable = !this.props.headerIsEditing; - if (this.childDocs.reduce((found, doc) => found || doc.type === "collection", false)) { + if (this.childDocs.reduce((found, doc) => found || doc.type === "nnnnn", false)) { columns.push( { expander: true, @@ -283,12 +283,34 @@ export class SchemaTable extends React.Component { Header: , accessor: (doc: Doc) => 0, id: "add", - Cell: (rowProps: CellInfo) =>
-
, + Cell: (rowProps: CellInfo) => { + const rowIndex = rowProps.index; + const columnIndex = this.props.columns.map(c => c.heading).indexOf(rowProps.column.id!); + const isFocused = focusedRow === rowIndex && focusedCol === columnIndex && tableIsFocused; + const props: CellProps = { + row: rowIndex, + col: columnIndex, + rowProps: rowProps, + isFocused: isFocused, + changeFocusedCellByIndex: this.changeFocusedCellByIndex, + CollectionView: this.props.CollectionView, + ContainingCollection: this.props.ContainingCollectionView, + Document: this.props.Document, + fieldKey: this.props.fieldKey, + renderDepth: this.props.renderDepth, + addDocTab: this.props.addDocTab, + pinToPres: this.props.pinToPres, + moveDocument: this.props.moveDocument, + setIsEditing: this.setCellIsEditing, + isEditable: isEditable, + setPreviewDoc: this.props.setPreviewDoc, + setComputed: this.setComputed, + getField: this.getField, + showDoc: this.showDoc, + }; + + return ; + }, width: 28, resizable: false }); @@ -301,16 +323,17 @@ export class SchemaTable extends React.Component { nextHighlight = (e: React.MouseEvent, doc: Doc) => { e.preventDefault(); e.stopPropagation(); - doc.searchMatch = false; + console.log(doc.searchMatch); setTimeout(() => doc.searchMatch = true, 0); + console.log(doc.searchMatch); + doc.searchIndex = NumCast(doc.searchIndex); } @action - nextHighlight2 = (e: React.MouseEvent, doc: Doc) => { - e.preventDefault(); - e.stopPropagation(); + nextHighlight2 = (doc: Doc) => { + doc.searchMatch2 = false; setTimeout(() => doc.searchMatch2 = true, 0); doc.searchIndex = NumCast(doc.searchIndex); diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index f5e0cd077..031dbf884 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -539,7 +539,7 @@ export class PropertiesView extends React.Component { getField(key: string) { //if (this.selectedDoc) { - return Field.toString(this.selectedDoc[key] as Field); + return Field.toString(this.selectedDoc![key] as Field); // } else { // return undefined as Opt; // } diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index c724ba50b..1282bbee5 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -25,7 +25,6 @@ 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"; @@ -192,7 +191,7 @@ export class DocumentContentsView extends React.Component !this.paramsDoc[p]); params?.map(p => DocListCast(this.paramsDoc[p])); // bcz: really hacky form of prefetching ... 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 })} +
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) : "" }}>
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; } diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index b76955815..acdd8d047 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -39,14 +39,6 @@ export enum Keys { TEXT = "text" } -export interface filterData { - deletedDocsStatus: boolean; - authorFieldStatus: boolean; - titleFieldStatus: boolean; - basicWordStatus: boolean; - icons: string[]; -} - type SearchBoxDocument = makeInterface<[typeof documentSchema, typeof searchSchema]>; const SearchBoxDocument = makeInterface(documentSchema, searchSchema); @@ -89,55 +81,16 @@ export class SearchBox extends ViewBoxBaseComponent { - if (this.setupButtons == false) { + if (this.setupButtons === false) { - runInAction(() => this.setupButtons == true); + runInAction(() => this.setupButtons = true); } if (this.inputRef.current) { this.inputRef.current.focus(); @@ -163,7 +116,7 @@ export class SearchBox extends ViewBoxBaseComponent SearchUtil.GetViewsOfDocument(doc) + getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc); @observable newsearchstring: string = ""; @@ -203,9 +156,7 @@ export class SearchBox extends ViewBoxBaseComponent { if (e.key === "Enter") { this.layoutDoc._searchString = this.newsearchstring; - // if (this._icons !== this._allIcons) { - // runInAction(() => { this.expandedBucket = false }); - // } + if (StrCast(this.layoutDoc._searchString) !== "") { console.log("OPEN"); runInAction(() => { this.open = true }); @@ -213,11 +164,8 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); - } this.submitSearch(); - - } } @@ -365,46 +313,58 @@ export class SearchBox extends ViewBoxBaseComponent 0) { newarray = []; docs.forEach((d) => { - if (d.data != undefined) { + if (d.data !== undefined) { let newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); } - - - let hlights: string[] = []; - + const hlights: string[] = []; const protos = Doc.GetAllPrototypes(d); - let proto = protos[protos.length - 1]; protos.forEach(proto => { Object.keys(proto).forEach(key => { - // console.log(key, d[key]); if (StrCast(d[key]).includes(query) && !hlights.includes(key)) { hlights.push(key); } - }) + }); }); if (hlights.length > 0) { found.push([d, hlights, []]); docsforFilter.push(d); - }; + } }); docs = newarray; } this._results = found; this.docsforfilter = docsforFilter; if (this.filter === true) { - console.log(docsforFilter); selectedCollection.props.Document._searchDocs = new List(docsforFilter); + docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]); + while (docs.length > 0) { + console.log("HIT"); + newarray = []; + docs.forEach((d) => { + if (d.data !== undefined) { + console.log(d._searchDocs); + d._searchDocs = new List(docsforFilter); + console.log(d); + console.log(d._searchDocs); + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + }); + docs = newarray; + } } this._numTotalResults = found.length; } @@ -468,7 +428,6 @@ export class SearchBox extends ViewBoxBaseComponent { - this.checkIcons(); if (reset) { this.layoutDoc._searchString = ""; } @@ -644,13 +603,6 @@ export class SearchBox extends ViewBoxBaseComponent(["title", "author", "text", "lastModified"]); + const headers = new Set(["title", "author", "lastModified", "text"]); if ((this._numTotalResults === 0 || this._results.length === 0) && this._openNoResults) { if (this.noresults === "") { this.noresults = "No search results :("; @@ -734,7 +686,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + const lines = new List(result[2]); console.log(lines); result[0].lines = lines; result[0].highlighting = highlights.join(", "); @@ -751,7 +703,7 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); + const lines = new List(result[2]); highlights.forEach((item) => headers.add(item)); console.log(lines); result[0].lines = lines; @@ -769,9 +721,9 @@ export class SearchBox extends ViewBoxBaseComponent schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))) + headers.forEach((item) => schemaheaders.push(new SchemaHeaderField(item, "#f1efeb"))); this.headercount = schemaheaders.length; this.props.Document._schemaHeaders = new List(schemaheaders); if (this._maxSearchIndex >= this._numTotalResults) { @@ -784,8 +736,8 @@ export class SearchBox extends ViewBoxBaseComponent arr2.includes(item)) + const arr1 = ["layout", "data"]; + return arr1.some(item => arr2.includes(item)); } @computed @@ -794,210 +746,10 @@ export class SearchBox extends ViewBoxBaseComponent { - this._collectionStatus = !this._collectionStatus; - if (this._collectionStatus) { - let doc = await Cast(this.props.Document.keywords, Doc) - doc!.backgroundColor = "grey"; - - } - else { - let doc = await Cast(this.props.Document.keywords, Doc) - doc!.backgroundColor = "black"; - } - } - - @action.bound - handleNodeChange = async () => { - this._nodeStatus = !this._nodeStatus; - - if (this._nodeStatus) { - this.expandSection(`node${this.props.Document[Id]}`); - let doc = await Cast(this.props.Document.nodes, Doc) - doc!.backgroundColor = "grey"; - - } - else { - this.collapseSection(`node${this.props.Document[Id]}`); - let doc = await Cast(this.props.Document.nodes, Doc) - doc!.backgroundColor = "black"; - } - } - - @action.bound - handleKeyChange = async () => { - this._keyStatus = !this._keyStatus; - if (this._keyStatus) { - this.expandSection(`key${this.props.Document[Id]}`); - let doc = await Cast(this.props.Document.keys, Doc) - doc!.backgroundColor = "grey"; - } - else { - this.collapseSection(`key${this.props.Document[Id]}`); - let doc = await Cast(this.props.Document.keys, Doc) - doc!.backgroundColor = "black"; - } - } - - @action.bound - handleFilterChange = () => { - this._filterOpen = !this._filterOpen; - if (this._filterOpen) { - this.expandSection(`filterhead${this.props.Document[Id]}`); - document.getElementById(`filterhead${this.props.Document[Id]}`)!.style.padding = "5"; - console.log(this.props.Document[Id]) - } - else { - this.collapseSection(`filterhead${this.props.Document[Id]}`); - - - } - } - - @computed - get menuHeight() { - return document.getElementById("hi")?.clientHeight; - } - - - collapseSection(thing: string) { - 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; - - // temporarily disable all css transitions - const elementTransition = element.style.transition; - element.style.transition = ''; - - // on the next frame (as soon as the previous style change has taken effect), - // explicitly set the element's height to its current pixel height, so we - // aren't transitioning out of 'auto' - requestAnimationFrame(function () { - element.style.height = sectionHeight + 'px'; - element.style.transition = elementTransition; - - // on the next frame (as soon as the previous style change has taken effect), - // have the element transition to height: 0 - requestAnimationFrame(function () { - element.style.height = 0 + 'px'; - thing === `filterhead${id}` ? document.getElementById(`filterhead${id}`)!.style.padding = "0" : null; - }); - }); - - // mark the section as "currently collapsed" - element.setAttribute('data-collapsed', 'true'); - } - - expandSection(thing: string) { - const element = document.getElementById(thing)!; - // get the height of the element's inner content, regardless of its actual size - const sectionHeight = element.scrollHeight; - - // have the element transition to the height of its inner content - element.style.height = sectionHeight + 'px'; - - // when the next css transition finishes (which should be the one we just triggered) - element.addEventListener('transitionend', function handler(e) { - // remove this event listener so it only gets triggered once - element.removeEventListener('transitionend', handler); - - // remove "height" from the element's inline styles, so it can return to its initial value - element.style.height = "auto"; - //element.style.height = undefined; - }); - - // mark the section as "currently not collapsed" - element.setAttribute('data-collapsed', 'false'); - - } - - autoset(thing: string) { - const element = document.getElementById(thing)!; - element.removeEventListener('transitionend', function (e) { }); - - // remove "height" from the element's inline styles, so it can return to its initial value - element.style.height = "auto"; - //element.style.height = undefined; - } - - @action.bound - updateTitleStatus = async () => { - this._titleFieldStatus = !this._titleFieldStatus; - if (this._titleFieldStatus) { - let doc = await Cast(this.props.Document.title, Doc) - doc!.backgroundColor = "grey"; - } - else { - let doc = await Cast(this.props.Document.title, Doc) - doc!.backgroundColor = "black"; - } - } - - @action.bound - updateAuthorStatus = async () => { - this._authorFieldStatus = !this._authorFieldStatus; - if (this._authorFieldStatus) { - let doc = await Cast(this.props.Document.author, Doc) - doc!.backgroundColor = "grey"; - } - else { - let doc = await Cast(this.props.Document.author, Doc) - doc!.backgroundColor = "black"; - } - } - - @action.bound - updateDeletedStatus = async () => { - this._deletedDocsStatus = !this._deletedDocsStatus; - if (this._deletedDocsStatus) { - let doc = await Cast(this.props.Document.deleted, Doc) - doc!.backgroundColor = "grey"; - } - else { - let doc = await Cast(this.props.Document.deleted, Doc) - doc!.backgroundColor = "black"; - } - } - 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); - @action.bound - updateIcon = async (icon: string) => { - if (this._icons.includes(icon)) { - _.pull(this._icons, icon); - let cap = icon.charAt(0).toUpperCase() + icon.slice(1) - console.log(cap); - let doc = await Cast(this.props.Document[cap], Doc) - doc!.backgroundColor = "black"; - } - else { - this._icons.push(icon); - let cap = icon.charAt(0).toUpperCase() + icon.slice(1) - let doc = await Cast(this.props.Document[cap], Doc) - doc!.backgroundColor = "grey"; - } - } - - @action.bound - checkIcons = async () => { - for (let i = 0; i < this._allIcons.length; i++) { - - let cap = this._allIcons[i].charAt(0).toUpperCase() + this._allIcons[i].slice(1) - let doc = await Cast(this.props.Document[cap], Doc) - if (this._icons.includes(this._allIcons[i])) { - doc!.backgroundColor = "grey"; - } - else { - doc!.backgroundColor = "black"; - } - } - } - @computed get searchItemTemplate() { return Cast(Doc.UserDoc().searchItemTemplate, Doc, null); } getTransform = () => { @@ -1016,16 +768,15 @@ export class SearchBox extends ViewBoxBaseComponent 5 ? length = 1076 : length = cols * 205 + 51; let height = 0; - let rows = this.children; + const rows = this.children; rows > 8 ? height = 31 + 31 * 8 : height = 31 * rows + 31; return (
@@ -1045,10 +796,52 @@ export class SearchBox extends ViewBoxBaseComponent(this.docsforfilter); + let newarray: Doc[] = []; + let docs: Doc[] = []; + docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); + while (docs.length > 0) { + console.log("HIT"); + newarray = []; + docs.forEach((d) => { + if (d.data !== undefined) { + console.log(d._searchDocs); + d._searchDocs = new List(this.docsforfilter); + console.log(d); + console.log(d._searchDocs); + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + }); + docs = newarray; + } + this.currentSelectedCollection.props.Document._docFilters = new List(Cast(this.props.Document._docFilters, listSpec("string"), [])); this.props.Document.selectedDoc = this.currentSelectedCollection.props.Document; } else if (this.filter === false && this.currentSelectedCollection !== undefined) { + let newarray: Doc[] = []; + let docs: Doc[] = []; + docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); + while (docs.length > 0) { + console.log("HIT"); + newarray = []; + docs.forEach((d) => { + if (d.data !== undefined) { + console.log(d._searchDocs); + d._searchDocs = new List(); + console.log(d); + console.log(d._searchDocs); + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + }); + docs = newarray; + } + this.currentSelectedCollection.props.Document._searchDocs = new List([]); this.currentSelectedCollection.props.Document._docFilters = undefined; this.props.Document.selectedDoc = undefined; @@ -1075,12 +868,32 @@ export class SearchBox extends ViewBoxBaseComponent([]); if (this.currentSelectedCollection !== undefined) { + let newarray: Doc[] = []; + let docs: Doc[] = []; + docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); + while (docs.length > 0) { + console.log("HIT"); + newarray = []; + docs.forEach((d) => { + if (d.data !== undefined) { + console.log(d._searchDocs); + d._searchDocs = new List(); + console.log(d); + console.log(d._searchDocs); + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + }); + docs = newarray; + } this.currentSelectedCollection.props.Document._docFilters = undefined; this.currentSelectedCollection.props.Document._searchDocs = undefined; this.currentSelectedCollection = undefined; } this.submitSearch(); - }) + }); }} /> Collection @@ -1093,12 +906,32 @@ export class SearchBox extends ViewBoxBaseComponent([]); this.filter = false; if (this.currentSelectedCollection !== undefined) { + let newarray: Doc[] = []; + let docs: Doc[] = []; + docs = DocListCast(this.currentSelectedCollection.dataDoc[Doc.LayoutFieldKey(this.currentSelectedCollection.dataDoc)]); + while (docs.length > 0) { + console.log("HIT"); + newarray = []; + docs.forEach((d) => { + if (d.data !== undefined) { + console.log(d._searchDocs); + d._searchDocs = new List(); + console.log(d); + console.log(d._searchDocs); + let newdocs = DocListCast(d.data); + newdocs.forEach((newdoc) => { + newarray.push(newdoc); + }); + } + }); + docs = newarray; + } this.currentSelectedCollection.props.Document._docFilters = undefined; this.currentSelectedCollection.props.Document._searchDocs = undefined; this.currentSelectedCollection = undefined; } this.submitSearch(); - }) + }); }} /> DB @@ -1140,13 +973,3 @@ export class SearchBox extends ViewBoxBaseComponent { - @observable private _docs: { col: Doc, target: Doc }[] = []; - @observable private _otherDocs: { col: Doc, target: Doc }[] = []; - - constructor(props: SearchItemProps) { - super(props); - this.fetchDocuments(); - } - - async fetchDocuments() { - const aliases = (await SearchUtil.GetViewsOfDocument(this.props.doc)).filter(doc => doc !== this.props.doc); - const { docs } = await SearchUtil.Search("", true, { fq: `data_l:"${this.props.doc[Id]}"` }); - const map: Map = new Map; - const allDocs = await Promise.all(aliases.map(doc => SearchUtil.Search("", true, { fq: `data_l:"${doc[Id]}"` }).then(result => result.docs))); - allDocs.forEach((docs, index) => docs.forEach(doc => map.set(doc, aliases[index]))); - docs.forEach(doc => map.delete(doc)); - runInAction(() => { - this._docs = docs.filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance.props.Document)).map(doc => ({ col: doc, target: this.props.doc })); - this._otherDocs = Array.from(map.entries()).filter(entry => !Doc.AreProtosEqual(entry[0], CollectionDockingView.Instance.props.Document)).map(([col, target]) => ({ col, target })); - - }); - } - - getOnClick({ col, target }: { col: Doc, target: Doc }) { - return () => { - col = Doc.IsPrototype(col) ? Doc.MakeDelegate(col) : col; - if (col._viewType === CollectionViewType.Freeform) { - const newPanX = NumCast(target.x) + NumCast(target._width) / 2; - const newPanY = NumCast(target.y) + NumCast(target._height) / 2; - col._panX = newPanX; - col._panY = newPanY; - } - CollectionDockingView.AddRightSplit(col); - }; - } - render() { - return ( -
-

Contexts:

- {[...this._docs, ...this._otherDocs].map(doc => { - const item = React.createRef(); - return
-
doc.col, undefined, undefined, () => SearchBox.Instance.closeSearch())}> - -
- {doc.col.title} -
; - })} -
- ); - } -} - -export interface LinkMenuProps { - doc1: Doc; - doc2: Doc; -} - -@observer -export class LinkContextMenu extends React.Component { - - highlightDoc = (doc: Doc) => () => Doc.BrushDoc(doc); - - unHighlightDoc = (doc: Doc) => () => Doc.UnBrushDoc(doc); - - getOnClick = (col: Doc) => () => CollectionDockingView.AddRightSplit(col); - - render() { - return ( - - ); - } - -} - - -type SearchSchema = makeInterface<[typeof documentSchema]>; - -export const SearchSchema = createSchema({ - targetDoc: Doc, -}); - -const SearchDocument = makeInterface(documentSchema); - - - -@observer -export class SearchItem extends ViewBoxBaseComponent(SearchDocument) { - - public static LayoutString(fieldKey: string) { return FieldView.LayoutString(SearchItem, fieldKey); } - - constructor(props: any) { - super(props); - //this.rootDoc._viewType= CollectionViewType.Stacking; - this.props.Document._height = 46; - if (!this.searchItemTemplate) { // create exactly one presElmentBox template to use by any and all presentations. - Doc.UserDoc().searchItemTemplate = new PrefetchProxy(Docs.Create.SearchItemBoxDocument({ title: "search item template", backgroundColor: "transparent", _xMargin: 5, _height: 46, isTemplateDoc: true, isTemplateForField: "data" })); - // this script will be called by each presElement to get rendering-specific info that the PresBox knows about but which isn't written to the PresElement - // this is a design choice -- we could write this data to the presElements which would require a reaction to keep it up to date, and it would prevent - // the preselement docs from being part of multiple presentations since they would all have the same field, or we'd have to keep per-presentation data - // stored on each pres element. - (this.searchItemTemplate as Doc).lookupField = ScriptField.MakeFunction("lookupSearchBoxField(container, field, data)", - { field: "string", data: Doc.name, container: Doc.name }); - } - - } - - @observable _selected: boolean = false; - - onClick = () => { - DocumentManager.Instance.jumpToDocument(this.rootDoc, false); - } - @observable _useIcons = true; - @observable _displayDim = 50; - - @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); - if (parent !== undefined) { - height = (NumCast(parent._height)); - } - } - - this._reactionDisposer2 = reaction( - () => this._useIcons, - 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 => { - if (this.rootDoc.parent) { - parent = Cast(this.rootDoc.parent, Doc, null) as Doc; - height = (NumCast(parent._height)); - }; - 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; - }, 1); - } - ); - - Doc.SetSearchQuery(this.query); - this.rootDoc.searchMatch = true; - } - componentWillUnmount() { - this.rootDoc.searchMatch = undefined; - this._reactionDisposer2 && this._reactionDisposer2(); - this._reactionDisposer3 && this._reactionDisposer3(); - - } - - - - private _reactionDisposer2?: IReactionDisposer; - private _reactionDisposer3?: IReactionDisposer; - - - - @computed get highlightPos() { return NumCast(this.rootDoc.searchIndex) } - - @action - public DocumentIcon() { - const layoutresult = StrCast(this.rootDoc.type); - if (!this._useIcons) { - const returnXDimension = () => this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); - const returnYDimension = () => this._displayDim; - const docview =
{ - this._useIcons = !this._useIcons; - this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE); - })} - onPointerEnter={action(() => this._displayDim = this._useIcons ? 50 : Number(SEARCH_THUMBNAIL_SIZE))} > - -
; - return docview; - } - const button = layoutresult.indexOf(DocumentType.PDF) !== -1 ? faFilePdf : - layoutresult.indexOf(DocumentType.IMG) !== -1 ? faImage : - layoutresult.indexOf(DocumentType.RTF) !== -1 ? faStickyNote : - layoutresult.indexOf(DocumentType.VID) !== -1 ? faFilm : - layoutresult.indexOf(DocumentType.COL) !== -1 ? faObjectGroup : - layoutresult.indexOf(DocumentType.AUDIO) !== -1 ? faMusic : - layoutresult.indexOf(DocumentType.LINK) !== -1 ? faLink : - layoutresult.indexOf(DocumentType.WEB) !== -1 ? faGlobeAsia : - faCaretUp; - return
{ this._useIcons = false; this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); })} > - -
-
{this.rootDoc.type ? this.rootDoc.type : "Other"}
-
- ; - } - - collectionRef = React.createRef(); - - @action - pointerDown = (e: React.PointerEvent) => { e.preventDefault(); e.button === 0 && SearchBox.Instance.openSearch(e); } - - @action - nextHighlight = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - //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.length = NumCast(this.rootDoc!.length); - } - - @action - nextHighlight2 = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - - //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.length = NumCast(this.rootDoc!.length); - } - - @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.rootDoc!); - } - e.stopPropagation(); - } - - unHighlightDoc = (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.UnBrushDoc(doc1); - Doc.UnBrushDoc(doc2); - } - } else { - Doc.UnBrushDoc(this.rootDoc!); - } - } - - onContextMenu = (e: React.MouseEvent) => { - e.preventDefault(); - e.stopPropagation(); - ContextMenu.Instance.clearItems(); - ContextMenu.Instance.addItem({ - description: "Copy ID", event: () => { - Utils.CopyText(StrCast(this.rootDoc[Id])); - }, - icon: "fingerprint" - }); - ContextMenu.Instance.displayMenu(e.clientX, e.clientY); - } - - _downX = 0; - _downY = 0; - _target: any; - onPointerDown = (e: React.PointerEvent) => { - this._downX = e.clientX; - this._downY = e.clientY; - e.stopPropagation(); - this._target = e.currentTarget; - document.removeEventListener("pointermove", this.onPointerMoved); - document.removeEventListener("pointerup", this.onPointerUp); - document.addEventListener("pointermove", this.onPointerMoved); - document.addEventListener("pointerup", this.onPointerUp); - } - onPointerMoved = (e: PointerEvent) => { - if (Math.abs(e.clientX - this._downX) > Utils.DRAG_THRESHOLD || - Math.abs(e.clientY - this._downY) > Utils.DRAG_THRESHOLD) { - document.removeEventListener("pointermove", this.onPointerMoved); - document.removeEventListener("pointerup", this.onPointerUp); - const doc = Doc.IsPrototype(this.rootDoc) ? Doc.MakeDelegate(this.rootDoc) : this.rootDoc; - DragManager.StartDocumentDrag([this._target], new DragManager.DocumentDragData([doc]), e.clientX, e.clientY); - } - } - onPointerUp = (e: PointerEvent) => { - document.removeEventListener("pointermove", this.onPointerMoved); - document.removeEventListener("pointerup", this.onPointerUp); - } - - @computed - get contextButton() { - return CollectionDockingView.AddRightSplit(doc)} />; - } - - @computed get searchElementDoc() { return this.rootDoc; } - // @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; - getTransform = () => { - return this.props.ScreenToLocalTransform().translate(-5, -65);// listBox padding-left and pres-box-cont minHeight - } - panelHeight = () => { - return this.props.PanelHeight(); - } - selectElement = (doc: Doc) => { - //this.gotoDocument(this.childDocs.indexOf(doc), NumCast(this.layoutDoc._itemIndex)); - } - - newsearch() { - runInAction(() => { - if (StrCast(this.rootDoc.bucketfield) !== "results") { - SearchBox.Instance._icons = [StrCast(this.rootDoc.bucketfield)]; - SearchBox.Instance._icons = SearchBox.Instance._icons; - } - else { - SearchBox.Instance._icons = SearchBox.Instance._allIcons; - } - SearchBox.Instance.submitSearch(); - }) - } - - @action - returnLines() { - if ((Cast(this.rootDoc.lines, listSpec("string")))!.length > 1) { - if (!this._displayLines) { - console.log(Cast(this.rootDoc.lines, listSpec("string"))); - 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}
)} -
;; - } - } - } - - //this._displayDim = Number(SEARCH_THUMBNAIL_SIZE); - - @observable _displayLines: boolean = true; - - returnButtons() { - return
-
{ - this.rootDoc!.type === DocumentType.PDF ? this._displayLines = !this._displayLines : null; - })}> - {this.rootDoc!.type === DocumentType.PDF ? "Expand Lines" : null} - {NumCast(this.rootDoc!.length) > 1 ? `Instance ${NumCast(this.rootDoc.searchIndex) === 0 ? NumCast(this.rootDoc.length) : NumCast(this.rootDoc.searchIndex)} of ${NumCast(this.rootDoc.length)}` : null} - - -
-
-
- {this.returnLines()} -
-
-
- } - - private _mainRef: React.RefObject = React.createRef(); - - - render() { - const doc1 = Cast(this.rootDoc!.anchor1, Doc); - const doc2 = Cast(this.rootDoc!.anchor2, Doc); - if (StrCast(this.rootDoc.bucketfield) === "webs") { - this.props.Document._viewType = CollectionViewType.Stacking; - this.props.Document._chromeStatus = 'disabled'; - this.props.Document._height = this.rootDoc._height; - return
- -
- } - if (this.rootDoc.isBucket === true) { - this.props.Document._viewType = CollectionViewType.Stacking; - this.props.Document._chromeStatus = 'disabled'; - this.props.Document._height = this.rootDoc._height; - - return
- - -
- } - else if (this.rootDoc.isBucket === false) { - this.props.Document._chromeStatus = 'disabled'; - return
-
-
-
No Search Results
-
-
-
- } - else { - return
-
-
-
-
{StrCast(this.rootDoc.title)}
-
- {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.rootDoc!.type === DocumentType.PDF ? this.returnButtons() : null} -
-
-
-
-
-
{this.DocumentIcon()}
-
-
- {/*
- {(doc1 instanceof Doc && doc2 instanceof Doc) && this.rootDoc!.type === DocumentType.LINK ? : - this.contextButton} -
*/} -
-
; - } - } -} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 8c7196ca1eda1f89bbac3e2f24219df739978776 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 00:07:59 -0400 Subject: lint --- src/client/views/EditableView.tsx | 12 ++--- .../views/collections/CollectionSchemaCells.tsx | 25 ++-------- .../views/collections/CollectionSchemaView.tsx | 4 +- src/client/views/collections/CollectionSubView.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 8 ++-- src/client/views/search/SearchBox.tsx | 56 +++++----------------- 6 files changed, 31 insertions(+), 76 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index a98ef97ea..a5628d5ee 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -187,13 +187,13 @@ export class EditableView extends React.Component { } returnHighlights() { - let results = []; - let contents = this.props.bing!(); + const results = []; + const contents = this.props.bing!(); if (contents !== undefined) { if (this.props.positions !== undefined) { - let positions = this.props.positions; - let length = this.props.search!.length; + const positions = this.props.positions; + const length = this.props.search!.length; // contents = String(this.props.contents.valueOf()); @@ -201,10 +201,10 @@ export class EditableView extends React.Component { positions.forEach((num, cur) => { results.push({contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}); let end = 0; - cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1]; + cur === positions.length - 1 ? end = contents!.length : end = positions[cur + 1]; results.push({contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}); } - ) + ); } return results; } diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index b02b4c86a..7a80f4484 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -241,7 +241,7 @@ export class CollectionSchemaCell extends React.Component { // //
// ); - let positions = []; + const positions = []; if (StrCast(this.props.Document._searchString) !== "") { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); let term = ""; @@ -256,8 +256,8 @@ export class CollectionSchemaCell extends React.Component { term = String(NumCast(cfield)); } } - let search = StrCast(this.props.Document._searchString); - let start = term.indexOf(search) as number; + const search = StrCast(this.props.Document._searchString); + let start = term.indexOf(search); let tally = 0; if (start !== -1) { positions.push(start); @@ -883,36 +883,27 @@ export class CollectionSchemaButtons extends CollectionSchemaCell { // (!this.props.CollectionView || !this.props.CollectionView.props.isSelected() ? undefined : // SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e)); // }; - let doc = this.props.rowProps.original; + const doc = this.props.rowProps.original; let buttons =
; const type = StrCast(doc.type); - console.log(StrCast(doc.type)); if (type === "pdf") { buttons =
+
; } else if (type !== "rtf") { - console.log("sad"); buttons = undefined; } @@ -945,7 +931,6 @@ export class CollectionSchemaButtons extends CollectionSchemaCell { else { buttons = undefined; } - return (
{buttons}
); diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx index d47d41a1e..a003de0d3 100644 --- a/src/client/views/collections/CollectionSchemaView.tsx +++ b/src/client/views/collections/CollectionSchemaView.tsx @@ -329,14 +329,14 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) { if (filter) { Doc.setDocFilter(this.props.Document, newKey, filter, "match"); if (this.props.Document.selectedDoc !== undefined) { - let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; + const doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; Doc.setDocFilter(doc, newKey, filter, "match"); } } else { this.props.Document._docFilters = undefined; if (this.props.Document.selectedDoc !== undefined) { - let doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; + const doc = Cast(this.props.Document.selectedDoc, Doc) as Doc; doc._docFilters = undefined; } } diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 888f0b9e9..b896518ed 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -159,7 +159,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: newarray = []; newdocs.forEach((t) => { if (d.data !== undefined) { - let newdocs = DocListCast(t.data); + const newdocs = DocListCast(t.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index b21596493..ab29f6889 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -298,7 +298,7 @@ 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)); - let length = res[0].length; + const length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); @@ -318,7 +318,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp else if (this._searchIndex === 0 && length !== 1) { this._searchIndex = length - 2; } - let index = this._searchIndex; + const index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length = length; @@ -331,7 +331,7 @@ 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)); - let length = res[0].length; + const length = res[0].length; let tr = this._editorView.state.tr; const flattened: TextSelection[] = []; res.map(r => r.map(h => flattened.push(h))); @@ -339,7 +339,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp 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; + const index = this._searchIndex; Doc.GetProto(this.dataDoc).searchIndex = index; Doc.GetProto(this.dataDoc).length = length; diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx index 001792f41..097e6c4d9 100644 --- a/src/client/views/search/SearchBox.tsx +++ b/src/client/views/search/SearchBox.tsx @@ -94,7 +94,7 @@ export class SearchBox extends ViewBoxBaseComponent { this._searchbarOpen = true }); + runInAction(() => { this._searchbarOpen = true; }); } if (this.rootDoc.searchQuery && this.newAssign) { const sq = this.rootDoc.searchQuery; @@ -112,11 +112,11 @@ export class SearchBox extends ViewBoxBaseComponent SearchUtil.GetViewsOfDocument(doc); + getViews = (doc: Doc) => SearchUtil.GetViewsOfDocument(doc) @observable newsearchstring: string = ""; @@ -127,7 +127,6 @@ export class SearchBox extends ViewBoxBaseComponent { Doc.UnBrushDoc(result[0]); result[0].searchMatch = undefined; @@ -140,8 +139,7 @@ export class SearchBox extends ViewBoxBaseComponent { this.open = false }); + runInAction(() => { this.open = false; }); this._openNoResults = false; this._results = []; this._resultsSet.clear(); @@ -226,7 +224,6 @@ export class SearchBox extends ViewBoxBaseComponent 0) { newarray = []; docs.forEach((d) => { - if (d.data != undefined) { + if (d.data !== undefined) { newarray.push(...DocListCast(d.data)); } - - let hlights: string[] = []; - + const hlights: string[] = []; const protos = Doc.GetAllPrototypes(d); protos.forEach(proto => { Object.keys(proto).forEach(key => { @@ -345,15 +338,11 @@ export class SearchBox extends ViewBoxBaseComponent(docsforFilter); docs = DocListCast(selectedCollection.dataDoc[Doc.LayoutFieldKey(selectedCollection.dataDoc)]); while (docs.length > 0) { - console.log("HIT"); newarray = []; docs.forEach((d) => { if (d.data !== undefined) { - console.log(d._searchDocs); d._searchDocs = new List(docsforFilter); - console.log(d); - console.log(d._searchDocs); - let newdocs = DocListCast(d.data); + const newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); @@ -449,7 +438,7 @@ export class SearchBox extends ViewBoxBaseComponent { console.log("Resubmitting search"); }, 60000); @@ -526,7 +515,6 @@ export class SearchBox extends ViewBoxBaseComponent key.substring(0, key.length - 2)) : []; - console.log(hlights); doc ? console.log(Cast(doc.context, Doc)) : null; if (this.findCommonElements(hlights)) { } @@ -683,7 +671,6 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); - console.log(lines); result[0].lines = lines; result[0].highlighting = highlights.join(", "); highlights.forEach((item) => headers.add(item)); @@ -701,7 +688,6 @@ export class SearchBox extends ViewBoxBaseComponent(result[2]); highlights.forEach((item) => headers.add(item)); - console.log(lines); result[0].lines = lines; result[0].highlighting = highlights.join(", "); result[0].searchMatch = true; @@ -796,15 +782,11 @@ export class SearchBox extends ViewBoxBaseComponent 0) { - console.log("HIT"); newarray = []; docs.forEach((d) => { if (d.data !== undefined) { - console.log(d._searchDocs); d._searchDocs = new List(this.docsforfilter); - console.log(d); - console.log(d._searchDocs); - let newdocs = DocListCast(d.data); + const newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); @@ -821,15 +803,11 @@ export class SearchBox extends ViewBoxBaseComponent 0) { - console.log("HIT"); newarray = []; docs.forEach((d) => { if (d.data !== undefined) { - console.log(d._searchDocs); d._searchDocs = new List(); - console.log(d); - console.log(d._searchDocs); - let newdocs = DocListCast(d.data); + const newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); @@ -868,15 +846,11 @@ export class SearchBox extends ViewBoxBaseComponent 0) { - console.log("HIT"); newarray = []; docs.forEach((d) => { if (d.data !== undefined) { - console.log(d._searchDocs); d._searchDocs = new List(); - console.log(d); - console.log(d._searchDocs); - let newdocs = DocListCast(d.data); + const newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); @@ -906,15 +880,11 @@ export class SearchBox extends ViewBoxBaseComponent 0) { - console.log("HIT"); newarray = []; docs.forEach((d) => { if (d.data !== undefined) { - console.log(d._searchDocs); d._searchDocs = new List(); - console.log(d); - console.log(d._searchDocs); - let newdocs = DocListCast(d.data); + const newdocs = DocListCast(d.data); newdocs.forEach((newdoc) => { newarray.push(newdoc); }); -- cgit v1.2.3-70-g09d2 From 85fee2871fcbfba90ca9ce3ba4a1842e85e41f9f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 01:17:28 -0400 Subject: lint --- src/client/util/CurrentUserUtils.ts | 1 - src/client/views/EditableView.tsx | 4 +- src/client/views/MainView.tsx | 9 +- .../views/collections/CollectionSchemaCells.tsx | 11 +- src/client/views/collections/CollectionSubView.tsx | 4 +- src/client/views/linking/LinkMenuItem.tsx | 1 - src/client/views/nodes/DocumentLinksButton.tsx | 2 +- .../views/nodes/formattedText/FormattedTextBox.tsx | 3 +- .../views/nodes/formattedText/RichTextMenu.tsx | 3 +- src/client/views/search/FieldFilters.scss | 12 - src/client/views/search/FieldFilters.tsx | 41 -- src/client/views/search/FilterBox.scss | 178 --------- src/client/views/search/FilterBox.tsx | 431 --------------------- src/server/websocket.ts | 8 +- 14 files changed, 25 insertions(+), 683 deletions(-) delete mode 100644 src/client/views/search/FieldFilters.scss delete mode 100644 src/client/views/search/FieldFilters.tsx delete mode 100644 src/client/views/search/FilterBox.scss delete mode 100644 src/client/views/search/FilterBox.tsx (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index ea701ec33..53d187aa0 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -771,7 +771,6 @@ export class CurrentUserUtils { // setup the list of sidebar mode buttons which determine what is displayed in the sidebar static async setupSidebarButtons(doc: Doc) { - this.setupSidebarContainer(doc); await CurrentUserUtils.setupToolsBtnPanel(doc); CurrentUserUtils.setupWorkspaces(doc); CurrentUserUtils.setupCatalog(doc); diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index a5628d5ee..ec3e754fb 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -197,11 +197,11 @@ export class EditableView extends React.Component { // contents = String(this.props.contents.valueOf()); - results.push({contents ? contents.slice(0, this.props.positions![0]) : this.props.placeholder?.valueOf()}); + results.push({contents ? contents.slice(0, this.props.positions[0]) : this.props.placeholder?.valueOf()}); positions.forEach((num, cur) => { results.push({contents ? contents.slice(num, num + length) : this.props.placeholder?.valueOf()}); let end = 0; - cur === positions.length - 1 ? end = contents!.length : end = positions[cur + 1]; + cur === positions.length - 1 ? end = contents.length : end = positions[cur + 1]; results.push({contents ? contents.slice(num + length, end) : this.props.placeholder?.valueOf()}); } ); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 119fa3451..1b2dd1c44 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -82,8 +82,8 @@ export class MainView extends React.Component { @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } @computed public get searchDoc() { return Cast(this.userDoc["search-panel"], Doc) as Doc; } - - @observable public sidebarContent: any = this.userDoc?.["sidebar"]; + sidebar: string = "sidebar"; + @observable public sidebarContent: any = this.userDoc?.[this.sidebar]; @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; public isPointerDown = false; @@ -193,8 +193,9 @@ export class MainView extends React.Component { } if (targets && targets.length && SearchBox.Instance._searchbarOpen) { let check = false; + const icon = "icon"; targets.forEach((thing) => { - if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset["icon"] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") { + if (thing.className.toString() === "collectionSchemaView-table" || (thing as any)?.dataset[icon] === "filter" || thing.className.toString() === "beta" || thing.className.toString() === "collectionSchemaView-menuOptions-wrapper") { check = true; } }); @@ -731,7 +732,7 @@ export class MainView extends React.Component { @computed get search() { return
{/*
{Doc.CurrentUserEmail}
*/} -
{ bing={() => { const cfield = ComputedField.WithoutComputed(() => FieldValue(props.Document[props.fieldKey])); if (cfield !== undefined) { - if (cfield.Text !== undefined) { - return (cfield.Text); + console.log(typeof (cfield)); + // if (typeof(cfield)===RichTextField) + const a = cfield as RichTextField; + if (a.Text !== undefined) { + return (a.Text); } else if (StrCast(cfield)) { return StrCast(cfield); @@ -884,7 +888,8 @@ export class CollectionSchemaButtons extends CollectionSchemaCell { // SetupDrag(reference, () => this._document, this.props.moveDocument, this.props.Document.schemaDoc ? "copy" : undefined)(e)); // }; const doc = this.props.rowProps.original; - let buttons =
-
-
-
-
-
Filter by type of node
-
-
-
-
-
-
Filter by Basic Keys
-
-
-
-
-
- - -
-
- ) : - undefined} -
- ); - } -} \ No newline at end of file diff --git a/src/server/websocket.ts b/src/server/websocket.ts index cdce41a3a..2c8ec090a 100644 --- a/src/server/websocket.ts +++ b/src/server/websocket.ts @@ -286,16 +286,16 @@ export namespace WebSocket { dynfield = true; const val = docfield[key]; key = key.substring(7); - if (key==="_height"){ - Object.values(suffixMap).forEach(suf => {update[key] = { set: null };}); + if (key === "_height") { + Object.values(suffixMap).forEach(suf => { update[key] = { set: null }; }); } else { - Object.values(suffixMap).forEach(suf => {update[key + getSuffix(suf)] = { set: null };}); + Object.values(suffixMap).forEach(suf => { update[key + getSuffix(suf)] = { set: null }; }); } const term = ToSearchTerm(val); if (term !== undefined) { const { suffix, value } = term; - if (key==="_height"){ + if (key === "_height") { update[key] = { set: value }; } update[key + suffix] = { set: value }; -- cgit v1.2.3-70-g09d2 From 48932f578ac5926655c7d1f90fb659a0ead3b992 Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 01:33:11 -0400 Subject: z --- src/client/views/nodes/formattedText/FormattedTextBox.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index a1f576029..c06e59fe5 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -355,6 +355,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const activeMark = this._editorView.state.schema.mark(this._editorView.state.schema.marks.search_highlight, { selected: true }); const end = this._editorView.state.doc.nodeSize - 2; this._editorView.dispatch(this._editorView.state.tr.removeMark(0, end, mark).removeMark(0, end, activeMark)); + } if (FormattedTextBox.PasteOnLoad) { const pdfDocId = FormattedTextBox.PasteOnLoad.clipboardData?.getData("dash/pdfOrigin"); -- cgit v1.2.3-70-g09d2 From 6612acac309767c6deafc45d931e42ff1ee4c86b Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 15:09:49 -0400 Subject: fixes for bob --- .../views/collections/CollectionSchemaCells.tsx | 4 +-- .../views/collections/CollectionSchemaView.scss | 10 ------ src/client/views/collections/SchemaTable.tsx | 6 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 36 +++++++++++++--------- src/client/views/pdf/PDFViewer.tsx | 3 -- src/server/websocket.ts | 10 +----- 6 files changed, 27 insertions(+), 42 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/collections/CollectionSchemaCells.tsx b/src/client/views/collections/CollectionSchemaCells.tsx index f627faa63..d11d6a5ba 100644 --- a/src/client/views/collections/CollectionSchemaCells.tsx +++ b/src/client/views/collections/CollectionSchemaCells.tsx @@ -902,8 +902,8 @@ export class CollectionSchemaButtons extends CollectionSchemaCell {
; const fontFamilies: string[] = ["Times New Roman", "Arial", "Georgia", "Comic Sans MS", "Tahoma", "Impact", "Crimson Text"]; - const fontSizes: number[] = [7, 8, 9, 10, 12, 14, 16, 18, 20, 24, 32, 48, 72]; + const fontSizes: string[] = ["7pt", "8pt", "9pt", "10pt", "12pt", "14pt", "16pt", "18pt", "20pt", "24pt", "32pt", "48pt", "72pt"]; const preferencesContent =
@@ -222,8 +222,8 @@ export default class SettingsManager extends React.Component<{}> { diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6e268be48..f040cd26d 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -274,7 +274,7 @@ export default class RichTextMenu extends AntimodeMenu { } !activeFamilies.length && (activeFamilies.push(StrCast(this.TextView.layoutDoc._fontFamily, StrCast(Doc.UserDoc().fontFamily)))); !activeSizes.length && (activeSizes.push(StrCast(this.TextView.layoutDoc._fontSize, StrCast(Doc.UserDoc().fontSize)))); - !activeColors.length && (activeSizes.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); + !activeColors.length && (activeColors.push(StrCast(this.TextView.layoutDoc.color, StrCast(Doc.UserDoc().fontColor)))); } !activeFamilies.length && (activeFamilies.push(StrCast(Doc.UserDoc().fontFamily))); !activeSizes.length && (activeSizes.push(StrCast(Doc.UserDoc().fontSize))); -- cgit v1.2.3-70-g09d2 From d5d0a46c0fdb6a1839c56927c66e332b14f5189f Mon Sep 17 00:00:00 2001 From: Andy Rickert Date: Wed, 5 Aug 2020 16:26:39 -0400 Subject: final changes for bob --- solr-8.3.1/bin/solr-8983.pid | 2 +- src/client/views/collections/SchemaTable.tsx | 5 ++--- .../views/nodes/formattedText/FormattedTextBox.tsx | 24 ---------------------- 3 files changed, 3 insertions(+), 28 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/solr-8.3.1/bin/solr-8983.pid b/solr-8.3.1/bin/solr-8983.pid index efc75f3cc..1f77d281d 100644 --- a/solr-8.3.1/bin/solr-8983.pid +++ b/solr-8.3.1/bin/solr-8983.pid @@ -1 +1 @@ -34698 +1731 diff --git a/src/client/views/collections/SchemaTable.tsx b/src/client/views/collections/SchemaTable.tsx index 83830e111..0a5ef987a 100644 --- a/src/client/views/collections/SchemaTable.tsx +++ b/src/client/views/collections/SchemaTable.tsx @@ -177,6 +177,7 @@ export class SchemaTable extends React.Component { } ); } + console.log(columns); const cols = this.props.columns.map(col => { @@ -314,6 +315,7 @@ export class SchemaTable extends React.Component { width: 28, resizable: false }); + console.log(columns); return columns; } @@ -493,7 +495,6 @@ export class SchemaTable extends React.Component { @computed get reactTable() { const children = this.childDocs; - const hasCollectionChild = children.reduce((found, doc) => found || doc.type === "collection", false); const expandedRowsList = this._openCollections.map(col => children.findIndex(doc => doc[Id] === col).toString()); const expanded = {}; //@ts-ignore @@ -515,8 +516,6 @@ export class SchemaTable extends React.Component { resized={this.resized} NoDataComponent={() => null} onResizedChange={this.props.onResizedChange} - SubComponent={!hasCollectionChild ? undefined : row => (row.original.type !== "collection") ? (null) : -
} />; } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index c2f9f2030..5f0f33351 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -330,30 +330,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } - public highlightSearchTermsAlt = (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)); - const 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); - 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()); - - - const index = this._searchIndex; - - Doc.GetProto(this.dataDoc).searchIndex = index; - } - } - - public unhighlightSearchTerms = () => { if (window.screen.width < 600) null; else if (this._editorView && (this._editorView as any).docView) { -- cgit v1.2.3-70-g09d2 From fa0b28c300416621dec25407484fc2606a736e2a Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Thu, 6 Aug 2020 05:11:18 +0800 Subject: automatic text progressivize, ui changes, bug fixes --- src/client/documents/Documents.ts | 2 + src/client/views/PropertiesButtons.tsx | 37 ++- .../views/collections/CollectionDockingView.scss | 8 +- .../views/collections/CollectionDockingView.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 12 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collectionFreeForm/PropertiesView.tsx | 4 +- .../views/nodes/CollectionFreeFormDocumentView.tsx | 20 +- src/client/views/nodes/PresBox.scss | 56 +++- src/client/views/nodes/PresBox.tsx | 337 ++++++++------------- .../views/nodes/formattedText/FormattedTextBox.tsx | 65 ++++ .../views/presentationview/PresElementBox.scss | 35 ++- .../views/presentationview/PresElementBox.tsx | 49 ++- 13 files changed, 386 insertions(+), 245 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 539341b62..57fcf3a00 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -129,6 +129,7 @@ export interface DocumentOptions { isLinkButton?: boolean; _columnWidth?: number; _fontSize?: string; + _fontWeight?: number; _fontFamily?: string; curPage?: number; currentTimecode?: number; // the current timecode of a time-based document (e.g., current time of a video) value is in seconds @@ -139,6 +140,7 @@ export interface DocumentOptions { appearFrame?: number; // the frame in which the document appears presTransition?: number; //the time taken for the transition TO a document presDuration?: number; //the duration of the slide in presentation view + presProgressivize?: boolean; // xArray?: number[]; // yArray?: number[]; borderRounding?: string; diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index d46c03470..7d8a75dda 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -30,6 +30,7 @@ import { undoBatch, UndoManager } from '../util/UndoManager'; import { DocumentType } from '../documents/DocumentTypes'; import { CollectionFreeFormView } from './collections/collectionFreeForm/CollectionFreeFormView'; import { InkField } from '../../fields/InkField'; +import { PresBox } from './nodes/PresBox'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -209,13 +210,44 @@ export class PropertiesButtons extends React.Component<{}, {}> { const isPinned = targetDoc && Doc.isDocPinned(targetDoc); return !targetDoc ? (null) :
{Doc.isDocPinned(targetDoc) ? "Unpin from presentation" : "Pin to presentation"}
}>
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}>
; } + @computed + get pinWithViewButton() { + const targetDoc = this.selectedDoc; + const isPinned = targetDoc && Doc.isDocPinned(targetDoc); + if (targetDoc) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + } + return !targetDoc ? (null) :
{"Pin with this view"}
}> +
{ + if (targetDoc) { + DockedFrameRenderer.PinDoc(targetDoc, false); + const activeDoc = PresBox.Instance.childDocs[PresBox.Instance.childDocs.length - 1]; + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeDoc.presPinView = true; + activeDoc.presPinViewX = x; + activeDoc.presPinViewY = y; + activeDoc.presPinViewScale = scale; + } + }}> +
V
+ +
; + } + + @computed get metadataButton() { //const view0 = this.view0; @@ -607,6 +639,9 @@ export class PropertiesButtons extends React.Component<{}, {}> {
{this.pinButton}
+
+ {this.pinWithViewButton} +
{this.copyButton}
diff --git a/src/client/views/collections/CollectionDockingView.scss b/src/client/views/collections/CollectionDockingView.scss index 857f751d3..98babc3d2 100644 --- a/src/client/views/collections/CollectionDockingView.scss +++ b/src/client/views/collections/CollectionDockingView.scss @@ -45,7 +45,7 @@ .miniPres-button-text { display: flex; - height: 30; + height: 20; font-weight: 400; min-width: 100%; border-radius: 5px; @@ -55,15 +55,15 @@ } .miniPres-divider { - width: 1px; + width: 0.5px; height: 80%; border-right: solid 2px #5a5a5a; } .miniPres-button { display: flex; - height: 30; - min-width: 30; + height: 20; + min-width: 20; border-radius: 100%; align-items: center; justify-content: center; diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx index 9c85bd0a2..bc88236dd 100644 --- a/src/client/views/collections/CollectionDockingView.tsx +++ b/src/client/views/collections/CollectionDockingView.tsx @@ -871,7 +871,7 @@ export class DockedFrameRenderer extends React.Component { } renderMiniPres() { return
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e00bdb065..fe3d57bdb 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -184,7 +184,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) if (found) { const top = found.getBoundingClientRect().top; const localTop = this.props.ScreenToLocalTransform().transformPoint(0, top); - smoothScroll(doc.presTransition ? Number(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); + smoothScroll(doc.presTransition || doc.presTransition === 0 ? NumCast(doc.presTransition) : 500, this._mainCont!, localTop[1] + this._mainCont!.scrollTop); } afterFocus && setTimeout(() => { if (afterFocus?.()) { } @@ -291,20 +291,19 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) const docs = this.childDocList; if (docs) { newDocs.map((doc, i) => { + console.log(doc.title); if (i === 0) { if (targInd === -1) targInd = docs.length; else targInd = docs.indexOf(this.filteredChildren[targInd]); const srcInd = docs.indexOf(doc); docs.splice(srcInd, 1); docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - } else { + } else if (i < (newDocs.length / 2)) { //glr: for some reason dragged documents are duplicated if (targInd === -1) targInd = docs.length; - else targInd = docs.indexOf(this.filteredChildren[targInd]); + else targInd = docs.indexOf(newDocs[0]) + 1; const srcInd = docs.indexOf(doc); - const firstInd = docs.indexOf(newDocs[0]); docs.splice(srcInd, 1); - // docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); - docs.splice(firstInd + 1, 0, doc); + docs.splice((targInd > srcInd ? targInd - 1 : targInd) + plusOne, 0, doc); } }); } @@ -312,6 +311,7 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) } return false; } + @undoBatch @action onExternalDrop = async (e: React.DragEvent): Promise => { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 109808956..65cd28742 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -911,8 +911,8 @@ export class CollectionFreeFormView extends CollectionSubView { if (this.isPres) { return
- Presentation Toolbar + Presentation
@@ -922,7 +922,7 @@ export class PropertiesView extends React.Component {
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}> -   {PresBox.Instance.stringType} options +     {PresBox.Instance.stringType} options
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index c29547eac..35ed6c5a5 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -107,6 +107,15 @@ export class CollectionFreeFormDocumentView extends DocComponent(windexed); d["opacity-indexed"] = new List(oindexed); d["scroll-indexed"] = new List(scrollIndexed); + if (d.appearFrame) { + if (d.appearFrame === timecode + 1) { + d["text-color"] = "red"; + } else if (d.appearFrame < timecode + 1) { + d["text-color"] = "grey"; + } else { d["text-color"] = "black"; } + } else if (d.appearFrame === 0) { + d["text-color"] = "black"; + } } public static updateScrollframe(doc: Doc, time: number) { @@ -139,6 +148,15 @@ export class CollectionFreeFormDocumentView extends DocComponent docs.forEach(doc => doc.dataTransition = "inherit"), 1010); @@ -166,7 +184,7 @@ export class CollectionFreeFormDocumentView extends DocComponent { - if (!doc.appearFrame) doc.appearFrame = i; + if (doc.appearFrame === undefined) doc.appearFrame = i; const curTimecode = progressivize ? i : timecode; const xlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const ylist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); diff --git a/src/client/views/nodes/PresBox.scss b/src/client/views/nodes/PresBox.scss index 089f69873..16821f5bc 100644 --- a/src/client/views/nodes/PresBox.scss +++ b/src/client/views/nodes/PresBox.scss @@ -754,8 +754,6 @@ } .presBox-button { - margin-right: 2.5px; - margin-left: 2.5px; height: 25px; border-radius: 5px; display: none; @@ -787,13 +785,65 @@ min-width: 100px; width: 100px; position: absolute; - right: 8px; + right: 10px; .present-icon { margin-right: 7px; } } + + .miniPresOverlay { + background-color: #323232; + color: white; + border-radius: 5px; + grid-template-rows: 100%; + height: 25; + width: 200; + justify-content: space-evenly; + align-items: center; + display: flex; + position: absolute; + right: 10px; + + .miniPres-button-text { + display: flex; + height: 20; + width: max-content; + font-family: Roboto; + font-weight: 400; + letter-spacing: normal; + border-radius: 5px; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-divider { + width: 0.5px; + height: 80%; + border-right: solid 1px #5a5a5a; + } + + .miniPres-button { + display: flex; + height: 20; + min-width: 20; + border-radius: 100%; + align-items: center; + justify-content: center; + transition: all 0.3s; + } + + .miniPres-button:hover { + background-color: #5a5a5a; + } + + .miniPres-button-text:hover { + background-color: #5a5a5a; + } + } + .collectionViewBaseChrome-viewPicker { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 2389d3875..1caefdc57 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -97,7 +97,10 @@ export class PresBox extends ViewBoxBaseComponent @action next = () => { this.updateCurrentPresentation(); + const activeNext = Cast(this.childDocs[this.itemIndex + 1], Doc, null); const presTargetDoc = Cast(this.childDocs[this.itemIndex].presentationTargetDoc, Doc, null); + const childDocs = DocListCast(presTargetDoc[Doc.LayoutFieldKey(presTargetDoc)]); + const currentFrame = Cast(presTargetDoc.currentFrame, "number", null); const lastFrame = Cast(presTargetDoc.lastFrame, "number", null); const curFrame = NumCast(presTargetDoc.currentFrame); let internalFrames: boolean = false; @@ -107,8 +110,10 @@ export class PresBox extends ViewBoxBaseComponent presTargetDoc._viewTransition = "all 1s"; setTimeout(() => presTargetDoc._viewTransition = undefined, 1010); presTargetDoc.currentFrame = curFrame + 1; + if (presTargetDoc.scrollProgressivize) CollectionFreeFormDocumentView.updateScrollframe(presTargetDoc, currentFrame); + if (presTargetDoc.presProgressivize) CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); if (presTargetDoc.zoomProgressivize) this.zoomProgressivizeNext(presTargetDoc); - // Case 2: No more frames in current doc and next slide is defined, therefore move to next slide + // Case 2: Audio or video therefore wait to play the audio or video before moving on } else if ((presTargetDoc.type === DocumentType.VID || presTargetDoc.type === DocumentType.AUDIO) && !this._moveOnFromAudio) { if (presTargetDoc.type === DocumentType.AUDIO) { AudioBox.Instance.playFrom(0); @@ -117,7 +122,15 @@ export class PresBox extends ViewBoxBaseComponent if (presTargetDoc.type === DocumentType.VID) { this._moveOnFromAudio = true; } - } else if (this.childDocs[this.itemIndex + 1] !== undefined) { + // Case 3: No more frames in current doc and next slide is defined, therefore move to next slide + } else if (activeNext !== undefined) { + if (!presTargetDoc.presProgressivize) { + const nextTagDoc = Cast(this.childDocs[this.itemIndex + 1].presentationTargetDoc, Doc, null); + const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); + nextChildDocs.forEach((doc, i) => { + doc.opacity = 1; + }) + } const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); this._moveOnFromAudio = false; @@ -130,15 +143,8 @@ export class PresBox extends ViewBoxBaseComponent this.updateCurrentPresentation(); const docAtCurrent = this.childDocs[this.itemIndex]; if (docAtCurrent) { - //check if any of the group members had used zooming in including the current document - //If so making sure to zoom out, which goes back to state before zooming action let prevSelected = this.itemIndex; - let didZoom = docAtCurrent.zoomButton; - // for (; !didZoom && prevSelected > 0 && this.childDocs[prevSelected].groupButton; prevSelected--) { - // didZoom = this.childDocs[prevSelected].zoomButton; - // } prevSelected = Math.max(0, prevSelected - 1); - this.gotoDocument(prevSelected, this.itemIndex); } } @@ -159,19 +165,11 @@ export class PresBox extends ViewBoxBaseComponent const panelWidth: number = srcDocView.props.PanelWidth(); const panelHeight: number = srcDocView.props.PanelHeight(); console.log("srcDocView: " + srcDocView.props.PanelWidth()); - // console.log("layoutdoc._width: " + layoutdoc._width); - // console.log("srcContext._width: " + srcContext._width); const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; - // const newPanX = NumCast(presTargetDoc.x) + panelWidth / 2; - // const newPanY = NumCast(presTargetDoc.y) + panelHeight / 2; let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); - // srcContext._panX = newPanX + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-left-indexed"]) + NumCast(presTargetDoc._panX) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-width-indexed"]) / 2)); - // srcContext._panY = newPanY + (NumCast(presTargetDoc._viewScale) * this.checkList(presTargetDoc, presTargetDoc["viewfinder-top-indexed"]) + NumCast(presTargetDoc._panY) + (this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]) / 2)); srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); - // srcContext._panX = newPanX - // srcContext._panY = newPanY srcContext._viewScale = newScale; console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); } @@ -203,9 +201,6 @@ export class PresBox extends ViewBoxBaseComponent const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); if (tagDoc) tagDoc.opacity = 1; if (curDoc.presHideTillShownButton) { - console.log("-------------hide before---------------"); - console.log("this.itemIndex: " + this.itemIndex); - console.log("index: " + index) if (index > this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideAfterButton) { @@ -213,9 +208,6 @@ export class PresBox extends ViewBoxBaseComponent } } if (curDoc.presHideAfterButton) { - console.log("-------------hide after---------------"); - console.log("this.itemIndex: " + (this.itemIndex + 1)); - console.log("index: " + (index + 1)) if (index < this.itemIndex) { tagDoc.opacity = 0; } else if (!curDoc.presHideTillShownButton) { @@ -225,73 +217,6 @@ export class PresBox extends ViewBoxBaseComponent }); } - @action - onHideAfterPresClick = () => { - this.childDocs.forEach((doc, index) => { - const curDoc = Cast(doc, Doc, null); - const tagDoc = Cast(curDoc.presentationTargetDoc, Doc, null); - if (curDoc.presHideAfterButton) { - if (index < this.itemIndex) { - tagDoc.opacity = 0; - } else if (index = this.itemIndex) { - tagDoc.opacity = 1; - } - } - }); - } - - /** - * This is the method that checks for the actions that need to be performed - * before the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - // @action - // hideDocumentInPres = () => { - // this.updateCurrentPresentation(); - // this.childDocs.forEach((doc, i) => { - // const tagDoc = Cast(doc.presentationTargetDoc, Doc, null); - // console.log("HB: " + doc.presHideTillShownButton); - // console.log("HA: " + doc.presHideAfterButton); - // if (doc.presHideTillShownButton) { - // if (i < this.itemIndex) { - // console.log(i + 1 + "hide before"); - // tagDoc.opacity = 0; - // console.log(tagDoc.opacity); - // } else { - // tagDoc.opacity = 1; - // } - // } - // if (doc.presHideAfterButton) { - // if (i > this.itemIndex) { - // console.log(i + 1 + "hide after"); - // tagDoc.opacity = 0; - // console.log(tagDoc.opacity); - // } else { - // tagDoc.opacity = 1; - // } - // } - // }); - // } - - /** - * This is the method that checks for the actions that need to be performed - * after the document has been presented, which involves 3 button options: - * Hide Until Presented, Hide After Presented, Fade After Presented - */ - // showAfterPresented = (index: number) => { - // this.updateCurrentPresentation(); - // this.childDocs.forEach((doc, ind) => { - // const presTargetDoc = doc.presentationTargetDoc as Doc; - // //the order of cases is aligned based on priority - // if (doc.presHideTillShownButton && ind <= index) { - // presTargetDoc.opacity = 1; - // } - // if (doc.presHideAfterButton && ind < index) { - // presTargetDoc.opacity = 0; - // } - // }); - // } - /** * This method makes sure that cursor navigates to the element that * has the option open and last in the group. If not in the group, and it has @@ -310,24 +235,12 @@ export class PresBox extends ViewBoxBaseComponent if (srcContext) this.layoutDoc.presCollection = srcContext; } else if (targetDoc) this.layoutDoc.presCollection = targetDoc; } - if (srcContext) console.log("NC: " + srcContext.title); - if (presCollection) console.log("PC: " + presCollection.title); if (collectionDocView) { - if (activeItem.openDocument) { - collectionDocView.props.addDocTab(activeItem, "inPlace"); - } else if (srcContext && srcContext !== presCollection) { - if (activeItem.openDocument) { - collectionDocView.props.addDocTab(activeItem, "inPlace"); - } else { - console.log("Case 1: new srcContext inside of current collection so add a new tab to the current pres collection"); - console.log(collectionDocView); - collectionDocView.props.addDocTab(srcContext, "inPlace"); - } + if (srcContext && srcContext !== presCollection) { + // Case 1: new srcContext inside of current collection so add a new tab to the current pres collection + collectionDocView.props.addDocTab(srcContext, "inPlace"); } } - if (targetDoc.presWebsiteData) { - targetDoc.data = targetDoc.presWebsiteData; - } // else if (srcContext) { // console.log("Case 2: srcContext - not open and collection containing this document exists, so open collection that contains it and then await zooming in on document"); // this.props.addDocTab(srcContext, "onRight"); @@ -354,6 +267,17 @@ export class PresBox extends ViewBoxBaseComponent //awaiting jump so that new scale can be found, since jumping is async targetDoc && await DocumentManager.Instance.jumpToDocument(targetDoc, willZoom, undefined, srcContext); } + if (activeItem.presPinView) { + targetDoc._panX = activeItem.presPinViewX; + targetDoc._panY = activeItem.presPinViewY; + targetDoc._viewScale = activeItem.presPinViewScale; + } + if (collectionDocView && activeItem.openDocument) { + collectionDocView.props.addDocTab(activeItem, "inPlace"); + } + if (targetDoc.presWebsiteData) { + targetDoc.data = targetDoc.presWebsiteData; + } } //The function that is called when a document is clicked or reached through next or back. @@ -381,6 +305,7 @@ export class PresBox extends ViewBoxBaseComponent @observable _presTimer!: NodeJS.Timeout; //The function that starts or resets presentaton functionally, depending on status flag. + @undoBatch @action startOrResetPres = (startSlide: number) => { this.updateCurrentPresentation(); @@ -432,31 +357,15 @@ export class PresBox extends ViewBoxBaseComponent this.turnOffEdit(); if (srcContext) { if (srcContext.miniPres) { - document.removeEventListener("keydown", this.keyEvents, false); + document.removeEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = false; - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; } else { - document.addEventListener("keydown", this.keyEvents, false); + document.addEventListener("keydown", this.minimizeEvents, false); srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); } } - // if (srcContext) { - // Doc.RemoveDocFromList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); - // CollectionDockingView.AddRightSplit(this.rootDoc); - // this.layoutDoc.inOverlay = false; - // } - // else { - // const pt = this.props.ScreenToLocalTransform().inverse().transformPoint(0, 0); - // this.rootDoc.x = pt[0];// 500;//e.clientX + 25; - // this.rootDoc.y = pt[1];////e.clientY - 25; - // this.props.addDocTab?.(this.rootDoc, "close"); - // Doc.AddDocToList((Doc.UserDoc().myOverlayDocuments as Doc), undefined, this.rootDoc); - // } - // } } @undoBatch @@ -464,7 +373,7 @@ export class PresBox extends ViewBoxBaseComponent //@ts-ignore const viewType = e.target.selectedOptions[0].value as CollectionViewType; viewType === CollectionViewType.Stacking && (this.rootDoc._pivotField = undefined); // pivot field may be set by the user in timeline view (or some other way) -- need to reset it here - // this.updateMinimize(this.rootDoc._viewType = viewType); + this.rootDoc._viewType = viewType; if (viewType === CollectionViewType.Stacking) this.layoutDoc._gridGap = 5; }); @@ -485,7 +394,7 @@ export class PresBox extends ViewBoxBaseComponent } else if (movement === 'switch') { targetDoc.presTransition = 0; activeItem.presSwitchButton = !activeItem.presSwitchButton; - if (activeItem.presSwitchButton) activeItem.presMovement = 'Switch'; + if (activeItem.presSwitchButton) activeItem.presMovement = 'Jump cut'; else activeItem.presMovement = 'None'; } else { activeItem.presMovement = 'None'; @@ -496,12 +405,11 @@ export class PresBox extends ViewBoxBaseComponent }); whenActiveChanged = action((isActive: boolean) => this.props.whenActiveChanged(this._isChildActive = isActive)); + // For dragging documents into the presentation trail addDocumentFilter = (doc: Doc | Doc[]) => { const docs = doc instanceof Doc ? [doc] : doc; docs.forEach((doc, i) => { if (this.childDocs.includes(doc)) { - console.log(docs.length); - console.log(i + 1); if (docs.length === i + 1) return false; } else { doc.aliasOf instanceof Doc && (doc.presentationTargetDoc = doc.aliasOf); @@ -574,33 +482,45 @@ export class PresBox extends ViewBoxBaseComponent } } + @action + minimizeEvents = (e: KeyboardEvent) => { + e.stopPropagation(); + e.preventDefault(); + if (e.keyCode === 27) { // Escape key + this.layoutDoc.presStatus = "edit"; + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next + this.next(); + } + } + //Esc click @action keyEvents = (e: KeyboardEvent) => { e.stopPropagation(); e.preventDefault(); - // switch(e.keyCode) { - // case 27: console.log("escape"); - // case 65 && (e.metaKey || e.altKey): - // } - // Escape key - if (e.keyCode === 27) { + + if (e.keyCode === 27) { // Escape key if (this.layoutDoc.presStatus === "edit") this._selectedArray = []; else this.layoutDoc.presStatus = "edit"; - // Ctrl-A to select all - } if ((e.metaKey || e.altKey) && e.keyCode === 65) { + } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - // left(37) / a(65) / up(38) to go back - } if (e.keyCode === 37) { + } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back if (this.layoutDoc.presStatus !== "edit") this.back(); - // right (39) / d(68) / down(40) to go to next - } if (e.keyCode === 39) { - if (this.layoutDoc.presStatus !== "edit") this.next(); - // spacebar to 'present' or go to next slide - } if (e.keyCode === 32) { + } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 32) { // spacebar to 'present' or autoplay + if (this.layoutDoc.presStatus !== "edit") this.startOrResetPres(0); else this.layoutDoc.presStatus = "manual"; } + if (e.keyCode === 8) { // delete selected items + if (this.layoutDoc.presStatus === "edit") { + this._selectedArray.forEach((doc, i) => { + this.removeDocument(doc); + }); + } + } } @observable private transitionTools: boolean = false; @@ -617,7 +537,6 @@ export class PresBox extends ViewBoxBaseComponent viewPaths = async () => { const srcContext = Cast(this.rootDoc.presCollection, Doc, null); if (this.pathBoolean) { - console.log("true"); if (srcContext) { this.togglePath(); srcContext._fitToBox = false; @@ -625,7 +544,6 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = false; } } else { - console.log("false"); if (srcContext) { this.togglePath(); srcContext._fitToBox = true; @@ -633,13 +551,8 @@ export class PresBox extends ViewBoxBaseComponent srcContext.presPathView = true; } } - console.log("view paths"); const viewType = srcContext?._viewType; const fit = srcContext?._fitToBox; - - // if (!DocumentManager.Instance.getDocumentView(curPres)) { - // CollectionDockingView.AddRightSplit(curPres); - // } } @computed get order() { @@ -664,7 +577,6 @@ export class PresBox extends ViewBoxBaseComponent @computed get paths() { let pathPoints = ""; - console.log(this.childDocs.length - 1); this.childDocs.forEach((doc, index) => { const targetDoc = Cast(doc.presentationTargetDoc, Doc, null); const srcContext = Cast(targetDoc.context, Doc, null); @@ -678,7 +590,6 @@ export class PresBox extends ViewBoxBaseComponent else pathPoints = pathPoints + " " + 0 + "," + 0; } }); - console.log(pathPoints); return ( } } + // WHAT IS THIS? @action dropdownToggle = (menu: string) => { - console.log('presBox' + menu + 'Dropdown'); const dropMenu = document.getElementById('presBox' + menu + 'Dropdown'); - console.log(dropMenu); - console.log(dropMenu?.style.display); if (dropMenu) dropMenu.style.display === 'none' ? dropMenu.style.display = 'block' : dropMenu.style.display = 'none'; } @@ -749,8 +658,6 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem && targetDoc) { const transitionSpeed = targetDoc.presTransition ? String(Number(targetDoc.presTransition) / 1000) : 0.5; const duration = targetDoc.presDuration ? String(Number(targetDoc.presDuration) / 1000) : 2; - const transitionThumbLocation = String(-9.48 * Number(transitionSpeed) + 93); - const durationThumbLocation = String(9.48 * Number(duration)); const effect = targetDoc.presEffect ? targetDoc.presEffect : 'None'; activeItem.presMovement = activeItem.presMovement ? activeItem.presMovement : 'Zoom'; return ( @@ -767,7 +674,7 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onClick={() => this.movementChanged('none')}>None
e.stopPropagation()} onClick={() => this.movementChanged('zoom')}>Pan and Zoom
e.stopPropagation()} onClick={() => this.movementChanged('nav')}>Pan
-
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Switch
+
e.stopPropagation()} onClick={() => this.movementChanged('switch')}>Jump cut
@@ -985,7 +892,6 @@ export class PresBox extends ViewBoxBaseComponent } createNewSlide = (layout?: string, title?: string, freeform?: boolean) => { - console.log("whats going on?"); let doc = undefined; if (layout) doc = this.createTemplate(layout); if (freeform && layout) doc = this.createTemplate(layout, title); @@ -1019,7 +925,7 @@ export class PresBox extends ViewBoxBaseComponent const content2 = Docs.Create.TextDocument("Click to change text", { title: "Column 2", _width: 185, _height: 140, x: 205, y: 80, _fontSize: "14pt" }); switch (layout) { case 'blank': - doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); + doc = Docs.Create.FreeformDocument([], { title: input ? input : "Blank slide", _width: 400, _height: 225, x: x, y: y }); break; case 'title': doc = Docs.Create.FreeformDocument([title, subtitle], { title: input ? input : "Title slide", _width: 400, _height: 225, _fitToBox: true, x: x, y: y }); @@ -1084,14 +990,14 @@ export class PresBox extends ViewBoxBaseComponent CollectionFreeFormDocumentView.setupScroll(tagDoc, 0); CollectionFreeFormDocumentView.setupKeyframes(childDocs, 0); } - let lastFrame: number = 0; - childDocs.forEach((doc) => { - if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); - }); + // let lastFrame: number = 0; + // childDocs.forEach((doc) => { + // if (NumCast(doc.appearFrame) > lastFrame) lastFrame = NumCast(doc.appearFrame); + // }); CollectionFreeFormDocumentView.updateScrollframe(tagDoc, currentFrame); CollectionFreeFormDocumentView.updateKeyframe(childDocs, currentFrame || 0); tagDoc.currentFrame = Math.max(0, (currentFrame || 0) + 1); - tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), lastFrame); + tagDoc.lastFrame = Math.max(NumCast(tagDoc.currentFrame), NumCast(tagDoc.lastFrame)); if (tagDoc.zoomProgressivize) { const resize = document.getElementById('resizable'); if (resize) { @@ -1153,20 +1059,20 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
{this.stringType} selected -
+
Child documents
Edit
-
+
Internal zoom
Viewfinder
{/*
Snapshot
*/}
-
+
Text progressivize
Edit
-
+
Scroll progressivize
Edit
@@ -1188,7 +1094,7 @@ export class PresBox extends ViewBoxBaseComponent
{"Last frame"}
}>
{NumCast(targetDoc.lastFrame)}
-
console.log("play frames")}>Play
+
console.log(" TODO: play frames")}>Play
@@ -1298,9 +1204,7 @@ export class PresBox extends ViewBoxBaseComponent const targetDoc = Cast(activeItem.presentationTargetDoc, Doc, null); const docs = DocListCast(targetDoc[Doc.LayoutFieldKey(targetDoc)]); targetDoc.presProgressivize = !targetDoc.presProgressivize; - console.log(targetDoc.presProgressivize); if (activeItem.presProgressivize) { - console.log("progressivize"); targetDoc.currentFrame = 0; CollectionFreeFormDocumentView.setupKeyframes(docs, docs.length, true); targetDoc.lastFrame = docs.length - 1; @@ -1350,9 +1254,6 @@ export class PresBox extends ViewBoxBaseComponent const y: List = ylist; const tags: JSX.Element[] = []; let pathPoints = ""; //List of all of the pathpoints that need to be added - // console.log(x); - // console.log(x.length); - // console.log(x[0]); for (let i = 0; i < x.length - 1; i++) { if (y[i] || x[i]) { if (i === 0) pathPoints = (x[i] - 11) + "," + (y[i] + 33); @@ -1630,7 +1531,6 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action nextAppearFrame = (doc: Doc, i: number): void => { - console.log("next"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const appearFrame = Cast(doc.appearFrame, "number", null); @@ -1638,9 +1538,7 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = appearFrame + 1; - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); } @undoBatch @@ -1654,9 +1552,32 @@ export class PresBox extends ViewBoxBaseComponent doc.appearFrame = 0; } doc.appearFrame = Math.max(0, appearFrame - 1); - const olist = new List(numberRange(NumCast(targetDoc.lastFrame)).map(t => targetDoc.presProgressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - doc["opacity-indexed"] = olist; - console.log(doc.appearFrame); + this.updateOpacityList(doc["opacity-indexed"], NumCast(doc.appearFrame)); + } + + @action + updateOpacityList = (list: any, frame: number) => { + const x: List = list; + if (x && x.length >= frame) { + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } else { + x.length = frame + 1; + for (let i = 0; i < x.length; i++) { + if (i < frame) { + x[i] = 0; + } else if (i >= frame) { + x[i] = 1; + } + } + list = x; + } } @computed get moreInfoDropdown() { @@ -1746,37 +1667,37 @@ export class PresBox extends ViewBoxBaseComponent onPointerDown={e => e.stopPropagation()} onChange={this.viewChanged} value={mode}> - {/* */} - {/* */}
- -
this.startOrResetPres(0)}> -   - -
-
{ e.stopPropagation; this.togglePlay(); }}> - - {this.playDropdown} -
- - +
this.layoutDoc.presStatus = "manual"}>   Present
{ e.stopPropagation; this.togglePresent(); }}> {this.presentDropdown}
-
- -
-
- -
-
this.layoutDoc.presStatus = "edit"}> - +
+ {/* +
this.startOrResetPres(0)}> +   + +
+
{ e.stopPropagation; this.togglePlay(); }}> + + {this.playDropdown} +
+ */} +
+
this.startOrResetPres(this.itemIndex)}>
+
+
+
Slide {this.itemIndex + 1} / {this.childDocs.length}
+
+
this.layoutDoc.presStatus = "edit"}> + +
@@ -1809,14 +1730,4 @@ Scripting.addGlobal(function lookupPresBoxField(container: Doc, field: string, d if (field === '_itemIndex') return container._itemIndex; if (field === 'presBox') return container; return undefined; -}); - - - -// console.log("render = " + this.layoutDoc.title + " " + this.layoutDoc.presStatus); -// const presOrderedDocs = DocListCast(activeItem.presOrderedDocs); -// if (presOrderedDocs.length != this.childDocs.length || presOrderedDocs.some((pd, i) => pd !== this.childDocs[i])) { -// this.rootDoc.presOrderedDocs = new List(this.childDocs.slice()); -// } - - +}); \ No newline at end of file diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index fc65f34eb..76d23ddfe 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -536,6 +536,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp Doc.AddDocToList(Cast(Doc.UserDoc()["template-notes"], Doc, null), "data", this.rootDoc); }, icon: "eye" }); + appearanceItems.push({ description: "Create progressivized slide...", event: this.progressivizeText, icon: "desktop" }); cm.addItem({ description: "Appearance...", subitems: appearanceItems, icon: "eye" }); const options = cm.findByDescription("Options..."); @@ -547,6 +548,69 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this._downX = this._downY = Number.NaN; } + progressivizeText = () => { + const list = this.ProseRef?.getElementsByTagName("li"); + const mainBulletText: string[] = []; + const mainBulletList: Doc[] = []; + if (list) { + const newBullets: Doc[] = this.recursiveProgressivize(1, list); + mainBulletList.push.apply(mainBulletList, newBullets); + } + console.log(mainBulletList.length); + const title = Docs.Create.TextDocument(StrCast(this.rootDoc.title), { title: "Title", _width: 800, _height: 70, x: 20, y: -10, _fontSize: '20pt', backgroundColor: "rgba(0,0,0,0)", appearFrame: 0, _fontWeight: 700 }); + mainBulletList.push(title); + const doc = Docs.Create.FreeformDocument(mainBulletList, { + title: StrCast(this.rootDoc.title), + x: NumCast(this.props.Document.x), y: NumCast(this.props.Document.y) + NumCast(this.props.Document._height) + 10, + _width: 400, _height: 225, _fitToBox: true, + }); + this.props.addDocument?.(doc); + } + + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): Doc[] => { + const mainBulletList: Doc[] = []; + let b = d ? d : 0; + let yLoc = y ? y : 0; + let nestCount = 0; + let count: string = before ? before : ''; + const fontSize: string = (16 - (nestDepth * 2)) + 'pt'; + const xLoc: number = (nestDepth * 20); + const width: number = 390 - xLoc; + const height: number = 55 - (nestDepth * 5); + for (let i = 0; i < list.length; i++) { + const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle")); + if (mainBullets === nestDepth) { + if (list[i].childElementCount > 1) { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].getElementsByTagName("p")[0].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count); + mainBulletList.push.apply(mainBulletList, newList); + b += newList.length; + yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); + } else { + b++; + nestCount++; + count = before ? count + nestCount + "." : nestCount + "."; + yLoc += height; + const text = list[i].innerText; + const length = text.length; + console.log(yLoc); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + mainBulletList.push(bullet1); + } + } + } + console.log("b: " + b); + return mainBulletList; + } + recordDictation = () => { DictationManager.Controls.listen({ interimHandler: this.setCurrentBulletContent, @@ -1374,6 +1438,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp color: this.props.color ? this.props.color : StrCast(this.layoutDoc[this.props.fieldKey + "-color"], this.props.hideOnLeave ? "white" : "inherit"), pointerEvents: interactive ? undefined : "none", fontSize: Cast(this.layoutDoc._fontSize, "string", null), + fontWeight: Cast(this.layoutDoc._fontWeight, "number", null), fontFamily: StrCast(this.layoutDoc._fontFamily, "inherit"), transition: "opacity 1s" }} diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 159cb5f8a..fa70b2a41 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -2,7 +2,8 @@ display: grid; grid-template-columns: max-content max-content max-content; background-color: #d5dce2; - // box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25); + font-family: Roboto; + letter-spacing: normal; position: relative; pointer-events: all; width: 100%; @@ -21,13 +22,30 @@ .presElementBox-highlight { position: absolute; - transform: translate(-100px, -6px); + transform: translate(-100px, -4px); z-index: -1; width: calc(100% + 200px); - height: calc(100% + 12px); + height: calc(100% + 8px); background-color: #AEDDF8; } + .presElementBox-highlightTop { + position: absolute; + transform: translate(-100px, -4px); + z-index: -1; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + + .presElementBox-highlightBottom { + position: absolute; + transform: translate(-100px, 0px); + z-index: -1; + top: 50%; + width: calc(100% + 200px); + height: calc(50% + 4px); + } + .documentView-node { position: absolute; z-index: 1; @@ -79,8 +97,12 @@ .presElementBox-number { font-size: 12px; + width: 20; font-weight: 700; - left: -15; + text-align: right; + justify-content: center; + align-content: center; + left: -20; position: absolute; display: inline-block; overflow: hidden; @@ -110,9 +132,8 @@ font-size: 10; font-weight: 300; font-family: Roboto; - /* font-style: italic; */ + z-index: 300; letter-spacing: normal; - /* left: 10px; */ } .presElementBox-embedded { @@ -174,7 +195,7 @@ bottom: 3px; width: 20px; height: 20px; - z-index: 200; + z-index: 300; display: flex; background-color: black; color: white; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index b3d8cca98..e035ed0b8 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -220,7 +220,7 @@ export class PresElementBox extends ViewBoxBaseComponent) => { + e.stopPropagation(); + e.preventDefault(); + DragManager.docsBeingDragged = []; + this._highlightTopRef.current!.style.borderBottom = "0px"; + this._highlightBottomRef.current!.style.borderBottom = "0px"; + } + startDrag = (e: PointerEvent, down: number[], delta: number[]) => { // const ele: HTMLElement[] = PresBox.Instance._eleArray.map(doc => doc); const activeItem = this.rootDoc; const dragData = new DragManager.DocumentDragData(PresBox.Instance.sortArray().map(doc => doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; + let dragItem: HTMLElement[] = []; + PresBox.Instance._dragArray.map(ele => { + const drag = ele; + drag.style.backgroundColor = "#d5dce2"; + drag.style.borderRadius = '5px'; + dragItem.push(drag); + }); if (activeItem) { - DragManager.StartDocumentDrag(PresBox.Instance._dragArray.map(ele => ele), dragData, e.clientX, e.clientY); + DragManager.StartDocumentDrag(dragItem.map(ele => ele), dragData, e.clientX, e.clientY); activeItem.dragging = true; return true; } return false; } + private _highlightTopRef: React.RefObject = React.createRef(); + private _highlightBottomRef: React.RefObject = React.createRef(); + onPointerTop = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightTopRef.current!.style.borderTop = "solid 2px #5B9FDD"; + } + } + + onPointerBottom = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "solid 2px #5B9FDD"; + } + } + + onPointerLeave = (e: React.PointerEvent) => { + if (DragManager.docsBeingDragged.length > 0) { + this._highlightBottomRef.current!.style.borderBottom = "0px"; + this._highlightTopRef.current!.style.borderTop = "0px"; + } + } + render() { const treecontainer = this.props.ContainingCollectionDoc?._viewType === CollectionViewType.Tree; - const className = "presElementBox-item" + (this.itemIndex === this.indexInPres ? " presElementBox-active" : ""); + const className = "presElementBox-item" + (PresBox.Instance._selectedArray.includes(this.rootDoc) ? " presElementBox-active" : ""); const pbi = "presElementBox-interaction"; return !(this.rootDoc instanceof Doc) || this.targetDoc instanceof Promise ? (null) : (
<>
@@ -297,7 +334,7 @@ export class PresElementBox extends ViewBoxBaseComponent
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
 -
{"Duration of visibility"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
{"Remove from presentation"}
}>
e.stopPropagation()} @@ -311,7 +348,9 @@ export class PresElementBox extends ViewBoxBaseComponent e.stopPropagation()} />
-
+
+
+
-- cgit v1.2.3-70-g09d2 From cc905d329c88d7bdf9b7324a4f02ab92906ba7c8 Mon Sep 17 00:00:00 2001 From: bobzel Date: Wed, 5 Aug 2020 22:20:49 -0400 Subject: cleanup of presentation code pre-merge. --- src/client/documents/Documents.ts | 4 -- src/client/util/CurrentUserUtils.ts | 8 ++-- src/client/views/InkingStroke.tsx | 6 +-- src/client/views/MainView.tsx | 2 +- .../CollectionStackingViewFieldColumn.tsx | 3 +- .../views/collections/CollectionTreeView.tsx | 1 - .../collectionFreeForm/PropertiesView.tsx | 4 +- src/client/views/nodes/AudioBox.tsx | 1 - .../views/nodes/CollectionFreeFormDocumentView.tsx | 11 +---- src/client/views/nodes/DocumentLinksButton.tsx | 2 +- src/client/views/nodes/PresBox.tsx | 49 ++++++++++------------ .../views/nodes/formattedText/FormattedTextBox.tsx | 17 ++++---- .../views/nodes/formattedText/RichTextMenu.tsx | 3 +- .../views/presentationview/PresElementBox.tsx | 2 +- 14 files changed, 46 insertions(+), 67 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index 57fcf3a00..959aeac41 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -801,10 +801,6 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { hideLinkButton: true, ...(options || {}) }); } - export function MenuIconDocument(options?: DocumentOptions) { - return InstanceFromProto(Prototypes.get(DocumentType.MENUICON), undefined, { hideLinkButton: true, ...(options || {}) }); - } - export function PresElementBoxDocument(options?: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.PRESELEMENT), undefined, { ...(options || {}) }); } diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 8023df8b4..4e59434b5 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -546,7 +546,7 @@ export class CurrentUserUtils { btn.color = "white"; btn._backgroundColor = ""; })); - }) + }); }); return doc.menuStack as Doc; } @@ -763,13 +763,13 @@ export class CurrentUserUtils { } static setupSidebarContainer(doc: Doc) { - if (doc["sidebar"] === undefined) { + if (doc.sidebar === undefined) { const sidebarContainer = new Doc(); sidebarContainer._chromeStatus = "disabled"; sidebarContainer.onClick = ScriptField.MakeScript("freezeSidebar()"); - doc["sidebar"] = new PrefetchProxy(sidebarContainer); + doc.sidebar = new PrefetchProxy(sidebarContainer); } - return doc["sidebar"] as Doc; + return doc.sidebar as Doc; } // setup the list of sidebar mode buttons which determine what is displayed in the sidebar diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 6c5eda256..4a77728b6 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -115,9 +115,9 @@ export class InkingStroke extends ViewBoxBaseComponent= 4) { for (var i = 0; i <= data.length - 4; i += 4) { controlPoints.push({ X: data[i].X, Y: data[i].Y, I: i }); diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 138ff226f..7f50dda72 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -80,7 +80,7 @@ export class MainView extends React.Component { @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeWorkspace, Doc)) : CurrentUserUtils.GuestWorkspace; } @computed public get mainFreeform(): Opt { return (docs => (docs && docs.length > 1) ? docs[1] : undefined)(DocListCast(this.mainContainer!.data)); } - @observable public sidebarContent: any = this.userDoc?.["sidebar"]; + @observable public sidebarContent: any = this.userDoc?.sidebar; @observable public panelContent: string = "none"; @observable public showProperties: boolean = false; public isPointerDown = false; diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 68c233a16..fbc4e1552 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -12,6 +12,7 @@ import { NumCast, StrCast, Cast } from "../../../fields/Types"; import { ImageField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; import { Docs, DocUtils } from "../../documents/Documents"; +import { DocumentType } from "../../documents/DocumentTypes"; import { DragManager } from "../../util/DragManager"; import { Transform } from "../../util/Transform"; import { undoBatch } from "../../util/UndoManager"; @@ -366,7 +367,7 @@ export class CollectionStackingViewFieldColumn extends React.Component - {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== 'presentation') ? + {(chromeStatus !== 'view-mode' && chromeStatus !== 'disabled' && type !== DocumentType.PRES) ?
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 8ec855c7c..3c7471d7c 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -133,7 +133,6 @@ class TreeView extends React.Component { } protected createTreeDropTarget = (ele: HTMLDivElement) => { - console.log("ele"); this._treedropDisposer?.(); ele && (this._treedropDisposer = DragManager.MakeDropTarget(ele, this.treeDrop.bind(this), undefined, this.preTreeDrop.bind(this)), this.doc); } diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 2b0a00498..dcbf8e989 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -552,7 +552,7 @@ export class PropertiesView extends React.Component { getField(key: string) { //if (this.selectedDoc) { - return Field.toString(this.selectedDoc[key] as Field); + return Field.toString(this?.[key] as Field); // } else { // return undefined as Opt; // } @@ -698,7 +698,7 @@ export class PropertiesView extends React.Component { this.widthStk = e.target.value))} - onMouseDown={(e) => { this._widthUndo = UndoManager.StartBatch("width undo");; }} + onMouseDown={(e) => { this._widthUndo = UndoManager.StartBatch("width undo"); }} onMouseUp={(e) => { this._widthUndo?.end(); this._widthUndo = undefined; }} />
diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index dba92faae..2396e6973 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -21,7 +21,6 @@ import { Docs, DocUtils } from "../../documents/Documents"; import { ComputedField } from "../../../fields/ScriptField"; import { Networking } from "../../Network"; import { LinkAnchorBox } from "./LinkAnchorBox"; -import { signedCookie } from "cookie-parser"; // testing testing diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index 35ed6c5a5..42a42ddf1 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -18,8 +18,6 @@ import { DocumentType } from "../../documents/DocumentTypes"; import { Zoom, Fade, Flip, Rotate, Bounce, Roll, LightSpeed } from 'react-reveal'; import { PresBox } from "./PresBox"; import { InkingStroke } from "../InkingStroke"; -import { PDFViewer } from "../pdf/PDFViewer"; -import { PDFBox } from "./PDFBox"; export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps { dataProvider?: (doc: Doc, replica: string) => { x: number, y: number, zIndex?: number, opacity?: number, highlight?: boolean, z: number, transition?: string } | undefined; @@ -119,7 +117,6 @@ export class CollectionFreeFormDocumentView extends DocComponent(numberRange(timecode + 1).map(i => undefined) as any as number[]); const hlist = new List(numberRange(timecode + 1).map(i => undefined) as any as number[]); const olist = new List(numberRange(timecode + 1).map(t => progressivize && t < (doc.appearFrame ? doc.appearFrame : i) ? 0 : 1)); - let oarray: List; - console.log(doc.title + "AF: " + doc.appearFrame); - console.log("timecode: " + timecode); - oarray = olist; + const oarray = olist; oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); oarray.fill(1, NumCast(doc.appearFrame), timecode); // oarray.fill(0, 0, NumCast(doc.appearFrame) - 1); - // oarray.fill(1, NumCast(doc.appearFrame), timecode); - // console.log(oarray); + // oarray.fill(1, NumCast(doc.appearFrame), timecode);\ wlist[curTimecode] = NumCast(doc._width); hlist[curTimecode] = NumCast(doc._height); xlist[curTimecode] = NumCast(doc.x); diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 4713ce447..025669b41 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -125,7 +125,7 @@ export class DocumentLinksButton extends React.Component DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0); LinkManager.currentLink = linkDoc; if (linkDoc) { diff --git a/src/client/views/nodes/PresBox.tsx b/src/client/views/nodes/PresBox.tsx index 1caefdc57..ccf1fb8e3 100644 --- a/src/client/views/nodes/PresBox.tsx +++ b/src/client/views/nodes/PresBox.tsx @@ -129,7 +129,7 @@ export class PresBox extends ViewBoxBaseComponent const nextChildDocs = DocListCast(nextTagDoc[Doc.LayoutFieldKey(presTargetDoc)]); nextChildDocs.forEach((doc, i) => { doc.opacity = 1; - }) + }); } const nextSelected = this.itemIndex + 1; this.gotoDocument(nextSelected, this.itemIndex); @@ -158,28 +158,24 @@ export class PresBox extends ViewBoxBaseComponent const vfHeight: number = this.checkList(presTargetDoc, presTargetDoc["viewfinder-height-indexed"]); // Case 1: document that is not a Golden Layout tab if (srcContext) { - console.log("CASE 1"); const srcDocView = DocumentManager.Instance.getDocumentView(srcContext); if (srcDocView) { const layoutdoc = Doc.Layout(presTargetDoc); const panelWidth: number = srcDocView.props.PanelWidth(); const panelHeight: number = srcDocView.props.PanelHeight(); - console.log("srcDocView: " + srcDocView.props.PanelWidth()); const newPanX = NumCast(presTargetDoc.x) + NumCast(layoutdoc._width) / 2; const newPanY = NumCast(presTargetDoc.y) + NumCast(layoutdoc._height) / 2; - let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); + const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); srcContext._panX = newPanX + (vfLeft + (vfWidth / 2)); srcContext._panY = newPanY + (vfTop + (vfHeight / 2)); srcContext._viewScale = newScale; - console.log("X: " + srcContext._panX + ", Y: " + srcContext._panY + ", Scale: " + srcContext._viewScale); } } // Case 2: document is the containing collection if (docView && !srcContext) { - console.log("CASE 2"); const panelWidth: number = docView.props.PanelWidth(); const panelHeight: number = docView.props.PanelHeight(); - let newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); + const newScale = 0.9 * Math.min(Number(panelWidth) / vfWidth, Number(panelHeight) / vfHeight); presTargetDoc._panX = vfLeft + (vfWidth / 2); presTargetDoc._panY = vfTop + (vfWidth / 2); presTargetDoc._viewScale = newScale; @@ -791,7 +787,7 @@ export class PresBox extends ViewBoxBaseComponent
Start manually
-
{ activeItem.openDocument = !activeItem.openDocument }}>Open document
+
activeItem.openDocument = !activeItem.openDocument}>Open document
Store original website
@@ -808,15 +804,15 @@ export class PresBox extends ViewBoxBaseComponent
e.stopPropagation()} onPointerUp={e => e.stopPropagation()} onPointerDown={e => e.stopPropagation()}>
-
runInAction(() => { this.layout = 'blank'; this.createNewSlide(this.layout); })} /> -
runInAction(() => { this.layout = 'title'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'blank'; this.createNewSlide(this.layout); })} /> +
{ this.layout = 'title'; this.createNewSlide(this.layout); })}>
Title
Subtitle
-
runInAction(() => { this.layout = 'header'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'header'; this.createNewSlide(this.layout); })}>
Section header
-
runInAction(() => { this.layout = 'content'; this.createNewSlide(this.layout); })}> +
{ this.layout = 'content'; this.createNewSlide(this.layout); })}>
Title
Text goes here
@@ -845,39 +841,39 @@ export class PresBox extends ViewBoxBaseComponent {/*
*/} { e.stopPropagation(); - runInAction(() => { (this.title = e.target.value) }); + runInAction(() => this.title = e.target.value); }}> {/*
*/}
Choose type:
-
runInAction(() => { this.addFreeform = !this.addFreeform })}>Text
-
runInAction(() => { this.addFreeform = !this.addFreeform })}>Freeform
+
this.addFreeform = !this.addFreeform)}>Text
+
this.addFreeform = !this.addFreeform)}>Freeform
Preset layouts:
-
runInAction(() => { this.layout = 'blank' })} /> -
runInAction(() => { this.layout = 'title' })}> +
this.layout = 'blank')} /> +
this.layout = 'title')}>
Title
Subtitle
-
runInAction(() => { this.layout = 'header' })}> +
this.layout = 'header')}>
Section header
-
runInAction(() => { this.layout = 'content' })}> +
this.layout = 'content')}>
Title
Text goes here
-
runInAction(() => { this.layout = 'twoColumns' })}> +
this.layout = 'twoColumns')}>
Title
Column one text
Column two text
-
runInAction(() => { this.openLayouts = !this.openLayouts })}> +
this.openLayouts = !this.openLayouts)}>
@@ -974,10 +970,10 @@ export class PresBox extends ViewBoxBaseComponent } // For toggling the options when the user wants to select play - @action togglePlay = () => { this.playTools = !this.playTools; } + @action togglePlay = () => { this.playTools = !this.playTools; }; // For toggling the options when the user wants to select play - @action togglePresent = () => { this.presentTools = !this.presentTools; } + @action togglePresent = () => { this.presentTools = !this.presentTools; }; // Case in which the document has keyframes to navigate to next key frame @undoBatch @@ -1381,9 +1377,7 @@ export class PresBox extends ViewBoxBaseComponent if (doc && tagDocView) { const scale = tagDocView.childScaling(); - console.log("childScaling: " + scale); const scale2 = tagDocView.props.ScreenToLocalTransform().Scale; - console.log("ScreenToLocal...Scale: " + scale2); let height = doc.offsetHeight; let width = doc.offsetWidth; let top = doc.offsetTop; @@ -1544,7 +1538,6 @@ export class PresBox extends ViewBoxBaseComponent @undoBatch @action prevAppearFrame = (doc: Doc, i: number): void => { - console.log("prev"); const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); const targetDoc = Cast(activeItem?.presentationTargetDoc, Doc, null); const appearFrame = Cast(doc.appearFrame, "number", null); @@ -1595,7 +1588,7 @@ export class PresBox extends ViewBoxBaseComponent if (activeItem) { return ( <> -
{"Add new slide"}
}>
runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}> +
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}>
@@ -1636,7 +1629,7 @@ export class PresBox extends ViewBoxBaseComponent } else { return ( <> -
{"Add new slide"}
}>
runInAction(() => { this.newDocumentTools = !this.newDocumentTools; })}> +
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}>
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 76d23ddfe..ab1de5529 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -577,20 +577,19 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const xLoc: number = (nestDepth * 20); const width: number = 390 - xLoc; const height: number = 55 - (nestDepth * 5); - for (let i = 0; i < list.length; i++) { - const mainBullets: number = Number(list[i].getAttribute("data-bulletstyle")); + Array.from(list).forEach(listItem => { + const mainBullets: number = Number(listItem.getAttribute("data-bulletstyle")); if (mainBullets === nestDepth) { - if (list[i].childElementCount > 1) { + if (listItem.childElementCount > 1) { b++; nestCount++; count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; - const text = list[i].getElementsByTagName("p")[0].innerText; + const text = listItem.getElementsByTagName("p")[0].innerText; const length = text.length; - console.log(yLoc); const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); mainBulletList.push(bullet1); - const newList = this.recursiveProgressivize(nestDepth + 1, list[i].getElementsByTagName("li"), b, yLoc, count); + const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count); mainBulletList.push.apply(mainBulletList, newList); b += newList.length; yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); @@ -599,15 +598,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp nestCount++; count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; - const text = list[i].innerText; + const text = listItem.innerText; const length = text.length; - console.log(yLoc); const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); mainBulletList.push(bullet1); } } - } - console.log("b: " + b); + }); return mainBulletList; } diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index 6e268be48..5af07c15d 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -903,8 +903,9 @@ export default class RichTextMenu extends AntimodeMenu { ref_node = pos.nodeBefore; } if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) { - if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos) + if (!pos.nodeBefore || this.view.state.selection.$from.pos !== this.view.state.selection.$to.pos) { ref_node = pos.nodeAfter; + } } if (!ref_node && pos.pos > 0) { let skip = false; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index e035ed0b8..11ffde9dd 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -259,7 +259,7 @@ export class PresElementBox extends ViewBoxBaseComponent doc)); // let value = this.getValue(this._heading); // value = typeof value === "string" ? `"${value}"` : value; - let dragItem: HTMLElement[] = []; + const dragItem: HTMLElement[] = []; PresBox.Instance._dragArray.map(ele => { const drag = ele; drag.style.backgroundColor = "#d5dce2"; -- cgit v1.2.3-70-g09d2 From 33487aa34fd455acf5216cfee7913d6e36f390ed Mon Sep 17 00:00:00 2001 From: Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> Date: Fri, 7 Aug 2020 01:35:46 +0800 Subject: presentaiton options slightly reformatted :pear: --- src/client/views/PropertiesButtons.tsx | 3 +- .../views/collections/CollectionDockingView.tsx | 3 +- .../collectionFreeForm/PropertiesView.scss | 37 +++++++++ .../collectionFreeForm/PropertiesView.tsx | 64 ++++++++-------- src/client/views/nodes/PresBox.scss | 8 +- src/client/views/nodes/PresBox.tsx | 89 ++++++++++------------ .../views/nodes/formattedText/FormattedTextBox.tsx | 19 ++--- .../views/presentationview/PresElementBox.scss | 4 +- .../views/presentationview/PresElementBox.tsx | 3 +- 9 files changed, 128 insertions(+), 102 deletions(-) (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx index 55eb6c028..5c584d270 100644 --- a/src/client/views/PropertiesButtons.tsx +++ b/src/client/views/PropertiesButtons.tsx @@ -221,8 +221,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
DockedFrameRenderer.PinDoc(targetDoc, isPinned)}> - +
{ return (
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)} > - {
document.addEventListener("keydown", PresBox.Instance.minimizeEvents, false)}> + {
PresBox.Instance.startAutoPres(PresBox.Instance.itemIndex)}>
diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.scss b/src/client/views/collections/collectionFreeForm/PropertiesView.scss index 5b41db90e..3ae94efb7 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.scss +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.scss @@ -405,6 +405,43 @@ } } + + .propertiesView-presTrails { + border-bottom: 1px solid black; + //padding: 8.5px; + + .propertiesView-presTrails-title { + font-weight: bold; + font-size: 12.5px; + padding: 4px; + display: flex; + color: white; + padding-left: 8px; + background-color: rgb(51, 51, 51); + + &:hover { + cursor: pointer; + } + + .propertiesView-presTrails-title-icon { + float: right; + right: 0; + position: absolute; + margin-left: 2px; + margin-right: 9px; + + &:hover { + cursor: pointer; + } + } + } + + .propertiesView-presTrails-content { + font-size: 10px; + padding: 10px; + margin-left: 5px; + } + } } .inking-button { diff --git a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx index 89f48fc65..cef2241c9 100644 --- a/src/client/views/collections/collectionFreeForm/PropertiesView.tsx +++ b/src/client/views/collections/collectionFreeForm/PropertiesView.tsx @@ -71,11 +71,10 @@ export class PropertiesView extends React.Component { @observable openAppearance: boolean = true; @observable openTransform: boolean = true; //Pres Trails booleans: - @observable openAddSlide: boolean = true; - @observable openPresentationTools: boolean = true; - @observable openPresTransitions: boolean = true; - @observable openPresProgressivize: boolean = true; - @observable openSlideOptions: boolean = true; + @observable openPresTransitions: boolean = false; + @observable openPresProgressivize: boolean = false; + @observable openAddSlide: boolean = false; + @observable openSlideOptions: boolean = false; @observable inActions: boolean = false; @observable _controlBtn: boolean = false; @@ -874,6 +873,7 @@ export class PropertiesView extends React.Component {
; } if (this.isPres) { + const selectedItem: boolean = PresBox.Instance._selectedArray.length > 0; return
Presentation @@ -890,57 +890,57 @@ export class PropertiesView extends React.Component {
-
-
runInAction(() => { this.openAddSlide = !this.openAddSlide; })} - style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> -     Add new slide -
- -
-
- {this.openAddSlide ?
- {PresBox.Instance.newDocumentDropdown} -
: null} -
-
-
+
runInAction(() => { this.openPresTransitions = !this.openPresTransitions; })} style={{ backgroundColor: this.openPresTransitions ? "black" : "" }}>     Transitions -
+
- {this.openPresTransitions ?
+ {this.openPresTransitions ?
{PresBox.Instance.transitionDropdown}
: null} -
-
-
} + {!selectedItem ? (null) :
+
runInAction(() => { this.openPresProgressivize = !this.openPresProgressivize; })} style={{ backgroundColor: this.openPresProgressivize ? "black" : "" }}>     Progressivize -
+
- {this.openPresProgressivize ?
+ {this.openPresProgressivize ?
{PresBox.Instance.progressivizeDropdown}
: null} -
-
-
} + {!selectedItem ? (null) :
+
runInAction(() => { this.openSlideOptions = !this.openSlideOptions; })} style={{ backgroundColor: this.openSlideOptions ? "black" : "" }}>     {PresBox.Instance.stringType} options -
+
- {this.openSlideOptions ?
+ {this.openSlideOptions ?
{PresBox.Instance.optionsDropdown}
: null} +
} +
+
runInAction(() => { this.openAddSlide = !this.openAddSlide; })} + style={{ backgroundColor: this.openAddSlide ? "black" : "" }}> +     Add new slide +
+ +
+
+ {this.openAddSlide ?
+ {PresBox.Instance.newDocumentDropdown} +
: null}
if (srcContext.miniPres) { srcContext.miniPres = false; CollectionDockingView.AddRightSplit(this.rootDoc); - document.removeEventListener("keydown", this.minimizeEvents, false); } else { srcContext.miniPres = true; this.props.addDocTab?.(this.rootDoc, "close"); - document.addEventListener("keydown", this.minimizeEvents, false); } } } @@ -506,20 +504,6 @@ export class PresBox extends ViewBoxBaseComponent } } - // Key events when the minimized player is active - @action - minimizeEvents = (e: KeyboardEvent) => { - e.stopPropagation(); - e.preventDefault(); - if (e.keyCode === 27) { // Escape key - this.layoutDoc.presStatus = "edit"; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - this.next(); - } - } - // Key for when the presentaiton is active (according to Selection Manager) @action keyEvents = (e: KeyboardEvent) => { @@ -531,10 +515,10 @@ export class PresBox extends ViewBoxBaseComponent else this.layoutDoc.presStatus = "edit"; } if ((e.metaKey || e.altKey) && e.keyCode === 65) { // Ctrl-A to select all if (this.layoutDoc.presStatus === "edit") this._selectedArray = this.childDocs; - } if (e.keyCode === 37) { // left(37) / a(65) / up(38) to go back - if (this.layoutDoc.presStatus !== "edit") this.back(); - } if (e.keyCode === 39) { // right (39) / d(68) / down(40) to go to next - if (this.layoutDoc.presStatus !== "edit") this.next(); + } if (e.keyCode === 37 || e.keyCode === 38) { // left(37) / a(65) / up(38) to go back + this.back(); + } if (e.keyCode === 39 || e.keyCode === 40) { // right (39) / d(68) / down(40) to go to next + this.next(); } if (e.keyCode === 32) { // spacebar to 'present' or autoplay if (this.layoutDoc.presStatus !== "edit") this.startAutoPres(0); else this.layoutDoc.presStatus = "manual"; @@ -720,7 +704,7 @@ export class PresBox extends ViewBoxBaseComponent
{duration} s
) => { e.stopPropagation(); this.setDurationTime(e.target.value); }} /> -
+
Short
Medium
Long
@@ -814,6 +798,20 @@ export class PresBox extends ViewBoxBaseComponent
activeItem.openDocument = !activeItem.openDocument}>Open document
+
+
{ + activeItem.presPinView = !activeItem.presPinView; + if (activeItem.presPinView) { + const x = targetDoc._panX; + const y = targetDoc._panY; + const scale = targetDoc._viewScale; + activeItem.presPinViewX = x; + activeItem.presPinViewY = y; + activeItem.presPinViewScale = scale; + } + }}>Presentation pin view
+
Store original website
@@ -1592,35 +1590,26 @@ export class PresBox extends ViewBoxBaseComponent @computed get toolbar() { const activeItem = Cast(this.childDocs[this.itemIndex], Doc, null); - if (activeItem) { - return ( -
-
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> - - -
-
-
{"View paths"}
}>
- 1 ? this.viewPaths : undefined} /> -
-
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> -
{ this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> - -
- -
-
- ); - } else { - return ( -
-
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> - - -
-
- ); - } + return ( +
+
{"Add new slide"}
}>
this.newDocumentTools = !this.newDocumentTools)}> + + +
+
+
{"View paths"}
}> +
1 ? 1 : 0.3 }} className={`toolbar-button ${this.pathBoolean ? "active" : ""}`} onClick={this.childDocs.length > 1 ? this.viewPaths : undefined}> + +
+ +
{this.expandBoolean ? "Minimize all" : "Expand all"}
}> +
0 ? 1 : 0.3 }} className={`toolbar-button ${this.expandBoolean ? "active" : ""}`} onClick={() => { if (this.childDocs.length > 0) this.toggleExpand(); this.childDocs.forEach((doc, ind) => { if (this.expandBoolean) doc.presExpandInlineButton = true; else doc.presExpandInlineButton = false; }); }}> + +
+ +
+
+ ); } /** diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index af4bd77c7..cc37cf586 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -577,7 +577,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp const mainBulletText: string[] = []; const mainBulletList: Doc[] = []; if (list) { - const newBullets: Doc[] = this.recursiveProgressivize(1, list); + const newBullets: Doc[] = this.recursiveProgressivize(1, list)[0]; mainBulletList.push.apply(mainBulletList, newBullets); } console.log(mainBulletList.length); @@ -591,7 +591,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp this.props.addDocument?.(doc); } - recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): Doc[] => { + recursiveProgressivize = (nestDepth: number, list: HTMLCollectionOf, d?: number, y?: number, before?: string): [Doc[], number] => { const mainBulletList: Doc[] = []; let b = d ? d : 0; let yLoc = y ? y : 0; @@ -607,29 +607,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp if (listItem.childElementCount > 1) { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.getElementsByTagName("p")[0].innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); const newList = this.recursiveProgressivize(nestDepth + 1, listItem.getElementsByTagName("li"), b, yLoc, count); - mainBulletList.push.apply(mainBulletList, newList); - b += newList.length; + mainBulletList.push.apply(mainBulletList, newList[0]); yLoc += newList.length * (55 - ((nestDepth + 1) * 5)); } else { b++; nestCount++; - count = before ? count + nestCount + "." : nestCount + "."; yLoc += height; + count = before ? count + nestCount + "." : nestCount + "."; const text = listItem.innerText; const length = text.length; - const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _height: height, x: xLoc, y: 10 + (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + const bullet1 = Docs.Create.TextDocument(count + " " + text, { title: "Slide text", _width: width, _autoHeight: true, x: xLoc, y: (yLoc), _fontSize: fontSize, backgroundColor: "rgba(0,0,0,0)", appearFrame: d ? d : b }); + // yLoc += NumCast(bullet1._height); mainBulletList.push(bullet1); } } }); - return mainBulletList; + return [mainBulletList, yLoc]; } recordDictation = () => { diff --git a/src/client/views/presentationview/PresElementBox.scss b/src/client/views/presentationview/PresElementBox.scss index 3d730d7ac..1e776384a 100644 --- a/src/client/views/presentationview/PresElementBox.scss +++ b/src/client/views/presentationview/PresElementBox.scss @@ -4,7 +4,7 @@ $light-background: #ececec; .presElementBox-item { display: grid; - grid-template-columns: max-content max-content max-content; + grid-template-columns: max-content max-content max-content max-content; background-color: #d5dce2; font-family: Roboto; letter-spacing: normal; @@ -122,7 +122,7 @@ $light-background: #ececec; padding-left: 10px; padding-right: 10px; letter-spacing: normal; - max-width: max-content; + width: max-content; text-overflow: ellipsis; overflow: hidden; white-space: pre; diff --git a/src/client/views/presentationview/PresElementBox.tsx b/src/client/views/presentationview/PresElementBox.tsx index 816577847..a6dbb76ef 100644 --- a/src/client/views/presentationview/PresElementBox.tsx +++ b/src/client/views/presentationview/PresElementBox.tsx @@ -326,11 +326,12 @@ export class PresElementBox extends ViewBoxBaseComponent {`${this.indexInPres + 1}.`}
-
+
{`${this.targetDoc?.title}`}
{"Movement speed"}
}>
300 ? "block" : "none" }}>{this.transition}
{"Duration"}
}>
300 ? "block" : "none" }}>{this.duration}
 +
{"Presentation pin view"}
}>
300 ? "block" : "none" }}>V
{"Remove from presentation"}
}>
{ -- cgit v1.2.3-70-g09d2 From b827bdfecc5646b479c7e5654ed98243de91cf9a Mon Sep 17 00:00:00 2001 From: Lionel Han <47760119+IGoByJoe@users.noreply.github.com> Date: Thu, 6 Aug 2020 17:24:56 -0700 Subject: cleaned up code and fixed bugs --- src/client/views/nodes/AudioBox.tsx | 415 ++++++--------------- src/client/views/nodes/AudioResizer.scss | 11 - src/client/views/nodes/AudioResizer.tsx | 48 --- .../views/nodes/formattedText/FormattedTextBox.tsx | 18 +- 4 files changed, 114 insertions(+), 378 deletions(-) delete mode 100644 src/client/views/nodes/AudioResizer.scss delete mode 100644 src/client/views/nodes/AudioResizer.tsx (limited to 'src/client/views/nodes/formattedText') diff --git a/src/client/views/nodes/AudioBox.tsx b/src/client/views/nodes/AudioBox.tsx index 1d060120e..11dfe5fe6 100644 --- a/src/client/views/nodes/AudioBox.tsx +++ b/src/client/views/nodes/AudioBox.tsx @@ -60,7 +60,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent = []; _first: boolean = false; _dragging = false; @@ -77,7 +76,6 @@ export class AudioBox extends ViewBoxAnnotatableComponent { runInAction(() => AudioBox._scrubTime = 0); runInAction(() => AudioBox._scrubTime = timeInMillisFrom1970); }; @@ -126,36 +124,38 @@ export class AudioBox extends ViewBoxAnnotatableComponent { + // for determining if the link is created after recording (since it will use linkTime rather than creation date) + DocListCast(this.dataDoc.links).map((l, i) => { let la1 = l.anchor1 as Doc; let la2 = l.anchor2 as Doc; - let linkTime = NumCast(l.anchor2_timecode); - let endTime; - if (Doc.AreProtosEqual(la1, this.dataDoc)) { - la1 = l.anchor2 as Doc; - la2 = l.anchor1 as Doc; - linkTime = NumCast(l.anchor1_timecode); - } - if (la2.audioStart) { - linkTime = NumCast(la2.audioStart); - } + if (la1 === sel || la2 === sel) { // if the selected document is linked to this audio + let linkTime = NumCast(l.anchor2_timecode); + let endTime; + if (Doc.AreProtosEqual(la1, this.dataDoc)) { + la1 = l.anchor2 as Doc; + la2 = l.anchor1 as Doc; + linkTime = NumCast(l.anchor1_timecode); + } + if (la2.audioStart) { + linkTime = NumCast(la2.audioStart); + } - if (la1.audioStart) { - linkTime = NumCast(la1.audioStart); - } + if (la1.audioStart) { + linkTime = NumCast(la1.audioStart); + } - if (la1.audioEnd) { - endTime = NumCast(la1.audioEnd); - } + if (la1.audioEnd) { + endTime = NumCast(la1.audioEnd); + } - if (la2.audioEnd) { - endTime = NumCast(la2.audioEnd); - } + if (la2.audioEnd) { + endTime = NumCast(la2.audioEnd); + } - if (linkTime) { - link = true; - this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime); + if (linkTime) { + link = true; + this.layoutDoc.playOnSelect && this.recordingStart && sel && !Doc.AreProtosEqual(sel, this.props.Document) && (endTime ? this.playFrom(linkTime, endTime) : this.playFrom(linkTime)); + } } }); } @@ -189,19 +189,19 @@ export class AudioBox extends ViewBoxAnnotatableComponent { - if (this._repeat) { - this.playFrom(0); - } else { - this._ele!.pause(); - this.audioState = "paused"; - } + console.log("pause"); + this._ele!.pause(); + this.audioState = "paused"; }); + // play audio for documents created during recording playFromTime = (absoluteTime: number) => { this.recordingStart && this.playFrom((absoluteTime - this.recordingStart) / 1000); } + // play back the audio from time @action playFrom = (seekTimeInSeconds: number, endTime: number = this.dataDoc.duration) => { let play; @@ -220,15 +220,15 @@ export class AudioBox extends ViewBoxAnnotatableComponent this.audioState = "playing"); if (endTime !== this.dataDoc.duration) { - play = setTimeout(() => this.pause(), (this._duration) * 1000); + play = setTimeout(() => this.pause(), (this._duration) * 1000); // use setTimeout to play a specific duration } - } else { // this is getting called because time is greater than duration + } else { this.pause(); } } } - + // update the recording time updateRecordTime = () => { if (this.audioState === "recording") { if (this._paused) { @@ -241,6 +241,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this._stream = await navigator.mediaDevices.getUserMedia({ audio: true }); this._recorder = new MediaRecorder(this._stream); @@ -259,6 +260,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent this._recorder && this.stopRecording(), 60 * 60 * 1000); // stop after an hour } + // context menu specificContextMenu = (e: React.MouseEvent): void => { const funcs: ContextMenuProps[] = []; funcs.push({ description: (this.layoutDoc.playOnSelect ? "Don't play" : "Play") + " when link is selected", event: () => this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect, icon: "expand-arrows-alt" }); @@ -268,6 +270,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this._recorder.stop(); this._recorder = undefined; @@ -278,6 +281,7 @@ export class AudioBox extends ViewBoxAnnotatableComponent { if (e.button === 0 && !e.ctrlKey) { this._recorder ? this.stopRecording() : this.recordAudioAnnotation(); @@ -285,14 +289,13 @@ export class AudioBox extends ViewBoxAnnotatableComponent { this.playFrom(this._ele!.paused ? this._ele!.currentTime : -1); e.stopPropagation(); } - onStop = (e: any) => { - this.layoutDoc.playOnSelect = !this.layoutDoc.playOnSelect; - e.stopPropagation(); - } + + // creates a text document for dictation onFile = (e: any) => { const newDoc = Docs.Create.TextDocument("", { title: "", _chromeStatus: "disabled", @@ -306,125 +309,21 @@ export class AudioBox extends ViewBoxAnnotatableComponent { e?.addEventListener("timeupdate", this.timecodeChanged); e?.addEventListener("ended", this.pause); this._ele = e; } + // returns the path of the audio file @computed get path() { const field = Cast(this.props.Document[this.props.fieldKey], AudioField); const path = (field instanceof AudioField) ? field.url.href : ""; return path === nullAudio ? "" : path; } - // @action - // buckets = () => { - // let audioCtx = new (window.AudioContext)(); - // const buckets: number[] = []; - - // axios({ url: this.path, responseType: "arraybuffer" }) - // .then(response => runInAction(() => { - // let audioData = response.data; - - // audioCtx.decodeAudioData(audioData, buffer => { - // let decodedAudioData = buffer.getChannelData(0); - // const NUMBER_OF_BUCKETS = 100; - // let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); - - // for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { - // let startingPoint = i * bucketDataSize; - // let endingPoint = i * bucketDataSize + bucketDataSize; - // let max = 0; - // for (let j = startingPoint; j < endingPoint; j++) { - // if (decodedAudioData[j] > max) { - // max = decodedAudioData[j]; - // } - // } - // let size = Math.abs(max); - // buckets.push(size / 2); - // } - - // }); - // return buckets - // })); - // } - - @action - buckets = async () => { - let audioCtx = new (window.AudioContext)(); - const buckets: number[] = []; - - axios({ url: this.path, responseType: "arraybuffer" }) - .then(response => { - let audioData = response.data; - - audioCtx.decodeAudioData(audioData, action(buffer => { - let decodedAudioData = buffer.getChannelData(0); - const NUMBER_OF_BUCKETS = 100; - let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); - - for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { - let startingPoint = i * bucketDataSize; - let endingPoint = i * bucketDataSize + bucketDataSize; - let max = 0; - for (let j = startingPoint; j < endingPoint; j++) { - if (decodedAudioData[j] > max) { - max = decodedAudioData[j]; - } - } - let size = Math.abs(max); - buckets.push(size / 2); - this._buckets.push(size / 2); - } - - })); - return buckets; - }); - } - - @computed get peaks() { - // let audioCtx = new (window.AudioContext)(); - // let buckets: number[] = []; - - // return (async () => { - // await axios({ url: this.path, responseType: "arraybuffer" }) - // .then(response => { - // let audioData = response.data; - - // audioCtx.decodeAudioData(audioData, buffer => { - // let decodedAudioData = buffer.getChannelData(0); - // const NUMBER_OF_BUCKETS = 100; - // let bucketDataSize = Math.floor(decodedAudioData.length / NUMBER_OF_BUCKETS); - - - - // for (let i = 0; i < NUMBER_OF_BUCKETS; i++) { - // let startingPoint = i * bucketDataSize; - // let endingPoint = i * bucketDataSize + bucketDataSize; - // let max = 0; - // for (let j = startingPoint; j < endingPoint; j++) { - // if (decodedAudioData[j] > max) { - // max = decodedAudioData[j]; - // } - // } - // let size = Math.abs(max); - // console.log(size); - // buckets.push(size / 2); - // console.log(buckets); - // } - // }); - // console.log(buckets); - // return buckets; - // }); - // console.log(buckets.length); - // return buckets; - // })(); - - - return this.buckets(); - } - + // returns the html audio element @computed get audio() { const interactive = this.active() ? "-interactive" : ""; return