From 2d70a3bc17fe94d0bf92d8362b8fda8a2e4a82e1 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Jun 2025 16:41:01 -0400
Subject: fixed rendering pdfs, text selections on pdfs,

---
 src/client/views/MarqueeAnnotator.tsx                | 16 ++++++++--------
 src/client/views/ScriptBox.tsx                       |  4 ++--
 src/client/views/nodes/PDFBox.tsx                    | 15 +++++----------
 src/client/views/nodes/WebBox.tsx                    |  8 ++++----
 src/client/views/nodes/formattedText/DashDocView.tsx |  2 +-
 src/client/views/pdf/PDFViewer.scss                  |  1 +
 src/client/views/pdf/PDFViewer.tsx                   |  8 ++++----
 7 files changed, 25 insertions(+), 29 deletions(-)

(limited to 'src')

diff --git a/src/client/views/MarqueeAnnotator.tsx b/src/client/views/MarqueeAnnotator.tsx
index d354dd2c0..7bb14c01e 100644
--- a/src/client/views/MarqueeAnnotator.tsx
+++ b/src/client/views/MarqueeAnnotator.tsx
@@ -104,16 +104,16 @@ export class MarqueeAnnotator extends ObservableReactComponent<MarqueeAnnotatorP
         const annoRects: string[] = [];
         savedAnnoMap.forEach((value: HTMLDivElement[]) =>
             value.forEach(anno => {
-                const x = parseInt(anno.style.left ?? '0');
-                const y = parseInt(anno.style.top ?? '0');
-                const height = parseInt(anno.style.height ?? '0');
-                const width = parseInt(anno.style.width ?? '0');
+                const x = parseInt(anno.style.left || '0');
+                const y = parseInt(anno.style.top || '0');
+                const height = parseInt(anno.style.height || '0');
+                const width = parseInt(anno.style.width || '0');
                 annoRects.push(`${x}:${y}:${width}:${height}`);
                 anno.remove();
-                minY = Math.min(NumCast(y), minY);
-                minX = Math.min(NumCast(x), minX);
-                maxY = Math.max(NumCast(y) + NumCast(height), maxY);
-                maxX = Math.max(NumCast(x) + NumCast(width), maxX);
+                minY = Math.min(y, minY);
+                minX = Math.min(x, minX);
+                maxY = Math.max(y + height, maxY);
+                maxX = Math.max(x + width, maxX);
             })
         );
 
diff --git a/src/client/views/ScriptBox.tsx b/src/client/views/ScriptBox.tsx
index 52c0227d8..c2fbef5a5 100644
--- a/src/client/views/ScriptBox.tsx
+++ b/src/client/views/ScriptBox.tsx
@@ -131,8 +131,8 @@ export class ScriptBox extends React.Component<ScriptBoxProps> {
                         }
 
                         const div = document.createElement('div');
-                        div.style.width = '90';
-                        div.style.height = '20';
+                        div.style.width = '90px';
+                        div.style.height = '20px';
                         div.style.background = 'gray';
                         div.style.position = 'absolute';
                         div.style.display = 'inline-block';
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 5501f0a31..4deb1f207 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -72,12 +72,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         !this.Document._layout_fitWidth && (this.Document._height = NumCast(this.Document._width) * (nh / nw));
         if (this.pdfUrl) {
             this._pdf = PDFBox.pdfcache.get(this.pdfUrl.url.href);
-            !this._pdf &&
-                PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(
-                    action(pdf => {
-                        this._pdf = pdf;
-                    })
-                );
+            !this._pdf && PDFBox.pdfpromise.get(this.pdfUrl.url.href)?.then(action(pdf => (this._pdf = pdf)));
         }
     }
 
@@ -150,8 +145,8 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this.addDocument(region);
 
         const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
-        newDiv.style.width = NumCast(this.layoutDoc._width).toString();
-        newDiv.style.height = NumCast(this.layoutDoc._height).toString();
+        newDiv.style.width = NumCast(this.layoutDoc._width).toString() + 'px';
+        newDiv.style.height = NumCast(this.layoutDoc._height).toString() + 'px';
         this.replaceCanvases(docViewContent, newDiv);
         const htmlString = this._pdfViewer?._mainCont.current && new XMLSerializer().serializeToString(newDiv);
 
@@ -409,7 +404,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.layoutDoc._show_sidebar = nativeWidth !== this.layoutDoc._nativeWidth;
         }
     });
