@codename/deck 0.3.0 → 0.4.0

package/src/render.js

@@ -3,13 +3,19 @@
 // policy can draw a deck. Each block that can be changed by hand says where its words are in the
 // source (data-edit, offsets), so an edit made on the slide goes back into the Markdown. HTML a
 // deck holds is not drawn: Slidev's <v-click> and <v-clicks> become steps, <br> a line break, and
-// any other tag gives up its words alone. ```echarts and ```mermaid go to the host's drawers.
-import { STANDARD, CORNERS, inferLayout, ALIASES } from './kit.js'
+// any other tag gives up its words alone. ```echarts and ```mermaid go to the host's drawers. A
+// layout that draws its lists as a mind map has a slot's lists merged into one map (mindmap.js);
+// one that draws them as a figure (cards, numbers, a timeline…), or sets its parts face to face or
+// in a matrix, or shows the deck's contents, has them drawn so (figures.js).
+import { STANDARD, CORNERS, layoutNameOf } from './kit.js'
+import { itemsOf, mergeItems, keyOf, watchMap } from './mindmap.js'
+import { entriesOf, boldLines, listFigure, partHeads, partsFigure, contentsFigure } from './figures.js'
+import { parseYaml } from './yaml.js'
 
 /** @typedef {import('./parse.js').Slide} Slide */
 /** @typedef {import('./parse.js').Slot} Slot */
