@microlee666/dom-to-pptx 1.1.4 → 1.1.6

package/src/utils.js

@@ -109,6 +109,7 @@ export function extractTableData(node, scale, options = {}) {
           bold: textStyle.bold,
           italic: textStyle.italic,
           underline: textStyle.underline,
+          lang: 'zh-CN',
 
           fill: fill,
           align: align,
@@ -183,11 +184,11 @@ export function getGradientFallbackColor(bgImage) {
   // 3. Find first part that is a color (skip angle/direction)
   for (const part of parts) {
     // Ignore directions (to right) or angles (90deg, 0.5turn)
-    if (/^(to\s|[\d\.]+(deg|rad|turn|grad))/.test(part)) continue;
+    if (/^(to\s|[\d.]+(deg|rad|turn|grad))/.test(part)) continue;
 
     // Extract color: Remove trailing position (e.g. "red 50%" -> "red")
     // Regex matches whitespace + number + unit at end of string
-    const colorPart = part.replace(/\s+(-?[\d\.]+(%|px|em|rem|ch|vh|vw)?)$/, '');
+    const colorPart = part.replace(/\s+(-?[\d.]+(%|px|em|rem|ch|vh|vw)?)$/, '');
 
     // Check if it's not just a number (some gradients might have bare numbers? unlikely in standard syntax)
     if (colorPart) return colorPart;
@@ -458,6 +459,214 @@ export function parseColor(str) {
   return { hex, opacity: a };
 }
 
+const SUPPORTED_CHART_TYPES = new Set(['area', 'bar', 'line', 'pie', 'doughnut', 'radar', 'scatter']);
+const CHART_TYPE_ALIASES = {
+  column: 'bar',
+  columnbar: 'bar',
+  column3d: 'bar',
+  bar3d: 'bar',
+  donut: 'doughnut',
+  ring: 'doughnut',
+};
+
+function normalizeLegendPos(value) {
+  if (!value) return null;
+  const normalized = value.toString().toLowerCase().replace(/[^a-z]/g, '');
+  if (normalized === 'tr' || normalized === 'topright') return 'tr';
+  if (normalized === 'top') return 't';
+  if (normalized === 'bottom') return 'b';
+  if (normalized === 'left') return 'l';
+  if (normalized === 'right') return 'r';
+  return null;
+}
+
+function normalizeChartType(value) {
+  if (!value) return null;
+  const raw = value.toString().trim().toLowerCase();
+  const alias = CHART_TYPE_ALIASES[raw];
+  const candidate = alias || raw;
+  return SUPPORTED_CHART_TYPES.has(candidate) ? candidate : null;
+}
+
+function colorToHex(value) {
+  const parsed = parseColor(value);
+  return parsed.hex || null;
+}
+
+function resolveChartElement(root, config) {
+  if (!config) return null;
+  if (config.element instanceof HTMLElement) return config.element;
+  if (typeof config.element === 'function') return config.element(root);
+  if (typeof config.selector === 'string') {
+    return root.querySelector(config.selector);
+  }
+  return null;
+}
+
+function buildSeriesFromSource(source = {}) {
+  const fallbackLabels = Array.isArray(source.labels) ? source.labels : [];
+  const candidateDatasets = Array.isArray(source.datasets) ? source.datasets : [];
+  const series = [];
+
+  candidateDatasets.forEach((dataset, index) => {
+    if (!dataset) return;
+    const values = Array.isArray(dataset.values)
+      ? dataset.values
+      : Array.isArray(dataset.data)
+        ? dataset.data
+        : [];
+
+    if (!values.length) return;
+
+    const record = {
+      name: dataset.name || dataset.label || `Series ${index + 1}`,
+      values,
+    };
+
+    if (Array.isArray(dataset.labels) && dataset.labels.length === values.length) {
+      record.labels = dataset.labels;
+    } else if (fallbackLabels.length === values.length) {
+      record.labels = fallbackLabels;
+    }
+
+    if (Array.isArray(dataset.sizes) && dataset.sizes.length === values.length) {
+      record.sizes = dataset.sizes;
+    }
+
+    // Chart.js often provides strings/arrays in backgroundColor
+    const candidateColor =
+      dataset.color || dataset.backgroundColor || dataset.borderColor || dataset.fillColor;
+    if (candidateColor) {
+      if (Array.isArray(candidateColor)) {
+        record.color = candidateColor[0];
+      } else {
+        record.color = candidateColor;
+      }
+    }
+
+    series.push(record);
+  });
+
+  if (!series.length) {
+    const fallbackValues = Array.isArray(source.values)
+      ? source.values
+      : Array.isArray(source.data)
+        ? source.data
+        : [];
+
+    if (fallbackValues.length) {
+      const fallbackRecord = {
+        name: source.name || source.label || 'Series 1',
+        values: fallbackValues,
+      };
+      if (Array.isArray(source.labels) && source.labels.length === fallbackValues.length) {
+        fallbackRecord.labels = source.labels;
+      } else if (fallbackLabels.length === fallbackValues.length) {
+        fallbackRecord.labels = fallbackLabels;
+      }
+      if (Array.isArray(source.sizes) && source.sizes.length === fallbackValues.length) {
+        fallbackRecord.sizes = source.sizes;
+      }
+      if (source.color) {
+        fallbackRecord.color = source.color;
+      }
+      series.push(fallbackRecord);
+    }
+  }
+
+  return series;
+}
+
+function buildChartOptions(raw, derivedColors) {
+  const opts = { ...((raw && raw.chartOptions) || {}) };
+  if (raw && raw.showLegend !== undefined) opts.showLegend = raw.showLegend;
+  if (raw) {
+    const legendTarget = raw.legendPos || raw.legendPosition;
+    const normalizedLegend = normalizeLegendPos(legendTarget);
+    if (normalizedLegend) opts.legendPos = normalizedLegend;
+  }
+  if (raw && raw.title) opts.title = raw.title;
+  if (raw && raw.altText) opts.altText = raw.altText;
+  if (raw && raw.showDataTable !== undefined) opts.showDataTable = raw.showDataTable;
+  if (raw && raw.chartColorsOpacity !== undefined) opts.chartColorsOpacity = raw.chartColorsOpacity;
+  if (raw && raw.showLabel !== undefined) opts.showLabel = raw.showLabel;
+
+  const paletteFromConfig =
+    raw && Array.isArray(raw.chartColors) ? raw.chartColors.map(colorToHex).filter(Boolean) : [];
+  const palette = paletteFromConfig.length ? paletteFromConfig : derivedColors;
+  if (palette.length && !opts.chartColors) {
+    opts.chartColors = palette;
+  }
+
+  return opts;
+}
+
+function normalizeChartConfig(raw) {
+  if (!raw) return null;
+  const chartType = normalizeChartType(raw.chartType || raw.type || raw.chart);
+  if (!chartType) return null;
+
+  let seriesWithColor = [];
+  if (Array.isArray(raw.chartData) && raw.chartData.length) {
+    seriesWithColor = raw.chartData
+      .map((entry, index) => {
+        if (!entry || !Array.isArray(entry.values)) return null;
+        return {
+          ...entry,
+          name: entry.name || entry.label || `Series ${index + 1}`,
+        };
+      })
+      .filter((entry) => entry && entry.values && entry.values.length);
+  } else {
+    const source = {
+      labels: raw.data?.labels || raw.labels,
+      datasets: Array.isArray(raw.data?.datasets)
+        ? raw.data.datasets
+        : Array.isArray(raw.datasets)
+          ? raw.datasets
+          : [],
+      values: raw.data?.values || raw.values,
+      data: raw.data?.data,
+      name: raw.name,
+      label: raw.label,
+      color: raw.color,
+      sizes: raw.data?.sizes || raw.sizes,
+    };
+    seriesWithColor = buildSeriesFromSource(source);
+  }
+
+  if (!seriesWithColor.length) return null;
+
+  const derivedColors = seriesWithColor
+    .map((dataset) => dataset.color)
+    .map(colorToHex)
+    .filter(Boolean);
+
+  const chartOptions = buildChartOptions(raw, derivedColors);
+  const chartData = seriesWithColor.map(({ color, ...rest }) => rest);
+
+  return {
+    chartType,
+    chartData,
+    chartOptions,
+  };
+}
+
+export function buildChartRegistry(root, chartConfigs = []) {
+  const registry = new Map();
+  if (!root || !Array.isArray(chartConfigs)) return registry;
+
+  chartConfigs.forEach((config) => {
+    const node = resolveChartElement(root, config);
+    if (!node) return;
+    const normalized = normalizeChartConfig(config);
+    if (!normalized || !normalized.chartData || !normalized.chartData.length) return;
+    registry.set(node, normalized);
+  });
+
+  return registry;
+}
+
 export function getPadding(style, scale) {
   const pxToInch = 1 / 96;
   return [
@@ -476,6 +685,8 @@ export function getSoftEdges(filterStr, scale) {
 }
 
 const DEFAULT_CJK_FONTS = [
+  'Heiti TC',
+  'Heiti SC',
   'PingFang SC',
   'Hiragino Sans GB',
   'Microsoft YaHei',
@@ -527,7 +738,7 @@ function pickFontFace(fontFamily, text, options) {
   }
 
   const autoMatch = DEFAULT_CJK_FONTS.find((f) => lowered.includes(f.toLowerCase()));
-  return autoMatch || primary;
+  return autoMatch || 'Heiti TC';
 }
 
 export function getTextStyle(style, scale, text = '', options = {}) {
@@ -558,6 +769,9 @@ export function getTextStyle(style, scale, text = '', options = {}) {
       // And apply the global layout scale.
       lineSpacing = lhPx * 0.75 * scale;
     }
+  } else {
+    // Default line height when 'normal' - use 1.2 multiplier to match browser default
+    lineSpacing = fontSizePx * 1.2 * 0.75 * scale;
   }
 
   // --- Spacing (Margins) ---
@@ -576,10 +790,11 @@ export function getTextStyle(style, scale, text = '', options = {}) {
   return {
     color: colorObj.hex || '000000',
     fontFace: fontFace,
-    fontSize: Math.floor(fontSizePx * 0.75 * scale),
+    fontSize: Math.max(8, Math.floor(fontSizePx * 0.75 * scale)),
     bold: parseInt(style.fontWeight) >= 600,
     italic: style.fontStyle === 'italic',
     underline: style.textDecoration.includes('underline'),
+    lang: 'zh-CN',
     // Only add if we have a valid value
     ...(lineSpacing && { lineSpacing }),
     ...(paraSpaceBefore > 0 && { paraSpaceBefore }),
@@ -592,6 +807,7 @@ export function getTextStyle(style, scale, text = '', options = {}) {
 /**
  * Determines if a given DOM node is primarily a text container.
  * Updated to correctly reject Icon elements so they are rendered as images.
+ * Also rejects flex/grid containers with distributed children (space-between/around/evenly).
  */
 export function isTextContainer(node) {
   const hasText = node.textContent.trim().length > 0;
@@ -600,6 +816,26 @@ export function isTextContainer(node) {
   const children = Array.from(node.children);
   if (children.length === 0) return true;
 
+  // Check if parent is a flex/grid container with special layout
+  // In such cases, children should be treated as separate elements
+  const parentStyle = window.getComputedStyle(node);
+  const display = parentStyle.display;
+  const justifyContent = parentStyle.justifyContent || '';
+  const alignItems = parentStyle.alignItems || '';
+
+  // If parent uses flex/grid with space distribution, don't treat as text container
+  if ((display.includes('flex') || display.includes('grid')) &&
+      (justifyContent.includes('space-between') ||
+       justifyContent.includes('space-around') ||
+       justifyContent.includes('space-evenly'))) {
+    return false;
+  }
+
+  // Note: We don't skip text container for align-items: center here.
+  // The valign inheritance is handled in prepareRenderItem with single-child check.
+  // This allows elements like "密钥状态流转" to properly inherit center alignment
+  // while preventing STEP 1/2/3 from being incorrectly centered.
+
   const isSafeInline = (el) => {
     // 1. Reject Web Components / Custom Elements
     if (el.tagName.includes('-')) return false;