Fix some size issue with the callout

Author: bobsingor

packages/pdfium/src/vendor/pdfium.wasm

@@ -253,20 +253,21 @@ export function computeCalloutConnectionPoint(knee: Position, textBox: Rect): Po
 /**
  * Compute the overall bounding rect for a callout FreeText, encompassing
  * the text box, callout line, and line ending geometry.
+ *
+ * The text box border grows inward (stroke outer edge = textBox boundary),
+ * so no outward padding is added for the text box. The callout line and
+ * arrow stroke extend outward and miter joins at the knee can protrude
+ * further, so they get strokeWidth padding (half for stroke + half for
+ * miter/join clearance).
  */
 export function computeCalloutOverallRect(
   textBox: Rect,
   calloutLine: Position[],
   lineEnding: PdfAnnotationLineEnding | undefined,
   strokeWidth: number,
 ): Rect {
-  const textBoxCorners: Position[] = [
-    { x: textBox.origin.x, y: textBox.origin.y },
-    { x: textBox.origin.x + textBox.size.width, y: textBox.origin.y + textBox.size.height },
-  ];
-  const allPoints = [...textBoxCorners, ...calloutLine];
+  const linePoints = [...calloutLine];
 
-  // Include line ending geometry at the arrow tip (first point of callout line)
   if (lineEnding && calloutLine.length >= 2) {
     const handler = LINE_ENDING_HANDLERS[lineEnding];
     if (handler) {
@@ -279,11 +280,24 @@ export function computeCalloutOverallRect(
       const transformed = localPts.map((p) =>
         rotateAndTranslatePoint(p, rotationAngle, calloutLine[0]),
       );
-      allPoints.push(...transformed);
+      linePoints.push(...transformed);
     }
   }
 
-  const baseRect = rectFromPoints(allPoints);
-  const pad = strokeWidth / 2 + EXTRA_PADDING * strokeWidth;
-  return expandRect(baseRect, pad);
+  const lineBbox = expandRect(rectFromPoints(linePoints), strokeWidth);
+
+  const tbRight = textBox.origin.x + textBox.size.width;
+  const tbBottom = textBox.origin.y + textBox.size.height;
+  const lnRight = lineBbox.origin.x + lineBbox.size.width;
+  const lnBottom = lineBbox.origin.y + lineBbox.size.height;
+
+  const minX = Math.min(textBox.origin.x, lineBbox.origin.x);
+  const minY = Math.min(textBox.origin.y, lineBbox.origin.y);
+  const maxX = Math.max(tbRight, lnRight);
+  const maxY = Math.max(tbBottom, lnBottom);
+
+  return {
+    origin: { x: minX, y: minY },
+    size: { width: maxX - minX, height: maxY - minY },
+  };
 }

packages/plugin-annotation/src/lib/patching/patch-utils.ts

@@ -55,12 +55,12 @@ export function CalloutFreeText({
   // Text box position relative to the annotation rect (for CSS positioning)
   const textBoxRelative = useMemo(
     () => ({
-      left: (textBox.origin.x - rect.origin.x) * scale,
-      top: (textBox.origin.y - rect.origin.y) * scale,
-      width: textBox.size.width * scale,
-      height: textBox.size.height * scale,
+      left: (textBox.origin.x - rect.origin.x + strokeWidth / 2) * scale,
+      top: (textBox.origin.y - rect.origin.y + strokeWidth / 2) * scale,
+      width: (textBox.size.width - strokeWidth) * scale,
+      height: (textBox.size.height - strokeWidth) * scale,
     }),
-    [textBox, rect, scale],
+    [textBox, rect, scale, strokeWidth],
   );
 
   // Callout line segments in SVG viewBox coords (relative to rect origin)
@@ -85,6 +85,22 @@ export function CalloutFreeText({
     );
   }, [lineCoords, obj.lineEnding, strokeWidth]);
 
+  const visualLineCoords = useMemo(() => {
+    if (!lineCoords || lineCoords.length < 2) return lineCoords;
+    const pts = lineCoords.map((p) => ({ ...p }));
+    const last = pts.length - 1;
+    const prev = last - 1;
+    const dx = pts[last].x - pts[prev].x;
+    const dy = pts[last].y - pts[prev].y;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len > 0) {
+      const halfBw = strokeWidth / 2;
+      pts[last].x += (dx / len) * halfBw;
+      pts[last].y += (dy / len) * halfBw;
+    }
+    return pts;
+  }, [lineCoords, strokeWidth]);
+
   const { adjustedFontPx, wrapperStyle } = useIOSZoomPrevention(obj.fontSize * scale, isEditing);
 
   useEffect(() => {
@@ -189,10 +205,10 @@ export function CalloutFreeText({
         {/* Visual callout line + text box rect */}
         {!appearanceActive && (
           <>
-            {lineCoords && (
+            {visualLineCoords && (
               <>
                 <polyline
-                  points={lineCoords.map((p) => `${p.x},${p.y}`).join(' ')}
+                  points={visualLineCoords.map((p) => `${p.x},${p.y}`).join(' ')}
                   fill="none"
                   stroke={strokeColor}
                   strokeWidth={strokeWidth}
@@ -213,10 +229,10 @@ export function CalloutFreeText({
               </>
             )}
             <rect
-              x={textBox.origin.x - rect.origin.x}
-              y={textBox.origin.y - rect.origin.y}
-              width={textBox.size.width}
-              height={textBox.size.height}
+              x={textBox.origin.x - rect.origin.x + strokeWidth / 2}
+              y={textBox.origin.y - rect.origin.y + strokeWidth / 2}
+              width={textBox.size.width - strokeWidth}
+              height={textBox.size.height - strokeWidth}
               fill={obj.color ?? obj.backgroundColor ?? 'transparent'}
               stroke={strokeColor}
               strokeWidth={strokeWidth}
@@ -227,15 +243,15 @@ export function CalloutFreeText({
         )}
       </svg>
 
-      {/* Text box hit area */}
+      {/* Text box hit area (covers full textBox including border) */}
       <div
         onPointerDown={onClick ? (e) => onClick(e) : undefined}
         style={{
           position: 'absolute',
-          left: textBoxRelative.left,
-          top: textBoxRelative.top,
-          width: textBoxRelative.width,
-          height: textBoxRelative.height,
+          left: (textBox.origin.x - rect.origin.x) * scale,
+          top: (textBox.origin.y - rect.origin.y) * scale,
+          width: textBox.size.width * scale,
+          height: textBox.size.height * scale,
           cursor: isSelected && !isEditing ? 'move' : onClick ? 'pointer' : 'default',
           pointerEvents: !onClick ? 'none' : isSelected && !isEditing ? 'none' : 'auto',
         }}

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

@@ -56,6 +56,11 @@ export const PROPERTY_CONFIGS: Record<string, PropertyConfig> = {
     type: 'colorWithTransparent',
     labelKey: 'annotation.strokeColor',
   },
+  strokeColorWithoutTransparent: {
+    key: 'strokeColor',
+    type: 'color',
+    labelKey: 'annotation.strokeColor',
+  },
 
   // Common properties
   opacity: {
@@ -210,6 +215,17 @@ export const TOOL_PROPERTIES: Record<string, string[]> = {
     'color',
     'rotation',
   ],
+  freeTextCallout: [
+    'fontFamily',
+    'fontSize',
+    'fontColor',
+    'textAlign',
+    'verticalAlign',
+    'opacity',
+    'color',
+    'strokeColorWithoutTransparent',
+    'strokeWidth',
+  ],
 
   // Stamp
   stamp: ['rotation'],