@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/shared/table-hides.mjs

@@ -0,0 +1,120 @@
+// What a table's frame hides at rest (scrolled to its start): the one measure of the kit's layout
+// notes of a frame and of its fading right edge (render/kit/tables/scrollbars.js: columns-hidden,
+// rows-hidden, data-more; docs/render.md, "Table layout internals") and of gallery qa's look at a
+// table (src/cli/qa.mjs), which puts these functions in the page it looks at as their text
+// (tableHidesScript): so they read nothing outside themselves but each other.
+//
+// A column hides what its words hide, never its cells' padding: the words of each of its cells (the
+// header's and the body's, a merged cell's in the last column it covers) as the page draws them, so a
+// table a few pixels wider than its frame hides nothing, and a long word deep in the body that
+// reaches past the edge is a column cut though its header fits. A column is out of sight when none of
+// its words starts before the frame's right edge, cut when some reach past it and some start before
+// it. The first column that stays as the frame scrolls (a sticky first column, a header column:
+// tables/sticky.js) never hides. A row (of the body's, those a filter hides aside) is shown when its
+// words end above the frame's bottom edge.
+
+/**
+ * The column each cell of `table` ends in, by the HTML table model's slots as src/shared/table-slots.mjs
+ * tiles them (tileSlots: a cell takes the first slot of its row no cell above covers, and covers its
+ * rowspan and colspan from there), read here on its own so that it can go into a page as its text,
+ * and so that a table that does not tile (a hole, a span past its section, a span of 0, read as 1)
+ * still gives each cell a column: { columnOf: Map(cell → its last column), columns: how many }.
+ * tests/unit/qa.mjs holds it to tileSlots on tables that tile.
+ */
+export function cellColumns(table) {
+  const taken = [];
+  const columnOf = new Map();
+  let columns = 0;
+  [...table.rows].forEach((row, r) => {
+    let c = 0;
+    for (const cell of row.cells) {
+      while (taken[r]?.[c]) c++;
+      const across = Math.max(1, cell.colSpan);
+      for (let i = 0; i < Math.max(1, cell.rowSpan); i++) for (let j = 0; j < across; j++) (taken[r + i] ??= [])[c + j] = true;
+      columnOf.set(cell, c + across - 1);
+      c += across;
+      columns = Math.max(columns, c);
+    }
+  });
+  return { columnOf, columns };
+}
+
+/**
+ * Where the words of `cell` are drawn, as one box ({ left, right, top, bottom }, the page's): the
+ * boxes of its text's lines and of what it shows that is no text (a picture, a drawing, a control),
+ * never an element's own box (a list or a paragraph in a cell is as wide as the cell, its words are
+ * not; a formula's MathML, laid out unseen, is no words of it); null when it shows none.
+ */
+export function wordsBox(cell) {
+  const boxes = [];
+  const range = document.createRange();
+  const walker = document.createTreeWalker(cell, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (!node.nodeValue.trim() || node.parentElement?.closest(".katex-mathml")) continue;
+    range.selectNodeContents(node);
+    boxes.push(...range.getClientRects());
+  }
+  for (const element of cell.querySelectorAll("img, svg, canvas, input, video")) boxes.push(element.getBoundingClientRect());
+  const drawn = boxes.filter((box) => box.width > 0 || box.height > 0);
+  if (drawn.length === 0) return null;
+  return {
+    left: Math.min(...drawn.map((box) => box.left)), right: Math.max(...drawn.map((box) => box.right)),
+    top: Math.min(...drawn.map((box) => box.top)), bottom: Math.max(...drawn.map((box) => box.bottom)),
+  };
+}
+
+/**
+ * What the frame `wrapper` (its client box) hides of its `table` at rest: { columns: how many, away
+ * and cut: the columns out of sight and cut, [{ column, name: its first words, the header's }], said:
+ * those columns in words ("of 6 columns, 1 cut at the frame's edge ("结论")", "" for none), reach:
+ * how far from the table's left edge the words past the frame's right edge end (px; 0 when none lies
+ * past it: what the fading edge shows while the frame is not scrolled to it), rows: the body's rows
+ * shown, shown: how many of them the frame shows }.
+ */
+export function tableHides(wrapper, table) {
+  const width = wrapper.clientWidth;
+  const height = wrapper.clientHeight;
+  const box = table.getBoundingClientRect();
+  const holds = (cell) => Boolean((cell.textContent ?? "").trim() || cell.querySelector("img, svg, canvas, input, video"));
+  const { columnOf, columns } = cellColumns(table);
+  const fixed = table.classList.contains("doc-table--sticky-first") || Boolean(table.querySelector(':scope > tbody > tr > th[scope="row"]:first-child'));
+  const before = new Set(); // columns some of whose words start before the edge
+  const past = new Set(); // columns some of whose words reach past it
+  const names = [];
+  let reach = 0;
+  for (const row of table.rows) {
+    if (row.getClientRects().length === 0) continue;
+    for (const cell of row.cells) {
+      const column = columnOf.get(cell);
+      if (names[column] === undefined && cell.colSpan <= 1 && holds(cell)) names[column] = (cell.textContent ?? "").replace(/\s+/g, " ").trim();
+      if (fixed && column === 0) continue;
+      if (cell.getBoundingClientRect().right - box.left <= width + 1) {
+        if (holds(cell)) before.add(column);
+        continue;
+      }
+      const found = wordsBox(cell);
+      if (!found) continue;
+      if (found.left - box.left < width - 1) before.add(column);
+      if (found.right - box.left > width + 1) {
+        past.add(column);
+        reach = Math.max(reach, found.right - box.left);
+      }
+    }
+  }
+  const named = (column) => ({ column, name: names[column] ?? "" });
+  const away = [...past].filter((column) => !before.has(column)).sort((a, b) => a - b).map(named);
+  const cut = [...past].filter((column) => before.has(column)).sort((a, b) => a - b).map(named);
+  const quoted = (list) => `${list.slice(0, 4).map(({ column, name }) => (name ? `"${name.length > 16 ? `${name.slice(0, 15)}…` : name}"` : `column ${column + 1}`)).join(", ")}${list.length > 4 ? ", …" : ""}`;
+  const parts = [cut.length && `${cut.length} cut at the frame's edge (${quoted(cut)})`, away.length && `${away.length} out of sight (${quoted(away)})`].filter(Boolean);
+  const rows = [...table.tBodies].flatMap((body) => [...body.rows]).filter((row) => row.getClientRects().length > 0);
+  const shown = rows.filter((row) => {
+    const { top, bottom } = row.getBoundingClientRect();
+    if (bottom - box.top <= height + 1) return true;
+    if (top - box.top >= height - 1) return false;
+    return Math.max(-Infinity, ...[...row.cells].map(wordsBox).filter(Boolean).map((found) => found.bottom)) - box.top <= height + 1;
+  }).length;
+  return { columns, away, cut, said: parts.length ? `of ${columns} columns, ${parts.join(", ")}` : "", reach, rows: rows.length, shown };
+}
+
+/** tableHides as a script's text, with what it reads (an expression: the function), for a page to measure a table as the kit does. */
+export const tableHidesScript = () => `(() => { ${cellColumns}; ${wordsBox}; return ${tableHides}; })()`;

