From 0d01c6cc1bee1e062ea4d6d59310822afed655ba Mon Sep 17 00:00:00 2001 From: SF4524LogeshKumar Date: Wed, 19 Nov 2025 19:34:54 +0530 Subject: [PATCH] 993776: Sample for Redaction in Angular PDF Viewer --- .../.editorconfig | 16 + .../.gitignore | 42 ++ .../README.md | 27 + .../angular.json | 101 ++++ .../package.json | 39 ++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 483 ++++++++++++++++++ .../src/app/app.component.spec.ts | 31 ++ .../src/app/app.component.ts | 149 ++++++ .../src/app/app.module.ts | 36 ++ .../src/assets/.gitkeep | 0 .../src/favicon.ico | Bin 0 -> 948 bytes .../src/index.html | 13 + .../src/main.ts | 7 + .../src/styles.css | 10 + .../tsconfig.app.json | 14 + .../tsconfig.json | 33 ++ .../tsconfig.spec.json | 14 + .../Search Text and Redact/.editorconfig | 16 + Redaction/Search Text and Redact/.gitignore | 42 ++ Redaction/Search Text and Redact/README.md | 27 + Redaction/Search Text and Redact/angular.json | 101 ++++ Redaction/Search Text and Redact/package.json | 39 ++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 483 ++++++++++++++++++ .../src/app/app.component.spec.ts | 31 ++ .../src/app/app.component.ts | 133 +++++ .../src/app/app.module.ts | 36 ++ .../src/assets/.gitkeep | 0 .../Search Text and Redact/src/favicon.ico | Bin 0 -> 948 bytes .../Search Text and Redact/src/index.html | 13 + Redaction/Search Text and Redact/src/main.ts | 7 + .../Search Text and Redact/src/styles.css | 10 + .../Search Text and Redact/tsconfig.app.json | 14 + .../Search Text and Redact/tsconfig.json | 33 ++ .../Search Text and Redact/tsconfig.spec.json | 14 + .../.editorconfig | 16 + .../.gitignore | 42 ++ .../Show and Hide Redaction Toolbar/README.md | 27 + .../angular.json | 101 ++++ .../package.json | 39 ++ .../src/app/app.component.css | 0 .../src/app/app.component.html | 483 ++++++++++++++++++ .../src/app/app.component.spec.ts | 31 ++ .../src/app/app.component.ts | 90 ++++ .../src/app/app.module.ts | 36 ++ .../src/assets/.gitkeep | 0 .../src/favicon.ico | Bin 0 -> 948 bytes .../src/index.html | 13 + .../src/main.ts | 7 + .../src/styles.css | 10 + .../tsconfig.app.json | 14 + .../tsconfig.json | 33 ++ .../tsconfig.spec.json | 14 + 54 files changed, 2970 insertions(+) create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/.editorconfig create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/.gitignore create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/README.md create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/angular.json create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/package.json create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.css create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.html create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.spec.ts create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.ts create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/app/app.module.ts create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/assets/.gitkeep create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/favicon.ico create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/index.html create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/main.ts create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/src/styles.css create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/tsconfig.app.json create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/tsconfig.json create mode 100644 Redaction/How to Add Redaction Annotation Programmatically/tsconfig.spec.json create mode 100644 Redaction/Search Text and Redact/.editorconfig create mode 100644 Redaction/Search Text and Redact/.gitignore create mode 100644 Redaction/Search Text and Redact/README.md create mode 100644 Redaction/Search Text and Redact/angular.json create mode 100644 Redaction/Search Text and Redact/package.json create mode 100644 Redaction/Search Text and Redact/src/app/app.component.css create mode 100644 Redaction/Search Text and Redact/src/app/app.component.html create mode 100644 Redaction/Search Text and Redact/src/app/app.component.spec.ts create mode 100644 Redaction/Search Text and Redact/src/app/app.component.ts create mode 100644 Redaction/Search Text and Redact/src/app/app.module.ts create mode 100644 Redaction/Search Text and Redact/src/assets/.gitkeep create mode 100644 Redaction/Search Text and Redact/src/favicon.ico create mode 100644 Redaction/Search Text and Redact/src/index.html create mode 100644 Redaction/Search Text and Redact/src/main.ts create mode 100644 Redaction/Search Text and Redact/src/styles.css create mode 100644 Redaction/Search Text and Redact/tsconfig.app.json create mode 100644 Redaction/Search Text and Redact/tsconfig.json create mode 100644 Redaction/Search Text and Redact/tsconfig.spec.json create mode 100644 Redaction/Show and Hide Redaction Toolbar/.editorconfig create mode 100644 Redaction/Show and Hide Redaction Toolbar/.gitignore create mode 100644 Redaction/Show and Hide Redaction Toolbar/README.md create mode 100644 Redaction/Show and Hide Redaction Toolbar/angular.json create mode 100644 Redaction/Show and Hide Redaction Toolbar/package.json create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/app/app.component.css create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/app/app.component.html create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/app/app.component.spec.ts create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/app/app.component.ts create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/app/app.module.ts create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/assets/.gitkeep create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/favicon.ico create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/index.html create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/main.ts create mode 100644 Redaction/Show and Hide Redaction Toolbar/src/styles.css create mode 100644 Redaction/Show and Hide Redaction Toolbar/tsconfig.app.json create mode 100644 Redaction/Show and Hide Redaction Toolbar/tsconfig.json create mode 100644 Redaction/Show and Hide Redaction Toolbar/tsconfig.spec.json diff --git a/Redaction/How to Add Redaction Annotation Programmatically/.editorconfig b/Redaction/How to Add Redaction Annotation Programmatically/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/Redaction/How to Add Redaction Annotation Programmatically/.gitignore b/Redaction/How to Add Redaction Annotation Programmatically/.gitignore new file mode 100644 index 0000000..0711527 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/Redaction/How to Add Redaction Annotation Programmatically/README.md b/Redaction/How to Add Redaction Annotation Programmatically/README.md new file mode 100644 index 0000000..b2cbbe3 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/README.md @@ -0,0 +1,27 @@ +# Getting started + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/Redaction/How to Add Redaction Annotation Programmatically/angular.json b/Redaction/How to Add Redaction Annotation Programmatically/angular.json new file mode 100644 index 0000000..419ea66 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/angular.json @@ -0,0 +1,101 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "my-app:build:production" + }, + "development": { + "browserTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "my-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "8d9c65e2-01c9-4a66-bc68-685c535cc647" + } +} diff --git a/Redaction/How to Add Redaction Annotation Programmatically/package.json b/Redaction/How to Add Redaction Annotation Programmatically/package.json new file mode 100644 index 0000000..052728f --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/package.json @@ -0,0 +1,39 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/compiler": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/platform-browser": "^15.0.0", + "@angular/platform-browser-dynamic": "^15.0.0", + "@angular/router": "^15.0.0", + "@syncfusion/ej2-angular-pdfviewer": "*", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.12.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^15.0.4", + "@angular/cli": "~15.0.4", + "@angular/compiler-cli": "^15.0.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.5.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.0.0", + "typescript": "~4.8.2" + } +} diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.css b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.html b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.html new file mode 100644 index 0000000..e4e763e --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.html @@ -0,0 +1,483 @@ + + + + + + + + + + + + + + +
+ + +
+ + + Rocket Ship + + + + + + + + + + {{ title }} app is running! + + + Rocket Ship Smoke + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + Learn Angular + + + + + CLI Documentation + + + + + + Angular Material + + + + + + Angular Blog + + + + + + Angular DevTools + + + +
+ + +

