@embedpdf/utils 1.1.1 → 1.2.0

package/dist/preact/index.js

@@ -1,7 +1,8 @@
 import { jsx } from "preact/jsx-runtime";
 import { getCounterRotation } from "@embedpdf/utils";
 import { Fragment } from "preact";
-import "preact/hooks";
+import { useRef, useEffect, useCallback, useMemo } from "preact/hooks";
+const dblClickProp = "onDblClick";
 function CounterRotate({ children, ...props }) {
   const { rect, rotation } = props;
   const { matrix, width, height } = getCounterRotation(rect, rotation);
@@ -30,7 +31,687 @@ function CounterRotate({ children, ...props }) {
     }
   }) });
 }
+class DragResizeController {
+  constructor(config, onUpdate) {
+    this.config = config;
+    this.onUpdate = onUpdate;
+    this.state = "idle";
+    this.startPoint = null;
+    this.startElement = null;
+    this.activeHandle = null;
+    this.currentPosition = null;
+    this.activeVertexIndex = null;
+    this.startVertices = [];
+    this.currentVertices = [];
+    this.currentVertices = config.vertices || [];
+  }
+  updateConfig(config) {
+    this.config = { ...this.config, ...config };
+    this.currentVertices = config.vertices || [];
+  }
+  startDrag(clientX, clientY) {
+    this.state = "dragging";
+    this.startPoint = { x: clientX, y: clientY };
+    this.startElement = { ...this.config.element };
+    this.currentPosition = { ...this.config.element };
+    this.onUpdate({
+      state: "start",
+      transformData: {
+        type: "move",
+        changes: {
+          rect: this.startElement
+        }
+      }
+    });
+  }
+  startResize(handle, clientX, clientY) {
+    this.state = "resizing";
+    this.activeHandle = handle;
+    this.startPoint = { x: clientX, y: clientY };
+    this.startElement = { ...this.config.element };
+    this.currentPosition = { ...this.config.element };
+    this.onUpdate({
+      state: "start",
+      transformData: {
+        type: "resize",
+        changes: {
+          rect: this.startElement
+        },
+        metadata: {
+          handle: this.activeHandle,
+          maintainAspectRatio: this.config.maintainAspectRatio
+        }
+      }
+    });
+  }
+  startVertexEdit(vertexIndex, clientX, clientY) {
+    this.currentVertices = [...this.config.vertices ?? this.currentVertices];
+    if (vertexIndex < 0 || vertexIndex >= this.currentVertices.length) return;
+    this.state = "vertex-editing";
+    this.activeVertexIndex = vertexIndex;
+    this.startPoint = { x: clientX, y: clientY };
+    this.startVertices = [...this.currentVertices];
+    this.onUpdate({
+      state: "start",
+      transformData: {
+        type: "vertex-edit",
+        changes: {
+          vertices: this.startVertices
+        },
+        metadata: {
+          vertexIndex
+        }
+      }
+    });
+  }
+  move(clientX, clientY) {
+    if (this.state === "idle" || !this.startPoint) return;
+    if (this.state === "dragging" && this.startElement) {
+      const delta = this.calculateDelta(clientX, clientY);
+      const position = this.calculateDragPosition(delta);
+      this.currentPosition = position;
+      this.onUpdate({
+        state: "move",
+        transformData: {
+          type: "move",
+          changes: {
+            rect: position
+          }
+        }
+      });
+    } else if (this.state === "resizing" && this.activeHandle && this.startElement) {
+      const delta = this.calculateDelta(clientX, clientY);
+      const position = this.calculateResizePosition(delta, this.activeHandle);
+      this.currentPosition = position;
+      this.onUpdate({
+        state: "move",
+        transformData: {
+          type: "resize",
+          changes: {
+            rect: position
+          },
+          metadata: {
+            handle: this.activeHandle,
+            maintainAspectRatio: this.config.maintainAspectRatio
+          }
+        }
+      });
+    } else if (this.state === "vertex-editing" && this.activeVertexIndex !== null) {
+      const vertices = this.calculateVertexPosition(clientX, clientY);
+      this.currentVertices = vertices;
+      this.onUpdate({
+        state: "move",
+        transformData: {
+          type: "vertex-edit",
+          changes: {
+            vertices
+          },
+          metadata: {
+            vertexIndex: this.activeVertexIndex
+          }
+        }
+      });
+    }
+  }
+  end() {
+    if (this.state === "idle") return;
+    const wasState = this.state;
+    const handle = this.activeHandle;
+    const vertexIndex = this.activeVertexIndex;
+    if (wasState === "vertex-editing") {
+      this.onUpdate({
+        state: "end",
+        transformData: {
+          type: "vertex-edit",
+          changes: {
+            vertices: this.currentVertices
+          },
+          metadata: {
+            vertexIndex: vertexIndex || void 0
+          }
+        }
+      });
+    } else {
+      const finalPosition = this.getCurrentPosition();
+      this.onUpdate({
+        state: "end",
+        transformData: {
+          type: wasState === "dragging" ? "move" : "resize",
+          changes: {
+            rect: finalPosition
+          },
+          metadata: wasState === "dragging" ? void 0 : {
+            handle: handle || void 0,
+            maintainAspectRatio: this.config.maintainAspectRatio
+          }
+        }
+      });
+    }
+    this.reset();
+  }
+  cancel() {
+    if (this.state === "idle") return;
+    if (this.state === "vertex-editing") {
+      this.onUpdate({
+        state: "end",
+        transformData: {
+          type: "vertex-edit",
+          changes: {
+            vertices: this.startVertices
+          },
+          metadata: {
+            vertexIndex: this.activeVertexIndex || void 0
+          }
+        }
+      });
+    } else if (this.startElement) {
+      this.onUpdate({
+        state: "end",
+        transformData: {
+          type: this.state === "dragging" ? "move" : "resize",
+          changes: {
+            rect: this.startElement
+          },
+          metadata: this.state === "dragging" ? void 0 : {
+            handle: this.activeHandle || void 0,
+            maintainAspectRatio: this.config.maintainAspectRatio
+          }
+        }
+      });
+    }
+    this.reset();
+  }
+  reset() {
+    this.state = "idle";
+    this.startPoint = null;
+    this.startElement = null;
+    this.activeHandle = null;
+    this.currentPosition = null;
+    this.activeVertexIndex = null;
+    this.startVertices = [];
+  }
+  getCurrentPosition() {
+    return this.currentPosition || this.config.element;
+  }
+  calculateDelta(clientX, clientY) {
+    if (!this.startPoint) return { x: 0, y: 0 };
+    const rawDelta = {
+      x: clientX - this.startPoint.x,
+      y: clientY - this.startPoint.y
+    };
+    return this.transformDelta(rawDelta);
+  }
+  transformDelta(delta) {
+    const { pageRotation = 0, scale = 1 } = this.config;
+    const rad = pageRotation * Math.PI / 2;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    const scaledX = delta.x / scale;
+    const scaledY = delta.y / scale;
+    return {
+      x: cos * scaledX + sin * scaledY,
+      y: -sin * scaledX + cos * scaledY
+    };
+  }
+  clampPoint(p) {
+    var _a;
+    const bbox = (_a = this.config.constraints) == null ? void 0 : _a.boundingBox;
+    if (!bbox) return p;
+    return {
+      x: Math.max(0, Math.min(p.x, bbox.width)),
+      y: Math.max(0, Math.min(p.y, bbox.height))
+    };
+  }
+  calculateVertexPosition(clientX, clientY) {
+    if (this.activeVertexIndex === null) return this.startVertices;
+    const delta = this.calculateDelta(clientX, clientY);
+    const newVertices = [...this.startVertices];
+    const currentVertex = newVertices[this.activeVertexIndex];
+    const moved = {
+      x: currentVertex.x + delta.x,
+      y: currentVertex.y + delta.y
+    };
+    newVertices[this.activeVertexIndex] = this.clampPoint(moved);
+    return newVertices;
+  }
+  calculateDragPosition(delta) {
+    if (!this.startElement) return this.config.element;
+    const position = {
+      origin: {
+        x: this.startElement.origin.x + delta.x,
+        y: this.startElement.origin.y + delta.y
+      },
+      size: {
+        width: this.startElement.size.width,
+        height: this.startElement.size.height
+      }
+    };
+    return this.applyConstraints(position);
+  }
+  calculateResizePosition(delta, handle) {
+    var _a;
+    if (!this.startElement) return this.config.element;
+    let {
+      origin: { x, y },
+      size: { width, height }
+    } = this.startElement;
+    switch (handle) {
+      case "se":
+        width += delta.x;
+        height += delta.y;
+        break;
+      case "sw":
+        x += delta.x;
+        width -= delta.x;
+        height += delta.y;
+        break;
+      case "ne":
+        width += delta.x;
+        y += delta.y;
+        height -= delta.y;
+        break;
+      case "nw":
+        x += delta.x;
+        width -= delta.x;
+        y += delta.y;
+        height -= delta.y;
+        break;
+      case "n":
+        y += delta.y;
+        height -= delta.y;
+        break;
+      case "s":
+        height += delta.y;
+        break;
+      case "e":
+        width += delta.x;
+        break;
+      case "w":
+        x += delta.x;
+        width -= delta.x;
+        break;
+    }
+    if (this.config.maintainAspectRatio && this.startElement) {
+      const aspectRatio = this.startElement.size.width / this.startElement.size.height;
+      if (["n", "s", "e", "w"].includes(handle)) {
+        if (handle === "n" || handle === "s") {
+          const newWidth = height * aspectRatio;
+          const widthDiff = newWidth - width;
+          width = newWidth;
+          x -= widthDiff / 2;
+        } else {
+          const newHeight = width / aspectRatio;
+          const heightDiff = newHeight - height;
+          height = newHeight;
+          if (handle === "w") {
+            x = this.startElement.origin.x + this.startElement.size.width - width;
+          }
+          y -= heightDiff / 2;
+        }
+      } else {
+        const widthChange = Math.abs(width - this.startElement.size.width);
+        const heightChange = Math.abs(height - this.startElement.size.height);
+        if (widthChange > heightChange) {
+          height = width / aspectRatio;
+        } else {
+          width = height * aspectRatio;
+        }
+        if (handle.includes("w")) {
+          x = this.startElement.origin.x + this.startElement.size.width - width;
+        }
+        if (handle.includes("n")) {
+          y = this.startElement.origin.y + this.startElement.size.height - height;
+        }
+      }
+    }
+    const bbox = (_a = this.config.constraints) == null ? void 0 : _a.boundingBox;
+    if (bbox) {
+      switch (handle) {
+        case "e":
+          width = Math.min(width, bbox.width - x);
+          break;
+        case "s":
+          height = Math.min(height, bbox.height - y);
+          break;
+        case "se":
+          width = Math.min(width, bbox.width - x);
+          height = Math.min(height, bbox.height - y);
+          break;
+        case "w":
+          if (x < 0) {
+            width += x;
+            x = 0;
+          }
+          break;
+        case "n":
+          if (y < 0) {
+            height += y;
+            y = 0;
+          }
+          break;
+        case "sw":
+          if (x < 0) {
+            width += x;
+            x = 0;
+          }
+          height = Math.min(height, bbox.height - y);
+          break;
+        case "nw":
+          if (x < 0) {
+            width += x;
+            x = 0;
+          }
+          if (y < 0) {
+            height += y;
+            y = 0;
+          }
+          break;
+        case "ne":
+          width = Math.min(width, bbox.width - x);
+          if (y < 0) {
+            height += y;
+            y = 0;
+          }
+          break;
+      }
+    }
+    return this.applyConstraints({ origin: { x, y }, size: { width, height } });
+  }
+  applyConstraints(position) {
+    const { constraints } = this.config;
+    if (!constraints) return position;
+    let {
+      origin: { x, y },
+      size: { width, height }
+    } = position;
+    width = Math.max(constraints.minWidth || 1, width);
+    height = Math.max(constraints.minHeight || 1, height);
+    if (constraints.maxWidth) width = Math.min(constraints.maxWidth, width);
+    if (constraints.maxHeight) height = Math.min(constraints.maxHeight, height);
+    if (constraints.boundingBox) {
+      x = Math.max(0, Math.min(x, constraints.boundingBox.width - width));
+      y = Math.max(0, Math.min(y, constraints.boundingBox.height - height));
+    }
+    return { origin: { x, y }, size: { width, height } };
+  }
+}
+function diagonalCursor(handle, rot) {
+  const diag0 = {
+    nw: "nwse-resize",
+    ne: "nesw-resize",
+    sw: "nesw-resize",
+    se: "nwse-resize"
+  };
+  if (handle === "n" || handle === "s") return "ns-resize";
+  if (handle === "e" || handle === "w") return "ew-resize";
+  if (rot % 2 === 0) return diag0[handle];
+  return { nw: "nesw-resize", ne: "nwse-resize", sw: "nwse-resize", se: "nesw-resize" }[handle];
+}
+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 rotation = (cfg.pageRotation ?? 0) % 4;
+  const off = (edge) => ({
+    [edge]: edgeOffset(handleSize, spacing, offsetMode)
+  });
+  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,
+      height: handleSize,
+      borderRadius: "50%",
+      zIndex,
+      cursor: rotationAwareCursor ? diagonalCursor(handle, rotation) : "default",
+      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,
+        top,
+        width: vertexSize,
+        height: vertexSize,
+        borderRadius: "50%",
+        cursor: "pointer",
+        zIndex,
+        touchAction: "none"
+      },
+      attrs: { "data-epdf-vertex": i }
+    };
+  });
+}
+function useDragResize(options) {
+  const { onUpdate, enabled = true, ...config } = options;
+  const controllerRef = useRef(null);
+  const onUpdateRef = useRef(onUpdate);
+  useEffect(() => {
+    onUpdateRef.current = onUpdate;
+  }, [onUpdate]);
+  useEffect(() => {
+    if (!controllerRef.current) {
+      controllerRef.current = new DragResizeController(
+        config,
+        (event) => {
+          var _a;
+          return (_a = onUpdateRef.current) == null ? void 0 : _a.call(onUpdateRef, event);
+        }
+      );
+    } else {
+      controllerRef.current.updateConfig(config);
+    }
+  }, [
+    config.element,
+    config.constraints,
+    config.maintainAspectRatio,
+    config.pageRotation,
+    config.scale,
+    config.vertices
+  ]);
+  const handleDragStart = useCallback(
+    (e) => {
+      var _a;
+      if (!enabled) return;
+      e.preventDefault();
+      e.stopPropagation();
+      (_a = controllerRef.current) == null ? void 0 : _a.startDrag(e.clientX, e.clientY);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [enabled]
+  );
+  const handleMove = useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = controllerRef.current) == null ? void 0 : _a.move(e.clientX, e.clientY);
+  }, []);
+  const handleEnd = useCallback((e) => {
+    var _a, _b, _c;
+    e.preventDefault();
+    e.stopPropagation();
+    (_a = controllerRef.current) == null ? void 0 : _a.end();
+    (_c = (_b = e.currentTarget).releasePointerCapture) == null ? void 0 : _c.call(_b, e.pointerId);
+  }, []);
+  const createResizeHandler = useCallback(
+    (handle) => ({
+      onPointerDown: (e) => {
+        var _a;
+        if (!enabled) return;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = controllerRef.current) == null ? void 0 : _a.startResize(handle, e.clientX, e.clientY);
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: handleMove,
+      onPointerUp: handleEnd,
+      onPointerCancel: handleEnd
+    }),
+    [enabled, handleMove, handleEnd]
+  );
+  const createVertexHandler = useCallback(
+    (vertexIndex) => ({
+      onPointerDown: (e) => {
+        var _a;
+        if (!enabled) return;
+        e.preventDefault();
+        e.stopPropagation();
+        (_a = controllerRef.current) == null ? void 0 : _a.startVertexEdit(vertexIndex, e.clientX, e.clientY);
+        e.currentTarget.setPointerCapture(e.pointerId);
+      },
+      onPointerMove: handleMove,
+      onPointerUp: handleEnd,
+      onPointerCancel: handleEnd
+    }),
+    [enabled, handleMove, handleEnd]
+  );
+  return {
+    dragProps: enabled ? {
+      onPointerDown: handleDragStart,
+      onPointerMove: handleMove,
+      onPointerUp: handleEnd,
+      onPointerCancel: handleEnd
+    } : {},
+    createResizeProps: createResizeHandler,
+    createVertexProps: createVertexHandler
+  };
+}
+function useInteractionHandles(opts) {
+  const {
+    controller,
+    resizeUI,
+    vertexUI,
+    includeVertices = false,
+    handleAttrs,
+    vertexAttrs
+  } = opts;
+  const { dragProps, createResizeProps, createVertexProps } = useDragResize(controller);
+  const resize = useMemo(() => {
+    const desc = describeResizeFromConfig(controller, resizeUI);
+    return desc.map((d) => {
+      var _a;
+      return {
+        key: (_a = d.attrs) == null ? void 0 : _a["data-epdf-handle"],
+        style: d.style,
+        ...createResizeProps(d.handle),
+        ...d.attrs ?? {},
+        ...(handleAttrs == null ? void 0 : handleAttrs(d.handle)) ?? {}
+      };
+    });
+  }, [
+    controller.element.origin.x,
+    controller.element.origin.y,
+    controller.element.size.width,
+    controller.element.size.height,
+    controller.scale,
+    controller.pageRotation,
+    controller.maintainAspectRatio,
+    resizeUI == null ? void 0 : resizeUI.handleSize,
+    resizeUI == null ? void 0 : resizeUI.spacing,
+    resizeUI == null ? void 0 : resizeUI.offsetMode,
+    resizeUI == null ? void 0 : resizeUI.includeSides,
+    resizeUI == null ? void 0 : resizeUI.zIndex,
+    resizeUI == null ? void 0 : resizeUI.rotationAwareCursor,
+    createResizeProps,
+    handleAttrs
+  ]);
+  const vertices = useMemo(() => {
+    if (!includeVertices) return [];
+    const desc = describeVerticesFromConfig(controller, vertexUI, controller.vertices);
+    return desc.map((d, i) => ({
+      key: i,
+      style: d.style,
+      ...createVertexProps(i),
+      ...d.attrs ?? {},
+      ...(vertexAttrs == null ? void 0 : vertexAttrs(i)) ?? {}
+    }));
+  }, [
+    includeVertices,
+    controller.element.origin.x,
+    controller.element.origin.y,
+    controller.element.size.width,
+    controller.element.size.height,
+    controller.scale,
+    controller.vertices,
+    // identity/content drives recalculation
+    vertexUI == null ? void 0 : vertexUI.vertexSize,
+    vertexUI == null ? void 0 : vertexUI.zIndex,
+    createVertexProps,
+    vertexAttrs
+  ]);
+  return { dragProps, resize, vertices };
+}
+function useDoublePressProps(onDouble, { delay = 300, tolerancePx = 18 } = {}) {
+  const last = useRef({ t: 0, x: 0, y: 0 });
+  const handlePointerUp = useCallback(
+    (e) => {
+      if (!onDouble) return;
+      if (e.pointerType === "mouse" || e.isPrimary === false) return;
+      const now = performance.now();
+      const x = e.clientX;
+      const y = e.clientY;
+      const withinTime = now - last.current.t <= delay;
+      const dx = x - last.current.x;
+      const dy = y - last.current.y;
+      const withinDist = dx * dx + dy * dy <= tolerancePx * tolerancePx;
+      if (withinTime && withinDist) onDouble == null ? void 0 : onDouble(e);
+      last.current = { t: now, x, y };
+    },
+    [onDouble, delay, tolerancePx]
+  );
+  const handleDouble = useCallback(
+    (e) => {
+      onDouble == null ? void 0 : onDouble(e);
+    },
+    [onDouble]
+  );
+  return onDouble ? {
+    // Computed property uses the framework’s name ('onDoubleClick' or 'onDblClick')
+    [dblClickProp]: handleDouble,
+    onPointerUpCapture: handlePointerUp
+  } : {};
+}
 export {
-  CounterRotate
+  CounterRotate,
+  useDoublePressProps,
+  useDragResize,
+  useInteractionHandles
 };
 //# sourceMappingURL=index.js.map