@embedpdf/plugin-annotation 2.2.0 → 2.3.0

package/dist/vue/index.js

@@ -1,9 +1,9 @@
-import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, useSlots, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, mergeProps, unref, renderSlot, Fragment, renderList, withCtx, resolveDynamicComponent, normalizeStyle, onMounted, toDisplayString, onUnmounted, createVNode, watchEffect, normalizeProps, guardReactiveProps } from "vue";
+import { ref, toValue, watch, computed, defineComponent, shallowRef, toRaw, useSlots, watchEffect, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, mergeProps, unref, renderSlot, Fragment, renderList, withCtx, resolveDynamicComponent, normalizeStyle, onMounted, toDisplayString, onUnmounted, createVNode, createSlots, normalizeProps, guardReactiveProps } from "vue";
 import { usePlugin, useCapability, useDocumentPermissions, useDocumentState } from "@embedpdf/core/vue";
-import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationByPageIndex, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight } from "@embedpdf/plugin-annotation";
+import { AnnotationPlugin, initialDocumentState, patching, getAnnotationsByPageIndex, getSelectedAnnotationIds, isInk, isSquare, isCircle, isLine, isPolyline, isPolygon, isFreeText, isStamp, isUnderline, isStrikeout, isSquiggly, isHighlight, isLink } from "@embedpdf/plugin-annotation";
 export * from "@embedpdf/plugin-annotation";
 import { useInteractionHandles, useDoublePressProps, CounterRotate, deepToRaw } from "@embedpdf/utils/vue";
-import { PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
+import { boundingRectOrEmpty, PdfAnnotationBorderStyle, textAlignmentToCss, standardFontCss, PdfVerticalAlignment, ignore, PdfErrorCode, blendModeToCss, PdfBlendMode, PdfAnnotationSubtype, Rotation } from "@embedpdf/models";
 import { usePointerHandlers } from "@embedpdf/plugin-interaction-manager/vue";
 import { useSelectionCapability } from "@embedpdf/plugin-selection/vue";
 const useAnnotationPlugin = () => usePlugin(AnnotationPlugin.id);
@@ -36,14 +36,14 @@ const useAnnotation = (documentId) => {
     })
   };
 };
-const _hoisted_1$8 = {
+const _hoisted_1$a = {
   "data-no-interaction": "",
   style: { display: "contents" }
 };
 const __default__ = {
   inheritAttrs: false
 };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   ...__default__,
   __name: "annotation-container",
   props: {
@@ -55,6 +55,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     pageHeight: {},
     trackedAnnotation: {},
     isSelected: { type: Boolean },
+    isMultiSelected: { type: Boolean, default: false },
     isDraggable: { type: Boolean },
     isResizable: { type: Boolean },
     lockAspectRatio: { type: Boolean, default: false },
@@ -75,13 +76,15 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const VERTEX_SIZE = 12;
     const preview = shallowRef(toRaw(props.trackedAnnotation.object));
     const { provides: annotationCapability } = useAnnotationCapability();
+    const { plugin: annotationPlugin } = useAnnotationPlugin();
     const permissions = useDocumentPermissions(props.documentId);
     const gestureBaseRef = ref(null);
+    const gestureBaseRectRef = shallowRef(null);
     const effectiveIsDraggable = computed(
-      () => permissions.value.canModifyAnnotations && props.isDraggable
+      () => permissions.value.canModifyAnnotations && props.isDraggable && !props.isMultiSelected
     );
     const effectiveIsResizable = computed(
-      () => permissions.value.canModifyAnnotations && props.isResizable
+      () => permissions.value.canModifyAnnotations && props.isResizable && !props.isMultiSelected
     );
     const guardedOnDoubleClick = props.onDoubleClick ? (e) => {
       var _a;
@@ -95,8 +98,9 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const currentObject = computed(
       () => ({ ...toRaw(props.trackedAnnotation.object), ...toRaw(preview.value) })
     );
+    const showOutline = computed(() => props.isSelected && !props.isMultiSelected);
     const shouldShowMenu = computed(() => {
-      return props.isSelected && (props.selectionMenu || slots["selection-menu"]);
+      return props.isSelected && !props.isMultiSelected && (props.selectionMenu || slots["selection-menu"]);
     });
     const menuRect = computed(() => ({
       origin: {
@@ -154,30 +158,60 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
         maintainAspectRatio: computed(() => props.lockAspectRatio),
         pageRotation: computed(() => props.rotation),
         scale: computed(() => props.scale),
-        enabled: computed(() => props.isSelected),
+        // Disable interaction handles when multi-selected
+        enabled: computed(() => props.isSelected && !props.isMultiSelected),
         onUpdate: (event) => {
-          var _a, _b, _c, _d;
-          if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+          var _a, _b, _c;
+          if (!((_a = event.transformData) == null ? void 0 : _a.type) || props.isMultiSelected) return;
+          const plugin = annotationPlugin.value;
+          if (!plugin) return;
+          const { type, changes, metadata } = event.transformData;
+          const id = props.trackedAnnotation.object.id;
+          const pageSize = { width: props.pageWidth, height: props.pageHeight };
           if (event.state === "start") {
+            gestureBaseRectRef.value = props.trackedAnnotation.object.rect;
             gestureBaseRef.value = currentObject.value;
+            if (type === "move") {
+              plugin.startDrag(props.documentId, { annotationIds: [id], pageSize });
+            } else if (type === "resize") {
+              plugin.startResize(props.documentId, {
+                annotationIds: [id],
+                pageSize,
+                resizeHandle: (metadata == null ? void 0 : metadata.handle) ?? "se"
+              });
+            }
           }
-          const base = gestureBaseRef.value ?? currentObject.value;
-          const changes = event.transformData.changes.vertices ? (_b = props.vertexConfig) == null ? void 0 : _b.transformAnnotation(toRaw(base), event.transformData.changes.vertices) : { rect: event.transformData.changes.rect };
-          const patched = (_c = annotationCapability.value) == null ? void 0 : _c.transformAnnotation(base, {
-            type: event.transformData.type,
-            changes,
-            metadata: event.transformData.metadata
-          });
-          if (patched) {
-            preview.value = { ...toRaw(preview.value), ...patched };
+          if (changes.rect && gestureBaseRectRef.value) {
+            if (type === "move") {
+              const delta = {
+                x: changes.rect.origin.x - gestureBaseRectRef.value.origin.x,
+                y: changes.rect.origin.y - gestureBaseRectRef.value.origin.y
+              };
+              plugin.updateDrag(props.documentId, delta);
+            } else if (type === "resize") {
+              plugin.updateResize(props.documentId, changes.rect);
+            }
           }
-          if (event.state === "end" && patched) {
+          if (type === "vertex-edit" && changes.vertices && props.vertexConfig) {
+            const base = gestureBaseRef.value ?? currentObject.value;
+            const vertexChanges = props.vertexConfig.transformAnnotation(toRaw(base), changes.vertices);
+            const patched = (_b = annotationCapability.value) == null ? void 0 : _b.transformAnnotation(base, {
+              type,
+              changes: vertexChanges,
+              metadata
+            });
+            if (patched) {
+              preview.value = { ...toRaw(preview.value), ...patched };
+              if (event.state === "end") {
+                (_c = annotationProvides.value) == null ? void 0 : _c.updateAnnotation(props.pageIndex, id, patched);
+              }
+            }
+          }
+          if (event.state === "end") {
+            gestureBaseRectRef.value = null;
             gestureBaseRef.value = null;
-            (_d = annotationProvides.value) == null ? void 0 : _d.updateAnnotation(
-              props.pageIndex,
-              props.trackedAnnotation.object.id,
-              patched
-            );
+            if (type === "move") plugin.commitDrag(props.documentId);
+            else if (type === "resize") plugin.commitResize(props.documentId);
           }
         }
       },
@@ -202,15 +236,32 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       },
       { deep: true }
     );
+    watchEffect((onCleanup) => {
+      const plugin = annotationPlugin.value;
+      if (!plugin) return;
+      const id = props.trackedAnnotation.object.id;
+      const handleEvent = (event) => {
+        var _a;
+        if (event.documentId !== props.documentId) return;
+        const patch = (_a = event.previewPatches) == null ? void 0 : _a[id];
+        if (event.type === "update" && patch) {
+          preview.value = { ...toRaw(preview.value), ...patch };
+        } else if (event.type === "cancel") {
+          preview.value = props.trackedAnnotation.object;
+        }
+      };
+      const unsubs = [plugin.onDragChange(handleEvent), plugin.onResizeChange(handleEvent)];
+      onCleanup(() => unsubs.forEach((u) => u()));
+    });
     const containerStyle = computed(() => ({
       position: "absolute",
       left: `${currentObject.value.rect.origin.x * props.scale}px`,
       top: `${currentObject.value.rect.origin.y * props.scale}px`,
       width: `${currentObject.value.rect.size.width * props.scale}px`,
       height: `${currentObject.value.rect.size.height * props.scale}px`,
-      outline: props.isSelected ? `1px solid ${props.selectionOutlineColor}` : "none",
-      outlineOffset: props.isSelected ? `${props.outlineOffset}px` : "0px",
-      pointerEvents: props.isSelected ? "auto" : "none",
+      outline: showOutline.value ? `1px solid ${props.selectionOutlineColor}` : "none",
+      outlineOffset: showOutline.value ? `${props.outlineOffset}px` : "0px",
+      pointerEvents: props.isSelected && !props.isMultiSelected ? "auto" : "none",
       touchAction: "none",
       cursor: props.isSelected && effectiveIsDraggable.value ? "move" : "default",
       zIndex: props.zIndex
@@ -221,7 +272,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     }));
     const slots = useSlots();
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$8, [
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
         createElementVNode("div", mergeProps({ ...effectiveIsDraggable.value && __props.isSelected ? unref(dragProps) : {}, ...unref(doubleProps) }, { style: mergedContainerStyle.value }), [
           renderSlot(_ctx.$slots, "default", { annotation: currentObject.value }),
           __props.isSelected && effectiveIsResizable.value ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(resize), ({ key, style, ...handle }) => {
@@ -241,7 +292,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
               }), null, 16))
             ], 64);
           }), 128)) : createCommentVNode("", true),
