docs: update examples to avoid effect usage ✨ (#334)

willnguyen1312 · Oct 25, 2024 · 6c0aa9b · 6c0aa9b
1 parent 56f7fd4
commit 6c0aa9b
Show file tree

Hide file tree

Showing 16 changed files with 4,811 additions and 566 deletions.
diff --git a/examples/with-angular/angular.json b/examples/with-angular/angular.json
@@ -3,47 +3,27 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "with-angular": {
+    "vue-app": {
       "projectType": "application",
-      "schematics": {
-        "@schematics/angular:class": {
-          "skipTests": true
-        },
-        "@schematics/angular:component": {
-          "skipTests": true
-        },
-        "@schematics/angular:directive": {
-          "skipTests": true
-        },
-        "@schematics/angular:guard": {
-          "skipTests": true
-        },
-        "@schematics/angular:interceptor": {
-          "skipTests": true
-        },
-        "@schematics/angular:pipe": {
-          "skipTests": true
-        },
-        "@schematics/angular:resolver": {
-          "skipTests": true
-        },
-        "@schematics/angular:service": {
-          "skipTests": true
-        }
-      },
+      "schematics": {},
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/with-angular",
+            "outputPath": "dist/vue-app",
             "index": "src/index.html",
-            "main": "src/main.ts",
+            "browser": "src/main.ts",
             "polyfills": ["zone.js"],
             "tsConfig": "tsconfig.app.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
             "styles": [],
             "scripts": []
           },
@@ -52,52 +32,55 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
+                  "maximumWarning": "2kB",
+                  "maximumError": "4kB"
                 }
               ],
               "outputHashing": "all"
             },
             "development": {
-              "buildOptimizer": false,
               "optimization": false,
-              "vendorChunk": true,
               "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
+              "sourceMap": true
             }
           },
           "defaultConfiguration": "production"
         },
         "serve": {
+          "options": {
+            "port": 1312,
+            "open": true
+          },
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "with-angular:build:production"
+              "buildTarget": "vue-app:build:production"
             },
             "development": {
-              "browserTarget": "with-angular:build:development"
+              "buildTarget": "vue-app:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "with-angular:build"
-          }
+          "builder": "@angular-devkit/build-angular:extract-i18n"
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
-            "assets": ["src/favicon.ico", "src/assets"],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
             "styles": [],
             "scripts": []
           }

diff --git a/examples/with-angular/package.json b/examples/with-angular/package.json
@@ -5,21 +5,21 @@
     "dev": "ng serve"
   },
   "dependencies": {
-    "@angular/common": "^17.2.1",
-    "@angular/core": "^17.2.1",
-    "@angular/platform-browser": "^17.2.1",
-    "@angular/platform-browser-dynamic": "^17.2.1",
+    "@angular/common": "^18.2.9",
+    "@angular/core": "^18.2.9",
+    "@angular/platform-browser": "^18.2.9",
+    "@angular/platform-browser-dynamic": "^18.2.9",
     "@zoom-image/angular": "latest",
     "@zoom-image/core": "latest",
     "rxjs": "~7.8.1",
-    "tslib": "^2.6.2",
-    "zone.js": "~0.14.4"
+    "tslib": "^2.8.0",
+    "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^17.2.0",
-    "@angular/cli": "~17.2.0",
-    "@angular/compiler": "^17.2.1",
-    "@angular/compiler-cli": "^17.2.1",
-    "typescript": "~5.3.3"
+    "@angular-devkit/build-angular": "^18.2.10",
+    "@angular/cli": "~18.2.10",
+    "@angular/compiler": "^18.2.9",
+    "@angular/compiler-cli": "^18.2.9",
+    "typescript": "~5.5.2"
   }
 }
diff --git a/examples/with-angular/src/assets/sample.avif → examples/with-angular/public/sample.avif b/examples/with-angular/src/assets/sample.avif → examples/with-angular/public/sample.avif
diff --git a/examples/with-angular/src/app/app.component.html b/examples/with-angular/src/app/app.component.html
@@ -22,7 +22,7 @@
     <div class="flex items-center gap-4">
       <div class="mt-1 grid h-[300px] w-[300px] place-content-center bg-black">
         <div #imageWheelContainer class="h-[300px] w-[200px] cursor-crosshair duration-500">
-          <img class="h-full w-full" alt="Large Pic" src="/assets/sample.avif" />
+          <img class="h-full w-full" alt="Large Pic" src="sample.avif" />
         </div>
       </div>
       <img [src]="croppedImage" *ngIf="!!croppedImage" [class]="getCroppedImageClasses()" alt="Cropped placeholder" />
@@ -40,22 +40,22 @@
   <div class="space-y-4" *ngIf="zoomType === 'hover'">
     <p>Hover inside the image to see zoom effect</p>
     <div #imageHoverContainer class="relative mt-1 flex h-[300px] w-[200px] items-start">
-      <img class="h-full w-full" alt="Small Pic" src="../assets/sample.avif" />
+      <img class="h-full w-full" alt="Small Pic" src="sample.avif" />
       <div #zoomTarget class="absolute left-[350px]"></div>
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'move'">
     <p>Move mouse inside the image to see zoom effect</p>
     <div #imageMoveContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
+      <img class="h-full w-full" alt="Large Pic" src="sample.avif" />
     </div>
   </div>
 
   <div class="space-y-4" *ngIf="zoomType === 'click'">
     <p>Click inside the image to see zoom effect</p>
     <div #imageClickContainer class="relative mt-1 h-[300px] w-[200px] cursor-crosshair overflow-hidden">
