diff --git a/src/Page.jsx b/src/Page.jsx index 8424469a8..7a665d4b0 100644 --- a/src/Page.jsx +++ b/src/Page.jsx @@ -6,6 +6,7 @@ import mergeClassNames from 'merge-class-names'; import mergeRefs from 'merge-refs'; import invariant from 'tiny-invariant'; import warning from 'tiny-warning'; +import { AnnotationMode } from 'pdfjs-dist/legacy/build/pdf'; import DocumentContext from './DocumentContext'; import PageContext from './PageContext'; @@ -75,6 +76,7 @@ export class PageInternal extends PureComponent { } const { + annotationMode, canvasBackground, customTextRenderer, onGetAnnotationsError, @@ -90,6 +92,7 @@ export class PageInternal extends PureComponent { } = this.props; return { + annotationMode, canvasBackground, customTextRenderer, onGetAnnotationsError, @@ -355,11 +358,11 @@ export class PageInternal extends PureComponent { } PageInternal.defaultProps = { + annotationMode: AnnotationMode.ENABLE, error: 'Failed to load the page.', loading: 'Loading pageā€¦', noData: 'No page specified.', renderAnnotationLayer: true, - renderForms: false, renderMode: 'canvas', renderTextLayer: true, scale: defaultScale, @@ -369,6 +372,7 @@ const isFunctionOrNode = PropTypes.oneOfType([PropTypes.func, PropTypes.node]); PageInternal.propTypes = { ...eventProps, + annotationMode: PropTypes.number, canvasBackground: PropTypes.string, children: PropTypes.node, className: isClassName, diff --git a/src/Page/AnnotationLayer.jsx b/src/Page/AnnotationLayer.jsx index 9e56aa43d..1a512535c 100644 --- a/src/Page/AnnotationLayer.jsx +++ b/src/Page/AnnotationLayer.jsx @@ -26,9 +26,13 @@ export class AnnotationLayerInternal extends PureComponent { } componentDidUpdate(prevProps) { - const { page, renderForms } = this.props; + const { annotationMode, page, renderForms } = this.props; - if ((prevProps.page && page !== prevProps.page) || renderForms !== prevProps.renderForms) { + if ( + (prevProps.page && page !== prevProps.page) || + annotationMode !== prevProps.annotationMode || + renderForms !== prevProps.renderForms + ) { this.loadAnnotations(); } } @@ -96,7 +100,7 @@ export class AnnotationLayerInternal extends PureComponent { return; } - const { imageResourcesPath, linkService, page, renderForms } = this.props; + const { annotationMode, imageResourcesPath, linkService, page, renderForms } = this.props; const viewport = this.viewport.clone({ dontFlip: true }); @@ -106,7 +110,10 @@ export class AnnotationLayerInternal extends PureComponent { imageResourcesPath, linkService, page, - renderForms, + renderForms: + annotationMode !== null && annotationMode !== undefined + ? annotationMode === pdfjs.AnnotationMode.ENABLE_FORMS + : renderForms, viewport, }; @@ -135,6 +142,7 @@ export class AnnotationLayerInternal extends PureComponent { } AnnotationLayerInternal.propTypes = { + annotationMode: PropTypes.number, imageResourcesPath: PropTypes.string, linkService: isLinkService.isRequired, onGetAnnotationsError: PropTypes.func, diff --git a/src/Page/PageCanvas.jsx b/src/Page/PageCanvas.jsx index 906f39ed1..f256bd6b6 100644 --- a/src/Page/PageCanvas.jsx +++ b/src/Page/PageCanvas.jsx @@ -18,8 +18,12 @@ export class PageCanvasInternal extends PureComponent { } componentDidUpdate(prevProps) { - const { canvasBackground, page, renderForms } = this.props; - if (canvasBackground !== prevProps.canvasBackground || renderForms !== prevProps.renderForms) { + const { annotationMode, canvasBackground, page, renderForms } = this.props; + if ( + annotationMode !== prevProps.annotationMode || + canvasBackground !== prevProps.canvasBackground || + renderForms !== prevProps.renderForms + ) { // Ensures the canvas will be re-rendered from scratch. Otherwise all form data will stay. page.cleanup(); this.drawPageOnCanvas(); @@ -95,7 +99,7 @@ export class PageCanvasInternal extends PureComponent { } const { renderViewport, viewport } = this; - const { canvasBackground, page, renderForms } = this.props; + const { annotationMode, canvasBackground, page, renderForms } = this.props; canvas.width = renderViewport.width; canvas.height = renderViewport.height; @@ -104,7 +108,8 @@ export class PageCanvasInternal extends PureComponent { canvas.style.height = `${Math.floor(viewport.height)}px`; const renderContext = { - annotationMode: renderForms ? ANNOTATION_MODE.ENABLE_FORMS : ANNOTATION_MODE.ENABLE, + annotationMode: + annotationMode ?? (renderForms ? ANNOTATION_MODE.ENABLE_FORMS : ANNOTATION_MODE.ENABLE), get canvasContext() { return canvas.getContext('2d'); }, @@ -142,6 +147,7 @@ export class PageCanvasInternal extends PureComponent { } PageCanvasInternal.propTypes = { + annotationMode: PropTypes.number, canvasBackground: PropTypes.string, canvasRef: isRef, onRenderError: PropTypes.func, diff --git a/test/LayerOptions.jsx b/test/LayerOptions.jsx index 6e4cef178..373e5748f 100644 --- a/test/LayerOptions.jsx +++ b/test/LayerOptions.jsx @@ -1,14 +1,23 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { AnnotationMode } from 'pdfjs-dist/legacy/build/pdf'; export default function LayerOptions({ + annotationMode, renderAnnotationLayer, renderForms, renderTextLayer, + setAnnotationMode, setRenderAnnotationLayer, setRenderForms, setRenderTextLayer, }) { + function onAnnotationModeChange(event) { + const { value } = event.target; + + setAnnotationMode(value.length > 0 ? Number(value) : null); + } + function onRenderAnnotationLayerChange(event) { setRenderAnnotationLayer(event.target.checked); } @@ -55,14 +64,28 @@ export default function LayerOptions({ /> + +
+ + +
); } LayerOptions.propTypes = { + annotationMode: PropTypes.number, renderAnnotationLayer: PropTypes.bool, renderForms: PropTypes.bool, renderTextLayer: PropTypes.bool, + setAnnotationMode: PropTypes.func.isRequired, setRenderAnnotationLayer: PropTypes.func.isRequired, setRenderForms: PropTypes.func.isRequired, setRenderTextLayer: PropTypes.func.isRequired, diff --git a/test/Test.jsx b/test/Test.jsx index 04fe161e4..a6777b079 100644 --- a/test/Test.jsx +++ b/test/Test.jsx @@ -48,6 +48,7 @@ export const readAsDataURL = (file) => /* eslint-disable no-console */ export default function Test() { + const [annotationMode, setAnnotationMode] = useState(null); const [canvasBackground, setCanvasBackground] = useState(null); const [displayAll, setDisplayAll] = useState(false); const [externalLinkTarget, setExternalLinkTarget] = useState(null); @@ -171,6 +172,7 @@ export default function Test() { function getPageProps() { return { + annotationMode, canvasBackground, className: 'custom-classname-page', height: pageHeight, @@ -217,9 +219,11 @@ export default function Test() {