@dloizides/poster-render 0.2.5 → 0.2.7

package/dist/index.mjs

@@ -297,7 +297,7 @@ var flanksBeside = (pic, top, bottom2, m) => [
   [pic[0] + pic[2] + m, top, 1 - pic[0] - pic[2] - 2 * m, bottom2 - top]
 ];
 var ARCH_PIC = [0.22, 0.42, 0.56, 0.58];
-var PHONE_ARCH_PIC = [0.2, 0.6, 0.6, 0.4];
+var PHONE_ARCH_PIC = [0.2, 0.47, 0.6, 0.53];
 var DESK_ARCH_PIC = [0.355, 0.07, 0.32, 0.93];
 var ARCH_LANDSCAPE = {
   header: [0.04, 0.06, 0.3, 0.5],
@@ -317,7 +317,7 @@ var LAYOUT_SPECS = {
     landscape: { header: [0.04, 0.2, 0.52, 0.3], body: [0.04, 0.52, 0.52, 0.42], picture: [0.6, 0.12, 0.4, 0.88], alignX: 1 }
   },
   ["phone-arch" /* PhoneArch */]: {
-    portrait: { header: [0.045, 0.3, 0.91, 0.13], body: [0.045, 0.44, 0.91, 0.14], picture: PHONE_ARCH_PIC, alignX: 0.5, flanks: flanksBeside(PHONE_ARCH_PIC, 0.63, 0.94, 0.03), arch: 0.08 },
+    portrait: { header: [0.045, 0.05, 0.91, 0.16], body: [0.045, 0.22, 0.91, 0.21], picture: PHONE_ARCH_PIC, alignX: 0.5, flanks: flanksBeside(PHONE_ARCH_PIC, 0.5, 0.94, 0.03), arch: 0.08 },
     landscape: { ...ARCH_LANDSCAPE, header: [0.04, 0.16, 0.3, 0.42], picture: [0.36, 0.16, 0.3, 0.84] }
   },
   ["desktop-safe" /* DesktopSafe */]: {
@@ -351,6 +351,9 @@ var PICTURE_SIDE = {
   ["picture-left" /* PictureLeft */]: DEFAULT_SIDE,
   ["list" /* List */]: [0.5, 0.36]
 };
+var SHORT_PORTRAIT = 1.5;
+var SHORT_PICTURE_W = 0.5;
+var SHORT_PICTURE_H = 0.75;
 var ANCHOR_Y = { ["top" /* Top */]: 0, ["center" /* Center */]: 0.5, ["bottom" /* Bottom */]: 1 };
 var r2 = Math.round;
 function side(w, h, fraction) {
@@ -374,6 +377,20 @@ function side(w, h, fraction) {
     alignX: 1
   };
 }
+function shortSide(w, h) {
+  const m = r2(Math.min(w, h) * MARGIN);
+  const picW = r2(w * SHORT_PICTURE_W);
+  const picH = r2(h * SHORT_PICTURE_H);
+  const top = r2(h * HEADER_PORTRAIT);
+  const textW = w - picW - 2 * m;
+  return {
+    header: { x: m, y: m, w: textW, h: top - 2 * m },
+    body: { x: m, y: top, w: textW, h: h - top - m },
+    picture: { x: w - picW, y: h - picH, w: picW, h: picH },
+    logo: { x: w - picW + m, y: m, w: picW - 2 * m, h: h - picH - 2 * m },
+    alignX: 1
+  };
+}
 function bottom(w, h, share) {
   const m = r2(Math.min(w, h) * MARGIN);
   const gap = r2(Math.min(w, h) * BOTTOM_GAP);
@@ -408,11 +425,12 @@ function geometry(layout, w, h, give = 0) {
   if (layout === "picture-bottom" /* PictureBottom */) {
     return bottom(w, h, BOTTOM_PICTURE_W - give);
   }
-  const g = side(w, h, PICTURE_SIDE[layout] ?? DEFAULT_SIDE);
+  const isSide = layout === "picture-right" /* PictureRight */ || layout === "picture-left" /* PictureLeft */;
+  const g = isSide && h >= w && h < w * SHORT_PORTRAIT ? shortSide(w, h) : side(w, h, PICTURE_SIDE[layout] ?? DEFAULT_SIDE);
   if (layout !== "picture-left" /* PictureLeft */) {
     return g;
   }
-  return { header: mirror(g.header, w), body: mirror(g.body, w), picture: mirror(g.picture, w), alignX: 1 - g.alignX };
+  return { header: mirror(g.header, w), body: mirror(g.body, w), picture: mirror(g.picture, w), logo: g.logo ? mirror(g.logo, w) : void 0, alignX: 1 - g.alignX };
 }
 function placeContain(image, region, fit) {
   const { anchor, alignX, scale } = fit;
@@ -478,12 +496,33 @@ function itemGroup(item, l, u) {
   }
   return { lines, gapAfter: GAP.item * u };
 }
-function eventGroups(doc, l, u, withPrices) {
+var WRAP_FROM = 14;
+function halves(text2) {
+  const mid = text2.length / 2;
+  const spaces = [...text2].flatMap((c, i) => c === " " ? [i] : []);
+  if (text2.length < WRAP_FROM || spaces.length === 0) {
+    return [text2];
+  }
+  const cut = spaces.reduce((best, i) => Math.abs(i - mid) < Math.abs(best - mid) ? i : best);
+  return [text2.slice(0, cut), text2.slice(cut + 1)];
+}
+function wrapped(line, wrap) {
+  const parts = wrap ? halves(line.text) : [line.text];
+  return parts.map((text2, i) => i === 0 ? { ...line, text: text2 } : { ...line, text: text2, bullet: void 0, hang: line.bullet !== void 0 });
+}
+function eventGroups(doc, l, u, options) {
   const b = doc.blocks;
   const groups = [];
-  b.schedule?.forEach((row) => groups.push({ lines: [l.strong(row.label, SIZE.scheduleLabel), l.accent(row.time, SIZE.scheduleTime)], gapAfter: GAP.row * u }));
-  const prices = (withPrices ? b.prices : void 0) ?? [];
-  prices.forEach((row, i) => groups.push({ lines: [l.strong(row.amount, SIZE.priceAmount), l.accent(row.label, SIZE.priceLabel)], gapAfter: GAP.row * u, keepWithNext: i < prices.length - 1 }));
+  const schedule2 = b.schedule ?? [];
+  schedule2.forEach((row, i) => {
+    const lines = options.compact ? [l.strong(`${row.label}  ${row.time}`, SIZE.scheduleLabel)] : [l.strong(row.label, SIZE.scheduleLabel), l.accent(row.time, SIZE.scheduleTime)];
+    groups.push({ lines, gapAfter: GAP.row * u, keepWithNext: i < schedule2.length - 1 });
+  });
+  const prices = (options.withPrices === false ? void 0 : b.prices) ?? [];
+  prices.forEach((row, i) => {
+    const lines = options.compact ? [l.strong(`${row.amount} ${row.label}`, SIZE.priceAmount)] : [l.strong(row.amount, SIZE.priceAmount), l.accent(row.label, SIZE.priceLabel)];
+    groups.push({ lines, gapAfter: GAP.row * u, keepWithNext: i < prices.length - 1 });
+  });
   return groups;
 }
 function listGroups(doc, l, u) {
@@ -498,22 +537,23 @@ function flankPriceGroups(doc, p, u) {
   const l = makers(p, u);
   return (doc.blocks.prices ?? []).map((row) => ({ lines: [l.strong(row.amount, SIZE.flankAmount), l.accent(row.label, SIZE.flankLabel)], gapAfter: GAP.row * u }));
 }
-function bodyGroups(doc, p, u, withPrices = true) {
+function bodyGroups(doc, p, u, options = {}) {
   const l = makers(p, u);
   const b = doc.blocks;
   const groups = [];
   const isList = doc.layout === "list" /* List */;
   if (b.venue) {
     const size = isList ? SIZE.listVenue : SIZE.venue;
-    groups.push({ lines: b.venue.map((v) => l.venue(v, size)), gapAfter: GAP.venue * u, rule: { color: p.accent, height: GAP.rule * u }, ruleBelow: true, icon: { color: p.accent, glyph: p.background } });
+    const keepWithNext = !isList && (b.schedule?.length ?? 0) > 0;
+    groups.push({ lines: b.venue.map((v) => l.venue(v, size)), gapAfter: GAP.venue * u, rule: { color: p.accent, height: GAP.rule * u }, ruleBelow: true, icon: { color: p.accent, glyph: p.background }, keepWithNext });
   }
-  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, withPrices));
+  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, options));
   if (b.includes) {
-    const lines = [l.accent(b.includes.heading, SIZE.small), ...b.includes.items.map((i) => l.item(i, SIZE.small))];
-    groups.push({ lines, gapAfter: GAP.includes * u, uniform: true });
+    const lines = [l.accent(b.includes.heading, SIZE.small), ...b.includes.items.map((i) => l.item(i, SIZE.small))].flatMap((line) => wrapped(line, options.wrap));
+    groups.push({ lines, gapAfter: GAP.includes * u, uniform: true, keepWithNext: b.footer !== void 0, attachNext: b.footer !== void 0 });
   }
   if (b.footer) {
-    groups.push({ lines: [l.soft(b.footer, SIZE.small)], gapAfter: 0 });
+    groups.push({ lines: wrapped(l.soft(b.footer, SIZE.small), options.wrap), gapAfter: 0 });
   }
   return groups;
 }
@@ -534,12 +574,13 @@ 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: [], icons: [] });
+var indented = (line) => line.bullet !== void 0 || line.hang === true;
 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;
