@dloizides/poster-render 0.2.6 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.7
+
+- P-B "Phone arch": the title block starts at the top margin (0.05h) instead of under a clock zone; the arch picture starts at 0.47h and grows.
+- The footer stays attached under the includes list: columns never spread space between them, and both stay in one column.
+
 ## 0.2.5
 
 - Own-key checks: the schema validator and the asset lookup use `Object.hasOwn`, so a `__proto__` key is rejected and an imageId such as `constructor` is reported missing.

package/dist/index.d.mts

@@ -1,12 +1,14 @@
 declare enum BackgroundStyle {
     Solid = "solid",
-    Tint = "tint"
+    Tint = "tint",
+    Horizon = "horizon"
 }
 
 declare enum FontSetId {
     Classic = "classic",
     Modern = "modern",
-    Elegant = "elegant"
+    Elegant = "elegant",
+    Coastal = "coastal"
 }
 
 declare enum FormatId {
@@ -33,7 +35,8 @@ declare enum PaletteId {
     Sand = "sand",
     Night = "night",
     Sea = "sea",
-    Rose = "rose"
+    Rose = "rose",
+    GoldenHorizon = "golden-horizon"
 }
 
 declare enum PictureAnchor {
@@ -109,9 +112,12 @@ type PosterAssets = Record<string, PosterImage | undefined>;
 interface TextMetricsLike {
     width: number;
 }
+interface PosterGradient {
+    addColorStop(offset: number, color: string): void;
+}
 interface PosterContext {
     font: string;
-    fillStyle: string;
+    fillStyle: string | PosterGradient;
     textAlign: string;
     textBaseline: string;
     globalAlpha: number;
@@ -127,6 +133,7 @@ interface PosterContext {
     arc(x: number, y: number, r: number, start: number, end: number): void;
     closePath(): void;
     fill(): void;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): PosterGradient;
 }
 interface PosterCanvas {
     width: number;
@@ -153,7 +160,10 @@ interface Palette {
     soft: string;
     card: string;
     arch: string;
+    sky?: readonly SkyStop[];
 }
+/** One gradient stop of a horizon sky: offset 0 (top) to 1 (bottom) and its colour. */
+type SkyStop = readonly [number, string];
 interface FontSet {
     display: string;
     script: string;
@@ -223,4 +233,4 @@ declare function defaultLayoutFor(format: FormatId): LayoutId;
 declare const kizombaWorkshop: FlierDoc;
 declare const kizombaWorkshopDocs: FlierDoc[];
 
-export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterGradient, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type SkyStop, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 declare enum BackgroundStyle {
     Solid = "solid",
-    Tint = "tint"
+    Tint = "tint",
+    Horizon = "horizon"
 }
 
 declare enum FontSetId {
     Classic = "classic",
     Modern = "modern",
-    Elegant = "elegant"
+    Elegant = "elegant",
+    Coastal = "coastal"
 }
 
 declare enum FormatId {
@@ -33,7 +35,8 @@ declare enum PaletteId {
     Sand = "sand",
     Night = "night",
     Sea = "sea",
-    Rose = "rose"
+    Rose = "rose",
+    GoldenHorizon = "golden-horizon"
 }
 
 declare enum PictureAnchor {
@@ -109,9 +112,12 @@ type PosterAssets = Record<string, PosterImage | undefined>;
 interface TextMetricsLike {
     width: number;
 }
+interface PosterGradient {
+    addColorStop(offset: number, color: string): void;
+}
 interface PosterContext {
     font: string;
-    fillStyle: string;
+    fillStyle: string | PosterGradient;
     textAlign: string;
     textBaseline: string;
     globalAlpha: number;
@@ -127,6 +133,7 @@ interface PosterContext {
     arc(x: number, y: number, r: number, start: number, end: number): void;
     closePath(): void;
     fill(): void;
+    createLinearGradient(x0: number, y0: number, x1: number, y1: number): PosterGradient;
 }
 interface PosterCanvas {
     width: number;
@@ -153,7 +160,10 @@ interface Palette {
     soft: string;
     card: string;
     arch: string;
+    sky?: readonly SkyStop[];
 }
+/** One gradient stop of a horizon sky: offset 0 (top) to 1 (bottom) and its colour. */
+type SkyStop = readonly [number, string];
 interface FontSet {
     display: string;
     script: string;
@@ -223,4 +233,4 @@ declare function defaultLayoutFor(format: FormatId): LayoutId;
 declare const kizombaWorkshop: FlierDoc;
 declare const kizombaWorkshopDocs: FlierDoc[];
 
-export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };
+export { BackgroundStyle, type DataUrlCanvas, FONT_SETS, FORMAT_SIZES, type FlierBlocks, type FlierDoc, FlierDocError, type FlierDocResult, type FontSet, FontSetId, FormatId, type FormatSize, type IncludesBlock, type JsonSchema, LAYOUT_CATALOGUE, type LayoutCatalogueEntry, LayoutId, type ListItem, type LogoSlot, PALETTES, type Palette, PaletteId, PictureAnchor, type PictureSlot, type PosterAssets, type PosterCanvas, type PosterContext, type PosterGradient, type PosterImage, type PriceRow, type Rect, type RenderReport, type ScheduleRow, type SkyStop, type TextMetricsLike, defaultLayoutFor, exportPng, flierDocSchema, kizombaWorkshop, kizombaWorkshopDocs, render, validateFlierDoc };

package/dist/index.js

@@ -4,6 +4,7 @@
 var BackgroundStyle = /* @__PURE__ */ ((BackgroundStyle2) => {
   BackgroundStyle2["Solid"] = "solid";
   BackgroundStyle2["Tint"] = "tint";
+  BackgroundStyle2["Horizon"] = "horizon";
   return BackgroundStyle2;
 })(BackgroundStyle || {});
 
@@ -12,6 +13,7 @@ var FontSetId = /* @__PURE__ */ ((FontSetId2) => {
   FontSetId2["Classic"] = "classic";
   FontSetId2["Modern"] = "modern";
   FontSetId2["Elegant"] = "elegant";
+  FontSetId2["Coastal"] = "coastal";
   return FontSetId2;
 })(FontSetId || {});
 
@@ -45,6 +47,7 @@ var PaletteId = /* @__PURE__ */ ((PaletteId2) => {
   PaletteId2["Night"] = "night";
   PaletteId2["Sea"] = "sea";
   PaletteId2["Rose"] = "rose";
+  PaletteId2["GoldenHorizon"] = "golden-horizon";
   return PaletteId2;
 })(PaletteId || {});
 
@@ -70,6 +73,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" }
 };
 
@@ -77,7 +91,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
@@ -293,13 +308,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],
@@ -319,7 +346,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 */]: {
@@ -552,7 +579,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 });
@@ -641,11 +668,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);
@@ -725,7 +756,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];
@@ -970,8 +1004,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));
@@ -1030,7 +1063,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 */] }
 ];