@embedpdf/plugin-annotation 2.8.0 → 2.9.0

package/dist/vue/index.js

@@ -1,11 +1,11 @@
 import { createPluginPackage } from "@embedpdf/core";
-import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, patching, resolveInteractionProp, getAnnotationsByPageIndex, getSelectedAnnotationIds, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, inferRotationCenterFromRects, generateCloudyRectanglePath, generateCloudyEllipsePath, patching, generateCloudyPolygonPath, resolveInteractionProp, getAnnotationsByPageIndex, getSelectedAnnotationIds, AnnotationPluginPackage as AnnotationPluginPackage$1 } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
-import { defineComponent, ref, watchEffect, openBlock, createElementBlock, normalizeStyle, createCommentVNode, toValue, watch, computed, shallowRef, toRaw, useSlots, createElementVNode, Fragment, unref, renderSlot, normalizeProps, mergeProps, createBlock, renderList, withCtx, resolveDynamicComponent, Teleport, toDisplayString, markRaw, provide, inject, onUnmounted, onMounted, createVNode, createSlots, guardReactiveProps } from "vue";
+import { defineComponent, ref, watchEffect, openBlock, createElementBlock, normalizeStyle, createCommentVNode, toValue, watch, computed, shallowRef, toRaw, useSlots, createElementVNode, renderSlot, createBlock, Fragment, unref, normalizeProps, mergeProps, renderList, withCtx, resolveDynamicComponent, Teleport, toDisplayString, markRaw, provide, inject, onUnmounted, onMounted, createVNode, createSlots, guardReactiveProps } from "vue";
 import { getCounterRotation } from "@embedpdf/utils";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
 import { useCapability, usePlugin, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, getContrastStrokeColor, PdfAnnotationSubtype, blendModeToCss, PdfBlendMode } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, PdfVerticalAlignment, textAlignmentToCss, standardFontCssProperties, ignore, PdfErrorCode, getContrastStrokeColor, PdfBlendMode, PdfAnnotationSubtype, blendModeToCss } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
 const _hoisted_1$d = ["src"];
@@ -121,6 +121,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     resizeUi: {},
     vertexUi: {},
     rotationUi: {},
+    blendMode: {},
     style: {}
   },
   setup(__props) {
@@ -509,7 +510,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       }
     );
     const contentsStyle = { display: "contents" };
