@embedpdf/utils 2.6.2 → 2.8.0
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/preact/index.cjs +1 -1
- package/dist/preact/index.cjs.map +1 -1
- package/dist/preact/index.js +164 -164
- 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 +164 -164
- package/dist/react/index.js.map +1 -1
- package/dist/shared/plugin-interaction-primitives/drag-resize-controller.d.ts +1 -1
- package/dist/shared-preact/plugin-interaction-primitives/drag-resize-controller.d.ts +1 -1
- package/dist/shared-react/plugin-interaction-primitives/drag-resize-controller.d.ts +1 -1
- package/dist/shared-svelte/plugin-interaction-primitives/drag-resize-controller.d.ts +1 -1
- package/dist/shared-vue/plugin-interaction-primitives/drag-resize-controller.d.ts +1 -1
- package/dist/svelte/index.cjs +1 -1
- package/dist/svelte/index.cjs.map +1 -1
- package/dist/svelte/index.js +164 -164
- package/dist/svelte/index.js.map +1 -1
- package/dist/vue/index.cjs +1 -1
- package/dist/vue/index.cjs.map +1 -1
- package/dist/vue/index.js +163 -163
- package/dist/vue/index.js.map +1 -1
- package/package.json +3 -3
package/dist/vue/index.js
CHANGED
|
@@ -44,165 +44,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
44
44
|
};
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
|
-
const ROTATION_HANDLE_MARGIN = 35;
|
|
48
|
-
const HANDLE_BASE_ANGLE = {
|
|
49
|
-
n: 0,
|
|
50
|
-
ne: 45,
|
|
51
|
-
e: 90,
|
|
52
|
-
se: 135,
|
|
53
|
-
s: 180,
|
|
54
|
-
sw: 225,
|
|
55
|
-
w: 270,
|
|
56
|
-
nw: 315
|
|
57
|
-
};
|
|
58
|
-
const SECTOR_CURSORS = [
|
|
59
|
-
"ns-resize",
|
|
60
|
-
// 0: north
|
|
61
|
-
"nesw-resize",
|
|
62
|
-
// 1: NE
|
|
63
|
-
"ew-resize",
|
|
64
|
-
// 2: east
|
|
65
|
-
"nwse-resize",
|
|
66
|
-
// 3: SE
|
|
67
|
-
"ns-resize",
|
|
68
|
-
// 4: south
|
|
69
|
-
"nesw-resize",
|
|
70
|
-
// 5: SW
|
|
71
|
-
"ew-resize",
|
|
72
|
-
// 6: west
|
|
73
|
-
"nwse-resize"
|
|
74
|
-
// 7: NW
|
|
75
|
-
];
|
|
76
|
-
function diagonalCursor(handle, pageQuarterTurns, annotationRotation = 0) {
|
|
77
|
-
const pageAngle = pageQuarterTurns * 90;
|
|
78
|
-
const totalAngle = HANDLE_BASE_ANGLE[handle] + pageAngle + annotationRotation;
|
|
79
|
-
const normalized = (totalAngle % 360 + 360) % 360;
|
|
80
|
-
const sector = Math.round(normalized / 45) % 8;
|
|
81
|
-
return SECTOR_CURSORS[sector];
|
|
82
|
-
}
|
|
83
|
-
function edgeOffset(k, spacing, mode) {
|
|
84
|
-
const base = -k / 2;
|
|
85
|
-
if (mode === "center") return base;
|
|
86
|
-
return mode === "outside" ? base - spacing : base + spacing;
|
|
87
|
-
}
|
|
88
|
-
function describeResizeFromConfig(cfg, ui = {}) {
|
|
89
|
-
const {
|
|
90
|
-
handleSize = 8,
|
|
91
|
-
spacing = 1,
|
|
92
|
-
offsetMode = "outside",
|
|
93
|
-
includeSides = false,
|
|
94
|
-
zIndex = 3,
|
|
95
|
-
rotationAwareCursor = true
|
|
96
|
-
} = ui;
|
|
97
|
-
const pageQuarterTurns = (cfg.pageRotation ?? 0) % 4;
|
|
98
|
-
const annotationRot = cfg.annotationRotation ?? 0;
|
|
99
|
-
const off = (edge) => ({
|
|
100
|
-
[edge]: edgeOffset(handleSize, spacing, offsetMode) + "px"
|
|
101
|
-
});
|
|
102
|
-
const corners = [
|
|
103
|
-
["nw", { ...off("top"), ...off("left") }],
|
|
104
|
-
["ne", { ...off("top"), ...off("right") }],
|
|
105
|
-
["sw", { ...off("bottom"), ...off("left") }],
|
|
106
|
-
["se", { ...off("bottom"), ...off("right") }]
|
|
107
|
-
];
|
|
108
|
-
const sides = includeSides ? [
|
|
109
|
-
["n", { ...off("top"), left: `calc(50% - ${handleSize / 2}px)` }],
|
|
110
|
-
["s", { ...off("bottom"), left: `calc(50% - ${handleSize / 2}px)` }],
|
|
111
|
-
["w", { ...off("left"), top: `calc(50% - ${handleSize / 2}px)` }],
|
|
112
|
-
["e", { ...off("right"), top: `calc(50% - ${handleSize / 2}px)` }]
|
|
113
|
-
] : [];
|
|
114
|
-
const all = [...corners, ...sides];
|
|
115
|
-
return all.map(([handle, pos]) => ({
|
|
116
|
-
handle,
|
|
117
|
-
style: {
|
|
118
|
-
position: "absolute",
|
|
119
|
-
width: handleSize + "px",
|
|
120
|
-
height: handleSize + "px",
|
|
121
|
-
borderRadius: "50%",
|
|
122
|
-
zIndex,
|
|
123
|
-
cursor: rotationAwareCursor ? diagonalCursor(handle, pageQuarterTurns, annotationRot) : "default",
|
|
124
|
-
pointerEvents: "auto",
|
|
125
|
-
touchAction: "none",
|
|
126
|
-
...pos
|
|
127
|
-
},
|
|
128
|
-
attrs: { "data-epdf-handle": handle }
|
|
129
|
-
}));
|
|
130
|
-
}
|
|
131
|
-
function describeVerticesFromConfig(cfg, ui = {}, liveVertices) {
|
|
132
|
-
const { vertexSize = 12, zIndex = 4 } = ui;
|
|
133
|
-
const rect = cfg.element;
|
|
134
|
-
const scale = cfg.scale ?? 1;
|
|
135
|
-
const verts = liveVertices ?? cfg.vertices ?? [];
|
|
136
|
-
return verts.map((v, i) => {
|
|
137
|
-
const left = (v.x - rect.origin.x) * scale - vertexSize / 2;
|
|
138
|
-
const top = (v.y - rect.origin.y) * scale - vertexSize / 2;
|
|
139
|
-
return {
|
|
140
|
-
handle: "nw",
|
|
141
|
-
// not used; kept for type
|
|
142
|
-
style: {
|
|
143
|
-
position: "absolute",
|
|
144
|
-
left: left + "px",
|
|
145
|
-
top: top + "px",
|
|
146
|
-
width: vertexSize + "px",
|
|
147
|
-
height: vertexSize + "px",
|
|
148
|
-
borderRadius: "50%",
|
|
149
|
-
cursor: "pointer",
|
|
150
|
-
zIndex,
|
|
151
|
-
pointerEvents: "auto",
|
|
152
|
-
touchAction: "none"
|
|
153
|
-
},
|
|
154
|
-
attrs: { "data-epdf-vertex": i }
|
|
155
|
-
};
|
|
156
|
-
});
|
|
157
|
-
}
|
|
158
|
-
function describeRotationFromConfig(cfg, ui = {}, currentAngle = 0) {
|
|
159
|
-
const { handleSize = 16, zIndex = 5, showConnector = true, connectorWidth = 1 } = ui;
|
|
160
|
-
const scale = cfg.scale ?? 1;
|
|
161
|
-
const rect = cfg.element;
|
|
162
|
-
const orbitRect = cfg.rotationElement ?? rect;
|
|
163
|
-
const orbitCenter = cfg.rotationCenter ?? {
|
|
164
|
-
x: rect.origin.x + rect.size.width / 2,
|
|
165
|
-
y: rect.origin.y + rect.size.height / 2
|
|
166
|
-
};
|
|
167
|
-
orbitRect.size.width * scale;
|
|
168
|
-
orbitRect.size.height * scale;
|
|
169
|
-
const centerX = (orbitCenter.x - orbitRect.origin.x) * scale;
|
|
170
|
-
const centerY = (orbitCenter.y - orbitRect.origin.y) * scale;
|
|
171
|
-
const angleRad = currentAngle * Math.PI / 180;
|
|
172
|
-
const margin = ui.margin ?? ROTATION_HANDLE_MARGIN;
|
|
173
|
-
const radius = rect.size.height * scale / 2 + margin;
|
|
174
|
-
const handleCenterX = centerX + radius * Math.sin(angleRad);
|
|
175
|
-
const handleCenterY = centerY - radius * Math.cos(angleRad);
|
|
176
|
-
const handleLeft = handleCenterX - handleSize / 2;
|
|
177
|
-
const handleTop = handleCenterY - handleSize / 2;
|
|
178
|
-
return {
|
|
179
|
-
handleStyle: {
|
|
180
|
-
position: "absolute",
|
|
181
|
-
left: handleLeft + "px",
|
|
182
|
-
top: handleTop + "px",
|
|
183
|
-
width: handleSize + "px",
|
|
184
|
-
height: handleSize + "px",
|
|
185
|
-
borderRadius: "50%",
|
|
186
|
-
cursor: "grab",
|
|
187
|
-
zIndex,
|
|
188
|
-
pointerEvents: "auto",
|
|
189
|
-
touchAction: "none"
|
|
190
|
-
},
|
|
191
|
-
connectorStyle: showConnector ? {
|
|
192
|
-
position: "absolute",
|
|
193
|
-
left: centerX - connectorWidth / 2 + "px",
|
|
194
|
-
top: centerY - radius + "px",
|
|
195
|
-
width: connectorWidth + "px",
|
|
196
|
-
height: radius + "px",
|
|
197
|
-
transformOrigin: "center bottom",
|
|
198
|
-
transform: `rotate(${currentAngle}deg)`,
|
|
199
|
-
zIndex: zIndex - 1,
|
|
200
|
-
pointerEvents: "none"
|
|
201
|
-
} : {},
|
|
202
|
-
radius,
|
|
203
|
-
attrs: { "data-epdf-rotation-handle": true }
|
|
204
|
-
};
|
|
205
|
-
}
|
|
206
47
|
function getAnchor(handle) {
|
|
207
48
|
return {
|
|
208
49
|
x: handle.includes("e") ? "left" : handle.includes("w") ? "right" : "center",
|
|
@@ -443,6 +284,165 @@ function computeResizedRect(delta, handle, config) {
|
|
|
443
284
|
}
|
|
444
285
|
return computeResizeStep(delta, handle, config, true, false);
|
|
445
286
|
}
|
|
287
|
+
const ROTATION_HANDLE_MARGIN = 35;
|
|
288
|
+
const HANDLE_BASE_ANGLE = {
|
|
289
|
+
n: 0,
|
|
290
|
+
ne: 45,
|
|
291
|
+
e: 90,
|
|
292
|
+
se: 135,
|
|
293
|
+
s: 180,
|
|
294
|
+
sw: 225,
|
|
295
|
+
w: 270,
|
|
296
|
+
nw: 315
|
|
297
|
+
};
|
|
298
|
+
const SECTOR_CURSORS = [
|
|
299
|
+
"ns-resize",
|
|
300
|
+
// 0: north
|
|
301
|
+
"nesw-resize",
|
|
302
|
+
// 1: NE
|
|
303
|
+
"ew-resize",
|
|
304
|
+
// 2: east
|
|
305
|
+
"nwse-resize",
|
|
306
|
+
// 3: SE
|
|
307
|
+
"ns-resize",
|
|
308
|
+
// 4: south
|
|
309
|
+
"nesw-resize",
|
|
310
|
+
// 5: SW
|
|
311
|
+
"ew-resize",
|
|
312
|
+
// 6: west
|
|
313
|
+
"nwse-resize"
|
|
314
|
+
// 7: NW
|
|
315
|
+
];
|
|
316
|
+
function diagonalCursor(handle, pageQuarterTurns, annotationRotation = 0) {
|
|
317
|
+
const pageAngle = pageQuarterTurns * 90;
|
|
318
|
+
const totalAngle = HANDLE_BASE_ANGLE[handle] + pageAngle + annotationRotation;
|
|
319
|
+
const normalized = (totalAngle % 360 + 360) % 360;
|
|
320
|
+
const sector = Math.round(normalized / 45) % 8;
|
|
321
|
+
return SECTOR_CURSORS[sector];
|
|
322
|
+
}
|
|
323
|
+
function edgeOffset(k, spacing, mode) {
|
|
324
|
+
const base = -k / 2;
|
|
325
|
+
if (mode === "center") return base;
|
|
326
|
+
return mode === "outside" ? base - spacing : base + spacing;
|
|
327
|
+
}
|
|
328
|
+
function describeResizeFromConfig(cfg, ui = {}) {
|
|
329
|
+
const {
|
|
330
|
+
handleSize = 8,
|
|
331
|
+
spacing = 1,
|
|
332
|
+
offsetMode = "outside",
|
|
333
|
+
includeSides = false,
|
|
334
|
+
zIndex = 3,
|
|
335
|
+
rotationAwareCursor = true
|
|
336
|
+
} = ui;
|
|
337
|
+
const pageQuarterTurns = (cfg.pageRotation ?? 0) % 4;
|
|
338
|
+
const annotationRot = cfg.annotationRotation ?? 0;
|
|
339
|
+
const off = (edge) => ({
|
|
340
|
+
[edge]: edgeOffset(handleSize, spacing, offsetMode) + "px"
|
|
341
|
+
});
|
|
342
|
+
const corners = [
|
|
343
|
+
["nw", { ...off("top"), ...off("left") }],
|
|
344
|
+
["ne", { ...off("top"), ...off("right") }],
|
|
345
|
+
["sw", { ...off("bottom"), ...off("left") }],
|
|
346
|
+
["se", { ...off("bottom"), ...off("right") }]
|
|
347
|
+
];
|
|
348
|
+
const sides = includeSides ? [
|
|
349
|
+
["n", { ...off("top"), left: `calc(50% - ${handleSize / 2}px)` }],
|
|
350
|
+
["s", { ...off("bottom"), left: `calc(50% - ${handleSize / 2}px)` }],
|
|
351
|
+
["w", { ...off("left"), top: `calc(50% - ${handleSize / 2}px)` }],
|
|
352
|
+
["e", { ...off("right"), top: `calc(50% - ${handleSize / 2}px)` }]
|
|
353
|
+
] : [];
|
|
354
|
+
const all = [...corners, ...sides];
|
|
355
|
+
return all.map(([handle, pos]) => ({
|
|
356
|
+
handle,
|
|
357
|
+
style: {
|
|
358
|
+
position: "absolute",
|
|
359
|
+
width: handleSize + "px",
|
|
360
|
+
height: handleSize + "px",
|
|
361
|
+
borderRadius: "50%",
|
|
362
|
+
zIndex,
|
|
363
|
+
cursor: rotationAwareCursor ? diagonalCursor(handle, pageQuarterTurns, annotationRot) : "default",
|
|
364
|
+
pointerEvents: "auto",
|
|
365
|
+
touchAction: "none",
|
|
366
|
+
...pos
|
|
367
|
+
},
|
|
368
|
+
attrs: { "data-epdf-handle": handle }
|
|
369
|
+
}));
|
|
370
|
+
}
|
|
371
|
+
function describeVerticesFromConfig(cfg, ui = {}, liveVertices) {
|
|
372
|
+
const { vertexSize = 12, zIndex = 4 } = ui;
|
|
373
|
+
const rect = cfg.element;
|
|
374
|
+
const scale = cfg.scale ?? 1;
|
|
375
|
+
const verts = liveVertices ?? cfg.vertices ?? [];
|
|
376
|
+
return verts.map((v, i) => {
|
|
377
|
+
const left = (v.x - rect.origin.x) * scale - vertexSize / 2;
|
|
378
|
+
const top = (v.y - rect.origin.y) * scale - vertexSize / 2;
|
|
379
|
+
return {
|
|
380
|
+
handle: "nw",
|
|
381
|
+
// not used; kept for type
|
|
382
|
+
style: {
|
|
383
|
+
position: "absolute",
|
|
384
|
+
left: left + "px",
|
|
385
|
+
top: top + "px",
|
|
386
|
+
width: vertexSize + "px",
|
|
387
|
+
height: vertexSize + "px",
|
|
388
|
+
borderRadius: "50%",
|
|
389
|
+
cursor: "pointer",
|
|
390
|
+
zIndex,
|
|
391
|
+
pointerEvents: "auto",
|
|
392
|
+
touchAction: "none"
|
|
393
|
+
},
|
|
394
|
+
attrs: { "data-epdf-vertex": i }
|
|
395
|
+
};
|
|
396
|
+
});
|
|
397
|
+
}
|
|
398
|
+
function describeRotationFromConfig(cfg, ui = {}, currentAngle = 0) {
|
|
399
|
+
const { handleSize = 16, zIndex = 5, showConnector = true, connectorWidth = 1 } = ui;
|
|
400
|
+
const scale = cfg.scale ?? 1;
|
|
401
|
+
const rect = cfg.element;
|
|
402
|
+
const orbitRect = cfg.rotationElement ?? rect;
|
|
403
|
+
const orbitCenter = cfg.rotationCenter ?? {
|
|
404
|
+
x: rect.origin.x + rect.size.width / 2,
|
|
405
|
+
y: rect.origin.y + rect.size.height / 2
|
|
406
|
+
};
|
|
407
|
+
orbitRect.size.width * scale;
|
|
408
|
+
orbitRect.size.height * scale;
|
|
409
|
+
const centerX = (orbitCenter.x - orbitRect.origin.x) * scale;
|
|
410
|
+
const centerY = (orbitCenter.y - orbitRect.origin.y) * scale;
|
|
411
|
+
const angleRad = currentAngle * Math.PI / 180;
|
|
412
|
+
const margin = ui.margin ?? ROTATION_HANDLE_MARGIN;
|
|
413
|
+
const radius = rect.size.height * scale / 2 + margin;
|
|
414
|
+
const handleCenterX = centerX + radius * Math.sin(angleRad);
|
|
415
|
+
const handleCenterY = centerY - radius * Math.cos(angleRad);
|
|
416
|
+
const handleLeft = handleCenterX - handleSize / 2;
|
|
417
|
+
const handleTop = handleCenterY - handleSize / 2;
|
|
418
|
+
return {
|
|
419
|
+
handleStyle: {
|
|
420
|
+
position: "absolute",
|
|
421
|
+
left: handleLeft + "px",
|
|
422
|
+
top: handleTop + "px",
|
|
423
|
+
width: handleSize + "px",
|
|
424
|
+
height: handleSize + "px",
|
|
425
|
+
borderRadius: "50%",
|
|
426
|
+
cursor: "grab",
|
|
427
|
+
zIndex,
|
|
428
|
+
pointerEvents: "auto",
|
|
429
|
+
touchAction: "none"
|
|
430
|
+
},
|
|
431
|
+
connectorStyle: showConnector ? {
|
|
432
|
+
position: "absolute",
|
|
433
|
+
left: centerX - connectorWidth / 2 + "px",
|
|
434
|
+
top: centerY - radius + "px",
|
|
435
|
+
width: connectorWidth + "px",
|
|
436
|
+
height: radius + "px",
|
|
437
|
+
transformOrigin: "center bottom",
|
|
438
|
+
transform: `rotate(${currentAngle}deg)`,
|
|
439
|
+
zIndex: zIndex - 1,
|
|
440
|
+
pointerEvents: "none"
|
|
441
|
+
} : {},
|
|
442
|
+
radius,
|
|
443
|
+
attrs: { "data-epdf-rotation-handle": true }
|
|
444
|
+
};
|
|
445
|
+
}
|
|
446
446
|
class DragResizeController {
|
|
447
447
|
constructor(config, onUpdate) {
|
|
448
448
|
this.config = config;
|
|
@@ -566,7 +566,7 @@ class DragResizeController {
|
|
|
566
566
|
// ---------------------------------------------------------------------------
|
|
567
567
|
// Gesture move
|
|
568
568
|
// ---------------------------------------------------------------------------
|
|
569
|
-
move(clientX, clientY, buttons) {
|
|
569
|
+
move(clientX, clientY, buttons, lockAspectRatio) {
|
|
570
570
|
if (this.state === "idle" || !this.startPoint) return;
|
|
571
571
|
if (buttons !== void 0 && buttons === 0) {
|
|
572
572
|
this.end();
|
|
@@ -584,7 +584,7 @@ class DragResizeController {
|
|
|
584
584
|
const delta = this.calculateLocalDelta(clientX, clientY);
|
|
585
585
|
const position = computeResizedRect(delta, this.activeHandle, {
|
|
586
586
|
startRect: this.startElement,
|
|
587
|
-
maintainAspectRatio: this.config.maintainAspectRatio,
|
|
587
|
+
maintainAspectRatio: this.config.maintainAspectRatio || !!lockAspectRatio,
|
|
588
588
|
annotationRotation: this.config.annotationRotation,
|
|
589
589
|
constraints: this.config.constraints
|
|
590
590
|
});
|
|
@@ -596,7 +596,7 @@ class DragResizeController {
|
|
|
596
596
|
changes: { rect: position },
|
|
597
597
|
metadata: {
|
|
598
598
|
handle: this.activeHandle,
|
|
599
|
-
maintainAspectRatio: this.config.maintainAspectRatio
|
|
599
|
+
maintainAspectRatio: this.config.maintainAspectRatio || !!lockAspectRatio
|
|
600
600
|
}
|
|
601
601
|
}
|
|
602
602
|
});
|
|
@@ -995,7 +995,7 @@ function useDragResize(options) {
|
|
|
995
995
|
};
|
|
996
996
|
const handleMove = (e) => {
|
|
997
997
|
var _a;
|
|
998
|
-
return (_a = controller.value) == null ? void 0 : _a.move(e.clientX, e.clientY, e.buttons);
|
|
998
|
+
return (_a = controller.value) == null ? void 0 : _a.move(e.clientX, e.clientY, e.buttons, e.shiftKey);
|
|
999
999
|
};
|
|
1000
1000
|
const handleEnd = (e) => {
|
|
1001
1001
|
var _a, _b, _c;
|