@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/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;