ugcinc-render 1.5.24 → 1.5.26

package/dist/index.d.mts

@@ -1239,9 +1239,10 @@ declare function getReferenceElementY(elements: ImageEditorElement[], elementId:
  * @param dynamicCrop - Crop configuration
  * @param canvasWidth - Original canvas width
  * @param canvasHeight - Original canvas height
+ * @param textValues - Optional map of textInputId -> text content for height calculation
  * @returns CropBounds with x, y, width, height
  */
-declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number, textValues?: Record<string, string>): CropBounds;
 /**
  * Check if dynamic crop is enabled (either vertical or horizontal)
  */
@@ -1364,6 +1365,9 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * This file registers all available compositions with the renderer.
  * It serves as the entry point for the renderer bundler.
+ *
+ * Uses calculateMetadata for ImageEditorComposition to determine
+ * dynamic crop dimensions in the browser environment (with DOM access).
  */
 
 declare const RenderRoot: React.FC;

package/dist/index.d.ts

@@ -1239,9 +1239,10 @@ declare function getReferenceElementY(elements: ImageEditorElement[], elementId:
  * @param dynamicCrop - Crop configuration
  * @param canvasWidth - Original canvas width
  * @param canvasHeight - Original canvas height
+ * @param textValues - Optional map of textInputId -> text content for height calculation
  * @returns CropBounds with x, y, width, height
  */
-declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number): CropBounds;
+declare function calculateCropBounds(elements: ImageEditorElement[], dynamicCrop: DynamicCropConfig | undefined, canvasWidth: number, canvasHeight: number, textValues?: Record<string, string>): CropBounds;
 /**
  * Check if dynamic crop is enabled (either vertical or horizontal)
  */
@@ -1364,6 +1365,9 @@ declare function useResolvedPositions(elements: ImageEditorElement[], textValues
  *
  * This file registers all available compositions with the renderer.
  * It serves as the entry point for the renderer bundler.
+ *
+ * Uses calculateMetadata for ImageEditorComposition to determine
+ * dynamic crop dimensions in the browser environment (with DOM access).
  */
 
 declare const RenderRoot: React.FC;

package/dist/index.js

@@ -1167,7 +1167,16 @@ function getReferenceElementY(elements, elementId) {
 }
 
 // src/utils/cropBounds.ts
-function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+function getActualElementHeight(elem, textValues, measureCtx) {
+  if (elem.type !== "text") return elem.height;
+  let textContent = elem.text ?? "Text";
+  if (elem.textInputId && textValues?.[elem.textInputId]) {
+    textContent = textValues[elem.textInputId];
+  }
+  const result = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+  return result?.actualHeight ?? elem.height;
+}
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight, textValues) {
   if (!dynamicCrop) {
     return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
   }
@@ -1180,6 +1189,12 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
     if (boundary.elementId) return boundary.elementId;
     return void 0;
   };
