@dtducas/wh-forge-viewer 1.0.3 → 1.0.5

package/dist/index.d.ts

@@ -0,0 +1,89 @@
+// Type definitions for @dtducas/wh-forge-viewer
+// Project: https://github.com/DTDucas/wh-forge-viewer
+// Definitions by: Duong Tran Quang <https://github.com/DTDucas>
+
+/// <reference types="react" />
+
+declare module '@dtducas/wh-forge-viewer' {
+    import { FC } from 'react';
+
+    /**
+     * Supported file extensions for the Forge Viewer
+     */
+    export type TSupportedFileExtension = 'pdf' | 'dwf' | 'dwfx';
+
+    /**
+     * Autodesk Forge Viewer namespace
+     * For full type definitions, see Autodesk Forge Viewer documentation
+     */
+    export namespace Autodesk {
+        export namespace Viewing {
+            export class GuiViewer3D {
+                // Add minimal type stubs for commonly used methods
+                start(): void;
+                loadExtension(extensionId: string, options?: any): Promise<any>;
+                loadModel(url: string, options?: any, onSuccess?: Function): void;
+                loadDocumentNode(document: any, node: any): Promise<any>;
+                addEventListener(event: string, callback: Function): void;
+                removeEventListener(event: string, callback: Function): void;
+                setReverseZoomDirection(value: boolean): void;
+                getExtension(extensionId: string): any;
+                setTool(toolName: string): void;
+                toolbar: any;
+                model: any;
+            }
+
+            export interface Extension {
+                load(): boolean;
+                unload(): boolean;
+            }
+
+            // Common event constants
+            export const GEOMETRY_LOADED_EVENT: string;
+            export const MODEL_ADDED_EVENT: string;
+            export const TOOLBAR_CREATED_EVENT: string;
+        }
+    }
+
+    /**
+     * Props for ViewerForgePDF component
+     */
+    export interface IViewerForgePDFProps {
+        /**
+         * URL/path to the document to load
+         */
+        filePath: string;
+
+        /**
+         * File extension (pdf, dwf, dwfx)
+         */
+        fileExt: TSupportedFileExtension;
+
+        /**
+         * Callback to receive viewer instance when initialized
+         */
+        setViewer?: (viewer: Autodesk.Viewing.GuiViewer3D | null) => void;
+    }
+
+    /**
+     * ViewerForgePDF - React component for displaying PDF and CAD files using Autodesk Forge Viewer
+     * 
+     * @example
+     * ```tsx
+     * import { ViewerForgePDF } from '@dtducas/wh-forge-viewer';
+     * 
+     * function MyApp() {
+     *   const [viewer, setViewer] = useState<Autodesk.Viewing.GuiViewer3D | null>(null);
+     *   
+     *   return (
+     *     <ViewerForgePDF
+     *       filePath="https://example.com/document.pdf"
+     *       fileExt="pdf"
+     *       setViewer={setViewer}
+     *     />
+     *   );
+     * }
+     * ```
+     */
+    export const ViewerForgePDF: FC<IViewerForgePDFProps>;
+}

package/dist/index.esm.js

@@ -192,6 +192,7 @@ function registerToolbarExtension(Autodesk) {
     this.paginationGroup = null;
     this.viewables = [];
     this.currentIndex = 0;
+    this.docBrowserShouldBeOpen = false; // Track if doc browser should remain open
   }
   ToolbarExtension.prototype = Object.create(Autodesk.Viewing.Extension.prototype);
   ToolbarExtension.prototype.constructor = ToolbarExtension;
