@dloizides/poster-render 0.2.7 → 0.3.0

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,6 +308,18 @@ 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],
@@ -977,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));