Merge pull request #359 from bcgsc/bugfix/DEVSU-2089-image-size

[DEVSU-2089] image size
bcgsc · Oct 12, 2023 · 5410b80 · 5410b80
2 parents a9536e3 + 5e4f29d
commit 5410b80
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 38 deletions.
diff --git a/app/components/SvgImage/index.tsx b/app/components/SvgImage/index.tsx
@@ -10,14 +10,14 @@ import './index.scss';
 type SvgImageProps = {
   image: string;
   isPrint?: boolean;
-  printOrientation?: 'portrait' | 'landscape';
+  printOrientation?: 'portrait' | 'landscape' | 'auto';
 };
 
 // These should be same as index.css under @page
 // Accounts for padding via magical numbers 32 and 16
 const INCH_TO_PX = 96;
 const MAX_PRINT_WIDTH = Math.floor((9 - 0.4 * 2) * INCH_TO_PX) - 32;
-const MAX_PRINT_HEIGHT = Math.floor((11.5 - 0.4 * 2) * INCH_TO_PX) - 16;
+const MAX_PRINT_HEIGHT = Math.floor((11.5 - 0.4 * 2) * INCH_TO_PX) - 64;
 
 const PRINT_WIDTH = 816;
 const ICON_WIDTH = 48;
@@ -70,35 +70,57 @@ const SvgImage = ({
         <AutoSizer disableHeight onResize={handleFit}>
           {({ width = PRINT_WIDTH }) => {
             if (isPrint) {
-              let overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
-              let overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
-              if (printOrientation === 'landscape') {
-                overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
-                overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
+              let overHeightRatio;
+              let overWidthRatio;
+
+              switch (printOrientation) {
+                case 'landscape':
+                  overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
+                  overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
+                  break;
+                case 'auto':
+                  if (svgWidth > svgHeight) {
+                    overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
+                    overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
+                  } else {
+                    overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
+                    overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
+                  }
+                  break;
+                default:
+                  // portrait
+                  overHeightRatio = svgHeight / MAX_PRINT_HEIGHT;
+                  overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
+                  break;
               }
+
               let nextRatio = 1;
 
               if (overHeightRatio > 1 && overWidthRatio > 1) {
-              // Both over, find higher ratio
+                // Both over, find higher ratio
                 nextRatio = Math.max(overHeightRatio, overWidthRatio);
               } else if (overHeightRatio > 1) {
                 nextRatio = overHeightRatio;
               } else if (overWidthRatio > 1) {
                 nextRatio = overWidthRatio;
               }
 
-              const nextHeight = svgHeight / nextRatio;
-              const nextWidth = svgWidth / nextRatio;
+              let transformCss = '';
+
+              if (
+                printOrientation === 'landscape'
+                || (printOrientation === 'auto' && svgWidth > svgHeight)
+              ) {
+                transformCss = `rotate(90) translate(0 -${svgHeight * nextRatio})`;
+              }
 
               return (
                 <InlineSVG
                   src={processedImage}
+                  transform-origin="top left"
                   transform={`
                     scale(${1 / nextRatio})
-                    translate(
-                      -${(svgWidth - nextWidth) / 2 + 48}
-                      -${(svgHeight - nextHeight) / 2}
-                    )
+                    ${transformCss}
                   `}
                 />
               );

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -134,7 +134,6 @@
     "react-svg-pan-zoom": "~3.8.1",
     "react-virtualized-auto-sizer": "~1.0.20",
     "sanitize-html": "~2.11.0",
-    "svg-inline-react": "~3.2.1",
     "svg-pan-zoom": "~3.6.1",
     "use-debounce": "^9.0.4",
     "webpack": "^5.88.2",