[#20] canvas와 svg도 scale에 따라 렌더링 되도록 수정

NaverPayDev · May 16, 2024 · 10cb2da · 10cb2da
1 parent 53bd4bd
commit 10cb2da
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/packages/react-pdf/src/components/page/Canvas.tsx b/packages/react-pdf/src/components/page/Canvas.tsx
@@ -1,11 +1,10 @@
 import {memo, useCallback} from 'react'
 
-import {usePdfPageContext} from 'src/contexts/page'
-
+import {usePdfPageContext} from '../../contexts/page'
 import {getPixelRatio} from '../../utils/pdf'
 
 export const PageCanvas = memo(function PageCanvas() {
-    const {page} = usePdfPageContext()
+    const {page, viewport: renderViewport, scale} = usePdfPageContext()
 
     const drawCanvas = useCallback(
         (canvas: HTMLCanvasElement | null) => {
@@ -19,19 +18,18 @@ export const PageCanvas = memo(function PageCanvas() {
                     return
                 }
 
-                const canvasViewport = page.getViewport({scale: 1 * getPixelRatio()})
-                const renderViewport = page.getViewport({scale: 1})
+                const canvasViewport = page.getViewport({scale: scale * getPixelRatio()})
 
                 canvas.width = canvasViewport.width
                 canvas.height = canvasViewport.height
 
-                canvas.style.width = `${Math.min(Math.floor(renderViewport.width), 568)}px`
-                canvas.style.height = 'auto'
+                canvas.style.width = `${Math.floor(renderViewport.width)}px`
+                canvas.style.height = `${Math.floor(renderViewport.height)}px`
 
                 page.render({canvasContext, viewport: canvasViewport})
             })
         },
-        [page],
+        [page, renderViewport.height, renderViewport.width, scale],
     )
 
     return <canvas ref={drawCanvas} dir="ltr" />

diff --git a/packages/react-pdf/src/components/page/Svg.tsx b/packages/react-pdf/src/components/page/Svg.tsx
@@ -1,12 +1,13 @@
-import {memo, useCallback} from 'react'
+import {memo, useCallback, useRef} from 'react'
 
 import {usePdfPageContext} from '../../contexts/page'
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 import * as pdfjs from '../../pdfjs-dist/legacy/build/pdf'
 
 export const PageSvg = memo(function PageSvg() {
-    const {page} = usePdfPageContext()
+    const preSvgElement = useRef<SVGSVGElement>()
+    const {page, scale, rotate} = usePdfPageContext()
 
     const drawSvg = useCallback(
         async (element: HTMLDivElement | null) => {
@@ -15,18 +16,21 @@ export const PageSvg = memo(function PageSvg() {
                     return
                 }
 
-                const viewport = page.getViewport({scale: 1, rotation: 0})
+                preSvgElement.current?.remove()
+
+                const viewport = page.getViewport({scale, rotation: rotate || 0})
                 const operatorList = await page.getOperatorList()
 
-                element.setAttribute('width', `${Math.min(Math.floor(viewport.width), 568)}px`)
-                element.setAttribute('height', `${viewport.height}px`)
+                element.setAttribute('width', `${Math.floor(viewport.width)}px`)
+                element.setAttribute('height', `${Math.floor(viewport.height)}px`)
 
                 const svgGfx = new pdfjs.SVGGraphics(page.commonObjs, page.objs)
                 const svg = await svgGfx.getSVG(operatorList, viewport)
+                preSvgElement.current = svg
                 element.appendChild(svg)
             })
         },
-        [page],
+        [page, rotate, scale],
     )
 
     return <div ref={drawSvg} />