-/** @typedef {(element: HTMLElement, source: string) => void | Promise<void>} Drawer */
-/** @typedef {{ blocks: Record<string, Drawer>, resolve: (src: string) => string | null, headings: 'real' | 'aria', number: (n: number) => string, total: number, kit: import('./kit.js').Kit, lex: (markdown: string) => any[], slide: string }} Context */
+/** @typedef {(element: HTMLElement, source: string, options?: Record<string, any>) => void | Promise<void>} Drawer */
+/** @typedef {{ blocks: Record<string, Drawer>, resolve: (src: string) => string | null, headings: 'real' | 'aria', number: (n: number) => string, total: number, kit: import('./kit.js').Kit, lex: (markdown: string) => any[], slide: string, deck?: import('./parse.js').Deck }} Context */
 
 /**
  * @param {string} tag @param {Record<string, string | number | boolean | undefined>} [attributes]
@@ -36,8 +42,7 @@ export function safeUrl(href) {
  */
 export function renderSlide(slide, context) {
   // The layout the slide names, by its name or a name brains give it, else the one its content suits.
-  const asked = String(slide.settings.layout ?? '').trim().toLowerCase()
-  const layout = context.kit.layouts[asked] ? asked : context.kit.layouts[ALIASES[asked]] ? ALIASES[asked] : inferLayout(slide)
+  const layout = layoutNameOf(slide, context.kit)
   const definition = context.kit.layouts[layout] ?? STANDARD.layouts.default
   const classes = String(slide.settings.class ?? '').split(/\s+/).filter((name) => ['invert', 'text-center', 'text-left'].includes(name))
   const counter = { step: 0 }
@@ -58,7 +63,7 @@ export function renderSlide(slide, context) {
   canvas.style.setProperty('grid-template-rows', definition.rows.join(' '))
   section.append(canvas)
   const image = slide.settings.image ?? slide.settings.background
-  if (typeof image === 'string' && ['image-left', 'image-right', 'image', 'cover'].includes(layout)) {
+  if (typeof image === 'string' && ['image-left', 'image-right', 'image', 'cover', 'quote'].includes(layout)) {
     const url = context.resolve(image)
     if (url) {
       const picture = h('div', { class: 'deck-image', role: 'img', 'aria-label': String(slide.settings.alt ?? '') || undefined })
@@ -69,10 +74,13 @@ export function renderSlide(slide, context) {
   }
   for (const name of names) {
     const slot = slots.get(name)
-    const element = h('div', { class: 'deck-slot', 'data-slot': name }, slot ? blocks(slot, context, counter) : [])
+    const element = h('div', { class: 'deck-slot', 'data-slot': name }, slot ? blocks(slot, context, counter, definition.lists, definition.parts) : [])
     element.style.setProperty('grid-area', `s-${name}`)
     canvas.append(element)
   }
+  // The deck's contents, under the words of the slot they open.
+  const contents = definition.contents && contentsFigure(context, slide.index, Number(slide.settings.maxDepth) || undefined)
+  if (contents) canvas.querySelector(`.deck-slot[data-slot="${names[0]}"]`)?.append(contents)
   // Slots a layout doesn't have still show, under the rest, rather than being lost.
   for (const slot of slide.slots) if (!names.includes(slot.name)) canvas.append(h('div', { class: 'deck-slot', 'data-slot': slot.name }, blocks(slot, context, counter)))
   if (definition.numbered && slide.settings.paginate !== false) section.append(h('span', { class: 'deck-number', 'aria-hidden': 'true' }, [context.number(slide.index + 1)]))
@@ -87,15 +95,50 @@ export function renderSlide(slide, context) {
   return { element: section, steps: counter.step }
 }
 
-/** @param {Slot} slot @param {Context} context @param {{ step: number }} counter @returns {Node[]} */
-function blocks(slot, context, counter) {
+/**
+ * @param {Slot} slot @param {Context} context @param {{ step: number }} counter
+ * @param {import('./kit.js').List} [kind] how its lists are drawn @param {'none' | 'versus' | 'matrix'} [parted] how its parts are set @returns {Node[]}
+ */
+function blocks(slot, context, counter, kind = 'bullets', parted = 'none') {
   const tokens = context.lex(slot.text)
   /** @type {Node[]} */
   const out = []
+  // Its parts, each from its heading, and where they go; the blocks of the part being drawn go to it.
+  const heads = parted === 'none' ? new Set() : partHeads(tokens, parted === 'versus' ? 2 : 4)
+  /** @type {Node[][]} */
+  const parts = []
+  let sink = out, partsAt = -1
+  const mapped = kind === 'mindmap' && !heads.size, figured = kind !== 'bullets' && kind !== 'mindmap' && !heads.size
+  // A figure's entries, and where it goes.
+  /** @type {import('./figures.js').Entry[]} */
+  const entries = []
+  let figureAt = -1
+  // A mind map's lists, each with its heading when one comes just before it, and where the map goes.
+  /** @type {{ items: import('./mindmap.js').Item[], step: boolean }[]} */
+  const lists = []
+  let mapAt = -1, label = /** @type {HTMLElement | null} */ (null)
   let at = slot.start, mode = /** @type {'' | 'click' | 'clicks'} */ ('')
-  for (const token of tokens) {
+  for (const [i, token] of tokens.entries()) {
     const start = at
     at += token.raw.length
+    if (heads.has(i)) { if (partsAt < 0) partsAt = out.length; parts.push(sink = []) }
+    if (figured && (token.type === 'list' || boldLines(token))) {
+      if (figureAt < 0) figureAt = out.length
+      // A click an entry in <v-clicks>, one for them all in <v-click>, numbered where they are.
+      const found = entriesOf(token, start, context.lex), once = mode === 'click' ? ++counter.step : 0
+      for (const entry of found) entry.step = once || (mode === 'clicks' ? ++counter.step : 0)
+      entries.push(...found)
+      continue
+    }
+    if (mapped && (token.type === 'list' || (token.type === 'heading' && out.length && tokens.slice(i + 1).find((/** @type {any} */ t) => t.type !== 'space')?.type === 'list'))) {
+      if (mapAt < 0) mapAt = out.length
+      if (token.type === 'heading') { label = /** @type {HTMLElement} */ (block(token, start, context, null)); continue }
+      const items = itemsOf(token.raw, start)
+      for (const item of items) if (mode === 'clicks') item.step = true
+      lists.push({ items: label ? [{ text: label.textContent ?? '', start, end: start, children: items, element: label, step: mode === 'clicks' }] : items, step: mode === 'clicks' })
+      label = null
+      continue
+    }
     // Pandoc's fences: `::: incremental` shows its list a point a click, as <v-clicks> does; the others, nothing.
     const fences = token.type === 'paragraph' ? token.raw.trim().split('\n').map((/** @type {string} */ line) => line.trim()) : []
     if (fences.length && fences.every((/** @type {string} */ line) => /^:{3,}/.test(line))) {
@@ -107,7 +150,7 @@ function blocks(slot, context, counter) {
     }
     if (token.type === 'html') {
       const tag = /^\s*<(\/?)(v-clicks?|br)\b[^>]*>\s*$/i.exec(token.raw)
-      if (tag && tag[2] === 'br') out.push(h('br'))
+      if (tag && tag[2] === 'br') sink.push(h('br'))
       else if (tag) mode = tag[1] ? '' : /** @type {'click' | 'clicks'} */ (tag[2].toLowerCase() === 'v-clicks' ? 'clicks' : 'click')
       else if (/<li\b/i.test(token.raw)) {
         // A list written as HTML, as brains write Slidev's steps (<li v-click>): its items' words, each
@@ -120,30 +163,79 @@ function blocks(slot, context, counter) {
           if (/\bv-click\b/.test(attrs) || mode === 'clicks') step(li, ++counter.step)
           list.append(li)
         }
-        if (list.childElementCount) out.push(list)
+        if (list.childElementCount) sink.push(list)
       } else {
         const words = token.raw.replace(/<!--[\s\S]*?-->/g, '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
-        if (words) out.push(h('p', {}, [words]))
+        if (words) sink.push(h('p', {}, [words]))
       }
       continue
     }
     const element = block(token, start, context, mode === 'clicks' ? counter : null)
     if (!element) continue
     if (mode === 'click' || (mode === 'clicks' && token.type !== 'list')) step(element, ++counter.step)
-    out.push(element)
+    sink.push(element)
   }
+  if (lists.length) mindmap(out, lists.flatMap((list) => list.items), context, counter, mapAt)
+  if (entries.length) out.splice(figureAt, 0, listFigure(kind, entries, context))
+  if (parts.length) out.splice(partsAt, 0, partsFigure(parted, parts))
   return out
 }
 
+/**
+ * A slot's lists as one mind map, put among its other blocks where the first list was: merged, under the item they share, else under the heading the slot opens with, taken
+ * from the slot into the map; a heading other than that one stays the slide's. Each branch is a step when its list was
+ * one a click. Its words keep where they are in the source, so they change in place as a list's do; a chart or a
+ * diagram fenced under an item is drawn in its node, under its words.
+ * @param {Node[]} out the slot's other blocks @param {import('./mindmap.js').Item[]} items @param {Context} context
+ * @param {{ step: number }} counter @param {number} at where the map goes
+ */
+function mindmap(out, items, context, counter, at) {
+  const merged = mergeItems(items)
+  const opening = at > 0 && out[0] instanceof HTMLElement && out[0].matches('h1, h2, h3, h4, h5, h6, .deck-h') ? out[0] : null
+  /** @type {import('./mindmap.js').Item} */
+  let root
+  if (merged.length === 1 && (!opening || keyOf(opening.textContent ?? '') === keyOf(merged[0].text))) root = { ...merged[0], element: opening ?? merged[0].element }
+  else if (merged.length === 1) root = merged[0]
+  else root = { text: opening?.textContent ?? '', start: 0, end: 0, children: merged, element: opening ?? undefined }
+  if (opening && root.element === opening) { out.shift(); at-- }
+  const node = (/** @type {import('./mindmap.js').Item} */ item, /** @type {number} */ depth) => {
+    if (item.element) { item.element.classList.add('deck-map-node'); item.element.setAttribute('data-depth', String(depth)); return item.element }
+    const [first] = item.text ? context.lex(item.text) : []
+    const words = inline(first?.tokens ?? [{ type: 'text', text: item.text }], context)
+    if (!item.blocks?.length) return h('span', { class: 'deck-map-node', 'data-depth': depth, dir: 'auto', 'data-edit': range(item.start, item.end) }, words)
+    return h('div', { class: 'deck-map-node has-block', 'data-depth': depth }, [
+      item.text ? h('span', { class: 'deck-map-words', dir: 'auto', 'data-edit': range(item.start, item.end) }, words) : null,
+      ...item.blocks.map((one) => block({ type: 'code', lang: one.lang, text: one.text, raw: one.text }, item.start, context, null)),
+    ])
+  }
+  /** @type {(item: import('./mindmap.js').Item, depth: number) => HTMLElement} */
+  const tree = (item, depth) => h('li', {}, [node(item, depth), item.children.length ? h('ul', {}, item.children.map((child) => tree(child, depth + 1))) : null])
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('class', 'deck-map-lines')
+  svg.setAttribute('aria-hidden', 'true')
+  svg.setAttribute('preserveAspectRatio', 'none')
+  const branches = root.children.map((child, n) => {
+    const li = tree(child, 1), group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+    for (const one of [li, group]) one.setAttribute('data-branch', String((n % 6) + 1))
+    if (child.step) { const k = ++counter.step; step(li, k); step(group, k) }
+    svg.append(group)
+    return li
+  })
+  const top = h('li', {}, [node(root, 0), branches.length ? h('ul', {}, branches) : null])
+  const map = h('div', { class: 'deck-mindmap' }, [h('div', { class: 'deck-map-plane' }, [svg, h('ul', { class: 'deck-map-tree' }, [top])])])
+  watchMap(map)
+  out.splice(at, 0, map)
+}
+
 /** @param {Element} element @param {number} n */
-const step = (element, n) => { element.classList.add('deck-step'); element.setAttribute('data-step', String(n)) }
+export const step = (element, n) => { element.classList.add('deck-step'); element.setAttribute('data-step', String(n)) }
 
 /**
  * @param {any} token @param {number} start where its raw starts in the source
  * @param {Context} context @param {{ step: number } | null} stepped list items each a step
  * @returns {HTMLElement | null}
  */
-function block(token, start, context, stepped) {
+export function block(token, start, context, stepped) {
   switch (token.type) {
     case 'heading': {
       const head = /^\s*#{1,6}[ \t]+/.exec(token.raw)
@@ -185,7 +277,7 @@ function block(token, start, context, stepped) {
       if (drawer) {
         const box = h('div', { class: `deck-block deck-${lang}`, 'data-source': token.text })
         box.append(h('pre', { class: 'deck-block-source', dir: 'ltr' }, [h('code', {}, [token.text])]))
-        queueMicrotask(() => Promise.resolve(drawer(box, token.text)).catch(() => box.classList.add('is-failed')))
+        queueMicrotask(() => Promise.resolve(drawer(box, token.text, optionsOf(token.lang ?? ''))).catch(() => box.classList.add('is-failed')))
         return box
       }
       const marked = lines(info[2] ?? '')
@@ -214,6 +306,17 @@ function children(tokens, start, raw, context) {
   })
 }
 
+/**
+ * The options after a fence's language, as Slidev writes them (`mermaid {theme: 'neutral', scale: 0.8}`), read as YAML's
+ * flow, which JSON is too; none if they don't read. @param {string} info @returns {Record<string, any>}
+ */
+export function optionsOf(info) {
+  const braces = /\{[\s\S]*\}/.exec(info)?.[0]
+  if (!braces) return {}
+  const read = parseYaml(`options: ${braces.replace(/\n/g, ' ')}`).options
+  return read && typeof read === 'object' && !Array.isArray(read) ? read : {}
+}
+
 /** Line numbers as Slidev marks them, `{2,4-5}`; `|` steps are read as all their lines at once. @param {string} text */
 function lines(text) {
   const marked = new Set()
@@ -225,7 +328,7 @@ function lines(text) {
 }
 
 /** @param {number} from @param {number} to */
-const range = (from, to) => (to > from ? `${from}-${to}` : undefined)
+export const range = (from, to) => (to > from ? `${from}-${to}` : undefined)
 
 /** @param {any[]} tokens @param {Context} context @returns {Node[]} */
 export function inline(tokens = [], context) {

package/src/version.js

@@ -1,2 +1,2 @@
 // deck's version, which a linked file names in its renderer's address. Kept equal to package.json's by a test.
-export const VERSION = '0.3.0'
+export const VERSION = '0.4.0'