Add page numbers, copyright footer, and jump-to-page navigation

Page mode enhancements:
- Page numbers rendered at bottom center of each page
- Copyright text drawn in bottom margin of page 1 (replaces DOM footer)
- Page nav toolbar visible in all page view modes, not just single-page
- Jump-to-page input: type a page number and press Enter to navigate
- Scroll-based page tracking updates indicator as user scrolls
- Viewport culling for page backgrounds (skip offscreen pages)

Author: zz85

index.html

@@ -338,7 +338,8 @@
 						</select>
 						<span id="page_nav" style="display: none;">
 							<button id="page_prev" title="Previous page" style="font-size: 11px; padding: 2px 6px;">&lt;</button>
-							<span id="page_indicator" style="font-size: 11px; min-width: 50px; text-align: center; color: var(--text-dim);">1 / 1</span>
+							<input id="page_input" type="number" min="1" value="1" title="Jump to page" style="width: 32px; text-align: center; font-size: 11px; padding: 1px 2px; -moz-appearance: textfield; border: 1px solid var(--border, #ccc); border-radius: 3px;">
+							<span id="page_indicator" style="font-size: 11px; color: var(--text-dim);"> / 1</span>
 							<button id="page_next" title="Next page" style="font-size: 11px; padding: 2px 6px;">&gt;</button>
 						</span>
 					</div>

plans/features-todo.md

@@ -45,9 +45,9 @@ Planned features and improvements, roughly prioritized.
 - [x] Companion text fonts — BravuraText, LelandText, PetalumaText, SebastianText loaded via @font-face; all text elements (lyrics, titles, tempo, staff labels) use the matching text font; GoldenAge/Leipzig fall back to serif
 - [x] Dynamic markings rendered as SMuFL glyphs — pre-composed glyphs (pp, mp, mf, ff, etc.) from the music font instead of italic text; falls back to individual letter glyph composition for unknown combinations
 - [x] Landscape / portrait page orientation toggle — `[Portrait | Landscape]` segmented button group in page mode, swaps page width/height via `getPageDimensions()`, persisted to localStorage
-- [ ] Multi-page rendering — display all pages vertically like a PDF viewer (currently only lays out pages but rendering may clip)
-- [ ] Page navigation — jump to page N (page indicator + input or prev/next buttons)
-- [ ] Page numbers, headers/footers in page mode
+- [x] Multi-page rendering — display all pages vertically like a PDF viewer; virtual-scroll architecture (viewport-sized canvas, scroll-based repainting, viewport culling) handles arbitrarily many pages; page backgrounds with drop shadows on gray canvas
+- [x] Page navigation — jump to page N via numeric input in toolbar; prev/next buttons; scroll-based page tracking updates indicator in all page view modes (vertical, single-page, two-up, horizontal)
+- [x] Page numbers, headers/footers in page mode — page numbers rendered at bottom center of each page; copyright text rendered in bottom margin of page 1
 - [ ] Bar compression — fix bug where bars with many notes overflow or don't shrink to fit available width
 - [ ] First-system indent for instrument names
 - [ ] Melisma/extender lines for slurred notes under one syllable

src/layout/typeset.js

