react-pdf-highlighter-plus 1.0.0

package/dist/esm/components/ShapeCanvas.js

@@ -0,0 +1,205 @@
+import React, { useRef, useEffect, useCallback, useState, } from "react";
+import { viewportPositionToScaled } from "../lib/coordinates";
+import "../style/ShapeCanvas.css";
+/**
+ * A transparent overlay for creating shape annotations on PDF pages.
+ * Supports mouse and touch input with click-and-drag to define shape bounds.
+ *
+ * @category Component
+ */
+export const ShapeCanvas = ({ isActive, shapeType, strokeColor = "#000000", strokeWidth = 2, viewer, onComplete, onCancel, }) => {
+    const containerRef = useRef(null);
+    const [startPoint, setStartPoint] = useState(null);
+    const [currentPoint, setCurrentPoint] = useState(null);
+    const [pageNumber, setPageNumber] = useState(null);
+    const [pageRect, setPageRect] = useState(null);
+    const isDrawingRef = useRef(false);
+    // Find which page the user is drawing on
+    const findPageFromPoint = useCallback((clientX, clientY) => {
+        if (!viewer)
+            return null;
+        for (let i = 0; i < viewer.pagesCount; i++) {
+            const pageView = viewer.getPageView(i);
+            if (!pageView?.div)
+                continue;
+            const rect = pageView.div.getBoundingClientRect();
+            if (clientX >= rect.left &&
+                clientX <= rect.right &&
+                clientY >= rect.top &&
+                clientY <= rect.bottom) {
+                return {
+                    pageNumber: i + 1,
+                    element: pageView.div,
+                    rect,
+                };
+            }
+        }
+        return null;
+    }, [viewer]);
+    // Handle mouse/touch down
+    const handleStart = useCallback((clientX, clientY) => {
+        const pageInfo = findPageFromPoint(clientX, clientY);
+        if (!pageInfo)
+            return;
+        console.log("ShapeCanvas: Started drawing on page", pageInfo.pageNumber);
+        setPageNumber(pageInfo.pageNumber);
+        setPageRect(pageInfo.rect);
+        isDrawingRef.current = true;
+        const pos = {
+            x: clientX - pageInfo.rect.left,
+            y: clientY - pageInfo.rect.top,
+        };
+        setStartPoint(pos);
+        setCurrentPoint(pos);
+    }, [findPageFromPoint]);
+    // Handle mouse/touch move
+    const handleMove = useCallback((clientX, clientY) => {
+        if (!isDrawingRef.current || !pageRect)
+            return;
+        const pos = {
+            x: clientX - pageRect.left,
+            y: clientY - pageRect.top,
+        };
+        setCurrentPoint(pos);
+    }, [pageRect]);
+    // Handle mouse/touch end
+    const handleEnd = useCallback(() => {
+        if (!isDrawingRef.current || !startPoint || !currentPoint || pageNumber === null || !viewer) {
+            isDrawingRef.current = false;
+            setStartPoint(null);
+            setCurrentPoint(null);
+            return;
+        }
+        isDrawingRef.current = false;
+        // Calculate bounding box
+        const minX = Math.min(startPoint.x, currentPoint.x);
+        const minY = Math.min(startPoint.y, currentPoint.y);
+        const maxX = Math.max(startPoint.x, currentPoint.x);
+        const maxY = Math.max(startPoint.y, currentPoint.y);
+        const width = maxX - minX;
+        const height = maxY - minY;
+        // Minimum size check
+        if (width < 10 || height < 10) {
+            console.log("ShapeCanvas: Shape too small, ignoring");
+            setStartPoint(null);
+            setCurrentPoint(null);
+            return;
+        }
+        console.log("ShapeCanvas: Creating shape", shapeType, "at", { minX, minY, width, height });
+        // Create viewport position
+        const viewportPosition = {
+            boundingRect: {
+                left: minX,
+                top: minY,
+                width: width,
+                height: height,
+                pageNumber: pageNumber,
+            },
+            rects: [],
+        };
+        const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
+        // For arrows, calculate start/end points as percentages within the bounding box
+        let shapeData = {
+            shapeType,
+            strokeColor,
+            strokeWidth,
+        };
+        if (shapeType === "arrow") {
+            // Calculate start and end points relative to bounding box (0-1 range)
+            shapeData.startPoint = {
+                x: (startPoint.x - minX) / width,
+                y: (startPoint.y - minY) / height,
+            };
+            shapeData.endPoint = {
+                x: (currentPoint.x - minX) / width,
+                y: (currentPoint.y - minY) / height,
+            };
+            console.log("ShapeCanvas: Arrow points", shapeData.startPoint, "->", shapeData.endPoint);
+        }
+        console.log("ShapeCanvas: Created shape at position", scaledPosition);
+        onComplete(scaledPosition, shapeData);
+        // Reset state
+        setStartPoint(null);
+        setCurrentPoint(null);
+        setPageNumber(null);
+        setPageRect(null);
+    }, [startPoint, currentPoint, pageNumber, viewer, shapeType, strokeColor, strokeWidth, onComplete]);
+    // Mouse event handlers
+    const handleMouseDown = useCallback((e) => {
+        e.preventDefault();
+        handleStart(e.clientX, e.clientY);
+    }, [handleStart]);
+    const handleMouseMove = useCallback((e) => {
+        handleMove(e.clientX, e.clientY);
+    }, [handleMove]);
+    const handleMouseUp = useCallback(() => {
+        handleEnd();
+    }, [handleEnd]);
+    // Touch event handlers
+    const handleTouchStart = useCallback((e) => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            handleStart(e.touches[0].clientX, e.touches[0].clientY);
+        }
+    }, [handleStart]);
+    const handleTouchMove = useCallback((e) => {
+        e.preventDefault();
+        if (e.touches.length > 0) {
+            handleMove(e.touches[0].clientX, e.touches[0].clientY);
+        }
+    }, [handleMove]);
+    const handleTouchEnd = useCallback(() => {
+        handleEnd();
+    }, [handleEnd]);
+    // Handle keyboard events
+    useEffect(() => {
+        if (!isActive)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.code === "Escape") {
+                console.log("ShapeCanvas: Cancelled via Escape");
+                onCancel();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isActive, onCancel]);
+    // Render shape preview
+    const renderShapePreview = () => {
+        if (!startPoint || !currentPoint || !pageRect)
+            return null;
+        const minX = Math.min(startPoint.x, currentPoint.x);
+        const minY = Math.min(startPoint.y, currentPoint.y);
+        const width = Math.abs(currentPoint.x - startPoint.x);
+        const height = Math.abs(currentPoint.y - startPoint.y);
+        const svgStyle = {
+            position: "fixed",
+            left: pageRect.left,
+            top: pageRect.top,
+            width: pageRect.width,
+            height: pageRect.height,
+            pointerEvents: "none",
+            zIndex: 1001,
+        };
+        return (React.createElement("svg", { style: svgStyle },
+            shapeType === "rectangle" && (React.createElement("rect", { x: minX, y: minY, width: width, height: height, stroke: strokeColor, strokeWidth: strokeWidth, fill: "none" })),
+            shapeType === "circle" && (React.createElement("ellipse", { cx: minX + width / 2, cy: minY + height / 2, rx: width / 2, ry: height / 2, stroke: strokeColor, strokeWidth: strokeWidth, fill: "none" })),
+            shapeType === "arrow" && (React.createElement(React.Fragment, null,
+                React.createElement("defs", null,
+                    React.createElement("marker", { id: "shape-canvas-arrowhead", markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" },
+                        React.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor }))),
+                React.createElement("line", { x1: startPoint.x, y1: startPoint.y, x2: currentPoint.x, y2: currentPoint.y, stroke: strokeColor, strokeWidth: strokeWidth, markerEnd: "url(#shape-canvas-arrowhead)" })))));
+    };
+    if (!isActive)
+        return null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: containerRef, className: "ShapeCanvas", onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd }),
+        renderShapePreview(),
+        React.createElement("div", { className: "ShapeCanvas__controls" },
+            React.createElement("div", { className: "ShapeCanvas__hint" },
+                "Click and drag to draw a ",
+                shapeType,
+                ". Press Escape to cancel."),
+            React.createElement("button", { type: "button", className: "ShapeCanvas__cancelButton", onClick: onCancel }, "Cancel"))));
+};
+//# sourceMappingURL=ShapeCanvas.js.map

