From 7a25dcc004de773fbdee229f79338b81001d3077 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sat, 13 Mar 2021 21:26:01 -0500 Subject: cleaned up dropping link button on collections / alternate annotation views (eg pdf sidebar) - new docs are created only for internal drops within, say, a PDF. Otherwise links are made. --- src/client/util/DragManager.ts | 12 +++++++----- .../views/collections/CollectionStackingView.tsx | 10 ++++++++-- .../collectionFreeForm/CollectionFreeFormView.tsx | 21 +++++++++------------ src/client/views/nodes/DocumentLinksButton.tsx | 2 +- 4 files changed, 25 insertions(+), 20 deletions(-) (limited to 'src') diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts index 437fea0ea..0d154bc3a 100644 --- a/src/client/util/DragManager.ts +++ b/src/client/util/DragManager.ts @@ -12,6 +12,7 @@ import { Docs, DocUtils } from "../documents/Documents"; import * as globalCssVariables from "../views/globalCssVariables.scss"; import { UndoManager } from "./UndoManager"; import { SnappingManager } from "./SnappingManager"; +import { DocumentView } from "../views/nodes/DocumentView"; export type dropActionType = "alias" | "copy" | "move" | "same" | "proto" | "none" | undefined; // undefined = move, "same" = move but don't call removeDropProperties export function SetupDrag( @@ -138,13 +139,14 @@ export namespace DragManager { isSelectionMove?: boolean; // indicates that an explicitly selected Document is being dragged. this will suppress onDragStart scripts } export class LinkDragData { - constructor(dragDoc: Doc, linkSourceGetAnchor: () => Doc) { - this.dragDocument = dragDoc; + constructor(dragView: DocumentView, linkSourceGetAnchor: () => Doc,) { + this.linkDragView = dragView; this.linkSourceGetAnchor = linkSourceGetAnchor; } - dragDocument: Doc; + get dragDocument() { return this.linkDragView.props.Document; } linkSourceGetAnchor: () => Doc; linkSourceDoc?: Doc; + linkDragView: DocumentView; } export class ColumnDragData { constructor(colKey: SchemaHeaderField) { @@ -253,8 +255,8 @@ export namespace DragManager { } // drags a linker button and creates a link on drop - export function StartLinkDrag(ele: HTMLElement, sourceDoc: Doc, sourceDocGetAnchor: undefined | (() => Doc), downX: number, downY: number, options?: DragOptions) { - StartDrag([ele], new DragManager.LinkDragData(sourceDoc, () => sourceDocGetAnchor?.() ?? sourceDoc), downX, downY, options); + export function StartLinkDrag(ele: HTMLElement, sourceView: DocumentView, sourceDocGetAnchor: undefined | (() => Doc), downX: number, downY: number, options?: DragOptions) { + StartDrag([ele], new DragManager.LinkDragData(sourceView, () => sourceDocGetAnchor?.() ?? sourceView.rootDoc), downX, downY, options); } // drags a column from a schema view diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index df39ed3e1..e69dbf3ac 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -12,7 +12,7 @@ import { SchemaHeaderField } from "../../../fields/SchemaHeaderField"; import { BoolCast, Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { TraceMobx } from "../../../fields/util"; import { emptyFunction, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, Utils } from "../../../Utils"; -import { DocUtils } from "../../documents/Documents"; +import { DocUtils, Docs } from "../../documents/Documents"; import { DragManager, dropActionType } from "../../util/DragManager"; import { SnappingManager } from "../../util/SnappingManager"; import { Transform } from "../../util/Transform"; @@ -334,7 +334,13 @@ export class CollectionStackingView extends CollectionSubView { const [xp, yp] = this.getTransform().transformPoint(de.x, de.y); if (de.complete.annoDragData?.dragDocument && super.onInternalDrop(e, de)) return this.internalAnchorAnnoDrop(e, de.complete.annoDragData, xp, yp); - else if (this.isAnnotationOverlay !== true && de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); + else if (de.complete.linkDragData) return this.internalLinkDrop(e, de, de.complete.linkDragData, xp, yp); else if (de.complete.docDragData?.droppedDocuments.length) return this.internalDocDrop(e, de, de.complete.docDragData, xp, yp); return false; } diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx index 3622be5fc..57d1a41b6 100644 --- a/src/client/views/nodes/DocumentLinksButton.tsx +++ b/src/client/views/nodes/DocumentLinksButton.tsx @@ -51,7 +51,7 @@ export class DocumentLinksButton extends React.Component { if (this.props.View && dropEv.linkDocument) {// dropEv.linkDocument equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop !dropEv.linkDocument.linkRelationship && (Doc.GetProto(dropEv.linkDocument).linkRelationship = "hyperlink"); -- cgit v1.2.3-70-g09d2 From c5ea9a228d97974250194cbe41e0f356c3c3906f Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Mar 2021 00:09:37 -0500 Subject: added sidebar annotations to webBox. Fixed PdfBox to allow marqueeing when sidebar annotation is selected. --- src/client/documents/Documents.ts | 2 +- src/client/views/DocComponent.tsx | 2 +- .../views/collections/CollectionStackingView.tsx | 5 +- src/client/views/nodes/PDFBox.tsx | 5 +- src/client/views/nodes/WebBox.scss | 23 +++ src/client/views/nodes/WebBox.tsx | 195 +++++++++++++++------ src/client/views/pdf/AnchorMenu.tsx | 6 +- src/client/views/pdf/PDFViewer.tsx | 16 +- 8 files changed, 185 insertions(+), 69 deletions(-) (limited to 'src') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index e8ecd8362..2ed69a993 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -816,7 +816,7 @@ export namespace Docs { export function PdfDocument(url: string, options: DocumentOptions = {}) { const pdfProto = Prototypes.get(DocumentType.PDF); pdfProto._fitWidth = true; // backward compatibility -- can be removed after db is reset - return InstanceFromProto(pdfProto, new PdfField(new URL(url)), { _viewType: "stacking", ...options }); + return InstanceFromProto(pdfProto, new PdfField(new URL(url)), { ...options }); } export function WebDocument(url: string, options: DocumentOptions = {}) { diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx index 589cfafc5..f8aede717 100644 --- a/src/client/views/DocComponent.tsx +++ b/src/client/views/DocComponent.tsx @@ -201,7 +201,7 @@ export function ViewBoxAnnotatableComponent

