@embedpdf/utils 2.7.0 → 2.8.0

package/dist/react/index.js

@@ -17,7 +17,7 @@ function CounterRotate({ children, ...props }) {
       e.stopPropagation();
     };
     element.addEventListener("pointerdown", handlePointerDown, { capture: true });
-    element.addEventListener("touchstart", handleTouchStart, { capture: true });
+    element.addEventListener("touchstart", handleTouchStart, { capture: true, passive: true });
     return () => {
       element.removeEventListener("pointerdown", handlePointerDown, { capture: true });
       element.removeEventListener("touchstart", handleTouchStart, { capture: true });
@@ -49,165 +49,6 @@ function CounterRotate({ children, ...props }) {
     }
   }) });
 }
-const ROTATION_HANDLE_MARGIN = 35;
-const HANDLE_BASE_ANGLE = {
-  n: 0,
-  ne: 45,
-  e: 90,
-  se: 135,
-  s: 180,
-  sw: 225,
-  w: 270,
-  nw: 315
-};
-const SECTOR_CURSORS = [
-  "ns-resize",
-  // 0: north
-  "nesw-resize",
-  // 1: NE
-  "ew-resize",
-  // 2: east
-  "nwse-resize",
-  // 3: SE
-  "ns-resize",
-  // 4: south
-  "nesw-resize",
-  // 5: SW
-  "ew-resize",
-  // 6: west
-  "nwse-resize"
-  // 7: NW
-];
-function diagonalCursor(handle, pageQuarterTurns, annotationRotation = 0) {
-  const pageAngle = pageQuarterTurns * 90;
-  const totalAngle = HANDLE_BASE_ANGLE[handle] + pageAngle + annotationRotation;
-  const normalized = (totalAngle % 360 + 360) % 360;
-  const sector = Math.round(normalized / 45) % 8;
-  return SECTOR_CURSORS[sector];
-}
-function edgeOffset(k, spacing, mode) {
-  const base = -k / 2;
-  if (mode === "center") return base;
-  return mode === "outside" ? base - spacing : base + spacing;
-}
-function describeResizeFromConfig(cfg, ui = {}) {
-  const {
-    handleSize = 8,
-    spacing = 1,
-    offsetMode = "outside",
-    includeSides = false,
-    zIndex = 3,
-    rotationAwareCursor = true
-  } = ui;
-  const pageQuarterTurns = (cfg.pageRotation ?? 0) % 4;
-  const annotationRot = cfg.annotationRotation ?? 0;
-  const off = (edge) => ({
-    [edge]: edgeOffset(handleSize, spacing, offsetMode) + "px"
-  });
-  const corners = [
-    ["nw", { ...off("top"), ...off("left") }],
-    ["ne", { ...off("top"), ...off("right") }],
-    ["sw", { ...off("bottom"), ...off("left") }],
-    ["se", { ...off("bottom"), ...off("right") }]
-  ];
-  const sides = includeSides ? [
-    ["n", { ...off("top"), left: `calc(50% - ${handleSize / 2}px)` }],
-    ["s", { ...off("bottom"), left: `calc(50% - ${handleSize / 2}px)` }],
-    ["w", { ...off("left"), top: `calc(50% - ${handleSize / 2}px)` }],
-    ["e", { ...off("right"), top: `calc(50% - ${handleSize / 2}px)` }]
-  ] : [];
-  const all = [...corners, ...sides];
-  return all.map(([handle, pos]) => ({
-    handle,
-    style: {
-      position: "absolute",
-      width: handleSize + "px",
-      height: handleSize + "px",
-      borderRadius: "50%",
-      zIndex,
-      cursor: rotationAwareCursor ? diagonalCursor(handle, pageQuarterTurns, annotationRot) : "default",
-      pointerEvents: "auto",
-      touchAction: "none",
-      ...pos
-    },
-    attrs: { "data-epdf-handle": handle }
-  }));
-}
-function describeVerticesFromConfig(cfg, ui = {}, liveVertices) {
-  const { vertexSize = 12, zIndex = 4 } = ui;
-  const rect = cfg.element;
-  const scale = cfg.scale ?? 1;
-  const verts = liveVertices ?? cfg.vertices ?? [];
-  return verts.map((v, i) => {
-    const left = (v.x - rect.origin.x) * scale - vertexSize / 2;
-    const top = (v.y - rect.origin.y) * scale - vertexSize / 2;
-    return {
-      handle: "nw",
-      // not used; kept for type
-      style: {
-        position: "absolute",
-        left: left + "px",
-        top: top + "px",
-        width: vertexSize + "px",
-        height: vertexSize + "px",
-        borderRadius: "50%",
-        cursor: "pointer",
-        zIndex,
-        pointerEvents: "auto",
-        touchAction: "none"
-      },
-      attrs: { "data-epdf-vertex": i }
-    };
-  });
-}
-function describeRotationFromConfig(cfg, ui = {}, currentAngle = 0) {
-  const { handleSize = 16, zIndex = 5, showConnector = true, connectorWidth = 1 } = ui;
-  const scale = cfg.scale ?? 1;
-  const rect = cfg.element;
-  const orbitRect = cfg.rotationElement ?? rect;
-  const orbitCenter = cfg.rotationCenter ?? {
-    x: rect.origin.x + rect.size.width / 2,
-    y: rect.origin.y + rect.size.height / 2
-  };
-  orbitRect.size.width * scale;
-  orbitRect.size.height * scale;
-  const centerX = (orbitCenter.x - orbitRect.origin.x) * scale;
-  const centerY = (orbitCenter.y - orbitRect.origin.y) * scale;
-  const angleRad = currentAngle * Math.PI / 180;
-  const margin = ui.margin ?? ROTATION_HANDLE_MARGIN;
-  const radius = rect.size.height * scale / 2 + margin;
-  const handleCenterX = centerX + radius * Math.sin(angleRad);
-  const handleCenterY = centerY - radius * Math.cos(angleRad);
-  const handleLeft = handleCenterX - handleSize / 2;
-  const handleTop = handleCenterY - handleSize / 2;
-  return {
-    handleStyle: {
-      position: "absolute",
-      left: handleLeft + "px",
-      top: handleTop + "px",
-      width: handleSize + "px",
-      height: handleSize + "px",
-      borderRadius: "50%",
-      cursor: "grab",
-      zIndex,
-      pointerEvents: "auto",
-      touchAction: "none"
-    },
-    connectorStyle: showConnector ? {
-      position: "absolute",
-      left: centerX - connectorWidth / 2 + "px",
-      top: centerY - radius + "px",
-      width: connectorWidth + "px",
-      height: radius + "px",
-      transformOrigin: "center bottom",
-      transform: `rotate(${currentAngle}deg)`,
-      zIndex: zIndex - 1,
-      pointerEvents: "none"
-    } : {},
-    radius,
-    attrs: { "data-epdf-rotation-handle": true }
-  };
-}
 function getAnchor(handle) {
   return {
     x: handle.includes("e") ? "left" : handle.includes("w") ? "right" : "center",
@@ -448,6 +289,165 @@ function computeResizedRect(delta, handle, config) {
   }
   return computeResizeStep(delta, handle, config, true, false);
 }
+const ROTATION_HANDLE_MARGIN = 35;
+const HANDLE_BASE_ANGLE = {
+  n: 0,
+  ne: 45,
+  e: 90,
+  se: 135,
+  s: 180,
+  sw: 225,
+  w: 270,
+  nw: 315
+};
+const SECTOR_CURSORS = [
+  "ns-resize",
+  // 0: north
+  "nesw-resize",
+  // 1: NE
+  "ew-resize",
+  // 2: east
+  "nwse-resize",
+  // 3: SE
+  "ns-resize",
+  // 4: south
+  "nesw-resize",
+  // 5: SW
+  "ew-resize",
+  // 6: west
+  "nwse-resize"
+  // 7: NW
+];
+function diagonalCursor(handle, pageQuarterTurns, annotationRotation = 0) {
+  const pageAngle = pageQuarterTurns * 90;
+  const totalAngle = HANDLE_BASE_ANGLE[handle] + pageAngle + annotationRotation;
+  const normalized = (totalAngle % 360 + 360) % 360;
+  const sector = Math.round(normalized / 45) % 8;
+  return SECTOR_CURSORS[sector];
+}
+function edgeOffset(k, spacing, mode) {
+  const base = -k / 2;
+  if (mode === "center") return base;
+  return mode === "outside" ? base - spacing : base + spacing;
+}
+function describeResizeFromConfig(cfg, ui = {}) {
+  const {
+    handleSize = 8,
+    spacing = 1,
+    offsetMode = "outside",
+    includeSides = false,
+    zIndex = 3,
+    rotationAwareCursor = true
+  } = ui;
+  const pageQuarterTurns = (cfg.pageRotation ?? 0) % 4;
+  const annotationRot = cfg.annotationRotation ?? 0;
+  const off = (edge) => ({
+    [edge]: edgeOffset(handleSize, spacing, offsetMode) + "px"
+  });
+  const corners = [
+    ["nw", { ...off("top"), ...off("left") }],
+    ["ne", { ...off("top"), ...off("right") }],
+    ["sw", { ...off("bottom"), ...off("left") }],
+    ["se", { ...off("bottom"), ...off("right") }]
+  ];
+  const sides = includeSides ? [
+    ["n", { ...off("top"), left: `calc(50% - ${handleSize / 2}px)` }],
+    ["s", { ...off("bottom"), left: `calc(50% - ${handleSize / 2}px)` }],
+    ["w", { ...off("left"), top: `calc(50% - ${handleSize / 2}px)` }],
+    ["e", { ...off("right"), top: `calc(50% - ${handleSize / 2}px)` }]
+  ] : [];
+  const all = [...corners, ...sides];
+  return all.map(([handle, pos]) => ({
+    handle,
+    style: {
+      position: "absolute",
+      width: handleSize + "px",
+      height: handleSize + "px",
+      borderRadius: "50%",
+      zIndex,
+      cursor: rotationAwareCursor ? diagonalCursor(handle, pageQuarterTurns, annotationRot) : "default",
+      pointerEvents: "auto",
+      touchAction: "none",
+      ...pos
+    },
+    attrs: { "data-epdf-handle": handle }
+  }));
+}
+function describeVerticesFromConfig(cfg, ui = {}, liveVertices) {
+  const { vertexSize = 12, zIndex = 4 } = ui;
+  const rect = cfg.element;
+  const scale = cfg.scale ?? 1;
+  const verts = liveVertices ?? cfg.vertices ?? [];
+  return verts.map((v, i) => {
+    const left = (v.x - rect.origin.x) * scale - vertexSize / 2;
+    const top = (v.y - rect.origin.y) * scale - vertexSize / 2;
+    return {
+      handle: "nw",
+      // not used; kept for type
+      style: {
+        position: "absolute",
+        left: left + "px",
+        top: top + "px",
+        width: vertexSize + "px",
+        height: vertexSize + "px",
+        borderRadius: "50%",
+        cursor: "pointer",
+        zIndex,
+        pointerEvents: "auto",
+        touchAction: "none"
+      },
+      attrs: { "data-epdf-vertex": i }
+    };
+  });
+}
+function describeRotationFromConfig(cfg, ui = {}, currentAngle = 0) {
+  const { handleSize = 16, zIndex = 5, showConnector = true, connectorWidth = 1 } = ui;
+  const scale = cfg.scale ?? 1;
+  const rect = cfg.element;
+  const orbitRect = cfg.rotationElement ?? rect;
+  const orbitCenter = cfg.rotationCenter ?? {
+    x: rect.origin.x + rect.size.width / 2,
+    y: rect.origin.y + rect.size.height / 2
+  };
+  orbitRect.size.width * scale;
+  orbitRect.size.height * scale;
+  const centerX = (orbitCenter.x - orbitRect.origin.x) * scale;
+  const centerY = (orbitCenter.y - orbitRect.origin.y) * scale;
+  const angleRad = currentAngle * Math.PI / 180;
+  const margin = ui.margin ?? ROTATION_HANDLE_MARGIN;
+  const radius = rect.size.height * scale / 2 + margin;
+  const handleCenterX = centerX + radius * Math.sin(angleRad);
+  const handleCenterY = centerY - radius * Math.cos(angleRad);
+  const handleLeft = handleCenterX - handleSize / 2;
+  const handleTop = handleCenterY - handleSize / 2;
+  return {
+    handleStyle: {
+      position: "absolute",
+      left: handleLeft + "px",
+      top: handleTop + "px",
+      width: handleSize + "px",
+      height: handleSize + "px",
+      borderRadius: "50%",
+      cursor: "grab",
+      zIndex,
+      pointerEvents: "auto",
+      touchAction: "none"
+    },
+    connectorStyle: showConnector ? {
+      position: "absolute",
+      left: centerX - connectorWidth / 2 + "px",
+      top: centerY - radius + "px",
+      width: connectorWidth + "px",
+      height: radius + "px",
+      transformOrigin: "center bottom",
+      transform: `rotate(${currentAngle}deg)`,
+      zIndex: zIndex - 1,
+      pointerEvents: "none"
+    } : {},
+    radius,
+    attrs: { "data-epdf-rotation-handle": true }
+  };
+}
 class DragResizeController {
   constructor(config, onUpdate) {
     this.config = config;
@@ -571,7 +571,7 @@ class DragResizeController {
   // ---------------------------------------------------------------------------
   // Gesture move
   // ---------------------------------------------------------------------------
-  move(clientX, clientY, buttons) {
+  move(clientX, clientY, buttons, lockAspectRatio) {
     if (this.state === "idle" || !this.startPoint) return;
     if (buttons !== void 0 && buttons === 0) {
       this.end();
@@ -589,7 +589,7 @@ class DragResizeController {
       const delta = this.calculateLocalDelta(clientX, clientY);
       const position = computeResizedRect(delta, this.activeHandle, {
         startRect: this.startElement,
-        maintainAspectRatio: this.config.maintainAspectRatio,
+        maintainAspectRatio: this.config.maintainAspectRatio || !!lockAspectRatio,
         annotationRotation: this.config.annotationRotation,
         constraints: this.config.constraints
       });
@@ -601,7 +601,7 @@ class DragResizeController {
           changes: { rect: position },
           metadata: {
             handle: this.activeHandle,
-            maintainAspectRatio: this.config.maintainAspectRatio
+            maintainAspectRatio: this.config.maintainAspectRatio || !!lockAspectRatio
           }
         }
       });
@@ -1023,7 +1023,7 @@ function useDragResize(options) {
       e.stopPropagation();
       const activePointerId = activePointerIdRef.current;
       if (activePointerId !== null && e.pointerId !== activePointerId) return;
-      (_a = controllerRef.current) == null ? void 0 : _a.move(e.clientX, e.clientY, e.buttons);
+      (_a = controllerRef.current) == null ? void 0 : _a.move(e.clientX, e.clientY, e.buttons, e.shiftKey);
       if (activePointerIdRef.current === e.pointerId && e.buttons === 0) {
         endPointerSession(e.pointerId);
       }