@dloizides/poster-render 0.1.0 → 0.2.0

package/dist/index.mjs

@@ -29,6 +29,11 @@ var LayoutId = /* @__PURE__ */ ((LayoutId2) => {
   LayoutId2["PictureLeft"] = "picture-left";
   LayoutId2["PictureBottom"] = "picture-bottom";
   LayoutId2["List"] = "list";
+  LayoutId2["Arch"] = "arch";
+  LayoutId2["PhoneClockSafe"] = "phone-clock-safe";
+  LayoutId2["PhoneArch"] = "phone-arch";
+  LayoutId2["DesktopSafe"] = "desktop-safe";
+  LayoutId2["DesktopArch"] = "desktop-arch";
   return LayoutId2;
 })(LayoutId || {});
 
@@ -60,10 +65,10 @@ var FORMAT_SIZES = {
 
 // src/palettes.ts
 var PALETTES = {
-  ["sand" /* Sand */]: { background: "#f5f4f2", tint: "#ece8e3", title: "#958a80", accent: "#e9b47f", ink: "#5f564f", soft: "#b3a89e", card: "#ffffff" },
-  ["night" /* Night */]: { background: "#1c1a17", tint: "#25221e", title: "#e8dccb", accent: "#e9b47f", ink: "#f4efe8", soft: "#9c9284", card: "#2c2824" },
-  ["sea" /* Sea */]: { background: "#eef4f3", tint: "#e1ecea", title: "#4f7d7a", accent: "#e07a5f", ink: "#2f3e46", soft: "#8aa3a1", card: "#ffffff" },
-  ["rose" /* Rose */]: { background: "#f8efec", tint: "#f1e2dd", title: "#9b6b63", accent: "#c9846f", ink: "#4a3934", soft: "#b39a92", card: "#ffffff" }
+  ["sand" /* Sand */]: { background: "#f5f4f2", tint: "#ece8e3", title: "#958a80", accent: "#e9b47f", ink: "#5f564f", soft: "#b3a89e", card: "#ffffff", arch: "#ede8e2" },
+  ["night" /* Night */]: { background: "#1c1a17", tint: "#25221e", title: "#e8dccb", accent: "#e9b47f", ink: "#f4efe8", soft: "#9c9284", card: "#2c2824", arch: "#25221f" },
+  ["sea" /* Sea */]: { background: "#eef4f3", tint: "#e1ecea", title: "#4f7d7a", accent: "#e07a5f", ink: "#2f3e46", soft: "#8aa3a1", card: "#ffffff", arch: "#e4ecea" },
+  ["rose" /* Rose */]: { background: "#f8efec", tint: "#f1e2dd", title: "#9b6b63", accent: "#c9846f", ink: "#4a3934", soft: "#b39a92", card: "#ffffff", arch: "#f1e5e1" }
 };
 
 // src/fontSets.ts
@@ -314,11 +319,11 @@ function itemGroup(item, l, u) {
   }
   return { lines, gapAfter: 26 * u };
 }
-function eventGroups(doc, l, 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 }));
-  b.prices?.forEach((row) => groups.push({ lines: [l.strong?.(row.amount, 66), l.accent?.(row.label, 52)], 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 }));
   return groups;
 }
 function listGroups(doc, l, u) {
@@ -329,7 +334,11 @@ function listGroups(doc, l, u) {
   }
   return groups;
 }
