Merge pull request #581 from embedpdf/feature/callout-annotation

Feature/callout annotation

Author: bobsingor

.changeset/engines-callout-freetext.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/engines': minor
+---
+
+Support callout free text in the PDFium executor: read/write `/CL`, `/LE`, `/IT`, stroke width and colors, `/TextColor`, and remap rectangle differences (`/RD`) between native PDFium order and the model shape.

.changeset/models-callout-freetext.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/models': minor
+---
+
+Extend free text annotation typing for callouts: add `PdfAnnotationColorType.TextColor` and optional `calloutLine`, `lineEnding`, `strokeWidth`, and `strokeColor` on `PdfFreeTextAnnoObject`.

.changeset/pdfium-callout-freetext.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/pdfium': minor
+---
+
+Expose EmbedPDF callout line helpers in the WASM bindings (`EPDFAnnot_GetCalloutLineCount`, `EPDFAnnot_GetCalloutLine`, `EPDFAnnot_SetCalloutLine`) and refresh bundled `pdfium.js` / `pdfium.cjs` / `pdfium.wasm`.

.changeset/plugin-annotation-callout-freetext.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/plugin-annotation': minor
+---
+
+Add callout free text (`FreeTextCallout`): creation handler and preview data, vertex config and patch pipeline, default `freeTextCallout` tool, and built-in renderers for React, Vue, and Svelte (including preview components and shared `calloutVertexConfig`).

.changeset/snippet-callout-freetext.md

@@ -0,0 +1,5 @@
+---
+'@embedpdf/snippet': minor
+---
+
+Wire callout into the snippet viewer: callout icon, `annotation:add-callout` command, annotation toolbar and overflow menu entries, translations, and sidebar property schema for `freeTextCallout` (including opaque stroke color control).

examples/svelte-tailwind/src/lib/components/icons/CalloutIcon.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
+
+  interface Props extends SVGAttributes<SVGSVGElement> {
+    title?: string;
+  }
+
+  let { class: className, title, ...rest }: Props = $props();
+</script>
+
+<svg
+  class={className}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  stroke-width={2}
+  stroke-linecap="round"
+  stroke-linejoin="round"
+  aria-hidden={!title}
+  role={title ? 'img' : 'presentation'}
+  {...rest}
+>
+  {#if title}
+    <title>{title}</title>
+  {/if}
+  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+  <path d="M20 6v4a1 1 0 0 1 -1 1h-14a1 1 0 0 1 -1 -1v-4a1 1 0 0 1 1 -1h14a1 1 0 0 1 1 1" />
+  <path d="M17 11v6h-9" fill="none" />
+  <path d="M8 15l-2 2l2 2" fill="none" />
+</svg>

examples/svelte-tailwind/src/lib/components/icons/index.ts

@@ -74,3 +74,4 @@ export { default as FormSelectIcon } from './FormSelectIcon.svelte';
 export { default as FormListboxIcon } from './FormListboxIcon.svelte';
 export { default as WidgetEditIcon } from './WidgetEditIcon.svelte';
 export { default as RubberStampIcon } from './RubberStampIcon.svelte';
+export { default as CalloutIcon } from './CalloutIcon.svelte';

examples/svelte-tailwind/src/lib/components/icons/registry.ts

@@ -75,6 +75,7 @@ import FormListboxIcon from './FormListboxIcon.svelte';
 import WidgetEditIcon from './WidgetEditIcon.svelte';
 import RubberStampIcon from './RubberStampIcon.svelte';
 import SignatureIcon from './SignatureIcon.svelte';
+import CalloutIcon from './CalloutIcon.svelte';
 
 // Define the standard Prop type for your icons for consistency
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
@@ -156,6 +157,7 @@ export const iconRegistry = {
   'widget-edit': WidgetEditIcon,
   'rubber-stamp': RubberStampIcon,
   signature: SignatureIcon,
+  callout: CalloutIcon,
 } as const;
 
 // Extract valid keys for Type Safety

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

@@ -881,6 +881,37 @@ export const commands: Record<string, Command<State>> = {
     },
   },
 
+  'annotation:add-callout': {
+    id: 'annotation:add-callout',
+    labelKey: 'annotation.callout',
+    icon: 'callout',
+    iconProps: ({ state }) => ({
+      primaryColor: getToolDefaultsById(state.plugins.annotation, 'freeTextCallout')?.strokeColor,
+      secondaryColor: getToolDefaultsById(state.plugins.annotation, 'freeTextCallout')?.color,
+    }),
+    categories: ['annotation', 'annotation-text'],
+    action: ({ registry, documentId }) => {
+      const annotation = registry.getPlugin<AnnotationPlugin>(ANNOTATION_PLUGIN_ID)?.provides();
+      const annotationScope = annotation?.forDocument(documentId);
+      if (!annotationScope) return;
+
+      if (annotationScope.getActiveTool()?.id === 'freeTextCallout') {
+        annotationScope.setActiveTool(null);
+      } else {
+        annotationScope.setActiveTool('freeTextCallout');
+      }
+    },
+    active: ({ state, documentId }) => {
+      return (
+        state.plugins[ANNOTATION_PLUGIN_ID]?.documents[documentId]?.activeToolId ===
+        'freeTextCallout'
+      );
+    },
+    disabled: ({ state, documentId }) => {
+      return lacksPermission(state, documentId, PdfPermissionFlag.ModifyAnnotations);
+    },
+  },
+
   'annotation:add-highlight': {
     id: 'annotation:add-highlight',
     labelKey: 'annotation.highlight',

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

@@ -122,6 +122,8 @@ export const englishTranslations: Locale = {
       polyline: 'Polyline',
       ink: 'Ink',
       stamp: 'Stamp',
+      comment: 'Comment',
+      callout: 'Callout',
       overflowTools: 'Overflow Tools',
       group: 'Group',
       ungroup: 'Ungroup',
@@ -319,6 +321,8 @@ export const spanishTranslations: Locale = {
       polyline: 'Polilínea',
       ink: 'Tinta',
       stamp: 'Sello',
+      comment: 'Comentario',
+      callout: 'Llamada',
       overflowTools: 'Más herramientas',
       group: 'Agrupar',
       ungroup: 'Desagrupar',
@@ -517,6 +521,8 @@ export const germanTranslations: Locale = {
       polyline: 'Polylinie',
       ink: 'Stift',
       stamp: 'Stempel',
+      comment: 'Kommentar',
+      callout: 'Legende',
       overflowTools: 'Weitere Werkzeuge',
       group: 'Gruppieren',
       ungroup: 'Gruppierung aufheben',
@@ -715,6 +721,8 @@ export const dutchTranslations: Locale = {
       polyline: 'Polylijn',
       ink: 'Inkt',
       stamp: 'Stempel',
+      comment: 'Commentaar',
+      callout: 'Callout',
       overflowTools: 'Meer gereedschappen',
       group: 'Groeperen',
       ungroup: 'Degroeperen',