Wall of People Groups: the poster's sheets lie on a grey table, and names are as black on screen as on paper

This commit is contained in:
Doxa Maps 2026-09-28 23:57:31 +00:00
parent fab6cb695f
commit 2473ce5d01

View file

@ -186,10 +186,13 @@ export class WallCanvas {
const sp = this.sp
// The overlay (title, chart, footer) follows the same transform as the canvas.
if (this.ovw) this.ovw.style.transform = `translate(${tx}px,${ty}px) scale(${s})`
// A grey table under white sheets (the wall's own background is near-white), and a 3 px drop edge
// per sheet, drawn as an offset rect: shadowBlur ignores the transform and costs a blur per frame.
ctx.save(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillStyle = '#d4d4d4'; ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); ctx.restore()
ctx.fillStyle = 'rgba(0,0,0,.16)'
for (const R of sp.sheets) ctx.fillRect(R.x + 3 / s, R.y + 3 / s, R.w, R.h)
ctx.fillStyle = '#fff'
ctx.shadowColor = 'rgba(0,0,0,.18)'; ctx.shadowBlur = 12 / s
for (const R of sp.sheets) ctx.fillRect(R.x, R.y, R.w, R.h)
ctx.shadowColor = 'transparent'; ctx.shadowBlur = 0
const [x0, y0] = this.toWorld(0, 0), [x1, y1] = this.toWorld(this.cssW, this.cssH)
const cardPx = (sp.cards[0]?.w || 0) * s, want = []
for (const R of sp.cards) {
@ -239,7 +242,7 @@ export class WallCanvas {
if (cardPx < TEXT_PX) return
ctx.textAlign = 'center'; ctx.textBaseline = 'top'
ctx.font = `700 ${nameFs}px -apple-system, "Segoe UI", Arial, sans-serif`
ctx.fillStyle = groupLink(g) ? '#0095f6' : '#1c1c1c'
ctx.fillStyle = '#1c1c1c' // as printed; a linked name shows the pointer cursor instead of link blue
ctx.direction = textDir(name)
T.nameLines.forEach((ln, k) => ctx.fillText(ln, cx, R.y + pad + k * nameFs * ct.nameLine, iw))
if (T.verse) {