pptxtojson-pro 0.1.0

package/src/serializer/backgroundSerializer.ts

@@ -0,0 +1,143 @@
+/**
+ * Background serializer — resolves and applies slide/layout/master backgrounds.
+ */
+
+import type { SafeXmlNode } from '../parser/XmlParser';
+import type { RenderContext } from './RenderContext';
+import { resolveColor, resolveGradientFill } from './StyleResolver';
+import { hexToRgb, rgbToHex } from '../utils/color';
+import type { RelEntry } from '../parser/RelParser';
+import { encodeMediaForWebDisplay } from '../utils/mediaWebConvert';
+import { gradientFillDataToValue } from './fillMapper';
+import type { Fill } from '../adapter/types';
+import { resolveMediaPath } from '../utils/media';
+
+function defaultFill(): Fill {
+  return { type: 'color', value: '#ffffff' };
+}
+
+/** Same formula as BackgroundRenderer.compositeOnWhite → opaque hex for JSON. */
+function compositeOnWhiteToHex(r: number, g: number, b: number, a: number): string {
+  const cr = Math.round(r * a + 255 * (1 - a));
+  const cg = Math.round(g * a + 255 * (1 - a));
+  const cb = Math.round(b * a + 255 * (1 - a));
+  return rgbToHex(cr, cg, cb);
+}
+
+/**
+ * Resolve slide fill
+ * 
+ * Background priority: slide.background -> layout.background -> master.background.
+ * The first found background is used.
+ */
+export function resolveSlideFill(ctx: RenderContext): Fill {
+  // Find the first available background in the inheritance chain,
+  // and track which rels map to use for resolving image references
+  let bgNode: SafeXmlNode | undefined;
+  let bgRels: Map<string, RelEntry> = ctx.slide.rels;
+
+  if (ctx.slide.background?.exists()) {
+    bgNode = ctx.slide.background;
+    bgRels = ctx.slide.rels;
+  } else if (ctx.layout.background?.exists()) {
+    bgNode = ctx.layout.background;
+    bgRels = ctx.layout.rels;
+  } else if (ctx.master.background?.exists()) {
+    bgNode = ctx.master.background;
+    bgRels = ctx.master.rels;
+  }
+
+  if (!bgNode?.exists()) return defaultFill();
+
+  // Parse p:bg > p:bgPr
+  const bgPr = bgNode.child('bgPr');
+  if (bgPr.exists()) {
+    return renderBgPr(bgPr, ctx, bgRels);
+  }
+
+  // Parse p:bg > p:bgRef (theme reference)
+  const bgRef = bgNode.child('bgRef');
+  if (bgRef.exists()) {
+    return renderBgRef(bgRef, ctx);
+  }
+
+  return defaultFill();
+}
+
+/**
+ * Render background from bgPr (background properties).
+ * Contains direct fill definitions: solidFill, gradFill, blipFill, etc.
+ */
+export function renderBgPr(bgPr: SafeXmlNode, ctx: RenderContext, rels?: Map<string, RelEntry>): Fill {
+  // solidFill
+  const solidFill = bgPr.child('solidFill');
+  if (solidFill.exists()) {
+    const { color, alpha } = resolveColor(solidFill, ctx);
+    const hex = color.startsWith('#') ? color : `#${color}`;
+    if (alpha < 1) {
+      const { r, g, b } = hexToRgb(hex);
+      return { type: 'color', value: compositeOnWhiteToHex(r, g, b, alpha) };
+    } else {
+      return { type: 'color', value: hex };
+    }
+  }
+
+  // gradFill
+  const gradFill = bgPr.child('gradFill');
+  if (gradFill.exists()) {
+    const data = resolveGradientFill(bgPr, ctx);
+    if (data) {
+      return { type: 'gradient', value: gradientFillDataToValue(data) };
+    }
+    return defaultFill();
+  }
+
+  // blipFill (image background)
+  const blipFill = bgPr.child('blipFill');
+  if (blipFill.exists()) {
+    const blip = blipFill.child('blip');
+    const embedId = blip.attr('embed') ?? blip.attr('r:embed');
+    if (embedId) {
+      const relsMap = rels ?? ctx.slide.rels;
+      const rel = relsMap.get(embedId);
+      if (rel) {
+        const mediaPath = resolveMediaPath(rel.target);
+        const data = ctx.presentation.media.get(mediaPath);
+        if (data) {
+          const picBase64 = encodeMediaForWebDisplay(mediaPath, data);
+          // TODO: get opacity from alphaModFix
+          return {
+            type: 'image',
+            value: { picBase64, opacity: 1 },
+          };
+        }
+      }
+    }
+    return defaultFill();
+  }
+
+  const noFill = bgPr.child('noFill');
+  if (noFill.exists()) {
+    return defaultFill();
+  }
+
+  return defaultFill();
+}
+
+/**
+ * Render background from bgRef (theme format scheme reference).
+ * Simplified: just resolve the color from the reference.
+ */
+export function renderBgRef(bgRef: SafeXmlNode, ctx: RenderContext): Fill {
+  // bgRef may contain a color child (schemeClr, srgbClr, etc.)
+  const { color, alpha } = resolveColor(bgRef, ctx);
+  if (color && color !== '#000000') {
+    const hex = color.startsWith('#') ? color : `#${color}`;
+    if (alpha < 1) {
+      const { r, g, b } = hexToRgb(hex);
+      return { type: 'color', value: compositeOnWhiteToHex(r, g, b, alpha) };
+    }
+    return { type: 'color', value: hex };
+  }
+  return defaultFill();
+}

