datastake-daf 0.6.475 → 0.6.477

package/dist/utils/index.js

@@ -12672,7 +12672,7 @@ async function captureComponentsAsImages(components, options = {
     component,
     width = '100%',
     height = 'auto',
-    delay = 100
+    delay = 200
   }) => {
     const container = document.createElement('div');
     container.style.position = 'absolute';
@@ -12686,8 +12686,17 @@ async function captureComponentsAsImages(components, options = {
     try {
       const root = client.createRoot(container);
       root.render(component);
+
+      // Wait for render and styled-components CSS injection
       await new Promise(resolve => setTimeout(resolve, delay));
-      const dataUrl = await htmlToImage.toPng(container, options);
+
+      // Capture the actual component (first child), not the wrapper
+      const element = container.firstChild || container;
+      const dataUrl = await htmlToImage.toPng(element, {
+        ...options,
+        backgroundColor: null,
+        pixelRatio: 2
+      });
       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.477",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/helpers/componentsToImages.js

@@ -37,7 +37,7 @@ 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 = 200 }) => {
       const container = document.createElement('div');
       container.style.position = 'absolute';
       container.style.opacity = '0';
@@ -53,9 +53,16 @@ export async function captureComponentsAsImages(
         const root = createRoot(container);
         root.render(component);
         
+        // Wait for render and styled-components CSS injection
         await new Promise(resolve => setTimeout(resolve, delay));
         
-        const dataUrl = await toPng(container, options);
+        // Capture the actual component (first child), not the wrapper
+        const element = container.firstChild || container;
+        const dataUrl = await toPng(element, {
+          ...options,
+          backgroundColor: null,
+          pixelRatio: 2
+        });
         
         root.unmount();
         document.body.removeChild(container);