@dloizides/poster-render 0.2.2 → 0.2.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.2.4
+
+- Type floor: every text run is at least 30px at a 1080 short edge (scaled per format by short edge). When a layout cannot fit its text at the floor, the picture yields space to the body (and a header stacked above it) in 2.5% steps.
+- picture-bottom sizes the picture to the space left once the body holds the floor (about 0.56w for the real tall couple on a story); it stays whole on the bottom edge.
+- Text zones pick two columns when that sets the type at least 15% larger.
+
+## 0.2.3
+
+- `picture-bottom`: the picture is sized for a tall cut-out (design aspect 0.57): 80% of the width, standing on the bottom edge; the header and body share the top (at least 25% of the height) and shrink to fit. The picture is never cropped.
+
 ## 0.2.2
 
 - Arch flanks: both flank price groups use one size per line, so "per hour" and "Party pass" match.

package/dist/index.js

@@ -293,73 +293,6 @@ function missingAssets(doc, assets) {
   return errors;
 }
 
-// src/layout/blockGroups.ts
-var BOLD = 700;
-var SEMI = 600;
-var MEDIUM = 500;
-var SCRIPT = 400;
-var makers = (p, u) => ({
-  display: (text2, size) => ({ text: text2, role: "display", weight: BOLD, size: size * u, color: p.title }),
-  venue: (text2, size) => ({ text: text2, role: "display", weight: MEDIUM, size: size * u, color: p.ink }),
-  script: (text2, size) => ({ text: text2, role: "script", weight: SCRIPT, size: size * u, color: p.accent }),
-  strong: (text2, size) => ({ text: text2, role: "body", weight: BOLD, size: size * u, color: p.ink }),
-  accent: (text2, size) => ({ text: text2, role: "body", weight: SEMI, size: size * u, color: p.accent }),
-  item: (text2, size) => ({ text: text2, role: "body", weight: SEMI, size: size * u, color: p.ink, bullet: p.accent }),
-  soft: (text2, size) => ({ text: text2, role: "body", weight: MEDIUM, size: size * u, color: p.soft })
-});
-function headerGroups(doc, p, u) {
-  const l = makers(p, u);
-  const b = doc.blocks;
-  const lines = [l.display?.(b.title, 250), b.script ? l.script?.(b.script, 120) : void 0, b.titleBottom ? l.display?.(b.titleBottom, 250) : void 0];
-  return [{ lines: lines.filter((x) => x !== void 0), gapAfter: 0 }];
-}
-function itemGroup(item, l, u) {
-  const lines = [l.script?.(item.date, 67)];
-  item.schedule.forEach((row) => lines.push(l.strong?.(`${row.label}  ${row.time}`, 42)));
-  if (item.price) {
-    lines.push(l.accent?.(item.price, 42));
-  }
-  return { lines, gapAfter: 48 * u };
-}
-function eventGroups(doc, l, u, withPrices) {
-  const b = doc.blocks;
-  const groups = [];
-  b.schedule?.forEach((row) => groups.push({ lines: [l.strong?.(row.label, 66), l.accent?.(row.time, 60)], gapAfter: 30 * u }));
-  const prices = (withPrices ? b.prices : void 0) ?? [];
-  prices.forEach((row, i) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], gapAfter: 30 * u, keepWithNext: i < prices.length - 1 }));
-  return groups;
-}
-function listGroups(doc, l, u) {
-  const groups = (doc.items ?? []).map((item) => itemGroup(item, l, u));
-  const prices = doc.blocks.prices?.map((row) => l.strong?.(`${row.amount} ${row.label}`, 58)) ?? [];
-  if (prices.length > 0) {
-    groups.push({ lines: prices, gapAfter: 30 * u });
-  }
-  return groups;
-}
-function flankPriceGroups(doc, p, u) {
-  const l = makers(p, u);
-  return (doc.blocks.prices ?? []).map((row) => ({ lines: [l.strong?.(row.amount, 110), l.accent?.(row.label, 48)], gapAfter: 30 * u }));
-}
-function bodyGroups(doc, p, u, withPrices = true) {
-  const l = makers(p, u);
-  const b = doc.blocks;
-  const groups = [];
-  const isList = doc.layout === "list" /* List */;
-  if (b.venue) {
-    groups.push({ lines: b.venue.map((v) => l.venue?.(v, isList ? 48 : 58)), gapAfter: 40 * u, rule: { color: p.accent, height: 8 * u }, ruleBelow: true, icon: { color: p.accent, glyph: p.background } });
-  }
-  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, withPrices));
-  if (b.includes) {
-    const lines = [l.accent?.(b.includes.heading, 38), ...b.includes.items.map((i) => l.item?.(i, 38))];
-    groups.push({ lines, gapAfter: 24 * u, uniform: true });
-  }
-  if (b.footer) {
-    groups.push({ lines: [l.soft?.(b.footer, 38)], gapAfter: 0 });
-  }
-  return groups;
-}
-
 // src/layout/layoutSpecs.ts
 var flanksBeside = (pic, top, bottom2, m) => [
   [m, top, pic[0] - 2 * m, bottom2 - top],
@@ -409,8 +342,11 @@ var toRect = (f, w, h) => {
 var MARGIN = 0.045;
 var HEADER_PORTRAIT = 0.3;
 var HEADER_LANDSCAPE = 0.36;
-var BOTTOM_HEADER = 0.2;
-var BOTTOM_PICTURE = 0.52;
+var BOTTOM_PICTURE_W = 0.8;
+var BOTTOM_MIN_TOP = 0.25;
+var BOTTOM_HEADER_SHARE = 0.3;
+var BOTTOM_GAP = 40 / 1080;
+var BOTTOM_ASPECT = 0.57;
 var PICTURE_SIDE = {
   ["picture-right" /* PictureRight */]: [0.6, 0.42],
   ["picture-left" /* PictureLeft */]: [0.6, 0.42],
@@ -439,14 +375,17 @@ function side(w, h, fraction) {
     alignX: 1
   };
 }
-function bottom(w, h) {
+function bottom(w, h, share) {
   const m = r2(Math.min(w, h) * MARGIN);
-  const top = r2(h * BOTTOM_HEADER);
-  const pic = r2(h * BOTTOM_PICTURE);
+  const gap = r2(Math.min(w, h) * BOTTOM_GAP);
+  const picW = r2(w * share);
+  const picH = Math.min(r2(picW / BOTTOM_ASPECT), r2((h - r2(h * BOTTOM_MIN_TOP)) * share / BOTTOM_PICTURE_W));
+  const pic = h - picH;
+  const top = m + r2((pic - m) * BOTTOM_HEADER_SHARE);
   return {
-    header: { x: m, y: m, w: w - 2 * m, h: top - 2 * m },
-    body: { x: m, y: top, w: w - 2 * m, h: pic - top - m },
-    picture: { x: 0, y: pic, w, h: h - pic },
+    header: { x: m, y: m, w: w - 2 * m, h: top - m },
+    body: { x: m, y: top, w: w - 2 * m, h: pic - gap - top },
+    picture: { x: r2((w - picW) / 2), y: pic, w: picW, h: picH },
     alignX: 0.5
   };
 }
@@ -462,13 +401,13 @@ function fromSpec(spec, w, h) {
   };
 }
 var mirror = (rect, w) => ({ ...rect, x: w - rect.x - rect.w });
-function geometry(layout, w, h) {
+function geometry(layout, w, h, give = 0) {
   const oriented = LAYOUT_SPECS[layout];
   if (oriented) {
     return fromSpec(h >= w ? oriented.portrait : oriented.landscape, w, h);
   }
   if (layout === "picture-bottom" /* PictureBottom */) {
-    return bottom(w, h);
+    return bottom(w, h, BOTTOM_PICTURE_W - give);
   }
   const g = side(w, h, PICTURE_SIDE[layout] ?? [0.6, 0.42]);
   if (layout !== "picture-left" /* PictureLeft */) {
@@ -488,6 +427,73 @@ function placeContain(image, region, anchor, alignX, scale) {
   };
 }
 
+// src/layout/blockGroups.ts
+var BOLD = 700;
+var SEMI = 600;
+var MEDIUM = 500;
+var SCRIPT = 400;
+var makers = (p, u) => ({
+  display: (text2, size) => ({ text: text2, role: "display", weight: BOLD, size: size * u, color: p.title }),
+  venue: (text2, size) => ({ text: text2, role: "display", weight: MEDIUM, size: size * u, color: p.ink }),
+  script: (text2, size) => ({ text: text2, role: "script", weight: SCRIPT, size: size * u, color: p.accent }),
+  strong: (text2, size) => ({ text: text2, role: "body", weight: BOLD, size: size * u, color: p.ink }),
+  accent: (text2, size) => ({ text: text2, role: "body", weight: SEMI, size: size * u, color: p.accent }),
+  item: (text2, size) => ({ text: text2, role: "body", weight: SEMI, size: size * u, color: p.ink, bullet: p.accent }),
+  soft: (text2, size) => ({ text: text2, role: "body", weight: MEDIUM, size: size * u, color: p.soft })
+});
+function headerGroups(doc, p, u) {
+  const l = makers(p, u);
+  const b = doc.blocks;
+  const lines = [l.display?.(b.title, 250), b.script ? l.script?.(b.script, 120) : void 0, b.titleBottom ? l.display?.(b.titleBottom, 250) : void 0];
+  return [{ lines: lines.filter((x) => x !== void 0), gapAfter: 0 }];
+}
+function itemGroup(item, l, u) {
+  const lines = [l.script?.(item.date, 67)];
+  item.schedule.forEach((row) => lines.push(l.strong?.(`${row.label}  ${row.time}`, 42)));
+  if (item.price) {
+    lines.push(l.accent?.(item.price, 42));
+  }
+  return { lines, gapAfter: 48 * u };
+}
+function eventGroups(doc, l, u, withPrices) {
+  const b = doc.blocks;
+  const groups = [];
+  b.schedule?.forEach((row) => groups.push({ lines: [l.strong?.(row.label, 66), l.accent?.(row.time, 60)], gapAfter: 30 * u }));
+  const prices = (withPrices ? b.prices : void 0) ?? [];
+  prices.forEach((row, i) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], gapAfter: 30 * u, keepWithNext: i < prices.length - 1 }));
+  return groups;
+}
+function listGroups(doc, l, u) {
+  const groups = (doc.items ?? []).map((item) => itemGroup(item, l, u));
+  const prices = doc.blocks.prices?.map((row) => l.strong?.(`${row.amount} ${row.label}`, 58)) ?? [];
+  if (prices.length > 0) {
+    groups.push({ lines: prices, gapAfter: 30 * u });
+  }
+  return groups;
+}
+function flankPriceGroups(doc, p, u) {
+  const l = makers(p, u);
+  return (doc.blocks.prices ?? []).map((row) => ({ lines: [l.strong?.(row.amount, 110), l.accent?.(row.label, 48)], gapAfter: 30 * u }));
+}
+function bodyGroups(doc, p, u, withPrices = true) {
+  const l = makers(p, u);
+  const b = doc.blocks;
+  const groups = [];
+  const isList = doc.layout === "list" /* List */;
+  if (b.venue) {
+    groups.push({ lines: b.venue.map((v) => l.venue?.(v, isList ? 48 : 58)), gapAfter: 40 * u, rule: { color: p.accent, height: 8 * u }, ruleBelow: true, icon: { color: p.accent, glyph: p.background } });
+  }
+  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, withPrices));
+  if (b.includes) {
+    const lines = [l.accent?.(b.includes.heading, 38), ...b.includes.items.map((i) => l.item?.(i, 38))];
+    groups.push({ lines, gapAfter: 24 * u, uniform: true });
+  }
+  if (b.footer) {
+    groups.push({ lines: [l.soft?.(b.footer, 38)], gapAfter: 0 });
+  }
+  return groups;
+}
+
 // src/layout/textFlow.ts
 var LINE_HEIGHT = 1.2;
 var BULLET_INDENT = 1.1;
