@embedpdf/plugin-annotation 1.0.13 → 1.0.14

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 } 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, 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) {
@@ -337,6 +338,7 @@ function AnnotationContainer({
   computeVertices,
   computePatch,
   selectionMenu,
+  onDoubleClick,
   ...props
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
@@ -375,6 +377,7 @@ function AnnotationContainer({
       "div",
       {
         ...rootHandlers,
+        ...mapDoubleClick(onDoubleClick),
         style: {
           position: "absolute",
           outline: isSelected ? "1px solid #007ACC" : "none",
@@ -385,6 +388,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 +1197,78 @@ 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 Annotations(annotationsProps) {
   const { pageIndex, scale, selectionMenu } = annotationsProps;
   const { provides: annotationProvides } = useAnnotationCapability();
@@ -1198,6 +1276,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 +1290,7 @@ function Annotations(annotationsProps) {
       onPointerDown: (_, pe) => {
         if (pe.target === pe.currentTarget && annotationProvides) {
           annotationProvides.deselectAnnotation();
+          setEditingId(null);
         }
       }
     }),
@@ -1222,6 +1302,7 @@ function Annotations(annotationsProps) {
       if (annotationProvides && selectionProvides) {
         annotationProvides.selectAnnotation(pageIndex, annotation.localId);
         selectionProvides.clear();
+        setEditingId(null);
       }
     },
     [annotationProvides, selectionProvides, pageIndex]
@@ -1231,6 +1312,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 +1628,42 @@ 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
+      );
+    }
     return null;
   }) });
 }
@@ -1570,8 +1688,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 +1711,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.HIGHLIGHT):
+    case PdfAnnotationSubtype.HIGHLIGHT:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1613,7 +1732,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.STRIKEOUT):
+    case PdfAnnotationSubtype.STRIKEOUT:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -1634,7 +1753,7 @@ function TextMarkup({ pageIndex, scale }) {
           )
         }
       );
-    case makeVariantKey(PdfAnnotationSubtype.SQUIGGLY):
+    case PdfAnnotationSubtype.SQUIGGLY:
       return /* @__PURE__ */ jsx(
         "div",
         {
@@ -2536,6 +2655,138 @@ 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
+          }
+        }
+      )
+    }
+  );
+};
 function AnnotationLayer({
   pageIndex,
   scale,
@@ -2611,6 +2862,15 @@ function AnnotationLayer({
             pageWidth,
             pageHeight
           }
+        ),
+        /* @__PURE__ */ jsx(
+          FreeTextPaint,
+          {
+            pageIndex,
+            scale,
+            pageWidth,
+            pageHeight
+          }
         )
       ]
     }