@embedpdf/plugin-annotation 2.10.1 → 2.11.0

package/dist/react/index.js

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { createContext, useState, useCallback, useContext, useRef, useEffect, useMemo, Fragment as Fragment$1 } from "react";
 import { createPortal } from "react-dom";
 import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/react";
-import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
+import { inferRotationCenterFromRects, boundingRectOrEmpty, PdfAnnotationBorderStyle, getContrastStrokeColor, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, PdfBlendMode, blendModeToCss, PdfAnnotationSubtype } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/react";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
 import { useInteractionHandles, useDoublePressProps, CounterRotate } from "@embedpdf/utils/react";
@@ -1257,9 +1257,11 @@ function GroupSelectionBox({
 function createRenderer(entry) {
   return {
     id: entry.id,
-    matches: (annotation) => entry.matches(annotation),
-    render: (props) => entry.render(props),
+    matches: entry.matches ? (annotation) => entry.matches(annotation) : () => false,
+    render: entry.render ? (props) => entry.render(props) : () => null,
+    matchesPreview: entry.matchesPreview,
     renderPreview: entry.renderPreview ? (props) => entry.renderPreview(props) : void 0,
+    previewContainerStyle: entry.previewContainerStyle ? (props) => entry.previewContainerStyle(props) : void 0,
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
     defaultBlendMode: entry.defaultBlendMode,
@@ -2682,6 +2684,7 @@ const builtInRenderers = [
   createRenderer({
     id: "ink",
     matches: (a) => a.type === PdfAnnotationSubtype.INK,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.INK,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
       Ink,
       {
@@ -2692,12 +2695,17 @@ const builtInRenderers = [
         appearanceActive
       }
     ),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Ink, { isSelected: false, scale, ...data }),
+    previewContainerStyle: ({ data }) => ({
+      mixBlendMode: blendModeToCss(data.blendMode ?? PdfBlendMode.Normal)
+    }),
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   // --- Shapes ---
   createRenderer({
     id: "square",
     matches: (a) => a.type === PdfAnnotationSubtype.SQUARE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.SQUARE,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
       Square,
       {
@@ -2708,11 +2716,13 @@ const builtInRenderers = [
         appearanceActive
       }
     ),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Square, { isSelected: false, scale, ...data }),
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   createRenderer({
     id: "circle",
     matches: (a) => a.type === PdfAnnotationSubtype.CIRCLE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.CIRCLE,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(
       Circle,
       {
@@ -2723,12 +2733,14 @@ const builtInRenderers = [
         appearanceActive
       }
     ),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Circle, { isSelected: false, scale, ...data }),
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true }
   }),
   // --- Lines & Vertex-based ---
   createRenderer({
     id: "line",
     matches: (a) => a.type === PdfAnnotationSubtype.LINE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINE,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       Line,
       {
@@ -2739,6 +2751,7 @@ const builtInRenderers = [
         appearanceActive
       }
     ) }),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Line, { isSelected: false, scale, ...data }),
     vertexConfig: {
       extractVertices: (a) => [a.linePoints.start, a.linePoints.end],
       transformAnnotation: (a, v) => ({
@@ -2751,6 +2764,7 @@ const builtInRenderers = [
   createRenderer({
     id: "polyline",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYLINE,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYLINE,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       Polyline,
       {
@@ -2761,6 +2775,7 @@ const builtInRenderers = [
         appearanceActive
       }
     ) }),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Polyline, { isSelected: false, scale, ...data }),
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -2770,6 +2785,7 @@ const builtInRenderers = [
   createRenderer({
     id: "polygon",
     matches: (a) => a.type === PdfAnnotationSubtype.POLYGON,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.POLYGON,
     render: ({ currentObject, isSelected, scale, onClick, appearanceActive }) => /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(
       Polygon,
       {
@@ -2780,6 +2796,7 @@ const builtInRenderers = [
         appearanceActive
       }
     ) }),
+    renderPreview: ({ data, scale }) => /* @__PURE__ */ jsx(Polygon, { isSelected: false, scale, ...data }),
     vertexConfig: {
       extractVertices: (a) => a.vertices,
       transformAnnotation: (a, vertices) => ({ ...a, vertices })
@@ -2884,6 +2901,7 @@ const builtInRenderers = [
   createRenderer({
     id: "freeText",
     matches: (a) => a.type === PdfAnnotationSubtype.FREETEXT,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.FREETEXT,
     render: ({
       annotation,
       currentObject,
@@ -2907,6 +2925,17 @@ const builtInRenderers = [
         appearanceActive
       }
     ),
+    renderPreview: ({ data }) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          border: `1px dashed ${data.fontColor || "#000000"}`,
+          backgroundColor: "transparent"
+        }
+      }
+    ),
     interactionDefaults: { isDraggable: true, isResizable: true, isRotatable: true },
     isDraggable: (toolDraggable, { isEditing }) => toolDraggable && !isEditing,
     onDoubleClick: (id, setEditingId) => setEditingId(id)
@@ -2933,6 +2962,7 @@ const builtInRenderers = [
   createRenderer({
     id: "link",
     matches: (a) => a.type === PdfAnnotationSubtype.LINK,
+    matchesPreview: (p) => p.type === PdfAnnotationSubtype.LINK,
     render: ({ currentObject, isSelected, scale, onClick }) => /* @__PURE__ */ jsx(
       Link,
       {
@@ -3404,8 +3434,13 @@ function TextMarkup({ documentId, pageIndex, scale }) {
   }
 }
 function PreviewRenderer({ toolId, preview, scale }) {
+  var _a;
   const { bounds } = preview;
   const registeredRenderers = useRegisteredRenderers();
+  const allRenderers = useMemo(() => {
+    const externalIds = new Set(registeredRenderers.map((r) => r.id));
+    return [...registeredRenderers, ...builtInRenderers.filter((r) => !externalIds.has(r.id))];
+  }, [registeredRenderers]);
   const style = {
     position: "absolute",
     left: bounds.origin.x * scale,
@@ -3415,49 +3450,17 @@ function PreviewRenderer({ toolId, preview, scale }) {
     pointerEvents: "none",
     zIndex: 10
   };
-  if (preview.type === PdfAnnotationSubtype.CIRCLE) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Circle, { isSelected: false, scale, ...preview.data }) });
-  }
-  if (preview.type === PdfAnnotationSubtype.SQUARE) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Square, { isSelected: false, scale, ...preview.data }) });
-  }
-  if (preview.type === PdfAnnotationSubtype.POLYGON) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Polygon, { isSelected: false, scale, ...preview.data }) });
-  }
-  if (preview.type === PdfAnnotationSubtype.POLYLINE) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Polyline, { isSelected: false, scale, ...preview.data }) });
-  }
-  if (preview.type === PdfAnnotationSubtype.LINE) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(Line, { isSelected: false, scale, ...preview.data }) });
-  }
-  if (preview.type === PdfAnnotationSubtype.INK) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          ...style,
-          mixBlendMode: blendModeToCss(preview.data.blendMode ?? PdfBlendMode.Normal)
-        },
-        children: /* @__PURE__ */ jsx(Ink, { isSelected: false, scale, ...preview.data })
-      }
-    );
-  }
-  if (preview.type === PdfAnnotationSubtype.FREETEXT) {
-    return /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          width: "100%",
-          height: "100%",
-          border: `1px dashed ${preview.data.fontColor || "#000000"}`,
-          backgroundColor: "transparent"
-        }
-      }
-    ) });
-  }
-  const match = registeredRenderers.find((r) => r.id === toolId && r.renderPreview);
+  const match = allRenderers.find((r) => {
+    var _a2;
+    return ((_a2 = r.matchesPreview) == null ? void 0 : _a2.call(r, preview)) && r.renderPreview;
+  }) ?? allRenderers.find((r) => r.id === toolId && r.renderPreview);
   if (match == null ? void 0 : match.renderPreview) {
-    return /* @__PURE__ */ jsx("div", { style, children: match.renderPreview({ data: preview.data, bounds: preview.bounds, scale }) });
+    const containerExtra = (_a = match.previewContainerStyle) == null ? void 0 : _a.call(match, {
+      data: preview.data,
+      bounds: preview.bounds,
+      scale
+    });
+    return /* @__PURE__ */ jsx("div", { style: { ...style, ...containerExtra }, children: match.renderPreview({ data: preview.data, bounds: preview.bounds, scale }) });
   }
   return null;
 }