slidemind 0.3.20 → 0.4.0

package/src/builders/text-stack.mjs

@@ -0,0 +1,276 @@
+// A text set at the design's ramp often takes more lines, or taller ones, than
+// the concept drew, and grows into what is stacked beneath it in its column:
+// a title into its body by a few px, a body into the next row, a step number
+// set at the number rung into its label (parity decks: 71 overlap warnings on
+// 25 slides, most of them title-into-body). The stack beneath moves down by
+// what the text took, as one: inside a card everything below it in its column
+// (with the rows it shares and the lines lying on them), on no card the chain
+// of texts stacked on each other. It moves only into free room — the next
+// obstacle, the card's bottom, the slot's — and a card grows only through
+// text-card-fit's own height lever. A small marker (a step number, 1–3
+// characters) lifts clear of its label instead, where it has the room above
+// it (live 6bb93436: "2" over "Plan steps"). The type never changes, a text never
+// leaves its card, nothing moves into a line it did not cross before.
+// Pure helpers over text-card-fit's view of the slide (`env`): which stack a
+// text runs into and how far that stack may go. The levers stay there.
+import { fixedAspect } from "./concept-layout.mjs";
+import { gluedIds, holdsDrawing, linePoints, lineRows, linesWithin, repeatGroups } from "./repeat-groups.mjs";
+
+const GAP = 4; // px between ink and what is stacked under it, at least
+const STACK_GAP = 12; // px: texts closer than this are one stack (a title on its body)
+const INSET = 8; // px kept inside a card's edge (text-card-fit)
+const MARKER_CHARS = 3; // a step number, a badge digit: "1", "12", "120"
+const LOOKALIKE_W = 0.1; // an undeclared lookalike differs by at most 10% in width…
+const LOOKALIKE_H = 0.15; // …and 15% in height
+
+const span = (a0, a1, b0, b1) => a0 < b1 && b0 < a1;
+
+/** A marker: a number of at most three visible characters (a step number over its label). */
+export const isMarker = (e) => (e.kind === "number" || e.role === "number") && String(e.text ?? "").replace(/\s+/g, "").length <= MARKER_CHARS;
+
+/**
+ * `env`: { s, byId, measured, slot, at(t) → rendered box {y,h} with this
+ * call's moves, img(o) → the rect the call started from, isText, filled,
+ * subtree(o), inTree(el, root) }.
+ */
+/** Where a text's glyphs are, with this call's moves: its measured ink, else its box. */
+export const inkOf = (env, t) => {
+  const m = env.measured.get(t.id);
+  const box = env.at(t);
+  if (!(m?.inkHeight > 0) || !Number.isFinite(m.inkY)) return { top: box.y, bottom: box.y + box.h };
+  const top = m.inkY + (box.y - (m.y ?? box.y));
+  return { top, bottom: top + m.inkHeight };
+};
+const topOf = (env, o) => (env.isText(o) ? inkOf(env, o).top : o.y);
+const boxOf = (env, o) => (env.isText(o) ? { x: o.x, y: env.at(o).y, w: o.w, h: env.at(o).h } : { x: o.x, y: o.y, w: o.w, h: o.h });
+
+const filledOf = (e) => Boolean(e?.fill && e.fill !== "none");
+// A text box; words ON a painted shape (a number badge) belong to that shape.
+const isTextBox = (e) => (e.kind === "text" || e.kind === "number") && e.text != null && !e.textRotation && !filledOf(e);
+export const isCard = (e) => filledOf(e) && !fixedAspect(e) && !isTextBox(e);
+export const isRound = (e) => filledOf(e) && fixedAspect(e) && !e.geometry && !isTextBox(e);
+
+/** The declared sets (repeat-groups.mjs) that move as one: built from one template, or holding no drawing. */
+export const declaredSets = (s) => repeatGroups(s).filter((g) => g.built || !g.members.some((m) => holdsDrawing(s, m)));
+const sig = (s, el) => [el.kind, el.fill, el.shape ?? "", Boolean(el.shadow), s.elements.filter((k) => k.parent === el.id).map((k) => k.kind).sort().join(",")].join("|");
+/**
+ * Symmetry nobody declared is still symmetry: `o` looks like `card` (the same
+ * kind of shape and content on the same parent, within 10% of its width and
+ * 15% of its height), so neither changes on its own.
+ */
+export const looksLike = (s, o, card) => o !== card && (isCard(card) ? isCard(o) : isRound(o)) && o.parent === card.parent && sig(s, o) === sig(s, card)
+  && Math.abs(o.w - card.w) <= card.w * LOOKALIKE_W && Math.abs(o.h - card.h) <= card.h * LOOKALIKE_H;
+
+/**
+ * Whether text-card-fit's stack lever (1a) moves what lies under `t` on its
+ * own: t on no card, or on a card of no declared set and with no undeclared
+ * lookalike — a set moves alike or not at all, a lookalike never alone.
+ */
+export function stacksAlone(s, t) {
+  const byId = new Map(s.elements.map((e) => [e.id, e]));
+  const parent = t.parent ? byId.get(t.parent) : null;
+  if (parent && filledOf(parent)) {
+    return isCard(parent) && !declaredSets(s).some((g) => g.members.includes(parent)) && !s.elements.some((o) => looksLike(s, o, parent));
+  }
+  for (let p = parent, g = 0; p && g < 32; p = p.parent ? byId.get(p.parent) : null, g++) if (filledOf(p)) return false;
+  return true;
+}
+
+/** The slide as a render measured it, nothing moved yet: `env` for a caller outside text-card-fit. */
+export function stackEnv(s, measured, slot = s.slot) {
+  const byId = new Map(s.elements.map((e) => [e.id, e]));
+  const kids = (el) => s.elements.filter((o) => o.parent === el.id);
+  const subtree = (el) => [el, ...kids(el).flatMap(subtree)];
+  const inTree = (el, root) => {
+    for (let p = el, guard = 0; p && guard < 32; p = p.parent ? byId.get(p.parent) : null, guard++) if (p === root) return true;
+    return false;
+  };
+  const isText = isTextBox;
+  const at = (t) => {
+    const m = measured.get(t.id);
+    return m?.h > 0 ? { y: m.y ?? t.y, h: m.h } : { y: t.y, h: t.h };
+  };
+  return { s, byId, measured, slot, at, img: (o) => o, isText, filled: filledOf, subtree, inTree };
+}
+
+/** The columns a text's words take: its box, and its ink where that runs past it. */
+export function columnOf(env, t) {
+  const m = env.measured.get(t.id);
+  const ink = m?.inkWidth > t.w ? m.inkWidth : t.w;
+  const x0 = t.align === "center" ? t.x + t.w / 2 - ink / 2 : t.align === "right" ? t.x + t.w - ink : t.x;
+  return [x0, x0 + ink];
+}
+
+/**
+ * The stack `t` runs into, or null. `need` is how far that stack moves for t's
+ * ink to end the image's gap above it (GAP at least, STACK_GAP at most),
+ * `least` how far it must move for the two only to stop touching; `force`
+ * returns the stack even where t does not reach it (a set member moving with
+ * its set, a line about to wrap), `want` the px it should make room for.
+ * `members` move (subtrees included), `lines` move with them, `room` is how
+ * far they can go down without growing the card.
+ */
+export function stackUnder(env, t, { force = false, want = 0 } = {}) {
+  const { s, byId, img, isText, filled } = env;
+  const parent = t.parent ? byId.get(t.parent) : null;
+  // A disc's content is text-card-fit's round lever's (0).
+  if (parent && fixedAspect(parent)) return null;
+  const card = parent && filled(parent) ? parent : null;
+  const it = img(t);
+  const [x0, x1] = columnOf(env, t);
+  // On no card only texts stack: a disc or a panel under a free text is an
+  // organism of its own, never pushed for it.
+  const pool = s.elements.filter((o) => o !== t && (o.parent ?? null) === (t.parent ?? null) && o.w > 0 && o.h > 0 && !(isText(o) && o.textRotation) && (card || isText(o)));
+  const below = (y) => pool.filter((o) => img(o).y >= y && span(img(o).x, img(o).x + img(o).w, x0 + 1, x1 - 1)).sort((a, b) => img(a).y - img(b).y)[0];
+  const first = below(it.y + it.h - 2);
+  if (!first) return null;
+  const tInk = inkOf(env, t);
+  // Only ink that grew past the text's box and now lies on what is under it:
+  // the concept's own spacing stands wherever the two do not touch.
+  if (!force && (tInk.bottom <= it.y + it.h + 1 || tInk.bottom <= topOf(env, first) + 0.5)) return null;
+  // A rule between the text and what is under it is text-card-fit's divider
+  // lever (1b): moving the stack past it would leave the text on the rule.
+  const firstTop = topOf(env, first);
+  const ruled = (s.connectors ?? []).some((c) => !gluedIds(c).length && linePoints(c).some((p, i, pts) => i > 0
+    && span(Math.min(p.x, pts[i - 1].x), Math.max(p.x, pts[i - 1].x) + 1, x0, x1)
+    && Math.min(p.y, pts[i - 1].y) > it.y + it.h / 2 && Math.max(p.y, pts[i - 1].y) < firstTop));
+  if (ruled) return null;
+  const gap = Math.min(STACK_GAP, Math.max(GAP, img(first).y - (it.y + it.h)));
+  const need = Math.ceil(tInk.bottom + gap - topOf(env, first));
+  const least = Math.ceil(tInk.bottom + 1 - topOf(env, first));
+  if (!force && least < 1) return null;
+  // What moves: the chain stacked on `first` (within STACK_GAP of each other
+  // in the image; on a card with what shares their rows), then — while that has
+  // less room than it needs — on a card the next chain under it, a rule
+  // between them included; on no card the next text under it. Only as much
+  // of the column as has to move.
+  const from = img(first).y - 1;
+  const stack = [];
+  const chain = (seed) => {
+    stack.push(seed);
+    for (let grew = true; grew;) {
+      grew = false;
+      for (const o of pool) {
+        if (stack.includes(o) || img(o).y < from) continue;
+        const r = img(o);
+        // A disc, an icon or a rule beside a moving text rides with it; a
+        // text beside it heads a column of its own.
+        const onRow = card && !isText(o) && stack.some((k) => span(img(k).y, img(k).y + img(k).h, r.y, r.y + r.h));
+        const chained = stack.some((k) => span(img(k).x, img(k).x + img(k).w, r.x, r.x + r.w) && r.y >= img(k).y && r.y - (img(k).y + img(k).h) <= STACK_GAP);
+        if (onRow || chained) {
+          stack.push(o);
+          grew = true;
+        }
+      }
+    }
+  };
+  chain(first);
+  let at = reach(env, t, stack, card);
+  const passed = []; // [stack length before it, line]
+  while (at.room < Math.max(need, want) && at.blocker) {
+    const b = at.blocker;
+    const next = b.line ? (card ? below(b.y) : null) : pool.includes(b) && (card || isText(b)) ? b : null;
+    if (!next || stack.includes(next)) break;
+    if (b.line) passed.push([stack.length, b.line]);
+    chain(next);
+    at = reach(env, t, stack, card);
+  }
+  // Past a line only where the line moves with the stack (a rule between two
+  // of its rows); one that runs on past it (a card-wide divider, a timeline)
+  // stays, and the stack above it stops there.
+  for (let bad; (bad = passed.find(([n, line]) => n < stack.length && !at.lines.includes(line)));) {
+    stack.length = bad[0];
+    at = reach(env, t, stack, card);
+  }
+  return { t, first, need, least, gap, card, ...at };
+}
+
+const bottomOf = (env, o) => (env.isText(o) ? inkOf(env, o).bottom : o.y + o.h);
+
+// What a stack moves (subtrees included), the lines that go with it, and how
+// far down it may go, glyphs measured as glyphs: its card's inner bottom (a
+// margin under INSET is kept, never taken), what lies under it in its columns
+// — an element, or a line that does not move with it, member by member (a
+// divider between two of its rows holds the one above it); the nearest is the
+// `blocker` — a painted panel it lies on, and the slot, box for box.
+function reach(env, t, stack, card) {
+  const { s, isText, filled, subtree, inTree, slot } = env;
+  const members = [...new Set(stack.flatMap(subtree))];
+  const ids = new Set(members.map((o) => o.id));
+  const rects = stack.map((o) => boxOf(env, o));
+  const sx0 = Math.min(...rects.map((r) => r.x));
+  const sx1 = Math.max(...rects.map((r) => r.x + r.w));
+  const sTop = Math.min(...members.map((o) => (isText(o) ? env.at(o).y : o.y)));
+  const boxBottom = Math.max(...members.map((o) => (isText(o) ? env.at(o).y + env.at(o).h : o.y + o.h)));
+  const inkBottom = Math.max(...members.map((o) => bottomOf(env, o)));
+  // A line moves with the stack when it is glued only to what moves, or lies
+  // free inside the stack's rows and columns (a rule between two of its rows)
+  // or, on a card, inside the card (a row's divider wider than the stack).
+  const cardLines = new Set(card ? linesWithin(s, card) : []);
+  const lines = (s.connectors ?? []).filter((c) => {
+    const glued = gluedIds(c);
+    if (glued.length) return glued.every((id) => ids.has(id));
+    const pts = linePoints(c);
+    return pts.length >= 2 && pts.every((p) => p.y >= sTop - 2 && p.y <= boxBottom + 2)
+      && (cardLines.has(c) || pts.every((p) => p.x >= sx0 - 2 && p.x <= sx1 + 2));
+  });
+  let room = slot.h - 1 - boxBottom;
+  let blocker = null;
+  const limit = (px, by = null) => {
+    if (px < room) [room, blocker] = [px, by];
+  };
+  if (card) limit(card.y + card.h - Math.min(INSET, Math.max(0, card.y + card.h - inkBottom)) - inkBottom);
+  const free = lines.filter((c) => !gluedIds(c).length).map((c) => {
+    const pts = linePoints(c);
+    return { x0: Math.min(...pts.map((p) => p.x)), x1: Math.max(...pts.map((p) => p.x)), y: Math.max(...pts.map((p) => p.y)) };
+  });
+  for (const o of s.elements) {
+    if (ids.has(o.id) || o === t || !(o.w > 0 && o.h > 0) || inTree(t, o) || members.some((k) => inTree(o, k))) continue;
+    const r = boxOf(env, o);
+    // A line moving with the stack stops short of what lies under it in its
+    // own columns (the next column's text under a card-wide divider).
+    for (const l of free) if (span(r.x, r.x + r.w, l.x0, l.x1) && topOf(env, o) > l.y + 1) limit(topOf(env, o) - GAP - l.y, o);
+    if (!span(r.x, r.x + r.w, sx0, sx1)) continue;
+    // Beneath is anything starting below the stack's top, already under its
+    // glyphs or not (a callout band a body has run onto blocks it too).
+    const top = topOf(env, o);
+    if (top > sTop + 1) limit(top - (isText(o) ? 1 : GAP) - inkBottom, o);
+    else if (!card && filled(o) && r.y < sTop && r.x <= sx0 + 1 && r.x + r.w >= sx1 - 1 && r.y + r.h >= inkBottom) {
+      limit(r.y + r.h - Math.min(INSET, Math.max(0, r.y + r.h - inkBottom)) - inkBottom);
+    }
+  }
+  const moving = new Set(lines);
+  for (const o of members) {
+    if (!(o.w > 0 && o.h > 0)) continue;
+    const bottom = bottomOf(env, o);
+    for (const l of lineRows(s, ...(isText(o) ? columnOf(env, o) : [o.x, o.x + o.w]), ids)) {
+      if (!moving.has(l.line) && l.y >= bottom - 1) limit(l.y - 1 - bottom, { line: l.line, y: l.y });
+    }
+  }
+  return { members, lines, blocker, room: Math.floor(room) };
+}
+
+/**
+ * How far a marker can lift clear of its label: `up` px free above its ink in
+ * its columns (its card's inset, whatever sits above it, a line drawn over it).
+ */
+export function markerRoom(env, t) {
+  const { s, byId, isText, filled, inTree } = env;
+  const parent = t.parent ? byId.get(t.parent) : null;
+  const card = parent && filled(parent) ? parent : null;
+  const ink = inkOf(env, t);
+  const [x0, x1] = columnOf(env, t);
+  let ceil = card ? card.y + Math.min(INSET, Math.max(0, ink.top - card.y)) : 0;
+  for (const o of s.elements) {
+    if (o === t || !(o.w > 0 && o.h > 0) || inTree(t, o) || inTree(o, t)) continue;
+    const r = boxOf(env, o);
+    if (!span(r.x, r.x + r.w, x0, x1)) continue;
+    const bottom = isText(o) ? inkOf(env, o).bottom : r.y + r.h;
+    if (bottom <= ink.top + 1) ceil = Math.max(ceil, bottom + GAP);
+  }
+  for (const l of lineRows(s, x0, x1, new Set(env.subtree(t).map((o) => o.id)))) {
+    if (l.y + l.h <= ink.top + 1) ceil = Math.max(ceil, l.y + l.h + GAP);
+  }
+  // Its box, not only its ink, stays inside the slot (slot-fit).
+  return { up: Math.floor(Math.min(ink.top - ceil, env.at(t).y)) };
+}