diff options
Diffstat (limited to 'src/client/views/SidebarAnnos.tsx')
| -rw-r--r-- | src/client/views/SidebarAnnos.tsx | 70 |
1 files changed, 42 insertions, 28 deletions
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 816fc8ed3..71b479a22 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -1,10 +1,9 @@ import { computed, makeObservable } from 'mobx'; import { observer } from 'mobx-react'; import * as React from 'react'; -import { ClientUtils, returnAll, returnFalse, returnOne, returnZero } from '../../ClientUtils'; +import { ClientUtils, returnFalse, returnOne, returnZero } from '../../ClientUtils'; import { emptyFunction } from '../../Utils'; -import { Doc, DocListCast, Field, FieldResult, FieldType, StrListCast } from '../../fields/Doc'; -import { DocData } from '../../fields/DocSymbols'; +import { Doc, DocListCast, Field, FieldResult, FieldType, Opt, StrListCast } from '../../fields/Doc'; import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; import { RichTextField } from '../../fields/RichTextField'; @@ -20,10 +19,11 @@ import { StyleProp } from './StyleProp'; import { CollectionStackingView } from './collections/CollectionStackingView'; import { DocumentView } from './nodes/DocumentView'; import { FieldViewProps } from './nodes/FieldView'; +import { FocusViewOptions } from './nodes/FocusViewOptions'; interface ExtraProps { fieldKey: string; - Document: Doc; + Doc: Doc; layoutDoc: Doc; dataDoc: Doc; // usePanelWidth: boolean; @@ -46,7 +46,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr _stackRef = React.createRef<CollectionStackingView>(); @computed get allMetadata() { const keys = new Map<string, FieldResult<FieldType>>(); - DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => + DocListCast(this._props.Doc[this.sidebarKey]).forEach(doc => SearchUtil.documentKeys(doc) .filter(key => key[0] && key[0] !== '_' && key[0] === key[0].toUpperCase()) .map(key => keys.set(key, doc[key])) @@ -55,7 +55,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr } @computed get allHashtags() { const keys = new Set<string>(); - DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => StrListCast(doc.tags).forEach(tag => keys.add(tag))); + DocListCast(this._props.Doc[this.sidebarKey]).forEach(doc => StrListCast(doc.tags).forEach(tag => keys.add(tag))); return Array.from(keys.keys()) .filter(key => key[0]) .filter(key => !key.startsWith('_') && (key[0] === '#' || key[0] === key[0].toUpperCase())) @@ -63,7 +63,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr } @computed get allUsers() { const keys = new Set<string>(); - DocListCast(this._props.Document[this.sidebarKey]).forEach(doc => keys.add(StrCast(doc.author))); + DocListCast(this._props.Doc[this.sidebarKey]).forEach(doc => keys.add(StrCast(doc.author))); return Array.from(keys.keys()).sort(); } @@ -73,7 +73,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr .join(' '); const target = Docs.Create.TextDocument(startup, { title: '-note-', - annotationOn: this._props.Document, + annotationOn: this._props.Doc, _width: 200, _height: 50, _layout_fitWidth: true, @@ -88,9 +88,9 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr .filter(data => data.split(':')[0]) .filter(data => !filterExlusions?.includes(data.split(':')[0])) .map(data => { - const key = data.split(':')[0]; + const key = '$' + data.split(':')[0]; const val = Field.Copy(this.allMetadata.get(key)); - target[DocData][key] = val; + target[key] = val; return { type: 'dashField', attrs: { fieldKey: key, docId: '', hideKey: false, hideValue: false, editable: true }, @@ -98,7 +98,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr }; }); - if (!anchor.text) anchor[DocData].text = '-selection-'; + if (!anchor.text) anchor.$text = '-selection-'; const textLines: { type: string; attrs: object; content?: unknown[] }[] = [ { type: 'paragraph', @@ -133,7 +133,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr }; if (taggedContent.length) textLines.push(metadatatext); if (textLines.length) { - target[DocData].text = new RichTextField( + target.$text = new RichTextField( JSON.stringify({ doc: { type: 'doc', @@ -149,16 +149,34 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr return target; }; makeDocUnfiltered = (doc: Doc) => { - if (DocListCast(this._props.Document[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { - if (this.childFilters()) { + if (DocListCast(this._props.Doc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) { + if (this.childFilters().length) { // if any child filters exist, get rid of them this._props.layoutDoc._childFilters = new List<string>(); + return true; } - return true; } return false; }; + public static getView(sidebar: SidebarAnnos | null, sidebarShown: boolean, toggleSidebar: () => void, doc: Doc, options: FocusViewOptions) { + if (!sidebarShown) { + options.didMove = true; + toggleSidebar(); + } + options.didMove = sidebar?.makeDocUnfiltered(doc) || options.didMove; + + if (!doc.hidden) { + if (!options.didMove && options.toggleTarget) { + options.toggleTarget = false; + options.didMove = doc.hidden = true; + } + } else { + options.didMove = !(doc.hidden = false); + } + return new Promise<Opt<DocumentView>>(res => DocumentView.addViewRenderedCb(doc, res)); + } + get sidebarKey() { return this._props.fieldKey + '_sidebar'; } @@ -182,15 +200,15 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr layout_showTitle = () => 'title'; setHeightCallback = (height: number) => this._props.setHeight?.(height + this.filtersHeight()); sortByLinkAnchorY = (a: Doc, b: Doc) => { - const ay = Doc.Links(a).length && DocCast(Doc.Links(a)[0].link_anchor_1).y; - const by = Doc.Links(b).length && DocCast(Doc.Links(b)[0].link_anchor_1).y; + const ay = Doc.Links(a).length && DocCast(Doc.Links(a)[0].link_anchor_1)?.y; + const by = Doc.Links(b).length && DocCast(Doc.Links(b)[0].link_anchor_1)?.y; return NumCast(ay) - NumCast(by); }; render() { const renderTag = (tag: string) => { const active = this.childFilters().includes(`tags${Doc.FilterSep}${tag}${Doc.FilterSep}check`); return ( - <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, 'tags', tag, 'check', true, undefined, e.shiftKey)}> + <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Doc, 'tags', tag, 'check', true, undefined, e.shiftKey)}> {tag} </div> ); @@ -198,7 +216,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr const renderMeta = (tag: string) => { const active = this.childFilters().includes(`${tag}${Doc.FilterSep}${Doc.FilterAny}${Doc.FilterSep}exists`); return ( - <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, tag, Doc.FilterAny, 'exists', true, undefined, e.shiftKey)}> + <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Doc, tag, Doc.FilterAny, 'exists', true, undefined, e.shiftKey)}> {tag} </div> ); @@ -206,7 +224,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr const renderUsers = (user: string) => { const active = this.childFilters().includes(`author:${user}:check`); return ( - <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Document, 'author', user, 'check', true, undefined, e.shiftKey)}> + <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this._props.Doc, 'author', user, 'check', true, undefined, e.shiftKey)}> {user} </div> ); @@ -214,14 +232,11 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr // TODO: Calculation of the topbar is hardcoded and different for text nodes - it should all be the same and all be part of SidebarAnnos return !this._props.showSidebar ? null : ( <div + className="sidebarAnnos-container" style={{ - position: 'absolute', pointerEvents: this._props.isContentActive() ? 'all' : undefined, - top: this._props.Document.type !== DocumentType.RTF && StrCast(this._props.Document._layout_showTitle) === 'title' ? 15 : 0, - right: 0, - background: this._props.styleProvider?.(this._props.Document, this._props, StyleProp.WidgetColor) as string, - width: `100%`, - height: '100%', + top: this._props.Doc.type !== DocumentType.RTF && StrCast(this._props.Doc._layout_showTitle) === 'title' ? 15 : 0, + background: this._props.styleProvider?.(this._props.Doc, this._props, StyleProp.WidgetColor) as string, }}> <div className="sidebarAnnos-tagList" style={{ height: this.filtersHeight() }} onWheel={e => e.stopPropagation()}> {this.allUsers.length > 1 ? this.allUsers.map(renderUsers) : null} @@ -229,7 +244,7 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr {Array.from(this.allMetadata.keys()).sort().map(renderMeta)} </div> - <div style={{ width: '100%', height: `calc(100% - 38px)`, position: 'relative' }}> + <div className="sidebarAnnos-stacking" style={{ height: `calc(100% - ${this.filtersHeight()}px)` }}> <CollectionStackingView {...this._props} setContentViewBox={emptyFunction} @@ -257,7 +272,6 @@ export class SidebarAnnos extends ObservableReactComponent<FieldViewProps & Extr renderDepth={this._props.renderDepth + 1} type_collection={CollectionViewType.Stacking} fieldKey={this.sidebarKey} - pointerEvents={returnAll} /> </div> </div> |