datastake-daf 0.6.475 → 0.6.476

package/dist/utils/index.js

@@ -12672,22 +12672,45 @@ async function captureComponentsAsImages(components, options = {
     component,
     width = '100%',
     height = 'auto',
-    delay = 100
+    delay = 300
   }) => {
     const container = document.createElement('div');
     container.style.position = 'absolute';
     container.style.opacity = '0';
     container.style.pointerEvents = 'none';
-    container.style.top = '0';
-    container.style.left = '0';
+    container.style.top = '-9999px';
+    container.style.left = '-9999px';
     container.style.width = typeof width === 'number' ? `${width}px` : width;
     container.style.height = typeof height === 'number' ? `${height}px` : height;
+    container.style.display = 'inline-block';
     document.body.appendChild(container);
     try {
       const root = client.createRoot(container);
       root.render(component);
+
+      // Wait for React to render
+      await new Promise(resolve => setTimeout(resolve, 50));
+
+      // Wait for styled-components to inject styles
+      await new Promise(resolve => requestAnimationFrame(() => {
+        requestAnimationFrame(resolve);
+      }));
+
+      // Additional delay for fonts/styles
       await new Promise(resolve => setTimeout(resolve, delay));
-      const dataUrl = await htmlToImage.toPng(container, options);
+
+      // Get the actual rendered element (first child)
+      const element = container.firstChild;
+      if (!element) {
+        throw new Error('No element was rendered');
+      }
+
+      // Capture the actual element, not the container
+      const dataUrl = await htmlToImage.toPng(element, {
+        ...options,
+        backgroundColor: 'transparent',
+        pixelRatio: 2 // Higher quality
+      });
       root.unmount();
       document.body.removeChild(container);
       return dataUrl;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.475",
+	"version": "0.6.476",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/helpers/componentsToImages.js

@@ -37,15 +37,16 @@ export async function captureComponentsAsImages(
   const targets = Array.isArray(components) ? components : [components];
   
   const captures = await Promise.all(
-    targets.map(async ({ component, width = '100%', height = 'auto', delay = 100 }) => {
+    targets.map(async ({ component, width = '100%', height = 'auto', delay = 300 }) => {
       const container = document.createElement('div');
       container.style.position = 'absolute';
       container.style.opacity = '0';
       container.style.pointerEvents = 'none';
-      container.style.top = '0';
-      container.style.left = '0';
+      container.style.top = '-9999px';
+      container.style.left = '-9999px';
       container.style.width = typeof width === 'number' ? `${width}px` : width;
       container.style.height = typeof height === 'number' ? `${height}px` : height;
+      container.style.display = 'inline-block';
       
       document.body.appendChild(container);
       
@@ -53,9 +54,30 @@ export async function captureComponentsAsImages(
         const root = createRoot(container);
         root.render(component);
         
+        // Wait for React to render
+        await new Promise(resolve => setTimeout(resolve, 50));
+        
+        // Wait for styled-components to inject styles
+        await new Promise(resolve => requestAnimationFrame(() => {
+          requestAnimationFrame(resolve);
+        }));
+        
+        // Additional delay for fonts/styles
         await new Promise(resolve => setTimeout(resolve, delay));
         
-        const dataUrl = await toPng(container, options);
+        // Get the actual rendered element (first child)
+        const element = container.firstChild;
+        
+        if (!element) {
+          throw new Error('No element was rendered');
+        }
+        
+        // Capture the actual element, not the container
+        const dataUrl = await toPng(element, {
+          ...options,
+          backgroundColor: 'transparent',
+          pixelRatio: 2 // Higher quality
+        });
         
         root.unmount();
         document.body.removeChild(container);