package/src/serializer/borderMapper.ts

@@ -0,0 +1,93 @@
+/**
+ * Maps StyleResolver line style to pptxtojson Border + borderStrokeDasharray.
+ */
+
+import type { SafeXmlNode } from '../parser/XmlParser';
+import type { RenderContext } from './RenderContext';
+import { resolveLineStyle } from './StyleResolver';
+import type { Border } from '../adapter/types';
+
+const PX_TO_PT = 0.75;
+
+/**
+ * Compute SVG-style dash array string from OOXML dash kind and stroke width (px).
+ * Matches ShapeRenderer's svgDashArrayForKind logic for consistent output.
+ */
+export function dashArrayForKind(dashKind: string, strokeWidthPx: number): string {
+  const w = Math.max(strokeWidthPx, 1);
+  switch (dashKind) {
+    case 'dot':
+    case 'sysDot':
+      return `${w},${w * 2}`;
+    case 'dash':
+    case 'sysDash':
+      return `${w * 4},${w * 2}`;
+    case 'lgDash':
+      return `${w * 8},${w * 3}`;
+    case 'dashDot':
+    case 'sysDashDot':
+      return `${w * 4},${w * 2},${w},${w * 2}`;
+    case 'lgDashDot':
+      return `${w * 8},${w * 3},${w},${w * 3}`;
+    case 'lgDashDotDot':
+    case 'sysDashDotDot':
+      return `${w * 8},${w * 3},${w},${w * 2},${w},${w * 2}`;
+    default:
+      return '';
+  }
+}
+
+/**
+ * Map OOXML dash kind to types.Border.borderType.
+ */
+function dashKindToBorderType(dashKind: string): Border['borderType'] {
+  switch (dashKind) {
+    case 'dot':
+    case 'sysDot':
+      return 'dotted';
+    case 'dash':
+    case 'sysDash':
+    case 'lgDash':
+    case 'dashDot':
+    case 'lgDashDot':
+    case 'lgDashDotDot':
+    case 'sysDashDot':
+    case 'sysDashDotDot':
+      return 'dashed';
+    default:
+      return 'solid';
+  }
+}
+
+function ensureHex(color: string): string {
+  const s = color.trim();
+  if (s === 'transparent') return '#000000';
+  if (s.startsWith('#')) return s;
+  return `#${s}`;
+}
+
+export interface BorderResult {
+  border: Border;
+  borderStrokeDasharray: string;
+}
+
+/**
+ * Resolve ln (a:ln) node to types.Border and borderStrokeDasharray.
+ * Width from resolveLineStyle is in px; we convert to pt for output.
+ */
+export function lineStyleToBorder(
+  ln: SafeXmlNode,
+  ctx: RenderContext,
+  lnRef?: SafeXmlNode,
+): BorderResult {
+  const { width: widthPx, color, dashKind } = resolveLineStyle(ln, ctx, lnRef);
+  const borderWidthPt = widthPx * PX_TO_PT;
+  return {
+    border: {
+      borderColor: ensureHex(color),
+      borderWidth: borderWidthPt,
+      borderType: dashKindToBorderType(dashKind),
+    },
+    borderStrokeDasharray: dashArrayForKind(dashKind, widthPx),
+  };
+}

