@embedpdf/plugin-annotation 1.0.5 → 1.0.7

package/dist/preact/index.cjs

@@ -32,122 +32,170 @@ var import_plugin_annotation = require("@embedpdf/plugin-annotation");
 var useAnnotationPlugin = () => (0, import_preact.usePlugin)(import_plugin_annotation.AnnotationPlugin.id);
 var useAnnotationCapability = () => (0, import_preact.useCapability)(import_plugin_annotation.AnnotationPlugin.id);
 
-// src/preact/components/annotation-layer.tsx
-var import_hooks3 = require("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/preact/components/annotations.tsx
+var import_models = require("@embedpdf/models");
+var import_preact3 = require("@embedpdf/plugin-interaction-manager/preact");
+var import_plugin_annotation2 = require("@embedpdf/plugin-annotation");
+var import_hooks4 = require("preact/hooks");
 
-// src/lib/selectors.ts
-var getAnnotationsByPageIndex = (state, pageIndex) => {
-  return state.annotations[pageIndex] || [];
-};
-
-// src/preact/components/annotations/highlight.tsx
+// src/preact/components/selectable-container.tsx
 var import_hooks = require("preact/hooks");
+var import_preact2 = require("@embedpdf/plugin-selection/preact");
 var import_jsx_runtime = require("preact/jsx-runtime");
-function HighlightAnnotation({
-  annotation,
+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 } = (0, import_preact2.useSelectionCapability)();
   const handleClick = (0, import_hooks.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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  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
+      }
+    )
+  ] });
+}
+
+// src/preact/components/text-markup/highlight.tsx
+var import_jsx_runtime2 = require("preact/jsx-runtime");
+function Highlight({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: rects.map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "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__ */ (0, import_jsx_runtime.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
-var import_preact2 = require("@embedpdf/plugin-interaction-manager/preact");
-var import_jsx_runtime2 = require("preact/jsx-runtime");
-function AnnotationLayer({ pageIndex, scale, style, ...props }) {
+// src/preact/components/text-markup/underline.tsx
+var import_jsx_runtime3 = require("preact/jsx-runtime");
+function Underline({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  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",
+    {
+      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
+var import_jsx_runtime4 = require("preact/jsx-runtime");
+function Strikeout({ color = "#FFFF00", opacity = 0.5, rects, scale }) {
+  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",
+    {
+      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
+var import_jsx_runtime5 = require("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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: rects.map((r, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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
+var import_jsx_runtime6 = require("preact/jsx-runtime");
+function Annotations({ pageIndex, scale }) {
   const { provides: annotationProvides } = useAnnotationCapability();
-  const [annotations, setAnnotations] = (0, import_hooks3.useState)([]);
-  const { register } = (0, import_preact2.usePointerHandlers)({ pageIndex });
-  const [selectionState, setSelectionState] = (0, import_hooks3.useState)({ selectedPageIndex: void 0, selectedAnnotationId: void 0 });
-  (0, import_hooks3.useEffect)(() => {
+  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)(() => {
     if (annotationProvides) {
       annotationProvides.onStateChange((state) => {
-        setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
-        setSelectionState({
-          selectedPageIndex: state.selectedAnnotation?.pageIndex,
-          selectedAnnotationId: state.selectedAnnotation?.annotationId
-        });
+        setAnnotations((0, import_plugin_annotation2.getAnnotationsByPageIndex)(state, pageIndex));
+        setSelectionState((0, import_plugin_annotation2.getSelectedAnnotationByPageIndex)(state, pageIndex));
       });
     }
   }, [annotationProvides]);
-  const handlers = (0, import_hooks3.useMemo)(
+  const handlers = (0, import_hooks4.useMemo)(
     () => ({
       onPointerDown: (_, pe) => {
         if (pe.target === pe.currentTarget && annotationProvides) {
@@ -157,34 +205,180 @@ function AnnotationLayer({ pageIndex, scale, style, ...props }) {
     }),
     [annotationProvides]
   );
-  (0, import_hooks3.useEffect)(() => {
+  (0, import_hooks4.useEffect)(() => {
     return register(handlers);
   }, [register, handlers]);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.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,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Underline,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case import_models.PdfAnnotationSubtype.STRIKEOUT:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Strikeout,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case import_models.PdfAnnotationSubtype.SQUIGGLY:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              Squiggly,
+              {
+                color: annotation.object.color,
+                opacity: annotation.object.opacity,
+                rects: annotation.object.segmentRects,
+                scale
+              }
+            )
+          },
+          annotation.localId
+        );
+      case import_models.PdfAnnotationSubtype.HIGHLIGHT:
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          SelectableAnnotationContainer,
+          {
+            trackedAnnotation: annotation,
+            scale,
+            isSelected,
+            pageIndex,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              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
+var import_models2 = 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");
+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)(() => {
+    if (!selectionProvides) return;
+    const off = selectionProvides.onSelectionChange(() => {
+      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
+    });
+    return off;
+  }, [selectionProvides, pageIndex]);
+  (0, import_hooks5.useEffect)(() => {
+    if (!annotationProvides) return;
+    const off = annotationProvides.onActiveToolChange(setActiveTool);
+    return off;
+  }, [annotationProvides]);
+  switch (activeTool.mode) {
+    case import_models2.PdfAnnotationSubtype.UNDERLINE:
+      return /* @__PURE__ */ (0, import_jsx_runtime7.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,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    case import_models2.PdfAnnotationSubtype.STRIKEOUT:
+      return /* @__PURE__ */ (0, import_jsx_runtime7.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,
+        {
+          color: activeTool.defaults?.color,
+          opacity: activeTool.defaults?.opacity,
+          rects,
+          scale
+        }
+      );
+    default:
+      return null;
+  }
+}
+
+// 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)(
     "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__ */ (0, import_jsx_runtime2.jsx)(
-              HighlightAnnotation,
-              {
-                annotation,
-                scale,
-                isSelected,
-                pageIndex
-              },
-              annotation.id
-            );
-          default:
-            return null;
-        }
-      })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Annotations, { pageIndex, scale }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TextMarkup, { pageIndex, scale })
+      ]
     }
   );
 }