From f9f0d6ca06e850e0ea68d7b7b701de46d9449169 Mon Sep 17 00:00:00 2001 From: bobzel Date: Sun, 13 Dec 2020 20:49:48 -0500 Subject: trying to fix PDFs for fitWidth and otherwise in ContentFitting and CollectionFreeFormDoc containers. --- src/client/views/collections/TabDocView.tsx | 2 -- .../views/nodes/CollectionFreeFormDocumentView.tsx | 17 +++++++++++------ .../views/nodes/ContentFittingDocumentView.tsx | 20 +++++++++++++++----- src/client/views/nodes/DocumentView.tsx | 7 ++++++- src/client/views/nodes/PDFBox.tsx | 3 +-- src/client/views/nodes/VideoBox.tsx | 7 +++++-- src/client/views/pdf/PDFViewer.tsx | 8 ++++---- 7 files changed, 42 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx index 40e7bc7ce..65b793adb 100644 --- a/src/client/views/collections/TabDocView.tsx +++ b/src/client/views/collections/TabDocView.tsx @@ -373,7 +373,6 @@ export class TabDocView extends React.Component { @computed get layerProvider() { return this._document && DefaultLayerProvider(this._document); } @computed get docView() { TraceMobx(); - console.log("" + this._document?.title + " " + (!this._activated || !this._document || this._document._viewType === CollectionViewType.Docking)) return !this._activated || !this._document || this._document._viewType === CollectionViewType.Docking ? (null) : <> console.log(this._view = r))} renderDepth={0} @@ -411,7 +410,6 @@ export class TabDocView extends React.Component { } render() { - console.log("tab", this._document) return (
{ if (this._mainCont = ref) { diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx index b148fad12..0e790d8db 100644 --- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx +++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx @@ -58,6 +58,10 @@ export class CollectionFreeFormDocumentView extends DocComponent, property: string) => { if (property === StyleProp.Opacity && doc === this.layoutDoc) return this.Opacity; // only change the opacity for this specific document, not its children @@ -140,15 +144,12 @@ export class CollectionFreeFormDocumentView extends DocComponent (this.sizeProvider?.width || this.props.PanelWidth?.()); panelHeight = () => (this.sizeProvider?.height || this.props.PanelHeight?.()); - getTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y); + screenToLocalTransform = (): Transform => this.props.ScreenToLocalTransform().translate(-this.X, -this.Y).scale(1 / this.Scaling()); focusDoc = (doc: Doc) => this.props.focus(doc, false); NativeWidth = () => this.nativeWidth; NativeHeight = () => this.nativeHeight; returnThis = () => this; - @computed get pointerEvents() { - if (this.props.pointerEvents === "none") return "none"; - return this.props.styleProvider?.(this.Document, this.props, StyleProp.PointerEvents + (!this._contentView?.docView?.isSelected() ? ":selected" : "")); - } + Scaling = () => this.Document._fitWidth ? this.props.PanelWidth() / this.NativeWidth() : 1; render() { TraceMobx(); const backgroundColor = this.props.styleProvider?.(this.Document, this.props, StyleProp.BackgroundColor); @@ -159,12 +160,16 @@ export class CollectionFreeFormDocumentView extends DocComponent this.nativeWidth; + NativeHeight = () => this.nativeHeight; PanelWidth = () => this.panelWidth; PanelHeight = () => this.panelHeight; NativeScaling = () => this.nativeScaling; - screenToLocalTransform = () => this.props.ScreenToLocalTransform().translate(-this.centeringX, -this.centeringY).scale(1 / this.nativeScaling); + screenToLocalTransform = () => this.props.ScreenToLocalTransform().scale(1 / this.nativeScaling); render() { TraceMobx(); + if (this.props.Document.type === DocumentType.PDF) { + console.log("PanelHeight = " + this.panelHeight); + } return (
{!this.props.Document || !this.props.PanelWidth() ? (null) : (
0.001 ? `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), width: Math.abs(this.Xshift) > 0.001 ? `${100 * (this.props.PanelWidth() - this.Xshift * 2) / this.props.PanelWidth()}%` : this.props.PanelWidth(), + height: Math.abs(this.YShift) > 0.001 ? this.props.Document._fitWidth ? `${this.panelHeight}px` : `${100 * this.nativeHeight / this.nativeWidth * this.props.PanelWidth() / this.props.PanelHeight()}%` : this.props.PanelHeight(), }}> this.docView = r)} LayoutTemplate={this.props.LayoutTemplate} PanelWidth={this.PanelWidth} PanelHeight={this.PanelHeight} + NativeWidth={this.NativeWidth} + NativeHeight={this.NativeHeight} ContentScaling={this.NativeScaling} ScreenToLocalTransform={this.screenToLocalTransform} focus={this.props.focus || emptyFunction} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index ec730dbf6..147740ae3 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -902,8 +902,13 @@ export class DocumentView extends DocComponent(Docu @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive; parentActive = (outsideReaction: boolean) => this.props.layerProvider?.(this.layoutDoc) === false ? this.props.parentActive(outsideReaction) : false; screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin); + contentScaling = () => !this.props.Document._fitWidth ? this.props.PanelWidth() / (this.props.NativeWidth?.() || this.props.PanelWidth()) : this.LocalScaling; + @computed get contents() { TraceMobx(); + if (this.props.Document.type === DocumentType.PDF) { + console.log("Scaling = " + this.contentScaling()); + } return (
(Docu NativeHeight={this.NativeHeight} PanelWidth={this.props.PanelWidth} PanelHeight={this.props.PanelHeight} - scaling={this.props.ContentScaling || returnOne} + scaling={this.contentScaling} layerProvider={this.props.layerProvider} styleProvider={this.props.styleProvider} LayoutTemplateString={this.props.LayoutTemplateString} diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx index 262e61c9b..ec9a75302 100644 --- a/src/client/views/nodes/PDFBox.tsx +++ b/src/client/views/nodes/PDFBox.tsx @@ -192,7 +192,6 @@ export class PDFBox extends ViewBoxAnnotatableComponent; } - contentScaling = () => this.props.scaling?.() || 1; isChildActive = (outsideReaction?: boolean) => this._isChildActive; @computed get renderPdfView() { TraceMobx(); @@ -209,7 +208,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent {this.settingsPanel()}
; diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx index 893236857..b446dab22 100644 --- a/src/client/views/nodes/VideoBox.tsx +++ b/src/client/views/nodes/VideoBox.tsx @@ -23,6 +23,7 @@ import { SnappingManager } from "../../util/SnappingManager"; import { SelectionManager } from "../../util/SelectionManager"; import { LinkDocPreview } from "./LinkDocPreview"; import { FormattedTextBoxComment } from "./formattedText/FormattedTextBoxComment"; +import { Transform } from "../../util/Transform"; const path = require('path'); export const timeSchema = createSchema({ @@ -413,7 +414,8 @@ export class VideoBox extends ViewBoxAnnotatableComponent this.contentScaling; contentFunc = () => [this.youtubeVideoId ? this.youtubeContent : this.content]; render() { return (
void; isChildActive: (outsideReaction?: boolean) => boolean; setPdfViewer: (view: PDFViewer) => void; - ContentScaling: () => number; + ContentScaling?: () => number; } /** @@ -371,7 +371,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent { if (scrollToAnnotation) { - const offset = (this.props.PanelHeight() / this.props.ContentScaling()) / 2; + const offset = (this.props.PanelHeight() / this.contentScaling) / 2; this._mainCont.current && smoothScroll(500, this._mainCont.current, NumCast(scrollToAnnotation.y) - offset); Doc.linkFollowHighlight(scrollToAnnotation); } @@ -738,7 +738,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent; } - @computed get contentScaling() { return this.props.ContentScaling(); } + @computed get contentScaling() { return this.props.ContentScaling?.() || 1; } @computed get standinViews() { return <> {this._showCover ? this.getCoverImage() : (null)} @@ -759,7 +759,7 @@ export class PDFViewer extends ViewBoxAnnotatableComponent 600) ? Doc.NativeWidth(this.props.Document) : `${100 / this.contentScaling}%`, height: !this.props.Document._fitWidth && (window.screen.width > 600) ? Doc.NativeHeight(this.props.Document) : `${100 / this.contentScaling}%`, - transform: `scale(${this.props.ContentScaling()})` + transform: `scale(${this.contentScaling})` }} > {this.pdfViewerDiv} {this.annotationLayer} -- cgit v1.2.3-70-g09d2