@heycys/gallery 0.1.1 → 0.2.0

package/kit/board.js

@@ -0,0 +1,250 @@
+"use strict";
+(() => {
+  // src/shared/card-size.mjs
+  var MOST = Object.freeze({ w: 12, h: 24 });
+  var DEFAULT = Object.freeze({ x: 0, y: 0, w: 4, h: 2 });
+  var whole = (value, fallback) => {
+    const number = Number.parseInt(value ?? "", 10);
+    return Number.isFinite(number) ? number : fallback;
+  };
+  function cellsOf(card) {
+    const w = Math.min(MOST.w, Math.max(1, whole(card.dataset.w, DEFAULT.w)));
+    const h = Math.min(MOST.h, Math.max(1, whole(card.dataset.h, DEFAULT.h)));
+    const x = Math.min(MOST.w - w, Math.max(0, whole(card.dataset.x, DEFAULT.x)));
+    const y = Math.max(0, whole(card.dataset.y, DEFAULT.y));
+    return { x, y, w, h };
+  }
+
+  // src/shared/board-places.mjs
+  var GRID = Object.freeze({ columns: 12, rows: 24 });
+  var GAP = 16;
+  var CELL = 64;
+  var LEAST = 4;
+  var spanOf = (n, cell, gap = GAP) => n * cell + Math.max(0, n - 1) * gap;
+  function gridFor(room) {
+    const fit = Math.floor((Math.max(0, room) + GAP) / (CELL + GAP));
+    const columns = Math.max(LEAST, Math.min(GRID.columns, fit));
+    const cell = fit >= LEAST ? CELL : Math.max(0, (room - (LEAST - 1) * GAP) / LEAST);
+    return { columns, cell, width: spanOf(columns, cell) };
+  }
+  var overlaps = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h;
+  function settle(cards, fixed = []) {
+    const kept = new Set(fixed);
+    const placed = cards.filter((card) => kept.has(card.id)).map((card) => ({ ...card }));
+    const rest = cards.map((card, index) => ({ card, index })).filter(({ card }) => !kept.has(card.id)).sort((a, b) => a.card.y - b.card.y || a.card.x - b.card.x || a.index - b.index);
+    for (const { card } of rest) {
+      const going = { ...card };
+      for (let met = placed.filter((other) => overlaps(going, other)); met.length > 0; met = placed.filter((other) => overlaps(going, other))) {
+        going.y = Math.max(...met.map((other) => other.y + other.h));
+      }
+      placed.push(going);
+    }
+    const at = new Map(placed.map((card) => [card.id, card]));
+    return cards.map((card) => at.get(card.id));
+  }
+  function fitHeight(height, cell, gap = GAP) {
+    if (!(cell > 0)) return 1;
+    return Math.min(GRID.rows, Math.max(1, Math.ceil((height + gap) / (cell + gap) - 1e-6)));
+  }
+  function flow(cards, columns) {
+    const order = cards.map((card, index) => ({ card, index })).sort((a, b) => a.card.y - b.card.y || a.card.x - b.card.x || a.index - b.index);
+    const placed = [];
+    const at = /* @__PURE__ */ new Map();
+    let row = 0;
+    let column = 0;
+    for (const { card, index } of order) {
+      const w = Math.max(1, Math.min(card.w, columns));
+      let x = column;
+      let y = row;
+      for (; ; ) {
+        if (x + w > columns) {
+          x = 0;
+          y += 1;
+          continue;
+        }
+        const spot = { x, y, w, h: card.h };
+        if (!placed.some((other) => overlaps(spot, other))) break;
+        x += 1;
+      }
+      const going = { ...card, x, y, w };
+      placed.push(going);
+      at.set(index, going);
+      row = y;
+      column = x + w;
+    }
+    return cards.map((_, index) => at.get(index));
+  }
+
+  // src/render/kit/board/index.js
+  var gridOf = gridFor;
+  if (typeof document !== "undefined" && !globalThis.DocBoard) {
+    let told = false;
+    const tell = () => {
+      if (told) return;
+      told = true;
+      requestAnimationFrame(() => {
+        told = false;
+        dispatchEvent(new Event("doc-layout-change"));
+      });
+    };
+    const said = /* @__PURE__ */ new WeakMap();
+    const drafts = /* @__PURE__ */ new WeakMap();
+    const skips = /* @__PURE__ */ new WeakMap();
+    const kept = /* @__PURE__ */ new WeakMap();
+    const drawnOf = /* @__PURE__ */ new WeakMap();
+    const fits = (card) => card.dataset.geFit === "content";
+    const instanceOf = (card) => [...card.children].find((child) => child.matches("[data-doc-component]")) ?? null;
+    const needed = (card) => {
+      const inner = instanceOf(card);
+      if (!inner) return 0;
+      const style = getComputedStyle(card);
+      const sides = ["paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"].reduce((sum, side) => sum + (parseFloat(style[side]) || 0), 0);
+      return inner.getBoundingClientRect().height + sides;
+    };
+    const cardsIn = (board) => [...board.querySelectorAll(":scope > .gallery-card")];
+    const setCells = (card, cells, skip = 0) => {
+      drawnOf.set(card, cells);
+      for (const name of ["x", "y", "w", "h"]) {
+        const property = `--gallery-${name}`;
+        const value = String(name === "y" ? cells.y - skip : cells[name]);
+        if (card.style.getPropertyValue(property) !== value) card.style.setProperty(property, value);
+      }
+    };
+    const measureCard = (card, columns) => {
+      const { w, h } = drawnOf.get(card) ?? cellsOf(card);
+      const size = `${Math.min(w, columns)} ${h} ${card.clientWidth} ${card.clientHeight}`;
+      if (said.get(card) === size) return;
+      const first = !said.has(card);
+      said.set(card, size);
+      if (!first) tell();
+    };
+    const setColumns = (board, columns) => {
+      if (board.dataset.columns !== String(columns)) board.dataset.columns = String(columns);
+      if (board.style.getPropertyValue("--gallery-columns") !== String(columns)) board.style.setProperty("--gallery-columns", String(columns));
+    };
+    const layBoard = (board) => {
+      const { columns, cell } = gridOf(board.clientWidth);
+      setColumns(board, columns);
+      const side = `${Math.round(cell * 100) / 100}px`;
+      if (board.style.getPropertyValue("--gallery-cell") !== side) board.style.setProperty("--gallery-cell", side);
+      const draft = drafts.get(board);
+      const cards = cardsIn(board);
+      let placed = cards.map((card, index) => ({ id: String(index), ...cellsOf(card) }));
+      if (draft) {
+        const held = [];
+        placed = placed.map((cells2, index) => {
+          const own = draft.get(cards[index]);
+          if (!own) return cells2;
+          held.push(cells2.id);
+          return { id: cells2.id, x: own.x, y: own.y, w: own.w, h: own.h };
+        });
+        placed = settle(placed, held);
+      }
+      const cells = placed.map((one, index) => fits(cards[index]) && !draft?.get(cards[index])?.fixed ? { ...one, h: fitHeight(needed(cards[index]), cell) } : one);
+      const laid = columns === GRID.columns ? settle(cells) : flow(cells, columns);
+      if (columns < GRID.columns && laid.length) setColumns(board, Math.max(...laid.map(({ x, w }) => x + w)));
+      const least = laid.length ? Math.min(...laid.map(({ y }) => y)) : 0;
+      const skip = draft && kept.has(board) ? Math.min(kept.get(board), least) : least;
+      skips.set(board, skip);
+      cards.forEach((card, index) => setCells(card, laid[index], skip));
+    };
+    const boards = /* @__PURE__ */ new Set();
+    const resized = new ResizeObserver((entries) => {
+      const again = /* @__PURE__ */ new Set();
+      for (const { target } of entries) {
+        if (target.matches(".gallery-board")) again.add(target);
+        else if (!target.matches(".gallery-card")) {
+          const card = target.parentElement;
+          if (card && fits(card) && boards.has(card.parentElement)) again.add(card.parentElement);
+        }
+      }
+      for (const board of again) layBoard(board);
+      for (const board of boards) {
+        const columns = Number(board.dataset.columns) || 12;
+        for (const card of cardsIn(board)) measureCard(card, columns);
+      }
+    });
+    const watchCard = (card) => {
+      resized.observe(card);
+      const inner = instanceOf(card);
+      if (inner && fits(card)) resized.observe(inner);
+    };
+    const watchBoard = (board) => {
+      if (boards.has(board)) return;
+      boards.add(board);
+      layBoard(board);
+      resized.observe(board);
+      for (const card of cardsIn(board)) watchCard(card);
+    };
+    const look = (root = document) => {
+      for (const board of root.querySelectorAll?.(".gallery-board") ?? []) watchBoard(board);
+    };
+    new MutationObserver((records) => {
+      const again = /* @__PURE__ */ new Set();
+      for (const record of records) {
+        if (record.type === "attributes") {
+          const card = record.target;
+          if (card.matches?.(".gallery-card") && boards.has(card.parentElement)) again.add(card.parentElement);
+          continue;
+        }
+        for (const node of record.addedNodes) {
+          if (node.nodeType !== 1) continue;
+          if (node.matches(".gallery-board")) watchBoard(node);
+          else if (node.matches(".gallery-card") && boards.has(node.parentElement)) {
+            watchCard(node);
+            again.add(node.parentElement);
+          } else if (node.matches("[data-doc-component]") && node.parentElement?.matches(".gallery-card") && boards.has(node.parentElement.parentElement)) {
+            watchCard(node.parentElement);
+            again.add(node.parentElement.parentElement);
+          } else look(node);
+        }
+        for (const node of record.removedNodes) {
+          if (node.nodeType !== 1) continue;
+          if (boards.has(node)) {
+            boards.delete(node);
+            resized.unobserve(node);
+          } else if (node.matches(".gallery-card") && boards.has(record.target)) again.add(record.target);
+        }
+      }
+      for (const board of again) {
+        layBoard(board);
+        const columns = Number(board.dataset.columns) || 12;
+        for (const card of cardsIn(board)) measureCard(card, columns);
+      }
+    }).observe(document.documentElement, { subtree: true, childList: true, attributes: true, attributeFilter: ["data-x", "data-y", "data-w", "data-h", "data-ge-fit"] });
+    look();
+    if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", () => look(), { once: true });
+    globalThis.DocBoard = Object.freeze({
+      cellsOf,
+      gridOf,
+      /** The cells card `card` is drawn at now ({ x, y, w, h }: its file's, or lower, or as high as its content), its row as the file counts them (skipped: how many it is drawn up). */
+      drawn: (card) => ({ ...drawnOf.get(card) ?? cellsOf(card) }),
+      /** How many rows above its first card board `board` does not draw now: its drawn row r is the file's row r + skipped. */
+      skipped: (board) => skips.get(board) ?? 0,
+      /**
+       * Board `board` drawn as it would be with some of its cards at cells of the editing's (`cells`:
+       * Map(card -> { x, y, w, h, fixed? }), `fixed` a height kept for a card of fit content): the cards
+       * they meet pushed down under them (the page service's pushDown), then all drawn as the file would
+       * draw them (fit content as high as it is, what is under it lower: a draft's card too); null draws it
+       * as the file says again. Laid out at once.
+       */
+      draft(board, cells) {
+        if (cells && cells.size) {
+          if (!drafts.has(board)) kept.set(board, skips.get(board) ?? 0);
+          drafts.set(board, cells);
+        } else {
+          drafts.delete(board);
+          kept.delete(board);
+        }
+        layBoard(board);
+        const columns = Number(board.dataset.columns) || 12;
+        for (const card of cardsIn(board)) measureCard(card, columns);
+      },
+      /** Board `board` laid out again now (a card put in or taken out by the editing). */
+      layout(board) {
+        if (!boards.has(board)) return watchBoard(board);
+        layBoard(board);
+      }
+    });
+  }
+})();

