react-pdf-highlighter-plus 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/esm/index.d.ts +1348 -19
  2. package/dist/esm/index.js +3557 -18
  3. package/dist/esm/index.js.map +1 -1
  4. package/package.json +3 -2
  5. package/dist/esm/components/AreaHighlight.d.ts +0 -82
  6. package/dist/esm/components/AreaHighlight.js +0 -109
  7. package/dist/esm/components/AreaHighlight.js.map +0 -1
  8. package/dist/esm/components/DrawingCanvas.d.ts +0 -48
  9. package/dist/esm/components/DrawingCanvas.js +0 -277
  10. package/dist/esm/components/DrawingCanvas.js.map +0 -1
  11. package/dist/esm/components/DrawingHighlight.d.ts +0 -70
  12. package/dist/esm/components/DrawingHighlight.js +0 -164
  13. package/dist/esm/components/DrawingHighlight.js.map +0 -1
  14. package/dist/esm/components/FreetextHighlight.d.ts +0 -112
  15. package/dist/esm/components/FreetextHighlight.js +0 -193
  16. package/dist/esm/components/FreetextHighlight.js.map +0 -1
  17. package/dist/esm/components/HighlightLayer.d.ts +0 -49
  18. package/dist/esm/components/HighlightLayer.js +0 -37
  19. package/dist/esm/components/HighlightLayer.js.map +0 -1
  20. package/dist/esm/components/ImageHighlight.d.ts +0 -63
  21. package/dist/esm/components/ImageHighlight.js +0 -65
  22. package/dist/esm/components/ImageHighlight.js.map +0 -1
  23. package/dist/esm/components/MonitoredHighlightContainer.d.ts +0 -37
  24. package/dist/esm/components/MonitoredHighlightContainer.js +0 -42
  25. package/dist/esm/components/MonitoredHighlightContainer.js.map +0 -1
  26. package/dist/esm/components/MouseMonitor.d.ts +0 -34
  27. package/dist/esm/components/MouseMonitor.js +0 -30
  28. package/dist/esm/components/MouseMonitor.js.map +0 -1
  29. package/dist/esm/components/MouseSelection.d.ts +0 -66
  30. package/dist/esm/components/MouseSelection.js +0 -122
  31. package/dist/esm/components/MouseSelection.js.map +0 -1
  32. package/dist/esm/components/PdfHighlighter.d.ts +0 -184
  33. package/dist/esm/components/PdfHighlighter.js +0 -410
  34. package/dist/esm/components/PdfHighlighter.js.map +0 -1
  35. package/dist/esm/components/PdfLoader.d.ts +0 -55
  36. package/dist/esm/components/PdfLoader.js +0 -57
  37. package/dist/esm/components/PdfLoader.js.map +0 -1
  38. package/dist/esm/components/ShapeCanvas.d.ts +0 -51
  39. package/dist/esm/components/ShapeCanvas.js +0 -205
  40. package/dist/esm/components/ShapeCanvas.js.map +0 -1
  41. package/dist/esm/components/ShapeHighlight.d.ts +0 -107
  42. package/dist/esm/components/ShapeHighlight.js +0 -140
  43. package/dist/esm/components/ShapeHighlight.js.map +0 -1
  44. package/dist/esm/components/SignaturePad.d.ts +0 -40
  45. package/dist/esm/components/SignaturePad.js +0 -138
  46. package/dist/esm/components/SignaturePad.js.map +0 -1
  47. package/dist/esm/components/TextHighlight.d.ts +0 -93
  48. package/dist/esm/components/TextHighlight.js +0 -115
  49. package/dist/esm/components/TextHighlight.js.map +0 -1
  50. package/dist/esm/components/TipContainer.d.ts +0 -27
  51. package/dist/esm/components/TipContainer.js +0 -58
  52. package/dist/esm/components/TipContainer.js.map +0 -1
  53. package/dist/esm/contexts/HighlightContext.d.ts +0 -44
  54. package/dist/esm/contexts/HighlightContext.js +0 -16
  55. package/dist/esm/contexts/HighlightContext.js.map +0 -1
  56. package/dist/esm/contexts/PdfHighlighterContext.d.ts +0 -89
  57. package/dist/esm/contexts/PdfHighlighterContext.js +0 -16
  58. package/dist/esm/contexts/PdfHighlighterContext.js.map +0 -1
  59. package/dist/esm/lib/coordinates.d.ts +0 -16
  60. package/dist/esm/lib/coordinates.js +0 -69
  61. package/dist/esm/lib/coordinates.js.map +0 -1
  62. package/dist/esm/lib/export-pdf.d.ts +0 -81
  63. package/dist/esm/lib/export-pdf.js +0 -511
  64. package/dist/esm/lib/export-pdf.js.map +0 -1
  65. package/dist/esm/lib/get-bounding-rect.d.ts +0 -3
  66. package/dist/esm/lib/get-bounding-rect.js +0 -35
  67. package/dist/esm/lib/get-bounding-rect.js.map +0 -1
  68. package/dist/esm/lib/get-client-rects.d.ts +0 -3
  69. package/dist/esm/lib/get-client-rects.js +0 -43
  70. package/dist/esm/lib/get-client-rects.js.map +0 -1
  71. package/dist/esm/lib/group-highlights-by-page.d.ts +0 -6
  72. package/dist/esm/lib/group-highlights-by-page.js +0 -23
  73. package/dist/esm/lib/group-highlights-by-page.js.map +0 -1
  74. package/dist/esm/lib/optimize-client-rects.d.ts +0 -3
  75. package/dist/esm/lib/optimize-client-rects.js +0 -65
  76. package/dist/esm/lib/optimize-client-rects.js.map +0 -1
  77. package/dist/esm/lib/pdfjs-dom.d.ts +0 -9
  78. package/dist/esm/lib/pdfjs-dom.js +0 -55
  79. package/dist/esm/lib/pdfjs-dom.js.map +0 -1
  80. package/dist/esm/lib/screenshot.d.ts +0 -4
  81. package/dist/esm/lib/screenshot.js +0 -24
  82. package/dist/esm/lib/screenshot.js.map +0 -1
  83. package/dist/esm/types.d.ts +0 -213
  84. package/dist/esm/types.js +0 -2
  85. package/dist/esm/types.js.map +0 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "react-pdf-highlighter-plus",
