Add text annotation renderer and UI for Svelte an Vue

Introduce support for text annotations and a comment/Message UI. Adds MessageIcon for Svelte and Vue and wires a new 'annotation:add-comment' command + UI schema entries. Implements a shared annotation-bounds utility to compute screen-space bounds (respecting noZoom/noRotate flags) and refactors group selection & container components to use visualScale/effective rotation and counter-rotation transforms. Adds Text annotation components and TextRenderer for both Svelte and Vue, registers the renderer in built-in renderers, and updates icon exports and registries. Also updates the pdfium submodule commit.

Author: bobsingor

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

@@ -0,0 +1,32 @@
+<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="M8 9h8" />
+  <path d="M8 13h6" />
+  <path
+    d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"
+  />
+</svg>

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

@@ -64,3 +64,4 @@ export { default as GroupIcon } from './GroupIcon.svelte';
 export { default as UngroupIcon } from './UngroupIcon.svelte';
 export { default as InsertTextIcon } from './InsertTextIcon.svelte';
 export { default as ReplaceTextIcon } from './ReplaceTextIcon.svelte';
+export { default as MessageIcon } from './MessageIcon.svelte';

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

@@ -65,6 +65,7 @@ import GroupIcon from './GroupIcon.svelte';
 import UngroupIcon from './UngroupIcon.svelte';
 import InsertTextIcon from './InsertTextIcon.svelte';
 import ReplaceTextIcon from './ReplaceTextIcon.svelte';
+import MessageIcon from './MessageIcon.svelte';
 
 // Define the standard Prop type for your icons for consistency
 export interface IconProps extends SVGAttributes<SVGSVGElement> {
@@ -136,6 +137,7 @@ export const iconRegistry = {
   ungroup: UngroupIcon,
   'insert-text': InsertTextIcon,
   'replace-text': ReplaceTextIcon,
+  message: MessageIcon,
 } as const;
 
 // Extract valid keys for Type Safety

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

@@ -791,6 +791,34 @@ export const commands: Record<string, Command<State>> = {
     },
   },
 
+  'annotation:add-comment': {
+    id: 'annotation:add-comment',
+    labelKey: 'annotation.comment',
+    icon: 'message',
+    iconProps: ({ state }) => ({
+      primaryColor: getToolDefaultsById(state.plugins.annotation, 'textComment')?.strokeColor,
+    }),
+    categories: ['annotation'],
+    action: ({ registry, documentId }) => {
+      const annotation = registry.getPlugin<AnnotationPlugin>(ANNOTATION_PLUGIN_ID)?.provides();
+      const annotationScope = annotation?.forDocument(documentId);
+      if (!annotationScope) return;
+
+      if (annotationScope.getActiveTool()?.id === 'textComment') {
+        annotationScope.setActiveTool(null);
+      } else {
+        annotationScope.setActiveTool('textComment');
+      }
+    },
+    active: ({ state, documentId }) => {
+      const annotation = state.plugins[ANNOTATION_PLUGIN_ID]?.documents[documentId];
+      return annotation?.activeToolId === 'textComment';
+    },
+    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/ui-schema.ts

@@ -296,6 +296,12 @@ export const viewerUISchema: UISchema = {
               commandId: 'annotation:add-replace-text',
               variant: 'icon',
             },
+            {
+              type: 'command-button',
+              id: 'add-comment',
+              commandId: 'annotation:add-comment',
+              variant: 'icon',
+            },
             {
               type: 'command-button',
               id: 'add-stamp',
@@ -662,6 +668,11 @@ export const viewerUISchema: UISchema = {
           id: 'annotation:add-replace-text',
           commandId: 'annotation:add-replace-text',
         },
+        {
+          type: 'command',
+          id: 'annotation:add-comment',
+          commandId: 'annotation:add-comment',
+        },
         {
           type: 'command',
           id: 'annotation:add-highlight',

examples/vue-tailwind/src/components/icons/MessageIcon.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps<{
+  className?: string;
+  title?: string;
+  style?: Record<string, any>;
+}>();
+</script>
+
+<template>
+  <svg
+    :class="className"
+    :style="style"
+    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'"
+  >
+    <title v-if="title">{{ title }}</title>
+    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+    <path d="M8 9h8" />
+    <path d="M8 13h6" />
+    <path
+      d="M18 4a3 3 0 0 1 3 3v8a3 3 0 0 1 -3 3h-5l-5 3v-3h-2a3 3 0 0 1 -3 -3v-8a3 3 0 0 1 3 -3h12"
+    />
+  </svg>
+</template>

examples/vue-tailwind/src/components/icons/index.ts

@@ -60,3 +60,4 @@ export { default as GroupIcon } from './GroupIcon.vue';
 export { default as UngroupIcon } from './UngroupIcon.vue';
 export { default as InsertTextIcon } from './InsertTextIcon.vue';
 export { default as ReplaceTextIcon } from './ReplaceTextIcon.vue';
+export { default as MessageIcon } from './MessageIcon.vue';

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

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

examples/vue-tailwind/src/config/ui-schema.ts

@@ -296,6 +296,12 @@ export const viewerUISchema: UISchema = {
               commandId: 'annotation:add-replace-text',
               variant: 'icon',
             },
+            {
+              type: 'command-button',
+              id: 'add-comment',
+              commandId: 'annotation:add-comment',
+              variant: 'icon',
+            },
             {
               type: 'command-button',
               id: 'add-stamp',
@@ -662,6 +668,11 @@ export const viewerUISchema: UISchema = {
           id: 'annotation:add-replace-text',
           commandId: 'annotation:add-replace-text',
         },
+        {
+          type: 'command',
+          id: 'annotation:add-comment',
+          commandId: 'annotation:add-comment',
+        },
         {
           type: 'command',
           id: 'annotation:add-highlight',