datastake-daf 0.6.476 → 0.6.477

package/dist/utils/index.js

@@ -12672,44 +12672,30 @@ async function captureComponentsAsImages(components, options = {
     component,
     width = '100%',
     height = 'auto',
-    delay = 300
+    delay = 200
   }) => {
     const container = document.createElement('div');
     container.style.position = 'absolute';
     container.style.opacity = '0';
     container.style.pointerEvents = 'none';
-    container.style.top = '-9999px';
-    container.style.left = '-9999px';
+    container.style.top = '0';
+    container.style.left = '0';
     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
+      // Wait for render and styled-components CSS injection
       await new Promise(resolve => setTimeout(resolve, delay));
 
-      // 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
+      // Capture the actual component (first child), not the wrapper
+      const element = container.firstChild || container;
       const dataUrl = await htmlToImage.toPng(element, {
         ...options,
-        backgroundColor: 'transparent',
-        pixelRatio: 2 // Higher quality
+        backgroundColor: null,
+        pixelRatio: 2
       });
       root.unmount();
       document.body.removeChild(container);

package/package.json

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

package/src/helpers/componentsToImages.js

@@ -37,16 +37,15 @@ 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 = 300 }) => {
+    targets.map(async ({ component, width = '100%', height = 'auto', delay = 200 }) => {
       const container = document.createElement('div');
       container.style.position = 'absolute';
       container.style.opacity = '0';
       container.style.pointerEvents = 'none';
-      container.style.top = '-9999px';
-      container.style.left = '-9999px';
+      container.style.top = '0';
+      container.style.left = '0';
       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);
       
@@ -54,29 +53,15 @@ 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
+        // Wait for render and styled-components CSS injection
         await new Promise(resolve => setTimeout(resolve, delay));
         
-        // 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
+        // Capture the actual component (first child), not the wrapper
+        const element = container.firstChild || container;
         const dataUrl = await toPng(element, {
           ...options,
-          backgroundColor: 'transparent',
-          pixelRatio: 2 // Higher quality
+          backgroundColor: null,
+          pixelRatio: 2
         });
         
         root.unmount();