Fix group selection box and text annotation color

Ensure multi-select group outlines correctly enclose annotations that use noZoom and/or noRotate (including rotated pages and non-square noRotate annotations). Prefer a new strokeColor for text annotations (falling back to deprecated color) and explicitly set annotation opacity/color when creating annotations in the Pdfium engine. Add getContrastStrokeColor helper for choosing contrasting stroke colors. Regenerate/format PDFium vendor bindings and update related annotation UI components, default tools, and viewer configs to use the new behavior. Note: PdfAnnotationObject.color is now deprecated in favor of strokeColor (will be removed in the next major release).

Author: bobsingor

.changeset/fix-nozoom-group-outline.md

@@ -2,4 +2,4 @@
 '@embedpdf/plugin-annotation': patch
 ---
 
-Fix group selection box outline for noZoom annotations. The multi-select group outline now correctly encloses noZoom annotations at all zoom levels instead of being too large when zoomed in or too small when zoomed out.
+Fix group selection box outline when selected annotations use `noZoom` and/or `noRotate` flags. The multi-select group outline now correctly encloses mixed selections (flagged + normal annotations), including rotated pages and non-square noRotate annotations.

packages/engines/src/lib/pdfium/engine.ts

@@ -2521,6 +2521,15 @@ export class PdfiumNative implements IPdfiumExecutor {
       return false;
     }
 
