@dloizides/poster-render 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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.
+- Two-column bodies: the break is chosen from heights measured at the column width, and the shorter column spreads its group gaps so both columns end together.
+- Footer base size 38 (was 34): includes and footer stay at 30 px or more on story and phone arch layouts.
+- `picture-bottom`: the picture region starts 40u under the body's measured end, spans the middle 80% of the width and runs to the frame edge.
+- Venue gets a rule below as well as above (`FlowGroup.ruleBelow`).
+
 ## 0.2.1
 
 - Venue pin: an accent disc with a pin glyph beside the venue lines; `RenderReport.iconBoxes`.

package/dist/index.js

@@ -347,7 +347,7 @@ function bodyGroups(doc, p, u, withPrices = true) {
   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 }, icon: { color: p.accent, glyph: p.background } });
+    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) {
@@ -355,7 +355,7 @@ function bodyGroups(doc, p, u, withPrices = true) {
     groups.push({ lines, gapAfter: 24 * u, uniform: true });
   }
   if (b.footer) {
-    groups.push({ lines: [l.soft?.(b.footer, 34)], gapAfter: 0 });
+    groups.push({ lines: [l.soft?.(b.footer, 38)], gapAfter: 0 });
   }
   return groups;
 }
@@ -409,8 +409,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.45;
+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],
@@ -441,12 +444,15 @@ function side(w, h, fraction) {
 }
 function bottom(w, h) {
   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 * BOTTOM_PICTURE_W);
+  const picH = Math.min(r2(picW / BOTTOM_ASPECT), h - r2(h * BOTTOM_MIN_TOP));
+  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
   };
 }
@@ -550,18 +556,24 @@ function placeGroup(m, k, col, y0, out) {
   });
   y = placeIcon(group, d, col.x + pad, top + pad, y, out);
   y += pad;
+  if (group.rule && group.ruleBelow) {
+    y += group.rule.height * k * (RULE_GAP - 1);
+    out?.rules.push({ rect: { x: col.x, y, w: col.w * RULE_WIDTH, h: group.rule.height * k }, color: group.rule.color });
+    y += group.rule.height * k;
+  }
   if (group.card) {
     out?.cards.unshift({ rect: { x: col.x, y: top, w: col.w, h: y - top }, color: group.card.color });
   }
   return y + group.gapAfter * k - y0;
 }
-function placeColumn(groups, k, col, out) {
+function placeColumn(groups, k, col, out, spread = 0) {
   let h = 0;
   for (const g of groups) {
-    h += placeGroup(g, k, col, col.y + h, out);
+    h += placeGroup(g, k, col, col.y + h, out) + spread;
   }
-  return h;
+  return h - spread;
 }
+var columnSum = (heights, from, to) => heights.slice(from, to).reduce((a, b) => a + b, 0);
 var tallest = (heights, cut) => {
   const left = heights.slice(0, cut).reduce((a, b) => a + b, 0);
   const right = heights.slice(cut).reduce((a, b) => a + b, 0);
@@ -587,19 +599,17 @@ function splitColumns(groups, zone) {
   if (zone.w / Math.max(zone.h, 1) <= WIDE || groups.length < 2) {
     return [{ col: zone, groups }];
   }
-  const heights = groups.map((g) => placeGroup(g, 1, zone, 0, null));
-  const half = heights.reduce((a, b) => a + b, 0) / 2;
-  let acc = 0;
-  let cut = 1;
-  heights.forEach((h, i) => {
-    if (acc < half) {
-      cut = i + 1;
-    }
-    acc += h;
-  });
-  cut = keepTogether(groups, heights, Math.min(cut, groups.length - 1));
   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));
+  const total = columnSum(heights, 0, heights.length);
+  let cut = 1;
+  for (let c = 2; c < groups.length; c++) {
+    if (Math.abs(total - 2 * columnSum(heights, 0, c)) < Math.abs(total - 2 * columnSum(heights, 0, cut))) {
+      cut = c;
+    }
+  }
+  cut = keepTogether(groups, heights, cut);
   return [
     { col: { ...zone, w }, groups: groups.slice(0, cut) },
     { col: { ...zone, x: zone.x + w + gap, w }, groups: groups.slice(cut) }
@@ -629,7 +639,9 @@ function flow(ctx, groups, zone, fonts) {
     }
   }
   const out = emptyFlow();
-  columns.forEach((c) => placeColumn(c.groups, lo, c.col, out));
+  const heights = columns.map((c) => placeColumn(c.groups, lo, c.col, null));
+  const end = Math.max(...heights);
+  columns.forEach((c, i) => placeColumn(c.groups, lo, c.col, out, c.groups.length > 1 && columns.length > 1 ? (end - (heights[i] ?? end)) / (c.groups.length - 1) : 0));
   const lines = groups.flatMap((g) => g.lines);
   out.texts.forEach((t, i) => {
     const line = lines[i];
@@ -638,6 +650,42 @@ function flow(ctx, groups, zone, fonts) {
   return out;
 }
 
+// src/render/regions.ts
+var LINE_HEIGHT2 = 1.2;
+var BODY_GAP = 40;
+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 = [];
+  let i = 0;
+  groups.forEach(
+    (g) => g.lines.forEach((_line, j) => {
+      smallest[j] = Math.min(smallest[j] ?? Infinity, sizes[i] ?? Infinity);
+      i++;
+    })
+  );
+  return smallest;
+}
+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) })) }));
+  return flowFlanks(ctx, sized, flanks, fonts);
+}
+function measuredEnd(f, fallback) {
+  const bottoms = [...f.texts.map((t) => t.box), ...f.rules.map((r3) => r3.rect), ...f.icons.map((i) => i.rect)].map((r3) => r3.y + r3.h);
+  return bottoms.length > 0 ? Math.max(...bottoms) : fallback;
+}
+function pictureRegion(layout, geo, body, u, frame) {
+  if (layout !== "picture-bottom" /* PictureBottom */) {
+    return geo.picture;
+  }
+  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
 var BASE = 1080;
 var LOGO_SHARE = 0.26;
@@ -730,10 +778,6 @@ function drawArch(ctx, r3, color) {
   ctx.arc(r3.x + rad, r3.y + rad, rad, Math.PI, Math.PI * 2);
   ctx.fill();
 }
-function flankFlows(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 capAligned(zone, head) {
   const first = head.texts[0]?.box;
   const shift = first ? Math.min(Math.max(0, Math.round(first.y + first.h * CAP_TOP) - zone.y), Math.round(zone.h / 2)) : 0;
@@ -767,7 +811,7 @@ function render(input, assets, canvas) {
   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 ? flankFlows(ctx, flankPriceGroups(doc, palette, u), flanks, fonts) : [emptyFlow()];
+  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;
@@ -780,7 +824,8 @@ function render(input, assets, canvas) {
   if (backdrop) {
     drawArch(ctx, backdrop, palette.arch);
   }
-  const picture = image && doc.picture ? placeContain(image, geo.picture, doc.picture.anchor, geo.alignX, doc.picture.scale) : null;
+  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);
   }
@@ -788,7 +833,7 @@ function render(input, assets, canvas) {
     width,
     height,
     picture,
-    pictureRegion: geo.picture,
+    pictureRegion: region,
     textBoxes: [head, body, ...sides].flatMap((f) => f.texts.map((t) => t.box)),
     cardBoxes: body.cards.map((c) => c.rect),
     iconBoxes: [head, body, ...sides].flatMap((f) => f.icons.map((i) => i.rect)),