efficient-shell 4.134.0 → 4.137.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.
Files changed (171) hide show
  1. package/LICENSE +6 -17
  2. package/README.md +84 -8
  3. package/dist/Browser-ZX5OTOKK.js +43 -0
  4. package/dist/Calculator-4SQGOQFQ.js +29 -0
  5. package/dist/ConfirmDialog-NPKW2XHM.js +1 -0
  6. package/dist/CurrencyConverter-2KOM7L6V.js +21 -0
  7. package/dist/Documents-IZTIQYPG.js +52 -0
  8. package/dist/Files-B63KKXGZ.js +89 -0
  9. package/dist/Notepad-WA77V45J.js +25 -0
  10. package/dist/PdfViewer-RBRGEKWF.js +1 -0
  11. package/dist/PomodoroTimer-SDUBKXUS.js +99 -0
  12. package/dist/Preview-D4KOA4OI.js +187 -0
  13. package/dist/Sidebar-Y57LYXXI.js +23 -0
  14. package/dist/Spreadsheet-JX5E6WH6.js +37 -0
  15. package/dist/Stock-XAQ5WMUZ.js +16 -0
  16. package/dist/Weather-HLAGJ5LV.js +60 -0
  17. package/dist/WorldClock-IRI4VCTA.js +32 -0
  18. package/dist/apps/index.js +1 -151
  19. package/dist/brand.css +1 -1
  20. package/dist/chunk-3A46NCXK.js +29 -0
  21. package/dist/chunk-44UO7FYU.js +11 -0
  22. package/dist/chunk-466CM2TJ.js +1 -0
  23. package/dist/chunk-57MIENLJ.js +1 -0
  24. package/dist/chunk-5CRAF2AD.js +2 -0
  25. package/dist/chunk-A2OQLLYK.js +6 -0
  26. package/dist/chunk-B43AGQET.js +4 -0
  27. package/dist/chunk-BR22X7E5.js +1 -0
  28. package/dist/chunk-BUTSU7FO.js +1 -0
  29. package/dist/chunk-D65T4H6J.js +1 -0
  30. package/dist/chunk-ESL5TDNA.js +1 -0
  31. package/dist/chunk-FBDZGO3V.js +1 -0
  32. package/dist/chunk-FHTLC7HH.js +1 -0
  33. package/dist/chunk-FQLMX3IE.js +948 -0
  34. package/dist/chunk-H562R4GX.js +34 -0
  35. package/dist/chunk-JN4WXTWJ.js +106 -0
  36. package/dist/chunk-LVDRBRYU.js +1 -0
  37. package/dist/chunk-LWLCNQY7.js +1 -0
  38. package/dist/chunk-MAIHBBWT.js +1 -0
  39. package/dist/chunk-NPJH5MD7.js +13 -0
  40. package/dist/chunk-OCSOMMY2.js +1 -0
  41. package/dist/chunk-OQDWLHZI.js +1 -0
  42. package/dist/chunk-OWSAMA3I.js +23 -0
  43. package/dist/chunk-PH3PRIFP.js +5 -0
  44. package/dist/chunk-TAWKWSPN.js +9 -0
  45. package/dist/chunk-U4GTZPXP.js +1 -0
  46. package/dist/chunk-UB4JIOLD.js +2 -0
  47. package/dist/chunk-UZAJ5BF6.js +9 -0
  48. package/dist/chunk-VEGMDXT4.js +1 -0
  49. package/dist/chunk-VTVSMRFX.js +1 -0
  50. package/dist/chunk-VVAGSKW7.js +1 -0
  51. package/dist/chunk-XO43FJRM.js +19 -0
  52. package/dist/chunk-Y7BOLDRM.js +69 -0
  53. package/dist/file-intake/index.js +1 -4
  54. package/dist/{index-DZ7E7bCl.d.ts → index-DVI9DMSu.d.ts} +189 -18
  55. package/dist/index.d.ts +2 -2
  56. package/dist/index.js +639 -7473
  57. package/dist/map/index.js +20 -540
  58. package/dist/markdown/index.js +6 -184
  59. package/dist/markup/index.js +1 -135
  60. package/dist/page-tabs/index.js +21 -709
  61. package/dist/sounds-OMHXVVQ4.js +1 -0
  62. package/dist/ui/index.d.ts +1 -1
  63. package/dist/ui/index.js +1 -19
  64. package/dist/ui.css +78 -10
  65. package/package.json +4 -3
  66. package/dist/Browser-O3QZGUF2.js +0 -482
  67. package/dist/Browser-O3QZGUF2.js.map +0 -1
  68. package/dist/Calculator-L6N5X3KU.js +0 -192
  69. package/dist/Calculator-L6N5X3KU.js.map +0 -1
  70. package/dist/ConfirmDialog-LYSSZSUD.js +0 -4
  71. package/dist/ConfirmDialog-LYSSZSUD.js.map +0 -1
  72. package/dist/CurrencyConverter-64MKXB3D.js +0 -236
  73. package/dist/CurrencyConverter-64MKXB3D.js.map +0 -1
  74. package/dist/Documents-5WXXYCLI.js +0 -441
  75. package/dist/Documents-5WXXYCLI.js.map +0 -1
  76. package/dist/Files-AUURUUDN.js +0 -805
  77. package/dist/Files-AUURUUDN.js.map +0 -1
  78. package/dist/Notepad-GPXJVPB7.js +0 -410
  79. package/dist/Notepad-GPXJVPB7.js.map +0 -1
  80. package/dist/PdfViewer-HKO6P4SR.js +0 -5
  81. package/dist/PdfViewer-HKO6P4SR.js.map +0 -1
  82. package/dist/PomodoroTimer-4TQBWLP2.js +0 -633
  83. package/dist/PomodoroTimer-4TQBWLP2.js.map +0 -1
  84. package/dist/Preview-FOZYPKM2.js +0 -2959
  85. package/dist/Preview-FOZYPKM2.js.map +0 -1
  86. package/dist/Sidebar-BPU7RCZP.js +0 -291
  87. package/dist/Sidebar-BPU7RCZP.js.map +0 -1
  88. package/dist/Spreadsheet-3C66BBBF.js +0 -519
  89. package/dist/Spreadsheet-3C66BBBF.js.map +0 -1
  90. package/dist/Stock-IF4IHYLU.js +0 -158
  91. package/dist/Stock-IF4IHYLU.js.map +0 -1
  92. package/dist/Weather-725PFR7T.js +0 -431
  93. package/dist/Weather-725PFR7T.js.map +0 -1
  94. package/dist/WorldClock-UU4NZIQ7.js +0 -202
  95. package/dist/WorldClock-UU4NZIQ7.js.map +0 -1
  96. package/dist/apps/index.js.map +0 -1
  97. package/dist/chunk-2TPTHAKI.js +0 -316
  98. package/dist/chunk-2TPTHAKI.js.map +0 -1
  99. package/dist/chunk-4P44JXDS.js +0 -195
  100. package/dist/chunk-4P44JXDS.js.map +0 -1
  101. package/dist/chunk-5O42JXQE.js +0 -26
  102. package/dist/chunk-5O42JXQE.js.map +0 -1
  103. package/dist/chunk-72CQWN7O.js +0 -547
  104. package/dist/chunk-72CQWN7O.js.map +0 -1
  105. package/dist/chunk-7CCHEEYC.js +0 -94
  106. package/dist/chunk-7CCHEEYC.js.map +0 -1
  107. package/dist/chunk-BE7FZOFU.js +0 -17
  108. package/dist/chunk-BE7FZOFU.js.map +0 -1
  109. package/dist/chunk-D276EMXS.js +0 -57
  110. package/dist/chunk-D276EMXS.js.map +0 -1
  111. package/dist/chunk-D7PYW2QS.js +0 -265
  112. package/dist/chunk-D7PYW2QS.js.map +0 -1
  113. package/dist/chunk-DVZWYWSD.js +0 -26
  114. package/dist/chunk-DVZWYWSD.js.map +0 -1
  115. package/dist/chunk-ET6ID4LP.js +0 -102
  116. package/dist/chunk-ET6ID4LP.js.map +0 -1
  117. package/dist/chunk-GA35NEND.js +0 -56
  118. package/dist/chunk-GA35NEND.js.map +0 -1
  119. package/dist/chunk-GIGV2ZRW.js +0 -70
  120. package/dist/chunk-GIGV2ZRW.js.map +0 -1
  121. package/dist/chunk-IPXN646P.js +0 -14
  122. package/dist/chunk-IPXN646P.js.map +0 -1
  123. package/dist/chunk-IRWSRJ4K.js +0 -48
  124. package/dist/chunk-IRWSRJ4K.js.map +0 -1
  125. package/dist/chunk-IULP5BCD.js +0 -79
  126. package/dist/chunk-IULP5BCD.js.map +0 -1
  127. package/dist/chunk-MGGY74RY.js +0 -14
  128. package/dist/chunk-MGGY74RY.js.map +0 -1
  129. package/dist/chunk-OLJDJYSU.js +0 -13678
  130. package/dist/chunk-OLJDJYSU.js.map +0 -1
  131. package/dist/chunk-PIGDNN5F.js +0 -46
  132. package/dist/chunk-PIGDNN5F.js.map +0 -1
  133. package/dist/chunk-Q2MJVSJT.js +0 -7
  134. package/dist/chunk-Q2MJVSJT.js.map +0 -1
  135. package/dist/chunk-Q3LT745N.js +0 -3710
  136. package/dist/chunk-Q3LT745N.js.map +0 -1
  137. package/dist/chunk-QAGQRNKI.js +0 -145
  138. package/dist/chunk-QAGQRNKI.js.map +0 -1
  139. package/dist/chunk-QRL64J5F.js +0 -503
  140. package/dist/chunk-QRL64J5F.js.map +0 -1
  141. package/dist/chunk-QSKCQUZE.js +0 -1103
  142. package/dist/chunk-QSKCQUZE.js.map +0 -1
  143. package/dist/chunk-R4OQIQYX.js +0 -153
  144. package/dist/chunk-R4OQIQYX.js.map +0 -1
  145. package/dist/chunk-RT6DSB5Y.js +0 -143
  146. package/dist/chunk-RT6DSB5Y.js.map +0 -1
  147. package/dist/chunk-SHQM5CK3.js +0 -549
  148. package/dist/chunk-SHQM5CK3.js.map +0 -1
  149. package/dist/chunk-T4VQHMG4.js +0 -822
  150. package/dist/chunk-T4VQHMG4.js.map +0 -1
  151. package/dist/chunk-TRCWINHF.js +0 -105
  152. package/dist/chunk-TRCWINHF.js.map +0 -1
  153. package/dist/chunk-TW7LPMVR.js +0 -16
  154. package/dist/chunk-TW7LPMVR.js.map +0 -1
  155. package/dist/chunk-W622KQTD.js +0 -465
  156. package/dist/chunk-W622KQTD.js.map +0 -1
  157. package/dist/chunk-X4Q6G253.js +0 -416
  158. package/dist/chunk-X4Q6G253.js.map +0 -1
  159. package/dist/chunk-YNKK7NE3.js +0 -171
  160. package/dist/chunk-YNKK7NE3.js.map +0 -1
  161. package/dist/chunk-YPO6RDMX.js +0 -20
  162. package/dist/chunk-YPO6RDMX.js.map +0 -1
  163. package/dist/file-intake/index.js.map +0 -1
  164. package/dist/index.js.map +0 -1
  165. package/dist/map/index.js.map +0 -1
  166. package/dist/markdown/index.js.map +0 -1
  167. package/dist/markup/index.js.map +0 -1
  168. package/dist/page-tabs/index.js.map +0 -1
  169. package/dist/sounds-NT4DEZGD.js +0 -3
  170. package/dist/sounds-NT4DEZGD.js.map +0 -1
  171. package/dist/ui/index.js.map +0 -1
