mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-14 10:34:06 +02:00
895 lines
37 KiB
TypeScript
895 lines
37 KiB
TypeScript
import React, { useEffect, useMemo, useState } from 'react';
|
||
import { createPluginRegistration } from '@embedpdf/core';
|
||
import type { PluginRegistry } from '@embedpdf/core';
|
||
import { EmbedPDF } from '@embedpdf/core/react';
|
||
import { usePdfiumEngine } from '@embedpdf/engines/react';
|
||
import { PrivateContent } from '@app/components/shared/PrivateContent';
|
||
import { useAppConfig } from '@app/contexts/AppConfigContext';
|
||
|
||
// Import the essential plugins
|
||
import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
|
||
import { Scroller, ScrollPluginPackage } from '@embedpdf/plugin-scroll/react';
|
||
import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/react';
|
||
import { RenderPluginPackage } from '@embedpdf/plugin-render/react';
|
||
import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
|
||
import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/react';
|
||
import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
|
||
import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
|
||
import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
|
||
import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
|
||
import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
|
||
import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
|
||
import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
|
||
import { ExportPluginPackage } from '@embedpdf/plugin-export/react';
|
||
import { BookmarkPluginPackage } from '@embedpdf/plugin-bookmark/react';
|
||
import { AttachmentPluginPackage } from '@embedpdf/plugin-attachment/react';
|
||
import { PrintPluginPackage } from '@embedpdf/plugin-print/react';
|
||
import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
|
||
import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react';
|
||
import type { AnnotationTool, AnnotationEvent } from '@embedpdf/plugin-annotation';
|
||
import { PdfAnnotationSubtype } from '@embedpdf/models';
|
||
import type { PdfAnnotationObject, Rect } from '@embedpdf/models';
|
||
import { RedactionPluginPackage, RedactionLayer } from '@embedpdf/plugin-redaction/react';
|
||
import { CustomSearchLayer } from '@app/components/viewer/CustomSearchLayer';
|
||
import { ZoomAPIBridge } from '@app/components/viewer/ZoomAPIBridge';
|
||
import ToolLoadingFallback from '@app/components/tools/ToolLoadingFallback';
|
||
import { Center, Stack, Text } from '@mantine/core';
|
||
import { ScrollAPIBridge } from '@app/components/viewer/ScrollAPIBridge';
|
||
import { SelectionAPIBridge } from '@app/components/viewer/SelectionAPIBridge';
|
||
import { PanAPIBridge } from '@app/components/viewer/PanAPIBridge';
|
||
import { SpreadAPIBridge } from '@app/components/viewer/SpreadAPIBridge';
|
||
import { SearchAPIBridge } from '@app/components/viewer/SearchAPIBridge';
|
||
import { ThumbnailAPIBridge } from '@app/components/viewer/ThumbnailAPIBridge';
|
||
import { RotateAPIBridge } from '@app/components/viewer/RotateAPIBridge';
|
||
import { SignatureAPIBridge } from '@app/components/viewer/SignatureAPIBridge';
|
||
import { AnnotationAPIBridge } from '@app/components/viewer/AnnotationAPIBridge';
|
||
import { HistoryAPIBridge } from '@app/components/viewer/HistoryAPIBridge';
|
||
import type { SignatureAPI, AnnotationAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
|
||
import { ExportAPIBridge } from '@app/components/viewer/ExportAPIBridge';
|
||
import { BookmarkAPIBridge } from '@app/components/viewer/BookmarkAPIBridge';
|
||
import { AttachmentAPIBridge } from '@app/components/viewer/AttachmentAPIBridge';
|
||
import { PrintAPIBridge } from '@app/components/viewer/PrintAPIBridge';
|
||
import { isPdfFile } from '@app/utils/fileUtils';
|
||
import { useTranslation } from 'react-i18next';
|
||
import { LinkLayer } from '@app/components/viewer/LinkLayer';
|
||
import { TextSelectionHandler } from '@app/components/viewer/TextSelectionHandler';
|
||
import { RedactionSelectionMenu } from '@app/components/viewer/RedactionSelectionMenu';
|
||
import { AnnotationSelectionMenu } from '@app/components/viewer/AnnotationSelectionMenu';
|
||
import { RedactionPendingTracker, RedactionPendingTrackerAPI } from '@app/components/viewer/RedactionPendingTracker';
|
||
import { RedactionAPIBridge } from '@app/components/viewer/RedactionAPIBridge';
|
||
import { DocumentPermissionsAPIBridge } from '@app/components/viewer/DocumentPermissionsAPIBridge';
|
||
import { DocumentReadyWrapper } from '@app/components/viewer/DocumentReadyWrapper';
|
||
import { ActiveDocumentProvider } from '@app/components/viewer/ActiveDocumentContext';
|
||
import { absoluteWithBasePath } from '@app/constants/app';
|
||
import { FormFieldOverlay } from '@app/tools/formFill/FormFieldOverlay';
|
||
import { ButtonAppearanceOverlay } from '@app/tools/formFill/ButtonAppearanceOverlay';
|
||
import SignatureFieldOverlay from '@app/components/viewer/SignatureFieldOverlay';
|
||
import { CommentsSidebar } from '@app/components/viewer/CommentsSidebar';
|
||
import { CommentAuthorProvider } from '@app/contexts/CommentAuthorContext';
|
||
import { accountService } from '@app/services/accountService';
|
||
|
||
interface LocalEmbedPDFProps {
|
||
file?: File | Blob;
|
||
url?: string | null;
|
||
fileName?: string;
|
||
enableAnnotations?: boolean;
|
||
enableRedaction?: boolean;
|
||
enableFormFill?: boolean;
|
||
isManualRedactionMode?: boolean;
|
||
showBakedAnnotations?: boolean;
|
||
onSignatureAdded?: (annotation: PdfAnnotationObject) => void;
|
||
signatureApiRef?: React.RefObject<SignatureAPI>;
|
||
annotationApiRef?: React.RefObject<AnnotationAPI>;
|
||
historyApiRef?: React.RefObject<HistoryAPI>;
|
||
redactionTrackerRef?: React.RefObject<RedactionPendingTrackerAPI>;
|
||
/** File identity passed through to FormFieldOverlay for stale-field guards */
|
||
fileId?: string | null;
|
||
/** Comments sidebar visibility and offset (from EmbedPdfViewer) */
|
||
isCommentsSidebarVisible?: boolean;
|
||
commentsSidebarRightOffset?: string;
|
||
/** When true, blocks the general ink/pen annotation tool (sign tool context). */
|
||
isSignMode?: boolean;
|
||
/** Controls CSS filter applied only to rendered PDF canvas tiles */
|
||
pdfRenderMode?: 'normal' | 'dark' | 'sepia';
|
||
}
|
||
|
||
export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false, enableRedaction = false, enableFormFill = false, isManualRedactionMode = false, showBakedAnnotations = true, onSignatureAdded, signatureApiRef, annotationApiRef, historyApiRef, redactionTrackerRef, fileId, isCommentsSidebarVisible = false, commentsSidebarRightOffset = '0rem', isSignMode = false, pdfRenderMode = 'normal' }: LocalEmbedPDFProps) {
|
||
const { t } = useTranslation();
|
||
const { config } = useAppConfig();
|
||
const [pdfUrl, setPdfUrl] = useState<string | null>(null);
|
||
const [, setAnnotations] = useState<Array<{id: string, pageIndex: number, rect: Rect}>>([]);
|
||
const [commentAuthorName, setCommentAuthorName] = useState<string>('Guest');
|
||
|
||
useEffect(() => {
|
||
if (!config?.enableLogin) return;
|
||
accountService.getAccountData().then((data) => {
|
||
if (data?.username) setCommentAuthorName(data.username);
|
||
}).catch(() => {/* not logged in or security disabled */});
|
||
}, [config?.enableLogin]);
|
||
|
||
// Convert File to URL if needed
|
||
useEffect(() => {
|
||
if (file) {
|
||
const objectUrl = URL.createObjectURL(file);
|
||
setPdfUrl(objectUrl);
|
||
return () => URL.revokeObjectURL(objectUrl);
|
||
} else if (url) {
|
||
setPdfUrl(url);
|
||
}
|
||
}, [file, url]);
|
||
|
||
// Create plugins configuration
|
||
const plugins = useMemo(() => {
|
||
if (!pdfUrl) return [];
|
||
|
||
// Calculate 3.5rem in pixels dynamically based on root font size
|
||
const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
|
||
const viewportGap = rootFontSize * 3.5;
|
||
|
||
// Determine export filename - use provided fileName, or extract from file/url
|
||
let exportFileName = 'document.pdf';
|
||
if (fileName) {
|
||
exportFileName = fileName;
|
||
} else if (file && 'name' in file) {
|
||
exportFileName = file.name;
|
||
} else if (url) {
|
||
const urlPath = url.split('/').pop() || 'document.pdf';
|
||
exportFileName = urlPath.split('?')[0]; // Remove query params
|
||
}
|
||
|
||
return [
|
||
createPluginRegistration(DocumentManagerPluginPackage, {
|
||
initialDocuments: [{
|
||
url: pdfUrl,
|
||
name: exportFileName,
|
||
}],
|
||
}),
|
||
createPluginRegistration(ViewportPluginPackage, {
|
||
viewportGap,
|
||
}),
|
||
createPluginRegistration(ScrollPluginPackage),
|
||
createPluginRegistration(RenderPluginPackage, {
|
||
withForms: !enableFormFill,
|
||
withAnnotations: !enableAnnotations, // Show baked annotations only when annotation layer is OFF; live layer visibility is controlled via CSS
|
||
}),
|
||
|
||
// Register interaction manager (required for zoom and selection features)
|
||
createPluginRegistration(InteractionManagerPluginPackage),
|
||
|
||
// Register selection plugin (depends on InteractionManager)
|
||
createPluginRegistration(SelectionPluginPackage, {
|
||
marquee: { enabled: false },
|
||
toleranceFactor: 3,
|
||
}),
|
||
|
||
// Register history plugin for undo/redo (recommended for annotations)
|
||
// Always register for reading existing annotations
|
||
createPluginRegistration(HistoryPluginPackage),
|
||
|
||
// Register annotation plugin (depends on InteractionManager, Selection, History)
|
||
// Always register for reading existing annotations like links
|
||
createPluginRegistration(AnnotationPluginPackage, {
|
||
annotationAuthor: 'Digital Signature',
|
||
autoCommit: true,
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
}),
|
||
|
||
// Register redaction plugin (depends on InteractionManager, Selection, History)
|
||
// Always register for redaction functionality
|
||
createPluginRegistration(RedactionPluginPackage, {
|
||
useAnnotationMode: true,
|
||
drawBlackBoxes: false,
|
||
}),
|
||
|
||
// Register pan plugin (depends on Viewport, InteractionManager)
|
||
createPluginRegistration(PanPluginPackage, {
|
||
defaultMode: 'mobile', // Try mobile mode which might be more permissive
|
||
}),
|
||
// Register pan plugin (depends on Viewport, InteractionManager) - keep disabled to prevent drag panning
|
||
createPluginRegistration(PanPluginPackage, {}),
|
||
|
||
// Register zoom plugin with configuration
|
||
createPluginRegistration(ZoomPluginPackage, {
|
||
defaultZoomLevel: ZoomMode.FitWidth, // Start with FitWidth, will be adjusted in ZoomAPIBridge
|
||
minZoom: 0.2,
|
||
maxZoom: 5.0,
|
||
}),
|
||
|
||
// Register tiling plugin (depends on Render, Scroll, Viewport)
|
||
createPluginRegistration(TilingPluginPackage, {
|
||
tileSize: 768,
|
||
overlapPx: 5,
|
||
extraRings: 1,
|
||
}),
|
||
|
||
// Register spread plugin for dual page layout
|
||
createPluginRegistration(SpreadPluginPackage, {
|
||
defaultSpreadMode: SpreadMode.None, // Start with single page view
|
||
}),
|
||
|
||
// Register search plugin for text search
|
||
createPluginRegistration(SearchPluginPackage),
|
||
|
||
// Register thumbnail plugin for page thumbnails
|
||
createPluginRegistration(ThumbnailPluginPackage),
|
||
|
||
// Register bookmark plugin for PDF outline support
|
||
createPluginRegistration(BookmarkPluginPackage),
|
||
|
||
// Register attachment plugin for PDF attachments support
|
||
createPluginRegistration(AttachmentPluginPackage),
|
||
|
||
// Register rotate plugin
|
||
createPluginRegistration(RotatePluginPackage),
|
||
|
||
// Register export plugin for downloading PDFs
|
||
createPluginRegistration(ExportPluginPackage, {
|
||
defaultFileName: exportFileName,
|
||
}),
|
||
|
||
// Register print plugin for printing PDFs
|
||
createPluginRegistration(PrintPluginPackage),
|
||
];
|
||
}, [pdfUrl, enableAnnotations, fileName, file, url]);
|
||
|
||
// Initialize the engine with the React hook - use local WASM for offline support
|
||
const { engine, isLoading, error } = usePdfiumEngine({
|
||
wasmUrl: absoluteWithBasePath('/pdfium/pdfium.wasm'),
|
||
});
|
||
|
||
|
||
// Early return if no file or URL provided
|
||
if (!file && !url) {
|
||
return (
|
||
<Center h="100%" w="100%">
|
||
<Stack align="center" gap="md">
|
||
<div style={{ fontSize: '24px' }}>📄</div>
|
||
<Text c="dimmed" size="sm">
|
||
No PDF provided
|
||
</Text>
|
||
</Stack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
// Check if the file is actually a PDF
|
||
if (file && !isPdfFile(file)) {
|
||
const fileName = 'name' in file ? file.name : t('viewer.unknownFile');
|
||
return (
|
||
<Center h="100%" w="100%">
|
||
<Stack align="center" gap="md">
|
||
<div style={{ fontSize: '48px' }}>📄</div>
|
||
<Text size="lg" fw={600} c="dimmed">
|
||
{t('viewer.cannotPreviewFile')}
|
||
</Text>
|
||
<Text c="dimmed" size="sm" style={{ textAlign: 'center', maxWidth: '400px' }}>
|
||
{t('viewer.onlyPdfSupported')}
|
||
</Text>
|
||
<PrivateContent>
|
||
<Text c="dimmed" size="xs" style={{ fontFamily: 'monospace' }}>
|
||
{fileName}
|
||
</Text>
|
||
</PrivateContent>
|
||
</Stack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
if (isLoading || !engine || !pdfUrl) {
|
||
return <ToolLoadingFallback toolName="PDF Engine" />;
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<Center h="100%" w="100%">
|
||
<Stack align="center" gap="md">
|
||
<div style={{ fontSize: '24px' }}>❌</div>
|
||
<Text c="red" size="sm" style={{ textAlign: 'center' }}>
|
||
Error loading PDF engine: {error.message}
|
||
</Text>
|
||
</Stack>
|
||
</Center>
|
||
);
|
||
}
|
||
|
||
// Wrap your UI with the <EmbedPDF> provider
|
||
return (
|
||
<PrivateContent>
|
||
<div
|
||
style={{
|
||
height: '100%',
|
||
width: '100%',
|
||
position: 'relative',
|
||
flex: 1,
|
||
minHeight: 0,
|
||
minWidth: 0,
|
||
}}>
|
||
<EmbedPDF
|
||
engine={engine}
|
||
plugins={plugins}
|
||
onInitialized={async (registry: PluginRegistry) => {
|
||
// v2.0: Use registry.getPlugin() to access plugin APIs
|
||
const annotationPlugin = registry.getPlugin('annotation');
|
||
if (!annotationPlugin || !annotationPlugin.provides) return;
|
||
|
||
const annotationApi = annotationPlugin.provides();
|
||
if (!annotationApi) return;
|
||
|
||
if (enableAnnotations) {
|
||
// LooseAnnotationTool bypasses strict Partial<T> defaults typing from the library —
|
||
// EmbedPDF accepts extra runtime properties (borderWidth, textColor, finishOnDoubleClick,
|
||
// etc.) that aren't reflected in the TypeScript model types.
|
||
type LooseAnnotationTool = {
|
||
id: string;
|
||
name: string;
|
||
interaction?: { exclusive: boolean; cursor: string; textSelection?: boolean; isRotatable?: boolean };
|
||
matchScore?: (annotation: PdfAnnotationObject) => number;
|
||
defaults?: Record<string, unknown>;
|
||
clickBehavior?: Record<string, unknown>;
|
||
behavior?: { deactivateToolAfterCreate?: boolean; selectAfterCreate?: boolean };
|
||
};
|
||
const ensureTool = (tool: LooseAnnotationTool) => {
|
||
const existing = annotationApi.getTool?.(tool.id);
|
||
if (!existing) {
|
||
annotationApi.addTool(tool as unknown as AnnotationTool);
|
||
}
|
||
};
|
||
|
||
ensureTool({
|
||
id: 'highlight',
|
||
name: 'Highlight',
|
||
interaction: { exclusive: true, cursor: 'text', textSelection: true },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.HIGHLIGHT ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.HIGHLIGHT,
|
||
strokeColor: '#ffd54f',
|
||
color: '#ffd54f',
|
||
opacity: 0.6,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'underline',
|
||
name: 'Underline',
|
||
interaction: { exclusive: true, cursor: 'text', textSelection: true },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.UNDERLINE ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.UNDERLINE,
|
||
strokeColor: '#ffb300',
|
||
color: '#ffb300',
|
||
opacity: 1,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'strikeout',
|
||
name: 'Strikeout',
|
||
interaction: { exclusive: true, cursor: 'text', textSelection: true },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STRIKEOUT ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.STRIKEOUT,
|
||
strokeColor: '#e53935',
|
||
color: '#e53935',
|
||
opacity: 1,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'squiggly',
|
||
name: 'Squiggly',
|
||
interaction: { exclusive: true, cursor: 'text', textSelection: true },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUIGGLY ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.SQUIGGLY,
|
||
strokeColor: '#00acc1',
|
||
color: '#00acc1',
|
||
opacity: 1,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'ink',
|
||
name: 'Pen',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.INK ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.INK,
|
||
strokeColor: '#1f2933',
|
||
color: '#1f2933',
|
||
opacity: 1,
|
||
borderWidth: 2,
|
||
lineWidth: 2,
|
||
strokeWidth: 2,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'inkHighlighter',
|
||
name: 'Ink Highlighter',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.INK && (annotation.strokeColor === '#ffd54f' || annotation.color === '#ffd54f') ? 8 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.INK,
|
||
strokeColor: '#ffd54f',
|
||
color: '#ffd54f',
|
||
opacity: 0.5,
|
||
borderWidth: 6,
|
||
lineWidth: 6,
|
||
strokeWidth: 6,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: false,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'square',
|
||
name: 'Square',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUARE ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.SQUARE,
|
||
color: '#0000ff', // fill color (blue)
|
||
strokeColor: '#cf5b5b', // border color (reddish pink)
|
||
opacity: 0.5,
|
||
borderWidth: 1,
|
||
strokeWidth: 1,
|
||
lineWidth: 1,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
defaultSize: { width: 120, height: 90 },
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'circle',
|
||
name: 'Circle',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.CIRCLE ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.CIRCLE,
|
||
color: '#0000ff', // fill color (blue)
|
||
strokeColor: '#cf5b5b', // border color (reddish pink)
|
||
opacity: 0.5,
|
||
borderWidth: 1,
|
||
strokeWidth: 1,
|
||
lineWidth: 1,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
defaultSize: { width: 100, height: 100 },
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'line',
|
||
name: 'Line',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.LINE ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.LINE,
|
||
color: '#1565c0',
|
||
opacity: 1,
|
||
borderWidth: 2,
|
||
strokeWidth: 2,
|
||
lineWidth: 2,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
defaultLength: 120,
|
||
defaultAngle: 0,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'lineArrow',
|
||
name: 'Arrow',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => {
|
||
if (annotation.type !== PdfAnnotationSubtype.LINE) return 0;
|
||
// EmbedPDF stores endStyle/lineEndingStyles at runtime; library types use lineEndings
|
||
const ann = annotation as PdfAnnotationObject & { endStyle?: string; lineEndingStyles?: { end?: string } };
|
||
return (ann.endStyle === 'ClosedArrow' || ann.lineEndingStyles?.end === 'ClosedArrow') ? 9 : 0;
|
||
},
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.LINE,
|
||
color: '#1565c0',
|
||
opacity: 1,
|
||
borderWidth: 2,
|
||
startStyle: 'None',
|
||
endStyle: 'ClosedArrow',
|
||
lineEndingStyles: { start: 'None', end: 'ClosedArrow' },
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
defaultLength: 120,
|
||
defaultAngle: 0,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'polyline',
|
||
name: 'Polyline',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYLINE ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.POLYLINE,
|
||
color: '#1565c0',
|
||
opacity: 1,
|
||
borderWidth: 2,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
finishOnDoubleClick: true,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'polygon',
|
||
name: 'Polygon',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYGON ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.POLYGON,
|
||
color: '#0000ff', // fill color (blue)
|
||
strokeColor: '#cf5b5b', // border color (reddish pink)
|
||
opacity: 0.5,
|
||
borderWidth: 1,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
finishOnDoubleClick: true,
|
||
defaultSize: { width: 140, height: 100 },
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'text',
|
||
name: 'Text',
|
||
interaction: { exclusive: true, cursor: 'text', isRotatable: false },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 10 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.FREETEXT,
|
||
textColor: '#111111',
|
||
fontSize: 14,
|
||
fontFamily: 'Helvetica',
|
||
opacity: 1,
|
||
interiorColor: '#fffef7',
|
||
contents: 'Text',
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'note',
|
||
name: 'Note',
|
||
interaction: { exclusive: true, cursor: 'pointer', isRotatable: false },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 8 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.FREETEXT,
|
||
textColor: '#1b1b1b',
|
||
color: '#ffa000',
|
||
interiorColor: '#fff8e1',
|
||
opacity: 1,
|
||
contents: 'Note',
|
||
fontSize: 12,
|
||
},
|
||
clickBehavior: {
|
||
enabled: true,
|
||
defaultSize: { width: 160, height: 100 },
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'stamp',
|
||
name: 'Image Stamp',
|
||
interaction: { exclusive: false, cursor: 'copy' },
|
||
matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STAMP ? 5 : 0),
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.STAMP,
|
||
},
|
||
behavior: {
|
||
deactivateToolAfterCreate: true,
|
||
selectAfterCreate: true,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'signatureStamp',
|
||
name: 'Digital Signature',
|
||
interaction: { exclusive: false, cursor: 'copy' },
|
||
matchScore: () => 0,
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.STAMP,
|
||
},
|
||
});
|
||
|
||
ensureTool({
|
||
id: 'signatureInk',
|
||
name: 'Signature Draw',
|
||
interaction: { exclusive: true, cursor: 'crosshair' },
|
||
matchScore: () => 0,
|
||
defaults: {
|
||
type: PdfAnnotationSubtype.INK,
|
||
strokeColor: '#000000',
|
||
color: '#000000',
|
||
opacity: 1.0,
|
||
borderWidth: 2,
|
||
},
|
||
});
|
||
|
||
annotationApi.onAnnotationEvent((event: AnnotationEvent) => {
|
||
if (event.type === 'create' && event.committed) {
|
||
setAnnotations(prev => [...prev, {
|
||
id: event.annotation.id,
|
||
pageIndex: event.pageIndex,
|
||
rect: event.annotation.rect
|
||
}]);
|
||
|
||
// If the annotation doesn't have customData.toolId, patch it from the active tool.
|
||
// EmbedPDF doesn't always persist customData from setToolDefaults into created annotations.
|
||
const annotationId = event.annotation.id;
|
||
const existingCustomData = (event.annotation as unknown as { customData?: Record<string, unknown> }).customData;
|
||
if (annotationId && !existingCustomData?.toolId) {
|
||
const activeTool = (annotationApi as unknown as { getActiveTool?: () => { id: string } | null }).getActiveTool?.();
|
||
if (activeTool?.id && activeTool.id !== 'select') {
|
||
(annotationApi as unknown as { updateAnnotation?: (page: number, id: string, patch: Record<string, unknown>) => void })
|
||
.updateAnnotation?.(event.pageIndex, annotationId, {
|
||
customData: { ...(existingCustomData ?? {}), toolId: activeTool.id },
|
||
});
|
||
}
|
||
}
|
||
|
||
// Auto-select the annotation after creation so the selection menu appears immediately,
|
||
// letting users discover the editing options before they click away.
|
||
if (annotationId) {
|
||
(annotationApi as unknown as { selectAnnotation?: (pageIndex: number, id: string) => void })
|
||
.selectAnnotation?.(event.pageIndex, annotationId);
|
||
}
|
||
|
||
if (onSignatureAdded) {
|
||
onSignatureAdded(event.annotation);
|
||
}
|
||
} else if (event.type === 'delete' && event.committed) {
|
||
setAnnotations(prev => prev.filter(ann => ann.id !== event.annotation.id));
|
||
}
|
||
});
|
||
}
|
||
}}
|
||
>
|
||
<ActiveDocumentProvider>
|
||
<ZoomAPIBridge />
|
||
<ScrollAPIBridge />
|
||
<SelectionAPIBridge />
|
||
<PanAPIBridge />
|
||
<SpreadAPIBridge />
|
||
<SearchAPIBridge />
|
||
<ThumbnailAPIBridge />
|
||
<RotateAPIBridge />
|
||
{(enableAnnotations || enableRedaction || isManualRedactionMode) && <HistoryAPIBridge ref={historyApiRef} />}
|
||
{/* Always render RedactionAPIBridge when in manual redaction mode so buttons can switch from annotation mode */}
|
||
{(enableRedaction || isManualRedactionMode) && <RedactionAPIBridge />}
|
||
{/* Always render SignatureAPIBridge so annotation tools (draw) can be activated even when starting in redaction mode */}
|
||
{(enableAnnotations || enableRedaction || isManualRedactionMode) && <SignatureAPIBridge ref={signatureApiRef} isSignMode={isSignMode} />}
|
||
{(enableRedaction || isManualRedactionMode) && <RedactionPendingTracker ref={redactionTrackerRef} />}
|
||
{enableAnnotations && <AnnotationAPIBridge ref={annotationApiRef} />}
|
||
|
||
<ExportAPIBridge />
|
||
<BookmarkAPIBridge />
|
||
<AttachmentAPIBridge />
|
||
<PrintAPIBridge
|
||
file={file}
|
||
url={pdfUrl}
|
||
fileName={fileName}
|
||
/>
|
||
<DocumentPermissionsAPIBridge />
|
||
<DocumentReadyWrapper
|
||
fallback={
|
||
<Center style={{ height: '100%', width: '100%' }}>
|
||
<ToolLoadingFallback />
|
||
</Center>
|
||
}
|
||
>
|
||
{(documentId) => (
|
||
<>
|
||
<GlobalPointerProvider documentId={documentId}>
|
||
<Viewport
|
||
documentId={documentId}
|
||
style={{
|
||
backgroundColor: 'var(--bg-background)',
|
||
height: '100%',
|
||
width: '100%',
|
||
maxHeight: '100%',
|
||
maxWidth: '100%',
|
||
overflow: 'auto',
|
||
position: 'relative',
|
||
flex: 1,
|
||
minHeight: 0,
|
||
minWidth: 0,
|
||
contain: 'strict',
|
||
}}
|
||
>
|
||
<Scroller
|
||
documentId={documentId}
|
||
renderPage={({ width, height, pageIndex }) => {
|
||
return (
|
||
<Rotate key={`${documentId}-${pageIndex}`} documentId={documentId} pageIndex={pageIndex}>
|
||
<PagePointerProvider documentId={documentId} pageIndex={pageIndex}>
|
||
<div
|
||
data-page-index={pageIndex}
|
||
data-page-width={width}
|
||
data-page-height={height}
|
||
style={{
|
||
width,
|
||
height,
|
||
position: 'relative',
|
||
overflow: 'hidden', // clip overlays (buttons, fields) that extend beyond the page rect
|
||
userSelect: 'none',
|
||
WebkitUserSelect: 'none',
|
||
MozUserSelect: 'none',
|
||
msUserSelect: 'none',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
|
||
}}
|
||
draggable={false}
|
||
onDragStart={(e) => e.preventDefault()}
|
||
onDrop={(e) => e.preventDefault()}
|
||
onDragOver={(e) => e.preventDefault()}
|
||
>
|
||
<div style={{
|
||
position: 'absolute',
|
||
inset: 0,
|
||
transition: 'filter 0.25s ease',
|
||
filter:
|
||
pdfRenderMode === 'dark'
|
||
? 'invert(1) hue-rotate(180deg)'
|
||
: pdfRenderMode === 'sepia'
|
||
? 'sepia(0.7) brightness(0.85)'
|
||
: undefined,
|
||
}}>
|
||
<TilingLayer documentId={documentId} pageIndex={pageIndex} />
|
||
</div>
|
||
|
||
<CustomSearchLayer documentId={documentId} pageIndex={pageIndex} />
|
||
|
||
<div className="pdf-selection-layer" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
|
||
<SelectionLayer documentId={documentId} pageIndex={pageIndex} background="var(--pdf-selection-bg)" />
|
||
</div>
|
||
<TextSelectionHandler documentId={documentId} pageIndex={pageIndex} />
|
||
|
||
{/* ButtonAppearanceOverlay — renders PDF-native button visuals as bitmaps */}
|
||
{enableFormFill && file && (
|
||
<ButtonAppearanceOverlay
|
||
pageIndex={pageIndex}
|
||
pdfSource={file}
|
||
pageWidth={width}
|
||
pageHeight={height}
|
||
/>
|
||
)}
|
||
|
||
{/* FormFieldOverlay for interactive form filling */}
|
||
{enableFormFill && (
|
||
<FormFieldOverlay
|
||
documentId={documentId}
|
||
pageIndex={pageIndex}
|
||
pageWidth={width}
|
||
pageHeight={height}
|
||
fileId={fileId}
|
||
/>
|
||
)}
|
||
|
||
{/* SignatureFieldOverlay — bitmaps of digital-signature appearances */}
|
||
{file && (
|
||
<SignatureFieldOverlay
|
||
documentId={documentId}
|
||
pageIndex={pageIndex}
|
||
pdfSource={file}
|
||
pageWidth={width}
|
||
pageHeight={height}
|
||
/>
|
||
)}
|
||
|
||
{/* AnnotationLayer for annotation editing and annotation-based redactions */}
|
||
{(enableAnnotations || enableRedaction) && (
|
||
<AnnotationLayer
|
||
documentId={documentId}
|
||
pageIndex={pageIndex}
|
||
selectionOutline={{ color: "#007ACC" }}
|
||
selectionMenu={(props) => <AnnotationSelectionMenu {...props} />}
|
||
style={!showBakedAnnotations ? { opacity: 0, pointerEvents: 'none' } : undefined}
|
||
/>
|
||
)}
|
||
|
||
{enableRedaction && (
|
||
<RedactionLayer
|
||
documentId={documentId}
|
||
pageIndex={pageIndex}
|
||
selectionMenu={(props) => <RedactionSelectionMenu {...props} />}
|
||
/>
|
||
)}
|
||
|
||
{/* LinkLayer – uses EmbedPDF annotation state for link rendering */}
|
||
<LinkLayer
|
||
documentId={documentId}
|
||
pageIndex={pageIndex}
|
||
/>
|
||
</div>
|
||
</PagePointerProvider>
|
||
</Rotate>
|
||
);
|
||
}}
|
||
/>
|
||
</Viewport>
|
||
</GlobalPointerProvider>
|
||
{enableAnnotations && (
|
||
<CommentAuthorProvider displayName={commentAuthorName}>
|
||
<CommentsSidebar
|
||
documentId={documentId}
|
||
visible={isCommentsSidebarVisible}
|
||
rightOffset={commentsSidebarRightOffset}
|
||
/>
|
||
</CommentAuthorProvider>
|
||
)}
|
||
</>
|
||
)}
|
||
</DocumentReadyWrapper>
|
||
</ActiveDocumentProvider>
|
||
</EmbedPDF>
|
||
</div>
|
||
</PrivateContent>
|
||
);
|
||
}
|