Skip to content

Commit

Permalink
Add ability to disable annotations including canvas appearance-data (w…
Browse files Browse the repository at this point in the history
  • Loading branch information
yuliya-ivaniukovich committed Mar 18, 2022
1 parent f77fe4e commit d636845
Show file tree
Hide file tree
Showing 6 changed files with 54 additions and 9 deletions.
6 changes: 5 additions & 1 deletion src/Page.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -75,6 +76,7 @@ export class PageInternal extends PureComponent {
}

const {
annotationMode,
canvasBackground,
customTextRenderer,
onGetAnnotationsError,
Expand All @@ -90,6 +92,7 @@ export class PageInternal extends PureComponent {
} = this.props;

return {
annotationMode,
canvasBackground,
customTextRenderer,
onGetAnnotationsError,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand Down
16 changes: 12 additions & 4 deletions src/Page/AnnotationLayer.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
}
Expand Down Expand Up @@ -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 });

Expand All @@ -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,
};

Expand Down Expand Up @@ -135,6 +142,7 @@ export class AnnotationLayerInternal extends PureComponent {
}

AnnotationLayerInternal.propTypes = {
annotationMode: PropTypes.number,
imageResourcesPath: PropTypes.string,
linkService: isLinkService.isRequired,
onGetAnnotationsError: PropTypes.func,
Expand Down
14 changes: 10 additions & 4 deletions src/Page/PageCanvas.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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;
Expand All @@ -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');
},
Expand Down Expand Up @@ -142,6 +147,7 @@ export class PageCanvasInternal extends PureComponent {
}

PageCanvasInternal.propTypes = {
annotationMode: PropTypes.number,
canvasBackground: PropTypes.string,
canvasRef: isRef,
onRenderError: PropTypes.func,
Expand Down
23 changes: 23 additions & 0 deletions test/LayerOptions.jsx
Original file line number Diff line number Diff line change
@@ -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);
}
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions test/Test.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -171,6 +172,7 @@ export default function Test() {

function getPageProps() {
return {
annotationMode,
canvasBackground,
className: 'custom-classname-page',
height: pageHeight,
Expand Down Expand Up @@ -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}
Expand Down
Binary file modified test/test.pdf
Binary file not shown.

0 comments on commit d636845

Please sign in to comment.