From 95048247c59ae04b7c35db70e9888f7bc851a3dc Mon Sep 17 00:00:00 2001 From: bobzel Date: Thu, 18 Mar 2021 23:12:42 -0400 Subject: more cleanup of webbox/pdfbox/sidebarAnnos --- src/client/views/SidebarAnnos.tsx | 23 +++++- src/client/views/nodes/PDFBox.scss | 11 ++- src/client/views/nodes/PDFBox.tsx | 153 +++++++++++++++---------------------- src/client/views/nodes/WebBox.tsx | 67 +++++----------- src/client/views/pdf/PDFViewer.tsx | 2 +- 5 files changed, 111 insertions(+), 145 deletions(-) (limited to 'src') diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx index 026942999..bbe874eac 100644 --- a/src/client/views/SidebarAnnos.tsx +++ b/src/client/views/SidebarAnnos.tsx @@ -1,13 +1,16 @@ import { computed } from 'mobx'; import { observer } from "mobx-react"; import { Doc, DocListCast, StrListCast } from "../../fields/Doc"; +import { Id } from '../../fields/FieldSymbols'; import { List } from '../../fields/List'; -import { NumCast } from '../../fields/Types'; +import { NumCast, StrCast } from '../../fields/Types'; import { emptyFunction, OmitKeys, returnOne, returnTrue, returnZero } from '../../Utils'; +import { Docs, DocUtils } from '../documents/Documents'; import { Transform } from '../util/Transform'; import { CollectionStackingView } from './collections/CollectionStackingView'; import { CollectionViewType } from './collections/CollectionView'; import { FieldViewProps } from './nodes/FieldView'; +import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox'; import { SearchBox } from './search/SearchBox'; import "./SidebarAnnos.scss"; import { StyleProp } from './StyleProvider'; @@ -27,6 +30,7 @@ interface extraProps { } @observer export class SidebarAnnos extends React.Component { + _stackRef = React.createRef(); @computed get allHashtags() { const keys = new Set(); DocListCast(this.props.rootDoc[this.sidebarKey()]).forEach(doc => SearchBox.documentKeys(doc).forEach(key => keys.add(key))); @@ -34,6 +38,21 @@ export class SidebarAnnos extends React.Component { } get filtersKey() { return "_" + this.sidebarKey() + "-docFilters"; } + anchorMenuClick = (anchor: Doc) => { + this.props.layoutDoc._showSidebar = true; + const startup = StrListCast(this.props.rootDoc.docFilters).map(filter => filter.split(":")[0]).join(" "); + const target = Docs.Create.TextDocument(startup, { + title: "anno", + annotationOn: this.props.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize), + _fontFamily: StrCast(Doc.UserDoc().fontFamily) + }); + FormattedTextBox.SelectOnLoad = target[Id]; + FormattedTextBox.DontSelectInitialText = true; + this.allHashtags.map(tag => target[tag] = tag); + DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); + this.addDocument(target); + this._stackRef.current?.focusDocument(target); + } makeDocUnfiltered = (doc: Doc) => { if (DocListCast(this.props.rootDoc[this.sidebarKey()]).includes(doc)) { if (this.props.layoutDoc[this.filtersKey]) { @@ -69,7 +88,7 @@ export class SidebarAnnos extends React.Component { height: "100%" }}>
- ; - private _displayPdfLive = false; // has this box ever had its contents activated -- if so, stop drawing the overlay title private _pdfViewer: PDFViewer | undefined; private _searchRef = React.createRef(); private _selectReactionDisposer: IReactionDisposer | undefined; @@ -46,21 +41,20 @@ export class PDFBox extends ViewBoxAnnotatableComponent; @observable private _pageControls = false; + @computed get pdfUrl() { return Cast(this.dataDoc[this.props.fieldKey], PdfField); } + constructor(props: any) { super(props); const nw = Doc.NativeWidth(this.Document, this.dataDoc) || 927; const nh = Doc.NativeHeight(this.Document, this.dataDoc) || 1200; !this.Document._fitWidth && (this.Document._height = this.Document[WidthSym]() * (nh / nw)); - const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); - if (pdfUrl) { - if (PDFBox.pdfcache.get(pdfUrl.url.href)) runInAction(() => this._pdf = PDFBox.pdfcache.get(pdfUrl.url.href)); - else if (PDFBox.pdfpromise.get(pdfUrl.url.href)) PDFBox.pdfpromise.get(pdfUrl.url.href)?.then(action(pdf => this._pdf = pdf)); + if (this.pdfUrl) { + if (PDFBox.pdfcache.get(this.pdfUrl.url.href)) runInAction(() => this._pdf = PDFBox.pdfcache.get(this.pdfUrl!.url.href)); + else if (PDFBox.pdfpromise.get(this.pdfUrl.url.href)) PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(action(pdf => this._pdf = pdf)); } const backup = "oldPath"; - const { Document } = this.props; - const pdf = Cast(this.dataDoc[this.props.fieldKey], PdfField); - const href = pdf?.url?.href; + const href = this.pdfUrl?.url.href; if (href) { const pathCorrectionTest = /upload\_[a-z0-9]{32}.(.*)/g; const matches = pathCorrectionTest.exec(href); @@ -72,7 +66,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { this._pdfViewer?.search(string, fwd); }; - public prevAnnotation = () => { this._pdfViewer?.prevAnnotation(); }; - public nextAnnotation = () => { this._pdfViewer?.nextAnnotation(); }; + public search = (string: string, fwd: boolean) => this._pdfViewer?.search(string, fwd); + public prevAnnotation = () => this._pdfViewer?.prevAnnotation(); + public nextAnnotation = () => this._pdfViewer?.nextAnnotation(); public backPage = () => { this.Document._curPage = (this.Document._curPage || 1) - 1; return true; }; public forwardPage = () => { this.Document._curPage = (this.Document._curPage || 1) + 1; return true; }; - public gotoPage = (p: number) => { this.Document._curPage = p; }; + public gotoPage = (p: number) => this.Document._curPage = p; @undoBatch onKeyDown = action((e: KeyboardEvent) => { let processed = false; - if (e.key === "f" && e.ctrlKey) { - this._searching = true; - setTimeout(() => this._searchRef.current && this._searchRef.current.focus(), 100); - processed = true; - } - if (e.key === "PageDown") processed = this.forwardPage(); - if (e.key === "PageUp") processed = this.backPage(); - if (e.target instanceof HTMLInputElement || this.props.ContainingCollectionDoc?._viewType !== CollectionViewType.Freeform) { - if (e.key === "ArrowDown" || e.key === "ArrowRight") processed = this.forwardPage(); - if (e.key === "ArrowUp" || e.key === "ArrowLeft") processed = this.backPage(); + switch (e.key) { + case "f": if (e.ctrlKey) { + setTimeout(() => this._searchRef.current?.focus(), 100); + this._searching = processed = true; + } + break; + case "PageDown": processed = this.forwardPage(); break; + case "PageUp": processed = this.backPage(); break; } if (processed) { e.stopImmediatePropagation(); @@ -154,92 +146,72 @@ export class PDFBox extends ViewBoxAnnotatableComponent) => this._searchString = e.currentTarget.value; toggleSidebar = () => { - if (this.layoutDoc.nativeWidth === this.layoutDoc[this.fieldKey + "-nativeWidth"]) { - this.layoutDoc.nativeWidth = 250 + NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); - } else { - this.layoutDoc.nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); - } - this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]) / NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"])); + const nativeWidth = NumCast(this.layoutDoc[this.fieldKey + "-nativeWidth"]); + const nativeHeight = NumCast(this.layoutDoc[this.fieldKey + "-nativeHeight"]); + this.layoutDoc.nativeWidth = nativeWidth + (this.layoutDoc.nativeWidth === nativeWidth ? 250 : 0); + this.layoutDoc._width = NumCast(this.layoutDoc._nativeWidth) * (nativeWidth / nativeHeight); } settingsPanel() { const pageBtns = <> - - ; const searchTitle = `${!this._searching ? "Open" : "Close"} Search Bar`; const curPage = this.Document._curPage || 1; return !this.active() ? (null) : - (
e.keyCode === KeyCodes.BACKSPACE || e.keyCode === KeyCodes.DELETE ? e.stopPropagation() : true} +
[KeyCodes.BACKSPACE, KeyCodes.DELETE].includes(e.keyCode) ? e.stopPropagation() : true} onPointerDown={e => e.stopPropagation()} style={{ display: this.active() ? "flex" : "none" }}> -
e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}> +
e.stopPropagation()} style={{ left: `${this._searching ? 0 : 100}%` }}> - +
-
- 99 ? 4 : 3}ch`, pointerEvents: "all" }} onChange={e => this.Document._curPage = Number(e.currentTarget.value)} - style={{ width: `${curPage > 99 ? 4 : 3}ch`, pointerEvents: "all" }} onClick={action(() => this._pageControls = !this._pageControls)} /> {this._pageControls ? pageBtns : (null)}
- -
); +
; } 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); const funcs: ContextMenuProps[] = []; - pdfUrl && funcs.push({ description: "Copy path", event: () => Utils.CopyText(pdfUrl.url.pathname), icon: "expand-arrows-alt" }); + funcs.push({ description: "Copy path", event: () => this.pdfUrl && Utils.CopyText(this.pdfUrl.url.pathname), icon: "expand-arrows-alt" }); funcs.push({ description: "Toggle Fit Width " + (this.Document._fitWidth ? "Off" : "On"), event: () => this.Document._fitWidth = !this.Document._fitWidth, icon: "expand-arrows-alt" }); funcs.push({ description: "Toggle Annotation View ", event: () => this.Document._showSidebar = !this.Document._showSidebar, icon: "expand-arrows-alt" }); funcs.push({ description: "Toggle Sidebar ", event: () => this.toggleSidebar(), icon: "expand-arrows-alt" }); - ContextMenu.Instance.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } - anchorMenuClick = (anchor: Doc) => { - 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", - annotationOn: this.rootDoc, _width: 200, _height: 50, _fitWidth: true, _autoHeight: true, _fontSize: StrCast(Doc.UserDoc().fontSize), - _fontFamily: StrCast(Doc.UserDoc().fontFamily) - }); - FormattedTextBox.SelectOnLoad = target[Id]; - FormattedTextBox.DontSelectInitialText = true; - //this.sidebarAllTags.map(tag => target[tag] = tag); - DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); - this._sidebarRef.current?.addDocument(target); - } - @computed get renderTitleBox() { const classname = "pdfBox" + (this.active() ? "-interactive" : ""); return
@@ -251,15 +223,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> + style={{ + height: this.props.Document._scrollTop && !this.Document._fitWidth && (window.screen.width > 600) ? + NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined + }}>
>(); render() { TraceMobx(); - if (true) {//this.props.isSelected() || (this.props.active() && this.props.renderDepth === 0)) { - this._displayPdfLive = true; - } - if (this._displayPdfLive) { - if (this._pdf) return this.renderPdfView; + if (this._pdf) return this.renderPdfView; - const href = Cast(this.dataDoc[this.props.fieldKey], PdfField, null)?.url.href; - if (href) { - if (PDFBox.pdfcache.get(href)) setTimeout(action(() => this._pdf = PDFBox.pdfcache.get(href))); - else { - if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise); - PDFBox.pdfpromise.get(href)?.then(action(pdf => PDFBox.pdfcache.set(href, this._pdf = pdf))); - } + const href = this.pdfUrl?.url.href; + if (href) { + if (PDFBox.pdfcache.get(href)) setTimeout(action(() => this._pdf = PDFBox.pdfcache.get(href))); + else { + if (!PDFBox.pdfpromise.get(href)) PDFBox.pdfpromise.set(href, Pdfjs.getDocument(href).promise); + PDFBox.pdfpromise.get(href)?.then(action(pdf => PDFBox.pdfcache.set(href, this._pdf = pdf))); } } return this.renderTitleBox; diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx index 2a0fc47b4..adfe5d694 100644 --- a/src/client/views/nodes/WebBox.tsx +++ b/src/client/views/nodes/WebBox.tsx @@ -8,19 +8,17 @@ import { Id } from "../../../fields/FieldSymbols"; import { HtmlField } from "../../../fields/HtmlField"; import { InkTool } from "../../../fields/InkField"; import { List } from "../../../fields/List"; -import { listSpec, makeInterface } from "../../../fields/Schema"; +import { makeInterface } from "../../../fields/Schema"; import { Cast, NumCast, StrCast } from "../../../fields/Types"; import { WebField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; -import { emptyFunction, getWordAtPoint, OmitKeys, returnOne, returnTrue, returnZero, smoothScroll, Utils } from "../../../Utils"; -import { Docs, DocUtils } from "../../documents/Documents"; +import { emptyFunction, getWordAtPoint, OmitKeys, returnOne, smoothScroll, Utils } from "../../../Utils"; +import { Docs } from "../../documents/Documents"; import { DocumentType } from '../../documents/DocumentTypes'; import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { SnappingManager } from "../../util/SnappingManager"; import { undoBatch } from "../../util/UndoManager"; import { CollectionFreeFormView } 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"; @@ -29,14 +27,11 @@ import { LightboxView } from "../LightboxView"; import { MarqueeAnnotator } from "../MarqueeAnnotator"; import { AnchorMenu } from "../pdf/AnchorMenu"; import { Annotation } from "../pdf/Annotation"; -import { SearchBox } from "../search/SearchBox"; -import { StyleProp } from "../StyleProvider"; +import { SidebarAnnos } from "../SidebarAnnos"; import { FieldView, FieldViewProps } from './FieldView'; -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]>; @@ -110,9 +105,7 @@ export class WebBox extends ViewBoxAnnotatableComponent NumCast(this.layoutDoc._scrollTop), (scrollTop) => { - if (quickScroll) { - this._initialScroll = scrollTop; - } + if (quickScroll) this._initialScroll = scrollTop; else { const viewTrans = StrCast(this.Document._viewTransition); const durationMiliStr = viewTrans.match(/([0-9]*)ms/); @@ -151,11 +144,8 @@ export class WebBox extends ViewBoxAnnotatableComponent this.urlEditor; // controls to be added to the top bar when a document of this type is selected @@ -283,8 +273,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null); - const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null); + const future = StrListCast(this.dataDoc[this.fieldKey + "-future"]); + const history = StrListCast(this.dataDoc[this.fieldKey + "-history"]); if (future.length) { history.push(this._url); this.dataDoc[this.fieldKey] = new WebField(new URL(this._url = future.pop()!)); @@ -296,8 +286,8 @@ export class WebBox extends ViewBoxAnnotatableComponent { - const future = Cast(this.dataDoc[this.fieldKey + "-future"], listSpec("string"), null); - const history = Cast(this.dataDoc[this.fieldKey + "-history"], listSpec("string"), null); + const future = StrListCast(this.dataDoc[this.fieldKey + "-future"]); + const history = StrListCast(this.dataDoc[this.fieldKey + "-history"]); if (history.length) { if (future === undefined) this.dataDoc[this.fieldKey + "-future"] = new List([this._url]); else future.push(this._url); @@ -317,8 +307,8 @@ export class WebBox extends ViewBoxAnnotatableComponent; } else if (field instanceof WebField) { const url = this.layoutDoc.useCors ? Utils.CorsProxy(field.url.href) : field.url.href; - // view =