@dloizides/poster-render 0.2.6 → 0.3.0

package/dist/index.mjs

@@ -2,6 +2,7 @@
 var BackgroundStyle = /* @__PURE__ */ ((BackgroundStyle2) => {
   BackgroundStyle2["Solid"] = "solid";
   BackgroundStyle2["Tint"] = "tint";
+  BackgroundStyle2["Horizon"] = "horizon";
   return BackgroundStyle2;
 })(BackgroundStyle || {});
 
@@ -10,6 +11,7 @@ var FontSetId = /* @__PURE__ */ ((FontSetId2) => {
   FontSetId2["Classic"] = "classic";
   FontSetId2["Modern"] = "modern";
   FontSetId2["Elegant"] = "elegant";
+  FontSetId2["Coastal"] = "coastal";
   return FontSetId2;
 })(FontSetId || {});
 
@@ -43,6 +45,7 @@ var PaletteId = /* @__PURE__ */ ((PaletteId2) => {
   PaletteId2["Night"] = "night";
   PaletteId2["Sea"] = "sea";
   PaletteId2["Rose"] = "rose";
+  PaletteId2["GoldenHorizon"] = "golden-horizon";
   return PaletteId2;
 })(PaletteId || {});
 
@@ -68,6 +71,17 @@ var PALETTES = {
   ["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" },
+  ["golden-horizon" /* GoldenHorizon */]: {
+    background: "#dce5e7",
+    tint: "#d3dee1",
+    title: "#2f566f",
+    accent: "#8a4325",
+    ink: "#1f2d36",
+    soft: "#46606f",
+    card: "#f4f1ec",
+    arch: "#c7d4d6",
+    sky: [[0, "#bfd3d8"], [0.55, "#d4dddd"], [1, "#eadccb"]]
+  },
   ["rose" /* Rose */]: { background: "#f8efec", tint: "#f1e2dd", title: "#9b6b63", accent: "#c9846f", ink: "#4a3934", soft: "#b39a92", card: "#ffffff", arch: "#f1e5e1" }
 };
 
@@ -75,7 +89,8 @@ var PALETTES = {
 var FONT_SETS = {
   ["classic" /* Classic */]: { display: '"Oswald", "Arial Narrow", sans-serif', script: '"Sacramento", cursive', body: '"Fredoka", sans-serif' },
   ["modern" /* Modern */]: { display: '"Bebas Neue", "Arial Narrow", sans-serif', script: '"Great Vibes", cursive', body: '"Montserrat", sans-serif' },
-  ["elegant" /* Elegant */]: { display: '"Playfair Display", serif', script: '"Allura", cursive', body: '"Lato", sans-serif' }
+  ["elegant" /* Elegant */]: { display: '"Playfair Display", serif', script: '"Allura", cursive', body: '"Lato", sans-serif' },
+  ["coastal" /* Coastal */]: { display: '"Fraunces", Georgia, serif', script: '"Allura", cursive', body: '"Jost", sans-serif' }
 };
 
 // src/schema/flierDocSchema.ts
@@ -291,13 +306,25 @@ function missingAssets(doc, assets) {
   return errors;
 }
 
+// src/render/background.ts
+function paintGround(ctx, style, palette, size) {
+  ctx.fillStyle = palette.background;
+  if (style === "horizon" /* Horizon */) {
+    const stops = palette.sky ?? [[0, palette.background], [1, palette.tint]];
+    const sky = ctx.createLinearGradient(0, 0, 0, size.height);
+    stops.forEach(([offset, color]) => sky.addColorStop(offset, color));
+    ctx.fillStyle = sky;
+  }
+  ctx.fillRect(0, 0, size.width, size.height);
+}
+
 // 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 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 +344,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 */]: {
@@ -550,7 +577,7 @@ function bodyGroups(doc, p, u, options = {}) {
   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))].flatMap((line) => wrapped(line, options.wrap));
-    groups.push({ lines, gapAfter: GAP.includes * u, uniform: true });
+    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: wrapped(l.soft(b.footer, SIZE.small), options.wrap), gapAfter: 0 });
@@ -639,11 +666,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);
@@ -723,7 +754,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];
@@ -968,8 +1002,7 @@ function render(input, assets, canvas) {
   const u = Math.min(width, height) / BASE2;
   const { geo, zones, head, body, sides } = fitToFloor(ctx, { doc, palette, fonts, width, height });
   ctx.globalAlpha = 1;
-  ctx.fillStyle = palette.background;
-  ctx.fillRect(0, 0, width, height);
+  paintGround(ctx, doc.background, palette, { width, height });
   if (doc.background === "tint" /* Tint */) {
     ctx.fillStyle = palette.tint;
     [geo.header, geo.body].forEach((r3) => ctx.fillRect(r3.x, r3.y, r3.w, r3.h));
@@ -1028,7 +1061,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 */] }
 ];