@@ -1867,9 +1867,23 @@ function _drawPageBackgrounds(ctx, pg) {
 	var shadowOffset = 4
 	var shadowColor = 'rgba(0,0,0,0.25)'
 
+	// Viewport culling — skip pages entirely outside the visible area.
+	var zoom = getZoomLevel()
+	var scoreElm = document.getElementById('score')
+	var viewTop = (scoreElm?.scrollTop || 0) / zoom
+	var viewBottom = viewTop + (scoreElm?.clientHeight || 800) / zoom
+	var viewLeft = (scoreElm?.scrollLeft || 0) / zoom
+	var viewRight = viewLeft + (scoreElm?.clientWidth || 800) / zoom
+	var pad = 50  // extra padding to avoid pop-in
+
 	for (var p = 0; p < pg.pageCount; p++) {
 		var pos = pg.pagePositions[p]
 
+		if (pos.y + pg.pageHeight < viewTop - pad) continue
+		if (pos.y > viewBottom + pad) continue
+		if (pos.x + pg.pageWidth < viewLeft - pad) continue
+		if (pos.x > viewRight + pad) continue
+
 		// Drop shadow
 		ctx.fillStyle = shadowColor
 		ctx.fillRect(pos.x + shadowOffset, pos.y + shadowOffset, pg.pageWidth, pg.pageHeight)
@@ -2262,8 +2276,36 @@ function scorePageLayout(drawing, data, staves, stavePointers, ctx, canvas) {
 
 	// --- Footer ---
 	var { copyright1, copyright2 } = data.info || {}
+
+	// In page mode, render copyright on the canvas at the bottom of page 1
+	// instead of in the DOM footer (which is used for scroll/wrap modes).
+	var copyrightText = [copyright1, copyright2].filter(Boolean).join(' \u2014 ')
+	if (copyrightText) {
+		var copyrightDraw = new Claire.Text(copyrightText, 0, {
+			font: Math.round(titleFs * 0.32) + 'px ' + getMusicTextFamily(),
+			textAlign: 'center',
+		})
+		// Position in the bottom margin of page 1, above the page number
+		copyrightDraw.moveTo(titleCenterX, page1Pos.y + PAGE_H - margins.bottom * 0.55)
+		drawing.add(copyrightDraw)
+	}
+
+	// --- Page numbers ---
+	var pageNumFont = Math.round(titleFs * 0.36) + 'px ' + getMusicTextFamily()
+	for (var pi = 0; pi < pageCount; pi++) {
+		var pos = pagePositions[pi]
+		var pageNumDraw = new Claire.Text(String(pi + 1), 0, {
+			font: pageNumFont,
+			textAlign: 'center',
+		})
+		// Position at bottom center of each page, in the margin area
+		pageNumDraw.moveTo(pos.x + PAGE_W / 2, pos.y + PAGE_H - margins.bottom * 0.3)
+		drawing.add(pageNumDraw)
+	}
+
+	// Clear DOM footer in page mode (content is on the canvas)
 	var footerEl = document.getElementById('footer')
-	if (footerEl) footerEl.innerText = (copyright1 || '') + '\n' + (copyright2 || '')
+	if (footerEl) footerEl.innerText = ''
 
 	// --- Store page geometry for quickDraw background rendering ---
 	_pageGeometry = {

src/main.js

@@ -950,15 +950,20 @@ if (pageViewModeSelect) {
 
 function updatePageNavVisibility() {
 	const nav = document.getElementById('page_nav')
-	if (nav) nav.style.display = (getLayoutMode() === 'page' && getPageViewMode() === 'single-page') ? 'inline' : 'none'
+	if (nav) nav.style.display = getLayoutMode() === 'page' ? 'inline' : 'none'
 }
 
 function updatePageNav() {
+	const input = document.getElementById('page_input')
 	const indicator = document.getElementById('page_indicator')
 	const prevBtn = document.getElementById('page_prev')
 	const nextBtn = document.getElementById('page_next')
 	const totalPages = window._pageGeometry?.pageCount || 1
-	if (indicator) indicator.textContent = `${currentPageIdx + 1} / ${totalPages}`
+	if (input) {
+		input.value = currentPageIdx + 1
+		input.max = totalPages
+	}
+	if (indicator) indicator.textContent = ` / ${totalPages}`
 	if (prevBtn) prevBtn.disabled = currentPageIdx <= 0
 	if (nextBtn) nextBtn.disabled = currentPageIdx >= totalPages - 1
 }
@@ -986,6 +991,84 @@ const pageNextBtn = document.getElementById('page_next')
 if (pagePrevBtn) pagePrevBtn.onclick = () => scrollToPage(currentPageIdx - 1)
 if (pageNextBtn) pageNextBtn.onclick = () => scrollToPage(currentPageIdx + 1)
 
+// Jump-to-page input
+const pageInput = document.getElementById('page_input')
+if (pageInput) {
+	pageInput.addEventListener('change', () => {
+		const totalPages = window._pageGeometry?.pageCount || 1
+		const page = Math.max(1, Math.min(totalPages, parseInt(pageInput.value, 10) || 1))
+		scrollToPage(page - 1)
+	})
+	pageInput.addEventListener('keydown', (e) => {
+		if (e.key === 'Enter') {
+			e.target.blur()  // triggers change event
+		}
+	})
+	// Prevent scroll-wheel from changing the number input (confusing UX)
+	pageInput.addEventListener('wheel', (e) => e.preventDefault(), { passive: false })
+}
+
+// Track current page from scroll position in all page view modes
+;(function initPageScrollTracking() {
+	const scoreElm = document.getElementById('score')
+	if (!scoreElm) return
+
+	let trackPending = false
+	scoreElm.addEventListener('scroll', () => {
+		if (getLayoutMode() !== 'page') return
+		if (trackPending) return
+		trackPending = true
+		requestAnimationFrame(() => {
+			trackPending = false
+			updateCurrentPageFromScroll()
+		})
+	})
+})()
+
+/**
+ * Determine which page is currently most visible and update the nav UI.
+ */
+function updateCurrentPageFromScroll() {
+	const pg = window._pageGeometry
+	if (!pg || !pg.pagePositions) return
+	const scoreElm = document.getElementById('score')
+	if (!scoreElm) return
+
+	const zoom = getZoomLevel()
+	const viewMode = getPageViewMode()
+
+	// Compute viewport center in score-space
+	let viewCenterX, viewCenterY
+	if (viewMode === 'horizontal') {
+		viewCenterX = (scoreElm.scrollLeft + scoreElm.clientWidth / 2) / zoom
+		viewCenterY = pg.pagePositions[0]?.y + pg.pageHeight / 2 || 0
+	} else {
+		viewCenterX = pg.pagePositions[0]?.x + pg.pageWidth / 2 || 0
+		viewCenterY = (scoreElm.scrollTop + scoreElm.clientHeight / 2) / zoom
+	}
+
+	// Find the page whose center is closest to viewport center
+	let closestPage = 0
+	let closestDist = Infinity
+	for (let i = 0; i < pg.pageCount; i++) {
+		const pos = pg.pagePositions[i]
+		const pageCenterX = pos.x + pg.pageWidth / 2
+		const pageCenterY = pos.y + pg.pageHeight / 2
+		const dx = pageCenterX - viewCenterX
+		const dy = pageCenterY - viewCenterY
+		const dist = dx * dx + dy * dy
+		if (dist < closestDist) {
+			closestDist = dist
+			closestPage = i
+		}
+	}
+
+	if (closestPage !== currentPageIdx) {
+		currentPageIdx = closestPage
+		updatePageNav()
+	}
+}
+
 // ---------------------------------------------------------------------------
 // Zoom Fit Mode (width / height) — buttons next to zoom slider
 // ---------------------------------------------------------------------------