react-pdf-highlighter-plus 1.0.3 → 1.0.4
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/dist/esm/index.css +1221 -0
- package/dist/esm/index.css.map +1 -0
- package/dist/esm/index.d.ts +1348 -19
- package/dist/esm/index.js +3558 -18
- package/dist/esm/index.js.map +1 -1
- package/package.json +3 -2
- package/dist/esm/components/AreaHighlight.d.ts +0 -82
- package/dist/esm/components/AreaHighlight.js +0 -109
- package/dist/esm/components/AreaHighlight.js.map +0 -1
- package/dist/esm/components/DrawingCanvas.d.ts +0 -48
- package/dist/esm/components/DrawingCanvas.js +0 -277
- package/dist/esm/components/DrawingCanvas.js.map +0 -1
- package/dist/esm/components/DrawingHighlight.d.ts +0 -70
- package/dist/esm/components/DrawingHighlight.js +0 -164
- package/dist/esm/components/DrawingHighlight.js.map +0 -1
- package/dist/esm/components/FreetextHighlight.d.ts +0 -112
- package/dist/esm/components/FreetextHighlight.js +0 -193
- package/dist/esm/components/FreetextHighlight.js.map +0 -1
- package/dist/esm/components/HighlightLayer.d.ts +0 -49
- package/dist/esm/components/HighlightLayer.js +0 -37
- package/dist/esm/components/HighlightLayer.js.map +0 -1
- package/dist/esm/components/ImageHighlight.d.ts +0 -63
- package/dist/esm/components/ImageHighlight.js +0 -65
- package/dist/esm/components/ImageHighlight.js.map +0 -1
- package/dist/esm/components/MonitoredHighlightContainer.d.ts +0 -37
- package/dist/esm/components/MonitoredHighlightContainer.js +0 -42
- package/dist/esm/components/MonitoredHighlightContainer.js.map +0 -1
- package/dist/esm/components/MouseMonitor.d.ts +0 -34
- package/dist/esm/components/MouseMonitor.js +0 -30
- package/dist/esm/components/MouseMonitor.js.map +0 -1
- package/dist/esm/components/MouseSelection.d.ts +0 -66
- package/dist/esm/components/MouseSelection.js +0 -122
- package/dist/esm/components/MouseSelection.js.map +0 -1
- package/dist/esm/components/PdfHighlighter.d.ts +0 -184
- package/dist/esm/components/PdfHighlighter.js +0 -410
- package/dist/esm/components/PdfHighlighter.js.map +0 -1
- package/dist/esm/components/PdfLoader.d.ts +0 -55
- package/dist/esm/components/PdfLoader.js +0 -57
- package/dist/esm/components/PdfLoader.js.map +0 -1
- package/dist/esm/components/ShapeCanvas.d.ts +0 -51
- package/dist/esm/components/ShapeCanvas.js +0 -205
- package/dist/esm/components/ShapeCanvas.js.map +0 -1
- package/dist/esm/components/ShapeHighlight.d.ts +0 -107
- package/dist/esm/components/ShapeHighlight.js +0 -140
- package/dist/esm/components/ShapeHighlight.js.map +0 -1
- package/dist/esm/components/SignaturePad.d.ts +0 -40
- package/dist/esm/components/SignaturePad.js +0 -138
- package/dist/esm/components/SignaturePad.js.map +0 -1
- package/dist/esm/components/TextHighlight.d.ts +0 -93
- package/dist/esm/components/TextHighlight.js +0 -115
- package/dist/esm/components/TextHighlight.js.map +0 -1
- package/dist/esm/components/TipContainer.d.ts +0 -27
- package/dist/esm/components/TipContainer.js +0 -58
- package/dist/esm/components/TipContainer.js.map +0 -1
- package/dist/esm/contexts/HighlightContext.d.ts +0 -44
- package/dist/esm/contexts/HighlightContext.js +0 -16
- package/dist/esm/contexts/HighlightContext.js.map +0 -1
- package/dist/esm/contexts/PdfHighlighterContext.d.ts +0 -89
- package/dist/esm/contexts/PdfHighlighterContext.js +0 -16
- package/dist/esm/contexts/PdfHighlighterContext.js.map +0 -1
- package/dist/esm/lib/coordinates.d.ts +0 -16
- package/dist/esm/lib/coordinates.js +0 -69
- package/dist/esm/lib/coordinates.js.map +0 -1
- package/dist/esm/lib/export-pdf.d.ts +0 -81
- package/dist/esm/lib/export-pdf.js +0 -511
- package/dist/esm/lib/export-pdf.js.map +0 -1
- package/dist/esm/lib/get-bounding-rect.d.ts +0 -3
- package/dist/esm/lib/get-bounding-rect.js +0 -35
- package/dist/esm/lib/get-bounding-rect.js.map +0 -1
- package/dist/esm/lib/get-client-rects.d.ts +0 -3
- package/dist/esm/lib/get-client-rects.js +0 -43
- package/dist/esm/lib/get-client-rects.js.map +0 -1
- package/dist/esm/lib/group-highlights-by-page.d.ts +0 -6
- package/dist/esm/lib/group-highlights-by-page.js +0 -23
- package/dist/esm/lib/group-highlights-by-page.js.map +0 -1
- package/dist/esm/lib/optimize-client-rects.d.ts +0 -3
- package/dist/esm/lib/optimize-client-rects.js +0 -65
- package/dist/esm/lib/optimize-client-rects.js.map +0 -1
- package/dist/esm/lib/pdfjs-dom.d.ts +0 -9
- package/dist/esm/lib/pdfjs-dom.js +0 -55
- package/dist/esm/lib/pdfjs-dom.js.map +0 -1
- package/dist/esm/lib/screenshot.d.ts +0 -4
- package/dist/esm/lib/screenshot.js +0 -24
- package/dist/esm/lib/screenshot.js.map +0 -1
- package/dist/esm/types.d.ts +0 -213
- package/dist/esm/types.js +0 -2
- package/dist/esm/types.js.map +0 -1
|
@@ -1,164 +0,0 @@
|
|
|
1
|
-
import React, { useState, useCallback, useEffect, useRef } from "react";
|
|
2
|
-
import { Rnd } from "react-rnd";
|
|
3
|
-
import { getPageFromElement } from "../lib/pdfjs-dom";
|
|
4
|
-
import "../style/DrawingHighlight.css";
|
|
5
|
-
// Drawing style presets (same as toolbar)
|
|
6
|
-
const DRAWING_COLORS = ["#000000", "#FF0000", "#0000FF", "#00FF00", "#FFFF00"];
|
|
7
|
-
const STROKE_WIDTHS = [
|
|
8
|
-
{ label: "Thin", value: 1 },
|
|
9
|
-
{ label: "Medium", value: 3 },
|
|
10
|
-
{ label: "Thick", value: 5 },
|
|
11
|
-
];
|
|
12
|
-
/**
|
|
13
|
-
* Default drag icon - 6 dot grid pattern.
|
|
14
|
-
*/
|
|
15
|
-
const DefaultDragIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
16
|
-
React.createElement("circle", { cx: "8", cy: "6", r: "2" }),
|
|
17
|
-
React.createElement("circle", { cx: "16", cy: "6", r: "2" }),
|
|
18
|
-
React.createElement("circle", { cx: "8", cy: "12", r: "2" }),
|
|
19
|
-
React.createElement("circle", { cx: "16", cy: "12", r: "2" }),
|
|
20
|
-
React.createElement("circle", { cx: "8", cy: "18", r: "2" }),
|
|
21
|
-
React.createElement("circle", { cx: "16", cy: "18", r: "2" })));
|
|
22
|
-
const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
23
|
-
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" })));
|
|
24
|
-
/**
|
|
25
|
-
* Re-render strokes to a canvas and return as PNG data URL.
|
|
26
|
-
*/
|
|
27
|
-
const renderStrokesToImage = (strokes, width, height) => {
|
|
28
|
-
const canvas = document.createElement("canvas");
|
|
29
|
-
canvas.width = width;
|
|
30
|
-
canvas.height = height;
|
|
31
|
-
const ctx = canvas.getContext("2d");
|
|
32
|
-
if (!ctx)
|
|
33
|
-
return "";
|
|
34
|
-
strokes.forEach((stroke) => {
|
|
35
|
-
if (stroke.points.length < 2)
|
|
36
|
-
return;
|
|
37
|
-
ctx.strokeStyle = stroke.color;
|
|
38
|
-
ctx.lineWidth = stroke.width;
|
|
39
|
-
ctx.lineCap = "round";
|
|
40
|
-
ctx.lineJoin = "round";
|
|
41
|
-
ctx.beginPath();
|
|
42
|
-
ctx.moveTo(stroke.points[0].x, stroke.points[0].y);
|
|
43
|
-
stroke.points.slice(1).forEach((point) => {
|
|
44
|
-
ctx.lineTo(point.x, point.y);
|
|
45
|
-
});
|
|
46
|
-
ctx.stroke();
|
|
47
|
-
});
|
|
48
|
-
return canvas.toDataURL("image/png");
|
|
49
|
-
};
|
|
50
|
-
/**
|
|
51
|
-
* Renders a draggable, resizable freehand drawing annotation.
|
|
52
|
-
* Drawings are stored as PNG images with transparent backgrounds.
|
|
53
|
-
*
|
|
54
|
-
* @category Component
|
|
55
|
-
*/
|
|
56
|
-
export const DrawingHighlight = ({ highlight, onChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, dragIcon, onStyleChange, onDelete, deleteIcon, }) => {
|
|
57
|
-
const highlightClass = isScrolledTo ? "DrawingHighlight--scrolledTo" : "";
|
|
58
|
-
const [showStyleControls, setShowStyleControls] = useState(false);
|
|
59
|
-
const styleControlsRef = useRef(null);
|
|
60
|
-
// Close style controls when clicking outside
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
if (!showStyleControls)
|
|
63
|
-
return;
|
|
64
|
-
const handleClickOutside = (e) => {
|
|
65
|
-
if (styleControlsRef.current && !styleControlsRef.current.contains(e.target)) {
|
|
66
|
-
setShowStyleControls(false);
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
// Delay adding listener to avoid immediate close
|
|
70
|
-
const timeoutId = setTimeout(() => {
|
|
71
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
72
|
-
}, 0);
|
|
73
|
-
return () => {
|
|
74
|
-
clearTimeout(timeoutId);
|
|
75
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
76
|
-
};
|
|
77
|
-
}, [showStyleControls]);
|
|
78
|
-
// Generate key based on position for Rnd remount on position changes
|
|
79
|
-
const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
|
|
80
|
-
const imageUrl = highlight.content?.image;
|
|
81
|
-
const strokes = highlight.content?.strokes;
|
|
82
|
-
// Apply new color to all strokes
|
|
83
|
-
const handleColorChange = useCallback((newColor) => {
|
|
84
|
-
if (!strokes || !onStyleChange)
|
|
85
|
-
return;
|
|
86
|
-
console.log("DrawingHighlight: Changing color to", newColor);
|
|
87
|
-
const newStrokes = strokes.map((stroke) => ({
|
|
88
|
-
...stroke,
|
|
89
|
-
color: newColor,
|
|
90
|
-
}));
|
|
91
|
-
const newImage = renderStrokesToImage(newStrokes, highlight.position.boundingRect.width, highlight.position.boundingRect.height);
|
|
92
|
-
onStyleChange(newImage, newStrokes);
|
|
93
|
-
}, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
|
|
94
|
-
// Apply new width to all strokes
|
|
95
|
-
const handleWidthChange = useCallback((newWidth) => {
|
|
96
|
-
if (!strokes || !onStyleChange)
|
|
97
|
-
return;
|
|
98
|
-
console.log("DrawingHighlight: Changing width to", newWidth);
|
|
99
|
-
const newStrokes = strokes.map((stroke) => ({
|
|
100
|
-
...stroke,
|
|
101
|
-
width: newWidth,
|
|
102
|
-
}));
|
|
103
|
-
const newImage = renderStrokesToImage(newStrokes, highlight.position.boundingRect.width, highlight.position.boundingRect.height);
|
|
104
|
-
onStyleChange(newImage, newStrokes);
|
|
105
|
-
}, [strokes, onStyleChange, highlight.position.boundingRect.width, highlight.position.boundingRect.height]);
|
|
106
|
-
// Get current color from first stroke (for showing active state)
|
|
107
|
-
const currentColor = strokes?.[0]?.color || "#000000";
|
|
108
|
-
const currentWidth = strokes?.[0]?.width || 3;
|
|
109
|
-
return (React.createElement("div", { className: `DrawingHighlight ${highlightClass}`, onContextMenu: onContextMenu },
|
|
110
|
-
React.createElement(Rnd, { className: "DrawingHighlight__rnd", onDragStop: (_, data) => {
|
|
111
|
-
const boundingRect = {
|
|
112
|
-
...highlight.position.boundingRect,
|
|
113
|
-
top: data.y,
|
|
114
|
-
left: data.x,
|
|
115
|
-
};
|
|
116
|
-
onChange?.(boundingRect);
|
|
117
|
-
onEditEnd?.();
|
|
118
|
-
}, onDragStart: onEditStart, onResizeStop: (_e, _direction, ref, _delta, position) => {
|
|
119
|
-
const boundingRect = {
|
|
120
|
-
top: position.y,
|
|
121
|
-
left: position.x,
|
|
122
|
-
width: ref.offsetWidth,
|
|
123
|
-
height: ref.offsetHeight,
|
|
124
|
-
pageNumber: getPageFromElement(ref)?.number ||
|
|
125
|
-
highlight.position.boundingRect.pageNumber,
|
|
126
|
-
};
|
|
127
|
-
onChange?.(boundingRect);
|
|
128
|
-
onEditEnd?.();
|
|
129
|
-
}, onResizeStart: onEditStart, default: {
|
|
130
|
-
x: highlight.position.boundingRect.left,
|
|
131
|
-
y: highlight.position.boundingRect.top,
|
|
132
|
-
width: highlight.position.boundingRect.width || 150,
|
|
133
|
-
height: highlight.position.boundingRect.height || 100,
|
|
134
|
-
}, minWidth: 30, minHeight: 30, key: key, bounds: bounds,
|
|
135
|
-
// No aspect ratio lock for drawings - allow free resizing
|
|
136
|
-
lockAspectRatio: false, dragHandleClassName: "DrawingHighlight__drag-handle", onClick: (event) => {
|
|
137
|
-
event.stopPropagation();
|
|
138
|
-
event.preventDefault();
|
|
139
|
-
}, style: style },
|
|
140
|
-
React.createElement("div", { className: "DrawingHighlight__container" },
|
|
141
|
-
React.createElement("div", { className: "DrawingHighlight__toolbar" },
|
|
142
|
-
React.createElement("div", { className: "DrawingHighlight__drag-handle", title: "Drag to move" }, dragIcon || React.createElement(DefaultDragIcon, null)),
|
|
143
|
-
strokes && strokes.length > 0 && onStyleChange && (React.createElement("button", { type: "button", className: "DrawingHighlight__style-button", title: "Edit style", onClick: (e) => {
|
|
144
|
-
e.stopPropagation();
|
|
145
|
-
setShowStyleControls(!showStyleControls);
|
|
146
|
-
} },
|
|
147
|
-
React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
148
|
-
React.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" })))),
|
|
149
|
-
onDelete && (React.createElement("button", { className: "DrawingHighlight__delete-button", onClick: (e) => {
|
|
150
|
-
e.stopPropagation();
|
|
151
|
-
onDelete();
|
|
152
|
-
}, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
|
|
153
|
-
showStyleControls && strokes && strokes.length > 0 && onStyleChange && (React.createElement("div", { className: "DrawingHighlight__style-controls", ref: styleControlsRef },
|
|
154
|
-
React.createElement("div", { className: "DrawingHighlight__color-picker" }, DRAWING_COLORS.map((color) => (React.createElement("button", { key: color, type: "button", className: `DrawingHighlight__color-button ${currentColor === color ? 'active' : ''}`, style: { backgroundColor: color }, onClick: (e) => {
|
|
155
|
-
e.stopPropagation();
|
|
156
|
-
handleColorChange(color);
|
|
157
|
-
}, title: `Color: ${color}` })))),
|
|
158
|
-
React.createElement("div", { className: "DrawingHighlight__width-picker" }, STROKE_WIDTHS.map((w) => (React.createElement("button", { key: w.value, type: "button", className: `DrawingHighlight__width-button ${currentWidth === w.value ? 'active' : ''}`, onClick: (e) => {
|
|
159
|
-
e.stopPropagation();
|
|
160
|
-
handleWidthChange(w.value);
|
|
161
|
-
}, title: w.label }, w.label)))))),
|
|
162
|
-
React.createElement("div", { className: "DrawingHighlight__content" }, imageUrl ? (React.createElement("img", { src: imageUrl, alt: "Drawing", className: "DrawingHighlight__image", draggable: false })) : (React.createElement("div", { className: "DrawingHighlight__placeholder" }, "No drawing")))))));
|
|
163
|
-
};
|
|
164
|
-
//# sourceMappingURL=DrawingHighlight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DrawingHighlight.js","sourceRoot":"","sources":["../../../src/components/DrawingHighlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import React, { CSSProperties, MouseEvent, ReactNode } from "react";
|
|
2
|
-
import "../style/FreetextHighlight.css";
|
|
3
|
-
import type { LTWHP, ViewportHighlight } from "../types";
|
|
4
|
-
/**
|
|
5
|
-
* Style options for freetext highlight appearance.
|
|
6
|
-
*/
|
|
7
|
-
export interface FreetextStyle {
|
|
8
|
-
color?: string;
|
|
9
|
-
backgroundColor?: string;
|
|
10
|
-
fontFamily?: string;
|
|
11
|
-
fontSize?: string;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* The props type for {@link FreetextHighlight}.
|
|
15
|
-
*
|
|
16
|
-
* @category Component Properties
|
|
17
|
-
*/
|
|
18
|
-
export interface FreetextHighlightProps {
|
|
19
|
-
/**
|
|
20
|
-
* The highlight to be rendered as a {@link FreetextHighlight}.
|
|
21
|
-
*/
|
|
22
|
-
highlight: ViewportHighlight;
|
|
23
|
-
/**
|
|
24
|
-
* A callback triggered whenever the highlight position changes (drag).
|
|
25
|
-
*
|
|
26
|
-
* @param rect - The updated highlight area.
|
|
27
|
-
*/
|
|
28
|
-
onChange?(rect: LTWHP): void;
|
|
29
|
-
/**
|
|
30
|
-
* A callback triggered whenever the text content changes.
|
|
31
|
-
*
|
|
32
|
-
* @param text - The new text content.
|
|
33
|
-
*/
|
|
34
|
-
onTextChange?(text: string): void;
|
|
35
|
-
/**
|
|
36
|
-
* A callback triggered whenever the style changes.
|
|
37
|
-
*
|
|
38
|
-
* @param style - The new style options.
|
|
39
|
-
*/
|
|
40
|
-
onStyleChange?(style: FreetextStyle): void;
|
|
41
|
-
/**
|
|
42
|
-
* Has the highlight been auto-scrolled into view?
|
|
43
|
-
*/
|
|
44
|
-
isScrolledTo?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* react-rnd bounds on the highlight area.
|
|
47
|
-
*/
|
|
48
|
-
bounds?: string | Element;
|
|
49
|
-
/**
|
|
50
|
-
* A callback triggered on context menu.
|
|
51
|
-
*/
|
|
52
|
-
onContextMenu?(event: MouseEvent<HTMLDivElement>): void;
|
|
53
|
-
/**
|
|
54
|
-
* Event called when editing begins (drag or text edit).
|
|
55
|
-
*/
|
|
56
|
-
onEditStart?(): void;
|
|
57
|
-
/**
|
|
58
|
-
* Event called when editing ends.
|
|
59
|
-
*/
|
|
60
|
-
onEditEnd?(): void;
|
|
61
|
-
/**
|
|
62
|
-
* Custom styling for the container.
|
|
63
|
-
*/
|
|
64
|
-
style?: CSSProperties;
|
|
65
|
-
/**
|
|
66
|
-
* Text color.
|
|
67
|
-
*/
|
|
68
|
-
color?: string;
|
|
69
|
-
/**
|
|
70
|
-
* Background color.
|
|
71
|
-
*/
|
|
72
|
-
backgroundColor?: string;
|
|
73
|
-
/**
|
|
74
|
-
* Font family.
|
|
75
|
-
*/
|
|
76
|
-
fontFamily?: string;
|
|
77
|
-
/**
|
|
78
|
-
* Font size (e.g., "14px").
|
|
79
|
-
*/
|
|
80
|
-
fontSize?: string;
|
|
81
|
-
/**
|
|
82
|
-
* Custom drag icon. Receives default icon as child if not provided.
|
|
83
|
-
*/
|
|
84
|
-
dragIcon?: ReactNode;
|
|
85
|
-
/**
|
|
86
|
-
* Custom edit icon. Receives default icon as child if not provided.
|
|
87
|
-
*/
|
|
88
|
-
editIcon?: ReactNode;
|
|
89
|
-
/**
|
|
90
|
-
* Custom style/settings icon. Receives default icon as child if not provided.
|
|
91
|
-
*/
|
|
92
|
-
styleIcon?: ReactNode;
|
|
93
|
-
/**
|
|
94
|
-
* Custom background color presets for the style panel.
|
|
95
|
-
* Default: ["#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"]
|
|
96
|
-
*/
|
|
97
|
-
backgroundColorPresets?: string[];
|
|
98
|
-
/**
|
|
99
|
-
* Custom text color presets for the style panel.
|
|
100
|
-
* Default: ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"]
|
|
101
|
-
*/
|
|
102
|
-
textColorPresets?: string[];
|
|
103
|
-
/**
|
|
104
|
-
* Callback triggered when the delete button is clicked.
|
|
105
|
-
*/
|
|
106
|
-
onDelete?(): void;
|
|
107
|
-
/**
|
|
108
|
-
* Custom delete icon. Replaces the default trash icon.
|
|
109
|
-
*/
|
|
110
|
-
deleteIcon?: ReactNode;
|
|
111
|
-
}
|
|
112
|
-
export declare const FreetextHighlight: ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color, backgroundColor, fontFamily, fontSize, dragIcon, editIcon, styleIcon, backgroundColorPresets, textColorPresets, onDelete, deleteIcon, }: FreetextHighlightProps) => React.JSX.Element;
|
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect, } from "react";
|
|
2
|
-
import { Rnd } from "react-rnd";
|
|
3
|
-
import { getPageFromElement } from "../lib/pdfjs-dom";
|
|
4
|
-
import "../style/FreetextHighlight.css";
|
|
5
|
-
/**
|
|
6
|
-
* Renders a draggable, editable freetext annotation.
|
|
7
|
-
*
|
|
8
|
-
* @category Component
|
|
9
|
-
*/
|
|
10
|
-
// Default icons
|
|
11
|
-
const DefaultDragIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
12
|
-
React.createElement("circle", { cx: "8", cy: "6", r: "2" }),
|
|
13
|
-
React.createElement("circle", { cx: "16", cy: "6", r: "2" }),
|
|
14
|
-
React.createElement("circle", { cx: "8", cy: "12", r: "2" }),
|
|
15
|
-
React.createElement("circle", { cx: "16", cy: "12", r: "2" }),
|
|
16
|
-
React.createElement("circle", { cx: "8", cy: "18", r: "2" }),
|
|
17
|
-
React.createElement("circle", { cx: "16", cy: "18", r: "2" })));
|
|
18
|
-
const DefaultEditIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
19
|
-
React.createElement("path", { d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" })));
|
|
20
|
-
const DefaultStyleIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
21
|
-
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" })));
|
|
22
|
-
const DefaultDeleteIcon = () => (React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "currentColor" },
|
|
23
|
-
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" })));
|
|
24
|
-
// Default color presets
|
|
25
|
-
const DEFAULT_BACKGROUND_PRESETS = ["transparent", "#ffffc8", "#ffcdd2", "#c8e6c9", "#bbdefb", "#e1bee7"];
|
|
26
|
-
const DEFAULT_TEXT_PRESETS = ["#333333", "#d32f2f", "#1976d2", "#388e3c", "#7b1fa2"];
|
|
27
|
-
export const FreetextHighlight = ({ highlight, onChange, onTextChange, onStyleChange, isScrolledTo, bounds, onContextMenu, onEditStart, onEditEnd, style, color = "#333333", backgroundColor = "#ffffc8", fontFamily = "inherit", fontSize = "14px", dragIcon, editIcon, styleIcon, backgroundColorPresets = DEFAULT_BACKGROUND_PRESETS, textColorPresets = DEFAULT_TEXT_PRESETS, onDelete, deleteIcon, }) => {
|
|
28
|
-
const [isEditing, setIsEditing] = useState(false);
|
|
29
|
-
const [isStylePanelOpen, setIsStylePanelOpen] = useState(false);
|
|
30
|
-
const [text, setText] = useState(highlight.content?.text || "");
|
|
31
|
-
const textareaRef = useRef(null);
|
|
32
|
-
const stylePanelRef = useRef(null);
|
|
33
|
-
// Sync text with highlight content when it changes externally
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
setText(highlight.content?.text || "");
|
|
36
|
-
}, [highlight.content?.text]);
|
|
37
|
-
// Focus textarea when entering edit mode
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
if (isEditing && textareaRef.current) {
|
|
40
|
-
textareaRef.current.focus();
|
|
41
|
-
textareaRef.current.select();
|
|
42
|
-
}
|
|
43
|
-
}, [isEditing]);
|
|
44
|
-
// Close style panel when clicking outside
|
|
45
|
-
useEffect(() => {
|
|
46
|
-
if (!isStylePanelOpen)
|
|
47
|
-
return;
|
|
48
|
-
const handleClickOutside = (e) => {
|
|
49
|
-
if (stylePanelRef.current && !stylePanelRef.current.contains(e.target)) {
|
|
50
|
-
setIsStylePanelOpen(false);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
// Delay adding listener to avoid immediate close
|
|
54
|
-
const timeoutId = setTimeout(() => {
|
|
55
|
-
document.addEventListener("mousedown", handleClickOutside);
|
|
56
|
-
}, 0);
|
|
57
|
-
return () => {
|
|
58
|
-
clearTimeout(timeoutId);
|
|
59
|
-
document.removeEventListener("mousedown", handleClickOutside);
|
|
60
|
-
};
|
|
61
|
-
}, [isStylePanelOpen]);
|
|
62
|
-
const highlightClass = isScrolledTo ? "FreetextHighlight--scrolledTo" : "";
|
|
63
|
-
const editingClass = isEditing ? "FreetextHighlight--editing" : "";
|
|
64
|
-
// Generate key based on position for Rnd remount on position changes
|
|
65
|
-
const key = `${highlight.position.boundingRect.width}${highlight.position.boundingRect.height}${highlight.position.boundingRect.left}${highlight.position.boundingRect.top}`;
|
|
66
|
-
const handleTextClick = (e) => {
|
|
67
|
-
e.stopPropagation();
|
|
68
|
-
if (!isEditing) {
|
|
69
|
-
setIsEditing(true);
|
|
70
|
-
onEditStart?.();
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
const handleTextBlur = () => {
|
|
74
|
-
if (isEditing) {
|
|
75
|
-
setIsEditing(false);
|
|
76
|
-
onTextChange?.(text);
|
|
77
|
-
onEditEnd?.();
|
|
78
|
-
}
|
|
79
|
-
};
|
|
80
|
-
const handleKeyDown = (e) => {
|
|
81
|
-
if (e.key === "Escape") {
|
|
82
|
-
e.preventDefault();
|
|
83
|
-
setText(highlight.content?.text || "");
|
|
84
|
-
setIsEditing(false);
|
|
85
|
-
onEditEnd?.();
|
|
86
|
-
}
|
|
87
|
-
else if (e.key === "Enter" && !e.shiftKey) {
|
|
88
|
-
e.preventDefault();
|
|
89
|
-
setIsEditing(false);
|
|
90
|
-
onTextChange?.(text);
|
|
91
|
-
onEditEnd?.();
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
const containerStyle = {
|
|
95
|
-
backgroundColor,
|
|
96
|
-
color,
|
|
97
|
-
fontFamily,
|
|
98
|
-
fontSize,
|
|
99
|
-
...style,
|
|
100
|
-
};
|
|
101
|
-
return (React.createElement("div", { className: `FreetextHighlight ${highlightClass} ${editingClass}`, onContextMenu: onContextMenu },
|
|
102
|
-
React.createElement(Rnd, { className: "FreetextHighlight__rnd", onDragStop: (_, data) => {
|
|
103
|
-
const boundingRect = {
|
|
104
|
-
...highlight.position.boundingRect,
|
|
105
|
-
top: data.y,
|
|
106
|
-
left: data.x,
|
|
107
|
-
};
|
|
108
|
-
onChange?.(boundingRect);
|
|
109
|
-
}, onDragStart: () => {
|
|
110
|
-
if (!isEditing) {
|
|
111
|
-
onEditStart?.();
|
|
112
|
-
}
|
|
113
|
-
}, default: {
|
|
114
|
-
x: highlight.position.boundingRect.left,
|
|
115
|
-
y: highlight.position.boundingRect.top,
|
|
116
|
-
width: highlight.position.boundingRect.width || 150,
|
|
117
|
-
height: highlight.position.boundingRect.height || 80,
|
|
118
|
-
}, minWidth: 100, minHeight: 50, key: key, bounds: bounds, enableResizing: {
|
|
119
|
-
top: false,
|
|
120
|
-
right: true,
|
|
121
|
-
bottom: true,
|
|
122
|
-
left: false,
|
|
123
|
-
topRight: false,
|
|
124
|
-
bottomRight: true,
|
|
125
|
-
bottomLeft: false,
|
|
126
|
-
topLeft: false,
|
|
127
|
-
}, onResizeStop: (_e, _direction, ref, _delta, position) => {
|
|
128
|
-
const boundingRect = {
|
|
129
|
-
top: position.y,
|
|
130
|
-
left: position.x,
|
|
131
|
-
width: ref.offsetWidth,
|
|
132
|
-
height: ref.offsetHeight,
|
|
133
|
-
pageNumber: getPageFromElement(ref)?.number ||
|
|
134
|
-
highlight.position.boundingRect.pageNumber,
|
|
135
|
-
};
|
|
136
|
-
onChange?.(boundingRect);
|
|
137
|
-
}, onResizeStart: () => {
|
|
138
|
-
if (!isEditing) {
|
|
139
|
-
onEditStart?.();
|
|
140
|
-
}
|
|
141
|
-
}, cancel: ".FreetextHighlight__text, .FreetextHighlight__input, .FreetextHighlight__edit-button, .FreetextHighlight__style-button, .FreetextHighlight__style-panel, .FreetextHighlight__delete-button" },
|
|
142
|
-
React.createElement("div", { className: "FreetextHighlight__container", style: containerStyle },
|
|
143
|
-
React.createElement("div", { className: "FreetextHighlight__toolbar" },
|
|
144
|
-
React.createElement("div", { className: "FreetextHighlight__drag-handle", title: "Drag to move" }, dragIcon || React.createElement(DefaultDragIcon, null)),
|
|
145
|
-
React.createElement("button", { className: "FreetextHighlight__edit-button", onClick: handleTextClick, title: "Edit text", type: "button" }, editIcon || React.createElement(DefaultEditIcon, null)),
|
|
146
|
-
React.createElement("button", { className: "FreetextHighlight__style-button", onClick: (e) => {
|
|
147
|
-
e.stopPropagation();
|
|
148
|
-
setIsStylePanelOpen(!isStylePanelOpen);
|
|
149
|
-
}, title: "Change style", type: "button" }, styleIcon || React.createElement(DefaultStyleIcon, null)),
|
|
150
|
-
onDelete && (React.createElement("button", { className: "FreetextHighlight__delete-button", onClick: (e) => {
|
|
151
|
-
e.stopPropagation();
|
|
152
|
-
onDelete();
|
|
153
|
-
}, title: "Delete", type: "button" }, deleteIcon || React.createElement(DefaultDeleteIcon, null)))),
|
|
154
|
-
isStylePanelOpen && (React.createElement("div", { className: "FreetextHighlight__style-panel", ref: stylePanelRef, onClick: (e) => e.stopPropagation() },
|
|
155
|
-
React.createElement("div", { className: "FreetextHighlight__style-row" },
|
|
156
|
-
React.createElement("label", null, "Background"),
|
|
157
|
-
React.createElement("div", { className: "FreetextHighlight__color-options" },
|
|
158
|
-
React.createElement("div", { className: "FreetextHighlight__color-presets" }, backgroundColorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `FreetextHighlight__color-preset ${c === "transparent" ? "FreetextHighlight__color-preset--transparent" : ""} ${backgroundColor === c ? "active" : ""}`, style: c !== "transparent" ? { backgroundColor: c } : undefined, onClick: () => onStyleChange?.({ backgroundColor: c }), title: c === "transparent" ? "No background" : c })))),
|
|
159
|
-
React.createElement("input", { type: "color", value: backgroundColor === "transparent" ? "#ffffff" : backgroundColor, onChange: (e) => {
|
|
160
|
-
onStyleChange?.({ backgroundColor: e.target.value });
|
|
161
|
-
} }))),
|
|
162
|
-
React.createElement("div", { className: "FreetextHighlight__style-row" },
|
|
163
|
-
React.createElement("label", null, "Text Color"),
|
|
164
|
-
React.createElement("div", { className: "FreetextHighlight__color-options" },
|
|
165
|
-
React.createElement("div", { className: "FreetextHighlight__color-presets" }, textColorPresets.map((c) => (React.createElement("button", { key: c, type: "button", className: `FreetextHighlight__color-preset ${color === c ? "active" : ""}`, style: { backgroundColor: c }, onClick: () => onStyleChange?.({ color: c }), title: c })))),
|
|
166
|
-
React.createElement("input", { type: "color", value: color, onChange: (e) => {
|
|
167
|
-
onStyleChange?.({ color: e.target.value });
|
|
168
|
-
} }))),
|
|
169
|
-
React.createElement("div", { className: "FreetextHighlight__style-row" },
|
|
170
|
-
React.createElement("label", null, "Font Size"),
|
|
171
|
-
React.createElement("select", { value: fontSize, onChange: (e) => {
|
|
172
|
-
onStyleChange?.({ fontSize: e.target.value });
|
|
173
|
-
} },
|
|
174
|
-
React.createElement("option", { value: "10px" }, "10px"),
|
|
175
|
-
React.createElement("option", { value: "12px" }, "12px"),
|
|
176
|
-
React.createElement("option", { value: "14px" }, "14px"),
|
|
177
|
-
React.createElement("option", { value: "16px" }, "16px"),
|
|
178
|
-
React.createElement("option", { value: "18px" }, "18px"),
|
|
179
|
-
React.createElement("option", { value: "20px" }, "20px"),
|
|
180
|
-
React.createElement("option", { value: "24px" }, "24px"))),
|
|
181
|
-
React.createElement("div", { className: "FreetextHighlight__style-row" },
|
|
182
|
-
React.createElement("label", null, "Font"),
|
|
183
|
-
React.createElement("select", { value: fontFamily, onChange: (e) => {
|
|
184
|
-
onStyleChange?.({ fontFamily: e.target.value });
|
|
185
|
-
} },
|
|
186
|
-
React.createElement("option", { value: "inherit" }, "Default"),
|
|
187
|
-
React.createElement("option", { value: "Arial, sans-serif" }, "Arial"),
|
|
188
|
-
React.createElement("option", { value: "Georgia, serif" }, "Georgia"),
|
|
189
|
-
React.createElement("option", { value: "'Courier New', monospace" }, "Courier"),
|
|
190
|
-
React.createElement("option", { value: "'Times New Roman', serif" }, "Times"))))),
|
|
191
|
-
React.createElement("div", { className: "FreetextHighlight__content" }, isEditing ? (React.createElement("textarea", { ref: textareaRef, className: "FreetextHighlight__input", value: text, onChange: (e) => setText(e.target.value), onBlur: handleTextBlur, onKeyDown: handleKeyDown, onClick: (e) => e.stopPropagation() })) : (React.createElement("div", { className: "FreetextHighlight__text" }, text || "New note")))))));
|
|
192
|
-
};
|
|
193
|
-
//# sourceMappingURL=FreetextHighlight.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FreetextHighlight.js","sourceRoot":"","sources":["../../../src/components/FreetextHighlight.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { PDFViewer } from "pdfjs-dist/types/web/pdf_viewer";
|
|
2
|
-
import React, { ReactNode } from "react";
|
|
3
|
-
import { GhostHighlight, Highlight, HighlightBindings } from "../types";
|
|
4
|
-
/**
|
|
5
|
-
* The props type for {@link HighlightLayer}.
|
|
6
|
-
*
|
|
7
|
-
* @category Component Properties
|
|
8
|
-
* @internal
|
|
9
|
-
*/
|
|
10
|
-
export interface HighlightLayerProps {
|
|
11
|
-
/**
|
|
12
|
-
* Highlights and GhostHighlights organised by page number.
|
|
13
|
-
*/
|
|
14
|
-
highlightsByPage: {
|
|
15
|
-
[pageNumber: number]: Array<Highlight | GhostHighlight>;
|
|
16
|
-
};
|
|
17
|
-
/**
|
|
18
|
-
* The page number of the PDF document to highlight (1 indexed).
|
|
19
|
-
*/
|
|
20
|
-
pageNumber: number;
|
|
21
|
-
/**
|
|
22
|
-
* ID of the highlight that the parent PDF Highlighter is trying to autoscroll to.
|
|
23
|
-
*/
|
|
24
|
-
scrolledToHighlightId?: string | null;
|
|
25
|
-
/**
|
|
26
|
-
* The PDFViewer instance containing the HighlightLayer
|
|
27
|
-
*/
|
|
28
|
-
viewer: PDFViewer;
|
|
29
|
-
/**
|
|
30
|
-
* Group of DOM refs for all the highlights on this layer.
|
|
31
|
-
*/
|
|
32
|
-
highlightBindings: HighlightBindings;
|
|
33
|
-
/**
|
|
34
|
-
* The Highlight container that should be used to render highlights for this layer.
|
|
35
|
-
* It will be given appropriate context for a single highlight, allowing it to render
|
|
36
|
-
* a single {@link TextHighlight}, {@link AreaHighlight}, etc., in the correct place.
|
|
37
|
-
*/
|
|
38
|
-
children: ReactNode;
|
|
39
|
-
}
|
|
40
|
-
/**
|
|
41
|
-
* A component responsible for managing all the highlights and ghost highlights
|
|
42
|
-
* for a single page of a PDF document. It does not render each highlight
|
|
43
|
-
* but it provides context for a highlight container to do so.
|
|
44
|
-
* Its rendering should be controlled by a {@link PdfHighlighter}.
|
|
45
|
-
*
|
|
46
|
-
* @category Component
|
|
47
|
-
* @internal
|
|
48
|
-
*/
|
|
49
|
-
export declare const HighlightLayer: ({ highlightsByPage, pageNumber, scrolledToHighlightId, viewer, highlightBindings, children, }: HighlightLayerProps) => React.JSX.Element;
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { HighlightContext, } from "../contexts/HighlightContext";
|
|
3
|
-
import { scaledPositionToViewport, viewportToScaled } from "../lib/coordinates";
|
|
4
|
-
import screenshot from "../lib/screenshot";
|
|
5
|
-
const EMPTY_ID = "empty-id";
|
|
6
|
-
/**
|
|
7
|
-
* A component responsible for managing all the highlights and ghost highlights
|
|
8
|
-
* for a single page of a PDF document. It does not render each highlight
|
|
9
|
-
* but it provides context for a highlight container to do so.
|
|
10
|
-
* Its rendering should be controlled by a {@link PdfHighlighter}.
|
|
11
|
-
*
|
|
12
|
-
* @category Component
|
|
13
|
-
* @internal
|
|
14
|
-
*/
|
|
15
|
-
export const HighlightLayer = ({ highlightsByPage, pageNumber, scrolledToHighlightId, viewer, highlightBindings, children, }) => {
|
|
16
|
-
const currentHighlights = highlightsByPage[pageNumber] || [];
|
|
17
|
-
return (React.createElement("div", null, currentHighlights.map((highlight, index) => {
|
|
18
|
-
const viewportHighlight = {
|
|
19
|
-
...highlight,
|
|
20
|
-
id: "id" in highlight ? highlight.id : EMPTY_ID, // Give Empty ID to GhostHighlight
|
|
21
|
-
position: scaledPositionToViewport(highlight.position, viewer),
|
|
22
|
-
};
|
|
23
|
-
const isScrolledTo = Boolean(scrolledToHighlightId === viewportHighlight.id);
|
|
24
|
-
const highlightUtils = {
|
|
25
|
-
highlight: viewportHighlight,
|
|
26
|
-
viewportToScaled: (rect) => {
|
|
27
|
-
const viewport = viewer.getPageView((rect.pageNumber || pageNumber) - 1).viewport;
|
|
28
|
-
return viewportToScaled(rect, viewport);
|
|
29
|
-
},
|
|
30
|
-
screenshot: (boundingRect) => screenshot(boundingRect, pageNumber, viewer),
|
|
31
|
-
isScrolledTo: isScrolledTo,
|
|
32
|
-
highlightBindings,
|
|
33
|
-
};
|
|
34
|
-
return (React.createElement(HighlightContext.Provider, { value: highlightUtils, key: index }, children));
|
|
35
|
-
})));
|
|
36
|
-
};
|
|
37
|
-
//# sourceMappingURL=HighlightLayer.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"HighlightLayer.js","sourceRoot":"","sources":["../../../src/components/HighlightLayer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAEL,gBAAgB,GACjB,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAChF,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAU3C,MAAM,QAAQ,GAAG,UAAU,CAAC;AA0C5B;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,gBAAgB,EAChB,UAAU,EACV,qBAAqB,EACrB,MAAM,EACN,iBAAiB,EACjB,QAAQ,GACY,EAAE,EAAE;IACxB,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IAE7D,OAAO,CACL,iCACG,iBAAiB,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,KAAK,EAAE,EAAE;QAC1C,MAAM,iBAAiB,GAAsB;YAC3C,GAAG,SAAS;YACZ,EAAE,EAAE,IAAI,IAAI,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,kCAAkC;YACnF,QAAQ,EAAE,wBAAwB,CAAC,SAAS,CAAC,QAAQ,EAAE,MAAM,CAAC;SAC/D,CAAC;QAEF,MAAM,YAAY,GAAG,OAAO,CAC1B,qBAAqB,KAAK,iBAAiB,CAAC,EAAE,CAC/C,CAAC;QAEF,MAAM,cAAc,GAA4B;YAC9C,SAAS,EAAE,iBAAiB;YAC5B,gBAAgB,EAAE,CAAC,IAAW,EAAE,EAAE;gBAChC,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,CACjC,CAAC,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC,GAAG,CAAC,CACpC,CAAC,QAAQ,CAAC;gBAEX,OAAO,gBAAgB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YAC1C,CAAC;YACD,UAAU,EAAE,CAAC,YAAkB,EAAE,EAAE,CACjC,UAAU,CAAC,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC;YAC9C,YAAY,EAAE,YAAY;YAC1B,iBAAiB;SAClB,CAAC;QAEF,OAAO,CACL,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,cAAc,EAAE,GAAG,EAAE,KAAK,IACzD,QAAQ,CACiB,CAC7B,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}
|