-    settingsPanel() {
+    @computed get settingsPanel() {
         const pageBtns = (
             <>
                 <button type="button" className="pdfBox-backBtn" key="back" title="Page Back" onPointerDown={e => e.stopPropagation()} onClick={this.backPage}>
@@ -675,7 +670,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                 <div className="pdfBox-sidebarContainer" style={{ width: `calc(100 * ${this.sidebarWidth() / this._props.PanelWidth()}%` }}>
                     {this.sidebarCollection}
                 </div>
-                {this.settingsPanel()}
+                {this.settingsPanel}
             </div>
         );
     }
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index aeabc6752..24ab38fb6 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -267,10 +267,10 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
                     annoBox.className = 'marqueeAnnotator-annotationBox';
                     const scale = this._url ? 1 : this.ScreenToLocalBoxXf().Scale;
                     // transforms the positions from screen onto the pdf div
-                    annoBox.style.top = ((rect.top - mainrect.translateY) * scale + (this._url ? this._mainCont.current.scrollTop : NumCast(this.layoutDoc.layout_scrollTop))).toString();
-                    annoBox.style.left = ((rect.left - mainrect.translateX) * scale).toString();
-                    annoBox.style.width = (rect.width * scale).toString();
-                    annoBox.style.height = (rect.height * scale).toString();
+                    annoBox.style.top = ((rect.top - mainrect.translateY) * scale + (this._url ? this._mainCont.current.scrollTop : NumCast(this.layoutDoc.layout_scrollTop))).toString() + 'px';
+                    annoBox.style.left = ((rect.left - mainrect.translateX) * scale).toString() + 'px';
+                    annoBox.style.width = (rect.width * scale).toString() + 'px';
+                    annoBox.style.height = (rect.height * scale).toString() + 'px';
                     this._annotationLayer.current && MarqueeAnnotator.previewNewAnnotation(this._savedAnnotations, this._annotationLayer.current, annoBox, 1);
                 }
             }
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index e7f2cdba8..5570ff704 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -183,7 +183,7 @@ export class DashDocView {
         this.dom = document.createElement('span');
         this.dom.style.position = 'relative';
         this.dom.style.textIndent = '0';
-        this.dom.style.width = (+node.attrs.width.toString().replace('px', '') + horizPadding).toString();
+        this.dom.style.width = (+node.attrs.width.toString().replace('px', '') + horizPadding).toString() + 'px';
         this.dom.style.height = node.attrs.height;
         this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block';
         this.dom.style.float = node.attrs.float;
diff --git a/src/client/views/pdf/PDFViewer.scss b/src/client/views/pdf/PDFViewer.scss
index dafa908a2..c997ce583 100644
--- a/src/client/views/pdf/PDFViewer.scss
+++ b/src/client/views/pdf/PDFViewer.scss
@@ -55,6 +55,7 @@
         position: relative;
         border: unset;
         height: 100% !important;
+        min-height: 20px; // bcz: prevents PdfJS from the collapsing the page to 0 heright which causes the entire pdf to fail to render
     }
 
     .pdfViewerDash-text-selected {
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 97fe183dd..bb4485712 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -443,10 +443,10 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
                     const annoBox = document.createElement('div');
                     annoBox.className = 'marqueeAnnotator-annotationBox';
                     // transforms the positions from screen onto the pdf div
-                    annoBox.style.left = (((rect.left - boundingRect.left) * scaleX) / pdfScale).toString();
-                    annoBox.style.top = (((rect.top - boundingRect.top) * scaleY) / pdfScale + this._mainCont.current.scrollTop).toString();
-                    annoBox.style.width = ((rect.width * scaleX) / pdfScale).toString();
-                    annoBox.style.height = ((rect.height * scaleY) / pdfScale).toString();
+                    annoBox.style.left = (((rect.left - boundingRect.left) * scaleX) / pdfScale).toString() + 'px';
+                    annoBox.style.top = (((rect.top - boundingRect.top) * scaleY) / pdfScale + this._mainCont.current.scrollTop).toString() + 'px';
+                    annoBox.style.width = ((rect.width * scaleX) / pdfScale).toString() + 'px';
+                    annoBox.style.height = ((rect.height * scaleY) / pdfScale).toString() + 'px';
                     this._annotationLayer.current && MarqueeAnnotator.previewNewAnnotation(this._savedAnnotations, this._annotationLayer.current, annoBox, this.getPageFromScroll(rect.top));
                 }
             }
-- 
cgit v1.2.3-70-g09d2