@june24/expo-pdf-reader 0.1.3 → 0.1.5

package/build/ExpoPdfReader.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpoPdfReader.types.js","sourceRoot":"","sources":["../src/ExpoPdfReader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nexport type AnnotationTool = 'none' | 'pen' | 'highlighter' | 'text' | 'note' | 'eraser';\n\nexport type DisplayMode = 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous';\n\nexport type Point = { x: number; y: number };\n\nexport type Annotation = {\n  type: 'pen' | 'highlighter' | 'text';\n  color: string;\n  page?: number;\n  points?: Point[][]; // For pen/highlighter\n  width?: number; // Stroke width or font size for text? Let's use fontSize for text explicitly\n  text?: string; // For text\n  fontSize?: number; // For text\n  x?: number; // For text\n  y?: number; // For text\n};\n\nexport type AnnotationChangeEvent = {\n  nativeEvent: {\n    annotations: Annotation[];\n  };\n};\n\nexport type PageChangeEvent = {\n  nativeEvent: {\n    page: number;\n    total: number;\n  };\n};\n\nexport type ScrollEvent = {\n  nativeEvent: {\n    x: number;\n    y: number;\n    contentWidth: number;\n    contentHeight: number;\n    layoutWidth: number;\n    layoutHeight: number;\n  };\n};\n\nexport type SearchResult = {\n  page: number;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  textSnippet?: string;\n};\n\n// Public API: group drawing configuration into a single object\nexport type AnnotationOptions = {\n  tool?: AnnotationTool;\n  color?: string; // Hex color\n  fontSize?: number;\n  text?: string;\n  strokeWidth?: number; // line thickness for pen/highlighter\n};\n\n// Props exposed to JS users of the component\nexport type ExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode; // 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous'\n  initialPage?: number; // starting page index (0-based)\n  minZoom?: number;\n  maxZoom?: number;\n  annotationOptions?: AnnotationOptions;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n// Internal props that the native view actually receives.\n// This keeps backwards-compat with the native module while giving\n// JS a cleaner grouped API via `annotationOptions`.\nexport type NativeExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode;\n  initialPage?: number;\n  minZoom?: number;\n  maxZoom?: number;\n  annotationTool?: AnnotationTool;\n  annotationColor?: string; // Hex color\n  annotationFontSize?: number;\n  annotationText?: string; // Default text to place\n   // Native-only props derived from AnnotationOptions\n  annotationStrokeWidth?: number;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n"]}
+{"version":3,"file":"ExpoPdfReader.types.js","sourceRoot":"","sources":["../src/ExpoPdfReader.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ViewProps, StyleProp, ViewStyle } from 'react-native';\n\nexport type AnnotationTool = 'none' | 'pen' | 'highlighter' | 'text' | 'note' | 'eraser';\n\nexport type DisplayMode = 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous';\n\nexport type Point = { x: number; y: number };\n\nexport type Annotation = {\n  type: 'pen' | 'highlighter' | 'text';\n  color: string;\n  page?: number;\n  points?: Point[][]; // For pen/highlighter\n  width?: number; // Stroke width or font size for text? Let's use fontSize for text explicitly\n  text?: string; // For text\n  fontSize?: number; // For text\n  x?: number; // For text\n  y?: number; // For text\n};\n\nexport type AnnotationChangeEvent = {\n  nativeEvent: {\n    annotations: Annotation[];\n  };\n};\n\nexport type PageChangeEvent = {\n  nativeEvent: {\n    page: number;\n    total: number;\n  };\n};\n\nexport type ScrollEvent = {\n  nativeEvent: {\n    x: number;\n    y: number;\n    contentWidth: number;\n    contentHeight: number;\n    layoutWidth: number;\n    layoutHeight: number;\n  };\n};\n\nexport type SearchResult = {\n  page: number;\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  textSnippet?: string;\n};\n\n// Public API: group drawing configuration into a single object\nexport type AnnotationOptions = {\n  tool?: AnnotationTool;\n  color?: string; // Hex color\n  fontSize?: number;\n  text?: string;\n  strokeWidth?: number; // line thickness for pen/highlighter\n};\n\n// Props exposed to JS users of the component\nexport type ExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode; // 'single' | 'continuous' | 'twoUp' | 'twoUpContinuous'\n  initialPage?: number; // starting page index (0-based)\n  minZoom?: number;\n  maxZoom?: number;\n  annotationOptions?: AnnotationOptions;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n// Internal props that the native view actually receives.\n// This keeps backwards-compat with the native module while giving\n// JS a cleaner grouped API via `annotationOptions`.\nexport type NativeExpoPdfReaderViewProps = ViewProps & {\n  url: string;\n  style?: StyleProp<ViewStyle>;\n  displayMode?: DisplayMode;\n  initialPage?: number;\n  minZoom?: number;\n  maxZoom?: number;\n  annotationTool?: AnnotationTool;\n  annotationColor?: string; // Hex color\n  annotationFontSize?: number;\n  annotationText?: string; // Default text to place\n  // Native-only props derived from AnnotationOptions\n  annotationStrokeWidth?: number;\n  initialAnnotations?: Annotation[];\n  onAnnotationChange?: (event: AnnotationChangeEvent) => void;\n  onPageChange?: (event: PageChangeEvent) => void;\n  onScroll?: (event: ScrollEvent) => void;\n};\n\n"]}