@@ -1,1103 +0,0 @@
1
- import { toast_default } from './chunk-4P44JXDS.js';
2
- import { forwardRef, useRef, useState, useMemo, useEffect, useImperativeHandle } from 'react';
3
- import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
-
5
- var COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#000000", "#ffffff"];
6
- var FONTS = [
7
- { id: "system", label: "System", css: "-apple-system, system-ui, sans-serif" },
8
- { id: "serif", label: "Serif", css: 'Georgia, "Times New Roman", serif' },
9
- { id: "mono", label: "Mono", css: 'ui-monospace, "SF Mono", Menlo, monospace' },
10
- { id: "cursive", label: "Cursive", css: '"Brush Script MT", "Comic Sans MS", cursive' }
11
- ];
12
- var STROKE_DEFAULT = 4;
13
- var TEXT_SIZE_DEFAULT = 24;
14
- var TEXT_PADDING_DEFAULT = 6;
15
- var RECT_RADIUS_DEFAULT = 12;
16
- var MOSAIC_BLOCK = 12;
17
- var ZOOM_MIN = 0.25;
18
- var ZOOM_MAX = 4;
19
- var ZOOM_STEP = 0.25;
20
- var newId = () => Math.random().toString(36).slice(2, 9);
21
- var ImageAnnotator = forwardRef(function ImageAnnotator2({ src, filename, onApply, onCancel }, ref) {
22
- const wrapRef = useRef(null);
23
- const canvasRef = useRef(null);
24
- const svgRef = useRef(null);
25
- const imageRef = useRef(null);
26
- const [tool, setTool] = useState("select");
27
- const [color, setColor] = useState(COLORS[0]);
28
- const [stroke, setStroke] = useState(STROKE_DEFAULT);
29
- const [textSize, setTextSize] = useState(TEXT_SIZE_DEFAULT);
30
- const [textFont, setTextFont] = useState(FONTS[0].id);
31
- const [textBold, setTextBold] = useState(true);
32
- const [textItalic, setTextItalic] = useState(false);
33
- const [textUnderline, setTextUnderline] = useState(false);
34
- const [textBorderColor, setTextBorderColor] = useState(null);
35
- const [textBg, setTextBg] = useState(null);
36
- const [textPadding, setTextPadding] = useState(TEXT_PADDING_DEFAULT);
37
- const [rectRadius, setRectRadius] = useState(RECT_RADIUS_DEFAULT);
38
- const [annotations, setAnnotations] = useState([]);
39
- const [selectedId, setSelectedId] = useState(null);
40
- const [imageSize, setImageSize] = useState(null);
41
- const [fitSize, setFitSize] = useState(null);
42
- const [zoom, setZoom] = useState(1);
43
- const [preview, setPreview] = useState(null);
44
- const [pendingText, setPendingText] = useState(null);
45
- const [pendingCrop, setPendingCrop] = useState(null);
46
- const dragRef = useRef(null);
47
- const [isDragging, setIsDragging] = useState(false);
48
- const displaySize = useMemo(() => {
49
- if (!fitSize) return null;
50
- return { w: fitSize.w * zoom, h: fitSize.h * zoom };
51
- }, [fitSize, zoom]);
52
- const scale = displaySize && imageSize ? displaySize.w / imageSize.w : 1;
53
- const selected = useMemo(
54
- () => annotations.find((a) => a.id === selectedId) ?? null,
55
- [annotations, selectedId]
56
- );
57
- useEffect(() => {
58
- if (tool === "select" && selected) {
59
- if ("color" in selected) setColor(selected.color);
60
- if ("stroke" in selected) setStroke(selected.stroke);
61
- if (selected.type === "rect") setRectRadius(selected.radius);
62
- if (selected.type === "text") {
63
- setTextSize(selected.size);
64
- setTextFont(selected.font);
65
- setTextBold(selected.bold);
66
- setTextItalic(selected.italic);
67
- setTextUnderline(selected.underline);
68
- setTextBorderColor(selected.borderColor);
69
- setTextBg(selected.background);
70
- setTextPadding(selected.padding);
71
- }
72
- }
73
- }, [selectedId]);
74
- useEffect(() => {
75
- const img = new Image();
76
- img.crossOrigin = "anonymous";
77
- img.onload = () => {
78
- imageRef.current = img;
79
- setImageSize({ w: img.naturalWidth, h: img.naturalHeight });
80
- setAnnotations([]);
81
- setSelectedId(null);
82
- };
83
- img.onerror = () => toast_default.error("Failed to load image");
84
- img.src = src;
85
- }, [src]);
86
- useEffect(() => {
87
- if (!imageSize) return;
88
- const update = () => {
89
- const wrap = wrapRef.current;
90
- if (!wrap) return;
91
- const r = wrap.getBoundingClientRect();
92
- const availW = Math.max(0, r.width - 32);
93
- const availH = Math.max(0, r.height - 32);
94
- if (availW === 0 || availH === 0) return;
95
- const ratio = imageSize.w / imageSize.h;
96
- let w = imageSize.w, h = imageSize.h;
97
- if (w > availW) {
98
- w = availW;
99
- h = w / ratio;
100
- }
101
- if (h > availH) {
102
- h = availH;
103
- w = h * ratio;
104
- }
105
- setFitSize({ w, h });
106
- };
107
- update();
108
- const ro = new ResizeObserver(update);
109
- if (wrapRef.current) ro.observe(wrapRef.current);
110
- return () => ro.disconnect();
111
- }, [imageSize]);
112
- const mosaicAnnos = useMemo(
113
- () => annotations.filter((a) => a.type === "mosaic"),
114
- [annotations]
115
- );
116
- useEffect(() => {
117
- const img = imageRef.current;
118
- const c = canvasRef.current;
119
- if (!img || !c || !imageSize) return;
120
- c.width = imageSize.w;
121
- c.height = imageSize.h;
122
- const ctx = c.getContext("2d");
123
- ctx.drawImage(img, 0, 0);
124
- for (const m of mosaicAnnos) applyMosaic(ctx, m);
125
- }, [imageSize, mosaicAnnos, fitSize]);
126
- const evToImage = (e) => {
127
- const svg = svgRef.current;
128
- if (!svg) return { x: 0, y: 0 };
129
- const pt = svg.createSVGPoint();
130
- pt.x = e.clientX;
131
- pt.y = e.clientY;
132
- const ctm = svg.getScreenCTM();
133
- if (!ctm) return { x: 0, y: 0 };
134
- const t = pt.matrixTransform(ctm.inverse());
135
- return { x: t.x, y: t.y };
136
- };
137
- const beginDrag = (drag) => {
138
- dragRef.current = drag;
139
- setIsDragging(true);
140
- };
141
- useEffect(() => {
142
- if (!isDragging) return;
143
- const onMove = (ev) => {
144
- const drag = dragRef.current;
145
- if (!drag) return;
146
- const p = evToImage(ev);
147
- if (drag.kind === "draw") {
148
- setPreview(makeShape(tool, drag.start, p, color, stroke, rectRadius));
149
- } else if (drag.kind === "pen") {
150
- const last = drag.points[drag.points.length - 1];
151
- if (Math.abs(p.x - last.x) > 1 || Math.abs(p.y - last.y) > 1) {
152
- drag.points.push(p);
153
- setPreview({ id: "", type: "draw", points: drag.points.slice(), color, stroke });
154
- }
155
- } else if (drag.kind === "crop") {
156
- setPendingCrop(normalizeRect(drag.start, p));
157
- } else if (drag.kind === "move") {
158
- const dx = p.x - drag.start.x;
159
- const dy = p.y - drag.start.y;
160
- setAnnotations((prev) => prev.map((a) => a.id === drag.id ? translate(drag.original, dx, dy) : a));
161
- } else if (drag.kind === "resize") {
162
- setAnnotations((prev) => prev.map((a) => a.id === drag.id ? resize(drag.original, drag.corner, p) : a));
163
- }
164
- };
165
- const onUp = () => {
166
- const drag = dragRef.current;
167
- dragRef.current = null;
168
- setIsDragging(false);
169
- if (drag?.kind === "draw") {
170
- setPreview((p) => {
171
- if (!p || isTrivial(p)) return null;
172
- const anno = { ...p, id: newId() };
173
- setAnnotations((prev) => [...prev, anno]);
174
- setSelectedId(anno.id);
175
- setTool("select");
176
- return null;
177
- });
178
- } else if (drag?.kind === "pen") {
179
- if (drag.points.length < 2) {
180
- setPreview(null);
181
- return;
182
- }
183
- const anno = { id: newId(), type: "draw", points: drag.points, color, stroke };
184
- setAnnotations((prev) => [...prev, anno]);
185
- setSelectedId(anno.id);
186
- setTool("select");
187
- setPreview(null);
188
- }
189
- };
190
- window.addEventListener("pointermove", onMove);
191
- window.addEventListener("pointerup", onUp);
192
- window.addEventListener("pointercancel", onUp);
193
- return () => {
194
- window.removeEventListener("pointermove", onMove);
195
- window.removeEventListener("pointerup", onUp);
196
- window.removeEventListener("pointercancel", onUp);
197
- };
198
- }, [isDragging, tool, color, stroke, rectRadius]);
199
- const handleAnnoPointerDown = (e, anno) => {
200
- if (tool !== "select") return;
201
- e.stopPropagation();
202
- setSelectedId(anno.id);
203
- beginDrag({ kind: "move", id: anno.id, start: evToImage(e), original: anno });
204
- };
205
- const handleHandlePointerDown = (e, anno, corner) => {
206
- e.stopPropagation();
207
- beginDrag({ kind: "resize", id: anno.id, corner, start: evToImage(e), original: anno });
208
- };
209
- const handleSvgPointerDown = (e) => {
210
- if (tool === "select") {
211
- setSelectedId(null);
212
- return;
213
- }
214
- if (tool === "text") {
215
- if (pendingText) {
216
- commitText();
217
- return;
218
- }
219
- const p = evToImage(e);
220
- setPendingText({ x: p.x, y: p.y, value: "" });
221
- return;
222
- }
223
- const start = evToImage(e);
224
- if (tool === "crop") {
225
- beginDrag({ kind: "crop", start });
226
- return;
227
- }
228
- if (tool === "draw") {
229
- beginDrag({ kind: "pen", points: [start] });
230
- setPreview({ id: "", type: "draw", points: [start], color, stroke });
231
- return;
232
- }
233
- setPreview(makeShape(tool, start, start, color, stroke, rectRadius));
234
- beginDrag({ kind: "draw", start });
235
- };
236
- const handleAnnoDoubleClick = (anno) => {
237
- if (anno.type !== "text") return;
238
- setPendingText({ x: anno.x, y: anno.y, value: anno.text, editingId: anno.id });
239
- };
240
- useEffect(() => {
241
- const onKey = (ev) => {
242
- if (document.activeElement && /^(INPUT|TEXTAREA)$/.test(document.activeElement.tagName)) return;
243
- if ((ev.metaKey || ev.ctrlKey) && (ev.key === "z" || ev.key === "Z") && !ev.shiftKey) {
244
- ev.preventDefault();
245
- setAnnotations((prev) => prev.slice(0, -1));
246
- setSelectedId(null);
247
- return;
248
- }
249
- if (!selectedId) return;
250
- if (ev.key === "Delete" || ev.key === "Backspace") {
251
- ev.preventDefault();
252
- setAnnotations((prev) => prev.filter((a) => a.id !== selectedId));
253
- setSelectedId(null);
254
- } else if (ev.key === "Escape") {
255
- setSelectedId(null);
256
- }
257
- };
258
- window.addEventListener("keydown", onKey);
259
- return () => window.removeEventListener("keydown", onKey);
260
- }, [selectedId]);
261
- const setColorAndApply = (c) => {
262
- setColor(c);
263
- if (!selectedId) return;
264
- setAnnotations((prev) => prev.map((a) => {
265
- if (a.id !== selectedId) return a;
266
- if (a.type === "mosaic") return a;
267
- return { ...a, color: c };
268
- }));
269
- };
270
- const setStrokeAndApply = (s) => {
271
- setStroke(s);
272
- if (!selectedId) return;
273
- setAnnotations((prev) => prev.map((a) => {
274
- if (a.id !== selectedId) return a;
275
- if (a.type === "rect" || a.type === "circle" || a.type === "arrow" || a.type === "draw") {
276
- return { ...a, stroke: s };
277
- }
278
- return a;
279
- }));
280
- };
281
- const setRectRadiusAndApply = (r) => {
282
- setRectRadius(r);
283
- if (!selectedId) return;
284
- setAnnotations((prev) => prev.map(
285
- (a) => a.id === selectedId && a.type === "rect" ? { ...a, radius: r } : a
286
- ));
287
- };
288
- const setTextSizeAndApply = (s) => {
289
- setTextSize(s);
290
- if (!selectedId) return;
291
- setAnnotations((prev) => prev.map(
292
- (a) => a.id === selectedId && a.type === "text" ? { ...a, size: s } : a
293
- ));
294
- };
295
- const setTextFontAndApply = (f) => {
296
- setTextFont(f);
297
- if (!selectedId) return;
298
- setAnnotations((prev) => prev.map(
299
- (a) => a.id === selectedId && a.type === "text" ? { ...a, font: f } : a
300
- ));
301
- };
302
- const toggleTextStyleAndApply = (which) => {
303
- const next = !{ bold: textBold, italic: textItalic, underline: textUnderline }[which];
304
- if (which === "bold") setTextBold(next);
305
- if (which === "italic") setTextItalic(next);
306
- if (which === "underline") setTextUnderline(next);
307
- if (!selectedId) return;
308
- setAnnotations((prev) => prev.map(
309
- (a) => a.id === selectedId && a.type === "text" ? { ...a, [which]: next } : a
310
- ));
311
- };
312
- const setTextBorderColorAndApply = (c) => {
313
- setTextBorderColor(c);
314
- if (!selectedId) return;
315
- setAnnotations((prev) => prev.map(
316
- (a) => a.id === selectedId && a.type === "text" ? { ...a, borderColor: c } : a
317
- ));
318
- };
319
- const setTextBgAndApply = (c) => {
320
- setTextBg(c);
321
- if (!selectedId) return;
322
- setAnnotations((prev) => prev.map(
323
- (a) => a.id === selectedId && a.type === "text" ? { ...a, background: c } : a
324
- ));
325
- };
326
- const setTextPaddingAndApply = (p) => {
327
- setTextPadding(p);
328
- if (!selectedId) return;
329
- setAnnotations((prev) => prev.map(
330
- (a) => a.id === selectedId && a.type === "text" ? { ...a, padding: p } : a
331
- ));
332
- };
333
- const commitText = (explicitValue) => {
334
- if (!pendingText) return;
335
- const value = explicitValue ?? pendingText.value;
336
- if (!value.trim()) {
337
- if (pendingText.editingId) {
338
- setAnnotations((prev) => prev.filter((a) => a.id !== pendingText.editingId));
339
- }
340
- setPendingText(null);
341
- return;
342
- }
343
- if (pendingText.editingId) {
344
- setAnnotations((prev) => prev.map(
345
- (a) => a.id === pendingText.editingId && a.type === "text" ? { ...a, text: value } : a
346
- ));
347
- } else {
348
- const anno = {
349
- id: newId(),
350
- type: "text",
351
- x: pendingText.x,
352
- y: pendingText.y,
353
- text: value,
354
- color,
355
- size: textSize,
356
- font: textFont,
357
- bold: textBold,
358
- italic: textItalic,
359
- underline: textUnderline,
360
- borderColor: textBorderColor,
361
- background: textBg,
362
- padding: textPadding
363
- };
364
- setAnnotations((prev) => [...prev, anno]);
365
- setSelectedId(anno.id);
366
- setTool("select");
367
- }
368
- setPendingText(null);
369
- };
370
- const applyCrop = () => {
371
- if (!pendingCrop || !imageRef.current || !imageSize) return;
372
- const r = pendingCrop;
373
- const tmp = document.createElement("canvas");
374
- tmp.width = Math.round(r.w);
375
- tmp.height = Math.round(r.h);
376
- const tctx = tmp.getContext("2d");
377
- const sourceCanvas = document.createElement("canvas");
378
- sourceCanvas.width = imageSize.w;
379
- sourceCanvas.height = imageSize.h;
380
- const sctx = sourceCanvas.getContext("2d");
381
- sctx.drawImage(imageRef.current, 0, 0);
382
- for (const m of mosaicAnnos) applyMosaic(sctx, m);
383
- tctx.drawImage(sourceCanvas, r.x, r.y, r.w, r.h, 0, 0, r.w, r.h);
384
- const newImg = new Image();
385
- newImg.onload = () => {
386
- imageRef.current = newImg;
387
- setImageSize({ w: newImg.naturalWidth, h: newImg.naturalHeight });
388
- setAnnotations(
389
- (prev) => prev.filter((a) => a.type !== "mosaic").map((a) => translate(a, -r.x, -r.y)).filter((a) => withinBounds(a, newImg.naturalWidth, newImg.naturalHeight))
390
- );
391
- setPendingCrop(null);
392
- };
393
- newImg.src = tmp.toDataURL("image/png");
394
- };
395
- const cancelCrop = () => setPendingCrop(null);
396
- const undoLast = () => {
397
- setAnnotations((prev) => prev.slice(0, -1));
398
- setSelectedId(null);
399
- };
400
- const compositeToCanvas = async () => {
401
- const c = canvasRef.current;
402
- const svg = svgRef.current;
403
- if (!c || !svg || !imageSize) return null;
404
- const out = document.createElement("canvas");
405
- out.width = imageSize.w;
406
- out.height = imageSize.h;
407
- const octx = out.getContext("2d");
408
- octx.drawImage(c, 0, 0);
409
- const clone = svg.cloneNode(true);
410
- clone.querySelectorAll("[data-chrome]").forEach((n) => n.remove());
411
- const xml = new XMLSerializer().serializeToString(clone);
412
- const svgBlob = new Blob([xml], { type: "image/svg+xml;charset=utf-8" });
413
- const svgUrl = URL.createObjectURL(svgBlob);
414
- const svgImg = new Image();
415
- await new Promise((resolve) => {
416
- svgImg.onload = () => resolve();
417
- svgImg.onerror = () => resolve();
418
- svgImg.src = svgUrl;
419
- });
420
- octx.drawImage(svgImg, 0, 0, imageSize.w, imageSize.h);
421
- URL.revokeObjectURL(svgUrl);
422
- return out;
423
- };
424
- useImperativeHandle(ref, () => ({
425
- save: async () => {
426
- const out = await compositeToCanvas();
427
- if (!out) return;
428
- out.toBlob((blob) => {
429
- if (!blob) {
430
- toast_default.error("Failed to export");
431
- return;
432
- }
433
- const url = URL.createObjectURL(blob);
434
- const a = document.createElement("a");
435
- a.href = url;
436
- const base = filename.replace(/\.[^.]+$/, "");
437
- a.download = `${base}-annotated.png`;
438
- a.click();
439
- URL.revokeObjectURL(url);
440
- }, "image/png");
441
- },
442
- copy: async () => {
443
- if (!("clipboard" in navigator) || typeof ClipboardItem === "undefined") {
444
- toast_default.error("Clipboard images not supported in this browser");
445
- return;
446
- }
447
- const out = await compositeToCanvas();
448
- if (!out) return;
449
- out.toBlob(async (blob) => {
450
- if (!blob) {
451
- toast_default.error("Failed to copy");
452
- return;
453
- }
454
- try {
455
- await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
456
- toast_default.success("Copied to clipboard");
457
- } catch {
458
- toast_default.error("Copy failed (clipboard permission?)");
459
- }
460
- }, "image/png");
461
- }
462
- }), [imageSize, filename]);
463
- const tools = useMemo(() => [
464
- { id: "select", label: "Select / Move", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 3l7 17 2-7 7-2L5 3z" }) }) },
465
- { id: "draw", label: "Pen / Draw", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487z" }) }) },
466
- { id: "rect", label: "Rectangle", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("rect", { x: "4", y: "6", width: "16", height: "12", rx: "3" }) }) },
467
- { id: "circle", label: "Ellipse", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "12", rx: "8", ry: "6" }) }) },
468
- { id: "arrow", label: "Arrow", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 19L19 5m0 0h-7m7 0v7" }) }) },
469
- { id: "mosaic", label: "Mosaic", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z" }) }) },
470
- { id: "text", label: "Text", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 6h16M12 6v14M9 20h6" }) }) },
471
- { id: "crop", label: "Crop", icon: /* @__PURE__ */ jsx("svg", { className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.8, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 2v15a1 1 0 001 1h15M2 6h15a1 1 0 011 1v15" }) }) }
472
- ], []);
473
- const btnClass = (active) => `p-1.5 rounded transition-colors ${active ? "bg-blue-500 text-white" : "text-gray-700 hover:bg-gray-200"}`;
474
- const ctxType = selected?.type ?? (tool === "select" ? null : tool);
475
- const showStrokeControl = ctxType === "rect" || ctxType === "circle" || ctxType === "arrow" || ctxType === "draw";
476
- const showRectRadius = ctxType === "rect";
477
- const showTextControls = ctxType === "text";
478
- return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-gray-100", children: [
479
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-2 border-b border-gray-200 bg-white shrink-0 flex-wrap text-[12px]", children: [
480
- tools.map((t) => /* @__PURE__ */ jsx(
481
- "button",
482
- {
483
- onClick: () => {
484
- setTool(t.id);
485
- setSelectedId(null);
486
- },
487
- title: t.label,
488
- className: btnClass(tool === t.id),
489
- children: t.icon
490
- },
491
- t.id
492
- )),
493
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
494
- /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: COLORS.map((c) => /* @__PURE__ */ jsx(
495
- "button",
496
- {
497
- onClick: () => setColorAndApply(c),
498
- title: c,
499
- className: `h-5 w-5 rounded-full border ${color === c ? "ring-2 ring-blue-500 ring-offset-1" : "border-gray-300"}`,
500
- style: { background: c }
501
- },
502
- c
503
- )) }),
504
- showStrokeControl && /* @__PURE__ */ jsxs(Fragment, { children: [
505
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
506
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
507
- /* @__PURE__ */ jsx("span", { children: "Weight" }),
508
- /* @__PURE__ */ jsx("input", { type: "range", min: 1, max: 20, step: 1, value: stroke, onChange: (e) => setStrokeAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
509
- /* @__PURE__ */ jsx("span", { className: "tabular-nums w-5 text-right", children: stroke })
510
- ] })
511
- ] }),
512
- showRectRadius && /* @__PURE__ */ jsxs(Fragment, { children: [
513
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
514
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
515
- /* @__PURE__ */ jsx("span", { children: "Radius" }),
516
- /* @__PURE__ */ jsx("input", { type: "range", min: 0, max: 48, step: 1, value: rectRadius, onChange: (e) => setRectRadiusAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
517
- /* @__PURE__ */ jsx("span", { className: "tabular-nums w-6 text-right", children: rectRadius })
518
- ] })
519
- ] }),
520
- showTextControls && /* @__PURE__ */ jsxs(Fragment, { children: [
521
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
522
- /* @__PURE__ */ jsx("select", { value: textFont, onChange: (e) => setTextFontAndApply(e.target.value), className: "text-xs border border-gray-300 rounded px-1 py-0.5 bg-white", children: FONTS.map((f) => /* @__PURE__ */ jsx("option", { value: f.id, children: f.label }, f.id)) }),
523
- /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("bold"), className: btnClass(textBold), title: "Bold", children: /* @__PURE__ */ jsx("span", { className: "font-bold", children: "B" }) }),
524
- /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("italic"), className: btnClass(textItalic), title: "Italic", children: /* @__PURE__ */ jsx("span", { className: "italic", children: "I" }) }),
525
- /* @__PURE__ */ jsx("button", { onClick: () => toggleTextStyleAndApply("underline"), className: btnClass(textUnderline), title: "Underline", children: /* @__PURE__ */ jsx("span", { className: "underline", children: "U" }) }),
526
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
527
- /* @__PURE__ */ jsx("span", { children: "Size" }),
528
- /* @__PURE__ */ jsx("input", { type: "range", min: 10, max: 96, step: 1, value: textSize, onChange: (e) => setTextSizeAndApply(Number(e.target.value)), className: "w-16 accent-blue-500" }),
529
- /* @__PURE__ */ jsx("span", { className: "tabular-nums w-7 text-right", children: textSize })
530
- ] }),
531
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-gray-600", children: [
532
- /* @__PURE__ */ jsx("span", { children: "Border" }),
533
- textBorderColor ? /* @__PURE__ */ jsxs(Fragment, { children: [
534
- /* @__PURE__ */ jsx(
535
- "input",
536
- {
537
- type: "color",
538
- value: textBorderColor,
539
- onChange: (e) => setTextBorderColorAndApply(e.target.value),
540
- title: "Text-box border color",
541
- className: "h-5 w-6 rounded border border-gray-300 bg-white p-0 cursor-pointer"
542
- }
543
- ),
544
- /* @__PURE__ */ jsx("button", { onClick: () => setTextBorderColorAndApply(null), title: "Remove border", className: "px-0.5 text-gray-400 hover:text-gray-700", children: "\u2715" })
545
- ] }) : /* @__PURE__ */ jsx("button", { onClick: () => setTextBorderColorAndApply(color), title: "Add a border", className: "px-1.5 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-100", children: "Add" })
546
- ] }),
547
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-gray-600", children: [
548
- /* @__PURE__ */ jsx("span", { children: "Fill" }),
549
- textBg ? /* @__PURE__ */ jsxs(Fragment, { children: [
550
- /* @__PURE__ */ jsx(
551
- "input",
552
- {
553
- type: "color",
554
- value: textBg,
555
- onChange: (e) => setTextBgAndApply(e.target.value),
556
- title: "Text-box background color",
557
- className: "h-5 w-6 rounded border border-gray-300 bg-white p-0 cursor-pointer"
558
- }
559
- ),
560
- /* @__PURE__ */ jsx("button", { onClick: () => setTextBgAndApply(null), title: "Remove fill", className: "px-0.5 text-gray-400 hover:text-gray-700", children: "\u2715" })
561
- ] }) : /* @__PURE__ */ jsx("button", { onClick: () => setTextBgAndApply("#ffffff"), title: "Add a background fill", className: "px-1.5 py-0.5 rounded border border-gray-300 text-gray-600 hover:bg-gray-100", children: "Add" })
562
- ] }),
563
- /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1.5 text-gray-600", children: [
564
- /* @__PURE__ */ jsx("span", { children: "Pad" }),
565
- /* @__PURE__ */ jsx("input", { type: "range", min: 0, max: 40, step: 1, value: textPadding, onChange: (e) => setTextPaddingAndApply(Number(e.target.value)), className: "w-14 accent-blue-500" }),
566
- /* @__PURE__ */ jsx("span", { className: "tabular-nums w-6 text-right", children: textPadding })
567
- ] })
568
- ] }),
569
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
570
- /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.max(ZOOM_MIN, Math.round((z - ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", title: "Zoom out", children: "\u2212" }),
571
- /* @__PURE__ */ jsxs("span", { className: "text-gray-600 tabular-nums w-10 text-center", children: [
572
- Math.round(zoom * 100),
573
- "%"
574
- ] }),
575
- /* @__PURE__ */ jsx("button", { onClick: () => setZoom((z) => Math.min(ZOOM_MAX, Math.round((z + ZOOM_STEP) * 100) / 100)), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", title: "Zoom in", children: "+" }),
576
- /* @__PURE__ */ jsx("button", { onClick: () => setZoom(1), className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", title: "Fit to area", children: "Fit" }),
577
- /* @__PURE__ */ jsx("div", { className: "h-5 w-px bg-gray-300 mx-1" }),
578
- /* @__PURE__ */ jsx("button", { onClick: undoLast, disabled: annotations.length === 0, className: "px-2 py-1 rounded hover:bg-gray-200 disabled:opacity-30 text-gray-700", children: "Undo" }),
579
- /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
580
- pendingCrop && /* @__PURE__ */ jsxs(Fragment, { children: [
581
- /* @__PURE__ */ jsx("button", { onClick: applyCrop, className: "px-2 py-1 rounded bg-blue-500 text-white hover:bg-blue-600", children: "Apply Crop" }),
582
- /* @__PURE__ */ jsx("button", { onClick: cancelCrop, className: "px-2 py-1 rounded hover:bg-gray-200 text-gray-700", children: "Cancel" })
583
- ] }),
584
- onApply && !pendingCrop && /* @__PURE__ */ jsxs(Fragment, { children: [
585
- onCancel && /* @__PURE__ */ jsx("button", { onClick: onCancel, className: "px-3 py-1 rounded hover:bg-gray-200 text-gray-700 text-xs font-medium", children: "Cancel" }),
586
- /* @__PURE__ */ jsx(
587
- "button",
588
- {
589
- onClick: async () => {
590
- const out = await compositeToCanvas();
591
- if (!out) {
592
- toast_default.error("Failed to export");
593
- return;
594
- }
595
- out.toBlob((blob) => {
596
- if (!blob) {
597
- toast_default.error("Failed to export");
598
- return;
599
- }
600
- onApply(blob);
601
- }, "image/png");
602
- },
603
- className: "px-3 py-1 rounded bg-blue-500 text-white hover:bg-blue-600 text-xs font-medium",
604
- children: "Apply"
605
- }
606
- )
607
- ] })
608
- ] })
609
- ] }),
610
- /* @__PURE__ */ jsx("div", { ref: wrapRef, className: "flex-1 overflow-auto bg-gray-200 flex items-center justify-center p-4 relative", children: displaySize && imageSize && /* @__PURE__ */ jsxs(
611
- "div",
612
- {
613
- className: "relative shadow-lg rounded overflow-hidden bg-white shrink-0",
614
- style: { width: displaySize.w, height: displaySize.h },
615
- children: [
616
- /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" } }),
617
- /* @__PURE__ */ jsxs(
618
- "svg",
619
- {
620
- ref: svgRef,
621
- viewBox: `0 0 ${imageSize.w} ${imageSize.h}`,
622
- preserveAspectRatio: "none",
623
- style: {
624
- position: "absolute",
625
- inset: 0,
626
- width: "100%",
627
- height: "100%",
628
- touchAction: "none",
629
- cursor: tool === "select" ? "default" : tool === "text" ? "text" : "crosshair"
630
- },
631
- onPointerDown: handleSvgPointerDown,
632
- children: [
633
- annotations.map((a) => /* @__PURE__ */ jsx(
634
- AnnotationView,
635
- {
636
- anno: a,
637
- selected: selectedId === a.id,
638
- zoom,
639
- onPointerDown: (e) => handleAnnoPointerDown(e, a),
640
- onDoubleClick: () => handleAnnoDoubleClick(a),
641
- onHandlePointerDown: (e, corner) => handleHandlePointerDown(e, a, corner)
642
- },
643
- a.id
644
- )),
645
- preview && /* @__PURE__ */ jsx(AnnotationView, { anno: { ...preview, id: "__preview" }, preview: true }),
646
- pendingCrop && /* @__PURE__ */ jsx(CropOverlay, { rect: pendingCrop, imageSize })
647
- ]
648
- }
649
- ),
650
- pendingText && /* @__PURE__ */ jsx(
651
- PendingTextEditor,
652
- {
653
- pendingText,
654
- color,
655
- size: textSize,
656
- font: FONTS.find((f) => f.id === textFont)?.css ?? FONTS[0].css,
657
- bold: textBold,
658
- italic: textItalic,
659
- underline: textUnderline,
660
- borderColor: textBorderColor,
661
- background: textBg,
662
- padding: textPadding,
663
- scale,
664
- onChange: (value) => setPendingText({ ...pendingText, value }),
665
- onCommit: commitText,
666
- onCancel: () => setPendingText(null)
667
- }
668
- )
669
- ]
670
- }
671
- ) }),
672
- /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 border-t border-gray-200 bg-white text-[11px] text-gray-500 shrink-0", children: tool === "select" ? selectedId ? "Drag to move. Drag a corner to resize. Delete / Backspace removes. Click outside to deselect." : "Tap a shape to select. Double-click text to edit." : tool === "text" ? "Click to drop a text label." : tool === "crop" ? "Drag a rectangle to set the crop region." : tool === "draw" ? "Drag to draw freehand." : "Drag on the image to draw." })
673
- ] });
674
- });
675
- var ImageAnnotator_default = ImageAnnotator;
676
- function AnnotationView({ anno, selected, preview, zoom = 1, onPointerDown, onDoubleClick, onHandlePointerDown }) {
677
- const dim = boundingBox(anno);
678
- const interactive = onPointerDown ? { onPointerDown, pointerEvents: "all", style: { cursor: "move" } } : {};
679
- const dblc = onDoubleClick ? { onDoubleClick } : {};
680
- let body;
681
- if (anno.type === "rect") {
682
- body = /* @__PURE__ */ jsx(
683
- "rect",
684
- {
685
- x: anno.x,
686
- y: anno.y,
687
- width: anno.w,
688
- height: anno.h,
689
- rx: anno.radius,
690
- ry: anno.radius,
691
- fill: "none",
692
- stroke: anno.color,
693
- strokeWidth: anno.stroke,
694
- strokeLinecap: "round",
695
- strokeLinejoin: "round",
696
- ...interactive
697
- }
698
- );
699
- } else if (anno.type === "circle") {
700
- body = /* @__PURE__ */ jsx(
701
- "ellipse",
702
- {
703
- cx: anno.x + anno.w / 2,
704
- cy: anno.y + anno.h / 2,
705
- rx: anno.w / 2,
706
- ry: anno.h / 2,
707
- fill: "none",
708
- stroke: anno.color,
709
- strokeWidth: anno.stroke,
710
- ...interactive
711
- }
712
- );
713
- } else if (anno.type === "arrow") {
714
- body = /* @__PURE__ */ jsx(ArrowShape, { anno, interactive });
715
- } else if (anno.type === "draw") {
716
- body = /* @__PURE__ */ jsx(
717
- "path",
718
- {
719
- d: pointsToPath(anno.points),
720
- fill: "none",
721
- stroke: anno.color,
722
- strokeWidth: anno.stroke,
723
- strokeLinecap: "round",
724
- strokeLinejoin: "round",
725
- ...interactive
726
- }
727
- );
728
- } else if (anno.type === "mosaic") {
729
- body = /* @__PURE__ */ jsx(
730
- "rect",
731
- {
732
- x: anno.x,
733
- y: anno.y,
734
- width: anno.w,
735
- height: anno.h,
736
- fill: "rgba(0,0,0,0.001)",
737
- stroke: selected ? "#3b82f6" : "none",
738
- strokeWidth: selected ? 2 : 0,
739
- strokeDasharray: selected ? "6,4" : void 0,
740
- ...interactive
741
- }
742
- );
743
- } else {
744
- const font = FONTS.find((f) => f.id === anno.font)?.css ?? FONTS[0].css;
745
- const pad = anno.padding ?? 0;
746
- const hasBox = !!anno.borderColor || !!anno.background;
747
- const box = boundingBox(anno);
748
- const borderW = anno.borderColor ? Math.max(1, Math.round(anno.size / 12)) : 0;
749
- body = /* @__PURE__ */ jsxs("g", { ...interactive, ...dblc, children: [
750
- hasBox && /* @__PURE__ */ jsx(
751
- "rect",
752
- {
753
- x: box.x - pad,
754
- y: box.y - pad,
755
- width: Math.max(0, box.w) + pad * 2,
756
- height: Math.max(0, box.h) + pad * 2,
757
- rx: Math.min(8, pad),
758
- ry: Math.min(8, pad),
759
- fill: anno.background ?? "none",
760
- stroke: anno.borderColor ?? "none",
761
- strokeWidth: borderW
762
- }
763
- ),
764
- /* @__PURE__ */ jsx(
765
- "text",
766
- {
767
- x: anno.x,
768
- y: anno.y + anno.size,
769
- fill: anno.color,
770
- fontSize: anno.size,
771
- fontWeight: anno.bold ? 700 : 400,
772
- fontStyle: anno.italic ? "italic" : "normal",
773
- textDecoration: anno.underline ? "underline" : void 0,
774
- fontFamily: font,
775
- style: { userSelect: "none" },
776
- children: anno.text.split("\n").map((line, i) => /* @__PURE__ */ jsx("tspan", { x: anno.x, dy: i === 0 ? 0 : anno.size * 1.2, children: line }, i))
777
- }
778
- )
779
- ] });
780
- }
781
- return /* @__PURE__ */ jsxs("g", { children: [
782
- body,
783
- selected && !preview && /* @__PURE__ */ jsxs(Fragment, { children: [
784
- /* @__PURE__ */ jsx(
785
- "rect",
786
- {
787
- "data-chrome": "selection",
788
- x: dim.x - 4,
789
- y: dim.y - 4,
790
- width: dim.w + 8,
791
- height: dim.h + 8,
792
- fill: "none",
793
- stroke: "#3b82f6",
794
- strokeWidth: 2 / zoom,
795
- strokeDasharray: `${6 / zoom},${4 / zoom}`,
796
- pointerEvents: "none"
797
- }
798
- ),
799
- onHandlePointerDown && /* @__PURE__ */ jsx(ResizeHandles, { anno, zoom, onHandlePointerDown })
800
- ] })
801
- ] });
802
- }
803
- function ResizeHandles({
804
- anno,
805
- zoom,
806
- onHandlePointerDown
807
- }) {
808
- const r = 6 / zoom;
809
- const sw = 1.5 / zoom;
810
- const handleProps = (cursor) => ({
811
- fill: "#fff",
812
- stroke: "#3b82f6",
813
- strokeWidth: sw,
814
- pointerEvents: "all",
815
- style: { cursor },
816
- "data-chrome": "handle"
817
- });
818
- if (anno.type === "arrow") {
819
- return /* @__PURE__ */ jsxs(Fragment, { children: [
820
- /* @__PURE__ */ jsx("circle", { cx: anno.x1, cy: anno.y1, r, ...handleProps("grab"), onPointerDown: (e) => onHandlePointerDown(e, "start") }),
821
- /* @__PURE__ */ jsx("circle", { cx: anno.x2, cy: anno.y2, r, ...handleProps("grab"), onPointerDown: (e) => onHandlePointerDown(e, "end") })
822
- ] });
823
- }
824
- if (anno.type === "text" || anno.type === "draw") {
825
- return null;
826
- }
827
- const x = anno.x, y = anno.y, w = anno.w, h = anno.h;
828
- return /* @__PURE__ */ jsxs(Fragment, { children: [
829
- /* @__PURE__ */ jsx("circle", { cx: x, cy: y, r, ...handleProps("nwse-resize"), onPointerDown: (e) => onHandlePointerDown(e, "nw") }),
830
- /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y, r, ...handleProps("nesw-resize"), onPointerDown: (e) => onHandlePointerDown(e, "ne") }),
831
- /* @__PURE__ */ jsx("circle", { cx: x + w, cy: y + h, r, ...handleProps("nwse-resize"), onPointerDown: (e) => onHandlePointerDown(e, "se") }),
832
- /* @__PURE__ */ jsx("circle", { cx: x, cy: y + h, r, ...handleProps("nesw-resize"), onPointerDown: (e) => onHandlePointerDown(e, "sw") })
833
- ] });
834
- }
835
- function ArrowShape({ anno, interactive }) {
836
- const headLen = Math.max(12, anno.stroke * 4);
837
- const angle = Math.atan2(anno.y2 - anno.y1, anno.x2 - anno.x1);
838
- const a1 = angle + Math.PI - Math.PI / 7;
839
- const a2 = angle + Math.PI + Math.PI / 7;
840
- const head = `M${anno.x2},${anno.y2} L${anno.x2 + headLen * Math.cos(a1)},${anno.y2 + headLen * Math.sin(a1)} L${anno.x2 + headLen * Math.cos(a2)},${anno.y2 + headLen * Math.sin(a2)} Z`;
841
- return /* @__PURE__ */ jsxs("g", { ...interactive, children: [
842
- /* @__PURE__ */ jsx(
843
- "line",
844
- {
845
- x1: anno.x1,
846
- y1: anno.y1,
847
- x2: anno.x2,
848
- y2: anno.y2,
849
- stroke: anno.color,
850
- strokeWidth: anno.stroke,
851
- strokeLinecap: "round"
852
- }
853
- ),
854
- /* @__PURE__ */ jsx("path", { d: head, fill: anno.color })
855
- ] });
856
- }
857
- function CropOverlay({ rect, imageSize }) {
858
- return /* @__PURE__ */ jsxs("g", { pointerEvents: "none", children: [
859
- /* @__PURE__ */ jsx(
860
- "path",
861
- {
862
- d: `M0,0 H${imageSize.w} V${imageSize.h} H0 Z M${rect.x},${rect.y} V${rect.y + rect.h} H${rect.x + rect.w} V${rect.y} Z`,
863
- fill: "rgba(0,0,0,0.45)",
864
- fillRule: "evenodd"
865
- }
866
- ),
867
- /* @__PURE__ */ jsx(
868
- "rect",
869
- {
870
- x: rect.x,
871
- y: rect.y,
872
- width: rect.w,
873
- height: rect.h,
874
- fill: "none",
875
- stroke: "#fff",
876
- strokeWidth: 2,
877
- strokeDasharray: "8,6"
878
- }
879
- )
880
- ] });
881
- }
882
- function PendingTextEditor({
883
- pendingText,
884
- color,
885
- size,
886
- font,
887
- bold,
888
- italic,
889
- underline,
890
- borderColor,
891
- background,
892
- padding,
893
- scale,
894
- onChange,
895
- onCommit,
896
- onCancel
897
- }) {
898
- const ref = useRef(null);
899
- useEffect(() => {
900
- const id = requestAnimationFrame(() => {
901
- ref.current?.focus();
902
- ref.current?.select?.();
903
- });
904
- return () => cancelAnimationFrame(id);
905
- }, []);
906
- const commit = () => onCommit(ref.current?.value);
907
- const borderW = borderColor ? Math.max(1, Math.round(size / 12)) : 0;
908
- return /* @__PURE__ */ jsx(
909
- "div",
910
- {
911
- style: {
912
- position: "absolute",
913
- left: `${pendingText.x * scale}px`,
914
- top: `${pendingText.y * scale}px`,
915
- transform: "translateY(-2px)",
916
- zIndex: 5
917
- },
918
- onPointerDown: (e) => e.stopPropagation(),
919
- children: /* @__PURE__ */ jsx(
920
- "textarea",
921
- {
922
- ref,
923
- value: pendingText.value,
924
- onChange: (e) => onChange(e.target.value),
925
- onBlur: commit,
926
- onKeyDown: (e) => {
927
- if (e.key === "Escape") {
928
- e.preventDefault();
929
- onCancel();
930
- } else if (e.key === "Enter" && !e.shiftKey) {
931
- e.preventDefault();
932
- commit();
933
- }
934
- },
935
- placeholder: "Type then Enter\u2026",
936
- rows: 1,
937
- className: "outline-none resize-none shadow-md",
938
- style: {
939
- color,
940
- fontSize: `${size * scale}px`,
941
- fontFamily: font,
942
- fontWeight: bold ? 700 : 400,
943
- fontStyle: italic ? "italic" : "normal",
944
- textDecoration: underline ? "underline" : void 0,
945
- minWidth: 80,
946
- // Mirror the committed box so the editor is WYSIWYG. With no custom
947
- // border, show a dashed hint so the edit box stays visible.
948
- padding: `${padding * scale}px`,
949
- borderRadius: `${Math.min(8, padding) * scale}px`,
950
- border: borderColor ? `${borderW * scale}px solid ${borderColor}` : "1px dashed #60a5fa",
951
- background: background ?? "rgba(255,255,255,0.95)"
952
- }
953
- }
954
- )
955
- }
956
- );
957
- }
958
- function makeShape(tool, start, end, color, stroke, rectRadius) {
959
- if (tool === "rect") {
960
- const r = normalizeRect(start, end);
961
- return { id: "", type: "rect", x: r.x, y: r.y, w: r.w, h: r.h, color, stroke, radius: rectRadius };
962
- }
963
- if (tool === "circle") {
964
- const r = normalizeRect(start, end);
965
- return { id: "", type: "circle", x: r.x, y: r.y, w: r.w, h: r.h, color, stroke };
966
- }
967
- if (tool === "arrow") {
968
- return { id: "", type: "arrow", x1: start.x, y1: start.y, x2: end.x, y2: end.y, color, stroke };
969
- }
970
- if (tool === "mosaic") {
971
- const r = normalizeRect(start, end);
972
- return { id: "", type: "mosaic", x: r.x, y: r.y, w: r.w, h: r.h };
973
- }
974
- return null;
975
- }
976
- function isTrivial(a) {
977
- if (a.type === "arrow") return Math.abs(a.x2 - a.x1) < 4 && Math.abs(a.y2 - a.y1) < 4;
978
- if (a.type === "draw") return a.points.length < 2;
979
- if ("w" in a && "h" in a) return a.w < 4 || a.h < 4;
980
- return false;
981
- }
982
- function translate(a, dx, dy) {
983
- if (a.type === "arrow") return { ...a, x1: a.x1 + dx, y1: a.y1 + dy, x2: a.x2 + dx, y2: a.y2 + dy };
984
- if (a.type === "draw") return { ...a, points: a.points.map((p) => ({ x: p.x + dx, y: p.y + dy })) };
985
- if (a.type === "text") return { ...a, x: a.x + dx, y: a.y + dy };
986
- return { ...a, x: a.x + dx, y: a.y + dy };
987
- }
988
- function resize(original, corner, p) {
989
- if (original.type === "arrow") {
990
- if (corner === "start") return { ...original, x1: p.x, y1: p.y };
991
- if (corner === "end") return { ...original, x2: p.x, y2: p.y };
992
- return original;
993
- }
994
- if (original.type === "text" || original.type === "draw") return original;
995
- const left = original.x;
996
- const right = original.x + original.w;
997
- const top = original.y;
998
- const bottom = original.y + original.h;
999
- let x1 = left, y1 = top, x2 = right, y2 = bottom;
1000
- if (corner === "nw") {
1001
- x1 = p.x;
1002
- y1 = p.y;
1003
- }
1004
- if (corner === "ne") {
1005
- x2 = p.x;
1006
- y1 = p.y;
1007
- }
1008
- if (corner === "se") {
1009
- x2 = p.x;
1010
- y2 = p.y;
1011
- }
1012
- if (corner === "sw") {
1013
- x1 = p.x;
1014
- y2 = p.y;
1015
- }
1016
- const r = normalizeRect({ x: x1, y: y1 }, { x: x2, y: y2 });
1017
- return { ...original, x: r.x, y: r.y, w: r.w, h: r.h };
1018
- }
1019
- function boundingBox(a) {
1020
- if (a.type === "arrow") {
1021
- const x = Math.min(a.x1, a.x2);
1022
- const y = Math.min(a.y1, a.y2);
1023
- return { x, y, w: Math.abs(a.x2 - a.x1), h: Math.abs(a.y2 - a.y1) };
1024
- }
1025
- if (a.type === "draw") {
1026
- if (a.points.length === 0) return { x: 0, y: 0, w: 0, h: 0 };
1027
- let minX = a.points[0].x, maxX = a.points[0].x, minY = a.points[0].y, maxY = a.points[0].y;
1028
- for (const p of a.points) {
1029
- if (p.x < minX) minX = p.x;
1030
- if (p.x > maxX) maxX = p.x;
1031
- if (p.y < minY) minY = p.y;
1032
- if (p.y > maxY) maxY = p.y;
1033
- }
1034
- return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
1035
- }
1036
- if (a.type === "text") {
1037
- const lines = a.text.split("\n");
1038
- const longest = lines.reduce((m, l) => Math.max(m, l.length), 0);
1039
- return { x: a.x, y: a.y, w: longest * a.size * 0.55, h: lines.length * a.size * 1.2 };
1040
- }
1041
- return { x: a.x, y: a.y, w: a.w, h: a.h };
1042
- }
1043
- function normalizeRect(a, b) {
1044
- const x = Math.min(a.x, b.x);
1045
- const y = Math.min(a.y, b.y);
1046
- const w = Math.abs(a.x - b.x);
1047
- const h = Math.abs(a.y - b.y);
1048
- return { x, y, w, h };
1049
- }
1050
- function withinBounds(a, w, h) {
1051
- const bb = boundingBox(a);
1052
- return bb.x + bb.w > 0 && bb.y + bb.h > 0 && bb.x < w && bb.y < h;
1053
- }
1054
- function pointsToPath(points) {
1055
- if (points.length === 0) return "";
1056
- let d = `M ${points[0].x} ${points[0].y}`;
1057
- for (let i = 1; i < points.length; i++) d += ` L ${points[i].x} ${points[i].y}`;
1058
- return d;
1059
- }
1060
- function applyMosaic(ctx, rect) {
1061
- const x = Math.round(Math.max(0, rect.x));
1062
- const y = Math.round(Math.max(0, rect.y));
1063
- const w = Math.round(Math.min(ctx.canvas.width - x, rect.w));
1064
- const h = Math.round(Math.min(ctx.canvas.height - y, rect.h));
1065
- if (w < 2 || h < 2) return;
1066
- const data = ctx.getImageData(x, y, w, h);
1067
- const block = MOSAIC_BLOCK;
1068
- for (let by = 0; by < h; by += block) {
1069
- for (let bx = 0; bx < w; bx += block) {
1070
- let r = 0, g = 0, b = 0, a = 0, n = 0;
1071
- const blockW = Math.min(block, w - bx);
1072
- const blockH = Math.min(block, h - by);
1073
- for (let yy = 0; yy < blockH; yy++) {
1074
- for (let xx = 0; xx < blockW; xx++) {
1075
- const i = ((by + yy) * w + (bx + xx)) * 4;
1076
- r += data.data[i];
1077
- g += data.data[i + 1];
1078
- b += data.data[i + 2];
1079
- a += data.data[i + 3];
1080
- n++;
1081
- }
1082
- }
1083
- r = Math.round(r / n);
1084
- g = Math.round(g / n);
1085
- b = Math.round(b / n);
1086
- a = Math.round(a / n);
1087
- for (let yy = 0; yy < blockH; yy++) {
1088
- for (let xx = 0; xx < blockW; xx++) {
1089
- const i = ((by + yy) * w + (bx + xx)) * 4;
1090
- data.data[i] = r;
1091
- data.data[i + 1] = g;
1092
- data.data[i + 2] = b;
1093
- data.data[i + 3] = a;
1094
- }
1095
- }
1096
- }
1097
- }
1098
- ctx.putImageData(data, x, y);
1099
- }
1100
-
1101
- export { ImageAnnotator_default };
1102
- //# sourceMappingURL=chunk-QSKCQUZE.js.map
1103
- //# sourceMappingURL=chunk-QSKCQUZE.js.map