@anaralabs/lector 3.4.0 → 3.5.1
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.
- package/README.md +0 -1
- package/dist/_tsup-dts-rollup.d.ts +80 -4
- package/dist/index.d.ts +5 -0
- package/dist/index.js +299 -72
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
<!-- <h1 align="center"><img src="https://www.anara.ai/icons/logo.png" width="196" /></h1> -->
|
|
3
2
|
<p align="center">
|
|
4
3
|
<i>Simple primitives to compose powerful PDF viewing experiences.<br>powered by <code><a href="https://mozilla.github.io/pdf.js/">PDF.js</a></code> and <code><a href="https://reactjs.org/">React</a></code></i>
|
|
5
4
|
</p>
|
|
@@ -16,8 +16,42 @@ import { ReactNode } from 'react';
|
|
|
16
16
|
import { RefAttributes } from 'react';
|
|
17
17
|
import { StoreApi } from 'zustand';
|
|
18
18
|
import type { TypedArray } from 'pdfjs-dist/types/src/display/api';
|
|
19
|
+
import { UseBoundStore } from 'zustand';
|
|
20
|
+
import { useFloating } from '@floating-ui/react';
|
|
21
|
+
import { useInteractions } from '@floating-ui/react';
|
|
19
22
|
import { Virtualizer } from '@tanstack/react-virtual';
|
|
20
23
|
|
|
24
|
+
declare interface Annotation {
|
|
25
|
+
id: string;
|
|
26
|
+
pageNumber: number;
|
|
27
|
+
highlights: Array<{
|
|
28
|
+
height: number;
|
|
29
|
+
left: number;
|
|
30
|
+
top: number;
|
|
31
|
+
width: number;
|
|
32
|
+
pageNumber: number;
|
|
33
|
+
}>;
|
|
34
|
+
comment?: string;
|
|
35
|
+
color?: string;
|
|
36
|
+
createdAt: Date;
|
|
37
|
+
updatedAt: Date;
|
|
38
|
+
}
|
|
39
|
+
export { Annotation }
|
|
40
|
+
export { Annotation as Annotation_alias_1 }
|
|
41
|
+
|
|
42
|
+
export declare const AnnotationHighlightLayer: ({ className, style, renderTooltipContent, focusedAnnotationId, onAnnotationClick, }: AnnotationHighlightLayerProps) => JSX.Element;
|
|
43
|
+
|
|
44
|
+
declare interface AnnotationHighlightLayerProps {
|
|
45
|
+
className?: string;
|
|
46
|
+
style?: React.CSSProperties;
|
|
47
|
+
renderTooltipContent: (props: {
|
|
48
|
+
annotation: Annotation;
|
|
49
|
+
onClose: () => void;
|
|
50
|
+
}) => React.ReactNode;
|
|
51
|
+
focusedAnnotationId?: string;
|
|
52
|
+
onAnnotationClick?: (annotation: Annotation) => void;
|
|
53
|
+
}
|
|
54
|
+
|
|
21
55
|
/**
|
|
22
56
|
* AnnotationLayer renders PDF annotations like links, highlights, and form fields.
|
|
23
57
|
*
|
|
@@ -47,6 +81,24 @@ declare interface AnnotationLayerParams {
|
|
|
47
81
|
jumpOptions?: Parameters<ReturnType<typeof usePdfJump>['jumpToPage']>[1];
|
|
48
82
|
}
|
|
49
83
|
|
|
84
|
+
declare interface AnnotationState {
|
|
85
|
+
annotations: Annotation[];
|
|
86
|
+
addAnnotation: (annotation: Omit<Annotation, "id" | "createdAt" | "updatedAt">) => void;
|
|
87
|
+
updateAnnotation: (id: string, updates: Partial<Annotation>) => void;
|
|
88
|
+
deleteAnnotation: (id: string) => void;
|
|
89
|
+
setAnnotations: (annotations: Annotation[]) => void;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
export declare const AnnotationTooltip: ({ annotation, children, tooltipContent, onOpenChange, isOpen: controlledIsOpen, }: AnnotationTooltipProps) => JSX.Element;
|
|
93
|
+
|
|
94
|
+
declare interface AnnotationTooltipProps {
|
|
95
|
+
annotation: Annotation;
|
|
96
|
+
children: React.ReactNode;
|
|
97
|
+
tooltipContent: React.ReactNode;
|
|
98
|
+
onOpenChange?: (open: boolean) => void;
|
|
99
|
+
isOpen?: boolean;
|
|
100
|
+
}
|
|
101
|
+
|
|
50
102
|
/**
|
|
51
103
|
* Calculates the highlight rectangles for a given text match.
|
|
52
104
|
*
|
|
@@ -276,8 +328,6 @@ export declare interface SearchResults {
|
|
|
276
328
|
hasMoreResults: boolean;
|
|
277
329
|
}
|
|
278
330
|
|
|
279
|
-
declare type Selection_2 = Omit<CollapsibleSelection, "isCollapsed">;
|
|
280
|
-
|
|
281
331
|
export declare const SelectionTooltip: ({ children }: SelectionTooltipProps) => JSX.Element;
|
|
282
332
|
|
|
283
333
|
declare interface SelectionTooltipProps {
|
|
@@ -310,6 +360,26 @@ export declare const Thumbnails: ({ children, ...props }: HTMLProps<HTMLDivEleme
|
|
|
310
360
|
|
|
311
361
|
export declare const TotalPages: ({ ...props }: HTMLProps<HTMLDivElement>) => JSX.Element;
|
|
312
362
|
|
|
363
|
+
declare const useAnnotations: UseBoundStore<StoreApi<AnnotationState>>;
|
|
364
|
+
export { useAnnotations }
|
|
365
|
+
export { useAnnotations as useAnnotations_alias_1 }
|
|
366
|
+
|
|
367
|
+
export declare const useAnnotationTooltip: ({ annotation, onOpenChange, }: UseAnnotationTooltipProps) => UseAnnotationTooltipReturn;
|
|
368
|
+
|
|
369
|
+
declare interface UseAnnotationTooltipProps {
|
|
370
|
+
annotation: Annotation;
|
|
371
|
+
onOpenChange?: (open: boolean) => void;
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
declare interface UseAnnotationTooltipReturn {
|
|
375
|
+
isOpen: boolean;
|
|
376
|
+
setIsOpen: (open: boolean) => void;
|
|
377
|
+
refs: ReturnType<typeof useFloating>["refs"];
|
|
378
|
+
floatingStyles: ReturnType<typeof useFloating>["floatingStyles"];
|
|
379
|
+
getFloatingProps: ReturnType<typeof useInteractions>["getFloatingProps"];
|
|
380
|
+
getReferenceProps: ReturnType<typeof useInteractions>["getReferenceProps"];
|
|
381
|
+
}
|
|
382
|
+
|
|
313
383
|
declare const usePdf: <T>(selector: (state: PDFState) => T) => T;
|
|
314
384
|
export { usePdf }
|
|
315
385
|
export { usePdf as usePdf_alias_1 }
|
|
@@ -355,6 +425,8 @@ declare const usePDFOutline: () => {
|
|
|
355
425
|
items: Array<any>;
|
|
356
426
|
}[] | undefined;
|
|
357
427
|
|
|
428
|
+
export declare const usePDFPageNumber: () => number;
|
|
429
|
+
|
|
358
430
|
export declare const useSearch: () => {
|
|
359
431
|
textContent: {
|
|
360
432
|
pageNumber: number;
|
|
@@ -366,8 +438,12 @@ export declare const useSearch: () => {
|
|
|
366
438
|
};
|
|
367
439
|
|
|
368
440
|
export declare const useSelectionDimensions: () => {
|
|
369
|
-
getDimension: () =>
|
|
370
|
-
|
|
441
|
+
getDimension: () => {
|
|
442
|
+
highlights: HighlightRect[];
|
|
443
|
+
text: string;
|
|
444
|
+
isCollapsed: boolean;
|
|
445
|
+
} | undefined;
|
|
446
|
+
getSelection: () => CollapsibleSelection;
|
|
371
447
|
};
|
|
372
448
|
|
|
373
449
|
export declare const ZoomIn: ({ ...props }: HTMLProps<HTMLButtonElement>) => JSX.Element;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export { AnnotationTooltip } from './_tsup-dts-rollup.js';
|
|
2
|
+
export { AnnotationHighlightLayer } from './_tsup-dts-rollup.js';
|
|
1
3
|
export { AnnotationLayer } from './_tsup-dts-rollup.js';
|
|
2
4
|
export { CanvasLayer } from './_tsup-dts-rollup.js';
|
|
3
5
|
export { ColoredHighlightLayer } from './_tsup-dts-rollup.js';
|
|
@@ -26,7 +28,10 @@ export { SearchResult } from './_tsup-dts-rollup.js';
|
|
|
26
28
|
export { SearchResults } from './_tsup-dts-rollup.js';
|
|
27
29
|
export { useSearch } from './_tsup-dts-rollup.js';
|
|
28
30
|
export { calculateHighlightRects } from './_tsup-dts-rollup.js';
|
|
31
|
+
export { Annotation } from './_tsup-dts-rollup.js';
|
|
32
|
+
export { useAnnotations } from './_tsup-dts-rollup.js';
|
|
29
33
|
export { LinkService } from './_tsup-dts-rollup.js';
|
|
34
|
+
export { usePDFPageNumber } from './_tsup-dts-rollup.js';
|
|
30
35
|
export { useSelectionDimensions } from './_tsup-dts-rollup.js';
|
|
31
36
|
export { ColoredHighlight } from './_tsup-dts-rollup.js';
|
|
32
37
|
export { HighlightRect } from './_tsup-dts-rollup.js';
|
package/dist/index.js
CHANGED
|
@@ -1,30 +1,16 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
3
|
+
import React, { createContext, forwardRef, useCallback, useContext, useState, useRef, useEffect, cloneElement, createRef, useLayoutEffect } from 'react';
|
|
4
|
+
import { useFloating, autoUpdate, offset, shift, useDismiss, useInteractions, flip } from '@floating-ui/react';
|
|
5
5
|
import { useVirtualizer, elementScroll, debounce } from '@tanstack/react-virtual';
|
|
6
|
-
import { useStore, createStore } from 'zustand';
|
|
6
|
+
import { create, useStore, createStore } from 'zustand';
|
|
7
7
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
8
|
-
import { useDebounce } from 'use-debounce';
|
|
9
8
|
import { v4 } from 'uuid';
|
|
10
|
-
import {
|
|
9
|
+
import { AnnotationLayer, TextLayer, getDocument } from 'pdfjs-dist';
|
|
10
|
+
import { useDebounce } from 'use-debounce';
|
|
11
11
|
import { Slot } from '@radix-ui/react-slot';
|
|
12
12
|
|
|
13
|
-
//
|
|
14
|
-
function r(e) {
|
|
15
|
-
var t, f, n = "";
|
|
16
|
-
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
17
|
-
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
18
|
-
var o = e.length;
|
|
19
|
-
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
20
|
-
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
21
|
-
return n;
|
|
22
|
-
}
|
|
23
|
-
function clsx() {
|
|
24
|
-
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
25
|
-
return n;
|
|
26
|
-
}
|
|
27
|
-
var clsx_default = clsx;
|
|
13
|
+
// src/components/annotation-tooltip.tsx
|
|
28
14
|
|
|
29
15
|
// src/lib/clamp.ts
|
|
30
16
|
var clamp = (value, min, max) => {
|
|
@@ -146,6 +132,258 @@ var PDFStore = createZustandContext(
|
|
|
146
132
|
);
|
|
147
133
|
var usePdf = (selector) => useStore(PDFStore.useContext(), selector);
|
|
148
134
|
|
|
135
|
+
// src/hooks/useAnnotationTooltip.ts
|
|
136
|
+
var defaultRect = {
|
|
137
|
+
width: 0,
|
|
138
|
+
height: 0,
|
|
139
|
+
x: 0,
|
|
140
|
+
y: 0,
|
|
141
|
+
top: 0,
|
|
142
|
+
right: 0,
|
|
143
|
+
bottom: 0,
|
|
144
|
+
left: 0
|
|
145
|
+
};
|
|
146
|
+
var useAnnotationTooltip = ({
|
|
147
|
+
annotation,
|
|
148
|
+
onOpenChange
|
|
149
|
+
}) => {
|
|
150
|
+
const isNewAnnotation = Date.now() - new Date(annotation.createdAt).getTime() < 1e3;
|
|
151
|
+
const [isOpen, setIsOpen] = useState(isNewAnnotation);
|
|
152
|
+
const viewportRef = usePdf((state) => state.viewportRef);
|
|
153
|
+
const {
|
|
154
|
+
refs,
|
|
155
|
+
floatingStyles,
|
|
156
|
+
context
|
|
157
|
+
} = useFloating({
|
|
158
|
+
placement: "top",
|
|
159
|
+
open: isOpen,
|
|
160
|
+
onOpenChange: (open) => {
|
|
161
|
+
setIsOpen(open);
|
|
162
|
+
onOpenChange?.(open);
|
|
163
|
+
},
|
|
164
|
+
whileElementsMounted: autoUpdate,
|
|
165
|
+
middleware: [
|
|
166
|
+
offset(10),
|
|
167
|
+
flip({
|
|
168
|
+
crossAxis: false
|
|
169
|
+
}),
|
|
170
|
+
shift({ padding: 8 })
|
|
171
|
+
]
|
|
172
|
+
});
|
|
173
|
+
const dismiss = useDismiss(context);
|
|
174
|
+
const { getReferenceProps, getFloatingProps } = useInteractions([dismiss]);
|
|
175
|
+
const updateTooltipPosition = useCallback(() => {
|
|
176
|
+
if (!annotation.highlights.length) return;
|
|
177
|
+
const lastHighlight = annotation.highlights[annotation.highlights.length - 1];
|
|
178
|
+
refs.setReference({
|
|
179
|
+
getBoundingClientRect: () => {
|
|
180
|
+
const viewportElement = viewportRef.current;
|
|
181
|
+
if (!viewportElement || !lastHighlight) return defaultRect;
|
|
182
|
+
const pageElement = viewportElement.querySelector(`[data-page-number="${annotation.pageNumber}"]`);
|
|
183
|
+
if (!pageElement) return defaultRect;
|
|
184
|
+
const pageRect = pageElement.getBoundingClientRect();
|
|
185
|
+
const left = pageRect.left + lastHighlight.left;
|
|
186
|
+
const top = pageRect.top + lastHighlight.top;
|
|
187
|
+
const width = lastHighlight.width;
|
|
188
|
+
const height = lastHighlight.height;
|
|
189
|
+
return {
|
|
190
|
+
width,
|
|
191
|
+
height,
|
|
192
|
+
x: left,
|
|
193
|
+
y: top,
|
|
194
|
+
top,
|
|
195
|
+
right: left + width,
|
|
196
|
+
bottom: top + height,
|
|
197
|
+
left
|
|
198
|
+
};
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
}, [annotation.highlights, annotation.pageNumber, refs, viewportRef]);
|
|
202
|
+
useEffect(() => {
|
|
203
|
+
const viewport = viewportRef.current;
|
|
204
|
+
updateTooltipPosition();
|
|
205
|
+
const handleScroll = () => {
|
|
206
|
+
requestAnimationFrame(updateTooltipPosition);
|
|
207
|
+
};
|
|
208
|
+
const handleResize = () => {
|
|
209
|
+
requestAnimationFrame(updateTooltipPosition);
|
|
210
|
+
};
|
|
211
|
+
if (viewport) {
|
|
212
|
+
viewport.addEventListener("scroll", handleScroll, {
|
|
213
|
+
passive: true
|
|
214
|
+
});
|
|
215
|
+
}
|
|
216
|
+
window.addEventListener("resize", handleResize, { passive: true });
|
|
217
|
+
return () => {
|
|
218
|
+
if (viewport) {
|
|
219
|
+
viewport.removeEventListener("scroll", handleScroll);
|
|
220
|
+
}
|
|
221
|
+
window.removeEventListener("resize", handleResize);
|
|
222
|
+
};
|
|
223
|
+
}, [updateTooltipPosition, viewportRef]);
|
|
224
|
+
return {
|
|
225
|
+
isOpen,
|
|
226
|
+
setIsOpen,
|
|
227
|
+
refs,
|
|
228
|
+
floatingStyles,
|
|
229
|
+
getFloatingProps,
|
|
230
|
+
getReferenceProps
|
|
231
|
+
};
|
|
232
|
+
};
|
|
233
|
+
var AnnotationTooltip = ({
|
|
234
|
+
annotation,
|
|
235
|
+
children,
|
|
236
|
+
tooltipContent,
|
|
237
|
+
onOpenChange,
|
|
238
|
+
isOpen: controlledIsOpen
|
|
239
|
+
}) => {
|
|
240
|
+
const {
|
|
241
|
+
isOpen: uncontrolledIsOpen,
|
|
242
|
+
setIsOpen,
|
|
243
|
+
refs,
|
|
244
|
+
floatingStyles,
|
|
245
|
+
getFloatingProps,
|
|
246
|
+
getReferenceProps
|
|
247
|
+
} = useAnnotationTooltip({
|
|
248
|
+
annotation,
|
|
249
|
+
onOpenChange
|
|
250
|
+
});
|
|
251
|
+
const isOpen = controlledIsOpen ?? uncontrolledIsOpen;
|
|
252
|
+
const handleClick = useCallback(() => {
|
|
253
|
+
if (controlledIsOpen === void 0) {
|
|
254
|
+
setIsOpen(!isOpen);
|
|
255
|
+
}
|
|
256
|
+
}, [controlledIsOpen, isOpen, setIsOpen]);
|
|
257
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
258
|
+
/* @__PURE__ */ jsx(
|
|
259
|
+
"div",
|
|
260
|
+
{
|
|
261
|
+
ref: refs.setReference,
|
|
262
|
+
onClick: handleClick,
|
|
263
|
+
...getReferenceProps(),
|
|
264
|
+
children
|
|
265
|
+
}
|
|
266
|
+
),
|
|
267
|
+
isOpen && /* @__PURE__ */ jsx(
|
|
268
|
+
"div",
|
|
269
|
+
{
|
|
270
|
+
ref: refs.setFloating,
|
|
271
|
+
className: "bg-white shadow-lg rounded-lg p-3 z-50 min-w-[200px]",
|
|
272
|
+
style: {
|
|
273
|
+
...floatingStyles,
|
|
274
|
+
position: "fixed",
|
|
275
|
+
zIndex: 9999
|
|
276
|
+
},
|
|
277
|
+
...getFloatingProps(),
|
|
278
|
+
children: tooltipContent
|
|
279
|
+
}
|
|
280
|
+
)
|
|
281
|
+
] });
|
|
282
|
+
};
|
|
283
|
+
var useAnnotations = create((set) => ({
|
|
284
|
+
annotations: [],
|
|
285
|
+
addAnnotation: (annotation) => set((state) => ({
|
|
286
|
+
annotations: [
|
|
287
|
+
...state.annotations,
|
|
288
|
+
{
|
|
289
|
+
...annotation,
|
|
290
|
+
id: v4(),
|
|
291
|
+
createdAt: /* @__PURE__ */ new Date(),
|
|
292
|
+
updatedAt: /* @__PURE__ */ new Date()
|
|
293
|
+
}
|
|
294
|
+
]
|
|
295
|
+
})),
|
|
296
|
+
updateAnnotation: (id, updates) => set((state) => ({
|
|
297
|
+
annotations: state.annotations.map(
|
|
298
|
+
(annotation) => annotation.id === id ? {
|
|
299
|
+
...annotation,
|
|
300
|
+
...updates,
|
|
301
|
+
updatedAt: /* @__PURE__ */ new Date()
|
|
302
|
+
} : annotation
|
|
303
|
+
)
|
|
304
|
+
})),
|
|
305
|
+
deleteAnnotation: (id) => set((state) => ({
|
|
306
|
+
annotations: state.annotations.filter((annotation) => annotation.id !== id)
|
|
307
|
+
})),
|
|
308
|
+
setAnnotations: (annotations) => set({ annotations })
|
|
309
|
+
}));
|
|
310
|
+
var PDFPageNumberContext = createContext(0);
|
|
311
|
+
var usePDFPageNumber = () => {
|
|
312
|
+
return useContext(PDFPageNumberContext);
|
|
313
|
+
};
|
|
314
|
+
var AnnotationHighlightLayer = ({
|
|
315
|
+
className,
|
|
316
|
+
style,
|
|
317
|
+
renderTooltipContent,
|
|
318
|
+
focusedAnnotationId,
|
|
319
|
+
onAnnotationClick
|
|
320
|
+
}) => {
|
|
321
|
+
const { annotations } = useAnnotations();
|
|
322
|
+
const pageNumber = usePDFPageNumber();
|
|
323
|
+
const pageAnnotations = annotations.filter(
|
|
324
|
+
(annotation) => annotation.pageNumber === pageNumber
|
|
325
|
+
);
|
|
326
|
+
return /* @__PURE__ */ jsx("div", { className, style, children: pageAnnotations.map((annotation) => /* @__PURE__ */ jsx(
|
|
327
|
+
AnnotationTooltip,
|
|
328
|
+
{
|
|
329
|
+
annotation,
|
|
330
|
+
isOpen: focusedAnnotationId === annotation.id,
|
|
331
|
+
onOpenChange: (open) => {
|
|
332
|
+
if (open && onAnnotationClick) {
|
|
333
|
+
onAnnotationClick(annotation);
|
|
334
|
+
}
|
|
335
|
+
},
|
|
336
|
+
tooltipContent: renderTooltipContent({
|
|
337
|
+
annotation,
|
|
338
|
+
onClose: () => {
|
|
339
|
+
}
|
|
340
|
+
}),
|
|
341
|
+
children: /* @__PURE__ */ jsx(
|
|
342
|
+
"div",
|
|
343
|
+
{
|
|
344
|
+
style: { cursor: "pointer" },
|
|
345
|
+
onClick: () => onAnnotationClick?.(annotation),
|
|
346
|
+
children: annotation.highlights.map((highlight, index) => /* @__PURE__ */ jsx(
|
|
347
|
+
"div",
|
|
348
|
+
{
|
|
349
|
+
style: {
|
|
350
|
+
position: "absolute",
|
|
351
|
+
top: highlight.top,
|
|
352
|
+
left: highlight.left,
|
|
353
|
+
width: highlight.width,
|
|
354
|
+
height: highlight.height,
|
|
355
|
+
backgroundColor: annotation.color || "rgba(255, 255, 0, 0.3)",
|
|
356
|
+
mixBlendMode: "multiply",
|
|
357
|
+
transition: "all 0.2s ease",
|
|
358
|
+
cursor: "pointer"
|
|
359
|
+
},
|
|
360
|
+
"data-highlight-id": annotation.id
|
|
361
|
+
},
|
|
362
|
+
index
|
|
363
|
+
))
|
|
364
|
+
}
|
|
365
|
+
)
|
|
366
|
+
},
|
|
367
|
+
annotation.id
|
|
368
|
+
)) });
|
|
369
|
+
};
|
|
370
|
+
|
|
371
|
+
// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
372
|
+
function r(e) {
|
|
373
|
+
var t, f, n = "";
|
|
374
|
+
if ("string" == typeof e || "number" == typeof e) n += e;
|
|
375
|
+
else if ("object" == typeof e) if (Array.isArray(e)) {
|
|
376
|
+
var o = e.length;
|
|
377
|
+
for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
|
|
378
|
+
} else for (f in e) e[f] && (n && (n += " "), n += f);
|
|
379
|
+
return n;
|
|
380
|
+
}
|
|
381
|
+
function clsx() {
|
|
382
|
+
for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
|
|
383
|
+
return n;
|
|
384
|
+
}
|
|
385
|
+
var clsx_default = clsx;
|
|
386
|
+
|
|
149
387
|
// src/lib/cancellable.ts
|
|
150
388
|
var cancellable = (promise) => {
|
|
151
389
|
let isCancelled = false;
|
|
@@ -184,9 +422,9 @@ var usePdfJump = () => {
|
|
|
184
422
|
const finalOptions = { ...defaultOptions, ...options };
|
|
185
423
|
virtualizer.scrollToIndex(pageIndex - 1, finalOptions);
|
|
186
424
|
};
|
|
187
|
-
const jumpToOffset = (
|
|
425
|
+
const jumpToOffset = (offset3) => {
|
|
188
426
|
if (!virtualizer) return;
|
|
189
|
-
virtualizer.scrollToOffset(
|
|
427
|
+
virtualizer.scrollToOffset(offset3, {
|
|
190
428
|
align: "start",
|
|
191
429
|
behavior: "smooth"
|
|
192
430
|
});
|
|
@@ -387,10 +625,6 @@ var PDFLinkServiceContext = createContext(defaultLinkService);
|
|
|
387
625
|
var usePDFLinkService = () => {
|
|
388
626
|
return useContext(PDFLinkServiceContext);
|
|
389
627
|
};
|
|
390
|
-
var PDFPageNumberContext = createContext(0);
|
|
391
|
-
var usePDFPageNumber = () => {
|
|
392
|
-
return useContext(PDFPageNumberContext);
|
|
393
|
-
};
|
|
394
628
|
var useVisibility = ({
|
|
395
629
|
elementRef
|
|
396
630
|
}) => {
|
|
@@ -671,13 +905,13 @@ var CanvasLayer = ({
|
|
|
671
905
|
};
|
|
672
906
|
|
|
673
907
|
// src/hooks/useSelectionDimensions.tsx
|
|
674
|
-
var MERGE_THRESHOLD =
|
|
675
|
-
var
|
|
908
|
+
var MERGE_THRESHOLD = 5;
|
|
909
|
+
var shouldMergeRects = (rect1, rect2) => {
|
|
676
910
|
const verticalOverlap = !(rect1.top > rect2.top + rect2.height || rect2.top > rect1.top + rect1.height);
|
|
677
911
|
const horizontallyClose = Math.abs(rect1.left + rect1.width - rect2.left) < MERGE_THRESHOLD || Math.abs(rect2.left + rect2.width - rect1.left) < MERGE_THRESHOLD || rect1.left < rect2.left + rect2.width && rect2.left < rect1.left + rect1.width;
|
|
678
912
|
return verticalOverlap && horizontallyClose;
|
|
679
913
|
};
|
|
680
|
-
var
|
|
914
|
+
var mergeRects = (rect1, rect2) => {
|
|
681
915
|
return {
|
|
682
916
|
left: Math.min(rect1.left, rect2.left),
|
|
683
917
|
top: Math.min(rect1.top, rect2.top),
|
|
@@ -688,38 +922,28 @@ var mergeRectangles = (rect1, rect2) => {
|
|
|
688
922
|
};
|
|
689
923
|
var consolidateRects = (rects) => {
|
|
690
924
|
if (rects.length <= 1) return rects;
|
|
691
|
-
const
|
|
692
|
-
let
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
);
|
|
708
|
-
const nextRectangle = sortedRectangles[index + 1];
|
|
709
|
-
if (!nextRectangle) {
|
|
710
|
-
allMergedRectangles.push(
|
|
711
|
-
blowUpMergedRectangles(withinThresholdMergedRectangles)
|
|
712
|
-
);
|
|
713
|
-
break;
|
|
714
|
-
}
|
|
715
|
-
if (!shouldMergeRectangles(withinThresholdMergedRectangles, nextRectangle)) {
|
|
716
|
-
allMergedRectangles.push(
|
|
717
|
-
blowUpMergedRectangles(withinThresholdMergedRectangles)
|
|
718
|
-
);
|
|
719
|
-
withinThresholdMergedRectangles = nextRectangle;
|
|
925
|
+
const sortedRects = [...rects].sort((a, b) => a.top - b.top);
|
|
926
|
+
let hasChanges;
|
|
927
|
+
do {
|
|
928
|
+
hasChanges = false;
|
|
929
|
+
let currentRect = sortedRects[0];
|
|
930
|
+
const tempResult = [];
|
|
931
|
+
for (let i = 1; i < sortedRects.length; i++) {
|
|
932
|
+
const sorted = sortedRects[i];
|
|
933
|
+
if (!currentRect || !sorted) continue;
|
|
934
|
+
if (shouldMergeRects(currentRect, sorted)) {
|
|
935
|
+
currentRect = mergeRects(currentRect, sorted);
|
|
936
|
+
hasChanges = true;
|
|
937
|
+
} else {
|
|
938
|
+
tempResult.push(currentRect);
|
|
939
|
+
currentRect = sorted;
|
|
940
|
+
}
|
|
720
941
|
}
|
|
721
|
-
|
|
722
|
-
|
|
942
|
+
if (currentRect) tempResult.push(currentRect);
|
|
943
|
+
sortedRects.length = 0;
|
|
944
|
+
sortedRects.push(...tempResult);
|
|
945
|
+
} while (hasChanges);
|
|
946
|
+
return sortedRects;
|
|
723
947
|
};
|
|
724
948
|
var useSelectionDimensions = () => {
|
|
725
949
|
const store = PDFStore.useContext();
|
|
@@ -1048,13 +1272,15 @@ var ColoredHighlightLayer = ({
|
|
|
1048
1272
|
onHighlight
|
|
1049
1273
|
}) => {
|
|
1050
1274
|
const pageNumber = usePDFPageNumber();
|
|
1051
|
-
const {
|
|
1275
|
+
const { getDimension } = useSelectionDimensions();
|
|
1052
1276
|
const highlights = usePdf(
|
|
1053
1277
|
(state) => state.coloredHighlights
|
|
1054
1278
|
);
|
|
1055
1279
|
const addColoredHighlight = usePdf((state) => state.addColoredHighlight);
|
|
1056
1280
|
const handleHighlighting = useCallback((color) => {
|
|
1057
|
-
const
|
|
1281
|
+
const dimension = getDimension();
|
|
1282
|
+
if (!dimension) return;
|
|
1283
|
+
const { highlights: highlights2, text } = dimension;
|
|
1058
1284
|
if (highlights2[0]) {
|
|
1059
1285
|
const highlight = {
|
|
1060
1286
|
uuid: v4(),
|
|
@@ -1336,6 +1562,7 @@ var Page = ({
|
|
|
1336
1562
|
style: {
|
|
1337
1563
|
...style,
|
|
1338
1564
|
"--scale-factor": 1,
|
|
1565
|
+
"--total-scale-factor": 1,
|
|
1339
1566
|
position: "relative",
|
|
1340
1567
|
width,
|
|
1341
1568
|
height
|
|
@@ -1442,21 +1669,21 @@ var useObserveElement = () => {
|
|
|
1442
1669
|
if (!targetWindow) {
|
|
1443
1670
|
return;
|
|
1444
1671
|
}
|
|
1445
|
-
let
|
|
1672
|
+
let offset3 = 0;
|
|
1446
1673
|
const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(
|
|
1447
1674
|
targetWindow,
|
|
1448
1675
|
() => {
|
|
1449
|
-
cb(
|
|
1676
|
+
cb(offset3, false);
|
|
1450
1677
|
},
|
|
1451
1678
|
instance.options.isScrollingResetDelay
|
|
1452
1679
|
);
|
|
1453
1680
|
const createHandler = (isScrolling) => () => {
|
|
1454
1681
|
const { horizontal, isRtl } = instance.options;
|
|
1455
|
-
|
|
1682
|
+
offset3 = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
|
|
1456
1683
|
const zoom = store.getState().zoom;
|
|
1457
|
-
|
|
1684
|
+
offset3 = offset3 / zoom;
|
|
1458
1685
|
fallback();
|
|
1459
|
-
cb(
|
|
1686
|
+
cb(offset3, isScrolling);
|
|
1460
1687
|
};
|
|
1461
1688
|
const handler = createHandler(true);
|
|
1462
1689
|
const endHandler = createHandler(false);
|
|
@@ -1477,8 +1704,8 @@ var useScrollFn = () => {
|
|
|
1477
1704
|
const scrollToFn = useCallback(
|
|
1478
1705
|
(_offset, canSmooth, instance) => {
|
|
1479
1706
|
const zoom = store.getState().zoom;
|
|
1480
|
-
const
|
|
1481
|
-
elementScroll(
|
|
1707
|
+
const offset3 = _offset * zoom;
|
|
1708
|
+
elementScroll(offset3, canSmooth, instance);
|
|
1482
1709
|
},
|
|
1483
1710
|
[store]
|
|
1484
1711
|
);
|
|
@@ -2593,10 +2820,10 @@ var PinchEngine = class extends Engine {
|
|
|
2593
2820
|
}
|
|
2594
2821
|
computeMovement() {
|
|
2595
2822
|
const {
|
|
2596
|
-
offset:
|
|
2823
|
+
offset: offset3,
|
|
2597
2824
|
lastOffset
|
|
2598
2825
|
} = this.state;
|
|
2599
|
-
this.state.movement = [
|
|
2826
|
+
this.state.movement = [offset3[0] / lastOffset[0], offset3[1] - lastOffset[1]];
|
|
2600
2827
|
}
|
|
2601
2828
|
axisIntent() {
|
|
2602
2829
|
const state = this.state;
|
|
@@ -4153,4 +4380,4 @@ function mergeAdjacentRects(rects) {
|
|
|
4153
4380
|
return merged;
|
|
4154
4381
|
}
|
|
4155
4382
|
|
|
4156
|
-
export { AnnotationLayer2 as AnnotationLayer, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, usePdf, usePdfJump, useSearch, useSelectionDimensions };
|
|
4383
|
+
export { AnnotationHighlightLayer, AnnotationLayer2 as AnnotationLayer, AnnotationTooltip, CanvasLayer, ColoredHighlightLayer, CurrentPage, CurrentZoom, CustomLayer, HighlightLayer, LinkService, NextPage, Outline, OutlineChildItems, OutlineItem, Page, Pages, PreviousPage, Root, Search, SelectionTooltip, TextLayer2 as TextLayer, Thumbnail, Thumbnails, TotalPages, ZoomIn, ZoomOut, calculateHighlightRects, useAnnotations, usePDFPageNumber, usePdf, usePdfJump, useSearch, useSelectionDimensions };
|