package/dist/esm/components/ShapeCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeCanvas.js","sourceRoot":"","sources":["../../../src/components/ShapeCanvas.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ShapeHighlight.d.ts

@@ -0,0 +1,107 @@
+import React, { CSSProperties, MouseEvent, ReactNode } from "react";
+import "../style/ShapeHighlight.css";
+import type { LTWHP, ShapeType, ViewportHighlight } from "../types";
+/**
+ * Style options for shape highlight appearance.
+ */
+export interface ShapeStyle {
+    strokeColor?: string;
+    strokeWidth?: number;
+}
+/**
+ * The props type for {@link ShapeHighlight}.
+ *
+ * @category Component Properties
+ */
+export interface ShapeHighlightProps {
+    /**
+     * The highlight to be rendered as a {@link ShapeHighlight}.
+     */
+    highlight: ViewportHighlight;
+    /**
+     * A callback triggered whenever the highlight position or size changes.
+     *
+     * @param rect - The updated highlight area.
+     */
+    onChange?(rect: LTWHP): void;
+    /**
+     * Has the highlight been auto-scrolled into view?
+     */
+    isScrolledTo?: boolean;
+    /**
+     * react-rnd bounds on the highlight area.
+     */
+    bounds?: string | Element;
+    /**
+     * A callback triggered on context menu.
+     */
+    onContextMenu?(event: MouseEvent<HTMLDivElement>): void;
+    /**
+     * Event called when editing begins (drag or resize).
+     */
+    onEditStart?(): void;
+    /**
+     * Event called when editing ends.
+     */
+    onEditEnd?(): void;
+    /**
+     * Custom styling for the container.
+     */
+    style?: CSSProperties;
+    /**
+     * The type of shape to render.
+     * @default "rectangle"
+     */
+    shapeType?: ShapeType;
+    /**
+     * Stroke color for the shape.
+     * @default "#000000"
+     */
+    strokeColor?: string;
+    /**
+     * Stroke width for the shape.
+     * @default 2
+     */
+    strokeWidth?: number;
+    /**
+     * Callback triggered when the style changes.
+     */
+    onStyleChange?(style: ShapeStyle): void;
+    /**
+     * Callback triggered when the delete button is clicked.
+     */
+    onDelete?(): void;
+    /**
+     * Custom style icon. Replaces the default palette icon.
+     */
+    styleIcon?: ReactNode;
+    /**
+     * Custom delete icon. Replaces the default trash icon.
+     */
+    deleteIcon?: ReactNode;
+    /**
+     * Custom color presets for the style panel.
+     */
+    colorPresets?: string[];
+    /**
+     * For arrows: start point as percentage of bounding box (0-1).
+     */
+    startPoint?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * For arrows: end point as percentage of bounding box (0-1).
+     */
+    endPoint?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * Renders a draggable, resizable shape annotation.
+ * Supports rectangle, circle/ellipse, and arrow shapes.
+ *
+ * @category Component
+ */
+export declare const ShapeHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, shapeType, strokeColor, strokeWidth, onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets, startPoint, endPoint, }: ShapeHighlightProps) => React.JSX.Element;

