aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/pdf/PDFViewer.tsx
diff options
context:
space:
mode:
authorbobzel <zzzman@gmail.com>2022-09-13 10:11:49 -0400
committerbobzel <zzzman@gmail.com>2022-09-13 10:11:49 -0400
commit36b17b5b0878eeb2eb23fd4c5078e06fcc002aaf (patch)
tree33c1a3fb50381d09bf89bd43d869544a3c52c7b6 /src/client/views/pdf/PDFViewer.tsx
parent7696d85b7b737a29cab189f4c65f395c5de132c7 (diff)
parentbb9f0d4dec849bdaf2d358d060707b2ed1ed677d (diff)
Merge branch 'sharing-jenny' of https://github.com/brown-dash/Dash-Web into sharing-jenny
Diffstat (limited to 'src/client/views/pdf/PDFViewer.tsx')
-rw-r--r--src/client/views/pdf/PDFViewer.tsx97
1 files changed, 38 insertions, 59 deletions
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 837734edf..53d969c0a 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -9,6 +9,7 @@ import { Cast, NumCast, StrCast } from '../../../fields/Types';
import { TraceMobx } from '../../../fields/util';
import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, OmitKeys, smoothScroll, Utils } from '../../../Utils';
import { DocUtils } from '../../documents/Documents';
+import { DragManager } from '../../util/DragManager';
import { SelectionManager } from '../../util/SelectionManager';
import { SharingManager } from '../../util/SharingManager';
import { SnappingManager } from '../../util/SnappingManager';
@@ -41,7 +42,6 @@ interface IViewerProps extends FieldViewProps {
url: string;
loaded?: (nw: number, nh: number, np: number) => void;
setPdfViewer: (view: PDFViewer) => void;
- ContentScaling?: () => number;
anchorMenuClick?: () => undefined | ((anchor: Doc) => void);
crop: (region: Doc | undefined, addCrop?: boolean) => Doc | undefined;
}
@@ -97,7 +97,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
autoHeight => {
if (autoHeight) {
this.props.layoutDoc._nativeHeight = NumCast(this.props.Document[this.props.fieldKey + '-nativeHeight']);
- this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '-nativeHeight']) * (this.props.scaling?.() || 1));
+ this.props.setHeight?.(NumCast(this.props.Document[this.props.fieldKey + '-nativeHeight']) * (this.props.NativeDimScaling?.() || 1));
}
}
);
@@ -162,13 +162,11 @@ export class PDFViewer extends React.Component<IViewerProps> {
const mainCont = this._mainCont.current;
let focusSpeed: Opt<number>;
if (doc !== this.props.rootDoc && mainCont) {
- const windowHeight = this.props.PanelHeight() / (this.props.scaling?.() || 1);
+ const windowHeight = this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1);
const scrollTo = doc.unrendered ? NumCast(doc.y) : Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.props.layoutDoc._scrollTop), windowHeight, 0.1 * windowHeight, NumCast(this.props.Document.scrollHeight));
if (scrollTo !== undefined && scrollTo !== this.props.layoutDoc._scrollTop) {
- focusSpeed = 500;
-
if (!this._pdfViewer) this._initialScroll = scrollTo;
- else if (smooth) smoothScroll(focusSpeed, mainCont, scrollTo);
+ else if (smooth) smoothScroll((focusSpeed = NumCast(doc.focusSpeed, 500)), mainCont, scrollTo);
else this._mainCont.current?.scrollTo({ top: Math.abs(scrollTo || 0) });
}
} else {
@@ -486,11 +484,10 @@ export class PDFViewer extends React.Component<IViewerProps> {
showInfo = action((anno: Opt<Doc>) => (this._overlayAnnoInfo = anno));
overlayTransform = () => this.scrollXf().scale(1 / NumCast(this.props.layoutDoc._viewScale, 1));
- panelWidth = () => this.props.PanelWidth() / (this.props.scaling?.() || 1); // (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);
- basicFilter = () => [...this.props.docFilters(), Utils.PropUnsetFilter('textInlineAnnotations')];
+ panelWidth = () => this.props.PanelWidth() / (this.props.NativeDimScaling?.() || 1); // (this.Document.scrollHeight || Doc.NativeHeight(this.Document) || 0);
+ panelHeight = () => this.props.PanelHeight() / (this.props.NativeDimScaling?.() || 1); // () => this._pageSizes.length && this._pageSizes[0] ? this._pageSizes[0].width : Doc.NativeWidth(this.Document);
transparentFilter = () => [...this.props.docFilters(), Utils.IsTransparentFilter()];
- opaqueFilter = () => [...this.props.docFilters(), Utils.IsOpaqueFilter()];
+ opaqueFilter = () => [...this.props.docFilters(), Utils.noDragsDocFilter, ...(DragManager.docsBeingDragged.length ? [] : [Utils.IsOpaqueFilter()])];
childStyleProvider = (doc: Doc | undefined, props: Opt<DocumentViewProps>, property: string): any => {
if (doc instanceof Doc && property === StyleProp.PointerEvents) {
if (doc.textInlineAnnotations) return 'none';
@@ -499,67 +496,50 @@ export class PDFViewer extends React.Component<IViewerProps> {
return this.props.styleProvider?.(doc, props, property);
};
- renderAnnotations = (docFilters?: () => string[], dontRender?: boolean) => (
- <CollectionFreeFormView
- {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
- isAnnotationOverlay={true}
- fieldKey={this.props.fieldKey + '-annotations'}
- setPreviewCursor={this.setPreviewCursor}
- PanelHeight={this.panelHeight}
- PanelWidth={this.panelWidth}
- dropAction={'alias'}
- select={emptyFunction}
- ContentScaling={this.contentZoom}
- bringToFront={emptyFunction}
- docFilters={docFilters || this.basicFilter}
- styleProvider={this.childStyleProvider}
- dontRenderDocuments={dontRender}
- CollectionView={undefined}
- ScreenToLocalTransform={this.overlayTransform}
- renderDepth={this.props.renderDepth + 1}
- />
+ renderAnnotations = (docFilters?: () => string[], mixBlendMode?: any, display?: string) => (
+ <div
+ className="pdfViewerDash-overlay"
+ style={{
+ mixBlendMode: mixBlendMode,
+ display: display,
+ transform: `scale(${NumCast(this.props.layoutDoc._viewScale, 1)})`,
+ pointerEvents: Doc.ActiveTool !== InkTool.None ? 'all' : undefined,
+ }}>
+ <CollectionFreeFormView
+ {...OmitKeys(this.props, ['NativeWidth', 'NativeHeight', 'setContentView']).omit}
+ renderDepth={this.props.renderDepth + 1}
+ isAnnotationOverlay={true}
+ fieldKey={this.props.fieldKey + '-annotations'}
+ CollectionView={undefined}
+ setPreviewCursor={this.setPreviewCursor}
+ PanelHeight={this.panelHeight}
+ PanelWidth={this.panelWidth}
+ ScreenToLocalTransform={this.overlayTransform}
+ dropAction={'alias'}
+ docFilters={docFilters}
+ select={emptyFunction}
+ bringToFront={emptyFunction}
+ styleProvider={this.childStyleProvider}
+ />
+ </div>
);
@computed get overlayTransparentAnnotations() {
- return this.renderAnnotations(this.transparentFilter, false);
+ return this.renderAnnotations(this.transparentFilter, 'multiply', DragManager.docsBeingDragged.length ? 'none' : undefined);
}
@computed get overlayOpaqueAnnotations() {
- return this.renderAnnotations(this.opaqueFilter, false);
- }
- @computed get overlayClickableAnnotations() {
- return <div style={{ height: NumCast(this.props.rootDoc.scrollHeight) }}>{this.renderAnnotations(undefined, true)}</div>;
+ return this.renderAnnotations(this.opaqueFilter, this.allAnnotations.some(anno => anno.mixBlendMode) ? 'hard-light' : undefined);
}
@computed get overlayLayer() {
return (
<div style={{ pointerEvents: SnappingManager.GetIsDragging() ? 'all' : 'none' }}>
- <div
- className="pdfViewerDash-overlay"
- style={{
- pointerEvents: SnappingManager.GetIsDragging() ? 'all' : 'none',
- mixBlendMode: 'multiply',
- transform: `scale(${NumCast(this.props.layoutDoc._viewScale, 1)})`,
- }}>
- {this.overlayTransparentAnnotations}
- </div>
- <div
- className="pdfViewerDash-overlay"
- style={{
- pointerEvents: SnappingManager.GetIsDragging() ? 'all' : 'none',
- mixBlendMode: this.allAnnotations.some(anno => anno.mixBlendMode) ? 'hard-light' : undefined,
- transform: `scale(${NumCast(this.props.layoutDoc._viewScale, 1)})`,
- }}>
- {this.overlayOpaqueAnnotations}
- {this.overlayClickableAnnotations}
- </div>
+ {this.overlayTransparentAnnotations}
+ {this.overlayOpaqueAnnotations}
</div>
);
}
@computed get pdfViewerDiv() {
return <div className={'pdfViewerDash-text' + (this.props.pointerEvents?.() !== 'none' && this._textSelecting && this.props.isContentActive() ? '-selected' : '')} ref={this._viewer} />;
}
- @computed get contentScaling() {
- return this.props.ContentScaling?.() || 1;
- }
- contentZoom = () => NumCast(this.props.layoutDoc._viewScale, 1);
savedAnnotations = () => this._savedAnnotations;
render() {
TraceMobx();
@@ -574,8 +554,7 @@ export class PDFViewer extends React.Component<IViewerProps> {
onClick={this.onClick}
style={{
overflowX: NumCast(this.props.layoutDoc._viewScale, 1) !== 1 ? 'scroll' : undefined,
- height: !this.props.Document._fitWidth && window.screen.width > 600 ? Doc.NativeHeight(this.props.Document) : `${100 / this.contentScaling}%`,
- transform: `scale(${this.contentScaling})`,
+ height: !this.props.Document._fitWidth && window.screen.width > 600 ? Doc.NativeHeight(this.props.Document) : `100%`,
}}>
{this.pdfViewerDiv}
{this.annotationLayer}