From 483a4d35ba2c522b889c7bd9b839a0af131ec0bb Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 19:26:24 -0400 Subject: updated the way NativeWidth/Height props work so that, when specified, they override locally specified values --- src/client/views/collections/TabDocView.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index fb4f5c366..93d830b8a 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -306,8 +306,6 @@ export class TabDocView extends React.Component { ContentScaling={returnOne} PanelWidth={this.returnMiniSize} PanelHeight={this.returnMiniSize} - NativeHeight={returnZero} - NativeWidth={returnZero} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} whenActiveChanged={emptyFunction} -- cgit v1.2.3-70-g09d2 From f5c00261d8d936abdec22abfae94dd972c0f9e4a Mon Sep 17 00:00:00 2001 From: bobzel Date: Tue, 8 Sep 2020 22:57:51 -0400 Subject: fixed presbox, videobox and some others to set NativeWidth/Height properly. --- src/client/views/MainView.tsx | 4 ---- src/client/views/PropertiesView.tsx | 21 +++++---------------- .../views/collections/CollectionStackingView.tsx | 16 ++-------------- src/client/views/collections/CollectionSubView.tsx | 1 - src/client/views/collections/CollectionView.tsx | 1 + src/client/views/collections/TabDocView.tsx | 8 ++++---- .../CollectionMulticolumnView.tsx | 1 - .../views/nodes/ContentFittingDocumentView.scss | 1 - .../views/nodes/ContentFittingDocumentView.tsx | 2 +- src/client/views/nodes/ScreenshotBox.tsx | 4 ++-- src/client/views/nodes/VideoBox.tsx | 4 ++-- src/client/views/nodes/WebBox.tsx | 4 ++-- .../views/nodes/formattedText/FormattedTextBox.tsx | 6 +++--- src/client/views/pdf/PDFViewer.tsx | 4 ++-- 14 files changed, 24 insertions(+), 53 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index d017de457..bdf8c83e5 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -581,8 +581,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - NativeHeight={() => 500} - NativeWidth={() => 800} ContentScaling={returnOne} docFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} @@ -648,8 +646,6 @@ export class MainView extends React.Component { focus={returnFalse} PanelWidth={() => 500} PanelHeight={() => 800} - NativeHeight={() => 500} - NativeWidth={() => 800} ContentScaling={returnOne} docFilters={returnEmptyFilter} searchFilterDocs={returnEmptyDoclist} diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx index 7da56721a..d70f4b332 100644 --- a/src/client/views/PropertiesView.tsx +++ b/src/client/views/PropertiesView.tsx @@ -80,21 +80,11 @@ export class PropertiesView extends React.Component { @computed get isInk() { return this.selectedDoc?.type === DocumentType.INK; } - @action rtfWidth = () => { - if (this.selectedDoc) { - return Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); - } else { - return 0; - } + return !this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[WidthSym](), this.props.width - 20); } - @action rtfHeight = () => { - if (this.selectedDoc) { - return this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; - } else { - return 0; - } + return !this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[WidthSym]() ? Math.min(this.selectedDoc?.[HeightSym](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT; } @action @@ -286,10 +276,9 @@ export class PropertiesView extends React.Component { backgroundColor={this.previewBackground} fitToBox={true} FreezeDimensions={true} - NativeWidth={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfWidth : undefined} - NativeHeight={layoutDoc.type === - StrCast(Doc.LayoutField(layoutDoc)).includes("FormattedTextBox") ? this.rtfHeight : undefined} + dontCenter={true} + NativeWidth={layoutDoc.type === DocumentType.RTF ? this.rtfWidth : undefined} + NativeHeight={layoutDoc.type === DocumentType.RTF ? this.rtfHeight : undefined} PanelWidth={panelWidth} PanelHeight={panelHeight} focus={returnFalse} diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index a7276a962..cbc62be91 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -128,19 +128,6 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) return fields; } - getSimpleDocHeight(d?: Doc) { - if (!d) return 0; - const layoutDoc = Doc.Layout(d, this.props.ChildLayoutTemplate?.()); - const nw = NumCast(layoutDoc._nativeWidth); - const nh = NumCast(layoutDoc._nativeHeight); - let wid = this.columnWidth / (this.isStackingView ? this.numGroupColumns : 1); - if (!layoutDoc._fitWidth && nw && nh) { - const aspect = nw && nh ? nh / nw : 1; - if (!(this.layoutDoc._columnsFill)) wid = Math.min(layoutDoc[WidthSym](), wid); - return wid * aspect; - } - return layoutDoc._fitWidth ? wid * NumCast(layoutDoc.scrollHeight, nh) / (nw || 1) : layoutDoc[HeightSym](); - } componentDidMount() { super.componentDidMount?.(); @@ -209,8 +196,9 @@ export class CollectionStackingView extends CollectionSubView(StackingDocument) renderDepth={this.props.renderDepth + 1} PanelWidth={width} PanelHeight={height} - NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined} + NativeWidth={this.props.childIgnoreNativeSize ? returnZero : undefined} // explicitly ignore nativeWidth/height if childIgnoreNativeSize is set- used by PresBox NativeHeight={this.props.childIgnoreNativeSize ? returnZero : undefined} + dontCenter={this.props.childIgnoreNativeSize ? true : false} fitToBox={false} dontRegisterView={dataDoc ? true : BoolCast(this.layoutDoc.dontRegisterChildViews, this.props.dontRegisterView)} rootSelected={this.rootSelected} diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 37212a0fa..81f3ddad2 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -28,7 +28,6 @@ export interface CollectionViewProps extends FieldViewProps { PanelWidth: () => number; PanelHeight: () => number; VisibleHeight?: () => number; - childIgnoreNativeSize?: boolean; setPreviewCursor?: (func: (x: number, y: number, drag: boolean) => void) => void; rootSelected: (outsideReaction?: boolean) => boolean; fieldKey: string; diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx index ef3128bc0..6939399e6 100644 --- a/src/client/views/collections/CollectionView.tsx +++ b/src/client/views/collections/CollectionView.tsx @@ -73,6 +73,7 @@ export interface CollectionViewCustomProps { filterAddDocument?: (doc: Doc | Doc[]) => boolean; // allows a document that renders a Collection view to filter or modify any documents added to the collection (see PresBox for an example) childOpacity?: () => number; hideFilter?: true; + childIgnoreNativeSize?: boolean; } export interface CollectionRenderProps { diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 93d830b8a..f3d2aaa8f 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -228,8 +228,8 @@ export class TabDocView extends React.Component { } return Transform.Identity(); } - get previewPanelCenteringOffset() { return this.nativeWidth() ? (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2 : 0; } - get widthpercent() { return this.nativeWidth() ? `${(this.nativeWidth() * this.contentScaling()) / this._panelWidth * 100}% ` : undefined; } + @computed get previewPanelCenteringOffset() { return this.nativeWidth() ? (this._panelWidth - this.nativeWidth() * this.contentScaling()) / 2 : 0; } + @computed get widthpercent() { return this.nativeWidth() ? `${(this.nativeWidth() * this.contentScaling()) / this._panelWidth * 100}% ` : undefined; } // adds a tab to the layout based on the locaiton parameter which can be: // close[:{left,right,top,bottom}] - e.g., "close" will close the tab, "close:left" will close the left tab, @@ -345,8 +345,8 @@ export class TabDocView extends React.Component { ContentScaling={this.contentScaling} PanelWidth={this.panelWidth} PanelHeight={this.panelHeight} - NativeHeight={this.nativeHeight} - NativeWidth={this.nativeWidth} + NativeHeight={this.nativeHeight() ? this.nativeHeight : undefined} + NativeWidth={this.nativeWidth() ? this.nativeWidth : undefined} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} parentActive={returnTrue} diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 556cf79cd..0e4785d36 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -256,7 +256,6 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu const { childLayoutPairs } = this; const { Document, PanelHeight } = this.props; const collector: JSX.Element[] = []; - const layoutTemp = this.props.DataDoc ? true : undefined; for (let i = 0; i < childLayoutPairs.length; i++) { const { layout } = childLayoutPairs[i]; const dxf = () => this.lookupIndividualTransform(layout).translate(-NumCast(Document._xMargin), -NumCast(Document._yMargin)); diff --git a/src/client/views/nodes/ContentFittingDocumentView.scss b/src/client/views/nodes/ContentFittingDocumentView.scss index eb2d93b9a..50562951a 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.scss +++ b/src/client/views/nodes/ContentFittingDocumentView.scss @@ -3,7 +3,6 @@ .contentFittingDocumentView { position: relative; display: flex; - align-items: center; .contentFittingDocumentView-previewDoc { position: relative; diff --git a/src/client/views/nodes/ContentFittingDocumentView.tsx b/src/client/views/nodes/ContentFittingDocumentView.tsx index 1fe7e6207..55149a44b 100644 --- a/src/client/views/nodes/ContentFittingDocumentView.tsx +++ b/src/client/views/nodes/ContentFittingDocumentView.tsx @@ -62,7 +62,7 @@ export class ContentFittingDocumentView extends React.Component 0.001 ? `${100 * this.nativeHeight() / this.nativeWidth() * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.centeringOffset) > 0.001 ? `${100 * (this.props.PanelWidth() - this.centeringOffset * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth() diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx index 34ad7f3be..f13f373d0 100644 --- a/src/client/views/nodes/ScreenshotBox.tsx +++ b/src/client/views/nodes/ScreenshotBox.tsx @@ -9,7 +9,7 @@ import { InkTool } from "../../../fields/InkField"; import { listSpec, makeInterface } from "../../../fields/Schema"; import { Cast, NumCast } from "../../../fields/Types"; import { VideoField } from "../../../fields/URLField"; -import { emptyFunction, returnFalse, returnOne, returnZero, Utils } from "../../../Utils"; +import { emptyFunction, returnFalse, returnOne, returnZero, Utils, OmitKeys, OmitKeys } from "../../../Utils"; import { Docs } from "../../documents/Documents"; import { CollectionFreeFormView } from "../collections/collectionFreeForm/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; @@ -169,7 +169,7 @@ export class ScreenshotBox extends ViewBoxBaseComponent
-
- - { - Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.()||0, this.props.NativeHeight?.()||0); + Doc.toggleNativeDimensions(this.layoutDoc, this.props.ContentScaling(), this.props.NativeWidth?.() || 0, this.props.NativeHeight?.() || 0); } public static get DefaultLayout(): Doc | string | undefined { @@ -1562,7 +1562,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
:
- - Date: Wed, 9 Sep 2020 16:57:25 -0400 Subject: several pdf fixes - clipping link anchors to bounds of container. pdf box titles don't change based on zoom anymore. can't zoom a pdf if not selected. fixed scrolling of previews without scrolling targets. --- src/client/views/collections/CollectionSubView.tsx | 3 +- src/client/views/collections/TabDocView.tsx | 8 ++--- .../CollectionFreeFormLinkView.tsx | 30 ++++++++++++---- src/client/views/nodes/LinkDocPreview.tsx | 2 +- src/client/views/nodes/PDFBox.scss | 7 ++++ src/client/views/nodes/PDFBox.tsx | 7 ++-- .../formattedText/FormattedTextBoxComment.tsx | 42 +++++++++++----------- src/client/views/pdf/PDFViewer.scss | 2 ++ src/client/views/pdf/PDFViewer.tsx | 31 ++++++++++------ 9 files changed, 86 insertions(+), 46 deletions(-) (limited to 'src/client/views/collections/TabDocView.tsx') diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index aa6b74f2d..c79547bb4 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -270,7 +270,6 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: return; } - console.log("Html = ", html); if (html) { if (FormattedTextBox.IsFragment(html)) { const href = FormattedTextBox.GetHref(html); @@ -333,7 +332,7 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T, moreProps?: Doc.GetProto(htmlDoc)["data-text"] = Doc.GetProto(htmlDoc).text = text; this.props.addDocument(htmlDoc); if (srcWeb) { - const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0].contentDocument?.getSelection()?.focusNode as any); + const focusNode = (SelectionManager.SelectedDocuments()[0].ContentDiv?.getElementsByTagName("iframe")?.[0]?.contentDocument?.getSelection()?.focusNode as any); if (focusNode) { const rect = "getBoundingClientRect" in focusNode ? focusNode.getBoundingClientRect() : focusNode?.parentElement.getBoundingClientRect(); const x = (rect?.x || 0); diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index f3d2aaa8f..589649ad9 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -68,7 +68,6 @@ export class TabDocView extends React.Component { tab.element[0].onmouseenter = (e: MouseEvent) => { if (SnappingManager.GetIsDragging() && tab.contentItem !== tab.header.parent.getActiveContentItem()) { tab.header.parent.setActiveContentItem(tab.contentItem); - console.log("Seetting " + titleEle.value); tab.setActive(true); } }; @@ -88,7 +87,7 @@ export class TabDocView extends React.Component { (document.activeElement !== titleEle) && titleEle.focus(); } }; - tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => v.topMost && v.props.Document === doc), + tab._disposers.selectionDisposer = reaction(() => SelectionManager.SelectedDocuments().some(v => (v.topMost || v.props.treeViewDoc) && v.props.Document === doc), (selected) => selected && tab.contentItem !== tab.header.parent.getActiveContentItem() && UndoManager.RunInBatch(() => tab.header.parent.setActiveContentItem(tab.contentItem), "tab switch")); @@ -190,9 +189,9 @@ export class TabDocView extends React.Component { private onActiveContentItemChanged() { if (this.props.glContainer.tab && this._isActive !== this.props.glContainer.tab.isActive) { this._isActive = this.props.glContainer.tab.isActive; - this._isActive && setTimeout(() => this.view && SelectionManager.SelectDoc(this.view, false), 0); (CollectionDockingView.Instance as any)._goldenLayout?.isInitialised && CollectionDockingView.Instance.stateChanged(); !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one. + this._isActive && this.view && SelectionManager.SelectDoc(this.view, false); } } @@ -330,6 +329,7 @@ export class TabDocView extends React.Component { } focusFunc = (doc: Doc, willZoom: boolean, scale?: number, afterFocus?: () => void) => afterFocus?.(); setView = action((view: DocumentView) => this._view = view); + active = () => this._isActive; @computed get docView() { TraceMobx(); return !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : @@ -349,7 +349,7 @@ export class TabDocView extends React.Component { NativeWidth={this.nativeWidth() ? this.nativeWidth : undefined} ScreenToLocalTransform={this.ScreenToLocalTransform} renderDepth={0} - parentActive={returnTrue} + parentActive={this.active} whenActiveChanged={emptyFunction} focus={this.focusFunc} backgroundColor={CollectionDockingView.Instance.props.backgroundColor} diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx index 3a2979696..417b4c1ff 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx @@ -103,8 +103,24 @@ export class CollectionFreeFormLinkView extends React.Component { })} // />, { x: 300, y: 300 }); }); + + } + visibleY = (el: any) => { + var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, + el = el.parentNode; + do { + rect = el.getBoundingClientRect(); + if (top <= rect.bottom === false && getComputedStyle(el).overflow === "hidden") return rect.bottom; + // Check if the element is out of view due to a container scrolling + if ((top + height) <= rect.top && getComputedStyle(el).overflow === "hidden") return rect.top; + el = el.parentNode; + } while (el != document.body); + // Check its within the document viewport + return top;//top <= document.documentElement.clientHeight && getComputedStyle(document.documentElement).overflow === "hidden"; + }; + @computed get renderData() { this._start; if (SnappingManager.GetIsDragging() || !this.props.A.ContentDiv || !this.props.B.ContentDiv || !this.props.LinkDocs.length) { @@ -115,16 +131,18 @@ export class CollectionFreeFormLinkView extends React.Component { searchFilterDocs={returnEmptyDoclist} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} - renderDepth={0} + renderDepth={-1} PanelWidth={this.width} //Math.min(350, NumCast(target._width, 350))} PanelHeight={this.height} //Math.min(250, NumCast(target._height, 250))} focus={emptyFunction} diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 1c73ec8cb..a7dc55c52 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -204,6 +204,7 @@ .pdfBox { width: 100%; height: 100%; + pointer-events: none; .pdfViewerDash-text { .textLayer { span { @@ -213,6 +214,12 @@ } } +.pdfBox-background { + width: 100%; + height: 100%; + background: lightGray; +} + .pdfBox-interactive { width: 100%; height: 100%; diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 7bdbe3cae..266017b5b 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -247,6 +247,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent 600) ? NumCast(this.Document._height) * this.props.PanelWidth() / NumCast(this.Document._width) : undefined }}> +
+ fieldKey={this.props.fieldKey} startupLive={true} /> {this.settingsPanel()}
; } @@ -264,8 +265,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent { const keep = e.target && (e.target as any).type === "checkbox" ? true : false; const textBox = FormattedTextBoxComment.textBox; - if (FormattedTextBoxComment.linkDoc && !keep && textBox) { - if (FormattedTextBoxComment.linkDoc.author) { - - if (FormattedTextBoxComment._deleteRef && FormattedTextBoxComment._deleteRef.contains(e.target as any)) { + const linkDoc = FormattedTextBoxComment.linkDoc; + if (linkDoc && !keep && textBox) { + FormattedTextBoxComment.linkDoc = undefined; + if (linkDoc.author) { + if (FormattedTextBoxComment._deleteRef?.contains(e.target as any)) { this.deleteLink(); } else if (FormattedTextBoxComment._followRef && FormattedTextBoxComment._followRef.contains(e.target as any)) { - if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "add" : "add:right"); + if (linkDoc.type !== DocumentType.LINK) { + textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right"); } else { - const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc)), textBox.dataDoc) ? - Cast(FormattedTextBoxComment.linkDoc.anchor2, Doc) : (Cast(FormattedTextBoxComment.linkDoc.anchor1, Doc)) - || FormattedTextBoxComment.linkDoc); + const anchor = FieldValue(Doc.AreProtosEqual(FieldValue(Cast(linkDoc.anchor1, Doc)), textBox.dataDoc) ? + Cast(linkDoc.anchor2, Doc) : (Cast(linkDoc.anchor1, Doc)) + || linkDoc); const target = anchor?.annotationOn ? await DocCastAsync(anchor.annotationOn) : anchor; - if (FormattedTextBoxComment.linkDoc.follow) { - if (FormattedTextBoxComment.linkDoc.follow === "default") { - DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false); - } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in right tab") { + if (linkDoc.follow) { + if (linkDoc.follow === "default") { + DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false); + } else if (linkDoc.follow === "Always open in right tab") { if (target) { textBox.props.addDocTab(target, "add:right"); } - } else if (FormattedTextBoxComment.linkDoc.follow === "Always open in new tab") { + } else if (linkDoc.follow === "Always open in new tab") { if (target) { textBox.props.addDocTab(target, "add"); } } } else { - DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false); + DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document, doc => textBox.props.addDocTab(doc, "add:right"), false); } } } else { - if (FormattedTextBoxComment.linkDoc.type !== DocumentType.LINK) { - textBox.props.addDocTab(FormattedTextBoxComment.linkDoc, e.ctrlKey ? "add" : "add:right"); + if (linkDoc.type !== DocumentType.LINK) { + textBox.props.addDocTab(linkDoc, e.ctrlKey ? "add" : "add:right"); } else { - DocumentManager.Instance.FollowLink(FormattedTextBoxComment.linkDoc, textBox.props.Document, + DocumentManager.Instance.FollowLink(linkDoc, textBox.props.Document, (doc: Doc, followLinkLocation: string) => textBox.props.addDocTab(doc, e.ctrlKey ? "add" : followLinkLocation)); } } @@ -140,7 +141,7 @@ export class FormattedTextBoxComment { e.stopPropagation(); e.preventDefault(); }; - root && root.appendChild(FormattedTextBoxComment.tooltip); + root?.appendChild(FormattedTextBoxComment.tooltip); } } @@ -158,6 +159,7 @@ export class FormattedTextBoxComment { FormattedTextBoxComment.textBox = undefined; FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none"); ReactDOM.unmountComponentAtNode(FormattedTextBoxComment.tooltipText); + FormattedTextBoxComment.linkDoc = undefined; } public static SetState(textBox: any, start: number, end: number, mark: Mark) { FormattedTextBoxComment.textBox = textBox; @@ -312,7 +314,7 @@ export class FormattedTextBoxComment { searchFilterDocs={returnEmptyDoclist} ContainingCollectionDoc={undefined} ContainingCollectionView={undefined} - renderDepth={0} + renderDepth={-1} PanelWidth={() => 175} //Math.min(350, NumCast(target._width, 350))} PanelHeight={() => 175} //Math.min(250, NumCast(target._height, 250))} focus={emptyFunction} diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss index 86c73bfee..70b4c417c 100644 --- a/src/client/views/pdf/PDFViewer.scss +++ b/src/client/views/pdf/PDFViewer.scss @@ -2,6 +2,8 @@ .pdfViewerDash, .pdfViewerDash-interactive { width: 100%; height: 100%; + top: 0; + left:0; position: absolute; overflow-y: auto; overflow-x: hidden; diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx index 03ccca019..e7702fb5e 100644 --- a/src/client/views/pdf/PDFViewer.tsx +++ b/src/client/views/pdf/PDFViewer.tsx @@ -33,8 +33,10 @@ import "./PDFViewer.scss"; const pdfjs = require('pdfjs-dist/es5/build/pdf.js'); import React = require("react"); import { LinkDocPreview } from "../nodes/LinkDocPreview"; +import { FormattedTextBoxComment } from "../nodes/formattedText/FormattedTextBoxComment"; const PDFJSViewer = require("pdfjs-dist/web/pdf_viewer"); const pdfjsLib = require("pdfjs-dist"); +const _global = (window /* browser */ || global /* node */) as any; export const pageSchema = createSchema({ _curPage: "number", @@ -144,9 +146,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._showWaiting = this._showCover = true); + runInAction(() => this._showWaiting = true); this.props.startupLive && this.setupPdfJsViewer(); - this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0); + if (this._mainCont.current) { + this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0; + const observer = new _global.ResizeObserver(action((entries: any) => this._mainCont.current && (this._mainCont.current.scrollTop = this.layoutDoc._scrollTop || 0))); + observer.observe(this._mainCont.current); + } + this._disposers.searchMatch = reaction(() => Doc.IsSearchMatch(this.rootDoc), m => { if (m) (this._lastSearch = true) && this.search(Doc.SearchQuery(), m.searchMatch > 0); @@ -168,7 +175,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (scrollY !== undefined) { (this._showCover || this._showWaiting) && this.setupPdfJsViewer(); - (!LinkDocPreview.TargetDoc) && this._mainCont.current && smoothScroll(1000, this._mainCont.current, (this.Document._scrollY || 0)); + (this.props.renderDepth === -1 || (!LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc)) && this._mainCont.current && smoothScroll(1000, this._mainCont.current, (this.Document._scrollY || 0)); setTimeout(() => this.Document._scrollY = undefined, 1000); } }, @@ -265,7 +272,9 @@ export class PDFViewer extends ViewBoxAnnotatableComponent this._showCover = this._showWaiting = false)); + eventBus._on("pagerendered", action(() => { + this._showWaiting = false; + })); const pdfLinkService = new PDFJSViewer.PDFLinkService({ eventBus }); const pdfFindController = new PDFJSViewer.PDFFindController({ linkService: pdfLinkService, eventBus }); this._pdfViewer = new PDFJSViewer.PDFViewer({ @@ -369,12 +378,14 @@ export class PDFViewer extends ViewBoxAnnotatableComponent) => { - this.Document._scrollY === undefined && (this.layoutDoc._scrollTop = this._mainCont.current!.scrollTop); - this.pageDelay && clearTimeout(this.pageDelay); - this.pageDelay = setTimeout(() => { - this.pageDelay = undefined; - this._pdfViewer && (this.Document._curPage = this._pdfViewer.currentPageNumber); - }, 250); + if (!LinkDocPreview.TargetDoc && !FormattedTextBoxComment.linkDoc) { + this.Document._scrollY === undefined && (this.layoutDoc._scrollTop = this._mainCont.current!.scrollTop); + this.pageDelay && clearTimeout(this.pageDelay); + this.pageDelay = setTimeout(() => { + this.pageDelay = undefined; + this._pdfViewer && (this.Document._curPage = this._pdfViewer.currentPageNumber); + }, 250); + } } // get the page index that the vertical offset passed in is on -- cgit v1.2.3-70-g09d2