@amafil/react-native-pdf-toolkit 1.0.11 → 1.1.0

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

@@ -62,6 +62,21 @@ 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 "enableAntialiasing":
         mViewManager.setEnableAntialiasing(view, value == null ? false : (boolean) value);
         break;
@@ -87,6 +102,9 @@ public class RNPDFPdfViewManagerDelegate<T extends View, U extends BaseViewManag
       case "setNativePage":
         mViewManager.setNativePage(view, args.getInt(0));
         break;
+      case "saveAnnotations":
+        mViewManager.saveAnnotations(view);
+        break;
     }
   }
 }

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

@@ -26,10 +26,16 @@ 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 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);
 }

package/fabric/RNPDFPdfNativeComponent.js

@@ -30,6 +30,11 @@
    fitPolicy: ?Int32,
    spacing: ?Int32,
    password: ?string,
+  annotations: ?string,
+  annotationMode: ?boolean,
+  annotationTool: ?string,
+  annotationEditable: ?boolean,
+  annotationIdMode: ?string,
    onChange: ?BubblingEventHandler<ChangeEvent>,
    singlePage: ?boolean,
  |}>;
@@ -47,10 +52,13 @@
   +stopNativeAutoScroll: (
     viewRef: React.ElementRef<ComponentType>,
   ) => void;
+  +saveAnnotations: (
+    viewRef: React.ElementRef<ComponentType>,
+  ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['setNativePage', 'startNativeAutoScroll', 'stopNativeAutoScroll'],
+  supportedCommands: ['setNativePage', 'startNativeAutoScroll', 'stopNativeAutoScroll', 'saveAnnotations'],
 });
 
  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' | 'underline' | 'strikeout';
+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' | 'underline' | 'strikeout',
+    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,11 @@ export interface PdfProps {
     enableRTL?: boolean,
     enableAnnotationRendering?: boolean,
     enableDoubleTapZoom?: boolean;
+    annotations?: AnnotationDocument,
+    annotationMode?: boolean,
+    annotationTool?: AnnotationTool,
+    annotationEditable?: boolean,
+    annotationIdMode?: AnnotationIdMode,
     /**
      * Only works on iOS. Defaults to `true`.
      */
@@ -80,11 +147,11 @@ export interface PdfProps {
     onPressLink?: (url: string) => void,
     onAutoScrollEnd?: () => void,
     onTextSelectionChange?: (event: TextSelectionChangeEvent) => void,
-    onAutoScrollEnd?: () => void,
 }
 
 export interface PdfRef {
     setPage(pageNumber: number): void
+    saveAnnotations(): Promise<AnnotationDocument>
     /**
      * 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

@@ -57,6 +57,11 @@ 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', 'underline', 'strikeout']),
+        annotationEditable: PropTypes.bool,
+        annotationIdMode: PropTypes.oneOf(['auto', 'manual']),
         onLoadComplete: PropTypes.func,
         onPageChanged: PropTypes.func,
         onError: PropTypes.func,
@@ -96,6 +101,11 @@ export default class Pdf extends Component {
         trustAllCerts: true,
         usePDFKit: true,
         singlePage: false,
+        annotations: null,
+        annotationMode: false,
+        annotationTool: 'select',
+        annotationEditable: true,
+        annotationIdMode: 'auto',
         onLoadProgress: (percent) => {
         },
         onLoadComplete: (numberOfPages, path) => {
@@ -127,6 +137,7 @@ export default class Pdf extends Component {
         };
 
         this.lastRNBFTask = null;
+        this._annotationSavePromise = null;
 
     }
 
@@ -156,6 +167,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 +387,42 @@ 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);
+                }
+            }
+        });
+    }
+
     startAutoScroll( dpPerSecond = 15, resumeDelay = 3000 ) {
         this._isAutoScrollActive = true;
         if (!!global?.nativeFabricUIManager) {
@@ -465,6 +516,27 @@ 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') {
+                message[1] = message.slice(1).join('|');
+
+                let annotationDocument;
+                try {
+                    annotationDocument = message[1] ? JSON.parse(message[1]) : null;
+                } catch (e) {
+                    annotationDocument = message[1];
+                }
+
+                if (this._annotationSavePromise) {
+                    this._annotationSavePromise.resolve(annotationDocument);
+                    this._annotationSavePromise = null;
+                }
+            } else if (message[0] === 'annotationSaveError') {
+                message[1] = message.slice(1).join('|');
+
+                if (this._annotationSavePromise) {
+                    this._annotationSavePromise.reject(new Error(message[1] || 'Annotation save failed'));
+                    this._annotationSavePromise = null;
+                }
             }
         }
 
@@ -476,7 +548,22 @@ export default class Pdf extends Component {
 
     };
 
+    _getNativeAnnotations = () => {
+        if (!this.props.annotations) {
+            return null;
+        }
+
+        try {
+            return JSON.stringify(this.props.annotations);
+        } catch (error) {
+            this._onError(error);
+            return null;
+        }
+    };
+
     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 +579,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 +589,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' | 'underline' | 'strikeout';
+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' | 'underline' | 'strikeout',
+  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,11 @@ export type TableContent = {
 
 export type Props = {
   renderActivityIndicator?: (progress: number) => Node,
+  annotations?: AnnotationDocument,
+  annotationMode?: boolean,
+  annotationTool?: AnnotationTool,
+  annotationEditable?: boolean,
+  annotationIdMode?: AnnotationIdMode,
   enableAnnotationRendering?: boolean,
   enableAntialiasing?: boolean,
   enablePaging?: boolean,
@@ -64,4 +131,5 @@ export type Props = {
 
 declare export default class Pdf extends Component<Props> {
   setPage: (pageNumber: number) => void;
+  saveAnnotations: () => Promise<AnnotationDocument>;
 }

package/ios/RNPDFPdf/RNPDFPdfView.h

@@ -49,6 +49,11 @@ 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) int fitPolicy;
 @property(nonatomic) int spacing;
 @property(nonatomic, strong) NSString *password;
@@ -56,6 +61,8 @@ UIView
 
 @property(nonatomic, copy) RCTBubblingEventBlock onChange;
 
+- (void)saveAnnotations;
+
 @property(nonatomic, strong) NSString *selectedText;
 @property(nonatomic) BOOL enableTextSelection;
 @property(nonatomic, strong) PDFSelection *currentPDFSelection;