Add text annotation layer by sp00ky · Pull Request #4 · sp00ky/Gotho.BlazorPdf

sp00ky · 2025-09-01T15:14:56Z

Summary

Support text annotations via new overlay and interop APIs
Add configurable text tools and icons to viewer and MudBlazor sample
Include styling and localization strings for text annotations

Testing

npm run ts
npm run ts-min
npm run css
dotnet test (fails: The current .NET SDK does not support targeting .NET 9.0)

https://chatgpt.com/codex/tasks/task_e_68b59f9e74948329bd2a64df6f9e6b06

sp00ky · 2025-09-01T15:20:42Z

@copilot why am i receiving these errors when i run locally?

'BlazorPdfLocalizedStrings' does not contain a definition for 'Text' and no accessible extension method 'Text' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)
'BlazorPdfLocalizedStrings' does not contain a definition for 'TextClear' and no accessible extension method 'TextClear' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)
The name 'UpdateTextColorAsync' does not exist in the current context
The name 'UpdateFontSize' does not exist in the current context
The name 'UndoLastTextAsync' does not exist in the current context
The name 'ToggleTextAsync' does not exist in the current context
The name 'ToggleTextAsync' does not exist in the current context
The name 'ClearAllPageTextsAsync' does not exist in the current context
The command "npm run ts" exited with code 1.
Metadata file 'C:\Users\HarrKe03\source\repos\sp00ky\Gotho.BlazorPdf\Gotho.BlazorPdf.MudBlazor\obj\Debug\net9.0\ref\Gotho.BlazorPdf.MudBlazor.dll' could not be found
Command failed: C:\Users\HarrKe03\AppData\Local\npm-cache_npx\beb367dfa21eb3f5\node_modules@esbuild\win32-x64\esbuild.exe Ts/PdfViewer.ts --bundle --format=esm --target=esnext --outfile=wwwroot/blazorpdf.js --keep-names
'Pdf' does not contain a definition for 'TextLayer' and no accessible extension method 'TextLayer' accepting a first argument of type 'Pdf' could be found (are you missing a using directive or an assembly reference?)
'Pdf' does not contain a definition for 'TextLayer' and no accessible extension method 'TextLayer' accepting a first argument of type 'Pdf' could be found (are you missing a using directive or an assembly reference?)
'Pdf' does not contain a definition for 'TextLayer' and no accessible extension method 'TextLayer' accepting a first argument of type 'Pdf' could be found (are you missing a using directive or an assembly reference?)
'BlazorPdfLocalizedStrings' does not contain a definition for 'TextUndo' and no accessible extension method 'TextUndo' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)
'BlazorPdfLocalizedStrings' does not contain a definition for 'TextTools' and no accessible extension method 'TextTools' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)
'BlazorPdfLocalizedStrings' does not contain a definition for 'TextSize' and no accessible extension method 'TextSize' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)
'BlazorPdfLocalizedStrings' does not contain a definition for 'TextColor' and no accessible extension method 'TextColor' accepting a first argument of type 'BlazorPdfLocalizedStrings' could be found (are you missing a using directive or an assembly reference?)

Copilot

Pull Request Overview

This PR adds text annotation functionality to the PDF viewer, allowing users to add text overlays to PDF documents. The implementation includes a new text layer system with configurable styling and supports both the standard viewer and MudBlazor integration.

Adds text annotation layer with clickable text placement and styling controls
Implements text layer management including undo/clear operations
Integrates text tools UI components for both standard and MudBlazor viewers