+    if (!this.setAnnotationOpacity(annotationPtr, annotation.opacity ?? 1)) {
+      return false;
+    }
+    // Prefer strokeColor, fall back to deprecated color
+    const strokeColor = annotation.strokeColor ?? annotation.color ?? '#FFFF00';
+    if (!this.setAnnotationColor(annotationPtr, strokeColor, PdfAnnotationColorType.Color)) {
+      return false;
+    }
+
     // Text annotations have default flags if not specified
     if (!annotation.flags) {
       if (!this.setAnnotationFlags(annotationPtr, ['print', 'noZoom', 'noRotate'])) {
@@ -5984,6 +5993,7 @@ export class PdfiumNative implements IPdfiumExecutor {
       id: index,
       type: PdfAnnotationSubtype.TEXT,
       rect,
+      strokeColor: color ?? '#FFFF00',
       color: color ?? '#FFFF00',
       opacity,
       state,

packages/models/src/color.ts

@@ -51,6 +51,20 @@ export function webColorToPdfColor(color: WebColor): PdfColor {
   };
 }
 
+/**
+ * Return `#fff` or `#000` as a contrasting stroke color for the given fill color,
+ * based on relative luminance (threshold 0.45).
+ */
+export function getContrastStrokeColor(fillColor: string): string {
+  try {
+    const { red, green, blue } = webColorToPdfColor(fillColor);
+    const luminance = (0.299 * red + 0.587 * green + 0.114 * blue) / 255;
+    return luminance < 0.45 ? '#fff' : '#000';
+  } catch {
+    return '#000';
+  }
+}
+
 // === Alpha utility functions ===
 
 /**

packages/models/src/pdf.ts

@@ -1188,7 +1188,12 @@ export interface PdfTextAnnoObject extends PdfAnnotationObjectBase {
   contents: string;
 
   /**
-   * color of text annotation
+   * Color of the text annotation (preferred over deprecated `color`)
+   */
+  strokeColor?: string;
+
+  /**
+   * @deprecated Use strokeColor instead. Will be removed in next major version.
    */
   color?: string;
 

packages/pdfium/src/vendor/pdfium.wasm

@@ -384,7 +384,7 @@ export const defaultTools = [
     },
     defaults: {
       type: PdfAnnotationSubtype.TEXT,
-      color: '#facc15',
+      strokeColor: '#FFCD45',
       opacity: 1,
     },
     behavior: {

packages/plugin-annotation/src/lib/tools/default-tools.ts

@@ -1,3 +1,4 @@
+import { getContrastStrokeColor } from '@embedpdf/models';
 import { MouseEvent } from '@framework';
 
 interface TextProps {
@@ -8,53 +9,6 @@ interface TextProps {
   appearanceActive?: boolean;
 }
 
-function parseColor(color: string): { r: number; g: number; b: number } | null {
-  const normalized = color.trim().toLowerCase();
-
-  if (normalized === 'black') {
-    return { r: 0, g: 0, b: 0 };
-  }
-
-  const hex = normalized.startsWith('#') ? normalized.slice(1) : normalized;
-  if (/^[0-9a-f]{3}$/.test(hex)) {
-    return {
-      r: parseInt(hex[0] + hex[0], 16),
-      g: parseInt(hex[1] + hex[1], 16),
-      b: parseInt(hex[2] + hex[2], 16),
-    };
-  }
-  if (/^[0-9a-f]{6}$/.test(hex)) {
-    return {
-      r: parseInt(hex.slice(0, 2), 16),
-      g: parseInt(hex.slice(2, 4), 16),
-      b: parseInt(hex.slice(4, 6), 16),
-    };
-  }
-
-  const rgbMatch = normalized.match(
-    /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*(?:0|1|0?\.\d+))?\s*\)$/,
-  );
-  if (rgbMatch) {
-    return {
-      r: Math.min(255, Number(rgbMatch[1])),
-      g: Math.min(255, Number(rgbMatch[2])),
-      b: Math.min(255, Number(rgbMatch[3])),
-    };
-  }
-
-  return null;
-}
-
-function getContrastStroke(fillColor: string): string {
-  const rgb = parseColor(fillColor);
-  if (!rgb) {
-    return '#000';
-  }
-
-  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
-  return luminance < 0.45 ? '#fff' : '#000';
-}
-
 /**
  * Renders a fallback sticky-note icon for PDF Text annotations when no
  * appearance stream image is available.
@@ -66,7 +20,7 @@ export function Text({
   onClick,
   appearanceActive = false,
 }: TextProps): JSX.Element {
-  const lineColor = getContrastStroke(color);
+  const lineColor = getContrastStrokeColor(color);
 
   return (
     <div
@@ -86,46 +40,21 @@ export function Text({
             inset: 0,
             pointerEvents: 'none',
           }}
-          viewBox="0 0 64 64"
+          viewBox="0 0 20 20"
           width="100%"
           height="100%"
-          fill="#facc15"
         >
           <path
-            d="M8 8 H56 V48 H32 L26 56 L20 48 H8 Z"
+            d="M 0.5 15.5 L 0.5 0.5 L 19.5 0.5 L 19.5 15.5 L 8.5 15.5 L 6.5 19.5 L 4.5 15.5 Z"
             fill={color}
             opacity={opacity}
             stroke={lineColor}
-            strokeWidth="4"
+            strokeWidth="1"
             strokeLinejoin="miter"
           />
-          <line
-            x1="20"
-            y1="18"
-            x2="44"
-            y2="18"
-            stroke={lineColor}
-            strokeWidth="2"
-            strokeLinecap="square"
-          />
-          <line
-            x1="20"
-            y1="28"
-            x2="44"
-            y2="28"
-            stroke={lineColor}
-            strokeWidth="2"
-            strokeLinecap="square"
-          />
-          <line
-            x1="20"
-            y1="38"
-            x2="44"
-            y2="38"
-            stroke={lineColor}
-            strokeWidth="2"
-            strokeLinecap="square"
-          />
+          <line x1="2.5" y1="4.25" x2="17.5" y2="4.25" stroke={lineColor} strokeWidth="1" />
+          <line x1="2.5" y1="8" x2="17.5" y2="8" stroke={lineColor} strokeWidth="1" />
+          <line x1="2.5" y1="11.75" x2="17.5" y2="11.75" stroke={lineColor} strokeWidth="1" />
         </svg>
       )}
     </div>

packages/plugin-annotation/src/shared/components/annotations/text.tsx

@@ -224,11 +224,11 @@ export const builtInRenderers: BoxedAnnotationRenderer[] = [
 
   createRenderer<PdfTextAnnoObject>({
     id: 'text',
-    matches: (a): a is PdfTextAnnoObject => a.type === PdfAnnotationSubtype.TEXT,
+    matches: (a): a is PdfTextAnnoObject => a.type === PdfAnnotationSubtype.TEXT && !a.inReplyToId,
     render: ({ currentObject, isSelected, onClick, appearanceActive }) => (
       <Text
         isSelected={isSelected}
-        color={currentObject.color}
+        color={currentObject.strokeColor ?? currentObject.color}
         opacity={currentObject.opacity}
         onClick={onClick}
         appearanceActive={appearanceActive}

packages/plugin-annotation/src/shared/components/built-in-renderers.tsx

@@ -1,4 +1,4 @@
-import { Rect, boundingRectOrEmpty } from '@embedpdf/models';
+import { Rect, boundingRectOrEmpty, Rotation } from '@embedpdf/models';
 import { useInteractionHandles, CounterRotate } from '@embedpdf/utils/@framework';
 import { TrackedAnnotation } from '@embedpdf/plugin-annotation';
 import { useState, useMemo, useCallback, useRef, useEffect, createPortal } from '@framework';
@@ -12,6 +12,82 @@ import {
   SelectionOutline,
 } from './types';
 
+interface ScreenBounds {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+function mapCounterRotatePoint(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  rotation: Rotation,
+): { x: number; y: number } {
+  switch (rotation) {
+    case 1:
+      return { x: y, y: height - x };
+    case 2:
+      return { x: width - x, y: height - y };
+    case 3:
+      return { x: width - y, y: x };
+    default:
+      return { x, y };
+  }
+}
+
+function getAnnotationScreenBounds(
+  annotation: TrackedAnnotation,
+  scale: number,
+  rotation: Rotation,
+): ScreenBounds {
+  const flags = annotation.object.flags ?? [];
+  const hasNoZoom = flags.includes('noZoom');
+  const hasNoRotate = flags.includes('noRotate');
+
+  const left = annotation.object.rect.origin.x * scale;
+  const top = annotation.object.rect.origin.y * scale;
+  const width = annotation.object.rect.size.width * (hasNoZoom ? 1 : scale);
+  const height = annotation.object.rect.size.height * (hasNoZoom ? 1 : scale);
+
+  if (!hasNoRotate || rotation === 0) {
+    return {
+      left,
+      top,
+      right: left + width,
+      bottom: top + height,
+    };
+  }
+
+  const corners = [
+    mapCounterRotatePoint(0, 0, width, height, rotation),
+    mapCounterRotatePoint(width, 0, width, height, rotation),
+    mapCounterRotatePoint(0, height, width, height, rotation),
+    mapCounterRotatePoint(width, height, width, height, rotation),
+  ];
+
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+
+  for (const corner of corners) {
+    if (corner.x < minX) minX = corner.x;
+    if (corner.y < minY) minY = corner.y;
+    if (corner.x > maxX) maxX = corner.x;
+    if (corner.y > maxY) maxY = corner.y;
+  }
+
+  return {
+    left: left + minX,
+    top: top + minY,
+    right: left + maxX,
+    bottom: top + maxY,
+  };
+}
+
 interface GroupSelectionBoxProps {
   documentId: string;
   pageIndex: number;
@@ -305,31 +381,31 @@ export function GroupSelectionBox({
     return null;
   }
 
-  // Compute visual right/bottom edges in screen pixels, accounting for noZoom annotations.
-  // noZoom annotations have a fixed pixel size independent of zoom level.
+  // Compute visual bounds in screen pixels, including mixed noZoom/noRotate selections.
+  let visualLeft = Infinity;
+  let visualTop = Infinity;
   let visualRight = -Infinity;
   let visualBottom = -Infinity;
   for (const ta of selectedAnnotations) {
-    const rect = ta.object.rect;
-    const isNoZoom = (ta.object.flags ?? []).includes('noZoom');
-    visualRight = Math.max(
-      visualRight,
-      isNoZoom
-        ? rect.origin.x * scale + rect.size.width
-        : (rect.origin.x + rect.size.width) * scale,
-    );
-    visualBottom = Math.max(
-      visualBottom,
-      isNoZoom
-        ? rect.origin.y * scale + rect.size.height
-        : (rect.origin.y + rect.size.height) * scale,
-    );
+    const bounds = getAnnotationScreenBounds(ta, scale, rotation as Rotation);
+    visualLeft = Math.min(visualLeft, bounds.left);
+    visualTop = Math.min(visualTop, bounds.top);
+    visualRight = Math.max(visualRight, bounds.right);
+    visualBottom = Math.max(visualBottom, bounds.bottom);
   }
+  const initialLogicalLeft = groupBox.origin.x * scale;
+  const initialLogicalTop = groupBox.origin.y * scale;
   const initialLogicalRight = (groupBox.origin.x + groupBox.size.width) * scale;
   const initialLogicalBottom = (groupBox.origin.y + groupBox.size.height) * scale;
-  const groupBoxWidth = previewGroupBox.size.width * scale + (visualRight - initialLogicalRight);
-  const groupBoxHeight =
-    previewGroupBox.size.height * scale + (visualBottom - initialLogicalBottom);
+  const leftCorrection = visualLeft - initialLogicalLeft;
+  const topCorrection = visualTop - initialLogicalTop;
+  const rightCorrection = visualRight - initialLogicalRight;
+  const bottomCorrection = visualBottom - initialLogicalBottom;
+
+  const groupBoxLeft = previewGroupBox.origin.x * scale + leftCorrection;
+  const groupBoxTop = previewGroupBox.origin.y * scale + topCorrection;
+  const groupBoxWidth = previewGroupBox.size.width * scale + (rightCorrection - leftCorrection);
+  const groupBoxHeight = previewGroupBox.size.height * scale + (bottomCorrection - topCorrection);
   const groupCenterX = groupBoxWidth / 2;
   const groupCenterY = groupBoxHeight / 2;
   const groupGuideLength = Math.max(300, Math.max(groupBoxWidth, groupBoxHeight) + 80);
@@ -340,8 +416,8 @@ export function GroupSelectionBox({
       <div
         style={{
           position: 'absolute',
-          left: previewGroupBox.origin.x * scale,
-          top: previewGroupBox.origin.y * scale,
+          left: groupBoxLeft,
+          top: groupBoxTop,
           width: groupBoxWidth,
           height: groupBoxHeight,
           pointerEvents: 'none',
@@ -554,12 +630,12 @@ export function GroupSelectionBox({
         <CounterRotate
           rect={{
             origin: {
-              x: previewGroupBox.origin.x * scale,
-              y: previewGroupBox.origin.y * scale,
+              x: groupBoxLeft,
+              y: groupBoxTop,
             },
             size: {
-              width: previewGroupBox.size.width * scale,
-              height: previewGroupBox.size.height * scale,
+              width: groupBoxWidth,
+              height: groupBoxHeight,
             },
           }}
           rotation={rotation}

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

@@ -144,7 +144,7 @@ export const PROPERTY_CONFIGS: Record<string, PropertyConfig> = {
  */
 export const ANNOTATION_PROPERTIES: Partial<Record<PdfAnnotationSubtype, string[]>> = {
   // Text comments: fill color drives the icon color, opacity affects the whole icon
-  [PdfAnnotationSubtype.TEXT]: ['color', 'opacity'],
+  [PdfAnnotationSubtype.TEXT]: ['strokeColor', 'opacity'],
 
   // Ink uses strokeColor (was: color)
   [PdfAnnotationSubtype.INK]: ['strokeColor', 'opacity', 'strokeWidth', 'rotation'],