@dloizides/poster-render 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 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,12 +347,12 @@ 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 }, 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 });
@@ -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,6 +548,7 @@ 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.card) {
     out?.cards.unshift({ rect: { x: col.x, y: top, w: col.w, h: y - top }, color: group.card.color });
@@ -543,6 +562,27 @@ function placeColumn(groups, k, col, out) {
   }
   return h;
 }
+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 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 }];
@@ -557,7 +597,7 @@ function splitColumns(groups, zone) {
     }
     acc += h;
   });
-  cut = Math.min(cut, groups.length - 1);
+  cut = keepTogether(groups, heights, Math.min(cut, groups.length - 1));
   const gap = Math.round(zone.w * 0.04);
   const w = (zone.w - gap) / 2;
   return [
@@ -603,6 +643,32 @@ 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 +695,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) => {
@@ -704,9 +771,9 @@ function render(input, assets, canvas) {
   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;
@@ -724,6 +791,8 @@ function render(input, assets, canvas) {
     pictureRegion: geo.picture,
     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
   };
 }