mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
feat(studio): give a book its first and its last page (#2317)
A new book was a cover, a spread and a back cover, so it opened straight onto pages 2 and 3. A bound book does not: the inside of the cover is blank, and the first thing facing the reader is a single right-hand page, page 1. The same at the end, where a single left-hand page sits before the back cover. Both are laid down now, empty, in a new book and in a laid-out one, and they are fixed the way the covers are: an inner spread only ever goes between them. The page numbers follow. They were counted from a spread's position in the array, which assumed the spread after the cover was the first, and three places did that sum on their own. One function now counts along the book, one page for a single leaf and two for a spread, so the sheet on screen and the label in the print view and the folio on the page all say the same number. A book with a first page starts at 1; a book from before the first page existed has none and keeps the numbers it always had.
This commit is contained in:
Maurice
@@ -1,6 +1,6 @@
|
||||
import type { BookDocument } from '@trek/shared'
|
||||
import { SpreadView } from './SpreadView'
|
||||
import { MARK_LENGTH, MARK_WEIGHT, sheetBox, sheetsFor, type Sheet, type SheetMode } from './bookSheets'
|
||||
import { MARK_LENGTH, MARK_WEIGHT, sheetBox, sheetsFor, type Sheet, type SheetMode, foliosOf } from './bookSheets'
|
||||
|
||||
/**
|
||||
* The book laid out for a press.
|
||||
@@ -107,7 +107,7 @@ function SheetView({
|
||||
<SpreadView
|
||||
spread={sheet.spread}
|
||||
page={doc.page}
|
||||
spreadIndex={sheet.spreadIndex}
|
||||
folios={foliosOf(doc.spreads, sheet.spreadIndex, doc.page.pageNumbers.startAt)}
|
||||
big
|
||||
print
|
||||
/>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { BookPageSetup, BookSpread } from '@trek/shared'
|
||||
import { fontStack } from './bookFonts'
|
||||
import { folioInk } from './folioColour'
|
||||
import { isNumbered } from './bookSheets'
|
||||
|
||||
/**
|
||||
* The folios.
|
||||
@@ -17,33 +18,46 @@ import { folioInk } from './folioColour'
|
||||
* not the ones that get printed.
|
||||
*
|
||||
* The cover and the back cover carry none. A folio on a cover is a mistake in
|
||||
* every book ever bound.
|
||||
* every book ever bound. The single first and last pages carry one each, on
|
||||
* the side of the book they are bound on (#2317).
|
||||
*/
|
||||
export function PageNumbers({
|
||||
spread, page, spreadIndex,
|
||||
spread, page, folios,
|
||||
}: {
|
||||
spread: BookSpread
|
||||
page: BookPageSetup
|
||||
/** Position in the document, cover included. */
|
||||
spreadIndex: number
|
||||
/**
|
||||
* The numbers this spread carries, from foliosOf: two for a spread, one for
|
||||
* a first or last page, none for a cover. Counted by the caller, which has
|
||||
* the whole book — a spread on its own does not know how many pages sit
|
||||
* before it.
|
||||
*/
|
||||
folios: readonly number[]
|
||||
}) {
|
||||
const cfg = page.pageNumbers
|
||||
if (!cfg?.show || spread.role !== 'inner') return null
|
||||
if (!cfg?.show || !isNumbered(spread.role) || folios.length === 0) return null
|
||||
|
||||
/*
|
||||
* The cover is one sheet with a front and a back, so the first inner spread
|
||||
* opens on `startAt` — 2 by default, the page you see when you open a book
|
||||
* whose cover is page 1. `spreadIndex` counts the cover, hence the -1.
|
||||
* Which page of the sheet each number sits on. A spread numbers both; the
|
||||
* first page is a right-hand leaf and the last a left-hand one, and each
|
||||
* carries its one number on the side it actually is.
|
||||
*/
|
||||
const left = cfg.startAt + (spreadIndex - 1) * 2
|
||||
const right = left + 1
|
||||
const sides: Array<['left' | 'right', number]> = spread.role === 'inner'
|
||||
? [['left', folios[0]], ['right', folios[1]]]
|
||||
: [[spread.role === 'first' ? 'right' : 'left', folios[0]]]
|
||||
|
||||
const size = cfg.size
|
||||
const y = page.pageHeight - cfg.margin
|
||||
|
||||
/** Where the number sits on each page, given which edge it hangs from. */
|
||||
/**
|
||||
* Where the number sits on each page, given which edge it hangs from.
|
||||
*
|
||||
* A single page is one page wide, so its number sits at x 0 whichever
|
||||
* side of the book it is bound on; the side only decides which edge is
|
||||
* the outer one.
|
||||
*/
|
||||
const place = (side: 'left' | 'right') => {
|
||||
const pageX = side === 'left' ? 0 : page.pageWidth
|
||||
const pageX = side === 'left' || spread.role !== 'inner' ? 0 : page.pageWidth
|
||||
if (cfg.position === 'centre') {
|
||||
return { x: pageX, w: page.pageWidth, align: 'center' as const }
|
||||
}
|
||||
@@ -58,7 +72,7 @@ export function PageNumbers({
|
||||
|
||||
return (
|
||||
<>
|
||||
{([['left', left], ['right', right]] as const).map(([side, number]) => {
|
||||
{sides.map(([side, number]) => {
|
||||
const at = place(side)
|
||||
/*
|
||||
* Sampled at the middle of the number's own box, which is where the
|
||||
|
||||
@@ -427,7 +427,7 @@ export function ElementView({
|
||||
export function SpreadView({
|
||||
spread,
|
||||
page,
|
||||
spreadIndex = 0,
|
||||
folios = [],
|
||||
big = false,
|
||||
showGuides = false,
|
||||
print = false,
|
||||
@@ -436,11 +436,12 @@ export function SpreadView({
|
||||
spread: BookSpread
|
||||
page: BookPageSetup
|
||||
/**
|
||||
* Where this spread sits in the book. Only the folios need it — a page
|
||||
* number is the one thing on the page that is a function of position rather
|
||||
* than of the document.
|
||||
* The page numbers this spread carries, from foliosOf. Only PageNumbers
|
||||
* needs them — a page number is the one thing on the page that is a
|
||||
* function of position in the book rather than of the spread itself, and
|
||||
* the caller is the one holding the book.
|
||||
*/
|
||||
spreadIndex?: number
|
||||
folios?: readonly number[]
|
||||
big?: boolean
|
||||
showGuides?: boolean
|
||||
/** The print renderer passes this: no guides, no placeholders, no chrome. */
|
||||
@@ -470,7 +471,7 @@ export function SpreadView({
|
||||
<ElementView key={el.id} el={el} big={big} print={print} dropLabel={dropLabel} />
|
||||
))}
|
||||
|
||||
<PageNumbers spread={spread} page={page} spreadIndex={spreadIndex} />
|
||||
<PageNumbers spread={spread} page={page} folios={folios} />
|
||||
|
||||
{showGuides && (
|
||||
<>
|
||||
|
||||
@@ -59,6 +59,7 @@ const HANDLE_POS: Record<HandleId, { left: string; top: string; cursor: string }
|
||||
export function StudioCanvas({
|
||||
spread,
|
||||
spreadIndex,
|
||||
folios = [],
|
||||
page,
|
||||
zoom,
|
||||
pxPerMm,
|
||||
@@ -71,6 +72,8 @@ export function StudioCanvas({
|
||||
}: {
|
||||
spread: BookSpread | null
|
||||
spreadIndex: number
|
||||
/** The page numbers this spread carries, from foliosOf. */
|
||||
folios?: readonly number[]
|
||||
page: BookPageSetup
|
||||
zoom: number
|
||||
pxPerMm: number
|
||||
@@ -256,7 +259,7 @@ export function StudioCanvas({
|
||||
}}
|
||||
onPointerDown={() => select([])}
|
||||
>
|
||||
<SpreadView spread={spread} page={page} spreadIndex={spreadIndex} big={zoom > 0.34} showGuides dropLabel={dropLabel} />
|
||||
<SpreadView spread={spread} page={page} folios={folios} big={zoom > 0.34} showGuides dropLabel={dropLabel} />
|
||||
|
||||
{cursors && cursors.length > 0 && (
|
||||
<PeerCursors cursors={cursors} spreadIndex={spreadIndex} zoom={zoom} />
|
||||
|
||||
@@ -7,6 +7,7 @@ import {
|
||||
} from 'lucide-react'
|
||||
import { useJourneyStudio } from '../../pages/journeyStudio/useJourneyStudio'
|
||||
import { PAGE_PRESET_ORDER, PAGE_PRESETS } from './pagePresets'
|
||||
import { foliosOf } from './bookSheets'
|
||||
import { StudioSidebar } from './StudioSidebar'
|
||||
import { StudioCanvas } from './StudioCanvas'
|
||||
import { StudioInspector } from './StudioInspector'
|
||||
@@ -427,6 +428,7 @@ function Workbench({ s, bookView }: { s: Studio; bookView: boolean }) {
|
||||
<StudioCanvas
|
||||
spread={s.spread}
|
||||
spreadIndex={s.activeSpread}
|
||||
folios={s.doc ? foliosOf(s.doc.spreads, s.activeSpread, s.page.pageNumbers.startAt) : []}
|
||||
page={s.page}
|
||||
zoom={s.zoom}
|
||||
pxPerMm={s.pxPerMm}
|
||||
|
||||
@@ -9,6 +9,7 @@ import { useStudioStore } from '../../store/studioStore'
|
||||
import { formatDate } from '../../utils/formatters'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import { SpreadFold, SpreadView } from './SpreadView'
|
||||
import { folioLabel, foliosOf } from './bookSheets'
|
||||
import { photoSrc } from './bookRender'
|
||||
import { elementId as uid } from './bookIds'
|
||||
import { formatBookCoords, formatBookDate, type CoordFormat } from './entryText'
|
||||
@@ -200,14 +201,14 @@ function PagesPanel({
|
||||
transform: `scale(${scale})`, transformOrigin: 'top left',
|
||||
}}
|
||||
>
|
||||
<SpreadView spread={sp} page={page} spreadIndex={i} />
|
||||
<SpreadView spread={sp} page={page} folios={foliosOf(spreads, i, page.pageNumbers.startAt)} />
|
||||
</div>
|
||||
{bookView && !single && <SpreadFold page={page} scaled={pxPerMm * scale} />}
|
||||
</div>
|
||||
<span className="st-thumb-label">
|
||||
{sp.role === 'cover' ? t('journey.studio.cover')
|
||||
: sp.role === 'back' ? t('journey.studio.backCover')
|
||||
: `${i * 2} – ${i * 2 + 1}`}
|
||||
: folioLabel(foliosOf(spreads, i, page.pageNumbers.startAt))}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
|
||||
@@ -1531,7 +1531,7 @@ function backSpread(input: AutoInput): BookSpread {
|
||||
}
|
||||
|
||||
export function buildBook(input: AutoInput): BookDocument {
|
||||
const spreads: BookSpread[] = [coverSpread(input)]
|
||||
const spreads: BookSpread[] = [coverSpread(input), blankSpread('first')]
|
||||
|
||||
/*
|
||||
* The summary and the countries open the book, before the entries.
|
||||
@@ -1572,15 +1572,41 @@ export function buildBook(input: AutoInput): BookDocument {
|
||||
}
|
||||
}
|
||||
flushRun()
|
||||
spreads.push(backSpread(input))
|
||||
spreads.push(blankSpread('last'), backSpread(input))
|
||||
return {
|
||||
version: 1,
|
||||
title: input.title.slice(0, MAX_BOOK_TITLE),
|
||||
page: input.page,
|
||||
page: withFirstPage(input.page),
|
||||
spreads: spreads.slice(0, MAX_SPREADS),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* A page with nothing on it, of the given kind.
|
||||
*
|
||||
* The first and the last page of a book are laid down empty on purpose: the
|
||||
* first is where a title page or a dedication goes, the last where a colophon
|
||||
* does, and neither is something a layout should decide for a person.
|
||||
*/
|
||||
function blankSpread(role: BookSpread['role']): BookSpread {
|
||||
return { id: uid('sp'), role, background: null, elements: [], parked: [], entryId: null }
|
||||
}
|
||||
|
||||
/**
|
||||
* The page setup for a book that opens on a single page.
|
||||
*
|
||||
* `startAt` numbers the first page inside the covers. A book from before the
|
||||
* single first page existed opened straight onto a spread and started at 2,
|
||||
* so that its left-hand page read as the second page of the object. With a
|
||||
* first page in front of that spread the first page is page 1 — so a book laid
|
||||
* out with one starts there, whatever the setup it inherited said (#2317).
|
||||
* Nothing else of the setup is touched: the format and the folio styling are
|
||||
* the person's, only the count moved with the page that moved.
|
||||
*/
|
||||
function withFirstPage(page: BookPageSetup): BookPageSetup {
|
||||
return { ...page, pageNumbers: { ...page.pageNumbers, startAt: 1 } }
|
||||
}
|
||||
|
||||
/**
|
||||
* A book nobody has laid out yet.
|
||||
*
|
||||
@@ -1592,17 +1618,15 @@ export function buildBook(input: AutoInput): BookDocument {
|
||||
*
|
||||
* The covers are here rather than left out because a book has them and there is
|
||||
* no other way to add one: the pages rail only inserts inner spreads, between
|
||||
* the two. Empty, though, in the same way the page between them is.
|
||||
* the two. The single first and last pages likewise (#2317). Empty, though, in
|
||||
* the same way the spread between them is.
|
||||
*/
|
||||
export function emptyBook(input: AutoInput): BookDocument {
|
||||
const blank = (role: BookSpread['role']): BookSpread => ({
|
||||
id: uid('sp'), role, background: null, elements: [], parked: [], entryId: null,
|
||||
})
|
||||
return {
|
||||
version: 1,
|
||||
title: input.title.slice(0, MAX_BOOK_TITLE),
|
||||
page: input.page,
|
||||
spreads: [blank('cover'), blank('inner'), blank('back')],
|
||||
page: withFirstPage(input.page),
|
||||
spreads: [blankSpread('cover'), blankSpread('first'), blankSpread('inner'), blankSpread('last'), blankSpread('back')],
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -110,6 +110,7 @@ export function sheetsFor(doc: BookDocument, mode: SheetMode): Sheet[] {
|
||||
doc.spreads.forEach((spread, spreadIndex) => {
|
||||
const single = spread.role !== 'inner'
|
||||
const spreadWidth = single ? pageWidth : pageWidth * 2
|
||||
const folios = foliosOf(doc.spreads, spreadIndex, pageNumbers.startAt)
|
||||
|
||||
if (single || mode === 'spreads') {
|
||||
out.push({
|
||||
@@ -120,7 +121,7 @@ export function sheetsFor(doc: BookDocument, mode: SheetMode): Sheet[] {
|
||||
height: pageHeight,
|
||||
spreadWidth,
|
||||
single,
|
||||
label: single ? '' : folioRange(spreadIndex, pageNumbers.startAt),
|
||||
label: folioLabel(folios),
|
||||
})
|
||||
return;
|
||||
}
|
||||
@@ -134,7 +135,7 @@ export function sheetsFor(doc: BookDocument, mode: SheetMode): Sheet[] {
|
||||
height: pageHeight,
|
||||
spreadWidth,
|
||||
single: true,
|
||||
label: String(folio(spreadIndex, pageNumbers.startAt) + half),
|
||||
label: String(folios[half]),
|
||||
})
|
||||
}
|
||||
})
|
||||
@@ -142,18 +143,40 @@ export function sheetsFor(doc: BookDocument, mode: SheetMode): Sheet[] {
|
||||
return out
|
||||
}
|
||||
|
||||
/**
|
||||
* The number the left-hand page of a spread carries.
|
||||
*
|
||||
* Mirrors PageNumbers.tsx: the first inner spread opens at `startAt`, and the
|
||||
* cover is a separate sheet, which is why the index is offset rather than used
|
||||
* raw. It is only ever a label here — nothing is printed from it.
|
||||
*/
|
||||
function folio(spreadIndex: number, startAt: number): number {
|
||||
return startAt + (spreadIndex - 1) * 2
|
||||
/** Which of a book's leaves carry a page number: everything inside the covers. */
|
||||
export function isNumbered(role: BookSpread['role']): boolean {
|
||||
return role !== 'cover' && role !== 'back'
|
||||
}
|
||||
|
||||
function folioRange(spreadIndex: number, startAt: number): string {
|
||||
const left = folio(spreadIndex, startAt)
|
||||
return `${left} – ${left + 1}`
|
||||
/**
|
||||
* The page numbers a spread carries, in reading order.
|
||||
*
|
||||
* Counted along the book rather than from the index: the covers carry none,
|
||||
* a first or last page carries one, an inner spread two, and the first
|
||||
* numbered page is `startAt`. A book from before the single first page
|
||||
* existed has `startAt` 2 and no such page, so its first spread still reads
|
||||
* 2 – 3; a book laid out since has a first page and starts at 1, so that page
|
||||
* is 1 and the same spread behind it is 2 – 3 (#2317). Either way the number
|
||||
* follows what is in the book, not where the spread sits in the array.
|
||||
*
|
||||
* The renderer and the print labels both come through here, so a number seen
|
||||
* on screen is the one that is printed.
|
||||
*
|
||||
* Empty for a cover, and for an index past the end.
|
||||
*/
|
||||
export function foliosOf(spreads: readonly BookSpread[], spreadIndex: number, startAt: number): number[] {
|
||||
const spread = spreads[spreadIndex]
|
||||
if (!spread || !isNumbered(spread.role)) return []
|
||||
let next = startAt
|
||||
for (let i = 0; i < spreadIndex; i++) {
|
||||
const role = spreads[i].role
|
||||
if (!isNumbered(role)) continue
|
||||
next += role === 'inner' ? 2 : 1
|
||||
}
|
||||
return spread.role === 'inner' ? [next, next + 1] : [next]
|
||||
}
|
||||
|
||||
/** "3", or "2 – 3" for a spread; nothing for a cover. */
|
||||
export function folioLabel(folios: readonly number[]): string {
|
||||
return folios.length === 2 ? `${folios[0]} – ${folios[1]}` : folios.length === 1 ? String(folios[0]) : ''
|
||||
}
|
||||
|
||||
@@ -77,6 +77,34 @@ interface StudioState {
|
||||
canRedo: () => boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Where an inner spread may go: after the cover and the first page, before
|
||||
* the last page and the back cover.
|
||||
*
|
||||
* Read from the document each time rather than assumed, because a book from
|
||||
* before the single first page existed has none, and a book with no covers at
|
||||
* all (the tests build those) has nothing to stay inside of. The lower bound
|
||||
* is not decoration either: a book with no inner spreads yet reports its last
|
||||
* inner one as -1, which asked for a page at 0 — in front of the cover, where
|
||||
* it could not be moved back from, because a move only ever swaps with
|
||||
* another inner spread.
|
||||
*/
|
||||
function innerBounds(spreads: readonly BookSpread[]): { first: number; limit: number } {
|
||||
let first = 0
|
||||
for (let i = 0; i < spreads.length; i++) {
|
||||
const role = spreads[i].role
|
||||
if (role === 'cover' || role === 'first') first = i + 1
|
||||
else break
|
||||
}
|
||||
let limit = spreads.length
|
||||
for (let i = spreads.length - 1; i >= 0; i--) {
|
||||
const role = spreads[i].role
|
||||
if (role === 'back' || role === 'last') limit = i
|
||||
else break
|
||||
}
|
||||
return { first, limit: Math.max(first, limit) }
|
||||
}
|
||||
|
||||
function replaceSpread(doc: BookDocument, index: number, fn: (s: BookSpread) => BookSpread): BookDocument {
|
||||
const spreads = doc.spreads.slice()
|
||||
if (!spreads[index]) return doc
|
||||
@@ -197,10 +225,14 @@ export const useStudioStore = create<StudioState>((set, get) => ({
|
||||
*
|
||||
* The cover and the back cover are fixed points: a book has exactly one of
|
||||
* each, they are single pages rather than spreads, and the layouts panel
|
||||
* already refuses to touch them. So everything here operates on the inner
|
||||
* spreads between them, and `canEditSpread` is the one place that decides
|
||||
* what counts as inner — the rail, the menu and the store all ask it rather
|
||||
* than each testing `role` for themselves.
|
||||
* already refuses to touch them. The single first and last pages inside
|
||||
* them are fixed the same way (#2317): a bound book opens onto one
|
||||
* right-hand page and closes on one left-hand page, and moving either into
|
||||
* the middle of the book would put a half-width page between two spreads.
|
||||
* So everything here operates on the inner spreads between them, and
|
||||
* `canEditSpread` is the one place that decides what counts as inner — the
|
||||
* rail, the menu and the store all ask it rather than each testing `role`
|
||||
* for themselves.
|
||||
*/
|
||||
canEditSpread: index => {
|
||||
const sp = get().doc?.spreads[index]
|
||||
@@ -219,10 +251,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
|
||||
* move only ever swaps with another inner spread. The first page of an
|
||||
* empty book is the one this catches.
|
||||
*/
|
||||
const cover = doc.spreads.findIndex(sp => sp.role === 'cover')
|
||||
const back = doc.spreads.findIndex(sp => sp.role === 'back')
|
||||
const first = cover === -1 ? 0 : cover + 1
|
||||
const limit = back === -1 ? doc.spreads.length : back
|
||||
const { first, limit } = innerBounds(doc.spreads)
|
||||
const at = Math.min(Math.max(index + 1, first), limit)
|
||||
get().commit(d => ({
|
||||
...d,
|
||||
@@ -246,10 +275,7 @@ export const useStudioStore = create<StudioState>((set, get) => ({
|
||||
const doc = get().doc
|
||||
if (!doc) return
|
||||
// Same bounds as addSpread: inside the covers at both ends.
|
||||
const cover = doc.spreads.findIndex(sp => sp.role === 'cover')
|
||||
const back = doc.spreads.findIndex(sp => sp.role === 'back')
|
||||
const first = cover === -1 ? 0 : cover + 1
|
||||
const limit = back === -1 ? doc.spreads.length : back
|
||||
const { first, limit } = innerBounds(doc.spreads)
|
||||
const at = Math.min(Math.max(index + 1, first), limit)
|
||||
get().commit(d => ({
|
||||
...d,
|
||||
|
||||
@@ -178,9 +178,9 @@ describe('an entry with words but no pictures', () => {
|
||||
})
|
||||
|
||||
describe('a journey with nothing at all', () => {
|
||||
it('produces a book of a cover and a back, and no blank pages between', () => {
|
||||
it('produces a book of the covers and the single pages inside them, and no spreads between', () => {
|
||||
const spreads = build([])
|
||||
expect(inner(spreads)).toHaveLength(0)
|
||||
expect(spreads.map(s => s.role)).toEqual(['cover', 'back'])
|
||||
expect(spreads.map(s => s.role)).toEqual(['cover', 'first', 'last', 'back'])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -83,10 +83,11 @@ describe('the summary spread', () => {
|
||||
expect(has(doc, 'stats')).toBe(true)
|
||||
})
|
||||
|
||||
it('comes straight after the cover, before the entries', () => {
|
||||
it('comes straight after the cover and the first page, before the entries', () => {
|
||||
const doc = build()
|
||||
expect(doc.spreads[0].role).toBe('cover')
|
||||
expect(kinds(doc.spreads[1])).toContain('map')
|
||||
expect(doc.spreads[1].role).toBe('first')
|
||||
expect(kinds(doc.spreads[2])).toContain('map')
|
||||
})
|
||||
|
||||
it('carries the journey figures rather than placeholders', () => {
|
||||
@@ -125,8 +126,8 @@ describe('the summary spread', () => {
|
||||
points: [], distance: 0, days: 0, steps: 0, photos: 0, places: 0, furthest: 0, countries: [],
|
||||
}),
|
||||
})
|
||||
// Cover, the one entry, back cover — no summary, no country page.
|
||||
expect(doc.spreads.map(sp => sp.role)).toEqual(['cover', 'inner', 'back'])
|
||||
// Cover, first page, the one entry, last page, back cover — no summary, no country page.
|
||||
expect(doc.spreads.map(sp => sp.role)).toEqual(['cover', 'first', 'inner', 'last', 'back'])
|
||||
expect(has(doc, 'map')).toBe(false)
|
||||
expect(has(doc, 'stats')).toBe(false)
|
||||
})
|
||||
@@ -136,8 +137,8 @@ describe('the summary spread', () => {
|
||||
expect(has(doc, 'map')).toBe(false)
|
||||
expect(has(doc, 'stats')).toBe(false)
|
||||
expect(has(doc, 'countries')).toBe(false)
|
||||
// And the book still builds: cover, the entry, back cover.
|
||||
expect(doc.spreads).toHaveLength(3)
|
||||
// And the book still builds: cover, first page, the entry, last page, back cover.
|
||||
expect(doc.spreads).toHaveLength(5)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -175,7 +176,7 @@ describe('the country page', () => {
|
||||
it('sits between the summary and the entries', () => {
|
||||
const doc = build({ stats: twoCountries })
|
||||
const order = doc.spreads.map(sp => kinds(sp).find(k => k === 'map' || k === 'countries') ?? sp.role)
|
||||
expect(order.slice(0, 3)).toEqual(['cover', 'map', 'countries'])
|
||||
expect(order.slice(0, 4)).toEqual(['cover', 'first', 'map', 'countries'])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -313,13 +314,37 @@ describe('an empty book', () => {
|
||||
stats: stats(),
|
||||
}
|
||||
|
||||
it('has a cover, a page and a back cover, and nothing on any of them', () => {
|
||||
it('has a cover, a first page, a spread, a last page and a back cover, and nothing on any of them', () => {
|
||||
const doc = emptyBook(input)
|
||||
expect(doc.spreads.map(s => s.role)).toEqual(['cover', 'inner', 'back'])
|
||||
expect(doc.spreads.map(s => s.role)).toEqual(['cover', 'first', 'inner', 'last', 'back'])
|
||||
expect(doc.spreads.every(s => s.elements.length === 0)).toBe(true)
|
||||
expect(doc.spreads.every(s => s.background === null)).toBe(true)
|
||||
})
|
||||
|
||||
/*
|
||||
* A bound book opens onto page 1, the single right-hand page behind the
|
||||
* cover (#2317). The default setup counts from 2, which was right while the
|
||||
* book opened straight onto a spread; a book laid down with a first page
|
||||
* counts from that page instead, whatever setup it was handed.
|
||||
*/
|
||||
it('numbers its first page 1, whatever the setup said', () => {
|
||||
expect(input.page.pageNumbers.startAt).toBe(2)
|
||||
expect(emptyBook(input).page.pageNumbers.startAt).toBe(1)
|
||||
expect(buildBook(input).page.pageNumbers.startAt).toBe(1)
|
||||
// Nothing else of the setup moves.
|
||||
expect(emptyBook(input).page.pageNumbers.position).toBe(input.page.pageNumbers.position)
|
||||
})
|
||||
|
||||
it('lays the first and last pages down empty in a laid-out book too', () => {
|
||||
const doc = buildBook(input)
|
||||
const first = doc.spreads.find(s => s.role === 'first')!
|
||||
const last = doc.spreads.find(s => s.role === 'last')!
|
||||
expect(doc.spreads.indexOf(first)).toBe(1)
|
||||
expect(doc.spreads.indexOf(last)).toBe(doc.spreads.length - 2)
|
||||
expect(first.elements).toEqual([])
|
||||
expect(last.elements).toEqual([])
|
||||
})
|
||||
|
||||
it('carries the journey title and the page setup it was given', () => {
|
||||
const doc = emptyBook(input)
|
||||
expect(doc.title).toBe('Iceland')
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import type { BookDocument, BookSpread } from '@trek/shared'
|
||||
import { bookPageSetupSchema } from '@trek/shared'
|
||||
import { MARK_LENGTH, sheetBox, sheetsFor } from '../../../src/components/Studio/bookSheets'
|
||||
import { MARK_LENGTH, folioLabel, foliosOf, isNumbered, sheetBox, sheetsFor } from '../../../src/components/Studio/bookSheets'
|
||||
|
||||
/**
|
||||
* Cutting a book into sheets (#1973).
|
||||
@@ -117,3 +117,75 @@ describe('an empty book', () => {
|
||||
expect(sheetsFor(book([]), 'pages')).toEqual([])
|
||||
})
|
||||
})
|
||||
|
||||
/*
|
||||
* A bound book opens onto one right-hand page and closes on one left-hand
|
||||
* page (#2317). They are single leaves like the covers, but unlike the covers
|
||||
* they are numbered — and the numbers count along the book, so a book with
|
||||
* them and a book from before them both read right.
|
||||
*/
|
||||
describe('the first and last pages', () => {
|
||||
it('stay whole in both modes, like the covers', () => {
|
||||
const roles: BookSpread['role'][] = ['cover', 'first', 'inner', 'last', 'back']
|
||||
for (const mode of ['pages', 'spreads'] as const) {
|
||||
const sheets = sheetsFor(book(roles), mode)
|
||||
const firstSheet = sheets.find(s => s.spread.role === 'first')!
|
||||
const lastSheet = sheets.find(s => s.spread.role === 'last')!
|
||||
expect(firstSheet.single, mode).toBe(true)
|
||||
expect(firstSheet.width, mode).toBe(210)
|
||||
expect(lastSheet.single, mode).toBe(true)
|
||||
expect(lastSheet.width, mode).toBe(210)
|
||||
}
|
||||
})
|
||||
|
||||
it('are numbered, counting from startAt along the book', () => {
|
||||
const roles: BookSpread['role'][] = ['cover', 'first', 'inner', 'inner', 'last', 'back']
|
||||
const sheets = sheetsFor(book(roles, { pageNumbers: { startAt: 1 } }), 'pages')
|
||||
expect(sheets.map(s => s.label)).toEqual(['', '1', '2', '3', '4', '5', '6', ''])
|
||||
expect(sheetsFor(book(roles, { pageNumbers: { startAt: 1 } }), 'spreads').map(s => s.label))
|
||||
.toEqual(['', '1', '2 – 3', '4 – 5', '6', ''])
|
||||
})
|
||||
|
||||
it('leave a book without them on the numbers it always had', () => {
|
||||
// startAt 2, no first page: the first spread still opens on 2 – 3.
|
||||
const sheets = sheetsFor(book(['cover', 'inner', 'inner', 'back']), 'spreads')
|
||||
expect(sheets.map(s => s.label)).toEqual(['', '2 – 3', '4 – 5', ''])
|
||||
})
|
||||
})
|
||||
|
||||
describe('foliosOf', () => {
|
||||
const roles: BookSpread['role'][] = ['cover', 'first', 'inner', 'inner', 'last', 'back']
|
||||
const spreads = book(roles).spreads
|
||||
|
||||
it('hands a cover nothing, a single page one number and a spread two', () => {
|
||||
expect(foliosOf(spreads, 0, 1)).toEqual([])
|
||||
expect(foliosOf(spreads, 1, 1)).toEqual([1])
|
||||
expect(foliosOf(spreads, 2, 1)).toEqual([2, 3])
|
||||
expect(foliosOf(spreads, 3, 1)).toEqual([4, 5])
|
||||
expect(foliosOf(spreads, 4, 1)).toEqual([6])
|
||||
expect(foliosOf(spreads, 5, 1)).toEqual([])
|
||||
})
|
||||
|
||||
it('starts wherever the book says', () => {
|
||||
expect(foliosOf(spreads, 1, 3)).toEqual([3])
|
||||
expect(foliosOf(spreads, 2, 3)).toEqual([4, 5])
|
||||
})
|
||||
|
||||
it('is empty past the end of the book', () => {
|
||||
expect(foliosOf(spreads, 99, 1)).toEqual([])
|
||||
})
|
||||
|
||||
it('numbers everything inside the covers', () => {
|
||||
expect(isNumbered('cover')).toBe(false)
|
||||
expect(isNumbered('back')).toBe(false)
|
||||
expect(isNumbered('first')).toBe(true)
|
||||
expect(isNumbered('inner')).toBe(true)
|
||||
expect(isNumbered('last')).toBe(true)
|
||||
})
|
||||
|
||||
it('labels a pair with a dash, one number plainly, and nothing as nothing', () => {
|
||||
expect(folioLabel([2, 3])).toBe('2 – 3')
|
||||
expect(folioLabel([7])).toBe('7')
|
||||
expect(folioLabel([])).toBe('')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -56,48 +56,62 @@ describe('a custom trim size', () => {
|
||||
describe('page numbers', () => {
|
||||
it('are off until asked for', () => {
|
||||
expect(page().pageNumbers.show).toBe(false)
|
||||
const { container } = render(<SpreadView spread={spread()} page={page()} spreadIndex={1} />)
|
||||
const { container } = render(<SpreadView spread={spread()} page={page()} folios={[2, 3]} />)
|
||||
expect(container.textContent).toBe('')
|
||||
})
|
||||
|
||||
it('number both pages of a spread, left then right', () => {
|
||||
const { container } = render(
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true } })} spreadIndex={1} />,
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true } })} folios={[2, 3]} />,
|
||||
)
|
||||
expect(container.textContent).toBe('23')
|
||||
})
|
||||
|
||||
/*
|
||||
* The first inner spread opens on `startAt`, and the cover is a separate
|
||||
* sheet — which is why the index has to be offset rather than used raw.
|
||||
* The numbers come from the caller (foliosOf, tested with bookSheets): the
|
||||
* sheet draws whatever it is handed, so a spread deep in the book reads
|
||||
* what the book says it is.
|
||||
*/
|
||||
it('advance by two for each spread further into the book', () => {
|
||||
it('draw the numbers they are handed, wherever the spread sits', () => {
|
||||
const p = page({ pageNumbers: { show: true } })
|
||||
const third = render(<SpreadView spread={spread()} page={p} spreadIndex={3} />)
|
||||
const third = render(<SpreadView spread={spread()} page={p} folios={[6, 7]} />)
|
||||
expect(third.container.textContent).toBe('67')
|
||||
})
|
||||
|
||||
it('start where the book says, since a binder may or may not count the cover', () => {
|
||||
const p = page({ pageNumbers: { show: true, startAt: 1 } })
|
||||
const { container } = render(<SpreadView spread={spread()} page={p} spreadIndex={1} />)
|
||||
expect(container.textContent).toBe('12')
|
||||
})
|
||||
|
||||
/* A folio on a cover is a mistake in every book ever bound. */
|
||||
it('never appear on the cover or the back cover', () => {
|
||||
const p = page({ pageNumbers: { show: true } })
|
||||
for (const role of ['cover', 'back'] as const) {
|
||||
const { container } = render(<SpreadView spread={spread({ role })} page={p} spreadIndex={0} />)
|
||||
const { container } = render(<SpreadView spread={spread({ role })} page={p} folios={[1]} />)
|
||||
expect(container.textContent, role).toBe('')
|
||||
}
|
||||
})
|
||||
|
||||
/* The single first page is a right-hand leaf and the last a left-hand one (#2317). */
|
||||
it('put one number on a first or last page, on the side it is bound', () => {
|
||||
const p = page({ pageNumbers: { show: true, position: 'outer' } })
|
||||
const first = render(<SpreadView spread={spread({ role: 'first' })} page={p} folios={[1]} />)
|
||||
const last = render(<SpreadView spread={spread({ role: 'last' })} page={p} folios={[9]} />)
|
||||
expect(first.container.textContent).toBe('1')
|
||||
expect(last.container.textContent).toBe('9')
|
||||
const box = (c: HTMLElement) => (c.firstElementChild!.children[0]) as HTMLElement
|
||||
// Outer on a right-hand page is the right edge; on a left-hand page the left.
|
||||
expect(box(first.container).style.textAlign).toBe('right')
|
||||
expect(box(last.container).style.textAlign).toBe('left')
|
||||
})
|
||||
|
||||
it('draw nothing for a numbered page handed no numbers', () => {
|
||||
const p = page({ pageNumbers: { show: true } })
|
||||
const { container } = render(<SpreadView spread={spread()} page={p} folios={[]} />)
|
||||
expect(container.textContent).toBe('')
|
||||
})
|
||||
|
||||
it('sit against the cut edge on outer, and in the gutter on inner', () => {
|
||||
const outer = render(
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true, position: 'outer' } })} spreadIndex={1} />,
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true, position: 'outer' } })} folios={[2, 3]} />,
|
||||
)
|
||||
const inner = render(
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true, position: 'inner' } })} spreadIndex={1} />,
|
||||
<SpreadView spread={spread()} page={page({ pageNumbers: { show: true, position: 'inner' } })} folios={[2, 3]} />,
|
||||
)
|
||||
const leftOf = (c: HTMLElement) =>
|
||||
parseFloat(((c.firstElementChild!.children[0]) as HTMLElement).style.left)
|
||||
|
||||
@@ -38,7 +38,7 @@ describe('an empty frame', () => {
|
||||
*/
|
||||
it('wears the frame it will wear once it is filled', () => {
|
||||
const { container } = render(
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'polaroid' })])} page={page} spreadIndex={1} />,
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'polaroid' })])} page={page} />,
|
||||
)
|
||||
const outer = container.querySelector<HTMLElement>('[style*="left: 20mm"]')!
|
||||
// A Polaroid's white card and the shadow of a print lying on a page.
|
||||
@@ -48,7 +48,7 @@ describe('an empty frame', () => {
|
||||
|
||||
it('shows a film frame as film, black card and all', () => {
|
||||
const { container } = render(
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'film' })])} page={page} spreadIndex={1} />,
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'film' })])} page={page} />,
|
||||
)
|
||||
const outer = container.querySelector<HTMLElement>('[style*="left: 20mm"]')!
|
||||
expect(outer.style.background).toContain('rgb(20, 20, 20)')
|
||||
@@ -56,7 +56,7 @@ describe('an empty frame', () => {
|
||||
|
||||
it('leaves a plain frame plain', () => {
|
||||
const { container } = render(
|
||||
<SpreadView spread={spread([frame()])} page={page} spreadIndex={1} />,
|
||||
<SpreadView spread={spread([frame()])} page={page} />,
|
||||
)
|
||||
const outer = container.querySelector<HTMLElement>('[style*="left: 20mm"]')!
|
||||
expect(outer.style.boxShadow).toBe('')
|
||||
@@ -65,7 +65,7 @@ describe('an empty frame', () => {
|
||||
/* In the bound book an unfilled frame is nothing at all. */
|
||||
it('prints as nothing', () => {
|
||||
const { container } = render(
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'polaroid' })])} page={page} spreadIndex={1} print />,
|
||||
<SpreadView spread={spread([frame({ frameStyle: 'polaroid' })])} page={page} print />,
|
||||
)
|
||||
expect(container.querySelector('[style*="left: 20mm"]')).toBeNull()
|
||||
})
|
||||
|
||||
@@ -311,3 +311,66 @@ describe('turning an element', () => {
|
||||
expect(rotationOf('one')).toBe(0)
|
||||
})
|
||||
})
|
||||
|
||||
/*
|
||||
* The single first and last pages are fixed the way the covers are (#2317):
|
||||
* a bound book opens onto one right-hand page and closes on one left-hand
|
||||
* page, and an inner spread may only ever go between them.
|
||||
*/
|
||||
describe('a book with a first and a last page', () => {
|
||||
beforeEach(() => {
|
||||
useStudioStore.getState().load(book(
|
||||
spread('cover', 'cover'),
|
||||
spread('first', 'first'),
|
||||
spread('a', 'inner'),
|
||||
spread('last', 'last'),
|
||||
spread('back', 'back'),
|
||||
))
|
||||
})
|
||||
|
||||
it('treats them as fixed points, not as inner spreads', () => {
|
||||
expect(store().canEditSpread(1)).toBe(false)
|
||||
expect(store().canEditSpread(3)).toBe(false)
|
||||
expect(store().canEditSpread(2)).toBe(true)
|
||||
})
|
||||
|
||||
it('adds after the first page when asked to add at the cover or the first page', () => {
|
||||
store().addSpread(0)
|
||||
expect(roles()).toEqual(['cover', 'first', 'inner', 'inner', 'last', 'back'])
|
||||
expect(store().activeSpread).toBe(2)
|
||||
})
|
||||
|
||||
it('never lands on or behind the last page', () => {
|
||||
store().addSpread(3)
|
||||
expect(roles()).toEqual(['cover', 'first', 'inner', 'inner', 'last', 'back'])
|
||||
store().addSpread(9)
|
||||
expect(roles()).toEqual(['cover', 'first', 'inner', 'inner', 'inner', 'last', 'back'])
|
||||
})
|
||||
|
||||
it('inserts a spread inside them too', () => {
|
||||
store().insertSpread(0, spread('x', 'inner'))
|
||||
expect(roles()).toEqual(['cover', 'first', 'inner', 'inner', 'last', 'back'])
|
||||
})
|
||||
|
||||
it('will not move an inner spread onto either of them', () => {
|
||||
store().moveSpread(2, -1)
|
||||
store().moveSpread(2, 1)
|
||||
expect(ids()).toEqual(['cover', 'first', 'a', 'last', 'back'])
|
||||
})
|
||||
|
||||
it('will not move, copy or delete them', () => {
|
||||
store().moveSpread(1, 1)
|
||||
store().moveSpread(3, -1)
|
||||
store().duplicateSpread(1)
|
||||
store().removeSpread(3)
|
||||
expect(ids()).toEqual(['cover', 'first', 'a', 'last', 'back'])
|
||||
})
|
||||
|
||||
it('adds the first inner spread of an empty book between them', () => {
|
||||
useStudioStore.getState().load(book(
|
||||
spread('cover', 'cover'), spread('first', 'first'), spread('last', 'last'), spread('back', 'back'),
|
||||
))
|
||||
store().addSpread(-1)
|
||||
expect(roles()).toEqual(['cover', 'first', 'inner', 'last', 'back'])
|
||||
})
|
||||
})
|
||||
|
||||
@@ -730,8 +730,17 @@ export type BookUnits = z.infer<typeof bookUnitsSchema>;
|
||||
|
||||
export const bookSpreadSchema = z.object({
|
||||
id: z.string().min(1),
|
||||
/** 'cover' and 'back' are single pages; everything else is a double spread. */
|
||||
role: z.enum(['cover', 'back', 'inner']).default('inner'),
|
||||
/**
|
||||
* Which leaf of the bound book this is.
|
||||
*
|
||||
* 'inner' is a double spread; the other four are single pages. 'cover' and
|
||||
* 'back' are the outside of the book. 'first' is the right-hand page a book
|
||||
* opens onto, and 'last' the left-hand page before the back cover: the
|
||||
* inside of each cover is blank in a bound book, so the first and the last
|
||||
* inner page stand alone rather than facing anything (#2317). Both are
|
||||
* optional so that a document from before they existed still reads.
|
||||
*/
|
||||
role: z.enum(['cover', 'first', 'inner', 'last', 'back']).default('inner'),
|
||||
background: hex.nullable().default(null),
|
||||
/** Back to front. */
|
||||
elements: z.array(bookElementSchema).max(MAX_SPREAD_ELEMENTS).default([]),
|
||||
|
||||
@@ -72,6 +72,7 @@ A journey can also be laid out as a printable photo book. Open a journey and cli
|
||||
|
||||
|
||||
- **Page format** — Square 21 × 21 cm (the default), Square 30 × 30 cm, A4 landscape, A4 portrait, A5 landscape, or a custom width × height in millimetres. Everything is drawn as a spread (two pages side by side) with 3 mm bleed and a 5 mm safe margin.
|
||||
- **The shape of the book** follows a bound one: a cover, a single first page on the right (page 1, where a title page or a dedication goes), the spreads, a single last page on the left, and a back cover. The first and last pages take the cover layouts and, like the covers, stay where they are; new spreads always go between them. Page numbers, when switched on, count from the first page, and the number on screen is the number that prints. Books made before this had no single pages and keep their numbering as it was.
|
||||
- **Auto layout** has two entries. **This spread** builds the spread on screen again from the journal entry it came from, and is only offered on a spread that came from one. **The whole book** replaces every page, keeping your title and page setup. Both are ordinary undo steps, so you can press one, look at it, and undo.
|
||||
- **Pages, Content, Elements, Travel and Layouts** are the sections of the left rail. Content holds the journey's own photos and entries; Layouts has thirteen spread layouts (Hero and story, Four up, Strip and text, Mosaic and so on) plus a separate set of five for the cover and back; Elements has text styles, shapes, lines, grids, empty frames with their frame styles, and a searchable icon library; Travel builds figures out of the journey itself — route maps, country outlines and lists, flags, date, day and distance marks, and a trip summary.
|
||||
- **Properties** on the right edits whatever is selected: position and size, crop and focal point, fill or fit, a look filter, corner radius, frame style, stacking order, lock. An element that auto layout tied to a journal entry follows that entry until you edit it here, which breaks the link.
|
||||
|
||||
Reference in New Issue
Block a user