Update Dynamsoft Document Viewer to v3.0.0

Author: yushulx

package.json

@@ -21,7 +21,7 @@
     "angular-barcode-mrz-document-scanner": "file:",
     "dwt": "^19.1.0",
     "dynamsoft-capture-vision-bundle": "^3.0.3001",
-    "dynamsoft-document-viewer": "^2.1.0",
+    "dynamsoft-document-viewer": "^3.0.0",
     "dynamsoft-capture-vision-data": "^1.0.1",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",
@@ -41,4 +41,4 @@
     "karma-jasmine-html-reporter": "~1.7.0",
     "typescript": "~4.6.2"
   }
-}
+}

src/app/document-viewer/document-viewer.component.ts

@@ -139,35 +139,7 @@ export class DocumentViewerComponent implements OnInit {
       uiConfig: this.isMobile() ? this.mobileEditViewerUiConfig : this.pcEditViewerUiConfig
     });
     this.editViewer.displayMode = "single";
-
-    // Load the dropdown menu
-    let button: HTMLElement | null;
-    if (this.isMobile()) {
-      button = document.querySelector("#edit-viewer > div > div.ddv-layout.ddv-edit-viewer-footer-mobile > div.ddv-button.ddv-button.ddv-load-image");
-    }
-    else {
-      button = document.querySelector("#edit-viewer > div > div.ddv-layout.ddv-edit-viewer-header-desktop > div:nth-child(1) > div.ddv-button.ddv-button.ddv-load-image");
-    }
-
-    if (button) {
-      button.addEventListener("click", (event) => {
-        event.stopPropagation();
-
-        // Create dropdown if not exists
-        if (!this.dropdown) {
-          this.dropdown = this.createDropdownMenu();
-          this.dropdown.style.position = "absolute";
-        }
-
-        // Toggle visibility
-        this.dropdown.style.display = this.dropdown.style.display === "block" ? "none" : "block";
-
-        // Position the dropdown below the button
-        const rect = button!.getBoundingClientRect();
-        this.dropdown.style.left = `${rect.left}px`;
-        this.dropdown.style.top = `${rect.bottom + 5}px`;
-      });
-    }
+    this.editViewer.on("toggleDropdown", this.toggleDropdown);
 
     Dynamsoft.DWT.CreateDWTObjectEx({ "WebTwainId": "container" }, (obj) => {
       this.dwtObject = obj;
@@ -227,6 +199,20 @@ export class DocumentViewerComponent implements OnInit {
 
   }
 
+  toggleDropdown = (e: any) => {
+    e[0].stopPropagation();
+    if (!this.dropdown) {
+      this.dropdown = this.createDropdownMenu();
+      this.dropdown.style.position = "absolute";
+    }
+
+    // Toggle visibility
+    this.dropdown.style.display = this.dropdown.style.display === "block" ? "none" : "block";
+    const rect = e[0].target.getBoundingClientRect();
+    this.dropdown.style.left = `${rect.left}px`;
+    this.dropdown.style.top = `${rect.bottom + 5}px`;
+  }
+
   async convertToBlobAsync(dwtObject: any, indices: number[], imageType: any): Promise<Blob> {
     return new Promise((resolve, reject) => {
       dwtObject.ConvertToBlob(indices, imageType, (result: Blob) => {