-function bodyGroups(doc, p, u) {
+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 = [];
@@ -337,10 +346,10 @@ function bodyGroups(doc, p, u) {
   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(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u));
+  groups.push(...isList ? listGroups(doc, l, u) : eventGroups(doc, l, u, withPrices));
   if (b.includes) {
-    const lines = [l.accent?.(b.includes.heading, 36), ...b.includes.items.map((i) => l.item?.(i, 40))];
-    groups.push({ lines, gapAfter: 24 * u, card: { color: p.card, pad: 28 * u } });
+    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 });
   }
   if (b.footer) {
     groups.push({ lines: [l.soft?.(b.footer, 34)], gapAfter: 0 });
@@ -348,6 +357,51 @@ function bodyGroups(doc, p, u) {
   return groups;
 }
 
+// src/layout/layoutSpecs.ts
+var flanksBeside = (pic, top, bottom2, m) => [
+  [m, top, pic[0] - 2 * m, bottom2 - top],
+  [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 DESK_ARCH_PIC = [0.355, 0.07, 0.32, 0.93];
+var ARCH_LANDSCAPE = {
+  header: [0.04, 0.06, 0.3, 0.5],
+  body: [0.04, 0.58, 0.3, 0.36],
+  picture: [0.36, 0.08, 0.3, 0.92],
+  alignX: 0.5,
+  flanks: [[0.68, 0.08, 0.28, 0.42], [0.68, 0.52, 0.28, 0.42]],
+  arch: 0.06
+};
+var LAYOUT_SPECS = {
+  ["arch" /* Arch */]: {
+    portrait: { header: [0.045, 0.025, 0.91, 0.18], body: [0.045, 0.215, 0.91, 0.19], picture: ARCH_PIC, alignX: 0.5, flanks: flanksBeside(ARCH_PIC, 0.44, 0.97, 0.03), arch: 0.04 },
+    landscape: ARCH_LANDSCAPE
+  },
+  ["phone-clock-safe" /* PhoneClockSafe */]: {
+    portrait: { header: [0.045, 0.28, 0.91, 0.2], body: [0.045, 0.5, 0.42, 0.44], picture: [0.48, 0.5, 0.52, 0.5], alignX: 1 },
+    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 },
+    landscape: { ...ARCH_LANDSCAPE, header: [0.04, 0.16, 0.3, 0.42], picture: [0.36, 0.16, 0.3, 0.84] }
+  },
+  ["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 }
+  },
+  ["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 }
+  }
+};
+var r = Math.round;
+var toRect = (f, w, h) => {
+  const x = r(f[0] * w);
+  const y = r(f[1] * h);
+  return { x, y, w: r((f[0] + f[2]) * w) - x, h: r((f[1] + f[3]) * h) - y };
+};
+
 // src/layout/geometry.ts
 var MARGIN = 0.045;
 var HEADER_PORTRAIT = 0.3;
@@ -360,12 +414,12 @@ var PICTURE_SIDE = {
   ["list" /* List */]: [0.5, 0.36]
 };
 var ANCHOR_Y = { ["top" /* Top */]: 0, ["center" /* Center */]: 0.5, ["bottom" /* Bottom */]: 1 };
-var r = Math.round;
+var r2 = Math.round;
 function side(w, h, fraction) {
-  const m = r(Math.min(w, h) * MARGIN);
+  const m = r2(Math.min(w, h) * MARGIN);
   if (h >= w) {
-    const split2 = r(w * (1 - fraction[0]));
-    const top2 = r(h * HEADER_PORTRAIT);
+    const split2 = r2(w * (1 - fraction[0]));
+    const top2 = r2(h * HEADER_PORTRAIT);
     return {
       header: { x: m, y: m, w: w - 2 * m, h: top2 - 2 * m },
       picture: { x: split2, y: top2, w: w - split2, h: h - top2 },
@@ -373,19 +427,19 @@ function side(w, h, fraction) {
       alignX: 1
     };
   }
-  const split = r(w * (1 - fraction[1]));
-  const top = r(h * HEADER_LANDSCAPE);
+  const split = r2(w * (1 - fraction[1]));
+  const top = r2(h * HEADER_LANDSCAPE);
   return {
     header: { x: m, y: m, w: split - 2 * m, h: top - m },
     picture: { x: split, y: 0, w: w - split, h },
-    body: { x: m, y: top + r(m / 2), w: split - 2 * m, h: h - top - r(m / 2) - m },
+    body: { x: m, y: top + r2(m / 2), w: split - 2 * m, h: h - top - r2(m / 2) - m },
     alignX: 1
   };
 }
 function bottom(w, h) {
-  const m = r(Math.min(w, h) * MARGIN);
-  const top = r(h * BOTTOM_HEADER);
-  const pic = r(h * BOTTOM_PICTURE);
+  const m = r2(Math.min(w, h) * MARGIN);
+  const top = r2(h * BOTTOM_HEADER);
+  const pic = r2(h * BOTTOM_PICTURE);
   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 },
@@ -393,8 +447,23 @@ function bottom(w, h) {
     alignX: 0.5
   };
 }
+function fromSpec(spec, w, h) {
+  return {
+    header: toRect(spec.header, w, h),
+    body: toRect(spec.body, w, h),
+    picture: toRect(spec.picture, w, h),
+    alignX: spec.alignX,
+    flanks: spec.flanks?.map((f) => toRect(f, w, h)),
+    logo: spec.logo ? toRect(spec.logo, w, h) : void 0,
+    arch: spec.arch
+  };
+}
 var mirror = (rect, w) => ({ ...rect, x: w - rect.x - rect.w });
 function geometry(layout, w, h) {
+  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);
   }
@@ -431,6 +500,12 @@ 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)));
 }
