Add ability to disable annotations including canvas appearance-data (wojtekmaj#963)

Author: yuliya-ivaniukovich

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,

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,

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,

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({
         />
         <label htmlFor="renderForms">Render forms</label>
       </div>
+
+      <div>
+        <label htmlFor="annotationMode">Annotation mode</label>
+        <select id="annotationMode" value={annotationMode ?? ''} onChange={onAnnotationModeChange}>
+          <option value="">Unset</option>
+          {Object.entries(AnnotationMode).map(([name, value]) => (
+            <option key={name} value={value}>
+              {name}
+            </option>
+          ))}
+        </select>
+      </div>
     </fieldset>
   );
 }
 
 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,

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() {
           <LoadingOptions file={file} setFile={setFile} setRender={setRender} />
           <PassingOptions file={file} passMethod={passMethod} setPassMethod={setPassMethod} />
           <LayerOptions
+            annotationMode={annotationMode}
             renderAnnotationLayer={renderAnnotationLayer}
             renderForms={renderForms}
             renderTextLayer={renderTextLayer}
+            setAnnotationMode={setAnnotationMode}
             setRenderAnnotationLayer={setRenderAnnotationLayer}
             setRenderForms={setRenderForms}
             setRenderTextLayer={setRenderTextLayer}