-    const outerAABBStyle = computed(() => ({
+    const layerBaseStyle = computed(() => ({
       position: "absolute",
       left: `${currentObject.value.rect.origin.x * props.scale}px`,
       top: `${currentObject.value.rect.origin.y * props.scale}px`,
@@ -517,8 +518,23 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
       height: `${counterRot.value ? counterRot.value.height : aabbHeight.value}px`,
       pointerEvents: "none",
       zIndex: props.zIndex,
-      ...counterRot.value ? { transform: counterRot.value.matrix, transformOrigin: "0 0" } : {},
-      ...props.style ?? {}
+      ...counterRot.value ? { transform: counterRot.value.matrix, transformOrigin: "0 0" } : {}
+    }));
+    const visualLayerStyle = computed(() => ({
+      ...layerBaseStyle.value,
+      ...props.blendMode ? { mixBlendMode: props.blendMode } : {},
+      ...props.style
+    }));
+    const outerAABBStyle = computed(() => layerBaseStyle.value);
+    const visualInnerStyle = computed(() => ({
+      position: "absolute",
+      left: `${innerLeft.value}px`,
+      top: `${innerTop.value}px`,
+      width: `${innerWidth.value}px`,
+      height: `${innerHeight.value}px`,
+      transform: annotationRotation.value !== 0 ? `rotate(${annotationRotation.value}deg)` : void 0,
+      transformOrigin: innerTransformOrigin.value,
+      pointerEvents: "none"
     }));
     const innerRotatedStyle = computed(() => ({
       position: "absolute",
@@ -630,6 +646,23 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
         "data-no-interaction": "",
         style: contentsStyle
       }, [
+        createElementVNode("div", {
+          style: normalizeStyle(visualLayerStyle.value)
+        }, [
+          createElementVNode("div", {
+            style: normalizeStyle(visualInnerStyle.value)
+          }, [
+            renderSlot(_ctx.$slots, "default", {
+              annotation: childObject.value,
+              appearanceActive: apActive.value
+            }),
+            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$D, {
+              key: 0,
+              appearance: __props.appearance.normal,
+              style: normalizeStyle({ display: apActive.value ? "block" : "none" })
+            }, null, 8, ["appearance", "style"])) : createCommentVNode("", true)
+          ], 4)
+        ], 4),
         createElementVNode("div", {
           style: normalizeStyle(outerAABBStyle.value)
         }, [
@@ -691,16 +724,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
             ], 16))
           ], 32)) : createCommentVNode("", true),
           createElementVNode("div", mergeProps({ ...effectiveIsDraggable.value && __props.isSelected ? unref(dragProps) : {}, ...unref(doubleProps) }, { style: innerRotatedStyle.value }), [
-            renderSlot(_ctx.$slots, "default", {
-              annotation: childObject.value,
-              appearanceActive: apActive.value
-            }),
-            ((_a = __props.appearance) == null ? void 0 : _a.normal) ? (openBlock(), createBlock(_sfc_main$D, {
-              key: 0,
-              appearance: __props.appearance.normal,
-              style: normalizeStyle({ display: apActive.value ? "block" : "none" })
-            }, null, 8, ["appearance", "style"])) : createCommentVNode("", true),
-            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(resize), ({ key, style, ...handle }) => {
+            __props.isSelected && effectiveIsResizable.value && !rotationActive.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
               return openBlock(), createElementBlock(Fragment, { key }, [
                 unref(slots)["resize-handle"] ? renderSlot(_ctx.$slots, "resize-handle", mergeProps({
                   key: 0,
@@ -717,7 +741,7 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
                 }), null, 16))
               ], 64);
             }), 128)) : createCommentVNode("", true),
-            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 2 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
+            __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && !rotationActive.value && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
               return openBlock(), createElementBlock(Fragment, { key }, [
                 unref(slots)["vertex-handle"] ? renderSlot(_ctx.$slots, "vertex-handle", mergeProps({
                   key: 0,
@@ -1367,7 +1391,7 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
             }), 128)) : createCommentVNode("", true)
           ], 16)
         ], 4),