package/src/serializer/chartSerializer.ts

@@ -0,0 +1,97 @@
+/**
+ * Serializes ChartNodeData to pptxtojson CommonChart or ScatterChart.
+ * Reads chart XML from presentation.charts; extracts chartType and minimal data.
+ */
+
+import type { ChartNodeData } from '../model/nodes/ChartNode';
+import type { RenderContext } from './RenderContext';
+import type { ChartType, CommonChart, ScatterChart, ChartItem, ChartValue } from '../adapter/types';
+
+const PX_TO_PT = 0.75;
+
+function pxToPt(px: number): number {
+  return px * PX_TO_PT;
+}
+
+const OOXML_CHART_TYPES: string[] = [
+  'lineChart', 'line3DChart', 'barChart', 'bar3DChart', 'pieChart', 'pie3DChart',
+  'doughnutChart', 'areaChart', 'area3DChart', 'scatterChart', 'bubbleChart',
+  'radarChart', 'stockChart', 'surfaceChart', 'surface3DChart',
+];
+
+function mapToChartType(ooxmlName: string): ChartType {
+  const t = ooxmlName as ChartType;
+  if (['scatterChart', 'bubbleChart'].includes(ooxmlName)) return t;
+  if (['lineChart', 'line3DChart', 'barChart', 'bar3DChart', 'pieChart', 'pie3DChart',
+    'doughnutChart', 'areaChart', 'area3DChart', 'radarChart', 'stockChart', 'surfaceChart', 'surface3DChart'].includes(ooxmlName)) {
+    return t;
+  }
+  return 'barChart';
+}
+
+/**
+ * Get theme accent colors for chart (hex strings).
+ */
+function getThemeColors(ctx: RenderContext): string[] {
+  const colors: string[] = [];
+  for (let i = 1; i <= 6; i++) {
+    const hex = ctx.theme.colorScheme.get(`accent${i}`) ?? '000000';
+    colors.push(hex.startsWith('#') ? hex : `#${hex}`);
+  }
+  return colors;
+}
+
+/**
+ * Serialize chart node to Chart element.
+ * Uses chart XML from presentation.charts for chartType; data/colors minimal.
+ */
+export function chartToElement(
+  node: ChartNodeData,
+  ctx: RenderContext,
+  order: number,
+): CommonChart | ScatterChart {
+  const left = pxToPt(node.position.x);
+  const top = pxToPt(node.position.y);
+  const width = pxToPt(node.size.w);
+  const height = pxToPt(node.size.h);
+  const chartRoot = ctx.presentation.charts.get(node.chartPath);
+  let chartType: ChartType = 'barChart';
+  if (chartRoot?.exists()) {
+    const chart = chartRoot.child('chart');
+    const plotArea = chart.exists() ? chart.child('plotArea') : chartRoot.child('plotArea');
+    if (plotArea.exists()) {
+      for (const name of OOXML_CHART_TYPES) {
+        const el = plotArea.child(name);
+        if (el.exists()) {
+          chartType = mapToChartType(name);
+          break;
+        }
+      }
+    }
+  }
+  const colors = getThemeColors(ctx);
+  if (chartType === 'scatterChart' || chartType === 'bubbleChart') {
+    return {
+      type: 'chart',
+      left,
+      top,
+      width,
+      height,
+      data: [[], []],
+      colors,
+      chartType,
+      order,
+    } as ScatterChart;
+  }
+  return {
+    type: 'chart',
+    left,
+    top,
+    width,
+    height,
+    data: [] as ChartItem[],
+    colors,
+    chartType: chartType as CommonChart['chartType'],
+    order,
+  };
+}