@@ -495,6 +501,8 @@ var BULLET_RADIUS = 0.2;
 var RULE_GAP = 2.5;
 var RULE_WIDTH = 0.9;
 var WIDE = 1.6;
+var TWO_COLUMN_MIN = 0.75;
+var TWO_COLUMN_GAIN = 1.15;
 var MIN_K = 0.02;
 var STEPS = 22;
 var ICON_SCALE = 1.6;
@@ -590,9 +598,6 @@ function keepTogether(groups, heights, cut) {
   return candidates.reduce((best, c) => tallest(heights, c) < tallest(heights, best) ? c : best);
 }
 function splitColumns(groups, zone) {
-  if (zone.w / Math.max(zone.h, 1) <= WIDE || groups.length < 2) {
-    return [{ col: zone, groups }];
-  }
   const gap = Math.round(zone.w * 0.04);
   const w = (zone.w - gap) / 2;
   const heights = groups.map((g) => placeGroup(g, 1, { ...zone, w }, 0, null));
@@ -609,16 +614,8 @@ function splitColumns(groups, zone) {
     { col: { ...zone, x: zone.x + w + gap, w }, groups: groups.slice(cut) }
   ];
 }
-function flow(ctx, groups, zone, fonts) {
-  const measured = groups.map((group) => ({
-    group,
-    widths: group.lines.map((line) => {
-      ctx.font = fontOf(line, line.size, fonts);
-      return ctx.measureText(line.text).width;
-    })
-  }));
-  const columns = splitColumns(measured, zone);
-  const fits = (k) => columns.every((c) => placeColumn(c.groups, k, c.col, null) <= zone.h);
+function largestK(columns, zoneH) {
+  const fits = (k) => columns.every((c) => placeColumn(c.groups, k, c.col, null) <= zoneH);
   let lo = MIN_K;
   let hi = 1;
   if (fits(1)) {
@@ -632,6 +629,28 @@ function flow(ctx, groups, zone, fonts) {
       hi = mid;
     }
   }
+  return lo;
+}
+function bestColumns(measured, zone) {
+  const single = [{ col: zone, groups: measured }];
+  const k1 = largestK(single, zone.h);
+  if (measured.length < 2 || zone.w / Math.max(zone.h, 1) < TWO_COLUMN_MIN) {
+    return { columns: single, k: k1 };
+  }
+  const split = splitColumns(measured, zone);
+  const k2 = largestK(split, zone.h);
+  const forced = zone.w / Math.max(zone.h, 1) > WIDE;
+  return forced || k2 > k1 * TWO_COLUMN_GAIN ? { columns: split, k: k2 } : { columns: single, k: k1 };
+}
+function flow(ctx, groups, zone, fonts) {
+  const measured = groups.map((group) => ({
+    group,
+    widths: group.lines.map((line) => {
+      ctx.font = fontOf(line, line.size, fonts);
+      return ctx.measureText(line.text).width;
+    })
+  }));
+  const { columns, k: lo } = bestColumns(measured, zone);
   const out = emptyFlow();
   const heights = columns.map((c) => placeColumn(c.groups, lo, c.col, null));
   const end = Math.max(...heights);
@@ -647,26 +666,25 @@ function flow(ctx, groups, zone, fonts) {
 // src/render/regions.ts
 var LINE_HEIGHT2 = 1.2;
 var BODY_GAP = 40;
-var BOTTOM_SIDE = 0.1;
 function flowFlanks(ctx, groups, flanks, fonts) {
   const half = Math.ceil(groups.length / 2);
   return flanks.map((zone, i) => i === 0 ? flow(ctx, groups.slice(0, half), zone, fonts) : flow(ctx, groups.slice(half), { ...zone, right: true }, fonts));
 }
 function smallestPerLine(groups, results) {
   const sizes = results.flatMap((r3) => r3.texts.map((t) => t.box.h / LINE_HEIGHT2));
-  const smallest = [];
+  const smallest2 = [];
   let i = 0;
   groups.forEach(
     (g) => g.lines.forEach((_line, j) => {
-      smallest[j] = Math.min(smallest[j] ?? Infinity, sizes[i] ?? Infinity);
+      smallest2[j] = Math.min(smallest2[j] ?? Infinity, sizes[i] ?? Infinity);
       i++;
     })
   );
-  return smallest;
+  return smallest2;
 }
 function equalFlanks(ctx, groups, flanks, fonts) {
-  const smallest = smallestPerLine(groups, flowFlanks(ctx, groups, flanks, fonts));
-  const sized = groups.map((g) => ({ ...g, lines: g.lines.map((line, j) => ({ ...line, size: Math.min(line.size, smallest[j] ?? line.size) })) }));
+  const smallest2 = smallestPerLine(groups, flowFlanks(ctx, groups, flanks, fonts));
+  const sized = groups.map((g) => ({ ...g, lines: g.lines.map((line, j) => ({ ...line, size: Math.min(line.size, smallest2[j] ?? line.size) })) }));
   return flowFlanks(ctx, sized, flanks, fonts);
 }
 function measuredEnd(f, fallback) {
@@ -677,14 +695,76 @@ function pictureRegion(layout, geo, body, u, frame) {
   if (layout !== "picture-bottom" /* PictureBottom */) {
     return geo.picture;
   }
-  const y = Math.ceil(measuredEnd(body, geo.body.y) + BODY_GAP * u);
-  const x = Math.round(frame.width * BOTTOM_SIDE);
-  return { x, y, w: frame.width - 2 * x, h: frame.height - y };
+  const y = Math.min(geo.picture.y, Math.ceil(measuredEnd(body, geo.body.y) + BODY_GAP * u));
+  return { x: geo.picture.x, y, w: geo.picture.w, h: frame.height - y };
 }
 
-// src/render/render.ts
+// src/render/yieldToText.ts
+function yieldToText(geo, give) {
+  const { picture: p, body: b } = geo;
+  if (give <= 0) {
+    return geo;
+  }
+  if (p.x >= b.x + b.w) {
+    const d = Math.round(p.w * give);
+    return { ...geo, picture: { ...p, x: p.x + d, w: p.w - d }, body: { ...b, w: b.w + d } };
+  }
+  if (p.x + p.w <= b.x) {
+    const d = Math.round(p.w * give);
+    return { ...geo, picture: { ...p, w: p.w - d }, body: { ...b, x: b.x - d, w: b.w + d } };
+  }
+  if (p.y >= b.y + b.h) {
+    const d = Math.round(p.h * give);
+    const stacked = geo.header.y + geo.header.h <= b.y;
+    const toHeader = stacked ? Math.round(d / 2) : 0;
+    return {
+      ...geo,
+      header: { ...geo.header, h: geo.header.h + toHeader },
+      picture: { ...p, y: p.y + d, h: p.h - d },
+      body: { ...b, y: b.y + toHeader, h: b.h + d - toHeader },
+      flanks: geo.flanks?.map((f) => ({ ...f, y: f.y + d, h: f.h - d }))
+    };
+  }
+  return geo;
+}
+
+// src/render/fitToFloor.ts
+var FLOOR_PX = 30;
 var BASE = 1080;
+var LINE_HEIGHT3 = 1.2;
 var LOGO_SHARE = 0.26;
+var GIVE_STEP = 0.025;
+var GIVE_STEPS = 32;
+function splitHeader(header, hasLogo) {
+  const logoW = hasLogo ? Math.round(header.w * LOGO_SHARE) : 0;
+  return { text: { ...header, w: header.w - logoW * 1.1 }, logo: { ...header, x: header.x + header.w - logoW, w: logoW } };
+}
+function flowAll(ctx, input, geo, u) {
+  const { doc, palette, fonts } = input;
+  const zones = geo.logo ? { text: geo.header, logo: geo.logo } : splitHeader(geo.header, doc.logo !== void 0);
+  const head = flow(ctx, headerGroups(doc, palette, u), zones.text, fonts);
+  const flanks = geo.flanks ?? [];
+  const body = flow(ctx, bodyGroups(doc, palette, u, flanks.length === 0), geo.body, fonts);
+  const sides = flanks.length > 0 ? equalFlanks(ctx, flankPriceGroups(doc, palette, u), flanks, fonts) : [emptyFlow()];
+  return { geo, zones, head, body, sides };
+}
+var smallest = (t) => Math.min(Infinity, ...[t.head, t.body, ...t.sides].flatMap((f) => f.texts.map((x) => x.box.h / LINE_HEIGHT3)));
+function geometryWithGive(layout, width, height, give) {
+  return layout === "picture-bottom" /* PictureBottom */ ? geometry(layout, width, height, give) : yieldToText(geometry(layout, width, height), give);
+}
+function fitToFloor(ctx, input) {
+  const { doc, width, height } = input;
+  const u = Math.min(width, height) / BASE;
+  const floor = FLOOR_PX * u;
+  let fitted = flowAll(ctx, input, geometryWithGive(doc.layout, width, height, 0), u);
+  for (let step = 1; step <= GIVE_STEPS && smallest(fitted) < floor; step++) {
+    fitted = flowAll(ctx, input, geometryWithGive(doc.layout, width, height, step * GIVE_STEP), u);
+  }
+  return fitted;
+}
+
+// src/render/render.ts
+var BASE2 = 1080;
 var CARD_RADIUS = 0.035;
 var CAP_TOP = 0.15;
 var PIN_HEAD_Y = 0.08;
@@ -779,10 +859,6 @@ function capAligned(zone, head) {
   const shift = first ? Math.min(Math.max(0, Math.round(first.y + first.h * CAP_TOP) - zone.y), Math.round(zone.h / 2)) : 0;
   return { ...zone, y: zone.y + shift, h: zone.h - shift };
 }
-function splitHeader(header, hasLogo) {
-  const logoW = hasLogo ? Math.round(header.w * LOGO_SHARE) : 0;
-  return { text: { ...header, w: header.w - logoW * 1.1 }, logo: { ...header, x: header.x + header.w - logoW, w: logoW } };
-}
 function render(input, assets, canvas) {
   const doc = checked(input, assets);
   const { width, height } = FORMAT_SIZES[doc.format];
@@ -794,8 +870,8 @@ function render(input, assets, canvas) {
   }
   const palette = PALETTES[doc.palette];
   const fonts = FONT_SETS[doc.fonts];
-  const geo = geometry(doc.layout, width, height);
-  const u = Math.min(width, height) / BASE;
+  const u = Math.min(width, height) / BASE2;
+  const { geo, zones, head, body, sides } = fitToFloor(ctx, { doc, palette, fonts, width, height });
   ctx.globalAlpha = 1;
   ctx.fillStyle = palette.background;
   ctx.fillRect(0, 0, width, height);
@@ -803,11 +879,6 @@ function render(input, assets, canvas) {
     ctx.fillStyle = palette.tint;
     [geo.header, geo.body].forEach((r3) => ctx.fillRect(r3.x, r3.y, r3.w, r3.h));
   }
-  const zones = geo.logo ? { text: geo.header, logo: geo.logo } : splitHeader(geo.header, doc.logo !== void 0);
-  const head = flow(ctx, headerGroups(doc, palette, u), zones.text, fonts);
-  const flanks = geo.flanks ?? [];
-  const body = flow(ctx, bodyGroups(doc, palette, u, flanks.length === 0), geo.body, fonts);
-  const sides = flanks.length > 0 ? equalFlanks(ctx, flankPriceGroups(doc, palette, u), flanks, fonts) : [emptyFlow()];
   const radius = Math.min(width, height) * CARD_RADIUS;
   [head, body, ...sides].forEach((f) => drawFlow(ctx, f, radius));
   const logoImage = doc.logo ? assets[doc.logo.imageId] : void 0;
@@ -820,7 +891,7 @@ function render(input, assets, canvas) {
   if (backdrop) {
     drawArch(ctx, backdrop, palette.arch);
   }
-  const region = pictureRegion(doc.layout, geo, body, u, { width, height });
+  const region = pictureRegion(doc.layout, geo, body, u, { height });
   const picture = image && doc.picture ? placeContain(image, region, doc.picture.anchor, geo.alignX, doc.picture.scale) : null;
   if (image && picture) {
     ctx.drawImage(image, picture.x, picture.y, picture.w, picture.h);