@@ -218,6 +219,10 @@ function registerToolbarExtension(Autodesk) {
     var _this = this;
     this.viewables = viewables;
     this.currentIndex = 0;
+    // If multiple pages, document browser will be auto-opened
+    if (viewables.length > 1) {
+      this.docBrowserShouldBeOpen = true;
+    }
     this.updatePaginationState();
     this.viewer.addEventListener(Autodesk.Viewing.MODEL_ADDED_EVENT, function (e) {
       _this.updateCurrentIndexFromModel();
@@ -240,6 +245,23 @@ function registerToolbarExtension(Autodesk) {
   };
   ToolbarExtension.prototype.updatePaginationState = function () {
     if (!this.paginationGroup) return;
+
+    // Hide pagination group if there's only 1 page or no pages
+    if (this.viewables.length <= 1) {
+      this.paginationGroup.setVisible(false);
+      // Also hide the container via CSS to ensure it's completely hidden
+      if (this.paginationGroup.container) {
+        this.paginationGroup.container.style.display = 'none';
+      }
+      return;
+    }
+
+    // Show pagination group for multi-page documents
+    this.paginationGroup.setVisible(true);
+    // Ensure container is visible
+    if (this.paginationGroup.container) {
+      this.paginationGroup.container.style.display = '';
+    }
     var totalBtn = this.paginationGroup.getControl('total-page-label');
     if (totalBtn) {
       var current = this.viewables.length > 0 ? this.currentIndex + 1 : 0;
@@ -256,6 +278,26 @@ function registerToolbarExtension(Autodesk) {
     if (this.viewables.length > 0 && this.viewables[this.currentIndex]) {
       var viewer = this.viewer;
       var toolbar = viewer.toolbar;
+      var self = this;
+
+      // Store Document Browser panel state before loading new page
+      var docBrowserExt = viewer.getExtension('Autodesk.DocumentBrowser');
+      var isCurrentlyOpen = docBrowserExt && docBrowserExt.ui && docBrowserExt.ui.panel && docBrowserExt.ui.panel.isVisible();
+
+      // Update flag - if currently open or flag is already set, keep it open
+      if (isCurrentlyOpen) {
+        this.docBrowserShouldBeOpen = true;
+      }
+
+      // Add one-time listener for geometry loaded to restore states
+      var _onGeometryLoaded = function onGeometryLoaded() {
+        viewer.removeEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, _onGeometryLoaded);
+        // Restore after geometry is fully loaded
+        setTimeout(function () {
+          self.restoreButtonStates(self.docBrowserShouldBeOpen);
+        }, 200);
+      };
+      viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, _onGeometryLoaded);
       viewer.loadDocumentNode(viewer.model.getDocumentNode().getDocument(), this.viewables[this.currentIndex]).then(function () {
         var defaultGroups = ['settingsTools', 'modelTools', 'navTools'];
         defaultGroups.forEach(function (id) {
@@ -274,11 +316,170 @@ function registerToolbarExtension(Autodesk) {
         if (_this2.paginationGroup) _this2.paginationGroup.setVisible(true);
         toolbar.setVisible(true);
         _this2.updatePaginationState();
+
+        // Also restore immediately (may work for cached pages)
+        _this2.restoreButtonStates(_this2.docBrowserShouldBeOpen);
       })["catch"](function (err) {
         return console.error('Error loading viewable:', err);
       });
     }
   };
+  ToolbarExtension.prototype.restoreButtonStates = function (shouldOpenDocBrowser) {
+    var viewer = this.viewer;
+    var toolbar = viewer.toolbar;
+    if (!toolbar) return;
+    var self = this;
+
+    // Restore Document Browser state
+    var openDocBrowser = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+        var docBrowserExt, _t;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.p = _context.n) {
+            case 0:
+              if (shouldOpenDocBrowser) {
+                _context.n = 1;
+                break;
+              }
+              return _context.a(2);
+            case 1:
+              docBrowserExt = viewer.getExtension('Autodesk.DocumentBrowser'); // If extension is null, it was unloaded - we need to reload it
+              if (docBrowserExt) {
+                _context.n = 5;
+                break;
+              }
+              _context.p = 2;
+              _context.n = 3;
+              return viewer.loadExtension('Autodesk.DocumentBrowser');
+            case 3:
+              docBrowserExt = _context.v;
+              // After loading, we need to wait for the extension to fully initialize
+              // and then open the panel
+              setTimeout(function () {
+                if (docBrowserExt && docBrowserExt.ui) {
+                  docBrowserExt.ui.togglePanel();
+                  setTimeout(function () {
+                    self.applyDocBrowserStyling();
+                    self.checkButtonState();
+                  }, 150);
+                }
+              }, 200);
+              return _context.a(2);
+            case 4:
+              _context.p = 4;
+              _t = _context.v;
+              console.error('[ToolbarExt] Failed to reload DocumentBrowser:', _t);
+              return _context.a(2);
+            case 5:
+              if (docBrowserExt.ui) {
+                _context.n = 6;
+                break;
+              }
+              return _context.a(2);
+            case 6:
+              if (!docBrowserExt.ui.panel) {
+                _context.n = 8;
+                break;
+              }
+              if (!docBrowserExt.ui.panel.isVisible()) {
+                _context.n = 7;
+                break;
+              }
+              self.applyDocBrowserStyling();
+              self.checkButtonState();
+              return _context.a(2);
+            case 7:
+              // Use setVisible(true) directly on the panel
+              docBrowserExt.ui.panel.setVisible(true);
+              setTimeout(function () {
+                self.applyDocBrowserStyling();
+                self.checkButtonState();
+              }, 100);
+              return _context.a(2);
+            case 8:
+              // If panel doesn't exist yet, use togglePanel to create it
+              if (typeof docBrowserExt.ui.togglePanel === 'function') {
+                docBrowserExt.ui.togglePanel();
+                setTimeout(function () {
+                  self.applyDocBrowserStyling();
+                  self.checkButtonState();
+                }, 150);
+              }
+            case 9:
+              return _context.a(2);
+          }
+        }, _callee, null, [[2, 4]]);
+      }));
+      return function openDocBrowser() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    // Restore Pan tool active state
+    var restorePanTool = function restorePanTool() {
+      self.activatePanTool();
+    };
+
+    // Call restore at multiple intervals to ensure it works
+    // Use longer delays since geometry needs to fully load
+    setTimeout(openDocBrowser, 300);
+    setTimeout(openDocBrowser, 600);
+    setTimeout(openDocBrowser, 1000);
+    setTimeout(restorePanTool, 100);
+    setTimeout(restorePanTool, 300);
+  };
+  ToolbarExtension.prototype.applyDocBrowserStyling = function () {
+    var viewer = this.viewer;
+    var ext = viewer.getExtension('Autodesk.DocumentBrowser');
+    if (ext && ext.ui && ext.ui.panel && ext.ui.panel.container) {
+      ext.ui.panel.container.style.top = '0';
+      ext.ui.panel.container.style.left = 'unset';
+      ext.ui.panel.container.style.right = '0px';
+      ext.ui.panel.container.style.width = '200px';
+      ext.ui.panel.container.style.height = '80%';
+    }
+
+    // Switch to Thumbnail tab
+    this.switchToThumbnailTab();
+  };
+  ToolbarExtension.prototype.switchToThumbnailTab = function () {
+    // Try multiple selectors to find the thumbnail tab button
+    var thumbnailTab = document.querySelector('.docking-panel-thumbnail-view') || document.querySelector('[data-i18n="Thumbnails"]') || Array.from(document.querySelectorAll('.adsk-control-group .adsk-button')).find(function (btn) {
+      return btn.textContent.includes('Thumbnails') || btn.title.includes('Thumbnails');
+    });
+    if (thumbnailTab && !thumbnailTab.classList.contains('active')) {
+      thumbnailTab.click();
+    }
+  };
+  ToolbarExtension.prototype.activatePanTool = function () {
+    var viewer = this.viewer;
+    var toolbar = viewer.toolbar;
+    if (!toolbar) return;
+
+    // Activate pan tool using viewer API
+    try {
+      viewer.setActiveNavigationTool('pan');
+    } catch (e) {
+      // Fallback: click the original pan button
+      var originalPanBtn = document.getElementById('toolbar-panTool');
+      if (originalPanBtn) {
+        originalPanBtn.click();
+      }
+    }
+
+    // Update custom pan button visual state
+    var toolGroup = toolbar.getControl('custom-tool-group');
+    if (toolGroup) {
+      var panBtn = toolGroup.getControl('custom-pan-btn');
+      if (panBtn) {
+        panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
+        if (panBtn.container) {
+          panBtn.container.classList.add('active');
+          panBtn.container.classList.remove('inactive');
+        }
+      }
+    }
+  };
   ToolbarExtension.prototype.onToolbarCreated = function (toolbar) {
     var _this3 = this;
     this.refreshToolbar();
@@ -301,9 +502,53 @@ function registerToolbarExtension(Autodesk) {
         if (!toolGroup || !pagGroup) {
           _this3.refreshToolbar();
         }
+        _this3.checkButtonState();
       }
     }, 200);
   };
