@embedpdf/plugin-annotation 1.0.14 → 1.0.16

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";
@@ -53,7 +53,8 @@ function CounterRotate({ children, ...props }) {
   };
   const menuWrapperProps = {
     style: menuWrapperStyle,
-    onPointerDown: (e) => e.stopPropagation()
+    onPointerDown: (e) => e.stopPropagation(),
+    onTouchStart: (e) => e.stopPropagation()
   };
   return /* @__PURE__ */ jsx(Fragment, { children: children({
     menuWrapperProps,
@@ -150,6 +151,7 @@ function useDragResize({
   isResizable,
   computePatch,
   computeVertices,
+  lockAspectRatio = false,
   currentRect,
   setCurrentRect,
   setCurrentVertices,
@@ -184,6 +186,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);
@@ -192,20 +211,16 @@ function useDragResize({
     oy = clamp(oy, 0, pageH - h);
     return { origin: { x: ox, y: oy }, size: { width: w, height: h } };
   };
-  const onPointerDown = (e) => {
-    if (!isSelected || !isDraggable) return;
-    e.stopPropagation();
-    e.preventDefault();
-    drag.current = "dragging";
-    startPos.current = { x: e.clientX, y: e.clientY };
+  const beginDrag = (kind, clientX, clientY) => {
+    drag.current = kind;
+    startPos.current = { x: clientX, y: clientY };
     startRect.current = currentRect;
-    e.currentTarget.setPointerCapture(e.pointerId);
   };
-  const onPointerMove = (e) => {
+  const handleMove = (clientX, clientY) => {
     if (drag.current === "idle" || !startPos.current) return;
     const disp = {
-      x: e.clientX - startPos.current.x,
-      y: e.clientY - startPos.current.y
+      x: clientX - startPos.current.x,
+      y: clientY - startPos.current.y
     };
     const { x, y } = restoreOffset(disp, rotation, scale);
     const nextRect = applyDelta(x, y);
@@ -220,7 +235,7 @@ function useDragResize({
     setCurrentRect(patch.rect ?? nextRect);
     setPreviewObject(patch);
   };
-  const onPointerUp = () => {
+  const finishDragInternal = () => {
     if (drag.current === "idle") return;
     const usedDir = dir.current || "bottom-right";
     drag.current = "idle";
@@ -237,16 +252,45 @@ function useDragResize({
     dir.current = "none";
     setPreviewObject(null);
   };
+  const onPointerDown = (e) => {
+    if (!isSelected || !isDraggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    beginDrag("dragging", e.clientX, e.clientY);
+    e.currentTarget.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e) => handleMove(e.clientX, e.clientY);
+  const onPointerUp = (e) => {
+    finishDragInternal();
+    if ((e == null ? void 0 : e.currentTarget) && e.pointerId !== void 0) {
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+    }
+  };
   const startResize = (direction) => (e) => {
     if (!isSelected || !isResizable) return;
     e.stopPropagation();
     e.preventDefault();
-    drag.current = "resizing";
     dir.current = direction;
-    startPos.current = { x: e.clientX, y: e.clientY };
-    startRect.current = currentRect;
+    beginDrag("resizing", e.clientX, e.clientY);
     e.currentTarget.setPointerCapture(e.pointerId);
   };
+  const onTouchStart = (e) => {
+    if (!isSelected || !isDraggable) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const t = e.touches[0];
+    if (!t) return;
+    beginDrag("dragging", t.clientX, t.clientY);
+  };
+  const onTouchMove = (e) => {
+    const t = e.touches[0];
+    if (!t) return;
+    handleMove(t.clientX, t.clientY);
+  };
+  const onTouchEnd = () => finishDragInternal();
   useEffect(() => {
     drag.current = "idle";
     dir.current = "none";
@@ -257,7 +301,14 @@ function useDragResize({
     rootHandlers: {
       onPointerDown,
       onPointerMove,
-      onPointerUp
+      onPointerUp,
+      onPointerCancel: () => onPointerUp(),
+      onLostPointerCapture: () => onPointerUp(),
+      /* mobile touch fallback */
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      onTouchCancel: onTouchEnd
     },
     startResize
   };
@@ -335,6 +386,7 @@ function AnnotationContainer({
   isSelected = false,
   isDraggable = true,
   isResizable = true,
+  lockAspectRatio = false,
   computeVertices,
   computePatch,
   selectionMenu,
@@ -356,6 +408,7 @@ function AnnotationContainer({
     isSelected,
     isDraggable,
     isResizable,
+    lockAspectRatio,
     computePatch,
     computeVertices,
     currentRect,
@@ -387,6 +440,7 @@ function AnnotationContainer({
           width: `${currentRect.size.width * scale}px`,
           height: `${currentRect.size.height * scale}px`,
           pointerEvents: isSelected ? "auto" : "none",
+          touchAction: isSelected ? "auto" : "none",
           cursor: isSelected && isDraggable ? "move" : "default",
           ...isSelected && {
             zIndex: 3
@@ -467,7 +521,8 @@ function Highlight({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
@@ -500,7 +555,8 @@ function Underline({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -547,7 +603,8 @@ function Strikeout({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -601,7 +658,8 @@ function Squiggly({
   return /* @__PURE__ */ jsx(Fragment$1, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
     "div",
     {
-      onMouseDown: onClick,
+      onPointerDown: onClick,
+      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -637,14 +695,14 @@ function Squiggly({
   )) });
 }
 function Ink({
+  isSelected,
   color = "#000000",
   opacity = 1,
   strokeWidth,
   inkList,
   rect,
   scale,
-  onClick,
-  cursor
+  onClick
 }) {
   const paths = useMemo(() => {
     return inkList.map(({ points }) => {
@@ -679,10 +737,11 @@ function Ink({
           d,
           fill: "none",
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: "visibleStroke",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : "visibleStroke",
             stroke: color,
             strokeWidth,
             strokeLinecap: "round",
@@ -695,6 +754,7 @@ function Ink({
   );
 }
 function Square({
+  isSelected,
   color = "#000000",
   strokeColor,
   opacity = 1,
@@ -703,8 +763,7 @@ function Square({
   strokeDashArray,
   rect,
   scale,
-  onClick,
-  cursor
+  onClick
 }) {
   const { width, height, x, y } = useMemo(() => {
     const outerW = rect.size.width;
@@ -742,10 +801,11 @@ function Square({
           height,
           fill: color,
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             stroke: strokeColor ?? color,
             strokeWidth,
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -767,7 +827,7 @@ function Circle({
   rect,
   scale,
   onClick,
-  cursor
+  isSelected
 }) {
   const { width, height, cx, cy, rx, ry } = useMemo(() => {
     const outerW = rect.size.width;
@@ -808,10 +868,11 @@ function Circle({
           ry,
           fill: color,
           opacity,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           style: {
-            cursor,
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            cursor: isSelected ? "move" : "pointer",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             stroke: strokeColor ?? color,
             strokeWidth,
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -919,7 +980,8 @@ function Line({
             x2,
             y2,
             opacity,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: "visibleStroke",
@@ -937,7 +999,8 @@ function Line({
           {
             d: endings.start.d,
             transform: endings.start.transform,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             stroke: strokeColor,
             style: {
               cursor: isSelected ? "move" : "pointer",
@@ -957,7 +1020,8 @@ function Line({
             d: endings.end.d,
             transform: endings.end.transform,
             stroke: strokeColor,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
@@ -1038,7 +1102,8 @@ function Polyline({
           "path",
           {
             d: pathData,
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             opacity,
             style: {
               fill: "none",
@@ -1058,7 +1123,8 @@ function Polyline({
             transform: endings.start.transform,
             stroke: strokeColor,
             fill: endings.start.filled ? color : "none",
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
@@ -1074,11 +1140,12 @@ function Polyline({
             transform: endings.end.transform,
             stroke: strokeColor,
             fill: endings.end.filled ? color : "none",
-            onMouseDown: onClick,
+            onPointerDown: onClick,
+            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               strokeWidth,
-              pointerEvents: endings.end.filled ? "visible" : "visibleStroke",
+              pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
               strokeLinecap: "butt"
             }
           }
@@ -1129,14 +1196,15 @@ function Polygon({
         "path",
         {
           d: pathData,
-          onMouseDown: onClick,
+          onPointerDown: onClick,
+          onTouchStart: onClick,
           opacity,
           style: {
             fill: color,
             stroke: strokeColor ?? color,
             strokeWidth,
             cursor: isSelected ? "move" : "pointer",
-            pointerEvents: color === "transparent" ? "visibleStroke" : "visible",
+            pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
             strokeLinecap: "butt",
             strokeLinejoin: "miter",
             ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
@@ -1240,6 +1308,7 @@ function FreeText({
         zIndex: 2
       },
       onPointerDown: onClick,
+      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         "span",
         {
@@ -1269,6 +1338,87 @@ 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,
+      onTouchStart: 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();
@@ -1330,7 +1480,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Ink,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               color: obj.color,
               opacity: obj.opacity,
               strokeWidth: obj.strokeWidth,
@@ -1360,7 +1510,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Square,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               rect: obj.rect,
               color: obj.color,
               opacity: obj.opacity,
@@ -1392,7 +1542,7 @@ function Annotations(annotationsProps) {
           children: (obj) => /* @__PURE__ */ jsx(
             Circle,
             {
-              cursor: isSelected ? "move" : "pointer",
+              isSelected,
               rect: obj.rect,
               color: obj.color,
               opacity: obj.opacity,
@@ -1664,6 +1814,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 +2965,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 +3135,15 @@ function AnnotationLayer({
             pageWidth,
             pageHeight
           }
+        ),
+        /* @__PURE__ */ jsx(
+          StampPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
         )
       ]
     }