fixed issues with pdf loading and layout.

2 files changed, 34 insertions, 2 deletions

diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss
index 2917c81cb..3f5f47e05 100644
--- a/src/client/views/nodes/PDFBox.scss
+++ b/src/client/views/nodes/PDFBox.scss
@@ -9,6 +9,37 @@
     z-index: -1;
 }
 
+.pdfBox-title-outer {
+    
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: lightslategray;
+    .pdfBox-title-cont {
+        width: 150%;
+        height: 100%;
+        position: relative;
+        display: grid;
+        
+        .pdfBox-title {
+            color:lightgray;
+            margin-top: auto;
+            margin-bottom: auto;
+            transform-origin: 42% -18%;
+            width: 100%;
+            transform: rotate(55deg);
+            font-size: 144;
+            padding: 5%;
+            overflow: hidden;
+            display: inline-block;
+            white-space: pre;
+            text-overflow: ellipsis;
+            text-align: center;
+        }
+    }
+}
+
+
 .pdfBox-cont {
     pointer-events: none;
     .collectionFreeFormView-none {
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index fe71e76fd..3014af944 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -180,8 +180,9 @@ export class PDFBox extends DocComponent<FieldViewProps, PdfDocument>(PdfDocumen
     render() {
         const pdfUrl = Cast(this.dataDoc[this.props.fieldKey], PdfField);
         let classname = "pdfBox-cont" + (InkingControl.Instance.selectedTool || !this.active ? "" : "-interactive");
-        return (!(pdfUrl instanceof PdfField) || !this._pdf ?
-            <div>{`pdf, ${this.dataDoc[this.props.fieldKey]}, not found`}</div> :
+        return (!(pdfUrl instanceof PdfField) || !this._pdf || this.props.ScreenToLocalTransform().Scale > 6 ?
+            <div className="pdfBox-title-outer"><div className="pdfBox-title-cont" >
+                <strong className="pdfBox-title" >{` ${this.props.Document.title}`}</strong> </div></div> :
             <div className={classname} onContextMenu={this.specificContextMenu} onPointerDown={(e: React.PointerEvent) => {
                 let hit = document.elementFromPoint(e.clientX, e.clientY);
                 if (hit && hit.localName === "span" && this.props.isSelected()) {  // drag selecting text stops propagation