-        shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
+        shouldShowMenu.value && !rotationActive.value ? (openBlock(), createBlock(unref(CounterRotate), {
           key: 0,
           rect: menuRect.value,
           rotation: __props.rotation
@@ -1435,6 +1459,7 @@ function createRenderer(entry) {
     component: markRaw(entry.component),
     vertexConfig: entry.vertexConfig,
     zIndex: entry.zIndex,
+    defaultBlendMode: entry.defaultBlendMode,
     containerStyle: entry.containerStyle,
     interactionDefaults: entry.interactionDefaults,
     useAppearanceStream: entry.useAppearanceStream,
@@ -1557,8 +1582,10 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$9 = ["width", "height", "viewBox"];
-const _hoisted_2$7 = ["x", "y", "width", "height", "stroke-width"];
-const _hoisted_3$7 = ["x", "y", "width", "height", "fill", "opacity"];
+const _hoisted_2$7 = ["d", "stroke-width"];
+const _hoisted_3$7 = ["x", "y", "width", "height", "stroke-width"];
+const _hoisted_4$6 = ["d", "fill", "opacity"];
+const _hoisted_5$5 = ["x", "y", "width", "height", "fill", "opacity"];
 const __default__$c = { inheritAttrs: false };
 const _sfc_main$y = /* @__PURE__ */ defineComponent({
   ...__default__$c,
@@ -1574,11 +1601,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
     rect: {},
     scale: {},
     onClick: {},
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {},
+    rectangleDifferences: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const geometry = computed(() => {
       const outerW = props.rect.size.width;
       const outerH = props.rect.size.height;
@@ -1591,8 +1621,17 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         y: props.strokeWidth / 2
       };
     });
-    const svgWidth = computed(() => (geometry.value.width + props.strokeWidth) * props.scale);
-    const svgHeight = computed(() => (geometry.value.height + props.strokeWidth) * props.scale);
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value) return null;
+      return generateCloudyRectanglePath(
+        { x: 0, y: 0, width: props.rect.size.width, height: props.rect.size.height },
+        props.rectangleDifferences,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
+    const svgWidth = computed(() => props.rect.size.width * props.scale);
+    const svgHeight = computed(() => props.rect.size.height * props.scale);
     const hitStrokeWidth = computed(
       () => Math.max(props.strokeWidth, MIN_HIT_AREA_SCREEN_PX / props.scale)
     );
@@ -1608,14 +1647,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         }),
         width: svgWidth.value,
         height: svgHeight.value,
-        viewBox: `0 0 ${geometry.value.width + __props.strokeWidth} ${geometry.value.height + __props.strokeWidth}`,
+        viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`,
         overflow: "visible"
       }, [
-        createElementVNode("rect", {
-          x: geometry.value.x,
-          y: geometry.value.y,
-          width: geometry.value.width,
-          height: geometry.value.height,
+        isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: cloudyPath.value.path,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
@@ -1625,24 +1662,52 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 44, _hoisted_2$7),
-        !__props.appearanceActive ? (openBlock(), createElementBlock("rect", {
-          key: 0,
+        }, null, 44, _hoisted_2$7)) : (openBlock(), createElementBlock("rect", {
+          key: 1,
           x: geometry.value.x,
           y: geometry.value.y,
           width: geometry.value.width,
           height: geometry.value.height,
-          fill: __props.color,
-          opacity: __props.opacity,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            pointerEvents: "none",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 12, _hoisted_3$7)) : createCommentVNode("", true)
+        }, null, 44, _hoisted_3$7)),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              strokeLinejoin: "round"
+            })
+          }, null, 12, _hoisted_4$6)) : (openBlock(), createElementBlock("rect", {
+            key: 1,
+            x: geometry.value.x,
+            y: geometry.value.y,
+            width: geometry.value.width,
+            height: geometry.value.height,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_5$5))
+        ], 64)) : createCommentVNode("", true)
       ], 12, _hoisted_1$9);
     };
   }
@@ -1672,8 +1737,10 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$8 = ["width", "height", "viewBox"];
-const _hoisted_2$6 = ["cx", "cy", "rx", "ry", "stroke-width"];
-const _hoisted_3$6 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
+const _hoisted_2$6 = ["d", "stroke-width"];
+const _hoisted_3$6 = ["cx", "cy", "rx", "ry", "stroke-width"];
+const _hoisted_4$5 = ["d", "fill", "opacity"];
+const _hoisted_5$4 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
 const __default__$b = { inheritAttrs: false };
 const _sfc_main$w = /* @__PURE__ */ defineComponent({
   ...__default__$b,
@@ -1689,11 +1756,14 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     rect: {},
     scale: {},
     onClick: {},
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {},
+    rectangleDifferences: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const geometry = computed(() => {
       const outerW = props.rect.size.width;
       const outerH = props.rect.size.height;
@@ -1708,6 +1778,15 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         ry: innerH / 2
       };
     });
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value) return null;
+      return generateCloudyEllipsePath(
+        { x: 0, y: 0, width: props.rect.size.width, height: props.rect.size.height },
+        props.rectangleDifferences,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
     const svgWidth = computed(() => geometry.value.width * props.scale);
     const svgHeight = computed(() => geometry.value.height * props.scale);
     const hitStrokeWidth = computed(
@@ -1728,11 +1807,9 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
         viewBox: `0 0 ${geometry.value.width} ${geometry.value.height}`,
         overflow: "visible"
       }, [
-        createElementVNode("ellipse", {
-          cx: geometry.value.cx,
-          cy: geometry.value.cy,
-          rx: geometry.value.rx,
-          ry: geometry.value.ry,
+        isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+          key: 0,
+          d: cloudyPath.value.path,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
@@ -1742,24 +1819,52 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
             cursor: __props.isSelected ? "move" : "pointer",
             pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 44, _hoisted_2$6),
-        !__props.appearanceActive ? (openBlock(), createElementBlock("ellipse", {
-          key: 0,
+        }, null, 44, _hoisted_2$6)) : (openBlock(), createElementBlock("ellipse", {
+          key: 1,
           cx: geometry.value.cx,
           cy: geometry.value.cy,
           rx: geometry.value.rx,
           ry: geometry.value.ry,
-          fill: __props.color,
-          opacity: __props.opacity,
+          fill: "transparent",
+          stroke: "transparent",
+          "stroke-width": hitStrokeWidth.value,
+          onPointerdown: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => __props.onClick && __props.onClick(...args)),
           style: normalizeStyle({
-            pointerEvents: "none",
-            stroke: __props.strokeColor ?? __props.color,
-            strokeWidth: __props.strokeWidth,
-            ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-              strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-            }
+            cursor: __props.isSelected ? "move" : "pointer",
+            pointerEvents: __props.isSelected ? "none" : __props.color === "transparent" ? "visibleStroke" : "visible"
           })
-        }, null, 12, _hoisted_3$6)) : createCommentVNode("", true)
+        }, null, 44, _hoisted_3$6)),
+        !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              strokeLinejoin: "round"
+            })
+          }, null, 12, _hoisted_4$5)) : (openBlock(), createElementBlock("ellipse", {
+            key: 1,
+            cx: geometry.value.cx,
+            cy: geometry.value.cy,
+            rx: geometry.value.rx,
+            ry: geometry.value.ry,
+            fill: __props.color,
+            opacity: __props.opacity,
+            style: normalizeStyle({
+              pointerEvents: "none",
+              stroke: __props.strokeColor ?? __props.color,
+              strokeWidth: __props.strokeWidth,
+              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+              }
+            })
+          }, null, 12, _hoisted_5$4))
+        ], 64)) : createCommentVNode("", true)
       ], 12, _hoisted_1$8);
     };
   }
@@ -1793,7 +1898,7 @@ const _hoisted_2$5 = ["x1", "y1", "x2", "y2", "stroke-width"];
 const _hoisted_3$5 = ["d", "transform", "stroke-width"];
 const _hoisted_4$4 = ["d", "transform", "stroke-width"];
 const _hoisted_5$3 = ["x1", "y1", "x2", "y2", "opacity"];
-const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
+const _hoisted_6$2 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7$1 = ["d", "transform", "stroke", "fill"];
 const __default__$a = { inheritAttrs: false };
 const _sfc_main$u = /* @__PURE__ */ defineComponent({
@@ -1934,7 +2039,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 strokeDasharray: (_b = __props.strokeDashArray) == null ? void 0 : _b.join(",")
               }
             })
-          }, null, 12, _hoisted_6$1)) : createCommentVNode("", true),
+          }, null, 12, _hoisted_6$2)) : createCommentVNode("", true),
           endings.value.end ? (openBlock(), createElementBlock("path", {
             key: 1,
             d: endings.value.end.d,
@@ -1984,7 +2089,7 @@ const _hoisted_2$4 = ["d", "stroke-width"];
 const _hoisted_3$4 = ["d", "transform", "stroke-width"];
 const _hoisted_4$3 = ["d", "transform", "stroke-width"];
 const _hoisted_5$2 = ["d", "opacity"];
-const _hoisted_6 = ["d", "transform", "stroke", "fill"];
+const _hoisted_6$1 = ["d", "transform", "stroke", "fill"];
 const _hoisted_7 = ["d", "transform", "stroke", "fill"];
 const __default__$9 = { inheritAttrs: false };
 const _sfc_main$s = /* @__PURE__ */ defineComponent({
@@ -2139,7 +2244,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
                 strokeDasharray: (_b = __props.strokeDashArray) == null ? void 0 : _b.join(",")
               }
             })
-          }, null, 12, _hoisted_6)) : createCommentVNode("", true),
+          }, null, 12, _hoisted_6$1)) : createCommentVNode("", true),
           endings.value.end ? (openBlock(), createElementBlock("path", {
             key: 1,
             d: endings.value.end.d,
@@ -2187,8 +2292,9 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
 const _hoisted_1$5 = ["width", "height", "viewBox"];
 const _hoisted_2$3 = ["d", "stroke-width"];
 const _hoisted_3$3 = ["d", "opacity"];
-const _hoisted_4$2 = ["d"];
-const _hoisted_5$1 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
+const _hoisted_4$2 = ["d", "opacity"];
+const _hoisted_5$1 = ["d"];
+const _hoisted_6 = ["x", "y", "width", "height", "fill", "stroke", "stroke-width"];
 const __default__$8 = { inheritAttrs: false };
 const _sfc_main$q = /* @__PURE__ */ defineComponent({
   ...__default__$8,
@@ -2207,11 +2313,13 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
     onClick: {},
     currentVertex: {},
     handleSize: { default: 14 },
-    appearanceActive: { type: Boolean, default: false }
+    appearanceActive: { type: Boolean, default: false },
+    cloudyBorderIntensity: {}
   },
   setup(__props) {
     const MIN_HIT_AREA_SCREEN_PX = 20;
     const props = __props;
+    const isCloudy = computed(() => (props.cloudyBorderIntensity ?? 0) > 0);
     const allPoints = computed(
       () => props.currentVertex ? [...props.vertices, props.currentVertex] : props.vertices
     );
@@ -2227,6 +2335,15 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
       const isPreview = !!props.currentVertex;
       return (`M ${first.x} ${first.y} ` + rest.map((p) => `L ${p.x} ${p.y}`).join(" ") + (isPreview ? "" : " Z")).trim();
     });
+    const cloudyPath = computed(() => {
+      if (!isCloudy.value || allPoints.value.length < 3) return null;
+      return generateCloudyPolygonPath(
+        allPoints.value,
+        props.rect.origin,
+        props.cloudyBorderIntensity,
+        props.strokeWidth
+      );
+    });
     const isPreviewing = computed(() => props.currentVertex && props.vertices.length > 0);
     const width = computed(() => props.rect.size.width * props.scale);
     const height = computed(() => props.rect.size.height * props.scale);
@@ -2249,7 +2366,7 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         viewBox: `0 0 ${__props.rect.size.width} ${__props.rect.size.height}`
       }, [
         createElementVNode("path", {
-          d: pathData.value,
+          d: isCloudy.value && cloudyPath.value ? cloudyPath.value.path : pathData.value,
           fill: "transparent",
           stroke: "transparent",
           "stroke-width": hitStrokeWidth.value,
@@ -2263,45 +2380,58 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
           })
         }, null, 44, _hoisted_2$3),
         !__props.appearanceActive ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("path", {
-            d: pathData.value,
+          isCloudy.value && cloudyPath.value ? (openBlock(), createElementBlock("path", {
+            key: 0,
+            d: cloudyPath.value.path,
             opacity: __props.opacity,
             style: normalizeStyle({
-              fill: __props.currentVertex ? "none" : __props.color,
+              fill: __props.color,
               stroke: __props.strokeColor ?? __props.color,
               strokeWidth: __props.strokeWidth,
               pointerEvents: "none",
-              strokeLinecap: "butt",
-              strokeLinejoin: "miter",
-              ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
-                strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
-              }
+              strokeLinejoin: "round"
             })
-          }, null, 12, _hoisted_3$3),
-          isPreviewing.value && localPts.value.length > 1 ? (openBlock(), createElementBlock("path", {
-            key: 0,
-            d: `M ${localPts.value[localPts.value.length - 1].x} ${localPts.value[localPts.value.length - 1].y} L ${localPts.value[0].x} ${localPts.value[0].y}`,
-            fill: "none",
-            style: normalizeStyle({
+          }, null, 12, _hoisted_3$3)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+            createElementVNode("path", {
+              d: pathData.value,
+              opacity: __props.opacity,
+              style: normalizeStyle({
+                fill: __props.currentVertex ? "none" : __props.color,
+                stroke: __props.strokeColor ?? __props.color,
+                strokeWidth: __props.strokeWidth,
+                pointerEvents: "none",
+                strokeLinecap: "butt",
+                strokeLinejoin: "miter",
+                ...__props.strokeStyle === unref(PdfAnnotationBorderStyle).DASHED && {
+                  strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
+                }
+              })
+            }, null, 12, _hoisted_4$2),
+            isPreviewing.value && localPts.value.length > 1 ? (openBlock(), createElementBlock("path", {
+              key: 0,
+              d: `M ${localPts.value[localPts.value.length - 1].x} ${localPts.value[localPts.value.length - 1].y} L ${localPts.value[0].x} ${localPts.value[0].y}`,
+              fill: "none",
+              style: normalizeStyle({
+                stroke: __props.strokeColor,
+                strokeWidth: __props.strokeWidth,
+                strokeDasharray: "4,4",
+                opacity: 0.7,
+                pointerEvents: "none"
+              })
+            }, null, 12, _hoisted_5$1)) : createCommentVNode("", true),
+            isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
+              key: 1,
+              x: localPts.value[0].x - __props.handleSize / __props.scale / 2,
+              y: localPts.value[0].y - __props.handleSize / __props.scale / 2,
+              width: __props.handleSize / __props.scale,
+              height: __props.handleSize / __props.scale,
+              fill: __props.strokeColor,
+              opacity: 0.4,
               stroke: __props.strokeColor,
-              strokeWidth: __props.strokeWidth,
-              strokeDasharray: "4,4",
-              opacity: 0.7,
-              pointerEvents: "none"
-            })
-          }, null, 12, _hoisted_4$2)) : createCommentVNode("", true),
-          isPreviewing.value && localPts.value.length >= 2 ? (openBlock(), createElementBlock("rect", {
-            key: 1,
-            x: localPts.value[0].x - __props.handleSize / __props.scale / 2,
-            y: localPts.value[0].y - __props.handleSize / __props.scale / 2,
-            width: __props.handleSize / __props.scale,
-            height: __props.handleSize / __props.scale,
-            fill: __props.strokeColor,
-            opacity: 0.4,
-            stroke: __props.strokeColor,
-            "stroke-width": __props.strokeWidth / 2,
-            style: { "pointer-events": "none" }
-          }, null, 8, _hoisted_5$1)) : createCommentVNode("", true)
+              "stroke-width": __props.strokeWidth / 2,
+              style: { "pointer-events": "none" }
+            }, null, 8, _hoisted_6)) : createCommentVNode("", true)
+          ], 64))
         ], 64)) : createCommentVNode("", true)
       ], 12, _hoisted_1$5);
     };
@@ -2699,7 +2829,10 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           width: width.value,
           height: height.value,
           fill: "transparent",
-          onPointerdown: _cache[0] || (_cache[0] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => {
+            var _a;
+            return __props.hasIRT ? void 0 : (_a = __props.onClick) == null ? void 0 : _a.call(__props, $event);
+          }),
           style: normalizeStyle({
             cursor: hitAreaCursor.value,
             pointerEvents: hitAreaPointerEvents.value
@@ -3311,9 +3444,7 @@ const builtInRenderers = [
     component: _sfc_main$g,
     zIndex: 0,
     interactionDefaults: { isDraggable: false, isResizable: false, isRotatable: false },
-    containerStyle: (a) => ({
-      mixBlendMode: blendModeToCss(a.blendMode ?? PdfBlendMode.Multiply)
-    })
+    defaultBlendMode: PdfBlendMode.Multiply
   }),
   createRenderer({
     id: "underline",
@@ -3663,11 +3794,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         renderer.onDoubleClick(annotation.object.id, setEditingId);
       };
     };
-    const getContainerStyle = (annotation, renderer) => {
-      var _a;
-      return ((_a = renderer.containerStyle) == null ? void 0 : _a.call(renderer, annotation.object)) ?? {
-        mixBlendMode: blendModeToCss(annotation.object.blendMode ?? PdfBlendMode.Normal)
-      };
+    const getBlendMode = (annotation, renderer) => {
+      return blendModeToCss(
+        annotation.object.blendMode ?? renderer.defaultBlendMode ?? PdfBlendMode.Normal
+      );
     };
     const getAppearance = (annotation, renderer) => {
       var _a, _b;
@@ -3688,6 +3818,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(resolvedAnnotations.value, ({ annotation, renderer }) => {
+          var _a;
           return openBlock(), createElementBlock(Fragment, {
             key: annotation.object.id
           }, [
@@ -3706,7 +3837,8 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               onSelect: getOnSelect(annotation, renderer),
               onDoubleClick: getOnDoubleClick(renderer, annotation),
               zIndex: renderer.zIndex,
-              style: getContainerStyle(annotation, renderer),
+              blendMode: getBlendMode(annotation, renderer),
+              style: (_a = renderer.containerStyle) == null ? void 0 : _a.call(renderer, annotation.object),
               appearance: getAppearance(annotation, renderer)
             }, { ref_for: true }, containerProps.value), createSlots({
               default: withCtx(({ annotation: currentObject, appearanceActive }) => [
@@ -3740,7 +3872,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
                 ]),
                 key: "0"
               } : void 0
-            ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "style", "appearance"])) : createCommentVNode("", true)
+            ]), 1040, ["trackedAnnotation", "isSelected", "isEditing", "isMultiSelected", "isDraggable", "isResizable", "lockAspectRatio", "isRotatable", "vertexConfig", "selectionMenu", "onSelect", "onDoubleClick", "zIndex", "blendMode", "style", "appearance"])) : createCommentVNode("", true)
           ], 64);
         }), 128)),
         allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$B, {
@@ -3863,15 +3995,21 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const style = computed(() => ({
-      position: "absolute",
-      left: `${props.preview.bounds.origin.x * props.scale}px`,
-      top: `${props.preview.bounds.origin.y * props.scale}px`,
-      width: `${props.preview.bounds.size.width * props.scale}px`,
-      height: `${props.preview.bounds.size.height * props.scale}px`,
-      pointerEvents: "none",
-      zIndex: 10
-    }));
+    const style = computed(() => {
+      const base = {
+        position: "absolute",
+        left: `${props.preview.bounds.origin.x * props.scale}px`,
+        top: `${props.preview.bounds.origin.y * props.scale}px`,
+        width: `${props.preview.bounds.size.width * props.scale}px`,
+        height: `${props.preview.bounds.size.height * props.scale}px`,
+        pointerEvents: "none",
+        zIndex: 10
+      };
+      if (props.preview.type === PdfAnnotationSubtype.INK) {
+        base.mixBlendMode = blendModeToCss(props.preview.data.blendMode ?? PdfBlendMode.Normal);
+      }
+      return base;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)