-          __props.isSelected && unref(permissions).canModifyAnnotations && unref(vertices).length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(vertices), ({ key, style, ...vertex }) => {
+          __props.isSelected && unref(permissions).canModifyAnnotations && !__props.isMultiSelected && 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,
@@ -280,9 +331,238 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$7 = ["width", "height", "viewBox"];
-const _hoisted_2$5 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = {
+  key: 0,
+  "data-group-selection-box": "",
+  "data-no-interaction": ""
+};
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
+  __name: "group-selection-box",
+  props: {
+    documentId: {},
+    pageIndex: {},
+    scale: {},
+    rotation: {},
+    pageWidth: {},
+    pageHeight: {},
+    selectedAnnotations: {},
+    isDraggable: { type: Boolean },
+    isResizable: { type: Boolean },
+    resizeUI: {},
+    selectionOutlineColor: { default: "#007ACC" },
+    outlineOffset: { default: 2 },
+    zIndex: { default: 100 },
+    groupSelectionMenu: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { plugin: annotationPlugin } = useAnnotationPlugin();
+    const gestureBase = shallowRef(null);
+    const isDraggingRef = ref(false);
+    const isResizingRef = ref(false);
+    const HANDLE_COLOR = computed(() => {
+      var _a;
+      return ((_a = props.resizeUI) == null ? void 0 : _a.color) ?? "#007ACC";
+    });
+    const HANDLE_SIZE = computed(() => {
+      var _a;
+      return ((_a = props.resizeUI) == null ? void 0 : _a.size) ?? 12;
+    });
+    const groupBox = computed(() => {
+      const rects = props.selectedAnnotations.map((ta) => ta.object.rect);
+      return boundingRectOrEmpty(rects);
+    });
+    const previewGroupBox = shallowRef(groupBox.value);
+    watch(
+      () => groupBox.value,
+      (newGroupBox) => {
+        if (!isDraggingRef.value && !isResizingRef.value) {
+          previewGroupBox.value = newGroupBox;
+        }
+      },
+      { immediate: true }
+    );
+    const boxStyle = computed(() => ({
+      position: "absolute",
+      left: `${previewGroupBox.value.origin.x * props.scale}px`,
+      top: `${previewGroupBox.value.origin.y * props.scale}px`,
+      width: `${previewGroupBox.value.size.width * props.scale}px`,
+      height: `${previewGroupBox.value.size.height * props.scale}px`,
+      outline: `2px dashed ${props.selectionOutlineColor}`,
+      outlineOffset: `${props.outlineOffset - 1}px`,
+      cursor: props.isDraggable ? "move" : "default",
+      touchAction: "none",
+      zIndex: props.zIndex
+    }));
+    const menuRect = computed(() => ({
+      origin: {
+        x: previewGroupBox.value.origin.x * props.scale,
+        y: previewGroupBox.value.origin.y * props.scale
+      },
+      size: {
+        width: previewGroupBox.value.size.width * props.scale,
+        height: previewGroupBox.value.size.height * props.scale
+      }
+    }));
+    const menuContext = computed(() => ({
+      type: "group",
+      annotations: props.selectedAnnotations,
+      pageIndex: props.pageIndex
+    }));
+    const menuPlacement = computed(() => ({
+      suggestTop: false
+    }));
+    const shouldShowMenu = computed(() => {
+      return props.groupSelectionMenu || slots["group-selection-menu"];
+    });
+    const renderGroupMenu = (rect, menuWrapperProps) => {
+      if (!props.groupSelectionMenu) return null;
+      return props.groupSelectionMenu({
+        rect,
+        menuWrapperProps,
+        selected: true,
+        placement: menuPlacement.value,
+        context: menuContext.value
+      });
+    };
+    const elementSnapshot = computed(() => previewGroupBox.value);
+    const constraintsSnapshot = computed(() => ({
+      minWidth: 20,
+      minHeight: 20,
+      boundingBox: {
+        width: props.pageWidth,
+        height: props.pageHeight
+      }
+    }));
+    const { dragProps, resize } = useInteractionHandles({
+      controller: {
+        element: elementSnapshot,
+        vertices: computed(() => []),
+        constraints: constraintsSnapshot,
+        maintainAspectRatio: computed(() => false),
+        pageRotation: computed(() => props.rotation),
+        scale: computed(() => props.scale),
+        enabled: computed(() => true),
+        onUpdate: (event) => {
+          var _a, _b;
+          if (!((_a = event.transformData) == null ? void 0 : _a.type)) return;
+          if (!annotationPlugin.value) return;
+          const plugin = annotationPlugin.value;
+          const transformType = event.transformData.type;
+          const isMove = transformType === "move";
+          const isResize = transformType === "resize";
+          if (isMove && !props.isDraggable) return;
+          if (event.state === "start") {
+            gestureBase.value = groupBox.value;
+            if (isMove) {
+              isDraggingRef.value = true;
+              plugin.startDrag(props.documentId, {
+                annotationIds: props.selectedAnnotations.map((ta) => ta.object.id),
+                pageSize: { width: props.pageWidth, height: props.pageHeight }
+              });
+            } else if (isResize) {
+              isResizingRef.value = true;
+              plugin.startResize(props.documentId, {
+                annotationIds: props.selectedAnnotations.map((ta) => ta.object.id),
+                pageSize: { width: props.pageWidth, height: props.pageHeight },
+                resizeHandle: ((_b = event.transformData.metadata) == null ? void 0 : _b.handle) ?? "se"
+              });
+            }
+          }
+          const base = gestureBase.value ?? groupBox.value;
+          if (isMove && event.transformData.changes.rect) {
+            const newRect = event.transformData.changes.rect;
+            const rawDelta = {
+              x: newRect.origin.x - base.origin.x,
+              y: newRect.origin.y - base.origin.y
+            };
+            const clampedDelta = plugin.updateDrag(props.documentId, rawDelta);
+            previewGroupBox.value = {
+              ...base,
+              origin: {
+                x: base.origin.x + clampedDelta.x,
+                y: base.origin.y + clampedDelta.y
+              }
+            };
+          } else if (isResize && event.transformData.changes.rect) {
+            const newGroupBox = event.transformData.changes.rect;
+            plugin.updateResize(props.documentId, newGroupBox);
+            previewGroupBox.value = newGroupBox;
+          }
+          if (event.state === "end") {
+            gestureBase.value = null;
+            if (isMove && isDraggingRef.value) {
+              isDraggingRef.value = false;
+              plugin.commitDrag(props.documentId);
+            } else if (isResize && isResizingRef.value) {
+              isResizingRef.value = false;
+              plugin.commitResize(props.documentId);
+            }
+          }
+        }
+      },
+      resizeUI: {
+        handleSize: HANDLE_SIZE.value,
+        spacing: props.outlineOffset,
+        offsetMode: "outside",
+        includeSides: true,
+        zIndex: props.zIndex + 1
+      },
+      vertexUI: {
+        vertexSize: 0,
+        zIndex: props.zIndex
+      },
+      includeVertices: false
+    });
+    return (_ctx, _cache) => {
+      return __props.selectedAnnotations.length >= 2 ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
+        createElementVNode("div", mergeProps(__props.isDraggable ? unref(dragProps) : {}, {
+          style: boxStyle.value,
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => !__props.isDraggable ? $event.stopPropagation() : void 0)
+        }), [
+          __props.isResizable ? (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,
+                ref_for: true
+              }, { key, style, ...handle, backgroundColor: HANDLE_COLOR.value }), () => [
+                createElementVNode("div", mergeProps({ ref_for: true }, handle, {
+                  style: [style, { backgroundColor: HANDLE_COLOR.value }]
+                }), null, 16)
+              ]) : (openBlock(), createElementBlock("div", mergeProps({
+                key: 1,
+                ref_for: true
+              }, handle, {
+                style: [style, { backgroundColor: HANDLE_COLOR.value }]
+              }), null, 16))
+            ], 64);
+          }), 128)) : createCommentVNode("", true)
+        ], 16),
+        shouldShowMenu.value ? (openBlock(), createBlock(unref(CounterRotate), {
+          key: 0,
+          rect: menuRect.value,
+          rotation: __props.rotation
+        }, {
+          default: withCtx(({ rect, menuWrapperProps }) => [
+            __props.groupSelectionMenu ? (openBlock(), createBlock(resolveDynamicComponent(renderGroupMenu(rect, menuWrapperProps)), { key: 0 })) : renderSlot(_ctx.$slots, "group-selection-menu", {
+              key: 1,
+              context: menuContext.value,
+              selected: true,
+              rect,
+              placement: menuPlacement.value,
+              menuWrapperProps
+            })
+          ]),
+          _: 3
+        }, 8, ["rect", "rotation"])) : createCommentVNode("", true)
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$8 = ["width", "height", "viewBox"];
+const _hoisted_2$6 = ["cx", "cy", "rx", "ry", "fill", "opacity"];
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "circle",
   props: {
     isSelected: { type: Boolean },
@@ -348,13 +628,13 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
               strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
-        }, null, 44, _hoisted_2$5)
-      ], 12, _hoisted_1$7);
+        }, null, 44, _hoisted_2$6)
+      ], 12, _hoisted_1$8);
     };
   }
 });
