@erclx/canon 5.20.0 → 5.22.0

package/src/slides/convert/shapes.ts

@@ -150,7 +150,7 @@ const PT_PER_PX = 0.75
 const inches = (px: number): number => px / PX_PER_INCH
 const points = (px: number): number => px * PT_PER_PX
 
-function position(box: Rect): PptxGenJS.PositionProps {
+export function position(box: Rect): PptxGenJS.PositionProps {
   return {
     x: inches(box.x),
     y: inches(box.y),
@@ -521,10 +521,44 @@ export interface Fallback {
   readonly properties: readonly UnmappedProperty[]
 }
 
+/** A shape the slide will hold, by the record that produced it. */
+export interface NamedShape {
+  readonly record: number
+  readonly name: string
+}
+
 export interface SlidePlan {
   readonly ops: readonly DrawOp[]
   readonly fallbacks: readonly Fallback[]
   readonly refusedLinks: readonly RefusedLink[]
+  /** Every object name the ops carry, in the order they are drawn. */
+  readonly names: readonly NamedShape[]
+}
+
+/**
+ * pptxgenjs numbers shape ids itself, so the object name is the only handle a
+ * later pass over the written XML can find a shape by.
+ */
+export const objectNameOf = (record: number): string => `canon-${record}`
+
+/** An image's border is a second shape over it, named after the picture. */
+function named<T extends DrawOp>(op: T, record: number): T {
+  const name = objectNameOf(record)
+  const options = { ...op.options, objectName: name }
+  if (op.kind === 'image' && op.frame) {
+    return {
+      ...op,
+      options,
+      frame: { ...op.frame, objectName: `${name}-frame` },
+    }
+  }
+  return { ...op, options }
+}
+
+function namesOf(record: number, op: DrawOp): NamedShape[] {
+  const names = [op.options.objectName]
+  if (op.kind === 'image') names.push(op.frame?.objectName)
+  return names.flatMap((name) => (name ? [{ record, name }] : []))
 }
 
 function boxOp(record: ElementRecord): DrawOp | undefined {
@@ -729,7 +763,13 @@ export function planSlide(
   const ops: DrawOp[] = []
   const fallbacks: Fallback[] = []
   const refusedLinks: RefusedLink[] = []
+  const names: NamedShape[] = []
   const dropped = new Set<number>()
+  const add = (record: number, op: DrawOp): void => {
+    const withName = named(op, record)
+    ops.push(withName)
+    names.push(...namesOf(record, withName))
+  }
 
   for (const record of records) {
     if (record.parent !== null && dropped.has(record.parent)) {
@@ -740,7 +780,7 @@ export function planSlide(
     if (properties.length > 0) {
       dropped.add(record.id)
       fallbacks.push({ id: record.id, selector: record.selector, properties })
-      ops.push({
+      add(record.id, {
         kind: 'fallback',
         id: record.id,
         options: { ...position(record.bounds), altText: record.text },
@@ -757,8 +797,8 @@ export function planSlide(
             : record.kind === 'svg'
               ? svgOp(record)
               : tableOp(record, context, refusedLinks)
-    if (op) ops.push(op)
+    if (op) add(record.id, op)
   }
 
-  return { ops, fallbacks, refusedLinks }
+  return { ops, fallbacks, refusedLinks, names }
 }

package/src/slides/convert/walk.ts

@@ -1,3 +1,6 @@
+import type { ChartRecord } from '@/slides/convert/chart'
+import type { ThemeReading } from '@/slides/convert/master'
+import type { TransitionSpec } from '@/slides/package/motion'
 import type {
   BoxStyle,
   ElementRecord,
@@ -9,10 +12,49 @@ import type {
   TextRun,
 } from '@/slides/convert/shapes'
 
+/** How one slide treats a band the deck master draws. */
+export type BandOverride =
+  | { readonly kind: 'master' }
+  | { readonly kind: 'off' }
+  | {
+      readonly kind: 'override'
+      readonly left?: string
+      readonly center?: string
+      readonly right?: string
+    }
+
+/** What a slide declares about itself on `<body>` and in its notes. */
+export interface SlideMeta {
+  readonly notes?: string
+  readonly section?: string
+  readonly isHidden: boolean
+  readonly header: BandOverride
+  readonly footer: BandOverride
+  /** The `--color-text` the slide's `<body>` computes, as hex. */
+  readonly textToken?: string
+  /** `data-transition` and `data-transition-duration` on `<body>`. */
+  readonly transition?: TransitionSpec
+}
+
+/**
+ * An element's `data-enter`, with the record it was walked as, or null when it
+ * was folded into another record's text or never drawn.
+ */
+export interface EntranceRecord {
+  readonly record: number | null
+  readonly selector: string
+  readonly effect: string
+  readonly order?: string
+  readonly duration?: string
+}
+
 /** What one laid-out slide hands back across `page.evaluate`. */
 export interface WalkedSlide {
   readonly background: Rgba
   readonly records: ElementRecord[]
+  readonly charts: ChartRecord[]
+  readonly entrances: EntranceRecord[]
+  readonly meta: SlideMeta
 }
 
 /** Set on every walked element, so a screenshot finds the one a record names. */
@@ -27,7 +69,8 @@ export const ID_ATTRIBUTE = 'data-canon-id'
  * Text gathers along the inline flow. A block holding text takes every run its
  * inline descendants carry, so `<strong>` inside `<p>` is one shape with two
  * runs, while a block-level child is walked on its own. Images, SVGs, and
- * tables consume their whole subtree.
+ * tables consume their whole subtree. Speaker notes in `<aside class="notes">`
+ * and a chart's `<figure data-chart>` are read whole and never drawn as shapes.
  *
  * Each walked element is tagged with `idAttribute` set to its record id.
  */
@@ -293,10 +336,41 @@ export function walkSlide(idAttribute: string): WalkedSlide {
 
   const SKIPPED = new Set(['script', 'style', 'template', 'noscript', 'link'])
 
+  const cellText = (element: Element): string =>
+    (element.textContent ?? '').replace(/\s+/g, ' ').trim()
+
+  /** One line per block, so a paragraph break survives and no tag does. */
+  const notesText = (element: Element): string => {
+    const clone = element.cloneNode(true)
+    if (!(clone instanceof Element)) return ''
+    for (const br of Array.from(clone.querySelectorAll('br'))) {
+      br.replaceWith('\n')
+    }
+    for (const block of Array.from(
+      clone.querySelectorAll('p, li, div, blockquote, h1, h2, h3, h4, h5, h6'),
+    )) {
+      block.append('\n')
+    }
+    return (clone.textContent ?? '')
+      .split('\n')
+      .map((line) => line.replace(/\s+/g, ' ').trim())
+      .filter(Boolean)
+      .join('\n')
+  }
+
+  const notes: string[] = []
+  const charts: ChartRecord[] = []
+
   for (const element of Array.from(document.body.querySelectorAll('*'))) {
     if (consumed.has(element)) continue
     const tag = element.tagName.toLowerCase()
     if (SKIPPED.has(tag)) continue
+    if (tag === 'aside' && element.classList.contains('notes')) {
+      consumeSubtree(element)
+      const text = notesText(element)
+      if (text) notes.push(text)
+      continue
+    }
     if (!element.checkVisibility({ visibilityProperty: true })) continue
 
     const id = records.length + 1
@@ -313,6 +387,27 @@ export function walkSlide(idAttribute: string): WalkedSlide {
     ids.set(element, id)
     element.setAttribute(idAttribute, String(id))
 
+    if (tag === 'figure' && element.hasAttribute('data-chart')) {
+      consumeSubtree(element)
+      records.push({ ...base, kind: 'box' })
+      const table = element.querySelector('table')
+      const caption = element.querySelector('figcaption')
+      const title = caption ? cellText(caption) : ''
+      charts.push({
+        selector: base.selector,
+        box: bounds,
+        type: element.getAttribute('data-chart') ?? '',
+        hasLabels: element.hasAttribute('data-labels'),
+        ...(title ? { title } : {}),
+        rows: table
+          ? Array.from(table.rows).map((row) =>
+              Array.from(row.cells).map(cellText),
+            )
+          : [],
+      })
+      continue
+    }
+
     if (element instanceof HTMLImageElement) {
       records.push({
         ...base,
@@ -440,5 +535,137 @@ export function walkSlide(idAttribute: string): WalkedSlide {
         ? htmlGround
         : { hex: 'FFFFFF', alpha: 1 }
 
-  return { background, records }
+  const body = document.body
+  const band = (kind: 'header' | 'footer'): BandOverride => {
+    if (body.getAttribute(`data-${kind}`) === 'off') return { kind: 'off' }
+    const slots: { left?: string; center?: string; right?: string } = {}
+    for (const slot of ['left', 'center', 'right'] as const) {
+      const value = body.getAttribute(`data-${kind}-${slot}`)
+      if (value !== null) slots[slot] = value
+    }
+    return Object.keys(slots).length > 0
+      ? { kind: 'override', ...slots }
+      : { kind: 'master' }
+  }
+  const section = body.getAttribute('data-section')?.trim()
+  const attribute = (element: Element, name: string): string | undefined =>
+    element.getAttribute(name)?.trim() || undefined
+  const transitionEffect = attribute(body, 'data-transition')
+  const transitionDuration = attribute(body, 'data-transition-duration')
+  const textValue = getComputedStyle(body)
+    .getPropertyValue('--color-text')
+    .trim()
+  const meta: SlideMeta = {
+    ...(textValue ? { textToken: rgba(textValue).hex } : {}),
+    ...(notes.length > 0 ? { notes: notes.join('\n\n') } : {}),
+    ...(section ? { section } : {}),
+    isHidden:
+      body.hasAttribute('data-hidden') &&
+      body.getAttribute('data-hidden') !== 'false',
+    header: band('header'),
+    footer: band('footer'),
+    ...(transitionEffect
+      ? {
+          transition: {
+            effect: transitionEffect,
+            ...(transitionDuration ? { duration: transitionDuration } : {}),
+          },
+        }
+      : {}),
+  }
+
+  const entrances: EntranceRecord[] = Array.from(
+    body.querySelectorAll('[data-enter]'),
+  ).map((element) => {
+    const order = attribute(element, 'data-enter-order')
+    const duration = attribute(element, 'data-enter-duration')
+    return {
+      record: ids.get(element) ?? null,
+      selector: describe(element),
+      effect: attribute(element, 'data-enter') ?? '',
+      ...(order ? { order } : {}),
+      ...(duration ? { duration } : {}),
+    }
+  })
+
+  return { background, records, charts, entrances, meta }
+}
+
+/**
+ * Runs inside the laid-out page and reads the colors and face the deck master
+ * takes. Tokens come from `<html>`'s computed style, so a slide that switches
+ * theme on its own `<body>`, such as a dark cover, leaves the master on the
+ * project's root theme. The body supplies the fallback colors and the face.
+ * Serialized to source like `walkSlide`, so its helpers sit in its own body.
+ */
+export function readTheme(): ThemeReading {
+  const canvas = document.createElement('canvas')
+  canvas.width = 1
+  canvas.height = 1
+  const context = canvas.getContext('2d', { willReadFrequently: true })
+  const hex = (value: string): string | undefined => {
+    if (!context || !value || value === 'transparent') return undefined
+    context.clearRect(0, 0, 1, 1)
+    context.fillStyle = '#000000'
+    context.fillStyle = value
+    context.fillRect(0, 0, 1, 1)
+    const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data
+    if (a === 0) return undefined
+    return [r, g, b]
+      .map((channel) => channel.toString(16).padStart(2, '0'))
+      .join('')
+      .toUpperCase()
+  }
+
+  const style = getComputedStyle(document.body)
+  const rootStyle = getComputedStyle(document.documentElement)
+  const token = (name: string): string | undefined => {
+    const value = rootStyle.getPropertyValue(name).trim()
+    return value ? hex(value) : undefined
+  }
+
+  const names: string[] = []
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList
+    try {
+      rules = sheet.cssRules
+    } catch {
+      continue
+    }
+    for (const rule of Array.from(rules)) {
+      if (!(rule instanceof CSSStyleRule)) continue
+      for (const name of Array.from(rule.style)) {
+        if (name.startsWith('--color-') && !names.includes(name)) {
+          names.push(name)
+        }
+      }
+    }
+  }
+
+  const tokens: {
+    background?: string
+    text?: string
+    muted?: string
+    accent?: string
+  } = {}
+  for (const role of ['background', 'text', 'muted', 'accent'] as const) {
+    const value = token(`--color-${role}`)
+    if (value) tokens[role] = value
+  }
+
+  return {
+    tokens,
+    body: {
+      background:
+        hex(style.backgroundColor) ??
+        hex(getComputedStyle(document.documentElement).backgroundColor) ??
+        'FFFFFF',
+      color: hex(style.color) ?? '000000',
+    },
+    fontFamily: style.fontFamily,
+    roles: names.flatMap((name) => {
+      const value = token(name)
+      return value ? [{ name, hex: value }] : []
+    }),
+  }
 }

package/src/slides/package/fonts.ts

@@ -0,0 +1,297 @@
+import type JSZip from 'jszip'
+
+/**
+ * Embeds the deck's typeface in the written package, which pptxgenjs cannot do.
+ * PowerPoint reads an embedded face as an Embedded OpenType 2.2 container
+ * around the TrueType or OpenType data, stored as `ppt/fonts/fontN.fntdata`
+ * and listed in `presentation.xml`. The header is built from the face's own
+ * `OS/2`, `head`, and `name` tables, laid out per the W3C EOT submission:
+ * https://www.w3.org/submissions/EOT/
+ */
+
+export interface EmbedFace {
+  readonly family: string
+  readonly weight: number
+  readonly style: 'normal' | 'italic'
+  /** As `deck.json` wrote it, which every notice names. */
+  readonly path: string
+  readonly bytes: Uint8Array
+}
+
+export interface FontNotice {
+  readonly path: string
+  readonly message: string
+}
+
+export type EotResult =
+  | { readonly status: 'embeddable'; readonly eot: Buffer }
+  | { readonly status: 'refused'; readonly message: string }
+
+/** `fsType` bits from the OpenType `OS/2` table. */
+const RESTRICTED = 0x0002
+const BITMAP_ONLY = 0x0200
+
+const SFNT_VERSIONS = new Set([0x00010000, 0x74727565, 0x4f54544f])
+const WRAPPED: Readonly<Record<number, string>> = {
+  0x774f4632: 'woff2',
+  0x774f4646: 'woff',
+  0x74746366: 'a font collection',
+}
+
+const UNDECODABLE = 'it could not be decoded as a TrueType or OpenType font'
+
+interface Table {
+  readonly offset: number
+  readonly length: number
+}
+
+function tables(font: Buffer): Map<string, Table> {
+  const found = new Map<string, Table>()
+  const count = font.readUInt16BE(4)
+  for (let index = 0; index < count; index += 1) {
+    const at = 12 + index * 16
+    const offset = font.readUInt32BE(at + 8)
+    const length = font.readUInt32BE(at + 12)
+    if (offset + length > font.length) throw new RangeError('table overruns')
+    found.set(font.toString('latin1', at, at + 4), { offset, length })
+  }
+  return found
+}
+
+/**
+ * The Windows platform's strings, in UTF-16, preferring US English where a
+ * face carries several languages.
+ */
+function names(font: Buffer, table: Table): Map<number, Buffer> {
+  const found = new Map<number, { language: number; bytes: Buffer }>()
+  const count = font.readUInt16BE(table.offset + 2)
+  const strings = table.offset + font.readUInt16BE(table.offset + 4)
+  for (let index = 0; index < count; index += 1) {
+    const at = table.offset + 6 + index * 12
+    if (font.readUInt16BE(at) !== 3) continue
+    const language = font.readUInt16BE(at + 4)
+    const id = font.readUInt16BE(at + 6)
+    const length = font.readUInt16BE(at + 8)
+    const start = strings + font.readUInt16BE(at + 10)
+    if (start + length > font.length) throw new RangeError('name overruns')
+    const held = found.get(id)
+    if (held && (held.language === 0x0409 || language !== 0x0409)) continue
+    const bytes = Buffer.from(font.subarray(start, start + length)).swap16()
+    found.set(id, { language, bytes })
+  }
+  return new Map([...found].map(([id, { bytes }]) => [id, bytes]))
+}
+
+function sized(bytes: Buffer = Buffer.alloc(0)): Buffer {
+  const size = Buffer.alloc(2)
+  size.writeUInt16LE(bytes.length)
+  return Buffer.concat([size, bytes])
+}
+
+function header(font: Buffer, os2: number, head: number): Buffer {
+  const fixed = Buffer.alloc(80)
+  fixed.writeUInt32LE(font.length, 4)
+  fixed.writeUInt32LE(0x00020002, 8)
+  font.copy(fixed, 16, os2 + 32, os2 + 42)
+  fixed.writeUInt8(1, 26)
+  fixed.writeUInt8(font.readUInt16BE(os2 + 62) & 1, 27)
+  fixed.writeUInt32LE(font.readUInt16BE(os2 + 4), 28)
+  fixed.writeUInt16LE(font.readUInt16BE(os2 + 8), 32)
+  fixed.writeUInt16LE(0x504c, 34)
+  for (let index = 0; index < 4; index += 1) {
+    fixed.writeUInt32LE(font.readUInt32BE(os2 + 42 + index * 4), 36 + index * 4)
+  }
+  for (let index = 0; index < 2; index += 1) {
+    fixed.writeUInt32LE(font.readUInt32BE(os2 + 78 + index * 4), 52 + index * 4)
+  }
+  fixed.writeUInt32LE(font.readUInt32BE(head + 8), 60)
+  return fixed
+}
+
+/**
+ * The EOT container around one face, or the reason it may not travel. A face
+ * whose license restricts embedding or allows a bitmap only is refused, as is
+ * a variable face, which PowerPoint does not embed. Editable and print-preview
+ * embedding both pass, since the deck is meant to be edited.
+ */
+export function eotOf(bytes: Uint8Array): EotResult {
+  const font = Buffer.from(bytes)
+  const refused = (message: string): EotResult => ({
+    status: 'refused',
+    message,
+  })
+  if (font.length < 12) return refused(UNDECODABLE)
+  const version = font.readUInt32BE(0)
+  const wrapped = WRAPPED[version]
+  if (wrapped) {
+    return refused(
+      `it is ${wrapped}. Supply the TrueType or OpenType file instead`,
+    )
+  }
+  if (!SFNT_VERSIONS.has(version)) return refused(UNDECODABLE)
+  try {
+    const found = tables(font)
+    const os2 = found.get('OS/2')
+    const head = found.get('head')
+    const name = found.get('name')
+    // Version 0 of OS/2 stops before the code page ranges the header copies.
+    if (!os2 || os2.length < 86 || !head || head.length < 12 || !name) {
+      return refused(UNDECODABLE)
+    }
+    const fsType = font.readUInt16BE(os2.offset + 8)
+    if (fsType & RESTRICTED) {
+      return refused('its license forbids embedding (fsType restricted)')
+    }
+    if (fsType & BITMAP_ONLY) {
+      return refused('its license allows bitmap embedding only (fsType 0x0200)')
+    }
+    if (found.has('fvar')) {
+      return refused(
+        'it is a variable font, which PowerPoint does not embed. Supply a static instance',
+      )
+    }
+    const strings = names(font, name)
+    const padding = Buffer.alloc(2)
+    // RootStringCheckSum, EUDCCodePage, Padding6, SignatureSize, EUDCFlags,
+    // and EUDCFontSize, all zero for a face with no root string or EUDC data.
+    const tail = Buffer.alloc(20)
+    const eot = Buffer.concat([
+      header(font, os2.offset, head.offset),
+      padding,
+      sized(strings.get(1)),
+      padding,
+      sized(strings.get(2)),
+      padding,
+      sized(strings.get(5)),
+      padding,
+      sized(strings.get(4)),
+      padding,
+      sized(),
+      tail,
+      font,
+    ])
+    eot.writeUInt32LE(eot.length, 0)
+    return { status: 'embeddable', eot }
+  } catch (error) {
+    if (error instanceof RangeError) return refused(UNDECODABLE)
+    throw error
+  }
+}
+
+type Slot = 'regular' | 'bold' | 'italic' | 'boldItalic'
+
+/** The child order `<p:embeddedFont>` requires. */
+const SLOTS: readonly Slot[] = ['regular', 'bold', 'italic', 'boldItalic']
+
+/** PowerPoint keeps four faces a family, so a weight from 600 reads as bold. */
+function slotOf(face: EmbedFace): Slot {
+  const isBold = face.weight >= 600
+  if (face.style === 'italic') return isBold ? 'boldItalic' : 'italic'
+  return isBold ? 'bold' : 'regular'
+}
+
+const FONT_RELATIONSHIP =
+  'http://schemas.openxmlformats.org/officeDocument/2006/relationships/font'
+const NOTES_SIZE = /<p:notesSz\b[^>]*\/>/
+
+const escapeXml = (value: string): string =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('"', '&quot;')
+    .replaceAll('<', '&lt;')
+
+/**
+ * Embeds each face the deck lists and returns one notice per face left out.
+ * The font list goes after `<p:notesSz>`, where the schema orders it, and a
+ * package missing that anchor embeds nothing rather than placing it elsewhere.
+ */
+export async function embedFonts(
+  zip: JSZip,
+  faces: readonly EmbedFace[],
+): Promise<FontNotice[]> {
+  const notices: FontNotice[] = []
+  const families = new Map<string, Map<Slot, number>>()
+  const parts: Buffer[] = []
+
+  for (const face of faces) {
+    const result = eotOf(face.bytes)
+    if (result.status === 'refused') {
+      notices.push({ path: face.path, message: result.message })
+      continue
+    }
+    const slots = families.get(face.family) ?? new Map<Slot, number>()
+    const slot = slotOf(face)
+    if (slots.has(slot)) {
+      notices.push({
+        path: face.path,
+        message: `${face.family} already embeds a ${slot} face, and PowerPoint holds one per slot`,
+      })
+      continue
+    }
+    parts.push(result.eot)
+    slots.set(slot, parts.length)
+    families.set(face.family, slots)
+  }
+  if (parts.length === 0) return notices
+
+  const presentationPath = 'ppt/presentation.xml'
+  const relsPath = 'ppt/_rels/presentation.xml.rels'
+  const typesPath = '[Content_Types].xml'
+  const [presentation, rels, types] = await Promise.all(
+    [presentationPath, relsPath, typesPath].map(
+      async (path) => (await zip.file(path)?.async('string')) ?? '',
+    ),
+  )
+  if (!presentation || !NOTES_SIZE.test(presentation)) {
+    const message = 'the deck has no <p:notesSz> to anchor the font list after'
+    return [
+      ...notices,
+      ...faces
+        .filter((face) => !notices.some((notice) => notice.path === face.path))
+        .map((face) => ({ path: face.path, message })),
+    ]
+  }
+
+  const id = (part: number): string => `rIdCanonFont${part}`
+  parts.forEach((eot, index) => {
+    zip.file(`ppt/fonts/font${index + 1}.fntdata`, eot)
+  })
+  const relationships = parts
+    .map(
+      (_, index) =>
+        `<Relationship Id="${id(index + 1)}" Type="${FONT_RELATIONSHIP}" Target="fonts/font${index + 1}.fntdata"/>`,
+    )
+    .join('')
+  zip.file(
+    relsPath,
+    rels.replace('</Relationships>', `${relationships}</Relationships>`),
+  )
+  if (!types.includes('Extension="fntdata"')) {
+    zip.file(
+      typesPath,
+      types.replace(
+        /(<Types\b[^>]*>)/,
+        '$1<Default Extension="fntdata" ContentType="application/x-fontdata"/>',
+      ),
+    )
+  }
+  const list = [...families]
+    .map(([family, slots]) => {
+      const children = SLOTS.flatMap((slot) => {
+        const part = slots.get(slot)
+        return part ? [`<p:${slot} r:id="${id(part)}"/>`] : []
+      })
+      return `<p:embeddedFont><p:font typeface="${escapeXml(family)}"/>${children.join('')}</p:embeddedFont>`
+    })
+    .join('')
+  zip.file(
+    presentationPath,
+    presentation
+      .replace(
+        NOTES_SIZE,
+        (anchor) => `${anchor}<p:embeddedFontLst>${list}</p:embeddedFontLst>`,
+      )
+      .replace('<p:presentation ', '<p:presentation embedTrueTypeFonts="1" '),
+  )
+  return notices
+}