feat: add playgound and deploy

README.md

@@ -3,10 +3,11 @@
 [![npm](https://img.shields.io/npm/v/@acrodata/watermark.svg)](https://www.npmjs.com/package/@acrodata/watermark)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/acrodata/watermark/blob/main/LICENSE)
 
-Add watermark for your page.
+Add watermark to your page.
 
 #### Quick links
 
+[Documentation](https://github.com/acrodata/watermark?tab=readme-ov-file#watermark) |
 [Playground](https://acrodata.github.io/watermark/)
 
 ## Installation

angular.json

@@ -138,6 +138,13 @@
             ],
             "eslintConfig": "projects/dev-app/eslint.config.js"
           }
+        },
+        "deploy": {
+          "builder": "angular-cli-ghpages:deploy",
+          "options": {
+            "baseHref": "/watermark/",
+            "remote": "origin"
+          }
         }
       }
     }

package.json

@@ -7,24 +7,30 @@
   },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test",
+    "start": "ng serve dev-app",
+    "build": "ng build dev-app --base-href=/watermark/",
+    "watch": "ng build dev-app --watch --configuration development",
+    "test": "ng test dev-app",
     "lint": "ng lint",
+    "build:lib": "ng build watermark && cp README.md dist/watermark",
     "publish": "npm run build:lib && cd dist/watermark && npm publish",
+    "deploy": "npm run build && ng deploy",
     "prepare": "husky"
   },
   "private": true,
   "dependencies": {
+    "@acrodata/gui": "^2.0.0",
     "@angular/animations": "^18.2.0",
+    "@angular/cdk": "^18.2.0",
     "@angular/common": "^18.2.0",
     "@angular/compiler": "^18.2.0",
     "@angular/core": "^18.2.0",
     "@angular/forms": "^18.2.0",
+    "@angular/material": "^18.2.0",
     "@angular/platform-browser": "^18.2.0",
     "@angular/platform-browser-dynamic": "^18.2.0",
     "@angular/router": "^18.2.0",
+    "@ng-matero/extensions": "^18.2.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
@@ -36,6 +42,7 @@
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
     "@types/jasmine": "~5.1.0",
+    "angular-cli-ghpages": "^2.0.0",
     "angular-eslint": "^18.3.1",
     "eslint": "^9.12.0",
     "husky": "^9.1.6",

projects/dev-app/src/app/app.component.html

@@ -1,39 +1,11 @@
 <div class="container">
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-  <p>123</p>
-</div>
-
-<button (click)="show=!show">toggle show</button>
+  <div>
+    <gui-form [config]="config" (modelChange)="onModelChange($event)" />
+  </div>
 
-@if (show) {
-  <div watermark [watermarkOptions]="options" [style.display]="'block'">
-    <div class="container"></div>
+  <div watermark [watermarkOptions]="options">
+    <p>
+      Add watermark to your page.
+    </p>
   </div>
-}
+</div>

projects/dev-app/src/app/app.component.scss

@@ -1,8 +1,11 @@
 .container {
-  position: relative;
-  width: 500px;
-  height: 500px;
-  border: 1px solid;
-  overflow: auto;
-  text-align: center;
+  display: grid;
+  grid-template-columns: 320px 1fr;
+  height: 100%;
+  padding: 16px;
+}
+
+[watermark] {
+  padding: 0 16px;
+  border: 1px solid var(--mat-divider-color)
 }

projects/dev-app/src/app/app.component.ts

@@ -1,35 +1,168 @@
-import { Watermark, WatermarkDirective, WatermarkOptions } from '@acrodata/watermark';
+import { GuiFields, GuiModule } from '@acrodata/gui';
+import { WatermarkDirective, WatermarkOptions } from '@acrodata/watermark';
 import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, WatermarkDirective],
