[WIP] Init Watermark app.

angular.json

@@ -494,6 +494,44 @@
           "styleext": "less"
         }
       }
+    },
+    "watermark": {
+      "projectType": "library",
+      "root": "libs/watermark",
+      "sourceRoot": "libs/watermark/src",
+      "prefix": "groupdocs.examples.angular",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "libs/watermark/tsconfig.lib.json",
+            "project": "libs/watermark/ng-package.json"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "libs/watermark/tsconfig.lib.json",
+              "libs/watermark/tsconfig.spec.json"
+            ],
+            "exclude": ["**/node_modules/**", "!libs/watermark/**"]
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "libs/watermark/src/test.ts",
+            "tsConfig": "libs/watermark/tsconfig.spec.json",
+            "karmaConfig": "libs/watermark/karma.conf.js"
+          }
+        }
+      },
+      "schematics": {
+        "@nrwl/angular:component": {
+          "styleext": "less"
+        }
+      }
     }
   },
   "cli": {

apps/total-angular-e2e/src/fixtures/watermarkLoadConfigDefault.json

@@ -0,0 +1,11 @@
+{
+  "filesDirectory": "/fonts",
+  "dataDirectory": "",
+  "textWatermark": true,
+  "imageWatermark": true,
+  "preloadPageCount": 0,
+  "defaultDocument": "",
+  "upload": true,
+  "browse": true,
+  "rewrite": true
+}

apps/total-angular-e2e/src/integration/annotation.spec.ts

@@ -11,6 +11,7 @@ describe('Annotation', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -23,6 +24,7 @@ describe('Annotation', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/annotation/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/annotation/loadDocumentDescription', "@loadDocumentDescriptionDefault");

apps/total-angular-e2e/src/integration/app.spec.ts

@@ -12,6 +12,7 @@ describe('total-angular', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', {"filesDirectory": "/fonts", "dataDirectory": "", "textAnnotation": true, "areaAnnotation": true, "pointAnnotation": true, "textStrikeoutAnnotation": true, "polylineAnnotation": true, "textFieldAnnotation": true, "watermarkAnnotation": true, "textReplacementAnnotation": true, "arrowAnnotation": true, "textRedactionAnnotation": true, "resourcesRedactionAnnotation": true, "textUnderlineAnnotation": true, "distanceAnnotation": true, "downloadOriginal": true, "downloadAnnotated": true, "zoom": true, "fitWidth": true, "preloadPageCount": 0, "defaultDocument": "", "pageSelector": true, "download": true, "upload": true, "print": true, "browse": true, "rewrite": true, "enableRightClick": true});
     cy.route('http://localhost:8080/metadata/loadConfig', {"download":true,"upload":true,"browse":true,"rewrite":true,"filesDirectory":"/fonts","preloadPageCount":0,"defaultDocument":"","htmlMode":true,"cache":true});
     cy.route('http://localhost:8080/search/loadConfig', {"upload":true,"browse":true,"filesDirectory":"/files","defaultDocument":""});
+    cy.route('http://localhost:8080/watermark/loadConfig', {"filesDirectory": "/fonts", "dataDirectory": "", "textWatermark": true, "imageWatermark": true, "preloadPageCount": 0, "defaultDocument": "", "upload": true, "browse": true, "rewrite": true});
 
     cy.visit('/',{
       onBeforeLoad: (win) => {

apps/total-angular-e2e/src/integration/comparison.spec.ts

@@ -11,6 +11,7 @@ describe('Comparison', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -24,6 +25,7 @@ describe('Comparison', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/comparison/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/comparison/loadDocumentDescription', "@loadDocumentDescriptionDefault");

apps/total-angular-e2e/src/integration/conversion.spec.ts

@@ -11,6 +11,7 @@ describe('Conversion', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("convertDefault").as('convertDefault');
@@ -24,6 +25,7 @@ describe('Conversion', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/conversion/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/conversion/convert', "@convertDefault");

apps/total-angular-e2e/src/integration/metadata.spec.ts

@@ -11,6 +11,7 @@ describe('Metadata', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -25,6 +26,7 @@ describe('Metadata', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/metadata/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/metadata/loadDocumentDescription', "@loadDocumentDescriptionDefault");

apps/total-angular-e2e/src/integration/search.spec.ts

@@ -11,6 +11,7 @@ describe('Search', () => {
       cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
       cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
       cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+      cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
       cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
       cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
       cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -24,6 +25,7 @@ describe('Search', () => {
       cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
       cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
       cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+      cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
       cy.route('POST','http://localhost:8080/search/loadFileTree', "@loadFileTreeDefault");
       cy.route('POST','http://localhost:8080/search/search', "@searchDefault");

apps/total-angular-e2e/src/integration/signature.spec.ts

@@ -11,6 +11,7 @@ describe('Signature', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -23,6 +24,7 @@ describe('Signature', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/signature/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/signature/loadDocumentDescription', "@loadDocumentDescriptionDefault");

apps/total-angular-e2e/src/integration/viewer.spec.ts

@@ -11,6 +11,7 @@ describe('Viewer', () => {
     cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
     cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
     cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
     cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
     cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
     cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
@@ -23,6 +24,7 @@ describe('Viewer', () => {
     cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
     cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
     cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
 
     cy.route('POST','http://localhost:8080/viewer/loadFileTree', "@loadFileTreeDefault");
     cy.route('POST','http://localhost:8080/viewer/loadDocumentDescription', "@loadDocumentDescriptionDefault");

apps/total-angular-e2e/src/integration/watermark.spec.ts

@@ -0,0 +1,117 @@
+/// <reference types="Cypress" />
+
+describe('Watermark', () => {
+  beforeEach(function () {
+    cy.server();
+    cy.fixture("viewerLoadConfigDefault").as('viewerLoadConfigDefault');
+    cy.fixture("comparisonLoadConfigDefault").as('comparisonLoadConfigDefault');
+    cy.fixture("conversionLoadConfigDefault").as('conversionLoadConfigDefault');
+    cy.fixture("editorLoadConfigDefault").as('editorLoadConfigDefault');
+    cy.fixture("signatureLoadConfigDefault").as('signatureLoadConfigDefault');
+    cy.fixture("annotationLoadConfigDefault").as('annotationLoadConfigDefault');
+    cy.fixture("metadataLoadConfigDefault").as('metadataLoadConfigDefault');
+    cy.fixture("searchLoadConfigDefault").as('searchLoadConfigDefault');
+    cy.fixture("watermarkLoadConfigDefault").as('watermarkLoadConfigDefault');
+    cy.fixture("loadFileTreeDefault").as('loadFileTreeDefault');
+    cy.fixture("loadFileTreeSubFolder").as('loadFileTreeSubFolder');
+    cy.fixture("loadDocumentDescriptionDefault").as('loadDocumentDescriptionDefault');
+
+    cy.route('http://localhost:8080/viewer/loadConfig', "@viewerLoadConfigDefault");
+    cy.route('http://localhost:8080/comparison/loadConfig', "@comparisonLoadConfigDefault");
+    cy.route('http://localhost:8080/conversion/loadConfig', "@conversionLoadConfigDefault");
+    cy.route('http://localhost:8080/editor/loadConfig', "@editorLoadConfigDefault");
+    cy.route('http://localhost:8080/signature/loadConfig', "@signatureLoadConfigDefault");
+    cy.route('http://localhost:8080/annotation/loadConfig', "@annotationLoadConfigDefault");
+    cy.route('http://localhost:8080/metadata/loadConfig', "@metadataLoadConfigDefault");
+    cy.route('http://localhost:8080/search/loadConfig', "@searchLoadConfigDefault");
+    cy.route('http://localhost:8080/watermark/loadConfig', "@watermarkLoadConfigDefault");
+
+    cy.route('POST','http://localhost:8080/watermark/loadFileTree', "@loadFileTreeDefault");
+    cy.route('POST','http://localhost:8080/watermark/loadDocumentDescription', "@loadDocumentDescriptionDefault");
+
+  });
+
+  it('should see logo', () => {
+    cy.visit('/watermark');
+    cy.get('#gd-header-logo .text').should('have.text', 'watermark');
+  });
+
+  it('should open file dialog when clicked on open file icon', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+  });
+
+  it('should be able to close dialog by clicking on x', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+    cy.get('#gd-modal-content > div.gd-modal-header > div').click();
+    cy.get('#gd-modal-content').should('not.exist');
+  });
+
+  it('should be able to close dialog by clicking on backdrop', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+    cy.get('#modalDialog').click({force:true});
+    cy.get('#gd-modal-content').should('not.exist');
+  });
+
+  it('should be able to see file dialog file entries with detail', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+    cy.get(':nth-child(3) > .file-description > .file-name-format > .file-name').should('have.text', 'TestWord.docx');
+    cy.get(':nth-child(3) > .file-description > .file-name-format > .file-format').should('have.text', 'Microsoft Word');
+    cy.get(':nth-child(3) > .file-size').should('have.text', ' 11.63 KB '); // @TODO: trim spaces around size
+    cy.get(':nth-child(3) > div.file-description > fa-icon').should('have.class', 'fa-file-word');
+  });
+
+  it('should be able to open sub folder', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+
+    cy.route('POST','http://localhost:8080/watermark/loadFileTree',"@loadFileTreeSubFolder");
+    cy.get('#gd-modal-filebrowser > div > div:nth-child(2)').click();
+    cy.get('#gd-modal-filebrowser > div > div:nth-child(2) > div.file-description > div > div.file-name').should('have.text', 'FileInSubFolder.docx');
+    cy.get('#gd-modal-filebrowser > div > div:nth-child(2) > div.file-description > div > div.file-format').should('have.text', 'Microsoft Word');
+    cy.get('#gd-modal-filebrowser > div > div:nth-child(2) > div.file-size').should('have.text', ' 11.63 KB '); // @TODO: trim spaces around size
+    cy.get('#gd-modal-filebrowser > div > div:nth-child(2) > div.file-description > fa-icon').should('have.class', 'fa-file-word');
+  });
+
+  it('when drag file over file dialog drop zone style changed', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+
+    cy.get('.gd-modal-body').trigger('dragover');
+    cy.get('.gd-modal-body').trigger('dragenter');
+    cy.get('.gd-dnd-wrap').should('be.visible');
+    cy.get('.gd-modal-body').trigger('dragleave');
+    cy.get('.gd-dnd-wrap').should('not.exist');
+  });
+
+  it('should open file when clicked on file in dialog and display 5 pages', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+    cy.get('#gd-modal-filebrowser > div.list-files-body > div:nth-child(3)').click();
+    cy.get('.page').its('length').should('eq',5);
+  });
+
+  it('should open left panel for text and image watermarks when clicked on their icons', () => {
+    cy.visit('/watermark');
+    cy.get('#files-tools > gd-button:nth-child(1)').click();
+    cy.get('#gd-modal-content > div.gd-modal-header > h4').should('have.text', 'Open document');
+    cy.get('#gd-modal-filebrowser > div.list-files-body > div:nth-child(3)').click();
+    cy.get('[ng-reflect-ng-class="gd-tab"] > .title').click();
+    cy.get(':nth-child(1) > gd-top-tab > .gd-tab').click();
+    cy.get('.gd-watermark-list-wrapper').should('be.visible');
+    cy.get('.gd-watermark-context-panel-title').should('have.text', 'Text');
+    cy.get(':nth-child(2) > gd-top-tab > .gd-tab').click();
+    cy.get('.gd-watermark-list-wrapper').should('be.visible');
+    cy.get('.gd-watermark-context-panel-title').should('have.text', 'Image');
+  });
+});

apps/total-angular/src/app/app.module.ts

@@ -12,6 +12,7 @@ import {ConversionModule, ConversionAppComponent} from "@groupdocs.examples.angu
 import {AnnotationModule, AnnotationAppComponent} from "@groupdocs.examples.angular/annotation";
 import {MetadataModule, MetadataAppComponent} from "@groupdocs.examples.angular/metadata";
 import {SearchAppComponent, SearchModule} from "@groupdocs.examples.angular/search";
+import {WatermarkModule, WatermarkAppComponent} from "@groupdocs.examples.angular/watermark";
 
 @NgModule({
   declarations: [AppComponent, TotalNavComponent, TotalViewComponent],
@@ -25,6 +26,7 @@ import {SearchAppComponent, SearchModule} from "@groupdocs.examples.angular/sear
     AnnotationModule.forRoot("http://localhost:8080"),
     MetadataModule.forRoot("http://localhost:8080"),
     SearchModule.forRoot("http://localhost:8080"),
+    WatermarkModule.forRoot("http://localhost:8080"),
     RouterModule.forRoot([
       {path: '', component: TotalViewComponent},
       {path: 'viewer', component: ViewerAppComponent},
@@ -35,6 +37,7 @@ import {SearchAppComponent, SearchModule} from "@groupdocs.examples.angular/sear
       {path: 'annotation', component: AnnotationAppComponent},
       {path: 'metadata', component: MetadataAppComponent},
       {path: 'search', component: SearchAppComponent},
+      {path: 'watermark', component: WatermarkAppComponent},
     ], {initialNavigation: 'enabled'})
   ],
   providers: [],

apps/total-angular/src/app/total-nav/total-nav.component.html

@@ -73,9 +73,9 @@ <h6>Text</h6>
       </a>
     </li>
     <li>
-      <a href="">
-        <img src="assets/images/groupdocs-watermark-d.png"/>
-        <div class="coming-soon">
+      <a [routerLink]="['/watermark']">
+        <img src="assets/images/groupdocs-watermark.png"/>
+        <div>
           <h5>GroupDocs</h5>
           <h6>Watermark</h6>
         </div>