package/kit/charts.js

@@ -51,8 +51,6 @@
   // src/shared/table-chart.mjs
   var CHART_DATA = "data-doc-chart-data";
   var CHART_SOURCE = "data-doc-chart-source";
-  var FORMULA = /\\\(([\s\S]*?)\\\)|\\\[([\s\S]*?)\\\]|\$\$([\s\S]*?)\$\$/g;
-  var cellWords = (text) => text.replace(FORMULA, (_, inline, display, dollars) => inline ?? display ?? dollars).replaceAll(ZWSP, "").replace(/\s+/g, " ").trim();
   var WORD_TYPES = /* @__PURE__ */ new Set(["text", "date"]);
   function cellValue(cell, type = null) {
     if (!cell) return null;
@@ -101,73 +99,11 @@
 
   // src/render/kit/charts/from-table.js
   var SETTLE = 800;
-  var checks = /* @__PURE__ */ new Set();
-  var observer = null;
-  var SOURCES = `.doc-table-wrap[${CHART_SOURCE}]`;
-  var sourceOf = (key) => [...document.querySelectorAll(SOURCES)].find((wrap) => wrap.getAttribute(CHART_SOURCE) === key && !wrap.closest("[data-doc-dev]")) ?? null;
-  function touchesSource(record) {
-    if (record.type === "attributes" && (record.attributeName === CHART_SOURCE || record.attributeName === CHART_DATA)) return true;
-    const target = record.target.nodeType === 1 ? record.target : record.target.parentElement;
-    if (target?.closest(SOURCES)) return true;
-    return [...record.addedNodes, ...record.removedNodes].some((node) => node.nodeType === 1 && (node.matches(SOURCES) || node.querySelector(SOURCES)));
-  }
-  function watch() {
-    if (observer) return;
-    observer = new MutationObserver((records) => {
-      if (!globalThis.document?.defaultView) return;
-      if (records.some(touchesSource)) for (const check of checks) check();
-    });
-    observer.observe(document.documentElement, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-      attributes: true,
-      attributeFilter: [CHART_SOURCE, CHART_DATA, "data-sort-value", "data-sort-type", "rowspan", "colspan", "aria-sort"]
-    });
-  }
-  function unwatch() {
-    if (checks.size > 0 || !observer) return;
-    observer.disconnect();
-    observer = null;
-  }
-  var fileOrder = /* @__PURE__ */ new WeakMap();
-  function inFileOrder(table, rows) {
-    const sorted = [...table.tHead?.rows[0]?.cells ?? []].some((cell) => /^(?:ascending|descending)$/.test(cell.getAttribute("aria-sort") ?? ""));
-    if (!sorted) {
-      rows.forEach((row, index) => fileOrder.set(row, index));
-      return rows;
-    }
-    const place = (row) => fileOrder.get(row) ?? rows.length + rows.indexOf(row);
-    return [...rows].sort((a, b) => place(a) - place(b));
-  }
-  var TEX = 'annotation[encoding="application/x-tex"]';
-  function sourceText(node) {
-    if (node.nodeType === 3) return node.data;
-    if (node.nodeType !== 1 || node.hasAttribute("data-ge-empty")) return "";
-    const tex = node.classList.contains("katex") ? node.querySelector(TEX) : null;
-    if (tex) return tex.textContent;
-    let text = "";
-    for (const child of node.childNodes) text += sourceText(child);
-    return text;
-  }
-  var wordsOf = (cell) => cellWords(sourceText(cell));
-  function tableCells(table) {
-    let header = table.tHead?.rows[0] ?? null;
-    let rows = [...table.tBodies].flatMap((body) => [...body.rows]);
-    if (!header && rows.length > 0 && rows[0].cells.length > 0 && [...rows[0].cells].every((cell) => cell.localName === "th")) [header, ...rows] = rows;
-    const merged = [header, ...rows].some((row) => row && [...row.cells].some((cell) => cell.rowSpan !== 1 || cell.colSpan !== 1));
-    return {
-      names: header ? [...header.cells].map(wordsOf) : null,
-      types: header ? [...header.cells].map((cell) => cell.getAttribute("data-sort-type")) : null,
-      rows: inFileOrder(table, rows).map((row) => [...row.cells].map((cell) => ({ words: wordsOf(cell), sort: cell.getAttribute("data-sort-value")?.trim() ?? null }))),
-      merged
-    };
-  }
   function readSource(host) {
     const key = host.getAttribute(CHART_DATA);
-    const table = sourceOf(key)?.querySelector("table");
-    if (!table) return { error: `no table carries ${CHART_SOURCE}="${key}": put the table back, or delete the card`, message: ["table-gone"] };
-    const found = tableRows(tableCells(table));
+    const read = globalThis.DocKit.tables.reading(key);
+    if (!read) return { error: `no table carries ${CHART_SOURCE}="${key}": put the table back, or delete the card`, message: ["table-gone"] };
+    const found = tableRows({ names: read.names, types: read.header ? read.types : null, rows: read.cells, merged: read.merged });
     return found.error ? { error: `its table ${found.error}`, message: found.message } : found;
   }
   function createBound(host, make, context) {
@@ -220,8 +156,7 @@
       destroy: () => globalThis.DocKit.destroy(host)
     };
     mounts.set(host, api);
-    checks.add(check);
-    watch();
+    const unfollow = globalThis.DocKit.tables.follow(() => host.getAttribute(CHART_DATA), check);
     check();
     return {
       api,
@@ -229,8 +164,7 @@
       destroy() {
         destroyed = true;
         clearTimeout(waiting);
-        checks.delete(check);
-        unwatch();
+        unfollow();
         inner?.destroy();
         inner = null;
         if (mounts.get(host) === api) mounts.delete(host);