From ab5e48a2340f06628fc22d1267d081de9dbc572f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 9 Jun 2022 23:24:34 -0400
Subject: fixed up creating dashboard icons to work with pdfs in freeformviews
 with a grid.  no idea why having a grid breaks thrings.

---
 src/client/util/CurrentUserUtils.ts                |  2 +-
 src/client/views/DashboardView.tsx                 |  4 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 53 ++++++++++++++--------
 src/client/views/nodes/PDFBox.tsx                  | 44 +++++++-----------
 4 files changed, 53 insertions(+), 50 deletions(-)

(limited to 'src')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 3b1009532..9a01f3e5d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -1194,7 +1194,7 @@ export class CurrentUserUtils {
                 docView.layoutDoc[Id] + "-icon" + (new Date()).getTime(),
                 content,
                 _width, _height,
-                _width, _height, 0,
+                _width, _height, 0, 1, true, docView.layoutDoc[Id] + "-icon", 
                 (iconFile, _nativeWidth, _nativeHeight) => {
                     const img = Docs.Create.ImageDocument(new ImageField(iconFile), { title: docView.rootDoc.title+"-icon", _width, _height, _nativeWidth, _nativeHeight});
                     const proto = Cast(img.proto, Doc, null)!;
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index b08151c0f..e003968d6 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -36,9 +36,7 @@ export class DashboardView extends React.Component {
                   </div>
                   <div className="all-dashboards">
                         {myDashboards.map((dashboard) => {
-                              const url = ImageCast((dashboard.thumb as Doc)?.data)?.url;
-                              const ext = url ? extname(url.href):"";
-                              const href = url?.href.replace(ext, "_m"+ ext); // need to choose which resolution image to show.  options are _s, _m, _l, _o   (small/medium/large/original)
+                              const href = ImageCast((dashboard.thumb as Doc)?.data)?.url.href;
                               return <div className="dashboard-container" key={dashboard[Id]} onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img src={href ?? "https://media.istockphoto.com/photos/hot-air-balloons-flying-over-the-botan-canyon-in-turkey-picture-id1297349747?b=1&k=20&m=1297349747&s=170667a&w=0&h=oH31fJty_4xWl_JQ4OIQWZKP8C6ji9Mz7L4XmEnbqRU="}></img>
                                     <div className="title"> {StrCast(dashboard.title)} </div>
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index ef3a896e1..99f74b8a2 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1500,15 +1500,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         }
         if (oldDiv instanceof HTMLCanvasElement) {
-            const canvas = oldDiv;
-            const img = document.createElement('img'); // create a Image Element
-            img.src = canvas.toDataURL();   //image source
-            img.style.width = canvas.style.width;
-            img.style.height = canvas.style.height;
-            const newCan = newDiv as HTMLCanvasElement;
-            const parEle = newCan.parentElement as HTMLElement;
-            parEle.removeChild(newCan);
-            parEle.appendChild(img);
+            if (oldDiv.className === "collectionFreeFormView-grid") {
+                const newCan = newDiv as HTMLCanvasElement;
+                const parEle = newCan.parentElement as HTMLElement;
+                parEle.removeChild(newCan);
+                parEle.appendChild(document.createElement('div'))
+            } else {
+                const canvas = oldDiv;
+                const img = document.createElement('img'); // create a Image Element
+                img.src = canvas.toDataURL();   //image source
+                img.style.width = canvas.style.width;
+                img.style.height = canvas.style.height;
+                const newCan = newDiv as HTMLCanvasElement;
+                const parEle = newCan.parentElement as HTMLElement;
+                parEle.removeChild(newCan);
+                parEle.appendChild(img);
+            }
         }
     }
 
@@ -1516,15 +1523,23 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this.layoutDoc[Id] + "-icon" + (new Date()).getTime(),
         this.props.docViewPath().lastElement().ContentDiv!,
         this.layoutDoc[WidthSym](), this.layoutDoc[HeightSym](), 
-        this.props.PanelWidth(), this.props.PanelHeight(), 0, 
+        this.props.PanelWidth(), this.props.PanelHeight(), 0, 1, false, "",
         (iconFile, nativeWidth, nativeHeight) => {
-                    this.dataDoc.icon = new ImageField(iconFile);
-                    this.dataDoc["icon-nativeWidth"] = nativeWidth;
-                    this.dataDoc["icon-nativeHeight"] = nativeHeight;
+            this.dataDoc.icon = new ImageField(iconFile);
+            this.dataDoc["icon-nativeWidth"] = nativeWidth;
+            this.dataDoc["icon-nativeHeight"] = nativeHeight;
         });
 
-    public static UpdateIcon(filename:string, docViewContent:HTMLElement, width: number, height: number, 
-        panelWidth:number, panelHeight: number, scrollTop:number, cb:(iconFile:string, nativeWidth:number, nativeHeight:number) => any) {
+    public static UpdateIcon(
+        filename:string, docViewContent:HTMLElement, 
+        width: number, height: number, 
+        panelWidth:number, panelHeight: number, 
+        scrollTop:number, 
+        realNativeHeight: number,
+        noSuffix: boolean,
+        replaceRootFilename: string| undefined,
+        cb:(iconFile:string, nativeWidth:number, nativeHeight:number) => any) 
+    {
         const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
         newDiv.style.width = width.toString();
         newDiv.style.height = height.toString();
@@ -1538,10 +1553,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             htmlString,
             nativeWidth,
             nativeWidth * panelHeight / panelWidth,
-            scrollTop
+            scrollTop * panelHeight  / realNativeHeight
         ).then
             (async (data_url: any) => {
-                const returnedFilename = await VideoBox.convertDataUri(data_url, filename);
+                const returnedFilename = await VideoBox.convertDataUri(data_url, filename, noSuffix, replaceRootFilename);
                 cb(returnedFilename as string, nativeWidth, nativeHeight);
             })
             .catch(function (error: any) {
@@ -1771,7 +1786,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             isAnnotationOverlay={this.isAnnotationOverlay}>
             <div className="marqueeView-div" ref={this._marqueeRef} style={{ opacity: this.props.dontRenderDocuments ? 0 : undefined }}>
                 {this.layoutDoc._backgroundGridShow ?
-                    <CollectionFreeFormBackgroundGrid
+                    <div><CollectionFreeFormBackgroundGrid  // bcz : UGHH  don't know why, but if we don't wrap in a div, then PDF's don't render whenn taking snapshot of a dashboard and the background grid is on!!?
                         PanelWidth={this.props.PanelWidth}
                         PanelHeight={this.props.PanelHeight}
                         panX={this.panX}
@@ -1781,7 +1796,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         isAnnotationOverlay={this.isAnnotationOverlay}
                         cachedCenteringShiftX={this.cachedCenteringShiftX}
                         cachedCenteringShiftY={this.cachedCenteringShiftY}
-                    /> : (null)}
+                    /></div> : (null)}
                 <CollectionFreeFormViewPannableContents
                     isAnnotationOverlay={this.isAnnotationOverlay}
                     isAnnotationOverlayScrollable={this.props.isAnnotationOverlayScrollable}
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index f2ca6c96e..4eb07fd8d 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -26,6 +26,7 @@ import { ImageBox } from './ImageBox';
 import "./PDFBox.scss";
 import { VideoBox } from './VideoBox';
 import React = require("react");
+import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps & FieldViewProps>() {
@@ -147,34 +148,23 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
     }
 
     updateIcon = () => {
-        return; // currently we render pdf icons as text labels
+        // currently we render pdf icons as text labels
         const docViewContent = this.props.docViewPath().lastElement().ContentDiv!;
-        const newDiv = docViewContent.cloneNode(true) as HTMLDivElement;
-        newDiv.style.width = (this.layoutDoc[WidthSym]()).toString();
-        newDiv.style.height = (this.layoutDoc[HeightSym]()).toString();
-        this.replaceCanvases(docViewContent, newDiv);
-        const htmlString = this._pdfViewer?._mainCont.current && new XMLSerializer().serializeToString(newDiv);
-        const nativeWidth = this.layoutDoc[WidthSym]();
-        const nativeHeight = this.layoutDoc[HeightSym]();
-
-        CreateImage(
-            "",
-            document.styleSheets,
-            htmlString,
-            nativeWidth,
-            nativeWidth * this.props.PanelHeight() / this.props.PanelWidth(),
-            NumCast(this.layoutDoc._scrollTop) * this.props.PanelHeight() / NumCast(this.rootDoc[this.fieldKey + "-nativeHeight"])
-        ).then
-            ((data_url: any) => {
-                VideoBox.convertDataUri(data_url, this.layoutDoc[Id] + "-icon" + (new Date()).getTime(), true, this.layoutDoc[Id] + "-icon").then(
-                    returnedfilename => setTimeout(action(() => {
-                        this.dataDoc.icon = new ImageField(returnedfilename);
-                        this.dataDoc["icon-nativeWidth"] = nativeWidth;
-                        this.dataDoc["icon-nativeHeight"] = nativeHeight;
-                    }), 500));
-            })
-            .catch(function (error: any) {
-                console.error('oops, something went wrong!', error);
+        const filename = this.layoutDoc[Id] + "-icon" + (new Date()).getTime();
+        this._pdfViewer?._mainCont.current && CollectionFreeFormView.UpdateIcon(
+            filename, docViewContent, 
+            this.layoutDoc[WidthSym](), this.layoutDoc[HeightSym](), 
+            this.props.PanelWidth(), this.props.PanelHeight(),  
+            NumCast(this.layoutDoc._scrollTop),
+            NumCast(this.rootDoc[this.fieldKey + "-nativeHeight"], 1), 
+            true,  
+            this.layoutDoc[Id] + "-icon",
+            (iconFile:string, nativeWidth:number, nativeHeight:number) => {
+                setTimeout(() => {
+                    this.dataDoc.icon = new ImageField(iconFile);
+                    this.dataDoc["icon-nativeWidth"] = nativeWidth;
+                    this.dataDoc["icon-nativeHeight"] = nativeHeight;
+                }, 500);
             });
     }
 
-- 
cgit v1.2.3-70-g09d2