@embedpdf/plugin-annotation 1.0.13 → 1.0.15

package/dist/react/index.js

@@ -1,12 +1,13 @@
 import { usePlugin, useCapability } from "@embedpdf/core/react";
-import { AnnotationPlugin, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, makeVariantKey } 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, 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";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
+const mapDoubleClick = (handler) => handler ? { onDoubleClick: handler } : {};
 function getCounterRotation(rect, rotation) {
   const { width: w, height: h } = rect.size;
   switch (rotation % 4) {
@@ -149,6 +150,7 @@ function useDragResize({
   isResizable,
   computePatch,
   computeVertices,
+  lockAspectRatio = false,
   currentRect,
   setCurrentRect,
   setCurrentVertices,
@@ -183,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);
@@ -219,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 };
@@ -256,7 +281,9 @@ function useDragResize({
     rootHandlers: {
       onPointerDown,
       onPointerMove,
-      onPointerUp
+      onPointerUp,
+      onPointerCancel: () => onPointerUp(),
+      onLostPointerCapture: () => onPointerUp()
     },
     startResize
   };
@@ -334,9 +361,11 @@ function AnnotationContainer({
   isSelected = false,
   isDraggable = true,
   isResizable = true,
+  lockAspectRatio = false,
   computeVertices,
   computePatch,
   selectionMenu,
+  onDoubleClick,
   ...props
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
@@ -354,6 +383,7 @@ function AnnotationContainer({
     isSelected,
     isDraggable,
     isResizable,
+    lockAspectRatio,
     computePatch,
     computeVertices,
     currentRect,
@@ -375,6 +405,7 @@ function AnnotationContainer({
       "div",
       {
         ...rootHandlers,
+        ...mapDoubleClick(onDoubleClick),
         style: {
           position: "absolute",
           outline: isSelected ? "1px solid #007ACC" : "none",
@@ -385,6 +416,9 @@ function AnnotationContainer({
           height: `${currentRect.size.height * scale}px`,
           pointerEvents: isSelected ? "auto" : "none",
           cursor: isSelected && isDraggable ? "move" : "default",
+          ...isSelected && {
+            zIndex: 3
+          },
           ...style
         },
         ...props,
@@ -1191,6 +1225,158 @@ const patchPolygon = (orig, ctx) => {
     vertices: moved
   };
 };
+function FreeText({
+  isSelected,
+  isEditing,
+  annotation,
+  pageIndex,
+  scale,
+  onClick
+}) {
+  const editorRef = useRef(null);
+  const { provides: annotationProvides } = useAnnotationCapability();
+  useEffect(() => {
+    if (isEditing && editorRef.current) {
+      const editor = editorRef.current;
+      editor.focus();
+      const selection = window.getSelection();
+      if (selection) {
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        range.collapse(false);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+  }, [isEditing]);
+  const handleBlur = () => {
+    if (!annotationProvides) return;
+    if (!editorRef.current) return;
+    annotationProvides.updateAnnotation(pageIndex, annotation.localId, {
+      contents: editorRef.current.innerText
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        width: annotation.object.rect.size.width * scale,
+        height: annotation.object.rect.size.height * scale,
+        cursor: isSelected && !isEditing ? "move" : "default",
+        pointerEvents: isSelected && !isEditing ? "none" : "auto",
+        zIndex: 2
+      },
+      onPointerDown: onClick,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: editorRef,
+          onBlur: handleBlur,
+          style: {
+            color: annotation.object.fontColor,
+            fontSize: annotation.object.fontSize * scale,
+            fontFamily: standardFontCss(annotation.object.fontFamily),
+            textAlign: textAlignmentToCss(annotation.object.textAlign),
+            flexDirection: "column",
+            justifyContent: annotation.object.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : annotation.object.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
+            display: "flex",
+            backgroundColor: annotation.object.backgroundColor,
+            opacity: annotation.object.opacity,
+            width: "100%",
+            height: "100%",
+            lineHeight: "1.18",
+            overflow: "hidden",
+            cursor: isEditing ? "text" : "pointer"
+          },
+          contentEditable: isEditing,
+          suppressContentEditableWarning: true,
+          children: annotation.object.contents
+        }
+      )
+    }
+  );
+}
+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();
@@ -1198,6 +1384,7 @@ function Annotations(annotationsProps) {
   const [annotations, setAnnotations] = useState([]);
   const { register } = usePointerHandlers({ pageIndex });
   const [selectionState, setSelectionState] = useState(null);
+  const [editingId, setEditingId] = useState(null);
   useEffect(() => {
     if (annotationProvides) {
       annotationProvides.onStateChange((state) => {
@@ -1211,6 +1398,7 @@ function Annotations(annotationsProps) {
       onPointerDown: (_, pe) => {
         if (pe.target === pe.currentTarget && annotationProvides) {
           annotationProvides.deselectAnnotation();
+          setEditingId(null);
         }
       }
     }),
@@ -1222,6 +1410,7 @@ function Annotations(annotationsProps) {
       if (annotationProvides && selectionProvides) {
         annotationProvides.selectAnnotation(pageIndex, annotation.localId);
         selectionProvides.clear();
+        setEditingId(null);
       }
     },
     [annotationProvides, selectionProvides, pageIndex]
@@ -1231,6 +1420,7 @@ function Annotations(annotationsProps) {
   }, [register, handlers]);
   return /* @__PURE__ */ jsx(Fragment$1, { children: annotations.map((annotation) => {
     const isSelected = (selectionState == null ? void 0 : selectionState.localId) === annotation.localId;
+    const isEditing = editingId === annotation.localId;
     if (isInk(annotation)) {
       return /* @__PURE__ */ jsx(
         AnnotationContainer,
@@ -1546,6 +1736,70 @@ function Annotations(annotationsProps) {
         annotation.localId
       );
     }
+    if (isFreeText(annotation)) {
+      return /* @__PURE__ */ jsx(
+        AnnotationContainer,
+        {
+          trackedAnnotation: annotation,
+          isSelected,
+          isDraggable: true,
+          isResizable: true,
+          selectionMenu,
+          outlineOffset: 6,
+          onDoubleClick: (e) => {
+            e.stopPropagation();
+            setEditingId(annotation.localId);
+          },
+          style: {
+            mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+          },
+          ...annotationsProps,
+          children: (object) => /* @__PURE__ */ jsx(
+            FreeText,
+            {
+              isSelected,
+              isEditing,
+              annotation: {
+                ...annotation,
+                object
+              },
+              pageIndex,
+              scale,
+              onClick: (e) => handleClick(e, annotation)
+            }
+          )
+        },
+        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;
   }) });
 }
@@ -1570,8 +1824,9 @@ function TextMarkup({ pageIndex, scale }) {
     return off;
   }, [annotationProvides]);
   if (!boundingRect) return null;
-  switch (activeTool.variantKey) {
-    case makeVariantKey(PdfAnnotationSubtype.UNDERLINE):
+  if (!activeTool.defaults) return null;
+  switch (activeTool.defaults.subtype) {
+    case PdfAnnotationSubtype.UNDERLINE:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1592,7 +1847,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.HIGHLIGHT):
+    case PdfAnnotationSubtype.HIGHLIGHT:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1613,7 +1868,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.STRIKEOUT):
+    case PdfAnnotationSubtype.STRIKEOUT:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1634,7 +1889,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.SQUIGGLY):
+    case PdfAnnotationSubtype.SQUIGGLY:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -2536,6 +2791,224 @@ const PolygonPaint = ({
     }
   );
 };
+const FreeTextPaint = ({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  cursor = "text"
+}) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => annotationProvides == null ? void 0 : annotationProvides.onActiveToolChange(setActiveTool), [annotationProvides]);
+  if (!activeTool.defaults || activeTool.defaults.subtype !== PdfAnnotationSubtype.FREETEXT)
+    return null;
+  const toolFontColor = activeTool.defaults.fontColor ?? "#000000";
+  const toolOpacity = activeTool.defaults.opacity ?? 1;
+  const toolFontSize = activeTool.defaults.fontSize ?? 12;
+  const toolFontFamily = activeTool.defaults.fontFamily;
+  const toolBackgroundColor = activeTool.defaults.backgroundColor ?? "transparent";
+  const toolTextAlign = activeTool.defaults.textAlign;
+  const toolVerticalAlign = activeTool.defaults.verticalAlign;
+  const toolContent = activeTool.defaults.content ?? "Insert text here";
+  const { register } = usePointerHandlers({ modeId: "freeText", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const [start, setStart] = useState(null);
+  const [current, setCurrent] = useState(null);
+  const commitFreeText = (p1, p2) => {
+    const minX2 = Math.min(p1.x, p2.x);
+    const minY2 = Math.min(p1.y, p2.y);
+    const maxX2 = Math.max(p1.x, p2.x);
+    const maxY2 = Math.max(p1.y, p2.y);
+    const w = maxX2 - minX2;
+    const h = maxY2 - minY2;
+    if (w < 1 || h < 1) return;
+    const rect = {
+      origin: { x: minX2, y: minY2 },
+      size: { width: w, height: h }
+    };
+    const anno = {
+      type: PdfAnnotationSubtype.FREETEXT,
+      rect,
+      contents: toolContent,
+      fontColor: toolFontColor,
+      fontSize: toolFontSize,
+      fontFamily: toolFontFamily,
+      opacity: toolOpacity,
+      backgroundColor: toolBackgroundColor,
+      textAlign: toolTextAlign,
+      verticalAlign: toolVerticalAlign,
+      pageIndex,
+      id: Date.now() + Math.random()
+    };
+    annotationProvides.createAnnotation(pageIndex, anno);
+    annotationProvides.setActiveVariant(null);
+    annotationProvides.selectAnnotation(pageIndex, anno.id);
+  };
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a, _b;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setStart({ x, y });
+        setCurrent({ x, y });
+        (_b = (_a = evt.target) == null ? void 0 : _a.setPointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!start) return;
+        const x = clamp(pos.x, 0, pageWidthPDF);
+        const y = clamp(pos.y, 0, pageHeightPDF);
+        setCurrent({ x, y });
+      },
+      onPointerUp: (_, evt) => {
+        var _a, _b;
+        if (start && current && annotationProvides) {
+          commitFreeText(start, current);
+        }
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a, _b;
+        (_b = (_a = evt.target) == null ? void 0 : _a.releasePointerCapture) == null ? void 0 : _b.call(_a, evt.pointerId);
+        setStart(null);
+        setCurrent(null);
+      }
+    }),
+    [start, current, annotationProvides, pageWidthPDF, pageHeightPDF]
+  );
+  useEffect(() => register ? register(handlers) : void 0, [register, handlers]);
+  if (!start || !current) return null;
+  const minX = Math.min(start.x, current.x);
+  const minY = Math.min(start.y, current.y);
+  const maxX = Math.max(start.x, current.x);
+  const maxY = Math.max(start.y, current.y);
+  const dw = maxX - minX;
+  const dh = maxY - minY;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: minX * scale,
+        top: minY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: 0,
+          y: 0,
+          width: dw,
+          height: dh,
+          fill: "transparent",
+          style: {
+            stroke: toolFontColor,
+            strokeWidth: 1,
+            strokeDasharray: "4,4",
+            cursor
+          }
+        }
+      )
+    }
+  );
+};
+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,
@@ -2611,6 +3084,24 @@ function AnnotationLayer({
             pageWidth,
             pageHeight
           }
+        ),
+        /* @__PURE__ */ jsx(
+          FreeTextPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StampPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
         )
       ]
     }