@embedpdf/plugin-annotation 2.12.1 → 2.14.0

package/dist/react/index.js

@@ -1276,7 +1276,7 @@ function createRenderer(entry) {
     renderLocked: entry.renderLocked ? (props) => entry.renderLocked(props) : void 0
   };
 }
-const MIN_HIT_AREA_SCREEN_PX$5 = 20;
+const MIN_HIT_AREA_SCREEN_PX$6 = 20;
 function Ink({
   isSelected,
   strokeColor,
@@ -1302,7 +1302,7 @@ function Ink({
   }, [inkList, rect]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$5 / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$6 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1355,7 +1355,7 @@ function Ink({
     }
   );
 }
-const MIN_HIT_AREA_SCREEN_PX$4 = 20;
+const MIN_HIT_AREA_SCREEN_PX$5 = 20;
 function Square({
   isSelected,
   color = "#000000",
@@ -1395,7 +1395,7 @@ function Square({
   }, [isCloudy, rect, rectangleDifferences, cloudyBorderIntensity, strokeWidth]);
   const svgWidth = rect.size.width * scale;
   const svgHeight = rect.size.height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$4 / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$5 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1477,7 +1477,7 @@ function Square({
     }
   );
 }
-const MIN_HIT_AREA_SCREEN_PX$3 = 20;
+const MIN_HIT_AREA_SCREEN_PX$4 = 20;
 function Circle({
   color = "#000000",
   strokeColor,
@@ -1519,7 +1519,7 @@ function Circle({
   }, [isCloudy, rect, rectangleDifferences, cloudyBorderIntensity, strokeWidth]);
   const svgWidth = width * scale;
   const svgHeight = height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$3 / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$4 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1601,7 +1601,7 @@ function Circle({
     }
   );
 }
-const MIN_HIT_AREA_SCREEN_PX$2 = 20;
+const MIN_HIT_AREA_SCREEN_PX$3 = 20;
 function Line({
   color = "transparent",
   opacity = 1,
@@ -1634,7 +1634,7 @@ function Line({
   }, [lineEndings, strokeWidth, x1, y1, x2, y2]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$2 / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$3 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1758,7 +1758,7 @@ function Line({
     }
   );
 }
-const MIN_HIT_AREA_SCREEN_PX$1 = 20;
+const MIN_HIT_AREA_SCREEN_PX$2 = 20;
 function Polyline({
   rect,
   vertices,
@@ -1806,7 +1806,7 @@ function Polyline({
   }, [localPts, lineEndings, strokeWidth]);
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$1 / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$2 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -1928,7 +1928,7 @@ function Polyline({
     }
   );
 }
-const MIN_HIT_AREA_SCREEN_PX = 20;
+const MIN_HIT_AREA_SCREEN_PX$1 = 20;
 function Polygon({
   rect,
   vertices,
@@ -1965,7 +1965,7 @@ function Polygon({
   const isPreviewing = currentVertex && vertices.length > 0;
   const width = rect.size.width * scale;
   const height = rect.size.height * scale;
-  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX / scale);
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX$1 / scale);
   return /* @__PURE__ */ jsxs(
     "svg",
     {
@@ -2205,6 +2205,339 @@ function FreeText({
     }
   );
 }
+const MIN_HIT_AREA_SCREEN_PX = 20;
+function CalloutFreeText({
+  documentId,
+  isSelected,
+  isEditing,
+  annotation,
+  pageIndex,
+  scale,
+  onClick,
+  appearanceActive = false
+}) {
+  const editorRef = useRef(null);
+  const editingRef = useRef(false);
+  const { provides: annotationCapability } = useAnnotationCapability();
+  const annotationProvides = (annotationCapability == null ? void 0 : annotationCapability.forDocument(documentId)) ?? null;
+  const obj = annotation.object;
+  const rect = obj.rect;
+  const rd = obj.rectangleDifferences;
+  const calloutLine = obj.calloutLine;
+  const strokeWidth = obj.strokeWidth ?? 1;
+  const strokeColor = obj.strokeColor ?? "#000000";
+  const textBox = useMemo(() => patching.computeTextBoxFromRD(rect, rd), [rect, rd]);
+  const textBoxRelative = useMemo(
+    () => ({
+      left: (textBox.origin.x - rect.origin.x + strokeWidth / 2) * scale,
+      top: (textBox.origin.y - rect.origin.y + strokeWidth / 2) * scale,
+      width: (textBox.size.width - strokeWidth) * scale,
+      height: (textBox.size.height - strokeWidth) * scale
+    }),
+    [textBox, rect, scale, strokeWidth]
+  );
+  const lineCoords = useMemo(() => {
+    if (!calloutLine || calloutLine.length < 3) return null;
+    return calloutLine.map((p) => ({
+      x: p.x - rect.origin.x,
+      y: p.y - rect.origin.y
+    }));
+  }, [calloutLine, rect]);
+  const ending = useMemo(() => {
+    if (!lineCoords || lineCoords.length < 2) return null;
+    const angle = Math.atan2(lineCoords[1].y - lineCoords[0].y, lineCoords[1].x - lineCoords[0].x);
+    return patching.createEnding(
+      obj.lineEnding,
+      strokeWidth,
+      angle + Math.PI,
+      lineCoords[0].x,
+      lineCoords[0].y
+    );
+  }, [lineCoords, obj.lineEnding, strokeWidth]);
+  const visualLineCoords = useMemo(() => {
+    if (!lineCoords || lineCoords.length < 2) return lineCoords;
+    const pts = lineCoords.map((p) => ({ ...p }));
+    const last = pts.length - 1;
+    const prev = last - 1;
+    const dx = pts[last].x - pts[prev].x;
+    const dy = pts[last].y - pts[prev].y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len > 0) {
+      const halfBw = strokeWidth / 2;
+      pts[last].x += dx / len * halfBw;
+      pts[last].y += dy / len * halfBw;
+    }
+    return pts;
+  }, [lineCoords, strokeWidth]);
+  const { adjustedFontPx, wrapperStyle } = useIOSZoomPrevention(obj.fontSize * scale, isEditing);
+  useEffect(() => {
+    var _a;
+    if (isEditing && editorRef.current) {
+      editingRef.current = true;
+      const editor = editorRef.current;
+      editor.focus();
+      const tool = annotationProvides == null ? void 0 : annotationProvides.findToolForAnnotation(obj);
+      const isDefaultContent = ((_a = tool == null ? void 0 : tool.defaults) == null ? void 0 : _a.contents) != null && obj.contents === tool.defaults.contents;
+      const selection = window.getSelection();
+      if (selection) {
+        const range = document.createRange();
+        range.selectNodeContents(editor);
+        if (!isDefaultContent) {
+          range.collapse(false);
+        }
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+  }, [isEditing]);
+  const handleBlur = () => {
+    if (!editingRef.current) return;
+    editingRef.current = false;
+    if (!annotationProvides) return;
+    if (!editorRef.current) return;
+    annotationProvides.updateAnnotation(pageIndex, obj.id, {
+      contents: editorRef.current.innerText.replace(/\u00A0/g, " ")
+    });
+  };
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  const hitStrokeWidth = Math.max(strokeWidth, MIN_HIT_AREA_SCREEN_PX / scale);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        cursor: isSelected && !isEditing ? "move" : "default",
+        pointerEvents: "none",
+        zIndex: 2,
+        opacity: appearanceActive ? 0 : 1
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            style: {
+              position: "absolute",
+              width,
+              height,
+              pointerEvents: "none",
+              overflow: "visible"
+            },
+            width,
+            height,
+            viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+            children: [
+              lineCoords && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "polyline",
+                  {
+                    points: lineCoords.map((p) => `${p.x},${p.y}`).join(" "),
+                    fill: "none",
+                    stroke: "transparent",
+                    strokeWidth: hitStrokeWidth,
+                    onPointerDown: onClick ? (e) => onClick(e) : void 0,
+                    style: {
+                      cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+                      pointerEvents: !onClick ? "none" : isSelected ? "none" : "visibleStroke"
+                    }
+                  }
+                ),
+                ending && /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    d: ending.d,
+                    transform: ending.transform,
+                    fill: "transparent",
+                    stroke: "transparent",
+                    strokeWidth: hitStrokeWidth,
+                    onPointerDown: onClick ? (e) => onClick(e) : void 0,
+                    style: {
+                      cursor: isSelected ? "move" : onClick ? "pointer" : "default",
+                      pointerEvents: !onClick ? "none" : isSelected ? "none" : ending.filled ? "visible" : "visibleStroke"
+                    }
+                  }
+                )
+              ] }),
+              !appearanceActive && /* @__PURE__ */ jsxs(Fragment, { children: [
+                visualLineCoords && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(
+                    "polyline",
+                    {
+                      points: visualLineCoords.map((p) => `${p.x},${p.y}`).join(" "),
+                      fill: "none",
+                      stroke: strokeColor,
+                      strokeWidth,
+                      opacity: obj.opacity,
+                      style: { pointerEvents: "none" }
+                    }
+                  ),
+                  ending && /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: ending.d,
+                      transform: ending.transform,
+                      stroke: strokeColor,
+                      fill: ending.filled ? obj.color ?? "transparent" : "none",
+                      strokeWidth,
+                      opacity: obj.opacity,
+                      style: { pointerEvents: "none" }
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx(
+                  "rect",
+                  {
+                    x: textBox.origin.x - rect.origin.x + strokeWidth / 2,
+                    y: textBox.origin.y - rect.origin.y + strokeWidth / 2,
+                    width: textBox.size.width - strokeWidth,
+                    height: textBox.size.height - strokeWidth,
+                    fill: obj.color ?? obj.backgroundColor ?? "transparent",
+                    stroke: strokeColor,
+                    strokeWidth,
+                    opacity: obj.opacity,
+                    style: { pointerEvents: "none" }
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onPointerDown: onClick ? (e) => onClick(e) : void 0,
+            style: {
+              position: "absolute",
+              left: (textBox.origin.x - rect.origin.x) * scale,
+              top: (textBox.origin.y - rect.origin.y) * scale,
+              width: textBox.size.width * scale,
+              height: textBox.size.height * scale,
+              cursor: isSelected && !isEditing ? "move" : onClick ? "pointer" : "default",
+              pointerEvents: !onClick ? "none" : isSelected && !isEditing ? "none" : "auto"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ref: editorRef,
+            onBlur: handleBlur,
+            tabIndex: 0,
+            style: {
+              position: "absolute",
+              left: textBoxRelative.left,
+              top: textBoxRelative.top,
+              width: textBoxRelative.width,
+              height: textBoxRelative.height,
+              color: obj.fontColor,
+              fontSize: adjustedFontPx,
+              ...standardFontCssProperties(obj.fontFamily),
+              textAlign: textAlignmentToCss(obj.textAlign),
+              flexDirection: "column",
+              justifyContent: obj.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : obj.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
+              display: "flex",
+              padding: strokeWidth * scale / 2 + 2 * scale,
+              opacity: obj.opacity,
+              lineHeight: "1.18",
+              overflow: "hidden",
+              cursor: isEditing ? "text" : "default",
+              outline: "none",
+              pointerEvents: isEditing ? "auto" : "none",
+              ...wrapperStyle
+            },
+            contentEditable: isEditing,
+            ...suppressContentEditableWarningProps,
+            children: obj.contents
+          }
+        )
+      ]
+    }
+  );
+}
+function CalloutFreeTextPreview({
+  calloutLine,
+  textBox,
+  bounds,
+  scale,
+  strokeColor,
+  strokeWidth,
+  color,
+  backgroundColor,
+  opacity,
+  lineEnding
+}) {
+  if (!calloutLine || calloutLine.length < 2) return /* @__PURE__ */ jsx(Fragment$1, {});
+  const sw = strokeWidth ?? 1;
+  const sc = strokeColor ?? "#000000";
+  const op = opacity ?? 1;
+  const w = bounds.size.width;
+  const h = bounds.size.height;
+  const ox = bounds.origin.x;
+  const oy = bounds.origin.y;
+  const lineCoords = calloutLine.map((p) => ({ x: p.x - ox, y: p.y - oy }));
+  const angle = Math.atan2(lineCoords[1].y - lineCoords[0].y, lineCoords[1].x - lineCoords[0].x);
+  const ending = patching.createEnding(
+    lineEnding,
+    sw,
+    angle + Math.PI,
+    lineCoords[0].x,
+    lineCoords[0].y
+  );
+  const halfSw = sw / 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: w * scale,
+        height: h * scale,
+        pointerEvents: "none",
+        overflow: "visible"
+      },
+      width: w * scale,
+      height: h * scale,
+      viewBox: `0 0 ${w} ${h}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: lineCoords.map((p) => `${p.x},${p.y}`).join(" "),
+            fill: "none",
+            stroke: sc,
+            strokeWidth: sw,
+            opacity: op
+          }
+        ),
+        ending && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: ending.d,
+            transform: ending.transform,
+            stroke: sc,
+            fill: ending.filled ? color ?? "transparent" : "none",
+            strokeWidth: sw,
+            opacity: op
+          }
+        ),
+        textBox && /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: textBox.origin.x - ox + halfSw,
+            y: textBox.origin.y - oy + halfSw,
+            width: textBox.size.width - sw,
+            height: textBox.size.height - sw,
+            fill: color ?? backgroundColor ?? "transparent",
+            stroke: sc,
+            strokeWidth: sw,
+            opacity: op
+          }
+        )
+      ]
+    }
+  );
+}
 function RenderAnnotation({
   documentId,
   pageIndex,
@@ -2897,11 +3230,59 @@ const builtInRenderers = [
     ),
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  // --- Callout FreeText (must appear before regular FreeText to match first) ---
+  createRenderer({
+    id: "freeTextCallout",
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT && a.intent === "FreeTextCallout",
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT && !!p.data.calloutLine,
+    render: ({
+      annotation,
+      currentObject,
+      isSelected,
+      isEditing,
+      scale,
+      pageIndex,
+      documentId,
+      onClick,
+      appearanceActive
+    }) => /* @__PURE__ */ jsx(
+      CalloutFreeText,
+      {
+        documentId,
+        isSelected,
+        isEditing,
+        annotation: { ...annotation, object: currentObject },
+        pageIndex,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    renderPreview: ({ data, bounds, scale }) => /* @__PURE__ */ jsx(
+      CalloutFreeTextPreview,
+      {
+        calloutLine: data.calloutLine,
+        textBox: data.textBox,
+        bounds,
+        scale,
+        strokeColor: data.strokeColor,
+        strokeWidth: data.strokeWidth,
+        color: data.color,
+        backgroundColor: data.backgroundColor,
+        opacity: data.opacity,
+        lineEnding: data.lineEnding
+      }
+    ),
+    vertexConfig: patching.calloutVertexConfig,
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false },
+    isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
+    onDoubleClick: (id, setEditingId) => setEditingId(id)
+  }),
   // --- FreeText ---
   createRenderer({
     id: "freeText",
-    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
-    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT,
+    matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT && a.intent !== "FreeTextCallout",
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT && !p.data.calloutLine,
     render: ({
       annotation,
       currentObject,