mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-23 23:46:35 +00:00
feat(studio): photo look with border, hard shadow, zoom, mirror, adjustments, duotone and cutout
Photos get a look beyond crop, mask and frame style, in Studio and for the assistant alike: - border (width and colour, following the mask or the corner radius), a hard offset shadow and a die-cut cutout edge, all flat vector shapes in print - zoom 1 to 4 about the focal point and a left to right mirror - brightness, contrast, saturation and warmth, and a duotone; these are filters, labelled raster in print in the inspector - the print resolution of the selected photo in the inspector, with a warning under 200 dpi, measured from the original PhotoView moves out of SpreadView into its own file and uses per instance SVG ids, so a spread drawn twice keeps its clips and filters apart. The style operation takes the look, describe-spread lists it, the dpi and crop findings account for zoom and mirror, and a new raster_effect finding notes filters on a large photo. BOOK_SCHEMA_REV goes to 6.
This commit is contained in:
Maurice
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"src": {
|
||||
"@typescript-eslint/no-non-null-assertion": 403,
|
||||
"@typescript-eslint/no-non-null-assertion": 401,
|
||||
"@typescript-eslint/no-misused-promises": 850,
|
||||
"no-console": 88,
|
||||
"complexity": 226,
|
||||
|
||||
@@ -51,7 +51,8 @@
|
||||
"components/Studio/BookSheetsView.tsx": 3,
|
||||
"components/Studio/PageNumbers.tsx": 1,
|
||||
"components/Studio/PeerCursors.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 8,
|
||||
"components/Studio/PhotoView.tsx": 4,
|
||||
"components/Studio/SpreadView.tsx": 4,
|
||||
"components/Studio/StudioCanvas.tsx": 12,
|
||||
"components/Studio/StudioElementsPanel.tsx": 1,
|
||||
"components/Studio/StudioExport.tsx": 1,
|
||||
|
||||
@@ -100,7 +100,8 @@
|
||||
"components/Roadtrip/serviceMarker.ts": 1,
|
||||
"components/Settings/useAppearanceEditor.ts": 5,
|
||||
"components/Studio/BookSheetsView.tsx": 2,
|
||||
"components/Studio/SpreadView.tsx": 3,
|
||||
"components/Studio/PhotoView.tsx": 2,
|
||||
"components/Studio/SpreadView.tsx": 1,
|
||||
"components/Studio/StudioElementsPanel.tsx": 8,
|
||||
"components/Studio/StudioInspector.tsx": 1,
|
||||
"components/Studio/StudioShell.tsx": 2,
|
||||
|
||||
@@ -40,7 +40,8 @@
|
||||
"components/Settings/AppearanceSettingsTab.tsx": 1,
|
||||
"components/Settings/PasskeysSection.tsx": 1,
|
||||
"components/Studio/BookSheetsView.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 2,
|
||||
"components/Studio/PhotoView.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 1,
|
||||
"components/Studio/StudioElementsPanel.tsx": 2,
|
||||
"components/Studio/StudioSwatches.tsx": 1,
|
||||
"components/Studio/TravelElements.tsx": 6,
|
||||
|
||||
@@ -57,6 +57,7 @@ const FINDING_LOOK: Readonly<Record<BookFindingCode, { labelKey: string }>> = {
|
||||
font_mix: { labelKey: 'assistant.card.book.finding.font_mix' },
|
||||
palette_drift: { labelKey: 'assistant.card.book.finding.palette_drift' },
|
||||
repeat_layout: { labelKey: 'assistant.card.book.finding.repeat_layout' },
|
||||
raster_effect: { labelKey: 'assistant.card.book.finding.raster_effect' },
|
||||
};
|
||||
|
||||
/** A page as the Studio names it: the cover, the first page, double page 3. */
|
||||
|
||||
@@ -0,0 +1,430 @@
|
||||
import { photoLookOf, type BookFrame, type BookPhotoElement, type BookShapeId, type PhotoLook } from '@trek/shared';
|
||||
import type { CSSProperties, ReactNode } from 'react';
|
||||
|
||||
import { fontStack } from './bookFonts';
|
||||
import { photoSrc } from './bookRender';
|
||||
import { usePaintId } from './paint/usePaintId';
|
||||
import { pictureFilter, silhouetteShadows, svgFilterMatrices, zoomPlacement } from './photo/photoLook';
|
||||
import { HOLED_SHAPES, SHAPE_PATHS, scalePath, unitPath } from './shapes';
|
||||
|
||||
/**
|
||||
* A picture on the page: possibly cut to a shape, possibly sitting in
|
||||
* something, possibly wearing a look (book-photo-look.schema.ts in shared).
|
||||
*
|
||||
* Split out of SpreadView.tsx, which draws every kind and had no room left
|
||||
* for the look. It is still the one renderer: the editor, the page
|
||||
* thumbnails and the print path all draw a photo through this.
|
||||
*
|
||||
* The mask and the decoration are independent on purpose: a heart in a Polaroid
|
||||
* is a silly thing to want and there is no reason to stop anyone wanting it, and
|
||||
* keeping them separate means neither has to know about the other.
|
||||
*
|
||||
* ── The look, and how each part prints ───────────────────────────────────
|
||||
*
|
||||
* Border, hard shadow and cutout are flat shapes of one colour, so they stay
|
||||
* vector in the PDF. On a rectangular frame (no mask, or a card such as a
|
||||
* Polaroid around it) the cutout and the shadow are box shadows without blur,
|
||||
* which follow the corner radius; on a frame cut to a shape they are that
|
||||
* shape's path, drawn behind the picture. The border is drawn over the edge of
|
||||
* the picture, inside the frame, so the frame stays the box the fold and trim
|
||||
* checks measure. Zoom and mirror move the picture inside its clip and change
|
||||
* nothing around it. Adjustments, warmth and a duotone are filters and print
|
||||
* as a raster, which the inspector says.
|
||||
*
|
||||
* Every SVG id is per instance (usePaintId): the page view draws each spread twice,
|
||||
* and two clip paths with one id cut the second picture with the first one's
|
||||
* shape.
|
||||
*/
|
||||
|
||||
/** Two decimals of a millimetre, matching what the document itself stores. */
|
||||
const round2 = (n: number) => Math.round(n * 100) / 100;
|
||||
|
||||
const PHOTO_FILTERS: Record<string, string | undefined> = {
|
||||
none: undefined,
|
||||
bw: 'grayscale(1) contrast(1.05)',
|
||||
warm: 'saturate(1.1) sepia(0.16)',
|
||||
cool: 'saturate(1.05) hue-rotate(-8deg) brightness(1.02)',
|
||||
// Faded, the way a print left in the light goes: lifted blacks, less colour.
|
||||
fade: 'saturate(0.72) contrast(0.88) brightness(1.08)',
|
||||
contrast: 'contrast(1.22) saturate(1.06)',
|
||||
};
|
||||
|
||||
/**
|
||||
* How much of the frame the decoration around a picture eats, as a fraction of
|
||||
* the shorter side.
|
||||
*
|
||||
* A Polaroid's chin is the reason this is a table rather than one number: the
|
||||
* bottom border is roughly three times the others, and getting that ratio wrong
|
||||
* is the difference between a Polaroid and a photo with a white edge.
|
||||
*/
|
||||
const FRAME_INSET: Record<string, { pad: number; bottom: number }> = {
|
||||
none: { pad: 0, bottom: 0 },
|
||||
polaroid: { pad: 0.055, bottom: 0.17 },
|
||||
white: { pad: 0.035, bottom: 0.035 },
|
||||
shadow: { pad: 0, bottom: 0 },
|
||||
film: { pad: 0.075, bottom: 0.075 },
|
||||
tape: { pad: 0, bottom: 0 },
|
||||
};
|
||||
|
||||
/** The frame styles that draw a card around the picture, which makes the frame's outline a rectangle. */
|
||||
const CARDS = new Set(['polaroid', 'white', 'film']);
|
||||
|
||||
/** The cutout and the hard shadow of a frame cut to a shape: its path, grown and offset, behind the picture. */
|
||||
function ShapeSilhouette({ frame, mask, look }: { frame: BookFrame; mask: BookShapeId; look: PhotoLook }) {
|
||||
const { w, h } = frame;
|
||||
const d = scalePath(SHAPE_PATHS[mask], w, h);
|
||||
const rule = HOLED_SHAPES.has(mask) ? 'evenodd' : undefined;
|
||||
const grow = look.cutout?.width ?? 0;
|
||||
const path = (color: string, dx = 0, dy = 0) => (
|
||||
<path
|
||||
d={d}
|
||||
transform={dx || dy ? `translate(${dx} ${dy})` : undefined}
|
||||
fill={color}
|
||||
fillRule={rule}
|
||||
stroke={grow ? color : undefined}
|
||||
strokeWidth={grow ? grow * 2 : undefined}
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
);
|
||||
return (
|
||||
<svg
|
||||
aria-hidden
|
||||
width={`${w}mm`}
|
||||
height={`${h}mm`}
|
||||
viewBox={`0 0 ${w} ${h}`}
|
||||
style={{ position: 'absolute', inset: 0, overflow: 'visible', display: 'block' }}
|
||||
>
|
||||
{look.shadow && <g opacity={look.shadow.alpha}>{path(look.shadow.color, look.shadow.dx, look.shadow.dy)}</g>}
|
||||
{look.cutout && path(look.cutout.color)}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** The border: a band along the inside of the picture's edge, following its shape. */
|
||||
function BorderBand({
|
||||
mask,
|
||||
radius,
|
||||
look,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
mask: BookShapeId | null;
|
||||
radius: number;
|
||||
look: PhotoLook;
|
||||
width: number;
|
||||
height: number;
|
||||
}) {
|
||||
const border = look.border;
|
||||
if (!border || width <= 0 || height <= 0) return null;
|
||||
if (mask && mask !== 'rect') {
|
||||
// Stroked twice as wide as the band and cut by the picture's own clip, so
|
||||
// exactly the inner half shows and the band follows every curve.
|
||||
return (
|
||||
<svg
|
||||
aria-hidden
|
||||
viewBox={`0 0 ${width} ${height}`}
|
||||
preserveAspectRatio="none"
|
||||
style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}
|
||||
>
|
||||
<path
|
||||
d={scalePath(SHAPE_PATHS[mask], width, height)}
|
||||
fill="none"
|
||||
stroke={border.color}
|
||||
strokeWidth={border.width * 2}
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div
|
||||
aria-hidden
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
borderStyle: 'solid',
|
||||
borderWidth: `${border.width}mm`,
|
||||
borderColor: border.color,
|
||||
borderRadius: radius ? `${radius}mm` : undefined,
|
||||
boxSizing: 'border-box',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
/** The picture itself, zoomed about its focal point and mirrored where the look says so. */
|
||||
function Picture({
|
||||
el,
|
||||
photoId,
|
||||
look,
|
||||
big,
|
||||
print,
|
||||
filterId,
|
||||
}: {
|
||||
el: BookPhotoElement;
|
||||
photoId: number;
|
||||
look: PhotoLook;
|
||||
big: boolean;
|
||||
print: boolean;
|
||||
filterId: string | null;
|
||||
}) {
|
||||
const zoom = zoomPlacement(look.zoom, el.focalX, el.focalY);
|
||||
const img = (
|
||||
<img
|
||||
src={photoSrc(photoId, big)}
|
||||
alt=""
|
||||
draggable={false}
|
||||
// Lazy on the canvas, where a long book scrolls past; eager in print,
|
||||
// where every sheet is laid out at once and a picture the browser put
|
||||
// off is a picture missing from the PDF.
|
||||
loading={print ? 'eager' : 'lazy'}
|
||||
style={{
|
||||
width: zoom?.size ?? '100%',
|
||||
height: zoom?.size ?? '100%',
|
||||
transform: zoom?.transform,
|
||||
objectFit: el.fit,
|
||||
objectPosition: `${el.focalX * 100}% ${el.focalY * 100}%`,
|
||||
filter: pictureFilter(PHOTO_FILTERS[el.filter], look, filterId),
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
if (!look.flipX) return img;
|
||||
// The picture is mirrored inside a box the size of the frame, so the part
|
||||
// the crop shows stays the same part and the mask is not mirrored with it.
|
||||
return <div style={{ position: 'absolute', inset: 0, transform: 'scaleX(-1)' }}>{img}</div>;
|
||||
}
|
||||
|
||||
/** What an empty frame shows while editing: a hatch, and where there is room, the instruction. */
|
||||
function Hatch({ clipped, label, labelSize }: { clipped: boolean; label: ReactNode; labelSize: number }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
/*
|
||||
* Opaque, and that is the point.
|
||||
*
|
||||
* The hatch used to be laid over nothing, so an empty frame showed
|
||||
* whatever was behind it and every attempt to arrange a shape *under*
|
||||
* one looked like it had done nothing: the frame appeared to sit at the
|
||||
* bottom of the stack no matter where it was, right up until a
|
||||
* photograph landed in it and it suddenly covered things. A frame is a
|
||||
* promise that a picture goes here, and a picture is not see-through.
|
||||
*/
|
||||
background: 'repeating-linear-gradient(45deg, rgba(0,0,0,.055) 0 6px, rgba(0,0,0,.025) 6px 12px), #ffffff', // theme-lint-disable: paper, not app chrome
|
||||
// A dashed border would be cut in half lengthwise by the clip, so a
|
||||
// masked placeholder shows its shape through the hatch alone.
|
||||
border: clipped ? undefined : '1px dashed rgba(0,0,0,.16)',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2mm',
|
||||
}}
|
||||
>
|
||||
{label && (
|
||||
<span
|
||||
style={{
|
||||
fontFamily: fontStack('sans'),
|
||||
fontSize: `${labelSize}mm`,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.16em',
|
||||
lineHeight: 1.5,
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
color: 'rgba(0,0,0,.34)',
|
||||
whiteSpace: 'pre-line',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PhotoView({
|
||||
el,
|
||||
big,
|
||||
print,
|
||||
dropLabel,
|
||||
frameStyle,
|
||||
}: {
|
||||
el: BookPhotoElement;
|
||||
big: boolean;
|
||||
print: boolean;
|
||||
dropLabel: string;
|
||||
/** The positioned box every element sits in, from SpreadView. */
|
||||
frameStyle: CSSProperties;
|
||||
}) {
|
||||
const deco = FRAME_INSET[el.frameStyle] ?? FRAME_INSET.none;
|
||||
const side = Math.min(el.frame.w, el.frame.h);
|
||||
// Rounded to a hundredth of a millimetre, the same precision the document
|
||||
// stores. Without it a fraction of the frame lands in the CSS as
|
||||
// `10.200000000000001mm`, which is not wrong but is float noise in a
|
||||
// stylesheet that a person may well end up reading.
|
||||
const pad = round2(deco.pad * side);
|
||||
const bottom = round2(deco.bottom * side);
|
||||
const clipId = usePaintId(`c-${el.id}`);
|
||||
const filterRef = usePaintId(`f-${el.id}`);
|
||||
// The shape the picture is cut to; a rect mask is no mask at all.
|
||||
const mask = el.mask && el.mask !== 'rect' ? el.mask : null;
|
||||
const clipped = mask !== null;
|
||||
// An empty frame wears the frame style but none of the look: a border or a
|
||||
// shadow around a hatch would read as part of the picture to come.
|
||||
const empty = el.photoId == null;
|
||||
const look = photoLookOf(empty ? {} : el);
|
||||
const matrices = svgFilterMatrices(look);
|
||||
const filterId = matrices.length ? filterRef : null;
|
||||
const card = CARDS.has(el.frameStyle);
|
||||
|
||||
/*
|
||||
* An empty frame is a template's promise: it says where a picture goes before
|
||||
* anyone has chosen which, and it says it *in the frame it will wear*.
|
||||
*
|
||||
* This used to render on its own, ignoring frameStyle entirely, so a Polaroid
|
||||
* placeholder was an ordinary dashed rectangle until a photograph landed in
|
||||
* it and the chin appeared from nowhere. The two branches have been folded
|
||||
* together: the surround is drawn once, and only what goes inside it differs.
|
||||
*/
|
||||
|
||||
// In the printed book an unfilled frame is nothing at all: a hatch and an
|
||||
// instruction on a page someone paid to have bound would be a defect.
|
||||
if (empty && print) return null;
|
||||
|
||||
// The label is sized in millimetres so it scales with the zoom exactly as the
|
||||
// page does, and it steps aside on a frame too small to hold it.
|
||||
const labelSize = Math.max(2.4, Math.min(4.6, side * 0.085));
|
||||
const roomy = side - pad * 2 > 22 && el.frame.w - pad * 2 > 34;
|
||||
|
||||
// A photograph lying on a page, rather than printed into it. Soft and low: a
|
||||
// hard shadow reads as a UI card, not as paper. The look's own cutout and
|
||||
// hard shadow join it when the frame's outline is a rectangle.
|
||||
const soft = el.frameStyle === 'shadow' || el.frameStyle === 'polaroid' ? '0 1.2mm 3mm rgba(0,0,0,.22)' : null;
|
||||
const boxShadows = [
|
||||
...(clipped && !card ? [] : silhouetteShadows(look.shadow, look.cutout)),
|
||||
...(soft ? [soft] : []),
|
||||
];
|
||||
|
||||
const picture = (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${pad}mm`,
|
||||
top: `${pad}mm`,
|
||||
right: `${pad}mm`,
|
||||
bottom: `${bottom || pad}mm`,
|
||||
overflow: 'hidden',
|
||||
borderRadius: !clipped && el.radius ? `${el.radius}mm` : undefined,
|
||||
clipPath: clipped ? `url(#${clipId})` : undefined,
|
||||
}}
|
||||
>
|
||||
{el.photoId == null ? (
|
||||
<Hatch clipped={clipped} label={roomy && dropLabel} labelSize={labelSize} />
|
||||
) : (
|
||||
<Picture el={el} photoId={el.photoId} look={look} big={big} print={print} filterId={filterId} />
|
||||
)}
|
||||
{!empty && (
|
||||
<BorderBand
|
||||
mask={el.mask}
|
||||
radius={el.radius}
|
||||
look={look}
|
||||
width={el.frame.w - pad * 2}
|
||||
height={el.frame.h - pad - (bottom || pad)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...frameStyle,
|
||||
background:
|
||||
el.frameStyle === 'polaroid' || el.frameStyle === 'white'
|
||||
? '#ffffff'
|
||||
: el.frameStyle === 'film'
|
||||
? '#141414'
|
||||
: undefined,
|
||||
borderRadius: !card && !clipped && el.radius ? `${el.radius}mm` : undefined,
|
||||
boxShadow: boxShadows.length ? boxShadows.join(', ') : undefined,
|
||||
}}
|
||||
>
|
||||
{mask && !card && !empty && (look.shadow || look.cutout) && (
|
||||
<ShapeSilhouette frame={el.frame} mask={mask} look={look} />
|
||||
)}
|
||||
|
||||
{(mask || filterId) && (
|
||||
<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden>
|
||||
<defs>
|
||||
{mask && (
|
||||
<clipPath id={clipId} clipPathUnits="objectBoundingBox">
|
||||
<path d={unitPath(SHAPE_PATHS[mask])} />
|
||||
</clipPath>
|
||||
)}
|
||||
{filterId && (
|
||||
<filter id={filterId} colorInterpolationFilters="sRGB">
|
||||
{matrices.map((values, i) => (
|
||||
<feColorMatrix key={i} type="matrix" values={values} />
|
||||
))}
|
||||
</filter>
|
||||
)}
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
{picture}
|
||||
|
||||
{/* Sprocket holes. Drawn as a repeating gradient rather than as elements
|
||||
so the count follows the width instead of being fixed at a size that
|
||||
only looks right on one frame. */}
|
||||
{el.frameStyle === 'film' &&
|
||||
[0, 1].map((row) => (
|
||||
<div
|
||||
key={row}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${pad * 0.35}mm`,
|
||||
right: `${pad * 0.35}mm`,
|
||||
[row ? 'bottom' : 'top']: `${pad * 0.22}mm`,
|
||||
height: `${pad * 0.42}mm`,
|
||||
background:
|
||||
'repeating-linear-gradient(90deg,' +
|
||||
` #f4f4f4 0 ${pad * 0.5}mm, transparent ${pad * 0.5}mm ${pad * 1.1}mm)`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/*
|
||||
Two strips, one over each top corner, each centred *on* its corner so it
|
||||
overhangs the picture evenly on both sides, which is what a piece of
|
||||
tape does. Offsetting by a fraction of the strip instead left them
|
||||
sitting beside the corners rather than across them.
|
||||
*/}
|
||||
{el.frameStyle === 'tape' &&
|
||||
([-1, 1] as const).map((dir) => {
|
||||
const tapeW = side * 0.26;
|
||||
const tapeH = side * 0.075;
|
||||
return (
|
||||
<div
|
||||
key={dir}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
[dir < 0 ? 'left' : 'right']: `${round2(-tapeW / 2)}mm`,
|
||||
top: `${round2(-tapeH / 2)}mm`,
|
||||
width: `${round2(tapeW)}mm`,
|
||||
height: `${round2(tapeH)}mm`,
|
||||
background: 'rgba(236,228,206,.82)',
|
||||
boxShadow: '0 .3mm .6mm rgba(0,0,0,.12)',
|
||||
// Away from the corner on each side: anticlockwise on the left,
|
||||
// clockwise on the right, so the pair reads as symmetric.
|
||||
transform: `rotate(${dir * 45}deg)`,
|
||||
}}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
import type { CSSProperties } from 'react'
|
||||
import type {
|
||||
BookElement, BookIconElement, BookPageSetup, BookPhotoElement, BookShapeElement, BookSpread,
|
||||
BookElement, BookIconElement, BookPageSetup, BookShapeElement, BookSpread,
|
||||
} from '@trek/shared'
|
||||
import { photoSrc } from './bookRender'
|
||||
import { fontStack, nearestWeight } from './bookFonts'
|
||||
import { iconComponent } from './iconLibrary'
|
||||
import { HOLED_SHAPES, SHAPE_PATHS, scalePath, unitPath } from './shapes'
|
||||
import { PhotoView } from './PhotoView'
|
||||
import { HOLED_SHAPES, SHAPE_PATHS, scalePath } from './shapes'
|
||||
import { TravelElementView } from './TravelElements'
|
||||
import { PageNumbers } from './PageNumbers'
|
||||
import { PaintedShapeView } from './paint/PaintedShape'
|
||||
@@ -38,42 +38,12 @@ function frameStyle(el: BookElement): CSSProperties {
|
||||
}
|
||||
}
|
||||
|
||||
/** Two decimals of a millimetre, matching what the document itself stores. */
|
||||
const round2 = (n: number) => Math.round(n * 100) / 100
|
||||
|
||||
/** #rrggbb plus an alpha, for the fades a cover panel needs. */
|
||||
function hexToRgba(hex: string, alpha: number): string {
|
||||
const n = Number.parseInt(hex.slice(1), 16)
|
||||
return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`
|
||||
}
|
||||
|
||||
const FILTERS: Record<string, string | undefined> = {
|
||||
none: undefined,
|
||||
bw: 'grayscale(1) contrast(1.05)',
|
||||
warm: 'saturate(1.1) sepia(0.16)',
|
||||
cool: 'saturate(1.05) hue-rotate(-8deg) brightness(1.02)',
|
||||
// Faded, the way a print left in the light goes: lifted blacks, less colour.
|
||||
fade: 'saturate(0.72) contrast(0.88) brightness(1.08)',
|
||||
contrast: 'contrast(1.22) saturate(1.06)',
|
||||
}
|
||||
|
||||
/**
|
||||
* How much of the frame the decoration around a picture eats, as a fraction of
|
||||
* the shorter side.
|
||||
*
|
||||
* A Polaroid's chin is the reason this is a table rather than one number: the
|
||||
* bottom border is roughly three times the others, and getting that ratio wrong
|
||||
* is the difference between a Polaroid and a photo with a white edge.
|
||||
*/
|
||||
const FRAME_INSET: Record<string, { pad: number; bottom: number }> = {
|
||||
none: { pad: 0, bottom: 0 },
|
||||
polaroid: { pad: 0.055, bottom: 0.17 },
|
||||
white: { pad: 0.035, bottom: 0.035 },
|
||||
shadow: { pad: 0, bottom: 0 },
|
||||
film: { pad: 0.075, bottom: 0.075 },
|
||||
tape: { pad: 0, bottom: 0 },
|
||||
}
|
||||
|
||||
/**
|
||||
* A shape, drawn.
|
||||
*
|
||||
@@ -158,206 +128,6 @@ function ShapeView({ el }: { el: BookShapeElement }) {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A picture — possibly cut to a shape, possibly sitting in something.
|
||||
*
|
||||
* The mask and the decoration are independent on purpose: a heart in a Polaroid
|
||||
* is a silly thing to want and there is no reason to stop anyone wanting it, and
|
||||
* keeping them separate means neither has to know about the other.
|
||||
*/
|
||||
function PhotoView({ el, big, print, dropLabel }: {
|
||||
el: BookPhotoElement; big: boolean; print: boolean; dropLabel: string
|
||||
}) {
|
||||
const deco = FRAME_INSET[el.frameStyle] ?? FRAME_INSET.none
|
||||
const side = Math.min(el.frame.w, el.frame.h)
|
||||
// Rounded to a hundredth of a millimetre — the same precision the document
|
||||
// stores. Without it a fraction of the frame lands in the CSS as
|
||||
// `10.200000000000001mm`, which is not wrong but is float noise in a
|
||||
// stylesheet that a person may well end up reading.
|
||||
const pad = round2(deco.pad * side)
|
||||
const bottom = round2(deco.bottom * side)
|
||||
const clipId = usePaintId(`c-${el.id}`)
|
||||
const clipped = el.mask && el.mask !== 'rect'
|
||||
|
||||
/*
|
||||
* An empty frame is a template's promise: it says where a picture goes before
|
||||
* anyone has chosen which — and it says it *in the frame it will wear*.
|
||||
*
|
||||
* This used to render on its own, ignoring frameStyle entirely, so a Polaroid
|
||||
* placeholder was an ordinary dashed rectangle until a photograph landed in
|
||||
* it and the chin appeared from nowhere. The two branches have been folded
|
||||
* together: the surround is drawn once, and only what goes inside it differs.
|
||||
*/
|
||||
const empty = el.photoId == null
|
||||
|
||||
// In the printed book an unfilled frame is nothing at all — a hatch and an
|
||||
// instruction on a page someone paid to have bound would be a defect.
|
||||
if (empty && print) return null
|
||||
|
||||
// The label is sized in millimetres so it scales with the zoom exactly as the
|
||||
// page does, and it steps aside on a frame too small to hold it.
|
||||
const labelSize = Math.max(2.4, Math.min(4.6, side * 0.085))
|
||||
const roomy = side - pad * 2 > 22 && el.frame.w - pad * 2 > 34
|
||||
|
||||
const hatch = (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
/*
|
||||
* Opaque, and that is the point.
|
||||
*
|
||||
* The hatch used to be laid over nothing, so an empty frame showed
|
||||
* whatever was behind it and every attempt to arrange a shape *under*
|
||||
* one looked like it had done nothing: the frame appeared to sit at the
|
||||
* bottom of the stack no matter where it was, right up until a
|
||||
* photograph landed in it and it suddenly covered things. A frame is a
|
||||
* promise that a picture goes here, and a picture is not see-through.
|
||||
*/
|
||||
background:
|
||||
'repeating-linear-gradient(45deg, rgba(0,0,0,.055) 0 6px, rgba(0,0,0,.025) 6px 12px), #ffffff', // theme-lint-disable — paper, not app chrome
|
||||
// A dashed border would be cut in half lengthwise by the clip, so a
|
||||
// masked placeholder shows its shape through the hatch alone.
|
||||
border: clipped ? undefined : '1px dashed rgba(0,0,0,.16)',
|
||||
boxSizing: 'border-box',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '2mm',
|
||||
}}
|
||||
>
|
||||
{roomy && dropLabel && (
|
||||
<span
|
||||
style={{
|
||||
fontFamily: fontStack('sans'),
|
||||
fontSize: `${labelSize}mm`,
|
||||
fontWeight: 600,
|
||||
letterSpacing: '0.16em',
|
||||
lineHeight: 1.5,
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
color: 'rgba(0,0,0,.34)',
|
||||
whiteSpace: 'pre-line',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
{dropLabel}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
const picture = (
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${pad}mm`,
|
||||
top: `${pad}mm`,
|
||||
right: `${pad}mm`,
|
||||
bottom: `${bottom || pad}mm`,
|
||||
overflow: 'hidden',
|
||||
borderRadius: !clipped && el.radius ? `${el.radius}mm` : undefined,
|
||||
clipPath: clipped ? `url(#${clipId})` : undefined,
|
||||
}}
|
||||
>
|
||||
{empty ? hatch : (
|
||||
<img
|
||||
src={photoSrc(el.photoId!, big)}
|
||||
alt=""
|
||||
draggable={false}
|
||||
// Lazy on the canvas, where a long book scrolls past; eager in print,
|
||||
// where every sheet is laid out at once and a picture the browser put
|
||||
// off is a picture missing from the PDF.
|
||||
loading={print ? 'eager' : 'lazy'}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: el.fit,
|
||||
objectPosition: `${el.focalX * 100}% ${el.focalY * 100}%`,
|
||||
filter: FILTERS[el.filter],
|
||||
display: 'block',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
...frameStyle(el),
|
||||
background: el.frameStyle === 'polaroid' || el.frameStyle === 'white' ? '#ffffff'
|
||||
: el.frameStyle === 'film' ? '#141414'
|
||||
: undefined,
|
||||
// A photograph lying on a page, rather than printed into it. Soft and
|
||||
// low: a hard shadow reads as a UI card, not as paper.
|
||||
boxShadow: el.frameStyle === 'shadow' || el.frameStyle === 'polaroid'
|
||||
? '0 1.2mm 3mm rgba(0,0,0,.22)'
|
||||
: undefined,
|
||||
}}
|
||||
>
|
||||
{clipped && (
|
||||
<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden>
|
||||
<defs>
|
||||
<clipPath id={clipId} clipPathUnits="objectBoundingBox">
|
||||
<path d={unitPath(SHAPE_PATHS[el.mask!])} />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
{picture}
|
||||
|
||||
{/* Sprocket holes. Drawn as a repeating gradient rather than as elements
|
||||
so the count follows the width instead of being fixed at a size that
|
||||
only looks right on one frame. */}
|
||||
{el.frameStyle === 'film' && [0, 1].map(row => (
|
||||
<div
|
||||
key={row}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${pad * 0.35}mm`,
|
||||
right: `${pad * 0.35}mm`,
|
||||
[row ? 'bottom' : 'top']: `${pad * 0.22}mm`,
|
||||
height: `${pad * 0.42}mm`,
|
||||
background: 'repeating-linear-gradient(90deg,'
|
||||
+ ` #f4f4f4 0 ${pad * 0.5}mm, transparent ${pad * 0.5}mm ${pad * 1.1}mm)`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
|
||||
{/* Two strips of tape, held at an angle across opposite corners. */}
|
||||
{/*
|
||||
Two strips, one over each top corner, each centred *on* its corner so it
|
||||
overhangs the picture evenly on both sides — which is what a piece of
|
||||
tape does. Offsetting by a fraction of the strip instead left them
|
||||
sitting beside the corners rather than across them.
|
||||
*/}
|
||||
{el.frameStyle === 'tape' && ([-1, 1] as const).map(dir => {
|
||||
const tapeW = side * 0.26
|
||||
const tapeH = side * 0.075
|
||||
return (
|
||||
<div
|
||||
key={dir}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
[dir < 0 ? 'left' : 'right']: `${round2(-tapeW / 2)}mm`,
|
||||
top: `${round2(-tapeH / 2)}mm`,
|
||||
width: `${round2(tapeW)}mm`,
|
||||
height: `${round2(tapeH)}mm`,
|
||||
background: 'rgba(236,228,206,.82)',
|
||||
boxShadow: '0 .3mm .6mm rgba(0,0,0,.12)',
|
||||
// Away from the corner on each side: anticlockwise on the left,
|
||||
// clockwise on the right, so the pair reads as symmetric.
|
||||
transform: `rotate(${dir * 45}deg)`,
|
||||
}}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A lucide drawing, at the size the frame gives it.
|
||||
*
|
||||
@@ -394,9 +164,9 @@ export function ElementView({
|
||||
// A photo left out is drawn as its empty frame, kept even in print, so the
|
||||
// page still shows where a picture sits without showing the picture.
|
||||
if (el.photoId != null && hiddenPhotoIds?.has(el.photoId)) {
|
||||
return <PhotoView el={{ ...el, photoId: null }} big={big} print={false} dropLabel="" />
|
||||
return <PhotoView el={{ ...el, photoId: null }} big={big} print={false} dropLabel="" frameStyle={frameStyle(el)} />
|
||||
}
|
||||
return <PhotoView el={el} big={big} print={print} dropLabel={dropLabel} />
|
||||
return <PhotoView el={el} big={big} print={print} dropLabel={dropLabel} frameStyle={frameStyle(el)} />
|
||||
}
|
||||
|
||||
if (el.kind === 'shape') {
|
||||
|
||||
@@ -19,6 +19,7 @@ import { Choice, Line, NumField, Section, Switch } from './StudioControls'
|
||||
import { StudioFontPicker } from './StudioFontPicker'
|
||||
import { WeightLine } from './StudioTypeControls'
|
||||
import { italicTitle } from './fontPicker'
|
||||
import { PhotoCropExtras, PhotoLookSections } from './photo/StudioPhotoLook'
|
||||
import type { JourneySource } from './StudioSidebar'
|
||||
import { Tooltip } from '../shared/Tooltip'
|
||||
import { StudioArrangeSection } from './StudioArrangeSection'
|
||||
@@ -421,6 +422,7 @@ export function StudioInspector({
|
||||
) : (
|
||||
<p className="st-hint" style={{ paddingTop: 8 }}>{t('journey.studio.emptyFrame')}</p>
|
||||
)}
|
||||
<PhotoCropExtras el={el} set={set} live={live} t={t} />
|
||||
</Section>
|
||||
|
||||
<Section label={t('journey.studio.look')}>
|
||||
@@ -467,6 +469,8 @@ export function StudioInspector({
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<PhotoLookSections el={el} set={set} live={live} t={t} />
|
||||
|
||||
<Section label={t('journey.studio.mask')} defaultOpen={false}>
|
||||
<div className="st-mini-shapes">
|
||||
<button type="button"
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
import { PHOTO_DUOTONES, PHOTO_LOOK_STARTS, bookPhotoElementSchema, type BookPhotoElement } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { fireEvent, render, screen } from '../../../../tests/helpers/render';
|
||||
import { PhotoCropExtras, PhotoLookSections } from './StudioPhotoLook';
|
||||
|
||||
/**
|
||||
* The inspector rows of the photo look: what each control writes, that a part
|
||||
* turned off is left out of the document, and the print resolution beside
|
||||
* the crop with its warning.
|
||||
*/
|
||||
|
||||
const pixels = vi.hoisted(() => ({ value: null as { width: number; height: number } | null }));
|
||||
vi.mock('./usePhotoPixels', () => ({ usePhotoPixels: () => pixels.value }));
|
||||
|
||||
const t = (k: string, params?: Record<string, string | number>) =>
|
||||
params ? `${k} ${Object.values(params).join(' ')}` : k;
|
||||
|
||||
const photo = (over: Record<string, unknown> = {}): BookPhotoElement =>
|
||||
bookPhotoElementSchema.parse({ id: 'p1', kind: 'photo', frame: { x: 0, y: 0, w: 80, h: 60 }, photoId: 7, ...over });
|
||||
|
||||
function mount(ui: 'crop' | 'look', el: BookPhotoElement) {
|
||||
const set = vi.fn();
|
||||
const live = vi.fn();
|
||||
const View = ui === 'crop' ? PhotoCropExtras : PhotoLookSections;
|
||||
render(<View el={el} set={set} live={live} t={t} />);
|
||||
return { set, live };
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
pixels.value = null;
|
||||
});
|
||||
|
||||
describe('beside the crop', () => {
|
||||
it('FE-STUDIO-LOOKUI-001: zooms live while dragging and commits once, and goes back to no zoom at 100%', () => {
|
||||
const { set, live } = mount('crop', photo());
|
||||
const slider = screen.getByRole('slider');
|
||||
fireEvent.change(slider, { target: { value: '1.5' } });
|
||||
expect(live).toHaveBeenCalledWith({ zoom: 1.5 });
|
||||
expect(set).not.toHaveBeenCalled();
|
||||
fireEvent.pointerUp(slider);
|
||||
expect(set).toHaveBeenCalledWith({ zoom: 1.5 });
|
||||
fireEvent.change(slider, { target: { value: '1' } });
|
||||
fireEvent.blur(slider);
|
||||
expect(set).toHaveBeenLastCalledWith({ zoom: undefined });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-002: mirrors the picture and takes the mirror away again', () => {
|
||||
const plain = mount('crop', photo());
|
||||
fireEvent.click(screen.getByRole('button', { name: /journey.studio.photo.flip/ }));
|
||||
expect(plain.set).toHaveBeenCalledWith({ flipX: true });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-003: takes a mirrored picture back to as shot', () => {
|
||||
const mirrored = mount('crop', photo({ flipX: true }));
|
||||
const button = screen.getByRole('button', { name: /journey.studio.photo.flip/ });
|
||||
expect(button.getAttribute('aria-pressed')).toBe('true');
|
||||
fireEvent.click(button);
|
||||
expect(mirrored.set).toHaveBeenCalledWith({ flipX: undefined });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-004: shows the print resolution once the original is measured, and warns under 200 dpi', () => {
|
||||
pixels.value = { width: 4000, height: 3000 };
|
||||
mount('crop', photo());
|
||||
expect(screen.getByText('journey.studio.photo.dpi 1270')).toBeTruthy();
|
||||
expect(screen.queryByText(/journey.studio.photo.dpiLow/)).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-005: warns when the zoomed picture prints soft', () => {
|
||||
pixels.value = { width: 800, height: 600 };
|
||||
mount('crop', photo({ zoom: 2 }));
|
||||
expect(screen.getByText('journey.studio.photo.dpi 127')).toBeTruthy();
|
||||
expect(screen.getByText('journey.studio.photo.dpiLow 200')).toBeTruthy();
|
||||
expect(screen.getByRole('status').className).toContain('is-low');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-006: shows nothing for an empty frame', () => {
|
||||
pixels.value = { width: 4000, height: 3000 };
|
||||
mount('crop', photo({ photoId: null }));
|
||||
expect(screen.queryByRole('slider')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the look sections', () => {
|
||||
it('FE-STUDIO-LOOKUI-007: turns a border on with the print border and off by leaving it out', () => {
|
||||
const off = mount('look', photo());
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.edges' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.border', pressed: false }));
|
||||
expect(off.set).toHaveBeenCalledWith({ border: { ...PHOTO_LOOK_STARTS.border } });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-008: edits a border that is on, and removes it', () => {
|
||||
const { set } = mount('look', photo({ border: { width: 4, color: '#ffffff' } }));
|
||||
const width = screen.getByRole('spinbutton', { name: /journey.studio.photo.width/ });
|
||||
fireEvent.change(width, { target: { value: '6' } });
|
||||
fireEvent.blur(width);
|
||||
expect(set).toHaveBeenCalledWith({ border: { width: 6, color: '#ffffff' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: '#c2410c' }));
|
||||
expect(set).toHaveBeenCalledWith({ border: { width: 4, color: '#c2410c' } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.border', pressed: true }));
|
||||
expect(set).toHaveBeenLastCalledWith({ border: undefined });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-009: sets how far a hard shadow falls and how strong it is', () => {
|
||||
const shadow = { dx: 2, dy: 2, color: '#1a1a1a', alpha: 0.35 };
|
||||
const { set, live } = mount('look', photo({ shadow }));
|
||||
const across = screen.getByRole('spinbutton', { name: /journey.studio.photo.dx/ });
|
||||
fireEvent.change(across, { target: { value: '-3' } });
|
||||
fireEvent.blur(across);
|
||||
expect(set).toHaveBeenCalledWith({ shadow: { ...shadow, dx: -3 } });
|
||||
const strength = screen.getByRole('slider', { name: /journey.studio.opacity/ });
|
||||
fireEvent.change(strength, { target: { value: '0.6' } });
|
||||
expect(live).toHaveBeenCalledWith({ shadow: { ...shadow, alpha: 0.6 } });
|
||||
fireEvent.keyUp(strength);
|
||||
expect(set).toHaveBeenLastCalledWith({ shadow: { ...shadow, alpha: 0.6 } });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-010: turns the shadow and the cutout on from their starting values', () => {
|
||||
const { set } = mount('look', photo());
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.edges' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.shadow', pressed: false }));
|
||||
expect(set).toHaveBeenCalledWith({ shadow: { ...PHOTO_LOOK_STARTS.shadow } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.cutout', pressed: false }));
|
||||
expect(set).toHaveBeenCalledWith({ cutout: { ...PHOTO_LOOK_STARTS.cutout } });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-011: adjusts one value at a time, says it prints as a raster, and resets', () => {
|
||||
const { set } = mount('look', photo({ adjust: { contrast: 0.2 } }));
|
||||
expect(screen.getAllByText('journey.studio.photo.rasterHint').length).toBeGreaterThan(0);
|
||||
const brightness = screen.getByRole('slider', { name: /journey.studio.photo.brightness/ });
|
||||
fireEvent.change(brightness, { target: { value: '0.3' } });
|
||||
fireEvent.pointerUp(brightness);
|
||||
expect(set).toHaveBeenCalledWith({ adjust: { brightness: 0.3, contrast: 0.2, saturation: 0, warmth: 0 } });
|
||||
const contrast = screen.getByRole('slider', { name: /journey.studio.photo.contrast/ });
|
||||
fireEvent.change(contrast, { target: { value: '0' } });
|
||||
fireEvent.pointerUp(contrast);
|
||||
expect(set).toHaveBeenLastCalledWith({ adjust: undefined });
|
||||
fireEvent.click(screen.getByRole('button', { name: /journey.studio.photo.reset/ }));
|
||||
expect(set).toHaveBeenLastCalledWith({ adjust: undefined });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-012: picks a ready duotone pair and the inks by hand', () => {
|
||||
const { set } = mount('look', photo({ duotone: { ...PHOTO_DUOTONES[0] } }));
|
||||
const pairs = screen.getAllByRole('radio');
|
||||
expect(pairs).toHaveLength(PHOTO_DUOTONES.length);
|
||||
expect(pairs[0]?.getAttribute('aria-checked')).toBe('true');
|
||||
fireEvent.click(pairs[2] as HTMLElement);
|
||||
expect(set).toHaveBeenCalledWith({ duotone: { ...PHOTO_DUOTONES[2] } });
|
||||
fireEvent.click(screen.getAllByRole('button', { name: '#9f1239' })[0] as HTMLElement);
|
||||
expect(set).toHaveBeenLastCalledWith({ duotone: { ...PHOTO_DUOTONES[0], dark: '#9f1239' } });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKUI-013: turns the duotone on and off', () => {
|
||||
const { set } = mount('look', photo());
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.duotone', expanded: false }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.duotone', pressed: false }));
|
||||
expect(set).toHaveBeenCalledWith({ duotone: { ...PHOTO_LOOK_STARTS.duotone } });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,292 @@
|
||||
import {
|
||||
MIN_PRINT_DPI,
|
||||
PHOTO_ADJUSTMENTS,
|
||||
PHOTO_DUOTONES,
|
||||
PHOTO_EDGE_MAX,
|
||||
PHOTO_LOOK_STARTS,
|
||||
PHOTO_SHADOW_REACH,
|
||||
PHOTO_ZOOM,
|
||||
photoDpi,
|
||||
photoLookOf,
|
||||
type BookPhotoAdjust,
|
||||
type BookPhotoEdge,
|
||||
type BookPhotoElement,
|
||||
type PhotoAdjustment,
|
||||
} from '@trek/shared';
|
||||
import { FlipHorizontal2, Printer, RotateCcw, TriangleAlert } from 'lucide-react';
|
||||
|
||||
import '../../../styles/studio-photo.css';
|
||||
import { Line, NumField, Section, Switch } from '../StudioControls';
|
||||
import { Swatches } from '../StudioSwatches';
|
||||
import { StudioSlider } from './StudioSlider';
|
||||
import { usePhotoPixels } from './usePhotoPixels';
|
||||
|
||||
/**
|
||||
* The inspector rows of the photo look (book-photo-look.schema.ts in shared):
|
||||
* zoom, mirror and the print resolution beside the crop, then the border, the
|
||||
* hard shadow and the cutout, the adjustments and the duotone.
|
||||
*
|
||||
* Its own file so the inspector carries two hooks for it and nothing else;
|
||||
* every other Studio package edits that panel too.
|
||||
*
|
||||
* A part that is off is left out of the document (undefined), never stored as
|
||||
* a neutral value, so a photo nobody restyled stays exactly what it was.
|
||||
*/
|
||||
|
||||
type Patch = Partial<BookPhotoElement>;
|
||||
type T = (k: string, params?: Record<string, string | number>) => string;
|
||||
|
||||
interface RowProps {
|
||||
el: BookPhotoElement;
|
||||
/** One undo step. */
|
||||
set: (patch: Patch) => void;
|
||||
/** While a slider moves: the page follows, nothing is committed. */
|
||||
live: (patch: Patch) => void;
|
||||
t: T;
|
||||
}
|
||||
|
||||
const percent = (v: number) => `${Math.round(v * 100)}%`;
|
||||
const signed = (v: number) => {
|
||||
const n = Math.round(v * 100);
|
||||
return n > 0 ? `+${n}` : String(n);
|
||||
};
|
||||
|
||||
/** What prints when the photo leaves the printer: about this many dots per inch, and a warning under the threshold. */
|
||||
function PrintResolution({ el, t }: { el: BookPhotoElement; t: T }) {
|
||||
const pixels = usePhotoPixels(el.photoId);
|
||||
if (el.photoId == null || !pixels) return null;
|
||||
const dpi = photoDpi(el, { photoId: el.photoId, ...pixels });
|
||||
if (dpi === null) return null;
|
||||
const low = dpi < MIN_PRINT_DPI;
|
||||
return (
|
||||
<div className={`st-photo-dpi ${low ? 'is-low' : ''}`} role="status">
|
||||
{low ? <TriangleAlert size={14} aria-hidden /> : <Printer size={14} aria-hidden />}
|
||||
<div>
|
||||
<p className="st-photo-dpi-value">{t('journey.studio.photo.dpi', { dpi })}</p>
|
||||
{low && <p className="st-photo-dpi-hint">{t('journey.studio.photo.dpiLow', { min: MIN_PRINT_DPI })}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Beside the crop: how far the picture is zoomed about its focal point, whether it is mirrored, and how it prints. */
|
||||
export function PhotoCropExtras({ el, set, live, t }: RowProps) {
|
||||
// An empty frame has no picture to zoom, mirror or print.
|
||||
if (el.photoId == null) return null;
|
||||
const look = photoLookOf(el);
|
||||
const zoomOf = (v: number) => (v > PHOTO_ZOOM.min ? Math.round(v * 100) / 100 : undefined);
|
||||
return (
|
||||
<div className="st-photo-crop">
|
||||
<StudioSlider
|
||||
label={t('journey.studio.photo.zoom')}
|
||||
value={look.zoom}
|
||||
min={PHOTO_ZOOM.min}
|
||||
max={PHOTO_ZOOM.max}
|
||||
step={0.05}
|
||||
format={percent}
|
||||
onLive={(v) => live({ zoom: zoomOf(v) })}
|
||||
onCommit={(v) => set({ zoom: zoomOf(v) })}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className={`st-chip ${look.flipX ? 'is-on' : ''}`}
|
||||
aria-pressed={look.flipX}
|
||||
onClick={() => set({ flipX: look.flipX ? undefined : true })}
|
||||
>
|
||||
<FlipHorizontal2 size={13} aria-hidden />
|
||||
{t('journey.studio.photo.flip')}
|
||||
</button>
|
||||
<PrintResolution el={el} t={t} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A border or a cutout: on or off, how deep, what colour. */
|
||||
function EdgeRow({
|
||||
label,
|
||||
value,
|
||||
start,
|
||||
onSet,
|
||||
t,
|
||||
}: {
|
||||
label: string;
|
||||
value: BookPhotoEdge | null;
|
||||
start: BookPhotoEdge;
|
||||
onSet: (edge: BookPhotoEdge | undefined) => void;
|
||||
t: T;
|
||||
}) {
|
||||
return (
|
||||
<div className="st-photo-part">
|
||||
<Switch label={label} on={!!value} onToggle={() => onSet(value ? undefined : { ...start })} />
|
||||
{value && (
|
||||
<div className="st-photo-part-body">
|
||||
<NumField
|
||||
label={t('journey.studio.photo.width')}
|
||||
value={value.width}
|
||||
min={0.1}
|
||||
max={PHOTO_EDGE_MAX}
|
||||
step={0.5}
|
||||
unit="mm"
|
||||
onChange={(width) => onSet({ ...value, width })}
|
||||
/>
|
||||
<Line label={t('journey.studio.colour')} wide>
|
||||
<Swatches value={value.color} onPick={(color) => onSet({ ...value, color })} />
|
||||
</Line>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The hard shadow: on or off, how far it falls, how strong, what colour. */
|
||||
function ShadowRow({ el, set, live, t }: RowProps) {
|
||||
const shadow = photoLookOf(el).shadow;
|
||||
return (
|
||||
<div className="st-photo-part">
|
||||
<Switch
|
||||
label={t('journey.studio.photo.shadow')}
|
||||
on={!!shadow}
|
||||
onToggle={() => set({ shadow: shadow ? undefined : { ...PHOTO_LOOK_STARTS.shadow } })}
|
||||
/>
|
||||
{shadow && (
|
||||
<div className="st-photo-part-body">
|
||||
<div className="st-grid2">
|
||||
{(['dx', 'dy'] as const).map((axis) => (
|
||||
<NumField
|
||||
key={axis}
|
||||
label={t(`journey.studio.photo.${axis}`)}
|
||||
value={shadow[axis]}
|
||||
min={-PHOTO_SHADOW_REACH}
|
||||
max={PHOTO_SHADOW_REACH}
|
||||
step={0.5}
|
||||
unit="mm"
|
||||
onChange={(v) => set({ shadow: { ...shadow, [axis]: v } })}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<StudioSlider
|
||||
label={t('journey.studio.opacity')}
|
||||
value={shadow.alpha}
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.05}
|
||||
format={percent}
|
||||
onLive={(alpha) => live({ shadow: { ...shadow, alpha } })}
|
||||
onCommit={(alpha) => set({ shadow: { ...shadow, alpha } })}
|
||||
/>
|
||||
<Line label={t('journey.studio.colour')} wide>
|
||||
<Swatches value={shadow.color} onPick={(color) => set({ shadow: { ...shadow, color } })} />
|
||||
</Line>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** Brightness, contrast, saturation and warmth, each from -100 to +100, and one press back to the picture as shot. */
|
||||
function AdjustRows({ el, set, live, t }: RowProps) {
|
||||
const adjust = photoLookOf(el).adjust;
|
||||
const next = (key: PhotoAdjustment, v: number): BookPhotoAdjust | undefined => {
|
||||
const all = { ...(adjust ?? {}), [key]: Math.round(v * 100) / 100 };
|
||||
return PHOTO_ADJUSTMENTS.some((k) => all[k]) ? all : undefined;
|
||||
};
|
||||
return (
|
||||
<>
|
||||
{PHOTO_ADJUSTMENTS.map((key) => (
|
||||
<StudioSlider
|
||||
key={key}
|
||||
label={t(`journey.studio.photo.${key}`)}
|
||||
value={adjust?.[key] ?? 0}
|
||||
min={-1}
|
||||
max={1}
|
||||
step={0.05}
|
||||
format={signed}
|
||||
onLive={(v) => live({ adjust: next(key, v) })}
|
||||
onCommit={(v) => set({ adjust: next(key, v) })}
|
||||
/>
|
||||
))}
|
||||
{adjust && (
|
||||
<button type="button" className="st-chip st-photo-reset" onClick={() => set({ adjust: undefined })}>
|
||||
<RotateCcw size={13} aria-hidden />
|
||||
{t('journey.studio.photo.reset')}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** The duotone: on or off, one of the ready pairs, or the two inks picked by hand. */
|
||||
function DuotoneRows({ el, set, t }: Omit<RowProps, 'live'>) {
|
||||
const duotone = photoLookOf(el).duotone;
|
||||
return (
|
||||
<>
|
||||
<Switch
|
||||
label={t('journey.studio.photo.duotone')}
|
||||
on={!!duotone}
|
||||
onToggle={() => set({ duotone: duotone ? undefined : { ...PHOTO_LOOK_STARTS.duotone } })}
|
||||
/>
|
||||
{duotone && (
|
||||
<div className="st-photo-part-body">
|
||||
<div className="st-photo-duos" role="radiogroup" aria-label={t('journey.studio.photo.duotone')}>
|
||||
{PHOTO_DUOTONES.map((pair) => {
|
||||
const on = pair.dark === duotone.dark && pair.light === duotone.light;
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
key={`${pair.dark}${pair.light}`}
|
||||
role="radio"
|
||||
aria-checked={on}
|
||||
aria-label={`${pair.dark} ${pair.light}`}
|
||||
className={`st-photo-duo ${on ? 'is-on' : ''}`}
|
||||
// A swatch shows the two inks themselves, half and half.
|
||||
style={{ backgroundImage: `linear-gradient(135deg, ${pair.dark} 50%, ${pair.light} 50%)` }}
|
||||
onClick={() => set({ duotone: { ...pair } })}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Line label={t('journey.studio.photo.duotoneDark')} wide>
|
||||
<Swatches value={duotone.dark} onPick={(dark) => set({ duotone: { ...duotone, dark } })} />
|
||||
</Line>
|
||||
<Line label={t('journey.studio.photo.duotoneLight')} wide>
|
||||
<Swatches value={duotone.light} onPick={(light) => set({ duotone: { ...duotone, light } })} />
|
||||
</Line>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** The look's own sections, after the inspector's Look section. */
|
||||
export function PhotoLookSections(props: RowProps) {
|
||||
const { el, set, t } = props;
|
||||
const look = photoLookOf(el);
|
||||
const raster = t('journey.studio.photo.rasterHint');
|
||||
return (
|
||||
<>
|
||||
<Section label={t('journey.studio.photo.edges')} defaultOpen={!!(look.border || look.shadow || look.cutout)}>
|
||||
<EdgeRow
|
||||
label={t('journey.studio.photo.border')}
|
||||
value={look.border}
|
||||
start={PHOTO_LOOK_STARTS.border}
|
||||
onSet={(border) => set({ border })}
|
||||
t={t}
|
||||
/>
|
||||
<ShadowRow {...props} />
|
||||
<EdgeRow
|
||||
label={t('journey.studio.photo.cutout')}
|
||||
value={look.cutout}
|
||||
start={PHOTO_LOOK_STARTS.cutout}
|
||||
onSet={(cutout) => set({ cutout })}
|
||||
t={t}
|
||||
/>
|
||||
</Section>
|
||||
<Section label={t('journey.studio.photo.adjust')} hint={raster} defaultOpen={!!look.adjust}>
|
||||
<AdjustRows {...props} />
|
||||
</Section>
|
||||
<Section label={t('journey.studio.photo.duotone')} hint={raster} defaultOpen={!!look.duotone}>
|
||||
<DuotoneRows el={el} set={set} t={t} />
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
/**
|
||||
* A number set by dragging, for the values a person judges by eye: a zoom, a
|
||||
* brightness, a shadow's strength.
|
||||
*
|
||||
* The page follows the thumb while it moves (`onLive`, no undo step), and the
|
||||
* value is committed once, when the thumb is let go or the keys are released
|
||||
* (`onCommit`, one undo step), the way the focal point pad works.
|
||||
*/
|
||||
export function StudioSlider({
|
||||
label,
|
||||
value,
|
||||
min,
|
||||
max,
|
||||
step,
|
||||
format,
|
||||
onLive,
|
||||
onCommit,
|
||||
}: {
|
||||
label: string;
|
||||
value: number;
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
/** What the value reads as beside the track. */
|
||||
format: (v: number) => string;
|
||||
onLive: (v: number) => void;
|
||||
onCommit: (v: number) => void;
|
||||
}) {
|
||||
const [draft, setDraft] = useState<number | null>(null);
|
||||
const shown = draft ?? value;
|
||||
const end = () => {
|
||||
if (draft === null) return;
|
||||
setDraft(null);
|
||||
onCommit(draft);
|
||||
};
|
||||
|
||||
return (
|
||||
<label className="st-slider">
|
||||
<span className="st-slider-label">{label}</span>
|
||||
<input
|
||||
type="range"
|
||||
min={min}
|
||||
max={max}
|
||||
step={step}
|
||||
value={shown}
|
||||
aria-valuetext={format(shown)}
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
setDraft(v);
|
||||
onLive(v);
|
||||
}}
|
||||
onPointerUp={end}
|
||||
onKeyUp={end}
|
||||
onBlur={end}
|
||||
/>
|
||||
<output className="st-slider-value">{format(shown)}</output>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { photoLookOf, type PhotoLook } from '@trek/shared';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import {
|
||||
adjustFilter,
|
||||
duotoneMatrix,
|
||||
pictureFilter,
|
||||
rgba,
|
||||
silhouetteShadows,
|
||||
svgFilterMatrices,
|
||||
warmthMatrix,
|
||||
zoomPlacement,
|
||||
} from './photoLook';
|
||||
|
||||
/**
|
||||
* The numbers the photo look prints with: the CSS filter chain, the colour
|
||||
* matrices of the SVG filter, the box shadows of a rectangular frame and the
|
||||
* placement of a zoomed picture.
|
||||
*/
|
||||
|
||||
const look = (over: Partial<PhotoLook> = {}): PhotoLook => ({ ...photoLookOf({}), ...over });
|
||||
const adjust = (a: Partial<NonNullable<PhotoLook['adjust']>>) => ({
|
||||
brightness: 0,
|
||||
contrast: 0,
|
||||
saturation: 0,
|
||||
warmth: 0,
|
||||
...a,
|
||||
});
|
||||
|
||||
describe('photo look rendering', () => {
|
||||
it('FE-STUDIO-LOOK-001: turns adjustments into filter functions, leaving out what does not move', () => {
|
||||
expect(adjustFilter(null)).toEqual([]);
|
||||
expect(adjustFilter(adjust({ brightness: 0.2, contrast: -1, saturation: -1 }))).toEqual([
|
||||
'brightness(1.1)',
|
||||
'contrast(0.5)',
|
||||
'saturate(0)',
|
||||
]);
|
||||
expect(adjustFilter(adjust({ warmth: 0.5 }))).toEqual([]);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-002: chains the preset, the adjustments and the SVG filter, and draws nothing for none', () => {
|
||||
expect(pictureFilter(undefined, look(), null)).toBeUndefined();
|
||||
expect(pictureFilter('grayscale(1)', look({ adjust: adjust({ contrast: 0.4 }) }), 'f-x')).toBe(
|
||||
'grayscale(1) contrast(1.2) url(#f-x)'
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-003: warms by raising red and lowering blue, and cools the other way', () => {
|
||||
expect(warmthMatrix(0)).toBeNull();
|
||||
expect(warmthMatrix(1)).toBe('1.12 0 0 0 0 0 1.03 0 0 0 0 0 0.88 0 0 0 0 0 1 0');
|
||||
expect(warmthMatrix(-1)).toBe('0.88 0 0 0 0 0 0.97 0 0 0 0 0 1.12 0 0 0 0 0 1 0');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-004: maps black to the dark ink and white to the light one', () => {
|
||||
const values = duotoneMatrix({ dark: '#000000', light: '#ffffff' }).split(' ').map(Number);
|
||||
// Each colour row reads the luminance weights and starts from the dark ink.
|
||||
expect(values.slice(0, 5)).toEqual([0.213, 0.715, 0.072, 0, 0]);
|
||||
expect(values.slice(15)).toEqual([0, 0, 0, 1, 0]);
|
||||
const navy = duotoneMatrix({ dark: '#ff0000', light: '#ff0000' }).split(' ').map(Number);
|
||||
// The same ink at both ends is that ink, whatever the picture.
|
||||
expect(navy.slice(0, 5)).toEqual([0, 0, 0, 0, 1]);
|
||||
expect(navy.slice(5, 10)).toEqual([0, 0, 0, 0, 0]);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-005: needs an SVG filter only for warmth or a duotone, warmth first', () => {
|
||||
expect(svgFilterMatrices(look())).toEqual([]);
|
||||
expect(svgFilterMatrices(look({ adjust: adjust({ brightness: 0.3 }) }))).toEqual([]);
|
||||
const both = svgFilterMatrices(
|
||||
look({ adjust: adjust({ warmth: 1 }), duotone: { dark: '#000000', light: '#ffffff' } })
|
||||
);
|
||||
expect(both).toHaveLength(2);
|
||||
expect(both[0]).toBe(warmthMatrix(1));
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-006: draws the cutout and a shadow grown by it as flat box shadows', () => {
|
||||
expect(silhouetteShadows(null, null)).toEqual([]);
|
||||
expect(silhouetteShadows({ dx: 2, dy: 3, color: '#102030', alpha: 0.5 }, null)).toEqual([
|
||||
'2mm 3mm 0 0mm rgba(16, 32, 48, 0.5)',
|
||||
]);
|
||||
expect(silhouetteShadows({ dx: -1, dy: 1, color: '#000000', alpha: 1 }, { width: 3, color: '#ffffff' })).toEqual([
|
||||
'0 0 0 3mm #ffffff',
|
||||
'-1mm 1mm 0 3mm rgba(0, 0, 0, 1)',
|
||||
]);
|
||||
expect(rgba('#ff8000', 0.25)).toBe('rgba(255, 128, 0, 0.25)');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOK-007: places a zoomed picture so the focal point stays where it was', () => {
|
||||
expect(zoomPlacement(1, 0.5, 0.5)).toBeNull();
|
||||
expect(zoomPlacement(2, 0.5, 0.5)).toEqual({ size: '200%', transform: 'translate(-25%, -25%)' });
|
||||
expect(zoomPlacement(4, 0, 1)).toEqual({ size: '400%', transform: 'translate(0%, -75%)' });
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,115 @@
|
||||
import type { BookPhotoDuotone, BookPhotoEdge, BookPhotoShadow, PhotoLook } from '@trek/shared';
|
||||
|
||||
/**
|
||||
* The photo look (book-photo-look.schema.ts in shared) turned into what the
|
||||
* page draws: CSS for the picture, the colour matrices of its SVG filter, and
|
||||
* the box shadows a rectangular frame wears.
|
||||
*
|
||||
* Pure, and apart from PhotoView, because these are the numbers the look
|
||||
* prints with and a rendered component is an awkward place to prove them.
|
||||
*
|
||||
* What prints as vector and what does not is decided here: a border, a hard
|
||||
* shadow and a cutout are boxes and paths of one colour, while adjustments,
|
||||
* warmth and a duotone are filters on the picture, which the printer receives
|
||||
* as a raster the way it already received the filter presets.
|
||||
*/
|
||||
|
||||
/** #rrggbb with an alpha, for a shadow drawn at its own strength. */
|
||||
export function rgba(hex: string, alpha: number): string {
|
||||
const n = Number.parseInt(hex.slice(1), 16);
|
||||
return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`;
|
||||
}
|
||||
|
||||
const round3 = (v: number) => Math.round(v * 1000) / 1000;
|
||||
|
||||
/**
|
||||
* Brightness, contrast and saturation as CSS filter functions, after the
|
||||
* preset filter. Half a step either way for the first two, which keeps the
|
||||
* ends of the slider usable; saturation runs from grey to twice the colour.
|
||||
*/
|
||||
export function adjustFilter(adjust: PhotoLook['adjust']): string[] {
|
||||
if (!adjust) return [];
|
||||
const out: string[] = [];
|
||||
if (adjust.brightness) out.push(`brightness(${round3(1 + adjust.brightness * 0.5)})`);
|
||||
if (adjust.contrast) out.push(`contrast(${round3(1 + adjust.contrast * 0.5)})`);
|
||||
if (adjust.saturation) out.push(`saturate(${round3(1 + adjust.saturation)})`);
|
||||
return out;
|
||||
}
|
||||
|
||||
/** The filter on the picture: the preset, the adjustments, then the SVG filter when there is one. */
|
||||
export function pictureFilter(
|
||||
preset: string | undefined,
|
||||
look: PhotoLook,
|
||||
svgFilterId: string | null
|
||||
): string | undefined {
|
||||
const parts = [preset, ...adjustFilter(look.adjust), svgFilterId ? `url(#${svgFilterId})` : undefined].filter(
|
||||
(p): p is string => !!p
|
||||
);
|
||||
return parts.length ? parts.join(' ') : undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Warmth as a colour matrix: red up and blue down for warm, the reverse for
|
||||
* cool, green a little with red so a warm picture does not turn pink.
|
||||
*/
|
||||
export function warmthMatrix(warmth: number): string | null {
|
||||
if (!warmth) return null;
|
||||
const r = round3(1 + warmth * 0.12);
|
||||
const g = round3(1 + warmth * 0.03);
|
||||
const b = round3(1 - warmth * 0.12);
|
||||
return `${r} 0 0 0 0 0 ${g} 0 0 0 0 0 ${b} 0 0 0 0 0 1 0`;
|
||||
}
|
||||
|
||||
const channels = (hex: string) => {
|
||||
const n = Number.parseInt(hex.slice(1), 16);
|
||||
return [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => c / 255) as [number, number, number];
|
||||
};
|
||||
|
||||
/** Rec. 709 luminance weights, the brightness the duotone maps from. */
|
||||
const LUMA = [0.2126, 0.7152, 0.0722] as const;
|
||||
|
||||
/** A duotone as a colour matrix: the picture's luminance mapped from `dark` (black) to `light` (white). */
|
||||
export function duotoneMatrix(duotone: BookPhotoDuotone): string {
|
||||
const dark = channels(duotone.dark);
|
||||
const light = channels(duotone.light);
|
||||
const rows = dark.map((d, i) => {
|
||||
const span = (light[i] ?? 0) - d;
|
||||
return `${LUMA.map((w) => round3(w * span)).join(' ')} 0 ${round3(d)}`;
|
||||
});
|
||||
return `${rows.join(' ')} 0 0 0 1 0`;
|
||||
}
|
||||
|
||||
/** The colour matrices the picture's SVG filter applies, in order; empty when it needs none. */
|
||||
export function svgFilterMatrices(look: PhotoLook): string[] {
|
||||
const warm = warmthMatrix(look.adjust?.warmth ?? 0);
|
||||
return [warm, look.duotone ? duotoneMatrix(look.duotone) : null].filter((m): m is string => m !== null);
|
||||
}
|
||||
|
||||
/**
|
||||
* The die-cut edge and the hard shadow of a rectangular frame, as box
|
||||
* shadows: no blur, so each is one flat shape, drawn behind the frame and
|
||||
* following its corner radius. The shadow is grown by the cutout too, so it
|
||||
* falls from the whole sticker rather than from the picture inside it.
|
||||
*/
|
||||
export function silhouetteShadows(shadow: BookPhotoShadow | null, cutout: BookPhotoEdge | null): string[] {
|
||||
const out: string[] = [];
|
||||
const grow = cutout?.width ?? 0;
|
||||
if (cutout) out.push(`0 0 0 ${cutout.width}mm ${cutout.color}`);
|
||||
if (shadow) out.push(`${shadow.dx}mm ${shadow.dy}mm 0 ${grow}mm ${rgba(shadow.color, shadow.alpha)}`);
|
||||
return out;
|
||||
}
|
||||
|
||||
/**
|
||||
* Where the picture sits inside a zoomed frame, as the image's own size and a
|
||||
* shift in its own percentages: z times the frame, moved so the focal point
|
||||
* stays where the frame put it at zoom 1.
|
||||
*/
|
||||
export function zoomPlacement(
|
||||
zoom: number,
|
||||
focalX: number,
|
||||
focalY: number
|
||||
): { size: string; transform: string } | null {
|
||||
if (zoom <= 1) return null;
|
||||
const shift = (f: number) => round3((-(zoom - 1) * f * 100) / zoom);
|
||||
return { size: `${round3(zoom * 100)}%`, transform: `translate(${shift(focalX)}%, ${shift(focalY)}%)` };
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { usePhotoPixels } from './usePhotoPixels';
|
||||
|
||||
/**
|
||||
* The original's pixel size, read off the original itself for the photo the
|
||||
* inspector shows: nothing until it has loaded, nothing for another photo
|
||||
* than the one asked about, nothing for an empty frame.
|
||||
*/
|
||||
|
||||
class FakeImage {
|
||||
static made: FakeImage[] = [];
|
||||
onload: (() => void) | null = null;
|
||||
naturalWidth = 0;
|
||||
naturalHeight = 0;
|
||||
src = '';
|
||||
constructor() {
|
||||
FakeImage.made.push(this);
|
||||
}
|
||||
load(width: number, height: number) {
|
||||
this.naturalWidth = width;
|
||||
this.naturalHeight = height;
|
||||
this.onload?.();
|
||||
}
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
FakeImage.made = [];
|
||||
vi.stubGlobal('Image', FakeImage);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
describe('usePhotoPixels', () => {
|
||||
it('FE-STUDIO-PIXELS-001: loads the original and answers its size once it is in', () => {
|
||||
const { result } = renderHook(() => usePhotoPixels(7));
|
||||
expect(result.current).toBeNull();
|
||||
const img = FakeImage.made[0] as FakeImage;
|
||||
expect(img.src).toBe('/api/photos/7/original');
|
||||
act(() => img.load(4000, 3000));
|
||||
expect(result.current).toEqual({ width: 4000, height: 3000 });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PIXELS-002: forgets the size when another photo is asked about, and ignores the old one landing late', () => {
|
||||
const { result, rerender } = renderHook(({ id }: { id: number | null }) => usePhotoPixels(id), {
|
||||
initialProps: { id: 7 as number | null },
|
||||
});
|
||||
const first = FakeImage.made[0] as FakeImage;
|
||||
rerender({ id: 8 });
|
||||
expect(first.onload).toBeNull();
|
||||
act(() => first.load(100, 100));
|
||||
expect(result.current).toBeNull();
|
||||
act(() => (FakeImage.made[1] as FakeImage).load(600, 400));
|
||||
expect(result.current).toEqual({ width: 600, height: 400 });
|
||||
rerender({ id: null });
|
||||
expect(result.current).toBeNull();
|
||||
expect(FakeImage.made).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PIXELS-003: says nothing for a picture that loads without a size', () => {
|
||||
const { result } = renderHook(() => usePhotoPixels(9));
|
||||
act(() => (FakeImage.made[0] as FakeImage).load(0, 0));
|
||||
expect(result.current).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
import { photoSrc } from '../bookRender';
|
||||
|
||||
export interface PhotoPixels {
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* The pixel size of a photo's original, measured by loading it.
|
||||
*
|
||||
* The journey the Studio holds knows which pictures there are but not how
|
||||
* large their originals are (the server measures that for the book engine and
|
||||
* keeps it there), and a print resolution is nothing without it. So the
|
||||
* inspector reads it off the original itself, for the one photo selected: the
|
||||
* canvas loads that same original from a zoom of a third up, so most of the
|
||||
* time the browser already has it. Null until it has loaded, and for an empty
|
||||
* frame or a picture that does not load, which says nothing rather than guess.
|
||||
*/
|
||||
export function usePhotoPixels(photoId: number | null): PhotoPixels | null {
|
||||
const [seen, setSeen] = useState<{ photoId: number; pixels: PhotoPixels } | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (photoId == null) return undefined;
|
||||
let cancelled = false;
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
if (cancelled || !img.naturalWidth || !img.naturalHeight) return;
|
||||
setSeen({ photoId, pixels: { width: img.naturalWidth, height: img.naturalHeight } });
|
||||
};
|
||||
img.src = photoSrc(photoId, true);
|
||||
return () => {
|
||||
cancelled = true;
|
||||
img.onload = null;
|
||||
};
|
||||
}, [photoId]);
|
||||
|
||||
return seen && seen.photoId === photoId ? seen.pixels : null;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
/*
|
||||
* The photo look in the Studio inspector: the zoom and mirror row beside the
|
||||
* crop, the print resolution, the border, shadow and cutout parts, the
|
||||
* adjustment sliders and the duotone pairs. Everything reads the inspector's
|
||||
* own tokens from studio.css, so it follows the user's scheme and accent.
|
||||
*/
|
||||
|
||||
/* ----------------- a slider with its value ----------------- */
|
||||
.trek-dash .st-slider {
|
||||
display: grid;
|
||||
grid-template-columns: 64px minmax(0, 1fr) 40px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 28px;
|
||||
}
|
||||
.trek-dash .st-slider + .st-slider {
|
||||
margin-top: 4px;
|
||||
}
|
||||
.trek-dash .st-slider-label {
|
||||
font-size: 11px;
|
||||
color: var(--ink-3);
|
||||
line-height: 1.25;
|
||||
}
|
||||
.trek-dash .st-slider input[type='range'] {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
.trek-dash .st-slider-value {
|
||||
font-size: 11px;
|
||||
color: var(--ink-2);
|
||||
text-align: end;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* ----------------- beside the crop ----------------- */
|
||||
.trek-dash .st-photo-crop {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.trek-dash .st-photo-crop > .st-slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* The print resolution: quiet when it is fine, a warning tint when it is not. */
|
||||
.trek-dash .st-photo-dpi {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in oklch, var(--ink) 4%, transparent);
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.trek-dash .st-photo-dpi svg {
|
||||
flex: none;
|
||||
margin-top: 1px;
|
||||
}
|
||||
.trek-dash .st-photo-dpi.is-low {
|
||||
background: var(--warning-soft);
|
||||
color: var(--warning);
|
||||
}
|
||||
.trek-dash .st-photo-dpi-value {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.trek-dash .st-photo-dpi-hint {
|
||||
margin-top: 2px;
|
||||
font-size: 11.5px;
|
||||
line-height: 1.5;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
|
||||
/* ----------------- one part of the look: a switch and what it opens ----------------- */
|
||||
.trek-dash .st-photo-part + .st-photo-part {
|
||||
border-top: 1px solid var(--line);
|
||||
margin-top: 4px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.trek-dash .st-photo-part-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 6px 0 8px;
|
||||
}
|
||||
.trek-dash .st-photo-part-body .st-line + .st-line {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.trek-dash .st-photo-reset {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* ----------------- duotone pairs ----------------- */
|
||||
.trek-dash .st-photo-duos {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.trek-dash .st-photo-duo {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--line-2);
|
||||
box-shadow: var(--sh-xs);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
transform 0.14s,
|
||||
box-shadow 0.14s;
|
||||
}
|
||||
.trek-dash .st-photo-duo:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
.trek-dash .st-photo-duo.is-on {
|
||||
box-shadow: 0 0 0 2px var(--accent);
|
||||
}
|
||||
.trek-dash .st-photo-duo:focus {
|
||||
outline: none;
|
||||
}
|
||||
.trek-dash .st-photo-duo:focus-visible {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--accent-soft),
|
||||
0 0 0 3px var(--accent);
|
||||
}
|
||||
@@ -0,0 +1,82 @@
|
||||
import type { BookDocument, BookElement, BookPhotoElement } from '@trek/shared';
|
||||
import { PHOTO_LOOK_STARTS, bookPageSetupSchema, bookPhotoElementSchema } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
|
||||
import { StudioInspector } from '../../../src/components/Studio/StudioInspector';
|
||||
import type { JourneySource } from '../../../src/components/Studio/StudioSidebar';
|
||||
import { useStudioStore } from '../../../src/store/studioStore';
|
||||
import { fireEvent, render, screen } from '../../helpers/render';
|
||||
|
||||
/**
|
||||
* The photo look through the inspector itself, written into the book the
|
||||
* store holds: the rows sit where the panel puts them and every one of them
|
||||
* is one undo step.
|
||||
*/
|
||||
|
||||
const source: JourneySource = { entries: [], photos: [], photoEntries: {} };
|
||||
const page = bookPageSetupSchema.parse({});
|
||||
|
||||
function load(over: Record<string, unknown> = {}) {
|
||||
const el = bookPhotoElementSchema.parse({
|
||||
id: 'p1',
|
||||
kind: 'photo',
|
||||
frame: { x: 20, y: 30, w: 60, h: 40 },
|
||||
photoId: 12,
|
||||
...over,
|
||||
}) as BookElement;
|
||||
useStudioStore.getState().load({
|
||||
version: 1,
|
||||
title: 'T',
|
||||
page,
|
||||
spreads: [{ id: 'sp1', role: 'inner', background: null, elements: [el], parked: [], entryId: null }],
|
||||
} as BookDocument);
|
||||
useStudioStore.getState().select(['p1']);
|
||||
}
|
||||
|
||||
const photo = () => useStudioStore.getState().doc?.spreads[0]?.elements[0] as BookPhotoElement;
|
||||
|
||||
function draw() {
|
||||
return render(
|
||||
<StudioInspector
|
||||
spreadIndex={0}
|
||||
page={page}
|
||||
stats={null}
|
||||
path={[]}
|
||||
source={source}
|
||||
setPageNumbers={() => {}}
|
||||
t={(k: string) => k}
|
||||
locale="en"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
beforeEach(() => load());
|
||||
|
||||
describe('the photo look in the inspector', () => {
|
||||
it('FE-STUDIO-LOOKINSP-001: zooms and mirrors from the crop section', () => {
|
||||
draw();
|
||||
const zoom = screen.getByRole('slider', { name: /journey.studio.photo.zoom/ });
|
||||
fireEvent.change(zoom, { target: { value: '2' } });
|
||||
fireEvent.pointerUp(zoom);
|
||||
fireEvent.click(screen.getByRole('button', { name: /journey.studio.photo.flip/ }));
|
||||
expect(photo()).toMatchObject({ zoom: 2, flipX: true });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKINSP-002: puts a border on and takes it off again, leaving nothing behind', () => {
|
||||
draw();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.edges' }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.border', pressed: false }));
|
||||
expect(photo().border).toEqual(PHOTO_LOOK_STARTS.border);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.border', pressed: true }));
|
||||
expect(JSON.parse(JSON.stringify(photo()))).not.toHaveProperty('border');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-LOOKINSP-003: each look change is one undo step', () => {
|
||||
draw();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.duotone', expanded: false }));
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.photo.duotone', pressed: false }));
|
||||
expect(photo().duotone).toEqual(PHOTO_LOOK_STARTS.duotone);
|
||||
useStudioStore.getState().undo();
|
||||
expect(photo().duotone).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,168 @@
|
||||
import type { BookElement, BookPageSetup, BookSpread } from '@trek/shared';
|
||||
import { bookPageSetupSchema } from '@trek/shared';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { SpreadView } from '../../../src/components/Studio/SpreadView';
|
||||
import { render } from '../../helpers/render';
|
||||
|
||||
/**
|
||||
* The photo look as the page draws it, through SpreadView, the one renderer
|
||||
* the editor, the thumbnails and the print path share: border, hard shadow,
|
||||
* cutout, zoom, mirror, adjustments and duotone, and ids that stay unique
|
||||
* when a spread is drawn twice.
|
||||
*/
|
||||
|
||||
const page: BookPageSetup = bookPageSetupSchema.parse({
|
||||
preset: 'square-210',
|
||||
pageWidth: 210,
|
||||
pageHeight: 210,
|
||||
bleed: 3,
|
||||
safe: 5,
|
||||
});
|
||||
|
||||
const frame = { x: 10, y: 20, w: 80, h: 60 };
|
||||
|
||||
const photo = (over: Record<string, unknown> = {}): BookElement =>
|
||||
({
|
||||
frame,
|
||||
rotation: 0,
|
||||
opacity: 1,
|
||||
locked: false,
|
||||
id: 'p1',
|
||||
kind: 'photo',
|
||||
photoId: 42,
|
||||
fit: 'cover',
|
||||
focalX: 0.5,
|
||||
focalY: 0.5,
|
||||
radius: 0,
|
||||
filter: 'none',
|
||||
mask: null,
|
||||
frameStyle: 'none',
|
||||
...over,
|
||||
}) as BookElement;
|
||||
|
||||
const spread = (elements: BookElement[]): BookSpread => ({
|
||||
id: 's1',
|
||||
role: 'inner',
|
||||
background: null,
|
||||
elements,
|
||||
parked: [],
|
||||
entryId: null,
|
||||
});
|
||||
|
||||
const draw = (elements: BookElement[], print = false) =>
|
||||
render(<SpreadView spread={spread(elements)} page={page} print={print} />);
|
||||
|
||||
/** The photo's own box: the sheet's first child. */
|
||||
const outer = (container: HTMLElement) => container.firstElementChild?.firstElementChild as HTMLElement;
|
||||
const styleOf = (el: Element | null | undefined) => el?.getAttribute('style') ?? '';
|
||||
|
||||
describe('the photo look on the page', () => {
|
||||
it('FE-STUDIO-PHOTO-001: draws a plain photo exactly as before, with no look layers', () => {
|
||||
const { container } = draw([photo()]);
|
||||
expect(outer(container).querySelector('svg')).toBeNull();
|
||||
const img = container.querySelector('img') as HTMLImageElement;
|
||||
expect(img.style.width).toBe('100%');
|
||||
expect(img.style.transform).toBe('');
|
||||
expect(styleOf(outer(container))).not.toContain('box-shadow');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-002: lays a border band over the edge of a rectangular picture, rounded with it', () => {
|
||||
const { container } = draw([photo({ border: { width: 4, color: '#ffffff' }, radius: 3 })]);
|
||||
const band = container.querySelector('img')?.parentElement?.querySelector('div[aria-hidden]') as HTMLElement;
|
||||
expect(band.style.borderWidth).toBe('4mm');
|
||||
expect(band.style.borderStyle).toBe('solid');
|
||||
expect(band.style.borderRadius).toBe('3mm');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-003: strokes the border along a mask, twice as wide so its inner half shows', () => {
|
||||
const { container } = draw([photo({ mask: 'heart', border: { width: 2.5, color: '#102030' } })]);
|
||||
const stroked = [...container.querySelectorAll('path')].find((p) => p.getAttribute('fill') === 'none');
|
||||
expect(stroked?.getAttribute('stroke')).toBe('#102030');
|
||||
expect(stroked?.getAttribute('stroke-width')).toBe('5');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-004: gives a rectangular frame its cutout and hard shadow as flat box shadows', () => {
|
||||
const { container } = draw([
|
||||
photo({ shadow: { dx: 2, dy: 3, color: '#000000', alpha: 0.5 }, cutout: { width: 3, color: '#ffffff' } }),
|
||||
]);
|
||||
const css = styleOf(outer(container));
|
||||
expect(css).toContain('0 0 0 3mm');
|
||||
expect(css).toContain('2mm 3mm 0 3mm');
|
||||
expect(outer(container).querySelector('svg')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-005: draws the cutout and shadow of a shaped frame as its path, behind the picture', () => {
|
||||
const { container } = draw([
|
||||
photo({
|
||||
mask: 'star-5',
|
||||
shadow: { dx: 1, dy: 1, color: '#222222', alpha: 0.4 },
|
||||
cutout: { width: 2, color: '#fafafa' },
|
||||
}),
|
||||
]);
|
||||
const box = outer(container);
|
||||
const silhouette = box.firstElementChild as SVGElement;
|
||||
expect(silhouette.tagName.toLowerCase()).toBe('svg');
|
||||
const paths = silhouette.querySelectorAll('path');
|
||||
expect(paths).toHaveLength(2);
|
||||
expect(paths[0]?.getAttribute('transform')).toBe('translate(1 1)');
|
||||
expect(paths[0]?.parentElement?.getAttribute('opacity')).toBe('0.4');
|
||||
expect(paths[1]?.getAttribute('stroke-width')).toBe('4');
|
||||
expect(styleOf(box)).not.toContain('box-shadow');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-006: a Polaroid keeps a rectangular shadow even with a mask, beside its soft one', () => {
|
||||
const { container } = draw([
|
||||
photo({ frameStyle: 'polaroid', mask: 'heart', shadow: { dx: 2, dy: 2, color: '#000000', alpha: 1 } }),
|
||||
]);
|
||||
const css = styleOf(outer(container));
|
||||
expect(css).toContain('2mm 2mm 0 0mm');
|
||||
expect(css).toContain('1.2mm 3mm');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-007: zooms the picture about its focal point and mirrors it inside its frame', () => {
|
||||
const { container } = draw([photo({ zoom: 2, focalX: 0.5, focalY: 0.5, flipX: true })]);
|
||||
const img = container.querySelector('img') as HTMLImageElement;
|
||||
expect(img.style.width).toBe('200%');
|
||||
expect(img.style.transform).toBe('translate(-25%, -25%)');
|
||||
expect(img.parentElement?.style.transform).toBe('scaleX(-1)');
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-008: filters the picture with the adjustments and an SVG filter for warmth and duotone', () => {
|
||||
const { container } = draw([
|
||||
photo({
|
||||
filter: 'bw',
|
||||
adjust: { brightness: 0.2, warmth: 0.5 },
|
||||
duotone: { dark: '#000000', light: '#ffffff' },
|
||||
}),
|
||||
]);
|
||||
const filter = container.querySelector('filter') as SVGFilterElement;
|
||||
expect(filter.querySelectorAll('feColorMatrix')).toHaveLength(2);
|
||||
const css = styleOf(container.querySelector('img'));
|
||||
expect(css).toContain('grayscale(1)');
|
||||
expect(css).toContain('brightness(1.1)');
|
||||
expect(css).toContain(`url(#${filter.id})`);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-009: gives every drawing of a spread its own clip and filter ids', () => {
|
||||
const el = photo({ mask: 'heart', duotone: { dark: '#000000', light: '#ffffff' } });
|
||||
const { container } = render(
|
||||
<>
|
||||
<SpreadView spread={spread([el])} page={page} />
|
||||
<SpreadView spread={spread([el])} page={page} />
|
||||
</>
|
||||
);
|
||||
const ids = [...container.querySelectorAll('clipPath, filter')].map((n) => n.id);
|
||||
expect(ids).toHaveLength(4);
|
||||
expect(new Set(ids).size).toBe(4);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-PHOTO-010: an empty frame wears no look, and prints nothing', () => {
|
||||
const look = { border: { width: 4, color: '#ffffff' }, cutout: { width: 2, color: '#ffffff' }, mask: 'heart' };
|
||||
const { container } = draw([photo({ photoId: null, ...look })]);
|
||||
expect(container.querySelector('img')).toBeNull();
|
||||
expect([...container.querySelectorAll('path')].some((p) => p.getAttribute('fill') === 'none')).toBe(false);
|
||||
const { container: printed } = draw([photo({ photoId: null, ...look })], true);
|
||||
expect(printed.querySelector('[style*="left: 10mm"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -192,7 +192,7 @@ export class JourneyBookMcp {
|
||||
|
||||
@Tool({
|
||||
name: 'edit_book_page',
|
||||
description: `Change one page with 1 to ${BOOK_OP_LIMITS.opsPerCall} operations, run in order, all or nothing: layout (a template, grid, saved layout, or auto to lay the page out again from its entry), place_photo (a photo of the journey's gallery into a frame by elementId, by its slot among the page's frames, or into a new frame), photo_look (the crop as fit and focal point, mask, frame style, filter, radius), swap_photos, text (by elementId, or by role heading, body or meta, which creates the text when the page has none), caption (under a photo, bound to its caption in the journal unless words are given), frame (move, resize, turn), remove (parked with the page by default, park false deletes), background (a colour, or a paint: a colour with alpha, a linear or radial gradient, or one of twelve patterns; null is the paper), add (a new photo frame, text, shape, icon, sticker from list_book_assets, map, figures, country outlines, mark or list; the journey's own values such as the route, figures and countries come from the journey, never from you), style (the look of one element of its kind: opacity, colours, a shape's paint, fonts, strokes and the like), arrange (to front, forward, backward, to back), align and distribute (several elements by their edges or centres, against each other, the page or the safe area), lock, duplicate, fill (a photo to the bleed of its page or the spread, behind everything), copy_from (elements of another page), refresh_travel (travel elements to the journey's current figures), add_grid (a photo grid as empty frames in a box), group and ungroup (two or more elements picked, moved, aligned and arranged as one, such as a title lockup; align and distribute move a group as one box), name (an element or a group, as the layers panel shows it) and hide (left off the page and out of print, or shown again). A locked element refuses any operation that would change it but lock, ungroup, name and hide. The road a map draws between stops is a straight or bowed line; roads are not routed. ${LAYOUT_NOTES.templates} ${LAYOUT_NOTES.grids} ${UNITS} With returnPrevious the answer also holds the page as it was, under previous_spreads, and a digest of each page as the write left it under page_digests (for restore_book_page expectedPages). ${WRITE_ANSWER}`,
|
||||
description: `Change one page with 1 to ${BOOK_OP_LIMITS.opsPerCall} operations, run in order, all or nothing: layout (a template, grid, saved layout, or auto to lay the page out again from its entry), place_photo (a photo of the journey's gallery into a frame by elementId, by its slot among the page's frames, or into a new frame), photo_look (the crop as fit and focal point, mask, frame style, filter, radius), swap_photos, text (by elementId, or by role heading, body or meta, which creates the text when the page has none), caption (under a photo, bound to its caption in the journal unless words are given), frame (move, resize, turn), remove (parked with the page by default, park false deletes), background (a colour, or a paint: a colour with alpha, a linear or radial gradient, or one of twelve patterns; null is the paper), add (a new photo frame, text, shape, icon, sticker from list_book_assets, map, figures, country outlines, mark or list; the journey's own values such as the route, figures and countries come from the journey, never from you), style (the look of one element of its kind: opacity, colours, a shape's paint, fonts, strokes and the like, and for a photo its border, hard shadow, zoom, mirror, adjustments, duotone and cutout), arrange (to front, forward, backward, to back), align and distribute (several elements by their edges or centres, against each other, the page or the safe area), lock, duplicate, fill (a photo to the bleed of its page or the spread, behind everything), copy_from (elements of another page), refresh_travel (travel elements to the journey's current figures), add_grid (a photo grid as empty frames in a box), group and ungroup (two or more elements picked, moved, aligned and arranged as one, such as a title lockup; align and distribute move a group as one box), name (an element or a group, as the layers panel shows it) and hide (left off the page and out of print, or shown again). A locked element refuses any operation that would change it but lock, ungroup, name and hide. The road a map draws between stops is a straight or bowed line; roads are not routed. ${LAYOUT_NOTES.templates} ${LAYOUT_NOTES.grids} ${UNITS} With returnPrevious the answer also holds the page as it was, under previous_spreads, and a digest of each page as the write left it under page_digests (for restore_book_page expectedPages). ${WRITE_ANSWER}`,
|
||||
inputSchema: { journeyId: idSchema, ...editBookPageArgs },
|
||||
annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
|
||||
when: journeyAddonOn,
|
||||
|
||||
@@ -264,4 +264,28 @@ describe('Studio book over MCP and REST', () => {
|
||||
const after = await findRow(orm, JourneyBooks, { journey: journey.id });
|
||||
expect(after?.version).toBe(1);
|
||||
});
|
||||
|
||||
it('JBE2E-007: the photo look set over MCP is what GET reads next, stamped with the revision that wrote it', async () => {
|
||||
const { owner, journey, inner } = await journeyWithBook();
|
||||
await callTool(owner.id, 'edit_book_page', {
|
||||
journeyId: journey.id,
|
||||
spreadId: inner,
|
||||
ops: [{ op: 'add', element: { kind: 'photo' } }],
|
||||
});
|
||||
const read = async () =>
|
||||
(await request(app.getHttpServer()).get(`/api/journeys/${journey.id}/book`).set('Cookie', authCookie(owner.id)))
|
||||
.body.book.document as { schemaRev?: number; spreads: Array<{ elements: Array<Record<string, unknown>> }> };
|
||||
const frame = (await read()).spreads[2]?.elements.find((e) => e.kind === 'photo');
|
||||
const look = { border: { width: 5, color: '#ffffff' }, zoom: 1.5, flipX: true, adjust: { warmth: 0.4 } };
|
||||
|
||||
const styled = await callTool(owner.id, 'edit_book_page', {
|
||||
journeyId: journey.id,
|
||||
spreadId: inner,
|
||||
ops: [{ op: 'style', elementId: frame?.id, set: { kind: 'photo', ...look } }],
|
||||
});
|
||||
expect(bookWriteResultSchema.safeParse(styled).success).toBe(true);
|
||||
const after = await read();
|
||||
expect(after.schemaRev).toBe(BOOK_SCHEMA_REV);
|
||||
expect(after.spreads[2]?.elements.find((e) => e.id === frame?.id)).toMatchObject(look);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
} from './book-op-enums';
|
||||
import { bookElementIdSchema, bookGridIdSchema, bookSpreadIdSchema } from './book-op-ids';
|
||||
import { bookPaintInSchema } from './book-paint.schema';
|
||||
import { BOOK_PHOTO_LOOK_PROPS } from './book-photo-look.schema';
|
||||
import { bookStickerIdSchema } from './book-sticker';
|
||||
import {
|
||||
MAX_BOOK_COUNTRIES,
|
||||
@@ -196,7 +197,8 @@ const METRICS = z.array(bookMetricSchema).min(1).max(7);
|
||||
* resolves them from the journey, exactly as the Travel panel does.
|
||||
*/
|
||||
export const bookElementPropsSchema = z.discriminatedUnion('kind', [
|
||||
z.strictObject({ kind: z.literal('photo'), ...PHOTO_PROPS }),
|
||||
// The photo look only here, not on `add`: a new frame is styled after it exists, and the field list stays out of the add schema twice over.
|
||||
z.strictObject({ kind: z.literal('photo'), ...PHOTO_PROPS, ...BOOK_PHOTO_LOOK_PROPS }),
|
||||
z.strictObject({ kind: z.literal('text'), ...TEXT_PROPS }),
|
||||
z.strictObject({ kind: z.literal('shape'), shape: bookShapeIdSchema.optional(), ...SHAPE_PROPS }),
|
||||
z.strictObject({ kind: z.literal('icon'), ...ICON_PROPS }),
|
||||
|
||||
@@ -4,6 +4,7 @@ import { bookFontCountsInMix, bookFontsUsed } from './book-fonts';
|
||||
import { visibleSpread } from './book-groups';
|
||||
import type { BookPhotoInfo } from './book-ops-core';
|
||||
import { BOOK_OP_LIMITS, type BookFinding } from './book-ops.schema';
|
||||
import { photoZoomBox, photoZoomOf } from './book-photo-look';
|
||||
import type { BookDocument, BookElement, BookFrame, BookPageSetup, BookPhotoElement, BookSpread } from './book.schema';
|
||||
|
||||
/**
|
||||
@@ -42,7 +43,7 @@ const centreIn = (b: Box, px: number, py: number) => px >= b.x && px <= b.x + b.
|
||||
*/
|
||||
export function bookPhotoCrop(el: BookPhotoElement, info: BookPhotoInfo | undefined): Box | null {
|
||||
if (!info?.width || !info.height) return null;
|
||||
const f = el.frame;
|
||||
const f = photoZoomBox(el.frame, photoZoomOf(el), el.focalX, el.focalY);
|
||||
const pick = el.fit === 'contain' ? Math.min : Math.max;
|
||||
const scale = pick(f.w / info.width, f.h / info.height);
|
||||
const w = info.width * scale;
|
||||
@@ -64,7 +65,9 @@ export function bookBusyUnder(el: BookPhotoElement, info: BookPhotoInfo | undefi
|
||||
const crop = bookPhotoCrop(el, info);
|
||||
const grid = info?.busy;
|
||||
if (!crop || !grid || grid.length !== 64) return null;
|
||||
const onPhoto = overlap(box, el.frame);
|
||||
// A mirrored picture shows under the box what lies under its mirror image.
|
||||
const under = el.flipX ? { ...box, x: 2 * el.frame.x + el.frame.w - box.x - box.w } : box;
|
||||
const onPhoto = overlap(under, el.frame);
|
||||
const area = onPhoto && overlap(onPhoto, crop);
|
||||
if (!area) return null;
|
||||
const cw = crop.w / 8;
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
import type { BookFinding } from './book-ops.schema';
|
||||
import { photoLookOf } from './book-photo-look';
|
||||
import type { BookPageSetup, BookSpread } from './book.schema';
|
||||
|
||||
/**
|
||||
* What the photo look (book-photo-look.schema.ts) is worth knowing about on a
|
||||
* proof.
|
||||
*
|
||||
* Adjustments and a duotone are drawn through filters, and a filtered picture
|
||||
* goes to the printer as a raster the browser made rather than as the
|
||||
* original's own pixels. On a small picture nobody sees the difference; on a
|
||||
* picture a quarter of a page or larger it can print softer than the same
|
||||
* picture without the filter, so the finding says so, as context.
|
||||
*/
|
||||
|
||||
/** The share of one page a filtered picture covers before the finding speaks. */
|
||||
const RASTER_EFFECT_SHARE = 0.25;
|
||||
|
||||
export function photoLookChecks(spread: BookSpread, page: BookPageSetup): BookFinding[] {
|
||||
const pageArea = page.pageWidth * page.pageHeight;
|
||||
if (pageArea <= 0) return [];
|
||||
const out: BookFinding[] = [];
|
||||
for (const el of spread.elements) {
|
||||
if (el.kind !== 'photo' || el.photoId == null) continue;
|
||||
const look = photoLookOf(el);
|
||||
const what = [look.adjust ? 'adjustments' : null, look.duotone ? 'a duotone' : null].filter(Boolean);
|
||||
if (!what.length) continue;
|
||||
const share = (el.frame.w * el.frame.h) / pageArea;
|
||||
if (share < RASTER_EFFECT_SHARE) continue;
|
||||
out.push({
|
||||
code: 'raster_effect',
|
||||
severity: 'info',
|
||||
elementIds: [el.id],
|
||||
message: `photo ${el.id} carries ${what.join(' and ')} over ${Math.round(share * 100)}% of a page; filters print as a raster and can look softer than the original, drop them where the picture should stay sharp`,
|
||||
});
|
||||
}
|
||||
return out;
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import { bookVisiblePart, sortBookFindings } from './book-findings-design';
|
||||
import { photoLookChecks } from './book-findings-photo';
|
||||
import { stickerFindings } from './book-findings-sticker';
|
||||
import { bookFontFace } from './book-fonts';
|
||||
import { visibleSpread } from './book-groups';
|
||||
import type { BookPhotoInfo } from './book-ops-core';
|
||||
import type { BookFinding } from './book-ops.schema';
|
||||
import { photoZoomOf } from './book-photo-look';
|
||||
import type { BookElement, BookPageSetup, BookPhotoElement, BookSpread, BookTextElement } from './book.schema';
|
||||
|
||||
/**
|
||||
@@ -66,7 +68,8 @@ export function photoDpi(el: BookPhotoElement, info: BookPhotoInfo | undefined):
|
||||
el.fit === 'contain'
|
||||
? Math.min(el.frame.w / info.width, el.frame.h / info.height)
|
||||
: Math.max(el.frame.w / info.width, el.frame.h / info.height);
|
||||
return Math.round(25.4 / mmPerPx);
|
||||
// A zoomed picture spreads each pixel over that many times the paper.
|
||||
return Math.round(25.4 / (mmPerPx * photoZoomOf(el)));
|
||||
}
|
||||
|
||||
/** Average letter width per em at weight 400, per family: the catalogue's measure (book-fonts.data.ts). */
|
||||
@@ -504,6 +507,7 @@ export function spreadFindings(
|
||||
emptyFrames(ctx);
|
||||
overflow(ctx);
|
||||
photoChecks(ctx);
|
||||
ctx.out.push(...photoLookChecks(spread, page));
|
||||
parked(ctx);
|
||||
for (const f of stickerFindings(spread)) add(ctx, f);
|
||||
return sortBookFindings(ctx.out);
|
||||
|
||||
@@ -19,6 +19,7 @@ import {
|
||||
import { newStickerElement } from './book-ops-sticker';
|
||||
import { withShapePaint } from './book-paint';
|
||||
import type { BookPaint } from './book-paint.schema';
|
||||
import { BOOK_PHOTO_LOOK_KEYS } from './book-photo-look.schema';
|
||||
import {
|
||||
bookBadgeValue,
|
||||
bookCountryMark,
|
||||
@@ -139,6 +140,7 @@ function statsOf(env: ElementOpEnv) {
|
||||
}
|
||||
|
||||
/** The look fields a kind takes, from the props schema, so `add` and `style` set exactly what `style` may set. */
|
||||
const PHOTO_LOOK_KEYS = new Set<string>(BOOK_PHOTO_LOOK_KEYS);
|
||||
const PROP_KEYS = new Map(bookElementPropsSchema.options.map((o) => [o.shape.kind.value, lookKeys(o.shape)]));
|
||||
|
||||
function lookKeys(shape: object): string[] {
|
||||
@@ -156,6 +158,11 @@ function withProps(el: BookElement, props: Record<string, unknown>): BookElement
|
||||
for (const key of keys) {
|
||||
const value = props[key];
|
||||
if (value === undefined || key === 'paint') continue;
|
||||
// A photo look part set to null is turned off, which leaves it out of the document.
|
||||
if (value === null && PHOTO_LOOK_KEYS.has(key)) {
|
||||
delete next[key];
|
||||
continue;
|
||||
}
|
||||
next[key] = (key === 'radius' || key === 'strokeWidth') && typeof value === 'number' ? round2(value) : value;
|
||||
}
|
||||
const made = withRealWeight(next as unknown as BookElement);
|
||||
|
||||
@@ -412,6 +412,7 @@ export const BOOK_FINDING_CODES = [
|
||||
'font_mix',
|
||||
'palette_drift',
|
||||
'repeat_layout',
|
||||
'raster_effect',
|
||||
] as const;
|
||||
export type BookFindingCode = (typeof BOOK_FINDING_CODES)[number];
|
||||
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* The photo look: what a picture wears beyond its crop, mask and frame style.
|
||||
*
|
||||
* - `border`: a band of one colour along the inside of the frame, `width`
|
||||
* millimetres deep, following the mask when the picture is cut to a shape
|
||||
* (the 3 to 6 mm white border of a postcard print).
|
||||
* - `shadow`: a hard copy of the picture's outline in one colour, offset by
|
||||
* `dx`/`dy` millimetres and drawn behind it at `alpha`. No blur, so it prints
|
||||
* as vector like everything else on the page.
|
||||
* - `zoom`: 1 to 4 times the crop the fit gives, centred on the focal point,
|
||||
* so the focal point keeps meaning what it meant.
|
||||
* - `flipX`: the picture mirrored left to right inside its frame; the frame,
|
||||
* the mask and the border stay as they are.
|
||||
* - `adjust`: brightness, contrast, saturation and warmth, each -1 to 1 with 0
|
||||
* as shot. Drawn as filters, so the picture prints as a raster.
|
||||
* - `duotone`: the picture's tones mapped from `dark` to `light`, also a
|
||||
* filter and also raster in print.
|
||||
* - `cutout`: a die-cut edge, the outline of the mask (or of the rounded
|
||||
* rectangle) grown by `width` millimetres and filled behind the picture: the
|
||||
* sticker look.
|
||||
*
|
||||
* Every field is optional and null means off, so a document from before them
|
||||
* reads as it always did and an older reader that drops them still draws the
|
||||
* picture. A value the reader cannot read falls back to off rather than
|
||||
* failing the photo or its page.
|
||||
*/
|
||||
|
||||
const hex = z.string().regex(/^#[0-9a-fA-F]{6}$/, 'expected #rrggbb');
|
||||
|
||||
/** The zoom range, against the crop the fit gives on its own. */
|
||||
export const PHOTO_ZOOM = { min: 1, max: 4 } as const;
|
||||
/** How deep a border or a cutout may be, in millimetres. */
|
||||
export const PHOTO_EDGE_MAX = 30;
|
||||
/** How far a hard shadow may fall, in millimetres either way. */
|
||||
export const PHOTO_SHADOW_REACH = 30;
|
||||
|
||||
type ObjectFactory = typeof z.object | typeof z.strictObject;
|
||||
|
||||
/**
|
||||
* The parts, built once for the document (plain objects, which drop a field
|
||||
* they do not know, as the rest of the document does) and once for the
|
||||
* operations (strict, as every operation is), so the two cannot drift.
|
||||
*/
|
||||
function lookSchemas(obj: ObjectFactory) {
|
||||
const edge = obj({ width: z.number().min(0.1).max(PHOTO_EDGE_MAX), color: hex });
|
||||
const reach = z.number().finite().min(-PHOTO_SHADOW_REACH).max(PHOTO_SHADOW_REACH);
|
||||
const signed = z.number().min(-1).max(1).optional();
|
||||
return {
|
||||
edge,
|
||||
shadow: obj({ dx: reach, dy: reach, color: hex, alpha: z.number().min(0).max(1) }),
|
||||
zoom: z.number().min(PHOTO_ZOOM.min).max(PHOTO_ZOOM.max),
|
||||
adjust: obj({ brightness: signed, contrast: signed, saturation: signed, warmth: signed }),
|
||||
duotone: obj({ dark: hex, light: hex }),
|
||||
};
|
||||
}
|
||||
|
||||
const doc = lookSchemas(z.object);
|
||||
|
||||
export const bookPhotoEdgeSchema = doc.edge;
|
||||
export const bookPhotoShadowSchema = doc.shadow;
|
||||
export const bookPhotoAdjustSchema = doc.adjust;
|
||||
export const bookPhotoDuotoneSchema = doc.duotone;
|
||||
export type BookPhotoEdge = z.infer<typeof bookPhotoEdgeSchema>;
|
||||
export type BookPhotoShadow = z.infer<typeof bookPhotoShadowSchema>;
|
||||
export type BookPhotoAdjust = z.infer<typeof bookPhotoAdjustSchema>;
|
||||
export type BookPhotoDuotone = z.infer<typeof bookPhotoDuotoneSchema>;
|
||||
|
||||
/** Optional, null for off, and off again when the stored value cannot be read. */
|
||||
const field = <T extends z.ZodType>(schema: T) => schema.nullable().optional().catch(undefined);
|
||||
|
||||
/** The fields a photo element carries, spread into its schema in book.schema.ts. */
|
||||
export const BOOK_PHOTO_LOOK_FIELDS = {
|
||||
border: field(doc.edge),
|
||||
shadow: field(doc.shadow),
|
||||
zoom: doc.zoom.optional().catch(undefined),
|
||||
flipX: z.boolean().optional().catch(undefined),
|
||||
adjust: field(doc.adjust),
|
||||
duotone: field(doc.duotone),
|
||||
cutout: field(doc.edge),
|
||||
};
|
||||
|
||||
/** The names of the look fields, for the operations that take any of them. */
|
||||
export const BOOK_PHOTO_LOOK_KEYS = Object.keys(BOOK_PHOTO_LOOK_FIELDS) as (keyof typeof BOOK_PHOTO_LOOK_FIELDS)[];
|
||||
|
||||
const ops = lookSchemas(z.strictObject);
|
||||
|
||||
/**
|
||||
* The look fields as the `style` operation takes them. Short descriptions on
|
||||
* purpose: the page edit's tool schema is held under a size ceiling.
|
||||
*/
|
||||
export const BOOK_PHOTO_LOOK_PROPS = {
|
||||
border: ops.edge.nullable().optional().describe('A band inside the frame edge, width mm; null removes it.'),
|
||||
shadow: ops.shadow.nullable().optional().describe('A hard offset shadow, dx/dy mm, alpha 0..1; null removes it.'),
|
||||
zoom: ops.zoom.optional().describe('1 to 4 times the crop, about the focal point.'),
|
||||
flipX: z.boolean().optional().describe('Mirror the picture left to right.'),
|
||||
adjust: ops.adjust
|
||||
.nullable()
|
||||
.optional()
|
||||
.describe('Each -1..1, 0 or left out is as shot; prints as raster. null resets.'),
|
||||
duotone: ops.duotone.nullable().optional().describe('Tones mapped from dark to light; prints as raster.'),
|
||||
cutout: ops.edge.nullable().optional().describe('A die-cut edge grown width mm around the shape, behind the photo.'),
|
||||
};
|
||||
@@ -0,0 +1,247 @@
|
||||
import { photoDpi, spreadFindings } from './book-findings';
|
||||
import { bookBusyUnder, bookPhotoCrop, bookVisiblePart } from './book-findings-design';
|
||||
import { photoLookChecks } from './book-findings-photo';
|
||||
import { normalizeBookDocument } from './book-normalize';
|
||||
import { applyBookOps } from './book-ops';
|
||||
import { bookPageOpSchema } from './book-ops.schema';
|
||||
import { blankBook } from './book-pages';
|
||||
import {
|
||||
PHOTO_LOOK_STARTS,
|
||||
photoAdjustOf,
|
||||
photoLookIsRaster,
|
||||
photoLookOf,
|
||||
photoLookWords,
|
||||
photoZoomBox,
|
||||
photoZoomOf,
|
||||
} from './book-photo-look';
|
||||
import { BOOK_PHOTO_LOOK_KEYS, PHOTO_ZOOM } from './book-photo-look.schema';
|
||||
import {
|
||||
bookPageSetupSchema,
|
||||
bookPhotoElementSchema,
|
||||
type BookDocument,
|
||||
type BookPhotoElement,
|
||||
type BookSpread,
|
||||
} from './book.schema';
|
||||
import { describeSpread } from './describe-spread';
|
||||
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
/**
|
||||
* The photo look: border, hard shadow, zoom, mirror, adjustments, duotone and
|
||||
* cutout. How the document reads them (and what it does with one it cannot
|
||||
* read), how the findings and the words for a model take them into account,
|
||||
* and how the page edit sets and clears them.
|
||||
*/
|
||||
|
||||
const frame = { x: 230, y: 20, w: 80, h: 60 };
|
||||
const photo = (over: Record<string, unknown> = {}): BookPhotoElement =>
|
||||
bookPhotoElementSchema.parse({ id: 'p1', kind: 'photo', frame, photoId: 1, ...over });
|
||||
const page = bookPageSetupSchema.parse({});
|
||||
const info = { photoId: 1, width: 4000, height: 3000 };
|
||||
|
||||
function book(elements: BookPhotoElement[]): BookDocument {
|
||||
const doc = blankBook({ title: 'Iceland', newId: (p) => `${p}-x` });
|
||||
const spreads = doc.spreads.map((s, i) => ({ ...s, id: i === 2 ? 'sp-in' : `sp-${i}` }));
|
||||
spreads[2] = { ...(spreads[2] as BookSpread), elements };
|
||||
return { ...doc, spreads };
|
||||
}
|
||||
const inner = (doc: BookDocument) => doc.spreads[2] as BookSpread;
|
||||
const style = (doc: BookDocument, set: Record<string, unknown>) =>
|
||||
applyBookOps(
|
||||
doc,
|
||||
{ spreadId: 'sp-in', ops: [{ op: 'style', elementId: 'p1', set: { kind: 'photo', ...set } }] },
|
||||
{
|
||||
newId: (p) => `${p}-n`,
|
||||
photos: [info],
|
||||
},
|
||||
);
|
||||
|
||||
describe('the photo look in the document', () => {
|
||||
it('BKLOOK-001: a photo from before the look reads with every part off', () => {
|
||||
const plain = photo();
|
||||
for (const key of BOOK_PHOTO_LOOK_KEYS) expect(plain[key]).toBeUndefined();
|
||||
expect(photoLookOf(plain)).toEqual({
|
||||
border: null,
|
||||
shadow: null,
|
||||
zoom: 1,
|
||||
flipX: false,
|
||||
adjust: null,
|
||||
duotone: null,
|
||||
cutout: null,
|
||||
});
|
||||
expect(photoLookIsRaster(plain)).toBe(false);
|
||||
expect(photoLookWords(plain)).toEqual([]);
|
||||
});
|
||||
|
||||
it('BKLOOK-002: keeps every part it can read, and turns off a part it cannot rather than losing the photo', () => {
|
||||
const look = {
|
||||
border: { width: 4, color: '#ffffff' },
|
||||
shadow: { dx: 2, dy: -1.5, color: '#1a1a1a', alpha: 0.4 },
|
||||
zoom: 1.8,
|
||||
flipX: true,
|
||||
adjust: { brightness: 0.2, warmth: -0.3 },
|
||||
duotone: { dark: '#1e3a8a', light: '#f5e6c8' },
|
||||
cutout: { width: 3, color: '#ffeedd' },
|
||||
};
|
||||
expect(photo(look)).toMatchObject(look);
|
||||
const odd = photo({
|
||||
border: { width: 900, color: '#fff' },
|
||||
zoom: 9,
|
||||
flipX: 'yes',
|
||||
adjust: { brightness: 4 },
|
||||
cutout: 'thick',
|
||||
duotone: null,
|
||||
});
|
||||
expect(odd.border).toBeUndefined();
|
||||
expect(odd.zoom).toBeUndefined();
|
||||
expect(odd.flipX).toBeUndefined();
|
||||
expect(odd.adjust).toBeUndefined();
|
||||
expect(odd.cutout).toBeUndefined();
|
||||
expect(odd.duotone).toBeNull();
|
||||
expect(odd.photoId).toBe(1);
|
||||
});
|
||||
|
||||
it('BKLOOK-003: a stored book with a look survives normalising whole', () => {
|
||||
const doc = book([photo({ border: { width: 5, color: '#ffffff' }, zoom: 2 })]);
|
||||
const read = normalizeBookDocument(JSON.parse(JSON.stringify(doc)));
|
||||
expect(inner(read).elements[0]).toMatchObject({ border: { width: 5, color: '#ffffff' }, zoom: 2 });
|
||||
});
|
||||
});
|
||||
|
||||
describe('reading the look', () => {
|
||||
it('BKLOOK-004: an adjustment that moves nothing is none, and a partial one names every part', () => {
|
||||
expect(photoAdjustOf(undefined)).toBeNull();
|
||||
expect(photoAdjustOf({ brightness: 0, contrast: 0 })).toBeNull();
|
||||
expect(photoAdjustOf({ contrast: 0.5 })).toEqual({ brightness: 0, contrast: 0.5, saturation: 0, warmth: 0 });
|
||||
expect(photoLookIsRaster(photo({ adjust: { saturation: -1 } }))).toBe(true);
|
||||
expect(photoLookIsRaster(photo({ duotone: PHOTO_LOOK_STARTS.duotone }))).toBe(true);
|
||||
expect(photoLookIsRaster(photo({ border: PHOTO_LOOK_STARTS.border, cutout: PHOTO_LOOK_STARTS.cutout }))).toBe(
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it('BKLOOK-005: the zoom stays inside its range, and the zoom box keeps the focal point where it was', () => {
|
||||
expect(photoZoomOf({ zoom: undefined })).toBe(PHOTO_ZOOM.min);
|
||||
expect(photoZoomOf({ zoom: Number.NaN })).toBe(PHOTO_ZOOM.min);
|
||||
expect(photoZoomOf({ zoom: 2.5 })).toBe(2.5);
|
||||
expect(photoZoomOf({ zoom: 12 })).toBe(PHOTO_ZOOM.max);
|
||||
expect(photoZoomBox(frame, 1, 0.3, 0.7)).toBe(frame);
|
||||
const box = photoZoomBox(frame, 2, 0.25, 0.75);
|
||||
expect(box).toEqual({ x: 210, y: -25, w: 160, h: 120 });
|
||||
// The focal point, as a fraction of the zoomed box, lands on the same place of the frame.
|
||||
expect(box.x + box.w * 0.25).toBe(frame.x + frame.w * 0.25);
|
||||
expect(box.y + box.h * 0.75).toBe(frame.y + frame.h * 0.75);
|
||||
});
|
||||
|
||||
it('BKLOOK-006: says every part a photo wears, with the filters marked as raster in print', () => {
|
||||
const words = photoLookWords(
|
||||
photo({
|
||||
border: { width: 4, color: '#ffffff' },
|
||||
shadow: { dx: 2, dy: 2.04, color: '#1a1a1a', alpha: 0.35 },
|
||||
zoom: 1.5,
|
||||
flipX: true,
|
||||
adjust: { brightness: 0.2, contrast: -0.1 },
|
||||
duotone: { dark: '#000000', light: '#ffffff' },
|
||||
cutout: { width: 3, color: '#ffffff' },
|
||||
}),
|
||||
);
|
||||
expect(words).toEqual([
|
||||
'border 4 mm #ffffff',
|
||||
'hard shadow 2/2 mm #1a1a1a at 35%',
|
||||
'zoom x1.5',
|
||||
'mirrored',
|
||||
'adjusted brightness +0.2 contrast -0.1 (raster in print)',
|
||||
'duotone #000000 to #ffffff (raster in print)',
|
||||
'cutout 3 mm #ffffff',
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the findings with a look', () => {
|
||||
it('BKLOOK-007: a zoomed picture prints at the resolution its zoom leaves it', () => {
|
||||
const plain = photoDpi(photo(), info);
|
||||
const zoomed = photoDpi(photo({ zoom: 2 }), info);
|
||||
expect(plain).toBe(1270);
|
||||
expect(zoomed).toBe(635);
|
||||
const big = photo({ frame: { x: 0, y: 0, w: 400, h: 300 }, zoom: 2 });
|
||||
expect(spreadFindings({ ...inner(book([big])) }, page, [info]).map((f) => f.code)).toContain('low_dpi');
|
||||
});
|
||||
|
||||
it('BKLOOK-008: the crop and the visible part follow the zoom, and a mirrored picture reads its busy grid mirrored', () => {
|
||||
const zoomed = photo({ zoom: 2, focalX: 0, focalY: 0 });
|
||||
expect(bookPhotoCrop(zoomed, info)).toEqual({ x: 230, y: 20, w: 160, h: 120 });
|
||||
expect(bookVisiblePart(zoomed, info)).toEqual({ x: 0, y: 0, w: 0.5, h: 0.5 });
|
||||
// Busy in the left quarter of the picture, calm everywhere else.
|
||||
const busy = 'ff000000'.repeat(8);
|
||||
const left = { x: 230, y: 20, w: 15, h: 60 };
|
||||
const square = { photoId: 1, width: 3000, height: 3000, busy };
|
||||
const sq = { frame: { x: 230, y: 20, w: 60, h: 60 } };
|
||||
expect(bookBusyUnder(photo(sq), square, left)).toBe(15);
|
||||
expect(bookBusyUnder(photo({ ...sq, flipX: true }), square, left)).toBe(0);
|
||||
});
|
||||
|
||||
it('BKLOOK-009: a filtered picture over a quarter of a page is worth a word, a small one and an unfiltered one are not', () => {
|
||||
const large = photo({ frame: { x: 230, y: 20, w: 150, h: 150 }, adjust: { contrast: 0.3 } });
|
||||
const both = photo({
|
||||
id: 'p2',
|
||||
frame: { x: 0, y: 0, w: 210, h: 210 },
|
||||
adjust: { warmth: 1 },
|
||||
duotone: PHOTO_LOOK_STARTS.duotone,
|
||||
});
|
||||
const small = photo({ id: 'p3', adjust: { contrast: 0.3 } });
|
||||
const plain = photo({ id: 'p4', frame: { x: 0, y: 0, w: 210, h: 210 } });
|
||||
const empty = photo({ id: 'p5', photoId: null, frame: { x: 0, y: 0, w: 210, h: 210 }, adjust: { contrast: 1 } });
|
||||
const spread = inner(book([large, both, small, plain, empty]));
|
||||
const found = photoLookChecks(spread, page);
|
||||
expect(found.map((f) => f.elementIds[0])).toEqual(['p1', 'p2']);
|
||||
expect(found[0]).toMatchObject({ code: 'raster_effect', severity: 'info' });
|
||||
expect(found[1]?.message).toContain('adjustments and a duotone');
|
||||
expect(found.every((f) => f.message.length <= 300)).toBe(true);
|
||||
expect(photoLookChecks(spread, { ...page, pageWidth: 0 })).toEqual([]);
|
||||
expect(spreadFindings(inner(book([large])), page).map((f) => f.code)).toContain('raster_effect');
|
||||
});
|
||||
|
||||
it('BKLOOK-010: describe-spread lists the look beside the crop', () => {
|
||||
const doc = book([photo({ border: { width: 4, color: '#ffffff' }, flipX: true })]);
|
||||
const text = describeSpread(doc, 'sp-in', [info])?.text ?? '';
|
||||
expect(text).toContain('border 4 mm #ffffff');
|
||||
expect(text).toContain('mirrored');
|
||||
});
|
||||
});
|
||||
|
||||
describe('setting the look from the page edit', () => {
|
||||
it('BKLOOK-011: style sets every part, and null turns a part off by leaving it out', () => {
|
||||
const set = {
|
||||
border: { width: 6, color: '#ffffff' },
|
||||
shadow: { dx: 3, dy: 3, color: '#000000', alpha: 0.5 },
|
||||
zoom: 1.4,
|
||||
flipX: true,
|
||||
adjust: { brightness: 0.1 },
|
||||
duotone: { dark: '#112233', light: '#ddeeff' },
|
||||
cutout: { width: 2, color: '#ffffff' },
|
||||
};
|
||||
const result = style(book([photo()]), set);
|
||||
if (!result.ok) throw new Error(result.error.message);
|
||||
expect(inner(result.doc).elements[0]).toMatchObject(set);
|
||||
|
||||
const off = style(result.doc, { border: null, shadow: null, adjust: null, duotone: null, cutout: null });
|
||||
if (!off.ok) throw new Error(off.error.message);
|
||||
const el = inner(off.doc).elements[0] as BookPhotoElement;
|
||||
for (const key of ['border', 'shadow', 'adjust', 'duotone', 'cutout']) expect(key in el).toBe(false);
|
||||
expect(el).toMatchObject({ zoom: 1.4, flipX: true });
|
||||
});
|
||||
|
||||
it('BKLOOK-012: the page edit refuses a look outside the format', () => {
|
||||
const op = (set: Record<string, unknown>) =>
|
||||
bookPageOpSchema.safeParse({ op: 'style', elementId: 'p1', set: { kind: 'photo', ...set } }).success;
|
||||
expect(op({ zoom: 2 })).toBe(true);
|
||||
expect(op({ zoom: 5 })).toBe(false);
|
||||
expect(op({ border: { width: 40, color: '#ffffff' } })).toBe(false);
|
||||
expect(op({ shadow: { dx: 2, dy: 2, color: '#000000', alpha: 2 } })).toBe(false);
|
||||
expect(op({ adjust: { brightness: 0.5, glow: 1 } })).toBe(false);
|
||||
expect(op({ duotone: { dark: 'navy', light: '#ffffff' } })).toBe(false);
|
||||
// The look is styled onto a frame that exists, so a new one takes none of it.
|
||||
const add = { op: 'add', element: { kind: 'photo', zoom: 2 } };
|
||||
expect(bookPageOpSchema.safeParse(add).success).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
BOOK_PHOTO_LOOK_KEYS,
|
||||
PHOTO_ZOOM,
|
||||
type BookPhotoAdjust,
|
||||
type BookPhotoDuotone,
|
||||
type BookPhotoEdge,
|
||||
type BookPhotoShadow,
|
||||
} from './book-photo-look.schema';
|
||||
import type { BookFrame, BookPhotoElement } from './book.schema';
|
||||
|
||||
/**
|
||||
* Reading the photo look (book-photo-look.schema.ts) the way the renderer,
|
||||
* the findings and the words for a model all read it: off where a field is
|
||||
* missing or null, an adjustment that changes nothing counted as none, the
|
||||
* zoom clamped to what the format allows.
|
||||
*/
|
||||
|
||||
/** The four adjustments, in the order the inspector lists them. */
|
||||
export const PHOTO_ADJUSTMENTS = ['brightness', 'contrast', 'saturation', 'warmth'] as const;
|
||||
export type PhotoAdjustment = (typeof PHOTO_ADJUSTMENTS)[number];
|
||||
|
||||
/** The look of one photo, every part resolved. */
|
||||
export interface PhotoLook {
|
||||
border: BookPhotoEdge | null;
|
||||
shadow: BookPhotoShadow | null;
|
||||
zoom: number;
|
||||
flipX: boolean;
|
||||
/** Null when every adjustment is 0. */
|
||||
adjust: Required<BookPhotoAdjust> | null;
|
||||
duotone: BookPhotoDuotone | null;
|
||||
cutout: BookPhotoEdge | null;
|
||||
}
|
||||
|
||||
type LookSource = Pick<BookPhotoElement, (typeof BOOK_PHOTO_LOOK_KEYS)[number]>;
|
||||
|
||||
/** The adjustments with every one named, or null when none of them moves the picture. */
|
||||
export function photoAdjustOf(adjust: BookPhotoAdjust | null | undefined): Required<BookPhotoAdjust> | null {
|
||||
if (!adjust) return null;
|
||||
const full = {
|
||||
brightness: adjust.brightness ?? 0,
|
||||
contrast: adjust.contrast ?? 0,
|
||||
saturation: adjust.saturation ?? 0,
|
||||
warmth: adjust.warmth ?? 0,
|
||||
};
|
||||
return PHOTO_ADJUSTMENTS.some((k) => full[k] !== 0) ? full : null;
|
||||
}
|
||||
|
||||
/** The zoom a photo is drawn at: 1 when unset, inside the format's range otherwise. */
|
||||
export function photoZoomOf(el: Pick<BookPhotoElement, 'zoom'>): number {
|
||||
const z = el.zoom;
|
||||
if (typeof z !== 'number' || !Number.isFinite(z)) return PHOTO_ZOOM.min;
|
||||
return Math.min(PHOTO_ZOOM.max, Math.max(PHOTO_ZOOM.min, z));
|
||||
}
|
||||
|
||||
export function photoLookOf(el: LookSource): PhotoLook {
|
||||
return {
|
||||
border: el.border ?? null,
|
||||
shadow: el.shadow ?? null,
|
||||
zoom: photoZoomOf(el),
|
||||
flipX: el.flipX === true,
|
||||
adjust: photoAdjustOf(el.adjust),
|
||||
duotone: el.duotone ?? null,
|
||||
cutout: el.cutout ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
/** Whether the look draws the picture through a filter, which prints it as a raster. */
|
||||
export function photoLookIsRaster(el: LookSource): boolean {
|
||||
const look = photoLookOf(el);
|
||||
return look.adjust !== null || look.duotone !== null;
|
||||
}
|
||||
|
||||
/**
|
||||
* The box the picture is fitted into, in the frame's own coordinates: the
|
||||
* frame itself at zoom 1, and at zoom z a box z times its size placed so the
|
||||
* focal point sits where it sat. That is what keeps a focal point meaning the
|
||||
* same part of the picture at every zoom.
|
||||
*/
|
||||
export function photoZoomBox(frame: BookFrame, zoom: number, focalX: number, focalY: number): BookFrame {
|
||||
if (zoom <= 1) return frame;
|
||||
return {
|
||||
x: frame.x - (zoom - 1) * frame.w * focalX,
|
||||
y: frame.y - (zoom - 1) * frame.h * focalY,
|
||||
w: frame.w * zoom,
|
||||
h: frame.h * zoom,
|
||||
};
|
||||
}
|
||||
|
||||
const n = (v: number) => `${Math.round(v * 10) / 10}`;
|
||||
const signed = (v: number) => `${v > 0 ? '+' : ''}${Math.round(v * 100) / 100}`;
|
||||
|
||||
/** The look in words, for a model reading a page; empty when the photo wears none of it. */
|
||||
export function photoLookWords(el: LookSource): string[] {
|
||||
const look = photoLookOf(el);
|
||||
const parts: string[] = [];
|
||||
if (look.border) parts.push(`border ${n(look.border.width)} mm ${look.border.color}`);
|
||||
if (look.shadow) {
|
||||
const s = look.shadow;
|
||||
parts.push(`hard shadow ${n(s.dx)}/${n(s.dy)} mm ${s.color} at ${Math.round(s.alpha * 100)}%`);
|
||||
}
|
||||
if (look.zoom > 1) parts.push(`zoom x${Math.round(look.zoom * 100) / 100}`);
|
||||
if (look.flipX) parts.push('mirrored');
|
||||
if (look.adjust) {
|
||||
const a = look.adjust;
|
||||
const moved = PHOTO_ADJUSTMENTS.filter((k) => a[k] !== 0).map((k) => `${k} ${signed(a[k])}`);
|
||||
parts.push(`adjusted ${moved.join(' ')} (raster in print)`);
|
||||
}
|
||||
if (look.duotone) parts.push(`duotone ${look.duotone.dark} to ${look.duotone.light} (raster in print)`);
|
||||
if (look.cutout) parts.push(`cutout ${n(look.cutout.width)} mm ${look.cutout.color}`);
|
||||
return parts;
|
||||
}
|
||||
|
||||
/**
|
||||
* Where a part of the look starts when someone turns it on: a white print
|
||||
* border, a soft-black shadow down and to the right, a white die-cut edge,
|
||||
* and a navy to sand duotone. Print ink, not app chrome, which is why they
|
||||
* live here rather than in the theme.
|
||||
*/
|
||||
export const PHOTO_LOOK_STARTS = {
|
||||
border: { width: 4, color: '#ffffff' },
|
||||
shadow: { dx: 2, dy: 2, color: '#1a1a1a', alpha: 0.35 },
|
||||
cutout: { width: 3, color: '#ffffff' },
|
||||
duotone: { dark: '#1e3a8a', light: '#f5e6c8' },
|
||||
} as const satisfies {
|
||||
border: BookPhotoEdge;
|
||||
shadow: BookPhotoShadow;
|
||||
cutout: BookPhotoEdge;
|
||||
duotone: BookPhotoDuotone;
|
||||
};
|
||||
|
||||
/** The duotones the inspector offers in one press, dark ink first: navy on sand, ink on paper, plum, forest, wine. */
|
||||
export const PHOTO_DUOTONES = [
|
||||
{ dark: '#1e3a8a', light: '#f5e6c8' },
|
||||
{ dark: '#141414', light: '#f4efe6' },
|
||||
{ dark: '#4c1d95', light: '#fbcfb8' },
|
||||
{ dark: '#0f3d2e', light: '#e6efd6' },
|
||||
{ dark: '#9f1239', light: '#fde68a' },
|
||||
] as const satisfies readonly BookPhotoDuotone[];
|
||||
@@ -35,8 +35,9 @@ import type { BookDocument } from './book.schema';
|
||||
* - 3: paint on shapes and pages (`paint`, `backgroundPaint`, book-paint.schema.ts).
|
||||
* - 4: the sticker kind (book-sticker.ts, stickers/).
|
||||
* - 5: groups, names and hidden layers (`group`, `name`, `hidden`, a spread's `groups`).
|
||||
* - 6: the photo look (`border`, `shadow`, `zoom`, `flipX`, `adjust`, `duotone`, `cutout`, book-photo-look.schema.ts).
|
||||
*/
|
||||
export const BOOK_SCHEMA_REV = 5;
|
||||
export const BOOK_SCHEMA_REV = 6;
|
||||
|
||||
/** The `code` a refused save carries in its body when the stored book is newer than the writer. */
|
||||
export const BOOK_SCHEMA_NEWER_CODE = 'book_schema_newer';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { BOOK_FONTS_IDS, BOOK_WEIGHTS, type BookFontFamily } from './book-fonts.data';
|
||||
import { bookPaintFieldSchema } from './book-paint.schema';
|
||||
import { BOOK_PHOTO_LOOK_FIELDS } from './book-photo-look.schema';
|
||||
import { MAX_STICKER_SLOTS } from './stickers/sticker-types';
|
||||
|
||||
import { z } from 'zod';
|
||||
@@ -253,6 +254,8 @@ export const bookPhotoElementSchema = z.object({
|
||||
* and it is the one thing you cannot express with either.
|
||||
*/
|
||||
frameStyle: z.enum(['none', 'polaroid', 'white', 'shadow', 'film', 'tape']).default('none'),
|
||||
/** Border, hard shadow, zoom, mirror, adjustments, duotone and cutout (book-photo-look.schema.ts). */
|
||||
...BOOK_PHOTO_LOOK_FIELDS,
|
||||
});
|
||||
|
||||
export const bookTextElementSchema = z.object({
|
||||
|
||||
@@ -13,6 +13,7 @@ import type {
|
||||
BookSpreadSummary,
|
||||
} from './book-ops.schema';
|
||||
import { paintWords } from './book-paint';
|
||||
import { photoLookWords } from './book-photo-look';
|
||||
import { bookStickerWords } from './book-sticker';
|
||||
import {
|
||||
bookPageSetupSchema,
|
||||
@@ -78,6 +79,7 @@ function photoWords(el: BookPhotoElement, info: BookPhotoInfo | undefined): stri
|
||||
if (el.mask) parts.push(`mask ${el.mask}`);
|
||||
if (el.frameStyle !== 'none') parts.push(`frame style ${el.frameStyle}`);
|
||||
if (el.radius > 0) parts.push(`radius ${n(el.radius)}`);
|
||||
parts.push(...photoLookWords(el));
|
||||
return parts.join(', ');
|
||||
}
|
||||
|
||||
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'التكبير',
|
||||
'journey.studio.photo.flip': 'عكس الصورة',
|
||||
'journey.studio.photo.dpi': 'تُطبع بدقة {dpi} نقطة لكل بوصة تقريبًا',
|
||||
'journey.studio.photo.dpiLow': 'دون {min} نقطة لكل بوصة تبدو الطباعة باهتة. صغّر الإطار أو قلّل التكبير.',
|
||||
'journey.studio.photo.edges': 'الحد والظل',
|
||||
'journey.studio.photo.border': 'الحد',
|
||||
'journey.studio.photo.width': 'العرض',
|
||||
'journey.studio.photo.shadow': 'ظل حاد',
|
||||
'journey.studio.photo.dx': 'أفقيًا',
|
||||
'journey.studio.photo.dy': 'عموديًا',
|
||||
'journey.studio.photo.cutout': 'حافة القص',
|
||||
'journey.studio.photo.adjust': 'ضبط',
|
||||
'journey.studio.photo.brightness': 'السطوع',
|
||||
'journey.studio.photo.contrast': 'التباين',
|
||||
'journey.studio.photo.saturation': 'التشبع',
|
||||
'journey.studio.photo.warmth': 'الدفء',
|
||||
'journey.studio.photo.reset': 'إعادة الضبط',
|
||||
'journey.studio.photo.rasterHint': 'تُطبع كصورة نقطية، مثل المرشحات.',
|
||||
'journey.studio.photo.duotone': 'لونان',
|
||||
'journey.studio.photo.duotoneDark': 'الظلال',
|
||||
'journey.studio.photo.duotoneLight': 'الإضاءات',
|
||||
'assistant.card.book.finding.raster_effect': 'مرشحات على صورة كبيرة',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Böyütmə',
|
||||
'journey.studio.photo.flip': 'Güzgü kimi çevir',
|
||||
'journey.studio.photo.dpi': 'Təxminən {dpi} dpi ilə çap olunur',
|
||||
'journey.studio.photo.dpiLow': '{min} dpi-dən aşağı çap yumşaq görünür. Çərçivəni kiçildin və ya uzaqlaşdırın.',
|
||||
'journey.studio.photo.edges': 'Haşiyə və kölgə',
|
||||
'journey.studio.photo.border': 'Haşiyə',
|
||||
'journey.studio.photo.width': 'En',
|
||||
'journey.studio.photo.shadow': 'Sərt kölgə',
|
||||
'journey.studio.photo.dx': 'Üfüqi',
|
||||
'journey.studio.photo.dy': 'Şaquli',
|
||||
'journey.studio.photo.cutout': 'Kəsim haşiyəsi',
|
||||
'journey.studio.photo.adjust': 'Tənzimlə',
|
||||
'journey.studio.photo.brightness': 'Parlaqlıq',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Doyğunluq',
|
||||
'journey.studio.photo.warmth': 'İstilik',
|
||||
'journey.studio.photo.reset': 'Sıfırla',
|
||||
'journey.studio.photo.rasterHint': 'Filtrlər kimi raster şəkil olaraq çap olunur.',
|
||||
'journey.studio.photo.duotone': 'İkiton',
|
||||
'journey.studio.photo.duotoneDark': 'Kölgələr',
|
||||
'journey.studio.photo.duotoneLight': 'İşıqlı yerlər',
|
||||
'assistant.card.book.finding.raster_effect': 'Böyük fotoda filtrlər',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Espelhar',
|
||||
'journey.studio.photo.dpi': 'Imprime a cerca de {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow':
|
||||
'Abaixo de {min} dpi a impressão fica suave demais. Diminua a moldura ou afaste o zoom.',
|
||||
'journey.studio.photo.edges': 'Borda e sombra',
|
||||
'journey.studio.photo.border': 'Borda',
|
||||
'journey.studio.photo.width': 'Largura',
|
||||
'journey.studio.photo.shadow': 'Sombra dura',
|
||||
'journey.studio.photo.dx': 'Horizontal',
|
||||
'journey.studio.photo.dy': 'Vertical',
|
||||
'journey.studio.photo.cutout': 'Borda recortada',
|
||||
'journey.studio.photo.adjust': 'Ajustar',
|
||||
'journey.studio.photo.brightness': 'Brilho',
|
||||
'journey.studio.photo.contrast': 'Contraste',
|
||||
'journey.studio.photo.saturation': 'Saturação',
|
||||
'journey.studio.photo.warmth': 'Calor',
|
||||
'journey.studio.photo.reset': 'Redefinir',
|
||||
'journey.studio.photo.rasterHint': 'É impressa como imagem rasterizada, como os filtros.',
|
||||
'journey.studio.photo.duotone': 'Duotônico',
|
||||
'journey.studio.photo.duotoneDark': 'Sombras',
|
||||
'journey.studio.photo.duotoneLight': 'Realces',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtros em uma foto grande',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -123,6 +124,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Emmiralla',
|
||||
'journey.studio.photo.dpi': 'S’imprimeix a uns {dpi} ppp',
|
||||
'journey.studio.photo.dpiLow':
|
||||
'Per sota de {min} ppp una impressió es veu tova. Fes el marc més petit o allunya el zoom.',
|
||||
'journey.studio.photo.edges': 'Vora i ombra',
|
||||
'journey.studio.photo.border': 'Vora',
|
||||
'journey.studio.photo.width': 'Amplada',
|
||||
'journey.studio.photo.shadow': 'Ombra dura',
|
||||
'journey.studio.photo.dx': 'Horitzontal',
|
||||
'journey.studio.photo.dy': 'Vertical',
|
||||
'journey.studio.photo.cutout': 'Vora retallada',
|
||||
'journey.studio.photo.adjust': 'Ajusta',
|
||||
'journey.studio.photo.brightness': 'Brillantor',
|
||||
'journey.studio.photo.contrast': 'Contrast', // same-as-en
|
||||
'journey.studio.photo.saturation': 'Saturació',
|
||||
'journey.studio.photo.warmth': 'Calidesa',
|
||||
'journey.studio.photo.reset': 'Restableix',
|
||||
'journey.studio.photo.rasterHint': 'S’imprimeix com a imatge ràster, com els filtres.',
|
||||
'journey.studio.photo.duotone': 'Duotò',
|
||||
'journey.studio.photo.duotoneDark': 'Ombres',
|
||||
'journey.studio.photo.duotoneLight': 'Llums',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtres en una foto gran',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Přiblížení',
|
||||
'journey.studio.photo.flip': 'Zrcadlit',
|
||||
'journey.studio.photo.dpi': 'Tiskne se zhruba v {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Pod {min} dpi vypadá tisk měkce. Zmenšete rámeček nebo oddalte.',
|
||||
'journey.studio.photo.edges': 'Okraj a stín',
|
||||
'journey.studio.photo.border': 'Okraj',
|
||||
'journey.studio.photo.width': 'Šířka',
|
||||
'journey.studio.photo.shadow': 'Ostrý stín',
|
||||
'journey.studio.photo.dx': 'Vodorovně',
|
||||
'journey.studio.photo.dy': 'Svisle',
|
||||
'journey.studio.photo.cutout': 'Vysekaný okraj',
|
||||
'journey.studio.photo.adjust': 'Úpravy',
|
||||
'journey.studio.photo.brightness': 'Jas',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Sytost',
|
||||
'journey.studio.photo.warmth': 'Teplota',
|
||||
'journey.studio.photo.reset': 'Obnovit',
|
||||
'journey.studio.photo.rasterHint': 'Tiskne se jako rastrový obrázek, stejně jako filtry.',
|
||||
'journey.studio.photo.duotone': 'Duotón',
|
||||
'journey.studio.photo.duotoneDark': 'Stíny',
|
||||
'journey.studio.photo.duotoneLight': 'Světla',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtry na velké fotce',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Spiegeln',
|
||||
'journey.studio.photo.dpi': 'Druckt mit etwa {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Unter {min} dpi wirkt ein Druck weich. Verkleinere den Rahmen oder zoome heraus.',
|
||||
'journey.studio.photo.edges': 'Rand und Schatten',
|
||||
'journey.studio.photo.border': 'Rand',
|
||||
'journey.studio.photo.width': 'Breite',
|
||||
'journey.studio.photo.shadow': 'Harter Schatten',
|
||||
'journey.studio.photo.dx': 'Seitlich',
|
||||
'journey.studio.photo.dy': 'Nach unten',
|
||||
'journey.studio.photo.cutout': 'Stanzrand',
|
||||
'journey.studio.photo.adjust': 'Anpassen',
|
||||
'journey.studio.photo.brightness': 'Helligkeit',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Sättigung',
|
||||
'journey.studio.photo.warmth': 'Wärme',
|
||||
'journey.studio.photo.reset': 'Zurücksetzen',
|
||||
'journey.studio.photo.rasterHint': 'Wird als Rasterbild gedruckt, wie die Filter.',
|
||||
'journey.studio.photo.duotone': 'Duoton',
|
||||
'journey.studio.photo.duotoneDark': 'Tiefen',
|
||||
'journey.studio.photo.duotoneLight': 'Lichter',
|
||||
'assistant.card.book.finding.raster_effect': 'Filter auf einem großen Foto',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom',
|
||||
'journey.studio.photo.flip': 'Mirror',
|
||||
'journey.studio.photo.dpi': 'Prints at about {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Under {min} dpi a print looks soft. Make the frame smaller or zoom out.',
|
||||
'journey.studio.photo.edges': 'Border and shadow',
|
||||
'journey.studio.photo.border': 'Border',
|
||||
'journey.studio.photo.width': 'Width',
|
||||
'journey.studio.photo.shadow': 'Hard shadow',
|
||||
'journey.studio.photo.dx': 'Across',
|
||||
'journey.studio.photo.dy': 'Down',
|
||||
'journey.studio.photo.cutout': 'Cutout edge',
|
||||
'journey.studio.photo.adjust': 'Adjust',
|
||||
'journey.studio.photo.brightness': 'Brightness',
|
||||
'journey.studio.photo.contrast': 'Contrast',
|
||||
'journey.studio.photo.saturation': 'Saturation',
|
||||
'journey.studio.photo.warmth': 'Warmth',
|
||||
'journey.studio.photo.reset': 'Reset',
|
||||
'journey.studio.photo.rasterHint': 'Prints as a raster image, like the filters.',
|
||||
'journey.studio.photo.duotone': 'Duotone',
|
||||
'journey.studio.photo.duotoneDark': 'Shadows',
|
||||
'journey.studio.photo.duotoneLight': 'Highlights',
|
||||
'assistant.card.book.finding.raster_effect': 'Filters on a large photo',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Reflejar',
|
||||
'journey.studio.photo.dpi': 'Se imprime a unos {dpi} ppp',
|
||||
'journey.studio.photo.dpiLow':
|
||||
'Por debajo de {min} ppp una impresión se ve borrosa. Reduce el marco o aleja el zoom.',
|
||||
'journey.studio.photo.edges': 'Borde y sombra',
|
||||
'journey.studio.photo.border': 'Borde',
|
||||
'journey.studio.photo.width': 'Ancho',
|
||||
'journey.studio.photo.shadow': 'Sombra dura',
|
||||
'journey.studio.photo.dx': 'Horizontal',
|
||||
'journey.studio.photo.dy': 'Vertical',
|
||||
'journey.studio.photo.cutout': 'Borde troquelado',
|
||||
'journey.studio.photo.adjust': 'Ajustar',
|
||||
'journey.studio.photo.brightness': 'Brillo',
|
||||
'journey.studio.photo.contrast': 'Contraste',
|
||||
'journey.studio.photo.saturation': 'Saturación',
|
||||
'journey.studio.photo.warmth': 'Calidez',
|
||||
'journey.studio.photo.reset': 'Restablecer',
|
||||
'journey.studio.photo.rasterHint': 'Se imprime como imagen rasterizada, igual que los filtros.',
|
||||
'journey.studio.photo.duotone': 'Duotono',
|
||||
'journey.studio.photo.duotoneDark': 'Sombras',
|
||||
'journey.studio.photo.duotoneLight': 'Luces',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtros en una foto grande',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Suum',
|
||||
'journey.studio.photo.flip': 'Peegelda',
|
||||
'journey.studio.photo.dpi': 'Trükitakse umbes {dpi} dpi-ga',
|
||||
'journey.studio.photo.dpiLow': 'Alla {min} dpi näeb trükk pehme välja. Tee raam väiksemaks või suumi välja.',
|
||||
'journey.studio.photo.edges': 'Ääris ja vari',
|
||||
'journey.studio.photo.border': 'Ääris',
|
||||
'journey.studio.photo.width': 'Laius',
|
||||
'journey.studio.photo.shadow': 'Terav vari',
|
||||
'journey.studio.photo.dx': 'Külgsuunas',
|
||||
'journey.studio.photo.dy': 'Allapoole',
|
||||
'journey.studio.photo.cutout': 'Väljalõike serv',
|
||||
'journey.studio.photo.adjust': 'Kohanda',
|
||||
'journey.studio.photo.brightness': 'Heledus',
|
||||
'journey.studio.photo.contrast': 'Kontrastsus',
|
||||
'journey.studio.photo.saturation': 'Küllastus',
|
||||
'journey.studio.photo.warmth': 'Soojus',
|
||||
'journey.studio.photo.reset': 'Lähtesta',
|
||||
'journey.studio.photo.rasterHint': 'Trükitakse rasterpildina, nagu filtridki.',
|
||||
'journey.studio.photo.duotone': 'Duotoon',
|
||||
'journey.studio.photo.duotoneDark': 'Varjud',
|
||||
'journey.studio.photo.duotoneLight': 'Heledad toonid',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtrid suurel fotol',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Miroir',
|
||||
'journey.studio.photo.dpi': 'Imprimée à environ {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Sous {min} dpi, un tirage paraît flou. Réduisez le cadre ou dézoomez.',
|
||||
'journey.studio.photo.edges': 'Bordure et ombre',
|
||||
'journey.studio.photo.border': 'Bordure',
|
||||
'journey.studio.photo.width': 'Largeur',
|
||||
'journey.studio.photo.shadow': 'Ombre nette',
|
||||
'journey.studio.photo.dx': 'Horizontal',
|
||||
'journey.studio.photo.dy': 'Vertical',
|
||||
'journey.studio.photo.cutout': 'Contour découpé',
|
||||
'journey.studio.photo.adjust': 'Ajuster',
|
||||
'journey.studio.photo.brightness': 'Luminosité',
|
||||
'journey.studio.photo.contrast': 'Contraste',
|
||||
'journey.studio.photo.saturation': 'Saturation', // same-as-en
|
||||
'journey.studio.photo.warmth': 'Chaleur',
|
||||
'journey.studio.photo.reset': 'Réinitialiser',
|
||||
'journey.studio.photo.rasterHint': 'S’imprime en image matricielle, comme les filtres.',
|
||||
'journey.studio.photo.duotone': 'Bichromie',
|
||||
'journey.studio.photo.duotoneDark': 'Ombres',
|
||||
'journey.studio.photo.duotoneLight': 'Hautes lumières',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtres sur une grande photo',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Μεγέθυνση',
|
||||
'journey.studio.photo.flip': 'Κατοπτρισμός',
|
||||
'journey.studio.photo.dpi': 'Τυπώνεται σε περίπου {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Κάτω από {min} dpi η εκτύπωση δείχνει θολή. Μίκρυνε το πλαίσιο ή κάνε σμίκρυνση.',
|
||||
'journey.studio.photo.edges': 'Περίγραμμα και σκιά',
|
||||
'journey.studio.photo.border': 'Περίγραμμα',
|
||||
'journey.studio.photo.width': 'Πλάτος',
|
||||
'journey.studio.photo.shadow': 'Σκληρή σκιά',
|
||||
'journey.studio.photo.dx': 'Οριζόντια',
|
||||
'journey.studio.photo.dy': 'Κάθετα',
|
||||
'journey.studio.photo.cutout': 'Περίγραμμα κοπής',
|
||||
'journey.studio.photo.adjust': 'Προσαρμογή',
|
||||
'journey.studio.photo.brightness': 'Φωτεινότητα',
|
||||
'journey.studio.photo.contrast': 'Αντίθεση',
|
||||
'journey.studio.photo.saturation': 'Κορεσμός',
|
||||
'journey.studio.photo.warmth': 'Θερμότητα',
|
||||
'journey.studio.photo.reset': 'Επαναφορά',
|
||||
'journey.studio.photo.rasterHint': 'Τυπώνεται ως εικόνα ράστερ, όπως τα φίλτρα.',
|
||||
'journey.studio.photo.duotone': 'Δίτονο',
|
||||
'journey.studio.photo.duotoneDark': 'Σκιές',
|
||||
'journey.studio.photo.duotoneLight': 'Φωτεινά σημεία',
|
||||
'assistant.card.book.finding.raster_effect': 'Φίλτρα σε μεγάλη φωτογραφία',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Nagyítás',
|
||||
'journey.studio.photo.flip': 'Tükrözés',
|
||||
'journey.studio.photo.dpi': 'Körülbelül {dpi} dpi-vel nyomtatódik',
|
||||
'journey.studio.photo.dpiLow': '{min} dpi alatt a nyomat lágynak hat. Kicsinyítsd a keretet, vagy nagyíts ki.',
|
||||
'journey.studio.photo.edges': 'Szegély és árnyék',
|
||||
'journey.studio.photo.border': 'Szegély',
|
||||
'journey.studio.photo.width': 'Szélesség',
|
||||
'journey.studio.photo.shadow': 'Éles árnyék',
|
||||
'journey.studio.photo.dx': 'Vízszintesen',
|
||||
'journey.studio.photo.dy': 'Függőlegesen',
|
||||
'journey.studio.photo.cutout': 'Kivágott szegély',
|
||||
'journey.studio.photo.adjust': 'Beállítás',
|
||||
'journey.studio.photo.brightness': 'Fényerő',
|
||||
'journey.studio.photo.contrast': 'Kontraszt',
|
||||
'journey.studio.photo.saturation': 'Telítettség',
|
||||
'journey.studio.photo.warmth': 'Melegség',
|
||||
'journey.studio.photo.reset': 'Visszaállítás',
|
||||
'journey.studio.photo.rasterHint': 'Raszteres képként nyomtatódik, mint a szűrők.',
|
||||
'journey.studio.photo.duotone': 'Duotónus',
|
||||
'journey.studio.photo.duotoneDark': 'Árnyékok',
|
||||
'journey.studio.photo.duotoneLight': 'Csúcsfények',
|
||||
'assistant.card.book.finding.raster_effect': 'Szűrők egy nagy fotón',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Perbesar',
|
||||
'journey.studio.photo.flip': 'Cerminkan',
|
||||
'journey.studio.photo.dpi': 'Dicetak sekitar {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Di bawah {min} dpi hasil cetak tampak lembut. Perkecil bingkai atau perkecil zoom.',
|
||||
'journey.studio.photo.edges': 'Bingkai dan bayangan',
|
||||
'journey.studio.photo.border': 'Bingkai',
|
||||
'journey.studio.photo.width': 'Lebar',
|
||||
'journey.studio.photo.shadow': 'Bayangan tegas',
|
||||
'journey.studio.photo.dx': 'Mendatar',
|
||||
'journey.studio.photo.dy': 'Menurun',
|
||||
'journey.studio.photo.cutout': 'Tepi potongan',
|
||||
'journey.studio.photo.adjust': 'Sesuaikan',
|
||||
'journey.studio.photo.brightness': 'Kecerahan',
|
||||
'journey.studio.photo.contrast': 'Kontras',
|
||||
'journey.studio.photo.saturation': 'Saturasi',
|
||||
'journey.studio.photo.warmth': 'Kehangatan',
|
||||
'journey.studio.photo.reset': 'Atur ulang',
|
||||
'journey.studio.photo.rasterHint': 'Dicetak sebagai gambar raster, seperti filter.',
|
||||
'journey.studio.photo.duotone': 'Dua nada',
|
||||
'journey.studio.photo.duotoneDark': 'Bayangan',
|
||||
'journey.studio.photo.duotoneLight': 'Sorotan',
|
||||
'assistant.card.book.finding.raster_effect': 'Filter pada foto besar',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Specchia',
|
||||
'journey.studio.photo.dpi': 'Stampa a circa {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow':
|
||||
'Sotto i {min} dpi una stampa appare morbida. Rimpicciolisci la cornice o riduci lo zoom.',
|
||||
'journey.studio.photo.edges': 'Bordo e ombra',
|
||||
'journey.studio.photo.border': 'Bordo',
|
||||
'journey.studio.photo.width': 'Larghezza',
|
||||
'journey.studio.photo.shadow': 'Ombra netta',
|
||||
'journey.studio.photo.dx': 'In orizzontale',
|
||||
'journey.studio.photo.dy': 'In verticale',
|
||||
'journey.studio.photo.cutout': 'Bordo fustellato',
|
||||
'journey.studio.photo.adjust': 'Regola',
|
||||
'journey.studio.photo.brightness': 'Luminosità',
|
||||
'journey.studio.photo.contrast': 'Contrasto',
|
||||
'journey.studio.photo.saturation': 'Saturazione',
|
||||
'journey.studio.photo.warmth': 'Calore',
|
||||
'journey.studio.photo.reset': 'Ripristina',
|
||||
'journey.studio.photo.rasterHint': 'Viene stampata come immagine raster, come i filtri.',
|
||||
'journey.studio.photo.duotone': 'Bicromia',
|
||||
'journey.studio.photo.duotoneDark': 'Ombre',
|
||||
'journey.studio.photo.duotoneLight': 'Luci',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtri su una foto grande',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'ズーム',
|
||||
'journey.studio.photo.flip': '左右反転',
|
||||
'journey.studio.photo.dpi': '約 {dpi} dpi で印刷されます',
|
||||
'journey.studio.photo.dpiLow': '{min} dpi を下回ると印刷がぼやけて見えます。枠を小さくするかズームを下げてください。',
|
||||
'journey.studio.photo.edges': 'フチと影',
|
||||
'journey.studio.photo.border': 'フチ',
|
||||
'journey.studio.photo.width': '幅',
|
||||
'journey.studio.photo.shadow': 'くっきりした影',
|
||||
'journey.studio.photo.dx': '横',
|
||||
'journey.studio.photo.dy': '縦',
|
||||
'journey.studio.photo.cutout': '切り抜きのフチ',
|
||||
'journey.studio.photo.adjust': '調整',
|
||||
'journey.studio.photo.brightness': '明るさ',
|
||||
'journey.studio.photo.contrast': 'コントラスト',
|
||||
'journey.studio.photo.saturation': '彩度',
|
||||
'journey.studio.photo.warmth': '暖かさ',
|
||||
'journey.studio.photo.reset': 'リセット',
|
||||
'journey.studio.photo.rasterHint': 'フィルターと同じく、ラスター画像として印刷されます。',
|
||||
'journey.studio.photo.duotone': 'ダブルトーン',
|
||||
'journey.studio.photo.duotoneDark': 'シャドウ',
|
||||
'journey.studio.photo.duotoneLight': 'ハイライト',
|
||||
'assistant.card.book.finding.raster_effect': '大きな写真のフィルター',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': '확대',
|
||||
'journey.studio.photo.flip': '좌우 반전',
|
||||
'journey.studio.photo.dpi': '약 {dpi} dpi로 인쇄됩니다',
|
||||
'journey.studio.photo.dpiLow': '{min} dpi 미만이면 인쇄가 흐릿해 보입니다. 프레임을 줄이거나 축소하세요.',
|
||||
'journey.studio.photo.edges': '테두리와 그림자',
|
||||
'journey.studio.photo.border': '테두리',
|
||||
'journey.studio.photo.width': '너비',
|
||||
'journey.studio.photo.shadow': '선명한 그림자',
|
||||
'journey.studio.photo.dx': '가로',
|
||||
'journey.studio.photo.dy': '세로',
|
||||
'journey.studio.photo.cutout': '오려낸 테두리',
|
||||
'journey.studio.photo.adjust': '조정',
|
||||
'journey.studio.photo.brightness': '밝기',
|
||||
'journey.studio.photo.contrast': '대비',
|
||||
'journey.studio.photo.saturation': '채도',
|
||||
'journey.studio.photo.warmth': '따뜻함',
|
||||
'journey.studio.photo.reset': '초기화',
|
||||
'journey.studio.photo.rasterHint': '필터처럼 래스터 이미지로 인쇄됩니다.',
|
||||
'journey.studio.photo.duotone': '듀오톤',
|
||||
'journey.studio.photo.duotoneDark': '어두운 영역',
|
||||
'journey.studio.photo.duotoneLight': '밝은 영역',
|
||||
'assistant.card.book.finding.raster_effect': '큰 사진의 필터',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Spiegelen',
|
||||
'journey.studio.photo.dpi': 'Wordt gedrukt op ongeveer {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Onder {min} dpi oogt een afdruk zacht. Maak het kader kleiner of zoom uit.',
|
||||
'journey.studio.photo.edges': 'Rand en schaduw',
|
||||
'journey.studio.photo.border': 'Rand',
|
||||
'journey.studio.photo.width': 'Breedte',
|
||||
'journey.studio.photo.shadow': 'Harde schaduw',
|
||||
'journey.studio.photo.dx': 'Horizontaal',
|
||||
'journey.studio.photo.dy': 'Verticaal',
|
||||
'journey.studio.photo.cutout': 'Snijrand',
|
||||
'journey.studio.photo.adjust': 'Aanpassen',
|
||||
'journey.studio.photo.brightness': 'Helderheid',
|
||||
'journey.studio.photo.contrast': 'Contrast', // same-as-en
|
||||
'journey.studio.photo.saturation': 'Verzadiging',
|
||||
'journey.studio.photo.warmth': 'Warmte',
|
||||
'journey.studio.photo.reset': 'Herstellen',
|
||||
'journey.studio.photo.rasterHint': 'Wordt als rasterafbeelding gedrukt, net als de filters.',
|
||||
'journey.studio.photo.duotone': 'Duotoon',
|
||||
'journey.studio.photo.duotoneDark': 'Schaduwen',
|
||||
'journey.studio.photo.duotoneLight': 'Hooglichten',
|
||||
'assistant.card.book.finding.raster_effect': 'Filters op een grote foto',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Powiększenie',
|
||||
'journey.studio.photo.flip': 'Odbij lustrzanie',
|
||||
'journey.studio.photo.dpi': 'Drukuje się w około {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Poniżej {min} dpi wydruk wygląda miękko. Zmniejsz ramkę albo oddal.',
|
||||
'journey.studio.photo.edges': 'Ramka i cień',
|
||||
'journey.studio.photo.border': 'Ramka',
|
||||
'journey.studio.photo.width': 'Szerokość',
|
||||
'journey.studio.photo.shadow': 'Ostry cień',
|
||||
'journey.studio.photo.dx': 'W poziomie',
|
||||
'journey.studio.photo.dy': 'W pionie',
|
||||
'journey.studio.photo.cutout': 'Krawędź wycięcia',
|
||||
'journey.studio.photo.adjust': 'Dostosuj',
|
||||
'journey.studio.photo.brightness': 'Jasność',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Nasycenie',
|
||||
'journey.studio.photo.warmth': 'Ciepło',
|
||||
'journey.studio.photo.reset': 'Resetuj',
|
||||
'journey.studio.photo.rasterHint': 'Drukuje się jako obraz rastrowy, tak jak filtry.',
|
||||
'journey.studio.photo.duotone': 'Duoton',
|
||||
'journey.studio.photo.duotoneDark': 'Cienie',
|
||||
'journey.studio.photo.duotoneLight': 'Światła',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtry na dużym zdjęciu',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Масштаб',
|
||||
'journey.studio.photo.flip': 'Отразить',
|
||||
'journey.studio.photo.dpi': 'Печатается примерно с {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Ниже {min} dpi отпечаток выглядит мягким. Уменьшите рамку или отдалите.',
|
||||
'journey.studio.photo.edges': 'Рамка и тень',
|
||||
'journey.studio.photo.border': 'Рамка',
|
||||
'journey.studio.photo.width': 'Ширина',
|
||||
'journey.studio.photo.shadow': 'Жёсткая тень',
|
||||
'journey.studio.photo.dx': 'По горизонтали',
|
||||
'journey.studio.photo.dy': 'По вертикали',
|
||||
'journey.studio.photo.cutout': 'Контур вырезки',
|
||||
'journey.studio.photo.adjust': 'Коррекция',
|
||||
'journey.studio.photo.brightness': 'Яркость',
|
||||
'journey.studio.photo.contrast': 'Контраст',
|
||||
'journey.studio.photo.saturation': 'Насыщенность',
|
||||
'journey.studio.photo.warmth': 'Теплота',
|
||||
'journey.studio.photo.reset': 'Сбросить',
|
||||
'journey.studio.photo.rasterHint': 'Печатается как растровое изображение, как и фильтры.',
|
||||
'journey.studio.photo.duotone': 'Дуотон',
|
||||
'journey.studio.photo.duotoneDark': 'Тени',
|
||||
'journey.studio.photo.duotoneLight': 'Света',
|
||||
'assistant.card.book.finding.raster_effect': 'Фильтры на большом фото',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Priblíženie',
|
||||
'journey.studio.photo.flip': 'Zrkadliť',
|
||||
'journey.studio.photo.dpi': 'Tlačí sa zhruba v {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Pod {min} dpi pôsobí tlač mäkko. Zmenšite rámček alebo oddiaľte.',
|
||||
'journey.studio.photo.edges': 'Okraj a tieň',
|
||||
'journey.studio.photo.border': 'Okraj',
|
||||
'journey.studio.photo.width': 'Šírka',
|
||||
'journey.studio.photo.shadow': 'Ostrý tieň',
|
||||
'journey.studio.photo.dx': 'Vodorovne',
|
||||
'journey.studio.photo.dy': 'Zvisle',
|
||||
'journey.studio.photo.cutout': 'Vysekaný okraj',
|
||||
'journey.studio.photo.adjust': 'Úpravy',
|
||||
'journey.studio.photo.brightness': 'Jas',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Sýtosť',
|
||||
'journey.studio.photo.warmth': 'Teplota',
|
||||
'journey.studio.photo.reset': 'Obnoviť',
|
||||
'journey.studio.photo.rasterHint': 'Tlačí sa ako rastrový obrázok, rovnako ako filtre.',
|
||||
'journey.studio.photo.duotone': 'Duotón',
|
||||
'journey.studio.photo.duotoneDark': 'Tiene',
|
||||
'journey.studio.photo.duotoneLight': 'Svetlá',
|
||||
'assistant.card.book.finding.raster_effect': 'Filtre na veľkej fotke',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Zoom', // same-as-en
|
||||
'journey.studio.photo.flip': 'Spegelvänd',
|
||||
'journey.studio.photo.dpi': 'Trycks med ungefär {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Under {min} dpi ser ett tryck mjukt ut. Gör ramen mindre eller zooma ut.',
|
||||
'journey.studio.photo.edges': 'Kant och skugga',
|
||||
'journey.studio.photo.border': 'Kant',
|
||||
'journey.studio.photo.width': 'Bredd',
|
||||
'journey.studio.photo.shadow': 'Hård skugga',
|
||||
'journey.studio.photo.dx': 'I sidled',
|
||||
'journey.studio.photo.dy': 'Nedåt',
|
||||
'journey.studio.photo.cutout': 'Stanskant',
|
||||
'journey.studio.photo.adjust': 'Justera',
|
||||
'journey.studio.photo.brightness': 'Ljusstyrka',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Mättnad',
|
||||
'journey.studio.photo.warmth': 'Värme',
|
||||
'journey.studio.photo.reset': 'Återställ',
|
||||
'journey.studio.photo.rasterHint': 'Trycks som rasterbild, precis som filtren.',
|
||||
'journey.studio.photo.duotone': 'Duoton',
|
||||
'journey.studio.photo.duotoneDark': 'Skuggor',
|
||||
'journey.studio.photo.duotoneLight': 'Högdagrar',
|
||||
'assistant.card.book.finding.raster_effect': 'Filter på ett stort foto',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'ซูม',
|
||||
'journey.studio.photo.flip': 'กลับด้าน',
|
||||
'journey.studio.photo.dpi': 'พิมพ์ที่ประมาณ {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'ต่ำกว่า {min} dpi งานพิมพ์จะดูไม่คม ลองย่อกรอบหรือซูมออก',
|
||||
'journey.studio.photo.edges': 'ขอบและเงา',
|
||||
'journey.studio.photo.border': 'ขอบ',
|
||||
'journey.studio.photo.width': 'ความกว้าง',
|
||||
'journey.studio.photo.shadow': 'เงาคม',
|
||||
'journey.studio.photo.dx': 'แนวนอน',
|
||||
'journey.studio.photo.dy': 'แนวตั้ง',
|
||||
'journey.studio.photo.cutout': 'ขอบตัด',
|
||||
'journey.studio.photo.adjust': 'ปรับแต่ง',
|
||||
'journey.studio.photo.brightness': 'ความสว่าง',
|
||||
'journey.studio.photo.contrast': 'คอนทราสต์',
|
||||
'journey.studio.photo.saturation': 'ความอิ่มตัว',
|
||||
'journey.studio.photo.warmth': 'ความอุ่น',
|
||||
'journey.studio.photo.reset': 'รีเซ็ต',
|
||||
'journey.studio.photo.rasterHint': 'พิมพ์เป็นภาพแรสเตอร์ เช่นเดียวกับฟิลเตอร์',
|
||||
'journey.studio.photo.duotone': 'ดูโอโทน',
|
||||
'journey.studio.photo.duotoneDark': 'เงามืด',
|
||||
'journey.studio.photo.duotoneLight': 'ส่วนสว่าง',
|
||||
'assistant.card.book.finding.raster_effect': 'ฟิลเตอร์บนรูปภาพขนาดใหญ่',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Yakınlaştırma',
|
||||
'journey.studio.photo.flip': 'Aynala',
|
||||
'journey.studio.photo.dpi': 'Yaklaşık {dpi} dpi ile basılır',
|
||||
'journey.studio.photo.dpiLow': '{min} dpi altında baskı yumuşak görünür. Çerçeveyi küçültün ya da uzaklaştırın.',
|
||||
'journey.studio.photo.edges': 'Kenarlık ve gölge',
|
||||
'journey.studio.photo.border': 'Kenarlık',
|
||||
'journey.studio.photo.width': 'Genişlik',
|
||||
'journey.studio.photo.shadow': 'Sert gölge',
|
||||
'journey.studio.photo.dx': 'Yatay',
|
||||
'journey.studio.photo.dy': 'Dikey',
|
||||
'journey.studio.photo.cutout': 'Kesim kenarı',
|
||||
'journey.studio.photo.adjust': 'Ayarla',
|
||||
'journey.studio.photo.brightness': 'Parlaklık',
|
||||
'journey.studio.photo.contrast': 'Kontrast',
|
||||
'journey.studio.photo.saturation': 'Doygunluk',
|
||||
'journey.studio.photo.warmth': 'Sıcaklık',
|
||||
'journey.studio.photo.reset': 'Sıfırla',
|
||||
'journey.studio.photo.rasterHint': 'Filtreler gibi raster görüntü olarak basılır.',
|
||||
'journey.studio.photo.duotone': 'Çift ton',
|
||||
'journey.studio.photo.duotoneDark': 'Gölgeler',
|
||||
'journey.studio.photo.duotoneLight': 'Parlak tonlar',
|
||||
'assistant.card.book.finding.raster_effect': 'Büyük bir fotoğrafta filtreler',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Масштаб',
|
||||
'journey.studio.photo.flip': 'Віддзеркалити',
|
||||
'journey.studio.photo.dpi': 'Друкується приблизно з {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Нижче {min} dpi відбиток виглядає м’яким. Зменште рамку або віддаліть.',
|
||||
'journey.studio.photo.edges': 'Рамка і тінь',
|
||||
'journey.studio.photo.border': 'Рамка',
|
||||
'journey.studio.photo.width': 'Ширина',
|
||||
'journey.studio.photo.shadow': 'Жорстка тінь',
|
||||
'journey.studio.photo.dx': 'По горизонталі',
|
||||
'journey.studio.photo.dy': 'По вертикалі',
|
||||
'journey.studio.photo.cutout': 'Контур вирізу',
|
||||
'journey.studio.photo.adjust': 'Корекція',
|
||||
'journey.studio.photo.brightness': 'Яскравість',
|
||||
'journey.studio.photo.contrast': 'Контраст',
|
||||
'journey.studio.photo.saturation': 'Насиченість',
|
||||
'journey.studio.photo.warmth': 'Теплота',
|
||||
'journey.studio.photo.reset': 'Скинути',
|
||||
'journey.studio.photo.rasterHint': 'Друкується як растрове зображення, як і фільтри.',
|
||||
'journey.studio.photo.duotone': 'Дуотон',
|
||||
'journey.studio.photo.duotoneDark': 'Тіні',
|
||||
'journey.studio.photo.duotoneLight': 'Світлі ділянки',
|
||||
'assistant.card.book.finding.raster_effect': 'Фільтри на великому фото',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': 'Thu phóng',
|
||||
'journey.studio.photo.flip': 'Lật gương',
|
||||
'journey.studio.photo.dpi': 'In ở khoảng {dpi} dpi',
|
||||
'journey.studio.photo.dpiLow': 'Dưới {min} dpi bản in trông mềm. Hãy thu nhỏ khung hoặc giảm thu phóng.',
|
||||
'journey.studio.photo.edges': 'Viền và bóng',
|
||||
'journey.studio.photo.border': 'Viền',
|
||||
'journey.studio.photo.width': 'Độ rộng',
|
||||
'journey.studio.photo.shadow': 'Bóng cứng',
|
||||
'journey.studio.photo.dx': 'Ngang',
|
||||
'journey.studio.photo.dy': 'Dọc',
|
||||
'journey.studio.photo.cutout': 'Viền cắt',
|
||||
'journey.studio.photo.adjust': 'Điều chỉnh',
|
||||
'journey.studio.photo.brightness': 'Độ sáng',
|
||||
'journey.studio.photo.contrast': 'Độ tương phản',
|
||||
'journey.studio.photo.saturation': 'Độ bão hòa',
|
||||
'journey.studio.photo.warmth': 'Độ ấm',
|
||||
'journey.studio.photo.reset': 'Đặt lại',
|
||||
'journey.studio.photo.rasterHint': 'In dưới dạng ảnh raster, giống như các bộ lọc.',
|
||||
'journey.studio.photo.duotone': 'Hai tông màu',
|
||||
'journey.studio.photo.duotoneDark': 'Vùng tối',
|
||||
'journey.studio.photo.duotoneLight': 'Vùng sáng',
|
||||
'assistant.card.book.finding.raster_effect': 'Bộ lọc trên một ảnh lớn',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -121,6 +122,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...notif,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': '縮放',
|
||||
'journey.studio.photo.flip': '鏡像',
|
||||
'journey.studio.photo.dpi': '約以 {dpi} dpi 列印',
|
||||
'journey.studio.photo.dpiLow': '低於 {min} dpi 時列印會顯得模糊。請縮小相框或拉遠畫面。',
|
||||
'journey.studio.photo.edges': '邊框與陰影',
|
||||
'journey.studio.photo.border': '邊框',
|
||||
'journey.studio.photo.width': '寬度',
|
||||
'journey.studio.photo.shadow': '硬陰影',
|
||||
'journey.studio.photo.dx': '水平',
|
||||
'journey.studio.photo.dy': '垂直',
|
||||
'journey.studio.photo.cutout': '裁切邊',
|
||||
'journey.studio.photo.adjust': '調整',
|
||||
'journey.studio.photo.brightness': '亮度',
|
||||
'journey.studio.photo.contrast': '對比',
|
||||
'journey.studio.photo.saturation': '飽和度',
|
||||
'journey.studio.photo.warmth': '色溫',
|
||||
'journey.studio.photo.reset': '重設',
|
||||
'journey.studio.photo.rasterHint': '與濾鏡一樣，以點陣圖像列印。',
|
||||
'journey.studio.photo.duotone': '雙色調',
|
||||
'journey.studio.photo.duotoneDark': '暗部',
|
||||
'journey.studio.photo.duotoneLight': '亮部',
|
||||
'assistant.card.book.finding.raster_effect': '大照片上的濾鏡',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -62,6 +62,7 @@ import storage from './storage';
|
||||
import studioFonts from './studioFonts';
|
||||
import studioLayers from './studioLayers';
|
||||
import studioPaint from './studioPaint';
|
||||
import studioPhoto from './studioPhoto';
|
||||
import studioStickers from './studioStickers';
|
||||
import system_notice from './system_notice';
|
||||
import todo from './todo';
|
||||
@@ -122,6 +123,7 @@ const locale = {
|
||||
...studioFonts,
|
||||
...studioPaint,
|
||||
...studioStickers,
|
||||
...studioPhoto,
|
||||
...oauth,
|
||||
...system_notice,
|
||||
...transport,
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
import type { TranslationStrings } from '../types';
|
||||
|
||||
/** TREK Studio: the photo look, its border, shadow, zoom, adjustments and duotone, and the print resolution. */
|
||||
const studioPhoto: TranslationStrings = {
|
||||
'journey.studio.photo.zoom': '缩放',
|
||||
'journey.studio.photo.flip': '镜像',
|
||||
'journey.studio.photo.dpi': '约以 {dpi} dpi 打印',
|
||||
'journey.studio.photo.dpiLow': '低于 {min} dpi 时打印会显得发虚。请缩小相框或缩小画面。',
|
||||
'journey.studio.photo.edges': '边框和阴影',
|
||||
'journey.studio.photo.border': '边框',
|
||||
'journey.studio.photo.width': '宽度',
|
||||
'journey.studio.photo.shadow': '硬阴影',
|
||||
'journey.studio.photo.dx': '水平',
|
||||
'journey.studio.photo.dy': '垂直',
|
||||
'journey.studio.photo.cutout': '裁切边',
|
||||
'journey.studio.photo.adjust': '调整',
|
||||
'journey.studio.photo.brightness': '亮度',
|
||||
'journey.studio.photo.contrast': '对比度',
|
||||
'journey.studio.photo.saturation': '饱和度',
|
||||
'journey.studio.photo.warmth': '色温',
|
||||
'journey.studio.photo.reset': '重置',
|
||||
'journey.studio.photo.rasterHint': '与滤镜一样，以位图图像打印。',
|
||||
'journey.studio.photo.duotone': '双色调',
|
||||
'journey.studio.photo.duotoneDark': '暗部',
|
||||
'journey.studio.photo.duotoneLight': '亮部',
|
||||
'assistant.card.book.finding.raster_effect': '大照片上的滤镜',
|
||||
};
|
||||
|
||||
export default studioPhoto;
|
||||
@@ -164,6 +164,8 @@ export * from './book/book-map-sources';
|
||||
export * from './book/book-colour';
|
||||
export * from './book/book-paint.schema';
|
||||
export * from './book/book-paint';
|
||||
export * from './book/book-photo-look.schema';
|
||||
export * from './book/book-photo-look';
|
||||
export * from './book/book-findings-design';
|
||||
export * from './book/book-groups';
|
||||
export * from './book/book-arrange';
|
||||
|
||||
Reference in New Issue
Block a user