package/dist/esm/components/ShapeHighlight.js

@@ -0,0 +1,140 @@
+import React, { useState, useRef, useEffect, } from "react";
+import { Rnd } from "react-rnd";
+import { getPageFromElement } from "../lib/pdfjs-dom";
+import "../style/ShapeHighlight.css";
+// Default icons
+const DefaultStyleIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" })));
+const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
+    React.createElement("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" })));
+// Default color presets for shapes
+const DEFAULT_COLOR_PRESETS = [
+    "#000000", // Black
+    "#FF0000", // Red
+    "#0000FF", // Blue
+    "#00AA00", // Green
+    "#FF6600", // Orange
+];
+// Stroke width options
+const STROKE_WIDTHS = [
+    { label: "Thin", value: 1 },
+    { label: "Medium", value: 2 },
+    { label: "Thick", value: 4 },
+];
+/**
+ * Renders a draggable, resizable shape annotation.
+ * Supports rectangle, circle/ellipse, and arrow shapes.
+ *
+ * @category Component
+ */
+export const ShapeHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, shapeType = "rectangle", strokeColor = "#000000", strokeWidth = 2, onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets = DEFAULT_COLOR_PRESETS, startPoint, endPoint, }) => {
+    const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const stylePanelRef = useRef(null);
+    // Close style panel when clicking outside
+    useEffect(() => {
+        if (!isStylePanelOpen)
+            return;
+        const handleClickOutside = (e) => {
+            if (stylePanelRef.current &&
+                !stylePanelRef.current.contains(e.target)) {
+                setIsStylePanelOpen(false);
+            }
+        };
+        // Delay adding listener to avoid immediate close
+        const timeoutId = setTimeout(() => {
+            document.addEventListener("mousedown", handleClickOutside);
+        }, 0);
+        return () => {
+            clearTimeout(timeoutId);
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isStylePanelOpen]);
+    const highlightClass = isScrolledTo ? "ShapeHighlight--scrolledTo" : "";
+    // Generate key based on position for Rnd remount on position changes
+    const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
+    // Generate unique ID for SVG markers
+    const markerId = `arrowhead-${highlight.id}`;
+    // Render the shape SVG
+    const renderShape = (width, height) => {
+        switch (shapeType) {
+            case "rectangle":
+                return (React.createElement("svg", { className: "ShapeHighlight__svg", width: width, height: height, viewBox: `0 0 ${width} ${height}` },
+                    React.createElement("rect", { x: strokeWidth / 2, y: strokeWidth / 2, width: width - strokeWidth, height: height - strokeWidth, stroke: strokeColor, strokeWidth: strokeWidth, fill: "none" })));
+            case "circle":
+                return (React.createElement("svg", { className: "ShapeHighlight__svg", width: width, height: height, viewBox: `0 0 ${width} ${height}` },
+                    React.createElement("ellipse", { cx: width / 2, cy: height / 2, rx: width / 2 - strokeWidth / 2, ry: height / 2 - strokeWidth / 2, stroke: strokeColor, strokeWidth: strokeWidth, fill: "none" })));
+            case "arrow": {
+                // Use stored start/end points if available, otherwise default to left-to-right
+                const x1 = startPoint ? startPoint.x * width : strokeWidth;
+                const y1 = startPoint ? startPoint.y * height : height / 2;
+                const x2 = endPoint ? endPoint.x * width : width - strokeWidth - 10;
+                const y2 = endPoint ? endPoint.y * height : height / 2;
+                return (React.createElement("svg", { className: "ShapeHighlight__svg", width: width, height: height, viewBox: `0 0 ${width} ${height}` },
+                    React.createElement("defs", null,
+                        React.createElement("marker", { id: markerId, markerWidth: "10", markerHeight: "7", refX: "9", refY: "3.5", orient: "auto" },
+                            React.createElement("polygon", { points: "0 0, 10 3.5, 0 7", fill: strokeColor }))),
+                    React.createElement("line", { x1: x1, y1: y1, x2: x2, y2: y2, stroke: strokeColor, strokeWidth: strokeWidth, markerEnd: `url(#${markerId})` })));
+            }
+            default:
+                return null;
+        }
+    };
+    return (React.createElement("div", { className: `ShapeHighlight ${highlightClass}`, onContextMenu: onContextMenu },
+        (onStyleChange || onDelete) && (React.createElement("div", { className: "ShapeHighlight__toolbar-wrapper", style: {
+                position: "absolute",
+                left: highlight.position.boundingRect.left,
+                top: highlight.position.boundingRect.top - 28,
+                paddingBottom: 12,
+            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
+            React.createElement("div", { className: `ShapeHighlight__toolbar ${isHovered || isStylePanelOpen ? "ShapeHighlight__toolbar--visible" : ""}` },
+                onStyleChange && (React.createElement("button", { className: "ShapeHighlight__style-button", onClick: (e) => {
+                        e.stopPropagation();
+                        setIsStylePanelOpen(!isStylePanelOpen);
+                    }, title: "Change style", type: "button" }, styleIcon || React.createElement(DefaultStyleIcon, null))),
+                onDelete && (React.createElement("button", { className: "ShapeHighlight__delete-button", onClick: (e) => {
+                        e.stopPropagation();
+                        onDelete();
+                    }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
+            isStylePanelOpen && onStyleChange && (React.createElement("div", { className: "ShapeHighlight__style-panel", ref: stylePanelRef, onClick: (e) => e.stopPropagation() },
+                React.createElement("div", { className: "ShapeHighlight__style-row" },
+                    React.createElement("label", null, "Color"),
+                    React.createElement("div", { className: "ShapeHighlight__color-options" },
+                        React.createElement("div", { className: "ShapeHighlight__color-presets" }, colorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `ShapeHighlight__color-preset ${strokeColor === c ? "active" : ""}`, style: { backgroundColor: c }, onClick: () => onStyleChange({ strokeColor: c }), title: c })))),
+                        React.createElement("input", { type: "color", value: strokeColor, onChange: (e) => {
+                                onStyleChange({ strokeColor: e.target.value });
+                            } }))),
+                React.createElement("div", { className: "ShapeHighlight__style-row" },
+                    React.createElement("label", null, "Width"),
+                    React.createElement("div", { className: "ShapeHighlight__width-options" }, STROKE_WIDTHS.map((w) => (React.createElement("button", { key: w.value, type: "button", className: `ShapeHighlight__width-button ${strokeWidth === w.value ? "active" : ""}`, onClick: () => onStyleChange({ strokeWidth: w.value }), title: w.label }, w.label))))))))),
+        React.createElement(Rnd, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: "ShapeHighlight__rnd", onDragStop: (_, data) => {
+                const boundingRect = {
+                    ...highlight.position.boundingRect,
+                    top: data.y,
+                    left: data.x,
+                };
+                onChange?.(boundingRect);
+                onEditEnd?.();
+            }, onDragStart: onEditStart, onResizeStop: (_e, _direction, ref, _delta, position) => {
+                const boundingRect = {
+                    top: position.y,
+                    left: position.x,
+                    width: ref.offsetWidth,
+                    height: ref.offsetHeight,
+                    pageNumber: getPageFromElement(ref)?.number ||
+                        highlight.position.boundingRect.pageNumber,
+                };
+                onChange?.(boundingRect);
+                onEditEnd?.();
+            }, onResizeStart: onEditStart, default: {
+                x: highlight.position.boundingRect.left,
+                y: highlight.position.boundingRect.top,
+                width: highlight.position.boundingRect.width || 100,
+                height: highlight.position.boundingRect.height || 100,
+            }, minWidth: 20, minHeight: 20, key: key, bounds: bounds, lockAspectRatio: shapeType === "circle", onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+            }, style: style },
+            React.createElement("div", { className: "ShapeHighlight__container" }, renderShape(highlight.position.boundingRect.width || 100, highlight.position.boundingRect.height || 100)))));
+};
+//# sourceMappingURL=ShapeHighlight.js.map

package/dist/esm/components/ShapeHighlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapeHighlight.js","sourceRoot":"","sources":["../../../src/components/ShapeHighlight.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/SignaturePad.d.ts

@@ -0,0 +1,40 @@
+import React from "react";
+import "../style/SignaturePad.css";
+/**
+ * The props type for {@link SignaturePad}.
+ *
+ * @category Component Properties
+ */
+export interface SignaturePadProps {
+    /**
+     * Whether the signature pad modal is open.
+     */
+    isOpen: boolean;
+    /**
+     * Callback when signature is completed.
+     *
+     * @param dataUrl - The signature as a PNG data URL.
+     */
+    onComplete: (dataUrl: string) => void;
+    /**
+     * Callback when the modal is closed/cancelled.
+     */
+    onClose: () => void;
+    /**
+     * Canvas width in pixels.
+     * @default 400
+     */
+    width?: number;
+    /**
+     * Canvas height in pixels.
+     * @default 200
+     */
+    height?: number;
+}
+/**
+ * A modal component with a canvas for drawing signatures.
+ * Supports both mouse and touch input.
+ *
+ * @category Component
+ */
+export declare const SignaturePad: ({ isOpen, onComplete, onClose, width, height, }: SignaturePadProps) => React.JSX.Element | null;