+  imports: [RouterOutlet, WatermarkDirective, GuiModule],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
 export class AppComponent implements OnInit {
   options: WatermarkOptions = {
     text: 'abc123',
-    // secure: false,
   };
 
-  show = true;
+  config: GuiFields = {
+    secure: {
+      type: 'switch',
+      name: 'secure',
+      default: true,
+    },
+    image: {
+      type: 'text',
+      name: 'image',
+    },
+    text: {
+      type: 'text',
+      name: 'text',
+      default: 'abc123',
+    },
+    repeat: {
+      type: 'buttonToggle',
+      name: 'repeat',
+      options: [
+        { label: 'multiply', value: 'multiply' },
+        { label: 'normal', value: 'normal' },
+        { label: 'none', value: 'none' },
+      ],
+      default: 'multiply',
+    },
+    position: {
+      type: 'text',
+      name: 'position',
+    },
+    width: {
+      type: 'number',
+      name: 'width',
+      min: 0,
+      default: 120,
+      suffix: 'px',
+    },
+    height: {
+      type: 'number',
+      name: 'height',
+      min: 0,
+      default: 60,
+      suffix: 'px',
+    },
+    gapX: {
+      type: 'number',
+      name: 'gapX',
+      min: 0,
+      default: 100,
+      suffix: 'px',
+    },
+    gapY: {
+      type: 'number',
+      name: 'gapY',
+      min: 0,
+      default: 100,
+      suffix: 'px',
+    },
+    offsetX: {
+      type: 'number',
+      name: 'offsetX',
+      default: 0,
+      suffix: 'px',
+    },
+    offsetY: {
+      type: 'number',
+      name: 'offsetY',
+      default: 0,
+      suffix: 'px',
+    },
+    opacity: {
+      type: 'slider',
+      name: 'opacity',
+      min: 0,
+      max: 1,
+      step: 0.05,
+      default: 0.15,
+    },
+    rotate: {
+      type: 'slider',
+      name: 'rotate',
+      min: -360,
+      max: 360,
+      default: -24,
+    },
+    fontSize: {
+      type: 'number',
+      name: 'fontSize',
+      suffix: 'px',
+      default: 16,
+    },
+    fontWeight: {
+      type: 'select',
+      name: 'fontWeight',
+      options: [
+        { label: '100', value: 100 },
+        { label: '200', value: 200 },
+        { label: '300', value: 300 },
+        { label: '400', value: 400 },
+        { label: '500', value: 500 },
+        { label: '600', value: 600 },
+        { label: '700', value: 700 },
+        { label: '800', value: 800 },
+        { label: '900', value: 900 },
+      ],
+      default: 400,
+    },
+    fontStyle: {
+      type: 'buttonToggle',
+      name: 'fontStyle',
+      options: [
+        { label: 'normal', value: 'normal' },
+        { label: 'italic', value: 'italic' },
+      ],
+      default: 'normal',
+    },
+    fontVariant: {
+      type: 'buttonToggle',
+      name: 'fontVariant',
+      options: [
+        { label: 'normal', value: 'normal' },
+        { label: 'small-caps', value: 'small-caps' },
+      ],
+      default: 'normal',
+    },
+    fontColor: {
+      type: 'fill',
+      name: 'fontColor',
+      default: '#000',
+    },
+    fontFamily: {
+      type: 'select',
+      name: 'fontFamily',
+      options: [
+        { label: 'sans-serif', value: 'sans-serif' },
+        { label: 'serif', value: 'serif' },
+        { label: 'monospace', value: 'monospace' },
+        { label: 'Arial', value: 'Arial' },
+        { label: 'Courier New', value: 'Courier New' },
+        { label: 'Microsoft YaHei', value: 'Microsoft YaHei' },
+      ],
+      useFont: true,
+      default: 'sans-serif',
+    },
+  };
+
+  ngOnInit(): void {}
 
-  ngOnInit(): void {
-    new Watermark({
-      // image: 'https://placehold.co/400x400.png?text=Hello\\nWorld',
-      text: 'abcdefg',
-      container: '.container',
-      secure: false,
-      repeat: 'normal',
-      rotate: 0,
-      width: 100,
-      height: 100,
-      gapX: 0,
-      gapY: 0,
-      position: 'bottom right',
-    });
+  onModelChange(v: any) {
+    this.options = v;
   }
 }

projects/dev-app/src/app/app.config.ts

@@ -1,8 +1,13 @@
 import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes),
+    provideAnimationsAsync(),
+  ],
 };

projects/dev-app/src/styles.scss

@@ -1 +1,14 @@
 /* You can add global styles to this file, and also import other style files */
+
+@import '@angular/material/prebuilt-themes/azure-blue.css';
+@import '@ng-matero/extensions/prebuilt-themes/azure-blue.css';
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+  margin: 0;
+}