datastake-daf 0.6.474 → 0.6.476

package/dist/utils/index.js

@@ -21,6 +21,7 @@ require('deepmerge');
 var countriesList = require('countries-list');
 require('country-city-location');
 require('leaflet-editable');
+var client = require('react-dom/client');
 var htmlToImage = require('html-to-image');
 var docx = require('docx');
 
@@ -12639,12 +12640,10 @@ function displayMessage(type, m) {
   antd.message[type](m);
 }
 
+// src/helpers/imageCapture.js
+
 /**
- * Captures one or multiple DOM elements and returns their images as base64 strings.
- *
- * @param elements - A single element or an array of elements (or refs)
- * @param options - Optional html-to-image options (e.g., { cacheBust: true })
- * @returns Promise<string[]> - Array of base64 PNG strings (same order as input)
+ * Captures existing DOM elements as images (requires refs)
  */
 async function captureElementsAsImages(elements, options = {
   cacheBust: true
@@ -12662,6 +12661,70 @@ async function captureElementsAsImages(elements, options = {
   return captures;
 }
 
+/**
+ * Captures React components as images (no refs needed)
+ */
+async function captureComponentsAsImages(components, options = {
+  cacheBust: true
+}) {
+  const targets = Array.isArray(components) ? components : [components];
+  const captures = await Promise.all(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 = '-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));
+
+      // 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;
+    } catch (err) {
+      console.error("Error capturing component as image:", err);
+      if (container.parentNode) {
+        document.body.removeChild(container);
+      }
+      return "";
+    }
+  }));
+  return captures;
+}
+
 /**
  * Renders different types of document elements based on type
  * @param {Object} item - Configuration item
@@ -13358,6 +13421,7 @@ exports.btn = button;
 exports.camelCaseToTitle = camelCaseToTitle;
 exports.capitalize = capitalize;
 exports.capitalizeAll = capitalizeAll;
+exports.captureComponentsAsImages = captureComponentsAsImages;
 exports.captureElementsAsImages = captureElementsAsImages;
 exports.changeInputMeta = changeInputMeta;
 exports.convertUndefinedToNull = convertUndefinedToNull;

package/package.json

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

package/src/helpers/componentsToImages.js

@@ -1,11 +1,10 @@
-import { toPng } from "html-to-image";
+// src/helpers/imageCapture.js
+
+import { createRoot } from 'react-dom/client';
+import { toPng } from 'html-to-image';
 
 /**
- * Captures one or multiple DOM elements and returns their images as base64 strings.
- *
- * @param elements - A single element or an array of elements (or refs)
- * @param options - Optional html-to-image options (e.g., { cacheBust: true })
- * @returns Promise<string[]> - Array of base64 PNG strings (same order as input)
+ * Captures existing DOM elements as images (requires refs)
  */
 export async function captureElementsAsImages(
   elements,
@@ -27,3 +26,72 @@ export async function captureElementsAsImages(
 
   return captures;
 }
+
+/**
+ * Captures React components as images (no refs needed)
+ */
+export async function captureComponentsAsImages(
+  components,
+  options = { cacheBust: true }
+) {
+  const targets = Array.isArray(components) ? components : [components];
+  
+  const captures = await Promise.all(
+    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 = '-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 = 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));
+        
+        // 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);
+        
+        return dataUrl;
+      } catch (err) {
+        console.error("Error capturing component as image:", err);
+        if (container.parentNode) {
+          document.body.removeChild(container);
+        }
+        return "";
+      }
+    })
+  );
+  
+  return captures;
+}

package/src/utils.js

@@ -35,7 +35,7 @@ export { renderNumber, renderPercentage } from "./@daf/utils/numbers.js"
 
 export { MessageTypes, displayMessage} from './helpers/messages.js'
 
-export { captureElementsAsImages } from './helpers/componentsToImages.js'
+export { captureElementsAsImages, captureComponentsAsImages } from './helpers/componentsToImages.js'
 
 export { createDocument } from './@daf/core/components/Document/WordDocument/createDocument.js'