package/src/serializer/fillMapper.ts

@@ -0,0 +1,224 @@
+/**
+ * Maps StyleResolver fill output to pptxtojson Fill types (ColorFill, ImageFill, GradientFill, PatternFill).
+ */
+
+import type { SafeXmlNode } from '../parser/XmlParser';
+import type { PlaceholderInfo } from '../model/nodes/BaseNode';
+import type { RenderContext } from './RenderContext';
+import { resolveColor, resolveGradientFill, type GradientFillData } from './StyleResolver';
+import { resolveRelTarget } from '../parser/RelParser';
+import type { RelEntry } from '../parser/RelParser';
+import { encodeMediaForWebDisplay } from '../utils/mediaWebConvert';
+import type { Fill, ColorFill, ImageFill, GradientFill, PatternFill } from '../adapter/types';
+
+export interface SpPrToFillOptions {
+  rels: Map<string, RelEntry>;
+  basePath: string;
+}
+
+const PX_TO_PT = 0.75;
+
+function ensureHex(color: string): string {
+  const s = color.trim();
+  if (s.startsWith('#')) return s;
+  return `#${s}`;
+}
+
+/** Convert GradientFillData to types.GradientFill.value (path, rot, colors). */
+export function gradientFillDataToValue(data: GradientFillData): GradientFill['value'] {
+  const path: GradientFill['value']['path'] =
+    data.type === 'linear'
+      ? 'line'
+      : data.pathType === 'rect'
+        ? 'rect'
+        : data.pathType === 'circle' || data.pathType === 'shape'
+          ? data.pathType
+          : 'circle';
+  const rot = data.type === 'linear' ? data.angle : 0;
+  const colors = data.stops.map((s) => ({
+    pos: `${s.position.toFixed(1)}%`,
+    color: ensureHex(s.color),
+  }));
+  return { path, rot, colors };
+}
+
+/**
+ * Resolve fill from shape properties (`spPr`) to types.Fill.
+ * Slide backgrounds use `backgroundSerializer.bgPrToFill` / `bgRefToFill` instead (aligned with BackgroundRenderer).
+ * When resolving blip from a shape on layout/master slide, pass options with that part's rels and basePath.
+ */
+export function spPrToFill(
+  spPr: SafeXmlNode,
+  ctx: RenderContext,
+  options?: SpPrToFillOptions,
+): Fill {
+  const solidFill = spPr.child('solidFill');
+  if (solidFill.exists()) {
+    const { color } = resolveColor(solidFill, ctx);
+    const value = ensureHex(color);
+    return { type: 'color', value };
+  }
+
+  const gradFill = spPr.child('gradFill');
+  if (gradFill.exists()) {
+    const data = resolveGradientFill(spPr, ctx);
+    if (data) {
+      return { type: 'gradient', value: gradientFillDataToValue(data) };
+    }
+  }
+
+  const blipFill = spPr.child('blipFill');
+  if (blipFill.exists()) {
+    const blip = blipFill.child('blip');
+    const embedId = blip.attr('embed') ?? blip.attr('r:embed');
+    if (embedId) {
+      const rels = options?.rels ?? ctx.slide.rels;
+      const basePath = options?.basePath ?? ctx.slide.slidePath.replace(/\/[^/]+$/, '');
+      const rel = rels.get(embedId);
+      if (rel) {
+        const mediaPath = resolveRelTarget(basePath, rel.target);
+        const data = ctx.presentation.media.get(mediaPath);
+        if (data) {
+          const picBase64 = encodeMediaForWebDisplay(mediaPath, data);
+          return {
+            type: 'image',
+            value: { picBase64, opacity: 1 },
+          };
+        }
+      }
+    }
+  }
+
+  const pattFill = spPr.child('pattFill');
+  if (pattFill.exists()) {
+    const preset = pattFill.attr('prst') ?? 'solid';
+    let foregroundColor = '#000000';
+    let backgroundColor = '#ffffff';
+    const fgClr = pattFill.child('fgClr');
+    if (fgClr.exists()) {
+      const { color } = resolveColor(fgClr, ctx);
+      foregroundColor = ensureHex(color);
+    }
+    const bgClr = pattFill.child('bgClr');
+    if (bgClr.exists()) {
+      const { color } = resolveColor(bgClr, ctx);
+      backgroundColor = ensureHex(color);
+    }
+    return {
+      type: 'pattern',
+      value: { type: preset, foregroundColor, backgroundColor },
+    };
+  }
+
+  const grpFill = spPr.child('grpFill');
+  if (grpFill.exists() && ctx.groupFillNode) {
+    return spPrToFill(ctx.groupFillNode, ctx);
+  }
+
+  const noFill = spPr.child('noFill');
+  if (noFill.exists()) {
+    return { type: 'color', value: 'transparent' };
+  }
+
+  // No explicit fill in OOXML — do not assume white (PPT treats as no fill / see-through).
+  return { type: 'color', value: 'transparent' };
+}
+
+function dirnamePackagePath(path: string): string {
+  if (!path) return '';
+  const i = path.lastIndexOf('/');
+  return i >= 0 ? path.slice(0, i) : '';
+}
+
+/** True when spPr defines how the interior is painted (including explicit no fill). */
+export function spPrHasExplicitFill(spPr: SafeXmlNode): boolean {
+  if (!spPr.exists()) return false;
+  return (
+    spPr.child('solidFill').exists() ||
+    spPr.child('gradFill').exists() ||
+    spPr.child('blipFill').exists() ||
+    spPr.child('pattFill').exists() ||
+    spPr.child('grpFill').exists() ||
+    spPr.child('noFill').exists()
+  );
+}
+
+function findPlaceholderNode(
+  placeholders: SafeXmlNode[],
+  info: PlaceholderInfo,
+): SafeXmlNode | undefined {
+  for (const ph of placeholders) {
+    let phEl: SafeXmlNode | undefined;
+    const nvSpPr = ph.child('nvSpPr');
+    if (nvSpPr.exists()) {
+      phEl = nvSpPr.child('nvPr').child('ph');
+    }
+    if (!phEl || !phEl.exists()) {
+      const nvPicPr = ph.child('nvPicPr');
+      if (nvPicPr.exists()) {
+        phEl = nvPicPr.child('nvPr').child('ph');
+      }
+    }
+    if (!phEl || !phEl.exists()) continue;
+
+    const phType = phEl.attr('type');
+    const phIdx = phEl.numAttr('idx');
+
+    if (info.idx !== undefined && phIdx === info.idx) return ph;
+    if (info.type && phType === info.type) return ph;
+  }
+  return undefined;
+}
+
+function isTransparentOnlyFill(fill: Fill): boolean {
+  return fill.type === 'color' && fill.value === 'transparent';
+}
+
+/**
+ * Resolve shape `spPr` fill for serialization. When the slide shape omits fill (only xfrm/geom etc.),
+ * PowerPoint inherits from the matching layout then master placeholder — same order as text lstStyle.
+ */
+export function resolveShapeFill(
+  spPr: SafeXmlNode,
+  ctx: RenderContext,
+  placeholder?: PlaceholderInfo,
+): Fill {
+  const direct: Fill = spPr.exists()
+    ? spPrToFill(spPr, ctx)
+    : { type: 'color', value: 'transparent' };
+
+  if (spPr.exists() && spPrHasExplicitFill(spPr)) {
+    return direct;
+  }
+
+  if (placeholder) {
+    const layoutPh = findPlaceholderNode(
+      ctx.layout.placeholders.map((e) => e.node),
+      placeholder,
+    );
+    if (layoutPh) {
+      const phSpPr = layoutPh.child('spPr');
+      if (phSpPr.exists() && spPrHasExplicitFill(phSpPr)) {
+        const fill = spPrToFill(phSpPr, ctx, {
+          rels: ctx.layout.rels,
+          basePath: dirnamePackagePath(ctx.layoutPath),
+        });
+        if (!isTransparentOnlyFill(fill)) return fill;
+      }
+    }
+
+    const masterPh = findPlaceholderNode(ctx.master.placeholders, placeholder);
+    if (masterPh) {
+      const phSpPr = masterPh.child('spPr');
+      if (phSpPr.exists() && spPrHasExplicitFill(phSpPr)) {
+        const fill = spPrToFill(phSpPr, ctx, {
+          rels: ctx.master.rels,
+          basePath: dirnamePackagePath(ctx.masterPath),
+        });
+        if (!isTransparentOnlyFill(fill)) return fill;
+      }
+    }
+  }
+
+  return direct;
+}

