fixed up creating dashboard icons to work with pdfs in freeformviews with a grid. no idea why having a grid breaks thrings.

1 files changed, 34 insertions, 19 deletions

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}