+  ToolbarExtension.prototype.checkButtonState = function () {
+    var viewer = this.viewer;
+    if (!viewer.toolbar) return;
+    var toolGroup = viewer.toolbar.getControl('custom-tool-group');
+    if (!toolGroup) return;
+
+    // Check Document Browser button state
+    var docBtn = toolGroup.getControl('custom-doc-browser-btn');
+    if (docBtn) {
+      var ext = viewer.getExtension('Autodesk.DocumentBrowser');
+      var isVisible = ext && ext.ui && ext.ui.panel && ext.ui.panel.isVisible();
+      var newState = isVisible ? Autodesk.Viewing.UI.Button.State.ACTIVE : Autodesk.Viewing.UI.Button.State.INACTIVE;
+      if (docBtn.getState() !== newState) {
+        docBtn.setState(newState);
+      }
+
+      // Force CSS class update to ensure visual state is correct
+      if (docBtn.container) {
+        if (isVisible) {
+          docBtn.container.classList.add('active');
+          docBtn.container.classList.remove('inactive');
+        } else {
+          docBtn.container.classList.remove('active');
+          docBtn.container.classList.add('inactive');
+        }
+      }
+    }
+
+    // Check Pan button state - ensure it stays active
+    var panBtn = toolGroup.getControl('custom-pan-btn');
+    if (panBtn) {
+      // Check if pan tool is the active tool
+      var activeTool = viewer.getActiveNavigationTool();
+      var isPanActive = activeTool === 'pan';
+      if (isPanActive) {
+        panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
+        if (panBtn.container) {
+          panBtn.container.classList.add('active');
+          panBtn.container.classList.remove('inactive');
+        }
+      }
+    }
+  };
   var originalUnload = ToolbarExtension.prototype.unload;
   ToolbarExtension.prototype.unload = function () {
     if (this._toolbarInterval) {
@@ -343,7 +588,7 @@ function registerToolbarExtension(Autodesk) {
       }
       this.createPaginationGroup(toolbar);
     } else {
-      pagGroup.setVisible(true);
+      // Don't force visibility here - let updatePaginationState handle it
       this.paginationGroup = pagGroup;
     }
     toolbar.setVisible(true);
@@ -358,45 +603,62 @@ function registerToolbarExtension(Autodesk) {
     panBtn.setIcon('adsk-icon-pan');
     panBtn.setToolTip('Pan');
     panBtn.onClick = function () {
-      return viewer.setTool('pan');
+      var originalPanBtn = document.getElementById('toolbar-panTool');
+      if (originalPanBtn) {
+        originalPanBtn.click();
+      }
+
+      // Set this button to active state
+      if (panBtn.container) {
+        panBtn.container.classList.add('active');
+        panBtn.container.classList.remove('inactive');
+      }
+      panBtn.setState(Autodesk.Viewing.UI.Button.State.ACTIVE);
     };
     this.subToolbar.addControl(panBtn);
     var docBrowserBtn = new Autodesk.Viewing.UI.Button('custom-doc-browser-btn');
     docBrowserBtn.setIcon('adsk-icon-documentModels');
     docBrowserBtn.setToolTip('Document Browser');
+    var self = this;
     docBrowserBtn.onClick = function () {
       var ext = viewer.getExtension('Autodesk.DocumentBrowser');
-      if (ext && ext.ui) ext.ui.togglePanel();
+      if (ext && ext.ui) {
+        ext.ui.togglePanel();
+        // Update flag based on new state
+        setTimeout(function () {
+          self.docBrowserShouldBeOpen = ext.ui.panel && ext.ui.panel.isVisible();
+        }, 50);
+      }
     };
     this.subToolbar.addControl(docBrowserBtn);
     var downloadBtn = new Autodesk.Viewing.UI.Button('custom-download-btn');
     downloadBtn.setIcon('adsk-icon-custom-download');
     downloadBtn.setToolTip('Download File');
-    downloadBtn.onClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
-      var fileUrl, response, blob, urlPath, filename, blobUrl, anchor, _t;
-      return _regenerator().w(function (_context) {
-        while (1) switch (_context.p = _context.n) {
+    downloadBtn.onClick = /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
+      var fileUrl, response, blob, urlPath, filename, blobUrl, anchor, _t2;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.p = _context2.n) {
           case 0:
             if (!(_this4.options && _this4.options.filePath)) {
-              _context.n = 7;
+              _context2.n = 7;
               break;
             }
-            _context.p = 1;
+            _context2.p = 1;
             fileUrl = _this4.options.filePath;
-            _context.n = 2;
+            _context2.n = 2;
             return fetch(fileUrl);
           case 2:
-            response = _context.v;
+            response = _context2.v;
             if (response.ok) {
-              _context.n = 3;
+              _context2.n = 3;
               break;
             }
             throw new Error("HTTP error! status: ".concat(response.status));
           case 3:
-            _context.n = 4;
+            _context2.n = 4;
             return response.blob();
           case 4:
-            blob = _context.v;
+            blob = _context2.v;
             urlPath = new URL(fileUrl).pathname;
             filename = decodeURIComponent(urlPath.split('/').pop()) || 'document.pdf';
             blobUrl = URL.createObjectURL(blob);
@@ -408,23 +670,23 @@ function registerToolbarExtension(Autodesk) {
             anchor.click();
             document.body.removeChild(anchor);
             URL.revokeObjectURL(blobUrl);
-            _context.n = 6;
+            _context2.n = 6;
             break;
           case 5:
-            _context.p = 5;
-            _t = _context.v;
-            console.error('Download error:', _t);
-            alert('Unable to download file: ' + _t.message);
+            _context2.p = 5;
+            _t2 = _context2.v;
+            console.error('Download error:', _t2);
+            alert('Unable to download file: ' + _t2.message);
           case 6:
-            _context.n = 8;
+            _context2.n = 8;
             break;
           case 7:
             console.warn('FilePath not available in extension options');
             alert('File path not available for download');
           case 8:
-            return _context.a(2);
+            return _context2.a(2);
         }
-      }, _callee, null, [[1, 5]]);
+      }, _callee2, null, [[1, 5]]);
     }));
     this.subToolbar.addControl(downloadBtn);
   };
