@embedpdf/plugin-annotation 1.0.11 → 1.0.12

package/dist/react/index.js

@@ -0,0 +1,983 @@
+import { usePlugin, useCapability } from "@embedpdf/core/react";
+import { AnnotationPlugin, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, makeVariantKey } from "@embedpdf/plugin-annotation";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { restoreOffset, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
+import { useRef, useState, useEffect, useMemo, useCallback } from "react";
+import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
+const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
+const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
+function AnnotationContainer({
+  scale,
+  pageIndex,
+  rotation,
+  trackedAnnotation,
+  children,
+  style,
+  outlineOffset = 1,
+  isSelected = false,
+  isDraggable = true,
+  isResizable = true,
+  computeResizePatch,
+  ...props
+}) {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const ref = useRef(null);
+  const [dragState, setDragState] = useState("idle");
+  const [resizeDirection, setResizeDirection] = useState(null);
+  const [startPos, setStartPos] = useState(null);
+  const [startRect, setStartRect] = useState(null);
+  const [currentRect, setCurrentRect] = useState(trackedAnnotation.object.rect);
+  const [previewObject, setPreviewObject] = useState(null);
+  useEffect(() => {
+    setCurrentRect(trackedAnnotation.object.rect);
+    setPreviewObject(null);
+  }, [trackedAnnotation]);
+  const handlePointerDown = (e) => {
+    var _a;
+    if (!isSelected) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const target = e.target;
+    if (isResizable && target.classList.contains("resize-handle")) {
+      setDragState("resizing");
+      setResizeDirection(target.dataset.direction);
+    } else if (isDraggable) {
+      setDragState("dragging");
+    } else {
+      return;
+    }
+    setStartPos({ x: e.clientX, y: e.clientY });
+    setStartRect(currentRect);
+    (_a = ref.current) == null ? void 0 : _a.setPointerCapture(e.pointerId);
+  };
+  const handlePointerMove = (e) => {
+    if (dragState === "idle" || !startPos || !startRect) return;
+    const dispDelta = { x: e.clientX - startPos.x, y: e.clientY - startPos.y };
+    const { x: dx, y: dy } = restoreOffset(dispDelta, rotation, scale);
+    let newOriginX = startRect.origin.x;
+    let newOriginY = startRect.origin.y;
+    let newWidth = startRect.size.width;
+    let newHeight = startRect.size.height;
+    if (dragState === "dragging") {
+      newOriginX += dx;
+      newOriginY += dy;
+    } else if (dragState === "resizing" && resizeDirection) {
+      if (resizeDirection.includes("right")) {
+        newWidth += dx;
+      } else if (resizeDirection.includes("left")) {
+        newOriginX += dx;
+        newWidth -= dx;
+      }
+      if (resizeDirection.includes("bottom")) {
+        newHeight += dy;
+      } else if (resizeDirection.includes("top")) {
+        newOriginY += dy;
+        newHeight -= dy;
+      }
+      if (newWidth < 1 || newHeight < 1) return;
+    }
+    const tentativeRect = {
+      origin: { x: newOriginX, y: newOriginY },
+      size: { width: newWidth, height: newHeight }
+    };
+    let previewPatch = { rect: tentativeRect };
+    if (computeResizePatch) {
+      const dir = dragState === "resizing" ? resizeDirection : "bottom-right";
+      if (dir) {
+        previewPatch = computeResizePatch(trackedAnnotation.object, tentativeRect, dir);
+      }
+    }
+    setCurrentRect(previewPatch.rect || tentativeRect);
+    setPreviewObject(previewPatch);
+  };
+  const handlePointerUp = (e) => {
+    var _a;
+    if (dragState === "idle") return;
+    const usedDirection = resizeDirection || "bottom-right";
+    setDragState("idle");
+    setResizeDirection(null);
+    (_a = ref.current) == null ? void 0 : _a.releasePointerCapture(e.pointerId);
+    if (annotationProvides && trackedAnnotation) {
+      let patch = { rect: currentRect };
+      if (computeResizePatch && usedDirection) {
+        patch = computeResizePatch(trackedAnnotation.object, currentRect, usedDirection);
+      }
+      annotationProvides.updateAnnotation(pageIndex, trackedAnnotation.localId, patch);
+    }
+    setStartPos(null);
+    setStartRect(null);
+    setPreviewObject(null);
+  };
+  const currentObject = previewObject ? { ...trackedAnnotation.object, ...previewObject } : trackedAnnotation.object;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      style: {
+        position: "absolute",
+        outline: isSelected ? "1px solid #007ACC" : "none",
+        outlineOffset: isSelected ? `${outlineOffset}px` : "0px",
+        left: `${currentRect.origin.x * scale}px`,
+        top: `${currentRect.origin.y * scale}px`,
+        width: `${currentRect.size.width * scale}px`,
+        height: `${currentRect.size.height * scale}px`,
+        pointerEvents: isSelected ? "auto" : "none",
+        cursor: isSelected && isDraggable ? "move" : "default",
+        ...style
+      },
+      ...props,
+      children: [
+        typeof children === "function" ? children(currentObject) : children,
+        isSelected && isResizable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "top-left",
+              style: {
+                position: "absolute",
+                top: -7 - outlineOffset,
+                left: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "top-right",
+              style: {
+                position: "absolute",
+                top: -7 - outlineOffset,
+                right: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "bottom-left",
+              style: {
+                position: "absolute",
+                bottom: -7 - outlineOffset,
+                left: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nwse-resize" : "nesw-resize"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "resize-handle",
+              "data-direction": "bottom-right",
+              style: {
+                position: "absolute",
+                bottom: -7 - outlineOffset,
+                right: -7 - outlineOffset,
+                width: 13,
+                height: 13,
+                background: "blue",
+                borderRadius: "50%",
+                cursor: rotation % 2 ? "nesw-resize" : "nwse-resize"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function Highlight({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((b, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? b.origin.x - rect.origin.x : b.origin.x) * scale,
+        top: (rect ? b.origin.y - rect.origin.y : b.origin.y) * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: color,
+        opacity,
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : void 0,
+        ...style
+      },
+      ...props
+    },
+    i
+  )) });
+}
+function Underline({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Strikeout({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Squiggly({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
+  const amplitude = 2 * scale;
+  const period = 6 * scale;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${period}" height="${amplitude * 2}" viewBox="0 0 ${period} ${amplitude * 2}">
+      <path d="M0 ${amplitude} Q ${period / 4} 0 ${period / 2} ${amplitude} T ${period} ${amplitude}"
+            fill="none" stroke="${color}" stroke-width="${amplitude}" stroke-linecap="round"/>
+    </svg>`;
+  const svgDataUri = `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
+  return /* @__PURE__ */ jsx(Fragment, { children: rects.map((r, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onMouseDown: onClick,
+      style: {
+        position: "absolute",
+        left: (rect ? r.origin.x - rect.origin.x : r.origin.x) * scale,
+        top: (rect ? r.origin.y - rect.origin.y : r.origin.y) * scale,
+        width: r.size.width * scale,
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: amplitude * 2,
+            backgroundImage: svgDataUri,
+            backgroundRepeat: "repeat-x",
+            backgroundSize: `${period}px ${amplitude * 2}px`,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
+    },
+    i
+  )) });
+}
+function Ink({
+  color = "#000000",
+  opacity = 1,
+  strokeWidth,
+  inkList,
+  rect,
+  scale,
+  onClick
+}) {
+  const paths = useMemo(() => {
+    return inkList.map(({ points }) => {
+      let d = "";
+      points.forEach(({ x, y }, i) => {
+        const lx = x - rect.origin.x;
+        const ly = y - rect.origin.y;
+        d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+      });
+      return d.trim();
+    });
+  }, [inkList, rect]);
+  const width = rect.size.width * scale;
+  const height = rect.size.height * scale;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        width,
+        height,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width,
+      height,
+      viewBox: `0 0 ${rect.size.width} ${rect.size.height}`,
+      children: paths.map((d, i) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity,
+          pointerEvents: "visibleStroke",
+          onMouseDown: onClick,
+          style: {
+            cursor: "pointer"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+function resizeInkAnnotation(original, newRect, direction, uniform = false) {
+  if (original.type !== PdfAnnotationSubtype.INK) {
+    throw new Error("resizeInkAnnotation: original is not an ink annotation");
+  }
+  const oldRect = original.rect;
+  let scaleX = newRect.size.width / oldRect.size.width;
+  let scaleY = newRect.size.height / oldRect.size.height;
+  const minSize = 10;
+  if (newRect.size.width < minSize || newRect.size.height < minSize) {
+    scaleX = Math.max(scaleX, minSize / oldRect.size.width);
+    scaleY = Math.max(scaleY, minSize / oldRect.size.height);
+    newRect = {
+      origin: newRect.origin,
+      size: {
+        width: oldRect.size.width * scaleX,
+        height: oldRect.size.height * scaleY
+      }
+    };
+  }
+  if (uniform) {
+    const minScale = Math.min(scaleX, scaleY);
+    scaleX = minScale;
+    scaleY = minScale;
+    newRect.size = {
+      width: oldRect.size.width * minScale,
+      height: oldRect.size.height * minScale
+    };
+  }
+  const newInkList = original.inkList.map((stroke) => ({
+    points: stroke.points.map((p) => ({
+      x: newRect.origin.x + (p.x - oldRect.origin.x) * scaleX,
+      y: newRect.origin.y + (p.y - oldRect.origin.y) * scaleY
+    }))
+  }));
+  const avgScale = (scaleX + scaleY) / 2;
+  const newStrokeWidth = original.strokeWidth * avgScale;
+  return {
+    rect: newRect,
+    inkList: newInkList,
+    strokeWidth: newStrokeWidth
+  };
+}
+function Annotations(annotationsProps) {
+  const { pageIndex, scale } = annotationsProps;
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const { provides: selectionProvides } = useSelectionCapability();
+  const [annotations, setAnnotations] = useState([]);
+  const { register } = usePointerHandlers({ pageIndex });
+  const [selectionState, setSelectionState] = useState(null);
+  useEffect(() => {
+    if (annotationProvides) {
+      annotationProvides.onStateChange((state) => {
+        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
+        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
+      });
+    }
+  }, [annotationProvides]);
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (_, pe) => {
+        if (pe.target === pe.currentTarget && annotationProvides) {
+          annotationProvides.deselectAnnotation();
+        }
+      }
+    }),
+    [annotationProvides]
+  );
+  const handleClick = useCallback(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides && selectionProvides) {
+        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
+        selectionProvides.clear();
+      }
+    },
+    [annotationProvides, selectionProvides, pageIndex]
+  );
+  useEffect(() => {
+    return register(handlers);
+  }, [register, handlers]);
+  return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation) => {
+    const isSelected = (selectionState == null ? void 0 : selectionState.localId) === annotation.localId;
+    switch (annotation.object.type) {
+      case PdfAnnotationSubtype.UNDERLINE:
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx(
+              Underline,
+              {
+                rect: annotation.object.rect,
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.STRIKEOUT:
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx(
+              Strikeout,
+              {
+                rect: annotation.object.rect,
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.SQUIGGLY:
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx(
+              Squiggly,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                rect: annotation.object.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.HIGHLIGHT:
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            isSelected,
+            isDraggable: false,
+            isResizable: false,
+            style: {
+              mixBlendMode: blendModeToCss(
+                annotation.object.blendMode ?? PdfBlendMode.Multiply
+              )
+            },
+            ...annotationsProps,
+            children: /* @__PURE__ */ jsx(
+              Highlight,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale,
+                rect: annotation.object.rect,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.INK:
+        return /* @__PURE__ */ jsx(
+          AnnotationContainer,
+          {
+            isSelected,
+            trackedAnnotation: annotation,
+            outlineOffset: 6,
+            computeResizePatch: resizeInkAnnotation,
+            style: {
+              mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
+            },
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ jsx(
+              Ink,
+              {
+                color: obj.color,
+                opacity: obj.opacity,
+                strokeWidth: obj.strokeWidth,
+                inkList: obj.inkList,
+                rect: obj.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      default:
+        return null;
+    }
+  }) });
+}
+function TextMarkup({ pageIndex, scale }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+  const { provides: selectionProvides } = useSelectionCapability();
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [rects, setRects] = useState([]);
+  const [boundingRect, setBoundingRect] = useState(null);
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!selectionProvides) return;
+    const off = selectionProvides.onSelectionChange(() => {
+      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+      setBoundingRect(selectionProvides.getBoundingRectForPage(pageIndex));
+    });
+    return off;
+  }, [selectionProvides, pageIndex]);
+  useEffect(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (!boundingRect) return null;
+  switch (activeTool.variantKey) {
+    case makeVariantKey(PdfAnnotationSubtype.UNDERLINE):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_a = activeTool.defaults) == null ? void 0 : _a.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Underline,
+            {
+              color: (_b = activeTool.defaults) == null ? void 0 : _b.color,
+              opacity: (_c = activeTool.defaults) == null ? void 0 : _c.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.HIGHLIGHT):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_d = activeTool.defaults) == null ? void 0 : _d.blendMode) ?? PdfBlendMode.Multiply),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Highlight,
+            {
+              color: (_e = activeTool.defaults) == null ? void 0 : _e.color,
+              opacity: (_f = activeTool.defaults) == null ? void 0 : _f.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.STRIKEOUT):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_g = activeTool.defaults) == null ? void 0 : _g.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Strikeout,
+            {
+              color: (_h = activeTool.defaults) == null ? void 0 : _h.color,
+              opacity: (_i = activeTool.defaults) == null ? void 0 : _i.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    case makeVariantKey(PdfAnnotationSubtype.SQUIGGLY):
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            mixBlendMode: blendModeToCss(((_j = activeTool.defaults) == null ? void 0 : _j.blendMode) ?? PdfBlendMode.Normal),
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ jsx(
+            Squiggly,
+            {
+              color: (_k = activeTool.defaults) == null ? void 0 : _k.color,
+              opacity: (_l = activeTool.defaults) == null ? void 0 : _l.opacity,
+              rects,
+              scale
+            }
+          )
+        }
+      );
+    default:
+      return null;
+  }
+}
+const MAX_STROKE_WIDTH = 30;
+const InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
+  var _a, _b, _c;
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = useState({ variantKey: null, defaults: null });
+  useEffect(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (!activeTool.defaults) return null;
+  if (activeTool.defaults.subtype !== PdfAnnotationSubtype.INK) return null;
+  const toolColor = ((_a = activeTool.defaults) == null ? void 0 : _a.color) ?? "#000000";
+  const toolOpacity = ((_b = activeTool.defaults) == null ? void 0 : _b.opacity) ?? 1;
+  const toolStrokeWidth = ((_c = activeTool.defaults) == null ? void 0 : _c.strokeWidth) ?? 2;
+  const { register } = usePointerHandlers({ modeId: "ink", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const [currentStrokes, setCurrentStrokes] = useState([]);
+  const [isDrawing, setIsDrawing] = useState(false);
+  const timerRef = useRef(null);
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const handlers = useMemo(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        var _a2, _b2;
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setIsDrawing(true);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+          setCurrentStrokes((prev) => [...prev, { points: [{ x: curX, y: curY }] }]);
+        } else {
+          setCurrentStrokes([{ points: [{ x: curX, y: curY }] }]);
+        }
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.setPointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+      },
+      onPointerMove: (pos) => {
+        if (!isDrawing) return;
+        const curX = clamp(pos.x, 0, pageWidthPDF);
+        const curY = clamp(pos.y, 0, pageHeightPDF);
+        setCurrentStrokes((prev) => {
+          if (!prev.length) return prev;
+          const last = prev[prev.length - 1];
+          const newLast = { points: [...last.points, { x: curX, y: curY }] };
+          return [...prev.slice(0, -1), newLast];
+        });
+      },
+      onPointerUp: (_, evt) => {
+        var _a2, _b2;
+        setIsDrawing(false);
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.releasePointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+        if (timerRef.current) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => {
+          if (currentStrokes.length && annotationProvides) {
+            const allPoints2 = currentStrokes.flatMap((s) => s.points);
+            if (!allPoints2.length) return;
+            const minX2 = Math.min(...allPoints2.map((p) => p.x));
+            const minY2 = Math.min(...allPoints2.map((p) => p.y));
+            const maxX2 = Math.max(...allPoints2.map((p) => p.x));
+            const maxY2 = Math.max(...allPoints2.map((p) => p.y));
+            const halfStroke2 = MAX_STROKE_WIDTH / 2;
+            const rectMinX = minX2 - halfStroke2;
+            const rectMinY = minY2 - halfStroke2;
+            const rectMaxX = maxX2 + halfStroke2;
+            const rectMaxY = maxY2 + halfStroke2;
+            if (rectMaxX - rectMinX < 1 || rectMaxY - rectMinY < 1) return;
+            const rect = {
+              origin: { x: rectMinX, y: rectMinY },
+              size: { width: rectMaxX - rectMinX, height: rectMaxY - rectMinY }
+            };
+            const anno = {
+              type: PdfAnnotationSubtype.INK,
+              rect,
+              inkList: currentStrokes,
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setActiveVariant(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+          setCurrentStrokes([]);
+          timerRef.current = null;
+        }, 3e3);
+      },
+      onPointerCancel: (_, evt) => {
+        var _a2, _b2;
+        setIsDrawing(false);
+        (_b2 = (_a2 = evt.target) == null ? void 0 : _a2.releasePointerCapture) == null ? void 0 : _b2.call(_a2, evt.pointerId);
+        setCurrentStrokes([]);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    }),
+    [
+      pageWidthPDF,
+      pageHeightPDF,
+      currentStrokes,
+      annotationProvides,
+      pageIndex,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth,
+      isDrawing
+    ]
+  );
+  useEffect(() => {
+    if (!register) return;
+    return register(handlers);
+  }, [register, handlers]);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  if (!currentStrokes.length) return null;
+  const allPoints = currentStrokes.flatMap((s) => s.points);
+  if (!allPoints.length) return null;
+  const minX = Math.min(...allPoints.map((p) => p.x));
+  const minY = Math.min(...allPoints.map((p) => p.y));
+  const maxX = Math.max(...allPoints.map((p) => p.x));
+  const maxY = Math.max(...allPoints.map((p) => p.y));
+  const halfStroke = MAX_STROKE_WIDTH / 2;
+  const svgMinX = minX - halfStroke;
+  const svgMinY = minY - halfStroke;
+  const svgMaxX = maxX + halfStroke;
+  const svgMaxY = maxY + halfStroke;
+  const dw = svgMaxX - svgMinX;
+  const dh = svgMaxY - svgMinY;
+  const paths = currentStrokes.map(({ points }) => {
+    let d = "";
+    points.forEach(({ x, y }, i) => {
+      const lx = x - svgMinX;
+      const ly = y - svgMinY;
+      d += (i === 0 ? "M" : "L") + lx + " " + ly + " ";
+    });
+    return d.trim();
+  });
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      style: {
+        position: "absolute",
+        left: svgMinX * scale,
+        top: svgMinY * scale,
+        width: dw * scale,
+        height: dh * scale,
+        pointerEvents: "none",
+        zIndex: 2
+      },
+      width: dw * scale,
+      height: dh * scale,
+      viewBox: `0 0 ${dw} ${dh}`,
+      children: paths.map((d, i) => /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: toolColor,
+          strokeWidth: toolStrokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity: toolOpacity
+        },
+        i
+      ))
+    }
+  );
+};
+function AnnotationLayer({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  rotation,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...style
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Annotations, { pageIndex, scale, rotation }),
+        /* @__PURE__ */ jsx(TextMarkup, { pageIndex, scale }),
+        /* @__PURE__ */ jsx(InkPaint, { pageIndex, scale, pageWidth, pageHeight })
+      ]
+    }
+  );
+}
+export {
+  AnnotationLayer,
+  useAnnotationCapability,
+  useAnnotationPlugin
+};
+//# sourceMappingURL=index.js.map