@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/outline/list.mjs

@@ -0,0 +1,184 @@
+import { tooltip } from "../tooltip.mjs";
+import { element } from "../ui.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+import { keyAction } from "./tree.mjs";
+
+// The outline's rows (outline/index.mjs puts them in its dock, or in the strip's card): a tree as
+// aria has it (role tree, a treeitem a row with its level, open or folded, the current one
+// aria-current), one tab stop (the current row, else the first), the keys of tree.mjs keyAction.
+// A row's title, cut short, shows whole in the shared tooltip, left of the list (over the gutter,
+// not the rows above); a parent's triangle just short of its title, out of the row's flow (titles of
+// a level line up, a leaf's too), folds or unfolds it (a folded one always
+// shows it, an open one while the pointer is on the rows or the keyboard is in the list: STYLE in
+// index.mjs); a click elsewhere on the row goes to its heading. The strip (strip.mjs) lights a row
+// from outside (hot): the one its line under the pointer stands for, filled as under the pointer, a
+// blue segment on the guide.
+
+export const ROW = 28; // a row's height
+const MARK = 16; // the current row's segment on the guide (and the hot row's)
+
+/**
+ * The list's geometry (px from its left edge, where the column's right room ends: margin.mjs; index.mjs
+ * STYLE draws it): the guide's hairline at `guide` (its grip from MARGIN.grip left of it to 5px right);
+ * the rows from `row` (their fill 2px clear of the hairline, a top-level row's a `step` further left to take in
+ * its triangle: index.mjs STYLE); a title `text` into its row, `step`
+ * further a level (the top level's 26px in, 8px clear of the hairline; a tab's pill 22px in, 4px clear);
+ * a parent's triangle `twist` wide (its 16px glyph centered on it) in its row's indentation, `gap`
+ * short of its title at every level (the top level's from 11px in, on the hairline and its grip, which it
+ * stands over while shown; the next level's from 23px in). Until 2026-11-07 the top level's stood in the
+ * list's first 13px, left of the guide, which the user found too far from their titles.
+ */
+export const LIST = Object.freeze({ twist: 13, guide: 17, row: 20, text: 6, step: 12, gap: 2 });
+
+// A small solid triangle on the 20-unit grid, pointing right (folded); turned down when open.
+export const TRIANGLE = '<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M8 6.5v7l5-3.5z"/></svg>';
+
+const cut = (node) => node.scrollWidth > node.clientWidth + 1;
+
+/**
+ * jump(node, { keyboard }): a row chosen (a click, or Enter or Space: keyboard); fold(node): its
+ * chevron (a click, ← or →); escape(): Esc in the list; page(direction): PageDown (1) or PageUp (-1).
+ * Returns { node (the list), render(rows, folded, marked), mark(marked), focus(index), rowAt(index), holds(target) }.
+ */
+export function createList({ jump, fold, escape, page }) {
+  const node = element("div", { class: "ge-outline-list", role: "tree", "aria-label": t("目录") });
+  const segment = element("span", { class: "ge-outline-mark", "aria-hidden": "true" });
+  const hotSegment = element("span", { class: "ge-outline-mark", "data-hot": "", "aria-hidden": "true", hidden: "" });
+  const empty = element("div", { class: "ge-outline-empty", text: t("添加标题后，这里会列出它们") });
+  let rows = [];
+  let folded = new Set();
+  let marked = -1;
+  let hot = -1;
+  let rowNodes = [];
+
+  function rowFor({ node: item, depth, parent }, index) {
+    const label = element("span", { class: "ge-outline-text" });
+    const named = item.kind === "tab" ? element("span", { class: "ge-outline-tab", text: item.text }) : label;
+    if (item.kind === "tab") label.append(named);
+    else label.textContent = item.text;
+    const open = !folded.has(item.key);
+    const twist = item.children.length ? [element("span", { class: "ge-outline-twist", role: "button", "aria-label": open ? t("折叠") : t("展开"), html: TRIANGLE })] : [];
+    const row = element("div", { class: "ge-outline-row", role: "treeitem", tabindex: "-1", "aria-level": String(depth + 1), "data-index": String(index), "data-kind": item.kind }, ...twist, label);
+    row.style.setProperty("--ge-depth", String(depth));
+    if (item.kind === "tab" && item.shown) row.dataset.shown = "";
+    // The top level's headings (bold): at the top, or right under a tab (a tab's own top level).
+    if (item.kind === "heading" && (parent < 0 || rows[parent]?.node.kind === "tab")) row.dataset.top = "";
+    if (item.children.length) row.setAttribute("aria-expanded", String(open));
+    tooltip(row, () => (cut(named) ? item.text : null), null, { placement: "left", align: "center", gap: LIST.row + 8 });
+    return row;
+  }
+
+  /** Draw `rows` (tree.mjs rowsOf) with what is `folded`, row `marked` the current one. */
+  function render(next, nextFolded, nextMarked) {
+    const focusedKey = node.contains(document.activeElement) ? rows[Number(document.activeElement.dataset?.index)]?.node.key : null;
+    rows = next;
+    folded = nextFolded;
+    rowNodes = rows.map(rowFor);
+    node.replaceChildren(...rowNodes, ...(rows.length ? [segment, hotSegment] : [empty]));
+    node.toggleAttribute("data-empty", rows.length === 0);
+    marked = -2;
+    mark(nextMarked);
+    const wasHot = hot;
+    hot = -2;
+    light(wasHot);
+    if (focusedKey !== null) {
+      const again = rows.findIndex((row) => row.node.key === focusedKey);
+      focus(again >= 0 ? again : Math.max(0, Math.min(rows.length - 1, marked)));
+    }
+  }
+
+  /** The rows' data, the same rows drawn (the tree read again, its elements new: an undo put them back). */
+  function update(next) {
+    rows = next;
+  }
+
+  /** Row `index` the current one (-1: none). */
+  function mark(index) {
+    if (index === marked) return;
+    marked = index;
+    rowNodes.forEach((row, at) => {
+      const current = at === index;
+      row.toggleAttribute("data-current", current);
+      if (current) row.setAttribute("aria-current", "location");
+      else row.removeAttribute("aria-current");
+    });
+    const stop = index >= 0 ? index : 0;
+    rowNodes.forEach((row, at) => { row.tabIndex = at === stop ? 0 : -1; });
+    place(segment, index);
+  }
+
+  // A segment on the guide by row `index` (rows stand ROW apart, measured or not: the card closed).
+  function place(mark, index) {
+    mark.hidden = !rowNodes[index];
+    if (!mark.hidden) mark.style.transform = `translateY(${index * ROW + (ROW - MARK) / 2}px)`;
+  }
+
+  /** Row `index` lit from outside (the strip's line under the pointer; -1: none). Returns its node. */
+  function light(index) {
+    if (index === hot) return rowNodes[index] ?? null;
+    rowNodes[hot]?.removeAttribute("data-hot");
+    hot = rowNodes[index] ? index : -1;
+    rowNodes[hot]?.setAttribute("data-hot", "");
+    place(hotSegment, hot);
+    return rowNodes[hot] ?? null;
+  }
+
+  function focus(index) {
+    const row = rowNodes[index];
+    if (!row) return;
+    rowNodes.forEach((other) => { other.tabIndex = other === row ? 0 : -1; });
+    row.focus({ preventScroll: true });
+    const box = row.closest(".ge-outline-scroll");
+    if (!box) return;
+    const top = row.getBoundingClientRect().top - box.getBoundingClientRect().top + box.scrollTop;
+    if (top < box.scrollTop) box.scrollTop = top - 4;
+    else if (top + ROW > box.scrollTop + box.clientHeight) box.scrollTop = top + ROW - box.clientHeight + 4;
+  }
+
+  const indexOf = (target) => Number(target?.closest?.(".ge-outline-row")?.dataset.index ?? -1);
+
+  node.addEventListener("click", (event) => {
+    const index = indexOf(event.target);
+    if (index < 0 || !rows[index]) return;
+    if (event.target.closest(".ge-outline-twist")) fold(rows[index].node);
+    else jump(rows[index].node, { keyboard: event.detail === 0 });
+  });
+  node.addEventListener("keydown", (event) => {
+    // Ctrl/⌘+A selects nothing here (the rows are no text; the page's select-all is the text's).
+    if ((event.ctrlKey || event.metaKey) && !event.altKey && event.key.toLowerCase() === "a") {
+      event.preventDefault();
+      return;
+    }
+    if (event.ctrlKey || event.metaKey || event.altKey || event.isComposing) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      escape();
+      return;
+    }
+    if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      page?.(event.key === "PageDown" ? 1 : -1);
+      return;
+    }
+    const index = indexOf(event.target);
+    const action = index >= 0 ? keyAction(rows, index, event.key, folded) : null;
+    if (!action) return;
+    event.preventDefault();
+    if ("focus" in action) focus(action.focus);
+    else if (action.fold || action.unfold) fold(action.fold ?? action.unfold);
+    else if (action.jump) jump(action.jump, { keyboard: true });
+  });
+
+  return {
+    node,
+    render,
+    update,
+    mark,
+    light,
+    focus,
+    get marked() { return marked; },
+    get hot() { return hot; },
+    rowAt: (index) => rowNodes[index] ?? null,
+    holds: (target) => node.contains(target),
+  };
+}

