@amafil/react-native-pdf-toolkit 1.0.15 → 1.1.1

package/android/src/paper/java/com/facebook/react/viewmanagers/RNPDFPdfViewManagerDelegate.java

@@ -62,6 +62,27 @@ public class RNPDFPdfViewManagerDelegate<T extends View, U extends BaseViewManag
       case "enableDoubleTapZoom":
         mViewManager.setEnableDoubleTapZoom(view, value == null ? false : (boolean) value);
         break;
+      case "annotations":
+        mViewManager.setAnnotations(view, value == null ? null : (String) value);
+        break;
+      case "annotationMode":
+        mViewManager.setAnnotationMode(view, value == null ? false : (boolean) value);
+        break;
+      case "annotationTool":
+        mViewManager.setAnnotationTool(view, value == null ? null : (String) value);
+        break;
+      case "annotationEditable":
+        mViewManager.setAnnotationEditable(view, value == null ? false : (boolean) value);
+        break;
+      case "annotationIdMode":
+        mViewManager.setAnnotationIdMode(view, value == null ? null : (String) value);
+        break;
+      case "annotationInkColor":
+        mViewManager.setAnnotationInkColor(view, value == null ? null : (String) value);
+        break;
+      case "annotationInkThickness":
+        mViewManager.setAnnotationInkThickness(view, value == null ? 0f : ((Double) value).floatValue());
+        break;
       case "enableAntialiasing":
         mViewManager.setEnableAntialiasing(view, value == null ? false : (boolean) value);
         break;
@@ -87,6 +108,15 @@ public class RNPDFPdfViewManagerDelegate<T extends View, U extends BaseViewManag
       case "setNativePage":
         mViewManager.setNativePage(view, args.getInt(0));
         break;
+      case "saveAnnotations":
+        mViewManager.saveAnnotations(view);
+        break;
+      case "deleteSelectedAnnotation":
+        mViewManager.deleteSelectedAnnotation(view);
+        break;
+      case "deleteAllAnnotations":
+        mViewManager.deleteAllAnnotations(view);
+        break;
     }
   }
 }

package/android/src/paper/java/com/facebook/react/viewmanagers/RNPDFPdfViewManagerInterface.java

@@ -26,10 +26,20 @@ public interface RNPDFPdfViewManagerInterface<T extends View> {
   void setEnableRTL(T view, boolean value);
   void setEnableAnnotationRendering(T view, boolean value);
   void setEnableDoubleTapZoom(T view, boolean value);
+  void setAnnotations(T view, @Nullable String value);
+  void setAnnotationMode(T view, boolean value);
+  void setAnnotationTool(T view, @Nullable String value);
+  void setAnnotationEditable(T view, boolean value);
+  void setAnnotationIdMode(T view, @Nullable String value);
+  void setAnnotationInkColor(T view, @Nullable String value);
+  void setAnnotationInkThickness(T view, float value);
   void setEnableAntialiasing(T view, boolean value);
   void setFitPolicy(T view, int value);
   void setSpacing(T view, int value);
   void setPassword(T view, @Nullable String value);
   void setSinglePage(T view, boolean value);
   void setNativePage(T view, int page);
+  void saveAnnotations(T view);
+  void deleteSelectedAnnotation(T view);
+  void deleteAllAnnotations(T view);
 }

package/annotationDocumentUtils.js

