Files
TREK/client/src/components/Studio/inspector/inspectorModel.ts
T
Maurice bdf5767a5f feat(studio): rebuild both side panels around one head, one row and one order
The rail lists its sections in the order a book is made: Pages, Content,
Layouts, Elements and Travel, then Theme and Layers set apart below a rule.
Stickers are a tab of Elements beside the icons instead of a rail section of
their own, and Elements has six tabs (text, shapes, lines, frames with the
grids, icons, stickers). The quotation mark moved to the text styles, the
outline rectangle to the basic shapes and the plain rule to the lines. The rail
and every tab row are tab lists the arrow keys walk through, and a long name
wraps instead of being cut. The icon and sticker searches say in the field how
many match, which the sticker library's own head used to.

Every panel on both sides opens on the same head, and every labelled control
uses one row that moves the control under its label when the two do not fit,
so no label sits in a fixed column any more. Number fields, chips, sliders,
tab labels, theme names and travel cards wrap the same way, a country beside
a stop wraps under itself, and an upload cell holds its words to two lines
with the whole label in its tooltip. The heads, shelves and groups are real
headings, so a screen reader can walk the panels by them.

The inspector shows every kind in one order: what the element is and says,
its position and size, its look, its effects, then Arrange. Align and the
stacking buttons are one Arrange group with a button that opens the page in
Layers; its rows sit under their labels, each in two sets that move to a
second line whole. Rarely used groups start folded and open on an element
that already uses them (a turned element, a map held at a zoom, a summary set
in another face), and every group mounts afresh for the next selection. A
sticker's duplicate angle and opacity are gone in favour of the shared
position group, which now has the turn buttons for every kind. With several
elements selected it keeps their angle, opacity and turn, and the mirror when
all of them are stickers, and leaves the frame's numbers to one element. A
photo's fill page and fill spread sit under its crop. With nothing selected
the inspector shows the page background, the book's theme with the way to the
Theme panel, and the page numbers.

Seventeen translation keys nothing has used since before the rebuild (the old
inspector title, the empty spread note, the summary and country list names,
the roads buttons and others) are gone from every language. The broad key
template the old panels used had counted them as reached; the format names,
the empty photo grid messages and the map source hints are now named where the
key check can read them.

Also fixed on the way: the travel stops list shared its class with the
gradient stops and was laid out as sixteen pixel handles; the alignment
buttons were named in raw English; the map's print resolution note joined its
two halves with a dash.
2026-10-24 03:08:27 +00:00

89 lines
3.3 KiB
TypeScript

import type {
BookElement,
BookLineElement,
BookMapElement,
BookPhotoElement,
BookShapeElement,
BookStatsElement,
BookTextElement,
} from '@trek/shared';
import { photoLookOf } from '@trek/shared';
/**
* Which of the inspector's folded groups an element already uses.
*
* The groups people set once and rarely return to (the frame's numbers, the
* effects, a photo's duotone) start folded, so the panel opens on what is
* worth reading. A group the element already uses opens anyway: a turned
* sticker shows its angle, a text in small caps shows its case, a photo with
* a border shows its border. The panel remembers nothing between selections,
* so the answer is always read off the element itself.
*/
/**
* The position and size: open on an element that is turned or faded, and on
* a sticker, which people set at an angle as a matter of course.
*/
export function positionInUse(el: BookElement): boolean {
return el.kind === 'sticker' || el.rotation !== 0 || el.opacity < 1;
}
/** Case, the place of the lines in the frame and shrinking to fit: anything but upright lines at the top. */
export function textPlacementInUse(el: BookTextElement): boolean {
return (el.transform ?? 'none') !== 'none' || (el.vAlign ?? 'top') !== 'top' || el.fit === 'shrink';
}
/** An outline, a hard shadow, a marker band, a curve or a fill other than the colour. */
export function textEffectsInUse(el: BookTextElement): boolean {
return !!(el.outline || el.shadow || el.highlight || el.curve || el.fillPaint);
}
/** A shape's outline: drawn at a width, or set to dashes or dots. */
export function shapeOutlineInUse(el: BookShapeElement): boolean {
return (!!el.stroke && el.strokeWidth > 0) || el.strokeStyle !== 'solid';
}
/** A cut edge (zigzag, scallop, torn and the rest) on a shape or a photo. */
export function edgeInUse(edge: string | undefined): boolean {
return (edge ?? 'straight') !== 'straight';
}
/** A photo cut to a shape other than its own rectangle. */
export function maskInUse(el: BookPhotoElement): boolean {
return !!el.mask && el.mask !== 'rect';
}
/** A photo's border, hard shadow or die-cut outline. */
export function photoEdgesInUse(el: BookPhotoElement): boolean {
const look = photoLookOf(el);
return !!(look.border || look.shadow || look.cutout);
}
/** Something in the middle of a drawn line: a sun, a heart, a dot. */
export function ornamentInUse(el: BookLineElement): boolean {
return el.ornament !== 'none';
}
/** A map held at a zoom of its own rather than the one that fits its route. */
export function mapZoomInUse(el: BookMapElement): boolean {
return el.zoom != null;
}
/**
* A travel element set in another face, weight or size than it is placed in:
* the sans at 700, at the drawn size (shared/src/book/book-travel.ts). The five
* travel kinds share these three fields.
*/
export function travelTypeInUse(el: Pick<BookStatsElement, 'font' | 'weight' | 'textScale'>): boolean {
return el.font !== 'sans' || el.weight !== 700 || el.textScale !== 1;
}
/**
* The key the inspector mounts its groups under. A new selection mounts them
* afresh, so every group opens or folds for the element now selected rather
* than staying as it was left for the one before.
*/
export function selectionKey(ids: readonly string[]): string {
return ids.join('|');
}