fix(alignment): replace html2canvas with dom-to-image-more to support oklch colors

Author: AmirMohammad Cheraghali

package-lock.json

@@ -14,8 +14,8 @@
     "@types/peerjs": "^0.0.30",
     "@types/qrcode": "^1.5.6",
     "clsx": "^2.1.1",
+    "dom-to-image-more": "^3.7.2",
     "driver.js": "^1.4.0",
-    "html2canvas": "^1.4.1",
     "jspdf": "^3.0.4",
     "jspdf-autotable": "^5.0.2",
     "lucide-react": "^0.562.0",

package.json

@@ -2,7 +2,7 @@ import React, { useMemo, useState, useRef } from 'react';
 import { X, GitCommitVertical, AlertTriangle, FileText, BarChart2, Hash, Percent, Download, Activity, Image, MessageSquare, ChevronDown } from 'lucide-react';
 import type { ChainInfo, SuperposedStructure } from '../types';
 import clsx from 'clsx';
-import html2canvas from 'html2canvas';
+import domtoimage from 'dom-to-image-more';
 
 interface SequenceAlignmentModalProps {
     isOpen: boolean;
@@ -282,31 +282,25 @@ export const SequenceAlignmentModal: React.FC<SequenceAlignmentModalProps> = ({
 
         try {
             console.log('Starting PNG export...');
-            const canvas = await html2canvas(modalRef.current, {
-                backgroundColor: '#0D1117',
+            const dataUrl = await domtoimage.toPng(modalRef.current, {
+                quality: 1,
+                bgcolor: '#0D1117',
                 scale: 2,
-                logging: false,
-                useCORS: true,
-                allowTaint: true
+                style: {
+                    transform: 'scale(1)',
+                    transformOrigin: 'top left'
+                }
             });
 
-            console.log('Canvas created successfully');
-
-            canvas.toBlob((blob) => {
-                if (blob) {
-                    const url = URL.createObjectURL(blob);
-                    const a = document.createElement('a');
-                    a.href = url;
-                    a.download = `sequence_alignment_${Date.now()}.png`;
-                    document.body.appendChild(a);
-                    a.click();
-                    document.body.removeChild(a);
-                    URL.revokeObjectURL(url);
-                    console.log('PNG exported successfully');
-                } else {
-                    alert('Failed to create image blob');
-                }
-            }, 'image/png');
+            console.log('Image created successfully');
+
+            const link = document.createElement('a');
+            link.download = `sequence_alignment_${Date.now()}.png`;
+            link.href = dataUrl;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            console.log('PNG exported successfully');
         } catch (error) {
             console.error('Failed to export image:', error);
             alert(`Export failed: ${error instanceof Error ? error.message : 'Unknown error'}`);

src/components/SequenceAlignmentModal.tsx

@@ -0,0 +1,7 @@
+declare module 'dom-to-image-more' {
+    export function toPng(node: HTMLElement, options?: any): Promise<string>;
+    export function toJpeg(node: HTMLElement, options?: any): Promise<string>;
+    export function toBlob(node: HTMLElement, options?: any): Promise<Blob>;
+    export function toPixelData(node: HTMLElement, options?: any): Promise<Uint8ClampedArray>;
+    export function toSvg(node: HTMLElement, options?: any): Promise<string>;
+}

src/dom-to-image-more.d.ts

@@ -47,7 +47,6 @@ export interface ChainInfo {
     atoms?: AtomInfo[]; // Added: For small chemicals, list atoms directly
     bFactors?: number[]; // Added: Per-residue B-factor for coloring sync
     coords?: { x: number; y: number; z: number }[]; // Added: C-alpha/P coordinates for RMSD
-    secondaryStructure?: string[]; // Added: Secondary structure codes (H, E, C)
 }
 
 export interface StructureInfo {

src/types.ts

@@ -152,7 +152,6 @@ export const extractChainsFromComponent = (component: any, matrix?: number[]): {
         const resMap: number[] = [];
         const bFactors: number[] = [];
         const coords: { x: number, y: number, z: number }[] = [];
-        const secStrucs: string[] = [];
 
         try {
             c.eachResidue((r: any) => {
@@ -197,15 +196,6 @@ export const extractChainsFromComponent = (component: any, matrix?: number[]): {
                     coords.push({ x: 0, y: 0, z: 0 }); // Should theoretically not happen
                 }
 
-                // Secondary Structure Extraction
-                let ssCode = 'C';
-                if (r.sstruc) {
-                    const s = r.sstruc.toLowerCase();
-                    if (['h', 'g', 'i'].includes(s)) ssCode = 'H';
-                    else if (['e', 'b'].includes(s)) ssCode = 'E';
-                }
-                secStrucs.push(ssCode);
-
                 // Determine Type
                 if (r.isNucleic()) nucleicCount++;
                 else if (r.isProtein()) proteinCount++;
@@ -263,8 +253,7 @@ export const extractChainsFromComponent = (component: any, matrix?: number[]): {
             type: chainType,
             atoms: atomList.length > 0 ? atomList : undefined,
             bFactors: bFactors,
-            coords: coords, // Added field
-            secondaryStructure: secStrucs
+            coords: coords // Added field
         });
     });