@json-to-office/core-docx 0.15.0 → 0.16.0

package/dist/plugin/example/index.js

@@ -2038,7 +2038,8 @@ import {
   isTableComponent,
   isListComponent,
   isTocComponent,
-  isHighchartsComponent
+  isHighchartsComponent,
+  isVisualComponent
 } from "@json-to-office/shared-docx";
 
 // src/utils/formatters.ts
@@ -2131,6 +2132,9 @@ function resolveListProps(props, theme) {
 function resolveHighchartsProps(props, _theme) {
   return props;
 }
+function resolveVisualProps(props, _theme) {
+  return props;
+}
 function getCustomComponentDefaults(theme, componentName) {
   const defaults = getComponentDefaults(theme);
   return defaults?.[componentName] || {};
@@ -2160,7 +2164,8 @@ var RESOLVER_MAP = {
   section: resolveSectionProps,
   columns: resolveColumnsProps,
   list: resolveListProps,
-  highcharts: resolveHighchartsProps
+  highcharts: resolveHighchartsProps,
+  visual: resolveVisualProps
 };
 function resolveComponentDefaults(component, theme) {
   if (!component.props) return component;
@@ -4141,7 +4146,7 @@ function initializeComponentCache(cache) {
   }
 }
 async function renderComponentWithCache(component, theme, themeName, context, bypassCache = false) {
-  const forceBypassForType = component.name === "toc" || component.name === "section" || componentHasRevision(component);
+  const forceBypassForType = component.name === "toc" || component.name === "section" || component.name === "visual" || componentHasRevision(component);
   if (!componentCache) {
     initializeComponentCache();
   }
@@ -6393,21 +6398,61 @@ function isNodeEnvironment() {
   return typeof process !== "undefined" && process.versions != null && process.versions.node != null && typeof process.versions.node === "string";
 }
 
+// src/utils/serviceClient.ts
+var DEFAULT_TIMEOUT_MS = 3e4;
+function resolveServiceUrl(propsUrl, servicesUrl, defaultUrl) {
+  const raw = (propsUrl || servicesUrl || defaultUrl).trim();
+  const withScheme = /^https?:\/\//i.test(raw) ? raw : `http://${raw}`;
+  return withScheme.replace(/\/+$/, "");
+}
+async function postJsonToService(opts) {
+  const resolvedHeaders = typeof opts.headers === "function" ? await opts.headers(opts.body) : opts.headers;
+  const headers = {
+    "Content-Type": "application/json",
+    ...resolvedHeaders
+  };
+  const timeoutMs = opts.timeoutMs ?? DEFAULT_TIMEOUT_MS;
+  const controller = new AbortController();
+  const timer = setTimeout(() => controller.abort(), timeoutMs);
+  let response;
+  try {
+    response = await fetch(`${opts.url}${opts.path}`, {
+      method: "POST",
+      headers,
+      body: JSON.stringify(opts.body),
+      signal: controller.signal
+    });
+  } catch (error) {
+    if (error?.name === "AbortError") {
+      throw new Error(
+        `${opts.serviceLabel} timed out after ${timeoutMs}ms at ${opts.url}.`
+      );
+    }
+    const cause = error instanceof Error ? error.message : String(error);
+    throw new Error(opts.onUnreachable(opts.url, cause));
+  } finally {
+    clearTimeout(timer);
+  }
+  if (!response.ok) {
+    throw new Error(
+      `${opts.serviceLabel} returned ${response.status}: ${response.statusText}`
+    );
+  }
+  return response;
+}
+
 // src/components/highcharts.ts
 var DEFAULT_EXPORT_SERVER_URL = "http://localhost:7801";
-function getExportServerUrl(propsUrl, servicesUrl) {
-  const raw = propsUrl || servicesUrl || DEFAULT_EXPORT_SERVER_URL;
-  return raw.startsWith("http") ? raw : `http://${raw}`;
-}
 async function generateChart(config, servicesConfig) {
   if (!isNodeEnvironment()) {
     throw new Error(
       "Highcharts export server requires a Node.js environment. Chart generation is not available in browser environments."
     );
   }
-  const serverUrl = getExportServerUrl(
+  const serverUrl = resolveServiceUrl(
     config.serverUrl,
-    servicesConfig?.serverUrl
+    servicesConfig?.serverUrl,
+    DEFAULT_EXPORT_SERVER_URL
   );
   const requestBody = {
     infile: config.options,
@@ -6415,26 +6460,15 @@ async function generateChart(config, servicesConfig) {
     b64: true,
     scale: config.scale
   };
-  const resolvedHeaders = typeof servicesConfig?.headers === "function" ? await servicesConfig.headers(requestBody) : servicesConfig?.headers;
-  const headers = {
-    "Content-Type": "application/json",
-    ...resolvedHeaders
-  };
-  const response = await fetch(`${serverUrl}/export`, {
-    method: "POST",
-    headers,
-    body: JSON.stringify(requestBody)
-  }).catch((error) => {
-    throw new Error(
-      `Highcharts Export Server is not running at ${serverUrl}. Start it with: npx highcharts-export-server --enableServer true
-Cause: ${error instanceof Error ? error.message : String(error)}`
-    );
+  const response = await postJsonToService({
+    url: serverUrl,
+    path: "/export",
+    body: requestBody,
+    headers: servicesConfig?.headers,
+    serviceLabel: "Highcharts export server",
+    onUnreachable: (url, cause) => `Highcharts Export Server is not running at ${url}. Start it with: npx highcharts-export-server --enableServer true
+Cause: ${cause}`
   });
-  if (!response.ok) {
-    throw new Error(
-      `Highcharts export server returned ${response.status}: ${response.statusText}`
-    );
-  }
   const base64Data = await response.text();
   const base64DataUri = `data:image/png;base64,${base64Data}`;
   const width = config.options.chart.width;
@@ -6468,6 +6502,109 @@ async function renderHighchartsComponent(component, theme, themeName, context) {
   return imageParagraphs;
 }
 
+// src/components/visual.ts
+import {
+  clampVisualDpi,
+  DEFAULT_VISUAL_DPI
+} from "@json-to-office/shared";
+var DEFAULT_RASTERIZE_SERVER_URL = "http://localhost:7802";
+var PIXELS_PER_INCH = 96;
+function buildVisualPresentation(props) {
+  const { canvas, elements } = props;
+  const presentationProps = {
+    slideWidth: canvas.width,
+    slideHeight: canvas.height
+  };
+  if (canvas.theme) presentationProps.theme = canvas.theme;
+  const slideProps = {};
+  if (canvas.background) slideProps.background = canvas.background;
+  return {
+    name: "pptx",
+    props: presentationProps,
+    children: [
+      {
+        name: "slide",
+        props: slideProps,
+        children: elements ?? []
+      }
+    ]
+  };
+}
+function defaultVisualWidthPx(props) {
+  return Math.round(props.canvas.width * PIXELS_PER_INCH);
+}
+function visualToImageOptions(props) {
+  return {
+    width: props.width ?? defaultVisualWidthPx(props),
+    ...props.height !== void 0 && { height: props.height },
+    alignment: props.alignment ?? "center",
+    ...props.caption !== void 0 && { caption: props.caption },
+    ...props.spacing !== void 0 && { spacing: props.spacing },
+    ...props.floating !== void 0 && { floating: props.floating },
+    ...props.keepNext !== void 0 && { keepNext: props.keepNext },
+    ...props.keepLines !== void 0 && { keepLines: props.keepLines }
+  };
+}
+async function rasterize(presentation, dpi, propsServerUrl, serviceConfig) {
+  if (!isNodeEnvironment()) {
+    throw new Error(
+      "Visual rasterization requires a Node.js environment. It is not available in browser environments."
+    );
+  }
+  if (serviceConfig?.render) {
+    return serviceConfig.render({ presentation, dpi });
+  }
+  const serverUrl = resolveServiceUrl(
+    propsServerUrl,
+    serviceConfig?.serverUrl,
+    DEFAULT_RASTERIZE_SERVER_URL
+  );
+  const response = await postJsonToService({
+    url: serverUrl,
+    path: "/rasterize",
+    body: { presentation, dpi },
+    headers: serviceConfig?.headers,
+    serviceLabel: "PPTX rasterization service",
+    onUnreachable: (url, cause) => `PPTX rasterization service is not reachable at ${url}. Configure services.pptx with a \`render\` callback or a running \`serverUrl\`.
+Cause: ${cause}`
+  });
+  let result;
+  try {
+    result = await response.json();
+  } catch {
+    throw new Error(
+      "PPTX rasterization service returned a non-JSON response (expected { base64DataUri, width, height })."
+    );
+  }
+  if (!result?.base64DataUri) {
+    throw new Error(
+      "PPTX rasterization service returned a malformed response (missing base64DataUri)."
+    );
+  }
+  return result;
+}
+async function renderVisualComponent(component, theme, themeName, context) {
+  if (!isVisualComponent(component)) return [];
+  const props = component.props;
+  const serviceConfig = context?.services?.pptx;
+  const presentation = buildVisualPresentation(props);
+  const dpi = clampVisualDpi(
+    props.dpi ?? serviceConfig?.dpi ?? DEFAULT_VISUAL_DPI
+  );
+  const result = await rasterize(
+    presentation,
+    dpi,
+    props.serverUrl,
+    serviceConfig
+  );
+  return await createImage(
+    result.base64DataUri,
+    theme,
+    themeName,
+    visualToImageOptions(props)
+  );
+}
+
 // src/components/text-space-after.ts
 import { Type as Type2 } from "@sinclair/typebox";
 
@@ -6624,7 +6761,7 @@ async function renderDocument(structure, layout, options) {
     }
   });
 }
-async function renderHeaderFooterComponents(components, theme, themeName, _context) {
+async function renderHeaderFooterComponents(components, theme, themeName, context) {
   if (!components || components.length === 0) {
     return [];
   }
@@ -6756,6 +6893,14 @@ async function renderHeaderFooterComponents(components, theme, themeName, _conte
     } else if (isTableComponent(component)) {
       const tables = await renderTableComponent(component, theme, themeName);
       elements.push(...tables);
+    } else if (isVisualComponent(component)) {
+      const visualEls = await renderVisualComponent(
+        component,
+        theme,
+        themeName,
+        context
+      );
+      elements.push(...visualEls);
     }
   }
   return elements;
@@ -6876,6 +7021,8 @@ async function renderComponent(component, theme, themeName, context) {
       themeName,
       context
     );
+  } else if (isVisualComponent(component)) {
+    return await renderVisualComponent(component, theme, themeName, context);
   } else if (isSectionComponent(component)) {
     return await renderSectionComponent(component, theme, themeName, context);
   }