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

[Hotfix][DEVSU-2089] SVG size in print

Author: elewis2

app/components/SvgImage/__tests__/SvgImage.test.tsx

@@ -12,7 +12,7 @@ import {
 } from './mockData';
 import SvgImage from '..';
 
-jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600}));
+jest.mock('react-virtualized-auto-sizer', () => ({ children }) => children({ height: 600, width: 600 }));
 
 describe('SvgImage', () => {
   test('It renders a normal SVG', async () => {
@@ -63,20 +63,4 @@ describe('SvgImage', () => {
 
     expect(await screen.findByTestId('mock')).toBeInTheDocument();
   });
-
-  test('It fails to render an SVG that is not formatted correctly', async () => {
-    let error;
-
-    try {
-      render(
-        <SvgImage
-          image={mockSVGFormatError}
-        />,
-      );
-    } catch (err) {
-      error = err;
-    }
-
-    expect(error).not.toBeUndefined();
-  });
 });

app/components/SvgImage/index.tsx

@@ -2,7 +2,7 @@ import React, {
   useEffect, useState, useRef, useMemo, useCallback,
 } from 'react';
 import { UncontrolledReactSVGPanZoom } from 'react-svg-pan-zoom';
-import InlineSVG from 'svg-inline-react';
+import InlineSVG from 'react-inlinesvg';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 import './index.scss';
@@ -74,7 +74,7 @@ const SvgImage = ({
               let overWidthRatio = svgWidth / MAX_PRINT_WIDTH;
               if (printOrientation === 'landscape') {
                 overHeightRatio = svgHeight / MAX_PRINT_WIDTH;
-                overWidthRatio = svgHeight / MAX_PRINT_WIDTH;
+                overWidthRatio = svgWidth / MAX_PRINT_HEIGHT;
               }
               let nextRatio = 1;
 
@@ -90,29 +90,17 @@ const SvgImage = ({
               const nextHeight = svgHeight / nextRatio;
               const nextWidth = svgWidth / nextRatio;
 
-              const svgStyle = {
-                transformOrigin: 'top left',
-                transform: printOrientation === 'landscape' ? `rotate(90deg) translate(0, -${nextHeight}px)` : '',
-              };
-
               return (
-                <div style={svgStyle}>
-                  <UncontrolledReactSVGPanZoom
-                    ref={Viewer}
-                    width={svgWidth > nextWidth ? nextWidth : svgWidth}
-                    height={svgHeight > nextHeight ? nextHeight : svgHeight}
-                    background="#FFFFFF"
-                    detectAutoPan={false}
-                    defaultTool="auto"
-                    customMiniature={() => null}
-                    customToolbar={() => null}
-                    toolbarProps={{ position: 'left' }}
-                  >
-                    <svg width={svgWidth} height={svgHeight}>
-                      <InlineSVG src={processedImage} raw />
-                    </svg>
-                  </UncontrolledReactSVGPanZoom>
-                </div>
+                <InlineSVG
+                  src={processedImage}
+                  transform={`
+                    scale(${1 / nextRatio})
+                    translate(
+                      -${(svgWidth - nextWidth) / 2 + 48}
+                      -${(svgHeight - nextHeight) / 2}
+                    )
+                  `}
+                />
               );
             }
             return (
@@ -128,11 +116,11 @@ const SvgImage = ({
                 detectAutoPan={false}
                 defaultTool="auto"
                 customMiniature={() => null}
-                customToolbar={isPrint ? () => null : undefined}
+                customToolbar={undefined}
                 toolbarProps={{ position: 'left' }}
               >
                 <svg width={svgWidth} height={svgHeight}>
-                  <InlineSVG src={processedImage} raw />
+                  <InlineSVG src={processedImage} />
                 </svg>
               </UncontrolledReactSVGPanZoom>
             );

package-lock.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "ipr-client",
-  "version": "6.22.0",
+  "version": "6.22.1",
   "keywords": [],
   "license": "GPL-3.0",
   "sideEffects": false,
@@ -127,6 +127,7 @@
     "react-chartjs-2": "~3.3.0",
     "react-dom": "~17.0.2",
     "react-hook-form": "^7.40.0",
+    "react-inlinesvg": "^4.0.5",
     "react-jss": "~10.6.0",
     "react-quill": "~2.0.0",
     "react-router-dom": "~5.1.2",