@embedpdf/plugin-annotation 1.0.5 → 1.0.7

package/dist/preact/index.js

@@ -4,118 +4,169 @@ import { AnnotationPlugin } from "@embedpdf/plugin-annotation";
 var useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 var useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
 
-// src/preact/components/annotation-layer.tsx
-import { useEffect, useMemo, useState } from "preact/hooks";
-
-// ../models/dist/index.js
-var PdfAnnotationSubtype = /* @__PURE__ */ ((PdfAnnotationSubtype2) => {
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["UNKNOWN"] = 0] = "UNKNOWN";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["TEXT"] = 1] = "TEXT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["LINK"] = 2] = "LINK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["FREETEXT"] = 3] = "FREETEXT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["LINE"] = 4] = "LINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SQUARE"] = 5] = "SQUARE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["CIRCLE"] = 6] = "CIRCLE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POLYGON"] = 7] = "POLYGON";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POLYLINE"] = 8] = "POLYLINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["HIGHLIGHT"] = 9] = "HIGHLIGHT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["UNDERLINE"] = 10] = "UNDERLINE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SQUIGGLY"] = 11] = "SQUIGGLY";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["STRIKEOUT"] = 12] = "STRIKEOUT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["STAMP"] = 13] = "STAMP";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["CARET"] = 14] = "CARET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["INK"] = 15] = "INK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["POPUP"] = 16] = "POPUP";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["FILEATTACHMENT"] = 17] = "FILEATTACHMENT";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SOUND"] = 18] = "SOUND";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["MOVIE"] = 19] = "MOVIE";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["WIDGET"] = 20] = "WIDGET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["SCREEN"] = 21] = "SCREEN";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["PRINTERMARK"] = 22] = "PRINTERMARK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["TRAPNET"] = 23] = "TRAPNET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["WATERMARK"] = 24] = "WATERMARK";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["THREED"] = 25] = "THREED";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["RICHMEDIA"] = 26] = "RICHMEDIA";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["XFAWIDGET"] = 27] = "XFAWIDGET";
-  PdfAnnotationSubtype2[PdfAnnotationSubtype2["REDACT"] = 28] = "REDACT";
-  return PdfAnnotationSubtype2;
-})(PdfAnnotationSubtype || {});
-
-// src/lib/selectors.ts
-var getAnnotationsByPageIndex = (state, pageIndex) => {
-  return state.annotations[pageIndex] || [];
-};
+// src/preact/components/annotations.tsx
+import { PdfAnnotationSubtype } from "@embedpdf/models";
+import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
+import {
+  getAnnotationsByPageIndex,
+  getSelectedAnnotationByPageIndex
+} from "@embedpdf/plugin-annotation";
+import { useMemo, useState, useEffect } from "preact/hooks";
 
-// src/preact/components/annotations/highlight.tsx
+// src/preact/components/selectable-container.tsx
 import { useCallback } from "preact/hooks";