-      <img class="h-full w-full" alt="Large Pic" src="../assets/sample.avif" />
+      <img class="h-full w-full" alt="Large Pic" src="sample.avif" />
     </div>
   </div>
 </div>
diff --git a/examples/with-angular/src/app/app.component.ts b/examples/with-angular/src/app/app.component.ts
@@ -22,8 +22,6 @@ type Tab = {
 
 type ZoomType = "wheel" | "hover" | "move" | "click"
 
-const sleep = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))
-
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
@@ -60,29 +58,16 @@ export class AppComponent implements AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.imageWheelContainerRef) {
-      this.zoomImageWheelService.createZoomImage(this.imageWheelContainerRef.nativeElement)
       this.zoomImageWheelService.zoomImageState$.subscribe((state) => {
         this.zoomImageWheelState = state
       })
+      this.processZoom()
     }
   }
 
-  getCurrentZoomImageValue() {
-    return `${Math.round(this.zoomImageWheelState.currentZoom * 100)}%`
-  }
-
-  async handleTabClick(tab: Tab) {
-    const zoomType = tab.value
-    if (zoomType === this.zoomType) {
-      return
-    }
-
-    this.croppedImage = ""
-    this.tabs.forEach((tab) => (tab.current = false))
-    tab.current = true
-    this.zoomType = zoomType
-
-    await sleep()
+  async processZoom() {
+    // We need to wait for Angular to render the image before we can apply zoom effect
+    await new Promise((resolve) => setTimeout(resolve))
 
     const handlers: Record<ZoomType, () => void> = {
       wheel: () => {
@@ -93,7 +78,7 @@ export class AppComponent implements AfterViewInit {
       },
       hover: () => {
         this.zoomImageHoverService.createZoomImage(this.imageHoverContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/assets/sample.avif",
+          zoomImageSource: "sample.avif",
           customZoom: { width: 300, height: 500 },
           zoomTarget: this.zoomTargetRef?.nativeElement as HTMLDivElement,
           scale: 2,
@@ -104,23 +89,40 @@ export class AppComponent implements AfterViewInit {
       },
       move: () => {
         this.zoomImageMoveService.createZoomImage(this.imageMoveContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/assets/sample.avif",
+          zoomImageSource: "sample.avif",
         })
         this.zoomImageMoveService.zoomImageState$.subscribe((state) => {
           this.zoomImageMoveState = state
         })
       },
       click: () => {
         this.zoomImageClickService.createZoomImage(this.imageClickContainerRef?.nativeElement as HTMLDivElement, {
-          zoomImageSource: "/assets/sample.avif",
+          zoomImageSource: "sample.avif",
         })
         this.zoomImageClickService.zoomImageState$.subscribe((state) => {
           this.zoomImageClickState = state
         })
       },
     }
 
-    handlers[zoomType]()
+    handlers[this.zoomType]()
+  }
+
+  getCurrentZoomImageValue() {
+    return `${Math.round(this.zoomImageWheelState.currentZoom * 100)}%`
+  }
+
+  async handleTabClick(tab: Tab) {
+    const zoomType = tab.value
+    if (zoomType === this.zoomType) {
+      return
+    }
+
+    this.croppedImage = ""
+    this.tabs.forEach((tab) => (tab.current = false))
+    tab.current = true
+    this.zoomType = zoomType
+    this.processZoom()
   }
 
   zoomIn() {
@@ -132,30 +134,31 @@ export class AppComponent implements AfterViewInit {
   }
 
   rotate = () => {
+    const currentRotation = this.zoomImageWheelState.currentRotation + 90
     this.zoomImageWheelService.setZoomImageState({
-      currentRotation: this.zoomImageWheelState.currentRotation + 90,
+      currentRotation,
     })
 
     if (this.croppedImage) {
-      this.handleCropWheelZoomImage()
+      this.handleCropWheelZoomImage(currentRotation)
     }
   }
 
   getCroppedImageClasses() {
-    if (this.zoomImageWheelState.currentRotation === 90 || this.zoomImageWheelState.currentRotation === 270) {
+    if (this.zoomImageWheelState.currentRotation % 180 === 90) {
       return "h-[200px] w-[300px]"
     } else {
       return "h-[300px] w-[200px]"
     }
   }
 
-  async handleCropWheelZoomImage() {
+  async handleCropWheelZoomImage(currentRotation = this.zoomImageWheelState.currentRotation) {
     this.croppedImage = await cropImage({
       currentZoom: this.zoomImageWheelState.currentZoom,
       image: (this.imageWheelContainerRef?.nativeElement as HTMLDivElement).querySelector("img") as HTMLImageElement,
       positionX: this.zoomImageWheelState.currentPositionX,
       positionY: this.zoomImageWheelState.currentPositionY,
-      rotation: this.zoomImageWheelState.currentRotation,
+      rotation: currentRotation,
     })
   }
 }
diff --git a/examples/with-angular/src/main.ts b/examples/with-angular/src/main.ts
@@ -2,6 +2,4 @@ import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"
 
 import { AppModule } from "./app/app.module"
 
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err))
+platformBrowserDynamic().bootstrapModule(AppModule)
diff --git a/examples/with-next/src/app/page.tsx b/examples/with-next/src/app/page.tsx
@@ -68,6 +68,7 @@ export default function Home() {
     }
   }, [zoomImageWheelState.currentRotation])
 
+  // We need to wait for React to render the image before we can apply zoom effect
   useEffect(() => {
     setCroppedImage("")
     if (zoomType === "wheel") {