fixed some zorering issues with transparent/opaque docs on pdfs

1 files changed, 27 insertions, 53 deletions

diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 38890410c..7ad452e54 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -488,7 +488,8 @@ export class PDFViewer extends React.Component<IViewerProps> {
         }
         return this.props.styleProvider?.(doc, props, property);
     }
-    renderAnnotations = (docFilters?: () => string[]) =>
+
+    renderAnnotations = (docFilters?: () => string[], dontRender?: boolean) =>
         <CollectionFreeFormView {...OmitKeys(this.props, ["NativeWidth", "NativeHeight", "setContentView"]).omit}
             isAnnotationOverlay={true}
             fieldKey={this.props.fieldKey + "-annotations"}
@@ -501,63 +502,36 @@ export class PDFViewer extends React.Component<IViewerProps> {
             bringToFront={emptyFunction}
             docFilters={docFilters || this.basicFilter}
             styleProvider={this.childStyleProvider}
-            dontRenderDocuments={docFilters ? false : true}
-            CollectionView={undefined}
-            ScreenToLocalTransform={this.overlayTransform}
-            renderDepth={this.props.renderDepth + 1} />;
-
-    @computed get overlayLayerClickableAnnotations() {
-        return SnappingManager.GetIsDragging() ? (null) : this.renderAnnotations();
-    }
-    @computed get overlayLayerOpaqueAnnotations() {
-        trace();
-        return <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={this.opaqueFilter}
-            styleProvider={this.childStyleProvider}
-            dontRenderDocuments={false}
+            dontRenderDocuments={dontRender}
             CollectionView={undefined}
             ScreenToLocalTransform={this.overlayTransform}
-            renderDepth={this.props.renderDepth + 1} />
-    }
-    @computed get overlayLayerTransparentAnnotations() {
-        trace();
-        return <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={this.transparentFilter}
-            styleProvider={this.childStyleProvider}
-            dontRenderDocuments={false}
-            CollectionView={undefined}
-            ScreenToLocalTransform={this.overlayTransform}
-            renderDepth={this.props.renderDepth + 1} />
+            renderDepth={this.props.renderDepth + 1}
+        />;
+    @computed get overlayTransparentAnnotations() { return this.renderAnnotations(this.transparentFilter, false); }
+    @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>;
     }
     @computed get overlayLayer() {
-        return <div className="pdfViewerDash-overlay" style={{
-            transform: `scale(${this._zoomed})`,
-            pointerEvents: CurrentUserUtils.SelectedTool !== InkTool.None || SnappingManager.GetIsDragging() ? "all" : "none",
-        }} >
-            <div className="pdfViewerDash-overlay" key="muliplied" style={{ mixBlendMode: "multiply", }}>
-                {this.overlayLayerTransparentAnnotations}
+        return <div style={{ pointerEvents: SnappingManager.GetIsDragging() ? "all" : "none" }}>
+            <div className="pdfViewerDash-overlay"
+                style={{
+                    pointerEvents: SnappingManager.GetIsDragging() ? "all" : "none",
+                    mixBlendMode: "multiply",
+                    transform: `scale(${this._zoomed})`
+                }}>
+                {this.overlayTransparentAnnotations}
             </div>
-            <div className="pdfViewerDash-overlay" key="blended" style={{ mixBlendMode: this.allAnnotations.some(anno => anno.mixBlendMode) ? "hard-light" : undefined, }}>
-                {this.overlayLayerOpaqueAnnotations}
-                {this.overlayLayerClickableAnnotations}
+            <div className="pdfViewerDash-overlay"
+                style={{
+                    pointerEvents: SnappingManager.GetIsDragging() ? "all" : "none",
+                    mixBlendMode: this.allAnnotations.some(anno => anno.mixBlendMode) ? "hard-light" : undefined,
+                    transform: `scale(${this._zoomed})`
+                }}>
+                {this.overlayOpaqueAnnotations}
+                {this.overlayClickableAnnotations}
             </div>
         </div>;
     }