Merge pull request #429 from embedpdf/fix/group-selection-annotation-permissions

Disable group drag/resize without permission

Author: bobsingor

.changeset/plugin-annotation-group-permissions.md

@@ -0,0 +1,9 @@
+---
+'@embedpdf/plugin-annotation': patch
+---
+
+Fixed group selection box ignoring document permissions:
+
+- Added `canModifyAnnotations` permission check to `GroupSelectionBox` component across React, Vue, and Svelte
+- Group drag and resize operations are now properly disabled when the user lacks annotation modification permissions
+- This aligns group selection behavior with individual annotation container permission checks

examples/svelte-tailwind/src/lib/config/commands.ts

@@ -1035,6 +1035,9 @@ export const commands: Record<string, Command<State>> = {
         selectedAnnotation.object.id,
       );
     },
+    disabled: ({ state, documentId }) => {
+      return lacksPermission(state, documentId, PdfPermissionFlag.ModifyAnnotations);
+    },
   },
 
   'annotation:apply-redaction': {

examples/vue-tailwind/src/config/commands.ts

@@ -1035,6 +1035,9 @@ export const commands: Record<string, Command<State>> = {
         selectedAnnotation.object.id,
       );
     },
+    disabled: ({ state, documentId }) => {
+      return lacksPermission(state, documentId, PdfPermissionFlag.ModifyAnnotations);
+    },
   },
 
   // ─────────────────────────────────────────────────────────

packages/plugin-annotation/src/shared/components/group-selection-box.tsx

@@ -2,6 +2,7 @@ import { Rect, boundingRectOrEmpty } from '@embedpdf/models';
 import { useInteractionHandles, CounterRotate } from '@embedpdf/utils/@framework';
 import { TrackedAnnotation } from '@embedpdf/plugin-annotation';
 import { useState, useMemo, useCallback, useRef, useEffect } from '@framework';
+import { useDocumentPermissions } from '@embedpdf/core/@framework';
 
 import { useAnnotationPlugin } from '../hooks';
 import { ResizeHandleUI, GroupSelectionMenuRenderFn } from './types';