package/browser/shared/table-slots.mjs

@@ -0,0 +1,75 @@
+// A table's slots (the HTML table model; docs/editor.md, "Tables"): each row has a slot in each
+// column, and a cell covers a rectangle of them, one slot or more when it is merged (its rowspan and
+// colspan). A cell is where its top left slot is ({ r, c }), the table's columns are its slots'
+// columns. The one reading of a table's cells that the kit lays columns out by (render/kit/tables/),
+// the page editor's table tools and operations (editor/components/table/, editor/page/table/) and the
+// server's writing of a table (editor/source/table.mjs, components/table/file.mjs) share: tileSlots
+// is the one tiling, slotsOf and tileSpans give it the cells of a DOM or the spans of an operation,
+// and the cell that holds a column's width is the one columnCells / widthHolder say.
+
+/**
+ * Where cells stand, from their spans alone: rows [{ section, cells: [{ ref, rowspan, colspan }] }]
+ * in order (`section`: what the row belongs to, a thead or a tbody; a cell never spans past it) →
+ * { matrix: per row, the ref covering each slot; places: Map(ref → { r, c, rows, cols }), in reading
+ * order; columns }, or null when the cells do not tile a rectangle (a hole, an overlap, a span past
+ * its section or the table, a span of 0).
+ */
+export function tileSlots(rows) {
+  const matrix = rows.map(() => []);
+  const places = new Map();
+  for (let r = 0; r < rows.length; r++) {
+    let c = 0;
+    for (const { ref, rowspan, colspan } of rows[r].cells) {
+      while (matrix[r][c]) c++;
+      if (!(rowspan >= 1) || !(colspan >= 1)) return null;
+      for (let i = 0; i < rowspan; i++) {
+        if (rows[r + i]?.section !== rows[r].section) return null;
+        for (let j = 0; j < colspan; j++) {
+          if (matrix[r + i][c + j]) return null;
+          matrix[r + i][c + j] = ref;
+        }
+      }
+      places.set(ref, { r, c, rows: rowspan, cols: colspan });
+      c += colspan;
+    }
+  }
+  const columns = matrix[0]?.length ?? 0;
+  // Array holes count as undefined: a slot no cell covers.
+  if (columns === 0 || matrix.some((row) => row.length !== columns || row.includes(undefined))) return null;
+  return { matrix, places, columns };
+}
+
+/**
+ * The slots of a table's rows (tr elements, the thead's first): tileSlots with the cells themselves
+ * as refs, each row's section its parent.
+ */
+export const slotsOf = (rows) => tileSlots(rows.map((row) => ({ section: row.parentElement, cells: [...row.cells].map((cell) => ({ ref: cell, rowspan: cell.rowSpan, colspan: cell.colSpan })) })));
+
+/**
+ * Where cells given by their spans stand, without a DOM (the server's reading of an operation's rows
+ * and of a new table): rows [{ head, cells: [[rowspan, colspan]] }] (the head rows first) → tileSlots
+ * with each cell's "row:index" as its ref.
+ */
+export const tileSpans = (rows) => tileSlots(rows.map((row, r) => ({ section: row.head, cells: row.cells.map(([rowspan, colspan], index) => ({ ref: `${r}:${index}`, rowspan, colspan })) })));
+
+/** The refs of the cells of column `c` alone (beginning there, one column wide), top down. */
+export const columnCells = (slots, c) => [...slots.places].filter(([, place]) => place.c === c && place.cols === 1).map(([ref]) => ref);
+
+/**
+ * The cell that holds column `c`'s width where the table's tools write it (the page editor's
+ * COLUMN_WIDTH): the topmost cell of that column alone, or null (a merged cell holds none).
+ */
+export const widthHolder = (slots, c) => columnCells(slots, c)[0] ?? null;
+
+/**
+ * Each column's width as it is read (the kit lays the table out at them): the first cell of that
+ * column alone, top down, that has one (`widthOf(cell)`: a truthy width or null); null each where
+ * none has.
+ */
+export const columnWidths = (slots, widthOf) => Array.from({ length: slots.columns }, (_, c) => {
+  for (const cell of columnCells(slots, c)) {
+    const width = widthOf(cell);
+    if (width) return width;
+  }
+  return null;
+});

