syncfusion-angular-pdf-viewer

# Syncfusion Angular PDF Viewer UI Sample Generator Target package: `@syncfusion/ej2-angular-pdfviewer` ## Mandatory 3-Step workflow (Strict Enforcement) **EVERY query MUST follow these steps sequentially:** ``` STEP 1: Workspace Detection ? STEP 2: Read Reference File ? STEP 3: Generate Code ``` ### Blocking Rules 1. **NO code generation** until Steps 1 & 2 are complete 2. **NO assumptions** - Always verify workspace AND read reference files first 3. **NO undocumented APIs** - Use ONLY APIs from reference files **Violation = STOP and restart with proper protocol** --- ## Mandatory Workflow ### STEP 1: Workspace Detection *(REQUIRED - DO THIS FIRST)* **Execute these tools:** ``` 1. file_search: **/{package.json,angular.json,tsconfig.json} 2. list_dir: src/app/ 3. read_file: package.json (if exists) ``` **Report to user:** ``` ?? STEP 1 COMPLETE: - Workspace: [Empty / Angular X.X project detected] - Files found: [list] - Decision: [Create new / Use existing] ``` ### STEP 2: Read Reference File *(REQUIRED - DO THIS SECOND)* **Execute these steps:** ``` 1. Match user query to Reference File Routing Guide below 2. Use read_file on: references\[filename].md 3. Extract ALL steps/APIs from reference file ``` **Report to user:** ``` ?? STEP 2 COMPLETE: - Reference file: [filename.md] - Steps found: [list sequential steps] - APIs validated: [list properties/methods used] ``` ### STEP 3: Generate Code *(EXECUTE ONLY AFTER STEPS 1 & 2)* **Validation checklist:** - [ ] Every API cross-referenced against reference file - [ ] No invented/assumed properties used - [ ] Angular patterns followed (component bindings, lifecycle hooks) - [ ] If API not in reference file ? DELETE it **If feature not in reference file:** ``` ? FEATURE NOT SUPPORTED The requested [feature/API] is not documented. Available alternatives: [list from reference files] ``` --- ## Reference File Routing Guide ### Core Setup | User Query Keywords | Reference File | Purpose | |---|---|---| | "basic", "create sample", "getting started", "load PDF" | [getting-started.md](references/getting-started.md) | Minimal PDFViewer setup | | "configuration", "server settings", "locale" | [general-properties.md](references/general-properties.md) | Core viewer properties | | "disable", "hide features", "enable/disable", "read-only" | [enable-properties.md](references/enable-properties.md) | Feature toggles | ### Navigation | User Query Keywords | Reference File | Purpose | |---|---|---| | "page navigation", "next/previous page", "go to page" | [page-navigation.md](references/page-navigation.md) | Page controls | | "bookmarks", "table of contents", "TOC", "outline" | [bookmark-navigation.md](references/bookmark-navigation.md) | Bookmark navigation (use ViewChild) | | "hyperlinks", "external links", "URL navigation" | [hyperlink-navigation.md](references/hyperlink-navigation.md) | Link handling | | "thumbnails", "preview pages", "thumbnail panel" | [thumbnail-navigation.md](references/thumbnail-navigation.md) | Thumbnail panel | ### Viewing & Interaction | User Query Keywords | Reference File | Purpose | |---|---|---| | "zoom", "magnification", "fit to page", "scale" | [magnification.md](references/magnification.md) | Zoom controls | | "text selection", "panning", "scroll mode" | [interaction-mode.md](references/interaction-mode.md) | Interaction modes | | "select text", "copy text" | [text-selection.md](references/text-selection.md) | Text selection | | "search", "find in PDF", "highlight search" | [text-search.md](references/text-search.md) | Search functionality | ### Toolbar & Context Menu | User Query Keywords | Reference File | Purpose | |---|---|---| | "customize toolbar", "hide toolbar items", "remove buttons" | [toolbar-settings.md](references/toolbar-settings.md) | Toolbar configuration | | "show/hide toolbar dynamically", "toggle toolbar" | [toolbar-methods.md](references/toolbar-methods.md) | Programmatic toolbar control | | "right-click menu", "context menu", "custom menu" | [contextmenu.md](references/contextmenu.md) | Context menu | ### Annotations | User Query Keywords | Reference File | Purpose | |---|---|---| | "annotation colors", "annotation styles", "customize annotations" | [annotation-settings.md](references/annotation-settings.md) | Annotation appearance | | "annotation events", "when annotation added", "annotation callbacks" | [annotation-events.md](references/annotation-events.md) | Annotation lifecycle | | "annotation labels", "shape labels", "measurement labels" | [shape-label-settings.md](references/shape-label-settings.md) | Label customization | | "ink annotation", "freehand drawing", "signature", "sketch", "handwritten notes" | [ink-annotation.md](references/ink-annotation.md) | Ink annotations | | "redaction", "redact content", "black out text" | [redaction-annotation.md](references/redaction-annotation.md) | Redaction annotations | ### Forms | User Query Keywords | Reference File | Purpose | |---|---|---| | "form field defaults", "form field styles" | [form-field-settings.md](references/form-field-settings.md) | Form field config | | "form field events", "field changes", "validation" | [form-field-events.md](references/form-field-events.md) | Form field events | ### Document Actions | User Query Keywords | Reference File | Purpose | |---|---|---| | "download PDF", "save PDF", "export" | [download.md](references/download.md) | Download functionality | | "print PDF", "print document" | [print.md](references/print.md) | Print functionality | | "reorder pages", "rotate pages", "add/remove pages" | [organize-pages.md](references/organize-pages.md) | Page manipulation | ### Advanced | User Query Keywords | Reference File | Purpose | |---|---|---| | "load programmatically", "API methods", "extract text" | [api-methods.md](references/api-methods.md) | Programmatic control | | "event list", "all events", "event reference" | [events.md](references/events.md) | Complete event list | --- ## Toolbar Item Name Validation (CRITICAL) **When generating toolbar configurations:** 1. **ALWAYS read `toolbar-settings.md` first** 2. **Use ONLY names from these sections:** - "Available Primary Toolbar Items" - "Available Annotation Toolbar Items" - "Available Form Designer Items" 3. **Character-by-character validation required** - No typos allowed **Common mistakes to prevent:** - ? `AnotatetionEditTool` ? ? `AnnotationEditTool` - ? `CalibrationOption` ? ? `CalibrateTool` - ? `ShapeAnnotationOption` ? ? `ShapeTool` --- ## Quick Start Example Add the Angular PDF Viewer by using `<ejs-pdfviewer>` selector in the template section of the `src/app/app.ts` file to render the PDF Viewer component. ```typescript import { Component, OnInit } from '@angular/core'; import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, FormDesignerService, FormFieldsService, AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer'; @Component({ selector: 'app-root', // specifies the template string for the PDF Viewer component template: `<div class="content-wrapper"> <ejs-pdfviewer id="pdfViewer" [documentPath]='document' [resourceUrl]='resource' style="height:640px;display:block"> </ejs-pdfviewer> </div>`, imports: [ PdfViewerModule ], providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService] }) export class AppComponent implements OnInit { public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib"; ngOnInit(): void { } } ``` ## Settings Configurations ### Rule 1: Simple Settings (1-3 properties) ? Inline ```typescript public annotationSelection = { selectionBorderColor: 'blue', resizerSize: 8 }; ``` ### Rule 2: Complex Settings (4+ properties or enums) ? Import enums ```typescript import { AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer'; public annotationSelection = { selectionBorderColor: '#0000ff', resizerSize: 8, resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, resizerCursorType: CursorType.grab }; ``` --- ## Protocol Violation Handling | Violation | Fix | |---|---| | Skipped Step 1 | Re-run: Use file_search and list_dir first | | Skipped Step 2 | Re-run: Use read_file on reference file | | Used undocumented API | Delete it, check reference for alternatives | | Didn't report findings | Report: "I checked X, found Y, now doing Z" | **If user calls out violation: IMMEDIATELY acknowledge, apologize, and restart with proper protocol.** --- ## Enforcement Checklist **Before generating code, verify:** - [ ] Step 1 executed (workspace detection) and reported - [ ] Step 2 executed (reference file read) and reported - [ ] Every API validated against reference file - [ ] No undocumented APIs used - [ ] Angular patterns followed **Reference files are SOURCE OF TRUTH - everything must trace back to them.**