3
3
  "type": "module",
4
- "version": "1.0.3",
4
+ "version": "1.0.5",
5
5
  "description": "Set of modern React components for PDF highlighting",
6
6
  "author": "Edward Ha <quocvietha08@gmail.com>",
7
7
  "license": "MIT",
@@ -41,7 +41,7 @@
41
41
  "dev": "(cd ./example && vite --force)",
42
42
  "build": "npm run clean && npm i && npm run build:esm && npm run build:copy-styles && npm run build:example && npm run build:docs",
43
43
  "build:vercel": "npm run build:esm && npm run build:copy-styles && npm run build:example && npm run build:docs",
44
- "build:esm": "tsc",
44
+ "build:esm": "tsup",
45
45
  "build:copy-styles": "cp -r ./src/style ./dist/esm",
46
46
  "build:example": "(cd ./example && npm install && tsc && vite build && mkdir -p \"../public/\" && cp -r example-app ../public/)",
47
47
  "build:docs": "npx typedoc",
@@ -85,6 +85,7 @@
85
85
  "autoprefixer": "^10.4.22",
86
86
  "postcss": "^8.5.6",
87
87
  "tailwindcss": "^3.4.0",
88
+ "tsup": "^8.5.1",
88
89
  "typedoc": "latest",
89
90
  "typedoc-theme-category-nav": "latest",
90
91
  "typescript": "^5.3.2",
@@ -1,82 +0,0 @@
1
- import React, { CSSProperties, MouseEvent, ReactNode } from "react";
2
- import "../style/AreaHighlight.css";
3
- import type { LTWHP, ViewportHighlight } from "../types";
4
- /**
5
- * Style options for area highlight appearance.
6
- */
7
- export interface AreaHighlightStyle {
8
- highlightColor?: string;
9
- }
10
- /**
11
- * The props type for {@link AreaHighlight}.
12
- *
13
- * @category Component Properties
14
- */
15
- export interface AreaHighlightProps {
16
- /**
17
- * The highlight to be rendered as an {@link AreaHighlight}.
18
- */
19
- highlight: ViewportHighlight;
20
- /**
21
- * A callback triggered whenever the highlight area is either finished
22
- * being moved or resized.
23
- *
24
- * @param rect - The updated highlight area.
25
- */
26
- onChange?(rect: LTWHP): void;
27
- /**
28
- * Has the highlight been auto-scrolled into view? By default, this will render the highlight red.
29
- */
30
- isScrolledTo?: boolean;
31
- /**
32
- * react-rnd bounds on the highlight area. This is useful for preventing the user
33
- * moving the highlight off the viewer/page. See [react-rnd docs](https://github.com/bokuweb/react-rnd).
34
- */
35
- bounds?: string | Element;
36
- /**
37
- * A callback triggered whenever a context menu is opened on the highlight area.
38
- *
39
- * @param event - The mouse event associated with the context menu.
40
- */
41
- onContextMenu?(event: MouseEvent<HTMLDivElement>): void;
42
- /**
43
- * Event called whenever the user tries to move or resize an {@link AreaHighlight}.
44
- */
45
- onEditStart?(): void;
46
- /**
47
- * Custom styling to be applied to the {@link AreaHighlight} component.
48
- */
49
- style?: CSSProperties;
50
- /**
51
- * Background color for the highlight.
52
- * Default: "rgba(255, 226, 143, 1)" (yellow)
53
- */
54
- highlightColor?: string;
55
- /**
56
- * Callback triggered when the style changes.
57
- */
58
- onStyleChange?(style: AreaHighlightStyle): void;
59
- /**
60
- * Callback triggered when the delete button is clicked.
61
- */
62
- onDelete?(): void;
63
- /**
64
- * Custom style icon. Replaces the default palette icon.
65
- */
66
- styleIcon?: ReactNode;
67
- /**
68
- * Custom delete icon. Replaces the default trash icon.
69
- */
70
- deleteIcon?: ReactNode;
71
- /**
72
- * Custom color presets for the style panel.
73
- * Default: ["rgba(255, 226, 143, 1)", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"]
74
- */
75
- colorPresets?: string[];
76
- }
77
- /**
78
- * Renders a resizeable and interactive rectangular area for a highlight.
79
- *
80
- * @category Component
81
- */
82
- export declare const AreaHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, style, highlightColor, onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets, }: AreaHighlightProps) => React.JSX.Element;
@@ -1,109 +0,0 @@
1
- import React, { useState, useRef, useEffect, } from "react";
2
- import { getPageFromElement } from "../lib/pdfjs-dom";
3
- import "../style/AreaHighlight.css";
4
- import { Rnd } from "react-rnd";
5
- // Default icons
6
- const DefaultStyleIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
7
- 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" })));
8
- const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
9
- 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" })));
10
- // Default color presets
11
- const DEFAULT_COLOR_PRESETS = [
12
- "rgba(255, 226, 143, 1)", // Yellow (default)
13
- "#ffcdd2", // Light red
14
- "#c8e6c9", // Light green
15
- "#bbdefb", // Light blue
16
- "#e1bee7", // Light purple
17
- ];
18
- /**
19
- * Renders a resizeable and interactive rectangular area for a highlight.
20
- *
21
- * @category Component
22
- */
23
- export const AreaHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, style, highlightColor = "rgba(255, 226, 143, 1)", onStyleChange, onDelete, styleIcon, deleteIcon, colorPresets = DEFAULT_COLOR_PRESETS, }) => {
24
- const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
25
- const [isHovered, setIsHovered] = useState(false);
26
- const stylePanelRef = useRef(null);
27
- // Close style panel when clicking outside
28
- useEffect(() => {
29
- if (!isStylePanelOpen)
30
- return;
31
- const handleClickOutside = (e) => {
32
- if (stylePanelRef.current &&
33
- !stylePanelRef.current.contains(e.target)) {
34
- setIsStylePanelOpen(false);
35
- }
36
- };
37
- // Delay adding listener to avoid immediate close
38
- const timeoutId = setTimeout(() => {
39
- document.addEventListener("mousedown", handleClickOutside);
40
- }, 0);
41
- return () => {
42
- clearTimeout(timeoutId);
43
- document.removeEventListener("mousedown", handleClickOutside);
44
- };
45
- }, [isStylePanelOpen]);
46
- const highlightClass = isScrolledTo ? "AreaHighlight--scrolledTo" : "";
47
- // Generate key based on position. This forces a remount (and a defaultpos update)
48
- // whenever highlight position changes (e.g., when updated, scale changes, etc.)
49
- // We don't use position as state because when updating Rnd this would happen and cause flickering:
50
- // User moves Rnd -> Rnd records new pos -> Rnd jumps back -> highlight updates -> Rnd re-renders at new pos
51
- const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
52
- // Merge custom style with highlight color
53
- const mergedStyle = {
54
- ...style,
55
- backgroundColor: highlightColor,
56
- };
57
- return (React.createElement("div", { className: `AreaHighlight ${highlightClass}`, onContextMenu: onContextMenu },
58
- (onStyleChange || onDelete) && (React.createElement("div", { className: "AreaHighlight__toolbar-wrapper", style: {
59
- position: "absolute",
60
- left: highlight.position.boundingRect.left,
61
- top: highlight.position.boundingRect.top - 28,
62
- paddingBottom: 12,
63
- }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) },
64
- React.createElement("div", { className: `AreaHighlight__toolbar ${isHovered || isStylePanelOpen ? "AreaHighlight__toolbar--visible" : ""}` },
65
- onStyleChange && (React.createElement("button", { className: "AreaHighlight__style-button", onClick: (e) => {
66
- e.stopPropagation();
67
- setIsStylePanelOpen(!isStylePanelOpen);
68
- }, title: "Change color", type: "button" }, styleIcon || React.createElement(DefaultStyleIcon, null))),
69
- onDelete && (React.createElement("button", { className: "AreaHighlight__delete-button", onClick: (e) => {
70
- e.stopPropagation();
71
- onDelete();
72
- }, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
73
- isStylePanelOpen && onStyleChange && (React.createElement("div", { className: "AreaHighlight__style-panel", ref: stylePanelRef, onClick: (e) => e.stopPropagation() },
74
- React.createElement("div", { className: "AreaHighlight__style-row" },
75
- React.createElement("label", null, "Color"),
76
- React.createElement("div", { className: "AreaHighlight__color-options" },
77
- React.createElement("div", { className: "AreaHighlight__color-presets" }, colorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `AreaHighlight__color-preset ${highlightColor === c ? "active" : ""}`, style: { backgroundColor: c }, onClick: () => onStyleChange({ highlightColor: c }), title: c })))),
78
- React.createElement("input", { type: "color", value: highlightColor, onChange: (e) => {
79
- onStyleChange({ highlightColor: e.target.value });
80
- } }))))))),
81
- React.createElement(Rnd, { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), className: "AreaHighlight__part", onDragStop: (_, data) => {
82
- const boundingRect = {
83
- ...highlight.position.boundingRect,
84
- top: data.y,
85
- left: data.x,
86
- };
87
- onChange && onChange(boundingRect);
88
- }, onResizeStop: (_mouseEvent, _direction, ref, _delta, position) => {
89
- const boundingRect = {
90
- top: position.y,
91
- left: position.x,
92
- width: ref.offsetWidth,
93
- height: ref.offsetHeight,
94
- pageNumber: getPageFromElement(ref)?.number || -1,
95
- };
96
- onChange && onChange(boundingRect);
97
- }, onDragStart: onEditStart, onResizeStart: onEditStart, default: {
98
- x: highlight.position.boundingRect.left,
99
- y: highlight.position.boundingRect.top,
100
- width: highlight.position.boundingRect.width,
101
- height: highlight.position.boundingRect.height,
102
- }, key: key, bounds: bounds,
103
- // Prevevent any event clicks as clicking is already used for movement
104
- onClick: (event) => {
105
- event.stopPropagation();
106
- event.preventDefault();
107
- }, style: mergedStyle })));
108
- };
109
- //# sourceMappingURL=AreaHighlight.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AreaHighlight.js","sourceRoot":"","sources":["../../../src/components/AreaHighlight.tsx"],"names":[],"mappings":"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"}
@@ -1,48 +0,0 @@
1
- import React from "react";
2
- import { DrawingStroke, ScaledPosition } from "../types";
3
- import "../style/DrawingCanvas.css";
4
- import type { PDFViewer as TPDFViewer } from "pdfjs-dist/web/pdf_viewer.mjs";
5
- /**
6
- * The props type for {@link DrawingCanvas}.
7
- *
8
- * @category Component Properties
9
- */
10
- export interface DrawingCanvasProps {
11
- /**
12
- * Whether drawing mode is active.
13
- */
14
- isActive: boolean;
15
- /**
16
- * Stroke color for drawing.
17
- * @default "#000000"
18
- */
19
- strokeColor?: string;
20
- /**
21
- * Stroke width for drawing.
22
- * @default 3
23
- */
24
- strokeWidth?: number;
25
- /**
26
- * The PDF viewer instance.
27
- */
28
- viewer: InstanceType<typeof TPDFViewer>;
29
- /**
30
- * Callback when drawing is complete.
31
- *
32
- * @param dataUrl - The drawing as a PNG data URL.
33
- * @param position - Scaled position of the drawing on the page.
34
- * @param strokes - The stroke data for later editing.
35
- */
36
- onComplete: (dataUrl: string, position: ScaledPosition, strokes: DrawingStroke[]) => void;
37
- /**
38
- * Callback when drawing is cancelled.
39
- */
40
- onCancel: () => void;
41
- }
42
- /**
43
- * A transparent overlay canvas for freehand drawing on PDF pages.
44
- * Supports mouse and touch input.
45
- *
46
- * @category Component
47
- */
48
- export declare const DrawingCanvas: ({ isActive, strokeColor, strokeWidth, viewer, onComplete, onCancel, }: DrawingCanvasProps) => React.JSX.Element | null;
@@ -1,277 +0,0 @@
1
- import React, { useRef, useEffect, useCallback, useState, } from "react";
2
- import { viewportPositionToScaled } from "../lib/coordinates";
3
- import "../style/DrawingCanvas.css";
4
- /**
5
- * A transparent overlay canvas for freehand drawing on PDF pages.
6
- * Supports mouse and touch input.
7
- *
8
- * @category Component
9
- */
10
- export const DrawingCanvas = ({ isActive, strokeColor = "#000000", strokeWidth = 3, viewer, onComplete, onCancel, }) => {
11
- const canvasRef = useRef(null);
12
- const [strokes, setStrokes] = useState([]);
13
- const [currentStroke, setCurrentStroke] = useState(null);
14
- const isDrawingRef = useRef(false);
15
- const [pageNumber, setPageNumber] = useState(null);
16
- const [pageElement, setPageElement] = useState(null);
17
- // Find which page the user is drawing on
18
- const findPageFromPoint = useCallback((clientX, clientY) => {
19
- if (!viewer)
20
- return null;
21
- for (let i = 0; i < viewer.pagesCount; i++) {
22
- const pageView = viewer.getPageView(i);
23
- if (!pageView?.div)
24
- continue;
25
- const rect = pageView.div.getBoundingClientRect();
26
- if (clientX >= rect.left &&
27
- clientX <= rect.right &&
28
- clientY >= rect.top &&
29
- clientY <= rect.bottom) {
30
- return {
31
- pageNumber: i + 1,
32
- element: pageView.div,
33
- rect,
34
- };
35
- }
36
- }
37
- return null;
38
- }, [viewer]);
39
- // Redraw all strokes
40
- const redrawCanvas = useCallback(() => {
41
- const canvas = canvasRef.current;
42
- const ctx = canvas?.getContext("2d");
43
- if (!ctx || !canvas)
44
- return;
45
- ctx.clearRect(0, 0, canvas.width, canvas.height);
46
- // Draw all completed strokes with their own color/width
47
- strokes.forEach((stroke) => {
48
- if (stroke.points.length < 2)
49
- return;
50
- ctx.strokeStyle = stroke.color;
51
- ctx.lineWidth = stroke.width;
52
- ctx.lineCap = "round";
53
- ctx.lineJoin = "round";
54
- ctx.beginPath();
55
- ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
56
- stroke.points.slice(1).forEach((point) => {
57
- ctx.lineTo(point.x, point.y);
58
- });
59
- ctx.stroke();
60
- });
61
- // Draw current stroke with current color/width
62
- if (currentStroke && currentStroke.points.length >= 2) {
63
- ctx.strokeStyle = currentStroke.color;
64
- ctx.lineWidth = currentStroke.width;
65
- ctx.lineCap = "round";
66
- ctx.lineJoin = "round";
67
- ctx.beginPath();
68
- ctx.moveTo(currentStroke.points[0].x, currentStroke.points[0].y);
69
- currentStroke.points.slice(1).forEach((point) => {
70
- ctx.lineTo(point.x, point.y);
71
- });
72
- ctx.stroke();
73
- }
74
- }, [strokes, currentStroke]);
75
- // Redraw when strokes change
76
- useEffect(() => {
77
- redrawCanvas();
78
- }, [redrawCanvas]);
79
- // Handle mouse/touch down
80
- const handleStart = useCallback((clientX, clientY) => {
81
- const pageInfo = findPageFromPoint(clientX, clientY);
82
- if (!pageInfo)
83
- return;
84
- console.log("DrawingCanvas: Started drawing on page", pageInfo.pageNumber);
85
- // Set page context if not already set
86
- if (pageNumber === null) {
87
- setPageNumber(pageInfo.pageNumber);
88
- setPageElement(pageInfo.element);
89
- // Resize canvas to match page
90
- const canvas = canvasRef.current;
91
- if (canvas) {
92
- canvas.width = pageInfo.rect.width;
93
- canvas.height = pageInfo.rect.height;
94
- canvas.style.left = `${pageInfo.rect.left}px`;
95
- canvas.style.top = `${pageInfo.rect.top}px`;
96
- }
97
- }
98
- else if (pageInfo.pageNumber !== pageNumber) {
99
- // User trying to draw on different page - ignore
100
- console.log("DrawingCanvas: Ignoring - different page");
101
- return;
102
- }
103
- isDrawingRef.current = true;
104
- const pos = {
105
- x: clientX - pageInfo.rect.left,
106
- y: clientY - pageInfo.rect.top,
107
- };
108
- setCurrentStroke({ points: [pos], color: strokeColor, width: strokeWidth });
109
- }, [pageNumber, findPageFromPoint, strokeColor, strokeWidth]);
110
- // Handle mouse/touch move
111
- const handleMove = useCallback((clientX, clientY) => {
112
- if (!isDrawingRef.current || !pageElement)
113
- return;
114
- const rect = pageElement.getBoundingClientRect();
115
- const pos = {
116
- x: clientX - rect.left,
117
- y: clientY - rect.top,
118
- };
119
- setCurrentStroke((prev) => {
120
- if (!prev)
121
- return null;
122
- return { ...prev, points: [...prev.points, pos] };
123
- });
124
- }, [pageElement]);
125
- // Handle mouse/touch end
126
- const handleEnd = useCallback(() => {
127
- if (!isDrawingRef.current)
128
- return;
129
- isDrawingRef.current = false;
130
- if (currentStroke && currentStroke.points.length >= 2) {
131
- setStrokes((prev) => [...prev, currentStroke]);
132
- }
133
- setCurrentStroke(null);
134
- }, [currentStroke]);
135
- // Mouse event handlers
136
- const handleMouseDown = useCallback((e) => {
137
- e.preventDefault();
138
- handleStart(e.clientX, e.clientY);
139
- }, [handleStart]);
140
- const handleMouseMove = useCallback((e) => {
141
- handleMove(e.clientX, e.clientY);
142
- }, [handleMove]);
143
- const handleMouseUp = useCallback(() => {
144
- handleEnd();
145
- }, [handleEnd]);
146
- // Touch event handlers
147
- const handleTouchStart = useCallback((e) => {
148
- e.preventDefault();
149
- if (e.touches.length > 0) {
150
- handleStart(e.touches[0].clientX, e.touches[0].clientY);
151
- }
152
- }, [handleStart]);
153
- const handleTouchMove = useCallback((e) => {
154
- e.preventDefault();
155
- if (e.touches.length > 0) {
156
- handleMove(e.touches[0].clientX, e.touches[0].clientY);
157
- }
158
- }, [handleMove]);
159
- const handleTouchEnd = useCallback(() => {
160
- handleEnd();
161
- }, [handleEnd]);
162
- // Handle keyboard events
163
- useEffect(() => {
164
- if (!isActive)
165
- return;
166
- const handleKeyDown = (e) => {
167
- if (e.code === "Escape") {
168
- console.log("DrawingCanvas: Cancelled via Escape");
169
- onCancel();
170
- }
171
- };
172
- document.addEventListener("keydown", handleKeyDown);
173
- return () => document.removeEventListener("keydown", handleKeyDown);
174
- }, [isActive, onCancel]);
175
- // Clear drawing
176
- const handleClear = () => {
177
- console.log("DrawingCanvas: Cleared strokes");
178
- setStrokes([]);
179
- setCurrentStroke(null);
180
- setPageNumber(null);
181
- setPageElement(null);
182
- };
183
- // Complete drawing
184
- const handleDone = () => {
185
- if (strokes.length === 0 || pageNumber === null || !pageElement || !viewer) {
186
- console.log("DrawingCanvas: No strokes to save");
187
- onCancel();
188
- return;
189
- }
190
- console.log("DrawingCanvas: Completing drawing with", strokes.length, "strokes");
191
- // Calculate bounding box of all strokes
192
- let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
193
- strokes.forEach((stroke) => {
194
- stroke.points.forEach((point) => {
195
- minX = Math.min(minX, point.x);
196
- minY = Math.min(minY, point.y);
197
- maxX = Math.max(maxX, point.x);
198
- maxY = Math.max(maxY, point.y);
199
- });
200
- });
201
- // Find max stroke width for padding
202
- const maxStrokeWidth = Math.max(...strokes.map(s => s.width));
203
- const padding = maxStrokeWidth * 2;
204
- minX = Math.max(0, minX - padding);
205
- minY = Math.max(0, minY - padding);
206
- maxX = maxX + padding;
207
- maxY = maxY + padding;
208
- const width = maxX - minX;
209
- const height = maxY - minY;
210
- // Create a new canvas with just the drawing (cropped to bounding box)
211
- const outputCanvas = document.createElement("canvas");
212
- outputCanvas.width = width;
213
- outputCanvas.height = height;
214
- const outputCtx = outputCanvas.getContext("2d");
215
- if (!outputCtx) {
216
- console.error("DrawingCanvas: Could not get output canvas context");
217
- onCancel();
218
- return;
219
- }
220
- // Draw all strokes offset by bounding box origin, using per-stroke color/width
221
- strokes.forEach((stroke) => {
222
- if (stroke.points.length < 2)
223
- return;
224
- outputCtx.strokeStyle = stroke.color;
225
- outputCtx.lineWidth = stroke.width;
226
- outputCtx.lineCap = "round";
227
- outputCtx.lineJoin = "round";
228
- outputCtx.beginPath();
229
- outputCtx.moveTo(stroke.points[0].x - minX, stroke.points[0].y - minY);
230
- stroke.points.slice(1).forEach((point) => {
231
- outputCtx.lineTo(point.x - minX, point.y - minY);
232
- });
233
- outputCtx.stroke();
234
- });
235
- const dataUrl = outputCanvas.toDataURL("image/png");
236
- // Create viewport position
237
- const viewportPosition = {
238
- boundingRect: {
239
- left: minX,
240
- top: minY,
241
- width: width,
242
- height: height,
243
- pageNumber: pageNumber,
244
- },
245
- rects: [],
246
- };
247
- const scaledPosition = viewportPositionToScaled(viewportPosition, viewer);
248
- // Normalize strokes relative to bounding box for storage
249
- const normalizedStrokes = strokes.map((stroke) => ({
250
- ...stroke,
251
- points: stroke.points.map((point) => ({
252
- x: point.x - minX,
253
- y: point.y - minY,
254
- })),
255
- }));
256
- console.log("DrawingCanvas: Created drawing at position", scaledPosition);
257
- onComplete(dataUrl, scaledPosition, normalizedStrokes);
258
- // Reset state
259
- setStrokes([]);
260
- setCurrentStroke(null);
261
- setPageNumber(null);
262
- setPageElement(null);
263
- };
264
- if (!isActive)
265
- return null;
266
- return (React.createElement(React.Fragment, null,
267
- React.createElement("canvas", { ref: canvasRef, className: "DrawingCanvas", style: {
268
- width: pageElement ? pageElement.getBoundingClientRect().width : "100%",
269
- height: pageElement ? pageElement.getBoundingClientRect().height : "100%",
270
- position: "fixed",
271
- }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd }),
272
- React.createElement("div", { className: "DrawingCanvas__controls" },
273
- React.createElement("button", { type: "button", className: "DrawingCanvas__clearButton", onClick: handleClear }, "Clear"),
274
- React.createElement("button", { type: "button", className: "DrawingCanvas__cancelButton", onClick: onCancel }, "Cancel"),
275
- React.createElement("button", { type: "button", className: "DrawingCanvas__doneButton", onClick: handleDone }, "Done"))));
276
- };
277
- //# sourceMappingURL=DrawingCanvas.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DrawingCanvas.js","sourceRoot":"","sources":["../../../src/components/DrawingCanvas.tsx"],"names":[],"mappings":"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"}
@@ -1,70 +0,0 @@
1
- import React, { CSSProperties, MouseEvent, ReactNode } from "react";
2
- import "../style/DrawingHighlight.css";
3
- import type { DrawingStroke, LTWHP, ViewportHighlight } from "../types";
4
- /**
5
- * The props type for {@link DrawingHighlight}.
6
- *
7
- * @category Component Properties
8
- */
9
- export interface DrawingHighlightProps {
10
- /**
11
- * The highlight to be rendered as a {@link DrawingHighlight}.
12
- * The highlight.content.image should contain the drawing as a PNG data URL.
13
- */
14
- highlight: ViewportHighlight;
15
- /**
16
- * A callback triggered whenever the highlight position or size changes.
17
- *
18
- * @param rect - The updated highlight area.
19
- */
20
- onChange?(rect: LTWHP): void;
21
- /**
22
- * Has the highlight been auto-scrolled into view?
23
- */
24
- isScrolledTo?: boolean;
25
- /**
26
- * react-rnd bounds on the highlight area.
27
- */
28
- bounds?: string | Element;
29
- /**
30
- * A callback triggered on context menu.
31
- */
32
- onContextMenu?(event: MouseEvent<HTMLDivElement>): void;
33
- /**
34
- * Event called when editing begins (drag or resize).
35
- */
36
- onEditStart?(): void;
37
- /**
38
- * Event called when editing ends.
39
- */
40
- onEditEnd?(): void;
41
- /**
42
- * Custom styling for the container.
43
- */
44
- style?: CSSProperties;
45
- /**
46
- * Custom drag icon. Replaces the default 6-dot grid icon.
47
- */
48
- dragIcon?: ReactNode;
49
- /**
50
- * Callback when drawing style changes (color or stroke width).
51
- * The newImage is the re-rendered PNG data URL with updated styles.
52
- * The newStrokes contain the updated stroke data.
53
- */
54
- onStyleChange?(newImage: string, newStrokes: DrawingStroke[]): void;
55
- /**
56
- * Callback triggered when the delete button is clicked.
57
- */
58
- onDelete?(): void;
59
- /**
60
- * Custom delete icon. Replaces the default trash icon.
61
- */
62
- deleteIcon?: ReactNode;
63
- }
64
- /**
65
- * Renders a draggable, resizable freehand drawing annotation.
66
- * Drawings are stored as PNG images with transparent backgrounds.
67
- *
68
- * @category Component
69
- */
70
- export declare const DrawingHighlight: ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onStyleChange, onDelete, deleteIcon, }: DrawingHighlightProps) => React.JSX.Element;