From 828fd22e8601b066b4da32acb180341704dbdf49 Mon Sep 17 00:00:00 2001 From: Doxa Maps Date: Thu, 1 Oct 2026 00:02:24 +0000 Subject: [PATCH] Poster Design: the Sizes tab draws every ladder size to scale; the header's Share is a rounded square Sizes reads the one shared ladder (POSTER_LADDER in POSTER_LADDER_ORDER) and feeds each size's sheets straight into the library's PanelSheets, the component the Wall uses for its 5 x 8 ft preview: multi-sheet sizes show their sheets pulled apart with the red glue strip. A lineup draws every size at one scale on one baseline, its scale fitted to the row's width so a phone keeps every size in view. Each card also states the sheets, the glued overlap, whether photos fit beside names, and how it prints. The sheets carry the 3 x 3 ft country poster's layout at that size (src/layoutSvg.js: header, map, names, table, scripture footer, no words), labelled as a layout, since the renderer does not draw the large sizes yet. Every size is sized from panelSheets' own screenLayout, so the fit computed here is the box PanelSheets renders. The composite header's Share button takes the header form (shape="rounded-square"), as Big Picture's top bar does. --- .../poster-design/poster-design-mfe.vue | 3 +- plugin-designs/poster-design/poster-sizes.vue | 161 ++++++++++++++++-- plugin-designs/poster-design/src/layoutSvg.js | 55 ++++++ 3 files changed, 202 insertions(+), 17 deletions(-) create mode 100644 plugin-designs/poster-design/src/layoutSvg.js diff --git a/plugin-designs/poster-design/poster-design-mfe.vue b/plugin-designs/poster-design/poster-design-mfe.vue index c00cb7f85..b2e0a0e36 100644 --- a/plugin-designs/poster-design/poster-design-mfe.vue +++ b/plugin-designs/poster-design/poster-design-mfe.vue @@ -117,7 +117,8 @@ useShadowStyles(PANE_GRID_STYLES + `
- + +
diff --git a/plugin-designs/poster-design/poster-sizes.vue b/plugin-designs/poster-design/poster-sizes.vue index 78f86f458..ec2c674b2 100644 --- a/plugin-designs/poster-design/poster-sizes.vue +++ b/plugin-designs/poster-design/poster-sizes.vue @@ -1,35 +1,164 @@ diff --git a/plugin-designs/poster-design/src/layoutSvg.js b/plugin-designs/poster-design/src/layoutSvg.js new file mode 100644 index 000000000..2ad61d6bb --- /dev/null +++ b/plugin-designs/poster-design/src/layoutSvg.js @@ -0,0 +1,55 @@ +/** + * layoutSvg.js: the LAYOUT of the 3 × 3 country poster (a header band, the map, the names down both sides, + * a table beneath, and the bold scripture footer), drawn at any finished size as an SVG image. + * + * The Sizes tab shows how each ladder size prints before the renderer draws that size for real, so this is + * a layout, not a poster: blocks in the poster's own colours, no words (nothing to translate, nothing that + * reads as real data). Units are INCHES (the viewBox is the finished w × h), so PanelSheets can slice it + * across sheets exactly as it slices a real poster. + */ +const PAPER = '#f7f4ec' +const INK = '#3b463d' +const LINE = '#c9c3b3' +const LAND = '#dcd3ba' +const SEA = '#e6eef0' +const ACCENT = '#92b195' + +/** @returns {string} an image URL (a data: URL of an SVG) of the layout at w × h inches. */ +export function layoutSvgUrl(w, h) { + const m = Math.min(w, h) * 0.05 // outer margin + const headH = h * 0.09 + const footH = h * 0.08 + const bodyTop = m + headH + m * 0.6 + const bodyBottom = h - m - footH - m * 0.6 + const tableH = (bodyBottom - bodyTop) * 0.22 + const mapBottom = bodyBottom - tableH - m * 0.5 + const colW = (w - 2 * m) * 0.22 // a name column on each side of the map + const mapX = m + colW + m * 0.4 + const mapW = w - 2 * mapX + const lineGap = Math.max(h / 80, 0.35) + const nameLines = (x) => { + let out = '' + for (let y = bodyTop + lineGap; y < mapBottom - lineGap / 2; y += lineGap) { + out += `` + } + return out + } + let table = '' + const rows = 4 + for (let r = 0; r <= rows; r++) { + const y = mapBottom + m * 0.5 + (tableH * r) / rows + table += `` + } + const svg = `` + + `` + + `` + + `` + + `` + + `` + + nameLines(m) + nameLines(w - m - colW) + + table + + `` + + `` + + `` + return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}` +}