@@ -52,10 +53,15 @@ export function GroupSelectionBox({
   groupSelectionMenu,
 }: GroupSelectionBoxProps): JSX.Element | null {
   const { plugin } = useAnnotationPlugin();
+  const { canModifyAnnotations } = useDocumentPermissions(documentId);
   const gestureBaseRef = useRef<Rect | null>(null);
   const isDraggingRef = useRef(false);
   const isResizingRef = useRef(false);
 
+  // Check permissions before allowing drag/resize
+  const effectiveIsDraggable = canModifyAnnotations && isDraggable;
+  const effectiveIsResizable = canModifyAnnotations && isResizable;
+
   // Compute the group bounding box from all selected annotations
   const groupBox = useMemo(() => {
     const rects = selectedAnnotations.map((ta) => ta.object.rect);
@@ -88,7 +94,7 @@ export function GroupSelectionBox({
       const isResize = transformType === 'resize';
 
       // Skip drag operations if group is not draggable
-      if (isMove && !isDraggable) return;
+      if (isMove && !effectiveIsDraggable) return;
 
       if (event.state === 'start') {
         gestureBaseRef.current = groupBox;
@@ -156,7 +162,15 @@ export function GroupSelectionBox({
         }
       }
     },
-    [plugin, documentId, pageWidth, pageHeight, groupBox, isDraggable, selectedAnnotations],
+    [
+      plugin,
+      documentId,
+      pageWidth,
+      pageHeight,
+      groupBox,
+      effectiveIsDraggable,
+      selectedAnnotations,
+    ],
   );
 
   // UI constants
@@ -199,9 +213,9 @@ export function GroupSelectionBox({
 
   return (
     <div data-group-selection-box data-no-interaction>
-      {/* Group box - draggable only if isDraggable is true */}
+      {/* Group box - draggable only if effectiveIsDraggable is true */}
       <div
-        {...(isDraggable
+        {...(effectiveIsDraggable
           ? dragProps
           : {
               onPointerDown: (e) => e.stopPropagation(),
@@ -214,13 +228,13 @@ export function GroupSelectionBox({
           height: previewGroupBox.size.height * scale,
           outline: `2px dashed ${selectionOutlineColor}`,
           outlineOffset: outlineOffset - 1,
-          cursor: isDraggable ? 'move' : 'default',
+          cursor: effectiveIsDraggable ? 'move' : 'default',
           touchAction: 'none',
           zIndex,
         }}
       >
         {/* Resize handles */}
-        {isResizable &&
+        {effectiveIsResizable &&
           resize.map(({ key, ...hProps }) =>
             resizeUI?.component ? (
               resizeUI.component({

packages/plugin-annotation/src/svelte/components/GroupSelectionBox.svelte

@@ -7,6 +7,7 @@
     CounterRotate,
     type MenuWrapperProps,
   } from '@embedpdf/utils/svelte';
+  import { useDocumentPermissions } from '@embedpdf/core/svelte';
   import { useAnnotationPlugin } from '../hooks';
   import type {
     GroupSelectionContext,
@@ -62,10 +63,15 @@
   }: GroupSelectionBoxProps = $props();
 
   const annotationPlugin = useAnnotationPlugin();
+  const permissions = useDocumentPermissions(() => documentId);
   let gestureBase = $state<Rect | null>(null);
   let isDraggingRef = $state(false);
   let isResizingRef = $state(false);
 
+  // Check permissions before allowing drag/resize
+  const effectiveIsDraggable = $derived(permissions.canModifyAnnotations && isDraggable);
+  const effectiveIsResizable = $derived(permissions.canModifyAnnotations && isResizable);
+
   // Helper to compute group box on demand
   function getGroupBox(): Rect {
     const rects = selectedAnnotations.map((ta) => ta.object.rect);
@@ -121,7 +127,7 @@
         const isResize = transformType === 'resize';
 
         // Skip drag operations if group is not draggable
-        if (isMove && !isDraggable) return;
+        if (isMove && !effectiveIsDraggable) return;
 
         if (event.state === 'start') {
           gestureBase = getGroupBox();
@@ -235,9 +241,9 @@
 
 {#if selectedAnnotations.length >= 2}
   <div data-group-selection-box data-no-interaction>
-    <!-- Group box - draggable only if isDraggable is true -->
+    <!-- Group box - draggable only if effectiveIsDraggable is true -->
     <div
-      {...isDraggable
+      {...effectiveIsDraggable
         ? interactionHandles.dragProps
         : { onpointerdown: (e: PointerEvent) => e.stopPropagation() }}
       style:position="absolute"
@@ -247,12 +253,12 @@
       style:height="{previewGroupBox.size.height * scale}px"
       style:outline="2px dashed {selectionOutlineColor}"
       style:outline-offset="{outlineOffset - 1}px"
-      style:cursor={isDraggable ? 'move' : 'default'}
+      style:cursor={effectiveIsDraggable ? 'move' : 'default'}
       style:touch-action="none"
       style:z-index={zIndex}
     >
       <!-- Resize handles -->
-      {#if isResizable}
+      {#if effectiveIsResizable}
         {#each resizeHandles as { key, style: handleStyle, ...hProps } (key)}
           {#if resizeUI?.component}
             {@render resizeUI.component({ ...hProps, backgroundColor: HANDLE_COLOR })}

packages/plugin-annotation/src/vue/components/group-selection-box.vue

@@ -1,13 +1,13 @@
 <template>
   <div v-if="selectedAnnotations.length >= 2" data-group-selection-box data-no-interaction>
-    <!-- Group box - draggable only if isDraggable is true -->
+    <!-- Group box - draggable only if effectiveIsDraggable is true -->
     <div
-      v-bind="isDraggable ? dragProps : {}"
+      v-bind="effectiveIsDraggable ? dragProps : {}"
       :style="boxStyle"
-      @pointerdown="!isDraggable ? $event.stopPropagation() : undefined"
+      @pointerdown="!effectiveIsDraggable ? $event.stopPropagation() : undefined"
     >
       <!-- Resize handles -->
-      <template v-if="isResizable">
+      <template v-if="effectiveIsResizable">
         <template v-for="{ key, style, ...handle } in resize" :key="key">
           <slot
             v-if="slots['resize-handle']"
@@ -52,6 +52,7 @@ import {
   useInteractionHandles,
 } from '@embedpdf/utils/vue';
 import { TrackedAnnotation } from '@embedpdf/plugin-annotation';
+import { useDocumentPermissions } from '@embedpdf/core/vue';
 import { useAnnotationPlugin } from '../hooks';
 import {
   GroupSelectionContext,
@@ -94,10 +95,19 @@ const props = withDefaults(
 
 const slots = useSlots();
 const { plugin: annotationPlugin } = useAnnotationPlugin();
+const permissions = useDocumentPermissions(() => props.documentId);
 const gestureBase = shallowRef<Rect | null>(null);
 const isDraggingRef = ref(false);
 const isResizingRef = ref(false);
 
+// Check permissions before allowing drag/resize
+const effectiveIsDraggable = computed(
+  () => permissions.value.canModifyAnnotations && props.isDraggable,
+);
+const effectiveIsResizable = computed(
+  () => permissions.value.canModifyAnnotations && props.isResizable,
+);
+
 const HANDLE_COLOR = computed(() => props.resizeUI?.color ?? '#007ACC');
 const HANDLE_SIZE = computed(() => props.resizeUI?.size ?? 12);
 
@@ -131,7 +141,7 @@ const boxStyle = computed(() => ({
   height: `${previewGroupBox.value.size.height * props.scale}px`,
   outline: `2px dashed ${props.selectionOutlineColor}`,
   outlineOffset: `${props.outlineOffset - 1}px`,
-  cursor: props.isDraggable ? 'move' : 'default',
+  cursor: effectiveIsDraggable.value ? 'move' : 'default',
   touchAction: 'none',
   zIndex: props.zIndex,
 }));
@@ -211,7 +221,7 @@ const { dragProps, resize } = useInteractionHandles({
       const isResize = transformType === 'resize';
 
       // Skip drag operations if group is not draggable
-      if (isMove && !props.isDraggable) return;
+      if (isMove && !effectiveIsDraggable.value) return;
 
       if (event.state === 'start') {
         gestureBase.value = groupBox.value;