+  let measureCtx = null;
+  const hasTextElements = elements.some((e) => e.type === "text");
+  if (hasTextElements && typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+  }
   let cropY = 0;
   let cropHeight = canvasHeight;
   if (dynamicCrop.vertical?.enabled) {
@@ -1190,8 +1205,9 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       let minY = canvasHeight;
       let maxY = 0;
       for (const elem of elements) {
+        const actualHeight = getActualElementHeight(elem, textValues, measureCtx);
         minY = Math.min(minY, elem.y);
-        maxY = Math.max(maxY, elem.y + elem.height);
+        maxY = Math.max(maxY, elem.y + actualHeight);
       }
       if (elements.length > 0) {
         cropY = Math.max(0, minY - paddingStart);
@@ -1212,7 +1228,8 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       if (endElementId) {
         const endElem = elementMap.get(endElementId);
         if (endElem) {
-          bottomY = endElem.y + endElem.height;
+          const actualHeight = getActualElementHeight(endElem, textValues, measureCtx);
+          bottomY = endElem.y + actualHeight;
         }
       }
       cropY = Math.max(0, topY - paddingStart);
@@ -1446,8 +1463,8 @@ function ImageEditorComposition({
   }, [elements, textValues]);
   const cropBounds = (0, import_react3.useMemo)(() => {
     if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
-    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
-  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues]);
   const segmentsFromElements = (0, import_react3.useMemo)(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -2109,6 +2126,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!isDynamicCropEnabled(props.dynamicCrop)) {
+    console.log("[calculateMetadata] Dynamic crop not enabled, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  console.log("[calculateMetadata] Dynamic crop enabled, loading fonts for accurate measurement...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = calculateCropBounds(
+    resolvedElements,
+    props.dynamicCrop,
+    canvasWidth,
+    canvasHeight,
+    props.textValues
+  );
+  const outputWidth = Math.round(cropBounds.width);
+  const outputHeight = Math.round(cropBounds.height);
+  console.log(`[calculateMetadata] Crop bounds calculated: ${canvasWidth}x${canvasHeight} -> ${outputWidth}x${outputHeight} (offset: ${cropBounds.x}, ${cropBounds.y})`);
+  return {
+    width: outputWidth,
+    height: outputHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -2116,8 +2182,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/dist/index.mjs

@@ -1081,7 +1081,16 @@ function getReferenceElementY(elements, elementId) {
 }
 
 // src/utils/cropBounds.ts
-function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
+function getActualElementHeight(elem, textValues, measureCtx) {
+  if (elem.type !== "text") return elem.height;
+  let textContent = elem.text ?? "Text";
+  if (elem.textInputId && textValues?.[elem.textInputId]) {
+    textContent = textValues[elem.textInputId];
+  }
+  const result = calculateAutoWidthDimensions(elem, textContent, measureCtx);
+  return result?.actualHeight ?? elem.height;
+}
+function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight, textValues) {
   if (!dynamicCrop) {
     return { x: 0, y: 0, width: canvasWidth, height: canvasHeight };
   }
@@ -1094,6 +1103,12 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
     if (boundary.elementId) return boundary.elementId;
     return void 0;
   };
+  let measureCtx = null;
+  const hasTextElements = elements.some((e) => e.type === "text");
+  if (hasTextElements && typeof document !== "undefined") {
+    const canvas = document.createElement("canvas");
+    measureCtx = canvas.getContext("2d");
+  }
   let cropY = 0;
   let cropHeight = canvasHeight;
   if (dynamicCrop.vertical?.enabled) {
@@ -1104,8 +1119,9 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       let minY = canvasHeight;
       let maxY = 0;
       for (const elem of elements) {
+        const actualHeight = getActualElementHeight(elem, textValues, measureCtx);
         minY = Math.min(minY, elem.y);
-        maxY = Math.max(maxY, elem.y + elem.height);
+        maxY = Math.max(maxY, elem.y + actualHeight);
       }
       if (elements.length > 0) {
         cropY = Math.max(0, minY - paddingStart);
@@ -1126,7 +1142,8 @@ function calculateCropBounds(elements, dynamicCrop, canvasWidth, canvasHeight) {
       if (endElementId) {
         const endElem = elementMap.get(endElementId);
         if (endElem) {
-          bottomY = endElem.y + endElem.height;
+          const actualHeight = getActualElementHeight(endElem, textValues, measureCtx);
+          bottomY = endElem.y + actualHeight;
         }
       }
       cropY = Math.max(0, topY - paddingStart);
@@ -1360,8 +1377,8 @@ function ImageEditorComposition({
   }, [elements, textValues]);
   const cropBounds = useMemo3(() => {
     if (!isDynamicCropEnabled(dynamicCrop) || !resolvedElements) return null;
-    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight);
-  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight]);
+    return calculateCropBounds(resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues);
+  }, [resolvedElements, dynamicCrop, canvasWidth, canvasHeight, textValues]);
   const segmentsFromElements = useMemo3(() => {
     if (!resolvedElements) return null;
     const segments = [];
@@ -2023,6 +2040,55 @@ var defaultVideoProps = {
 };
 var ImageComp = ImageEditorComposition;
 var VideoComp = VideoEditorComposition;
+var calculateImageMetadata = async ({ props }) => {
+  console.log("[calculateMetadata] Starting metadata calculation...");
+  const canvasWidth = props.width ?? props.config?.width ?? 1080;
+  const canvasHeight = props.height ?? props.config?.height ?? 1920;
+  const defaultResult = {
+    width: canvasWidth,
+    height: canvasHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+  if (!props.elements || !props.dynamicCrop) {
+    console.log("[calculateMetadata] No elements or dynamicCrop, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  if (!isDynamicCropEnabled(props.dynamicCrop)) {
+    console.log("[calculateMetadata] Dynamic crop not enabled, using default dimensions:", canvasWidth, "x", canvasHeight);
+    return defaultResult;
+  }
+  console.log("[calculateMetadata] Dynamic crop enabled, loading fonts for accurate measurement...");
+  try {
+    await preloadFonts();
+    console.log("[calculateMetadata] Fonts loaded successfully");
+  } catch (err) {
+    console.error("[calculateMetadata] Font loading failed:", err);
+  }
+  await new Promise((resolve) => setTimeout(resolve, 50));
+  console.log("[calculateMetadata] Resolving element positions with DOM measurement...");
+  const { elements: resolvedElements } = resolveElementPositions(
+    props.elements,
+    props.textValues ?? {}
+  );
+  console.log("[calculateMetadata] Element positions resolved");
+  const cropBounds = calculateCropBounds(
+    resolvedElements,
+    props.dynamicCrop,
+    canvasWidth,
+    canvasHeight,
+    props.textValues
+  );
+  const outputWidth = Math.round(cropBounds.width);
+  const outputHeight = Math.round(cropBounds.height);
+  console.log(`[calculateMetadata] Crop bounds calculated: ${canvasWidth}x${canvasHeight} -> ${outputWidth}x${outputHeight} (offset: ${cropBounds.x}, ${cropBounds.y})`);
+  return {
+    width: outputWidth,
+    height: outputHeight,
+    fps: 30,
+    durationInFrames: 1
+  };
+};
 var RenderRoot = () => {
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
     /* @__PURE__ */ jsx6(
@@ -2030,8 +2096,9 @@ var RenderRoot = () => {
       {
         id: "ImageEditorComposition",
         component: ImageComp,
+        calculateMetadata: calculateImageMetadata,
         durationInFrames: 1,
-        fps: 1,
+        fps: 30,
         width: 1080,
         height: 1920,
         defaultProps: defaultImageProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.24",
+  "version": "1.5.26",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",