-const _hoisted_1$6 = ["contenteditable"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = ["contenteditable"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
   __name: "free-text",
   props: {
     isSelected: { type: Boolean },
@@ -416,7 +696,7 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
         flexDirection: "column",
         justifyContent: anno.verticalAlign === PdfVerticalAlignment.Top ? "flex-start" : anno.verticalAlign === PdfVerticalAlignment.Middle ? "center" : "flex-end",
         display: "flex",
-        backgroundColor: anno.backgroundColor,
+        backgroundColor: anno.color ?? anno.backgroundColor,
         opacity: anno.opacity,
         width: needsComp ? `${invScalePercent}%` : "100%",
         height: needsComp ? `${invScalePercent}%` : "100%",
@@ -450,18 +730,18 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
           tabindex: "0",
           style: normalizeStyle(editorStyle.value),
           contenteditable: __props.isEditing
-        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$6)
+        }, toDisplayString(__props.annotation.object.contents), 45, _hoisted_1$7)
       ], 36);
     };
   }
 });
-const _hoisted_1$5 = ["width", "height", "viewBox"];
-const _hoisted_2$4 = ["d", "opacity"];
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = ["width", "height", "viewBox"];
+const _hoisted_2$5 = ["d", "opacity"];
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "ink",
   props: {
     isSelected: { type: Boolean },
-    color: { default: "#000000" },
+    strokeColor: {},
     opacity: { default: 1 },
     strokeWidth: {},
     inkList: {},
@@ -471,6 +751,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#000000");
     const paths = computed(() => {
       return props.inkList.map(({ points }) => {
         let d = "";
@@ -511,22 +792,22 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
             style: normalizeStyle({
               cursor: __props.isSelected ? "move" : "pointer",
               pointerEvents: __props.isSelected ? "none" : "visibleStroke",
-              stroke: __props.color,
+              stroke: resolvedColor.value,
               strokeWidth: __props.strokeWidth,
               strokeLinecap: "round",
               strokeLinejoin: "round"
             })
-          }, null, 44, _hoisted_2$4);
+          }, null, 44, _hoisted_2$5);
         }), 128))