+  const indent = indented(line) ? line.size * k * BULLET_INDENT : 0;
   return Math.max(0, Math.min(line.size * k, line.size * (avail - indent) / Math.max(width, 1)));
 }
 function groupRatio(m, k, avail) {
@@ -574,7 +615,7 @@ function placeGroup(m, at, out) {
   const ratio = groupRatio(m, k, avail);
   group.lines.forEach((line, i) => {
     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 indent = (indented(line) ? 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 } });
@@ -598,11 +639,15 @@ function placeGroup(m, at, out) {
 function placeColumn(groups, at, out) {
   const { k, col, spread = 0 } = at;
   let h = 0;
-  for (const g of groups) {
-    h += placeGroup(g, { k, col, y0: col.y + h }, out) + spread;
-  }
-  return h - spread;
+  groups.forEach((g, i) => {
+    h += placeGroup(g, { k, col, y0: col.y + h }, out);
+    if (i < groups.length - 1 && g.group.attachNext !== true) {
+      h += spread;
+    }
+  });
+  return h;
 }
+var spreadGaps = (groups) => groups.slice(0, -1).filter((g) => g.group.attachNext !== true).length;
 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);
@@ -682,7 +727,10 @@ function flow(ctx, groups, zone, fonts) {
   const out = emptyFlow();
   const heights = columns.map((c) => placeColumn(c.groups, { k: lo, col: c.col }, null));
   const end = Math.max(...heights);
-  columns.forEach((c, i) => placeColumn(c.groups, { k: lo, col: c.col, spread: c.groups.length > 1 && columns.length > 1 ? (end - (heights[i] ?? end)) / (c.groups.length - 1) : 0 }, out));
+  columns.forEach((c, i) => {
+    const gaps = spreadGaps(c.groups);
+    placeColumn(c.groups, { k: lo, col: c.col, spread: gaps > 0 && columns.length > 1 ? (end - (heights[i] ?? end)) / gaps : 0 }, out);
+  });
   const lines = groups.flatMap((g) => g.lines);
   out.texts.forEach((t, i) => {
     const line = lines[i];
@@ -727,35 +775,6 @@ function pictureRegion(layout, geo, body, frame) {
   return { x: geo.picture.x, y, w: geo.picture.w, h: frame.height - y };
 }
 
-// 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;
@@ -763,33 +782,88 @@ var LINE_HEIGHT3 = 1.2;
 var LOGO_SHARE = 0.26;
 var GIVE_STEP = 0.025;
 var GIVE_STEPS = 32;
+var SHIFT_STEP = 0.06;
+var SHIFT_STEPS = 8;
+var MARGIN2 = 0.045;
 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) {
+function flowAll(ctx, input, geo, reflow) {
   const { doc, palette, fonts } = input;
+  const u = Math.min(input.width, input.height) / BASE;
   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 body = flow(ctx, bodyGroups(doc, palette, u, { withPrices: flanks.length === 0, compact: reflow.compact, wrap: reflow.wrap }), 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 shiftHeader(geo, shift) {
+  const { header, body } = geo;
+  const stacked = header.y + header.h <= body.y && header.x < body.x + body.w && body.x < header.x + header.w;
+  const d = Math.round(header.h * shift);
+  if (!stacked || d === 0 || body.h - d <= 0) {
+    return geo;
+  }
+  return { ...geo, header: { ...header, h: header.h - d }, body: { ...body, y: body.y - d, h: body.h + d } };
 }
-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);
+function liftHeader(geo, top) {
+  const { header } = geo;
+  return header.y > top ? { ...geo, header: { ...header, y: top, h: header.h + header.y - top } } : geo;
+}
+function fitBottom(ctx, input, floor) {
+  const { width, height } = input;
+  const none = { compact: false, wrap: false};
+  let fitted = flowAll(ctx, input, geometry("picture-bottom" /* PictureBottom */, width, height), none);
   for (let step = 1; step <= GIVE_STEPS && smallest(fitted) < floor; step++) {
-    fitted = flowAll(ctx, input, geometryWithGive(doc.layout, width, height, step * GIVE_STEP), u);
+    fitted = flowAll(ctx, input, geometry("picture-bottom" /* PictureBottom */, width, height, step * GIVE_STEP), none);
   }
   return fitted;
 }
+function yieldPicture(geo, give) {
+  const { picture: p, body: b } = geo;
+  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 } };
+}
+function fitList(ctx, input, floor, base2) {
+  const last = { compact: true, wrap: true};
+  let fitted = flowAll(ctx, input, base2, last);
+  for (let step = 1; step <= GIVE_STEPS && smallest(fitted) < floor; step++) {
+    fitted = flowAll(ctx, input, yieldPicture(base2, step * GIVE_STEP), last);
+  }
+  return fitted;
+}
+var SHIFTS = [0, ...Array.from({ length: SHIFT_STEPS }, (_v, i) => [(i + 1) * SHIFT_STEP, -(i + 1) * SHIFT_STEP]).flat()];
+var TIERS = [
+  { compact: false, wrap: false, lift: false },
+  { compact: true, wrap: false, lift: false },
+  { compact: true, wrap: true, lift: false },
+  { compact: true, wrap: true, lift: true }
+];
+var REFLOWS = TIERS.flatMap((tier) => SHIFTS.map((shift) => ({ ...tier, shift })));
+function fitToFloor(ctx, input) {
+  const { doc, width, height } = input;
+  const floor = FLOOR_PX * Math.min(width, height) / BASE;
+  if (doc.layout === "picture-bottom" /* PictureBottom */) {
+    return fitBottom(ctx, input, floor);
+  }
+  const base2 = geometry(doc.layout, width, height);
+  const top = Math.round(Math.min(width, height) * MARGIN2);
+  let best = null;
+  for (const reflow of REFLOWS) {
+    const fitted = flowAll(ctx, input, shiftHeader(reflow.lift ? liftHeader(base2, top) : base2, reflow.shift), reflow);
+    if (smallest(fitted) >= floor) {
+      return fitted;
+    }
+    best = best === null || smallest(fitted) > smallest(best) ? fitted : best;
+  }
+  if (doc.layout === "list" /* List */) {
+    return fitList(ctx, input, floor, base2);
+  }
+  return best ?? flowAll(ctx, input, base2, { compact: false, wrap: false});
+}
 
 // src/render/render.ts
 var BASE2 = 1080;
@@ -961,7 +1035,7 @@ var LAYOUT_CATALOGUE = [
   { id: "picture-bottom" /* PictureBottom */, designId: "picture-bottom", label: "Picture bottom", description: "Titles and details on top, the picture across the bottom half.", formats: POSTERS },
   { id: "list" /* List */, designId: "list", label: "Upcoming list", description: "Several dated events as a list beside the picture.", formats: POSTERS },
   { id: "phone-clock-safe" /* PhoneClockSafe */, designId: "P-A", label: "Phone, clock clear", description: "Lock-screen wallpaper: top kept clear for the clock, details on the left, picture on the right.", formats: ["phone" /* Phone */] },
-  { id: "phone-arch" /* PhoneArch */, designId: "P-B", label: "Phone arch", description: "Lock-screen wallpaper: top kept clear for the clock, details in the middle, the picture in an arch at the bottom.", formats: ["phone" /* Phone */] },
+  { id: "phone-arch" /* PhoneArch */, designId: "P-B", label: "Phone arch", description: "Lock-screen wallpaper: titles at the top, details under them, the picture in an arch at the bottom.", formats: ["phone" /* Phone */] },
   { id: "desktop-safe" /* DesktopSafe */, designId: "D-A", label: "Desktop, icons clear", description: "Desktop wallpaper: text on the left clear of desktop icons and the taskbar, the picture on the right.", formats: ["desktop" /* Desktop */] },
   { id: "desktop-arch" /* DesktopArch */, designId: "D-B", label: "Desktop arch", description: "Desktop wallpaper: titles left, the picture in a centred arch, details right.", formats: ["desktop" /* Desktop */] }
 ];