package/browser/editor/page/outline/read.mjs

@@ -0,0 +1,201 @@
+import { SHEETS } from "../../components/kit.mjs";
+
+// What the outline lists, read from the page (outline/tree.mjs's entries): the heading blocks (h1-h4
+// the editor knows as headings, data-ge-unit-kind="heading", in the file or made on the page) in the
+// page's flows: sections, plain boxes, highlight panels, rows of columns, disclosures, tab panels. Not
+// the report's title (the header's: the page's name), a detail card's headings (a dialog, not on the
+// page), a component's own title (a figure's or a chart's, which is no heading block), nor a heading in a
+// table or a list (a flowchart's step). A row of columns, a disclosure and a tab's panel keep their
+// headings to themselves (tree.mjs "scope"); a tabs area lists its tabs in their row's order, the hidden
+// ones too, each with its panel's headings. A heading with no text (just made) has no row yet.
+
+export const HEADING = ':is(h1, h2, h3, h4)[data-ge-unit-kind="heading"]';
+export const LEFT_OUT = "dialog, figure, table, li, .doc-header, template, [data-doc-dev]";
+const SCOPES = ".doc-columns, details";
+
+// ---------- a formula as a row reads it ----------
+
+const SYMBOLS = {
+  alpha: "α", beta: "β", gamma: "γ", delta: "δ", epsilon: "ε", varepsilon: "ε", zeta: "ζ", eta: "η", theta: "θ", vartheta: "ϑ", iota: "ι", kappa: "κ",
+  lambda: "λ", mu: "μ", nu: "ν", xi: "ξ", pi: "π", rho: "ρ", sigma: "σ", tau: "τ", upsilon: "υ", phi: "φ", varphi: "φ", chi: "χ", psi: "ψ", omega: "ω",
+  Gamma: "Γ", Delta: "Δ", Theta: "Θ", Lambda: "Λ", Xi: "Ξ", Pi: "Π", Sigma: "Σ", Upsilon: "Υ", Phi: "Φ", Psi: "Ψ", Omega: "Ω",
+  times: "×", cdot: "·", div: "÷", pm: "±", mp: "∓", le: "≤", leq: "≤", ge: "≥", geq: "≥", ne: "≠", neq: "≠", approx: "≈", sim: "∼", simeq: "≃",
+  equiv: "≡", propto: "∝", infty: "∞", to: "→", rightarrow: "→", leftarrow: "←", Rightarrow: "⇒", Leftarrow: "⇐", leftrightarrow: "↔",
+  Leftrightarrow: "⇔", mapsto: "↦", sum: "∑", prod: "∏", int: "∫", oint: "∮", partial: "∂", nabla: "∇", in: "∈", notin: "∉", ni: "∋",
+  subset: "⊂", subseteq: "⊆", supset: "⊃", supseteq: "⊇", cup: "∪", cap: "∩", emptyset: "∅", varnothing: "∅", forall: "∀", exists: "∃",
+  neg: "¬", land: "∧", wedge: "∧", lor: "∨", vee: "∨", ldots: "…", cdots: "⋯", dots: "…", circ: "∘", degree: "°", prime: "′", angle: "∠",
+  perp: "⊥", parallel: "∥", ll: "≪", gg: "≫", langle: "⟨", rangle: "⟩", lvert: "|", rvert: "|", vert: "|", mid: "|", percent: "%",
+};
+const SPACED = new Set(["×", "·", "÷", "±", "∓", "≤", "≥", "≠", "≈", "∼", "≃", "≡", "∝", "→", "←", "⇒", "⇐", "↔", "⇔", "↦", "∈", "∉", "∋", "⊂", "⊆", "⊃", "⊇", "∪", "∩", "∧", "∨", "∘", "≪", "≫", "∥", "⊥"]); // written with a space on each side
+const NAMED = new Set(["log", "ln", "lg", "sin", "cos", "tan", "cot", "sec", "csc", "exp", "lim", "max", "min", "sup", "inf", "det", "arg", "deg", "gcd", "mod", "Pr"]);
+const KEPT = new Set(["text", "textrm", "textbf", "textit", "mathrm", "mathbf", "mathit", "mathsf", "mathtt", "mathcal", "mathbb", "mathfrak", "boldsymbol", "bm", "operatorname", "mbox", "hbox", "overline", "underline", "widehat", "widetilde", "hat", "tilde", "bar", "vec", "dot", "ddot", "displaystyle", "textstyle"]);
+const DROPPED = new Set(["left", "right", "big", "Big", "bigg", "Bigg", "bigl", "bigr", "Bigl", "Bigr", "limits", "nolimits"]);
+const SPACES = { ",": " ", ";": " ", ":": " ", "!": "", " ": " ", quad: " ", qquad: " ", "\\": " " };
+const UP = { 0: "⁰", 1: "¹", 2: "²", 3: "³", 4: "⁴", 5: "⁵", 6: "⁶", 7: "⁷", 8: "⁸", 9: "⁹", "+": "⁺", "-": "⁻", "=": "⁼", "(": "⁽", ")": "⁾", n: "ⁿ", i: "ⁱ", "′": "′" };
+const DOWN = { 0: "₀", 1: "₁", 2: "₂", 3: "₃", 4: "₄", 5: "₅", 6: "₆", 7: "₇", 8: "₈", 9: "₉", "+": "₊", "-": "₋", "=": "₌", "(": "₍", ")": "₎" };
+
+/**
+ * A formula's TeX as a row reads it (a line of plain text, not drawn): Greek letters and the usual
+ * signs as their characters, \frac{a}{b} as a/b, \sqrt{x} as √x, a power or an index of digits raised
+ * or lowered (x^2 as x², a_1 as a₁; others written x^n, x_ij as they are), \text{…} and its kind as
+ * their words, \left and \right left out, a chemical formula's numbers lowered (\ce{H2O} as H₂O).
+ */
+export function texReading(tex) {
+  let at = 0;
+  const group = () => { // what a command or a script takes: {…}, a command, or one character
+    while (tex[at] === " ") at++;
+    if (tex[at] === "{") {
+      let depth = 0;
+      const from = at;
+      for (; at < tex.length; at++) {
+        if (tex[at] === "\\") at++;
+        else if (tex[at] === "{") depth++;
+        else if (tex[at] === "}" && --depth === 0) break;
+      }
+      at++;
+      return texReading(tex.slice(from + 1, at - 1));
+    }
+    if (tex[at] === "\\") return read(true);
+    return tex[at++] ?? "";
+  };
+  const wrapped = (text) => (text.length > 1 && /[\s+\-−×·/=]/.test(text) ? `(${text})` : text);
+  const script = (text, map, mark) => {
+    const bare = text.replace(/\s+/g, "");
+    if (!bare) return "";
+    return [...bare].every((char) => map[char]) ? [...bare].map((char) => map[char]).join("") : `${mark}${wrapped(bare)}`;
+  };
+  function read(one = false) {
+    let out = "";
+    while (at < tex.length) {
+      const char = tex[at];
+      if (char === "\\") {
+        at++;
+        const name = /[A-Za-z]/.test(tex[at] ?? "") ? tex.slice(at).match(/^[A-Za-z]+/)[0] : tex[at] ?? "";
+        at += name.length;
+        if (/^[A-Za-z]/.test(name)) while (tex[at] === " ") at++; // the space ending a command's name is no space
+        let piece;
+        if (name in SPACES) piece = SPACES[name];
+        else if (name === "frac" || name === "dfrac" || name === "tfrac") piece = `${wrapped(group())}/${wrapped(group())}`;
+        else if (name === "sqrt") {
+          if (tex[at] === "[") at = tex.indexOf("]", at) + 1 || tex.length;
+          piece = `√${wrapped(group())}`;
+        } else if (name === "ce") piece = group().replace(/(?<=[A-Za-z)\]])(\d+)/g, (digits) => script(digits, DOWN, "_"));
+        else if (KEPT.has(name)) piece = group();
+        else if (DROPPED.has(name)) piece = "";
+        else if (SYMBOLS[name]) piece = SPACED.has(SYMBOLS[name]) ? ` ${SYMBOLS[name]} ` : SYMBOLS[name];
+        else if (NAMED.has(name)) piece = /[A-Za-z\\]/.test(tex[at] ?? "") ? `${name} ` : name; // sin θ, log₂ n
+        else piece = name;
+        out += piece;
+      } else if (char === "^" || char === "_") {
+        at++;
+        out += script(group(), char === "^" ? UP : DOWN, char);
+      } else if (char === "{") out += group();
+      else if (char === "}") at++;
+      else if (char === "~") { out += " "; at++; }
+      else if (char === "=" || char === "+" || char === "<" || char === ">") { out += ` ${char} `; at++; }
+      else { out += char; at++; }
+      if (one) break;
+    }
+    return out;
+  }
+  return read().replace(/\s+/g, " ").trim();
+}
+
+/**
+ * A heading's text as its row shows it: spaces as one, an inline formula as it reads (texReading),
+ * a link shown with its icon as its title, inline code and marks as their text; what the editor adds
+ * (pads, its own nodes) left out.
+ */
+export function headingText(heading) {
+  const copy = heading.cloneNode(true);
+  for (const math of copy.querySelectorAll(".katex")) {
+    const tex = math.querySelector('annotation[encoding="application/x-tex"]')?.textContent;
+    math.replaceWith(tex === undefined ? math.textContent : texReading(tex));
+  }
+  for (const inline of copy.querySelectorAll(".doc-math-inline")) {
+    const text = inline.textContent;
+    const tex = text.match(/^\s*\\\(([\s\S]*)\\\)\s*$/);
+    inline.textContent = tex ? texReading(tex[1]) : text;
+  }
+  for (const node of copy.querySelectorAll('[data-doc-dev], [aria-hidden="true"], script, style')) node.remove();
+  return copy.textContent.replace(/[​⁠]/g, "").replace(/\s+/g, " ").trim();
+}
+
+const tabText = (tab) => tab.textContent.replace(/[​⁠]/g, "").replace(/\s+/g, " ").trim();
+
+/** The entries of `main` (tree.mjs), each heading's and tab's element as its `ref`. */
+export function entriesOf(main) {
+  const heads = new Set([...main.querySelectorAll(HEADING)].filter((heading) => !heading.closest(LEFT_OUT)));
+  const holding = new Set(); // the boxes on the way to a heading: the only ones walked into
+  for (const heading of heads) {
+    for (let node = heading.parentElement; node && node !== main && !holding.has(node); node = node.parentElement) holding.add(node);
+  }
+  const named = new Map(); // a heading with no block id is named by its level and text, the second of a name numbered
+  const keyOf = (heading, text) => {
+    const id = heading.getAttribute("data-block-id");
+    if (id) return `b:${id}`;
+    const base = `t:${heading.localName}:${text}`;
+    const seen = named.get(base) ?? 0;
+    named.set(base, seen + 1);
+    return seen ? `${base}#${seen}` : base;
+  };
+
+  // A tabs area by its name (data-doc-sheets: what the report calls it, kept as the editor gives it
+  // a block id, so a fold of its tab stays), else its block id; a second area of a name numbered.
+  const areas = new Map();
+  const areaKeyOf = (area) => {
+    const base = area.getAttribute("data-doc-sheets") || area.getAttribute("data-block-id") || "tabs";
+    const seen = areas.get(base) ?? 0;
+    areas.set(base, seen + 1);
+    return seen ? `${base}#${seen}` : base;
+  };
+
+  function tabsOf(area) {
+    const row = area.querySelector(SHEETS.row);
+    const areaKey = areaKeyOf(area);
+    const panels = [...area.children].filter((child) => child.hasAttribute(SHEETS.panelKey));
+    const tabs = row ? [...row.querySelectorAll(SHEETS.tabsOfRow)] : [];
+    return {
+      kind: "tabs",
+      key: `a:${areaKey}`,
+      tabs: tabs.map((tab) => {
+        const id = tab.getAttribute(SHEETS.tabKey);
+        const panel = panels.find((candidate) => candidate.getAttribute(SHEETS.panelKey) === id) ?? null;
+        return { key: `tab:${areaKey}:${id}`, text: tabText(tab), shown: Boolean(panel && !panel.hidden), ref: tab, entries: panel && holding.has(panel) ? walk(panel) : [] };
+      }),
+    };
+  }
+
+  function walk(container) {
+    const out = [];
+    for (const child of container.children) {
+      if (heads.has(child)) {
+        const text = headingText(child);
+        if (text) out.push({ kind: "heading", key: keyOf(child, text), level: Number(child.localName[1]), text, ref: child });
+      } else if (!holding.has(child)) continue;
+      else if (child.matches(SHEETS.match)) out.push(tabsOf(child));
+      else if (child.matches(SCOPES)) out.push({ kind: "scope", entries: walk(child) });
+      else out.push(...walk(child));
+    }
+    return out;
+  }
+  return walk(main);
+}
+
+const LISTED = `${HEADING}, ${SHEETS.tab}, ${SHEETS.match}`;
+const lists = (node) => node.nodeType === 1 && (node.matches(LISTED) || node.querySelector(LISTED) !== null);
+
+/**
+ * Whether a change of the page (a MutationObserver's records) may change what the outline lists: an
+ * attribute it reads, text in a heading or a tab, a heading, a tab or a tabs area put in or taken out
+ * (or a box holding one); not the words typed in other text, nor what holds no heading.
+ */
+export function touchesOutline(records) {
+  for (const record of records) {
+    if (record.type === "attributes") return true;
+    const at = record.target.nodeType === 1 ? record.target : record.target.parentElement;
+    if (at?.closest?.(`${HEADING}, ${SHEETS.tab}`)) return true;
+    if (record.type === "childList" && [...record.addedNodes, ...record.removedNodes].some(lists)) return true;
+  }
+  return false;
+}