@embedpdf/plugin-redaction 1.5.0 → 2.0.0-next.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +573 -207
- package/dist/index.js.map +1 -1
- package/dist/lib/actions.d.ts +48 -13
- package/dist/lib/index.d.ts +1 -1
- package/dist/lib/redaction-plugin.d.ts +22 -8
- package/dist/lib/reducer.d.ts +4 -2
- package/dist/lib/selectors.d.ts +5 -3
- package/dist/lib/types.d.ts +68 -20
- package/dist/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +86 -37
- package/dist/preact/index.js.map +1 -1
- package/dist/react/index.cjs +1 -1
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +86 -37
- package/dist/react/index.js.map +1 -1
- package/dist/shared/components/marquee-redact.d.ts +4 -2
- package/dist/shared/components/pending-redactions.d.ts +4 -3
- package/dist/shared/components/redaction-layer.d.ts +11 -5
- package/dist/shared/components/selection-redact.d.ts +2 -1
- package/dist/shared/components/types.d.ts +6 -7
- package/dist/shared/hooks/use-redaction.d.ts +4 -4
- package/dist/shared-preact/components/marquee-redact.d.ts +4 -2
- package/dist/shared-preact/components/pending-redactions.d.ts +4 -3
- package/dist/shared-preact/components/redaction-layer.d.ts +11 -5
- package/dist/shared-preact/components/selection-redact.d.ts +2 -1
- package/dist/shared-preact/components/types.d.ts +6 -7
- package/dist/shared-preact/hooks/use-redaction.d.ts +4 -4
- package/dist/shared-react/components/marquee-redact.d.ts +4 -2
- package/dist/shared-react/components/pending-redactions.d.ts +4 -3
- package/dist/shared-react/components/redaction-layer.d.ts +11 -5
- package/dist/shared-react/components/selection-redact.d.ts +2 -1
- package/dist/shared-react/components/types.d.ts +6 -7
- package/dist/shared-react/hooks/use-redaction.d.ts +4 -4
- package/dist/svelte/components/highlight.svelte.d.ts +14 -0
- package/dist/svelte/components/index.d.ts +5 -0
- package/dist/svelte/components/marquee-redact.svelte.d.ts +16 -0
- package/dist/svelte/components/pending-redactions.svelte.d.ts +15 -0
- package/dist/svelte/components/redaction-layer.svelte.d.ts +20 -0
- package/dist/svelte/components/selection-redact.svelte.d.ts +8 -0
- package/dist/svelte/hooks/index.d.ts +1 -0
- package/dist/svelte/hooks/use-redaction.svelte.d.ts +21 -0
- package/dist/svelte/index.cjs +2 -0
- package/dist/svelte/index.cjs.map +1 -0
- package/dist/svelte/index.d.ts +4 -0
- package/dist/svelte/index.js +554 -0
- package/dist/svelte/index.js.map +1 -0
- package/dist/svelte/types.d.ts +10 -0
- package/dist/vue/components/highlight.vue.d.ts +2 -1
- package/dist/vue/components/marquee-redact.vue.d.ts +5 -2
- package/dist/vue/components/pending-redactions.vue.d.ts +18 -13
- package/dist/vue/components/redaction-layer.vue.d.ts +13 -4
- package/dist/vue/components/selection-redact.vue.d.ts +3 -1
- package/dist/vue/components/types.d.ts +9 -0
- package/dist/vue/hooks/use-redaction.d.ts +9 -102
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.js +219 -125
- package/dist/vue/index.js.map +1 -1
- package/package.json +18 -10
package/dist/react/index.js
CHANGED
|
@@ -1,44 +1,65 @@
|
|
|
1
|
-
import { usePlugin, useCapability } from "@embedpdf/core/react";
|
|
2
|
-
import { RedactionPlugin,
|
|
1
|
+
import { usePlugin, useCapability, useDocumentState } from "@embedpdf/core/react";
|
|
2
|
+
import { RedactionPlugin, initialDocumentState } from "@embedpdf/plugin-redaction";
|
|
3
3
|
export * from "@embedpdf/plugin-redaction";
|
|
4
|
-
import { useState, useEffect, useCallback, Fragment as Fragment$1 } from "react";
|
|
4
|
+
import { useState, useMemo, useEffect, useCallback, Fragment as Fragment$1 } from "react";
|
|
5
5
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
6
6
|
import { CounterRotate } from "@embedpdf/utils/react";
|
|
7
7
|
import { Rotation } from "@embedpdf/models";
|
|
8
8
|
const useRedactionPlugin = () => usePlugin(RedactionPlugin.id);
|
|
9
9
|
const useRedactionCapability = () => useCapability(RedactionPlugin.id);
|
|
10
|
-
const useRedaction = () => {
|
|
10
|
+
const useRedaction = (documentId) => {
|
|
11
11
|
const { provides } = useRedactionCapability();
|
|
12
|
-
const [state, setState] = useState(
|
|
12
|
+
const [state, setState] = useState(initialDocumentState);
|
|
13
|
+
const scope = useMemo(
|
|
14
|
+
() => provides ? provides.forDocument(documentId) : null,
|
|
15
|
+
[provides, documentId]
|
|
16
|
+
);
|
|
13
17
|
useEffect(() => {
|
|
14
|
-
|
|
15
|
-
setState(
|
|
18
|
+
if (!scope) {
|
|
19
|
+
setState(initialDocumentState);
|
|
20
|
+
return;
|
|
21
|
+
}
|
|
22
|
+
try {
|
|
23
|
+
setState(scope.getState());
|
|
24
|
+
} catch (e) {
|
|
25
|
+
setState(initialDocumentState);
|
|
26
|
+
}
|
|
27
|
+
const unsubscribe = scope.onStateChange((newState) => {
|
|
28
|
+
setState(newState);
|
|
16
29
|
});
|
|
17
|
-
|
|
30
|
+
return unsubscribe;
|
|
31
|
+
}, [scope]);
|
|
18
32
|
return {
|
|
19
33
|
state,
|
|
20
|
-
provides
|
|
34
|
+
provides: scope
|
|
21
35
|
};
|
|
22
36
|
};
|
|
23
37
|
const MarqueeRedact = ({
|
|
38
|
+
documentId,
|
|
24
39
|
pageIndex,
|
|
25
|
-
scale,
|
|
40
|
+
scale: scaleOverride,
|
|
26
41
|
className,
|
|
27
42
|
stroke = "red",
|
|
28
43
|
fill = "transparent"
|
|
29
44
|
}) => {
|
|
30
45
|
const { plugin: redactionPlugin } = useRedactionPlugin();
|
|
46
|
+
const documentState = useDocumentState(documentId);
|
|
31
47
|
const [rect, setRect] = useState(null);
|
|
48
|
+
const scale = useMemo(() => {
|
|
49
|
+
if (scaleOverride !== void 0) return scaleOverride;
|
|
50
|
+
return (documentState == null ? void 0 : documentState.scale) ?? 1;
|
|
51
|
+
}, [scaleOverride, documentState == null ? void 0 : documentState.scale]);
|
|
32
52
|
useEffect(() => {
|
|
33
|
-
if (!redactionPlugin) return;
|
|
53
|
+
if (!redactionPlugin || !documentId) return;
|
|
34
54
|
return redactionPlugin.registerMarqueeOnPage({
|
|
55
|
+
documentId,
|
|
35
56
|
pageIndex,
|
|
36
57
|
scale,
|
|
37
58
|
callback: {
|
|
38
59
|
onPreview: setRect
|
|
39
60
|
}
|
|
40
61
|
});
|
|
41
|
-
}, [redactionPlugin, pageIndex]);
|
|
62
|
+
}, [redactionPlugin, documentId, pageIndex, scale]);
|
|
42
63
|
if (!rect) return null;
|
|
43
64
|
return /* @__PURE__ */ jsx(
|
|
44
65
|
"div",
|
|
@@ -93,18 +114,18 @@ function Highlight({
|
|
|
93
114
|
i
|
|
94
115
|
)) });
|
|
95
116
|
}
|
|
96
|
-
function SelectionRedact({ pageIndex, scale }) {
|
|
117
|
+
function SelectionRedact({ documentId, pageIndex, scale }) {
|
|
97
118
|
const { plugin: redactionPlugin } = useRedactionPlugin();
|
|
98
119
|
const [rects, setRects] = useState([]);
|
|
99
120
|
const [boundingRect, setBoundingRect] = useState(null);
|
|
100
121
|
useEffect(() => {
|
|
101
122
|
if (!redactionPlugin) return;
|
|
102
|
-
return redactionPlugin.onRedactionSelectionChange((formattedSelection) => {
|
|
123
|
+
return redactionPlugin.onRedactionSelectionChange(documentId, (formattedSelection) => {
|
|
103
124
|
const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);
|
|
104
125
|
setRects((selection == null ? void 0 : selection.segmentRects) ?? []);
|
|
105
126
|
setBoundingRect((selection == null ? void 0 : selection.rect) ?? null);
|
|
106
127
|
});
|
|
107
|
-
}, [redactionPlugin, pageIndex]);
|
|
128
|
+
}, [redactionPlugin, documentId, pageIndex]);
|
|
108
129
|
if (!boundingRect) return null;
|
|
109
130
|
return /* @__PURE__ */ jsx(
|
|
110
131
|
"div",
|
|
@@ -129,6 +150,7 @@ function SelectionRedact({ pageIndex, scale }) {
|
|
|
129
150
|
);
|
|
130
151
|
}
|
|
131
152
|
function PendingRedactions({
|
|
153
|
+
documentId,
|
|
132
154
|
pageIndex,
|
|
133
155
|
scale,
|
|
134
156
|
bboxStroke = "rgba(0,0,0,0.8)",
|
|
@@ -140,22 +162,28 @@ function PendingRedactions({
|
|
|
140
162
|
const [selectedId, setSelectedId] = useState(null);
|
|
141
163
|
useEffect(() => {
|
|
142
164
|
if (!redaction) return;
|
|
143
|
-
const
|
|
144
|
-
const
|
|
165
|
+
const scoped = redaction.forDocument(documentId);
|
|
166
|
+
const currentState = scoped.getState();
|
|
167
|
+
setItems(currentState.pending[pageIndex] ?? []);
|
|
168
|
+
setSelectedId(
|
|
169
|
+
currentState.selected && currentState.selected.page === pageIndex ? currentState.selected.id : null
|
|
170
|
+
);
|
|
171
|
+
const off1 = scoped.onPendingChange((map) => setItems(map[pageIndex] ?? []));
|
|
172
|
+
const off2 = scoped.onSelectedChange((sel) => {
|
|
145
173
|
setSelectedId(sel && sel.page === pageIndex ? sel.id : null);
|
|
146
174
|
});
|
|
147
175
|
return () => {
|
|
148
176
|
off1 == null ? void 0 : off1();
|
|
149
177
|
off2 == null ? void 0 : off2();
|
|
150
178
|
};
|
|
151
|
-
}, [redaction, pageIndex]);
|
|
179
|
+
}, [redaction, documentId, pageIndex]);
|
|
152
180
|
const select = useCallback(
|
|
153
181
|
(e, id) => {
|
|
154
182
|
e.stopPropagation();
|
|
155
183
|
if (!redaction) return;
|
|
156
|
-
redaction.selectPending(pageIndex, id);
|
|
184
|
+
redaction.forDocument(documentId).selectPending(pageIndex, id);
|
|
157
185
|
},
|
|
158
|
-
[redaction, pageIndex]
|
|
186
|
+
[redaction, documentId, pageIndex]
|
|
159
187
|
);
|
|
160
188
|
if (!items.length) return null;
|
|
161
189
|
return /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: items.map((it) => {
|
|
@@ -182,7 +210,7 @@ function PendingRedactions({
|
|
|
182
210
|
onTouchStart: (e) => select(e, it.id)
|
|
183
211
|
}
|
|
184
212
|
),
|
|
185
|
-
/* @__PURE__ */ jsx(
|
|
213
|
+
selectionMenu && /* @__PURE__ */ jsx(
|
|
186
214
|
CounterRotate,
|
|
187
215
|
{
|
|
188
216
|
rect: {
|
|
@@ -190,12 +218,17 @@ function PendingRedactions({
|
|
|
190
218
|
size: { width: r.size.width * scale, height: r.size.height * scale }
|
|
191
219
|
},
|
|
192
220
|
rotation,
|
|
193
|
-
children: (
|
|
194
|
-
|
|
221
|
+
children: (props) => selectionMenu({
|
|
222
|
+
...props,
|
|
223
|
+
context: {
|
|
224
|
+
type: "redaction",
|
|
225
|
+
item: it,
|
|
226
|
+
pageIndex
|
|
227
|
+
},
|
|
195
228
|
selected: selectedId === it.id,
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
229
|
+
placement: {
|
|
230
|
+
suggestTop: false
|
|
231
|
+
}
|
|
199
232
|
})
|
|
200
233
|
}
|
|
201
234
|
)
|
|
@@ -231,7 +264,7 @@ function PendingRedactions({
|
|
|
231
264
|
)
|
|
232
265
|
}
|
|
233
266
|
),
|
|
234
|
-
/* @__PURE__ */ jsx(
|
|
267
|
+
selectionMenu && /* @__PURE__ */ jsx(
|
|
235
268
|
CounterRotate,
|
|
236
269
|
{
|
|
237
270
|
rect: {
|
|
@@ -239,12 +272,17 @@ function PendingRedactions({
|
|
|
239
272
|
size: { width: b.size.width * scale, height: b.size.height * scale }
|
|
240
273
|
},
|
|
241
274
|
rotation,
|
|
242
|
-
children: (
|
|
243
|
-
|
|
275
|
+
children: (props) => selectionMenu({
|
|
276
|
+
...props,
|
|
277
|
+
context: {
|
|
278
|
+
type: "redaction",
|
|
279
|
+
item: it,
|
|
280
|
+
pageIndex
|
|
281
|
+
},
|
|
244
282
|
selected: selectedId === it.id,
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
283
|
+
placement: {
|
|
284
|
+
suggestTop: false
|
|
285
|
+
}
|
|
248
286
|
})
|
|
249
287
|
}
|
|
250
288
|
)
|
|
@@ -252,23 +290,34 @@ function PendingRedactions({
|
|
|
252
290
|
}) });
|
|
253
291
|
}
|
|
254
292
|
const RedactionLayer = ({
|
|
293
|
+
documentId,
|
|
255
294
|
pageIndex,
|
|
256
295
|
scale,
|
|
257
|
-
rotation
|
|
296
|
+
rotation,
|
|
258
297
|
selectionMenu
|
|
259
298
|
}) => {
|
|
299
|
+
const documentState = useDocumentState(documentId);
|
|
300
|
+
const actualScale = useMemo(() => {
|
|
301
|
+
if (scale !== void 0) return scale;
|
|
302
|
+
return (documentState == null ? void 0 : documentState.scale) ?? 1;
|
|
303
|
+
}, [scale, documentState == null ? void 0 : documentState.scale]);
|
|
304
|
+
const actualRotation = useMemo(() => {
|
|
305
|
+
if (rotation !== void 0) return rotation;
|
|
306
|
+
return (documentState == null ? void 0 : documentState.rotation) ?? Rotation.Degree0;
|
|
307
|
+
}, [rotation, documentState == null ? void 0 : documentState.rotation]);
|
|
260
308
|
return /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
261
309
|
/* @__PURE__ */ jsx(
|
|
262
310
|
PendingRedactions,
|
|
263
311
|
{
|
|
312
|
+
documentId,
|
|
264
313
|
pageIndex,
|
|
265
|
-
scale,
|
|
266
|
-
rotation,
|
|
314
|
+
scale: actualScale,
|
|
315
|
+
rotation: actualRotation,
|
|
267
316
|
selectionMenu
|
|
268
317
|
}
|
|
269
318
|
),
|
|
270
|
-
/* @__PURE__ */ jsx(MarqueeRedact, { pageIndex, scale }),
|
|
271
|
-
/* @__PURE__ */ jsx(SelectionRedact, { pageIndex, scale })
|
|
319
|
+
/* @__PURE__ */ jsx(MarqueeRedact, { documentId, pageIndex, scale: actualScale }),
|
|
320
|
+
/* @__PURE__ */ jsx(SelectionRedact, { documentId, pageIndex, scale: actualScale })
|
|
272
321
|
] });
|
|
273
322
|
};
|
|
274
323
|
export {
|
package/dist/react/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-redaction.ts","../../src/shared/components/marquee-redact.tsx","../../src/shared/components/highlight.tsx","../../src/shared/components/selection-redact.tsx","../../src/shared/components/pending-redactions.tsx","../../src/shared/components/redaction-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport { initialState, RedactionPlugin, RedactionState } from '@embedpdf/plugin-redaction';\nimport { useState, useEffect } from '@framework';\n\nexport const useRedactionPlugin = () => usePlugin<RedactionPlugin>(RedactionPlugin.id);\nexport const useRedactionCapability = () => useCapability<RedactionPlugin>(RedactionPlugin.id);\n\nexport const useRedaction = () => {\n const { provides } = useRedactionCapability();\n const [state, setState] = useState<RedactionState>(initialState);\n\n useEffect(() => {\n return provides?.onStateChange((action) => {\n setState(action);\n });\n }, [provides]);\n\n return {\n state,\n provides,\n };\n};\n","import { useEffect, useState } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useRedactionPlugin } from '../hooks/use-redaction';\n\ninterface MarqueeRedactProps {\n /** Index of the page this layer lives on */\n pageIndex: number;\n /** Scale of the page */\n scale: number;\n /** Optional CSS class applied to the marquee rectangle */\n className?: string;\n /** Stroke / fill colours (defaults below) */\n stroke?: string;\n fill?: string;\n}\n\nexport const MarqueeRedact = ({\n pageIndex,\n scale,\n className,\n stroke = 'red',\n fill = 'transparent',\n}: MarqueeRedactProps) => {\n const { plugin: redactionPlugin } = useRedactionPlugin();\n\n const [rect, setRect] = useState<Rect | null>(null);\n\n useEffect(() => {\n if (!redactionPlugin) return;\n return redactionPlugin.registerMarqueeOnPage({\n pageIndex,\n scale,\n callback: {\n onPreview: setRect,\n },\n });\n }, [redactionPlugin, pageIndex]);\n\n if (!rect) return null;\n\n return (\n <div\n style={{\n position: 'absolute',\n pointerEvents: 'none',\n left: rect.origin.x * scale,\n top: rect.origin.y * scale,\n width: rect.size.width * scale,\n height: rect.size.height * scale,\n border: `1px solid ${stroke}`,\n background: fill,\n boxSizing: 'border-box',\n }}\n className={className}\n />\n );\n};\n","import { HTMLAttributes, CSSProperties, MouseEvent, TouchEvent } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\ntype HighlightProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n color?: string;\n opacity?: number;\n border?: string;\n rects: Rect[];\n rect?: Rect;\n scale: number;\n onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n style?: CSSProperties;\n};\n\nexport function Highlight({\n color = '#FFFF00',\n opacity = 1,\n border = '1px solid red',\n rects,\n rect,\n scale,\n onClick,\n style,\n ...props\n}: HighlightProps) {\n return (\n <>\n {rects.map((b, i) => (\n <div\n key={i}\n onPointerDown={onClick}\n onTouchStart={onClick}\n style={{\n position: 'absolute',\n border,\n left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,\n top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,\n width: b.size.width * scale,\n height: b.size.height * scale,\n background: color,\n opacity: opacity,\n pointerEvents: onClick ? 'auto' : 'none',\n cursor: onClick ? 'pointer' : 'default',\n zIndex: onClick ? 1 : undefined,\n ...style,\n }}\n {...props}\n />\n ))}\n </>\n );\n}\n","import { Rect } from '@embedpdf/models';\n\nimport { useEffect, useState } from '@framework';\nimport { useRedactionPlugin } from '../hooks';\nimport { Highlight } from './highlight';\n\ninterface SelectionRedactProps {\n pageIndex: number;\n scale: number;\n}\n\nexport function SelectionRedact({ pageIndex, scale }: SelectionRedactProps) {\n const { plugin: redactionPlugin } = useRedactionPlugin();\n const [rects, setRects] = useState<Array<Rect>>([]);\n const [boundingRect, setBoundingRect] = useState<Rect | null>(null);\n\n useEffect(() => {\n if (!redactionPlugin) return;\n\n return redactionPlugin.onRedactionSelectionChange((formattedSelection) => {\n const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);\n setRects(selection?.segmentRects ?? []);\n setBoundingRect(selection?.rect ?? null);\n });\n }, [redactionPlugin, pageIndex]);\n\n if (!boundingRect) return null;\n\n return (\n <div\n style={{\n mixBlendMode: 'normal',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n }}\n >\n <Highlight\n color={'transparent'}\n opacity={1}\n rects={rects}\n scale={scale}\n border=\"1px solid red\"\n />\n </div>\n );\n}\n","import { Fragment, useEffect, useState, useCallback, MouseEvent, TouchEvent } from '@framework';\nimport { CounterRotate } from '@embedpdf/utils/@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { RedactionItem } from '@embedpdf/plugin-redaction';\nimport { Highlight } from './highlight';\nimport { SelectionMenuProps } from './types';\nimport { Rotation } from '@embedpdf/models';\n\ninterface PendingRedactionsProps {\n pageIndex: number;\n scale: number;\n rotation: Rotation;\n bboxStroke?: string;\n selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport function PendingRedactions({\n pageIndex,\n scale,\n bboxStroke = 'rgba(0,0,0,0.8)',\n rotation = Rotation.Degree0,\n selectionMenu,\n}: PendingRedactionsProps) {\n const { provides: redaction } = useRedactionCapability();\n const [items, setItems] = useState<RedactionItem[]>([]);\n const [selectedId, setSelectedId] = useState<string | null>(null);\n\n useEffect(() => {\n if (!redaction) return;\n const off1 = redaction.onPendingChange((map) => setItems(map[pageIndex] ?? []));\n const off2 = redaction.onSelectedChange((sel) => {\n setSelectedId(sel && sel.page === pageIndex ? sel.id : null);\n });\n return () => {\n off1?.();\n off2?.();\n };\n }, [redaction, pageIndex]);\n\n const select = useCallback(\n (e: MouseEvent | TouchEvent, id: string) => {\n e.stopPropagation();\n if (!redaction) return;\n redaction.selectPending(pageIndex, id);\n },\n [redaction, pageIndex],\n );\n\n if (!items.length) return null;\n\n return (\n <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n {items.map((it) => {\n if (it.kind === 'area') {\n const r = it.rect;\n return (\n <Fragment key={it.id}>\n <div\n style={{\n position: 'absolute',\n left: r.origin.x * scale,\n top: r.origin.y * scale,\n width: r.size.width * scale,\n height: r.size.height * scale,\n background: 'transparent',\n outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n outlineOffset: '2px',\n border: `1px solid red`,\n pointerEvents: 'auto',\n cursor: 'pointer',\n }}\n onPointerDown={(e) => select(e, it.id)}\n onTouchStart={(e) => select(e, it.id)}\n />\n <CounterRotate\n rect={{\n origin: { x: r.origin.x * scale, y: r.origin.y * scale },\n size: { width: r.size.width * scale, height: r.size.height * scale },\n }}\n rotation={rotation}\n >\n {({ rect, menuWrapperProps }) =>\n selectionMenu &&\n selectionMenu({\n item: it,\n selected: selectedId === it.id,\n pageIndex,\n menuWrapperProps,\n rect,\n })\n }\n </CounterRotate>\n </Fragment>\n );\n }\n // kind === 'text' → draw bounding box; inner rects are not drawn here to avoid clutter.\n const b = it.rect;\n return (\n <Fragment key={it.id}>\n <div\n style={{\n position: 'absolute',\n left: b.origin.x * scale,\n top: b.origin.y * scale,\n width: b.size.width * scale,\n height: b.size.height * scale,\n background: 'transparent',\n outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n outlineOffset: '2px',\n pointerEvents: 'auto',\n cursor: selectedId === it.id ? 'pointer' : 'default',\n }}\n >\n <Highlight\n rect={b}\n rects={it.rects}\n color=\"transparent\"\n border=\"1px solid red\"\n scale={scale}\n onClick={(e) => select(e, it.id)}\n />\n </div>\n <CounterRotate\n rect={{\n origin: { x: b.origin.x * scale, y: b.origin.y * scale },\n size: { width: b.size.width * scale, height: b.size.height * scale },\n }}\n rotation={rotation}\n >\n {({ rect, menuWrapperProps }) =>\n selectionMenu &&\n selectionMenu({\n item: it,\n selected: selectedId === it.id,\n pageIndex,\n menuWrapperProps,\n rect,\n })\n }\n </CounterRotate>\n </Fragment>\n );\n })}\n </div>\n );\n}\n","import { Fragment } from '@framework';\nimport { MarqueeRedact } from './marquee-redact';\nimport { SelectionRedact } from './selection-redact';\nimport { PendingRedactions } from './pending-redactions';\nimport { Rotation } from '@embedpdf/models';\nimport { SelectionMenuProps } from './types';\n\ninterface RedactionLayerProps {\n pageIndex: number;\n scale: number;\n rotation: Rotation;\n selectionMenu?: (props: SelectionMenuProps) => JSX.Element;\n}\n\nexport const RedactionLayer = ({\n pageIndex,\n scale,\n rotation = Rotation.Degree0,\n selectionMenu,\n}: RedactionLayerProps) => {\n return (\n <Fragment>\n <PendingRedactions\n pageIndex={pageIndex}\n scale={scale}\n rotation={rotation}\n selectionMenu={selectionMenu}\n />\n <MarqueeRedact pageIndex={pageIndex} scale={scale} />\n <SelectionRedact pageIndex={pageIndex} scale={scale} />\n </Fragment>\n );\n};\n"],"names":["Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/shared/hooks/use-redaction.ts","../../src/shared/components/marquee-redact.tsx","../../src/shared/components/highlight.tsx","../../src/shared/components/selection-redact.tsx","../../src/shared/components/pending-redactions.tsx","../../src/shared/components/redaction-layer.tsx"],"sourcesContent":["import { useCapability, usePlugin } from '@embedpdf/core/@framework';\nimport {\n initialDocumentState,\n RedactionPlugin,\n RedactionDocumentState,\n RedactionScope,\n} from '@embedpdf/plugin-redaction';\nimport { useState, useEffect, useMemo } from '@framework';\n\nexport const useRedactionPlugin = () => usePlugin<RedactionPlugin>(RedactionPlugin.id);\nexport const useRedactionCapability = () => useCapability<RedactionPlugin>(RedactionPlugin.id);\n\nexport const useRedaction = (\n documentId: string,\n): {\n state: RedactionDocumentState;\n provides: RedactionScope | null;\n} => {\n const { provides } = useRedactionCapability();\n const [state, setState] = useState<RedactionDocumentState>(initialDocumentState);\n\n const scope = useMemo(\n () => (provides ? provides.forDocument(documentId) : null),\n [provides, documentId],\n );\n\n useEffect(() => {\n if (!scope) {\n setState(initialDocumentState);\n return;\n }\n\n // Set initial state\n try {\n setState(scope.getState());\n } catch (e) {\n // Handle case where state might not be ready\n setState(initialDocumentState);\n }\n\n // Subscribe to changes\n const unsubscribe = scope.onStateChange((newState) => {\n setState(newState);\n });\n\n return unsubscribe;\n }, [scope]);\n\n return {\n state,\n provides: scope,\n };\n};\n","import { useEffect, useMemo, useState } from '@framework';\nimport { useDocumentState } from '@embedpdf/core/@framework';\nimport { Rect } from '@embedpdf/models';\n\nimport { useRedactionPlugin } from '../hooks/use-redaction';\n\ninterface MarqueeRedactProps {\n /** The ID of the document */\n documentId: string;\n /** Index of the page this layer lives on */\n pageIndex: number;\n /** Scale of the page */\n scale?: number;\n /** Optional CSS class applied to the marquee rectangle */\n className?: string;\n /** Stroke / fill colours (defaults below) */\n stroke?: string;\n fill?: string;\n}\n\nexport const MarqueeRedact = ({\n documentId,\n pageIndex,\n scale: scaleOverride,\n className,\n stroke = 'red',\n fill = 'transparent',\n}: MarqueeRedactProps) => {\n const { plugin: redactionPlugin } = useRedactionPlugin();\n const documentState = useDocumentState(documentId);\n\n const [rect, setRect] = useState<Rect | null>(null);\n\n const scale = useMemo(() => {\n if (scaleOverride !== undefined) return scaleOverride;\n return documentState?.scale ?? 1;\n }, [scaleOverride, documentState?.scale]);\n\n useEffect(() => {\n if (!redactionPlugin || !documentId) return;\n return redactionPlugin.registerMarqueeOnPage({\n documentId,\n pageIndex,\n scale,\n callback: {\n onPreview: setRect,\n },\n });\n }, [redactionPlugin, documentId, pageIndex, scale]);\n\n if (!rect) return null;\n\n return (\n <div\n style={{\n position: 'absolute',\n pointerEvents: 'none',\n left: rect.origin.x * scale,\n top: rect.origin.y * scale,\n width: rect.size.width * scale,\n height: rect.size.height * scale,\n border: `1px solid ${stroke}`,\n background: fill,\n boxSizing: 'border-box',\n }}\n className={className}\n />\n );\n};\n","import { HTMLAttributes, CSSProperties, MouseEvent, TouchEvent } from '@framework';\nimport { Rect } from '@embedpdf/models';\n\ntype HighlightProps = Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {\n color?: string;\n opacity?: number;\n border?: string;\n rects: Rect[];\n rect?: Rect;\n scale: number;\n onClick?: (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => void;\n style?: CSSProperties;\n};\n\nexport function Highlight({\n color = '#FFFF00',\n opacity = 1,\n border = '1px solid red',\n rects,\n rect,\n scale,\n onClick,\n style,\n ...props\n}: HighlightProps) {\n return (\n <>\n {rects.map((b, i) => (\n <div\n key={i}\n onPointerDown={onClick}\n onTouchStart={onClick}\n style={{\n position: 'absolute',\n border,\n left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,\n top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,\n width: b.size.width * scale,\n height: b.size.height * scale,\n background: color,\n opacity: opacity,\n pointerEvents: onClick ? 'auto' : 'none',\n cursor: onClick ? 'pointer' : 'default',\n zIndex: onClick ? 1 : undefined,\n ...style,\n }}\n {...props}\n />\n ))}\n </>\n );\n}\n","import { Rect } from '@embedpdf/models';\nimport { useEffect, useState } from '@framework';\nimport { useRedactionPlugin } from '../hooks';\nimport { Highlight } from './highlight';\n\ninterface SelectionRedactProps {\n documentId: string;\n pageIndex: number;\n scale: number;\n}\n\nexport function SelectionRedact({ documentId, pageIndex, scale }: SelectionRedactProps) {\n const { plugin: redactionPlugin } = useRedactionPlugin();\n const [rects, setRects] = useState<Array<Rect>>([]);\n const [boundingRect, setBoundingRect] = useState<Rect | null>(null);\n\n useEffect(() => {\n if (!redactionPlugin) return;\n return redactionPlugin.onRedactionSelectionChange(documentId, (formattedSelection) => {\n const selection = formattedSelection.find((s) => s.pageIndex === pageIndex);\n setRects(selection?.segmentRects ?? []);\n setBoundingRect(selection?.rect ?? null);\n });\n }, [redactionPlugin, documentId, pageIndex]);\n\n if (!boundingRect) return null;\n\n return (\n <div\n style={{\n mixBlendMode: 'normal',\n pointerEvents: 'none',\n position: 'absolute',\n inset: 0,\n }}\n >\n <Highlight\n color={'transparent'}\n opacity={1}\n rects={rects}\n scale={scale}\n border=\"1px solid red\"\n />\n </div>\n );\n}\n","import { Fragment, useEffect, useState, useCallback, MouseEvent, TouchEvent } from '@framework';\nimport { CounterRotate } from '@embedpdf/utils/@framework';\nimport { useRedactionCapability } from '../hooks';\nimport { RedactionItem } from '@embedpdf/plugin-redaction';\nimport { Highlight } from './highlight';\nimport { RedactionSelectionMenuRenderFn } from './types';\nimport { Rotation } from '@embedpdf/models';\n\ninterface PendingRedactionsProps {\n documentId: string;\n pageIndex: number;\n scale: number;\n rotation: Rotation;\n bboxStroke?: string;\n selectionMenu?: RedactionSelectionMenuRenderFn;\n}\n\nexport function PendingRedactions({\n documentId,\n pageIndex,\n scale,\n bboxStroke = 'rgba(0,0,0,0.8)',\n rotation = Rotation.Degree0,\n selectionMenu,\n}: PendingRedactionsProps) {\n const { provides: redaction } = useRedactionCapability();\n const [items, setItems] = useState<RedactionItem[]>([]);\n const [selectedId, setSelectedId] = useState<string | null>(null);\n\n useEffect(() => {\n if (!redaction) return;\n\n // Use document-scoped hooks so we only receive events for this document\n const scoped = redaction.forDocument(documentId);\n\n // Initialize with current state\n const currentState = scoped.getState();\n setItems(currentState.pending[pageIndex] ?? []);\n setSelectedId(\n currentState.selected && currentState.selected.page === pageIndex\n ? currentState.selected.id\n : null,\n );\n\n // Subscribe to future changes\n const off1 = scoped.onPendingChange((map) => setItems(map[pageIndex] ?? []));\n const off2 = scoped.onSelectedChange((sel) => {\n setSelectedId(sel && sel.page === pageIndex ? sel.id : null);\n });\n\n return () => {\n off1?.();\n off2?.();\n };\n }, [redaction, documentId, pageIndex]);\n\n const select = useCallback(\n (e: MouseEvent | TouchEvent, id: string) => {\n e.stopPropagation();\n if (!redaction) return;\n redaction.forDocument(documentId).selectPending(pageIndex, id);\n },\n [redaction, documentId, pageIndex],\n );\n\n if (!items.length) return null;\n\n return (\n <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>\n {items.map((it) => {\n if (it.kind === 'area') {\n const r = it.rect;\n return (\n <Fragment key={it.id}>\n <div\n style={{\n position: 'absolute',\n left: r.origin.x * scale,\n top: r.origin.y * scale,\n width: r.size.width * scale,\n height: r.size.height * scale,\n background: 'transparent',\n outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n outlineOffset: '2px',\n border: `1px solid red`,\n pointerEvents: 'auto',\n cursor: 'pointer',\n }}\n onPointerDown={(e) => select(e, it.id)}\n onTouchStart={(e) => select(e, it.id)}\n />\n {selectionMenu && (\n <CounterRotate\n rect={{\n origin: { x: r.origin.x * scale, y: r.origin.y * scale },\n size: { width: r.size.width * scale, height: r.size.height * scale },\n }}\n rotation={rotation}\n >\n {(props) =>\n selectionMenu({\n ...props,\n context: {\n type: 'redaction',\n item: it,\n pageIndex,\n },\n selected: selectedId === it.id,\n placement: {\n suggestTop: false,\n },\n })\n }\n </CounterRotate>\n )}\n </Fragment>\n );\n }\n\n const b = it.rect;\n return (\n <Fragment key={it.id}>\n <div\n style={{\n position: 'absolute',\n left: b.origin.x * scale,\n top: b.origin.y * scale,\n width: b.size.width * scale,\n height: b.size.height * scale,\n background: 'transparent',\n outline: selectedId === it.id ? `1px solid ${bboxStroke}` : 'none',\n outlineOffset: '2px',\n pointerEvents: 'auto',\n cursor: selectedId === it.id ? 'pointer' : 'default',\n }}\n >\n <Highlight\n rect={b}\n rects={it.rects}\n color=\"transparent\"\n border=\"1px solid red\"\n scale={scale}\n onClick={(e) => select(e, it.id)}\n />\n </div>\n {selectionMenu && (\n <CounterRotate\n rect={{\n origin: { x: b.origin.x * scale, y: b.origin.y * scale },\n size: { width: b.size.width * scale, height: b.size.height * scale },\n }}\n rotation={rotation}\n >\n {(props) =>\n selectionMenu({\n ...props,\n context: {\n type: 'redaction',\n item: it,\n pageIndex,\n },\n selected: selectedId === it.id,\n placement: {\n suggestTop: false,\n },\n })\n }\n </CounterRotate>\n )}\n </Fragment>\n );\n })}\n </div>\n );\n}\n","import { Fragment, useMemo } from '@framework';\nimport { useDocumentState } from '@embedpdf/core/@framework';\nimport { MarqueeRedact } from './marquee-redact';\nimport { SelectionRedact } from './selection-redact';\nimport { PendingRedactions } from './pending-redactions';\nimport { Rotation } from '@embedpdf/models';\nimport { RedactionSelectionMenuRenderFn } from './types';\n\ninterface RedactionLayerProps {\n /** The ID of the document this layer belongs to */\n documentId: string;\n /** Index of the page this layer lives on */\n pageIndex: number;\n /** Current render scale for this page */\n scale?: number;\n /** Page rotation (for counter-rotating menus, etc.) */\n rotation?: Rotation;\n /** Optional menu renderer for a selected redaction */\n selectionMenu?: RedactionSelectionMenuRenderFn;\n}\n\nexport const RedactionLayer = ({\n documentId,\n pageIndex,\n scale,\n rotation,\n selectionMenu,\n}: RedactionLayerProps) => {\n const documentState = useDocumentState(documentId);\n\n const actualScale = useMemo(() => {\n if (scale !== undefined) return scale;\n return documentState?.scale ?? 1;\n }, [scale, documentState?.scale]);\n\n const actualRotation = useMemo(() => {\n if (rotation !== undefined) return rotation;\n return documentState?.rotation ?? Rotation.Degree0;\n }, [rotation, documentState?.rotation]);\n\n return (\n <Fragment>\n <PendingRedactions\n documentId={documentId}\n pageIndex={pageIndex}\n scale={actualScale}\n rotation={actualRotation}\n selectionMenu={selectionMenu}\n />\n <MarqueeRedact documentId={documentId} pageIndex={pageIndex} scale={actualScale} />\n <SelectionRedact documentId={documentId} pageIndex={pageIndex} scale={actualScale} />\n </Fragment>\n );\n};\n"],"names":["Fragment"],"mappings":"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"}
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
interface MarqueeRedactProps {
|
|
2
|
+
/** The ID of the document */
|
|
3
|
+
documentId: string;
|
|
2
4
|
/** Index of the page this layer lives on */
|
|
3
5
|
pageIndex: number;
|
|
4
6
|
/** Scale of the page */
|
|
5
|
-
scale
|
|
7
|
+
scale?: number;
|
|
6
8
|
/** Optional CSS class applied to the marquee rectangle */
|
|
7
9
|
className?: string;
|
|
8
10
|
/** Stroke / fill colours (defaults below) */
|
|
9
11
|
stroke?: string;
|
|
10
12
|
fill?: string;
|
|
11
13
|
}
|
|
12
|
-
export declare const MarqueeRedact: ({ pageIndex, scale, className, stroke, fill, }: MarqueeRedactProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
14
|
+
export declare const MarqueeRedact: ({ documentId, pageIndex, scale: scaleOverride, className, stroke, fill, }: MarqueeRedactProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
13
15
|
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
2
2
|
import { Rotation } from '@embedpdf/models';
|
|
3
3
|
interface PendingRedactionsProps {
|
|
4
|
+
documentId: string;
|
|
4
5
|
pageIndex: number;
|
|
5
6
|
scale: number;
|
|
6
7
|
rotation: Rotation;
|
|
7
8
|
bboxStroke?: string;
|
|
8
|
-
selectionMenu?:
|
|
9
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
9
10
|
}
|
|
10
|
-
export declare function PendingRedactions({ pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export declare function PendingRedactions({ documentId, pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
12
|
export {};
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { Rotation } from '@embedpdf/models';
|
|
2
|
-
import {
|
|
2
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
3
3
|
interface RedactionLayerProps {
|
|
4
|
+
/** The ID of the document this layer belongs to */
|
|
5
|
+
documentId: string;
|
|
6
|
+
/** Index of the page this layer lives on */
|
|
4
7
|
pageIndex: number;
|
|
5
|
-
scale
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
/** Current render scale for this page */
|
|
9
|
+
scale?: number;
|
|
10
|
+
/** Page rotation (for counter-rotating menus, etc.) */
|
|
11
|
+
rotation?: Rotation;
|
|
12
|
+
/** Optional menu renderer for a selected redaction */
|
|
13
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
8
14
|
}
|
|
9
|
-
export declare const RedactionLayer: ({ pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const RedactionLayer: ({ documentId, pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
16
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
interface SelectionRedactProps {
|
|
2
|
+
documentId: string;
|
|
2
3
|
pageIndex: number;
|
|
3
4
|
scale: number;
|
|
4
5
|
}
|
|
5
|
-
export declare function SelectionRedact({ pageIndex, scale }: SelectionRedactProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export declare function SelectionRedact({ documentId, pageIndex, scale }: SelectionRedactProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
7
|
export {};
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Rect } from '@embedpdf/models';
|
|
1
|
+
import { SelectionMenuPropsBase, SelectionMenuRenderFn } from '../../react/utils.ts';
|
|
3
2
|
import { RedactionItem } from '../../index.ts';
|
|
4
|
-
export interface
|
|
5
|
-
|
|
6
|
-
pageIndex: number;
|
|
3
|
+
export interface RedactionSelectionContext {
|
|
4
|
+
type: 'redaction';
|
|
7
5
|
item: RedactionItem;
|
|
8
|
-
|
|
9
|
-
rect: Rect;
|
|
6
|
+
pageIndex: number;
|
|
10
7
|
}
|
|
8
|
+
export type RedactionSelectionMenuProps = SelectionMenuPropsBase<RedactionSelectionContext>;
|
|
9
|
+
export type RedactionSelectionMenuRenderFn = SelectionMenuRenderFn<RedactionSelectionContext>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RedactionPlugin,
|
|
1
|
+
import { RedactionPlugin, RedactionDocumentState, RedactionScope } from '../../index.ts';
|
|
2
2
|
export declare const useRedactionPlugin: () => {
|
|
3
3
|
plugin: RedactionPlugin | null;
|
|
4
4
|
isLoading: boolean;
|
|
@@ -9,7 +9,7 @@ export declare const useRedactionCapability: () => {
|
|
|
9
9
|
isLoading: boolean;
|
|
10
10
|
ready: Promise<void>;
|
|
11
11
|
};
|
|
12
|
-
export declare const useRedaction: () => {
|
|
13
|
-
state:
|
|
14
|
-
provides:
|
|
12
|
+
export declare const useRedaction: (documentId: string) => {
|
|
13
|
+
state: RedactionDocumentState;
|
|
14
|
+
provides: RedactionScope | null;
|
|
15
15
|
};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
interface MarqueeRedactProps {
|
|
2
|
+
/** The ID of the document */
|
|
3
|
+
documentId: string;
|
|
2
4
|
/** Index of the page this layer lives on */
|
|
3
5
|
pageIndex: number;
|
|
4
6
|
/** Scale of the page */
|
|
5
|
-
scale
|
|
7
|
+
scale?: number;
|
|
6
8
|
/** Optional CSS class applied to the marquee rectangle */
|
|
7
9
|
className?: string;
|
|
8
10
|
/** Stroke / fill colours (defaults below) */
|
|
9
11
|
stroke?: string;
|
|
10
12
|
fill?: string;
|
|
11
13
|
}
|
|
12
|
-
export declare const MarqueeRedact: ({ pageIndex, scale, className, stroke, fill, }: MarqueeRedactProps) => import("preact").JSX.Element | null;
|
|
14
|
+
export declare const MarqueeRedact: ({ documentId, pageIndex, scale: scaleOverride, className, stroke, fill, }: MarqueeRedactProps) => import("preact").JSX.Element | null;
|
|
13
15
|
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
2
2
|
import { Rotation } from '@embedpdf/models';
|
|
3
3
|
interface PendingRedactionsProps {
|
|
4
|
+
documentId: string;
|
|
4
5
|
pageIndex: number;
|
|
5
6
|
scale: number;
|
|
6
7
|
rotation: Rotation;
|
|
7
8
|
bboxStroke?: string;
|
|
8
|
-
selectionMenu?:
|
|
9
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
9
10
|
}
|
|
10
|
-
export declare function PendingRedactions({ pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("preact").JSX.Element | null;
|
|
11
|
+
export declare function PendingRedactions({ documentId, pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("preact").JSX.Element | null;
|
|
11
12
|
export {};
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { Rotation } from '@embedpdf/models';
|
|
2
|
-
import {
|
|
2
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
3
3
|
interface RedactionLayerProps {
|
|
4
|
+
/** The ID of the document this layer belongs to */
|
|
5
|
+
documentId: string;
|
|
6
|
+
/** Index of the page this layer lives on */
|
|
4
7
|
pageIndex: number;
|
|
5
|
-
scale
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
/** Current render scale for this page */
|
|
9
|
+
scale?: number;
|
|
10
|
+
/** Page rotation (for counter-rotating menus, etc.) */
|
|
11
|
+
rotation?: Rotation;
|
|
12
|
+
/** Optional menu renderer for a selected redaction */
|
|
13
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
8
14
|
}
|
|
9
|
-
export declare const RedactionLayer: ({ pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("preact").JSX.Element;
|
|
15
|
+
export declare const RedactionLayer: ({ documentId, pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("preact").JSX.Element;
|
|
10
16
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
interface SelectionRedactProps {
|
|
2
|
+
documentId: string;
|
|
2
3
|
pageIndex: number;
|
|
3
4
|
scale: number;
|
|
4
5
|
}
|
|
5
|
-
export declare function SelectionRedact({ pageIndex, scale }: SelectionRedactProps): import("preact").JSX.Element | null;
|
|
6
|
+
export declare function SelectionRedact({ documentId, pageIndex, scale }: SelectionRedactProps): import("preact").JSX.Element | null;
|
|
6
7
|
export {};
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Rect } from '@embedpdf/models';
|
|
1
|
+
import { SelectionMenuPropsBase, SelectionMenuRenderFn } from '../../preact/utils.ts';
|
|
3
2
|
import { RedactionItem } from '../../lib/index.ts';
|
|
4
|
-
export interface
|
|
5
|
-
|
|
6
|
-
pageIndex: number;
|
|
3
|
+
export interface RedactionSelectionContext {
|
|
4
|
+
type: 'redaction';
|
|
7
5
|
item: RedactionItem;
|
|
8
|
-
|
|
9
|
-
rect: Rect;
|
|
6
|
+
pageIndex: number;
|
|
10
7
|
}
|
|
8
|
+
export type RedactionSelectionMenuProps = SelectionMenuPropsBase<RedactionSelectionContext>;
|
|
9
|
+
export type RedactionSelectionMenuRenderFn = SelectionMenuRenderFn<RedactionSelectionContext>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RedactionPlugin,
|
|
1
|
+
import { RedactionPlugin, RedactionDocumentState, RedactionScope } from '../../lib/index.ts';
|
|
2
2
|
export declare const useRedactionPlugin: () => {
|
|
3
3
|
plugin: RedactionPlugin | null;
|
|
4
4
|
isLoading: boolean;
|
|
@@ -9,7 +9,7 @@ export declare const useRedactionCapability: () => {
|
|
|
9
9
|
isLoading: boolean;
|
|
10
10
|
ready: Promise<void>;
|
|
11
11
|
};
|
|
12
|
-
export declare const useRedaction: () => {
|
|
13
|
-
state:
|
|
14
|
-
provides:
|
|
12
|
+
export declare const useRedaction: (documentId: string) => {
|
|
13
|
+
state: RedactionDocumentState;
|
|
14
|
+
provides: RedactionScope | null;
|
|
15
15
|
};
|
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
interface MarqueeRedactProps {
|
|
2
|
+
/** The ID of the document */
|
|
3
|
+
documentId: string;
|
|
2
4
|
/** Index of the page this layer lives on */
|
|
3
5
|
pageIndex: number;
|
|
4
6
|
/** Scale of the page */
|
|
5
|
-
scale
|
|
7
|
+
scale?: number;
|
|
6
8
|
/** Optional CSS class applied to the marquee rectangle */
|
|
7
9
|
className?: string;
|
|
8
10
|
/** Stroke / fill colours (defaults below) */
|
|
9
11
|
stroke?: string;
|
|
10
12
|
fill?: string;
|
|
11
13
|
}
|
|
12
|
-
export declare const MarqueeRedact: ({ pageIndex, scale, className, stroke, fill, }: MarqueeRedactProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
14
|
+
export declare const MarqueeRedact: ({ documentId, pageIndex, scale: scaleOverride, className, stroke, fill, }: MarqueeRedactProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
13
15
|
export {};
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
2
2
|
import { Rotation } from '@embedpdf/models';
|
|
3
3
|
interface PendingRedactionsProps {
|
|
4
|
+
documentId: string;
|
|
4
5
|
pageIndex: number;
|
|
5
6
|
scale: number;
|
|
6
7
|
rotation: Rotation;
|
|
7
8
|
bboxStroke?: string;
|
|
8
|
-
selectionMenu?:
|
|
9
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
9
10
|
}
|
|
10
|
-
export declare function PendingRedactions({ pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
|
+
export declare function PendingRedactions({ documentId, pageIndex, scale, bboxStroke, rotation, selectionMenu, }: PendingRedactionsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
11
12
|
export {};
|
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
import { Rotation } from '@embedpdf/models';
|
|
2
|
-
import {
|
|
2
|
+
import { RedactionSelectionMenuRenderFn } from './types';
|
|
3
3
|
interface RedactionLayerProps {
|
|
4
|
+
/** The ID of the document this layer belongs to */
|
|
5
|
+
documentId: string;
|
|
6
|
+
/** Index of the page this layer lives on */
|
|
4
7
|
pageIndex: number;
|
|
5
|
-
scale
|
|
6
|
-
|
|
7
|
-
|
|
8
|
+
/** Current render scale for this page */
|
|
9
|
+
scale?: number;
|
|
10
|
+
/** Page rotation (for counter-rotating menus, etc.) */
|
|
11
|
+
rotation?: Rotation;
|
|
12
|
+
/** Optional menu renderer for a selected redaction */
|
|
13
|
+
selectionMenu?: RedactionSelectionMenuRenderFn;
|
|
8
14
|
}
|
|
9
|
-
export declare const RedactionLayer: ({ pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
export declare const RedactionLayer: ({ documentId, pageIndex, scale, rotation, selectionMenu, }: RedactionLayerProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
16
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
interface SelectionRedactProps {
|
|
2
|
+
documentId: string;
|
|
2
3
|
pageIndex: number;
|
|
3
4
|
scale: number;
|
|
4
5
|
}
|
|
5
|
-
export declare function SelectionRedact({ pageIndex, scale }: SelectionRedactProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
export declare function SelectionRedact({ documentId, pageIndex, scale }: SelectionRedactProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
7
|
export {};
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { Rect } from '@embedpdf/models';
|
|
1
|
+
import { SelectionMenuPropsBase, SelectionMenuRenderFn } from '../../react/utils.ts';
|
|
3
2
|
import { RedactionItem } from '../../lib/index.ts';
|
|
4
|
-
export interface
|
|
5
|
-
|
|
6
|
-
pageIndex: number;
|
|
3
|
+
export interface RedactionSelectionContext {
|
|
4
|
+
type: 'redaction';
|
|
7
5
|
item: RedactionItem;
|
|
8
|
-
|
|
9
|
-
rect: Rect;
|
|
6
|
+
pageIndex: number;
|
|
10
7
|
}
|
|
8
|
+
export type RedactionSelectionMenuProps = SelectionMenuPropsBase<RedactionSelectionContext>;
|
|
9
|
+
export type RedactionSelectionMenuRenderFn = SelectionMenuRenderFn<RedactionSelectionContext>;
|