package/browser/shared/words.mjs

@@ -0,0 +1,23 @@
+import { unescapeText } from "./escape.mjs";
+
+// How many words a report holds, as Notion counts a page's (the workbench's menus say it: 129 个字):
+// each Chinese, Japanese or Korean character one, each run of other letters and digits one. What is
+// counted is the text of its main below the header (the title and the icon are not the body): no
+// script, style or template, a formula one word (its TeX is no prose).
+
+const SKIPPED = /<(script|style|template|noscript|svg)\b[\s\S]*?<\/\1>/gi;
+const FORMULA = /\\\([\s\S]*?\\\)|\\\[[\s\S]*?\\\]/g;
+const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/gu;
+const WORD = /[\p{L}\p{N}]+(?:['’.-][\p{L}\p{N}]+)*/gu;
+
+/** The words of report `html` (a whole report.html, or the inside of its main). */
+export function countWords(html) {
+  let body = String(html);
+  const main = /<main\b[^>]*>([\s\S]*)<\/main>/i.exec(body);
+  if (main) body = main[1];
+  body = body.replace(/^\s*<header\b[^>]*>[\s\S]*?<\/header>/i, " "); // the page's header: its title and icon
+  const text = unescapeText(body.replace(SKIPPED, " ").replace(FORMULA, " 公式 ").replace(/<[^>]*>/g, " ").replace(/&nbsp;/g, " ").replace(/&#(\d+);/g, (_, code) => String.fromCodePoint(Number(code))));
+  const formulas = (body.match(FORMULA) ?? []).length;
+  const cjk = (text.match(CJK) ?? []).length - formulas * 2; // "公式" stands for a formula: one word, not two characters
+  return cjk + formulas + (text.replace(CJK, " ").match(WORD) ?? []).length;
+}

package/browser/shared/workspace-look.mjs

@@ -0,0 +1,91 @@
+import { existsSync, readFileSync } from "node:fs";
+import fs from "node:fs/promises";
+import { effectiveLook, lookOf, withLookField } from "./document-look.mjs";
+import { writeAtomic } from "./files.mjs";
+import { refusal, said } from "./i18n/index.mjs";
+import { WORKSPACE_MARK, documentDirectory, documentFiles, layoutOf, markerOf } from "./workspace.mjs";
+
+// The workspace's default look (字体与布局's 应用到全部文档, src/shared/document-look.mjs): `look` in its
+// gallery.json, beside what the file says of the components, each choice that is not the default
+// kept and the field gone when none is. A document shows its own choices (doc.json's `look`) over it,
+// choice by choice, and a document with none of its own, a new one among them, shows it whole. A
+// workspace without it, an older one's, has every choice at its default. The 写作偏好 page (a doc.json
+// marked "instructions": true) has no look, the workspace's or its own. Here for the server alone: the
+// render, the workbench's service and the preview's watcher read it from disk; a page and the
+// workbench's app are told the look a document shows.
+
+// gallery.json as it reads now: what it holds when it is ours (a workspace without one holds nothing),
+// else why it cannot be taken (its components' messages: src/shared/component-catalog.mjs).
+const UNREAD = said("gallery.json 读不出来：改好这个文件后再试");
+const NOT_OURS = said("gallery.json 不是 Gallery 的文件");
+const NOT_WRITABLE = ["EPERM", "EACCES", "EBUSY", "EROFS"];
+function settingsOf(text) {
+  if (text === null) return { value: null };
+  const { value, ours, reads } = markerOf(text);
+  return ours ? { value } : { problem: reads ? NOT_OURS : UNREAD };
+}
+const readText = (file) => {
+  try {
+    return readFileSync(file, "utf8");
+  } catch (error) {
+    return error.code === "ENOENT" ? null : undefined;
+  }
+};
+
+/** The workspace's default look at `root` (lookOf's form), {} for none, for no gallery.json and for one that does not read or is not ours. */
+export function workspaceLook(root) {
+  const text = readText(layoutOf(root).marker);
+  return text === undefined ? {} : lookOf(settingsOf(text).value?.look);
+}
+
+/**
+ * What document `slug`'s doc.json says of its look at `root`: { own: its `look` as written (null for
+ * none, for a doc.json that does not read and for none at all), instructions: whether it is the 写作偏好
+ * page's, reads: whether what it says can be taken, which a doc.json an Agent is writing may not, a
+ * moment; a document with no doc.json at all (one made by hand: its doc.html alone) says it has no look
+ * of its own, and reads, while one whose folder is gone says nothing }.
+ */
+export function ownLookAt(slug, root) {
+  const files = documentFiles(documentDirectory(slug, root));
+  try {
+    const metadata = JSON.parse(readFileSync(files.json, "utf8"));
+    const reads = Boolean(metadata) && typeof metadata === "object" && !Array.isArray(metadata);
+    return { own: reads ? (metadata.look ?? null) : null, instructions: reads && metadata.instructions === true, reads };
+  } catch (error) {
+    return { own: null, instructions: false, reads: error.code === "ENOENT" && existsSync(files.html) };
+  }
+}
+
+/**
+ * The look document `slug` of the workspace at `root` shows (lookOf's form, {} for the default): its
+ * own over the workspace's (effectiveLook); the workspace's for a doc.json that does not read, none
+ * for the 写作偏好 page.
+ */
+export function documentLook(slug, root) {
+  const { own, instructions } = ownLookAt(slug, root);
+  return instructions ? {} : effectiveLook(own, workspaceLook(root));
+}
+
+/**
+ * gallery.json with `look` as the workspace's default look (lookOf: each default left out, the field
+ * gone when all are), written at once and with all else it holds kept, made when there is none. A
+ * file that does not read, is another program's, changed under this write or cannot be written is
+ * refused (an error that says why: refusal), and stays as it is.
+ */
+export async function writeWorkspaceLook(root, look) {
+  const file = layoutOf(root).marker;
+  const text = await fs.readFile(file, "utf8").catch((error) => {
+    if (error.code === "ENOENT") return null;
+    throw refusal(UNREAD);
+  });
+  const { value, problem } = settingsOf(text);
+  if (problem) throw refusal(problem);
+  if (value === null && Object.keys(lookOf(look)).length === 0) return; // no file, and none needed for the default
+  const written = withLookField(value ?? WORKSPACE_MARK, lookOf(look)); // in its place, else last; gone for the default
+  if (JSON.stringify(written) === JSON.stringify(value)) return;
+  const done = await writeAtomic(file, `${JSON.stringify(written, null, 2)}\n`, { expect: text }).catch((error) => {
+    if (NOT_WRITABLE.includes(error.code)) throw refusal(said("gallery.json 写不进去：可能是只读的，或被别的程序占着"));
+    throw error;
+  });
+  if (!done) throw refusal(said("gallery.json 刚刚被改过：再试一次"));
+}