+function groupRatio(m, k, avail) {
+  if (!m.group.uniform) {
+    return null;
+  }
+  return Math.min(...m.group.lines.map((line, i) => lineSize(line, m.widths[i] ?? 1, k, avail) / line.size));
+}
 function placeGroup(m, k, col, y0, out) {
   const { group } = m;
   let y = y0;
@@ -441,11 +516,12 @@ 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);
   group.lines.forEach((line, i) => {
-    const size = lineSize(line, m.widths[i] ?? 1, k, col.w - 2 * pad);
+    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 x = col.x + pad + indent;
     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 } });
     if (line.bullet && out) {
       out.bullets.push({ x: col.x + pad + size * BULLET_RADIUS, y: y + size * LINE_HEIGHT / 2, r: size * BULLET_RADIUS, color: line.bullet });
@@ -524,21 +600,22 @@ function flow(ctx, groups, zone, fonts) {
 var BASE = 1080;
 var LOGO_SHARE = 0.26;
 var CARD_RADIUS = 0.035;
-function roundRect(ctx, r2, radius) {
-  const rad = Math.min(radius, r2.w / 2, r2.h / 2);
+var CAP_TOP = 0.15;
+function roundRect(ctx, r3, radius) {
+  const rad = Math.min(radius, r3.w / 2, r3.h / 2);
   ctx.beginPath();
-  ctx.moveTo(r2.x + rad, r2.y);
-  ctx.arcTo(r2.x + r2.w, r2.y, r2.x + r2.w, r2.y + r2.h, rad);
-  ctx.arcTo(r2.x + r2.w, r2.y + r2.h, r2.x, r2.y + r2.h, rad);
-  ctx.arcTo(r2.x, r2.y + r2.h, r2.x, r2.y, rad);
-  ctx.arcTo(r2.x, r2.y, r2.x + r2.w, r2.y, rad);
+  ctx.moveTo(r3.x + rad, r3.y);
+  ctx.arcTo(r3.x + r3.w, r3.y, r3.x + r3.w, r3.y + r3.h, rad);
+  ctx.arcTo(r3.x + r3.w, r3.y + r3.h, r3.x, r3.y + r3.h, rad);
+  ctx.arcTo(r3.x, r3.y + r3.h, r3.x, r3.y, rad);
+  ctx.arcTo(r3.x, r3.y, r3.x + r3.w, r3.y, rad);
   ctx.closePath();
   ctx.fill();
 }
 function drawFlow(ctx, f, radius) {
-  f.rules.forEach((r2) => {
-    ctx.fillStyle = r2.color;
-    ctx.fillRect(r2.rect.x, r2.rect.y, r2.rect.w, r2.rect.h);
+  f.rules.forEach((r3) => {
+    ctx.fillStyle = r3.color;
+    ctx.fillRect(r3.rect.x, r3.rect.y, r3.rect.w, r3.rect.h);
   });
   f.cards.forEach((c) => {
     ctx.fillStyle = c.color;
@@ -569,6 +646,30 @@ function checked(input, assets) {
   }
   return result.doc;
 }
+function archRect(geo) {
+  if (geo.arch === void 0) {
+    return null;
+  }
+  const top = geo.picture.y + Math.round(geo.picture.h * geo.arch);
+  return { x: geo.picture.x, y: top, w: geo.picture.w, h: geo.picture.y + geo.picture.h - top };
+}
+function drawArch(ctx, r3, color) {
+  const rad = r3.w / 2;
+  ctx.fillStyle = color;
+  ctx.fillRect(r3.x, r3.y + rad, r3.w, r3.h - rad);
+  ctx.beginPath();
+  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;
+  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 } };
@@ -591,20 +692,25 @@ function render(input, assets, canvas) {
   ctx.fillRect(0, 0, width, height);
   if (doc.background === "tint" /* Tint */) {
     ctx.fillStyle = palette.tint;
-    [geo.header, geo.body].forEach((r2) => ctx.fillRect(r2.x, r2.y, r2.w, r2.h));
+    [geo.header, geo.body].forEach((r3) => ctx.fillRect(r3.x, r3.y, r3.w, r3.h));
   }
-  const zones = splitHeader(geo.header, doc.logo !== void 0);
+  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 body = flow(ctx, bodyGroups(doc, palette, u), geo.body, 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 radius = Math.min(width, height) * CARD_RADIUS;
-  drawFlow(ctx, head, radius);
-  drawFlow(ctx, body, radius);
+  [head, body, ...sides].forEach((f) => drawFlow(ctx, f, radius));
   const logoImage = doc.logo ? assets[doc.logo.imageId] : void 0;
   if (logoImage) {
-    const r2 = placeContain(logoImage, zones.logo, "top" /* Top */, 1, 1);
-    ctx.drawImage(logoImage, r2.x, r2.y, r2.w, r2.h);
+    const r3 = placeContain(logoImage, capAligned(zones.logo, head), "top" /* Top */, 1, 1);
+    ctx.drawImage(logoImage, r3.x, r3.y, r3.w, r3.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;
   if (image && picture) {
     ctx.drawImage(image, picture.x, picture.y, picture.w, picture.h);
@@ -614,8 +720,9 @@ function render(input, assets, canvas) {
     height,
     picture,
     pictureRegion: geo.picture,
-    textBoxes: [...head.texts, ...body.texts].map((t) => t.box),
-    cardBoxes: body.cards.map((c) => c.rect)
+    textBoxes: [head, body, ...sides].flatMap((f) => f.texts.map((t) => t.box)),
+    cardBoxes: body.cards.map((c) => c.rect),
+    backdrop
   };
 }
 
@@ -634,6 +741,30 @@ function exportPng(canvas) {
   return new Blob([bytes], { type: "image/png" });
 }
 
+// src/layoutCatalogue.ts
+var POSTERS = ["story" /* Story */, "post" /* Post */, "square" /* Square */];
+var LAYOUT_CATALOGUE = [
+  { id: "picture-right" /* PictureRight */, designId: "E-A", label: "Picture right", description: "Titles across the top, details on the left, the picture on the right standing on the bottom edge.", formats: POSTERS },
+  { id: "picture-left" /* PictureLeft */, designId: "E-B", label: "Picture left", description: "Titles across the top, the picture on the left standing on the bottom edge, details on the right.", formats: POSTERS },
+  { id: "arch" /* Arch */, designId: "E-C", label: "Arch", description: "Titles and details on top, the picture centred in a soft arch at the bottom, prices either side.", formats: POSTERS },
+  { 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: "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 */] }
+];
+var DEFAULTS = {
+  ["story" /* Story */]: "picture-right" /* PictureRight */,
+  ["post" /* Post */]: "picture-right" /* PictureRight */,
+  ["square" /* Square */]: "picture-right" /* PictureRight */,
+  ["phone" /* Phone */]: "phone-clock-safe" /* PhoneClockSafe */,
+  ["desktop" /* Desktop */]: "desktop-safe" /* DesktopSafe */
+};
+function defaultLayoutFor(format) {
+  return DEFAULTS[format];
+}
+
 // src/examples/kizombaWorkshop.ts
 var WORKSHOPS = [
   { script: "Saturday 31 October", date: "Sat 31 Oct", first: "20:00 - 21:00", second: "21:00 - 22:00", party: "20\u20AC" },
@@ -685,6 +816,6 @@ var kizombaWorkshop = {
 };
 var kizombaWorkshopDocs = [...WORKSHOPS.map(workshopDoc), kizombaWorkshop];
 
-export { BackgroundStyle, FONT_SETS, FORMAT_SIZES, FlierDocError, FontSetId, FormatId, LayoutId, PALETTES, PaletteId, PictureAnchor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, FONT_SETS, FORMAT_SIZES, FlierDocError, FontSetId, FormatId, LAYOUT_CATALOGUE, LayoutId, PALETTES, PaletteId, PictureAnchor, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map