@embedpdf/plugin-annotation 1.0.14 → 1.0.15

package/dist/react/index.js

@@ -1,7 +1,7 @@
 import { usePlugin, useCapability } from "@embedpdf/core/react";
-import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { restoreOffset, rectEquals, PdfAnnotationBorderStyle, PdfAnnotationSubtype, expandRect, rectFromPoints, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
 import { Fragment, useState, useRef, useEffect, useLayoutEffect, useMemo, useCallback } from "react";
@@ -150,6 +150,7 @@ function useDragResize({
   isResizable,
   computePatch,
   computeVertices,
+  lockAspectRatio = false,
   currentRect,
   setCurrentRect,
   setCurrentVertices,
@@ -184,6 +185,23 @@ function useDragResize({
         oy += dy;
         h -= dy;
       }
+      if (lockAspectRatio && startRect.current) {
+        const ratio = startRect.current.size.width / startRect.current.size.height;
+        const anchorRight = ox + w;
+        const anchorBottom = oy + h;
+        const horizontalPrimary = dir.current.includes("left") || dir.current.includes("right");
+        if (horizontalPrimary) {
+          h = w / ratio;
+        } else {
+          w = h * ratio;
+        }
+        if (dir.current.includes("left")) {
+          ox = anchorRight - w;
+        }
+        if (dir.current.includes("top")) {
+          oy = anchorBottom - h;
+        }
+      }
     }
     if (w < 1 || h < 1) return currentRect;
     w = clamp(w, 1, pageW);
@@ -220,8 +238,14 @@ function useDragResize({
     setCurrentRect(patch.rect ?? nextRect);
     setPreviewObject(patch);
   };
-  const onPointerUp = () => {
+  const onPointerUp = (e) => {
     if (drag.current === "idle") return;
+    if ((e == null ? void 0 : e.currentTarget) && e.pointerId !== void 0) {
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
     const usedDir = dir.current || "bottom-right";
     drag.current = "idle";
     let patch = { rect: currentRect };
@@ -257,7 +281,9 @@ function useDragResize({
     rootHandlers: {
       onPointerDown,
       onPointerMove,
-      onPointerUp
+      onPointerUp,
+      onPointerCancel: () => onPointerUp(),
+      onLostPointerCapture: () => onPointerUp()
     },
     startResize
   };
@@ -335,6 +361,7 @@ function AnnotationContainer({
   isSelected = false,
   isDraggable = true,
   isResizable = true,
+  lockAspectRatio = false,
   computeVertices,
   computePatch,
   selectionMenu,
@@ -356,6 +383,7 @@ function AnnotationContainer({
     isSelected,
     isDraggable,
     isResizable,
+    lockAspectRatio,
     computePatch,
     computeVertices,
     currentRect,
@@ -1269,6 +1297,86 @@ function FreeText({
     }
   );
 }
+function RenderAnnotation({
+  pageIndex,
+  annotation,
+  scaleFactor = 1,
+  style,
+  ...props
+}) {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [imageUrl, setImageUrl] = useState(null);
+  const urlRef = useRef(null);
+  const { width, height } = annotation.rect.size;
+  useEffect(() => {
+    if (annotationProvides) {
+      const task = annotationProvides.renderAnnotation({
+        pageIndex,
+        annotation,
+        scaleFactor,
+        dpr: window.devicePixelRatio
+      });
+      task.wait((blob) => {
+        const url = URL.createObjectURL(blob);
+        setImageUrl(url);
+        urlRef.current = url;
+      }, ignore);
+      return () => {
+        if (urlRef.current) {
+          URL.revokeObjectURL(urlRef.current);
+          urlRef.current = null;
+        } else {
+          task.abort({
+            code: PdfErrorCode.Cancelled,
+            message: "canceled render task"
+          });
+        }
+      };
+    }
+  }, [pageIndex, scaleFactor, annotationProvides, annotation.id, width, height]);
+  const handleImageLoad = () => {
+    if (urlRef.current) {
+      URL.revokeObjectURL(urlRef.current);
+      urlRef.current = null;
+    }
+  };
+  return /* @__PURE__ */ jsx(Fragment, { children: imageUrl && /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: imageUrl,
+      onLoad: handleImageLoad,
+      ...props,
+      style: {
+        width: "100%",
+        height: "100%",
+        ...style || {}
+      }
+    }
+  ) });
+}
+function Stamp({ isSelected, annotation, pageIndex, scale, onClick }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        zIndex: 2,
+        pointerEvents: isSelected ? "none" : "auto"
+      },
+      onPointerDown: onClick,
+      children: annotation.pdfId !== void 0 && /* @__PURE__ */ jsx(
+        RenderAnnotation,
+        {
+          pageIndex,
+          annotation: { ...annotation.object, id: annotation.pdfId },
+          scaleFactor: scale
+        }
+      )
+    }
+  );
+}
 function Annotations(annotationsProps) {
   const { pageIndex, scale, selectionMenu } = annotationsProps;
   const { provides: annotationProvides } = useAnnotationCapability();
@@ -1664,6 +1772,34 @@ function Annotations(annotationsProps) {
         annotation.localId
       );
     }
+    if (isStamp(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: true,
+          selectionMenu,
+          lockAspectRatio: true,
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (_object) => /* @__PURE__ */ jsx(
+            Stamp,
+            {
+              isSelected,
+              annotation,
+              pageIndex,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        annotation.localId
+      );
+    }
     return null;
   }) });
 }
@@ -2787,6 +2923,92 @@ const FreeTextPaint = ({
     }
   );
 };
+const StampPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const inputRef = useRef(null);
+  const canvasRef = useRef(null);
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    return annotationProvides.onActiveToolChange(setActiveTool);
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.STAMP) return null;
+  const { register } = usePointerHandlers({ modeId: "stamp", pageIndex });
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const [start, setStart] = useState(null);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setStart({ x, y });
+        (_a = inputRef.current) == null ? void 0 : _a.click();
+      }
+    }),
+    [pageWidthPDF, pageHeightPDF]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  const onChange = async (e) => {
+    var _a;
+    if (!annotationProvides || !start) return;
+    const file = (_a = e.currentTarget.files) == null ? void 0 : _a[0];
+    if (!file) return;
+    const img = await new Promise((res, rej) => {
+      const i = new Image();
+      i.onload = () => res(i);
+      i.onerror = rej;
+      i.src = URL.createObjectURL(file);
+    });
+    const imgW = img.naturalWidth;
+    const imgH = img.naturalHeight;
+    const maxW = pageWidthPDF;
+    const maxH = pageHeightPDF;
+    const scaleFactor = Math.min(1, maxW / imgW, maxH / imgH);
+    const pdfW = imgW * scaleFactor;
+    const pdfH = imgH * scaleFactor;
+    const posX = clamp(start.x, 0, maxW - pdfW);
+    const posY = clamp(start.y, 0, maxH - pdfH);
+    const rect = {
+      origin: { x: posX, y: posY },
+      size: { width: pdfW, height: pdfH }
+    };
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = pdfW;
+    canvas.height = pdfH;
+    const ctx = canvas.getContext("2d");
+    ctx.drawImage(img, 0, 0, pdfW, pdfH);
+    const imageData = ctx.getImageData(0, 0, pdfW, pdfH);
+    const anno = {
+      type: PdfAnnotationSubtype.STAMP,
+      flags: ["print"],
+      pageIndex,
+      id: Date.now() + Math.random(),
+      rect
+    };
+    annotationProvides.createAnnotation(pageIndex, anno, { imageData });
+    annotationProvides.setActiveVariant(null);
+    annotationProvides.selectAnnotation(pageIndex, anno.id);
+    setStart(null);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("canvas", { style: { display: "none" }, ref: canvasRef }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: "image/png,image/jpeg",
+        style: { display: "none" },
+        onChange
+      }
+    )
+  ] });
+};
 function AnnotationLayer({
   pageIndex,
   scale,
@@ -2871,6 +3093,15 @@ function AnnotationLayer({
             pageWidth,
             pageHeight
           }
+        ),
+        /* @__PURE__ */ jsx(
+          StampPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
         )
       ]
     }