@@ -0,0 +1,74 @@
+'use strict';
+
+const LEGACY_MARKUP_TYPES = new Set(['underline', 'strikeout']);
+
+export function normalizeAnnotation(annotation) {
+    if (!annotation || typeof annotation !== 'object' || Array.isArray(annotation)) {
+        return annotation;
+    }
+
+    if (!LEGACY_MARKUP_TYPES.has(annotation.type)) {
+        return annotation;
+    }
+
+    return {
+        ...annotation,
+        type: 'highlight',
+    };
+}
+
+export function normalizeAnnotationPayload(payload) {
+    if (!payload || typeof payload !== 'object') {
+        return payload;
+    }
+
+    if (Array.isArray(payload)) {
+        return payload.map(normalizeAnnotation);
+    }
+
+    if (!Array.isArray(payload.annotations)) {
+        return payload;
+    }
+
+    return {
+        ...payload,
+        annotations: payload.annotations.map(normalizeAnnotation),
+    };
+}
+
+export function joinAnnotationMessagePayload(messageParts, startIndex = 1) {
+    if (!Array.isArray(messageParts) || messageParts.length <= startIndex) {
+        return '';
+    }
+
+    return messageParts.slice(startIndex).join('|');
+}
+
+export function parseAnnotationMessagePayload(messageParts, startIndex = 1) {
+    const payload = joinAnnotationMessagePayload(messageParts, startIndex);
+
+    if (!payload) {
+        return null;
+    }
+
+    try {
+        return normalizeAnnotationPayload(JSON.parse(payload));
+    } catch (error) {
+        return payload;
+    }
+}
+
+export function stringifyAnnotationDocument(document, onError) {
+    if (!document) {
+        return null;
+    }
+
+    try {
+        return JSON.stringify(normalizeAnnotationPayload(document));
+    } catch (error) {
+        if (onError) {
+            onError(error);
+        }
+        return null;
+    }
+}

package/fabric/RNPDFPdfNativeComponent.js

@@ -30,6 +30,13 @@
    fitPolicy: ?Int32,
    spacing: ?Int32,
    password: ?string,
+  annotations: ?string,
+  annotationMode: ?boolean,
+  annotationTool: ?string,
+  annotationEditable: ?boolean,
+  annotationIdMode: ?string,
+  annotationInkColor: ?string,
+  annotationInkThickness: ?Float,
    onChange: ?BubblingEventHandler<ChangeEvent>,
    singlePage: ?boolean,
  |}>;
@@ -47,10 +54,19 @@
   +stopNativeAutoScroll: (
     viewRef: React.ElementRef<ComponentType>,
   ) => void;
+  +saveAnnotations: (
+    viewRef: React.ElementRef<ComponentType>,
+  ) => void;
+  +deleteSelectedAnnotation: (
+    viewRef: React.ElementRef<ComponentType>,
+  ) => void;
+  +deleteAllAnnotations: (
+    viewRef: React.ElementRef<ComponentType>,
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setNativePage', 'startNativeAutoScroll', 'stopNativeAutoScroll'],
+  supportedCommands: ['setNativePage', 'startNativeAutoScroll', 'stopNativeAutoScroll', 'saveAnnotations', 'deleteSelectedAnnotation', 'deleteAllAnnotations'],
 });
 
  export default codegenNativeComponent<NativeProps>('RNPDFPdfView');

package/index.d.ts

@@ -27,6 +27,68 @@ export type Source = {
     method?: string;
 };
 
