refactor(dev-app): convert to zoneless mode

Author: nzbin

angular.json

@@ -53,9 +53,6 @@
             "outputPath": "dist/dev-app",
             "index": "projects/dev-app/src/index.html",
             "browser": "projects/dev-app/src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "projects/dev-app/tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [

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

@@ -1,8 +1,16 @@
-import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import {
+  ApplicationConfig,
+  provideBrowserGlobalErrorListeners,
+  provideZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)],
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideZonelessChangeDetection(),
+    provideRouter(routes),
+  ],
 };

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

@@ -1,7 +1,7 @@
 <mat-toolbar>
   <span>Watermark</span>
 
-  @if (image) {
+  @if (image()) {
     <button mat-stroked-button (click)="restore()">Restore</button>
   } @else {
     <button mat-stroked-button (click)="decrypt()">Decrypt blind watermark</button>
@@ -29,8 +29,8 @@
   <main watermark [watermarkOptions]="options">
     <p>Add watermark to your page.</p>
 
-    @if (image) {
-      <img [src]="image" alt="blind watermark decyption image" width="100%" height="100%" />
+    @if (image()) {
+      <img [src]="image()" alt="blind watermark decyption image" width="100%" height="100%" />
     }
   </main>
 </div>

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

@@ -1,6 +1,6 @@
 import { GuiFields, GuiModule } from '@acrodata/gui';
 import { Watermark, WatermarkDirective, WatermarkOptions } from '@acrodata/watermark';
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import html2canvas from 'html2canvas';
@@ -145,6 +145,7 @@ export class App implements OnInit {
     },
     fontColor: {
       type: 'fill',
+      mode: 'solid',
       name: 'fontColor',
       default: '#000',
     },
@@ -183,7 +184,7 @@ export class App implements OnInit {
     },
   };
 
-  image = '';
+  image = signal('');
 
   ngOnInit(): void {
     html2canvas(document.querySelector('main')!, { useCORS: true });
@@ -200,11 +201,11 @@ export class App implements OnInit {
     if (ctx) {
       // 处理像素解密盲水印
       Watermark.decrypt(ctx);
-      this.image = canvas.toDataURL();
+      this.image.set(canvas.toDataURL());
     }
   }
 
   restore() {
-    this.image = '';
+    this.image.set('');
   }
 }