Next Steps

+

What do you want to do next with your app?

+ + + +
+ + + + + + + + + + + +
+ + +
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add @angular/pwa
+ 
ng add _____
+ 
ng test
+ 
ng build
+
+ + +
+ + + Meetup Logo + + + + + + + Discord Logo + + + + +
+ + + + + + Gray Clouds Background + + + +
+ + + + + + + + + diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.spec.ts b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.spec.ts new file mode 100644 index 0000000..03e0fd7 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.spec.ts @@ -0,0 +1,31 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'my-app'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!'); + }); +}); diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.ts b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.ts new file mode 100644 index 0000000..44e79a2 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.component.ts @@ -0,0 +1,149 @@ +import { Component, ViewChild, AfterViewInit } from '@angular/core'; +import { + PdfViewerComponent, + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
+ + + + + +
+ + + `, + providers: [ + AnnotationService, + ToolbarService, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent implements AfterViewInit { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + // Keep toolbar simple; include redaction edit tool if you want UI access too + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'AnnotationEditTool', + 'RedactionEditTool', // shows the redaction UI tool (optional) + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + // Configure default redaction annotation properties (same as your JS) + ngAfterViewInit(): void { + (this.pdfViewer as any).redactionSettings = { + overlayText: 'Confidential', + markerFillColor: '#FF0000', + markerBorderColor: '#000000', + isRepeat: false, + fillColor: '#F8F8F8', + fontColor: '#333333', + fontSize: 14, + fontFamily: 'Symbol', + textAlign: 'Right' + }; + } + + addRedaction(): void { + if (!this.pdfViewer) { return; } + + this.pdfViewer.annotation.addAnnotation('Redaction', { + bound: { x: 200, y: 480, width: 150, height: 75 }, + pageNumber: 1, + markerFillColor: '#0000FF', + markerBorderColor: 'white', + fillColor: 'red', + overlayText: 'Confidential', + fontColor: 'yellow', + fontFamily: 'Times New Roman', + fontSize: 8, + beforeRedactionsApplied: false + } as any); + } + + //Delete Redaction Annotation + deleteAnnotationById(): void { + this.pdfViewer.annotationModule.deleteAnnotationById( + (this.pdfViewer as any).annotationCollection[0].annotationId + ); + } + //You can listen to the annotationAdd event to track when annotations are added. + onAnnotationAdd(args: any): void { + console.log('Annotation added:', args); + } + + //Edit RedactionAnnotation + editRedactAnnotation(): void { + const collection: any[] = (this.pdfViewer as any).annotationCollection; + for (let i = 0; i < collection.length; i++) { + if (collection[i].subject === 'Redaction') { + collection[i].overlayText = 'EditedAnnotation'; + collection[i].markerFillColor = '#22FF00'; + collection[i].markerBorderColor = '#000000'; + collection[i].isRepeat = true; + collection[i].fillColor = '#F8F8F8'; + collection[i].fontColor = '#333333'; + collection[i].fontSize = 14; + collection[i].fontFamily = 'Symbol'; + collection[i].textAlign = 'Right'; + collection[i].beforeRedactionsApplied = false; + + (this.pdfViewer as any).annotation.editAnnotation(collection[i]); + } + } + } + + // Add page redactions programmatically (pages 1, 3, 5, 7) + addPageRedactions(): void { + this.pdfViewer.annotation.addPageRedactions([1, 3, 5, 7]); + } + + // Apply redaction programmatically (irreversible) + applyRedaction(): void { + this.pdfViewer.annotation.redact(); + } +} diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.module.ts b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.module.ts new file mode 100644 index 0000000..fadea53 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/app/app.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { + PdfViewerModule, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService +} from '@syncfusion/ej2-angular-pdfviewer'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + PdfViewerModule + ], + providers: [LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/assets/.gitkeep b/Redaction/How to Add Redaction Annotation Programmatically/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/favicon.ico b/Redaction/How to Add Redaction Annotation Programmatically/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + MyApp + + + + + + + + diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/main.ts b/Redaction/How to Add Redaction Annotation Programmatically/src/main.ts new file mode 100644 index 0000000..c58dc05 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/Redaction/How to Add Redaction Annotation Programmatically/src/styles.css b/Redaction/How to Add Redaction Annotation Programmatically/src/styles.css new file mode 100644 index 0000000..fc9d8ef --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/src/styles.css @@ -0,0 +1,10 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.app.json b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.app.json new file mode 100644 index 0000000..374cc9d --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.json b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.json new file mode 100644 index 0000000..ed966d4 --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.spec.json b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.spec.json new file mode 100644 index 0000000..be7e9da --- /dev/null +++ b/Redaction/How to Add Redaction Annotation Programmatically/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/Redaction/Search Text and Redact/.editorconfig b/Redaction/Search Text and Redact/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/Redaction/Search Text and Redact/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/Redaction/Search Text and Redact/.gitignore b/Redaction/Search Text and Redact/.gitignore new file mode 100644 index 0000000..0711527 --- /dev/null +++ b/Redaction/Search Text and Redact/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/Redaction/Search Text and Redact/README.md b/Redaction/Search Text and Redact/README.md new file mode 100644 index 0000000..b2cbbe3 --- /dev/null +++ b/Redaction/Search Text and Redact/README.md @@ -0,0 +1,27 @@ +# Getting started + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/Redaction/Search Text and Redact/angular.json b/Redaction/Search Text and Redact/angular.json new file mode 100644 index 0000000..419ea66 --- /dev/null +++ b/Redaction/Search Text and Redact/angular.json @@ -0,0 +1,101 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "my-app:build:production" + }, + "development": { + "browserTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "my-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "8d9c65e2-01c9-4a66-bc68-685c535cc647" + } +} diff --git a/Redaction/Search Text and Redact/package.json b/Redaction/Search Text and Redact/package.json new file mode 100644 index 0000000..052728f --- /dev/null +++ b/Redaction/Search Text and Redact/package.json @@ -0,0 +1,39 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/compiler": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/platform-browser": "^15.0.0", + "@angular/platform-browser-dynamic": "^15.0.0", + "@angular/router": "^15.0.0", + "@syncfusion/ej2-angular-pdfviewer": "*", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.12.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^15.0.4", + "@angular/cli": "~15.0.4", + "@angular/compiler-cli": "^15.0.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.5.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.0.0", + "typescript": "~4.8.2" + } +} diff --git a/Redaction/Search Text and Redact/src/app/app.component.css b/Redaction/Search Text and Redact/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/Search Text and Redact/src/app/app.component.html b/Redaction/Search Text and Redact/src/app/app.component.html new file mode 100644 index 0000000..e4e763e --- /dev/null +++ b/Redaction/Search Text and Redact/src/app/app.component.html @@ -0,0 +1,483 @@ + + + + + + + + + + + + + + +
+ + +
+ + + Rocket Ship + + + + + + + + + + {{ title }} app is running! + + + Rocket Ship Smoke + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + Learn Angular + + + + + CLI Documentation + + + + + + Angular Material + + + + + + Angular Blog + + + + + + Angular DevTools + + + +
+ + +

Next Steps

+

What do you want to do next with your app?

+ + + +
+ + + + + + + + + + + +
+ + +
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add @angular/pwa
+ 
ng add _____
+ 
ng test
+ 
ng build
+
+ + +
+ + + Meetup Logo + + + + + + + Discord Logo + + + + +
+ + + + + + Gray Clouds Background + + + +
+ + + + + + + + + diff --git a/Redaction/Search Text and Redact/src/app/app.component.spec.ts b/Redaction/Search Text and Redact/src/app/app.component.spec.ts new file mode 100644 index 0000000..03e0fd7 --- /dev/null +++ b/Redaction/Search Text and Redact/src/app/app.component.spec.ts @@ -0,0 +1,31 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'my-app'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!'); + }); +}); diff --git a/Redaction/Search Text and Redact/src/app/app.component.ts b/Redaction/Search Text and Redact/src/app/app.component.ts new file mode 100644 index 0000000..062fb9b --- /dev/null +++ b/Redaction/Search Text and Redact/src/app/app.component.ts @@ -0,0 +1,133 @@ +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
+
+ + +
+ + + +
+ `, + providers: [ + // Angular DI is the Angular equivalent of PdfViewer.Inject(...) + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Same sources as in your JS + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + + // Primary toolbar including Redaction + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // show Redaction entry in main toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + /** + * Finds the term "syncfusion" across the document and adds Redaction annotations + * on top of every match (converts 72-dpi bounds to 96-dpi for addAnnotation). + */ + async searchTextAndRedact(): Promise { + const term = 'syncfusion'; + // Use async search so we don't depend on extractTextCompleted timing. + const results = await this.pdfViewer.textSearchModule.findTextAsync(term, false); + if (!results || results.length === 0) { + console.warn('No matches found.'); + return; + } + + const px = (pt: number) => (pt * 96) / 72; // convert from points to pixels + + for (const pageResult of results) { + if (!pageResult || !pageResult.bounds || pageResult.bounds.length === 0) { continue; } + if (pageResult.pageIndex == null) { continue; } // guard + const pageNumber = pageResult.pageIndex + 1; // API expects 1-based + + for (const bound of pageResult.bounds) { + this.pdfViewer.annotation.addAnnotation('Redaction', { + bound: { + x: px(bound.x), + y: px(bound.y), + width: px(bound.width), + height: px(bound.height) + }, + pageNumber, + overlayText: 'Confidential', + fillColor: '#00FF40FF', + fontColor: '#333333', + fontSize: 12, + fontFamily: 'Arial', + markerFillColor: '#FF0000', + markerBorderColor: '#000000' + } as any); // 'as any' to accept redaction-specific options + } + } + } + + /** Permanently applies all redaction marks in the document. */ + applyRedaction(): void { + this.pdfViewer.annotation.redact(); + } +} diff --git a/Redaction/Search Text and Redact/src/app/app.module.ts b/Redaction/Search Text and Redact/src/app/app.module.ts new file mode 100644 index 0000000..fadea53 --- /dev/null +++ b/Redaction/Search Text and Redact/src/app/app.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { + PdfViewerModule, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService +} from '@syncfusion/ej2-angular-pdfviewer'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + PdfViewerModule + ], + providers: [LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/Redaction/Search Text and Redact/src/assets/.gitkeep b/Redaction/Search Text and Redact/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/Search Text and Redact/src/favicon.ico b/Redaction/Search Text and Redact/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + MyApp + + + + + + + + diff --git a/Redaction/Search Text and Redact/src/main.ts b/Redaction/Search Text and Redact/src/main.ts new file mode 100644 index 0000000..c58dc05 --- /dev/null +++ b/Redaction/Search Text and Redact/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/Redaction/Search Text and Redact/src/styles.css b/Redaction/Search Text and Redact/src/styles.css new file mode 100644 index 0000000..fc9d8ef --- /dev/null +++ b/Redaction/Search Text and Redact/src/styles.css @@ -0,0 +1,10 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/Redaction/Search Text and Redact/tsconfig.app.json b/Redaction/Search Text and Redact/tsconfig.app.json new file mode 100644 index 0000000..374cc9d --- /dev/null +++ b/Redaction/Search Text and Redact/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/Redaction/Search Text and Redact/tsconfig.json b/Redaction/Search Text and Redact/tsconfig.json new file mode 100644 index 0000000..ed966d4 --- /dev/null +++ b/Redaction/Search Text and Redact/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/Redaction/Search Text and Redact/tsconfig.spec.json b/Redaction/Search Text and Redact/tsconfig.spec.json new file mode 100644 index 0000000..be7e9da --- /dev/null +++ b/Redaction/Search Text and Redact/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +} diff --git a/Redaction/Show and Hide Redaction Toolbar/.editorconfig b/Redaction/Show and Hide Redaction Toolbar/.editorconfig new file mode 100644 index 0000000..59d9a3a --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/.editorconfig @@ -0,0 +1,16 @@ +# Editor configuration, see https://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +insert_final_newline = true +trim_trailing_whitespace = true + +[*.ts] +quote_type = single + +[*.md] +max_line_length = off +trim_trailing_whitespace = false diff --git a/Redaction/Show and Hide Redaction Toolbar/.gitignore b/Redaction/Show and Hide Redaction Toolbar/.gitignore new file mode 100644 index 0000000..0711527 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/.gitignore @@ -0,0 +1,42 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. + +# Compiled output +/dist +/tmp +/out-tsc +/bazel-out + +# Node +/node_modules +npm-debug.log +yarn-error.log + +# IDEs and editors +.idea/ +.project +.classpath +.c9/ +*.launch +.settings/ +*.sublime-workspace + +# Visual Studio Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +.history/* + +# Miscellaneous +/.angular/cache +.sass-cache/ +/connect.lock +/coverage +/libpeerconnection.log +testem.log +/typings + +# System files +.DS_Store +Thumbs.db diff --git a/Redaction/Show and Hide Redaction Toolbar/README.md b/Redaction/Show and Hide Redaction Toolbar/README.md new file mode 100644 index 0000000..b2cbbe3 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/README.md @@ -0,0 +1,27 @@ +# Getting started + +This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.4. + +## Development server + +Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. + +## Code scaffolding + +Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. + +## Build + +Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. + +## Running unit tests + +Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). + +## Running end-to-end tests + +Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. + +## Further help + +To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. diff --git a/Redaction/Show and Hide Redaction Toolbar/angular.json b/Redaction/Show and Hide Redaction Toolbar/angular.json new file mode 100644 index 0000000..419ea66 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/angular.json @@ -0,0 +1,101 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "my-app": { + "projectType": "application", + "schematics": {}, + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/my-app", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": [ + "zone.js" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "500kb", + "maximumError": "1mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "outputHashing": "all" + }, + "development": { + "buildOptimizer": false, + "optimization": false, + "vendorChunk": true, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "browserTarget": "my-app:build:production" + }, + "development": { + "browserTarget": "my-app:build:development" + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "my-app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "polyfills": [ + "zone.js", + "zone.js/testing" + ], + "tsConfig": "tsconfig.spec.json", + "assets": [ + "src/favicon.ico", + "src/assets" + ], + "styles": [ + "src/styles.css" + ], + "scripts": [] + } + } + } + } + }, + "cli": { + "analytics": "8d9c65e2-01c9-4a66-bc68-685c535cc647" + } +} diff --git a/Redaction/Show and Hide Redaction Toolbar/package.json b/Redaction/Show and Hide Redaction Toolbar/package.json new file mode 100644 index 0000000..052728f --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/package.json @@ -0,0 +1,39 @@ +{ + "name": "my-app", + "version": "0.0.0", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" + }, + "private": true, + "dependencies": { + "@angular/animations": "^15.0.0", + "@angular/common": "^15.0.0", + "@angular/compiler": "^15.0.0", + "@angular/core": "^15.0.0", + "@angular/forms": "^15.0.0", + "@angular/platform-browser": "^15.0.0", + "@angular/platform-browser-dynamic": "^15.0.0", + "@angular/router": "^15.0.0", + "@syncfusion/ej2-angular-pdfviewer": "*", + "rxjs": "~7.5.0", + "tslib": "^2.3.0", + "zone.js": "~0.12.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^15.0.4", + "@angular/cli": "~15.0.4", + "@angular/compiler-cli": "^15.0.0", + "@types/jasmine": "~4.3.0", + "jasmine-core": "~4.5.0", + "karma": "~6.4.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.2.0", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.0.0", + "typescript": "~4.8.2" + } +} diff --git a/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.css b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.css new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.html b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.html new file mode 100644 index 0000000..e4e763e --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.html @@ -0,0 +1,483 @@ + + + + + + + + + + + + + + +
+ + +
+ + + Rocket Ship + + + + + + + + + + {{ title }} app is running! + + + Rocket Ship Smoke + + + +
+ + +

Resources

+

Here are some links to help you get started:

+ +
+ + + Learn Angular + + + + + CLI Documentation + + + + + + Angular Material + + + + + + Angular Blog + + + + + + Angular DevTools + + + +
+ + +

Next Steps

+

What do you want to do next with your app?

+ + + +
+ + + + + + + + + + + +
+ + +
+ 
ng generate component xyz
+ 
ng add @angular/material
+ 
ng add @angular/pwa
+ 
ng add _____
+ 
ng test
+ 
ng build
+
+ + +
+ + + Meetup Logo + + + + + + + Discord Logo + + + + +
+ + + + + + Gray Clouds Background + + + +
+ + + + + + + + + diff --git a/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.spec.ts b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.spec.ts new file mode 100644 index 0000000..03e0fd7 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.spec.ts @@ -0,0 +1,31 @@ +import { TestBed } from '@angular/core/testing'; +import { AppComponent } from './app.component'; + +describe('AppComponent', () => { + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ + AppComponent + ], + }).compileComponents(); + }); + + it('should create the app', () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app).toBeTruthy(); + }); + + it(`should have as title 'my-app'`, () => { + const fixture = TestBed.createComponent(AppComponent); + const app = fixture.componentInstance; + expect(app.title).toEqual('my-app'); + }); + + it('should render title', () => { + const fixture = TestBed.createComponent(AppComponent); + fixture.detectChanges(); + const compiled = fixture.nativeElement as HTMLElement; + expect(compiled.querySelector('.content span')?.textContent).toContain('my-app app is running!'); + }); +}); diff --git a/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.ts b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.ts new file mode 100644 index 0000000..75e551c --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/app/app.component.ts @@ -0,0 +1,90 @@ +import { Component, ViewChild } from '@angular/core'; +import { + PdfViewerComponent, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService, + ToolbarSettingsModel +} from '@syncfusion/ej2-angular-pdfviewer'; + +@Component({ + selector: 'app-root', + template: ` +
+ +
+ + +
+ + +
+ `, + providers: [ + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + AnnotationService, + TextSearchService, + TextSelectionService, + PrintService, + FormFieldsService, + FormDesignerService, + PageOrganizerService + ] +}) +export class AppComponent { + @ViewChild('pdfviewer', { static: true }) pdfViewer!: PdfViewerComponent; + + // Standalone assets (keep version aligned with your installed package) + public resource = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib'; + public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'; + + // Includes RedactionEditTool in the primary toolbar + public toolbarSettings: ToolbarSettingsModel = { + toolbarItems: [ + 'OpenOption', + 'UndoRedoTool', + 'PageNavigationTool', + 'MagnificationTool', + 'PanTool', + 'SelectionTool', + 'CommentTool', + 'SubmitForm', + 'AnnotationEditTool', + 'RedactionEditTool', // primary-bar entry to access the Redaction toolbar + 'FormDesignerEditTool', + 'SearchOption', + 'PrintOption', + 'DownloadOption' + ] + }; + + // Separate handlers for show/hide (no toggle) + showRedactionToolbar(): void { + this.pdfViewer.toolbar.showRedactionToolbar(true); + } + + hideRedactionToolbar(): void { + this.pdfViewer.toolbar.showRedactionToolbar(false); + } +} \ No newline at end of file diff --git a/Redaction/Show and Hide Redaction Toolbar/src/app/app.module.ts b/Redaction/Show and Hide Redaction Toolbar/src/app/app.module.ts new file mode 100644 index 0000000..fadea53 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/app/app.module.ts @@ -0,0 +1,36 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { + PdfViewerModule, + LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService +} from '@syncfusion/ej2-angular-pdfviewer'; +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + PdfViewerModule + ], + providers: [LinkAnnotationService, + BookmarkViewService, + MagnificationService, + ThumbnailViewService, + ToolbarService, + NavigationService, + TextSearchService, + TextSelectionService, + PrintService], + bootstrap: [AppComponent] +}) +export class AppModule { } diff --git a/Redaction/Show and Hide Redaction Toolbar/src/assets/.gitkeep b/Redaction/Show and Hide Redaction Toolbar/src/assets/.gitkeep new file mode 100644 index 0000000..e69de29 diff --git a/Redaction/Show and Hide Redaction Toolbar/src/favicon.ico b/Redaction/Show and Hide Redaction Toolbar/src/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..997406ad22c29aae95893fb3d666c30258a09537 GIT binary patch literal 948 zcmV;l155mgP)CBYU7IjCFmI-B}4sMJt3^s9NVg!P0 z6hDQy(L`XWMkB@zOLgN$4KYz;j0zZxq9KKdpZE#5@k0crP^5f9KO};h)ZDQ%ybhht z%t9#h|nu0K(bJ ztIkhEr!*UyrZWQ1k2+YkGqDi8Z<|mIN&$kzpKl{cNP=OQzXHz>vn+c)F)zO|Bou>E z2|-d_=qY#Y+yOu1a}XI?cU}%04)zz%anD(XZC{#~WreV!a$7k2Ug`?&CUEc0EtrkZ zL49MB)h!_K{H(*l_93D5tO0;BUnvYlo+;yss%n^&qjt6fZOa+}+FDO(~2>G z2dx@=JZ?DHP^;b7*Y1as5^uphBsh*s*z&MBd?e@I>-9kU>63PjP&^#5YTOb&x^6Cf z?674rmSHB5Fk!{Gv7rv!?qX#ei_L(XtwVqLX3L}$MI|kJ*w(rhx~tc&L&xP#?cQow zX_|gx$wMr3pRZIIr_;;O|8fAjd;1`nOeu5K(pCu7>^3E&D2OBBq?sYa(%S?GwG&_0-s%_v$L@R!5H_fc)lOb9ZoOO#p`Nn`KU z3LTTBtjwo`7(HA6 z7gmO$yTR!5L>Bsg!X8616{JUngg_@&85%>W=mChTR;x4`P=?PJ~oPuy5 zU-L`C@_!34D21{fD~Y8NVnR3t;aqZI3fIhmgmx}$oc-dKDC6Ap$Gy>a!`A*x2L1v0 WcZ@i?LyX}70000 + + + + MyApp + + + + + + + + diff --git a/Redaction/Show and Hide Redaction Toolbar/src/main.ts b/Redaction/Show and Hide Redaction Toolbar/src/main.ts new file mode 100644 index 0000000..c58dc05 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/main.ts @@ -0,0 +1,7 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + + +platformBrowserDynamic().bootstrapModule(AppModule) + .catch(err => console.error(err)); diff --git a/Redaction/Show and Hide Redaction Toolbar/src/styles.css b/Redaction/Show and Hide Redaction Toolbar/src/styles.css new file mode 100644 index 0000000..fc9d8ef --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/src/styles.css @@ -0,0 +1,10 @@ +/* You can add global styles to this file, and also import other style files */ +@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css'; +@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css'; \ No newline at end of file diff --git a/Redaction/Show and Hide Redaction Toolbar/tsconfig.app.json b/Redaction/Show and Hide Redaction Toolbar/tsconfig.app.json new file mode 100644 index 0000000..374cc9d --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/tsconfig.app.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/app", + "types": [] + }, + "files": [ + "src/main.ts" + ], + "include": [ + "src/**/*.d.ts" + ] +} diff --git a/Redaction/Show and Hide Redaction Toolbar/tsconfig.json b/Redaction/Show and Hide Redaction Toolbar/tsconfig.json new file mode 100644 index 0000000..ed966d4 --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/tsconfig.json @@ -0,0 +1,33 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "compileOnSave": false, + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "downlevelIteration": true, + "experimentalDecorators": true, + "moduleResolution": "node", + "importHelpers": true, + "target": "ES2022", + "module": "ES2022", + "useDefineForClassFields": false, + "lib": [ + "ES2022", + "dom" + ] + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/Redaction/Show and Hide Redaction Toolbar/tsconfig.spec.json b/Redaction/Show and Hide Redaction Toolbar/tsconfig.spec.json new file mode 100644 index 0000000..be7e9da --- /dev/null +++ b/Redaction/Show and Hide Redaction Toolbar/tsconfig.spec.json @@ -0,0 +1,14 @@ +/* To learn more about this file see: https://angular.io/config/tsconfig. */ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "./out-tsc/spec", + "types": [ + "jasmine" + ] + }, + "include": [ + "src/**/*.spec.ts", + "src/**/*.d.ts" + ] +}