@embedpdf/plugin-annotation 1.4.1 → 2.0.0-next.0

package/dist/react/index.js

@@ -1,9 +1,9 @@
-import { usePlugin, useCapability } from "@embedpdf/core/react";
-import { AnnotationPlugin, initialState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
+import { usePlugin, useCapability, useDocumentState } from "@embedpdf/core/react";
+import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isUnderline, isStrikeout, isSquiggly, isHighlight, isLine, isPolyline, isPolygon, isFreeText, isStamp } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { useState, useEffect, useRef, useMemo, useLayoutEffect, Fragment as Fragment$1, useCallback } from "react";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype } from "@embedpdf/models";
+import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } 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";
@@ -12,21 +12,28 @@ const suppressContentEditableWarningProps = {
 };
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
 const useAnnotationCapability = () => useCapability(AnnotationPlugin.id);
-const useAnnotation = () => {
+const useAnnotation = (documentId) => {
+  var _a;
   const { provides } = useAnnotationCapability();
-  const [state, setState] = useState(initialState({ enabled: true }));
+  const [state, setState] = useState(
+    ((_a = provides == null ? void 0 : provides.forDocument(documentId)) == null ? void 0 : _a.getState()) ?? initialDocumentState()
+  );
   useEffect(() => {
-    return provides == null ? void 0 : provides.onStateChange((action) => {
-      setState(action);
+    if (!provides) return;
+    const scope = provides.forDocument(documentId);
+    setState(scope.getState());
+    return scope.onStateChange((newState) => {
+      setState(newState);
     });
-  }, [provides]);
+  }, [provides, documentId]);
   return {
     state,
-    provides
+    provides: (provides == null ? void 0 : provides.forDocument(documentId)) ?? null
   };
 };
 function AnnotationContainer({
   scale,
+  documentId,
   pageIndex,
   rotation,
   pageWidth,
@@ -51,8 +58,12 @@ function AnnotationContainer({
   ...props
 }) {
   const [preview, setPreview] = useState(trackedAnnotation.object);
-  const { provides: annotationProvides } = useAnnotationCapability();
+  const { provides: annotationCapability } = useAnnotationCapability();
   const gestureBaseRef = useRef(null);
+  const annotationProvides = useMemo(
+    () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
+    [annotationCapability, documentId]
+  );
   const currentObject = preview ? { ...trackedAnnotation.object, ...preview } : trackedAnnotation.object;
   const HANDLE_COLOR = (resizeUI == null ? void 0 : resizeUI.color) ?? "#007ACC";
   const VERTEX_COLOR = (vertexUI == null ? void 0 : vertexUI.color) ?? "#007ACC";
@@ -65,7 +76,7 @@ function AnnotationContainer({
       constraints: {
         minWidth: 10,
         minHeight: 10,
-        boundingBox: { width: pageWidth / scale, height: pageHeight / scale }
+        boundingBox: { width: pageWidth, height: pageHeight }
       },
       maintainAspectRatio: lockAspectRatio,
       pageRotation: rotation,
@@ -80,7 +91,7 @@ function AnnotationContainer({
         const transformType = event.transformData.type;
         const base = gestureBaseRef.current ?? currentObject;
         const changes = event.transformData.changes.vertices ? vertexConfig == null ? void 0 : vertexConfig.transformAnnotation(base, event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
-        const patched = annotationProvides == null ? void 0 : annotationProvides.transformAnnotation(base, {
+        const patched = annotationCapability == null ? void 0 : annotationCapability.transformAnnotation(base, {
           type: transformType,
           changes,
           metadata: event.transformData.metadata
@@ -185,7 +196,7 @@ function AnnotationContainer({
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
+    selectionMenu && /* @__PURE__ */ jsx(
       CounterRotate,
       {
         rect: {
@@ -199,11 +210,17 @@ function AnnotationContainer({
           }
         },
         rotation,
-        children: ({ rect, menuWrapperProps }) => selectionMenu && selectionMenu({
-          annotation: trackedAnnotation,
+        children: (props2) => selectionMenu({
+          ...props2,
+          context: {
+            type: "annotation",
+            annotation: trackedAnnotation,
+            pageIndex
+          },
           selected: isSelected,
-          rect,
-          menuWrapperProps
+          placement: {
+            suggestTop: false
+          }
         })
       }
     )
@@ -993,6 +1010,7 @@ function FreeText({
   );
 }
 function RenderAnnotation({
+  documentId,
   pageIndex,
   annotation,
   scaleFactor = 1,
@@ -1005,7 +1023,7 @@ function RenderAnnotation({
   const { width, height } = annotation.rect.size;
   useEffect(() => {
     if (annotationProvides) {
-      const task = annotationProvides.renderAnnotation({
+      const task = annotationProvides.forDocument(documentId).renderAnnotation({
         pageIndex,
         annotation,
         options: {
@@ -1030,7 +1048,7 @@ function RenderAnnotation({
         }
       };
     }
-  }, [pageIndex, scaleFactor, annotationProvides, annotation.id, width, height]);
+  }, [pageIndex, scaleFactor, annotationProvides, documentId, annotation.id, width, height]);
   const handleImageLoad = () => {
     if (urlRef.current) {
       URL.revokeObjectURL(urlRef.current);
@@ -1052,7 +1070,14 @@ function RenderAnnotation({
     }
   ) });
 }
-function Stamp({ isSelected, annotation, pageIndex, scale, onClick }) {
+function Stamp({
+  isSelected,
+  annotation,
+  documentId,
+  pageIndex,
+  scale,
+  onClick
+}) {
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1069,6 +1094,7 @@ function Stamp({ isSelected, annotation, pageIndex, scale, onClick }) {
       children: /* @__PURE__ */ jsx(
         RenderAnnotation,
         {
+          documentId,
           pageIndex,
           annotation: { ...annotation.object, id: annotation.object.id },
           scaleFactor: scale
@@ -1078,21 +1104,28 @@ function Stamp({ isSelected, annotation, pageIndex, scale, onClick }) {
   );
 }
 function Annotations(annotationsProps) {
-  const { pageIndex, scale, selectionMenu } = annotationsProps;
-  const { provides: annotationProvides } = useAnnotationCapability();
+  const { documentId, pageIndex, scale, selectionMenu } = annotationsProps;
+  const { provides: annotationCapability } = useAnnotationCapability();
   const { provides: selectionProvides } = useSelectionCapability();
   const [annotations, setAnnotations] = useState([]);
-  const { register } = usePointerHandlers({ pageIndex });
+  const { register } = usePointerHandlers({ documentId, pageIndex });
   const [selectionState, setSelectionState] = useState(null);
   const [editingId, setEditingId] = useState(null);
+  const annotationProvides = useMemo(
+    () => annotationCapability ? annotationCapability.forDocument(documentId) : null,
+    [annotationCapability, documentId]
+  );
   useEffect(() => {
     if (annotationProvides) {
-      annotationProvides.onStateChange((state) => {
+      const currentState = annotationProvides.getState();
+      setAnnotations(getAnnotationsByPageIndex(currentState, pageIndex));
+      setSelectionState(getSelectedAnnotationByPageIndex(currentState, pageIndex));
+      return annotationProvides.onStateChange((state) => {
         setAnnotations(getAnnotationsByPageIndex(state, pageIndex));
         setSelectionState(getSelectedAnnotationByPageIndex(state, pageIndex));
       });
     }
-  }, [annotationProvides]);
+  }, [annotationProvides, pageIndex]);
   const handlers = useMemo(
     () => ({
       onPointerDown: (_, pe) => {
@@ -1118,7 +1151,9 @@ function Annotations(annotationsProps) {
     [annotationProvides, selectionProvides, editingId, pageIndex]
   );
   useEffect(() => {
-    return register(handlers);
+    return register(handlers, {
+      documentId
+    });
   }, [register, handlers]);
   return /* @__PURE__ */ jsx(Fragment, { children: annotations.map((annotation) => {
     const isSelected = (selectionState == null ? void 0 : selectionState.object.id) === annotation.object.id;
@@ -1466,6 +1501,7 @@ function Annotations(annotationsProps) {
             {
               isSelected,
               annotation,
+              documentId,
               pageIndex,
               scale,
               onClick: (e) => handleClick(e, annotation)
@@ -1478,7 +1514,7 @@ function Annotations(annotationsProps) {
     return null;
   }) });
 }
-function TextMarkup({ pageIndex, scale }) {
+function TextMarkup({ documentId, pageIndex, scale }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   const { provides: selectionProvides } = useSelectionCapability();
   const { provides: annotationProvides } = useAnnotationCapability();
@@ -1487,17 +1523,16 @@ function TextMarkup({ pageIndex, scale }) {
   const [activeTool, setActiveTool] = useState(null);
   useEffect(() => {
     if (!selectionProvides) return;
-    const off = selectionProvides.onSelectionChange(() => {
-      setRects(selectionProvides.getHighlightRectsForPage(pageIndex));
-      setBoundingRect(selectionProvides.getBoundingRectForPage(pageIndex));
+    return selectionProvides.forDocument(documentId).onSelectionChange(() => {
+      setRects(selectionProvides.forDocument(documentId).getHighlightRectsForPage(pageIndex));
+      setBoundingRect(selectionProvides.forDocument(documentId).getBoundingRectForPage(pageIndex));
     });
-    return off;
-  }, [selectionProvides, pageIndex]);
+  }, [selectionProvides, documentId, pageIndex]);
   useEffect(() => {
     if (!annotationProvides) return;
-    const off = annotationProvides.onActiveToolChange(setActiveTool);
-    return off;
-  }, [annotationProvides]);
+    setActiveTool(annotationProvides.forDocument(documentId).getActiveTool());
+    return annotationProvides.forDocument(documentId).onActiveToolChange((event) => setActiveTool(event));
+  }, [annotationProvides, documentId]);
   if (!boundingRect) return null;
   if (!activeTool || !activeTool.defaults) return null;
   switch (activeTool.defaults.type) {
@@ -1633,7 +1668,7 @@ function PreviewRenderer({ preview, scale }) {
   }
   return null;
 }
-function AnnotationPaintLayer({ pageIndex, scale }) {
+function AnnotationPaintLayer({ documentId, pageIndex, scale }) {
   const { plugin: annotationPlugin } = useAnnotationPlugin();
   const [previews, setPreviews] = useState(/* @__PURE__ */ new Map());
   const fileInputRef = useRef(null);
@@ -1682,7 +1717,7 @@ function AnnotationPaintLayer({ pageIndex, scale }) {
   );
   useEffect(() => {
     if (!annotationPlugin) return;
-    return annotationPlugin.registerPageHandlers(pageIndex, scale, {
+    return annotationPlugin.registerPageHandlers(documentId, pageIndex, scale, {
       services,
       onPreview: (toolId, state) => {
         setPreviews((prev) => {
@@ -1696,7 +1731,7 @@ function AnnotationPaintLayer({ pageIndex, scale }) {
         });
       }
     });
-  }, [pageIndex, scale, annotationPlugin, services]);
+  }, [documentId, pageIndex, scale, annotationPlugin, services]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("input", { ref: fileInputRef, type: "file", style: { display: "none" } }),
     /* @__PURE__ */ jsx("canvas", { ref: canvasRef, style: { display: "none" } }),
@@ -1705,18 +1740,30 @@ function AnnotationPaintLayer({ pageIndex, scale }) {
 }
 function AnnotationLayer({
   style,
+  documentId,
   pageIndex,
-  scale,
+  scale: overrideScale,
+  rotation: overrideRotation,
   selectionMenu,
   resizeUI,
   vertexUI,
-  pageWidth,
-  pageHeight,
-  rotation,
   selectionOutlineColor,
   customAnnotationRenderer,
   ...props
 }) {
+  var _a, _b, _c, _d;
+  const documentState = useDocumentState(documentId);
+  const page = (_b = (_a = documentState == null ? void 0 : documentState.document) == null ? void 0 : _a.pages) == null ? void 0 : _b[pageIndex];
+  const width = ((_c = page == null ? void 0 : page.size) == null ? void 0 : _c.width) ?? 0;
+  const height = ((_d = page == null ? void 0 : page.size) == null ? void 0 : _d.height) ?? 0;
+  const actualScale = useMemo(() => {
+    if (overrideScale !== void 0) return overrideScale;
+    return (documentState == null ? void 0 : documentState.scale) ?? 1;
+  }, [overrideScale, documentState == null ? void 0 : documentState.scale]);
+  const actualRotation = useMemo(() => {
+    if (overrideRotation !== void 0) return overrideRotation;
+    return (documentState == null ? void 0 : documentState.rotation) ?? Rotation.Degree0;
+  }, [overrideRotation, documentState == null ? void 0 : documentState.rotation]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1728,20 +1775,21 @@ function AnnotationLayer({
         /* @__PURE__ */ jsx(
           Annotations,
           {
+            documentId,
             selectionMenu,
             pageIndex,
-            scale,
-            rotation,
-            pageWidth,
-            pageHeight,
+            scale: actualScale,
+            rotation: actualRotation,
+            pageWidth: width,
+            pageHeight: height,
             resizeUI,
             vertexUI,
             selectionOutlineColor,
             customAnnotationRenderer
           }
         ),
-        /* @__PURE__ */ jsx(TextMarkup, { pageIndex, scale }),
-        /* @__PURE__ */ jsx(AnnotationPaintLayer, { pageIndex, scale })
+        /* @__PURE__ */ jsx(TextMarkup, { documentId, pageIndex, scale: actualScale }),
+        /* @__PURE__ */ jsx(AnnotationPaintLayer, { documentId, pageIndex, scale: actualScale })
       ]
     }
   );