@design.estate/dees-catalog 3.41.2 → 3.41.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.41.2",
+  "version": "3.41.3",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.41.2',
+  version: '3.41.3',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/elements/00group-media/dees-pdf-viewer/component.ts

@@ -52,7 +52,7 @@ export class DeesPdfViewer extends DeesElement {
   accessor thumbnailData: Array<{page: number, rendered: boolean}> = [];
 
   @property({ type: Array })
-  accessor pageData: Array<{page: number, rendered: boolean, rendering: boolean}> = [];
+  accessor pageData: Array<{page: number, rendered: boolean, rendering: boolean, textLayerRendered: boolean}> = [];
 
   private pdfDocument: any;
   private renderState: RenderState = 'idle';
@@ -63,6 +63,7 @@ export class DeesPdfViewer extends DeesElement {
   private currentRenderPromise: Promise<void> | null = null;
   private thumbnailRenderTasks: any[] = [];
   private pageRenderTasks: Map<number, any> = new Map();
+  private textLayerRenderTasks: Map<number, any> = new Map();
   private canvas: HTMLCanvasElement | undefined;
   private ctx: CanvasRenderingContext2D | undefined;
   private viewerMain: HTMLElement | null = null;
@@ -230,6 +231,7 @@ export class DeesPdfViewer extends DeesElement {
                     <div class="page-wrapper" data-page="${item.page}">
                       <div class="canvas-container">
                         <canvas class="page-canvas" data-page="${item.page}"></canvas>
+                        <div class="text-layer" data-page="${item.page}"></div>
                       </div>
                     </div>
                   `
@@ -330,7 +332,8 @@ export class DeesPdfViewer extends DeesElement {
       this.pageData = Array.from({length: this.totalPages}, (_, i) => ({
         page: i + 1,
         rendered: false,
-        rendering: false
+        rendering: false,
+        textLayerRendered: false,
       }));
 
       // Set loading to false to render the pages
@@ -476,6 +479,9 @@ export class DeesPdfViewer extends DeesElement {
       pageInfo.rendering = false;
       this.pageRenderTasks.delete(pageNum);
 
+      // Render text layer for selection
+      await this.renderTextLayer(pageNum);
+
       // Update page data to reflect rendered state
       this.requestUpdate('pageData');
     } catch (error: any) {
@@ -487,6 +493,132 @@ export class DeesPdfViewer extends DeesElement {
     }
   }
 
+  private async renderTextLayer(pageNum: number): Promise<void> {
+    const pageInfo = this.pageData.find(p => p.page === pageNum);
+    if (!pageInfo || pageInfo.textLayerRendered) return;
+
+    try {
+      const textLayerDiv = this.shadowRoot?.querySelector(
+        `.text-layer[data-page="${pageNum}"]`
+      ) as HTMLElement;
+      if (!textLayerDiv) return;
+
+      textLayerDiv.innerHTML = '';
+
+      const page = await this.pdfDocument.getPage(pageNum);
+      const textContent = await page.getTextContent();
+      const viewport = this.computeViewport(page);
+
+      // @ts-ignore - Dynamic import of pdfjs
+      const pdfjs = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
+
+      textLayerDiv.style.width = `${viewport.width}px`;
+      textLayerDiv.style.height = `${viewport.height}px`;
+
+      // Set the scale factor CSS variable - required by PDF.js text layer
+      textLayerDiv.style.setProperty('--scale-factor', String(viewport.scale));
+
+      const textLayerRenderTask = pdfjs.renderTextLayer({
+        textContentSource: textContent,
+        container: textLayerDiv,
+        viewport: viewport,
+      });
+
+      this.textLayerRenderTasks.set(pageNum, textLayerRenderTask);
+      await textLayerRenderTask.promise;
+
+      // Add endOfContent for selection boundary
+      const endOfContent = document.createElement('div');
+      endOfContent.className = 'endOfContent';
+      textLayerDiv.appendChild(endOfContent);
+
+      // Custom drag selection for Shadow DOM compatibility
+      // caretRangeFromPoint doesn't pierce shadow DOM, so we find spans manually
+      let isDragging = false;
+      let anchorNode: Node | null = null;
+      let anchorOffset = 0;
+
+      const getTextPositionFromPoint = (x: number, y: number): { node: Node; offset: number } | null => {
+        // Find span at coordinates by checking bounding rects
+        const spans = Array.from(textLayerDiv.querySelectorAll('span'));
+        for (const span of spans) {
+          const rect = span.getBoundingClientRect();
+          if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
+            const textNode = span.firstChild;
+            if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+              // Calculate character offset based on x position
+              const text = textNode.textContent || '';
+              const charWidth = rect.width / text.length;
+              const relativeX = x - rect.left;
+              const offset = Math.min(Math.round(relativeX / charWidth), text.length);
+              return { node: textNode, offset };
+            }
+          }
+        }
+        return null;
+      };
+
+      const handleMouseUp = () => {
+        if (isDragging) {
+          isDragging = false;
+          anchorNode = null;
+          textLayerDiv.classList.remove('selecting');
+        }
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('mousemove', handleMouseMove);
+      };
+
+      const handleMouseMove = (e: MouseEvent) => {
+        if (!isDragging || !anchorNode) return;
+
+        e.preventDefault();
+        const pos = getTextPositionFromPoint(e.clientX, e.clientY);
+        if (pos) {
+          const selection = window.getSelection();
+          if (selection) {
+            try {
+              selection.setBaseAndExtent(anchorNode, anchorOffset, pos.node, pos.offset);
+            } catch (err) {
+              // Ignore errors from invalid selections
+            }
+          }
+        }
+      };
+
+      textLayerDiv.addEventListener('mousedown', (e: MouseEvent) => {
+        if (e.button !== 0) return;
+
+        const pos = getTextPositionFromPoint(e.clientX, e.clientY);
+        if (pos) {
+          // Prevent native selection behavior
+          e.preventDefault();
+
+          isDragging = true;
+          anchorNode = pos.node;
+          anchorOffset = pos.offset;
+          textLayerDiv.classList.add('selecting');
+
+          // Clear existing selection
+          const selection = window.getSelection();
+          selection?.removeAllRanges();
+
+          // Add document-level listeners for drag
+          document.addEventListener('mousemove', handleMouseMove);
+          document.addEventListener('mouseup', handleMouseUp);
+        }
+      });
+
+      pageInfo.textLayerRendered = true;
+      page.cleanup?.();
+      this.textLayerRenderTasks.delete(pageNum);
+    } catch (error: any) {
+      if (error?.name !== 'RenderingCancelledException') {
+        console.error(`Error rendering text layer for page ${pageNum}:`, error);
+      }
+      this.textLayerRenderTasks.delete(pageNum);
+    }
+  }
+
   private handleScroll = () => {
     // Throttle scroll events
     if (this.scrollThrottleTimeout) {
@@ -771,6 +903,7 @@ export class DeesPdfViewer extends DeesElement {
     this.pageData.forEach(page => {
       page.rendered = false;
       page.rendering = false;
+      page.textLayerRendered = false;
     });
 
     // Cancel any ongoing render tasks
@@ -783,6 +916,16 @@ export class DeesPdfViewer extends DeesElement {
     });
     this.pageRenderTasks.clear();
 
+    // Cancel text layer render tasks
+    this.textLayerRenderTasks.forEach(task => {
+      try {
+        task.cancel?.();
+      } catch (error) {
+        // Ignore cancellation errors
+      }
+    });
+    this.textLayerRenderTasks.clear();
+
     // Request update to re-render pages
     this.requestUpdate();
 
@@ -792,52 +935,138 @@ export class DeesPdfViewer extends DeesElement {
     });
   }
 
-  private downloadPdf() {
-    const link = document.createElement('a');
-    link.href = this.pdfUrl;
-    link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
-    link.click();
+  private async downloadPdf() {
+    if (!this.pdfDocument) return;
+
+    try {
+      // Get raw PDF data from the loaded document
+      const data = await this.pdfDocument.getData();
+      const blob = new Blob([data.buffer], { type: 'application/pdf' });
+      const blobUrl = URL.createObjectURL(blob);
+
+      const link = document.createElement('a');
+      link.href = blobUrl;
+      link.download = this.pdfUrl ? this.pdfUrl.split('/').pop() || 'document.pdf' : 'document.pdf';
+      link.click();
+
+      // Clean up blob URL after short delay
+      setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+    } catch (error) {
+      console.error('Error downloading PDF:', error);
+    }
   }
 
-  private printPdf() {
-    window.open(this.pdfUrl, '_blank')?.print();
+  private async printPdf() {
+    if (!this.pdfDocument) return;
+
+    try {
+      // Get raw PDF data from the loaded document
+      const data = await this.pdfDocument.getData();
+      const blob = new Blob([data.buffer], { type: 'application/pdf' });
+      const pdfUrl = URL.createObjectURL(blob);
+
+      // Create an HTML wrapper page that embeds the PDF and handles print/close
+      // This gives us control over the afterprint event (direct PDF URLs don't support it)
+      const htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Print PDF</title>
+          <style>
+            * { margin: 0; padding: 0; }
+            html, body { width: 100%; height: 100%; overflow: hidden; }
+            iframe { width: 100%; height: 100%; border: none; }
+            @media print {
+              html, body, iframe { width: 100%; height: 100%; }
+            }
+          </style>
+        </head>
+        <body>
+          <iframe src="${pdfUrl}" type="application/pdf"></iframe>
+          <script>
+            window.onload = function() {
+              setTimeout(function() {
+                window.focus();
+                window.print();
+              }, 500);
+            };
+            window.onafterprint = function() {
+              window.close();
+            };
+            // Safety close after 2 minutes
+            setTimeout(function() { window.close(); }, 120000);
+          </script>
+        </body>
+        </html>
+      `;
+      const htmlBlob = new Blob([htmlContent], { type: 'text/html' });
+      const htmlUrl = URL.createObjectURL(htmlBlob);
+
+      const printWindow = window.open(htmlUrl, '_blank', 'width=800,height=600');
+      if (printWindow) {
+        // Cleanup blob URLs when window closes
+        const checkClosed = setInterval(() => {
+          if (printWindow.closed) {
+            clearInterval(checkClosed);
+            URL.revokeObjectURL(pdfUrl);
+            URL.revokeObjectURL(htmlUrl);
+          }
+        }, 500);
+        // Safety cleanup after 2 minutes
+        setTimeout(() => {
+          clearInterval(checkClosed);
+          URL.revokeObjectURL(pdfUrl);
+          URL.revokeObjectURL(htmlUrl);
+        }, 120000);
+      } else {
+        // Popup blocked - fall back to direct navigation
+        window.open(pdfUrl, '_blank');
+        setTimeout(() => URL.revokeObjectURL(pdfUrl), 60000);
+        URL.revokeObjectURL(htmlUrl);
+      }
+    } catch (error) {
+      console.error('Error printing PDF:', error);
+    }
   }
 
   /**
    * Provide context menu items for right-click functionality
    */
   public getContextMenuItems() {
-    return [
-      {
-        name: 'Open PDF in New Tab',
-        iconName: 'lucide:ExternalLink',
-        action: async () => {
-          window.open(this.pdfUrl, '_blank');
-        }
-      },
-      { divider: true },
-      {
-        name: 'Copy PDF URL',
+    const items: any[] = [];
+
+    // Add copy option if text is selected
+    const selection = window.getSelection();
+    const selectedText = selection?.toString() || '';
+    if (selectedText) {
+      items.push({
+        name: 'Copy',
         iconName: 'lucide:Copy',
         action: async () => {
-          await navigator.clipboard.writeText(this.pdfUrl);
+          await navigator.clipboard.writeText(selectedText);
         }
-      },
+      });
+      items.push({ divider: true });
+    }
+
+    items.push(
       {
         name: 'Download PDF',
         iconName: 'lucide:Download',
         action: async () => {
-          this.downloadPdf();
+          await this.downloadPdf();
         }
       },
       {
         name: 'Print PDF',
         iconName: 'lucide:Printer',
         action: async () => {
-          this.printPdf();
+          await this.printPdf();
         }
       }
-    ];
+    );
+
+    return items;
   }
 
   private get canZoomIn(): boolean {
@@ -996,6 +1225,16 @@ export class DeesPdfViewer extends DeesElement {
     });
     this.pageRenderTasks.clear();
 
+    // Cancel text layer render tasks
+    this.textLayerRenderTasks.forEach(task => {
+      try {
+        task.cancel?.();
+      } catch (error) {
+        // Ignore cancellation errors
+      }
+    });
+    this.textLayerRenderTasks.clear();
+
     // Cancel any thumbnail render tasks
     for (const task of (this.thumbnailRenderTasks || [])) {
       try {

package/ts_web/elements/00group-media/dees-pdf-viewer/styles.ts

@@ -276,6 +276,7 @@ export const viewerStyles = [
       border-radius: 4px;
       overflow: hidden;
       display: inline-block;
+      position: relative;
     }
 
     .page-canvas {
@@ -284,6 +285,52 @@ export const viewerStyles = [
       image-rendering: crisp-edges;
     }
 
+    /* Text layer for selection */
+    .text-layer {
+      position: absolute;
+      inset: 0;
+      overflow: visible;
+      line-height: 1;
+      text-size-adjust: none;
+      forced-color-adjust: none;
+      transform-origin: 0 0;
+      z-index: 1;
+      user-select: text;
+      -webkit-user-select: text;
+    }
+
+    .text-layer span,
+    .text-layer br {
+      color: transparent;
+      position: absolute;
+      white-space: pre;
+      cursor: text;
+      transform-origin: 0% 0%;
+      user-select: text;
+      -webkit-user-select: text;
+    }
+
+    .text-layer ::selection {
+      background: rgba(0, 100, 200, 0.3);
+    }
+
+    .text-layer br::selection {
+      background: transparent;
+    }
+
+    .text-layer .endOfContent {
+      display: block;
+      position: absolute;
+      inset: 100% 0 0;
+      z-index: 0;
+      cursor: default;
+      user-select: none;
+    }
+
+    .text-layer.selecting .endOfContent {
+      top: 0;
+    }
+
     .pdf-viewer.with-sidebar .viewer-main {
       margin-left: 0;
     }