Reviewed Changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
Gotho.BlazorPdf/wwwroot/blazorpdf_text.css	Adds CSS styling for text annotation canvas
Gotho.BlazorPdf/wwwroot/blazorpdf.css	Imports the new text annotation CSS file
Gotho.BlazorPdf/Ts/PdfViewer.ts	Updates PDF viewer to support text layer operations and printing
Gotho.BlazorPdf/Ts/PdfTextLayer.ts	Implements core text annotation functionality with canvas management
Gotho.BlazorPdf/Ts/PdfState.ts	Extends PDF state to include text layer properties
Gotho.BlazorPdf/Ts/Pdf.ts	Integrates text layer into main PDF class
Gotho.BlazorPdf/PdfViewer.razor.cs	Adds C# methods for text layer operations
Gotho.BlazorPdf/PdfViewer.razor	Updates UI to include text annotation tools and canvas
Gotho.BlazorPdf/PdfInterop.cs	Adds JavaScript interop methods for text operations
Gotho.BlazorPdf/Pdf/TextLayer.cs	Implements C# text layer state management
Gotho.BlazorPdf/Pdf/PdfState.cs	Extends internal PDF state with text properties
Gotho.BlazorPdf/Pdf/Pdf.cs	Integrates text layer into main PDF model
Gotho.BlazorPdf/Config/BlazorPdfLocalizedStrings.cs	Adds localization strings for text functionality
Gotho.BlazorPdf/BlazorPdfIcons/TextIcon.razor	Creates SVG icon component for text tool
Gotho.BlazorPdf.MudBlazor/MudPdfViewer.razor	Adds MudBlazor-specific text annotation UI
Gotho.BlazorPdf.MudBlazor/Config/MudPdfIconConfig.cs	Configures MudBlazor icons for text functionality

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-01T15:23:03Z

+    private onClick(e: MouseEvent) {
+        if (!this.canvas || !this.ctx) return;
+        const [x, y] = this.getNormalizedMousePos(this.canvas, e);
+        const text = prompt('Enter text');


Using prompt() for text input provides a poor user experience and is not accessible. Consider implementing a custom modal or inline text input component that integrates with the existing UI framework.

Copilot · 2025-09-01T15:23:03Z

+        const x = rx * this.canvas.width;
+        const y = ry * this.canvas.height;
+        this.ctx.fillStyle = t.color;
+        this.ctx.font = `${t.size}px sans-serif`;


Hard-coding 'sans-serif' as the font family limits text customization options. Consider making the font family configurable through the text layer settings.

Copilot · 2025-09-01T15:23:04Z

+
+            for (const t of pageTexts) {
+                textCtx.fillStyle = t.color;
+                textCtx.font = `${t.size}px sans-serif`;


The font specification is duplicated from PdfTextLayer.ts line 124. Consider extracting this into a shared constant or method to maintain consistency.

Copilot · 2025-09-01T15:23:04Z

+        const x = (evt.clientX - rect.left) / canvas.width;
+        const y = (evt.clientY - rect.top) / canvas.height;


The normalization calculation is incorrect. It should divide by the canvas's display dimensions (rect.width/rect.height) rather than the canvas element's width/height properties to account for CSS scaling.

Suggested change

const x = (evt.clientX - rect.left) / canvas.width;

const y = (evt.clientY - rect.top) / canvas.height;

const x = (evt.clientX - rect.left) / rect.width;

const y = (evt.clientY - rect.top) / rect.height;

Add text annotation layer

1361f74

sp00ky added the codex label Sep 1, 2025 — with ChatGPT Codex Connector

sp00ky requested a review from Copilot September 1, 2025 15:17

This comment was marked as outdated.

Sign in to view

sp00ky requested a review from Copilot September 1, 2025 15:21

Copilot AI reviewed Sep 1, 2025

View reviewed changes

sp00ky added 2 commits September 1, 2025 11:40

Use project references for MudBlazor and docs

77e4ce2

Fix npm scripts for text annotation build

edb585b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add text annotation layer#4

Add text annotation layer#4
sp00ky wants to merge 3 commits into
AddTextAnnotationfrom
codex/add-text-annotation-layer-to-pdf-viewer

sp00ky commented Sep 1, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

sp00ky commented Sep 1, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 1, 2025

Uh oh!

Copilot AI Sep 1, 2025

Uh oh!

Copilot AI Sep 1, 2025

Uh oh!

Copilot AI Sep 1, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const x = (evt.clientX - rect.left) / canvas.width;
		const y = (evt.clientY - rect.top) / canvas.height;

Conversation

sp00ky commented Sep 1, 2025

Summary

Testing

Uh oh!

This comment was marked as outdated.

Uh oh!

sp00ky commented Sep 1, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 1, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants