@embedpdf/plugin-annotation 2.7.0 → 2.8.0

package/dist/react/index.js

@@ -5,10 +5,11 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useState, useCallback, useContext, useRef, useEffect, useMemo, useLayoutEffect, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/react";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/react";
+import { getCounterRotation } from "@embedpdf/utils";
 const suppressContentEditableWarningProps = {
   suppressContentEditableWarning: true
 };
@@ -151,6 +152,11 @@ function AnnotationContainer({
     [annotationCapability, documentId]
   );
   const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
+  const annoFlags = trackedAnnotation.object.flags ?? [];
+  const hasNoZoom = annoFlags.includes("noZoom");
+  const hasNoRotate = annoFlags.includes("noRotate");
+  const visualScale = hasNoZoom ? 1 : scale;
+  const effectivePageRotation = hasNoRotate ? 0 : rotation;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
   const ROTATION_COLOR = (rotationUI == null ? void 0 : rotationUI.color) ?? "white";
@@ -343,17 +349,21 @@ function AnnotationContainer({
     return () => unsubs.forEach((u) => u());
   }, [plugin, documentId, trackedAnnotation.object]);
   const showOutline = isSelected && !isMultiSelected;
-  const aabbWidth = currentObject.rect.size.width * scale;
-  const aabbHeight = currentObject.rect.size.height * scale;
-  const innerWidth = effectiveUnrotatedRect.size.width * scale;
-  const innerHeight = effectiveUnrotatedRect.size.height * scale;
+  const aabbWidth = currentObject.rect.size.width * visualScale;
+  const aabbHeight = currentObject.rect.size.height * visualScale;
+  const innerWidth = effectiveUnrotatedRect.size.width * visualScale;
+  const innerHeight = effectiveUnrotatedRect.size.height * visualScale;
   const usesCustomPivot = Boolean(explicitUnrotatedRect) && annotationRotation !== 0;
-  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * scale : (aabbWidth - innerWidth) / 2;
-  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * scale : (aabbHeight - innerHeight) / 2;
-  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * scale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * scale}px` : "center center";
-  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * scale : aabbWidth / 2;
-  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * scale : aabbHeight / 2;
+  const innerLeft = usesCustomPivot ? (effectiveUnrotatedRect.origin.x - currentObject.rect.origin.x) * visualScale : (aabbWidth - innerWidth) / 2;
+  const innerTop = usesCustomPivot ? (effectiveUnrotatedRect.origin.y - currentObject.rect.origin.y) * visualScale : (aabbHeight - innerHeight) / 2;
+  const innerTransformOrigin = usesCustomPivot && rotationPivot ? `${(rotationPivot.x - effectiveUnrotatedRect.origin.x) * visualScale}px ${(rotationPivot.y - effectiveUnrotatedRect.origin.y) * visualScale}px` : "center center";
+  const centerX = rotationPivot ? (rotationPivot.x - currentObject.rect.origin.x) * visualScale : aabbWidth / 2;
+  const centerY = rotationPivot ? (rotationPivot.y - currentObject.rect.origin.y) * visualScale : aabbHeight / 2;
   const guideLength = Math.max(300, Math.max(aabbWidth, aabbHeight) + 80);
+  const counterRot = hasNoRotate ? getCounterRotation(
+    { origin: { x: 0, y: 0 }, size: { width: aabbWidth, height: aabbHeight } },
+    rotation
+  ) : null;
   const childObject = useMemo(() => {
     if (explicitUnrotatedRect) {
       return { ...currentObject, rect: explicitUnrotatedRect };
@@ -369,10 +379,15 @@ function AnnotationContainer({
           position: "absolute",
           left: currentObject.rect.origin.x * scale,
           top: currentObject.rect.origin.y * scale,
-          width: aabbWidth,
-          height: aabbHeight,
+          width: counterRot ? counterRot.width : aabbWidth,
+          height: counterRot ? counterRot.height : aabbHeight,
           pointerEvents: "none",
           zIndex,
+          // noRotate: apply counter-rotation matrix so the annotation stays upright
+          ...counterRot && {
+            transform: counterRot.matrix,
+            transformOrigin: "0 0"
+          },
           ...style
         },
         ...props,
@@ -601,13 +616,13 @@ function AnnotationContainer({
             y: currentObject.rect.origin.y * scale
           },
           size: {
-            width: currentObject.rect.size.width * scale,
-            height: currentObject.rect.size.height * scale
+            width: currentObject.rect.size.width * visualScale,
+            height: currentObject.rect.size.height * visualScale
           }
         },
         rotation,
         children: (counterRotateProps) => {
-          const effectiveAngle = ((annotationRotation + rotation * 90) % 360 + 360) % 360;
+          const effectiveAngle = ((annotationRotation + effectivePageRotation * 90) % 360 + 360) % 360;
           const handleNearMenuSide = effectiveIsRotatable && effectiveAngle > 90 && effectiveAngle < 270;
           return selectionMenu({
             ...counterRotateProps,
@@ -652,6 +667,57 @@ function AnnotationContainer({
     )
   ] });
 }
+function mapCounterRotatePoint(x, y, width, height, rotation) {
+  switch (rotation) {
+    case 1:
+      return { x: y, y: height - x };
+    case 2:
+      return { x: width - x, y: height - y };
+    case 3:
+      return { x: width - y, y: x };
+    default:
+      return { x, y };
+  }
+}
+function getAnnotationScreenBounds(annotation, scale, rotation) {
+  const flags = annotation.object.flags ?? [];
+  const hasNoZoom = flags.includes("noZoom");
+  const hasNoRotate = flags.includes("noRotate");
+  const left = annotation.object.rect.origin.x * scale;
+  const top = annotation.object.rect.origin.y * scale;
+  const width = annotation.object.rect.size.width * (hasNoZoom ? 1 : scale);
+  const height = annotation.object.rect.size.height * (hasNoZoom ? 1 : scale);
+  if (!hasNoRotate || rotation === 0) {
+    return {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height
+    };
+  }
+  const corners = [
+    mapCounterRotatePoint(0, 0, width, height, rotation),
+    mapCounterRotatePoint(width, 0, width, height, rotation),
+    mapCounterRotatePoint(0, height, width, height, rotation),
+    mapCounterRotatePoint(width, height, width, height, rotation)
+  ];
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const corner of corners) {
+    if (corner.x < minX) minX = corner.x;
+    if (corner.y < minY) minY = corner.y;
+    if (corner.x > maxX) maxX = corner.x;
+    if (corner.y > maxY) maxY = corner.y;
+  }
+  return {
+    left: left + minX,
+    top: top + minY,
+    right: left + maxX,
+    bottom: top + maxY
+  };
+}
 function GroupSelectionBox({
   documentId,
   pageIndex,
@@ -859,8 +925,29 @@ function GroupSelectionBox({
   if (selectedAnnotations.length < 2) {
     return null;
   }
-  const groupBoxWidth = previewGroupBox.size.width * scale;
-  const groupBoxHeight = previewGroupBox.size.height * scale;
+  let visualLeft = Infinity;
+  let visualTop = Infinity;
+  let visualRight = -Infinity;
+  let visualBottom = -Infinity;
+  for (const ta of selectedAnnotations) {
+    const bounds = getAnnotationScreenBounds(ta, scale, rotation);
+    visualLeft = Math.min(visualLeft, bounds.left);
+    visualTop = Math.min(visualTop, bounds.top);
+    visualRight = Math.max(visualRight, bounds.right);
+    visualBottom = Math.max(visualBottom, bounds.bottom);
+  }
+  const initialLogicalLeft = groupBox.origin.x * scale;
+  const initialLogicalTop = groupBox.origin.y * scale;
+  const initialLogicalRight = (groupBox.origin.x + groupBox.size.width) * scale;
+  const initialLogicalBottom = (groupBox.origin.y + groupBox.size.height) * scale;
+  const leftCorrection = visualLeft - initialLogicalLeft;
+  const topCorrection = visualTop - initialLogicalTop;
+  const rightCorrection = visualRight - initialLogicalRight;
+  const bottomCorrection = visualBottom - initialLogicalBottom;
+  const groupBoxLeft = previewGroupBox.origin.x * scale + leftCorrection;
+  const groupBoxTop = previewGroupBox.origin.y * scale + topCorrection;
+  const groupBoxWidth = previewGroupBox.size.width * scale + (rightCorrection - leftCorrection);
+  const groupBoxHeight = previewGroupBox.size.height * scale + (bottomCorrection - topCorrection);
   const groupCenterX = groupBoxWidth / 2;
   const groupCenterY = groupBoxHeight / 2;
   const groupGuideLength = Math.max(300, Math.max(groupBoxWidth, groupBoxHeight) + 80);
@@ -870,8 +957,8 @@ function GroupSelectionBox({
       {
         style: {
           position: "absolute",
-          left: previewGroupBox.origin.x * scale,
-          top: previewGroupBox.origin.y * scale,
+          left: groupBoxLeft,
+          top: groupBoxTop,
           width: groupBoxWidth,
           height: groupBoxHeight,
           pointerEvents: "none",
@@ -1085,12 +1172,12 @@ function GroupSelectionBox({
       {
         rect: {
           origin: {
-            x: previewGroupBox.origin.x * scale,
-            y: previewGroupBox.origin.y * scale
+            x: groupBoxLeft,
+            y: groupBoxTop
           },
           size: {
-            width: previewGroupBox.size.width * scale,
-            height: previewGroupBox.size.height * scale
+            width: groupBoxWidth,
+            height: groupBoxHeight
           }
         },
         rotation,
@@ -1180,7 +1267,6 @@ function Ink({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1265,7 +1351,6 @@ function Square({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
@@ -1352,7 +1437,6 @@ function Circle({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible"
@@ -1441,7 +1525,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1458,7 +1541,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
@@ -1475,7 +1557,6 @@ function Line({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
@@ -1550,6 +1631,8 @@ function Polyline({
   strokeColor = "#000000",
   opacity = 1,
   strokeWidth,
+  strokeStyle = PdfAnnotationBorderStyle.SOLID,
+  strokeDashArray,
   scale,
   isSelected,
   onClick,
@@ -1612,7 +1695,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : "visibleStroke",
@@ -1630,7 +1712,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.start.filled ? "visible" : "visibleStroke",
@@ -1647,7 +1728,6 @@ function Polyline({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : endings.end.filled ? "visible" : "visibleStroke",
@@ -1667,7 +1747,10 @@ function Polyline({
                 strokeWidth,
                 pointerEvents: "none",
                 strokeLinecap: "butt",
-                strokeLinejoin: "miter"
+                strokeLinejoin: "miter",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           ),
@@ -1681,7 +1764,10 @@ function Polyline({
               style: {
                 pointerEvents: "none",
                 strokeWidth,
-                strokeLinecap: "butt"
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           ),
@@ -1695,7 +1781,10 @@ function Polyline({
               style: {
                 pointerEvents: "none",
                 strokeWidth,
-                strokeLinecap: "butt"
+                strokeLinecap: "butt",
+                ...strokeStyle === PdfAnnotationBorderStyle.DASHED && {
+                  strokeDasharray: strokeDashArray == null ? void 0 : strokeDashArray.join(",")
+                }
               }
             }
           )
@@ -1759,7 +1848,6 @@ function Polygon({
             stroke: "transparent",
             strokeWidth: hitStrokeWidth,
             onPointerDown: onClick,
-            onTouchStart: onClick,
             style: {
               cursor: isSelected ? "move" : "pointer",
               pointerEvents: isSelected ? "none" : color === "transparent" ? "visibleStroke" : "visible",
@@ -1820,6 +1908,57 @@ function Polygon({
     }
   );
 }
+function Text({
+  isSelected,
+  color = "#facc15",
+  opacity = 1,
+  onClick,
+  appearanceActive = false
+}) {
+  const lineColor = getContrastStrokeColor(color);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 2,
+        pointerEvents: isSelected ? "none" : "auto",
+        cursor: isSelected ? "move" : "pointer"
+      },
+      onPointerDown: onClick,
+      children: !appearanceActive && /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none"
+          },
+          viewBox: "0 0 20 20",
+          width: "100%",
+          height: "100%",
+          children: [
+            /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: "M 0.5 15.5 L 0.5 0.5 L 19.5 0.5 L 19.5 15.5 L 8.5 15.5 L 6.5 19.5 L 4.5 15.5 Z",
+                fill: color,
+                opacity,
+                stroke: lineColor,
+                strokeWidth: "1",
+                strokeLinejoin: "miter"
+              }
+            ),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "4.25", x2: "17.5", y2: "4.25", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "8", x2: "17.5", y2: "8", stroke: lineColor, strokeWidth: "1" }),
+            /* @__PURE__ */ jsx("line", { x1: "2.5", y1: "11.75", x2: "17.5", y2: "11.75", stroke: lineColor, strokeWidth: "1" })
+          ]
+        }
+      )
+    }
+  );
+}
 function FreeText({
   documentId,
   isSelected,
@@ -1887,7 +2026,6 @@ function FreeText({
         opacity: appearanceActive ? 0 : 1
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         "span",
         {
@@ -2014,7 +2152,6 @@ function Stamp({
         cursor: "pointer"
       },
       onPointerDown: onClick,
-      onTouchStart: onClick,
       children: /* @__PURE__ */ jsx(
         RenderAnnotation,
         {
@@ -2077,7 +2214,6 @@ function Link({
             height,
             fill: "transparent",
             onPointerDown: hasIRT ? void 0 : onClick,
-            onTouchStart: hasIRT ? void 0 : onClick,
             style: {
               cursor: hasIRT ? "default" : isSelected ? "move" : "pointer",
               pointerEvents: hasIRT ? "none" : isSelected ? "none" : "visible"
@@ -2139,7 +2275,6 @@ function Highlight({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
@@ -2173,7 +2308,6 @@ function Underline({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2221,7 +2355,6 @@ function Strikeout({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2276,7 +2409,6 @@ function Squiggly({
     "div",
     {
       onPointerDown: onClick,
-      onTouchStart: onClick,
       style: {
         position: "absolute",
         left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
@@ -2310,6 +2442,74 @@ function Squiggly({
     i
   )) });
 }
+function Caret({
+  isSelected,
+  strokeColor = "#000000",
+  opacity = 1,
+  rect,
+  scale,
+  onClick,
+  appearanceActive = false
+}) {
+  const { width, height, path } = useMemo(() => {
+    const w = rect.size.width;
+    const h = rect.size.height;
+    const midX = w / 2;
+    const d = [
+      `M 0 ${h}`,
+      `C ${w * 0.27} ${h} ${midX} ${h - h * 0.44} ${midX} 0`,
+      `C ${midX} ${h - h * 0.44} ${w - w * 0.27} ${h} ${w} ${h}`,
+      "Z"
+    ].join(" ");
+    return { width: w, height: h, path: d };
+  }, [rect]);
+  const svgWidth = width * scale;
+  const svgHeight = height * scale;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width: svgWidth,
+        height: svgHeight,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: svgWidth,
+      height: svgHeight,
+      viewBox: `0 0 ${width} ${height}`,
+      overflow: "visible",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: "transparent",
+            stroke: "transparent",
+            strokeWidth: 4,
+            onPointerDown: onClick,
+            style: {
+              cursor: isSelected ? "move" : "pointer",
+              pointerEvents: isSelected ? "none" : "visible"
+            }
+          }
+        ),
+        !appearanceActive && /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: path,
+            fill: strokeColor,
+            stroke: strokeColor,
+            strokeWidth: 0.5,
+            opacity,
+            fillRule: "evenodd",
+            style: { pointerEvents: "none" }
+          }
+        )
+      ]
+    }
+  );
+}
 const builtInRenderers = [
   // --- Drawing ---
   createRenderer({
@@ -2483,6 +2683,38 @@ const builtInRenderers = [
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
   }),
+  // --- Text Comment ---
+  createRenderer({
+    id: "text",
+    matches: (a) => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
+    render: ({ currentObject, isSelected, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Text,
+      {
+        isSelected,
+        color: currentObject.strokeColor ?? currentObject.color,
+        opacity: currentObject.opacity,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: true, isResizable: false, isRotatable: false }
+  }),
+  // --- Caret ---
+  createRenderer({
+    id: "caret",
+    matches: (a) => a.type === PdfAnnotationSubtype.CARET,
+    render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
+      Caret,
+      {
+        ...currentObject,
+        isSelected,
+        scale,
+        onClick,
+        appearanceActive
+      }
+    ),
+    interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false }
+  }),
   // --- FreeText ---
   createRenderer({
     id: "freeText",
@@ -2946,6 +3178,8 @@ function TextMarkup({ documentId, pageIndex, scale }) {
           )
         }
       );
+    case PdfAnnotationSubtype.CARET:
+      return null;
     default:
       return null;
   }