@dloizides/poster-render 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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`.
+- Includes block drawn as a heading plus bullets, with no card.
+- Price groups stay in one column when a wide body splits into two (`FlowGroup.keepWithNext`).
+- `desktop-safe` landscape gets an explicit logo rect beside the title; `desktop-arch` logo enlarged and no longer pushed down to the title cap; `RenderReport.logo`.
+- List rows: date at 0.7x, 48 px between dated rows.
+
 ## 0.2.0
 
 - Layouts `arch`, `phone-clock-safe`, `phone-arch`, `desktop-safe`, `desktop-arch` (FLIER-1 D4 "Keep all layouts"); `LAYOUT_CATALOGUE` + `defaultLayoutFor`.

package/dist/index.d.mts

@@ -140,6 +140,8 @@ interface RenderReport {
     pictureRegion: Rect;
     textBoxes: Rect[];
     cardBoxes: Rect[];
+    iconBoxes: Rect[];
+    logo: Rect | null;
     backdrop: Rect | null;
 }
 interface Palette {

package/dist/index.d.ts

@@ -140,6 +140,8 @@ interface RenderReport {
     pictureRegion: Rect;
     textBoxes: Rect[];
     cardBoxes: Rect[];
+    iconBoxes: Rect[];
+    logo: Rect | null;
     backdrop: Rect | null;
 }
 interface Palette {

package/dist/index.js

@@ -314,18 +314,19 @@ function headerGroups(doc, p, u) {
   return [{ lines: lines.filter((x) => x !== void 0), gapAfter: 0 }];
 }
 function itemGroup(item, l, u) {
-  const lines = [l.script?.(item.date, 96)];
+  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: 26 * u };
+  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 }));
-  (withPrices ? b.prices : void 0)?.forEach((row) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], 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) {
@@ -346,15 +347,15 @@ 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 } });
+    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, card: { color: p.card, pad: 28 * u }, uniform: 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;
 }
@@ -390,11 +391,11 @@ var LAYOUT_SPECS = {
   },
   ["desktop-safe" /* DesktopSafe */]: {
     portrait: { header: [0.08, 0.06, 0.84, 0.24], body: [0.08, 0.31, 0.46, 0.58], picture: [0.56, 0.36, 0.44, 0.64], alignX: 1 },
-    landscape: { header: [0.0625, 0.05, 0.58, 0.44], body: [0.0625, 0.5, 0.58, 0.38], picture: [0.67, 0.0972, 0.29, 0.9028], alignX: 1 }
+    landscape: { header: [0.0625, 0.05, 0.58, 0.44], body: [0.0625, 0.5, 0.58, 0.38], picture: [0.67, 0.0972, 0.29, 0.9028], alignX: 1, logo: [0.4, 0.045, 0.09, 0.17] }
   },
   ["desktop-arch" /* DesktopArch */]: {
     portrait: { header: [0.08, 0.06, 0.84, 0.2], body: [0.08, 0.27, 0.84, 0.2], picture: [0.14, 0.48, 0.72, 0.52], alignX: 0.5, arch: 0.05 },
-    landscape: { header: [0.07, 0.3, 0.26, 0.45], body: [0.7, 0.25, 0.27, 0.65], picture: DESK_ARCH_PIC, alignX: 0.5, logo: [0.88, 0.04, 0.09, 0.14], arch: 0.05 }
+    landscape: { header: [0.07, 0.3, 0.26, 0.45], body: [0.7, 0.25, 0.27, 0.65], picture: DESK_ARCH_PIC, alignX: 0.5, logo: [0.86, 0.03, 0.11, 0.18], arch: 0.05 }
   }
 };
 var r = Math.round;
@@ -496,8 +497,14 @@ var RULE_WIDTH = 0.9;
 var WIDE = 1.6;
 var MIN_K = 0.02;
 var STEPS = 22;
+var ICON_SCALE = 1.6;
+var ICON_GAP = 0.35;
 var fontOf = (line, size, fonts) => `${line.weight} ${size}px ${fonts[line.role]}`;
-var emptyFlow = () => ({ texts: [], cards: [], rules: [], bullets: [] });
+var emptyFlow = () => ({ texts: [], cards: [], rules: [], bullets: [], icons: [] });
+var iconSize = (group, k) => {
+  const first = group.lines[0];
+  return group.icon && first ? first.size * k * LINE_HEIGHT * ICON_SCALE : 0;
+};
 function lineSize(line, width, k, avail) {
   const indent = line.bullet ? line.size * k * BULLET_INDENT : 0;
   return Math.max(0, Math.min(line.size * k, line.size * (avail - indent) / Math.max(width, 1)));
@@ -508,6 +515,14 @@ function groupRatio(m, k, avail) {
   }
   return Math.min(...m.group.lines.map((line, i) => lineSize(line, m.widths[i] ?? 1, k, avail) / line.size));
 }
+function placeIcon(group, d, x, textTop, textBottom, out) {
+  if (!group.icon || d <= 0) {
+    return textBottom;
+  }
+  const textH = textBottom - textTop;
+  out?.icons.push({ rect: { x, y: textTop + Math.max(0, (textH - d) / 2), w: d, h: d }, color: group.icon.color, glyph: group.icon.glyph });
+  return textTop + Math.max(textH, d);
+}
 function placeGroup(m, k, col, y0, out) {
   const { group } = m;
   let y = y0;
@@ -518,10 +533,13 @@ function placeGroup(m, k, col, y0, out) {
   const pad = group.card ? group.card.pad * k : 0;
   const top = y;
   y += pad;
-  const ratio = groupRatio(m, k, col.w - 2 * pad);
+  const d = iconSize(group, k);
+  const iconIndent = d > 0 ? d * (1 + ICON_GAP) : 0;
+  const avail = col.w - 2 * pad - iconIndent;
+  const ratio = groupRatio(m, k, avail);
   group.lines.forEach((line, i) => {
-    const size = ratio === null ? lineSize(line, m.widths[i] ?? 1, k, col.w - 2 * pad) : line.size * ratio;
-    const indent = line.bullet ? line.size * k * BULLET_INDENT : 0;
+    const size = ratio === null ? lineSize(line, m.widths[i] ?? 1, k, avail) : line.size * ratio;
+    const indent = (line.bullet ? line.size * k * BULLET_INDENT : 0) + iconIndent;
     const w = (m.widths[i] ?? 0) * size / line.size;
     const x = col.right ? col.x + col.w - pad - w : col.x + pad + indent;
     out?.texts.push({ text: line.text, font: "", color: line.color, box: { x, y, w, h: size * LINE_HEIGHT } });
@@ -530,36 +548,62 @@ function placeGroup(m, k, col, y0, out) {
     }
     y += size * LINE_HEIGHT;
   });
+  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 - 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);
+  return Math.max(left, right);
+};
+function keepTogether(groups, heights, cut) {
+  const breaks = (c) => groups[c - 1]?.group.keepWithNext === true;
+  let back = cut;
+  while (back > 1 && breaks(back)) {
+    back--;
+  }
+  let fwd = cut;
+  while (fwd < groups.length - 1 && breaks(fwd)) {
+    fwd++;
+  }
+  const candidates = [back, fwd].filter((c) => !breaks(c));
+  if (candidates.length === 0) {
+    return cut;
   }
-  return h;
+  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 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 = 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) }
@@ -589,7 +633,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];
@@ -598,11 +644,75 @@ function flow(ctx, groups, zone, fonts) {
   return out;
 }
 
+// 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 = [];
+  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.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 };
+}
+
 // src/render/render.ts
 var BASE = 1080;
 var LOGO_SHARE = 0.26;
 var CARD_RADIUS = 0.035;
 var CAP_TOP = 0.15;
+var PIN_HEAD_Y = 0.08;
+var PIN_HEAD_R = 0.19;
+var PIN_TIP_Y = 0.28;
+var PIN_HOLE = 0.42;
+var ARC_START = 0.75;
+var ARC_END = 2.25;
+function drawPin(ctx, r3, color, glyph) {
+  const cx = r3.x + r3.w / 2;
+  const cy = r3.y + r3.h / 2;
+  const hy = cy - r3.w * PIN_HEAD_Y;
+  const rad = r3.w * PIN_HEAD_R;
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r3.w / 2, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.fillStyle = glyph;
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + r3.w * PIN_TIP_Y);
+  ctx.arc(cx, hy, rad, Math.PI * ARC_START, Math.PI * ARC_END);
+  ctx.closePath();
+  ctx.fill();
+  ctx.fillStyle = color;
+  ctx.beginPath();
+  ctx.arc(cx, hy, rad * PIN_HOLE, 0, Math.PI * 2);
+  ctx.fill();
+}
 function roundRect(ctx, r3, radius) {
   const rad = Math.min(radius, r3.w / 2, r3.h / 2);
   ctx.beginPath();
@@ -629,6 +739,7 @@ function drawFlow(ctx, f, radius) {
     ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2);
     ctx.fill();
   });
+  f.icons.forEach((i) => drawPin(ctx, i.rect, i.color, i.glyph));
   ctx.textAlign = "left";
   ctx.textBaseline = "top";
   f.texts.forEach((t) => {
@@ -663,10 +774,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;
@@ -700,20 +807,21 @@ 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;
-  if (logoImage) {
-    const r3 = placeContain(logoImage, capAligned(zones.logo, head), "top" /* Top */, 1, 1);
-    ctx.drawImage(logoImage, r3.x, r3.y, r3.w, r3.h);
+  const logo = logoImage ? placeContain(logoImage, geo.logo ? zones.logo : capAligned(zones.logo, head), "top" /* Top */, 1, 1) : null;
+  if (logoImage && logo) {
+    ctx.drawImage(logoImage, logo.x, logo.y, logo.w, logo.h);
   }
   const image = doc.picture ? assets[doc.picture.imageId] : void 0;
   const backdrop = image ? archRect(geo) : null;
   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, { width, 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);
   }
@@ -721,9 +829,11 @@ 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)),
+    logo,
     backdrop
   };
 }