package/src/serializer/groupSerializer.ts

@@ -0,0 +1,94 @@
+/**
+ * Serializes GroupNodeData to pptxtojson Group element.
+ * Recursively serializes children via nodeToElement; flattens nested groups into elements.
+ */
+
+import type { GroupNodeData } from '../model/nodes/GroupNode';
+import type { SlideNode } from '../model/Slide';
+import { parseChildNode } from '../model/Slide';
+import type { RenderContext } from './RenderContext';
+import type { PptxFiles } from '../parser/ZipParser';
+import type { Group, Element, BaseElement } from '../adapter/types';
+
+// Type guard for Group (Element = BaseElement | Group)
+function isGroup(e: Element): e is Group {
+  return (e as Group).type === 'group';
+}
+
+const PX_TO_PT = 0.75;
+
+function pxToPt(px: number): number {
+  return px * PX_TO_PT;
+}
+
+/**
+ * Flatten a group into BaseElement[] with positions in parent (slide) space.
+ * Offsets each element by (baseLeft + group.left, baseTop + group.top).
+ */
+function flattenGroupInto(group: Group, baseLeft: number, baseTop: number, out: BaseElement[]): void {
+  const offsetLeft = baseLeft + group.left;
+  const offsetTop = baseTop + group.top;
+  for (const el of group.elements) {
+    const e = el as BaseElement & { left: number; top: number };
+    out.push({ ...e, left: offsetLeft + e.left, top: offsetTop + e.top } as BaseElement);
+  }
+}
+
+export type NodeToElement = (
+  node: SlideNode,
+  ctx: RenderContext,
+  order: number,
+  files?: PptxFiles,
+) => Element;
+
+/**
+ * Serialize group node to Group element.
+ * Children are parsed with parseChildNode and serialized with nodeToElement.
+ * Nested groups are flattened so Group.elements is BaseElement[].
+ */
+export function groupToElement(
+  node: GroupNodeData,
+  ctx: RenderContext,
+  order: number,
+  files: PptxFiles | undefined,
+  nodeToElement: NodeToElement,
+): Group {
+  const left = pxToPt(node.position.x);
+  const top = pxToPt(node.position.y);
+  const width = pxToPt(node.size.w);
+  const height = pxToPt(node.size.h);
+  const rels = ctx.slide.rels;
+  const slidePath = ctx.slide.slidePath;
+  const diagramDrawings = files?.diagramDrawings;
+  const elements: BaseElement[] = [];
+  let idx = 0;
+  for (const childXml of node.children) {
+    const childNode = parseChildNode(childXml, rels, slidePath, diagramDrawings);
+    if (childNode) {
+      const el = nodeToElement(childNode, ctx, idx, files);
+      if (isGroup(el)) {
+        flattenGroupInto(el, left, top, elements);
+      } else {
+        const be = el as BaseElement & { left: number; top: number };
+        elements.push({
+          ...be,
+          left: left + be.left,
+          top: top + be.top,
+        } as BaseElement);
+      }
+      idx++;
+    }
+  }
+  return {
+    type: 'group',
+    left,
+    top,
+    width,
+    height,
+    rotate: node.rotation,
+    elements,
+    order,
+    isFlipH: node.flipH,
+    isFlipV: node.flipV,
+  };
+}