-import { Fragment, jsx } from "preact/jsx-runtime";
-function HighlightAnnotation({
-  annotation,
+import { useSelectionCapability } from "@embedpdf/plugin-selection/preact";
+import { Fragment, jsx, jsxs } from "preact/jsx-runtime";
+function SelectableAnnotationContainer({
+  trackedAnnotation,
   scale,
   isSelected = false,
-  pageIndex
+  pageIndex,
+  children
 }) {
   const { provides: annotationProvides } = useAnnotationCapability();
-  const highlightColor = annotation.color || { red: 255, green: 255, blue: 0, alpha: 76 };
-  const rgbaColor = `rgba(${highlightColor.red}, ${highlightColor.green}, ${highlightColor.blue}, ${highlightColor.alpha / 255})`;
+  const { provides: selectionProvides } = useSelectionCapability();
   const handleClick = useCallback(
     (e) => {
       e.stopPropagation();
-      if (annotationProvides) {
-        annotationProvides.selectAnnotation(pageIndex, annotation.id);
+      if (annotationProvides && selectionProvides) {
+        annotationProvides.selectAnnotation(pageIndex, trackedAnnotation.localId);
+        selectionProvides.clear();
       }
     },
-    [annotationProvides, isSelected, pageIndex, annotation.id]
+    [annotationProvides, selectionProvides, isSelected, pageIndex, trackedAnnotation.localId]
   );
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ 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
+      }
+    )
+  ] });
+}
+
+// src/preact/components/text-markup/highlight.tsx
+import { Fragment as Fragment2, jsx as jsx2 } from "preact/jsx-runtime";
+function Highlight({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  return /* @__PURE__ */ jsx2(Fragment2, { children: rects.map((b, i) => /* @__PURE__ */ jsx2(
     "div",
     {
-      className: "highlight-annotation",
       style: {
         position: "absolute",
-        mixBlendMode: "multiply",
-        cursor: "pointer",
-        outline: isSelected ? "2px solid #007ACC" : "none",
-        left: `${annotation.rect.origin.x * scale}px`,
-        top: `${annotation.rect.origin.y * scale}px`,
-        width: `${annotation.rect.size.width * scale}px`,
-        height: `${annotation.rect.size.height * scale}px`
-      },
-      onMouseDown: handleClick,
-      children: annotation.segmentRects.map((rect, index) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: `${(rect.origin.x - annotation.rect.origin.x) * scale}px`,
-            top: `${(rect.origin.y - annotation.rect.origin.y) * scale}px`,
-            width: `${rect.size.width * scale}px`,
-            height: `${rect.size.height * scale}px`,
-            backgroundColor: rgbaColor
-          }
-        },
-        index
-      ))
-    }
-  ) });
+        left: b.origin.x * scale,
+        top: b.origin.y * scale,
+        width: b.size.width * scale,
+        height: b.size.height * scale,
+        background: color,
+        opacity,
+        pointerEvents: "none"
+      }
+    },
+    i
+  )) });
 }
 