@@ -550,7 +812,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n  display: none !important;\n  visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 20px;\n  position: fixed !important;\n  bottom: 10px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: auto !important;\n  border-radius: 4px !important;\n  padding: 8px 12px !important;\n}\n#custom-tool-group {\n  display: flex !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n#custom-pagination-group {\n  display: flex !important;\n  position: relative !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: auto !important;\n}\n";
+var css_248z$1 = "#navTools,\n#modelTools,\n#settingsTools,\n#measureTools {\n  display: none !important;\n  visibility: hidden !important;\n}\n#guiviewer3d-toolbar {\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  gap: 20px;\n  position: fixed !important;\n  bottom: 10px !important;\n  left: 50% !important;\n  transform: translateX(-50%) !important;\n  width: auto !important;\n  border-radius: 4px !important;\n  padding: 8px 12px !important;\n}\n#custom-tool-group {\n  display: flex !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n#custom-pagination-group {\n  display: flex;\n  position: relative !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  left: auto !important;\n}\n\n/* Document Browser Panel Styling */\n.docking-panel.document-browser-panel,\n.adsk-viewing-viewer .docking-panel.document-browser-panel {\n  min-height: 400px !important;\n  height: 80% !important;\n  max-height: 80vh !important;\n}\n\n/* Ensure thumbnail container has proper height */\n.docking-panel.document-browser-panel .docking-panel-container-solid-color-a,\n.document-browser-panel .treeview,\n.document-browser-panel .thumbnails-container {\n  height: calc(100% - 50px) !important;\n  min-height: 350px !important;\n  overflow-y: auto !important;\n}\n\n/* Thumbnail cards styling */\n.document-browser-panel .thumbnail-item,\n.document-browser-panel .thumbnail {\n  display: flex !important;\n  visibility: visible !important;\n}\n\n/* Ensure thumbnail images are visible */\n.document-browser-panel .thumbnail img,\n.document-browser-panel .thumbnail-item img {\n  display: block !important;\n  visibility: visible !important;\n  max-width: 100% !important;\n  height: auto !important;\n}\n";
 styleInject(css_248z$1);
 
 var css_248z = "/* Custom icon styles for toolbar using SVG */\n\n/* Download icon - custom SVG */\n.adsk-icon-custom-download::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1m-1 4v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 11.293V7.5a.5.5 0 0 1 1 0\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Previous page icon - Font Awesome chevron left */\n.adsk-icon-custom-prev::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M16 14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2zm-4.5-6.5H5.707l2.147-2.146a.5.5 0 1 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L5.707 8.5H11.5a.5.5 0 0 0 0-1\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Next page icon - Font Awesome chevron right */\n.adsk-icon-custom-next::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,\\\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\\\n<path fill=\"%23FFFFFF\" d=\"M0 14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2zm4.5-6.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5a.5.5 0 0 1 0-1\"/>\\\n</svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: 16px 16px;\n}\n\n/* Fallback for adsk-icon-caret-left and adsk-icon-caret-right if not defined */\n.adsk-icon-caret-left::before {\n  content: '[';\n  font-family: 'adsk-viewing';\n}\n\n.adsk-icon-caret-right::before {\n  content: ']';\n  font-family: 'adsk-viewing';\n}\n\n/* Comment icon - custom SVG (Smiley) */\n.adsk-icon-custom-comment::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"></circle><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"></path><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"></line><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"></line></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n\n/* Save icon - custom SVG */\n.adsk-icon-custom-save::before {\n  content: '';\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23FFFFFF\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\"></path><polyline points=\"17 21 17 13 7 13 7 21\"></polyline><polyline points=\"7 3 7 8 15 8\"></polyline></svg>');\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n";
