@embedpdf/react 3.0.0-next.4 → 3.0.0-next.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{AnnotationListSnapshot-_Z600IzD-DYoq1Iu1.d.cts → AnnotationListSnapshot-CHjkcIaL-CMHGL8-D.d.cts} +2 -2
- package/dist/{AnnotationListSnapshot-_Z600IzD-DYoq1Iu1.d.ts → AnnotationListSnapshot-CHjkcIaL-CMHGL8-D.d.ts} +2 -2
- package/dist/anchored.cjs +89 -0
- package/dist/anchored.cjs.map +1 -0
- package/dist/anchored.d.cts +45 -0
- package/dist/anchored.d.ts +45 -0
- package/dist/anchored.js +60 -0
- package/dist/anchored.js.map +1 -0
- package/dist/annotation-menu.cjs +33 -84
- package/dist/annotation-menu.cjs.map +1 -1
- package/dist/annotation-menu.d.cts +28 -2
- package/dist/annotation-menu.d.ts +28 -2
- package/dist/annotation-menu.js +27 -78
- package/dist/annotation-menu.js.map +1 -1
- package/dist/annotation.cjs +689 -16
- package/dist/annotation.cjs.map +1 -0
- package/dist/annotation.d.cts +119 -2
- package/dist/annotation.d.ts +119 -2
- package/dist/annotation.js +678 -3
- package/dist/annotation.js.map +1 -0
- package/dist/form.cjs +1 -1
- package/dist/form.d.cts +2 -2
- package/dist/form.d.ts +2 -2
- package/dist/form.js +1 -1
- package/dist/index.cjs +14 -3
- package/dist/index.d.cts +5 -4
- package/dist/index.d.ts +5 -4
- package/dist/index.js +4 -3
- package/dist/interaction.cjs +1 -1
- package/dist/interaction.js +1 -1
- package/dist/page-view.cjs +58 -36
- package/dist/page-view.cjs.map +1 -1
- package/dist/page-view.js +54 -34
- package/dist/page-view.js.map +1 -1
- package/dist/search.d.cts +1 -1
- package/dist/search.d.ts +1 -1
- package/dist/selection.cjs +59 -4
- package/dist/selection.cjs.map +1 -1
- package/dist/selection.d.cts +35 -2
- package/dist/selection.d.ts +35 -2
- package/dist/selection.js +52 -5
- package/dist/selection.js.map +1 -1
- package/dist/stage.cjs +33 -1
- package/dist/stage.cjs.map +1 -1
- package/dist/stage.js +33 -1
- package/dist/stage.js.map +1 -1
- package/package.json +27 -23
- package/dist/annotation-BTlcOjcK.js +0 -829
- package/dist/annotation-BTlcOjcK.js.map +0 -1
- package/dist/annotation-BvNPtcxN.d.cts +0 -173
- package/dist/annotation-CPbPvbKa.d.ts +0 -173
- package/dist/annotation-DVwYpWyP.cjs +0 -913
- package/dist/annotation-DVwYpWyP.cjs.map +0 -1
package/dist/annotation.cjs
CHANGED
|
@@ -1,20 +1,691 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
require("./runtime.cjs");
|
|
3
|
-
const
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
2
|
+
const require_rolldown_runtime = require("./rolldown-runtime-DDXJien1.cjs");
|
|
3
|
+
const require_runtime = require("./runtime.cjs");
|
|
4
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
+
let react = require("react");
|
|
6
|
+
react = require_rolldown_runtime.__toESM(react, 1);
|
|
7
|
+
let _embedpdf_web = require("@embedpdf/web");
|
|
8
|
+
let _embedpdf_plugin_annotation = require("@embedpdf/plugin-annotation");
|
|
9
|
+
let _embedpdf_plugin_annotation_internal = require("@embedpdf/plugin-annotation/internal");
|
|
10
|
+
let _embedpdf_core_annotation = require("@embedpdf/core-annotation");
|
|
11
|
+
//#region src/annotation.tsx
|
|
12
|
+
/** `#rrggbb` → `rgba(...)` — the marquee's translucent fill derives from the
|
|
13
|
+
* accent, so one `setChrome({ accent })` restyles every piece of chrome. */
|
|
14
|
+
const rgba = (hex, alpha) => {
|
|
15
|
+
const m = /^#?([0-9a-f]{6})$/i.exec(hex);
|
|
16
|
+
if (!m) return hex;
|
|
17
|
+
const n = parseInt(m[1], 16);
|
|
18
|
+
return `rgba(${n >> 16 & 255},${n >> 8 & 255},${n & 255},${alpha})`;
|
|
19
|
+
};
|
|
20
|
+
/** Content rect → a view-px box (the page wrapper's own coordinate space). */
|
|
21
|
+
function boxOf(r, page) {
|
|
22
|
+
const tl = page.transform.pageToContent({
|
|
23
|
+
x: r.x,
|
|
24
|
+
y: r.y
|
|
25
|
+
});
|
|
26
|
+
const br = page.transform.pageToContent({
|
|
27
|
+
x: r.x + r.width,
|
|
28
|
+
y: r.y + r.height
|
|
29
|
+
});
|
|
30
|
+
return {
|
|
31
|
+
left: tl.x,
|
|
32
|
+
top: tl.y,
|
|
33
|
+
width: br.x - tl.x,
|
|
34
|
+
height: br.y - tl.y
|
|
35
|
+
};
|
|
36
|
+
}
|
|
37
|
+
/** Map a core `Paint` to SVG presentation attributes — the whole framework-facing
|
|
38
|
+
* surface. Everything else about appearance is decided in the core's `scene`. */
|
|
39
|
+
function paintAttrs(p) {
|
|
40
|
+
return {
|
|
41
|
+
fill: p.fill ?? "none",
|
|
42
|
+
stroke: p.stroke ?? "none",
|
|
43
|
+
strokeWidth: p.width,
|
|
44
|
+
opacity: p.opacity,
|
|
45
|
+
strokeLinejoin: p.join ?? "miter",
|
|
46
|
+
strokeMiterlimit: _embedpdf_core_annotation.MITER_LIMIT,
|
|
47
|
+
strokeLinecap: p.cap,
|
|
48
|
+
strokeDasharray: p.dash ? p.dash.join(" ") : void 0,
|
|
49
|
+
...p.blend ? { style: { mixBlendMode: p.blend } } : {}
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* The dumb painter. The pure core computed `item.box` and the painted `scene`; we
|
|
54
|
+
* size the <svg> to the box with a content-space `viewBox` and map each SceneNode
|
|
55
|
+
* to one element, applying its `paint`. No per-kind logic, no bounds math — so
|
|
56
|
+
* shapes, cloudy borders and every text-markup type all render here, and a Vue /
|
|
57
|
+
* Svelte painter is the same ~10-line loop.
|
|
58
|
+
*/
|
|
59
|
+
function Shape({ item, page }) {
|
|
60
|
+
if (item.box.width <= 0 || item.box.height <= 0) return null;
|
|
61
|
+
const { left, top, width, height } = boxOf(item.box, page);
|
|
62
|
+
const vb = `${item.box.x} ${item.box.y} ${item.box.width} ${item.box.height}`;
|
|
63
|
+
const rot = item.geom.t === "rect" || item.geom.t === "caret" ? item.rot ?? 0 : 0;
|
|
64
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
65
|
+
viewBox: vb,
|
|
66
|
+
style: {
|
|
67
|
+
position: "absolute",
|
|
68
|
+
left,
|
|
69
|
+
top,
|
|
70
|
+
width,
|
|
71
|
+
height,
|
|
72
|
+
overflow: "visible",
|
|
73
|
+
pointerEvents: "none",
|
|
74
|
+
...rot ? {
|
|
75
|
+
transform: `rotate(${rot}deg)`,
|
|
76
|
+
transformOrigin: "center"
|
|
77
|
+
} : {}
|
|
78
|
+
},
|
|
79
|
+
children: sceneNodes(item)
|
|
80
|
+
});
|
|
81
|
+
}
|
|
82
|
+
/** Map a core scene to SVG children. */
|
|
83
|
+
function sceneNodes(item) {
|
|
84
|
+
return (0, _embedpdf_core_annotation.scene)(item).map((n, i) => {
|
|
85
|
+
const a = paintAttrs(n.paint);
|
|
86
|
+
if (n.kind === "rect") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
87
|
+
x: n.rect.x,
|
|
88
|
+
y: n.rect.y,
|
|
89
|
+
width: n.rect.width,
|
|
90
|
+
height: n.rect.height,
|
|
91
|
+
...a
|
|
92
|
+
}, i);
|
|
93
|
+
if (n.kind === "ellipse") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ellipse", {
|
|
94
|
+
cx: n.rect.x + n.rect.width / 2,
|
|
95
|
+
cy: n.rect.y + n.rect.height / 2,
|
|
96
|
+
rx: n.rect.width / 2,
|
|
97
|
+
ry: n.rect.height / 2,
|
|
98
|
+
...a
|
|
99
|
+
}, i);
|
|
100
|
+
if (n.kind === "line") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
101
|
+
x1: n.a.x,
|
|
102
|
+
y1: n.a.y,
|
|
103
|
+
x2: n.b.x,
|
|
104
|
+
y2: n.b.y,
|
|
105
|
+
...a
|
|
106
|
+
}, i);
|
|
107
|
+
if (n.kind === "path") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
|
|
108
|
+
d: n.d,
|
|
109
|
+
...a
|
|
110
|
+
}, i);
|
|
111
|
+
if (n.kind === "text") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
|
|
112
|
+
x: n.at.x,
|
|
113
|
+
y: n.at.y,
|
|
114
|
+
fontSize: n.fontSize,
|
|
115
|
+
...n.fontFamily ? { fontFamily: n.fontFamily } : {},
|
|
116
|
+
...a,
|
|
117
|
+
children: n.text
|
|
118
|
+
}, i);
|
|
119
|
+
const pts = n.points.map((p) => `${p.x},${p.y}`).join(" ");
|
|
120
|
+
return n.closed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
|
|
121
|
+
points: pts,
|
|
122
|
+
...a
|
|
123
|
+
}, i) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", {
|
|
124
|
+
points: pts,
|
|
125
|
+
...a
|
|
126
|
+
}, i);
|
|
127
|
+
});
|
|
128
|
+
}
|
|
129
|
+
function BakedImage({ box, url, page, blend, rot }) {
|
|
130
|
+
const b = boxOf(box, page);
|
|
131
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
|
|
132
|
+
src: url,
|
|
133
|
+
alt: "",
|
|
134
|
+
draggable: false,
|
|
135
|
+
style: {
|
|
136
|
+
position: "absolute",
|
|
137
|
+
left: b.left,
|
|
138
|
+
top: b.top,
|
|
139
|
+
width: b.width,
|
|
140
|
+
height: b.height,
|
|
141
|
+
maxWidth: "none",
|
|
142
|
+
maxHeight: "none",
|
|
143
|
+
pointerEvents: "none",
|
|
144
|
+
mixBlendMode: blend,
|
|
145
|
+
...rot ? {
|
|
146
|
+
transform: `rotate(${rot}deg)`,
|
|
147
|
+
transformOrigin: "center"
|
|
148
|
+
} : {}
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
}
|
|
152
|
+
/**
|
|
153
|
+
* The armed stamp's IMAGE footprint ghost: a translucent render of the payload
|
|
154
|
+
* drawn in the EXACT box a click would place it (the plugin computes it with
|
|
155
|
+
* the same fit + clamp as placement). Vector footprint ghosts never reach this
|
|
156
|
+
* component — they ride `pageItems` like every draft preview. The preview
|
|
157
|
+
* bytes live in the capability closure; this layer owns only the object-URL
|
|
158
|
+
* lifetime, keyed on the arm epoch — a new arm swaps the image, a disarm (or
|
|
159
|
+
* tool change) drops it.
|
|
160
|
+
*/
|
|
161
|
+
function ToolGhostImage({ page }) {
|
|
162
|
+
const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
|
|
163
|
+
const ghost = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.toolGhost(page.pon));
|
|
164
|
+
const epoch = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.stampArmEpoch());
|
|
165
|
+
const [url, setUrl] = (0, react.useState)(null);
|
|
166
|
+
(0, react.useEffect)(() => {
|
|
167
|
+
const preview = anno.armedStampPreview();
|
|
168
|
+
if (!preview) {
|
|
169
|
+
setUrl(null);
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
const body = new ArrayBuffer(preview.bytes.byteLength);
|
|
173
|
+
new Uint8Array(body).set(preview.bytes);
|
|
174
|
+
const blob = new Blob([body], preview.mimeType ? { type: preview.mimeType } : {});
|
|
175
|
+
const obj = URL.createObjectURL(blob);
|
|
176
|
+
setUrl(obj);
|
|
177
|
+
return () => {
|
|
178
|
+
URL.revokeObjectURL(obj);
|
|
179
|
+
setUrl(null);
|
|
180
|
+
};
|
|
181
|
+
}, [anno, epoch]);
|
|
182
|
+
if (!ghost || ghost.kind !== "image" || !url) return null;
|
|
183
|
+
const b = boxOf(ghost.box, page);
|
|
184
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
|
|
185
|
+
src: url,
|
|
186
|
+
alt: "",
|
|
187
|
+
draggable: false,
|
|
188
|
+
style: {
|
|
189
|
+
position: "absolute",
|
|
190
|
+
left: b.left,
|
|
191
|
+
top: b.top,
|
|
192
|
+
width: b.width,
|
|
193
|
+
height: b.height,
|
|
194
|
+
maxWidth: "none",
|
|
195
|
+
maxHeight: "none",
|
|
196
|
+
pointerEvents: "none",
|
|
197
|
+
opacity: .5,
|
|
198
|
+
...ghost.rot ? {
|
|
199
|
+
transform: `rotate(${ghost.rot}deg)`,
|
|
200
|
+
transformOrigin: "center"
|
|
201
|
+
} : {}
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
function Chrome({ page }) {
|
|
206
|
+
const scale = page.transform.viewScale;
|
|
207
|
+
const rotation = page.transform.rotation;
|
|
208
|
+
const zoom = page.transform.zoom;
|
|
209
|
+
const nodes = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.chrome(page.pon, scale, rotation, zoom), require_runtime.shallowArray);
|
|
210
|
+
const cs = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.chromeSettings());
|
|
211
|
+
const outlineStroke = cs.outline.color ?? cs.accent;
|
|
212
|
+
const handleStroke = cs.handles.stroke ?? cs.accent;
|
|
213
|
+
const knobStroke = cs.knob.stroke ?? cs.accent;
|
|
214
|
+
const outlineDash = cs.outline.style === "dashed" ? "4 3" : void 0;
|
|
215
|
+
const chip = nodes.find((n) => n.kind === "angle-chip");
|
|
216
|
+
const chipAt = chip ? page.transform.pageToContent(chip.at) : null;
|
|
217
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
|
|
218
|
+
style: {
|
|
219
|
+
position: "absolute",
|
|
220
|
+
inset: 0,
|
|
221
|
+
overflow: "visible",
|
|
222
|
+
pointerEvents: "none"
|
|
223
|
+
},
|
|
224
|
+
children: nodes.map((n, i) => {
|
|
225
|
+
if (n.kind === "angle-chip") return null;
|
|
226
|
+
if (n.kind === "handle") {
|
|
227
|
+
const p = page.transform.pageToContent(n.at);
|
|
228
|
+
const hs = cs.handles.size;
|
|
229
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
230
|
+
x: p.x - hs / 2,
|
|
231
|
+
y: p.y - hs / 2,
|
|
232
|
+
width: hs,
|
|
233
|
+
height: hs,
|
|
234
|
+
fill: cs.handles.fill,
|
|
235
|
+
stroke: handleStroke,
|
|
236
|
+
strokeWidth: 1.5,
|
|
237
|
+
...n.rot ? { transform: `rotate(${n.rot} ${p.x} ${p.y})` } : {}
|
|
238
|
+
}, i);
|
|
239
|
+
}
|
|
240
|
+
if (n.kind === "guide") {
|
|
241
|
+
const a = page.transform.pageToContent(n.axis === "x" ? {
|
|
242
|
+
x: n.at,
|
|
243
|
+
y: n.lo
|
|
244
|
+
} : {
|
|
245
|
+
x: n.lo,
|
|
246
|
+
y: n.at
|
|
247
|
+
});
|
|
248
|
+
const b = page.transform.pageToContent(n.axis === "x" ? {
|
|
249
|
+
x: n.at,
|
|
250
|
+
y: n.hi
|
|
251
|
+
} : {
|
|
252
|
+
x: n.hi,
|
|
253
|
+
y: n.at
|
|
254
|
+
});
|
|
255
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
256
|
+
x1: a.x,
|
|
257
|
+
y1: a.y,
|
|
258
|
+
x2: b.x,
|
|
259
|
+
y2: b.y,
|
|
260
|
+
stroke: "#e91e63",
|
|
261
|
+
strokeWidth: 1.5,
|
|
262
|
+
shapeRendering: "crispEdges"
|
|
263
|
+
}, i);
|
|
264
|
+
}
|
|
265
|
+
if (n.kind === "obb") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("polygon", {
|
|
266
|
+
points: n.corners.map((c) => {
|
|
267
|
+
const p = page.transform.pageToContent(c);
|
|
268
|
+
return `${p.x},${p.y}`;
|
|
269
|
+
}).join(" "),
|
|
270
|
+
fill: "none",
|
|
271
|
+
stroke: outlineStroke,
|
|
272
|
+
strokeWidth: cs.outline.width,
|
|
273
|
+
strokeDasharray: outlineDash
|
|
274
|
+
}, i);
|
|
275
|
+
if (n.kind === "rotate-guides") {
|
|
276
|
+
const guideDash = cs.guides.style === "dashed" ? "4 3" : void 0;
|
|
277
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", { children: n.lines.map((l, j) => {
|
|
278
|
+
const a = page.transform.pageToContent(l.a);
|
|
279
|
+
const b = page.transform.pageToContent(l.b);
|
|
280
|
+
const axis = l.role === "axis";
|
|
281
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
282
|
+
x1: a.x,
|
|
283
|
+
y1: a.y,
|
|
284
|
+
x2: b.x,
|
|
285
|
+
y2: b.y,
|
|
286
|
+
stroke: axis ? cs.guides.axisColor ?? cs.accent : cs.guides.indicatorColor ?? cs.accent,
|
|
287
|
+
opacity: axis ? cs.guides.axisOpacity : cs.guides.indicatorOpacity,
|
|
288
|
+
strokeWidth: cs.guides.width,
|
|
289
|
+
strokeDasharray: guideDash
|
|
290
|
+
}, j);
|
|
291
|
+
}) }, i);
|
|
292
|
+
}
|
|
293
|
+
if (n.kind === "rotate-knob") {
|
|
294
|
+
const at = page.transform.pageToContent(n.at);
|
|
295
|
+
const from = page.transform.pageToContent(n.from);
|
|
296
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("g", { children: [cs.knob.stalk && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
|
|
297
|
+
x1: from.x,
|
|
298
|
+
y1: from.y,
|
|
299
|
+
x2: at.x,
|
|
300
|
+
y2: at.y,
|
|
301
|
+
stroke: knobStroke,
|
|
302
|
+
strokeWidth: 1
|
|
303
|
+
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
|
|
304
|
+
cx: at.x,
|
|
305
|
+
cy: at.y,
|
|
306
|
+
r: cs.knob.size / 2,
|
|
307
|
+
fill: cs.knob.fill,
|
|
308
|
+
stroke: knobStroke,
|
|
309
|
+
strokeWidth: 1.5
|
|
310
|
+
})] }, i);
|
|
311
|
+
}
|
|
312
|
+
const b = boxOf(n.rect, page);
|
|
313
|
+
if (n.kind === "marquee") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
314
|
+
x: b.left,
|
|
315
|
+
y: b.top,
|
|
316
|
+
width: b.width,
|
|
317
|
+
height: b.height,
|
|
318
|
+
fill: rgba(cs.accent, .08),
|
|
319
|
+
stroke: cs.accent,
|
|
320
|
+
strokeWidth: 1,
|
|
321
|
+
strokeDasharray: "4 3"
|
|
322
|
+
}, i);
|
|
323
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
|
|
324
|
+
x: b.left,
|
|
325
|
+
y: b.top,
|
|
326
|
+
width: b.width,
|
|
327
|
+
height: b.height,
|
|
328
|
+
fill: "none",
|
|
329
|
+
stroke: outlineStroke,
|
|
330
|
+
strokeWidth: cs.outline.width,
|
|
331
|
+
strokeDasharray: outlineDash
|
|
332
|
+
}, i);
|
|
333
|
+
})
|
|
334
|
+
}), chip && chipAt && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
335
|
+
style: {
|
|
336
|
+
position: "absolute",
|
|
337
|
+
left: chipAt.x + 16,
|
|
338
|
+
top: chipAt.y - 28,
|
|
339
|
+
background: "rgba(0,0,0,0.8)",
|
|
340
|
+
color: "#fff",
|
|
341
|
+
padding: "2px 6px",
|
|
342
|
+
borderRadius: 4,
|
|
343
|
+
fontSize: 12,
|
|
344
|
+
fontFamily: "monospace",
|
|
345
|
+
pointerEvents: "none",
|
|
346
|
+
whiteSpace: "nowrap",
|
|
347
|
+
zIndex: 1
|
|
348
|
+
},
|
|
349
|
+
children: [chip.angle, "°"]
|
|
350
|
+
})] });
|
|
351
|
+
}
|
|
352
|
+
/**
|
|
353
|
+
* A free-text annotation: the SAME styled element for viewing and editing —
|
|
354
|
+
* `contentEditable` just toggles, so the text never jumps. The plugin handed us a
|
|
355
|
+
* ready-to-spread style (`item.css`); the browser owns layout, caret, selection,
|
|
356
|
+
* IME and clipboard; the plugin owns the text truth + the debounced engine write.
|
|
357
|
+
* This component is the ENTIRE per-framework surface for text editing.
|
|
358
|
+
*/
|
|
359
|
+
function FreeText({ item, page }) {
|
|
360
|
+
const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
|
|
361
|
+
const ref = react.useRef(null);
|
|
362
|
+
const box = boxOf(item.box, page);
|
|
363
|
+
const scale = item.box.width > 0 ? box.width / item.box.width : 1;
|
|
364
|
+
(0, react.useEffect)(() => {
|
|
365
|
+
const el = ref.current;
|
|
366
|
+
if (el && document.activeElement !== el && el.innerText !== item.contents) el.innerText = item.contents;
|
|
367
|
+
}, [item.contents, item.editing]);
|
|
368
|
+
(0, react.useEffect)(() => {
|
|
369
|
+
if (item.editing) ref.current?.focus();
|
|
370
|
+
}, [item.editing]);
|
|
371
|
+
(0, react.useEffect)(() => {
|
|
372
|
+
const el = ref.current;
|
|
373
|
+
if (!el) return;
|
|
374
|
+
const stop = (e) => e.stopPropagation();
|
|
375
|
+
el.addEventListener("pointerdown", stop);
|
|
376
|
+
return () => el.removeEventListener("pointerdown", stop);
|
|
377
|
+
}, []);
|
|
378
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
379
|
+
ref,
|
|
380
|
+
contentEditable: item.editing,
|
|
381
|
+
suppressContentEditableWarning: true,
|
|
382
|
+
onInput: () => item.ref && anno.setContents(item.ref, ref.current.innerText),
|
|
383
|
+
onBlur: (e) => {
|
|
384
|
+
if (e.relatedTarget == null && ref.current?.isConnected && anno.currentEditing() === item.id) ref.current.focus();
|
|
385
|
+
},
|
|
386
|
+
onPaste: (e) => {
|
|
387
|
+
e.preventDefault();
|
|
388
|
+
document.execCommand("insertText", false, e.clipboardData.getData("text/plain"));
|
|
389
|
+
},
|
|
390
|
+
style: {
|
|
391
|
+
position: "absolute",
|
|
392
|
+
left: box.left,
|
|
393
|
+
top: box.top,
|
|
394
|
+
width: box.width,
|
|
395
|
+
height: box.height,
|
|
396
|
+
fontFamily: item.css.fontFamily,
|
|
397
|
+
fontSize: item.css.fontSize * scale,
|
|
398
|
+
lineHeight: `${item.css.lineHeight * scale}px`,
|
|
399
|
+
color: item.css.color,
|
|
400
|
+
textAlign: item.css.align,
|
|
401
|
+
padding: item.css.padding * scale,
|
|
402
|
+
boxSizing: "border-box",
|
|
403
|
+
background: item.css.background ?? "transparent",
|
|
404
|
+
whiteSpace: "pre-wrap",
|
|
405
|
+
overflowWrap: "break-word",
|
|
406
|
+
overflowY: item.editing ? "auto" : "hidden",
|
|
407
|
+
overflowX: "hidden",
|
|
408
|
+
outline: item.editing ? "1px solid #3858e9" : "none",
|
|
409
|
+
cursor: item.editing ? "text" : "default",
|
|
410
|
+
...item.rot ? {
|
|
411
|
+
transform: `rotate(${item.rot}deg)`,
|
|
412
|
+
transformOrigin: "center"
|
|
413
|
+
} : {},
|
|
414
|
+
pointerEvents: item.editing ? "auto" : "none"
|
|
415
|
+
}
|
|
416
|
+
});
|
|
417
|
+
}
|
|
418
|
+
/**
|
|
419
|
+
* Auto-registered behaviors for `interactive` renderer entries — refcounted
|
|
420
|
+
* per (capability, entry) because the layer mounts once PER PAGE: the first
|
|
421
|
+
* page registers, the last unregisters. Entry identity is the key, hence the
|
|
422
|
+
* "define entries outside render" rule on {@link AnnotationRenderer}.
|
|
423
|
+
*/
|
|
424
|
+
const autoBehaviors = /* @__PURE__ */ new WeakMap();
|
|
425
|
+
let autoBehaviorSeq = 0;
|
|
426
|
+
function useAutoBehaviors(anno, renderers) {
|
|
427
|
+
(0, react.useEffect)(() => {
|
|
428
|
+
if (!renderers) return;
|
|
429
|
+
const released = [];
|
|
430
|
+
for (const r of renderers) {
|
|
431
|
+
if (!("for" in r) || !r.interactive) continue;
|
|
432
|
+
let perCap = autoBehaviors.get(anno);
|
|
433
|
+
if (!perCap) autoBehaviors.set(anno, perCap = /* @__PURE__ */ new Map());
|
|
434
|
+
let rec = perCap.get(r);
|
|
435
|
+
if (!rec) {
|
|
436
|
+
const id = r.id ?? `renderer:${++autoBehaviorSeq}`;
|
|
437
|
+
const engaged = typeof r.interactive === "function" ? r.interactive : () => true;
|
|
438
|
+
rec = {
|
|
439
|
+
id,
|
|
440
|
+
count: 0,
|
|
441
|
+
unregister: anno.registerBehavior({
|
|
442
|
+
id,
|
|
443
|
+
matches: r.for,
|
|
444
|
+
engaged
|
|
445
|
+
})
|
|
446
|
+
};
|
|
447
|
+
perCap.set(r, rec);
|
|
448
|
+
}
|
|
449
|
+
rec.count++;
|
|
450
|
+
const owned = rec;
|
|
451
|
+
released.push(() => {
|
|
452
|
+
owned.count--;
|
|
453
|
+
if (owned.count === 0) {
|
|
454
|
+
owned.unregister();
|
|
455
|
+
autoBehaviors.get(anno)?.delete(r);
|
|
456
|
+
}
|
|
457
|
+
});
|
|
458
|
+
}
|
|
459
|
+
return () => released.forEach((f) => f());
|
|
460
|
+
}, [anno, renderers]);
|
|
461
|
+
}
|
|
462
|
+
/** The behavior id a renderer entry answers for (plugin-owned or auto-registered). */
|
|
463
|
+
function rendererBehaviorId(anno, r) {
|
|
464
|
+
if ("behavior" in r) return r.behavior;
|
|
465
|
+
return autoBehaviors.get(anno)?.get(r)?.id ?? null;
|
|
466
|
+
}
|
|
467
|
+
/** React 18 spells the `inert` attribute as a string spread; it hard-disables
|
|
468
|
+
* pointer AND focus for the whole subtree — the mechanical guarantee that a
|
|
469
|
+
* non-interactive renderer entry (a skin) can never steal input. */
|
|
470
|
+
const INERT = { inert: "" };
|
|
471
|
+
function AnnotationLayer({ renderers } = {}) {
|
|
472
|
+
const page = require_runtime.usePage();
|
|
473
|
+
const anno = require_runtime.useCapability(_embedpdf_plugin_annotation_internal.AnnotationToken);
|
|
474
|
+
const viewZoom = page.transform.zoom;
|
|
475
|
+
const viewRotation = page.transform.rotation;
|
|
476
|
+
const items = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.pageItems(page.pon, {
|
|
477
|
+
zoom: viewZoom,
|
|
478
|
+
rotation: viewRotation
|
|
479
|
+
}), require_runtime.shallowArray);
|
|
480
|
+
const texts = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.textItems(page.pon, {
|
|
481
|
+
zoom: viewZoom,
|
|
482
|
+
rotation: viewRotation
|
|
483
|
+
}), require_runtime.shallowArray);
|
|
484
|
+
const [urls, setUrls] = (0, react.useState)({});
|
|
485
|
+
useAutoBehaviors(anno, renderers);
|
|
486
|
+
(0, react.useEffect)(() => {
|
|
487
|
+
anno.ensurePage(page.pon);
|
|
488
|
+
}, [anno, page.pon]);
|
|
489
|
+
const bakedKey = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.appearanceEpoch(page.pon));
|
|
490
|
+
const bakeScale = require_runtime.useSelector(_embedpdf_plugin_annotation_internal.AnnotationToken, (c) => c.bakeScale(page.transform.renderScale));
|
|
491
|
+
(0, react.useEffect)(() => {
|
|
492
|
+
const controller = new AbortController();
|
|
493
|
+
const revokers = [];
|
|
494
|
+
(async () => {
|
|
495
|
+
try {
|
|
496
|
+
const imgs = await anno.appearances(page.pon, bakeScale, controller.signal);
|
|
497
|
+
const map = {};
|
|
498
|
+
for (const ap of imgs) {
|
|
499
|
+
const box = anno.toContentBox(page.pon, ap.rect);
|
|
500
|
+
if (!box) continue;
|
|
501
|
+
const obj = await ap.image.objectUrl(controller.signal);
|
|
502
|
+
if (controller.signal.aborted) {
|
|
503
|
+
obj.revoke();
|
|
504
|
+
return;
|
|
505
|
+
}
|
|
506
|
+
revokers.push(obj.revoke);
|
|
507
|
+
map[(0, _embedpdf_plugin_annotation.refKey)(ap.ref)] = {
|
|
508
|
+
url: obj.url,
|
|
509
|
+
box
|
|
510
|
+
};
|
|
511
|
+
}
|
|
512
|
+
if (!controller.signal.aborted) setUrls(map);
|
|
513
|
+
} catch {}
|
|
514
|
+
})();
|
|
515
|
+
return () => {
|
|
516
|
+
controller.abort();
|
|
517
|
+
revokers.forEach((r) => r());
|
|
518
|
+
};
|
|
519
|
+
}, [
|
|
520
|
+
anno,
|
|
521
|
+
page.pon,
|
|
522
|
+
bakeScale,
|
|
523
|
+
bakedKey
|
|
524
|
+
]);
|
|
525
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
526
|
+
style: {
|
|
527
|
+
position: "absolute",
|
|
528
|
+
inset: 0,
|
|
529
|
+
pointerEvents: "none"
|
|
530
|
+
},
|
|
531
|
+
children: [
|
|
532
|
+
items.map((item) => {
|
|
533
|
+
const baked = urls[item.id];
|
|
534
|
+
const native = item.source === "baked" ? baked ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BakedImage, {
|
|
535
|
+
box: item.apBox ?? baked.box,
|
|
536
|
+
url: baked.url,
|
|
537
|
+
page,
|
|
538
|
+
blend: item.blend,
|
|
539
|
+
rot: item.apRot
|
|
540
|
+
}) : null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Shape, {
|
|
541
|
+
item,
|
|
542
|
+
page
|
|
543
|
+
});
|
|
544
|
+
const behavior = anno.behaviorFor({
|
|
545
|
+
subtype: item.subtype,
|
|
546
|
+
ref: item.ref
|
|
547
|
+
});
|
|
548
|
+
let out;
|
|
549
|
+
if (behavior) {
|
|
550
|
+
const entry = renderers?.find((r) => rendererBehaviorId(anno, r) === behavior.id);
|
|
551
|
+
if (entry) {
|
|
552
|
+
const Owner = entry.component;
|
|
553
|
+
out = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Owner, {
|
|
554
|
+
item,
|
|
555
|
+
page,
|
|
556
|
+
appearance: baked ?? null,
|
|
557
|
+
native,
|
|
558
|
+
interactive: true
|
|
559
|
+
});
|
|
560
|
+
} else out = null;
|
|
561
|
+
} else {
|
|
562
|
+
const entry = renderers?.find((r) => "for" in r && r.for({
|
|
563
|
+
subtype: item.subtype,
|
|
564
|
+
ref: item.ref
|
|
565
|
+
}));
|
|
566
|
+
if (entry) {
|
|
567
|
+
const Skin = entry.component;
|
|
568
|
+
out = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
569
|
+
...INERT,
|
|
570
|
+
style: { pointerEvents: "none" },
|
|
571
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Skin, {
|
|
572
|
+
item,
|
|
573
|
+
page,
|
|
574
|
+
appearance: baked ?? null,
|
|
575
|
+
native,
|
|
576
|
+
interactive: false
|
|
577
|
+
})
|
|
578
|
+
});
|
|
579
|
+
} else out = native;
|
|
580
|
+
}
|
|
581
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: out }, item.id);
|
|
582
|
+
}),
|
|
583
|
+
texts.map((t) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FreeText, {
|
|
584
|
+
item: t,
|
|
585
|
+
page
|
|
586
|
+
}, t.id)),
|
|
587
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ToolGhostImage, { page }),
|
|
588
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Chrome, { page })
|
|
589
|
+
]
|
|
590
|
+
});
|
|
591
|
+
}
|
|
592
|
+
/**
|
|
593
|
+
* The default file-picker provider: the built-in file dialog (from
|
|
594
|
+
* `@embedpdf/web`), honouring the tool's `accept` filter. This is the ADAPTER
|
|
595
|
+
* fulfilling the plugin's DOM-free port — the dialog lives here, in the
|
|
596
|
+
* framework layer, never in the plugin. A picked `File` carries its own name
|
|
597
|
+
* and mime, so it goes straight through as the engine's file source.
|
|
598
|
+
*/
|
|
599
|
+
const filePickerProvider = async (req) => {
|
|
600
|
+
const file = await (0, _embedpdf_web.pickFile)({ accept: req.accept ?? "*/*" });
|
|
601
|
+
return file ? { data: file } : null;
|
|
602
|
+
};
|
|
603
|
+
/**
|
|
604
|
+
* Install the file-picker provider for the active document — the ONE port
|
|
605
|
+
* behind every click-then-pick tool (a stamp `'prompt'` source, the file-
|
|
606
|
+
* attachment tool). Call ONCE at a document-scoped spot (not inside
|
|
607
|
+
* `<AnnotationLayer>`, which is per page). Defaults to
|
|
608
|
+
* {@link filePickerProvider}, so a bare `useFilePickerProvider()` makes all of
|
|
609
|
+
* them work out of the box; pass a custom provider (asset library, cloud
|
|
610
|
+
* drive — switch on `req.subtype` / `req.toolId`) or `null` to make
|
|
611
|
+
* click-then-pick tools inert. Cleared on unmount.
|
|
612
|
+
*/
|
|
613
|
+
function useFilePickerProvider(provider = filePickerProvider) {
|
|
614
|
+
const anno = require_runtime.useOptionalCapability(_embedpdf_plugin_annotation.AnnotationToken);
|
|
615
|
+
(0, react.useEffect)(() => {
|
|
616
|
+
if (!anno) return;
|
|
617
|
+
anno.setFilePickerProvider(provider);
|
|
618
|
+
return () => anno.setFilePickerProvider(null);
|
|
619
|
+
}, [anno, provider]);
|
|
620
|
+
}
|
|
621
|
+
function useAnnotation() {
|
|
622
|
+
return require_runtime.useCapability(_embedpdf_plugin_annotation.AnnotationToken);
|
|
623
|
+
}
|
|
624
|
+
function useAnnotationSelection() {
|
|
625
|
+
return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.selection(), require_runtime.shallowArray);
|
|
626
|
+
}
|
|
627
|
+
/** The selected annotations as engine DTOs — for selection-aware toolbars/sidebars. */
|
|
628
|
+
function useAnnotationSelected() {
|
|
629
|
+
return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelected(), require_runtime.shallowArray);
|
|
630
|
+
}
|
|
631
|
+
/** Structural equality for a resolved props bag — keeps the subscription from
|
|
632
|
+
* re-rendering on unrelated dispatches, since `currentDefaults` returns a fresh
|
|
633
|
+
* object each call. Small flat objects; JSON compare is exact and cheap here. */
|
|
634
|
+
const sameProps = (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b);
|
|
635
|
+
/**
|
|
636
|
+
* A tool's RESOLVED defaults (base + per-tool override) as a full flat props
|
|
637
|
+
* bag, subscribed so a `setDefaults` re-renders the consumer. Use this — not the
|
|
638
|
+
* imperative `useAnnotation().currentDefaults(id)` — to drive default-editing
|
|
639
|
+
* controls, so they reflect changes live. Pair with `propsForTool(id)` for the
|
|
640
|
+
* specs to render.
|
|
641
|
+
*/
|
|
642
|
+
function useAnnotationDefaults(toolId) {
|
|
643
|
+
return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.currentDefaults(toolId), sameProps);
|
|
644
|
+
}
|
|
645
|
+
/**
|
|
646
|
+
* The selection's editable properties — ordered specs shared by every selected
|
|
647
|
+
* kind, current values, and which keys are mixed. THE hook a property sidebar
|
|
648
|
+
* renders from; write back with `useAnnotation().updateSelection({ [key]: v })`.
|
|
649
|
+
* Reference-stable between model changes (the capability memoizes by model
|
|
650
|
+
* identity), so the default equality is enough.
|
|
651
|
+
*/
|
|
652
|
+
function useSelectionProps() {
|
|
653
|
+
return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelectionProps());
|
|
654
|
+
}
|
|
655
|
+
/**
|
|
656
|
+
* The selection's `/F` annotation flags — per-flag `true`/`false`, `null` where
|
|
657
|
+
* the selected annotations disagree (render an indeterminate control), `null`
|
|
658
|
+
* overall when nothing is selected. Write back with
|
|
659
|
+
* `useAnnotation().updateSelectionFlags({ locked: true })`. Reference-stable
|
|
660
|
+
* between model changes, like {@link useSelectionProps}.
|
|
661
|
+
*/
|
|
662
|
+
function useSelectionFlags() {
|
|
663
|
+
return require_runtime.useSelector(_embedpdf_plugin_annotation.AnnotationToken, (c) => c.getSelectionFlags());
|
|
664
|
+
}
|
|
665
|
+
/** Structural equality for the selection anchor — keeps the menu from re-rendering
|
|
666
|
+
* on unrelated dispatches (the capability returns a fresh object each call). */
|
|
667
|
+
function sameAnchor(a, b) {
|
|
668
|
+
if (a === b) return true;
|
|
669
|
+
if (!a || !b) return false;
|
|
670
|
+
return a.pon === b.pon && a.bounds.x === b.bounds.x && a.bounds.y === b.bounds.y && a.bounds.width === b.bounds.width && a.bounds.height === b.bounds.height && a.knob?.x === b.knob?.x && a.knob?.y === b.knob?.y;
|
|
671
|
+
}
|
|
672
|
+
function sameCreationDraftAnchor(a, b) {
|
|
673
|
+
if (a === b) return true;
|
|
674
|
+
if (!a || !b) return false;
|
|
675
|
+
return a.kind === b.kind && a.subtype === b.subtype && a.pon === b.pon && a.pointCount === b.pointCount && a.minPoints === b.minPoints && a.canFinish === b.canFinish && a.bounds.x === b.bounds.x && a.bounds.y === b.bounds.y && a.bounds.width === b.bounds.width && a.bounds.height === b.bounds.height;
|
|
676
|
+
}
|
|
677
|
+
//#endregion
|
|
678
|
+
exports.AnnotationLayer = AnnotationLayer;
|
|
679
|
+
exports.filePickerProvider = filePickerProvider;
|
|
680
|
+
exports.sameAnchor = sameAnchor;
|
|
681
|
+
exports.sameCreationDraftAnchor = sameCreationDraftAnchor;
|
|
682
|
+
exports.useAnnotation = useAnnotation;
|
|
683
|
+
exports.useAnnotationDefaults = useAnnotationDefaults;
|
|
684
|
+
exports.useAnnotationSelected = useAnnotationSelected;
|
|
685
|
+
exports.useAnnotationSelection = useAnnotationSelection;
|
|
686
|
+
exports.useFilePickerProvider = useFilePickerProvider;
|
|
687
|
+
exports.useSelectionFlags = useSelectionFlags;
|
|
688
|
+
exports.useSelectionProps = useSelectionProps;
|
|
18
689
|
Object.keys(_embedpdf_plugin_annotation).forEach(function(k) {
|
|
19
690
|
if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
|
|
20
691
|
enumerable: true,
|
|
@@ -23,3 +694,5 @@ Object.keys(_embedpdf_plugin_annotation).forEach(function(k) {
|
|
|
23
694
|
}
|
|
24
695
|
});
|
|
25
696
|
});
|
|
697
|
+
|
|
698
|
+
//# sourceMappingURL=annotation.cjs.map
|