scandoc-ai-components 0.0.63 → 0.0.65

package/dist/index.js

@@ -11191,6 +11191,7 @@ class ExtractorVideo {
     this.scanStartTime = null;
     this.unsupportedDocCount = 0;
     this.video = null;
+    this.updateOverlayTimeout = null;
   }
   reset() {
     this.stopVideo();
@@ -11245,6 +11246,25 @@ class ExtractorVideo {
       bottomPct: bottom / canvas.height
     };
   }
+  updateRectangleOverlay = async () => {
+    const margins = await this.getCameraMargins();
+    const video = document.getElementById('ScanDocAIVideoElement');
+    const rectangle = document.querySelector('.desktopRectangle');
+    if (!video || !rectangle) return;
+    const rect = video.getBoundingClientRect(); // Only visible portion
+    const width = rect.width;
+    const height = rect.height;
+    const leftPx = margins.leftPct * width;
+    const rightPx = margins.rightPct * width;
+    const topPx = margins.topPct * height;
+    const bottomPx = margins.bottomPct * height;
+
+    // Position rectangle in actual pixels (not %)
+    rectangle.style.left = `${rect.left + leftPx}px`;
+    rectangle.style.top = `${rect.top + topPx}px`;
+    rectangle.style.width = `${width - leftPx - rightPx}px`;
+    rectangle.style.height = `${height - topPx - bottomPx}px`;
+  };
   async analyzeVideoStream() {
     if (!this.isRunning) {
       return;
@@ -11405,21 +11425,16 @@ class ExtractorVideo {
       await this.video.play().catch(e => {
         console.warn(`Error on video play: ${e}`);
       });
-      window.addEventListener("resize", () => {
-        if (this.isRunning) {
-          setTimeout(() => this.getCameraMargins().then(margins => {
-            const rectangle = document.querySelector('.desktopRectangle');
-            const clamp = (v, max = 0.25) => Math.min(v, max) * 100;
-            const buffer = 0.03;
-            if (rectangle) {
-              rectangle.style.top = `${clamp(margins.topPct + buffer)}%`;
-              rectangle.style.bottom = `${clamp(margins.bottomPct + buffer)}%`;
-              rectangle.style.left = `${clamp(margins.leftPct + buffer)}%`;
-              rectangle.style.right = `${clamp(margins.rightPct + buffer)}%`;
-            }
-          }), 500);
-        }
-      });
+      this.video.onloadedmetadata = () => {
+        this.updateRectangleOverlay();
+      };
+      setTimeout(() => this.updateRectangleOverlay(), 500);
+      const scheduleOverlayUpdate = (delay = 500) => {
+        clearTimeout(this.updateOverlayTimeout);
+        this.updateOverlayTimeout = setTimeout(() => this.updateRectangleOverlay(), delay);
+      };
+      window.addEventListener("resize", () => scheduleOverlayUpdate());
+      window.addEventListener("orientationchange", () => scheduleOverlayUpdate(700));
       this.scanStartTime = Date.now(); // Reset timer
       setTimeout(() => this.analyzeVideoStream(), ExtractorVideo.FREQUENCY_MS);
       this.showMessage("Starting scanning");
@@ -11491,14 +11506,12 @@ class ExtractorVideo {
                 }
 
                 .desktopRectangle {
-					position: absolute;
+					position: fixed; /* not absolute anymore */
 					border-radius: 30px;
-					display: flex;
-					justify-content: center;
-					align-items: center;
-					z-index: 3;
 					border: 5px dashed #5078bb;
 					transition: all 0.3s ease;
+					pointer-events: none;
+					z-index: 1000;
 				}
     
                 .backgroundOverlay {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "scandoc-ai-components",
   "author": "ScanDoc-AI",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "private": false,
   "description": "Pure JavaScript package for integrating ScanDoc-AI services.",
   "keywords": [