-// src/preact/components/annotation-layer.tsx
-import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/preact";
-import { jsx as jsx2 } from "preact/jsx-runtime";
-function AnnotationLayer({ pageIndex, scale, style, ...props }) {
+// src/preact/components/text-markup/underline.tsx
+import { Fragment as Fragment3, jsx as jsx3 } from "preact/jsx-runtime";
+function Underline({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx3(Fragment3, { children: rects.map((r, i) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: r.origin.x * scale,
+        top: (r.origin.y + r.size.height) * scale - thickness,
+        width: r.size.width * scale,
+        height: thickness,
+        background: color,
+        opacity,
+        pointerEvents: "none"
+      }
+    },
+    i
+  )) });
+}
+
+// src/preact/components/text-markup/strikeout.tsx
+import { Fragment as Fragment4, jsx as jsx4 } from "preact/jsx-runtime";
+function Strikeout({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  const thickness = 2 * scale;
+  return /* @__PURE__ */ jsx4(Fragment4, { children: rects.map((r, i) => /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: r.origin.x * scale,
+        top: (r.origin.y + r.size.height / 2) * scale - thickness / 2,
+        width: r.size.width * scale,
+        height: thickness,
+        background: color,
+        opacity,
+        pointerEvents: "none"
+      }
+    },
+    i
+  )) });
+}
+
+// src/preact/components/text-markup/squiggly.tsx
+import { Fragment as Fragment5, jsx as jsx5 } from "preact/jsx-runtime";
+function Squiggly({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  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__ */ jsx5(Fragment5, { children: rects.map((r, i) => /* @__PURE__ */ jsx5(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        left: r.origin.x * scale,
+        top: (r.origin.y + r.size.height) * scale - amplitude,
+        width: r.size.width * scale,
+        height: amplitude * 2,
+        backgroundImage: svgDataUri,
+        backgroundRepeat: "repeat-x",
+        backgroundSize: `${period}px ${amplitude * 2}px`,
+        opacity,
+        pointerEvents: "none"
+      }
+    },
+    i
+  )) });
+}
+
+// src/preact/components/annotations.tsx
+import { Fragment as Fragment6, jsx as jsx6 } from "preact/jsx-runtime";
+function Annotations({ pageIndex, scale }) {
   const { provides: annotationProvides } = useAnnotationCapability();
   const [annotations, setAnnotations] = useState([]);
   const { register } = usePointerHandlers({ pageIndex });
-  const [selectionState, setSelectionState] = useState({ selectedPageIndex: void 0, selectedAnnotationId: void 0 });
+  const [selectionState, setSelectionState] = useState(null);
   useEffect(() => {
     if (annotationProvides) {
       annotationProvides.onStateChange((state) => {
         setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setSelectionState({
-          selectedPageIndex: state.selectedAnnotation?.pageIndex,
-          selectedAnnotationId: state.selectedAnnotation?.annotationId
-        });
+        setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
       });
     }
   }, [annotationProvides]);
@@ -132,31 +183,177 @@ function AnnotationLayer({ pageIndex, scale, style, ...props }) {
   useEffect(() => {
     return register(handlers);
   }, [register, handlers]);
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx6(Fragment6, { children: annotations.map((annotation) => {
+    const isSelected = selectionState?.localId === annotation.localId;
+    switch (annotation.object.type) {
+      case PdfAnnotationSubtype.UNDERLINE:
+        return /* @__PURE__ */ jsx6(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ jsx6(
+              Underline,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.STRIKEOUT:
+        return /* @__PURE__ */ jsx6(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ jsx6(
+              Strikeout,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.SQUIGGLY:
+        return /* @__PURE__ */ jsx6(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ jsx6(
+              Squiggly,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case PdfAnnotationSubtype.HIGHLIGHT:
+        return /* @__PURE__ */ jsx6(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ jsx6(
+              Highlight,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      default:
+        return null;
+    }
+  }) });
+}
+
+// src/preact/components/text-markup.tsx
+import { PdfAnnotationSubtype as PdfAnnotationSubtype2 } from "@embedpdf/models";
+import { useSelectionCapability as useSelectionCapability2 } from "@embedpdf/plugin-selection/preact";
+import { useEffect as useEffect2, useState as useState2 } from "preact/hooks";
+import { jsx as jsx7 } from "preact/jsx-runtime";
+function TextMarkup({ pageIndex, scale }) {
+  const { provides: selectionProvides } = useSelectionCapability2();
+  const { provides: annotationProvides } = useAnnotationCapability();
+  const [rects, setRects] = useState2([]);
+  const [activeTool, setActiveTool] = useState2({ mode: null, defaults: null });
+  useEffect2(() => {
+    if (!selectionProvides) return;
+    const off = selectionProvides.onSelectionChange(() => {
+      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+    });
+    return off;
+  }, [selectionProvides, pageIndex]);
+  useEffect2(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  switch (activeTool.mode) {
+    case PdfAnnotationSubtype2.UNDERLINE:
+      return /* @__PURE__ */ jsx7(
+        Underline,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    case PdfAnnotationSubtype2.HIGHLIGHT:
+      return /* @__PURE__ */ jsx7(
+        Highlight,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    case PdfAnnotationSubtype2.STRIKEOUT:
+      return /* @__PURE__ */ jsx7(
+        Strikeout,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    case PdfAnnotationSubtype2.SQUIGGLY:
+      return /* @__PURE__ */ jsx7(
+        Squiggly,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    default:
+      return null;
+  }
+}
+
+// src/preact/components/annotation-layer.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "preact/jsx-runtime";
+function AnnotationLayer({ pageIndex, scale, style, ...props }) {
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       style: {
         ...style
       },
       ...props,
-      children: annotations.map((annotation) => {
-        const isSelected = selectionState.selectedPageIndex === pageIndex && selectionState.selectedAnnotationId === annotation.id;
-        switch (annotation.type) {
-          case PdfAnnotationSubtype.HIGHLIGHT:
-            return /* @__PURE__ */ jsx2(
-              HighlightAnnotation,
-              {
-                annotation,
-                scale,
-                isSelected,
-                pageIndex
-              },
-              annotation.id
-            );
-          default:
-            return null;
-        }
-      })
+      children: [
+        /* @__PURE__ */ jsx8(Annotations, { pageIndex, scale }),
+        /* @__PURE__ */ jsx8(TextMarkup, { pageIndex, scale })
+      ]
     }
   );
 }