mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 16:03:02 +00:00
Maurice
a7b53988ff
The travel tab is four tabs now, figures, maps, countries and marks, and offers only the newer looks, each dressed in the book's theme and linked to it. The looks books already hold still draw on their pages exactly as before; they are just no longer offered. - Figures: a summary as a poster, a ticket, tiles, a road sign, an odometer, a handwritten note, a pencil sketch or a band, and each figure on its own as a medal, on odometer drums or ringed by hand. - Maps: the route with its photographs, its stops numbered, its two ends marked or on a dark ground, over satellite or relief imagery, a map per trip, and a map of each country with its stops alone, cut to its shape. - Countries: each country as a passport stamp, a visa, an airmail postcard, its flag in cloth, a map pin, a luggage label or a sketch. - Marks: the date, the day, the distance, the coordinates and the flag as stamps, tags, pills, ribbons, die-cut stickers, embroidered patches and sketches. The schema gains a summary's and a country's look, seven mark styles and the numbered and ends stops of a map, all additive, as revision 11. Also in Studio: the save state is a tile beside who is here, a book a newer Studio saved is said by an overlay that holds the whole Studio until it reloads, and the page rail draws the first and the last page beside the blank inside of their cover. The notifications page and the bell's panel take the dialogs' look: a head with a tile, cards with an unread dot, and tools that come forward on hover.
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import type { BookPageSetup, BookSpread } from '@trek/shared';
|
|
|
|
import { SpreadFold, SpreadView } from './SpreadView';
|
|
|
|
/** CSS pixels in a millimetre: the size SpreadView's millimetre boxes are drawn at before the scale. */
|
|
const PX_PER_MM = 96 / 25.4;
|
|
|
|
interface SpreadThumbProps {
|
|
spread: BookSpread;
|
|
page: BookPageSetup;
|
|
/** The drawn width in CSS pixels; the height follows the page. */
|
|
width: number;
|
|
/** The page numbers the spread carries, from foliosOf; none where the caller holds no book around it. */
|
|
folios?: readonly number[];
|
|
/** The crease of an open book down a double spread. */
|
|
fold?: boolean;
|
|
/** The sheet's look: the page rail's `st-thumb-sheet`, a card's own classes. It must position its children. */
|
|
className?: string;
|
|
/** Pixels per millimetre the caller draws at; CSS's own unless the caller zooms. */
|
|
pxPerMm?: number;
|
|
/**
|
|
* Draw the first and the last page beside the blank inside of their cover,
|
|
* as the bound book opens on them, so the rail shows why they stand alone.
|
|
* The words are the half's name, read out and shown on hover.
|
|
*/
|
|
coverInside?: string;
|
|
}
|
|
|
|
/**
|
|
* One spread at a small size: the editor's own SpreadView under a scale()
|
|
* rather than a second drawing of the page, so a thumbnail can never look
|
|
* different from the sheet. The page rail draws each page with it, and the
|
|
* Studio chat's page card draws a change before and after with it.
|
|
*
|
|
* A page is laid out in millimetres from its top left whatever the reading
|
|
* direction, so the sheet is always drawn left to right.
|
|
*/
|
|
export function SpreadThumb({
|
|
spread,
|
|
page,
|
|
width,
|
|
folios,
|
|
fold = false,
|
|
className,
|
|
pxPerMm = PX_PER_MM,
|
|
coverInside,
|
|
}: SpreadThumbProps) {
|
|
const single = spread.role !== 'inner';
|
|
// The first page opens on the right of the cover's inside, the last on the left of the back's.
|
|
const opens = coverInside && (spread.role === 'first' || spread.role === 'last') ? spread.role : null;
|
|
const wMm = single && !opens ? page.pageWidth : page.pageWidth * 2;
|
|
const scale = width / (wMm * pxPerMm);
|
|
const pageLeft = opens === 'first' ? page.pageWidth * pxPerMm * scale : 0;
|
|
return (
|
|
<div dir="ltr" className={className} style={{ width, height: page.pageHeight * pxPerMm * scale }}>
|
|
{opens && (
|
|
<span
|
|
className="st-thumb-inside"
|
|
title={coverInside}
|
|
aria-label={coverInside}
|
|
style={{
|
|
insetInlineStart: opens === 'first' ? 0 : page.pageWidth * pxPerMm * scale,
|
|
width: page.pageWidth * pxPerMm * scale,
|
|
}}
|
|
/>
|
|
)}
|
|
<div
|
|
style={{
|
|
position: 'absolute',
|
|
insetInlineStart: pageLeft,
|
|
top: 0,
|
|
width: `${wMm}mm`,
|
|
height: `${page.pageHeight}mm`,
|
|
transform: `scale(${scale})`,
|
|
transformOrigin: 'top left',
|
|
}}
|
|
>
|
|
<SpreadView spread={spread} page={page} folios={folios} />
|
|
</div>
|
|
{fold && (!single || opens) && <SpreadFold page={page} scaled={pxPerMm * scale} />}
|
|
</div>
|
|
);
|
|
}
|