From 05bcab12516e48ef08f9c7243a5e0acd3c650f20 Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 18 Mar 2021 16:27:17 -0400 Subject: broke sidebarAnnos into its own component --- src/client/views/nodes/PDFBox.scss | 21 +------- src/client/views/nodes/PDFBox.tsx | 101 ++++++++----------------------------- src/client/views/nodes/WebBox.scss | 20 -------- src/client/views/nodes/WebBox.tsx | 80 ++++++----------------------- 4 files changed, 39 insertions(+), 183 deletions(-) (limited to 'src/client/views/nodes') diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 564873cf5..d1dca5c68 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -189,26 +189,7 @@ } } - .pdfBox-tagList { - display: flex; - flex-direction: row; - overflow: auto; - flex-flow: row; - flex-wrap: wrap; - .pdfBox-filterTag, .pdfBox-filterTag-active { - font-weight: bold; - padding-left: 6; - padding-right: 6; - box-shadow: black 1px 1px 4px; - border-radius: 5; - margin: 2; - height: 20; - background-color: lightgrey; - } - .pdfBox-filterTag-active { - background-color: white; - } - } + .pdfBox-title-outer { width: 100%; height: 100%; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 37341253d..81ef2472a 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -6,30 +6,27 @@ import "pdfjs-dist/web/pdf_viewer.css"; import { Doc, DocListCast, Opt, StrListCast, WidthSym } from "../../../fields/Doc"; import { documentSchema } from '../../../fields/documentSchemas'; import { Id } from '../../../fields/FieldSymbols'; +import { List } from '../../../fields/List'; import { makeInterface } from "../../../fields/Schema"; import { Cast, NumCast, StrCast } from '../../../fields/Types'; import { PdfField } from "../../../fields/URLField"; import { TraceMobx } from '../../../fields/util'; -import { emptyFunction, OmitKeys, returnOne, returnTrue, returnZero, Utils } from '../../../Utils'; +import { Utils } from '../../../Utils'; import { Docs, DocUtils } from '../../documents/Documents'; import { KeyCodes } from '../../util/KeyCodes'; import { undoBatch } from '../../util/UndoManager'; import { panZoomSchema } from '../collections/collectionFreeForm/CollectionFreeFormView'; -import { CollectionStackingView } from '../collections/CollectionStackingView'; import { CollectionViewType } from '../collections/CollectionView'; import { ContextMenu } from '../ContextMenu'; import { ContextMenuProps } from '../ContextMenuItem'; import { ViewBoxAnnotatableComponent } from "../DocComponent"; import { PDFViewer } from "../pdf/PDFViewer"; -import { SearchBox } from '../search/SearchBox'; -import { StyleProp } from '../StyleProvider'; +import { SidebarAnnos } from '../SidebarAnnos'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; import { pageSchema } from "./ImageBox"; import "./PDFBox.scss"; import React = require("react"); -import { DocFocusOptions } from './DocumentView'; -import { List } from '../../../fields/List'; type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>; const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema); @@ -43,6 +40,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent(); private _selectReactionDisposer: IReactionDisposer | undefined; + private _sidebarRef = React.createRef(); @observable private _searching: boolean = false; @observable private _pdf: Opt; @@ -97,12 +95,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { - if (DocListCast(this.rootDoc[this.sidebarKey()]).includes(doc)) { - if (this.layoutDoc["_" + this.sidebarKey() + "-docFilters"]) { - this.layoutDoc["_" + this.sidebarKey() + "-docFilters"] = new List(); - return 1; - } - } + if (this._sidebarRef?.current?.makeDocUnfiltered(doc)) return 1; this._initialScrollTarget = doc; return this._pdfViewer?.scrollFocus(doc, smooth); } @@ -125,69 +118,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent this.fieldKey + "-sidebar"; - sidebarFiltersHeight = () => 50; - sidebarTransform = () => this.props.ScreenToLocalTransform().translate(Doc.NativeWidth(this.dataDoc), 0).scale(this.props.scaling?.() || 1); - sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth); - sidebarHeight = () => this.props.PanelHeight() - this.sidebarFiltersHeight() - 20; - sidebarAddDocument = (doc: Doc | Doc[]) => this.addDocument(doc, this.sidebarKey()); - sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.sidebarKey()); - sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.sidebarKey()); - sidebarDocFilters = () => [...StrListCast(this.layoutDoc._docFilters), ...StrListCast(this.layoutDoc[this.sidebarKey() + "-docFilters"])]; - @computed get sidebarAllTags() { - const keys = new Set(); - DocListCast(this.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key))); - return Array.from(keys.keys()).filter(key => key[0]).filter(key => !key.startsWith("_") && (key[0] === "#" || key[0] === key[0].toUpperCase())).sort(); - } - @computed get sidebarOverlay() { - const renderTag = (tag: string) => { - const active = StrListCast(this.rootDoc[this.sidebarKey() + "-docFilters"]).includes(`${tag}:${tag}:check`); - return
Doc.setDocFilter(this.rootDoc, tag, tag, "check", true, this.sidebarKey(), e.shiftKey)}> - {tag} -
; - } - return !this.layoutDoc._showSidebar ? (null) : -
-
- -
-
- {this.sidebarAllTags.map(renderTag)} -
-
; - } - public search = (string: string, fwd: boolean) => { this._pdfViewer?.search(string, fwd); }; public prevAnnotation = () => { this._pdfViewer?.prevAnnotation(); }; public nextAnnotation = () => { this._pdfViewer?.nextAnnotation(); }; @@ -281,6 +211,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent ); } + sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth); + specificContextMenu = (e: React.MouseEvent): void => { const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); @@ -294,7 +226,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { - this.Document._showSidebar = true; + this.props.Document._showSidebar = true; const startup = StrListCast(this.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" "); const target = Docs.Create.TextDocument(startup, { title: "anno", @@ -303,9 +235,9 @@ export class PDFBox extends ViewBoxAnnotatableComponent target[tag] = tag); + //this.sidebarAllTags.map(tag => target[tag] = tag); DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); - this.sidebarAddDocument(target); + this._sidebarRef.current?.addDocument(target); } @computed get renderTitleBox() { @@ -316,6 +248,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent ; } + @computed get renderPdfView() { TraceMobx(); const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); @@ -335,7 +268,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent - {this.sidebarOverlay} + {this.settingsPanel()} ; } diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index cdff4aa74..ca82c049c 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -18,26 +18,6 @@ border-radius: 3px; pointer-events: all; } - .webBox-tagList { - display: flex; - flex-direction: row; - overflow: auto; - flex-flow: row; - flex-wrap: wrap; - .webBox-filterTag, .webBox-filterTag-active { - font-weight: bold; - padding-left: 6; - padding-right: 6; - box-shadow: black 1px 1px 4px; - border-radius: 5; - margin: 2; - height: 20; - background-color: lightgrey; - } - .webBox-filterTag-active { - background-color: white; - } - } .pdfViewerDash-dragAnnotationBox { position: absolute; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index df50f7b90..2a0fc47b4 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -36,6 +36,7 @@ import { FormattedTextBox } from "./formattedText/FormattedTextBox"; import { LinkDocPreview } from "./LinkDocPreview"; import "./WebBox.scss"; import React = require("react"); +import { SidebarAnnos } from "../SidebarAnnos"; const htmlToText = require("html-to-text"); type WebDocument = makeInterface<[typeof documentSchema]>; @@ -51,6 +52,7 @@ export class WebBox extends ViewBoxAnnotatableComponent = React.createRef(); private _keyInput = React.createRef(); private _initialScroll: Opt; + private _sidebarRef = React.createRef(); @observable private _scrollTimer: any; @observable private _overlayAnnoInfo: Opt; @observable private _marqueeing: number[] | undefined; @@ -159,6 +161,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.urlEditor; // controls to be added to the top bar when a document of this type is selected scrollFocus = (doc: Doc, smooth: boolean) => { + if (this._sidebarRef?.current?.makeDocUnfiltered(doc)) return 1; if (doc !== this.rootDoc && this._outerRef.current) { const scrollTo = doc.type === DocumentType.TEXTANCHOR ? NumCast(doc.y) : Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1)); if (scrollTo !== undefined) { @@ -431,9 +434,9 @@ export class WebBox extends ViewBoxAnnotatableComponent target[tag] = tag); + //this.sidebarAllTags.map(tag => target[tag] = tag); DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); - this.sidebarAddDocument(target); + this._sidebarRef.current?.addDocument(target); } toggleSidebar = () => { if (this.layoutDoc.nativeWidth === this.layoutDoc[this.fieldKey + "-nativeWidth"]) { @@ -443,68 +446,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.fieldKey + "-sidebar"; - sidebarFiltersHeight = () => 50; - sidebarTransform = () => this.props.ScreenToLocalTransform().translate(Doc.NativeWidth(this.dataDoc), 0).scale(this.props.scaling?.() || 1); sidebarWidth = () => !this.layoutDoc._showSidebar ? 0 : (NumCast(this.layoutDoc.nativeWidth) - Doc.NativeWidth(this.dataDoc)) * this.props.PanelWidth() / NumCast(this.layoutDoc.nativeWidth); - sidebarHeight = () => this.props.PanelHeight() - this.sidebarFiltersHeight() - 20; - sidebarAddDocument = (doc: Doc | Doc[]) => this.addDocument(doc, this.sidebarKey()); - sidebarMoveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.moveDocument(doc, targetCollection, addDocument, this.sidebarKey()); - sidebarRemDocument = (doc: Doc | Doc[]) => this.removeDocument(doc, this.sidebarKey()); - sidebarDocFilters = () => [...StrListCast(this.layoutDoc._docFilters), ...StrListCast(this.layoutDoc[this.sidebarKey() + "-docFilters"])]; - @computed get sidebarAllTags() { - const keys = new Set(); - DocListCast(this.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key))); - return Array.from(keys.keys()).filter(key => key[0]).filter(key => !key.startsWith("_") && (key[0] === "#" || key[0] === key[0].toUpperCase())).sort(); - } - @computed get sidebarOverlay() { - const renderTag = (tag: string) => { - const active = StrListCast(this.rootDoc[this.sidebarKey() + "-docFilters"]).includes(`${tag}:${tag}:check`); - return
Doc.setDocFilter(this.rootDoc, tag, tag, "check", true, this.sidebarKey(), e.shiftKey)}> - {tag} -
; - } - return !this.layoutDoc._showSidebar ? (null) : -
-
- -
-
- {this.sidebarAllTags.map(renderTag)} -
-
; - } @computed get content() { return
e.stopPropagation()} onClick={e => this.toggleSidebar()} > - {this.sidebarOverlay} +
); } } \ No newline at end of file -- cgit v1.2.3-70-g09d2