postext 1.50.0 → 1.51.0

package/dist/pipeline/composedLayout.js

@@ -46,7 +46,7 @@ import { collapsedOnAddedPage, collapseFrames, continuationTemplate, continuesCo
 import { isModuleTemplate, resolvePageTemplate } from '../composed/templates';
 import { frameElementId } from '../composed/ids';
 import { expandRepeats, instanceOf, repeatItemsOf } from '../composed/repeat';
-import { moduleOfFrame } from '../composed/modules';
+import { moduleOfFrame, nestedChain } from '../composed/modules';
 import { frameLinePx, frameRuleBlocks } from '../composed/rules';
 import { overlapChecks } from '../composed/overlap';
 import { offsetCalloutToAbsolute } from './calloutLayout';
@@ -1029,6 +1029,12 @@ function composePage(pageInput, template, fit, collapsed) {
         const id = input.stories.get(headOf(frame.name))?.plan.attrs.look?.trim();
         return id ? frameLooks.find((l) => l.id === id) : undefined;
     };
+    /** The look a frame's story names that `frameLooks` does not have
+     *  (#1095): the canvas marks the frame. */
+    const unknownLookOf = (frame) => {
+        const id = input.stories.get(headOf(frame.name))?.plan.attrs.look?.trim();
+        return id && !frameLooks?.some((l) => l.id === id) ? id : undefined;
+    };
     /** The style a frame is laid out in: its box as drawn at any text scale. */
     const styleOf = (frame) => {
         const style = keepChromeAt(input.styleOf(withNamedLook(frame, namedLookOf(frame))), textScale(frame));
@@ -1163,6 +1169,9 @@ function composePage(pageInput, template, fit, collapsed) {
         const moduleRects = new Map();
         /** The foot a module cut at its group's foot is clipped to (#1062). */
         let clipFoot;
+        /** A module a stretching row lays taller than it is (#1095): its
+         *  frames, its own foot (`at`) and the row's. */
+        let stretchTo;
         const pushed = seed
             ? [...seed].map(([name, box]) => ({ name, box, ...(seedShapes?.get(name) ? { contour: seedShapes.get(name) } : {}) }))
             : [];
@@ -1760,6 +1769,7 @@ function composePage(pageInput, template, fit, collapsed) {
                 ...(unmirroredAt(frame) !== undefined ? { unmirrorX: unmirroredAt(frame) } : {}),
                 layer: frame.layer,
                 ...(frame.style ? { styleId: frame.style } : {}),
+                ...(holds && unknownLookOf(frame) !== undefined ? { lookUnknown: unknownLookOf(frame) } : {}),
                 scale: s,
                 ...(pic !== undefined && holds ? { imageScale: pic } : {}),
                 overflowPx,
@@ -1852,6 +1862,27 @@ function composePage(pageInput, template, fit, collapsed) {
             rects.set(name, out);
             return out;
         };
+        /** A module's `'auto'` box that ends at the module's foot, in a row
+         *  that stretches the module (#1095): to the row's foot, its declared
+         *  box by as much (the template asks for it). A frame as wide as its
+         *  content (a pill, a tab) keeps its height. */
+        const stretchAuto = (name, r) => {
+            const s = stretchTo;
+            if (!s || !s.names.has(name))
+                return r;
+            const f = byName.get(name);
+            if (!f || f.height !== 'auto' || f.width === 'auto' || f.pin || heldByFoot(f))
+                return r;
+            const bottom = r.y + r.height;
+            if (Math.abs(bottom - s.at) > 0.5 || s.foot - bottom <= 0.01)
+                return r;
+            const out = { ...r, height: s.foot - r.y };
+            rects.set(name, out);
+            const d = declared.get(name);
+            if (d)
+                declared.set(name, { ...d, height: d.height + (s.foot - bottom) });
+            return out;
+        };
         /** The frames of `names` whose content goes on whole on another page
          *  (#1061, #1062): none of it is laid here. */
         const spillWhole = (names, advanced, lastLaid) => {
@@ -1868,7 +1899,7 @@ function composePage(pageInput, template, fit, collapsed) {
         const runStep = (step, filling) => {
             if (step.kind === 'frame') {
                 const p = prepare(step.frame);
-                const r = clipAtFoot(step.frame.name, placeFrame(p));
+                const r = clipAtFoot(step.frame.name, stretchAuto(step.frame.name, placeFrame(p)));
                 if (filling)
                     fill(p, r);
                 return;
@@ -1889,7 +1920,7 @@ function composePage(pageInput, template, fit, collapsed) {
                 let lastLaid;
                 for (const f of step.frames) {
                     if (!grid.spilled.has(f.name)) {
-                        fill(prepare(f), clipAtFoot(f.name, grid.rects.get(f.name)));
+                        fill(prepare(f), clipAtFoot(f.name, stretchAuto(f.name, grid.rects.get(f.name))));
                         lastLaid = frameIdOf(f.name);
                         continue;
                     }
@@ -1901,7 +1932,7 @@ function composePage(pageInput, template, fit, collapsed) {
             // A frame of a chain inside the group is reached once the frame
             // before it was filled: each is prepared again as it is filled.
             for (const f of step.frames) {
-                const r = clipAtFoot(f.name, solved.get(f.name));
+                const r = clipAtFoot(f.name, stretchAuto(f.name, solved.get(f.name)));
                 if (filling)
                     fill(prepare(f), r);
             }
@@ -1911,16 +1942,19 @@ function composePage(pageInput, template, fit, collapsed) {
          *  its own, as wide as the group (or its template's `width`, #1088), a
          *  `'row'` puts them all in one, start to end (each its `width`, else
          *  an equal share of what is left), a `'grid'` `columns` to a row in
-         *  equal columns; a run of modules a group inside the stack takes
-         *  (`within`) is laid as that group says where its first module comes.
-         *  Rows run from the start side of the page's lines (the flow frame is
+         *  equal columns; a run of modules a group inside it takes (`within`)
+         *  is laid as that group says where its first module comes: its rows
+         *  among a stack's, one cell of a row or a grid (#1095: to any depth).
+         *  A row's room past its modules' widths goes by `grow`, what it is
+         *  short by comes back by `shrink` (#1095). Rows run from the start side of the page's lines (the flow frame is
          *  mirrored on a right-to-left page, so its left is the start). A
          *  module is placed as its template draws its frames in its box
          *  (`'container'` is the box) and its groups laid in it: first in the
          *  room left, to find how tall it is (the frames held by the box's foot
          *  or middle, or sized by its height, left out), then in a box that
          *  tall, or (`rowAlign` `'stretch'`, a row of several) as tall as its
-         *  row. A row that does not fit is cut at the group's foot (its frames
+         *  row, its `'auto'` boxes that end at its foot reaching the row's
+         *  (#1095). A row that does not fit is cut at the group's foot (its frames
          *  clipped there), or, when the group goes on to another page
          *  (`FitState.gridsOn`), it and every row after it go on, whole. The
          *  modules' declared boxes follow each other at the heights their
@@ -1933,75 +1967,101 @@ function composePage(pageInput, template, fit, collapsed) {
             const box = ownBox ?? pageInput.areas.area;
             const foot = box.y + box.height;
             const toPx = (d) => dimensionToPx(d, dpi, pageInput.emPx);
+            const groupNamed = new Map(template.groups.map((g) => [g.name, g]));
             const mods = [];
             for (const item of group.items ?? []) {
                 const mod = template.modules?.find((m) => m.name === item.module);
                 const names = item.frames.filter((n) => byMember.has(n));
                 if (mod && names.length > 0)
-                    mods.push({ mod, names });
+                    mods.push({ mod, names, chain: nestedChain(template.groups, mod.nested) });
             }
-            /** A module's width in the group by its template (`'fill'`: none). */
-            const fixedWidth = (l) => {
+            /** A module's width by its template in a group `width` wide
+             *  (`'fill'`: none). */
+            const fixedWidth = (l, width) => {
                 const w = l.mod.width;
                 if (w === undefined || w === 'fill')
                     return undefined;
-                return 'percent' in w ? (box.width * w.percent) / 100 : toPx(w);
+                return 'percent' in w ? (width * w.percent) / 100 : toPx(w);
             };
-            /** `list` side by side across the group, `gap` between them: each as
-             *  wide as its template says, the others sharing what is left. */
-            const across = (list, gap) => {
-                const fixed = list.map(fixedWidth);
-                const taken = fixed.reduce((a, w) => a + (w ?? 0), 0) + gap * Math.max(0, list.length - 1);
-                const shares = fixed.filter((w) => w === undefined).length;
-                const share = shares > 0 ? Math.max(0, box.width - taken) / shares : 0;
-                const widths = fixed.map((w) => Math.max(0, w ?? share));
+            /** The cells of `list` in `g`: each module `g` lays itself, and each
+             *  run of the modules of a group inside `g`. */
+            const cellsOf = (list, g) => {
+                const out = [];
+                for (const l of list) {
+                    const name = l.chain.find((n) => groupNamed.get(n)?.within === g.name);
+                    const child = name !== undefined ? groupNamed.get(name) : undefined;
+                    const last = out[out.length - 1];
+                    if (child && last?.kind === 'group' && last.group === child)
+                        last.list.push(l);
+                    else
+                        out.push(child ? { kind: 'group', group: child, list: [l] } : { kind: 'module', l });
+                }
+                return out;
+            };
+            const namesOf = (c) => (c.kind === 'module' ? c.l.names : c.list.flatMap((l) => l.names));
+            /** `cells` side by side across `width` from `x`, `gap` between them:
+             *  each as wide as its template says, then the room left shared by
+             *  `grow` (a `'fill'` module, and a group's cell, 1 at least), or,
+             *  when the widths run past the end, given back by `shrink` in
+             *  proportion to each width (#1095). */
+            const across = (cells, gap, x, width) => {
+                const fixed = cells.map((c) => (c.kind === 'module' ? fixedWidth(c.l, width) : undefined));
+                const taken = fixed.reduce((a, w) => a + (w ?? 0), 0) + gap * Math.max(0, cells.length - 1);
+                const spare = width - taken;
+                let widths;
+                if (spare >= 0) {
+                    const grows = cells.map((c, k) => (c.kind !== 'module' ? 1 : fixed[k] === undefined ? Math.max(1, c.l.mod.grow ?? 1) : c.l.mod.grow ?? 0));
+                    const total = grows.reduce((a, g) => a + g, 0);
+                    widths = fixed.map((w, k) => Math.max(0, total > 0 ? (w ?? 0) + (spare * grows[k]) / total : w ?? 0));
+                }
+                else {
+                    const weights = cells.map((c, k) => (c.kind === 'module' && fixed[k] !== undefined ? (c.l.mod.shrink ?? 0) * fixed[k] : 0));
+                    const total = weights.reduce((a, g) => a + g, 0);
+                    widths = fixed.map((w, k) => Math.max(0, total > 0 ? (w ?? 0) + (spare * weights[k]) / total : w ?? 0));
+                }
                 const xs = [];
-                let x = box.x;
+                let at = x;
                 for (const w of widths) {
-                    xs.push(x);
-                    x += w + gap;
+                    xs.push(at);
+                    at += w + gap;
                 }
                 return { xs, widths };
             };
-            /** The rows `list` makes in a group of `g`'s kind, the first `first`
-             *  after the row before it. */
-            const rowsOf = (list, g, first, nested) => {
+            /** The rows `list` makes in a group of `g`'s kind across `width`
+             *  from `x`, the first `first` after the row before it. A group
+             *  inside a stack adds its rows to the stack's; inside a row or a
+             *  grid, a run of its modules is one cell. */
+            const rowsOf = (list, g, x, width, first) => {
                 const gap = toPx(g.gap);
                 const align = g.rowAlign ?? 'stretch';
-                const tag = nested !== undefined ? { nested } : {};
+                const cells = cellsOf(list, g);
                 if (g.kind === 'row')
-                    return [{ mods: [...list], ...across(list, gap), align, gapBefore: first, ...tag }];
+                    return [{ cells, ...across(cells, gap, x, width), align, gapBefore: first }];
                 if (g.kind === 'grid') {
                     const columns = Math.max(1, g.columns ?? 1);
                     const colGap = toPx(g.columnGap ?? g.gap);
                     const rowGap = toPx(g.rowGap ?? g.gap);
-                    const colW = Math.max(1, (box.width - colGap * (columns - 1)) / columns);
+                    const colW = Math.max(1, (width - colGap * (columns - 1)) / columns);
                     const out = [];
-                    for (let k = 0; k < list.length; k += columns) {
-                        const chunk = list.slice(k, k + columns);
-                        out.push({ mods: chunk, xs: chunk.map((_, c) => box.x + c * (colW + colGap)), widths: chunk.map(() => colW), align, gapBefore: k === 0 ? first : rowGap, ...tag });
+                    for (let k = 0; k < cells.length; k += columns) {
+                        const chunk = cells.slice(k, k + columns);
+                        out.push({ cells: chunk, xs: chunk.map((_, c) => x + c * (colW + colGap)), widths: chunk.map(() => colW), align, gapBefore: k === 0 ? first : rowGap });
                     }
                     return out;
                 }
-                // A stack: a row of its own per module, at its width from the start.
-                return list.map((l, k) => ({ mods: [l], xs: [box.x], widths: [fixedWidth(l) ?? box.width], align: 'start', gapBefore: k === 0 ? first : gap, ...tag }));
+                // A stack: a row of its own per module, at its width from the
+                // start; a group's rows in turn.
+                const out = [];
+                cells.forEach((c, k) => {
+                    const before = k === 0 ? first : gap;
+                    if (c.kind === 'module')
+                        out.push({ cells: [c], xs: [x], widths: [fixedWidth(c.l, width) ?? width], align: 'start', gapBefore: before });
+                    else
+                        out.push(...rowsOf(c.list, c.group, x, width, before));
+                });
+                return out;
             };
-            const rows = [];
-            if (group.kind !== 'stack')
-                rows.push(...rowsOf(mods, group, 0));
-            else {
-                const stackGap = toPx(group.gap);
-                for (let k = 0; k < mods.length;) {
-                    const nested = mods[k].mod.nested;
-                    const inner = nested !== undefined ? template.groups.find((g) => g.name === nested) : undefined;
-                    let end = k + 1;
-                    if (inner)
-                        while (end < mods.length && mods[end].mod.nested === nested)
-                            end++;
-                    rows.push(...rowsOf(mods.slice(k, end), inner ?? group, k === 0 ? 0 : stackGap, inner ? nested : undefined));
-                    k = end;
-                }
-            }
+            const rows = rowsOf(mods, group, box.x, box.width, 0);
             let cursor = box.y;
             let declCursor = box.y;
             let out = false;
@@ -2043,43 +2103,53 @@ function composePage(pageInput, template, fit, collapsed) {
                 pinned.length = kept.pinned;
                 return reach ? Math.max(0, reach.y + reach.height - y) : 0;
             };
-            rows.forEach((row, r) => {
-                const names = row.mods.flatMap((l) => l.names);
-                if (out) {
-                    spillWhole(names, laidAny, lastLaid);
-                    return;
-                }
-                if (r > 0) {
-                    cursor += row.gapBefore;
-                    declCursor += row.gapBefore;
-                }
-                const heights = row.mods.map((l, k) => measure(l, row.xs[k], cursor, row.widths[k]));
+            /** How tall a cell is at `(x, y)`, `width` wide: a module's height,
+             *  or a group's rows one after another (#1095). */
+            const measureCell = (c, x, y, width) => {
+                if (c.kind === 'module')
+                    return measure(c.l, x, y, width);
+                let at = y;
+                rowsOf(c.list, c.group, x, width, 0).forEach((row, r) => {
+                    if (r > 0)
+                        at += row.gapBefore;
+                    at += Math.max(0, ...row.cells.map((d, k) => measureCell(d, row.xs[k], at, row.widths[k])));
+                });
+                return at - y;
+            };
+            /** Lay `row` at `rowTop` (its declared top `declTop`), its cells
+             *  `heights` tall: each module in a box that tall (cut at the foot
+             *  when the row does not fit), a shorter one placed by `rowAlign`; a
+             *  group's cell its rows in turn. The row's foot, laid and declared. */
+            const layRow = (row, rowTop, declTop, heights, fits) => {
                 const rowH = Math.max(0, ...heights);
-                const fits = cursor + rowH <= foot + 0.5;
-                if (!fits && fit.gridsOn.has(group.name)) {
-                    // This row and the ones after it go on, whole.
-                    out = true;
-                    spillWhole(names, laidAny, lastLaid);
-                    return;
-                }
-                // Each module laid in a box that tall (cut at the foot when the row
-                // does not fit); a shorter one placed by `rowAlign`.
-                const several = row.mods.length > 1;
-                let rowBottom = cursor;
-                let rowDeclBottom = declCursor;
-                row.mods.forEach((l, k) => {
+                const several = row.cells.length > 1;
+                let rowBottom = rowTop;
+                let rowDeclBottom = declTop;
+                row.cells.forEach((c, k) => {
                     const x = row.xs[k];
                     const width = row.widths[k];
                     const spare = rowH - heights[k];
-                    const stretched = fits && several && row.align === 'stretch';
+                    const stretched = fits && several && row.align === 'stretch' && c.kind === 'module';
                     const dy = fits && several && spare > 0.01 ? (row.align === 'end' ? spare : row.align === 'center' ? spare / 2 : 0) : 0;
-                    const y = cursor + dy;
+                    const y = rowTop + dy;
+                    if (c.kind === 'group') {
+                        // A run of a group inside this one (#1095): its rows, from the
+                        // cell's top.
+                        const laid = layRows(rowsOf(c.list, c.group, x, width, 0), y, declTop + dy, fits);
+                        rowBottom = Math.max(rowBottom, laid.bottom);
+                        rowDeclBottom = Math.max(rowDeclBottom, laid.declBottom);
+                        return;
+                    }
+                    const l = c.l;
                     clipFoot = fits ? undefined : foot;
+                    // Its 'auto' boxes that end at its foot reach the row's (#1095).
+                    stretchTo = stretched && spare > 0.01 ? { at: y + heights[k], foot: y + rowH, names: new Set(l.names) } : undefined;
                     try {
-                        lay(l, x, y, width, fits ? (stretched ? rowH : heights[k]) : foot - cursor, true);
+                        lay(l, x, y, width, fits ? (stretched ? rowH : heights[k]) : foot - rowTop, true);
                     }
                     finally {
                         clipFoot = undefined;
+                        stretchTo = undefined;
                     }
                     const u = unionRect(l.names.flatMap((n) => (rects.has(n) ? [rects.get(n)] : [])));
                     const bottom = Math.max(stretched ? y + rowH : y, u ? u.y + u.height : y);
@@ -2087,32 +2157,70 @@ function composePage(pageInput, template, fit, collapsed) {
                     moduleRects.set(l.mod.name, moduleBox);
                     boxes.push(moduleBox);
                     // Declared: after the rows before it as they declare themselves.
-                    const shift = declCursor - cursor;
+                    const shift = declTop - rowTop;
                     for (const n of l.names) {
                         const d = declared.get(n);
                         if (d && Math.abs(shift) > 0.001)
                             declared.set(n, { ...d, y: d.y + shift });
                     }
-                    const declY = declCursor + dy;
+                    const declY = declTop + dy;
                     const du = unionRect(l.names.flatMap((n) => (declared.has(n) ? [declared.get(n)] : [])));
                     const declBottom = du ? Math.max(declY, du.y + du.height) : declY;
                     const declBox = { x, y: declY, width, height: declBottom - declY };
                     declBoxes.push(declBox);
-                    if (row.nested !== undefined) {
-                        const n = nestedBoxes.get(row.nested) ?? { laid: [], declared: [] };
+                    for (const name of l.chain) {
+                        const n = nestedBoxes.get(name) ?? { laid: [], declared: [] };
                         n.laid.push(moduleBox);
                         n.declared.push(declBox);
-                        nestedBoxes.set(row.nested, n);
+                        nestedBoxes.set(name, n);
                     }
                     rowBottom = Math.max(rowBottom, bottom);
                     rowDeclBottom = Math.max(rowDeclBottom, declBottom);
                 });
+                return { bottom: rowBottom, declBottom: rowDeclBottom };
+            };
+            /** The rows of a group's cell, one after another from `top`. */
+            const layRows = (list, top, declTop, fits) => {
+                let at = top;
+                let declAt = declTop;
+                list.forEach((row, r) => {
+                    if (r > 0) {
+                        at += row.gapBefore;
+                        declAt += row.gapBefore;
+                    }
+                    const heights = row.cells.map((c, k) => measureCell(c, row.xs[k], at, row.widths[k]));
+                    const laid = layRow(row, at, declAt, heights, fits);
+                    at = laid.bottom;
+                    declAt = laid.declBottom;
+                });
+                return { bottom: at, declBottom: declAt };
+            };
+            rows.forEach((row, r) => {
+                const names = row.cells.flatMap(namesOf);
+                if (out) {
+                    spillWhole(names, laidAny, lastLaid);
+                    return;
+                }
+                if (r > 0) {
+                    cursor += row.gapBefore;
+                    declCursor += row.gapBefore;
+                }
+                const heights = row.cells.map((c, k) => measureCell(c, row.xs[k], cursor, row.widths[k]));
+                const rowH = Math.max(0, ...heights);
+                const fits = cursor + rowH <= foot + 0.5;
+                if (!fits && fit.gridsOn.has(group.name)) {
+                    // This row and the ones after it go on, whole.
+                    out = true;
+                    spillWhole(names, laidAny, lastLaid);
+                    return;
+                }
+                const laid = layRow(row, cursor, declCursor, heights, fits);
                 laidAny = true;
                 lastLaid = frameIdOf(names[names.length - 1]);
-                cursor = rowBottom;
-                declCursor = rowDeclBottom;
+                cursor = laid.bottom;
+                declCursor = laid.declBottom;
             });
-            // A group inside the stack (#1088) is the box of its modules.
+            // A group inside another (#1088, #1095) is the box of its modules.
             for (const [name, b] of nestedBoxes) {
                 groupRects.set(name, unionRect(b.laid));
                 groupDeclared.set(name, unionRect(b.declared));