+export type AnnotationRotation = 0 | 90 | 180 | 270;
+export type AnnotationIdMode = 'auto' | 'manual';
+export type AnnotationTool = 'select' | 'ink' | 'text' | 'highlight';
+export type AnnotationTextAlign = 'left' | 'center' | 'right';
+
+export type AnnotationPoint = {
+    x: number,
+    y: number,
+    pressure?: number,
+};
+
+export type AnnotationBounds = {
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+};
+
+export type AnnotationStyle = {
+    color?: string,
+    thickness?: number,
+    fontFamily?: string,
+    fontSize?: number,
+    textAlign?: AnnotationTextAlign,
+    rotation?: AnnotationRotation,
+};
+
+export type AnnotationBase = {
+    id: string,
+    page: number,
+    locked?: boolean,
+    createdAt?: number,
+    updatedAt?: number,
+};
+
+export type InkAnnotation = AnnotationBase & {
+    type: 'ink',
+    points: AnnotationPoint[],
+    style?: AnnotationStyle,
+};
+
+export type TextAnnotation = AnnotationBase & {
+    type: 'text',
+    bounds: AnnotationBounds,
+    text: string,
+    style?: AnnotationStyle,
+};
+
+export type MarkupAnnotation = AnnotationBase & {
+    type: 'highlight',
+    bounds: AnnotationBounds,
+    style?: AnnotationStyle,
+};
+
+export type Annotation = InkAnnotation | TextAnnotation | MarkupAnnotation;
+
+export type AnnotationDocument = {
+    editable?: boolean,
+    idMode?: AnnotationIdMode,
+    annotations: Annotation[],
+};
+
 export type TextSelectionChangeEvent = {
   nativeEvent:
     | {
@@ -58,6 +120,34 @@ export interface PdfProps {
     enableRTL?: boolean,
     enableAnnotationRendering?: boolean,
     enableDoubleTapZoom?: boolean;
+    /**
+     * Initial annotation document to render in the overlay.
+     */
+    annotations?: AnnotationDocument,
+    /**
+     * Enable annotation editing mode.
+     */
+    annotationMode?: boolean,
+    /**
+     * Active tool used while annotation editing is enabled.
+     */
+    annotationTool?: AnnotationTool,
+    /**
+     * Allow in-place annotation edits.
+     */
+    annotationEditable?: boolean,
+    /**
+     * Controls how annotation IDs are generated and preserved.
+     */
+    annotationIdMode?: AnnotationIdMode,
+    /**
+     * Default color applied to newly created ink annotations.
+     */
+    annotationInkColor?: string,
+    /**
+     * Default thickness applied to newly created ink annotations.
+     */
+    annotationInkThickness?: number,
     /**
      * Only works on iOS. Defaults to `true`.
      */
@@ -80,11 +170,22 @@ export interface PdfProps {
     onPressLink?: (url: string) => void,
     onAutoScrollEnd?: () => void,
     onTextSelectionChange?: (event: TextSelectionChangeEvent) => void,
-    onAutoScrollEnd?: () => void,
 }
 
 export interface PdfRef {
     setPage(pageNumber: number): void
+    /**
+     * Resolves with the current annotation document serialized by native code.
+     */
+    saveAnnotations(): Promise<AnnotationDocument>
+    /**
+     * Deletes the currently selected custom annotation.
+     */
+    deleteSelectedAnnotation(): void
+    /**
+     * Deletes all custom annotations in the current overlay draft.
+     */
+    deleteAllAnnotations(): void
     /**
      * Start smooth automatic vertical scrolling using the display refresh rate.
      * @param dpPerSecond - Scroll speed in density-independent pixels (dp) per second (default: 15). Produces consistent physical speed across screen densities.

package/index.js

@@ -23,6 +23,11 @@ import PdfViewNativeComponent, {
 import ReactNativeBlobUtil from 'react-native-blob-util'
 import {ViewPropTypes} from 'deprecated-react-native-prop-types';
 const SHA1 = require('crypto-js/sha1');
+import {
+        joinAnnotationMessagePayload,
+        parseAnnotationMessagePayload,
+        stringifyAnnotationDocument,
+} from './annotationDocumentUtils';
 import PdfView from './PdfView';
 
 export default class Pdf extends Component {
@@ -57,6 +62,13 @@ export default class Pdf extends Component {
         fitPolicy: PropTypes.number,
         trustAllCerts: PropTypes.bool,
         singlePage: PropTypes.bool,
+        annotations: PropTypes.object,
+        annotationMode: PropTypes.bool,
+        annotationTool: PropTypes.oneOf(['select', 'ink', 'text', 'highlight']),
+        annotationEditable: PropTypes.bool,
+        annotationIdMode: PropTypes.oneOf(['auto', 'manual']),
+        annotationInkColor: PropTypes.string,
+        annotationInkThickness: PropTypes.number,
         onLoadComplete: PropTypes.func,
         onPageChanged: PropTypes.func,
         onError: PropTypes.func,
@@ -96,6 +108,13 @@ export default class Pdf extends Component {
         trustAllCerts: true,
         usePDFKit: true,
         singlePage: false,
+        annotations: null,
+        annotationMode: false,
+        annotationTool: 'select',
+        annotationEditable: true,
+        annotationIdMode: 'auto',
+        annotationInkColor: '#111111',
+        annotationInkThickness: 2,
         onLoadProgress: (percent) => {
         },
         onLoadComplete: (numberOfPages, path) => {
@@ -127,6 +146,7 @@ export default class Pdf extends Component {
         };
 
         this.lastRNBFTask = null;
+        this._annotationSavePromise = null;
 
     }
 
@@ -156,6 +176,10 @@ export default class Pdf extends Component {
     componentWillUnmount() {
         this._mounted = false;
         this.stopAutoScroll();
+        if (this._annotationSavePromise) {
+            this._annotationSavePromise.reject(new Error('Pdf unmounted before annotation save completed'));
+            this._annotationSavePromise = null;
+        }
         if (this.lastRNBFTask) {
             // this.lastRNBFTask.cancel(err => {
             // });
@@ -372,6 +396,70 @@ export default class Pdf extends Component {
         
     }
 
+    saveAnnotations() {
+        if (this._annotationSavePromise) {
+            return Promise.reject(new Error('An annotation save is already in progress'));
+        }
+
+        return new Promise((resolve, reject) => {
+            if (!this._root) {
+                reject(new Error('Pdf is not mounted'));
+                return;
+            }
+
+            this._annotationSavePromise = {resolve, reject};
+
+            if (!!global?.nativeFabricUIManager) {
+                if (PdfViewCommands.saveAnnotations) {
+                    PdfViewCommands.saveAnnotations(this._root);
+                } else {
+                    this._annotationSavePromise = null;
+                    reject(new Error('Annotation save command is not available'));
+                }
+            } else {
+                const ReactNative = require('react-native');
+                try {
+                    ReactNative.UIManager.dispatchViewManagerCommand(
+                        ReactNative.findNodeHandle(this._root),
+                        'saveAnnotations',
+                        [],
+                    );
+                } catch (error) {
+                    this._annotationSavePromise = null;
+                    reject(error);
+                }
+            }
+        });
+    }
+
+    deleteSelectedAnnotation() {
+        this._dispatchAnnotationCommand('deleteSelectedAnnotation', PdfViewCommands.deleteSelectedAnnotation);
+    }
+
+    deleteAllAnnotations() {
+        this._dispatchAnnotationCommand('deleteAllAnnotations', PdfViewCommands.deleteAllAnnotations);
+    }
+
+    _dispatchAnnotationCommand(commandName, fabricCommand) {
+        if (!this._root) {
+            return;
+        }
+
+        if (!!global?.nativeFabricUIManager) {
+            if (fabricCommand) {
+                fabricCommand(this._root);
+            }
+            return;
+        }
+
+        const ReactNative = require('react-native');
+        ReactNative.UIManager.dispatchViewManagerCommand(
+            ReactNative.findNodeHandle(this._root),
+            commandName,
+            [],
+        );
+    }
+
     startAutoScroll( dpPerSecond = 15, resumeDelay = 3000 ) {
         this._isAutoScrollActive = true;
         if (!!global?.nativeFabricUIManager) {
@@ -465,6 +553,20 @@ export default class Pdf extends Component {
             } else if (message[0] === 'autoScrollEnd') {
                 this._isAutoScrollActive = false;
                 this.props.onAutoScrollEnd && this.props.onAutoScrollEnd();
+            } else if (message[0] === 'annotationSaveComplete') {
+                const annotationDocument = parseAnnotationMessagePayload(message);
+
+                if (this._annotationSavePromise) {
+                    this._annotationSavePromise.resolve(annotationDocument);
+                    this._annotationSavePromise = null;
+                }
+            } else if (message[0] === 'annotationSaveError') {
+                const annotationError = joinAnnotationMessagePayload(message);
+
+                if (this._annotationSavePromise) {
+                    this._annotationSavePromise.reject(new Error(annotationError || 'Annotation save failed'));
+                    this._annotationSavePromise = null;
+                }
             }
         }
 
@@ -476,7 +578,13 @@ export default class Pdf extends Component {
 
     };
 
+    _getNativeAnnotations = () => {
+        return stringifyAnnotationDocument(this.props.annotations, this._onError);
+    };
+
     render() {
+        const nativeAnnotations = this._getNativeAnnotations();
+
         if (Platform.OS === "android" || Platform.OS === "ios" || Platform.OS === "windows") {
                 return (
                     <View style={[this.props.style,{overflow: 'hidden'}]}>
@@ -492,6 +600,7 @@ export default class Pdf extends Component {
                                         <PdfCustom
                                             ref={component => (this._root = component)}
                                             {...this.props}
+                                            annotations={nativeAnnotations}
                                             style={[{flex:1,backgroundColor: '#EEE'}, this.props.style]}
                                             path={this.state.path}
                                             onChange={this._onChange}
@@ -501,6 +610,7 @@ export default class Pdf extends Component {
                                                 <PdfCustom
                                                     ref={component => (this._root = component)}
                                                     {...this.props}
+                                                    annotations={nativeAnnotations}
                                                     style={[{backgroundColor: '#EEE',overflow: 'hidden'}, this.props.style]}
                                                     path={this.state.path}
                                                     onChange={this._onChange}

package/index.js.flow

@@ -24,6 +24,68 @@ export type Source = {
   uri: string
 };
 
+export type AnnotationRotation = 0 | 90 | 180 | 270;
+export type AnnotationIdMode = 'auto' | 'manual';
+export type AnnotationTool = 'select' | 'ink' | 'text' | 'highlight';
+export type AnnotationTextAlign = 'left' | 'center' | 'right';
+
+export type AnnotationPoint = {
+  x: number,
+  y: number,
+  pressure?: number,
+};
+
+export type AnnotationBounds = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
+export type AnnotationStyle = {
+  color?: string,
+  thickness?: number,
+  fontFamily?: string,
+  fontSize?: number,
+  textAlign?: AnnotationTextAlign,
+  rotation?: AnnotationRotation,
+};
+
+export type AnnotationBase = {
+  id: string,
+  page: number,
+  locked?: boolean,
+  createdAt?: number,
+  updatedAt?: number,
+};
+
+export type InkAnnotation = AnnotationBase & {
+  type: 'ink',
+  points: Array<AnnotationPoint>,
+  style?: AnnotationStyle,
+};
+
+export type TextAnnotation = AnnotationBase & {
+  type: 'text',
+  bounds: AnnotationBounds,
+  text: string,
+  style?: AnnotationStyle,
+};
+
+export type MarkupAnnotation = AnnotationBase & {
+  type: 'highlight',
+  bounds: AnnotationBounds,
+  style?: AnnotationStyle,
+};
+
+export type Annotation = InkAnnotation | TextAnnotation | MarkupAnnotation;
+
+export type AnnotationDocument = {
+  editable?: boolean,
+  idMode?: AnnotationIdMode,
+  annotations: Array<Annotation>,
+};
+
 export type TableContent = {
   children: TableContent[],
   mNativePtr: number,
@@ -33,6 +95,13 @@ export type TableContent = {
 
 export type Props = {
   renderActivityIndicator?: (progress: number) => Node,
+  annotations?: AnnotationDocument,
+  annotationMode?: boolean,
+  annotationTool?: AnnotationTool,
+  annotationEditable?: boolean,
+  annotationIdMode?: AnnotationIdMode,
+  annotationInkColor?: string,
+  annotationInkThickness?: number,
   enableAnnotationRendering?: boolean,
   enableAntialiasing?: boolean,
   enablePaging?: boolean,
@@ -64,4 +133,7 @@ export type Props = {
 
 declare export default class Pdf extends Component<Props> {
   setPage: (pageNumber: number) => void;
+  saveAnnotations: () => Promise<AnnotationDocument>;
+  deleteSelectedAnnotation: () => void;
+  deleteAllAnnotations: () => void;
 }

package/ios/RNPDFPdf/RNPDFPdfView.h

@@ -49,6 +49,13 @@ UIView
 @property(nonatomic) BOOL enableRTL;
 @property(nonatomic) BOOL enableAnnotationRendering;
 @property(nonatomic) BOOL enableDoubleTapZoom;
+@property(nonatomic, strong) NSString *annotations;
+@property(nonatomic) BOOL annotationMode;
+@property(nonatomic, strong) NSString *annotationTool;
+@property(nonatomic) BOOL annotationEditable;
+@property(nonatomic, strong) NSString *annotationIdMode;
+@property(nonatomic, strong) NSString *annotationInkColor;
+@property(nonatomic) float annotationInkThickness;
 @property(nonatomic) int fitPolicy;
 @property(nonatomic) int spacing;
 @property(nonatomic, strong) NSString *password;
@@ -56,6 +63,10 @@ UIView
 
 @property(nonatomic, copy) RCTBubblingEventBlock onChange;
 
+- (void)saveAnnotations;
+- (void)deleteSelectedAnnotation;
+- (void)deleteAllAnnotations;
+
 @property(nonatomic, strong) NSString *selectedText;
 @property(nonatomic) BOOL enableTextSelection;
 @property(nonatomic, strong) PDFSelection *currentPDFSelection;