package/ios/ExpoPdfReaderView.swift

@@ -23,6 +23,9 @@ class ExpoPdfReaderView: ExpoView, UIGestureRecognizerDelegate {
   private var currentAnnotation: PDFAnnotation?
   private var currentPath: UIBezierPath?
   
+  // Drawing overlay layer for live preview
+  private var drawingLayer: CAShapeLayer?
+  
   // Undo/Redo stacks
   private var undoStack: [PDFAnnotation] = []
   private var redoStack: [PDFAnnotation] = []
@@ -501,6 +504,7 @@ class ExpoPdfReaderView: ExpoView, UIGestureRecognizerDelegate {
     guard let page = pdfView.currentPage else { return }
     let location = gesture.location(in: pdfView)
     let convertedPoint = pdfView.convert(location, to: page)
+    let viewLocation = location // Keep view coordinates for drawing layer
     
     // Handle eraser
     if currentTool == "eraser" {
@@ -552,38 +556,120 @@ class ExpoPdfReaderView: ExpoView, UIGestureRecognizerDelegate {
     switch gesture.state {
     case .began:
       currentPath = UIBezierPath()
-      currentPath?.move(to: convertedPoint)
+      currentPath?.move(to: viewLocation) // Use view coordinates for drawing layer
+      
+      // Create drawing layer for live preview in view coordinates
+      if drawingLayer == nil {
+          drawingLayer = CAShapeLayer()
+          drawingLayer?.fillColor = UIColor.clear.cgColor
+          drawingLayer?.lineCap = .round
+          drawingLayer?.lineJoin = .round
+          pdfView.layer.addSublayer(drawingLayer!)
+      }
+      
+    case .changed:
+      guard let path = currentPath else { return }
+      path.addLine(to: viewLocation) // Use view coordinates for drawing layer
+      
+      // Update drawing layer to show live preview
+      drawingLayer?.path = path.cgPath
+      if currentTool == "pen" {
+          drawingLayer?.strokeColor = currentColor.cgColor
+          drawingLayer?.lineWidth = currentStrokeWidth
+          drawingLayer?.opacity = 1.0
+      } else if currentTool == "highlighter" {
+          drawingLayer?.strokeColor = currentColor.cgColor
+          drawingLayer?.lineWidth = currentStrokeWidth * 3.0
+          drawingLayer?.opacity = 0.3
+      }
+      
+    case .ended:
+      guard let viewPath = currentPath else {
+          print("❌ No path to save!")
+          return
+      }
+      viewPath.addLine(to: viewLocation) // Complete view path
+      
+      print("✏️ Pen gesture ended, saving annotation...")
+      print("   Tool: \(currentTool)")
+      print("   Color: \(currentColor)")
+      print("   Stroke width: \(currentStrokeWidth)")
+      
+      // Remove drawing layer
+      drawingLayer?.removeFromSuperlayer()
+      drawingLayer = nil
+      
+      // Convert view path to page coordinates
+      let pagePathForAnnotation = UIBezierPath()
+      viewPath.cgPath.applyWithBlock { element in
+          let points = element.pointee.points
+          switch element.pointee.type {
+          case .moveToPoint:
+              let pagePoint = self.pdfView.convert(points[0], to: page)
+              pagePathForAnnotation.move(to: pagePoint)
+          case .addLineToPoint:
+              let pagePoint = self.pdfView.convert(points[0], to: page)
+              pagePathForAnnotation.addLine(to: pagePoint)
+          case .addQuadCurveToPoint:
+              let cp = self.pdfView.convert(points[0], to: page)
+              let pt = self.pdfView.convert(points[1], to: page)
+              pagePathForAnnotation.addQuadCurve(to: pt, controlPoint: cp)
+          case .addCurveToPoint:
+              let cp1 = self.pdfView.convert(points[0], to: page)
+              let cp2 = self.pdfView.convert(points[1], to: page)
+              let pt = self.pdfView.convert(points[2], to: page)
+              pagePathForAnnotation.addCurve(to: pt, controlPoint1: cp1, controlPoint2: cp2)
+          case .closeSubpath:
+              pagePathForAnnotation.close()
+          @unknown default:
+              break
+          }
+      }
       
-      // Create annotation
-      let bounds = page.bounds(for: pdfView.displayBox)
+      // Calculate proper bounds from path
+      var pathBounds = pagePathForAnnotation.bounds
+      // Expand bounds slightly to accommodate stroke width
+      let expansion = max(currentStrokeWidth * 2, 20)
+      pathBounds = pathBounds.insetBy(dx: -expansion, dy: -expansion)
       
       if currentTool == "pen" {
-          let annotation = PDFAnnotation(bounds: bounds, forType: .ink, withProperties: nil)
+          let annotation = PDFAnnotation(bounds: pathBounds, forType: .ink, withProperties: nil)
           annotation.color = currentColor
           let border = PDFBorder()
           border.lineWidth = currentStrokeWidth
           annotation.border = border
-          annotation.add(currentPath!)
+          annotation.add(pagePathForAnnotation)
+          
+          print("✅ Adding pen annotation to page")
+          print("   Bounds: \(pathBounds)")
+          print("   Paths count: \(annotation.paths?.count ?? 0)")
+          
           page.addAnnotation(annotation)
-          currentAnnotation = annotation
+          
+          print("   Total annotations on page: \(page.annotations.count)")
+          
+          // Force PDF view to update
+          pdfView.setNeedsDisplay()
       }
       else if currentTool == "highlighter" {
-           let annotation = PDFAnnotation(bounds: bounds, forType: .ink, withProperties: nil)
+           let annotation = PDFAnnotation(bounds: pathBounds, forType: .ink, withProperties: nil)
            annotation.color = currentColor.withAlphaComponent(0.3)
           let border = PDFBorder()
           border.lineWidth = currentStrokeWidth * 3.0
           annotation.border = border
-           annotation.add(currentPath!)
+           annotation.add(pagePathForAnnotation)
+           
+           print("✅ Adding highlighter annotation to page")
+           print("   Bounds: \(pathBounds)")
+           
            page.addAnnotation(annotation)
-           currentAnnotation = annotation
+           
+           print("   Total annotations on page: \(page.annotations.count)")
+           
+           // Force PDF view to update
+           pdfView.setNeedsDisplay()
       }
       
-    case .changed:
-      guard let path = currentPath, let annotation = currentAnnotation else { return }
-      path.addLine(to: convertedPoint)
-      annotation.add(path) // Update path
-      
-    case .ended, .cancelled:
       // Clear redo stack when new annotation is added
       redoStack.removeAll()
       
@@ -591,10 +677,19 @@ class ExpoPdfReaderView: ExpoView, UIGestureRecognizerDelegate {
       currentAnnotation = nil
       
       // Emit event
+      let allAnnotations = getAnnotations()
+      print("📤 Emitting annotation change event: \(allAnnotations.count) annotations")
       onAnnotationChange([
-        "annotations": getAnnotations()
+        "annotations": allAnnotations
       ])
       
+    case .cancelled:
+      // Remove drawing layer and clear without adding annotation
+      drawingLayer?.removeFromSuperlayer()
+      drawingLayer = nil
+      currentPath = nil
+      currentAnnotation = nil
+      
     default:
       break
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@june24/expo-pdf-reader",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A PDF reader for Expo apps with annotation and zoom controls",
   "homepage": "git@gitlab.com:june_241/expo-pdf-reader.git",
   "main": "build/index.js",