this.props.whenActiveChanged(this._isChildActive = isActive)); - active = (outsideReaction?: boolean) => ((CurrentUserUtils.SelectedTool === InkTool.None && !this.props.Document._) && + active = (outsideReaction?: boolean) => (CurrentUserUtils.SelectedTool === InkTool.None && (this.props.rootSelected(outsideReaction) || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0 || BoolCast((this.layoutDoc as any).forceActive)) ? true : false) annotationsActive = (outsideReaction?: boolean) => (CurrentUserUtils.SelectedTool !== InkTool.None || (this.props.layerProvider?.(this.props.Document) === false && this.props.active()) || (this.props.Document.forceActive || this.props.isSelected(outsideReaction) || this._isChildActive || this.props.renderDepth === 0) ? true : false) diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index e69dbf3ac..f3c1c4464 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -37,6 +37,7 @@ const StackingDocument = makeInterface(collectionSchema, documentSchema); export type collectionStackingViewProps = { chromeStatus?: string; + viewType?: CollectionViewType; NativeWidth?: () => number; NativeHeight?: () => number; }; @@ -60,7 +61,7 @@ export class CollectionStackingView extends CollectionSubView pos[0] && where[0] < pos1[0] && where[1] > pos[1] && (i === this._docXfs.length - 1 || where[1] < pos1[1])) { dropInd = i; - const axis = this.Document._viewType === CollectionViewType.Masonry ? 0 : 1; + const axis = this.isStackingView ? 1 : 0; dropAfter = where[axis] > (pos[axis] + pos1[axis]) / 2 ? 1 : 0; } }); diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 4e4db323c..a474293e6 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -179,6 +179,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent @@ -216,7 +217,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent this.props.whenActiveChanged(this._isChildActive = isActive)); setPdfViewer = (pdfViewer: PDFViewer) => { this._pdfViewer = pdfViewer; if (this.initialScrollTarget) { @@ -306,7 +306,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent ; } - isChildActive = (outsideReaction?: boolean) => this._isChildActive; @computed get renderPdfView() { TraceMobx(); const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField); @@ -316,12 +315,12 @@ export class PDFBox extends ViewBoxAnnotatableComponent; @@ -461,6 +466,7 @@ export class WebBox extends ViewBoxAnnotatableComponent this.layoutDoc.useCors = !this.layoutDoc.useCors, icon: "snowflake" }); funcs.push({ description: (this.layoutDoc[this.fieldKey + "-contentWidth"] ? "Unfreeze" : "Freeze") + " Content Width", event: () => this.layoutDoc[this.fieldKey + "-contentWidth"] = this.layoutDoc[this.fieldKey + "-contentWidth"] ? undefined : Doc.NativeWidth(this.layoutDoc), icon: "snowflake" }); + funcs.push({ description: "Toggle Annotation View ", event: () => this.Document._showSidebar = !this.Document._showSidebar, icon: "expand-arrows-alt" }); cm.addItem({ description: "Options...", subitems: funcs, icon: "asterisk" }); } @@ -483,6 +489,83 @@ export class WebBox extends ViewBoxAnnotatableComponent { + this.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.allTags.map(tag => target[tag] = tag); + DocUtils.MakeLink({ doc: anchor }, { doc: target }, "inline markup", "annotation"); + this.sidebarAddDocument(target); + } + sidebarKey = () => 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 allTags() { + 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(); + } + 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())}> + {tag} +
; + } + @computed get sidebarOverlay() { + return !this.layoutDoc._showSidebar ? (null) : +
+
+ +
+
+ {this.allTags.map(tag => this.renderTag(tag))} +
+
; + } + @computed get content() { const frozen = !this.props.isSelected() || DocumentDecorations.Instance?.Interacting; @@ -521,63 +604,73 @@ export class WebBox extends ViewBoxAnnotatableComponent { - if (!e.altKey && e.button === 0 && this.active(true)) this._marqueeing = [e.clientX, e.clientY]; + if (!e.altKey && e.button === 0 && this.active(true)) { + this._marqueeing = [e.clientX, e.clientY]; + this.props.select(false); + } } @action - finishMarquee = () => { - this._marqueeing = undefined; - this.props.select(true); - } + finishMarquee = () => this._marqueeing = undefined; - panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); + panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1) - this.sidebarWidth(); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0); panelHeight = () => this.props.PanelHeight() / (this.props.scaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document); scrollXf = () => this.props.ScreenToLocalTransform().translate(0, NumCast(this.layoutDoc._scrollTop)); render() { const inactiveLayer = this.props.layerProvider?.(this.layoutDoc) === false; const scale = this.props.scaling?.() || 1; - return (
-
- - {this.content} -
-
- + return ( +
+
+ + {this.content} +
+
+ +
-
- {this.annotationLayer} - {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : - } -
- {this.props.isSelected() ? this.editToggleBtn() : null} -
); + {this.annotationLayer} + {!this._marqueeing || !this._mainCont.current || !this._annotationLayer.current ? (null) : + } +
+ {this.sidebarOverlay} + {this.props.isSelected() ? this.editToggleBtn() : null} +
); } } \ No newline at end of file diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx index 5a3c2103e..0a1e0ba8f 100644 --- a/src/client/views/pdf/AnchorMenu.tsx +++ b/src/client/views/pdf/AnchorMenu.tsx @@ -15,6 +15,7 @@ import { SelectionManager } from "../../util/SelectionManager"; export class AnchorMenu extends AntimodeMenu { static Instance: AnchorMenu; + private _disposer: IReactionDisposer | undefined; private _commentCont = React.createRef(); private _palette = [ "rgba(208, 2, 27, 0.8)", @@ -60,12 +61,9 @@ export class AnchorMenu extends AntimodeMenu { AnchorMenu.Instance._canFade = false; } - _disposer: IReactionDisposer | undefined; componentDidMount() { this._disposer = reaction(() => SelectionManager.Views(), - selected => { - AnchorMenu.Instance.fadeOut(true); - }); + selected => AnchorMenu.Instance.fadeOut(true)); } pointerDown = (e: React.PointerEvent) => { diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index c7359f74e..c9bee5101 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -8,14 +8,16 @@ import { documentSchema } from "../../../fields/documentSchemas"; import { Id } from "../../../fields/FieldSymbols"; import { InkTool } from "../../../fields/InkField"; import { createSchema, makeInterface } from "../../../fields/Schema"; -import { Cast, NumCast, StrCast, ScriptCast } from "../../../fields/Types"; +import { Cast, NumCast, ScriptCast, StrCast } from "../../../fields/Types"; import { PdfField } from "../../../fields/URLField"; import { TraceMobx } from "../../../fields/util"; import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, OmitKeys, smoothScroll, Utils } from "../../../Utils"; import { DocUtils } from "../../documents/Documents"; import { Networking } from "../../Network"; +import { CurrentUserUtils } from "../../util/CurrentUserUtils"; import { CompiledScript, CompileScript } from "../../util/Scripting"; import { SelectionManager } from "../../util/SelectionManager"; +import { SharingManager } from "../../util/SharingManager"; import { SnappingManager } from "../../util/SnappingManager"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { ViewBoxAnnotatableComponent } from "../DocComponent"; @@ -27,8 +29,6 @@ import { Annotation } from "./Annotation"; import "./PDFViewer.scss"; const pdfjs = require('pdfjs-dist/es5/build/pdf.js'); import React = require("react"); -import { SharingManager } from "../../util/SharingManager"; -import { CurrentUserUtils } from "../../util/CurrentUserUtils"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); const _global = (window /* browser */ || global /* node */) as any; @@ -52,7 +52,6 @@ interface IViewerProps extends FieldViewProps { url: string; startupLive: boolean; loaded?: (nw: number, nh: number, np: number) => void; - isChildActive: (outsideReaction?: boolean) => boolean; setPdfViewer: (view: PDFViewer) => void; ContentScaling?: () => number; sidebarWidth: () => number; @@ -69,6 +68,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent = new Dictionary(); @observable private _script: CompiledScript = CompileScript("return true") as CompiledScript; @observable private _marqueeing: number[] | undefined; + @observable private _textSelecting = true; @observable private _showWaiting = true; @observable private _showCover = false; @observable private _zoomed = 1; @@ -379,9 +379,11 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { this._marqueeing = undefined; + this._textSelecting = true; document.removeEventListener("pointermove", this.onSelectMove); - this.props.select(false); } onSelectMove = (e: PointerEvent) => e.stopPropagation(); @@ -541,7 +543,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } @computed get pdfViewerDiv() { - return
; + return
; } @computed get contentScaling() { return this.props.ContentScaling?.() || 1; } @computed get standinViews() { -- cgit v1.2.3-70-g09d2 From 5fe63360364cd85b33ca797c0152f831cbbb0104 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Mar 2021 12:41:17 -0400 Subject: fixed warnings from missing keys. change file orphans to Unfiled --- src/client/util/CurrentUserUtils.ts | 2 +- src/client/views/MainView.tsx | 14 +++++++------- src/client/views/nodes/PDFBox.tsx | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'src') diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts index 894f306c9..9dda90353 100644 --- a/src/client/util/CurrentUserUtils.ts +++ b/src/client/util/CurrentUserUtils.ts @@ -772,7 +772,7 @@ export class CurrentUserUtils { static async setupFilesystem(doc: Doc) { await doc.myFilesystem; if (doc.myFilesystem === undefined) { - doc.myFileOrphans = Docs.Create.TreeDocument([], { title: "file orphans", _stayInCollection: true, system: true, isFolder: true }); + doc.myFileOrphans = Docs.Create.TreeDocument([], { title: "Unfiled", _stayInCollection: true, system: true, isFolder: true }); doc.myFileRoot = Docs.Create.TreeDocument([], { title: "file root", _stayInCollection: true, system: true, isFolder: true }); doc.myFilesystem = new PrefetchProxy(Docs.Create.TreeDocument([doc.myFileRoot as Doc, doc.myFileOrphans as Doc], { title: "My Documents", _height: 100, diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 1fbcd8fa4..585d68285 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -243,7 +243,7 @@ export class MainView extends React.Component { getContentsHeight = () => this._panelHeight; @computed get mainDocView() { - return { e.stopPropagation(); e.preventDefault(); }} + return
{ e.stopPropagation(); e.preventDefault(); }} style={{ minWidth: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)`, width: `calc(100% - ${this._flyoutWidth + this.menuPanelWidth() + this.propertiesWidth()}px)` }}> {!this.mainContainer ? (null) : this.mainDocView}
; @@ -329,10 +329,10 @@ export class MainView extends React.Component { @computed get flyout() { - return !this._flyoutWidth ?
+ return !this._flyoutWidth ?
{this.docButtons}
: -
+
+ return
{this.menuPanel} -
+
{this.flyout}
@@ -430,7 +430,7 @@ export class MainView extends React.Component { {this.dockingContent} -
+
{this.propertiesWidth() < 10 ? (null) : } diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index a474293e6..d4fc0c103 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -143,7 +143,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent { const active = StrListCast(this.rootDoc[this.sidebarKey() + "-docFilters"]).includes(`${tag}:${tag}:check`); - return
Doc.setDocFilter(this.rootDoc, tag, tag, "check", true, this.sidebarKey())}> {tag}
; -- cgit v1.2.3-70-g09d2 From 45c89c7b79a84fb918b656490f2bde9d1701d76a Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 14 Mar 2021 19:57:49 -0400 Subject: added a sidebar button for pdfs. fixed text editing to not be super slow when fitwidth && opened in lightbox. --- src/client/views/nodes/PDFBox.scss | 13 +++++++++++++ src/client/views/nodes/PDFBox.tsx | 14 +++++++++++++- .../views/nodes/formattedText/FormattedTextBox.tsx | 17 ++++++++++------- 3 files changed, 36 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 74b331ae1..564873cf5 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -18,6 +18,19 @@ top: 0; left: 0; + .pdfBox-overlayButton-sidebar { + background: #121721; + height: 25px; + width: 25px; + right: 0; + display: flex; + position: absolute; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + } + .pdfBox-pageNums { display: flex; flex-direction: row; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index d4fc0c103..e4aa639ff 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -225,7 +225,14 @@ 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"])) + } settingsPanel() { const pageBtns = <>
+
); } @@ -279,6 +290,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent Utils.CopyText(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" }); } diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx index 985c5d807..9259e6c25 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx @@ -1105,6 +1105,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } onPointerDown = (e: React.PointerEvent): void => { + this.tryUpdateScrollHeight(); // if a doc a fitwidth doc is being viewed in different context (eg freeform & lightbox), then it will have conflicting heights. so when the doc is clicked on, we want to make sure it has the appropriate height for the selected view. if ((e.target as any).tagName === "AUDIOTAG") { e.preventDefault(); e.stopPropagation(); @@ -1394,13 +1395,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp } } tryUpdateScrollHeight() { - const proseHeight = this.ProseRef?.scrollHeight || 0; - const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.docMaxAutoHeight, proseHeight), proseHeight); - if (scrollHeight && this.props.renderDepth && !this.props.dontRegisterView) { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation - const setScrollHeight = () => this.rootDoc[this.fieldKey + "-scrollHeight"] = scrollHeight; - if (this.rootDoc === this.layoutDoc.doc || this.layoutDoc.resolvedDataDoc) { - setScrollHeight(); - } else setTimeout(setScrollHeight, 10); // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template. So set a timeout and hope its arrived... + if (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(this.props.docViewPath())) { + const proseHeight = this.ProseRef?.scrollHeight || 0; + const scrollHeight = this.ProseRef && Math.min(NumCast(this.layoutDoc.docMaxAutoHeight, proseHeight), proseHeight); + if (scrollHeight && this.props.renderDepth && !this.props.dontRegisterView) { // if top === 0, then the text box is growing upward (as the overlay caption) which doesn't contribute to the height computation + const setScrollHeight = () => this.rootDoc[this.fieldKey + "-scrollHeight"] = scrollHeight; + if (this.rootDoc === this.layoutDoc.doc || this.layoutDoc.resolvedDataDoc) { + setScrollHeight(); + } else setTimeout(setScrollHeight, 10); // if we have a template that hasn't been resolved yet, we can't set the height or we'd be setting it on the unresolved template. So set a timeout and hope its arrived... + } } } fitToBox = () => this.props.Document._fitToBox; -- cgit v1.2.3-70-g09d2