@embedpdf/plugin-annotation 1.0.7 → 1.0.9

package/dist/preact/index.cjs

@@ -33,74 +33,243 @@ var useAnnotationPlugin = () => (0, import_preact.usePlugin)(import_plugin_annot
 var useAnnotationCapability = () => (0, import_preact.useCapability)(import_plugin_annotation.AnnotationPlugin.id);
 
 // src/preact/components/annotations.tsx
-var import_models = require("@embedpdf/models");
-var import_preact3 = require("@embedpdf/plugin-interaction-manager/preact");
+var import_models3 = require("@embedpdf/models");
+var import_preact2 = require("@embedpdf/plugin-interaction-manager/preact");
 var import_plugin_annotation2 = require("@embedpdf/plugin-annotation");
-var import_hooks4 = require("preact/hooks");
+var import_hooks5 = require("preact/hooks");
 
-// src/preact/components/selectable-container.tsx
+// src/preact/components/annotation-container.tsx
 var import_hooks = require("preact/hooks");
-var import_preact2 = require("@embedpdf/plugin-selection/preact");
+var import_models = require("@embedpdf/models");
 var import_jsx_runtime = require("preact/jsx-runtime");
-function SelectableAnnotationContainer({
-  trackedAnnotation,
+function AnnotationContainer({
   scale,
-  isSelected = false,
   pageIndex,
-  children
+  rotation,
+  trackedAnnotation,
+  children,
+  style,
+  outlineOffset = 1,
+  isSelected = false,
+  isDraggable = true,
+  isResizable = true,
+  computeResizePatch,
+  ...props
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
-  const { provides: selectionProvides } = (0, import_preact2.useSelectionCapability)();
-  const handleClick = (0, import_hooks.useCallback)(
-    (e) => {
-      e.stopPropagation();
-      if (annotationProvides && selectionProvides) {
-        annotationProvides.selectAnnotation(pageIndex, trackedAnnotation.localId);
-        selectionProvides.clear();
+  const ref = (0, import_hooks.useRef)(null);
+  const [dragState, setDragState] = (0, import_hooks.useState)("idle");
+  const [resizeDirection, setResizeDirection] = (0, import_hooks.useState)(null);
+  const [startPos, setStartPos] = (0, import_hooks.useState)(null);
+  const [startRect, setStartRect] = (0, import_hooks.useState)(null);
+  const [currentRect, setCurrentRect] = (0, import_hooks.useState)(trackedAnnotation.object.rect);
+  const [previewObject, setPreviewObject] = (0, import_hooks.useState)(null);
+  (0, import_hooks.useEffect)(() => {
+    setCurrentRect(trackedAnnotation.object.rect);
+    setPreviewObject(null);
+  }, [trackedAnnotation]);
+  const handlePointerDown = (e) => {
+    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);
+    ref.current?.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 } = (0, import_models.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;
       }
-    },
-    [annotationProvides, selectionProvides, isSelected, pageIndex, trackedAnnotation.localId]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    children,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: "markup-annotation",
-        style: {
-          position: "absolute",
-          mixBlendMode: "multiply",
-          cursor: "pointer",
-          outline: isSelected ? "2px solid #007ACC" : "none",
-          outlineOffset: isSelected ? "1px" : "0px",
-          left: `${trackedAnnotation.object.rect.origin.x * scale}px`,
-          top: `${trackedAnnotation.object.rect.origin.y * scale}px`,
-          width: `${trackedAnnotation.object.rect.size.width * scale}px`,
-          height: `${trackedAnnotation.object.rect.size.height * scale}px`,
-          zIndex: 1
-        },
-        onMouseDown: handleClick
+      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) => {
+    if (dragState === "idle") return;
+    const usedDirection = resizeDirection || "bottom-right";
+    setDragState("idle");
+    setResizeDirection(null);
+    ref.current?.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/preact/components/text-markup/highlight.tsx
 var import_jsx_runtime2 = require("preact/jsx-runtime");
-function Highlight({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+function Highlight({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: rects.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
+      onMouseDown: onClick,
       style: {
         position: "absolute",
-        left: b.origin.x * scale,
-        top: b.origin.y * scale,
+        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: "none"
-      }
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : null,
+        ...style
+      },
+      ...props
     },
     i
   )) });
@@ -108,21 +277,49 @@ function Highlight({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
 
 // src/preact/components/text-markup/underline.tsx
 var import_jsx_runtime3 = require("preact/jsx-runtime");
-function Underline({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+function Underline({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
   const thickness = 2 * scale;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: rects.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
+      onMouseDown: onClick,
       style: {
         position: "absolute",
-        left: r.origin.x * scale,
-        top: (r.origin.y + r.size.height) * scale - thickness,
+        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: thickness,
-        background: color,
-        opacity,
-        pointerEvents: "none"
-      }
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            bottom: 0,
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            pointerEvents: "none"
+          }
+        }
+      )
     },
     i
   )) });
@@ -130,21 +327,50 @@ function Underline({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
 
 // src/preact/components/text-markup/strikeout.tsx
 var import_jsx_runtime4 = require("preact/jsx-runtime");
-function Strikeout({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+function Strikeout({
+  color = "#FFFF00",
+  opacity = 0.5,
+  rects,
+  rect,
+  scale,
+  onClick,
+  style,
+  ...props
+}) {
   const thickness = 2 * scale;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: rects.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
+      onMouseDown: onClick,
       style: {
         position: "absolute",
-        left: r.origin.x * scale,
-        top: (r.origin.y + r.size.height / 2) * scale - thickness / 2,
+        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: thickness,
-        background: color,
-        opacity,
-        pointerEvents: "none"
-      }
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            left: 0,
+            top: "50%",
+            width: "100%",
+            height: thickness,
+            background: color,
+            opacity,
+            transform: "translateY(-50%)",
+            pointerEvents: "none"
+          }
+        }
+      )
     },
     i
   )) });