@@ -623,16 +885,57 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
                     viewer.toolbar.setVisible(true);
                   }
                   if (viewables.length > 1) {
-                    var documentBrowser = viewer.getExtension('Autodesk.DocumentBrowser');
-                    if (documentBrowser) {
-                      if (documentBrowser.ui.panel) {
-                        documentBrowser.ui.panel.container.style.top = 0;
+                    // Auto-open Document Browser by clicking the original button
+                    setTimeout(function () {
+                      var originalDocBtn = document.getElementById('toolbar-documentModels');
+                      if (originalDocBtn && !originalDocBtn.classList.contains('active')) {
+                        originalDocBtn.click();
+                      }
+
+                      // Apply custom styling to the panel
+                      var documentBrowser = viewer.getExtension('Autodesk.DocumentBrowser');
+                      if (documentBrowser && documentBrowser.ui && documentBrowser.ui.panel) {
+                        documentBrowser.ui.panel.container.style.top = '0';
                         documentBrowser.ui.panel.container.style.left = 'unset';
                         documentBrowser.ui.panel.container.style.right = '0px';
                         documentBrowser.ui.panel.container.style.width = '200px';
+                        documentBrowser.ui.panel.container.style.height = '80%';
+                        documentBrowser.ui.panel.container.style.minHeight = '400px';
                       }
-                    }
+
+                      // Switch to Thumbnail tab after a short delay
+                      setTimeout(function () {
+                        // Try multiple selectors to find the thumbnail tab button
+                        var thumbnailTab = document.querySelector('.docking-panel-thumbnail-view') || document.querySelector('[data-i18n="Thumbnails"]') || Array.from(document.querySelectorAll('.adsk-control-group .adsk-button')).find(function (btn) {
+                          return btn.textContent.includes('Thumbnails') || btn.title.includes('Thumbnails');
+                        });
+                        if (thumbnailTab && !thumbnailTab.classList.contains('active')) {
+                          thumbnailTab.click();
+                        }
+                      }, 200);
+                    }, 500);
                   }
+
+                  // Ensure Custom Pan tool is active by default
+                  setTimeout(function () {
+                    var customPanBtn = document.getElementById('custom-pan-btn');
+                    if (customPanBtn) {
+                      customPanBtn.click();
+                      // Double check visual state
+                      if (!customPanBtn.classList.contains('active')) {
+                        customPanBtn.classList.add('active');
+                        customPanBtn.classList.remove('inactive');
+                      }
+                    } else {
+                      var _viewer$toolbar;
+                      // Fallback if custom button not found immediately, try accessing via viewer toolbar
+                      var toolGroup = (_viewer$toolbar = viewer.toolbar) === null || _viewer$toolbar === void 0 ? void 0 : _viewer$toolbar.getControl('custom-tool-group');
+                      var panBtnConf = toolGroup === null || toolGroup === void 0 ? void 0 : toolGroup.getControl('custom-pan-btn');
+                      if (panBtnConf) {
+                        panBtnConf.setState(1); // ACTIVE
+                      }
+                    }
+                  }, 600);
                   if (setViewer) setViewer(viewer);
                 } catch (err) {
                   console.error('Error in handleLoadSuccess:', err);
@@ -659,7 +962,8 @@ var ViewerForgePDF = function ViewerForgePDF(_ref) {
         }, _callee);
       })));
     }
-  }, [status, filePath, fileExt, setViewer]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, filePath, fileExt]);
   return /*#__PURE__*/jsx("div", {
     style: {
       position: 'relative',