-      ], 12, _hoisted_1$5);
+      ], 12, _hoisted_1$6);
     };
   }
 });
-const _hoisted_1$4 = ["width", "height", "viewBox"];
-const _hoisted_2$3 = ["x1", "y1", "x2", "y2", "opacity"];
-const _hoisted_3$2 = ["d", "transform", "stroke", "fill"];
-const _hoisted_4$2 = ["d", "transform", "stroke", "fill"];
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_1$5 = ["width", "height", "viewBox"];
+const _hoisted_2$4 = ["x1", "y1", "x2", "y2", "opacity"];
+const _hoisted_3$3 = ["d", "transform", "stroke", "fill"];
+const _hoisted_4$3 = ["d", "transform", "stroke", "fill"];
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "line",
   props: {
     color: { default: "transparent" },
@@ -614,7 +895,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
               strokeDasharray: (_a = __props.strokeDashArray) == null ? void 0 : _a.join(",")
             }
           })
-        }, null, 44, _hoisted_2$3),
+        }, null, 44, _hoisted_2$4),
         endings.value.start ? (openBlock(), createElementBlock("path", {
           key: 0,
           d: endings.value.start.d,
@@ -626,7 +907,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           stroke: __props.strokeColor,
           style: normalizeStyle(getEndingStyle(endings.value.start)),
           fill: endings.value.start.filled ? __props.color : "none"
-        }, null, 44, _hoisted_3$2)) : createCommentVNode("", true),
+        }, null, 44, _hoisted_3$3)) : createCommentVNode("", true),
         endings.value.end ? (openBlock(), createElementBlock("path", {
           key: 1,
           d: endings.value.end.d,
@@ -638,7 +919,96 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
           stroke: __props.strokeColor,
           style: normalizeStyle(getEndingStyle(endings.value.end)),
           fill: endings.value.end.filled ? __props.color : "none"
-        }, null, 44, _hoisted_4$2)) : createCommentVNode("", true)
+        }, null, 44, _hoisted_4$3)) : createCommentVNode("", true)
+      ], 12, _hoisted_1$5);
+    };
+  }
+});
+const _hoisted_1$4 = ["width", "height", "viewBox"];
+const _hoisted_2$3 = ["width", "height"];
+const _hoisted_3$2 = ["y1", "x2", "y2", "stroke", "stroke-width", "stroke-dasharray"];
+const _hoisted_4$2 = ["x", "y", "width", "height", "stroke", "stroke-width", "stroke-dasharray"];
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
+  __name: "link",
+  props: {
+    isSelected: { type: Boolean },
+    strokeColor: { default: "#0000FF" },
+    strokeWidth: { default: 2 },
+    strokeStyle: { default: PdfAnnotationBorderStyle.UNDERLINE },
+    strokeDashArray: {},
+    rect: {},
+    scale: {},
+    onClick: {},
+    hasIRT: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const width = computed(() => props.rect.size.width);
+    const height = computed(() => props.rect.size.height);
+    const svgWidth = computed(() => width.value * props.scale);
+    const svgHeight = computed(() => height.value * props.scale);
+    const dashArray = computed(() => {
+      var _a;
+      if (props.strokeStyle === PdfAnnotationBorderStyle.DASHED) {
+        return ((_a = props.strokeDashArray) == null ? void 0 : _a.join(",")) ?? `${props.strokeWidth * 3},${props.strokeWidth}`;
+      }
+      return void 0;
+    });
+    const isUnderline2 = computed(() => props.strokeStyle === PdfAnnotationBorderStyle.UNDERLINE);
+    const hitAreaCursor = computed(
+      () => props.hasIRT ? "default" : props.isSelected ? "move" : "pointer"
+    );
+    const hitAreaPointerEvents = computed(
+      () => props.hasIRT ? "none" : props.isSelected ? "none" : "visible"
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("svg", {
+        style: normalizeStyle({
+          position: "absolute",
+          width: `${svgWidth.value}px`,
+          height: `${svgHeight.value}px`,
+          pointerEvents: "none",
+          zIndex: 2
+        }),
+        width: svgWidth.value,
+        height: svgHeight.value,
+        viewBox: `0 0 ${width.value} ${height.value}`
+      }, [
+        createElementVNode("rect", {
+          x: 0,
+          y: 0,
+          width: width.value,
+          height: height.value,
+          fill: "transparent",
+          onPointerdown: _cache[0] || (_cache[0] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          onTouchstart: _cache[1] || (_cache[1] = ($event) => __props.hasIRT ? void 0 : __props.onClick),
+          style: normalizeStyle({
+            cursor: hitAreaCursor.value,
+            pointerEvents: hitAreaPointerEvents.value
+          })
+        }, null, 44, _hoisted_2$3),
+        isUnderline2.value ? (openBlock(), createElementBlock("line", {
+          key: 0,
+          x1: 1,
+          y1: height.value - 1,
+          x2: width.value - 1,
+          y2: height.value - 1,
+          stroke: __props.strokeColor,
+          "stroke-width": __props.strokeWidth,
+          "stroke-dasharray": dashArray.value,
+          style: { "pointer-events": "none" }
+        }, null, 8, _hoisted_3$2)) : (openBlock(), createElementBlock("rect", {
+          key: 1,
+          x: __props.strokeWidth / 2,
+          y: __props.strokeWidth / 2,
+          width: Math.max(width.value - __props.strokeWidth, 0),
+          height: Math.max(height.value - __props.strokeWidth, 0),
+          fill: "transparent",
+          stroke: __props.strokeColor,
+          "stroke-width": __props.strokeWidth,
+          "stroke-dasharray": dashArray.value,
+          style: { "pointer-events": "none" }
+        }, null, 8, _hoisted_4$2))
       ], 12, _hoisted_1$4);
     };
   }
@@ -1076,7 +1446,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "highlight",
   props: {
-    color: { default: "#FFFF00" },
+    strokeColor: {},
     opacity: { default: 0.5 },
     segmentRects: {},
     rect: {},
@@ -1084,6 +1454,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     onClick: {}
   },
   setup(__props) {
+    const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (b, i) => {
         return openBlock(), createElementBlock("div", {
@@ -1098,7 +1470,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
             top: `${(__props.rect ? b.origin.y - __props.rect.origin.y : b.origin.y) * __props.scale}px`,
             width: `${b.size.width * __props.scale}px`,
             height: `${b.size.height * __props.scale}px`,
-            background: __props.color,
+            background: resolvedColor.value,
             opacity: __props.opacity,
             pointerEvents: __props.onClick ? "auto" : "none",
             cursor: __props.onClick ? "pointer" : "default",
@@ -1112,7 +1484,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "squiggly",
   props: {
-    color: { default: "#FFFF00" },
+    strokeColor: {},
     opacity: { default: 0.5 },
     segmentRects: {},
     rect: {},
@@ -1121,6 +1493,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
     const amplitude = computed(() => 2 * props.scale);
     const period = computed(() => 6 * props.scale);
     const svgDataUri = computed(() => {
@@ -1128,7 +1501,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
       const per = period.value;
       const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${per}" height="${amp * 2}" viewBox="0 0 ${per} ${amp * 2}">
     <path d="M0 ${amp} Q ${per / 4} 0 ${per / 2} ${amp} T ${per} ${amp}"
-          fill="none" stroke="${props.color}" stroke-width="${amp}" stroke-linecap="round"/>
+          fill="none" stroke="${resolvedColor.value}" stroke-width="${amp}" stroke-linecap="round"/>
   </svg>`;
       return `url("data:image/svg+xml;utf8,${encodeURIComponent(svg)}")`;
     });
@@ -1174,7 +1547,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "strikeout",
   props: {
-    color: { default: "#FFFF00" },
+    strokeColor: {},
     opacity: { default: 0.5 },
     segmentRects: {},
     rect: {},
@@ -1183,6 +1556,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
     const thickness = computed(() => 2 * props.scale);
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
@@ -1211,7 +1585,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
               top: "50%",
               width: "100%",
               height: `${thickness.value}px`,
-              background: __props.color,
+              background: resolvedColor.value,
               opacity: __props.opacity,
               transform: "translateY(-50%)",
               pointerEvents: "none"
@@ -1225,7 +1599,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "underline",
   props: {
-    color: { default: "#FFFF00" },
+    strokeColor: {},
     opacity: { default: 0.5 },
     segmentRects: {},
     rect: {},
@@ -1234,6 +1608,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
+    const resolvedColor = computed(() => props.strokeColor ?? "#FFFF00");
     const thickness = computed(() => 2 * props.scale);
     return (_ctx, _cache) => {
       return openBlock(true), createElementBlock(Fragment, null, renderList(__props.segmentRects, (r, i) => {
@@ -1262,7 +1637,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               bottom: 0,
               width: "100%",
               height: `${thickness.value}px`,
-              background: __props.color,
+              background: resolvedColor.value,
               opacity: __props.opacity,
               pointerEvents: "none"
             })
@@ -1284,30 +1659,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     resizeUI: {},
     vertexUI: {},
     selectionOutlineColor: {},
-    selectionMenu: { type: Function }
+    selectionMenu: { type: Function },
+    groupSelectionMenu: { type: Function }
   },
   setup(__props) {
     const props = __props;
     const { provides: annotationCapability } = useAnnotationCapability();
     const { provides: selectionProvides } = useSelectionCapability();
     const annotations = ref([]);
+    const allSelectedIds = ref([]);
     const { register } = usePointerHandlers({
       documentId: () => props.documentId,
       pageIndex: props.pageIndex
     });
-    const selectionState = ref(null);
     const editingId = ref(null);
     const annotationProvides = computed(
       () => annotationCapability.value ? annotationCapability.value.forDocument(props.documentId) : null
     );
+    const isMultiSelected = computed(() => allSelectedIds.value.length > 1);
     watchEffect((onCleanup) => {
       if (annotationProvides.value) {
         const currentState = annotationProvides.value.getState();
         annotations.value = getAnnotationsByPageIndex(currentState, props.pageIndex);
-        selectionState.value = getSelectedAnnotationByPageIndex(currentState, props.pageIndex);
+        allSelectedIds.value = getSelectedAnnotationIds(currentState);
         const off = annotationProvides.value.onStateChange((state) => {
           annotations.value = getAnnotationsByPageIndex(state, props.pageIndex);
-          selectionState.value = getSelectedAnnotationByPageIndex(state, props.pageIndex);
+          allSelectedIds.value = getSelectedAnnotationIds(state);
         });
         onCleanup(off);
       }
@@ -1321,13 +1698,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const handleClick = (e, annotation) => {
       e.stopPropagation();
       if (annotationProvides.value && selectionProvides.value) {
-        annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
         selectionProvides.value.clear();
+        const isModifierPressed = "metaKey" in e ? e.metaKey || e.ctrlKey : false;
+        if (isModifierPressed) {
+          annotationProvides.value.toggleSelection(props.pageIndex, annotation.object.id);
+        } else {
+          annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
+        }
         if (annotation.object.id !== editingId.value) {
           editingId.value = null;
         }
       }
     };
+    const handleLinkClick = (e, annotation) => {
+      e.stopPropagation();
+      if (!annotationProvides.value || !selectionProvides.value) return;
+      selectionProvides.value.clear();
+      if (annotation.object.inReplyToId) {
+        const parentId = annotation.object.inReplyToId;
+        const parent = annotations.value.find((a) => a.object.id === parentId);
+        if (parent) {
+          annotationProvides.value.selectAnnotation(parent.object.pageIndex, parentId);
+          return;
+        }
+      }
+      annotationProvides.value.selectAnnotation(props.pageIndex, annotation.object.id);
+    };
     const handleDoubleClick = (_e, id) => {
       if (isFreeText(annotations.value.find((a) => a.object.id === id))) {
         editingId.value = id;
@@ -1341,6 +1737,32 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         }
       }
     });
+    const isSelected = (annotation) => allSelectedIds.value.includes(annotation.object.id);
+    const selectedAnnotationsOnPage = computed(
+      () => annotations.value.filter((anno) => allSelectedIds.value.includes(anno.object.id))
+    );
+    const areAllSelectedDraggable = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.every((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        return (tool == null ? void 0 : tool.interaction.isGroupDraggable) ?? (tool == null ? void 0 : tool.interaction.isDraggable) ?? true;
+      });
+    });
+    const areAllSelectedResizable = computed(() => {
+      if (selectedAnnotationsOnPage.value.length < 2) return false;
+      return selectedAnnotationsOnPage.value.every((ta) => {
+        var _a;
+        const tool = (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(ta.object);
+        return (tool == null ? void 0 : tool.interaction.isGroupResizable) ?? (tool == null ? void 0 : tool.interaction.isResizable) ?? true;
+      });
+    });
+    const allSelectedOnSamePage = computed(() => {
+      if (!annotationProvides.value) return false;
+      if (allSelectedIds.value.length < 2) return false;
+      const allSelected = annotationProvides.value.getSelectedAnnotations();
+      return allSelected.every((ta) => ta.object.pageIndex === props.pageIndex);
+    });
     const getTool = (annotation) => {
       var _a;
       return (_a = annotationProvides.value) == null ? void 0 : _a.findToolForAnnotation(annotation.object);
@@ -1348,16 +1770,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const isDraggable = (anno) => {
       var _a;
       if (isFreeText(anno) && editingId.value === anno.object.id) return false;
+      if (isMultiSelected.value) return false;
       return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isDraggable) ?? false;
     };
     const isResizable = (anno) => {
       var _a;
+      if (isMultiSelected.value) return false;
       return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.isResizable) ?? false;
     };
     const lockAspectRatio = (anno) => {
       var _a;
       return ((_a = getTool(anno)) == null ? void 0 : _a.interaction.lockAspectRatio) ?? false;
     };
+    const showIndividualSelection = (anno) => isSelected(anno) && !isMultiSelected.value;
+    const containerProps = computed(() => {
+      const { selectionMenu: _sm, groupSelectionMenu: _gsm, ...rest } = props;
+      return rest;
+    });
     const getVertexConfig = (annotation) => {
       if (isLine(annotation)) {
         return {
@@ -1377,359 +1806,463 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       return void 0;
     };
     return (_ctx, _cache) => {
-      return openBlock(true), createElementBlock(Fragment, null, renderList(annotations.value, (annotation) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
-        return openBlock(), createElementBlock(Fragment, {
-          key: annotation.object.id
-        }, [
-          unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 0,
-            trackedAnnotation: annotation,
-            isSelected: ((_a = selectionState.value) == null ? void 0 : _a.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
-                createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+      return openBlock(), createElementBlock(Fragment, null, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(annotations.value, (annotation) => {
+          return openBlock(), createElementBlock(Fragment, {
+            key: annotation.object.id
+          }, [
+            unref(isInk)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 0,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$g, mergeProps({ ref_for: true }, currentObject, {
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 1,
-            trackedAnnotation: annotation,
-            isSelected: ((_b = selectionState.value) == null ? void 0 : _b.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquare)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 1,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$b, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 2,
-            trackedAnnotation: annotation,
-            isSelected: ((_c = selectionState.value) == null ? void 0 : _c.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
-                createVNode(_sfc_main$h, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isCircle)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 2,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$i, mergeProps({ ref_for: true }, currentObject, {
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 3,
-            trackedAnnotation: annotation,
-            isSelected: ((_d = selectionState.value) == null ? void 0 : _d.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
-                createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLine)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 3,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$f, mergeProps({ ref_for: true }, currentObject, {
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 4,
-            trackedAnnotation: annotation,
-            isSelected: ((_e = selectionState.value) == null ? void 0 : _e.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolyline)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 4,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$c, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 5,
-            trackedAnnotation: annotation,
-            isSelected: ((_f = selectionState.value) == null ? void 0 : _f.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isPolygon)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 5,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
                 createVNode(_sfc_main$d, mergeProps({ ref_for: true }, currentObject, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+                  isSelected: isSelected(annotation),
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }), null, 16, ["isSelected", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 6,
-            trackedAnnotation: annotation,
-            isSelected: ((_g = selectionState.value) == null ? void 0 : _g.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            onDoubleClick: (e) => handleDoubleClick(e, annotation.object.id),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => {
-              var _a2;
-              return [
-                createVNode(_sfc_main$g, {
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isFreeText)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 6,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              onDoubleClick: (e) => handleDoubleClick(e, annotation.object.id),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$h, {
+                  isSelected: isSelected(annotation),
                   isEditing: editingId.value === annotation.object.id,
                   annotation: { ...annotation, object: currentObject },
                   pageIndex: __props.pageIndex,
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }, null, 8, ["isSelected", "isEditing", "annotation", "pageIndex", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig", "style"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 7,
-            trackedAnnotation: annotation,
-            isSelected: ((_h = selectionState.value) == null ? void 0 : _h.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(() => {
-              var _a2;
-              return [
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "onDoubleClick", "vertexConfig", "selectionMenu", "style"])) : unref(isStamp)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 7,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(() => [
                 createVNode(_sfc_main$9, {
                   documentId: __props.documentId,
-                  isSelected: ((_a2 = selectionState.value) == null ? void 0 : _a2.object.id) === annotation.object.id,
+                  isSelected: isSelected(annotation),
                   annotation,
                   pageIndex: __props.pageIndex,
                   scale: __props.scale,
                   onClick: (e) => handleClick(e, annotation)
                 }, null, 8, ["documentId", "isSelected", "annotation", "pageIndex", "scale", "onClick"])
-              ];
-            }),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "resize-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            "vertex-handle": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 8,
-            trackedAnnotation: annotation,
-            isSelected: ((_i = selectionState.value) == null ? void 0 : _i.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            zIndex: 0,
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => [
-              createVNode(_sfc_main$5, mergeProps({ ref_for: true }, currentObject, {
-                scale: __props.scale,
-                onClick: (e) => handleClick(e, annotation)
-              }), null, 16, ["scale", "onClick"])
-            ]),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 9,
-            trackedAnnotation: annotation,
-            isSelected: ((_j = selectionState.value) == null ? void 0 : _j.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            zIndex: 0,
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => [
-              createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
-                scale: __props.scale,
-                onClick: (e) => handleClick(e, annotation)
-              }), null, 16, ["scale", "onClick"])
-            ]),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 10,
-            trackedAnnotation: annotation,
-            isSelected: ((_k = selectionState.value) == null ? void 0 : _k.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            zIndex: 0,
-            style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => [
-              createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
-                scale: __props.scale,
-                onClick: (e) => handleClick(e, annotation)
-              }), null, 16, ["scale", "onClick"])
-            ]),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$i, mergeProps({
-            key: 11,
-            trackedAnnotation: annotation,
-            isSelected: ((_l = selectionState.value) == null ? void 0 : _l.object.id) === annotation.object.id,
-            isDraggable: isDraggable(annotation),
-            isResizable: isResizable(annotation),
-            lockAspectRatio: lockAspectRatio(annotation),
-            onSelect: (e) => handleClick(e, annotation),
-            vertexConfig: getVertexConfig(annotation),
-            zIndex: 0,
-            style: {
-              mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Multiply)
-            }
-          }, { ref_for: true }, props), {
-            default: withCtx(({ annotation: currentObject }) => [
-              createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
-                scale: __props.scale,
-                onClick: (e) => handleClick(e, annotation)
-              }), null, 16, ["scale", "onClick"])
-            ]),
-            "selection-menu": withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
-            ]),
-            _: 2
-          }, 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "style"])) : createCommentVNode("", true)
-        ], 64);
-      }), 128);
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              "vertex-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "vertex-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isUnderline)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 8,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              zIndex: 0,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$5, mergeProps({ ref_for: true }, currentObject, {
+                  scale: __props.scale,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["scale", "onClick"])
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isStrikeout)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 9,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              zIndex: 0,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$6, mergeProps({ ref_for: true }, currentObject, {
+                  scale: __props.scale,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["scale", "onClick"])
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isSquiggly)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 10,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              zIndex: 0,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$7, mergeProps({ ref_for: true }, currentObject, {
+                  scale: __props.scale,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["scale", "onClick"])
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isHighlight)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 11,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isDraggable: isDraggable(annotation),
+              isResizable: isResizable(annotation),
+              lockAspectRatio: lockAspectRatio(annotation),
+              onSelect: (e) => handleClick(e, annotation),
+              vertexConfig: getVertexConfig(annotation),
+              selectionMenu: isMultiSelected.value ? void 0 : __props.selectionMenu,
+              zIndex: 0,
+              style: {
+                mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Multiply)
+              }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$8, mergeProps({ ref_for: true }, currentObject, {
+                  scale: __props.scale,
+                  onClick: (e) => handleClick(e, annotation)
+                }), null, 16, ["scale", "onClick"])
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isDraggable", "isResizable", "lockAspectRatio", "onSelect", "vertexConfig", "selectionMenu", "style"])) : unref(isLink)(annotation) ? (openBlock(), createBlock(_sfc_main$k, mergeProps({
+              key: 12,
+              trackedAnnotation: annotation,
+              isSelected: showIndividualSelection(annotation),
+              isMultiSelected: isMultiSelected.value,
+              isDraggable: false,
+              isResizable: false,
+              lockAspectRatio: false,
+              onSelect: (e) => handleLinkClick(e, annotation),
+              selectionMenu: annotation.object.inReplyToId ? void 0 : isMultiSelected.value ? void 0 : __props.selectionMenu,
+              style: { mixBlendMode: unref(blendModeToCss)(annotation.object.blendMode ?? unref(PdfBlendMode).Normal) }
+            }, { ref_for: true }, containerProps.value), createSlots({
+              default: withCtx(({ annotation: currentObject }) => [
+                createVNode(_sfc_main$e, mergeProps({ ref_for: true }, currentObject, {
+                  isSelected: isSelected(annotation),
+                  scale: __props.scale,
+                  onClick: (e) => handleLinkClick(e, annotation),
+                  hasIRT: !!annotation.object.inReplyToId
+                }), null, 16, ["isSelected", "scale", "onClick", "hasIRT"])
+              ]),
+              "resize-handle": withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "resize-handle", mergeProps({ ref_for: true }, slotProps))
+              ]),
+              _: 2
+            }, [
+              !isMultiSelected.value && !annotation.object.inReplyToId ? {
+                name: "selection-menu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "selection-menu", mergeProps({ ref_for: true }, slotProps))
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["trackedAnnotation", "isSelected", "isMultiSelected", "onSelect", "selectionMenu", "style"])) : createCommentVNode("", true)
+          ], 64);
+        }), 128)),
+        allSelectedOnSamePage.value && selectedAnnotationsOnPage.value.length >= 2 ? (openBlock(), createBlock(_sfc_main$j, {
+          key: 0,
+          documentId: __props.documentId,
+          pageIndex: __props.pageIndex,
+          scale: __props.scale,
+          rotation: __props.rotation,
+          pageWidth: __props.pageWidth,
+          pageHeight: __props.pageHeight,
+          selectedAnnotations: selectedAnnotationsOnPage.value,
+          isDraggable: areAllSelectedDraggable.value,
+          isResizable: areAllSelectedResizable.value,
+          resizeUI: __props.resizeUI,
+          selectionOutlineColor: __props.selectionOutlineColor,
+          groupSelectionMenu: __props.groupSelectionMenu
+        }, {
+          "group-selection-menu": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "group-selection-menu", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          "resize-handle": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "resize-handle", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
+          _: 3
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "selectedAnnotations", "isDraggable", "isResizable", "resizeUI", "selectionOutlineColor", "groupSelectionMenu"])) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
@@ -1784,29 +2317,29 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }, [
         activeTool.value.defaults.type === unref(PdfAnnotationSubtype).HIGHLIGHT ? (openBlock(), createBlock(_sfc_main$8, {
           key: 0,
-          color: activeTool.value.defaults.color,
+          strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$5, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).UNDERLINE ? (openBlock(), createBlock(_sfc_main$5, {
           key: 1,
-          color: activeTool.value.defaults.color,
+          strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$6, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).STRIKEOUT ? (openBlock(), createBlock(_sfc_main$6, {
           key: 2,
-          color: activeTool.value.defaults.color,
+          strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$7, {
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : activeTool.value.defaults.type === unref(PdfAnnotationSubtype).SQUIGGLY ? (openBlock(), createBlock(_sfc_main$7, {
           key: 3,
-          color: activeTool.value.defaults.color,
+          strokeColor: activeTool.value.defaults.strokeColor,
           opacity: activeTool.value.defaults.opacity,
           segmentRects: rects.value,
           scale: __props.scale
-        }, null, 8, ["color", "opacity", "segmentRects", "scale"])) : createCommentVNode("", true)
+        }, null, 8, ["strokeColor", "opacity", "segmentRects", "scale"])) : createCommentVNode("", true)
       ], 4)) : createCommentVNode("", true);
     };
   }
@@ -1832,7 +2365,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock("div", {
         style: normalizeStyle(style.value)
       }, [
-        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$h), mergeProps({
+        __props.preview.type === unref(PdfAnnotationSubtype).CIRCLE ? (openBlock(), createBlock(unref(_sfc_main$i), mergeProps({
           key: 0,
           isSelected: false,
           scale: __props.scale
@@ -1848,11 +2381,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           key: 3,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$e), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).LINE ? (openBlock(), createBlock(unref(_sfc_main$f), mergeProps({
           key: 4,
           isSelected: false,
           scale: __props.scale
-        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$f), mergeProps({
+        }, __props.preview.data), null, 16, ["scale"])) : __props.preview.type === unref(PdfAnnotationSubtype).INK ? (openBlock(), createBlock(unref(_sfc_main$g), mergeProps({
           key: 5,
           isSelected: false,
           scale: __props.scale
@@ -1980,7 +2513,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     resizeUI: {},
     vertexUI: {},
     selectionOutlineColor: {},
-    selectionMenu: { type: Function }
+    selectionMenu: { type: Function },
+    groupSelectionMenu: { type: Function }
   },
   setup(__props) {
     const props = __props;
@@ -2019,11 +2553,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           resizeUI: __props.resizeUI,
           vertexUI: __props.vertexUI,
           selectionOutlineColor: __props.selectionOutlineColor,
-          selectionMenu: __props.selectionMenu
+          selectionMenu: __props.selectionMenu,
+          groupSelectionMenu: __props.groupSelectionMenu
         }, {
           "selection-menu": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "selection-menu", normalizeProps(guardReactiveProps(slotProps)))
           ]),
+          "group-selection-menu": withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "group-selection-menu", normalizeProps(guardReactiveProps(slotProps)))
+          ]),
           "resize-handle": withCtx((slotProps) => [
             renderSlot(_ctx.$slots, "resize-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
@@ -2031,7 +2569,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "vertex-handle", normalizeProps(guardReactiveProps(slotProps)))
           ]),
           _: 3
-        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu"]),
+        }, 8, ["documentId", "pageIndex", "scale", "rotation", "pageWidth", "pageHeight", "resizeUI", "vertexUI", "selectionOutlineColor", "selectionMenu", "groupSelectionMenu"]),
         createVNode(_sfc_main$3, {
           documentId: __props.documentId,
           pageIndex: __props.pageIndex,
@@ -2047,15 +2585,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  _sfc_main$i as AnnotationContainer,
+  _sfc_main$k as AnnotationContainer,
   _sfc_main as AnnotationLayer,
   _sfc_main$1 as AnnotationPaintLayer,
   _sfc_main$4 as Annotations,
-  _sfc_main$h as Circle,
-  _sfc_main$g as FreeText,
+  _sfc_main$i as Circle,
+  _sfc_main$h as FreeText,
+  _sfc_main$j as GroupSelectionBox,
   _sfc_main$8 as Highlight,
-  _sfc_main$f as Ink,
-  _sfc_main$e as Line,
+  _sfc_main$g as Ink,
+  _sfc_main$f as Line,
+  _sfc_main$e as Link,
   _sfc_main$d as Polygon,
   _sfc_main$c as Polyline,
   _sfc_main$2 as PreviewRenderer,