1+ import {
2+ FabricJSCanvas ,
3+ FabricJSEditor ,
4+ useFabricJSEditor ,
5+ } from 'fabricjs-react' ;
16import { GlobalWorkerOptions } from 'pdfjs-dist' ;
27import { PDFDocumentProxy } from 'pdfjs-dist/types/display/api' ;
38import { PageViewport } from 'pdfjs-dist/types/display/display_utils' ;
@@ -9,8 +14,6 @@ import {
914 useRef ,
1015 useState ,
1116} from 'react' ;
12- import { useSvgDrawing } from 'react-hooks-svgdrawing' ;
13- import { DrawingOption , SvgDrawing } from 'svg-drawing' ;
1417import workerContent from '../pdfjs.worker.min.json' ;
1518
1619const workerBlob = new Blob ( [ workerContent ] , { type : 'text/javascript' } ) ;
@@ -23,37 +26,14 @@ interface Props {
2326 scale ?: number ;
2427}
2528
26- export interface UseSvgDrawing {
27- instance : SvgDrawing | null ;
28- clear : ( ) => void ;
29- undo : ( ) => void ;
30- changePenColor : ( penColor : DrawingOption [ 'penColor' ] ) => void ;
31- changePenWidth : ( penwidth : DrawingOption [ 'penWidth' ] ) => void ;
32- changeFill : ( penColor : DrawingOption [ 'fill' ] ) => void ;
33- changeClose : ( penwidth : DrawingOption [ 'close' ] ) => void ;
34- changeDelay : ( penColor : DrawingOption [ 'delay' ] ) => void ;
35- changeCurve : ( penwidth : DrawingOption [ 'curve' ] ) => void ;
36- getSvgXML : ( ) => string | null ;
37- download : ( ext : 'svg' | 'png' | 'jpg' ) => void ;
38- }
39-
40- const DrawablePagePreview = forwardRef < UseSvgDrawing , Props > ( function (
29+ const FabricPagePreview = forwardRef < FabricJSEditor , Props > ( function (
4130 { pdf, pageNumber, scale } : Props ,
4231 ref
4332) : JSX . Element {
4433 const canvasRef = useRef < HTMLCanvasElement > ( null ) ;
4534 const [ viewport , setViewport ] = useState < PageViewport > ( ) ;
46- // const drawingDivRef = useRef<HTMLDivElement>(null);
47- const [ renderRef , draw ] = useSvgDrawing ( {
48- penWidth : 2 , // pen width
49- penColor : '#000' , // pen color
50- close : false , // Use close command for path. Default is false.
51- curve : true , // Use curve command for path. Default is true.
52- delay : 60 , // Set how many ms to draw points every.
53- fill : 'none' , // Set fill attribute for path. default is `none`
54- } ) ;
55-
56- useImperativeHandle ( ref , ( ) => draw ) ;
35+ const { editor, onReady } = useFabricJSEditor ( ) ;
36+ useImperativeHandle ( ref , ( ) => editor ! ) ;
5737
5838 const load = useCallback ( async ( ) => {
5939 const page = await pdf . getPage ( pageNumber ) ;
@@ -86,16 +66,18 @@ const DrawablePagePreview = forwardRef<UseSvgDrawing, Props>(function (
8666 height = { viewport ?. height }
8767 > </ canvas >
8868 { /* Drawing Canvas */ }
89- < div
90- className = "absolute top-0 right-0 left-0 bottom-0"
91- ref = { renderRef }
92- style = { {
93- width : viewport ?. width ,
94- height : viewport ?. height ,
95- } }
96- > </ div >
69+ { viewport && (
70+ < FabricJSCanvas
71+ className = "absolute top-0 right-0 left-0 bottom-0"
72+ onReady = { ( canvas ) => {
73+ canvas . width = viewport ! . width ;
74+ canvas . height = viewport ! . height ;
75+ onReady ( canvas ) ;
76+ } }
77+ />
78+ ) }
9779 </ div >
9880 ) ;
9981} ) ;
10082
101- export default DrawablePagePreview ;
83+ export default FabricPagePreview ;
0 commit comments