@@ -152,7 +378,16 @@ function Strikeout({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
 
 // src/preact/components/text-markup/squiggly.tsx
 var import_jsx_runtime5 = require("preact/jsx-runtime");
-function Squiggly({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+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}">
@@ -163,31 +398,160 @@ function Squiggly({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: rects.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
+      onMouseDown: onClick,
       style: {
         position: "absolute",
-        left: r.origin.x * scale,
-        top: (r.origin.y + r.size.height) * scale - amplitude,
+        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: amplitude * 2,
-        backgroundImage: svgDataUri,
-        backgroundRepeat: "repeat-x",
-        backgroundSize: `${period}px ${amplitude * 2}px`,
-        opacity,
-        pointerEvents: "none"
-      }
+        height: r.size.height * scale,
+        background: "transparent",
+        pointerEvents: onClick ? "auto" : "none",
+        cursor: onClick ? "pointer" : "default",
+        zIndex: onClick ? 1 : 0,
+        ...style
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.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
   )) });
 }
 
-// src/preact/components/annotations.tsx
+// src/preact/components/annotations/ink.tsx
+var import_hooks3 = require("preact/hooks");
 var import_jsx_runtime6 = require("preact/jsx-runtime");
-function Annotations({ pageIndex, scale }) {
+function Ink({
+  color = "#000000",
+  opacity = 1,
+  strokeWidth,
+  inkList,
+  rect,
+  scale,
+  onClick
+}) {
+  const paths = (0, import_hooks3.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__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: color,
+          strokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity,
+          pointerEvents: "visibleStroke",
+          onMouseDown: onClick,
+          style: {
+            cursor: "pointer"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/preact/components/annotations.tsx
+var import_preact3 = require("@embedpdf/plugin-selection/preact");
+
+// src/shared/resize-ink.ts
+var import_models2 = require("@embedpdf/models");
+function resizeInkAnnotation(original, newRect, direction, uniform = false) {
+  if (original.type !== import_models2.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
+  };
+}
+
+// src/preact/components/annotations.tsx
+var import_jsx_runtime7 = require("preact/jsx-runtime");
+function Annotations(annotationsProps) {
+  const { pageIndex, scale } = annotationsProps;
   const { provides: annotationProvides } = useAnnotationCapability();
-  const [annotations, setAnnotations] = (0, import_hooks4.useState)([]);
-  const { register } = (0, import_preact3.usePointerHandlers)({ pageIndex });
-  const [selectionState, setSelectionState] = (0, import_hooks4.useState)(null);
-  (0, import_hooks4.useEffect)(() => {
+  const { provides: selectionProvides } = (0, import_preact3.useSelectionCapability)();
+  const [annotations, setAnnotations] = (0, import_hooks5.useState)([]);
+  const { register } = (0, import_preact2.usePointerHandlers)({ pageIndex });
+  const [selectionState, setSelectionState] = (0, import_hooks5.useState)(null);
+  (0, import_hooks5.useEffect)(() => {
     if (annotationProvides) {
       annotationProvides.onStateChange((state) => {
         setAnnotations((0, import_plugin_annotation2.getAnnotationsByPageIndex)(state, pageIndex));
@@ -195,7 +559,7 @@ function Annotations({ pageIndex, scale }) {
       });
     }
   }, [annotationProvides]);
-  const handlers = (0, import_hooks4.useMemo)(
+  const handlers = (0, import_hooks5.useMemo)(
     () => ({
       onPointerDown: (_, pe) => {
         if (pe.target === pe.currentTarget && annotationProvides) {
@@ -205,87 +569,137 @@ function Annotations({ pageIndex, scale }) {
     }),
     [annotationProvides]
   );
-  (0, import_hooks4.useEffect)(() => {
+  const handleClick = (0, import_hooks5.useCallback)(
+    (e, annotation) => {
+      e.stopPropagation();
+      if (annotationProvides && selectionProvides) {
+        annotationProvides.selectAnnotation(pageIndex, annotation.localId);
+        selectionProvides.clear();
+      }
+    },
+    [annotationProvides, selectionProvides, pageIndex]
+  );
+  (0, import_hooks5.useEffect)(() => {
     return register(handlers);
   }, [register, handlers]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: annotations.map((annotation) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: annotations.map((annotation) => {
     const isSelected = selectionState?.localId === annotation.localId;
     switch (annotation.object.type) {
-      case import_models.PdfAnnotationSubtype.UNDERLINE:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          SelectableAnnotationContainer,
+      case import_models3.PdfAnnotationSubtype.UNDERLINE:
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AnnotationContainer,
           {
             trackedAnnotation: annotation,
-            scale,
             isSelected,
-            pageIndex,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Underline,
               {
+                rect: annotation.object.rect,
                 color: annotation.object.color,
                 opacity: annotation.object.opacity,
                 rects: annotation.object.segmentRects,
-                scale
+                scale,
+                onClick: (e) => handleClick(e, annotation)
               }
             )
           },
           annotation.localId
         );
-      case import_models.PdfAnnotationSubtype.STRIKEOUT:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          SelectableAnnotationContainer,
+      case import_models3.PdfAnnotationSubtype.STRIKEOUT:
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AnnotationContainer,
           {
             trackedAnnotation: annotation,
-            scale,
             isSelected,
-            pageIndex,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Strikeout,
               {
+                rect: annotation.object.rect,
                 color: annotation.object.color,
                 opacity: annotation.object.opacity,
                 rects: annotation.object.segmentRects,
-                scale
+                scale,
+                onClick: (e) => handleClick(e, annotation)
               }
             )
           },
           annotation.localId
         );
-      case import_models.PdfAnnotationSubtype.SQUIGGLY:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          SelectableAnnotationContainer,
+      case import_models3.PdfAnnotationSubtype.SQUIGGLY:
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AnnotationContainer,
           {
             trackedAnnotation: annotation,
-            scale,
             isSelected,
-            pageIndex,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Squiggly,
               {
                 color: annotation.object.color,
                 opacity: annotation.object.opacity,
                 rects: annotation.object.segmentRects,
-                scale
+                rect: annotation.object.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
               }
             )
           },
           annotation.localId
         );
-      case import_models.PdfAnnotationSubtype.HIGHLIGHT:
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-          SelectableAnnotationContainer,
+      case import_models3.PdfAnnotationSubtype.HIGHLIGHT:
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AnnotationContainer,
           {
             trackedAnnotation: annotation,
-            scale,
             isSelected,
-            pageIndex,
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            isDraggable: false,
+            isResizable: false,
+            style: { mixBlendMode: "multiply" },
+            ...annotationsProps,
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               Highlight,
               {
                 color: annotation.object.color,
                 opacity: annotation.object.opacity,
                 rects: annotation.object.segmentRects,
-                scale
+                scale,
+                rect: annotation.object.rect,
+                onClick: (e) => handleClick(e, annotation)
+              }
+            )
+          },
+          annotation.localId
+        );
+      case import_models3.PdfAnnotationSubtype.INK:
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          AnnotationContainer,
+          {
+            isSelected,
+            trackedAnnotation: annotation,
+            outlineOffset: 6,
+            computeResizePatch: resizeInkAnnotation,
+            ...annotationsProps,
+            children: (obj) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              Ink,
+              {
+                color: obj.color,
+                opacity: obj.opacity,
+                strokeWidth: obj.strokeWidth,
+                inkList: obj.inkList,
+                rect: obj.rect,
+                scale,
+                onClick: (e) => handleClick(e, annotation)
               }
             )
           },
@@ -298,66 +712,113 @@ function Annotations({ pageIndex, scale }) {
 }
 
 // src/preact/components/text-markup.tsx
-var import_models2 = require("@embedpdf/models");
+var import_models4 = require("@embedpdf/models");
 var import_preact4 = require("@embedpdf/plugin-selection/preact");
-var import_hooks5 = require("preact/hooks");
-var import_jsx_runtime7 = require("preact/jsx-runtime");
+var import_hooks6 = require("preact/hooks");
+var import_jsx_runtime8 = require("preact/jsx-runtime");
 function TextMarkup({ pageIndex, scale }) {
   const { provides: selectionProvides } = (0, import_preact4.useSelectionCapability)();
   const { provides: annotationProvides } = useAnnotationCapability();
-  const [rects, setRects] = (0, import_hooks5.useState)([]);
-  const [activeTool, setActiveTool] = (0, import_hooks5.useState)({ mode: null, defaults: null });
-  (0, import_hooks5.useEffect)(() => {
+  const [rects, setRects] = (0, import_hooks6.useState)([]);
+  const [boundingRect, setBoundingRect] = (0, import_hooks6.useState)(null);
+  const [activeTool, setActiveTool] = (0, import_hooks6.useState)({ mode: null, defaults: null });
+  (0, import_hooks6.useEffect)(() => {
     if (!selectionProvides) return;
     const off = selectionProvides.onSelectionChange(() => {
       setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+      setBoundingRect(selectionProvides.getBoundingRectForPage(pageIndex));
     });
     return off;
   }, [selectionProvides, pageIndex]);
-  (0, import_hooks5.useEffect)(() => {
+  (0, import_hooks6.useEffect)(() => {
     if (!annotationProvides) return;
     const off = annotationProvides.onActiveToolChange(setActiveTool);
     return off;
   }, [annotationProvides]);
+  if (!boundingRect) return null;
   switch (activeTool.mode) {
-    case import_models2.PdfAnnotationSubtype.UNDERLINE:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Underline,
+    case import_models4.PdfAnnotationSubtype.UNDERLINE:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
         {
-          color: activeTool.defaults?.color,
-          opacity: activeTool.defaults?.opacity,
-          rects,
-          scale
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Underline,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
         }
       );
-    case import_models2.PdfAnnotationSubtype.HIGHLIGHT:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Highlight,
+    case import_models4.PdfAnnotationSubtype.HIGHLIGHT:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
         {
-          color: activeTool.defaults?.color,
-          opacity: activeTool.defaults?.opacity,
-          rects,
-          scale
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Highlight,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
         }
       );
-    case import_models2.PdfAnnotationSubtype.STRIKEOUT:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Strikeout,
+    case import_models4.PdfAnnotationSubtype.STRIKEOUT:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
         {
-          color: activeTool.defaults?.color,
-          opacity: activeTool.defaults?.opacity,
-          rects,
-          scale
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Strikeout,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
         }
       );
-    case import_models2.PdfAnnotationSubtype.SQUIGGLY:
-      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        Squiggly,
+    case import_models4.PdfAnnotationSubtype.SQUIGGLY:
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
         {
-          color: activeTool.defaults?.color,
-          opacity: activeTool.defaults?.opacity,
-          rects,
-          scale
+          style: {
+            mixBlendMode: "multiply",
+            pointerEvents: "none",
+            position: "absolute",
+            inset: 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            Squiggly,
+            {
+              color: activeTool.defaults?.color,
+              opacity: activeTool.defaults?.opacity,
+              rects,
+              scale
+            }
+          )
         }
       );
     default:
@@ -365,10 +826,195 @@ function TextMarkup({ pageIndex, scale }) {
   }
 }
 
+// src/preact/components/annotations/ink-paint.tsx
+var import_hooks8 = require("preact/hooks");
+var import_preact5 = require("@embedpdf/plugin-interaction-manager/preact");
+var import_models5 = require("@embedpdf/models");
+var import_jsx_runtime9 = require("preact/jsx-runtime");
+var MAX_STROKE_WIDTH = 30;
+var InkPaint = ({ pageIndex, scale, pageWidth, pageHeight }) => {
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [activeTool, setActiveTool] = (0, import_hooks8.useState)({ mode: null, defaults: null });
+  (0, import_hooks8.useEffect)(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  if (activeTool.mode !== import_models5.PdfAnnotationSubtype.INK) return null;
+  const toolColor = activeTool.defaults?.color ?? "#000000";
+  const toolOpacity = activeTool.defaults?.opacity ?? 1;
+  const toolStrokeWidth = activeTool.defaults?.strokeWidth ?? 2;
+  const { register } = (0, import_preact5.usePointerHandlers)({ modeId: "ink", pageIndex });
+  const clamp = (v, min, max) => Math.max(min, Math.min(max, v));
+  const [currentStrokes, setCurrentStrokes] = (0, import_hooks8.useState)([]);
+  const [isDrawing, setIsDrawing] = (0, import_hooks8.useState)(false);
+  const timerRef = (0, import_hooks8.useRef)(null);
+  const pageWidthPDF = pageWidth / scale;
+  const pageHeightPDF = pageHeight / scale;
+  const handlers = (0, import_hooks8.useMemo)(
+    () => ({
+      onPointerDown: (pos, evt) => {
+        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 }] }]);
+        }
+        evt.target?.setPointerCapture?.(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) => {
+        setIsDrawing(false);
+        evt.target?.releasePointerCapture?.(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: import_models5.PdfAnnotationSubtype.INK,
+              rect,
+              inkList: currentStrokes,
+              color: toolColor,
+              opacity: toolOpacity,
+              strokeWidth: toolStrokeWidth,
+              pageIndex,
+              id: Date.now() + Math.random()
+            };
+            annotationProvides.createAnnotation(pageIndex, anno);
+            annotationProvides.setAnnotationMode(null);
+            annotationProvides.selectAnnotation(pageIndex, anno.id);
+          }
+          setCurrentStrokes([]);
+          timerRef.current = null;
+        }, 3e3);
+      },
+      onPointerCancel: (_, evt) => {
+        setIsDrawing(false);
+        evt.target?.releasePointerCapture?.(evt.pointerId);
+        setCurrentStrokes([]);
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    }),
+    [
+      pageWidthPDF,
+      pageHeightPDF,
+      currentStrokes,
+      annotationProvides,
+      pageIndex,
+      toolColor,
+      toolOpacity,
+      toolStrokeWidth,
+      isDrawing
+    ]
+  );
+  (0, import_hooks8.useEffect)(() => {
+    if (!register) return;
+    return register(handlers);
+  }, [register, handlers]);
+  (0, import_hooks8.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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)(
+        "path",
+        {
+          d,
+          fill: "none",
+          stroke: toolColor,
+          strokeWidth: toolStrokeWidth,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          opacity: toolOpacity
+        },
+        i
+      ))
+    }
+  );
+};
+
 // src/preact/components/annotation-layer.tsx
-var import_jsx_runtime8 = require("preact/jsx-runtime");
-function AnnotationLayer({ pageIndex, scale, style, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var import_jsx_runtime10 = require("preact/jsx-runtime");
+function AnnotationLayer({
+  pageIndex,
+  scale,
+  pageWidth,
+  pageHeight,
+  rotation,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       style: {
@@ -376,8 +1022,9 @@ function AnnotationLayer({ pageIndex, scale, style, ...props }) {
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Annotations, { pageIndex, scale }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextMarkup, { pageIndex, scale })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Annotations, { pageIndex, scale, rotation }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TextMarkup, { pageIndex, scale }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(InkPaint, { pageIndex, scale, pageWidth, pageHeight })
       ]
     }
   );