@beyondwork/docx-react-component 1.0.29 → 1.0.31

package/src/runtime/table-style-resolver.ts

@@ -0,0 +1,409 @@
+import type {
+  BorderSpec,
+  CellShading,
+  TableBorders,
+  TableCellBorders,
+  TableCellMargins,
+  TableLook,
+  TableNode,
+  TableStyleConditionalRegion,
+  TableStyleDefinition,
+  TableStyleFormatting,
+  TableWidth,
+} from "../model/canonical-document.ts";
+
+export interface ResolvedTableCellStyle {
+  width?: TableWidth;
+  borders?: TableCellBorders;
+  shading?: CellShading;
+  verticalAlign?: "top" | "center" | "bottom";
+  activeConditionalRegions: TableStyleConditionalRegion[];
+}
+
+export interface ResolvedTableRowStyle {
+  height?: number;
+  heightRule?: "auto" | "atLeast" | "exact";
+  isHeader?: boolean;
+  activeConditionalRegions: TableStyleConditionalRegion[];
+}
+
+export interface ResolvedTableStyleResolution {
+  rawTblLook?: TableLook;
+  effectiveTblLook: TableLook;
+  table?: TableStyleFormatting["table"];
+  rows: Array<{
+    style: ResolvedTableRowStyle;
+    cells: ResolvedTableCellStyle[];
+  }>;
+}
+
+const DEFAULT_EFFECTIVE_TABLE_LOOK: TableLook = {
+  val: "04A0",
+  firstRow: true,
+  lastRow: false,
+  firstColumn: true,
+  lastColumn: false,
+  noHBand: false,
+  noVBand: true,
+};
+
+const CONDITIONAL_REGION_ORDER: TableStyleConditionalRegion[] = [
+  "band1Horz",
+  "band2Horz",
+  "band1Vert",
+  "band2Vert",
+  "firstColumn",
+  "lastColumn",
+  "firstRow",
+  "lastRow",
+];
+
+export function resolveTableStyleResolution(
+  table: TableNode,
+  tableStyles: Record<string, TableStyleDefinition>,
+): ResolvedTableStyleResolution {
+  const resolvedStyle = table.styleId ? resolveTableStyleDefinition(table.styleId, tableStyles) : {};
+  const effectiveTblLook = resolveEffectiveTableLook(table.tblLook, resolvedStyle.formatting?.table?.tblLook);
+  const columnCount = table.gridColumns.length > 0
+    ? table.gridColumns.length
+    : table.rows.reduce(
+        (max, row) =>
+          Math.max(
+            max,
+            (row.gridBefore ?? 0) +
+              row.cells.reduce((sum, cell) => sum + (cell.gridSpan ?? 1), 0) +
+              (row.gridAfter ?? 0),
+          ),
+        0,
+      );
+
+  const rows = table.rows.map((row, rowIndex) => {
+    const rowRegions = getActiveRowRegions(rowIndex, table.rows.length, effectiveTblLook);
+    const rowStyleFormatting = mergeStyleFormattingRow(
+      resolvedStyle.formatting?.row,
+      rowRegions.map((region) => resolvedStyle.conditionalFormatting?.[region]?.row),
+      {
+        ...(row.height !== undefined ? { height: row.height } : {}),
+        ...(row.heightRule ? { heightRule: row.heightRule } : {}),
+        ...(row.isHeader !== undefined ? { isHeader: row.isHeader } : {}),
+      },
+    );
+
+    let columnCursor = row.gridBefore ?? 0;
+    const cells = row.cells.map((cell) => {
+      const startColumn = columnCursor;
+      const span = cell.gridSpan ?? 1;
+      const endColumn = startColumn + span - 1;
+      columnCursor += span;
+
+      const cellRegions = getActiveCellRegions(
+        rowRegions,
+        startColumn,
+        endColumn,
+        columnCount,
+        effectiveTblLook,
+      );
+      const cellStyleFormatting = mergeStyleFormattingCell(
+        resolvedStyle.formatting?.cell,
+        cellRegions.map((region) => resolvedStyle.conditionalFormatting?.[region]?.cell),
+        {
+          ...(cell.width ? { width: cell.width } : {}),
+          ...(cell.borders ? { borders: cell.borders } : {}),
+          ...(cell.shading ? { shading: cell.shading } : {}),
+          ...(cell.verticalAlign ? { verticalAlign: cell.verticalAlign } : {}),
+        },
+      );
+
+      return {
+        ...(cellStyleFormatting ?? {}),
+        activeConditionalRegions: cellRegions,
+      };
+    });
+
+    return {
+      style: {
+        ...(rowStyleFormatting ?? {}),
+        activeConditionalRegions: rowRegions,
+      },
+      cells,
+    };
+  });
+
+  const tableFormatting = mergeTableFormatting(
+    resolvedStyle.formatting?.table,
+    {
+      ...(table.width ? { width: table.width } : {}),
+      ...(table.alignment ? { alignment: table.alignment } : {}),
+      ...(table.borders ? { borders: table.borders } : {}),
+      ...(table.cellMargins ? { cellMargins: table.cellMargins } : {}),
+      ...(table.tblLook ? { tblLook: table.tblLook } : {}),
+    },
+  );
+
+  return {
+    ...(table.tblLook ? { rawTblLook: table.tblLook } : {}),
+    effectiveTblLook,
+    ...(tableFormatting ? { table: tableFormatting } : {}),
+    rows,
+  };
+}
+
+function resolveTableStyleDefinition(
+  styleId: string,
+  tableStyles: Record<string, TableStyleDefinition>,
+  visited = new Set<string>(),
+): {
+  formatting?: TableStyleFormatting;
+  conditionalFormatting?: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>>;
+} {
+  if (visited.has(styleId)) {
+    return {};
+  }
+  visited.add(styleId);
+
+  const style = tableStyles[styleId];
+  if (!style) {
+    return {};
+  }
+
+  const inherited = style.basedOn
+    ? resolveTableStyleDefinition(style.basedOn, tableStyles, visited)
+    : {};
+
+  return {
+    formatting: mergeWholeStyleFormatting(inherited.formatting, style.formatting),
+    conditionalFormatting: mergeConditionalFormatting(
+      inherited.conditionalFormatting,
+      style.conditionalFormatting,
+    ),
+  };
+}
+
+function resolveEffectiveTableLook(rawTblLook: TableLook | undefined, styleTblLook: TableLook | undefined): TableLook {
+  const decodedStyleLook = decodeTableLookMask(styleTblLook?.val);
+  const decodedRawLook = decodeTableLookMask(rawTblLook?.val);
+  return {
+    ...DEFAULT_EFFECTIVE_TABLE_LOOK,
+    ...(decodedStyleLook ?? {}),
+    ...(styleTblLook ?? {}),
+    ...(decodedRawLook ?? {}),
+    ...(rawTblLook ?? {}),
+  };
+}
+
+function decodeTableLookMask(val: string | undefined): TableLook | undefined {
+  if (!val) {
+    return undefined;
+  }
+
+  const mask = Number.parseInt(val, 16);
+  if (Number.isNaN(mask)) {
+    return { val };
+  }
+
+  return {
+    val,
+    firstRow: (mask & 0x0020) !== 0,
+    lastRow: (mask & 0x0040) !== 0,
+    firstColumn: (mask & 0x0080) !== 0,
+    lastColumn: (mask & 0x0100) !== 0,
+    noHBand: (mask & 0x0200) !== 0,
+    noVBand: (mask & 0x0400) !== 0,
+  };
+}
+
+function getActiveRowRegions(
+  rowIndex: number,
+  rowCount: number,
+  effectiveTblLook: TableLook,
+): TableStyleConditionalRegion[] {
+  const active = new Set<TableStyleConditionalRegion>();
+
+  if (effectiveTblLook.firstRow && rowIndex === 0) {
+    active.add("firstRow");
+  }
+  if (effectiveTblLook.lastRow && rowIndex === rowCount - 1) {
+    active.add("lastRow");
+  }
+
+  if (!effectiveTblLook.noHBand) {
+    const bandStart = effectiveTblLook.firstRow ? 1 : 0;
+    const bandEndExclusive = effectiveTblLook.lastRow ? rowCount - 1 : rowCount;
+    if (rowIndex >= bandStart && rowIndex < bandEndExclusive) {
+      const bandIndex = rowIndex - bandStart;
+      active.add(bandIndex % 2 === 0 ? "band1Horz" : "band2Horz");
+    }
+  }
+
+  return CONDITIONAL_REGION_ORDER.filter((region) => active.has(region));
+}
+
+function getActiveCellRegions(
+  rowRegions: TableStyleConditionalRegion[],
+  startColumn: number,
+  endColumn: number,
+  columnCount: number,
+  effectiveTblLook: TableLook,
+): TableStyleConditionalRegion[] {
+  const active = new Set<TableStyleConditionalRegion>(rowRegions);
+
+  if (effectiveTblLook.firstColumn && startColumn === 0) {
+    active.add("firstColumn");
+  }
+  if (effectiveTblLook.lastColumn && endColumn === columnCount - 1) {
+    active.add("lastColumn");
+  }
+
+  if (!effectiveTblLook.noVBand) {
+    const bandStart = effectiveTblLook.firstColumn ? 1 : 0;
+    const bandEndExclusive = effectiveTblLook.lastColumn ? columnCount - 1 : columnCount;
+    if (startColumn >= bandStart && startColumn < bandEndExclusive) {
+      const bandIndex = startColumn - bandStart;
+      active.add(bandIndex % 2 === 0 ? "band1Vert" : "band2Vert");
+    }
+  }
+
+  return CONDITIONAL_REGION_ORDER.filter((region) => active.has(region));
+}
+
+function mergeConditionalFormatting(
+  base: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined,
+  override: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined,
+): Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const merged: Partial<Record<TableStyleConditionalRegion, TableStyleFormatting>> = {};
+  for (const region of CONDITIONAL_REGION_ORDER) {
+    const formatting = mergeWholeStyleFormatting(base?.[region], override?.[region]);
+    if (formatting) {
+      merged[region] = formatting;
+    }
+  }
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergeWholeStyleFormatting(
+  base: TableStyleFormatting | undefined,
+  override: TableStyleFormatting | undefined,
+): TableStyleFormatting | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const merged: TableStyleFormatting = {};
+  const table = mergeTableFormatting(base?.table, override?.table);
+  const row = mergeRowFormatting(base?.row, override?.row);
+  const cell = mergeCellFormatting(base?.cell, override?.cell);
+
+  if (table) merged.table = table;
+  if (row) merged.row = row;
+  if (cell) merged.cell = cell;
+
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergeStyleFormattingRow(
+  base: TableStyleFormatting["row"],
+  conditionals: Array<TableStyleFormatting["row"] | undefined>,
+  direct: TableStyleFormatting["row"],
+): TableStyleFormatting["row"] {
+  const styleResolved = conditionals.reduce(
+    (current, formatting) => mergeRowFormatting(current, formatting),
+    base,
+  );
+  return mergeRowFormatting(styleResolved, direct);
+}
+
+function mergeStyleFormattingCell(
+  base: TableStyleFormatting["cell"],
+  conditionals: Array<TableStyleFormatting["cell"] | undefined>,
+  direct: TableStyleFormatting["cell"],
+): TableStyleFormatting["cell"] {
+  const styleResolved = conditionals.reduce(
+    (current, formatting) => mergeCellFormatting(current, formatting),
+    base,
+  );
+  return mergeCellFormatting(styleResolved, direct);
+}
+
+function mergeTableFormatting(
+  base: TableStyleFormatting["table"],
+  override: TableStyleFormatting["table"],
+): TableStyleFormatting["table"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return {
+    ...(base ?? {}),
+    ...(override ?? {}),
+    borders: mergeBorderMap(base?.borders, override?.borders),
+    cellMargins: mergePlainObject(base?.cellMargins, override?.cellMargins),
+    tblLook: mergeTableLook(base?.tblLook, override?.tblLook),
+  };
+}
+
+function mergeRowFormatting(
+  base: TableStyleFormatting["row"],
+  override: TableStyleFormatting["row"],
+): TableStyleFormatting["row"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return { ...(base ?? {}), ...(override ?? {}) };
+}
+
+function mergeCellFormatting(
+  base: TableStyleFormatting["cell"],
+  override: TableStyleFormatting["cell"],
+): TableStyleFormatting["cell"] {
+  if (!base && !override) {
+    return undefined;
+  }
+  return {
+    ...(base ?? {}),
+    ...(override ?? {}),
+    borders: mergeBorderMap(base?.borders, override?.borders),
+    shading: mergePlainObject(base?.shading, override?.shading),
+  };
+}
+
+function mergeBorderMap<T extends TableBorders | TableCellBorders>(
+  base: T | undefined,
+  override: T | undefined,
+): T | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+
+  const sides = ["top", "left", "bottom", "right", "insideH", "insideV"] as const;
+  const merged = {} as T;
+  for (const side of sides) {
+    const spec = mergePlainObject(base?.[side], override?.[side]) as BorderSpec | undefined;
+    if (spec) {
+      merged[side] = spec as T[typeof side];
+    }
+  }
+  return Object.keys(merged).length > 0 ? merged : undefined;
+}
+
+function mergePlainObject<T extends object>(base: T | undefined, override: T | undefined): T | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+  return { ...(base ?? {}), ...(override ?? {}) } as T;
+}
+
+function mergeTableLook(base: TableLook | undefined, override: TableLook | undefined): TableLook | undefined {
+  if (!base && !override) {
+    return undefined;
+  }
+  if (!override) {
+    return base ? { ...base } : undefined;
+  }
+  if (override.val !== undefined) {
+    return { ...override };
+  }
+  return { ...(base ?? {}), ...override };
+}