mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-24 07:53:09 +00:00
Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Maurice
|
19ae607f54 |
@@ -53,54 +53,3 @@ own switch in the admin panel. https://cloud.google.com/maps-platform/terms
|
||||
|
||||
`server/assets/airports.json` is built from **OurAirports**
|
||||
(https://ourairports.com/data/), released into the public domain.
|
||||
|
||||
## Typefaces: Studio books and the app
|
||||
|
||||
Every typeface a book can be set in, and the app's own (Poppins, MuseoModerno,
|
||||
Geist), is self-hosted from the **@fontsource** npm packages, which redistribute
|
||||
the families published on Google Fonts split into subsets by script. The catalogue of book faces is
|
||||
`shared/src/book/book-fonts.data.ts`. Each package carries its licence and the
|
||||
copyright notice of the family's authors in its `LICENSE` file.
|
||||
|
||||
Both licences allow a font to be bundled with software and embedded in a
|
||||
document made with it, so a printed or exported book may carry the faces it is
|
||||
set in. No family is renamed, redrawn or sold on its own. SIL OFL 1.1: https://openfontlicense.org. Apache 2.0:
|
||||
https://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
| Family | Package | Licence |
|
||||
|---|---|---|
|
||||
| Abril Fatface | `@fontsource/abril-fatface` | SIL Open Font License 1.1 |
|
||||
| Alfa Slab One | `@fontsource/alfa-slab-one` | SIL Open Font License 1.1 |
|
||||
| Allura | `@fontsource/allura` | SIL Open Font License 1.1 |
|
||||
| Anton | `@fontsource/anton` | SIL Open Font License 1.1 |
|
||||
| Archivo Black | `@fontsource/archivo-black` | SIL Open Font License 1.1 |
|
||||
| Bebas Neue | `@fontsource/bebas-neue` | SIL Open Font License 1.1 |
|
||||
| Big Shoulders Display | `@fontsource/big-shoulders-display` | SIL Open Font License 1.1 |
|
||||
| Bodoni Moda | `@fontsource/bodoni-moda` | SIL Open Font License 1.1 |
|
||||
| Bricolage Grotesque | `@fontsource/bricolage-grotesque` | SIL Open Font License 1.1 |
|
||||
| Caveat | `@fontsource/caveat` | SIL Open Font License 1.1 |
|
||||
| Cormorant Garamond | `@fontsource/cormorant-garamond` | SIL Open Font License 1.1 |
|
||||
| Dancing Script | `@fontsource/dancing-script` | SIL Open Font License 1.1 |
|
||||
| DM Mono | `@fontsource/dm-mono` | SIL Open Font License 1.1 |
|
||||
| DM Serif Display | `@fontsource/dm-serif-display` | SIL Open Font License 1.1 |
|
||||
| EB Garamond | `@fontsource/eb-garamond` | SIL Open Font License 1.1 |
|
||||
| Fraunces | `@fontsource/fraunces` | SIL Open Font License 1.1 |
|
||||
| Great Vibes | `@fontsource/great-vibes` | SIL Open Font License 1.1 |
|
||||
| Homemade Apple | `@fontsource/homemade-apple` | Apache License 2.0 |
|
||||
| Inter | `@fontsource/inter` | SIL Open Font License 1.1 |
|
||||
| Kaushan Script | `@fontsource/kaushan-script` | SIL Open Font License 1.1 |
|
||||
| League Gothic | `@fontsource/league-gothic` | SIL Open Font License 1.1 |
|
||||
| Lora | `@fontsource/lora` | SIL Open Font License 1.1 |
|
||||
| Montserrat | `@fontsource/montserrat` | SIL Open Font License 1.1 |
|
||||
| MuseoModerno | `@fontsource/museomoderno` | SIL Open Font License 1.1 |
|
||||
| Oswald | `@fontsource/oswald` | SIL Open Font License 1.1 |
|
||||
| Pacifico | `@fontsource/pacifico` | SIL Open Font License 1.1 |
|
||||
| Parisienne | `@fontsource/parisienne` | SIL Open Font License 1.1 |
|
||||
| Permanent Marker | `@fontsource/permanent-marker` | Apache License 2.0 |
|
||||
| Playfair Display | `@fontsource/playfair-display` | SIL Open Font License 1.1 |
|
||||
| Poppins | `@fontsource/poppins` | SIL Open Font License 1.1 |
|
||||
| Sacramento | `@fontsource/sacramento` | SIL Open Font License 1.1 |
|
||||
| Satisfy | `@fontsource/satisfy` | Apache License 2.0 |
|
||||
| Shrikhand | `@fontsource/shrikhand` | SIL Open Font License 1.1 |
|
||||
| Yellowtail | `@fontsource/yellowtail` | Apache License 2.0 |
|
||||
| Geist Sans | `@fontsource/geist-sans` | SIL Open Font License 1.1 |
|
||||
|
||||
@@ -112,9 +112,6 @@ data:
|
||||
{{- if .Values.env.TREK_PLACES_URL }}
|
||||
TREK_PLACES_URL: {{ .Values.env.TREK_PLACES_URL | quote }}
|
||||
{{- end }}
|
||||
{{- if .Values.env.GOOGLE_LIST_DATA_BASE }}
|
||||
GOOGLE_LIST_DATA_BASE: {{ .Values.env.GOOGLE_LIST_DATA_BASE | quote }}
|
||||
{{- end }}
|
||||
{{- if .Values.env.AMAP_API_BASE }}
|
||||
AMAP_API_BASE: {{ .Values.env.AMAP_API_BASE | quote }}
|
||||
{{- end }}
|
||||
|
||||
@@ -108,7 +108,6 @@ env:
|
||||
# nothing there. There is no switch in the admin panel on purpose: whether searches leave the instance is decided
|
||||
# here. Defaults to on.
|
||||
# TREK_PLACES_URL: ""
|
||||
# GOOGLE_LIST_DATA_BASE: ""
|
||||
# Base URL of a copy of the Places API you run yourself; it has to answer the same /v1 API. Read from
|
||||
# configuration rather than typed by a user, so an in-cluster address works without ALLOW_INTERNAL_NETWORK.
|
||||
# Defaults to https://places.liketrek.com.
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import { BOOK_FONT_FACES, BOOK_FONTS_PRECACHED } from '@trek/shared';
|
||||
|
||||
/**
|
||||
* Which font files the service worker installs with the app.
|
||||
*
|
||||
* The precache takes every woff and woff2 the build emits, and with the book's
|
||||
* catalogue at thirty four families that is every weight, both styles and
|
||||
* every script subset of each: megabytes fetched at install by every user,
|
||||
* most of it for faces no book of theirs is set in. So the book's faces are
|
||||
* held to this:
|
||||
*
|
||||
* - The faces the app itself draws (Poppins and MuseoModerno for the chrome,
|
||||
* imported in src/main.tsx) stay exactly as they were.
|
||||
* - The faces the book shipped with before the catalogue grew
|
||||
* (`BOOK_FONTS_PRECACHED`) keep their latin woff2, so a book set in them
|
||||
* still opens offline before Studio was ever opened online.
|
||||
* - Every other file of a book family, woff, other subsets, new families,
|
||||
* real italics, is left to the `book-fonts` runtime cache in vite.config.js,
|
||||
* which the Studio fills with the faces of each book it opens
|
||||
* (src/components/Studio/bookFontWarm.ts).
|
||||
*
|
||||
* Shared by vite.config.js and its test, which reads the filter against file
|
||||
* names as the build writes them.
|
||||
*/
|
||||
|
||||
/** The faces src/main.tsx imports for the app chrome, which the book shares; bookFontPrecache.test.ts checks this copy. */
|
||||
export const APP_FACES = {
|
||||
poppins: [300, 400, 500, 600, 700],
|
||||
museomoderno: [400, 700, 800],
|
||||
};
|
||||
|
||||
/** The book packages, longest name first, so `dm-serif-display` is never read as `dm-…`. */
|
||||
const BOOK_PACKAGES = [...new Set(Object.values(BOOK_FONT_FACES).map((f) => f.pkg))].sort(
|
||||
(a, b) => b.length - a.length
|
||||
);
|
||||
|
||||
const PRECACHED = new Map(
|
||||
Object.entries(BOOK_FONTS_PRECACHED).map(([id, weights]) => [BOOK_FONT_FACES[id].pkg, new Set(weights)])
|
||||
);
|
||||
|
||||
/**
|
||||
* A font file as the build names it, `<package>-<subset>-<weight>-<style>-<hash>.<ext>`,
|
||||
* read against the book's packages; null for any other file.
|
||||
*/
|
||||
export function bookFontFile(url) {
|
||||
const name = url.split('/').pop() ?? '';
|
||||
const match = /^(.+)-(\d{3})-(normal|italic)-[\w-]+\.(woff2?)$/.exec(name);
|
||||
if (!match) return null;
|
||||
const [, head, weight, style, ext] = match;
|
||||
const pkg = BOOK_PACKAGES.find((p) => head.startsWith(`${p}-`));
|
||||
if (!pkg) return null;
|
||||
return { pkg, subset: head.slice(pkg.length + 1), weight: Number(weight), italic: style === 'italic', ext };
|
||||
}
|
||||
|
||||
/** Whether a file of the build goes into the install-time precache. */
|
||||
export function keepInPrecache(url) {
|
||||
const file = bookFontFile(url);
|
||||
if (!file) return true;
|
||||
if (!file.italic && APP_FACES[file.pkg]?.includes(file.weight)) return true;
|
||||
const kept = PRECACHED.get(file.pkg);
|
||||
return !file.italic && file.subset === 'latin' && file.ext === 'woff2' && !!kept?.has(file.weight);
|
||||
}
|
||||
|
||||
/** The precache manifest without the book faces left to the runtime cache: a Workbox `manifestTransforms` entry. */
|
||||
export function withoutRuntimeFonts(entries) {
|
||||
return { manifest: entries.filter((entry) => keepInPrecache(entry.url)), warnings: [] };
|
||||
}
|
||||
@@ -451,7 +451,7 @@ const releaseRecordedDay = (page: Page) => releaseJournalDawarich(page.request,
|
||||
// ── Studio ────────────────────────────────────────────────────────────────────
|
||||
|
||||
const rail = (page: Page) => page.locator('.st-rail')
|
||||
const railButton = (page: Page, name: string) => rail(page).getByRole('tab', { name, exact: true })
|
||||
const railButton = (page: Page, name: string) => rail(page).getByRole('button', { name, exact: true })
|
||||
const sidePanel = (page: Page) => page.locator('.st-panel.st-side')
|
||||
const inspector = (page: Page) => page.locator('.st-inspector')
|
||||
const studioMenu = (page: Page) => page.locator('.st-menu').last()
|
||||
@@ -1300,7 +1300,7 @@ const SCRIPTS: Record<string, GuideScript> = {
|
||||
},
|
||||
},
|
||||
{
|
||||
target: p => p.locator('.st-head-close'),
|
||||
target: p => p.locator('.st-back'),
|
||||
},
|
||||
],
|
||||
},
|
||||
@@ -1431,7 +1431,7 @@ const SCRIPTS: Record<string, GuideScript> = {
|
||||
},
|
||||
{
|
||||
prepare: async p => {
|
||||
await sidePanel(p).getByRole('tab', { name: /Entries/ }).click()
|
||||
await sidePanel(p).locator('.st-tabs button').filter({ hasText: 'Entries' }).click()
|
||||
await expect(sidePanel(p).locator('.st-entry').first()).toBeVisible()
|
||||
await settle(p)
|
||||
},
|
||||
|
||||
+1
-28
@@ -47,41 +47,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@assistant-ui/react": "0.15.25",
|
||||
"@fontsource/abril-fatface": "^5.3.0",
|
||||
"@fontsource/alfa-slab-one": "^5.3.0",
|
||||
"@fontsource/allura": "^5.3.0",
|
||||
"@fontsource/anton": "^5.3.0",
|
||||
"@fontsource/archivo-black": "^5.3.0",
|
||||
"@fontsource/bebas-neue": "^5.3.0",
|
||||
"@fontsource/big-shoulders-display": "^5.3.0",
|
||||
"@fontsource/bodoni-moda": "^5.3.0",
|
||||
"@fontsource/bricolage-grotesque": "^5.3.0",
|
||||
"@fontsource/caveat": "^5.3.0",
|
||||
"@fontsource/cormorant-garamond": "^5.3.0",
|
||||
"@fontsource/dancing-script": "^5.3.0",
|
||||
"@fontsource/dm-mono": "^5.3.0",
|
||||
"@fontsource/dm-serif-display": "^5.3.0",
|
||||
"@fontsource/eb-garamond": "^5.3.0",
|
||||
"@fontsource/fraunces": "^5.3.0",
|
||||
"@fontsource/geist-sans": "^5.3.0",
|
||||
"@fontsource/great-vibes": "^5.3.0",
|
||||
"@fontsource/homemade-apple": "^5.3.0",
|
||||
"@fontsource/inter": "^5.3.0",
|
||||
"@fontsource/kaushan-script": "^5.3.0",
|
||||
"@fontsource/league-gothic": "^5.3.0",
|
||||
"@fontsource/lora": "^5.3.0",
|
||||
"@fontsource/montserrat": "^5.3.0",
|
||||
"@fontsource/museomoderno": "^5.3.0",
|
||||
"@fontsource/oswald": "^5.3.0",
|
||||
"@fontsource/pacifico": "^5.3.0",
|
||||
"@fontsource/parisienne": "^5.3.0",
|
||||
"@fontsource/permanent-marker": "^5.3.0",
|
||||
"@fontsource/playfair-display": "^5.3.0",
|
||||
"@fontsource/poppins": "^5.3.0",
|
||||
"@fontsource/sacramento": "^5.3.0",
|
||||
"@fontsource/satisfy": "^5.3.0",
|
||||
"@fontsource/shrikhand": "^5.3.0",
|
||||
"@fontsource/yellowtail": "^5.3.0",
|
||||
"@mapbox/mapbox-gl-rtl-text": "^0.4.0",
|
||||
"@maplibre/maplibre-gl-leaflet": "0.1.4",
|
||||
"@simplewebauthn/browser": "^13.3.0",
|
||||
@@ -108,7 +81,7 @@
|
||||
"remark-breaks": "^4.0.0",
|
||||
"remark-gfm": "^4.0.1",
|
||||
"tz-lookup": "^6.1.25",
|
||||
"zod": "^4.6.7",
|
||||
"zod": "^4.6.5",
|
||||
"zustand": "^5.0.15"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
{
|
||||
"src": {
|
||||
"@typescript-eslint/no-non-null-assertion": 385,
|
||||
"@typescript-eslint/no-misused-promises": 849,
|
||||
"@typescript-eslint/no-non-null-assertion": 404,
|
||||
"@typescript-eslint/no-misused-promises": 854,
|
||||
"no-console": 88,
|
||||
"complexity": 222,
|
||||
"complexity": 226,
|
||||
"@typescript-eslint/no-explicit-any": 146,
|
||||
"trek/no-swallowed-catch": 130,
|
||||
"max-params": 32,
|
||||
"trek/no-swallowed-catch": 131,
|
||||
"max-params": 33,
|
||||
"trek/store-without-selector": 67,
|
||||
"react-hooks/refs": 556,
|
||||
"react-hooks/set-state-in-effect": 194,
|
||||
"react-hooks/refs": 557,
|
||||
"react-hooks/set-state-in-effect": 195,
|
||||
"@typescript-eslint/no-floating-promises": 165,
|
||||
"react-hooks/exhaustive-deps": 116,
|
||||
"@typescript-eslint/no-unused-vars": 124,
|
||||
"@typescript-eslint/no-unused-vars": 126,
|
||||
"react-hooks/immutability": 28,
|
||||
"max-lines-per-function": 130,
|
||||
"max-lines-per-function": 132,
|
||||
"react-hooks/static-components": 78,
|
||||
"react-hooks/preserve-manual-memoization": 12,
|
||||
"no-useless-assignment": 7,
|
||||
"no-empty": 19,
|
||||
"trek/no-window-globals": 41,
|
||||
"react-refresh/only-export-components": 45,
|
||||
"react-refresh/only-export-components": 46,
|
||||
"unused-disable-directive": 6,
|
||||
"max-depth": 21,
|
||||
"react-hooks/void-use-memo": 1,
|
||||
@@ -34,8 +34,8 @@
|
||||
"react-hooks/exhaustive-deps": 46
|
||||
},
|
||||
"tests": {
|
||||
"@typescript-eslint/no-explicit-any": 490,
|
||||
"@typescript-eslint/no-non-null-assertion": 1931,
|
||||
"@typescript-eslint/no-explicit-any": 491,
|
||||
"@typescript-eslint/no-non-null-assertion": 1932,
|
||||
"@typescript-eslint/no-misused-promises": 22,
|
||||
"@typescript-eslint/no-unused-vars": 51,
|
||||
"@typescript-eslint/no-floating-promises": 33,
|
||||
|
||||
@@ -601,6 +601,7 @@
|
||||
"hooks": ["src/components/Planner/usePlaceActions.ts"],
|
||||
"desktop": [
|
||||
"src/components/Planner/PlaceInspector.tsx",
|
||||
"src/components/shared/PlaceAvatarUpload.tsx",
|
||||
"src/pages/tripPlanner/useTripPlannerPage.ts"
|
||||
],
|
||||
"mobile": ["src/mobile/screens/trip/sheets/MPlaceSheet.tsx"]
|
||||
|
||||
@@ -1123,6 +1123,8 @@
|
||||
"src/components/shared/PasswordChecklist.tsx",
|
||||
"src/components/shared/PlaceAvatar.test.tsx",
|
||||
"src/components/shared/PlaceAvatar.tsx",
|
||||
"src/components/shared/PlaceAvatarUpload.test.tsx",
|
||||
"src/components/shared/PlaceAvatarUpload.tsx",
|
||||
"src/components/shared/PluginIcon.test.tsx",
|
||||
"src/components/shared/PluginIcon.tsx",
|
||||
"src/components/shared/PublicLanguagePicker.test.tsx",
|
||||
|
||||
@@ -117,6 +117,11 @@ export const DYNAMIC_ALLOWED = [
|
||||
template: 'settings.${mode}',
|
||||
because: "mode is a ThemeMode from resolveMode(), 'light' | 'dark' | 'auto', and settings.light/dark/auto exist",
|
||||
},
|
||||
...['components/Studio/StudioElementsPanel.tsx', 'components/Studio/StudioInspector.tsx'].map((file) => ({
|
||||
file,
|
||||
template: 'journey.studio.${key}',
|
||||
because: 'key comes from an `as const` tuple of frame and stroke styles written beside the call, typed literals',
|
||||
})),
|
||||
{
|
||||
file: 'mobile/screens/trip/sheets/MBookingFields.tsx',
|
||||
template: 'reservations.${s}',
|
||||
@@ -139,13 +144,6 @@ export const DYNAMIC_ALLOWED = [
|
||||
'memories.* key in en',
|
||||
}))
|
||||
),
|
||||
{
|
||||
file: 'components/Studio/stickerLibrary.ts',
|
||||
template: 'journey.studio.sticker.${id}',
|
||||
because:
|
||||
'id is a sticker id of the library in @trek/shared/stickers; stickerLibrary.test.ts resolves the key of every ' +
|
||||
'sticker the library holds against en',
|
||||
},
|
||||
];
|
||||
|
||||
const KEY_RE = /^[a-z][a-zA-Z0-9_]*(?:\.[a-zA-Z0-9_:-]+)+$/;
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
"packing.ts": 6,
|
||||
"pdf.ts": 1,
|
||||
"perm.ts": 4,
|
||||
"places.ts": 9,
|
||||
"places.ts": 10,
|
||||
"planner.ts": 53,
|
||||
"reservations.ts": 21,
|
||||
"roadtrip.ts": 36,
|
||||
|
||||
@@ -38,8 +38,8 @@
|
||||
"src/components/Roadtrip/RoadtripSidebarDriveBands.tsx": 1,
|
||||
"src/components/Roadtrip/RoadtripSidebarRefuelBand.tsx": 1,
|
||||
"src/components/Studio/StudioShell.tsx": 1,
|
||||
"src/components/Studio/StudioSidebar.tsx": 1,
|
||||
"src/components/Studio/TravelElements.tsx": 1,
|
||||
"src/components/Studio/sidebar/StudioEntryCard.tsx": 1,
|
||||
"src/components/Todo/useTodoList.ts": 1,
|
||||
"src/components/shared/ConfirmDialog.tsx": 1,
|
||||
"src/components/shared/CountryFlag.tsx": 1,
|
||||
|
||||
@@ -116,6 +116,7 @@
|
||||
"src/components/Vacay/useVacayCalendarLogic.ts",
|
||||
"src/components/Vacay/useVacaySettings.ts",
|
||||
"src/components/Vacay/useVacayUserPicker.ts",
|
||||
"src/components/shared/PlaceAvatarUpload.tsx",
|
||||
"src/hooks/useAirtrailConnection.ts",
|
||||
"src/hooks/useDawarichConnection.ts",
|
||||
"src/hooks/useDawarichSuggestions.ts",
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
"components/Journey/JourneyMap.tsx": 1,
|
||||
"components/Journey/JourneyMapGL.tsx": 2,
|
||||
"components/Journey/MobileEntryView.tsx": 1,
|
||||
"components/Journey/PhotoLightbox.tsx": 3,
|
||||
"components/Journey/journeyPhotoLayer.ts": 1,
|
||||
"components/Layout/Navbar.tsx": 1,
|
||||
"components/Layout/OfflineBanner.tsx": 1,
|
||||
@@ -51,12 +52,13 @@
|
||||
"components/Studio/BookSheetsView.tsx": 3,
|
||||
"components/Studio/PageNumbers.tsx": 1,
|
||||
"components/Studio/PeerCursors.tsx": 1,
|
||||
"components/Studio/PhotoView.tsx": 4,
|
||||
"components/Studio/SpreadView.tsx": 4,
|
||||
"components/Studio/StudioCanvas.tsx": 12,
|
||||
"components/Studio/SpreadView.tsx": 8,
|
||||
"components/Studio/StudioCanvas.tsx": 22,
|
||||
"components/Studio/StudioElementsPanel.tsx": 1,
|
||||
"components/Studio/StudioExport.tsx": 1,
|
||||
"components/Studio/StudioInspector.tsx": 1,
|
||||
"components/Studio/StudioSavedLayouts.tsx": 1,
|
||||
"components/Studio/StudioSidebar.tsx": 2,
|
||||
"components/Studio/TravelElements.tsx": 4,
|
||||
"components/Studio/TravelPreview.tsx": 1,
|
||||
"components/SystemNotices/ReleaseNoticeVisuals.tsx": 3,
|
||||
@@ -71,6 +73,7 @@
|
||||
"components/shared/DetailShell.tsx": 1,
|
||||
"components/shared/ElevationProfile.tsx": 2,
|
||||
"components/shared/NavigationMenu.tsx": 2,
|
||||
"components/shared/PlaceAvatarUpload.tsx": 3,
|
||||
"components/shared/PublicLanguagePicker.tsx": 1,
|
||||
"components/shared/SlidingTabs.tsx": 3,
|
||||
"components/shared/StarRating.tsx": 3,
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
{
|
||||
"components/Studio/LineHandles.tsx": 1,
|
||||
"components/Studio/StudioSelectionChrome.tsx": 2,
|
||||
"components/Studio/inspector/FocalPad.tsx": 1,
|
||||
"mobile/components/trek3d/MascotClip.tsx": 1,
|
||||
"pages/tripPlanner/PlanMapStage.tsx": 4
|
||||
"pages/tripPlanner/PlanMapStage.tsx": 4,
|
||||
"mobile/components/trek3d/MascotClip.tsx": 1
|
||||
}
|
||||
|
||||
@@ -8,23 +8,23 @@
|
||||
"src/components/Map/MapView.tsx": 1399,
|
||||
"src/components/Map/MapViewGL.test.tsx": 2920,
|
||||
"src/components/Map/MapViewGL.tsx": 2290,
|
||||
"src/components/Map/RouteCalculator.ts": 1076,
|
||||
"src/components/Map/RouteCalculator.ts": 1195,
|
||||
"src/components/PDF/TripPDF.tsx": 1082,
|
||||
"src/components/Planner/DayDetailPanel.test.tsx": 2333,
|
||||
"src/components/Planner/DayPlanSidebar.test.tsx": 5349,
|
||||
"src/components/Planner/DayPlanSidebar.tsx": 2953,
|
||||
"src/components/Planner/PlaceFormModal.test.tsx": 2836,
|
||||
"src/components/Planner/PlaceFormModal.tsx": 1157,
|
||||
"src/components/Planner/PlaceInspector.tsx": 1290,
|
||||
"src/components/Planner/PlaceFormModal.tsx": 1193,
|
||||
"src/components/Planner/PlaceInspector.tsx": 1304,
|
||||
"src/components/Studio/TravelElements.tsx": 1738,
|
||||
"src/components/Studio/countryShapes.ts": 2595,
|
||||
"src/index.css": 1636,
|
||||
"src/mobile/screens/admin/MAdminPluginsPanel.tsx": 1507,
|
||||
"src/pages/JourneyDetailPage.test.tsx": 4030,
|
||||
"src/pages/LoginPage.tsx": 1348,
|
||||
"src/pages/TripPlannerPage.tsx": 1128,
|
||||
"src/pages/TripPlannerPage.tsx": 1131,
|
||||
"src/pages/atlas/useAtlas.ts": 1211,
|
||||
"src/pages/tripPlanner/useTripPlanner.roadtrip.test.tsx": 3518,
|
||||
"src/pages/tripPlanner/useTripPlanner.test.tsx": 3270,
|
||||
"src/styles/studio.css": 1936
|
||||
"src/styles/studio.css": 2087
|
||||
}
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
"src/components/Planner/DayPlanSidebarNoteModal.test.tsx": 1,
|
||||
"src/components/Planner/PlaceFormModal.test.tsx": 3,
|
||||
"src/components/Planner/PlaceFormModal.tsx": 1,
|
||||
"src/components/Planner/PlaceInspector.tsx": 16,
|
||||
"src/components/Planner/PlaceInspector.tsx": 17,
|
||||
"src/components/Planner/PlacesBulkCategoryModal.test.tsx": 1,
|
||||
"src/components/Planner/PlacesSidebar.tsx": 1,
|
||||
"src/components/Planner/PlacesSidebarMobileDayPicker.tsx": 8,
|
||||
@@ -82,6 +82,8 @@
|
||||
"src/components/Settings/NotificationsTab.test.tsx": 1,
|
||||
"src/components/Settings/PasskeysSection.tsx": 1,
|
||||
"src/components/Settings/PhotoProvidersSection.test.tsx": 2,
|
||||
"src/components/Studio/StudioCanvas.tsx": 1,
|
||||
"src/components/Studio/StudioInspector.tsx": 1,
|
||||
"src/components/Todo/todoListModel.ts": 1,
|
||||
"src/components/Tours/planner/TourPlannerPanels.tsx": 2,
|
||||
"src/components/Tours/planner/useTourPlanner.ts": 2,
|
||||
@@ -96,6 +98,7 @@
|
||||
"src/components/shared/CustomSelect.test.tsx": 1,
|
||||
"src/components/shared/PlaceAvatar.test.tsx": 2,
|
||||
"src/components/shared/PlaceAvatar.tsx": 1,
|
||||
"src/components/shared/PlaceAvatarUpload.test.tsx": 1,
|
||||
"src/hooks/useDawarichSuggestions.test.ts": 1,
|
||||
"src/mobile/screens/admin/MAdminAddonManager.tsx": 2,
|
||||
"src/mobile/screens/admin/MAdminPluginsPanel.tsx": 6,
|
||||
|
||||
@@ -100,13 +100,13 @@
|
||||
"components/Roadtrip/serviceMarker.ts": 1,
|
||||
"components/Settings/useAppearanceEditor.ts": 5,
|
||||
"components/Studio/BookSheetsView.tsx": 2,
|
||||
"components/Studio/PhotoView.tsx": 2,
|
||||
"components/Studio/SpreadView.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 3,
|
||||
"components/Studio/StudioElementsPanel.tsx": 8,
|
||||
"components/Studio/StudioInspector.tsx": 2,
|
||||
"components/Studio/StudioShell.tsx": 2,
|
||||
"components/Studio/StudioSidebar.tsx": 2,
|
||||
"components/Studio/TravelElements.tsx": 5,
|
||||
"components/Studio/printSheets.ts": 5,
|
||||
"components/Studio/sidebar/contentDrops.ts": 2,
|
||||
"components/SystemNotices/ReleaseNoticeVisuals.tsx": 4,
|
||||
"components/SystemNotices/SystemNoticeBanner.tsx": 28,
|
||||
"components/SystemNotices/SystemNoticeModal.tsx": 107,
|
||||
@@ -132,6 +132,7 @@
|
||||
"components/shared/Modal.tsx": 3,
|
||||
"components/shared/NavigationMenu.tsx": 1,
|
||||
"components/shared/NoteColorPicker.tsx": 2,
|
||||
"components/shared/PlaceAvatarUpload.tsx": 3,
|
||||
"components/shared/PublicLanguagePicker.tsx": 3,
|
||||
"components/shared/Skeleton.tsx": 2,
|
||||
"components/shared/Spinner.tsx": 2,
|
||||
@@ -251,7 +252,7 @@
|
||||
"mobile/screens/trip/sheets/MMehrSheet.tsx": 3,
|
||||
"mobile/screens/trip/sheets/MNoteSheet.tsx": 1,
|
||||
"mobile/screens/trip/sheets/MPlaceEditSheet.tsx": 2,
|
||||
"mobile/screens/trip/sheets/MPlaceSheet.tsx": 23,
|
||||
"mobile/screens/trip/sheets/MPlaceSheet.tsx": 27,
|
||||
"mobile/screens/trip/sheets/MReservationSheet.tsx": 2,
|
||||
"mobile/screens/trip/sheets/MTransportFormSheet.tsx": 9,
|
||||
"mobile/screens/trip/sheets/MTransportSheet.tsx": 12,
|
||||
|
||||
@@ -40,8 +40,7 @@
|
||||
"components/Settings/AppearanceSettingsTab.tsx": 1,
|
||||
"components/Settings/PasskeysSection.tsx": 1,
|
||||
"components/Studio/BookSheetsView.tsx": 1,
|
||||
"components/Studio/PhotoView.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 1,
|
||||
"components/Studio/SpreadView.tsx": 2,
|
||||
"components/Studio/StudioElementsPanel.tsx": 2,
|
||||
"components/Studio/StudioSwatches.tsx": 1,
|
||||
"components/Studio/TravelElements.tsx": 6,
|
||||
|
||||
@@ -18,7 +18,6 @@ import {
|
||||
type AssistantChatRequest,
|
||||
type AssistantDecisionsRequest,
|
||||
type AssistantErrorCode,
|
||||
type AssistantInsertFoundPlaceRequest,
|
||||
type AssistantRenderUploadResponse,
|
||||
type AssistantScope,
|
||||
type AssistantShareRequest,
|
||||
@@ -146,13 +145,6 @@ export const assistantApi = {
|
||||
body: AssistantAddFoundPlaceRequest
|
||||
): Promise<AssistantAddFoundPlaceResponse> =>
|
||||
apiClient.post(`${tripBase(tripId)}/threads/${threadId}/found-places`, body).then((r) => r.data),
|
||||
// "+ Tour": a found place taken into the saved tour open in the planner, held as a change like "+ Day 3".
|
||||
insertFoundPlace: (
|
||||
tripId: number,
|
||||
threadId: number,
|
||||
body: AssistantInsertFoundPlaceRequest
|
||||
): Promise<AssistantAddFoundPlaceResponse> =>
|
||||
apiClient.post(`${tripBase(tripId)}/threads/${threadId}/found-places/tour`, body).then((r) => r.data),
|
||||
// A proposal an answer showed as a card ("Plan this"): answers like a found place, with the message holding it.
|
||||
takeProposal: (
|
||||
tripId: number,
|
||||
|
||||
@@ -11,7 +11,7 @@ import {
|
||||
Trash2,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { type HTMLAttributes, type MouseEvent, useRef, useState } from 'react';
|
||||
import { type HTMLAttributes, type MouseEvent, useState } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
|
||||
import { useTranslation } from '../../i18n';
|
||||
@@ -79,7 +79,6 @@ export default function AssistantHeader({
|
||||
const [memoryOpen, setMemoryOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const menu = useContextMenu();
|
||||
const moreRef = useRef<HTMLButtonElement>(null);
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
const threads = thread.threads ?? [];
|
||||
const history = usePopoverList(threads.findIndex((th) => th.id === thread.threadId) + 1);
|
||||
@@ -96,14 +95,6 @@ export default function AssistantHeader({
|
||||
run();
|
||||
};
|
||||
|
||||
// Closed by Escape or a pick while it holds the focus, the menu hands it back to its button, so the keys
|
||||
// go on reaching the window; a click or a scroll elsewhere leaves the focus where it went.
|
||||
const closeMenu = () => {
|
||||
const fromMenu = document.activeElement?.closest('[role="menu"]') != null;
|
||||
menu.close();
|
||||
if (fromMenu) moreRef.current?.focus();
|
||||
};
|
||||
|
||||
const openMenu = (e: MouseEvent) =>
|
||||
menu.open(
|
||||
e,
|
||||
@@ -196,12 +187,10 @@ export default function AssistantHeader({
|
||||
</Tooltip>
|
||||
<Tooltip label={t('assistant.window.menu')}>
|
||||
<button
|
||||
ref={moreRef}
|
||||
type="button"
|
||||
onClick={openMenu}
|
||||
aria-label={t('assistant.window.menu')}
|
||||
aria-haspopup="menu"
|
||||
aria-expanded={menu.menu !== null}
|
||||
className={ICON_BUTTON}
|
||||
>
|
||||
<Ellipsis size={14} aria-hidden="true" />
|
||||
@@ -229,7 +218,6 @@ export default function AssistantHeader({
|
||||
icon={null}
|
||||
label={th.title}
|
||||
active={th.id === thread.threadId}
|
||||
current={th.id === thread.threadId}
|
||||
onClick={() => pick(() => thread.openThread(th.id))}
|
||||
trailing={
|
||||
<span className="flex-shrink-0 text-caption text-content-faint">
|
||||
@@ -246,7 +234,7 @@ export default function AssistantHeader({
|
||||
)}
|
||||
</PopoverListPanel>
|
||||
|
||||
<ContextMenu menu={menu.menu} onClose={closeMenu} />
|
||||
<ContextMenu menu={menu.menu} onClose={menu.close} />
|
||||
{memoryOpen && <AssistantMemoryDialog tripId={tripId} onClose={() => setMemoryOpen(false)} />}
|
||||
<ConfirmDialog
|
||||
isOpen={confirming}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { AssistantFoundPlace } from '@trek/shared';
|
||||
import { Check, MapPin, Plus, Route, Star } from 'lucide-react';
|
||||
import { Check, MapPin, Plus, Star } from 'lucide-react';
|
||||
import { createElement, type ReactNode, useRef } from 'react';
|
||||
|
||||
import { useTranslation } from '../../i18n';
|
||||
@@ -25,24 +25,6 @@ function AddButton({ place, strip, tall }: { place: AssistantFoundPlace; strip:
|
||||
);
|
||||
}
|
||||
|
||||
/** "+ Tour": takes the place into the saved tour open in the planner as a stop, held as a change in the chat. */
|
||||
function TourButton({ place, strip, tall }: { place: AssistantFoundPlace; strip: Strip; tall: boolean }) {
|
||||
const { t } = useTranslation();
|
||||
if (!strip.tour) return null;
|
||||
return (
|
||||
<Tooltip label={t('assistant.place.addToTourHint', { name: strip.tour.name })} placement="top">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => strip.addToTour(place)}
|
||||
className={`${ACTION} ${tall ? 'h-10' : 'h-7'} min-w-0 px-2`}
|
||||
>
|
||||
<Route size={12} aria-hidden="true" className="flex-shrink-0" />
|
||||
<span className="truncate">{t('assistant.place.addToTour')}</span>
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
type Category = ReturnType<Strip['categoryOf']>;
|
||||
|
||||
/** The picture, or the category's icon on its colour, with the category and whether it is open on it. */
|
||||
@@ -203,9 +185,8 @@ export default function AssistantPlaceCard({
|
||||
)}
|
||||
</span>
|
||||
</button>
|
||||
<div className="mt-auto flex min-w-0 gap-1.5 px-3 pb-3 pt-2.5">
|
||||
<div className="mt-auto flex min-w-0 px-3 pb-3 pt-2.5">
|
||||
<PlaceAction place={place} strip={strip} suggested={suggested} tall={tall} />
|
||||
<TourButton place={place} strip={strip} tall={tall} />
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,6 @@ import { fetchPhoto } from '../../services/photoService';
|
||||
import { assistantChatKey } from '../../store/assistantChatKey';
|
||||
import { chatOf, useAssistantStore } from '../../store/assistantStore';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { setOpenTour } from '../../store/openTourStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { setForcedOffline } from '../../sync/networkMode';
|
||||
import AssistantPlaceStrip from './AssistantPlaceStrip';
|
||||
@@ -106,7 +105,6 @@ afterEach(() => {
|
||||
useAuthStore.setState(AUTH, true);
|
||||
globalThis.IntersectionObserver = RealObserver;
|
||||
setForcedOffline(false);
|
||||
setOpenTour(null);
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
@@ -240,22 +238,3 @@ describe('AssistantPlaceStrip', () => {
|
||||
expect(screen.queryByRole('button', { name: 'Add to trip' })).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('"+ Tour" on a found place (P6)', () => {
|
||||
it('FE-AI-PLACES-011: shows only while a saved tour of this trip is open, and holds the place as its stop', () => {
|
||||
seed();
|
||||
const insertFoundPlace = vi.fn(async () => 'held' as const);
|
||||
useAssistantStore.setState({ insertFoundPlace });
|
||||
setOpenTour({ tripId: TRIP, placeId: 64, name: 'Herzogstand' });
|
||||
renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Add to tour' }));
|
||||
expect(insertFoundPlace).toHaveBeenCalledWith(TRIP, 's1:0', 64);
|
||||
});
|
||||
|
||||
it('FE-AI-PLACES-012: a tour open on another trip, or a traveller who may not edit, gets no "+ Tour"', () => {
|
||||
seed();
|
||||
setOpenTour({ tripId: TRIP + 1, placeId: 64, name: 'Elsewhere' });
|
||||
renderStrip({ toolCallId: 's1', places: [place('s1:0')], more: 0 });
|
||||
expect(screen.queryByRole('button', { name: 'Add to tour' })).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { ChevronRight, Luggage } from 'lucide-react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
import { useTranslation } from '../../i18n';
|
||||
import EmptyState from '../shared/EmptyState';
|
||||
@@ -9,17 +8,11 @@ import { type PickerTrip, useAssistantTripPicker } from './useAssistantTripPicke
|
||||
/**
|
||||
* The user's trips to go on with in one trip's own chat, from the home chat's
|
||||
* head: that chat, its history and its changes belong to the trip. The
|
||||
* running and the next trip lead. The list opens before the trips are there,
|
||||
* so the focus goes onto the first one once they come.
|
||||
* running and the next trip lead.
|
||||
*/
|
||||
export default function AssistantTripPicker({ onPick }: { onPick: (trip: PickerTrip) => void }) {
|
||||
const { t } = useTranslation();
|
||||
const trips = useAssistantTripPicker();
|
||||
const first = useRef<HTMLButtonElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
first.current?.focus({ preventScroll: true });
|
||||
}, [trips]);
|
||||
|
||||
if (trips === null) {
|
||||
return (
|
||||
@@ -39,10 +32,9 @@ export default function AssistantTripPicker({ onPick }: { onPick: (trip: PickerT
|
||||
return (
|
||||
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto p-2">
|
||||
<ul className="trek-stagger m-0 flex list-none flex-col gap-1 p-0">
|
||||
{trips.map((trip, i) => (
|
||||
{trips.map((trip) => (
|
||||
<li key={trip.id}>
|
||||
<button
|
||||
ref={i === 0 ? first : undefined}
|
||||
type="button"
|
||||
onClick={() => onPick(trip)}
|
||||
className="flex w-full items-center gap-3 rounded-lg px-2.5 py-2 text-start transition-colors hover:bg-surface-hover"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* FE-AI-WIN-001 to FE-AI-WIN-016
|
||||
* FE-AI-WIN-001 to FE-AI-WIN-014
|
||||
*
|
||||
* The desktop window around the chat: when it shows at all, the button it
|
||||
* opens from, the home chat outside a trip with its way into one trip's chat
|
||||
@@ -238,34 +238,6 @@ describe('AssistantWindow', () => {
|
||||
expect(useAssistantStore.getState().window.open).toBe(true);
|
||||
});
|
||||
|
||||
it("FE-AI-WIN-015: the header's menu says whether it is open, and Escape hands the focus back to its button", async () => {
|
||||
seed({ open: true, minimized: false });
|
||||
render(<AssistantWindow trip={TRIP} />);
|
||||
const more = screen.getByRole('button', { name: 'More options' });
|
||||
expect(more).toHaveAttribute('aria-expanded', 'false');
|
||||
fireEvent.click(more);
|
||||
expect(more).toHaveAttribute('aria-expanded', 'true');
|
||||
fireEvent.keyDown(await screen.findByRole('menu'), { key: 'Escape' });
|
||||
await waitFor(() => expect(screen.queryByRole('menu')).not.toBeInTheDocument());
|
||||
expect(more).toHaveFocus();
|
||||
expect(more).toHaveAttribute('aria-expanded', 'false');
|
||||
// From the button the next Escape is the window's again.
|
||||
fireEvent.keyDown(more, { key: 'Escape' });
|
||||
expect(useAssistantStore.getState().window.open).toBe(false);
|
||||
});
|
||||
|
||||
it("FE-AI-WIN-016: the home chat's trip list takes the focus onto the first trip once the trips are there", async () => {
|
||||
seed({ open: true, minimized: false });
|
||||
render(<AssistantWindow trip={null} />);
|
||||
const button = screen.getByRole('button', { name: 'Chat about one trip' });
|
||||
fireEvent.click(button);
|
||||
// The list's own row, not the chat's "go on in Lisbon" beside it.
|
||||
const lisbon = await screen.findByRole('button', { name: /^Lisbon/ });
|
||||
await waitFor(() => expect(lisbon).toHaveFocus());
|
||||
fireEvent.keyDown(lisbon, { key: 'Escape' });
|
||||
expect(button).toHaveFocus();
|
||||
});
|
||||
|
||||
it('FE-AI-WIN-010: tells the map where it sits, is compact at 400 px wide, and picks days on screen', () => {
|
||||
seed({ open: true, minimized: false });
|
||||
const onFocusDay = vi.fn();
|
||||
|
||||
@@ -107,7 +107,6 @@ const ERRORS: Record<AssistantErrorCode, AssistantErrorView> = {
|
||||
decide_first: { messageKey: 'assistant.error.decideFirst', action: null },
|
||||
too_many_requests: { messageKey: 'assistant.error.rateLimited', action: null },
|
||||
no_bookings_found: { messageKey: 'assistant.error.noBookingsFound', action: null },
|
||||
no_tracks_found: { messageKey: 'assistant.error.noTracksFound', action: null },
|
||||
import_unavailable: { messageKey: 'assistant.error.importUnavailable', action: null },
|
||||
generic: {
|
||||
messageKey: 'assistant.error.generic',
|
||||
|
||||
@@ -127,10 +127,6 @@ function namedFirst(places: readonly AssistantFoundPlace[], text: string): Assis
|
||||
const TOUR_PLANNING_TOOLS: ReadonlySet<string> = new Set([
|
||||
'propose_hike',
|
||||
'create_hike',
|
||||
'propose_tour',
|
||||
'create_tour',
|
||||
'create_paddle_tour',
|
||||
'create_ski_tour',
|
||||
'update_tour',
|
||||
'propose_city_walk',
|
||||
'create_city_walk',
|
||||
@@ -138,9 +134,6 @@ const TOUR_PLANNING_TOOLS: ReadonlySet<string> = new Set([
|
||||
'plan_ski_route',
|
||||
'prepare_tour_change',
|
||||
'save_tour_change',
|
||||
'propose_round_hike',
|
||||
'propose_hike_leg_way',
|
||||
'import_wanderer_trail',
|
||||
]);
|
||||
|
||||
/** The tool that keeps a note in the trip notes; kept at once, without a card. */
|
||||
@@ -462,5 +455,4 @@ export const CHANGE_LABELS: Record<AssistantChangeLabelKey, { labelKey: string }
|
||||
difficulty: { labelKey: 'assistant.change.label.difficulty' },
|
||||
track: { labelKey: 'assistant.change.label.track' },
|
||||
packing: { labelKey: 'assistant.change.label.packing' },
|
||||
breaks: { labelKey: 'assistant.change.label.breaks' },
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* FE-AI-BOOKPAGE-010 to FE-AI-BOOKPAGE-017
|
||||
* FE-AI-BOOKPAGE-010 to FE-AI-BOOKPAGE-016
|
||||
*
|
||||
* The pure side of the book's page card: a page named as the Studio names
|
||||
* it, a layout and a finding by their words, the findings worth a look, the
|
||||
@@ -8,7 +8,7 @@
|
||||
* the card carries it and the book is still at the trial's version), and
|
||||
* where an applied change opens the Studio.
|
||||
*/
|
||||
import { BOOK_FINDING_CODES, blankBook, blankSpread, type BookCardPage, type BookPageCard } from '@trek/shared';
|
||||
import { blankBook, blankSpread, type BookCardPage, type BookPageCard } from '@trek/shared';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import {
|
||||
@@ -67,9 +67,6 @@ describe('bookCardModel', () => {
|
||||
it('FE-AI-BOOKPAGE-011: a layout is named by its template, its grid, its own name or as laid out again', () => {
|
||||
expect(layoutLabel({ kind: 'template', id: 'two-up', name: null }, t)).toBe('journey.studio.tpl.twoUp');
|
||||
expect(layoutLabel({ kind: 'template', id: 'cover-full', name: null }, t)).toBe('journey.studio.tpl.coverFull');
|
||||
expect(layoutLabel({ kind: 'template', id: 'postcard-houses', name: null }, t)).toBe(
|
||||
'studio.templates.name.postcardHouses'
|
||||
);
|
||||
expect(layoutLabel({ kind: 'grid', id: 'two-across', name: null }, t)).toBe('assistant.card.book.grid {"count":2}');
|
||||
expect(layoutLabel({ kind: 'saved', id: 'lay-1', name: 'Mine' }, t)).toBe('Mine');
|
||||
expect(layoutLabel({ kind: 'saved', id: 'lay-1', name: null }, t)).toBe('lay-1');
|
||||
@@ -95,15 +92,6 @@ describe('bookCardModel', () => {
|
||||
expect(findingLabel({ code: 'low_dpi', severity: 'warn' }, t)).toBe('assistant.card.book.finding.low_dpi');
|
||||
});
|
||||
|
||||
it('FE-AI-BOOKPAGE-017: every finding the checks answer with has its words, the art checks among them', () => {
|
||||
for (const code of BOOK_FINDING_CODES) {
|
||||
expect(findingLabel({ code, severity: 'info' }, t)).toBe(`assistant.card.book.finding.${code}`);
|
||||
}
|
||||
for (const code of ['flat_cover', 'weak_hierarchy', 'off_theme', 'energy_mismatch'] as const) {
|
||||
expect(BOOK_FINDING_CODES).toContain(code);
|
||||
}
|
||||
});
|
||||
|
||||
it('FE-AI-BOOKPAGE-013: a waiting edit or cover draws before and after; a move alone, a delete each page alone; new pages, other books and failures none', () => {
|
||||
const doc = book();
|
||||
const [edit] = pageViewOf(card(), doc, 'pending');
|
||||
|
||||
@@ -10,7 +10,6 @@ import {
|
||||
type BookSpread,
|
||||
findBookGrid,
|
||||
findBookTemplate,
|
||||
findDecoratedTemplate,
|
||||
setBookCover,
|
||||
} from '@trek/shared';
|
||||
|
||||
@@ -58,15 +57,6 @@ 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' },
|
||||
hairline: { labelKey: 'assistant.card.book.finding.hairline' },
|
||||
edge_unused: { labelKey: 'assistant.card.book.finding.edge_unused' },
|
||||
curve_overflow: { labelKey: 'assistant.card.book.finding.curve_overflow' },
|
||||
effect_heavy: { labelKey: 'assistant.card.book.finding.effect_heavy' },
|
||||
flat_cover: { labelKey: 'assistant.card.book.finding.flat_cover' },
|
||||
weak_hierarchy: { labelKey: 'assistant.card.book.finding.weak_hierarchy' },
|
||||
off_theme: { labelKey: 'assistant.card.book.finding.off_theme' },
|
||||
energy_mismatch: { labelKey: 'assistant.card.book.finding.energy_mismatch' },
|
||||
};
|
||||
|
||||
/** A page as the Studio names it: the cover, the first page, double page 3. */
|
||||
@@ -92,7 +82,7 @@ export function layoutLabel(layout: BookCardLayout | null, t: Translate): string
|
||||
const grid = findBookGrid(layout.id);
|
||||
return grid ? t('assistant.card.book.grid', { count: grid.cells.length }) : null;
|
||||
}
|
||||
const template = findBookTemplate(layout.id) ?? findDecoratedTemplate(layout.id);
|
||||
const template = findBookTemplate(layout.id);
|
||||
return template ? t(template.labelKey) : null;
|
||||
}
|
||||
|
||||
|
||||
@@ -37,7 +37,6 @@ export const BOOK_LOOK = {
|
||||
// The server's own read: it waits for the Studio to draw the page, and says it looks at it.
|
||||
preview_book_page: { stepKey: 'assistant.step.lookingAtPage' },
|
||||
list_book_layouts: { stepKey: 'assistant.step.bookLayouts' },
|
||||
list_book_assets: { stepKey: 'assistant.step.bookAssets' },
|
||||
suggest_book_photos: { stepKey: 'assistant.step.choosingPhotos' },
|
||||
},
|
||||
entities: {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { BookmarkMinus, BookmarkPlus, Copy, Palette, Ruler, Sparkles } from 'lucide-react';
|
||||
import { BookmarkMinus, BookmarkPlus, Copy, Ruler, Sparkles } from 'lucide-react';
|
||||
|
||||
import type { PackLook } from '../cardTypes';
|
||||
|
||||
@@ -19,7 +19,6 @@ export const BOOK_DESIGN_LOOK = {
|
||||
verbs: {
|
||||
designBook: { Icon: Sparkles, tone: 'info', labelKey: 'assistant.change.verb.designBook' },
|
||||
setBookSetup: { Icon: Ruler, tone: 'info', labelKey: 'assistant.change.verb.setBookSetup' },
|
||||
setBookTheme: { Icon: Palette, tone: 'info', labelKey: 'assistant.change.verb.setBookTheme' },
|
||||
duplicateBookPage: { Icon: Copy, tone: 'success', labelKey: 'assistant.change.verb.duplicateBookPage' },
|
||||
saveBookLayout: { Icon: BookmarkPlus, tone: 'success', labelKey: 'assistant.change.verb.saveBookLayout' },
|
||||
removeBookLayout: { Icon: BookmarkMinus, tone: 'danger', labelKey: 'assistant.change.verb.removeBookLayout' },
|
||||
|
||||
@@ -24,19 +24,6 @@ const STYLE_LOOK: Readonly<Record<BookDesignStyle, { labelKey: string }>> = {
|
||||
journal: { labelKey: 'assistant.card.bookDesign.style.journal' },
|
||||
bold: { labelKey: 'assistant.card.bookDesign.style.bold' },
|
||||
scrapbook: { labelKey: 'assistant.card.bookDesign.style.scrapbook' },
|
||||
// A design in one of the themes is called by the theme's own name.
|
||||
'poster-pop': { labelKey: 'studio.theme.name.posterPop' },
|
||||
cutout: { labelKey: 'studio.theme.name.cutout' },
|
||||
postcard: { labelKey: 'studio.theme.name.postcard' },
|
||||
riviera: { labelKey: 'studio.theme.name.riviera' },
|
||||
'fabric-classic': { labelKey: 'studio.theme.name.fabricClassic' },
|
||||
'minimal-serif': { labelKey: 'studio.theme.name.minimalSerif' },
|
||||
'grid-badge': { labelKey: 'studio.theme.name.gridBadge' },
|
||||
'scrapbook-script': { labelKey: 'studio.theme.name.scrapbookScript' },
|
||||
tropical: { labelKey: 'studio.theme.name.tropical' },
|
||||
nordic: { labelKey: 'studio.theme.name.nordic' },
|
||||
alpine: { labelKey: 'studio.theme.name.alpine' },
|
||||
'india-stamp': { labelKey: 'studio.theme.name.indiaStamp' },
|
||||
};
|
||||
|
||||
type Translate = (key: string, params?: Record<string, string | number>) => string;
|
||||
|
||||
@@ -39,8 +39,7 @@ describe('TripChatBlock', () => {
|
||||
expect(screen.getByRole('region', { name: 'Continue in a trip chat' })).toBeInTheDocument();
|
||||
expect(screen.getByText('Kyoto')).toBeInTheDocument();
|
||||
expect(screen.getByText('Trip chat')).toBeInTheDocument();
|
||||
// The dates, not the hidden label of the question, which has a "to" of its own.
|
||||
expect(screen.getByText(/\d to \w/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/ to /)).toBeInTheDocument();
|
||||
expect(screen.getByText('Next')).toBeInTheDocument();
|
||||
expect(screen.getByText('12 places')).toBeInTheDocument();
|
||||
expect(screen.getByText('What is still missing?')).toBeInTheDocument();
|
||||
|
||||
@@ -20,16 +20,7 @@ import { ROW_GLYPH, type RowChange } from './checklistModel';
|
||||
* list, and the rows of a run of changes with their include choice.
|
||||
*/
|
||||
|
||||
/** The band behind a group's head: its colour faint over the card's grey, the grey alone without one. */
|
||||
function bandOf(color: string): string {
|
||||
return color ? `color-mix(in srgb, ${color} 12%, var(--bg-secondary))` : 'var(--bg-secondary)';
|
||||
}
|
||||
|
||||
/**
|
||||
* A group's head as a section of the list: a full width band in its colour,
|
||||
* the colour dot, its name, and at the end its badge (how many it holds) and
|
||||
* who looks after it, the ones a change drops faded.
|
||||
*/
|
||||
/** A group's head: its colour, its name, a badge, and who looks after it (the ones a change drops faded). */
|
||||
export function ChecklistHead({
|
||||
color,
|
||||
name,
|
||||
@@ -47,17 +38,14 @@ export function ChecklistHead({
|
||||
lead?: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className="mt-1.5 flex min-w-0 items-center gap-2 rounded-lg px-2.5 py-1.5"
|
||||
style={{ background: bandOf(color) }}
|
||||
>
|
||||
<div className="flex min-w-0 items-center gap-2 pt-1">
|
||||
{lead ?? <CategoryDot color={color} />}
|
||||
<bdi title={name} className="min-w-0 flex-1 truncate text-caption font-semibold text-content">
|
||||
<bdi title={name} className="min-w-0 truncate text-caption font-semibold text-content">
|
||||
{name}
|
||||
</bdi>
|
||||
{(badge || people.length > 0 || removed.length > 0) && (
|
||||
<span className="flex flex-none items-center gap-1.5">
|
||||
{badge}
|
||||
{badge}
|
||||
{(people.length > 0 || removed.length > 0) && (
|
||||
<span className="ms-auto flex flex-none items-center gap-1.5">
|
||||
<PeopleStack people={people} />
|
||||
{/* The people a change takes off, faded; the card says "No longer" in words under the head. */}
|
||||
{removed.length > 0 && (
|
||||
|
||||
@@ -58,13 +58,13 @@ function BagSwatch({ bag, size = 'row' }: { bag: PackingCardBag | undefined; siz
|
||||
/** A row's quantity and weight: quiet figures at its end, no frame each. */
|
||||
const QUIET = 'text-caption tabular-nums text-content-muted';
|
||||
|
||||
/** How many rows a group holds, a white pill at the end of its band. */
|
||||
/** How many rows a group holds, quiet beside its name. */
|
||||
function GroupCount({ count }: { count: number }) {
|
||||
const { t } = useTranslation();
|
||||
return (
|
||||
<span
|
||||
aria-label={t('tours.packing.items', { count })}
|
||||
className="inline-flex h-[18px] flex-none items-center rounded-full bg-surface-card px-1.5 text-caption font-semibold tabular-nums text-content-secondary shadow-sm"
|
||||
className="flex-none text-caption tabular-nums text-content-faint"
|
||||
>
|
||||
{count}
|
||||
</span>
|
||||
@@ -231,7 +231,7 @@ function BagHead({
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
if (!bag) {
|
||||
const badge = <GroupCount count={group.count} />;
|
||||
const badge = inChange ? undefined : <GroupCount count={group.count} />;
|
||||
const lead = <BagSwatch bag={undefined} size="head" />;
|
||||
return <ChecklistHead color="" name={t('packing.noBag')} lead={lead} badge={badge} />;
|
||||
}
|
||||
@@ -298,7 +298,7 @@ export function PackingGroup({
|
||||
<ChecklistHead
|
||||
color={packingColorOf(key.slot, name)}
|
||||
name={name}
|
||||
badge={<GroupCount count={group.count} />}
|
||||
badge={inChange ? undefined : <GroupCount count={group.count} />}
|
||||
people={group.assignees}
|
||||
removed={group.assigneesRemoved}
|
||||
/>
|
||||
|
||||
@@ -5,7 +5,6 @@ import { useTranslation } from '../../../../i18n';
|
||||
import { useSettingsStore } from '../../../../store/settingsStore';
|
||||
import { formatClockTime, formatDate, formatMoney } from '../../../../utils/formatters';
|
||||
import { formatDistance, formatElevation } from '../../../../utils/units';
|
||||
import { formatRunPace, runPaceUnitText } from '../../../Tours/run/runPace';
|
||||
|
||||
/**
|
||||
* How a card writes its numbers, the way the rest of TREK does for this
|
||||
@@ -14,7 +13,7 @@ import { formatRunPace, runPaceUnitText } from '../../../Tours/run/runPace';
|
||||
* units. A card hands these to its words as `{value}`, never a raw number.
|
||||
*/
|
||||
export function useCardFormat() {
|
||||
const { locale, t } = useTranslation();
|
||||
const { locale } = useTranslation();
|
||||
const twelveHour = useSettingsStore((s) => s.settings.time_format === '12h');
|
||||
const unit = useSettingsStore((s) => s.settings.distance_unit ?? 'metric');
|
||||
return useMemo(() => {
|
||||
@@ -38,8 +37,6 @@ export function useCardFormat() {
|
||||
return m === 0 ? hours.format(h) : `${hours.format(h)} ${mins.format(m)}`;
|
||||
},
|
||||
count: (value: number) => number.format(value),
|
||||
/** "5:30 min/km" from seconds per kilometre, per mile with distances in miles. */
|
||||
pace: (secondsPerKm: number) => `${formatRunPace(secondsPerKm, unit)} ${runPaceUnitText(unit, t)}`,
|
||||
};
|
||||
}, [locale, twelveHour, unit, t]);
|
||||
}, [locale, twelveHour, unit]);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* FE-AI-TOUR-021 to FE-AI-TOUR-028, FE-AI-TOUR-037 to FE-AI-TOUR-042, FE-AI-TOUR-061 to FE-AI-TOUR-062
|
||||
* FE-AI-TOUR-021 to FE-AI-TOUR-028, FE-AI-TOUR-037 to FE-AI-TOUR-042
|
||||
*
|
||||
* A route in the chat as the Tours tab shows a hike: its figures and grade,
|
||||
* a profile only where the heights are known, the profile, the stop chips
|
||||
@@ -387,44 +387,4 @@ describe('TourRouteCard', () => {
|
||||
expect(container.querySelectorAll('[data-testid="tour-day"] .bg-danger')).toHaveLength(2);
|
||||
expect(screen.getAllByText('Start by 10:30')).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('FE-AI-TOUR-061: a bike tour names its profile and its riding time, a run its pace, and waits for one it lacks', () => {
|
||||
const bike: Route = {
|
||||
...HIKE,
|
||||
activity: 'bike',
|
||||
routingProfile: 'gravel',
|
||||
minutesBasis: 'router',
|
||||
limit: null,
|
||||
grades: null,
|
||||
};
|
||||
const { container } = renderCard(bike);
|
||||
expect(screen.getByText('Gravel')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('tour-grade')).toBeNull();
|
||||
expect(screen.getByRole('button', { name: 'Plan this' })).toBeEnabled();
|
||||
expect(container.querySelector('[data-field="pace"]')).toBeNull();
|
||||
|
||||
const run: Route = {
|
||||
...bike,
|
||||
activity: 'run',
|
||||
routingProfile: 'trail',
|
||||
minutesBasis: 'pace',
|
||||
paceSecondsPerKm: 330,
|
||||
};
|
||||
const paced = renderCard(run);
|
||||
expect(screen.getByText('Trail running')).toBeInTheDocument();
|
||||
expect(paced.container.querySelector('[data-field="pace"]')).toHaveTextContent('5:30 min/km');
|
||||
|
||||
renderCard({ ...run, paceSecondsPerKm: null, minutes: null });
|
||||
expect(screen.getByText('Tell the assistant your pace to save this run.')).toBeInTheDocument();
|
||||
const buttons = screen.getAllByRole('button', { name: 'Plan this' });
|
||||
expect(buttons[buttons.length - 1]).toBeDisabled();
|
||||
});
|
||||
|
||||
it('FE-AI-TOUR-062: a whole paddle plan offers "Plan this"; one with a leg that failed does not', () => {
|
||||
const plan: Route = { ...HIKE, activity: 'kayak', source: 'plan', limit: null, grades: null, schedule: null };
|
||||
renderCard(plan);
|
||||
expect(screen.getByRole('button', { name: 'Plan this' })).toBeInTheDocument();
|
||||
renderCard({ ...plan, name: 'Broken', warnings: [{ kind: 'legs_failed', at: null, count: 1 }] });
|
||||
expect(screen.getAllByRole('button', { name: 'Plan this' })).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -16,7 +16,7 @@ import RouteSketch from '../parts/RouteSketch';
|
||||
import { useCardFormat } from '../parts/useCardFormat';
|
||||
import { factKeysOf, factValue, percentText, type FactKey } from './tourRouteModel';
|
||||
import { sketchOf } from './tourRouteSketchModel';
|
||||
import { PROFILE_WORDS, routeName, SAC_WORDS, timeLabelKey, TOUR_TYPE_WORDS } from './tourRouteWords';
|
||||
import { routeName, SAC_WORDS, timeLabelKey, TOUR_TYPE_WORDS } from './tourRouteWords';
|
||||
|
||||
/**
|
||||
* The head of a route card: the route drawn small beside its name, the
|
||||
@@ -63,16 +63,14 @@ export function TourRouteFigures({ card }: { card: TourRouteCard }) {
|
||||
/**
|
||||
* The grade of a hike, as the hike's own card shows it: the hardest SAC step
|
||||
* along the way, uncertain when too little of it is graded, with what it
|
||||
* means, the routing limit and where grades come from in its tooltip. A bike
|
||||
* tour or a run names its profile instead, any other tour what kind it is.
|
||||
* means, the routing limit and where grades come from in its tooltip. Any
|
||||
* other tour says what kind it is instead.
|
||||
*/
|
||||
export function TourGrade({ card }: { card: TourRouteCard }) {
|
||||
const { t } = useTranslation();
|
||||
if (card.activity !== 'hike' || !card.grades) {
|
||||
const icon = createElement(tourDayRowIcon(card.activity), { size: 10, strokeWidth: 2.2, 'aria-hidden': true });
|
||||
// A bike tour or a run says what it was planned for: "Gravel", "Trail running".
|
||||
const words = card.routingProfile ? PROFILE_WORDS[card.routingProfile] : TOUR_TYPE_WORDS[card.activity];
|
||||
return <SoftPill icon={icon}>{t(words.labelKey)}</SoftPill>;
|
||||
return <SoftPill icon={icon}>{t(TOUR_TYPE_WORDS[card.activity].labelKey)}</SoftPill>;
|
||||
}
|
||||
const { highest, unknownShare } = card.grades;
|
||||
const uncertain = unknownShare >= 0.5;
|
||||
@@ -140,7 +138,7 @@ export function TourRouteSketch({
|
||||
export function TourRouteFields({ card }: { card: TourRouteCard }) {
|
||||
const { t } = useTranslation();
|
||||
const format = useCardFormat();
|
||||
const fields: Array<{ key: string; label: string; value: string }> = factKeysOf(card).flatMap((key) => {
|
||||
const fields = factKeysOf(card).flatMap((key) => {
|
||||
const value = factValue(card, key);
|
||||
if (value === null) return [];
|
||||
// A field's label is short; how the time was reckoned is the figure badges' tooltip.
|
||||
@@ -150,10 +148,6 @@ export function TourRouteFields({ card }: { card: TourRouteCard }) {
|
||||
else text = key === 'distance' ? format.distance(value / 1000) : format.elevation(value);
|
||||
return [{ key, label, value: text }];
|
||||
});
|
||||
// A run's time is its distance at the runner's pace: the pace stands beside it.
|
||||
if (card.paceSecondsPerKm != null) {
|
||||
fields.push({ key: 'pace', label: t('tours.run.pace'), value: format.pace(card.paceSecondsPerKm) });
|
||||
}
|
||||
return <CardFields fields={fields} />;
|
||||
}
|
||||
|
||||
@@ -179,9 +173,9 @@ export default function TourRouteHead({ card, onShow }: { card: TourRouteCard; o
|
||||
title={name}
|
||||
meta={card.label ?? undefined}
|
||||
>
|
||||
{((card.activity === 'hike' && card.grades) || card.routingProfile || card.schedule) && (
|
||||
{((card.activity === 'hike' && card.grades) || card.schedule) && (
|
||||
<div className="mt-2.5 flex flex-wrap items-center gap-1.5">
|
||||
{((card.activity === 'hike' && card.grades) || card.routingProfile) && <TourGrade card={card} />}
|
||||
{card.activity === 'hike' && card.grades && <TourGrade card={card} />}
|
||||
<DayPill card={card} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/**
|
||||
* FE-AI-TOUR-033 to FE-AI-TOUR-034, FE-AI-TOUR-063
|
||||
* FE-AI-TOUR-033 to FE-AI-TOUR-034
|
||||
*
|
||||
* A held tour change in its row: the route drawn small with its figures and
|
||||
* grade and a small profile, the kind of tour as the row's tile; a tour whose
|
||||
@@ -71,10 +71,4 @@ describe('TourRouteInRow', () => {
|
||||
expect(delta).toHaveTextContent('+1.6 km');
|
||||
expect(delta).toHaveTextContent('+20 min');
|
||||
});
|
||||
|
||||
it('FE-AI-TOUR-063: a held bike tour or run names its profile in its row, never a hike grade', () => {
|
||||
renderRow({ ...PENDING, activity: 'bike', routingProfile: 'road', grades: null, limit: null });
|
||||
expect(screen.getByText('Road')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('tour-grade')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -53,7 +53,7 @@ export default function TourRouteInRow({ card, item }: { card: TourRouteCard; it
|
||||
<span className="min-w-0 flex-1">
|
||||
<WayFigures way={legVariantOf(card, 'current')} unit={unit} />
|
||||
</span>
|
||||
{((grades && grades.highest !== null) || card.routingProfile) && <TourGrade card={card} />}
|
||||
{grades && grades.highest !== null && <TourGrade card={card} />}
|
||||
</span>
|
||||
{previous && (
|
||||
<VariantDelta
|
||||
|
||||
@@ -18,7 +18,6 @@ import CardHeader from '../parts/CardHeader';
|
||||
import { CardSection } from '../parts/CardSection';
|
||||
import WayFigures from './TourFigureLine';
|
||||
import { TourRouteBody } from './TourRouteCard';
|
||||
import { TourGrade } from './TourRouteHead';
|
||||
import { legVariantOf, profileSamples, type RouteEntry, WAY_KEYS } from './tourRouteModel';
|
||||
import { routeName, TOUR_TYPE_WORDS } from './tourRouteWords';
|
||||
import { useLineHover, useTourRouteCard } from './useTourRouteCard';
|
||||
@@ -115,8 +114,6 @@ function WayOption({
|
||||
{grades && grades.highest !== null && (
|
||||
<SacStepChip step={grades.highest} uncertain={grades.unknownShare >= 0.5} />
|
||||
)}
|
||||
{/* Ways of a ride or a run may differ by profile: each says its own. */}
|
||||
{entry.card.routingProfile && <TourGrade card={entry.card} />}
|
||||
</span>
|
||||
<WayFigures way={way} unit={unit} />
|
||||
{!chosen && <WayDelta way={way} chosen={chosenWay} letter={chosenLetter} unit={unit} />}
|
||||
|
||||
@@ -1,23 +1,5 @@
|
||||
import { type AssistantApplied, cumulativeMetres, type TourRouteCard, type TrekCard } from '@trek/shared';
|
||||
import {
|
||||
ArrowLeftRight,
|
||||
ChartNoAxesColumn,
|
||||
Circle,
|
||||
CircleCheck,
|
||||
CircleSlash,
|
||||
Copy,
|
||||
Footprints,
|
||||
History,
|
||||
Luggage,
|
||||
MapPinMinus,
|
||||
MapPinPlus,
|
||||
Palette,
|
||||
Repeat,
|
||||
Route,
|
||||
Snowflake,
|
||||
TriangleAlert,
|
||||
Waves,
|
||||
} from 'lucide-react';
|
||||
import { ChartNoAxesColumn, Circle, CircleCheck, CircleSlash, Footprints, Luggage, Route } from 'lucide-react';
|
||||
|
||||
import type { RouteLineSpec, RouteUse } from '../../../../types/assistantMap';
|
||||
import type { EntityTarget, PackLook } from '../cardTypes';
|
||||
@@ -113,21 +95,10 @@ export const TOUR_LOOK = {
|
||||
countTour: { Icon: ChartNoAxesColumn, tone: 'success', labelKey: 'assistant.change.verb.countTour' },
|
||||
linkPacking: { Icon: Luggage, tone: 'success', labelKey: 'assistant.change.verb.linkPacking' },
|
||||
unlinkPacking: { Icon: Luggage, tone: 'info', labelKey: 'assistant.change.verb.unlinkPacking' },
|
||||
reverseTour: { Icon: ArrowLeftRight, tone: 'info', labelKey: 'assistant.change.verb.reverseTour' },
|
||||
closeLoop: { Icon: Repeat, tone: 'info', labelKey: 'assistant.change.verb.closeLoop' },
|
||||
copyTour: { Icon: Copy, tone: 'success', labelKey: 'assistant.change.verb.copyTour' },
|
||||
setRouteColor: { Icon: Palette, tone: 'info', labelKey: 'assistant.change.verb.setRouteColor' },
|
||||
classifySki: { Icon: Snowflake, tone: 'info', labelKey: 'assistant.change.verb.classifySki' },
|
||||
setPaddlePlan: { Icon: Waves, tone: 'info', labelKey: 'assistant.change.verb.setPaddlePlan' },
|
||||
decideObstacles: { Icon: TriangleAlert, tone: 'info', labelKey: 'assistant.change.verb.decideObstacles' },
|
||||
restoreTrack: { Icon: History, tone: 'info', labelKey: 'assistant.change.verb.restoreTrack' },
|
||||
addTourStop: { Icon: MapPinPlus, tone: 'success', labelKey: 'assistant.change.verb.addTourStop' },
|
||||
removeTourStop: { Icon: MapPinMinus, tone: 'danger', labelKey: 'assistant.change.verb.removeTourStop' },
|
||||
},
|
||||
tools: {},
|
||||
steps: {
|
||||
propose_city_walk: { stepKey: 'assistant.step.planningWalk' },
|
||||
propose_tour: { stepKey: 'assistant.step.planningRoute' },
|
||||
plan_paddle_route: { stepKey: 'assistant.step.planningRoute' },
|
||||
plan_ski_route: { stepKey: 'assistant.step.planningRoute' },
|
||||
get_tour_plan: { stepKey: 'assistant.step.readingTour' },
|
||||
@@ -135,14 +106,6 @@ export const TOUR_LOOK = {
|
||||
find_tours_for_day: { stepKey: 'assistant.step.readingTours' },
|
||||
search_tour_pois: { stepKey: 'assistant.step.tourPois' },
|
||||
get_city_walk_progress: { stepKey: 'assistant.step.readingTour' },
|
||||
get_tour_trail_details: { stepKey: 'assistant.step.readingTour' },
|
||||
propose_round_hike: { stepKey: 'assistant.step.findingRounds' },
|
||||
propose_hike_leg_way: { stepKey: 'assistant.step.findingWays' },
|
||||
search_wanderer_trails: { stepKey: 'assistant.step.searchingWanderer' },
|
||||
preview_wanderer_trail: { stepKey: 'assistant.step.readingTrail' },
|
||||
check_tour_source: { stepKey: 'assistant.step.checkingSource' },
|
||||
// P7: a route file attached in the chat, read by the server into its tracks.
|
||||
read_tour_file: { stepKey: 'assistant.step.readingTourFile' },
|
||||
},
|
||||
entities: {
|
||||
tour: {
|
||||
|
||||
@@ -29,7 +29,6 @@ import {
|
||||
sacAt,
|
||||
sacPaint,
|
||||
steepStretches,
|
||||
takeWaitsKey,
|
||||
wayGroups,
|
||||
} from './tourRouteModel';
|
||||
import { sketchOf } from './tourRouteSketchModel';
|
||||
@@ -137,33 +136,13 @@ describe('tourRouteModel', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-AI-TOUR-009: "Plan this" takes a planned way of every type, a city walk, a whole paddle or ski plan', () => {
|
||||
it('FE-AI-TOUR-009: "Plan this" takes a planned hike or a city walk, nothing else', () => {
|
||||
expect(canTake(HIKE)).toBe(true);
|
||||
expect(canTake({ ...HIKE, routed: false })).toBe(false);
|
||||
expect(canTake({ ...HIKE, activity: 'walk', routed: false })).toBe(true);
|
||||
expect(canTake({ ...HIKE, activity: 'bike', routingProfile: 'gravel' })).toBe(true);
|
||||
expect(canTake({ ...HIKE, activity: 'run', routingProfile: 'trail', routed: false })).toBe(false);
|
||||
expect(canTake(SAVED)).toBe(false);
|
||||
expect(canTake({ ...HIKE, activity: 'kayak', source: 'plan' })).toBe(true);
|
||||
expect(canTake({ ...HIKE, activity: 'ski', source: 'plan' })).toBe(true);
|
||||
// A plan with a leg that could not be planned is no tour yet; a hike is never a plan.
|
||||
const failed = [{ kind: 'legs_failed' as const, at: null, count: 1 }];
|
||||
expect(canTake({ ...HIKE, activity: 'ski', source: 'plan', warnings: failed })).toBe(false);
|
||||
expect(canTake({ ...HIKE, source: 'plan' })).toBe(false);
|
||||
expect(canTake({ ...HIKE, activity: 'kayak', source: 'plan' })).toBe(false);
|
||||
expect(canTake({ ...HIKE, source: 'pending' })).toBe(false);
|
||||
// Another way for a leg of a saved hike changes that hike; it is not created anew.
|
||||
expect(canTake({ ...HIKE, placeId: 12 })).toBe(false);
|
||||
});
|
||||
|
||||
it("FE-AI-TOUR-060: a run waits for the runner's pace; a bike tour, a hike and a run with a pace wait for nothing", () => {
|
||||
expect(takeWaitsKey({ ...HIKE, activity: 'run', routingProfile: 'running' })).toBe('assistant.card.tour.needsPace');
|
||||
expect(takeWaitsKey({ ...HIKE, activity: 'run', paceSecondsPerKm: 330 })).toBeNull();
|
||||
expect(takeWaitsKey({ ...HIKE, activity: 'bike' })).toBeNull();
|
||||
expect(takeWaitsKey(HIKE)).toBeNull();
|
||||
// A ride's router time is its riding time; a run's time is at its pace.
|
||||
expect(timeLabelKey({ activity: 'bike', minutesBasis: 'router' })).toBe('tours.bike.timeEstimated');
|
||||
expect(timeLabelKey({ activity: 'run', minutesBasis: 'pace' })).toBe('tours.run.timeEstimated');
|
||||
expect(timeLabelKey({ activity: 'hike', minutesBasis: 'router' })).toBe('tours.scope.routed');
|
||||
});
|
||||
|
||||
it('FE-AI-TOUR-010: proposals of one answer form ways of three at most; anything else stands alone', () => {
|
||||
|
||||
@@ -226,31 +226,14 @@ export function routePoints(card: TourRouteCard): [number, number][] {
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether "Plan this" can take the proposal: a city walk, a hike, a bike
|
||||
* tour or a run whose way was planned, or a paddle or ski plan whose every
|
||||
* leg was planned. A saved tour, a held change and the other way of a
|
||||
* saved hike's leg (named by its place, changed with update_tour rather
|
||||
* than created anew) cannot.
|
||||
* Whether "Plan this" can take the proposal: a hike whose way was planned,
|
||||
* or a city walk. A paddle or ski plan, a saved tour and a held change cannot.
|
||||
*/
|
||||
export function canTake(card: TourRouteCard): boolean {
|
||||
if (card.source === 'plan') {
|
||||
const whole = card.warnings.every((warning) => warning.kind !== 'legs_failed');
|
||||
return (card.activity === 'kayak' || card.activity === 'ski') && card.routed && whole;
|
||||
}
|
||||
if (card.source !== 'proposal' || card.placeId !== null) return false;
|
||||
return card.activity === 'walk' || (LAND_PLANS.has(card.activity) && card.routed);
|
||||
if (card.source !== 'proposal') return false;
|
||||
return card.activity === 'walk' || (card.activity === 'hike' && card.routed);
|
||||
}
|
||||
|
||||
/** The proposals on land "Plan this" takes once their way is planned. */
|
||||
const LAND_PLANS: ReadonlySet<TourRouteCard['activity']> = new Set(['hike', 'bike', 'run']);
|
||||
|
||||
/** Why "Plan this" waits on a card it can take: a run is saved with the runner's pace only. Null when nothing is missing. */
|
||||
export function takeWaitsKey(card: TourRouteCard): string | null {
|
||||
return card.activity === 'run' && card.paceSecondsPerKm == null ? NEEDS_PACE.labelKey : null;
|
||||
}
|
||||
|
||||
const NEEDS_PACE = { labelKey: 'assistant.card.tour.needsPace' } as const;
|
||||
|
||||
/** A share as words take it, "40 %". */
|
||||
export function percentText(share: number): string {
|
||||
return `${Math.round(share * 100)} %`;
|
||||
|
||||
@@ -92,25 +92,10 @@ const TIME_WORDS = {
|
||||
planned: { labelKey: 'tours.scope.planned' },
|
||||
stations: { labelKey: 'tours.scope.plannedWithStays' },
|
||||
piste: { labelKey: 'tours.ski.time' },
|
||||
pace: { labelKey: 'tours.run.timeEstimated' },
|
||||
} as const satisfies Record<NonNullable<TourRouteCard['minutesBasis']>, { labelKey: string }>;
|
||||
|
||||
/** What each bike and run profile is called, as the Tours tab names it. */
|
||||
export const PROFILE_WORDS = {
|
||||
touring: { labelKey: 'tours.bike.profile.touring' },
|
||||
road: { labelKey: 'tours.bike.profile.road' },
|
||||
gravel: { labelKey: 'tours.bike.profile.gravel' },
|
||||
mtb: { labelKey: 'tours.bike.profile.mtb' },
|
||||
running: { labelKey: 'tours.run.profile.running' },
|
||||
trail: { labelKey: 'tours.run.profile.trail' },
|
||||
} as const satisfies Record<NonNullable<TourRouteCard['routingProfile']>, { labelKey: string }>;
|
||||
|
||||
/**
|
||||
* The name of a route's time: by how it was reckoned (a bike tour's router
|
||||
* time is its riding time), else a paddle's own, else a walking time.
|
||||
*/
|
||||
/** The name of a route's time: by how it was reckoned, else a paddle's own, else a walking time. */
|
||||
export function timeLabelKey(card: Pick<TourRouteCard, 'minutesBasis' | 'activity'>): string {
|
||||
if (card.minutesBasis === 'router' && card.activity === 'bike') return 'tours.bike.timeEstimated';
|
||||
if (card.minutesBasis) return TIME_WORDS[card.minutesBasis].labelKey;
|
||||
return card.activity === 'kayak' ? 'tours.paddle.timeEstimated' : 'tours.planner.walkingEstimated';
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ import { hasUndecided } from '../../assistantParts';
|
||||
import { useAssistantView } from '../../assistantViewContext';
|
||||
import { useChangeHover } from '../../useChangeHover';
|
||||
import { tourTarget } from './tourLook';
|
||||
import { canTake, routePoints, takeWaitsKey } from './tourRouteModel';
|
||||
import { canTake, routePoints } from './tourRouteModel';
|
||||
import { takeInThread, takeOfProposal } from './tourTakeModel';
|
||||
|
||||
/**
|
||||
@@ -104,8 +104,7 @@ function stateAfter(outcome: HoldOutcome, error: string | null): TakeState {
|
||||
}
|
||||
|
||||
/**
|
||||
* "Plan this" on a proposed tour (a hike, a bike tour, a run, a city walk)
|
||||
* or a paddle or ski plan: one tap adds the tour. The
|
||||
* "Plan this" on a proposed hike or city walk: one tap adds the tour. The
|
||||
* server holds the tour it creates as a change, without a model turn, and
|
||||
* the tap decides it at once, since tapping "Plan this" already is the
|
||||
* decision; the assistant then answers to what was added. Once the tour is
|
||||
@@ -149,10 +148,9 @@ export function useTakeProposal(toolCallId: string, card: TourRouteCard) {
|
||||
}, []);
|
||||
|
||||
const visible = canTake(card) && !!trip && can('place_edit', trip);
|
||||
let reasonKey: string | null;
|
||||
let reasonKey: string | null = null;
|
||||
if (offline) reasonKey = 'assistant.error.offline';
|
||||
else if (waiting && state !== 'taken') reasonKey = 'assistant.composer.decideFirst';
|
||||
else reasonKey = takeWaitsKey(card);
|
||||
const disabled = reasonKey !== null || isRunning || threadId === null || state === 'busy';
|
||||
|
||||
const take = useCallback(async () => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { ASSISTANT_TOUR_FILE_EXTENSIONS, LLM_PHOTO_EXTENSIONS } from '@trek/shared';
|
||||
import { LLM_PHOTO_EXTENSIONS } from '@trek/shared';
|
||||
import { type DragEvent, useState } from 'react';
|
||||
|
||||
import { useTranslation } from '../../i18n';
|
||||
@@ -6,7 +6,7 @@ import { assistantScopeOf } from '../../store/assistantChatKey';
|
||||
import { chatOf, useAssistantStore } from '../../store/assistantStore';
|
||||
import { useToast } from '../shared/Toast';
|
||||
|
||||
/** What the booking import reads and the route files taken in as tours (the server checks again), and how big one file may be. */
|
||||
/** What the booking import reads (the server checks again), and how big one file may be. */
|
||||
const ATTACH_EXTENSIONS: readonly string[] = [
|
||||
'.pdf',
|
||||
'.eml',
|
||||
@@ -16,7 +16,6 @@ const ATTACH_EXTENSIONS: readonly string[] = [
|
||||
'.htm',
|
||||
'.txt',
|
||||
...LLM_PHOTO_EXTENSIONS,
|
||||
...ASSISTANT_TOUR_FILE_EXTENSIONS,
|
||||
];
|
||||
const MAX_ATTACH_BYTES = 10 * 1024 * 1024;
|
||||
|
||||
@@ -30,7 +29,7 @@ function hasFiles(e: DragEvent): boolean {
|
||||
}
|
||||
|
||||
/**
|
||||
* Hands a booking file or a route file (GPX, KML, KMZ) to the chat, from the paperclip, a paste or a drop on
|
||||
* Hands a booking file to the chat, from the paperclip, a paste or a drop on
|
||||
* the window. One file at a time, refused here with a toast when it is not
|
||||
* one the import reads or too big, so a wrong file never costs a round trip.
|
||||
* The drop handlers go on the whole chat; `dragging` lights its drop zone.
|
||||
|
||||
@@ -3,7 +3,6 @@ import { useCallback } from 'react';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
|
||||
import { chatOf, useAssistantStore } from '../../store/assistantStore';
|
||||
import { useOpenTourStore } from '../../store/openTourStore';
|
||||
import { useCanDo } from '../../store/permissionsStore';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
@@ -42,10 +41,6 @@ function lastSpot(stops: readonly Assignment[] | undefined): { lat: number; lng:
|
||||
* Adding opens the planner's own place form, filled in with the place and on
|
||||
* the day in focus: the traveller sees everything about it and saves it as
|
||||
* any other place, so nothing waits for the chat's open decisions.
|
||||
*
|
||||
* P6: while a saved hike or city walk is open in the planner, "+ Tour" takes
|
||||
* a place into it as a stop: held as a change in the chat like any other,
|
||||
* so the stop is only saved once the traveller applies it.
|
||||
*/
|
||||
export function useAssistantPlaceStrip() {
|
||||
const { tripId, onRevealMap } = useAssistantView();
|
||||
@@ -65,8 +60,6 @@ export function useAssistantPlaceStrip() {
|
||||
);
|
||||
const focusDayId = useAssistantStore((s) => chatOf(s, tripId).focus?.dayId ?? null);
|
||||
const openPlaceDraft = useAssistantStore((s) => s.openPlaceDraft);
|
||||
const insertFoundPlace = useAssistantStore((s) => s.insertFoundPlace);
|
||||
const openTour = useOpenTourStore((s) => (s.open?.tripId === tripId ? s.open : null));
|
||||
const point = useCardPoint();
|
||||
|
||||
const focusDay = (days ?? []).find((d) => d.id === focusDayId) ?? null;
|
||||
@@ -92,14 +85,6 @@ export function useAssistantPlaceStrip() {
|
||||
openPlaceDraft(trip.id, place, focusDay?.id ?? null);
|
||||
};
|
||||
|
||||
/** The saved tour a place can be taken into as a stop, null while none is open or nothing can be added. */
|
||||
const tour = canAdd ? openTour : null;
|
||||
|
||||
/** Holds the place as a stop of the open tour, to decide in the chat. */
|
||||
const addToTour = (place: AssistantFoundPlace) => {
|
||||
if (tour) void insertFoundPlace(tripId, place.ref, tour.placeId);
|
||||
};
|
||||
|
||||
/** Shows the place on the map; on the phone the chat steps aside first. */
|
||||
const show = point.show;
|
||||
|
||||
@@ -111,5 +96,5 @@ export function useAssistantPlaceStrip() {
|
||||
[hoverPoint]
|
||||
);
|
||||
|
||||
return { canAdd, categoryOf, distanceOf, open, show, hover, tour, addToTour };
|
||||
return { canAdd, categoryOf, distanceOf, open, show, hover };
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-027
|
||||
// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-021
|
||||
|
||||
// Plyr needs a real media pipeline, so the player is stubbed here.
|
||||
vi.mock('./VideoPlayer', () => ({
|
||||
@@ -17,7 +17,6 @@ vi.mock('../../api/websocket', () => ({
|
||||
|
||||
import { render, screen, fireEvent } from '../../../tests/helpers/render';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import { useSettingsStore } from '../../store/settingsStore';
|
||||
import PhotoLightbox from './PhotoLightbox';
|
||||
|
||||
const samplePhotos = [
|
||||
@@ -248,82 +247,4 @@ describe('PhotoLightbox', () => {
|
||||
expect(img.style.transform).toContain('scale(2)');
|
||||
expect(onClose).not.toHaveBeenCalled();
|
||||
});
|
||||
it('FE-COMP-LIGHTBOX-022: is a labelled modal dialog', () => {
|
||||
render(<PhotoLightbox photos={samplePhotos} onClose={vi.fn()} label="Show photos" />);
|
||||
const dialog = screen.getByRole('dialog', { name: 'Show photos' });
|
||||
expect(dialog).toHaveAttribute('aria-modal', 'true');
|
||||
});
|
||||
|
||||
it('FE-COMP-LIGHTBOX-023: takes the focus when it opens and gives it back to the opener when it closes', () => {
|
||||
const opener = document.createElement('button');
|
||||
document.body.appendChild(opener);
|
||||
opener.focus();
|
||||
try {
|
||||
const { unmount } = render(<PhotoLightbox photos={samplePhotos} onClose={vi.fn()} label="Gallery" />);
|
||||
expect(screen.getByRole('dialog', { name: 'Gallery' })).toHaveFocus();
|
||||
unmount();
|
||||
expect(opener).toHaveFocus();
|
||||
} finally {
|
||||
opener.remove();
|
||||
}
|
||||
});
|
||||
|
||||
it('FE-COMP-LIGHTBOX-024: names its arrows', () => {
|
||||
render(<PhotoLightbox photos={samplePhotos} startIndex={1} onClose={vi.fn()} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Next photo' }));
|
||||
expect(screen.getByText('3 / 3')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Previous photo' }));
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe('right to left', () => {
|
||||
beforeEach(() => {
|
||||
// The direction follows the language, as in the app, where the provider also sets <html dir>.
|
||||
useSettingsStore.setState((state) => ({ settings: { ...state.settings, language: 'ar' } }));
|
||||
});
|
||||
afterEach(() => {
|
||||
document.documentElement.dir = '';
|
||||
});
|
||||
|
||||
it('FE-COMP-LIGHTBOX-025: the arrow keys follow the reading direction', () => {
|
||||
render(<PhotoLightbox photos={samplePhotos} onClose={vi.fn()} />);
|
||||
fireEvent.keyDown(window, { key: 'ArrowLeft' });
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument();
|
||||
fireEvent.keyDown(window, { key: 'ArrowRight' });
|
||||
expect(screen.getByText('1 / 3')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-COMP-LIGHTBOX-026: a swipe to the right turns to the next photo', () => {
|
||||
const { container } = render(<PhotoLightbox photos={samplePhotos} startIndex={1} onClose={vi.fn()} />);
|
||||
const surface = container.firstElementChild as HTMLElement;
|
||||
|
||||
fireEvent.touchStart(surface, { touches: [{ clientX: 100, clientY: 200 }] });
|
||||
fireEvent.touchEnd(surface, { changedTouches: [{ clientX: 200, clientY: 210 }] });
|
||||
expect(screen.getByText('3 / 3')).toBeInTheDocument();
|
||||
|
||||
fireEvent.touchStart(surface, { touches: [{ clientX: 200, clientY: 200 }] });
|
||||
fireEvent.touchEnd(surface, { changedTouches: [{ clientX: 100, clientY: 210 }] });
|
||||
expect(screen.getByText('2 / 3')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('FE-COMP-LIGHTBOX-027: a caption with a source page links to it in a new tab, one without stays text', () => {
|
||||
render(
|
||||
<PhotoLightbox
|
||||
photos={[
|
||||
{ id: 'a', src: '/a.jpg', caption: 'Alice, CC BY 4.0', captionHref: 'https://commons.wikimedia.org/wiki/File:A.jpg' },
|
||||
{ id: 'b', src: '/b.jpg', caption: 'Google', captionHref: null },
|
||||
]}
|
||||
onClose={vi.fn()}
|
||||
/>,
|
||||
);
|
||||
const link = screen.getByRole('link', { name: 'Alice, CC BY 4.0' });
|
||||
expect(link).toHaveAttribute('href', 'https://commons.wikimedia.org/wiki/File:A.jpg');
|
||||
expect(link).toHaveAttribute('target', '_blank');
|
||||
expect(link).toHaveAttribute('rel', 'noopener noreferrer');
|
||||
|
||||
fireEvent.keyDown(window, { key: 'ArrowRight' });
|
||||
expect(screen.getByText('Google', { selector: 'p' })).toBeInTheDocument();
|
||||
expect(screen.queryByRole('link')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -3,14 +3,12 @@ import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from 'lucide-react'
|
||||
import VideoPlayer from './VideoPlayerLazy'
|
||||
import { usePhotoZoom } from './usePhotoZoom'
|
||||
import { Tooltip } from '../shared/Tooltip'
|
||||
import { isRtlLanguage, useTranslation } from '../../i18n'
|
||||
import { useTranslation } from '../../i18n'
|
||||
|
||||
interface LightboxPhoto {
|
||||
id: string
|
||||
src: string
|
||||
caption?: string | null
|
||||
/** Where the caption's credit points to (a photo's source page), opened in a new tab. */
|
||||
captionHref?: string | null
|
||||
provider?: string
|
||||
asset_id?: string | null
|
||||
owner_id?: number | null
|
||||
@@ -21,8 +19,6 @@ interface Props {
|
||||
photos: LightboxPhoto[]
|
||||
startIndex?: number
|
||||
onClose: () => void
|
||||
/** What the dialog is called for assistive tech. */
|
||||
label?: string
|
||||
}
|
||||
|
||||
/** The round glass buttons of the top bar. */
|
||||
@@ -32,21 +28,10 @@ const ROUND_BTN: React.CSSProperties = {
|
||||
color: '#fff', cursor: 'pointer',
|
||||
}
|
||||
|
||||
export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }: Props) {
|
||||
export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props) {
|
||||
const [idx, setIdx] = useState(startIndex)
|
||||
const touchStart = useRef<{ x: number; y: number } | null>(null)
|
||||
const dialogRef = useRef<HTMLDivElement>(null)
|
||||
const { t, language } = useTranslation()
|
||||
// Right to left, the next photo lies to the left: the arrow keys and swipes follow the reading direction.
|
||||
// Taken from the language, not read off <html dir>, so it stays put across re-renders.
|
||||
const rtl = isRtlLanguage(language)
|
||||
|
||||
// Focus moves into the dialog when it opens and back to what opened it when it closes.
|
||||
useEffect(() => {
|
||||
const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null
|
||||
dialogRef.current?.focus()
|
||||
return () => opener?.focus()
|
||||
}, [])
|
||||
const { t } = useTranslation()
|
||||
|
||||
const photo = photos[idx]
|
||||
// Zoom starts over on every photo (#1484).
|
||||
@@ -61,12 +46,12 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose()
|
||||
if (e.key === 'ArrowLeft') (rtl ? next : prev)()
|
||||
if (e.key === 'ArrowRight') (rtl ? prev : next)()
|
||||
if (e.key === 'ArrowLeft') prev()
|
||||
if (e.key === 'ArrowRight') next()
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [prev, next, onClose, rtl])
|
||||
}, [prev, next, onClose])
|
||||
|
||||
// A pinch, a double tap or a pan of an enlarged photo belongs to the zoom; only
|
||||
// the rest is a swipe that turns the page or closes the lightbox.
|
||||
@@ -94,7 +79,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
|
||||
}
|
||||
// horizontal swipe
|
||||
if (Math.abs(dx) > 50 && Math.abs(dy) < 80) {
|
||||
if (dx < 0 !== rtl) next()
|
||||
if (dx < 0) next()
|
||||
else prev()
|
||||
}
|
||||
touchStart.current = null
|
||||
@@ -104,13 +89,7 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={dialogRef}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={label}
|
||||
tabIndex={-1}
|
||||
style={{
|
||||
outline: 'none',
|
||||
position: 'fixed', inset: 0, zIndex: 10000,
|
||||
background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
|
||||
display: 'flex', flexDirection: 'column',
|
||||
@@ -165,15 +144,15 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
|
||||
|
||||
{/* Prev button — visible on hover (desktop), always visible (mobile) */}
|
||||
{hasPrev && (
|
||||
<button type="button" onClick={prev} aria-label={t('journey.lightbox.previous')} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 focus-visible:opacity-100 transition-opacity" style={{
|
||||
position: 'absolute', insetInlineStart: 16, zIndex: 5,
|
||||
<button type="button" onClick={prev} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 transition-opacity" style={{
|
||||
position: 'absolute', left: 16, zIndex: 5,
|
||||
width: 44, height: 44, borderRadius: '50%',
|
||||
background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
color: '#fff', cursor: 'pointer',
|
||||
}}>
|
||||
<ChevronLeft size={22} className="rtl:rotate-180" />
|
||||
<ChevronLeft size={22} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
@@ -200,33 +179,27 @@ export default function PhotoLightbox({ photos, startIndex = 0, onClose, label }
|
||||
|
||||
{/* Next button */}
|
||||
{hasNext && (
|
||||
<button type="button" onClick={next} aria-label={t('journey.lightbox.next')} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 focus-visible:opacity-100 transition-opacity" style={{
|
||||
position: 'absolute', insetInlineEnd: 16, zIndex: 5,
|
||||
<button type="button" onClick={next} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 transition-opacity" style={{
|
||||
position: 'absolute', right: 16, zIndex: 5,
|
||||
width: 44, height: 44, borderRadius: '50%',
|
||||
background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
alignItems: 'center', justifyContent: 'center',
|
||||
color: '#fff', cursor: 'pointer',
|
||||
}}>
|
||||
<ChevronRight size={22} className="rtl:rotate-180" />
|
||||
<ChevronRight size={22} />
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Caption — bottom center overlay */}
|
||||
{photo.caption && (
|
||||
<div style={{ position: 'absolute', bottom: 20, insetInline: 0, zIndex: 5, display: 'flex', justifyContent: 'center', pointerEvents: 'none' }}>
|
||||
<div style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', zIndex: 5, maxWidth: '70%', textAlign: 'center' }}>
|
||||
<p style={{
|
||||
fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontStyle: 'italic',
|
||||
color: 'rgba(255,255,255,0.75)', margin: 0, lineHeight: 1.5, maxWidth: '70%', textAlign: 'center',
|
||||
color: 'rgba(255,255,255,0.75)', margin: 0, lineHeight: 1.5,
|
||||
background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(8px)',
|
||||
padding: '6px 14px', borderRadius: 10, pointerEvents: 'auto',
|
||||
}}>
|
||||
{photo.captionHref ? (
|
||||
<a href={photo.captionHref} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit' }} className="hover:underline">
|
||||
{photo.caption}
|
||||
</a>
|
||||
) : photo.caption}
|
||||
</p>
|
||||
padding: '6px 14px', borderRadius: 10,
|
||||
}}>{photo.caption}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -15,6 +15,8 @@ import {
|
||||
calculateAlternatives,
|
||||
avoidedClasses,
|
||||
routeEngineFor,
|
||||
sameRoad,
|
||||
furthestFrom,
|
||||
osrmLegSegment,
|
||||
} from './RouteCalculator'
|
||||
|
||||
@@ -1202,6 +1204,37 @@ describe('a trip that avoids something', () => {
|
||||
expect(plain.avoidance).toBeUndefined()
|
||||
})
|
||||
|
||||
it('FE-COMP-ROUTECALCULATOR-064: a road that runs the whole of another and turns off to a point and back is not that road', () => {
|
||||
// The shape of a leg bent by a via: every point of the plain road lies on it, so
|
||||
// asked only one way round the two read as one.
|
||||
const plainRoad = { coordinates: [[61, 10], [61, 11], [61, 12]] as [number, number][], distance: 100_000, duration: 3600 }
|
||||
const spur = { coordinates: [[61, 10], [61, 11], [61.3, 11], [61, 11], [61, 12]] as [number, number][], distance: 166_000, duration: 5400 }
|
||||
|
||||
expect(sameRoad(plainRoad, spur)).toBe(false)
|
||||
expect(sameRoad(spur, plainRoad)).toBe(false)
|
||||
expect(sameRoad(plainRoad, { ...plainRoad, distance: 104_000, duration: 3900 })).toBe(true)
|
||||
})
|
||||
|
||||
it('FE-COMP-ROUTECALCULATOR-065: one road drawn with a different spacing of points is still one road', () => {
|
||||
// Two engines' lines of one long road share almost no vertex. Measured to the nearest
|
||||
// sampled vertex, a point on the same road sat half a sample off it: kilometres here.
|
||||
// The dense line is sampled every tenth vertex, 0.05 degrees apart; the sparse one sits
|
||||
// exactly between those samples, 1.8 km from the nearest, on the very same road.
|
||||
const dense = Array.from({ length: 2001 }, (_, i) => [50, i * 0.005] as [number, number])
|
||||
const sparse: [number, number][] = [
|
||||
[50, 0],
|
||||
...Array.from({ length: 200 }, (_, i) => [50, 0.025 + i * 0.05] as [number, number]),
|
||||
[50, 10],
|
||||
]
|
||||
const a = { coordinates: dense, distance: 700_000, duration: 25_000 }
|
||||
const b = { coordinates: sparse, distance: 712_000, duration: 27_000 }
|
||||
|
||||
expect(sameRoad(a, b)).toBe(true)
|
||||
const off = furthestFrom([[50.02, 5]], dense)
|
||||
expect(off?.index).toBe(0)
|
||||
expect(off?.km).toBeCloseTo(2.22, 1)
|
||||
})
|
||||
|
||||
it('FE-COMP-ROUTECALCULATOR-066: the avoidance offer beside an OSRM leg says when it crosses by ferry', async () => {
|
||||
server.use(
|
||||
http.get(`${FOSSGIS.driving}/:coords`, () => HttpResponse.json({ code: 'Ok', routes: [{ geometry: { coordinates: [[10, 63], [11, 63], [12, 63]] }, distance: 100000, duration: 3600 }] })),
|
||||
|
||||
@@ -5,7 +5,7 @@ import { haversineKm } from '../../utils/geo'
|
||||
import { formatDistance } from '../../utils/units'
|
||||
import { countRoute } from './routeUsageCounter'
|
||||
import { valhallaRouteAvoiding, valhallaRun, valhallaAvailable, valhallaAlternates, valhallaSpacing, legAvoids, type AvoidClass, type ValhallaLeg } from './valhallaRoute'
|
||||
import { furthestFrom, sameRoad, type RouteUsageSurface } from '@trek/shared'
|
||||
import type { RouteUsageSurface } from '@trek/shared'
|
||||
|
||||
// FOSSGIS hosts OSRM with real per-profile routing (car/foot/bike) — the
|
||||
// project-osrm.org demo is car-only (it ignores the profile in the URL). Use
|
||||
@@ -803,6 +803,41 @@ export type RoadLine = Pick<RouteAlternative, 'coordinates' | 'distance' | 'dura
|
||||
*/
|
||||
const EXCLUDABLE_CLASSES = ['motorway', 'toll', 'ferry'] as const
|
||||
|
||||
/**
|
||||
* How far two lines may stray from each other and still be the same road, in kilometres.
|
||||
*
|
||||
* Parallel carriageways, a different slip road onto the same motorway and the noise
|
||||
* between two engines' idea of where a road is all sit well under this. A way somebody
|
||||
* would call an alternative leaves it by kilometres: the ferry-free run from Hamburg to
|
||||
* Copenhagen, which is a genuinely different road, peaks 2.3 km off the default.
|
||||
*/
|
||||
const SAME_ROAD_KM = 0.5
|
||||
|
||||
/**
|
||||
* Two lines are the same road.
|
||||
*
|
||||
* Length and duration used to decide this, and stopped being enough when a second engine
|
||||
* started answering. Valhalla prices roads differently: measured over twelve European
|
||||
* legs its distances ran 1.8 % above OSRM's, so on a 470 km leg the same road comes back
|
||||
* thirteen kilometres apart and a 200 m tolerance calls it a discovery. Two identical
|
||||
* blue lines on the map is exactly what that looks like. Duration is the worse of the
|
||||
* two to lean on: over the same twelve legs it ranged from 14.7 % under OSRM's to 13.2 %
|
||||
* over, with the sign set by the region rather than by the road.
|
||||
*
|
||||
* The geometry does not care which engine drew it, so it decides whenever there is one.
|
||||
* The numbers stay as the fallback for a line with no shape to compare.
|
||||
*
|
||||
* Measured both ways round. Asked only whether `b` stays near `a`, a road that runs the
|
||||
* whole of `b` and then turns off to a point and back passed as `b`, because every point
|
||||
* of `b` is on it; that is exactly the shape of a leg bent by a via, and the picker and
|
||||
* the check behind a choice both have to tell it from the plain road.
|
||||
*/
|
||||
export function sameRoad(a: RoadLine, b: RoadLine): boolean {
|
||||
const there = furthestFrom(b.coordinates, a.coordinates)
|
||||
const back = furthestFrom(a.coordinates, b.coordinates)
|
||||
if (there && back) return Math.max(there.km, back.km) < SAME_ROAD_KM
|
||||
return Math.abs(a.distance - b.distance) < 200 && Math.abs(a.duration - b.duration) < 60
|
||||
}
|
||||
|
||||
/**
|
||||
* Hosts that have already answered "I do not do exclude", by base URL.
|
||||
@@ -1068,3 +1103,87 @@ function furthestPointFrom(line: [number, number][], reference: [number, number]
|
||||
const furthest = furthestFrom(line, reference)
|
||||
return furthest ? { lat: furthest.lat, lng: furthest.lng } : null
|
||||
}
|
||||
|
||||
/**
|
||||
* The same point, plus how far off it actually is.
|
||||
*
|
||||
* The search itself stays in squared degrees with a cosine on the longitude: it only has
|
||||
* to ORDER the candidates, and a haversine per pair of a 200-by-200 comparison buys
|
||||
* nothing for it. The winner is converted once at the end, because `sameRoad` needs a
|
||||
* real distance rather than a rank, and half a degree is a different number of metres in
|
||||
* Andalusia than in Lapland.
|
||||
*
|
||||
* `index` is where on `line` the point sits, so points taken off one line can be put back
|
||||
* in the order that line drives through them.
|
||||
*/
|
||||
export function furthestFrom(
|
||||
line: [number, number][],
|
||||
reference: [number, number][],
|
||||
): { index: number; lat: number; lng: number; km: number } | null {
|
||||
if (!line.length || !reference.length) return null
|
||||
// Every tenth vertex is plenty: alternatives differ over kilometres, not metres, and a
|
||||
// full cross product of two thousand-point lines is not worth the milliseconds.
|
||||
const step = Math.max(1, Math.floor(reference.length / 200))
|
||||
let bestIndex = -1
|
||||
let bestNeighbour: [number, number] | null = null
|
||||
let bestDist = -1
|
||||
for (let i = 0; i < line.length; i += Math.max(1, Math.floor(line.length / 200))) {
|
||||
const near = nearestOn(line[i], reference, step)
|
||||
if (near.d > bestDist) { bestDist = near.d; bestIndex = i; bestNeighbour = near.at }
|
||||
}
|
||||
if (bestIndex < 0) return null
|
||||
const [lat, lng] = line[bestIndex]
|
||||
const km = bestNeighbour ? haversineKm({ lat, lng }, { lat: bestNeighbour[0], lng: bestNeighbour[1] }) : 0
|
||||
return { index: bestIndex, lat, lng, km }
|
||||
}
|
||||
|
||||
/**
|
||||
* Where `reference` passes closest to `point`, as a squared distance in the same scaled
|
||||
* degrees and the spot on the line it was measured to.
|
||||
*
|
||||
* Coarse, then fine. The sampled vertices find the stretch, and the segments either side
|
||||
* of the nearest one find the road itself. Measured to the sampled vertex alone, a point
|
||||
* on the very same road sat up to half a sample apart from it, which on a thousand
|
||||
* kilometre leg is kilometres: two engines' lines of one motorway then read as two roads.
|
||||
*/
|
||||
function nearestOn(
|
||||
point: [number, number],
|
||||
reference: [number, number][],
|
||||
step: number,
|
||||
): { d: number; at: [number, number] } {
|
||||
const cos = Math.cos((point[0] * Math.PI) / 180)
|
||||
const squared = (p: [number, number]): number => {
|
||||
const dLat = point[0] - p[0]
|
||||
const dLng = (point[1] - p[1]) * cos
|
||||
return dLat * dLat + dLng * dLng
|
||||
}
|
||||
let nearestIndex = 0
|
||||
let nearest = Infinity
|
||||
for (let j = 0; j < reference.length; j += step) {
|
||||
const d = squared(reference[j])
|
||||
if (d < nearest) { nearest = d; nearestIndex = j }
|
||||
}
|
||||
let at = reference[nearestIndex]
|
||||
const last = Math.min(reference.length - 1, nearestIndex + step)
|
||||
for (let k = Math.max(0, nearestIndex - step); k < last; k++) {
|
||||
const on = closestOnSegment(point, reference[k], reference[k + 1], cos)
|
||||
const d = squared(on)
|
||||
if (d < nearest) { nearest = d; at = on }
|
||||
}
|
||||
return { d: nearest, at }
|
||||
}
|
||||
|
||||
/** The point of segment a-b closest to `p`, with longitude scaled by `cos` so the plane is fair. */
|
||||
function closestOnSegment(
|
||||
p: [number, number],
|
||||
a: [number, number],
|
||||
b: [number, number],
|
||||
cos: number,
|
||||
): [number, number] {
|
||||
const dx = (b[1] - a[1]) * cos
|
||||
const dy = b[0] - a[0]
|
||||
const length = dx * dx + dy * dy
|
||||
if (length === 0) return a
|
||||
const t = Math.max(0, Math.min(1, (((p[1] - a[1]) * cos) * dx + (p[0] - a[0]) * dy) / length))
|
||||
return [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// FE-PACKPOP-001 to FE-PACKPOP-009
|
||||
// FE-PACKPOP-001 to FE-PACKPOP-008
|
||||
import { describe, it, expect, vi } from 'vitest'
|
||||
import { useRef } from 'react'
|
||||
import { render, screen, fireEvent } from '../../../tests/helpers/render'
|
||||
@@ -56,15 +56,6 @@ describe('PopoverItem', () => {
|
||||
expect(danger.style.background).toBe('none')
|
||||
})
|
||||
|
||||
it('FE-PACKPOP-009: the entry open now is said to be the current one, not only tinted', () => {
|
||||
render(<>
|
||||
<PopoverItem icon={null} label="Temples" active current onClick={() => {}} />
|
||||
<PopoverItem icon={null} label="Food" onClick={() => {}} />
|
||||
</>)
|
||||
expect(screen.getByRole('button', { name: 'Temples' })).toHaveAttribute('aria-current', 'true')
|
||||
expect(screen.getByRole('button', { name: 'Food' })).not.toHaveAttribute('aria-current')
|
||||
})
|
||||
|
||||
it('FE-PACKPOP-004: the composer button fades while there is nothing to add', () => {
|
||||
expect(composerConfirm(false)).toMatchObject({ opacity: 0.35, cursor: 'default' })
|
||||
expect(composerConfirm(true)).toMatchObject({ opacity: 1, cursor: 'pointer' })
|
||||
|
||||
@@ -7,8 +7,6 @@ interface PopoverItemProps {
|
||||
label: string
|
||||
onClick: () => void
|
||||
active?: boolean
|
||||
/** The entry is the one open now (a chat in a history list), said so to a screen reader too. */
|
||||
current?: boolean
|
||||
danger?: boolean
|
||||
/** A secondary line, such as Add bag, in the faint text colour. */
|
||||
muted?: boolean
|
||||
@@ -16,12 +14,11 @@ interface PopoverItemProps {
|
||||
trailing?: ReactNode
|
||||
}
|
||||
|
||||
export function PopoverItem({ icon, label, onClick, active = false, current = false, danger = false, muted = false, trailing }: PopoverItemProps) {
|
||||
export function PopoverItem({ icon, label, onClick, active = false, danger = false, muted = false, trailing }: PopoverItemProps) {
|
||||
const tone = danger ? '#ef4444' : muted ? 'var(--text-faint)' : 'var(--text-primary)'
|
||||
return (
|
||||
<button type="button"
|
||||
onClick={onClick}
|
||||
aria-current={current || undefined}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 9, width: '100%',
|
||||
padding: '8px 10px', borderRadius: 9, border: 'none', cursor: 'pointer',
|
||||
|
||||
@@ -110,8 +110,8 @@ describe('PlaceDetailsColumn', () => {
|
||||
})
|
||||
})
|
||||
|
||||
it('FE-PDC-004: renders author and licence under the Commons picture in play', async () => {
|
||||
renderColumn({ selectedImageUrl: COMMONS_PHOTO.url })
|
||||
it('FE-PDC-004: renders author and licence under every Commons picture', async () => {
|
||||
renderColumn()
|
||||
|
||||
const credit = await screen.findByText('Alice')
|
||||
// Links to the file description page, where the full terms are.
|
||||
@@ -122,11 +122,9 @@ describe('PlaceDetailsColumn', () => {
|
||||
|
||||
it('FE-PDC-005: names the source when a picture has no author, instead of inventing one', async () => {
|
||||
placeEnrichment.mockResolvedValue({ photos: [GOOGLE_PHOTO], description: null, facts: [] })
|
||||
renderColumn({ selectedImageUrl: GOOGLE_PHOTO.url })
|
||||
renderColumn()
|
||||
|
||||
expect(await screen.findByText('Google')).toBeInTheDocument()
|
||||
// The tile's name carries the credit too, after a colon.
|
||||
expect(screen.getByRole('button', { name: 'places.details.pickImage: Google' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-PDC-006: picking a picture reports its proxy URL', async () => {
|
||||
@@ -613,24 +611,17 @@ describe('PlaceDetailsColumn — picture layout', () => {
|
||||
withPhotos(3)
|
||||
const { onPickImage } = renderColumn()
|
||||
|
||||
// Nothing is picked and there is no own picture to remove, so 'No picture'
|
||||
// stays away and the first photo is credited.
|
||||
await screen.findByText('Author 0')
|
||||
expect(screen.queryByText('places.image.none')).not.toBeInTheDocument()
|
||||
const tiles = screen.getAllByRole('button', { name: /places.details.pickImage/ })
|
||||
fireEvent.mouseEnter(tiles[2])
|
||||
|
||||
expect(screen.getByText('Author 2')).toBeInTheDocument()
|
||||
expect(screen.queryByText('Author 0')).not.toBeInTheDocument()
|
||||
expect(onPickImage).not.toHaveBeenCalled()
|
||||
fireEvent.mouseLeave(tiles[2])
|
||||
expect(screen.queryByText('Author 2')).not.toBeInTheDocument()
|
||||
expect(screen.getByText('Author 0')).toBeInTheDocument()
|
||||
})
|
||||
|
||||
it('FE-PDC-037: credits the picture in play, licence included', async () => {
|
||||
withPhotos(2)
|
||||
renderColumn({ selectedImageUrl: '/api/maps/place-photo/p0/bytes' })
|
||||
renderColumn()
|
||||
|
||||
expect(await screen.findByText('Author 0')).toBeInTheDocument()
|
||||
expect(screen.getByText('Author 0').closest('a')).toHaveAttribute(
|
||||
@@ -681,12 +672,9 @@ describe('PlaceDetailsColumn — dialog variant', () => {
|
||||
|
||||
const tile = await screen.findByRole('button', { name: /places.details.pickImage/ })
|
||||
expect(tile).not.toHaveAttribute('title')
|
||||
// Hovering the tile moves the credit line to it.
|
||||
fireEvent.mouseEnter(tile)
|
||||
const licence = screen.getByText('CC BY-SA 4.0', { selector: 'a[href*="creativecommons"]' })
|
||||
const line = licence.parentElement?.parentElement as HTMLElement
|
||||
expect(line).toHaveTextContent('Alice')
|
||||
expect(line.textContent).not.toContain('·')
|
||||
expect(licence.closest('p')).toHaveTextContent('Alice')
|
||||
expect(licence.closest('p')?.textContent).not.toContain('·')
|
||||
|
||||
fireEvent.click(tile)
|
||||
expect(onPickImage).toHaveBeenCalledWith(COMMONS_PHOTO.url)
|
||||
@@ -800,41 +788,3 @@ describe('PlaceDetailsColumn — dialog variant', () => {
|
||||
expect(await screen.findByText('places.details.error', undefined, { timeout: 4000 })).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
|
||||
/**
|
||||
* FE-PDC-050..051 — the editor's own pictures beside the sources' ones.
|
||||
*/
|
||||
describe('PlaceDetailsColumn — the place\'s own pictures', () => {
|
||||
const own = (over: Record<string, unknown> = {}) => ({
|
||||
currentUrl: '/uploads/places/own.jpg',
|
||||
attached: [],
|
||||
pendingPreview: null,
|
||||
canUpload: true,
|
||||
onUpload: vi.fn(),
|
||||
onPickAttached: vi.fn(),
|
||||
onRemove: vi.fn(),
|
||||
...over,
|
||||
})
|
||||
|
||||
it('FE-PDC-050: offers the upload and the current picture even while nothing is selected', () => {
|
||||
const mine = own()
|
||||
renderColumn({ selection: null, image: { own: mine, chosen: { kind: 'current' } } })
|
||||
|
||||
expect(screen.getByText('places.details.pickImage')).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'places.uploadImage' })).toBeInTheDocument()
|
||||
const current = screen.getByRole('button', { name: 'places.image.current' })
|
||||
expect(current).toHaveAttribute('aria-pressed', 'true')
|
||||
fireEvent.click(current)
|
||||
expect(mine.onRemove).toHaveBeenCalledTimes(1)
|
||||
})
|
||||
|
||||
it('FE-PDC-051: the sources\' photos join the own ones once they arrive, the choice following the image prop', async () => {
|
||||
const { onPickImage } = renderColumn({ image: { own: own(), chosen: { kind: 'url', url: COMMONS_PHOTO.url } } })
|
||||
|
||||
const tile = await screen.findByRole('button', { name: 'places.details.pickImage: Alice' })
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'true')
|
||||
expect(screen.getByRole('button', { name: 'places.image.current' })).toHaveAttribute('aria-pressed', 'false')
|
||||
fireEvent.click(tile)
|
||||
expect(onPickImage).toHaveBeenCalledWith(null)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -4,6 +4,7 @@ import {
|
||||
ArrowRight,
|
||||
Bike,
|
||||
Building2,
|
||||
Check,
|
||||
ChefHat,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
@@ -32,22 +33,22 @@ import { fs } from '../shared/DialogShell'
|
||||
import { LABEL } from '../shared/dialogParts'
|
||||
import { COLUMN_CARD, ColumnHead, HintCard, SIDE_COLUMN, WHITE_BUTTON } from './placeDialogParts'
|
||||
import type { TranslationFn } from '../../types'
|
||||
import PlaceImagePicker, { type PlaceImageOwn } from './PlaceImagePicker'
|
||||
import { chosenImage, offersPictures, type ChosenImage } from './placeImageChoice'
|
||||
import { cacheKeyFor, readCachedEnrichment, storeEnrichment, type PlaceDetailsSelection } from './placeEnrichment'
|
||||
|
||||
export { __clearEnrichmentCacheForTests, type PlaceDetailsSelection } from './placeEnrichment'
|
||||
/** The place the column is describing. Null while nothing is selected. */
|
||||
export interface PlaceDetailsSelection {
|
||||
placeId?: string
|
||||
lat: number
|
||||
lng: number
|
||||
name: string
|
||||
/** The picked search result, so the server can skip its own details lookup. */
|
||||
details?: Record<string, unknown>
|
||||
}
|
||||
|
||||
interface PlaceDetailsColumnProps {
|
||||
selection: PlaceDetailsSelection | null
|
||||
/** Currently chosen hero image, so the picked tile can show as picked. */
|
||||
selectedImageUrl?: string | null
|
||||
selectedImageUrl?: string
|
||||
onPickImage: (url: string | null) => void
|
||||
/**
|
||||
* The editor's own pictures (upload, the current one, attached images) and
|
||||
* which tile is chosen; without it only the sources' pictures are offered.
|
||||
*/
|
||||
image?: { own: PlaceImageOwn; chosen: ChosenImage }
|
||||
onAdoptDescription: (text: string) => void
|
||||
/** The looked-up opening hours, once they arrive, so the form can take them over (#2472). */
|
||||
onHours?: (hours: PlaceHours) => void
|
||||
@@ -74,6 +75,47 @@ interface PlaceDetailsColumnProps {
|
||||
t: TranslationFn
|
||||
}
|
||||
|
||||
/**
|
||||
* Module-level cache plus sessionStorage, same shape as usePlaceDetails in
|
||||
* PlaceInspector. Clicking back and forth between two search results must not
|
||||
* pay for the provider fan-out twice.
|
||||
*/
|
||||
const enrichmentCache = new Map<string, MapsPlaceEnrichmentResult>()
|
||||
|
||||
/** Test seam: the module-level cache otherwise leaks between cases. */
|
||||
export function __clearEnrichmentCacheForTests(): void {
|
||||
enrichmentCache.clear()
|
||||
}
|
||||
|
||||
function readSession(key: string): MapsPlaceEnrichmentResult | undefined {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(key)
|
||||
return raw ? (JSON.parse(raw) as MapsPlaceEnrichmentResult) : undefined
|
||||
} catch {
|
||||
return undefined
|
||||
}
|
||||
}
|
||||
|
||||
function writeSession(key: string, value: MapsPlaceEnrichmentResult): void {
|
||||
try {
|
||||
sessionStorage.setItem(key, JSON.stringify(value))
|
||||
} catch {
|
||||
/* private mode / quota — the in-memory cache still helps for this session */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bumped with the server's CACHE_VERSION. sessionStorage outlives a deploy, so
|
||||
* without it the tab that was open while the fix shipped keeps replaying the
|
||||
* answer the fix was about — and reports it as still broken.
|
||||
*/
|
||||
const ENRICH_CACHE_V = 4
|
||||
|
||||
function cacheKeyFor(selection: PlaceDetailsSelection, language: string): string {
|
||||
const id = selection.placeId || `coords:${selection.lat}:${selection.lng}`
|
||||
return `enrich_v${ENRICH_CACHE_V}_${id}_${language}`
|
||||
}
|
||||
|
||||
type LoadState = 'idle' | 'loading' | 'ready' | 'error'
|
||||
|
||||
/**
|
||||
@@ -119,7 +161,6 @@ export default function PlaceDetailsColumn({
|
||||
locale = 'en-US',
|
||||
fluid = false,
|
||||
variant = 'sheet',
|
||||
image,
|
||||
t,
|
||||
}: PlaceDetailsColumnProps): React.ReactElement {
|
||||
const dialog = variant === 'dialog'
|
||||
@@ -142,8 +183,9 @@ export default function PlaceDetailsColumn({
|
||||
return
|
||||
}
|
||||
|
||||
const cached = readCachedEnrichment(selection, language)
|
||||
const cached = enrichmentCache.get(selectionKey) ?? readSession(selectionKey)
|
||||
if (cached) {
|
||||
enrichmentCache.set(selectionKey, cached)
|
||||
setData(cached)
|
||||
setState('ready')
|
||||
return
|
||||
@@ -175,7 +217,8 @@ export default function PlaceDetailsColumn({
|
||||
)
|
||||
.then((result) => {
|
||||
if (controller.signal.aborted) return
|
||||
storeEnrichment(selection, language, result)
|
||||
enrichmentCache.set(selectionKey, result)
|
||||
writeSession(selectionKey, result)
|
||||
setData(result)
|
||||
setState('ready')
|
||||
})
|
||||
@@ -236,16 +279,6 @@ export default function PlaceDetailsColumn({
|
||||
)}
|
||||
|
||||
<div className={dialog ? 'flex min-h-0 flex-1 flex-col gap-3.5 overflow-y-auto px-3 pb-3' : 'flex-1 min-h-0 overflow-y-auto p-3 space-y-3.5'}>
|
||||
{/* The place's picture first: its own ones are there whatever the sources answer. */}
|
||||
<PictureBlock
|
||||
photos={state === 'ready' && !data?.disabled ? (data?.photos ?? []) : []}
|
||||
chosen={image?.chosen ?? chosenImage(selectedImageUrl, null, null)}
|
||||
onPickImage={onPickImage}
|
||||
own={image?.own}
|
||||
dialog={dialog}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
{/* Nothing picked yet, which is a state rather than a fault: the mascot
|
||||
waits with an idle look instead of a sad one. The dialog says the
|
||||
same in a quiet card, and the column keeps its width either way. */}
|
||||
@@ -298,6 +331,7 @@ export default function PlaceDetailsColumn({
|
||||
|
||||
{selection && state === 'ready' && !data?.disabled && !isEmpty && (
|
||||
<>
|
||||
<PhotoStrip photos={data?.photos ?? []} selectedImageUrl={selectedImageUrl} onPickImage={onPickImage} dialog={dialog} t={t} />
|
||||
<RatingRow rating={data?.rating ?? null} locale={locale} dialog={dialog} />
|
||||
<OpeningHoursBlock
|
||||
hours={data?.hours ?? null}
|
||||
@@ -355,31 +389,119 @@ export default function PlaceDetailsColumn({
|
||||
)
|
||||
}
|
||||
|
||||
/** The picker under its label; nothing while there is no picture to offer. */
|
||||
function PictureBlock({
|
||||
/** The name to put under a picture. Google gives no author, so it gets its own name. */
|
||||
function creditOf(photo: PlacePhotoCandidate): string {
|
||||
return photo.attribution || sourceLabelFor(photo.source)
|
||||
}
|
||||
|
||||
/**
|
||||
* The picture grid.
|
||||
*
|
||||
* A grid rather than one large image: this sits beside a form in a dialog, and
|
||||
* a picture that takes half the column pushes the facts and the description out
|
||||
* of sight. Three columns at 320px gives ~96px tiles, which is enough to tell
|
||||
* the pictures apart while leaving the rest of the column visible.
|
||||
*
|
||||
* Only the picture in play is credited in full — crediting all of them at once
|
||||
* cost two lines each and drowned the column, and the licence obligation
|
||||
* attaches to the one that gets used. Every tile still carries the full credit
|
||||
* as its tooltip and links to its source page.
|
||||
*/
|
||||
function PhotoStrip({
|
||||
photos,
|
||||
chosen,
|
||||
selectedImageUrl,
|
||||
onPickImage,
|
||||
own,
|
||||
dialog,
|
||||
dialog = false,
|
||||
t,
|
||||
}: {
|
||||
photos: PlacePhotoCandidate[]
|
||||
chosen: ChosenImage
|
||||
selectedImageUrl?: string
|
||||
onPickImage: (url: string | null) => void
|
||||
own?: PlaceImageOwn
|
||||
dialog: boolean
|
||||
dialog?: boolean
|
||||
t: TranslationFn
|
||||
}): React.ReactElement | null {
|
||||
if (!offersPictures(photos, own)) return null
|
||||
const picker = <PlaceImagePicker photos={photos} chosen={chosen} onPickUrl={onPickImage} own={own} dialog={dialog} t={t} />
|
||||
const [hovered, setHovered] = useState<string | null>(null)
|
||||
if (photos.length === 0) return null
|
||||
|
||||
const shown = photos.find((p) => p.url === (hovered ?? selectedImageUrl)) ?? photos[0]
|
||||
const body = (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{photos.map((photo) => (
|
||||
<PhotoTile
|
||||
key={photo.key}
|
||||
photo={photo}
|
||||
selected={selectedImageUrl === photo.url}
|
||||
onPick={onPickImage}
|
||||
onHover={setHovered}
|
||||
dialog={dialog}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<p className={dialog ? 'mt-2 flex min-w-0 items-center gap-2 text-caption leading-tight text-content-faint' : 'text-caption leading-tight text-content-faint truncate'}>
|
||||
<PhotoCredit photo={shown} dialog={dialog} />
|
||||
</p>
|
||||
</>
|
||||
)
|
||||
|
||||
return (
|
||||
<Block label={t('places.details.pickImage')} dialog={dialog}>
|
||||
{dialog ? <div className={`${COLUMN_CARD} p-2`}>{picker}</div> : picker}
|
||||
{dialog ? <div className={`${COLUMN_CARD} p-2`}>{body}</div> : body}
|
||||
</Block>
|
||||
)
|
||||
}
|
||||
|
||||
function PhotoTile({
|
||||
photo,
|
||||
selected,
|
||||
onPick,
|
||||
onHover,
|
||||
dialog = false,
|
||||
t,
|
||||
}: {
|
||||
photo: PlacePhotoCandidate
|
||||
selected: boolean
|
||||
onPick: (url: string | null) => void
|
||||
onHover: (url: string | null) => void
|
||||
/** On a white card, and without the native tooltip: hovering a tile already moves the credit line under the grid to it. */
|
||||
dialog?: boolean
|
||||
t: TranslationFn
|
||||
}): React.ReactElement {
|
||||
const credit = creditOf(photo)
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPick(selected ? null : photo.url)}
|
||||
onMouseEnter={() => onHover(photo.url)}
|
||||
onMouseLeave={() => onHover(null)}
|
||||
onFocus={() => onHover(photo.url)}
|
||||
onBlur={() => onHover(null)}
|
||||
aria-pressed={selected}
|
||||
aria-label={`${t('places.details.pickImage')} — ${credit}`}
|
||||
title={dialog ? undefined : `${credit}${photo.license ? ` · ${photo.license}` : ''}`}
|
||||
className={`group relative block w-full aspect-square overflow-hidden rounded-lg transition-shadow ${
|
||||
selected
|
||||
? `ring-2 ring-accent ring-offset-2 ${dialog ? 'ring-offset-surface-card' : 'ring-offset-surface-secondary'}`
|
||||
: 'ring-1 ring-edge hover:ring-content-muted'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={photo.url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-[1.06]"
|
||||
/>
|
||||
{selected && (
|
||||
<span className="absolute top-1 end-1 rounded-full bg-accent p-0.5 shadow-card">
|
||||
<Check className="w-2.5 h-2.5 text-accent-on" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Who the description came from, as the reader would name them.
|
||||
*
|
||||
@@ -411,6 +533,75 @@ function descriptionSourceLabel(
|
||||
}
|
||||
}
|
||||
|
||||
function sourceLabelFor(source: PlacePhotoCandidate['source']): string {
|
||||
if (source === 'google') return 'Google'
|
||||
if (source === 'wikipedia') return 'Wikipedia'
|
||||
return 'Wikimedia Commons'
|
||||
}
|
||||
|
||||
/**
|
||||
* Author and licence for the picture currently in play.
|
||||
*
|
||||
* Not decoration: Commons images are largely CC BY / CC BY-SA, and reusing one
|
||||
* without naming its author does not satisfy those terms. When a source hands
|
||||
* us no author (Google), we say where it came from rather than inventing one.
|
||||
* Rendered inline — the container supplies the colour and the truncation.
|
||||
*/
|
||||
function PhotoCredit({ photo, dialog = false }: { photo: PlacePhotoCandidate; dialog?: boolean }): React.ReactElement {
|
||||
const credit = creditOf(photo)
|
||||
|
||||
if (dialog) {
|
||||
// Two pieces side by side with room between them, rather than joined by a dot.
|
||||
return (
|
||||
<>
|
||||
<span className="min-w-0 truncate">
|
||||
{photo.sourceUrl ? (
|
||||
<a href={photo.sourceUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{credit}
|
||||
</a>
|
||||
) : (
|
||||
credit
|
||||
)}
|
||||
</span>
|
||||
{photo.license && (
|
||||
<span className="flex-none">
|
||||
{photo.licenseUrl ? (
|
||||
<a href={photo.licenseUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{photo.license}
|
||||
</a>
|
||||
) : (
|
||||
photo.license
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{photo.sourceUrl ? (
|
||||
<a href={photo.sourceUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{credit}
|
||||
</a>
|
||||
) : (
|
||||
credit
|
||||
)}
|
||||
{photo.license && (
|
||||
<>
|
||||
{' · '}
|
||||
{photo.licenseUrl ? (
|
||||
<a href={photo.licenseUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{photo.license}
|
||||
</a>
|
||||
) : (
|
||||
photo.license
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Shown when the free sources found nothing and no Google key is configured.
|
||||
|
||||
@@ -1,65 +0,0 @@
|
||||
// FE-PLANNER-PLFORMMEDIA-001 to FE-PLANNER-PLFORMMEDIA-003: the files waiting for a new
|
||||
// place, and the place's picture in the form where no details column stands beside it.
|
||||
import { fireEvent, render, screen } from '@testing-library/react';
|
||||
import { createRef } from 'react';
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { PendingFiles, PlaceImageSection } from './PlaceFormMedia';
|
||||
import type { PlaceImageOwn } from './PlaceImagePicker';
|
||||
|
||||
vi.mock('../../api/authUrl', () => ({ fetchImageAsBlob: vi.fn(async () => 'blob:x') }));
|
||||
|
||||
const t = ((key: string) => key) as never;
|
||||
|
||||
describe('PendingFiles', () => {
|
||||
it('FE-PLANNER-PLFORMMEDIA-001: the attach button opens the input, which adds the files', () => {
|
||||
const fileRef = createRef<HTMLInputElement>();
|
||||
const onAdd = vi.fn();
|
||||
render(<PendingFiles files={[]} fileRef={fileRef} onAdd={onAdd} onRemove={vi.fn()} t={t} />);
|
||||
expect(screen.queryByTestId('pending-files')).not.toBeInTheDocument();
|
||||
|
||||
const openPicker = vi.spyOn(fileRef.current as HTMLInputElement, 'click');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'files.attach' }));
|
||||
expect(openPicker).toHaveBeenCalledTimes(1);
|
||||
fireEvent.change(fileRef.current as HTMLInputElement, { target: { files: [new File(['x'], 'a.pdf')] } });
|
||||
expect(onAdd).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORMMEDIA-002: each waiting file is listed by name and removed by its index', () => {
|
||||
const onRemove = vi.fn();
|
||||
render(
|
||||
<PendingFiles
|
||||
files={[new File(['x'], 'ticket.pdf'), new File(['y'], 'map.png')]}
|
||||
fileRef={createRef<HTMLInputElement>()}
|
||||
onAdd={vi.fn()}
|
||||
onRemove={onRemove}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByTestId('pending-files')).toHaveTextContent('ticket.pdf');
|
||||
expect(screen.getByText('map.png')).toBeInTheDocument();
|
||||
fireEvent.click(screen.getAllByRole('button', { name: 'common.delete' })[1]);
|
||||
expect(onRemove).toHaveBeenCalledWith(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('PlaceImageSection', () => {
|
||||
it("FE-PLANNER-PLFORMMEDIA-003: the picker sits under the field's label with the place's own pictures", () => {
|
||||
const own: PlaceImageOwn = {
|
||||
currentUrl: '/uploads/places/c.jpg',
|
||||
attached: [],
|
||||
pendingPreview: null,
|
||||
canUpload: true,
|
||||
onUpload: vi.fn(),
|
||||
onPickAttached: vi.fn(),
|
||||
onRemove: vi.fn(),
|
||||
};
|
||||
const onPickUrl = vi.fn();
|
||||
render(<PlaceImageSection image={{ own, chosen: { kind: 'none' } }} onPickUrl={onPickUrl} t={t} />);
|
||||
|
||||
expect(screen.getByText('places.details.pickImage')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'places.uploadImage' })).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'places.image.current' }));
|
||||
expect(onPickUrl).toHaveBeenCalledWith('/uploads/places/c.jpg');
|
||||
});
|
||||
});
|
||||
@@ -1,84 +0,0 @@
|
||||
import { Paperclip, X } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import type { TranslationFn } from '../../types';
|
||||
import { fs } from '../shared/DialogShell';
|
||||
import { Tooltip } from '../shared/Tooltip';
|
||||
import { LABEL } from '../shared/dialogParts';
|
||||
import PlaceImagePicker, { type PlaceImageOwn } from './PlaceImagePicker';
|
||||
import { COLUMN_CARD, WHITE_BUTTON } from './placeDialogParts';
|
||||
import { offersPictures, type ChosenImage } from './placeImageChoice';
|
||||
|
||||
/** Files chosen before the place exists: they are uploaded once the save has given it an id. */
|
||||
export function PendingFiles({
|
||||
files,
|
||||
fileRef,
|
||||
onAdd,
|
||||
onRemove,
|
||||
t,
|
||||
}: {
|
||||
files: File[];
|
||||
fileRef: React.RefObject<HTMLInputElement | null>;
|
||||
onAdd: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||
onRemove: (index: number) => void;
|
||||
t: TranslationFn;
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className={LABEL}>{t('files.title')}</div>
|
||||
<input ref={fileRef} type="file" multiple className="hidden" onChange={onAdd} />
|
||||
<button type="button" onClick={() => fileRef.current?.click()} className={WHITE_BUTTON} style={fs(13, 'body')}>
|
||||
<Paperclip size={14} aria-hidden="true" />
|
||||
{t('files.attach')}
|
||||
</button>
|
||||
{files.length > 0 && (
|
||||
<div className="mt-1.5 flex flex-col gap-1" data-testid="pending-files">
|
||||
{files.map((file, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 rounded-[8px] border border-edge-faint bg-surface-card px-2.5 py-1.5"
|
||||
style={fs(12, 'body')}
|
||||
>
|
||||
<Paperclip size={11} className="flex-none text-content-faint" aria-hidden="true" />
|
||||
<span className="min-w-0 flex-1 truncate text-content-secondary">{file.name}</span>
|
||||
<Tooltip label={t('common.delete')}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRemove(idx)}
|
||||
aria-label={t('common.delete')}
|
||||
className="flex flex-none text-content-faint transition-colors hover:text-danger"
|
||||
>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The place's picture in the form itself, where no details column stands
|
||||
* beside it (place details switched off): the same picker, with the place's
|
||||
* own pictures and an upload, under the field's label.
|
||||
*/
|
||||
export function PlaceImageSection({
|
||||
image,
|
||||
onPickUrl,
|
||||
t,
|
||||
}: {
|
||||
image: { own: PlaceImageOwn; chosen: ChosenImage };
|
||||
onPickUrl: (url: string | null) => void;
|
||||
t: TranslationFn;
|
||||
}) {
|
||||
if (!offersPictures([], image.own)) return null;
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className={LABEL}>{t('places.details.pickImage')}</div>
|
||||
<div className={`${COLUMN_CARD} p-2`}>
|
||||
<PlaceImagePicker photos={[]} chosen={image.chosen} onPickUrl={onPickUrl} own={image.own} dialog t={t} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
// FE-PLANNER-PLFORMH-001 to FE-PLANNER-PLFORMH-011: the place form's openings and save
|
||||
// FE-PLANNER-PLFORMH-001 to FE-PLANNER-PLFORMH-010: the place form's openings and save
|
||||
// payload, as the desktop dialog and the phone sheet both build them.
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import type { Assignment, Place, TripFile } from '../../types';
|
||||
import type { Assignment, Place } from '../../types';
|
||||
import {
|
||||
DEFAULT_FORM,
|
||||
duplicateName,
|
||||
@@ -155,18 +155,4 @@ describe('placeFormPayload', () => {
|
||||
const payload = placeFormPayload(form, [], null, (lat, lng) => ({ at: [lat, lng] }));
|
||||
expect(payload.at).toEqual([48.86, null]);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORMH-011: a waiting picture travels as the file, or as the attached file id, or not at all', () => {
|
||||
expect(placeFormPayload(form, [], null)._pendingImage).toBeUndefined();
|
||||
const picture = new File(['x'], 'front.png');
|
||||
expect(
|
||||
placeFormPayload(form, [], null, undefined, { kind: 'upload', file: picture, preview: 'blob:x' })._pendingImage
|
||||
).toBe(picture);
|
||||
const attached = { id: 12, mime_type: 'image/png' } as TripFile;
|
||||
expect(placeFormPayload(form, [], null, undefined, { kind: 'attached', file: attached })._pendingImage).toEqual({
|
||||
fileId: 12,
|
||||
});
|
||||
// A dropped picture is the field's null, and it is saved as such.
|
||||
expect(placeFormPayload({ ...form, image_url: null }, [], null).image_url).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import type { Assignment, Place, RoadtripStopType } from '@trek/shared'
|
||||
import { pendingImagePayload, type PendingImagePayload, type PendingPlaceImage } from './placeImageChoice'
|
||||
import type { PlaceDetailsSelection } from './PlaceDetailsColumn'
|
||||
|
||||
export interface PlaceFormData {
|
||||
@@ -28,8 +27,7 @@ export interface PlaceFormData {
|
||||
// Hero image picked from the detail column. Optional and absent from
|
||||
// DEFAULT_FORM on purpose: the mobile sheet shares this type and never sets
|
||||
// it, and places.service already writes image_url through on create/update.
|
||||
// Null drops the place's picture on save; undefined keeps it.
|
||||
image_url?: string | null
|
||||
image_url?: string
|
||||
// Day-specific note on the in-context assignment (#2163). Only hydrated when
|
||||
// the form opened with an assignment in context; both forms drop it from the
|
||||
// submit payload when unchanged, and useTripPlanner strips it off the place
|
||||
@@ -310,8 +308,6 @@ export interface PlaceFormPayload extends Omit<PlaceFormData, 'lat' | 'lng' | 'c
|
||||
category_id: string | null
|
||||
/** Files chosen before the place existed: uploaded once the save has given it an id. */
|
||||
_pendingFiles?: File[]
|
||||
/** A picture waiting to become the place's own: a file from the device, or an attached file's id. */
|
||||
_pendingImage?: PendingImagePayload
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -326,7 +322,6 @@ export function placeFormPayload<E extends object = object>(
|
||||
pendingFiles: File[],
|
||||
assignment: Pick<Assignment, 'notes'> | null | undefined,
|
||||
extra?: (lat: number | null, lng: number | null) => E,
|
||||
pendingImage: PendingPlaceImage | null = null,
|
||||
): PlaceFormPayload & E {
|
||||
const lat = form.lat ? Number.parseFloat(form.lat) : null
|
||||
const lng = form.lng ? Number.parseFloat(form.lng) : null
|
||||
@@ -337,7 +332,6 @@ export function placeFormPayload<E extends object = object>(
|
||||
category_id: form.category_id || null,
|
||||
...(extra ? extra(lat, lng) : {}),
|
||||
_pendingFiles: pendingFiles.length > 0 ? pendingFiles : undefined,
|
||||
_pendingImage: pendingImagePayload(pendingImage),
|
||||
} as PlaceFormPayload & E
|
||||
if (!assignment || (form.assignment_notes ?? '') === (assignment.notes ?? '')) {
|
||||
delete payload.assignment_notes
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
// FE-PLANNER-PLACEFORM-125 to FE-PLANNER-PLACEFORM-127: the place's picture in the desktop
|
||||
// dialog. Nothing is sent before the save; the waiting picture travels with it.
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
import { buildPlace, buildTripFile } from '../../../tests/helpers/factories';
|
||||
import { placeFormProps, seedPlaceFormStores } from '../../../tests/helpers/placeFormSetup';
|
||||
import { fireEvent, render, screen, waitFor } from '../../../tests/helpers/render';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import PlaceFormModal from './PlaceFormModal';
|
||||
|
||||
vi.mock('../shared/CustomTimePicker', async () => ({
|
||||
default: (await import('../../../tests/helpers/placeForm')).TimePickerStub,
|
||||
}));
|
||||
vi.mock('../../api/authUrl', async (importOriginal) => ({
|
||||
...(await importOriginal<typeof import('../../api/authUrl')>()),
|
||||
fetchImageAsBlob: vi.fn(async () => 'blob:attached'),
|
||||
}));
|
||||
|
||||
const imageInput = () => document.querySelector('input[type="file"][accept^="image"]') as HTMLInputElement;
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedPlaceFormStores();
|
||||
// Without the details column the picker sits in the form itself.
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
vi.spyOn(URL, 'createObjectURL').mockImplementation(() => 'blob:form-preview');
|
||||
vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('PlaceFormModal, the picture', () => {
|
||||
it('FE-PLANNER-PLACEFORM-125: a new place gets a picture from the device, uploaded once the save made it', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue(undefined);
|
||||
render(<PlaceFormModal {...placeFormProps} onSave={onSave} />);
|
||||
expect(screen.getByText('Pick a picture')).toBeInTheDocument();
|
||||
|
||||
const picture = new File(['x'], 'front.png', { type: 'image/png' });
|
||||
fireEvent.change(imageInput(), { target: { files: [picture] } });
|
||||
const tile = await screen.findByRole('button', { name: 'Upload image', pressed: true });
|
||||
expect(tile.querySelector('img')).toHaveAttribute('src', 'blob:form-preview');
|
||||
|
||||
await user.type(screen.getByPlaceholderText(/e\.g\. Eiffel Tower/i), 'Louvre');
|
||||
await user.click(screen.getByRole('button', { name: /^Add$/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ name: 'Louvre', _pendingImage: picture }));
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-126: an edited place keeps its picture as chosen, or takes an attached image by its id', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue(undefined);
|
||||
const place = buildPlace({ id: 61, name: 'Gallery', image_url: '/uploads/places/61.jpg' });
|
||||
useTripStore.setState({
|
||||
files: [buildTripFile({ id: 88, place_id: 61, mime_type: 'image/jpeg', original_name: 'hall.jpg' })],
|
||||
} as never);
|
||||
render(<PlaceFormModal {...placeFormProps} place={place} onSave={onSave} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: 'Current picture' })).toHaveAttribute('aria-pressed', 'true');
|
||||
await user.click(screen.getByRole('button', { name: 'hall.jpg' }));
|
||||
expect(screen.getByRole('button', { name: 'hall.jpg' })).toHaveAttribute('aria-pressed', 'true');
|
||||
expect(screen.getByRole('button', { name: 'Current picture' })).toHaveAttribute('aria-pressed', 'false');
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /^Update$/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
|
||||
expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ _pendingImage: { fileId: 88 } }));
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-127: removing the picture saves the place without one, and nothing waits', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSave = vi.fn().mockResolvedValue(undefined);
|
||||
const place = buildPlace({ id: 62, name: 'Bridge', image_url: '/uploads/places/62.jpg' });
|
||||
render(<PlaceFormModal {...placeFormProps} place={place} onSave={onSave} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: 'Remove image' }));
|
||||
expect(screen.getByRole('button', { name: 'Current picture' })).toHaveAttribute('aria-pressed', 'false');
|
||||
expect(screen.getByText('No picture')).toBeInTheDocument();
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /^Update$/i }));
|
||||
await waitFor(() => expect(onSave).toHaveBeenCalledTimes(1));
|
||||
const payload = onSave.mock.calls[0][0];
|
||||
expect(payload.image_url).toBeNull();
|
||||
expect(payload._pendingImage).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -913,7 +913,7 @@ describe('PlaceFormModal', () => {
|
||||
|
||||
it('FE-PLANNER-PLACEFORM-031: pending files list shows file names after adding', async () => {
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const fileInput = document.querySelector('input[type="file"][multiple]') as HTMLInputElement;
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
expect(fileInput).toBeTruthy();
|
||||
|
||||
const file = new File(['x'], 'photo.jpg', { type: 'image/jpeg' });
|
||||
@@ -925,7 +925,7 @@ describe('PlaceFormModal', () => {
|
||||
it('FE-PLANNER-PLACEFORM-032: removing a pending file removes it from the list', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const fileInput = document.querySelector('input[type="file"][multiple]') as HTMLInputElement;
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
|
||||
const file = new File(['x'], 'remove-me.jpg', { type: 'image/jpeg' });
|
||||
fireEvent.change(fileInput, { target: { files: [file] } });
|
||||
@@ -1470,7 +1470,7 @@ describe('PlaceFormModal', () => {
|
||||
it('FE-PLANNER-PLACEFORM-057: the Attach button opens the hidden file input', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
const fileInput = document.querySelector('input[type="file"][multiple]') as HTMLInputElement;
|
||||
const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
const clickSpy = vi.spyOn(fileInput, 'click').mockImplementation(() => {});
|
||||
await user.click(screen.getByRole('button', { name: /Attach/i }));
|
||||
expect(clickSpy).toHaveBeenCalled();
|
||||
@@ -2422,7 +2422,7 @@ describe('PlaceFormModal on the dialog frame', () => {
|
||||
it('FE-PLANNER-PLACEFORM-103: a pending file is removed by its named button', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<PlaceFormModal {...defaultProps} />);
|
||||
fireEvent.change(document.querySelector('input[type="file"][multiple]') as HTMLInputElement, {
|
||||
fireEvent.change(document.querySelector('input[type="file"]') as HTMLInputElement, {
|
||||
target: { files: [new File(['x'], 'ticket.pdf', { type: 'application/pdf' })] },
|
||||
});
|
||||
await user.click(within(screen.getByTestId('pending-files')).getByRole('button', { name: 'Delete' }));
|
||||
|
||||
@@ -8,11 +8,9 @@ import { useTripStore } from '../../store/tripStore'
|
||||
import { useSettingsStore } from '../../store/settingsStore'
|
||||
import CollectionPicker from '../Collections/CollectionPicker'
|
||||
import PlaceDetailsColumn from './PlaceDetailsColumn'
|
||||
import { PendingFiles, PlaceImageSection } from './PlaceFormMedia'
|
||||
import { usePlaceImageField } from './usePlaceImageField'
|
||||
import { useToast } from '../shared/Toast'
|
||||
import { Tooltip } from '../shared/Tooltip'
|
||||
import { Search, Loader2, Plus, RotateCcw, MapPin, Navigation, LocateFixed, PencilLine } from 'lucide-react'
|
||||
import { Search, Paperclip, X, Loader2, Plus, RotateCcw, MapPin, Navigation, LocateFixed, PencilLine } from 'lucide-react'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { PlaceContactFields } from './PlaceContactFields'
|
||||
import { weekFromPeriods } from './placeHours'
|
||||
@@ -43,6 +41,7 @@ import {
|
||||
} from '../shared/DialogShell'
|
||||
import { EditorField, GRID_2, INPUT, LABEL, PANEL, PillSelect, TEXTAREA } from '../shared/dialogParts'
|
||||
import { SoftPill, tintOf } from './planParts'
|
||||
import { WHITE_BUTTON } from './placeDialogParts'
|
||||
import { TimeSection } from './PlaceFormTimeSection'
|
||||
|
||||
// The submit payload mirrors the form, but lat/lng are parsed to numbers and
|
||||
@@ -122,11 +121,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
|
||||
const {
|
||||
form, setForm, autoFilledRef, pendingFiles, addFilesFromInput, removeFile, handlePaste, isSaving, setIsSaving,
|
||||
duplicateWarning, detailsSelection, setDetailsSelection, openForm, handleChange: changeField, pickImage,
|
||||
adoptDescription, warnIfDuplicate, pendingImage, stageUpload, stageAttached, removeImage,
|
||||
adoptDescription, warnIfDuplicate,
|
||||
} = usePlaceForm({ t, toast, canUploadFiles })
|
||||
const image = usePlaceImageField({
|
||||
place, imageUrl: form.image_url, pendingImage, canUploadFiles, stageUpload, stageAttached, removeImage,
|
||||
})
|
||||
// The index the picked place came from, as its row named it, shown as a pill
|
||||
// in the head band. Null for a place typed by hand or taken from the saved list.
|
||||
const [pickedSource, setPickedSource] = useState<string | null>(null)
|
||||
@@ -362,7 +358,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
|
||||
...(serviceStop
|
||||
? { _serviceStop: serviceStopChoice(serviceStop, lat, lng, serviceStopLeg).placement }
|
||||
: {}),
|
||||
}), pendingImage)
|
||||
}))
|
||||
const saved = await onSave(payload)
|
||||
// Open the Costs editor for the saved place when the user asked to
|
||||
// create/edit its linked expense — gated on an id, so a create that the
|
||||
@@ -446,7 +442,6 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
|
||||
handleRemoveFile: removeFile,
|
||||
handlePaste,
|
||||
pickImage,
|
||||
image,
|
||||
adoptDescription,
|
||||
hasTimeError,
|
||||
handleSubmit,
|
||||
@@ -611,7 +606,6 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
|
||||
selection={detailsSelection}
|
||||
selectedImageUrl={form.image_url}
|
||||
onPickImage={S.pickImage}
|
||||
image={S.image}
|
||||
onAdoptDescription={S.adoptDescription}
|
||||
onHours={(hours) => S.setDetailsHours(weekFromPeriods(hours.periods))}
|
||||
hasDescription={!!form.description.trim()}
|
||||
@@ -885,7 +879,6 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
|
||||
maxLength={2000}
|
||||
/>
|
||||
|
||||
{!showDetails && <PlaceImageSection image={S.image} onPickUrl={S.pickImage} t={t} />}
|
||||
{/* The link and the files side by side, as on a booking. */}
|
||||
<div className={canUploadFiles ? GRID_2 : ''}>
|
||||
<EditorField label={t('places.formWebsite')} htmlFor={`${fieldId}-website`}>
|
||||
@@ -1124,3 +1117,44 @@ function MarkdownField({ id, label, value, onChange, placeholder, maxLength }: {
|
||||
</DialogSection>
|
||||
)
|
||||
}
|
||||
|
||||
/** Files chosen before the place exists: they are uploaded once the save has given it an id. */
|
||||
function PendingFiles({ files, fileRef, onAdd, onRemove, t }: {
|
||||
files: File[]
|
||||
fileRef: React.RefObject<HTMLInputElement | null>
|
||||
onAdd: (e: React.ChangeEvent<HTMLInputElement>) => void
|
||||
onRemove: (index: number) => void
|
||||
t: Translate
|
||||
}) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className={LABEL}>{t('files.title')}</div>
|
||||
<input ref={fileRef} type="file" multiple className="hidden" onChange={onAdd} />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
className={WHITE_BUTTON}
|
||||
style={fs(13, 'body')}
|
||||
>
|
||||
<Paperclip size={14} aria-hidden="true" />
|
||||
{t('files.attach')}
|
||||
</button>
|
||||
{files.length > 0 && (
|
||||
<div className="mt-1.5 flex flex-col gap-1" data-testid="pending-files">
|
||||
{files.map((file, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 rounded-[8px] border border-edge-faint bg-surface-card px-2.5 py-1.5" style={fs(12, 'body')}>
|
||||
<Paperclip size={11} className="flex-none text-content-faint" aria-hidden="true" />
|
||||
<span className="min-w-0 flex-1 truncate text-content-secondary">{file.name}</span>
|
||||
<Tooltip label={t('common.delete')}>
|
||||
<button type="button" onClick={() => onRemove(idx)} aria-label={t('common.delete')}
|
||||
className="flex flex-none text-content-faint transition-colors hover:text-danger">
|
||||
<X size={12} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,258 +0,0 @@
|
||||
// FE-PLANNER-PLIMGPICK-001 to FE-PLANNER-PLIMGPICK-016: the editor's picture picker, the one
|
||||
// place a place's picture is chosen: the upload tile, the current picture, the images
|
||||
// attached to the place, the sources' photos, the credit line and "Remove image".
|
||||
import { fireEvent, render, screen, waitFor } from '@testing-library/react';
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { buildTripFile } from '../../../tests/helpers/factories';
|
||||
import { placePictureRepo } from '../../repo/placePictureRepo';
|
||||
import { normalizeImageFile } from '../../utils/convertHeic';
|
||||
import PlaceImagePicker, { PhotoCredit, type PlaceImageOwn } from './PlaceImagePicker';
|
||||
import type { ChosenImage } from './placeImageChoice';
|
||||
|
||||
vi.mock('../../repo/placePictureRepo', () => ({ placePictureRepo: { attachedImage: vi.fn() } }));
|
||||
vi.mock('../../utils/convertHeic', () => ({
|
||||
normalizeImageFile: vi.fn(async (file: File) => new File([file], `normalized-${file.name}`, { type: 'image/jpeg' })),
|
||||
}));
|
||||
|
||||
/** Echo the key back, which keeps the assertions readable. */
|
||||
const t = ((key: string) => key) as never;
|
||||
|
||||
const CURRENT = '/uploads/places/current.jpg';
|
||||
|
||||
const COMMONS: PlacePhotoCandidate = {
|
||||
key: 'w~p0',
|
||||
url: '/api/maps/place-photo/w~p0/bytes',
|
||||
attribution: 'Alice',
|
||||
license: 'CC BY-SA 4.0',
|
||||
licenseUrl: 'https://creativecommons.org/licenses/by-sa/4.0/',
|
||||
sourceUrl: 'https://commons.wikimedia.org/wiki/File:A.jpg',
|
||||
source: 'wikimedia',
|
||||
} as PlacePhotoCandidate;
|
||||
|
||||
const GOOGLE: PlacePhotoCandidate = {
|
||||
key: 'w~p1',
|
||||
url: '/api/maps/place-photo/w~p1/bytes',
|
||||
attribution: null,
|
||||
license: null,
|
||||
licenseUrl: null,
|
||||
sourceUrl: null,
|
||||
source: 'google',
|
||||
} as PlacePhotoCandidate;
|
||||
|
||||
const ATTACHED = buildTripFile({ id: 41, original_name: 'facade.png', mime_type: 'image/png', url: '/api/files/41' });
|
||||
|
||||
function own(over: Partial<PlaceImageOwn> = {}): PlaceImageOwn {
|
||||
return {
|
||||
currentUrl: null,
|
||||
attached: [],
|
||||
pendingPreview: null,
|
||||
canUpload: true,
|
||||
onUpload: vi.fn(),
|
||||
onPickAttached: vi.fn(),
|
||||
onRemove: vi.fn(),
|
||||
...over,
|
||||
};
|
||||
}
|
||||
|
||||
function renderPicker(
|
||||
props: Partial<{
|
||||
photos: PlacePhotoCandidate[];
|
||||
chosen: ChosenImage;
|
||||
own: PlaceImageOwn;
|
||||
dialog: boolean;
|
||||
}> = {}
|
||||
) {
|
||||
const onPickUrl = vi.fn();
|
||||
const utils = render(
|
||||
<PlaceImagePicker
|
||||
photos={props.photos ?? []}
|
||||
chosen={props.chosen ?? { kind: 'none' }}
|
||||
onPickUrl={onPickUrl}
|
||||
own={props.own}
|
||||
dialog={props.dialog}
|
||||
t={t}
|
||||
/>
|
||||
);
|
||||
return { ...utils, onPickUrl };
|
||||
}
|
||||
|
||||
const fileInput = () => document.querySelector('input[type="file"]') as HTMLInputElement;
|
||||
|
||||
beforeEach(() => {
|
||||
vi.mocked(placePictureRepo.attachedImage).mockReset();
|
||||
vi.mocked(placePictureRepo.attachedImage).mockResolvedValue('blob:attached');
|
||||
vi.mocked(normalizeImageFile).mockClear();
|
||||
});
|
||||
|
||||
describe('PlaceImagePicker', () => {
|
||||
it('FE-PLANNER-PLIMGPICK-001: renders nothing while there is no picture to offer and no upload', () => {
|
||||
const bare = renderPicker();
|
||||
expect(bare.container).toBeEmptyDOMElement();
|
||||
bare.unmount();
|
||||
|
||||
const readOnly = renderPicker({ own: own({ canUpload: false }) });
|
||||
expect(readOnly.container).toBeEmptyDOMElement();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-002: the upload tile opens the file picker and hands the converted file over', async () => {
|
||||
const mine = own();
|
||||
renderPicker({ own: mine });
|
||||
const tile = screen.getByRole('button', { name: 'places.uploadImage' });
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'false');
|
||||
const input = fileInput();
|
||||
expect(input).toHaveAttribute('accept', 'image/*,.heic,.heif');
|
||||
const openPicker = vi.spyOn(input, 'click');
|
||||
fireEvent.click(tile);
|
||||
expect(openPicker).toHaveBeenCalledTimes(1);
|
||||
|
||||
const picture = new File(['x'], 'photo.heic', { type: 'image/heic' });
|
||||
fireEvent.change(input, { target: { files: [picture] } });
|
||||
await waitFor(() => expect(mine.onUpload).toHaveBeenCalledTimes(1));
|
||||
expect(normalizeImageFile).toHaveBeenCalledWith(picture);
|
||||
expect(vi.mocked(mine.onUpload).mock.calls[0][0].name).toBe('normalized-photo.heic');
|
||||
await waitFor(() => expect(tile).not.toBeDisabled());
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-003: an emptied file choice hands nothing over', () => {
|
||||
const mine = own();
|
||||
renderPicker({ own: mine });
|
||||
fireEvent.change(fileInput(), { target: { files: [] } });
|
||||
expect(normalizeImageFile).not.toHaveBeenCalled();
|
||||
expect(mine.onUpload).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-004: a picture waiting for the save shows as its preview, chosen and credited as yours', () => {
|
||||
renderPicker({ own: own({ pendingPreview: 'blob:preview' }), chosen: { kind: 'upload' } });
|
||||
const tile = screen.getByRole('button', { name: 'places.uploadImage' });
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'true');
|
||||
expect(tile.querySelector('img')).toHaveAttribute('src', 'blob:preview');
|
||||
expect(screen.getByText('places.image.own')).toBeInTheDocument();
|
||||
// A waiting upload can be dropped again.
|
||||
expect(screen.getByRole('button', { name: 'places.removeImage' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-005: the current picture is chosen by default, and a second tap removes it', () => {
|
||||
const mine = own({ currentUrl: CURRENT });
|
||||
renderPicker({ own: mine, chosen: { kind: 'current' } });
|
||||
const tile = screen.getByRole('button', { name: 'places.image.current' });
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'true');
|
||||
expect(tile.querySelector('img')).toHaveAttribute('src', CURRENT);
|
||||
expect(screen.getByText('places.image.current')).toBeInTheDocument();
|
||||
|
||||
fireEvent.click(tile);
|
||||
expect(mine.onRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-006: once dropped, the current picture is taken back with a tap', () => {
|
||||
const mine = own({ currentUrl: CURRENT });
|
||||
const { onPickUrl } = renderPicker({ own: mine, chosen: { kind: 'none' } });
|
||||
// The line under the grid says what the save will do.
|
||||
expect(screen.getByText('places.image.none')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: 'places.removeImage' })).not.toBeInTheDocument();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'places.image.current' }));
|
||||
expect(onPickUrl).toHaveBeenCalledWith(CURRENT);
|
||||
expect(mine.onRemove).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("FE-PLANNER-PLIMGPICK-007: a current picture that is one of the sources' photos is not shown twice", () => {
|
||||
renderPicker({ photos: [COMMONS], own: own({ currentUrl: COMMONS.url }), chosen: { kind: 'current' } });
|
||||
expect(screen.queryByRole('button', { name: 'places.image.current' })).not.toBeInTheDocument();
|
||||
expect(screen.getAllByRole('button', { name: /places.details.pickImage/ })).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-008: an attached image loads through the file route and is picked with a tap', async () => {
|
||||
const mine = own({ attached: [ATTACHED] });
|
||||
renderPicker({ own: mine });
|
||||
const tile = screen.getByRole('button', { name: 'facade.png' });
|
||||
await waitFor(() => expect(tile.querySelector('img')).toHaveAttribute('src', 'blob:attached'));
|
||||
expect(placePictureRepo.attachedImage).toHaveBeenCalledWith('/api/files/41');
|
||||
|
||||
fireEvent.click(tile);
|
||||
expect(mine.onPickAttached).toHaveBeenCalledWith(ATTACHED);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-009: a chosen attached image is ticked and named under the grid; one that fails to load stays blank', async () => {
|
||||
vi.mocked(placePictureRepo.attachedImage).mockRejectedValue(new Error('gone'));
|
||||
renderPicker({ own: own({ attached: [ATTACHED] }), chosen: { kind: 'attached', fileId: 41 } });
|
||||
const tile = screen.getByRole('button', { name: 'facade.png' });
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'true');
|
||||
expect(screen.getByText('facade.png')).toBeInTheDocument();
|
||||
await waitFor(() => expect(placePictureRepo.attachedImage).toHaveBeenCalled());
|
||||
expect(tile.querySelector('img')).toBeNull();
|
||||
|
||||
// Focusing it names it as well, and the name stays once it is left.
|
||||
fireEvent.focus(tile);
|
||||
expect(screen.getByText('facade.png')).toBeInTheDocument();
|
||||
fireEvent.blur(tile);
|
||||
expect(screen.getByText('facade.png')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("FE-PLANNER-PLIMGPICK-010: a source's photo is picked with a tap and let go with a second", () => {
|
||||
const first = renderPicker({ photos: [COMMONS, GOOGLE] });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'places.details.pickImage: Alice' }));
|
||||
expect(first.onPickUrl).toHaveBeenCalledWith(COMMONS.url);
|
||||
first.unmount();
|
||||
|
||||
const chosen = renderPicker({ photos: [COMMONS, GOOGLE], chosen: { kind: 'url', url: GOOGLE.url } });
|
||||
const tile = screen.getByRole('button', { name: 'places.details.pickImage: Google' });
|
||||
expect(tile).toHaveAttribute('aria-pressed', 'true');
|
||||
fireEvent.click(tile);
|
||||
expect(chosen.onPickUrl).toHaveBeenCalledWith(null);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-011: the chosen photo is credited with its author and licence, each linked', () => {
|
||||
renderPicker({ photos: [COMMONS, GOOGLE], chosen: { kind: 'url', url: COMMONS.url } });
|
||||
expect(screen.getByText('Alice').closest('a')).toHaveAttribute('href', COMMONS.sourceUrl);
|
||||
expect(screen.getByText('CC BY-SA 4.0').closest('a')).toHaveAttribute('href', COMMONS.licenseUrl);
|
||||
|
||||
// Hovering another tile moves the credit line to it, leaving moves it back.
|
||||
const google = screen.getByRole('button', { name: 'places.details.pickImage: Google' });
|
||||
fireEvent.mouseEnter(google);
|
||||
expect(screen.getByText('Google')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Alice')).not.toBeInTheDocument();
|
||||
fireEvent.mouseLeave(google);
|
||||
expect(screen.getByText('Alice')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-012: without the own pictures the first photo is credited and nothing can be removed', () => {
|
||||
renderPicker({ photos: [COMMONS], chosen: { kind: 'url', url: '/not/among/them.jpg' } });
|
||||
expect(screen.getByText('Alice')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button', { name: 'places.removeImage' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-013: "Remove image" leaves the place without a picture', () => {
|
||||
const mine = own({ currentUrl: CURRENT });
|
||||
renderPicker({ own: mine, photos: [COMMONS], chosen: { kind: 'url', url: COMMONS.url } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'places.removeImage' }));
|
||||
expect(mine.onRemove).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-014: the sheet gives each photo a native tooltip, the dialog does not', () => {
|
||||
const sheet = renderPicker({ photos: [COMMONS, GOOGLE] });
|
||||
expect(screen.getByRole('button', { name: 'places.details.pickImage: Alice' })).toHaveAttribute(
|
||||
'title',
|
||||
'Alice, CC BY-SA 4.0'
|
||||
);
|
||||
expect(screen.getByRole('button', { name: 'places.details.pickImage: Google' })).toHaveAttribute('title', 'Google');
|
||||
sheet.unmount();
|
||||
|
||||
renderPicker({ photos: [COMMONS], dialog: true });
|
||||
expect(screen.getByRole('button', { name: 'places.details.pickImage: Alice' })).not.toHaveAttribute('title');
|
||||
});
|
||||
});
|
||||
|
||||
describe('PhotoCredit', () => {
|
||||
it('FE-PLANNER-PLIMGPICK-015: a photo without links is still credited in plain text', () => {
|
||||
render(<PhotoCredit photo={{ ...COMMONS, sourceUrl: null, licenseUrl: null }} />);
|
||||
expect(screen.getByText('Alice').closest('a')).toBeNull();
|
||||
expect(screen.getByText('CC BY-SA 4.0').closest('a')).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGPICK-016: a photo without a licence shows only its credit', () => {
|
||||
const { container } = render(<PhotoCredit photo={GOOGLE} />);
|
||||
expect(container).toHaveTextContent(/^Google$/);
|
||||
});
|
||||
});
|
||||
@@ -1,374 +0,0 @@
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
import { Check, ImageOff, ImagePlus, Loader2 } from 'lucide-react';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { placePictureRepo } from '../../repo/placePictureRepo';
|
||||
import type { TranslationFn, TripFile } from '../../types';
|
||||
import { normalizeImageFile } from '../../utils/convertHeic';
|
||||
import { Tooltip } from '../shared/Tooltip';
|
||||
import { offersPictures, type ChosenImage } from './placeImageChoice';
|
||||
import { creditOf } from './placePhotoCredit';
|
||||
|
||||
/** The place's own pictures beside the sources' ones: what it has, what it can get, what waits for the save. */
|
||||
export interface PlaceImageOwn {
|
||||
/** The picture the place has now; null on a new place or one without. */
|
||||
currentUrl: string | null;
|
||||
/** Images attached to the place that can stand as its picture. */
|
||||
attached: TripFile[];
|
||||
/** The picture from the device that waits for the save, as a preview. */
|
||||
pendingPreview: string | null;
|
||||
/** False where the user may not upload files; the upload tile is then left out. */
|
||||
canUpload: boolean;
|
||||
onUpload: (file: File) => void;
|
||||
onPickAttached: (file: TripFile) => void;
|
||||
onRemove: () => void;
|
||||
}
|
||||
|
||||
interface PlaceImagePickerProps {
|
||||
/** What the sources know, as found for the place; empty while they load or when there are none. */
|
||||
photos: PlacePhotoCandidate[];
|
||||
chosen: ChosenImage;
|
||||
onPickUrl: (url: string | null) => void;
|
||||
/** Left out where only the sources' pictures are offered. */
|
||||
own?: PlaceImageOwn;
|
||||
/** On a white card, without native tooltips: hovering moves the credit line instead. */
|
||||
dialog?: boolean;
|
||||
t: TranslationFn;
|
||||
}
|
||||
|
||||
const TILE = 'group relative block aspect-square w-full overflow-hidden rounded-lg transition-shadow';
|
||||
|
||||
function ring(selected: boolean, dialog: boolean): string {
|
||||
if (selected)
|
||||
return `ring-2 ring-accent ring-offset-2 ${dialog ? 'ring-offset-surface-card' : 'ring-offset-surface-secondary'}`;
|
||||
return 'ring-1 ring-edge hover:ring-content-muted';
|
||||
}
|
||||
|
||||
function Picked(): React.ReactElement {
|
||||
return (
|
||||
<span className="absolute end-1 top-1 rounded-full bg-accent p-0.5 shadow-card">
|
||||
<Check className="h-2.5 w-2.5 text-accent-on" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/** What the credit line under the grid says: a source's photo with its author and licence, or the place's own. */
|
||||
type Credit = { kind: 'photo'; photo: PlacePhotoCandidate } | { kind: 'own'; label: string } | null;
|
||||
|
||||
/**
|
||||
* The one place a place's picture is chosen, in the editor: a tile to upload
|
||||
* one from the device, the picture it has now, the images attached to it and
|
||||
* the pictures its sources know. The chosen tile is ringed and ticked; a
|
||||
* second tap on a source's photo lets go of it, and "Remove picture" leaves
|
||||
* the place without one. Nothing is sent before the form is saved.
|
||||
*/
|
||||
export default function PlaceImagePicker({
|
||||
photos,
|
||||
chosen,
|
||||
onPickUrl,
|
||||
own,
|
||||
dialog = false,
|
||||
t,
|
||||
}: PlaceImagePickerProps): React.ReactElement | null {
|
||||
const [hovered, setHovered] = useState<Credit>(null);
|
||||
const current = own?.currentUrl && !photos.some((p) => p.url === own.currentUrl) ? own.currentUrl : null;
|
||||
const attached = own?.attached ?? [];
|
||||
if (!offersPictures(photos, own)) return null;
|
||||
|
||||
const shown = hovered ?? creditFor(chosen, photos, attached, own, t);
|
||||
const removable = !!own && chosen.kind !== 'none';
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{own?.canUpload && (
|
||||
<UploadTile
|
||||
own={own}
|
||||
selected={chosen.kind === 'upload'}
|
||||
dialog={dialog}
|
||||
onHover={(on) => setHovered(on ? { kind: 'own', label: t('places.image.own') } : null)}
|
||||
t={t}
|
||||
/>
|
||||
)}
|
||||
{current && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => (chosen.kind === 'current' ? own?.onRemove() : onPickUrl(current))}
|
||||
aria-pressed={chosen.kind === 'current'}
|
||||
aria-label={t('places.image.current')}
|
||||
onMouseEnter={() => setHovered({ kind: 'own', label: t('places.image.current') })}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
className={`${TILE} ${ring(chosen.kind === 'current', dialog)}`}
|
||||
>
|
||||
<img src={current} alt="" className="h-full w-full object-cover" />
|
||||
{chosen.kind === 'current' && <Picked />}
|
||||
</button>
|
||||
)}
|
||||
{attached.map((file) => (
|
||||
<AttachedTile
|
||||
key={file.id}
|
||||
file={file}
|
||||
selected={chosen.kind === 'attached' && chosen.fileId === file.id}
|
||||
onPick={() => own?.onPickAttached(file)}
|
||||
onHover={(on) => setHovered(on ? { kind: 'own', label: file.original_name } : null)}
|
||||
dialog={dialog}
|
||||
/>
|
||||
))}
|
||||
{photos.map((photo) => (
|
||||
<PhotoTile
|
||||
key={photo.key}
|
||||
photo={photo}
|
||||
selected={chosen.kind === 'url' && chosen.url === photo.url}
|
||||
onPick={onPickUrl}
|
||||
onHover={(on) => setHovered(on ? { kind: 'photo', photo } : null)}
|
||||
dialog={dialog}
|
||||
t={t}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
{(shown || removable) && (
|
||||
<CreditLine shown={shown} onRemove={removable ? own?.onRemove : undefined} dialog={dialog} t={t} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** The tile that takes a picture from the device, or shows the one waiting for the save. */
|
||||
function UploadTile({
|
||||
own,
|
||||
selected,
|
||||
dialog,
|
||||
onHover,
|
||||
t,
|
||||
}: {
|
||||
own: PlaceImageOwn;
|
||||
selected: boolean;
|
||||
dialog: boolean;
|
||||
onHover: (on: boolean) => void;
|
||||
t: TranslationFn;
|
||||
}): React.ReactElement {
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [reading, setReading] = useState(false);
|
||||
const pick = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = '';
|
||||
if (!file) return;
|
||||
setReading(true);
|
||||
try {
|
||||
own.onUpload(await normalizeImageFile(file));
|
||||
} finally {
|
||||
setReading(false);
|
||||
}
|
||||
};
|
||||
const preview = own.pendingPreview;
|
||||
return (
|
||||
<>
|
||||
<Tooltip label={t('places.uploadImage')} placement="top">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={reading}
|
||||
aria-pressed={selected}
|
||||
aria-label={t('places.uploadImage')}
|
||||
className={`${TILE} ${ring(selected, dialog)} ${preview ? '' : 'border border-dashed border-edge bg-surface-card'}`}
|
||||
onMouseEnter={() => onHover(!!preview)}
|
||||
onMouseLeave={() => onHover(false)}
|
||||
>
|
||||
{preview ? (
|
||||
<>
|
||||
<img src={preview} alt="" className="h-full w-full object-cover" />
|
||||
{selected && <Picked />}
|
||||
</>
|
||||
) : (
|
||||
<span className="flex h-full w-full flex-col items-center justify-center gap-1 px-1 text-center text-caption leading-tight text-content-muted group-hover:text-content">
|
||||
{reading ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<ImagePlus className="h-4 w-4" strokeWidth={2} />
|
||||
)}
|
||||
{t('places.uploadImage')}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
<input ref={fileRef} type="file" accept="image/*,.heic,.heif" className="hidden" onChange={(e) => void pick(e)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/** Who the chosen picture is from, and the way to leave the place without one. */
|
||||
function CreditLine({
|
||||
shown,
|
||||
onRemove,
|
||||
dialog,
|
||||
t,
|
||||
}: {
|
||||
shown: Credit;
|
||||
onRemove?: () => void;
|
||||
dialog: boolean;
|
||||
t: TranslationFn;
|
||||
}): React.ReactElement {
|
||||
return (
|
||||
<div
|
||||
className={`${dialog ? 'mt-2' : 'mt-1.5'} flex min-w-0 items-center gap-2 text-caption leading-tight text-content-faint`}
|
||||
>
|
||||
<span className="flex min-w-0 flex-1 items-center gap-2">
|
||||
{shown?.kind === 'photo' && <PhotoCredit photo={shown.photo} />}
|
||||
{shown?.kind === 'own' && <span className="min-w-0 truncate">{shown.label}</span>}
|
||||
</span>
|
||||
{onRemove && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="inline-flex flex-none items-center gap-1 rounded-md px-1.5 py-0.5 text-content-muted transition-colors hover:bg-surface-hover hover:text-content"
|
||||
>
|
||||
<ImageOff className="h-3 w-3" />
|
||||
{t('places.removeImage')}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** The credit line for the chosen tile: a source's photo, the place's own picture, or nothing to say. */
|
||||
function creditFor(
|
||||
chosen: ChosenImage,
|
||||
photos: PlacePhotoCandidate[],
|
||||
attached: TripFile[],
|
||||
own: PlaceImageOwn | undefined,
|
||||
t: TranslationFn
|
||||
): Credit {
|
||||
if (chosen.kind === 'url') {
|
||||
const photo = photos.find((p) => p.url === chosen.url);
|
||||
if (photo) return { kind: 'photo', photo };
|
||||
}
|
||||
if (chosen.kind === 'current') return { kind: 'own', label: t('places.image.current') };
|
||||
if (chosen.kind === 'upload') return { kind: 'own', label: t('places.image.own') };
|
||||
if (chosen.kind === 'attached') {
|
||||
const file = attached.find((f) => f.id === chosen.fileId);
|
||||
if (file) return { kind: 'own', label: file.original_name };
|
||||
}
|
||||
if (chosen.kind === 'none' && own?.currentUrl) return { kind: 'own', label: t('places.image.none') };
|
||||
return photos[0] ? { kind: 'photo', photo: photos[0] } : null;
|
||||
}
|
||||
|
||||
function PhotoTile({
|
||||
photo,
|
||||
selected,
|
||||
onPick,
|
||||
onHover,
|
||||
dialog,
|
||||
t,
|
||||
}: {
|
||||
photo: PlacePhotoCandidate;
|
||||
selected: boolean;
|
||||
onPick: (url: string | null) => void;
|
||||
onHover: (on: boolean) => void;
|
||||
dialog: boolean;
|
||||
t: TranslationFn;
|
||||
}): React.ReactElement {
|
||||
const credit = creditOf(photo);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onPick(selected ? null : photo.url)}
|
||||
onMouseEnter={() => onHover(true)}
|
||||
onMouseLeave={() => onHover(false)}
|
||||
onFocus={() => onHover(true)}
|
||||
onBlur={() => onHover(false)}
|
||||
aria-pressed={selected}
|
||||
aria-label={`${t('places.details.pickImage')}: ${credit}`}
|
||||
title={dialog ? undefined : photo.license ? `${credit}, ${photo.license}` : credit}
|
||||
className={`${TILE} ${ring(selected, dialog)}`}
|
||||
>
|
||||
<img
|
||||
src={photo.url}
|
||||
alt=""
|
||||
loading="lazy"
|
||||
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.06]"
|
||||
/>
|
||||
{selected && <Picked />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/** An image attached to the place, loaded through the authenticated file route. */
|
||||
function AttachedTile({
|
||||
file,
|
||||
selected,
|
||||
onPick,
|
||||
onHover,
|
||||
dialog,
|
||||
}: {
|
||||
file: TripFile;
|
||||
selected: boolean;
|
||||
onPick: () => void;
|
||||
onHover: (on: boolean) => void;
|
||||
dialog: boolean;
|
||||
}): React.ReactElement {
|
||||
const [src, setSrc] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
let current = true;
|
||||
placePictureRepo
|
||||
.attachedImage(file.url)
|
||||
.then((url) => {
|
||||
if (current) setSrc(url);
|
||||
})
|
||||
.catch(() => {
|
||||
if (current) setSrc(null);
|
||||
});
|
||||
return () => {
|
||||
current = false;
|
||||
};
|
||||
}, [file.url]);
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onPick}
|
||||
onMouseEnter={() => onHover(true)}
|
||||
onMouseLeave={() => onHover(false)}
|
||||
onFocus={() => onHover(true)}
|
||||
onBlur={() => onHover(false)}
|
||||
aria-pressed={selected}
|
||||
aria-label={file.original_name}
|
||||
className={`${TILE} bg-surface-card ${ring(selected, dialog)}`}
|
||||
>
|
||||
{src && <img src={src} alt="" className="h-full w-full object-cover" />}
|
||||
{selected && <Picked />}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Author and licence of the source's photo in play, each linked to its page.
|
||||
*
|
||||
* Not decoration: Commons images are largely CC BY / CC BY-SA, and reusing one
|
||||
* without naming its author does not satisfy those terms. When a source hands
|
||||
* us no author (Google), we say where it came from rather than inventing one.
|
||||
*/
|
||||
export function PhotoCredit({ photo }: { photo: PlacePhotoCandidate }): React.ReactElement {
|
||||
const credit = creditOf(photo);
|
||||
return (
|
||||
<>
|
||||
<span className="min-w-0 truncate">
|
||||
{photo.sourceUrl ? (
|
||||
<a href={photo.sourceUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{credit}
|
||||
</a>
|
||||
) : (
|
||||
credit
|
||||
)}
|
||||
</span>
|
||||
{photo.license && (
|
||||
<span className="flex-none">
|
||||
{photo.licenseUrl ? (
|
||||
<a href={photo.licenseUrl} target="_blank" rel="noopener noreferrer" className="hover:underline">
|
||||
{photo.license}
|
||||
</a>
|
||||
) : (
|
||||
photo.license
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -23,7 +23,6 @@ vi.mock('../../api/client', async (importOriginal) => {
|
||||
mapsApi: {
|
||||
details: vi.fn().mockResolvedValue({ place: null }),
|
||||
placePhotoCredit: vi.fn().mockResolvedValue({ credit: null }),
|
||||
placeEnrichment: vi.fn().mockResolvedValue({ photos: [], facts: [], description: null }),
|
||||
},
|
||||
};
|
||||
});
|
||||
@@ -55,7 +54,6 @@ beforeAll(() => {
|
||||
|
||||
import PlaceInspector from './PlaceInspector';
|
||||
import { mapsApi } from '../../api/client';
|
||||
import { __clearEnrichmentCacheForTests } from './placeEnrichment';
|
||||
|
||||
// ── Shared fixtures ───────────────────────────────────────────────────────────
|
||||
|
||||
@@ -102,8 +100,6 @@ beforeEach(() => {
|
||||
seedStore(useSettingsStore, { settings: { time_format: '24h', temperature_unit: 'celsius' } });
|
||||
|
||||
vi.mocked(mapsApi.details).mockResolvedValue({ place: null });
|
||||
vi.mocked(mapsApi.placeEnrichment).mockResolvedValue({ photos: [], facts: [], description: null } as never);
|
||||
__clearEnrichmentCacheForTests();
|
||||
});
|
||||
|
||||
// ── Tests ─────────────────────────────────────────────────────────────────────
|
||||
@@ -974,21 +970,18 @@ describe('PlaceInspector', () => {
|
||||
}
|
||||
});
|
||||
|
||||
// ── The avatar opens the place's photos (#1136) ─────────────────────────────
|
||||
// ── Custom thumbnail upload (#1136) ──────────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-049: the avatar opens the photos and offers no upload, the picture is changed in the editor', () => {
|
||||
render(<PlaceInspector {...defaultProps} />);
|
||||
expect(screen.getByRole('button', { name: 'Show photos' })).toBeTruthy();
|
||||
expect(screen.queryByRole('button', { name: 'Upload image' })).toBeNull();
|
||||
expect(screen.queryByRole('button', { name: 'Change image' })).toBeNull();
|
||||
expect(screen.queryByRole('button', { name: 'Remove image' })).toBeNull();
|
||||
it('FE-PLANNER-INSPECTOR-049: onUploadImage in trip mode renders the upload-capable avatar', () => {
|
||||
render(<PlaceInspector {...defaultProps} onUploadImage={vi.fn()} />);
|
||||
// The place carries no image yet, so the avatar offers "Upload image".
|
||||
expect(screen.getByRole('button', { name: 'Upload image' })).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-050: with no picture and nobody to ask for one the avatar stays a plain picture', () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
it('FE-PLANNER-INSPECTOR-050: without onUploadImage the avatar has no upload control', () => {
|
||||
render(<PlaceInspector {...defaultProps} />);
|
||||
expect(screen.queryByRole('button', { name: 'Show photos' })).toBeNull();
|
||||
expect(screen.queryByRole('button', { name: 'Upload image' })).toBeNull();
|
||||
expect(screen.queryByRole('button', { name: 'Change image' })).toBeNull();
|
||||
});
|
||||
|
||||
// ── Track colour (#776) ──────────────────────────────────────────────────────
|
||||
@@ -1422,23 +1415,15 @@ describe('PlaceInspector', () => {
|
||||
expect(document.querySelector('iframe[src*="tide-widget"]')).toBeNull();
|
||||
});
|
||||
|
||||
// ── The avatar's gallery (#1136) ────────────────────────────────────────────
|
||||
// ── Custom thumbnail callbacks (#1136) ───────────────────────────────────────
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-088: the custom image opens at once in the gallery, and the avatar has no remove control', async () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
it('FE-PLANNER-INSPECTOR-088: removing the custom image clears image_url through onUpdatePlace', async () => {
|
||||
const onUpdatePlace = vi.fn();
|
||||
const onUploadImage = vi.fn(async () => {});
|
||||
const withImage = buildPlace({ id: 706, name: 'Pictured', image_url: '/uploads/places/x.jpg' });
|
||||
render(<PlaceInspector {...defaultProps} place={withImage} onUpdatePlace={onUpdatePlace} />);
|
||||
expect(screen.queryByRole('button', { name: 'Remove image' })).toBeNull();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show photos' }));
|
||||
const gallery = await screen.findByRole('dialog', { name: 'Show photos' });
|
||||
expect(gallery.querySelector('img')).toHaveAttribute('src', '/uploads/places/x.jpg');
|
||||
expect(mapsApi.placeEnrichment).not.toHaveBeenCalled();
|
||||
expect(onUpdatePlace).not.toHaveBeenCalled();
|
||||
|
||||
fireEvent.click(within(gallery).getByRole('button', { name: 'Close' }));
|
||||
await waitFor(() => expect(screen.queryByRole('dialog', { name: 'Show photos' })).toBeNull());
|
||||
render(<PlaceInspector {...defaultProps} place={withImage} onUpdatePlace={onUpdatePlace} onUploadImage={onUploadImage} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Remove image' }));
|
||||
expect(onUpdatePlace).toHaveBeenCalledWith(706, { image_url: null });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-090: opening hours are read for the selected day, not for today', async () => {
|
||||
@@ -1560,28 +1545,13 @@ describe('PlaceInspector', () => {
|
||||
}
|
||||
});
|
||||
|
||||
it("FE-PLANNER-INSPECTOR-089: the avatar asks the sources for the place's photos on click and shows them credited", async () => {
|
||||
vi.mocked(mapsApi.placeEnrichment).mockResolvedValue({
|
||||
photos: [{
|
||||
key: 'gp~p0', url: '/api/maps/place-photo/gp~p0/bytes', attribution: 'Alice', license: 'CC BY 4.0',
|
||||
licenseUrl: null, sourceUrl: 'https://commons.wikimedia.org/wiki/File:T.jpg', source: 'wikimedia',
|
||||
}],
|
||||
facts: [],
|
||||
description: null,
|
||||
} as never);
|
||||
render(<PlaceInspector {...defaultProps} />);
|
||||
// Nothing is asked before the click: selecting a place is not worth the provider fan-out.
|
||||
expect(mapsApi.placeEnrichment).not.toHaveBeenCalled();
|
||||
expect(document.querySelector('input[type="file"][accept*="image"]')).toBeNull();
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show photos' }));
|
||||
const gallery = await screen.findByRole('dialog', { name: 'Show photos' });
|
||||
// The query, then the signal the repo passes on (placePictureRepo.ts).
|
||||
expect(vi.mocked(mapsApi.placeEnrichment).mock.calls[0]?.[0]).toMatchObject({ lat: place.lat, lng: place.lng, name: 'Eiffel Tower' });
|
||||
expect(within(gallery).getByRole('img')).toHaveAttribute('src', '/api/maps/place-photo/gp~p0/bytes');
|
||||
expect(within(gallery).getByRole('link', { name: 'Alice, CC BY 4.0' })).toHaveAttribute(
|
||||
'href', 'https://commons.wikimedia.org/wiki/File:T.jpg',
|
||||
);
|
||||
it('FE-PLANNER-INSPECTOR-089: picking a file hands it to onUploadImage', async () => {
|
||||
const onUploadImage = vi.fn(async () => {});
|
||||
render(<PlaceInspector {...defaultProps} onUploadImage={onUploadImage} />);
|
||||
const input = document.querySelector('input[accept*="image"]') as HTMLInputElement;
|
||||
const file = new File(['x'], 'thumb.png', { type: 'image/png' });
|
||||
fireEvent.change(input, { target: { files: [file] } });
|
||||
await waitFor(() => expect(onUploadImage).toHaveBeenCalledWith(place.id, file));
|
||||
});
|
||||
|
||||
it('FE-PLANNER-INSPECTOR-098: deselecting and reselecting a place survives a rerender', async () => {
|
||||
|
||||
@@ -9,7 +9,7 @@ import { markdownLinkComponents } from '../shared/markdownLink'
|
||||
import { X, Clock, MapPin, ExternalLink, Phone, Mail, Banknote, Pencil, Plus, Minus, ChevronDown, ChevronUp, ChevronRight, FileText, Upload, File, FileImage, Star, Navigation, Mountain, Bookmark, BookmarkCheck, Copy } from 'lucide-react'
|
||||
import { hoursLines, periodsFromWeek } from './placeHours'
|
||||
import PlaceAvatar from '../shared/PlaceAvatar'
|
||||
import PlacePhotoGallery from './PlacePhotoGallery'
|
||||
import PlaceAvatarUpload, { pickableImages } from '../shared/PlaceAvatarUpload'
|
||||
import { BlurredCode } from '../shared/BookingCode'
|
||||
import PlaceRating from '../shared/StarRating'
|
||||
import TrackColorPicker from '../shared/TrackColorPicker'
|
||||
@@ -186,6 +186,10 @@ interface PlaceInspectorProps {
|
||||
tripMembers?: TripMember[]
|
||||
onSetParticipants?: (assignmentId: number, dayId: number, participantIds: number[]) => void
|
||||
onUpdatePlace?: (placeId: number, data: Partial<Place>) => void
|
||||
/** Upload a custom thumbnail (#1136); enables the click-to-change avatar in trip mode. */
|
||||
onUploadImage?: (placeId: number, file: File) => Promise<void>
|
||||
/** Takes a picture already attached to the place as its image (#1242). */
|
||||
onImageFromFile?: (placeId: number, fileId: number) => Promise<void>
|
||||
/** Cast/clear the current user's star vote (#1435); enables the rating row. */
|
||||
onRate?: (placeId: number, rating: number | null) => Promise<void> | void
|
||||
leftWidth?: number
|
||||
@@ -211,7 +215,7 @@ export default function PlaceInspector({
|
||||
place, categories, mode = 'trip', days = [], selectedDayId = null, selectedAssignmentId = null,
|
||||
assignments = {}, reservations = [], onEditTransport, onEditReservation, onOpenBooking,
|
||||
onClose, onEdit: editPlace, onDelete: deletePlace, onAssignToDay, onRemoveAssignment,
|
||||
files = [], onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace: updatePlace, onRate,
|
||||
files = [], onFileUpload, tripMembers = [], onSetParticipants, onUpdatePlace: updatePlace, onUploadImage, onImageFromFile, onRate,
|
||||
leftWidth = 0, rightWidth = 0, clearMapPill = false,
|
||||
collectionStatus, onCopyToTrip, onSetStatus, onRemoveFromList, roadtripEndDay, roadtripStay, roadtripActive,
|
||||
}: PlaceInspectorProps) {
|
||||
@@ -388,6 +392,9 @@ export default function PlaceInspector({
|
||||
editingName={editingName} nameInputRef={nameInputRef} nameValue={nameValue} setNameValue={setNameValue}
|
||||
commitNameEdit={commitNameEdit} handleNameKeyDown={handleNameKeyDown} startNameEdit={startNameEdit}
|
||||
onUpdatePlace={onUpdatePlace}
|
||||
onUploadImage={mode === 'trip' && onUpdatePlace ? onUploadImage : undefined}
|
||||
attachedImages={pickableImages(placeFiles)}
|
||||
onImageFromFile={mode === 'trip' && onUpdatePlace ? onImageFromFile : undefined}
|
||||
onClose={onClose} />
|
||||
|
||||
{/* The body scrolls inside the capped card; each block keeps its natural height (#1195). */}
|
||||
@@ -591,17 +598,19 @@ interface InspectorHeadProps {
|
||||
handleNameKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
|
||||
startNameEdit: () => void
|
||||
onUpdatePlace?: (placeId: number, data: Partial<Place>) => void
|
||||
onUploadImage?: (placeId: number, file: File) => Promise<void>
|
||||
attachedImages: TripFile[]
|
||||
onImageFromFile?: (placeId: number, fileId: number) => Promise<void>
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
/**
|
||||
* The head band: the avatar with its open/closed ring and photo credit, the
|
||||
* name (a double-click renames it), the address, and the facts as pills. The
|
||||
* avatar opens the place's photos; its picture is changed in the editor.
|
||||
* name (a double-click renames it), the address, and the facts as pills.
|
||||
*/
|
||||
function InspectorHead({ place, category, openNow, phone, email, rating, ratingCount, price, time, editingName, nameInputRef,
|
||||
nameValue, setNameValue, commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, onClose }: InspectorHeadProps) {
|
||||
const { t, locale, language } = useTranslation()
|
||||
nameValue, setNameValue, commitNameEdit, handleNameKeyDown, startNameEdit, onUpdatePlace, onUploadImage, attachedImages, onImageFromFile, onClose }: InspectorHeadProps) {
|
||||
const { t, locale } = useTranslation()
|
||||
const ring = openNow === true ? 'bg-success' : openNow === false ? 'bg-danger' : 'bg-surface-card shadow-sm'
|
||||
const hasCoords = !!(place.lat && place.lng)
|
||||
const hasPills = openNow !== null || !!category || !!time || rating != null || !!price || place.source === 'dawarich' || !!phone || !!email || hasCoords
|
||||
@@ -610,9 +619,13 @@ function InspectorHead({ place, category, openNow, phone, email, rating, ratingC
|
||||
<div className="flex items-start gap-3.5">
|
||||
<div className="flex w-[57px] flex-none flex-col items-center">
|
||||
<div className={`rounded-full p-[2.5px] ${ring}`}>
|
||||
<PlacePhotoGallery place={place} language={language} label={t('places.openPhotos')} className="rounded-full">
|
||||
<PlaceAvatar place={place} category={category} size={52} />
|
||||
</PlacePhotoGallery>
|
||||
{onUploadImage
|
||||
? <PlaceAvatarUpload place={place} category={category} size={52}
|
||||
onUpload={(file: File) => onUploadImage(place.id, file)}
|
||||
onRemove={() => onUpdatePlace(place.id, { image_url: null })}
|
||||
attachedImages={attachedImages}
|
||||
onPickAttached={onImageFromFile ? (fileId: number) => onImageFromFile(place.id, fileId) : undefined} />
|
||||
: <PlaceAvatar place={place} category={category} size={52} />}
|
||||
</div>
|
||||
<PhotoCredit imageUrl={place.image_url} />
|
||||
</div>
|
||||
|
||||
@@ -1,106 +0,0 @@
|
||||
// FE-PLANNER-PHOTOGALLERY-001 to FE-PLANNER-PHOTOGALLERY-003: the place's picture as the
|
||||
// way into its photos, on the desktop inspector and the phone sheet alike.
|
||||
import { act, fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import type { MapsPlaceEnrichmentResult } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { buildPlace } from '../../../tests/helpers/factories';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import PlacePhotoGallery from './PlacePhotoGallery';
|
||||
import { __clearEnrichmentCacheForTests } from './placeEnrichment';
|
||||
|
||||
const placeEnrichment = vi.fn();
|
||||
// Partial: the store registry behind resetAllStores needs the real default client.
|
||||
vi.mock('../../api/client', async (importOriginal) => ({
|
||||
...(await importOriginal<typeof import('../../api/client')>()),
|
||||
mapsApi: { placeEnrichment: (...a: unknown[]) => placeEnrichment(...a) },
|
||||
}));
|
||||
vi.mock('../Journey/VideoPlayerLazy', () => ({ default: () => null }));
|
||||
|
||||
const PLACE = buildPlace({ id: 3, name: 'Tower', lat: 48.85, lng: 2.29, image_url: '/uploads/places/tower.jpg' });
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: true });
|
||||
placeEnrichment.mockReset();
|
||||
sessionStorage.clear();
|
||||
__clearEnrichmentCacheForTests();
|
||||
});
|
||||
|
||||
describe('PlacePhotoGallery', () => {
|
||||
it('FE-PLANNER-PHOTOGALLERY-001: with nothing to open the picture stays a plain picture', () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
render(
|
||||
<PlacePhotoGallery place={{ ...PLACE, image_url: null }} language="en" label="Show photos">
|
||||
<span data-testid="avatar" />
|
||||
</PlacePhotoGallery>
|
||||
);
|
||||
expect(screen.getByTestId('avatar')).toBeInTheDocument();
|
||||
expect(screen.queryByRole('button')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PHOTOGALLERY-002: the trigger is a labelled button that says it is busy while the sources answer', async () => {
|
||||
let settle: (v: MapsPlaceEnrichmentResult) => void = () => {};
|
||||
placeEnrichment.mockReturnValue(new Promise<MapsPlaceEnrichmentResult>((r) => (settle = r)));
|
||||
render(
|
||||
<PlacePhotoGallery
|
||||
place={{ ...PLACE, image_url: null }}
|
||||
language="en"
|
||||
label="Show photos"
|
||||
className="rounded-full"
|
||||
>
|
||||
<span data-testid="avatar" />
|
||||
</PlacePhotoGallery>
|
||||
);
|
||||
const trigger = screen.getByRole('button', { name: 'Show photos' });
|
||||
expect(trigger).toHaveClass('rounded-full');
|
||||
expect(trigger).toContainElement(screen.getByTestId('avatar'));
|
||||
expect(trigger).toHaveAttribute('aria-busy', 'false');
|
||||
|
||||
fireEvent.click(trigger);
|
||||
expect(trigger).toHaveAttribute('aria-busy', 'true');
|
||||
expect(trigger).toHaveClass('opacity-70');
|
||||
|
||||
await act(async () =>
|
||||
settle({
|
||||
photos: [
|
||||
{
|
||||
key: 'k0',
|
||||
url: '/api/maps/place-photo/k0/bytes',
|
||||
attribution: 'Alice',
|
||||
license: null,
|
||||
licenseUrl: null,
|
||||
sourceUrl: null,
|
||||
source: 'wikimedia',
|
||||
},
|
||||
],
|
||||
facts: [],
|
||||
description: null,
|
||||
} as unknown as MapsPlaceEnrichmentResult)
|
||||
);
|
||||
expect(trigger).toHaveAttribute('aria-busy', 'false');
|
||||
const gallery = screen.getByRole('dialog', { name: 'Show photos' });
|
||||
expect(within(gallery).getByRole('img', { name: 'Alice' })).toHaveAttribute(
|
||||
'src',
|
||||
'/api/maps/place-photo/k0/bytes'
|
||||
);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PHOTOGALLERY-003: the gallery opens on the body, over everything, and closes again', () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
const { container } = render(
|
||||
<PlacePhotoGallery place={PLACE} language="en" label="Show photos">
|
||||
<span data-testid="avatar" />
|
||||
</PlacePhotoGallery>
|
||||
);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Show photos' }));
|
||||
const gallery = screen.getByRole('dialog', { name: 'Show photos' });
|
||||
expect(gallery.parentElement).toBe(document.body);
|
||||
expect(container).not.toContainElement(gallery);
|
||||
expect(gallery.querySelector('img')).toHaveAttribute('src', '/uploads/places/tower.jpg');
|
||||
|
||||
fireEvent.keyDown(window, { key: 'Escape' });
|
||||
expect(screen.queryByRole('dialog', { name: 'Show photos' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -1,60 +0,0 @@
|
||||
import { Loader2 } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import type { Place } from '../../types';
|
||||
import PhotoLightbox from '../Journey/PhotoLightbox';
|
||||
import { Tooltip } from '../shared/Tooltip';
|
||||
import { usePlaceGallery } from './usePlaceGallery';
|
||||
|
||||
interface PlacePhotoGalleryProps {
|
||||
place: Place;
|
||||
language: string;
|
||||
/** What opens the gallery: the place's picture, or what stands in for it. */
|
||||
children: React.ReactNode;
|
||||
/** The open gallery's label, and the trigger's tooltip. */
|
||||
label: string;
|
||||
/** The trigger's shape, so its focus ring follows the picture (round on desktop, a rounded tile on the phone). */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The place's picture as the way into its photos: a click opens a full screen
|
||||
* gallery of its own picture and what its sources know, each credited. While
|
||||
* there is nothing to show the picture stays a plain picture. The lightbox is
|
||||
* portalled to <body>: the inspector and the phone sheet sit inside
|
||||
* transformed containers, where a fixed overlay would be trapped.
|
||||
*/
|
||||
export default function PlacePhotoGallery({
|
||||
place,
|
||||
language,
|
||||
children,
|
||||
label,
|
||||
className = '',
|
||||
}: PlacePhotoGalleryProps): React.ReactElement {
|
||||
const { photos, open, close, isOpen, loading, canOpen } = usePlaceGallery(place, language);
|
||||
|
||||
if (!canOpen) return <>{children}</>;
|
||||
return (
|
||||
<>
|
||||
<Tooltip label={label} placement="top">
|
||||
<button
|
||||
type="button"
|
||||
onClick={open}
|
||||
aria-label={label}
|
||||
aria-busy={loading}
|
||||
className={`relative block cursor-zoom-in transition-opacity focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent ${loading ? 'opacity-70' : ''} ${className}`}
|
||||
>
|
||||
{children}
|
||||
{loading && (
|
||||
<span className="absolute inset-0 grid place-items-center">
|
||||
<Loader2 className="h-4 w-4 animate-spin text-content" />
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
</Tooltip>
|
||||
{isOpen &&
|
||||
photos.length > 0 &&
|
||||
createPortal(<PhotoLightbox photos={photos} onClose={close} label={label} />, document.body)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
// FE-PLANNER-ENRICHCACHE-001 to FE-PLANNER-ENRICHCACHE-005: the session cache the editor's
|
||||
// details column and the view's photo gallery share, so a place is asked about once.
|
||||
import type { MapsPlaceEnrichmentResult } from '@trek/shared';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import {
|
||||
__clearEnrichmentCacheForTests,
|
||||
cacheKeyFor,
|
||||
readCachedEnrichment,
|
||||
storeEnrichment,
|
||||
type PlaceDetailsSelection,
|
||||
} from './placeEnrichment';
|
||||
|
||||
const SELECTION: PlaceDetailsSelection = { placeId: 'way:1', lat: 50.9, lng: 6.96, name: 'Museum Ludwig' };
|
||||
const RESULT = { photos: [], facts: [], description: null } as unknown as MapsPlaceEnrichmentResult;
|
||||
|
||||
beforeEach(() => {
|
||||
sessionStorage.clear();
|
||||
__clearEnrichmentCacheForTests();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
describe('placeEnrichment', () => {
|
||||
it('FE-PLANNER-ENRICHCACHE-001: the key names the version, the place (or its coordinates) and the language', () => {
|
||||
expect(cacheKeyFor(SELECTION, 'de')).toBe('enrich_v4_way:1_de');
|
||||
expect(cacheKeyFor({ lat: 1.5, lng: 2, name: 'Pin' }, 'en')).toBe('enrich_v4_coords:1.5:2_en');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-ENRICHCACHE-002: nothing is cached before it is stored, then both caches hold it', () => {
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toBeUndefined();
|
||||
storeEnrichment(SELECTION, 'de', RESULT);
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toBe(RESULT);
|
||||
expect(JSON.parse(sessionStorage.getItem('enrich_v4_way:1_de') ?? '')).toEqual(RESULT);
|
||||
// Another language is another answer.
|
||||
expect(readCachedEnrichment(SELECTION, 'en')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-ENRICHCACHE-003: an answer kept in the session outlives the in-memory cache', () => {
|
||||
storeEnrichment(SELECTION, 'de', RESULT);
|
||||
__clearEnrichmentCacheForTests();
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toEqual(RESULT);
|
||||
// Taken back into memory: the session is not read a second time.
|
||||
sessionStorage.clear();
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toEqual(RESULT);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-ENRICHCACHE-004: a broken session entry reads as nothing cached', () => {
|
||||
sessionStorage.setItem(cacheKeyFor(SELECTION, 'de'), '{not json');
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toBeUndefined();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-ENRICHCACHE-005: a full or blocked session storage still keeps the answer in memory', () => {
|
||||
vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
|
||||
throw new Error('QuotaExceededError');
|
||||
});
|
||||
expect(() => storeEnrichment(SELECTION, 'de', RESULT)).not.toThrow();
|
||||
expect(readCachedEnrichment(SELECTION, 'de')).toBe(RESULT);
|
||||
});
|
||||
});
|
||||
@@ -1,77 +0,0 @@
|
||||
import type { MapsPlaceEnrichmentResult } from '@trek/shared';
|
||||
|
||||
/**
|
||||
* The place an enrichment consumer is describing — the editor's details column
|
||||
* and the view-mode photo gallery both use this shape.
|
||||
*/
|
||||
export interface PlaceDetailsSelection {
|
||||
placeId?: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
name: string;
|
||||
/** The picked search result, so the server can skip its own details lookup. */
|
||||
details?: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Module-level cache plus sessionStorage, same shape as usePlaceDetails in
|
||||
* PlaceInspector. Clicking back and forth between two search results must not
|
||||
* pay for the provider fan-out twice, and the gallery must reuse the pictures
|
||||
* the editor already fetched for the same place.
|
||||
*/
|
||||
const enrichmentCache = new Map<string, MapsPlaceEnrichmentResult>();
|
||||
|
||||
/** Test seam: the module-level cache otherwise leaks between cases. */
|
||||
export function __clearEnrichmentCacheForTests(): void {
|
||||
enrichmentCache.clear();
|
||||
}
|
||||
|
||||
function readSession(key: string): MapsPlaceEnrichmentResult | undefined {
|
||||
try {
|
||||
const raw = sessionStorage.getItem(key);
|
||||
return raw ? (JSON.parse(raw) as MapsPlaceEnrichmentResult) : undefined;
|
||||
} catch {
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
||||
function writeSession(key: string, value: MapsPlaceEnrichmentResult): void {
|
||||
try {
|
||||
sessionStorage.setItem(key, JSON.stringify(value));
|
||||
} catch {
|
||||
/* private mode / quota — the in-memory cache still helps for this session */
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Bumped with the server's CACHE_VERSION. sessionStorage outlives a deploy, so
|
||||
* without it the tab that was open while the fix shipped keeps replaying the
|
||||
* answer the fix was about — and reports it as still broken.
|
||||
*/
|
||||
const ENRICH_CACHE_V = 4;
|
||||
|
||||
export function cacheKeyFor(selection: PlaceDetailsSelection, language: string): string {
|
||||
const id = selection.placeId || `coords:${selection.lat}:${selection.lng}`;
|
||||
return `enrich_v${ENRICH_CACHE_V}_${id}_${language}`;
|
||||
}
|
||||
|
||||
/** The answer if it was already fetched this session, else undefined. */
|
||||
export function readCachedEnrichment(
|
||||
selection: PlaceDetailsSelection,
|
||||
language: string
|
||||
): MapsPlaceEnrichmentResult | undefined {
|
||||
const key = cacheKeyFor(selection, language);
|
||||
const cached = enrichmentCache.get(key) ?? readSession(key);
|
||||
if (cached) enrichmentCache.set(key, cached);
|
||||
return cached;
|
||||
}
|
||||
|
||||
export function storeEnrichment(
|
||||
selection: PlaceDetailsSelection,
|
||||
language: string,
|
||||
value: MapsPlaceEnrichmentResult
|
||||
): void {
|
||||
const key = cacheKeyFor(selection, language);
|
||||
enrichmentCache.set(key, value);
|
||||
writeSession(key, value);
|
||||
}
|
||||
@@ -1,65 +0,0 @@
|
||||
// FE-PLANNER-PLIMGCHOICE-001 to FE-PLANNER-PLIMGCHOICE-006: the editor's picture choice
|
||||
// as a pure model, read the same way by the desktop dialog and the phone sheet.
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { buildTripFile } from '../../../tests/helpers/factories';
|
||||
import { chosenImage, pendingImagePayload, pickableImages, type PendingPlaceImage } from './placeImageChoice';
|
||||
|
||||
const CURRENT = '/uploads/places/current.jpg';
|
||||
|
||||
describe('pickableImages', () => {
|
||||
it('FE-PLANNER-PLIMGCHOICE-001: keeps the jpeg, png, gif and webp files and drops the rest', () => {
|
||||
const jpg = buildTripFile({ mime_type: 'image/jpeg' });
|
||||
const png = buildTripFile({ mime_type: 'image/png' });
|
||||
const gif = buildTripFile({ mime_type: 'image/gif' });
|
||||
const webp = buildTripFile({ mime_type: 'image/webp' });
|
||||
const heic = buildTripFile({ mime_type: 'image/heic' });
|
||||
const svg = buildTripFile({ mime_type: 'image/svg+xml' });
|
||||
const pdf = buildTripFile({ mime_type: 'application/pdf' });
|
||||
const unknown = buildTripFile({ mime_type: undefined as unknown as string });
|
||||
|
||||
expect(pickableImages([jpg, pdf, png, heic, gif, svg, webp, unknown])).toEqual([jpg, png, gif, webp]);
|
||||
expect(pickableImages([])).toEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('chosenImage', () => {
|
||||
const upload: PendingPlaceImage = { kind: 'upload', file: new File(['x'], 'a.png'), preview: 'blob:a' };
|
||||
const attached: PendingPlaceImage = { kind: 'attached', file: buildTripFile({ id: 77, mime_type: 'image/png' }) };
|
||||
|
||||
it('FE-PLANNER-PLIMGCHOICE-002: a waiting picture wins over whatever the field holds', () => {
|
||||
expect(chosenImage('https://img.example/1.jpg', upload, CURRENT)).toEqual({ kind: 'upload' });
|
||||
expect(chosenImage(null, attached, CURRENT)).toEqual({ kind: 'attached', fileId: 77 });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGCHOICE-003: null drops the picture, whether the place had one or not', () => {
|
||||
expect(chosenImage(null, null, CURRENT)).toEqual({ kind: 'none' });
|
||||
expect(chosenImage(null, null, null)).toEqual({ kind: 'none' });
|
||||
});
|
||||
|
||||
it("FE-PLANNER-PLIMGCHOICE-004: a URL is a source's photo, unless it is the picture the place already has", () => {
|
||||
expect(chosenImage('https://img.example/1.jpg', null, CURRENT)).toEqual({
|
||||
kind: 'url',
|
||||
url: 'https://img.example/1.jpg',
|
||||
});
|
||||
expect(chosenImage(CURRENT, null, CURRENT)).toEqual({ kind: 'current' });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGCHOICE-005: an untouched field keeps the current picture, or none on a place without one', () => {
|
||||
expect(chosenImage(undefined, null, CURRENT)).toEqual({ kind: 'current' });
|
||||
expect(chosenImage(undefined, null, null)).toEqual({ kind: 'none' });
|
||||
expect(chosenImage(undefined, null, undefined)).toEqual({ kind: 'none' });
|
||||
expect(chosenImage('', null, CURRENT)).toEqual({ kind: 'current' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('pendingImagePayload', () => {
|
||||
it("FE-PLANNER-PLIMGCHOICE-006: the save carries the file itself, or the attached file's id, or nothing", () => {
|
||||
const file = new File(['x'], 'a.png');
|
||||
expect(pendingImagePayload({ kind: 'upload', file, preview: 'blob:a' })).toBe(file);
|
||||
expect(pendingImagePayload({ kind: 'attached', file: buildTripFile({ id: 9, mime_type: 'image/png' }) })).toEqual({
|
||||
fileId: 9,
|
||||
});
|
||||
expect(pendingImagePayload(null)).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
import type { TripFile } from '../../types';
|
||||
import type { PlaceImageOwn } from './PlaceImagePicker';
|
||||
|
||||
const PICKABLE = /^image\/(jpeg|png|gif|webp)$/;
|
||||
|
||||
/** The images among a place's files that can stand as its picture (#1242). */
|
||||
export function pickableImages(files: readonly TripFile[]): TripFile[] {
|
||||
return files.filter((f) => PICKABLE.test(f.mime_type || ''));
|
||||
}
|
||||
|
||||
/**
|
||||
* A picture the form will make the place's own once it is saved: a file from
|
||||
* the device, or an image already attached to the place. Nothing is sent
|
||||
* before the save, so cancelling the form leaves the picture as it was, and a
|
||||
* new place can get one too.
|
||||
*/
|
||||
export type PendingPlaceImage = { kind: 'upload'; file: File; preview: string } | { kind: 'attached'; file: TripFile };
|
||||
|
||||
/** What the picker shows as chosen: the tile that stands for what the save will do. */
|
||||
export type ChosenImage =
|
||||
| { kind: 'current' }
|
||||
| { kind: 'none' }
|
||||
| { kind: 'url'; url: string }
|
||||
| { kind: 'upload' }
|
||||
| { kind: 'attached'; fileId: number };
|
||||
|
||||
/**
|
||||
* The choice the form holds, read as a tile. `imageUrl` is the form's field:
|
||||
* undefined keeps the place's picture, null drops it, a URL takes a source's
|
||||
* photo. A waiting picture wins over all of them.
|
||||
*/
|
||||
export function chosenImage(
|
||||
imageUrl: string | null | undefined,
|
||||
pending: PendingPlaceImage | null,
|
||||
currentUrl: string | null | undefined
|
||||
): ChosenImage {
|
||||
if (pending) return pending.kind === 'upload' ? { kind: 'upload' } : { kind: 'attached', fileId: pending.file.id };
|
||||
if (imageUrl === null) return { kind: 'none' };
|
||||
if (imageUrl) return imageUrl === currentUrl ? { kind: 'current' } : { kind: 'url', url: imageUrl };
|
||||
return currentUrl ? { kind: 'current' } : { kind: 'none' };
|
||||
}
|
||||
|
||||
/** What travels with the save to put a waiting picture in place: the file, or the attached file's id. */
|
||||
export type PendingImagePayload = File | { fileId: number };
|
||||
|
||||
export function pendingImagePayload(pending: PendingPlaceImage | null): PendingImagePayload | undefined {
|
||||
if (!pending) return undefined;
|
||||
return pending.kind === 'upload' ? pending.file : { fileId: pending.file.id };
|
||||
}
|
||||
|
||||
/** Whether the picker has a tile to show: its sources' photos, or a picture of the place's own, or an upload. */
|
||||
export function offersPictures(photos: readonly PlacePhotoCandidate[], own: PlaceImageOwn | undefined): boolean {
|
||||
if (photos.length > 0) return true;
|
||||
if (!own) return false;
|
||||
return !!own.currentUrl || own.attached.length > 0 || !!own.pendingPreview || own.canUpload;
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
// FE-PLANNER-PHOTOCREDIT-001 to FE-PLANNER-PHOTOCREDIT-003: who a source's photo is credited to,
|
||||
// and the one-line caption the gallery shows under it.
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
|
||||
import { creditOf, photoCaption, sourceLabelFor } from './placePhotoCredit';
|
||||
|
||||
function photo(over: Partial<PlacePhotoCandidate> = {}): PlacePhotoCandidate {
|
||||
return {
|
||||
key: 'k',
|
||||
url: '/api/maps/place-photo/k/bytes',
|
||||
attribution: 'Alice',
|
||||
license: 'CC BY-SA 4.0',
|
||||
licenseUrl: null,
|
||||
sourceUrl: null,
|
||||
source: 'wikimedia',
|
||||
...over,
|
||||
} as PlacePhotoCandidate;
|
||||
}
|
||||
|
||||
describe('placePhotoCredit', () => {
|
||||
it('FE-PLANNER-PHOTOCREDIT-001: each provider is named by its proper name', () => {
|
||||
expect(sourceLabelFor('google')).toBe('Google');
|
||||
expect(sourceLabelFor('wikipedia')).toBe('Wikipedia');
|
||||
expect(sourceLabelFor('wikimedia')).toBe('Wikimedia Commons');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PHOTOCREDIT-002: the author is credited, and the provider when there is none', () => {
|
||||
expect(creditOf(photo())).toBe('Alice');
|
||||
expect(creditOf(photo({ attribution: null, source: 'google' }))).toBe('Google');
|
||||
expect(creditOf(photo({ attribution: '', source: 'wikipedia' }))).toBe('Wikipedia');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PHOTOCREDIT-003: the caption joins the credit and the licence with a comma, not a dot', () => {
|
||||
expect(photoCaption(photo())).toBe('Alice, CC BY-SA 4.0');
|
||||
expect(photoCaption(photo({ attribution: null, license: null, source: 'google' }))).toBe('Google');
|
||||
expect(photoCaption(photo()).includes('·')).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
|
||||
/** The name to put under a picture. Google gives no author, so it gets its own name. */
|
||||
export function creditOf(photo: PlacePhotoCandidate): string {
|
||||
return photo.attribution || sourceLabelFor(photo.source);
|
||||
}
|
||||
|
||||
/**
|
||||
* The provider a picture came from, for the pictures that hand us no author.
|
||||
* Proper names, so they are not translated.
|
||||
*/
|
||||
export function sourceLabelFor(source: PlacePhotoCandidate['source']): string {
|
||||
if (source === 'google') return 'Google';
|
||||
if (source === 'wikipedia') return 'Wikipedia';
|
||||
return 'Wikimedia Commons';
|
||||
}
|
||||
|
||||
/** Author and licence joined for a single-line caption, with a comma as the rest of the app writes it. */
|
||||
export function photoCaption(photo: PlacePhotoCandidate): string {
|
||||
const credit = creditOf(photo);
|
||||
return photo.license ? `${credit}, ${photo.license}` : credit;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
// FE-PLANNER-PLACEACT-001 to -015: the place writes behind both the desktop
|
||||
// inspector and the phone place sheet.
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import type { ChangeEvent } from 'react';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
@@ -8,12 +8,14 @@ import { buildAssignment, buildPlace } from '../../../tests/helpers/factories';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import { assignmentsApi } from '../../api/client';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import { normalizeImageFile } from '../../utils/convertHeic';
|
||||
import {
|
||||
participantsWith,
|
||||
participantsWithout,
|
||||
placeActions,
|
||||
splitParticipants,
|
||||
usePlaceFileUpload,
|
||||
usePlaceImagePick,
|
||||
} from './usePlaceActions';
|
||||
|
||||
vi.mock('../../utils/convertHeic', () => ({
|
||||
@@ -206,3 +208,61 @@ describe('usePlaceFileUpload', () => {
|
||||
expect(result.current.filesExpanded).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('usePlaceImagePick', () => {
|
||||
it('FE-PLANNER-PLACEACT-013: converts the picked picture, uploads it and clears the input', async () => {
|
||||
const upload = vi.fn(async (_file: File) => undefined);
|
||||
const toast = { error: vi.fn() };
|
||||
const { result } = renderHook(() => usePlaceImagePick(upload, toast));
|
||||
const { event, target } = pick([new File(['x'], 'photo.heic')]);
|
||||
|
||||
await act(async () => {
|
||||
await result.current.pickImage(event);
|
||||
});
|
||||
|
||||
expect(normalizeImageFile).toHaveBeenCalledTimes(1);
|
||||
expect(upload.mock.calls[0][0].name).toBe('normalized-photo.heic');
|
||||
expect(target.value).toBe('');
|
||||
expect(result.current.busy).toBe(false);
|
||||
expect(toast.error).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEACT-014: a refused picture is reported and the busy flag drops again', async () => {
|
||||
let fail: (err: Error) => void = () => undefined;
|
||||
const upload = vi.fn(() => new Promise<void>((_resolve, reject) => (fail = reject)));
|
||||
const toast = { error: vi.fn() };
|
||||
const { result } = renderHook(() => usePlaceImagePick(upload, toast));
|
||||
|
||||
let running: Promise<void> = Promise.resolve();
|
||||
act(() => {
|
||||
running = result.current.pickImage(pick([new File(['x'], 'a.png')]).event);
|
||||
});
|
||||
expect(result.current.busy).toBe(true);
|
||||
await waitFor(() => expect(upload).toHaveBeenCalled());
|
||||
|
||||
await act(async () => {
|
||||
fail(new Error('unsupported'));
|
||||
await running;
|
||||
});
|
||||
expect(toast.error).toHaveBeenCalledWith('places.imageUploadError');
|
||||
expect(result.current.busy).toBe(false);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLACEACT-015: without an upload or a file the pick only clears the input', async () => {
|
||||
const upload = vi.fn(async () => undefined);
|
||||
const noUpload = renderHook(() => usePlaceImagePick(undefined, { error: vi.fn() }));
|
||||
const nothingPicked = renderHook(() => usePlaceImagePick(upload, { error: vi.fn() }));
|
||||
const first = pick([new File(['x'], 'a.png')]);
|
||||
const second = pick([]);
|
||||
await act(async () => {
|
||||
await noUpload.result.current.pickImage(first.event);
|
||||
await nothingPicked.result.current.pickImage(second.event);
|
||||
});
|
||||
expect(first.target.value).toBe('');
|
||||
expect(second.target.value).toBe('');
|
||||
expect(upload).not.toHaveBeenCalled();
|
||||
expect(normalizeImageFile).not.toHaveBeenCalled();
|
||||
act(() => noUpload.result.current.setBusy(true));
|
||||
expect(noUpload.result.current.busy).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,6 +4,7 @@ import { translateApiError, useTranslation } from '../../i18n';
|
||||
import type { TripStoreState } from '../../store/tripStore';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import type { Place } from '../../types';
|
||||
import { normalizeImageFile } from '../../utils/convertHeic';
|
||||
|
||||
type Translate = (key: string, params?: Record<string, string | number>) => string;
|
||||
|
||||
@@ -132,3 +133,29 @@ export function usePlaceFileUpload(
|
||||
|
||||
return { uploading, filesExpanded, setFilesExpanded, fileInputRef, handleUpload };
|
||||
}
|
||||
|
||||
/**
|
||||
* A picture picked as a place's image (#1136): converted from HEIC where needed,
|
||||
* uploaded, and a failure said in a toast. `busy` also covers whatever else the
|
||||
* caller does to the image while it runs. Without an upload the pick does nothing.
|
||||
*/
|
||||
export function usePlaceImagePick(upload: ((file: File) => Promise<unknown>) | undefined, toast: PlaceActionToast) {
|
||||
const { t } = useTranslation();
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
const pickImage = async (e: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
e.target.value = '';
|
||||
if (!file || !upload) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await upload(await normalizeImageFile(file));
|
||||
} catch (err: unknown) {
|
||||
toast.error(translateApiError(t, err, 'places.imageUploadError'));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return { busy, setBusy, pickImage };
|
||||
}
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
// FE-PLANNER-PLFORM-001 to FE-PLANNER-PLFORM-019: the place form state behind the desktop
|
||||
// dialog and the phone sheet, its waiting picture, and the inline new category of both
|
||||
// ('dialog' and 'sheet').
|
||||
// FE-PLANNER-PLFORM-001 to FE-PLANNER-PLFORM-014: the place form state behind the desktop
|
||||
// dialog and the phone sheet, and the inline new category of both ('dialog' and 'sheet').
|
||||
import { act, renderHook } from '@testing-library/react';
|
||||
import type React from 'react';
|
||||
import { afterEach, beforeEach, describe, expect, it, vi, type MockInstance } from 'vitest';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { buildTripFile } from '../../../tests/helpers/factories';
|
||||
import type { Category, Place } from '../../types';
|
||||
import { DEFAULT_FORM } from './PlaceFormModal.helpers';
|
||||
import { useNewCategory, usePlaceForm, type NewCategoryOptions } from './usePlaceForm';
|
||||
@@ -165,88 +163,6 @@ function category(id: number): Category {
|
||||
return { id, name: 'Food', color: '#6366f1', icon: 'MapPin' } as unknown as Category;
|
||||
}
|
||||
|
||||
describe('usePlaceForm, the waiting picture', () => {
|
||||
let previews: number;
|
||||
let createObjectURL: MockInstance<typeof URL.createObjectURL>;
|
||||
let revokeObjectURL: MockInstance<typeof URL.revokeObjectURL>;
|
||||
|
||||
beforeEach(() => {
|
||||
previews = 0;
|
||||
createObjectURL = vi.spyOn(URL, 'createObjectURL').mockImplementation(() => `blob:preview-${++previews}`);
|
||||
revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
vi.restoreAllMocks();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORM-015: nothing waits on a fresh form', () => {
|
||||
const { result } = setup();
|
||||
expect(result.current.pendingImage).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORM-016: a picture from the device waits with its preview and keeps the field untouched', () => {
|
||||
const { result } = setup();
|
||||
act(() => result.current.pickImage('https://img.example/1.jpg'));
|
||||
const picture = file('front.png', 'image/png');
|
||||
act(() => result.current.stageUpload(picture));
|
||||
expect(createObjectURL).toHaveBeenCalledWith(picture);
|
||||
expect(result.current.pendingImage).toEqual({ kind: 'upload', file: picture, preview: 'blob:preview-1' });
|
||||
// A source's photo picked before gives way to it.
|
||||
expect(result.current.form.image_url).toBeUndefined();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORM-017: replacing the waiting upload frees its preview, whatever replaces it', () => {
|
||||
const { result } = setup();
|
||||
act(() => result.current.stageUpload(file('a.png', 'image/png')));
|
||||
act(() => result.current.stageUpload(file('b.png', 'image/png')));
|
||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:preview-1');
|
||||
expect(result.current.pendingImage).toMatchObject({ kind: 'upload', preview: 'blob:preview-2' });
|
||||
|
||||
const attached = buildTripFile({ id: 8, mime_type: 'image/png' });
|
||||
act(() => result.current.stageAttached(attached));
|
||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:preview-2');
|
||||
expect(result.current.pendingImage).toEqual({ kind: 'attached', file: attached });
|
||||
expect(result.current.form.image_url).toBeUndefined();
|
||||
|
||||
// An attached image has no preview of ours to free.
|
||||
revokeObjectURL.mockClear();
|
||||
act(() => result.current.pickImage('https://img.example/2.jpg'));
|
||||
expect(revokeObjectURL).not.toHaveBeenCalled();
|
||||
expect(result.current.pendingImage).toBeNull();
|
||||
expect(result.current.form.image_url).toBe('https://img.example/2.jpg');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORM-018: removing the picture drops what waits and empties the field for the save', () => {
|
||||
const { result } = setup();
|
||||
act(() => result.current.stageUpload(file('a.png', 'image/png')));
|
||||
act(() => result.current.removeImage());
|
||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:preview-1');
|
||||
expect(result.current.pendingImage).toBeNull();
|
||||
expect(result.current.form.image_url).toBeNull();
|
||||
|
||||
// A fresh opening starts without a waiting picture as well.
|
||||
act(() => result.current.stageUpload(file('b.png', 'image/png')));
|
||||
act(() => result.current.openForm(DEFAULT_FORM, null, null));
|
||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:preview-2');
|
||||
expect(result.current.pendingImage).toBeNull();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLFORM-019: closing the form frees the preview still waiting, and only that one', () => {
|
||||
const { result, unmount } = setup();
|
||||
act(() => result.current.stageUpload(file('a.png', 'image/png')));
|
||||
revokeObjectURL.mockClear();
|
||||
unmount();
|
||||
expect(revokeObjectURL).toHaveBeenCalledTimes(1);
|
||||
expect(revokeObjectURL).toHaveBeenCalledWith('blob:preview-1');
|
||||
|
||||
const empty = setup();
|
||||
revokeObjectURL.mockClear();
|
||||
empty.unmount();
|
||||
expect(revokeObjectURL).not.toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('useNewCategory', () => {
|
||||
function setupCategory(options: Pick<NewCategoryOptions, 'variant' | 'create'>) {
|
||||
const onCreated = vi.fn();
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import type React from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useRef, useState } from 'react';
|
||||
|
||||
import type { useTranslation } from '../../i18n';
|
||||
import type { Category, TripFile } from '../../types';
|
||||
import type { Category } from '../../types';
|
||||
import { offlineOr } from '../../utils/needsConnection';
|
||||
import type { useToast } from '../shared/Toast';
|
||||
import type { PlaceDetailsSelection } from './PlaceDetailsColumn';
|
||||
@@ -15,7 +15,6 @@ import {
|
||||
type PlacePrefill,
|
||||
type ResultField,
|
||||
} from './PlaceFormModal.helpers';
|
||||
import type { PendingPlaceImage } from './placeImageChoice';
|
||||
|
||||
type Translate = ReturnType<typeof useTranslation>['t'];
|
||||
type Toast = ReturnType<typeof useToast>;
|
||||
@@ -41,20 +40,6 @@ export function usePlaceForm({ t, toast, canUploadFiles }: PlaceFormOptions) {
|
||||
// user's and survives. See mergeResult.
|
||||
const autoFilledRef = useRef<Set<ResultField>>(new Set());
|
||||
const [pendingFiles, setPendingFiles] = useState<File[]>([]);
|
||||
// The picture that becomes the place's own when the form is saved.
|
||||
const [pendingImage, setPendingImageState] = useState<PendingPlaceImage | null>(null);
|
||||
const previewRef = useRef<string | null>(null);
|
||||
const setPendingImage = (next: PendingPlaceImage | null) => {
|
||||
if (previewRef.current) URL.revokeObjectURL(previewRef.current);
|
||||
previewRef.current = next?.kind === 'upload' ? next.preview : null;
|
||||
setPendingImageState(next);
|
||||
};
|
||||
useEffect(
|
||||
() => () => {
|
||||
if (previewRef.current) URL.revokeObjectURL(previewRef.current);
|
||||
},
|
||||
[]
|
||||
);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [duplicateWarning, setDuplicateWarning] = useState<string | null>(null);
|
||||
// What the details column is describing. Null until there is a place to describe.
|
||||
@@ -74,7 +59,6 @@ export function usePlaceForm({ t, toast, canUploadFiles }: PlaceFormOptions) {
|
||||
autoFilledRef.current = openingAutoFilled(place, prefill);
|
||||
setDetailsSelection(openingDetailsSelection(place, prefill));
|
||||
setPendingFiles([]);
|
||||
setPendingImage(null);
|
||||
setDuplicateWarning(null);
|
||||
};
|
||||
|
||||
@@ -107,29 +91,8 @@ export function usePlaceForm({ t, toast, canUploadFiles }: PlaceFormOptions) {
|
||||
}
|
||||
};
|
||||
|
||||
/** A source's photo picked in the details column, or the place's own picture again. */
|
||||
const pickImage = (url: string | null) => {
|
||||
setPendingImage(null);
|
||||
setForm((prev) => ({ ...prev, image_url: url ?? undefined }));
|
||||
};
|
||||
|
||||
/** A picture from the device, shown at once and uploaded when the form is saved. */
|
||||
const stageUpload = (file: File) => {
|
||||
setPendingImage({ kind: 'upload', file, preview: URL.createObjectURL(file) });
|
||||
setForm((prev) => ({ ...prev, image_url: undefined }));
|
||||
};
|
||||
|
||||
/** An image already attached to the place, made its picture when the form is saved. */
|
||||
const stageAttached = (file: TripFile) => {
|
||||
setPendingImage({ kind: 'attached', file });
|
||||
setForm((prev) => ({ ...prev, image_url: undefined }));
|
||||
};
|
||||
|
||||
/** No picture at all: the save drops the place's own one. */
|
||||
const removeImage = () => {
|
||||
setPendingImage(null);
|
||||
setForm((prev) => ({ ...prev, image_url: null }));
|
||||
};
|
||||
/** A hero image picked in the details column, or none. */
|
||||
const pickImage = (url: string | null) => setForm((prev) => ({ ...prev, image_url: url ?? undefined }));
|
||||
|
||||
/** The details column's description, taken over into the form. */
|
||||
const adoptDescription = (text: string) => setForm((prev) => ({ ...prev, description: text }));
|
||||
@@ -164,10 +127,6 @@ export function usePlaceForm({ t, toast, canUploadFiles }: PlaceFormOptions) {
|
||||
openForm,
|
||||
handleChange,
|
||||
pickImage,
|
||||
pendingImage,
|
||||
stageUpload,
|
||||
stageAttached,
|
||||
removeImage,
|
||||
adoptDescription,
|
||||
warnIfDuplicate,
|
||||
};
|
||||
|
||||
@@ -1,227 +0,0 @@
|
||||
// FE-PLANNER-PLGALLERY-001 to FE-PLANNER-PLGALLERY-011: the pictures of one place for the
|
||||
// view's full screen gallery: its own picture first, the sources' photos asked for on
|
||||
// open, the shared session cache, and an answer that comes back for a place already left.
|
||||
import { act, renderHook, waitFor } from '@testing-library/react';
|
||||
import type { MapsPlaceEnrichmentResult, PlacePhotoCandidate } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { buildPlace } from '../../../tests/helpers/factories';
|
||||
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import type { Place } from '../../types';
|
||||
import { __clearEnrichmentCacheForTests, readCachedEnrichment, storeEnrichment } from './placeEnrichment';
|
||||
import { usePlaceGallery } from './usePlaceGallery';
|
||||
|
||||
const placeEnrichment = vi.fn();
|
||||
vi.mock('../../repo/placePictureRepo', () => ({
|
||||
placePictureRepo: { enrichment: (...a: unknown[]) => placeEnrichment(...a) },
|
||||
}));
|
||||
// One toast for every render, the way the real hook memoises it.
|
||||
const toast = vi.hoisted(() => ({ success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() }));
|
||||
vi.mock('../shared/Toast', () => ({ useToast: () => toast }));
|
||||
|
||||
const CUSTOM = '/uploads/places/own.jpg';
|
||||
|
||||
const PHOTO: PlacePhotoCandidate = {
|
||||
key: 'gp~p0',
|
||||
url: '/api/maps/place-photo/gp~p0/bytes',
|
||||
attribution: 'Alice',
|
||||
license: 'CC BY 4.0',
|
||||
licenseUrl: null,
|
||||
sourceUrl: 'https://commons.wikimedia.org/wiki/File:A.jpg',
|
||||
source: 'wikimedia',
|
||||
} as PlacePhotoCandidate;
|
||||
|
||||
const GOOGLE: PlacePhotoCandidate = {
|
||||
key: 'gp~p1',
|
||||
url: '/api/maps/place-photo/gp~p1/bytes',
|
||||
attribution: null,
|
||||
license: null,
|
||||
licenseUrl: null,
|
||||
sourceUrl: null,
|
||||
source: 'google',
|
||||
} as PlacePhotoCandidate;
|
||||
|
||||
const result = (photos: PlacePhotoCandidate[]) =>
|
||||
({ photos, facts: [], description: null }) as unknown as MapsPlaceEnrichmentResult;
|
||||
|
||||
const LAKE = buildPlace({ id: 1, name: 'Lake', lat: 47.5, lng: 11.2, google_place_id: 'gp-lake' });
|
||||
const CASTLE = buildPlace({ id: 2, name: 'Castle', lat: 48.1, lng: 11.6, osm_id: 'way:2' });
|
||||
|
||||
function deferred<T>() {
|
||||
let resolve: (v: T) => void = () => {};
|
||||
let reject: (e: unknown) => void = () => {};
|
||||
const promise = new Promise<T>((res, rej) => {
|
||||
resolve = res;
|
||||
reject = rej;
|
||||
});
|
||||
return { promise, resolve, reject };
|
||||
}
|
||||
|
||||
function setup(place: Place, language = 'de') {
|
||||
return renderHook(({ p, lang }) => usePlaceGallery(p, lang), { initialProps: { p: place, lang: language } });
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: true });
|
||||
placeEnrichment.mockReset();
|
||||
placeEnrichment.mockResolvedValue(result([PHOTO]));
|
||||
sessionStorage.clear();
|
||||
__clearEnrichmentCacheForTests();
|
||||
Object.values(toast).forEach((fn) => fn.mockClear());
|
||||
});
|
||||
|
||||
describe('usePlaceGallery', () => {
|
||||
it('FE-PLANNER-PLGALLERY-001: it can open with a picture of its own, or with coordinates the sources can be asked about', () => {
|
||||
expect(setup({ ...LAKE, image_url: CUSTOM }).result.current.canOpen).toBe(true);
|
||||
expect(setup(LAKE).result.current.canOpen).toBe(true);
|
||||
expect(setup({ ...LAKE, lat: null, lng: null } as unknown as Place).result.current.canOpen).toBe(false);
|
||||
expect(setup({ ...LAKE, lat: 'north' as unknown as number }).result.current.canOpen).toBe(false);
|
||||
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
expect(setup(LAKE).result.current.canOpen).toBe(false);
|
||||
expect(setup({ ...LAKE, image_url: CUSTOM }).result.current.canOpen).toBe(true);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-002: with the sources switched off its own picture opens at once, alone', () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
const { result: r } = setup({ ...LAKE, image_url: CUSTOM });
|
||||
expect(r.current.photos).toEqual([{ id: 'custom', src: CUSTOM, caption: null, captionHref: null }]);
|
||||
|
||||
act(() => r.current.open());
|
||||
expect(r.current.isOpen).toBe(true);
|
||||
expect(placeEnrichment).not.toHaveBeenCalled();
|
||||
act(() => r.current.close());
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-003: nothing of its own and nobody to ask says so instead of opening', () => {
|
||||
seedStore(useAuthStore, { placesEnrichEnabled: false });
|
||||
const { result: r } = setup(LAKE);
|
||||
act(() => r.current.open());
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
expect(toast.info).toHaveBeenCalledWith('places.details.noPhotos');
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-004: the sources are asked on open, and their photos join with a linked credit', async () => {
|
||||
const pending = deferred<MapsPlaceEnrichmentResult>();
|
||||
placeEnrichment.mockReturnValue(pending.promise);
|
||||
const { result: r } = setup(LAKE);
|
||||
expect(placeEnrichment).not.toHaveBeenCalled();
|
||||
|
||||
act(() => r.current.open());
|
||||
expect(r.current.loading).toBe(true);
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
expect(placeEnrichment).toHaveBeenCalledWith({
|
||||
placeId: 'gp-lake',
|
||||
lat: 47.5,
|
||||
lng: 11.2,
|
||||
name: 'Lake',
|
||||
lang: 'de',
|
||||
});
|
||||
|
||||
await act(async () => pending.resolve(result([PHOTO, GOOGLE])));
|
||||
expect(r.current.loading).toBe(false);
|
||||
expect(r.current.isOpen).toBe(true);
|
||||
expect(r.current.photos).toEqual([
|
||||
{ id: 'gp~p0', src: PHOTO.url, caption: 'Alice, CC BY 4.0', captionHref: PHOTO.sourceUrl },
|
||||
{ id: 'gp~p1', src: GOOGLE.url, caption: 'Google', captionHref: null },
|
||||
]);
|
||||
// Kept for the editor's details column and the next open.
|
||||
expect(readCachedEnrichment({ placeId: 'gp-lake', lat: 47.5, lng: 11.2, name: 'Lake' }, 'de')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-005: a second open uses the answer it already has', async () => {
|
||||
const { result: r } = setup(LAKE);
|
||||
act(() => r.current.open());
|
||||
await waitFor(() => expect(r.current.isOpen).toBe(true));
|
||||
act(() => r.current.close());
|
||||
|
||||
act(() => r.current.open());
|
||||
expect(r.current.isOpen).toBe(true);
|
||||
expect(placeEnrichment).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-006: its own picture leads, and a source photo of the same picture is not shown twice', async () => {
|
||||
placeEnrichment.mockResolvedValue(result([PHOTO, GOOGLE]));
|
||||
const { result: r } = setup({ ...LAKE, image_url: PHOTO.url });
|
||||
act(() => r.current.open());
|
||||
// Open at once on its own picture, while the sources are still asked.
|
||||
expect(r.current.isOpen).toBe(true);
|
||||
expect(r.current.loading).toBe(true);
|
||||
await waitFor(() => expect(r.current.loading).toBe(false));
|
||||
expect(r.current.photos.map((p) => p.id)).toEqual(['custom', 'gp~p1']);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-007: when the sources have nothing either, it says so, the second time too', async () => {
|
||||
placeEnrichment.mockResolvedValue(result([]));
|
||||
const { result: r } = setup(CASTLE);
|
||||
act(() => r.current.open());
|
||||
await waitFor(() => expect(toast.info).toHaveBeenCalledWith('places.details.noPhotos'));
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
// The OSM id is what the server is asked about when there is no Google one.
|
||||
expect(placeEnrichment.mock.calls[0][0]).toMatchObject({ placeId: 'way:2' });
|
||||
|
||||
act(() => r.current.open());
|
||||
expect(toast.info).toHaveBeenCalledTimes(2);
|
||||
expect(placeEnrichment).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-008: an answer this session already holds opens without asking', () => {
|
||||
storeEnrichment({ placeId: 'gp-lake', lat: 47.5, lng: 11.2, name: 'Lake' }, 'de', result([PHOTO]));
|
||||
const { result: r } = setup(LAKE);
|
||||
act(() => r.current.open());
|
||||
expect(r.current.isOpen).toBe(true);
|
||||
expect(r.current.loading).toBe(false);
|
||||
expect(placeEnrichment).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-009: a failed request is reported, unless its own picture is already on screen', async () => {
|
||||
placeEnrichment.mockRejectedValue(new Error('network'));
|
||||
const bare = setup(LAKE);
|
||||
act(() => bare.result.current.open());
|
||||
await waitFor(() => expect(toast.error).toHaveBeenCalledWith('places.details.error'));
|
||||
expect(bare.result.current.loading).toBe(false);
|
||||
bare.unmount();
|
||||
|
||||
toast.error.mockClear();
|
||||
const pictured = setup({ ...CASTLE, image_url: CUSTOM });
|
||||
act(() => pictured.result.current.open());
|
||||
await waitFor(() => expect(pictured.result.current.loading).toBe(false));
|
||||
expect(pictured.result.current.isOpen).toBe(true);
|
||||
expect(toast.error).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-010: switching place while the sources answer drops that answer: nothing opens, nothing joins', async () => {
|
||||
const pending = deferred<MapsPlaceEnrichmentResult>();
|
||||
placeEnrichment.mockReturnValue(pending.promise);
|
||||
const { result: r, rerender } = setup(LAKE);
|
||||
act(() => r.current.open());
|
||||
expect(r.current.loading).toBe(true);
|
||||
|
||||
rerender({ p: CASTLE, lang: 'de' });
|
||||
expect(r.current.loading).toBe(false);
|
||||
|
||||
await act(async () => pending.resolve(result([PHOTO])));
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
expect(r.current.loading).toBe(false);
|
||||
expect(r.current.photos).toEqual([]);
|
||||
expect(toast.error).not.toHaveBeenCalled();
|
||||
// The answer still belongs to the first place, so it is kept for it.
|
||||
expect(readCachedEnrichment({ placeId: 'gp-lake', lat: 47.5, lng: 11.2, name: 'Lake' }, 'de')).toBeTruthy();
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLGALLERY-011: a failure that arrives after the switch is not reported over the next place', async () => {
|
||||
const pending = deferred<MapsPlaceEnrichmentResult>();
|
||||
placeEnrichment.mockReturnValue(pending.promise);
|
||||
const { result: r, rerender } = setup(LAKE);
|
||||
act(() => r.current.open());
|
||||
act(() => r.current.close());
|
||||
|
||||
rerender({ p: CASTLE, lang: 'de' });
|
||||
await act(async () => pending.reject(new Error('network')));
|
||||
expect(toast.error).not.toHaveBeenCalled();
|
||||
expect(r.current.isOpen).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -1,136 +0,0 @@
|
||||
import type { PlacePhotoCandidate } from '@trek/shared';
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { translateApiError, useTranslation } from '../../i18n';
|
||||
import { placePictureRepo } from '../../repo/placePictureRepo';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import type { Place } from '../../types';
|
||||
import { useToast } from '../shared/Toast';
|
||||
import { readCachedEnrichment, storeEnrichment, type PlaceDetailsSelection } from './placeEnrichment';
|
||||
import { photoCaption } from './placePhotoCredit';
|
||||
|
||||
/** What the lightbox renders; mirrors Journey/PhotoLightbox's private photo shape. */
|
||||
interface GalleryPhoto {
|
||||
id: string;
|
||||
src: string;
|
||||
caption: string | null;
|
||||
/** The photo's source page, which the credit links to. */
|
||||
captionHref: string | null;
|
||||
}
|
||||
|
||||
interface UsePlaceGallery {
|
||||
photos: GalleryPhoto[];
|
||||
open: () => void;
|
||||
close: () => void;
|
||||
isOpen: boolean;
|
||||
/** Loading enrichment; the trigger can show a spinner while it waits. */
|
||||
loading: boolean;
|
||||
/** False when there is no picture and nobody who could supply one. */
|
||||
canOpen: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* The pictures of one place, for the full-screen view-mode gallery.
|
||||
*
|
||||
* The custom image (if any) leads, then the provider candidates the editor's
|
||||
* details column already uses. Enrichment is fetched lazily on open: fanning
|
||||
* out to Google/Wikimedia for every place a user merely selects is not worth
|
||||
* it, and the shared session cache makes a second open instant.
|
||||
*/
|
||||
export function usePlaceGallery(place: Place, language: string): UsePlaceGallery {
|
||||
const placesEnrichEnabled = useAuthStore((s) => s.placesEnrichEnabled);
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
// Each piece of state names the place it belongs to: a different place reads
|
||||
// as nothing loaded, nothing open, so the previous answer never flashes.
|
||||
const [candidatesFor, setCandidatesFor] = useState<{ placeId: number; list: PlacePhotoCandidate[] } | null>(null);
|
||||
const [openFor, setOpenFor] = useState<number | null>(null);
|
||||
const [loadingFor, setLoadingFor] = useState<number | null>(null);
|
||||
const placeId = place.id;
|
||||
const candidates = candidatesFor?.placeId === placeId ? candidatesFor.list : null;
|
||||
const isOpen = openFor === placeId;
|
||||
const loading = loadingFor === placeId;
|
||||
// The place on screen now, for an answer that arrives after the user moved on.
|
||||
const shownRef = useRef(placeId);
|
||||
useEffect(() => {
|
||||
shownRef.current = placeId;
|
||||
}, [placeId]);
|
||||
|
||||
const selection = useMemo<PlaceDetailsSelection | null>(() => {
|
||||
if (place.lat == null || place.lng == null) return null;
|
||||
const lat = Number(place.lat);
|
||||
const lng = Number(place.lng);
|
||||
if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
|
||||
return {
|
||||
placeId: place.google_place_id || place.amap_poi_id || place.osm_id || undefined,
|
||||
lat,
|
||||
lng,
|
||||
name: place.name || '',
|
||||
};
|
||||
}, [place.google_place_id, place.amap_poi_id, place.osm_id, place.lat, place.lng, place.name]);
|
||||
|
||||
const photos = useMemo<GalleryPhoto[]>(() => {
|
||||
const list: GalleryPhoto[] = [];
|
||||
if (place.image_url) list.push({ id: 'custom', src: place.image_url, caption: null, captionHref: null });
|
||||
for (const candidate of candidates ?? []) {
|
||||
if (list.some((p) => p.src === candidate.url)) continue;
|
||||
list.push({
|
||||
id: candidate.key,
|
||||
src: candidate.url,
|
||||
caption: photoCaption(candidate),
|
||||
captionHref: candidate.sourceUrl ?? null,
|
||||
});
|
||||
}
|
||||
return list;
|
||||
}, [place.image_url, candidates]);
|
||||
|
||||
const canOpen = !!place.image_url || (placesEnrichEnabled && !!selection);
|
||||
|
||||
const close = useCallback(() => setOpenFor(null), []);
|
||||
|
||||
const open = useCallback(() => {
|
||||
// The custom image is already on screen — open now and let any provider
|
||||
// pictures join it as they arrive.
|
||||
if (place.image_url) setOpenFor(placeId);
|
||||
|
||||
if (!placesEnrichEnabled || !selection) {
|
||||
if (!place.image_url) toast.info(t('places.details.noPhotos'));
|
||||
return;
|
||||
}
|
||||
if (candidates !== null) {
|
||||
if (place.image_url || candidates.length) setOpenFor(placeId);
|
||||
else toast.info(t('places.details.noPhotos'));
|
||||
return;
|
||||
}
|
||||
|
||||
const apply = (list: PlacePhotoCandidate[]) => {
|
||||
setCandidatesFor({ placeId, list });
|
||||
if (place.image_url || list.length) setOpenFor(placeId);
|
||||
else toast.info(t('places.details.noPhotos'));
|
||||
};
|
||||
|
||||
const cached = readCachedEnrichment(selection, language);
|
||||
if (cached) {
|
||||
apply(cached.photos);
|
||||
return;
|
||||
}
|
||||
|
||||
// An answer for a place the user has left is kept for that place, but opens nothing and says nothing.
|
||||
const current = () => shownRef.current === placeId;
|
||||
setLoadingFor(placeId);
|
||||
placePictureRepo
|
||||
.enrichment({ ...selection, lang: language })
|
||||
.then((result) => {
|
||||
storeEnrichment(selection, language, result);
|
||||
if (current()) apply(result.photos);
|
||||
else setCandidatesFor({ placeId, list: result.photos });
|
||||
})
|
||||
.catch((err: unknown) => {
|
||||
if (current() && !place.image_url) toast.error(translateApiError(t, err, 'places.details.error'));
|
||||
})
|
||||
.finally(() => {
|
||||
setLoadingFor((now) => (now === placeId ? null : now));
|
||||
});
|
||||
}, [place.image_url, placeId, placesEnrichEnabled, selection, candidates, language, t, toast]);
|
||||
|
||||
return { photos, open, close, isOpen, loading, canOpen };
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
// FE-PLANNER-PLIMGFIELD-001 to FE-PLANNER-PLIMGFIELD-004: the editor's picture field the
|
||||
// desktop dialog and the phone sheet share: the place's attached images, the waiting
|
||||
// picture's preview, and which tile stands for the choice.
|
||||
import { renderHook } from '@testing-library/react';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { buildReservation, buildTripFile } from '../../../tests/helpers/factories';
|
||||
import { resetAllStores } from '../../../tests/helpers/store';
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import type { TripFile } from '../../types';
|
||||
import type { PendingPlaceImage } from './placeImageChoice';
|
||||
import { usePlaceImageField } from './usePlaceImageField';
|
||||
|
||||
const PHOTO = buildTripFile({ id: 1, place_id: 5, mime_type: 'image/jpeg', original_name: 'front.jpg' });
|
||||
const PDF = buildTripFile({ id: 2, place_id: 5, mime_type: 'application/pdf' });
|
||||
const ELSEWHERE = buildTripFile({ id: 3, place_id: 6, mime_type: 'image/png' });
|
||||
const ON_BOOKING = buildTripFile({
|
||||
id: 4,
|
||||
place_id: null,
|
||||
reservation_id: 90,
|
||||
mime_type: 'image/webp',
|
||||
} as Partial<TripFile>);
|
||||
|
||||
const handlers = () => ({ stageUpload: vi.fn(), stageAttached: vi.fn(), removeImage: vi.fn() });
|
||||
|
||||
beforeEach(() => {
|
||||
resetAllStores();
|
||||
useTripStore.setState({
|
||||
files: [PHOTO, PDF, ELSEWHERE, ON_BOOKING],
|
||||
reservations: [buildReservation({ id: 90, place_id: 5 })],
|
||||
} as never);
|
||||
});
|
||||
|
||||
describe('usePlaceImageField', () => {
|
||||
it("FE-PLANNER-PLIMGFIELD-001: offers the place's attached images, its booking's included, and its current picture", () => {
|
||||
const h = handlers();
|
||||
const { result } = renderHook(() =>
|
||||
usePlaceImageField({
|
||||
place: { id: 5, image_url: '/uploads/places/5.jpg' },
|
||||
imageUrl: undefined,
|
||||
pendingImage: null,
|
||||
canUploadFiles: true,
|
||||
...h,
|
||||
})
|
||||
);
|
||||
expect(result.current.own.attached).toEqual([PHOTO, ON_BOOKING]);
|
||||
expect(result.current.own.currentUrl).toBe('/uploads/places/5.jpg');
|
||||
expect(result.current.own.pendingPreview).toBeNull();
|
||||
expect(result.current.own.canUpload).toBe(true);
|
||||
expect(result.current.own.onUpload).toBe(h.stageUpload);
|
||||
expect(result.current.own.onPickAttached).toBe(h.stageAttached);
|
||||
expect(result.current.own.onRemove).toBe(h.removeImage);
|
||||
expect(result.current.chosen).toEqual({ kind: 'current' });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGFIELD-002: a new place has nothing attached and no picture, but can still be given one', () => {
|
||||
const { result } = renderHook(() =>
|
||||
usePlaceImageField({ place: null, imageUrl: undefined, pendingImage: null, canUploadFiles: true, ...handlers() })
|
||||
);
|
||||
expect(result.current.own.attached).toEqual([]);
|
||||
expect(result.current.own.currentUrl).toBeNull();
|
||||
expect(result.current.own.canUpload).toBe(true);
|
||||
expect(result.current.chosen).toEqual({ kind: 'none' });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGFIELD-003: a waiting upload shows as its preview and is the choice', () => {
|
||||
const pending: PendingPlaceImage = { kind: 'upload', file: new File(['x'], 'a.png'), preview: 'blob:a' };
|
||||
const { result } = renderHook(() =>
|
||||
usePlaceImageField({
|
||||
place: { id: 5, image_url: null },
|
||||
imageUrl: undefined,
|
||||
pendingImage: pending,
|
||||
canUploadFiles: false,
|
||||
...handlers(),
|
||||
})
|
||||
);
|
||||
expect(result.current.own.pendingPreview).toBe('blob:a');
|
||||
expect(result.current.own.canUpload).toBe(false);
|
||||
expect(result.current.chosen).toEqual({ kind: 'upload' });
|
||||
});
|
||||
|
||||
it('FE-PLANNER-PLIMGFIELD-004: a waiting attached image has no preview, and a dropped picture reads as none', () => {
|
||||
const attached = renderHook(() =>
|
||||
usePlaceImageField({
|
||||
place: { id: 5, image_url: '/uploads/places/5.jpg' },
|
||||
imageUrl: undefined,
|
||||
pendingImage: { kind: 'attached', file: PHOTO },
|
||||
canUploadFiles: true,
|
||||
...handlers(),
|
||||
})
|
||||
);
|
||||
expect(attached.result.current.own.pendingPreview).toBeNull();
|
||||
expect(attached.result.current.chosen).toEqual({ kind: 'attached', fileId: 1 });
|
||||
|
||||
const dropped = renderHook(() =>
|
||||
usePlaceImageField({
|
||||
place: { id: 5, image_url: '/uploads/places/5.jpg' },
|
||||
imageUrl: null,
|
||||
pendingImage: null,
|
||||
canUploadFiles: true,
|
||||
...handlers(),
|
||||
})
|
||||
);
|
||||
expect(dropped.result.current.chosen).toEqual({ kind: 'none' });
|
||||
});
|
||||
});
|
||||
@@ -1,57 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useShallow } from 'zustand/react/shallow';
|
||||
|
||||
import { useTripStore } from '../../store/tripStore';
|
||||
import type { Place, TripFile } from '../../types';
|
||||
import { filesForPlace } from '../../utils/placeFiles';
|
||||
import type { PlaceImageOwn } from './PlaceImagePicker';
|
||||
import { chosenImage, pickableImages, type ChosenImage, type PendingPlaceImage } from './placeImageChoice';
|
||||
|
||||
interface PlaceImageFieldOptions {
|
||||
/** The place being edited; null or undefined while a new one is made. */
|
||||
place: Pick<Place, 'id' | 'image_url'> | null | undefined;
|
||||
/** The form's image field: undefined keeps the picture, null drops it, a URL takes a source's photo. */
|
||||
imageUrl: string | null | undefined;
|
||||
pendingImage: PendingPlaceImage | null;
|
||||
canUploadFiles: boolean;
|
||||
stageUpload: (file: File) => void;
|
||||
stageAttached: (file: TripFile) => void;
|
||||
removeImage: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The editor's picture of a place, the same for the desktop dialog and the
|
||||
* phone sheet: the picture it has now, the images attached to it, the one
|
||||
* waiting for the save, and which tile of the picker stands for the choice.
|
||||
* A new place has no attached files yet; it can still be given a picture from
|
||||
* the device, uploaded once the save has made it.
|
||||
*/
|
||||
export function usePlaceImageField({
|
||||
place,
|
||||
imageUrl,
|
||||
pendingImage,
|
||||
canUploadFiles,
|
||||
stageUpload,
|
||||
stageAttached,
|
||||
removeImage,
|
||||
}: PlaceImageFieldOptions): { own: PlaceImageOwn; chosen: ChosenImage } {
|
||||
const { files, reservations } = useTripStore(useShallow((s) => ({ files: s.files, reservations: s.reservations })));
|
||||
const placeId = place?.id;
|
||||
const attached = useMemo(
|
||||
() => (placeId ? pickableImages(filesForPlace(files, placeId, reservations)) : []),
|
||||
[files, placeId, reservations]
|
||||
);
|
||||
const currentUrl = place?.image_url ?? null;
|
||||
return {
|
||||
own: {
|
||||
currentUrl,
|
||||
attached,
|
||||
pendingPreview: pendingImage?.kind === 'upload' ? pendingImage.preview : null,
|
||||
canUpload: canUploadFiles,
|
||||
onUpload: stageUpload,
|
||||
onPickAttached: stageAttached,
|
||||
onRemove: removeImage,
|
||||
},
|
||||
chosen: chosenImage(imageUrl, pendingImage, currentUrl),
|
||||
};
|
||||
}
|
||||
@@ -1,17 +1,35 @@
|
||||
import { MAX_WAY_PINS, pinWay, type PinnedWay, type WayPin } from '@trek/shared'
|
||||
import type { RoadLine } from '../Map/RouteCalculator'
|
||||
import { furthestFrom, sameRoad, type RoadLine } from '../Map/RouteCalculator'
|
||||
import { isStoredStop, type RouteSegment } from '@trek/shared/roadtrip'
|
||||
import type { RailLegRoute, RailLegRouter, RoadtripDay, RoadtripStop } from './useRoadtripRoutes'
|
||||
import type { OfferedRoute, RailDrive, ViaAnchor } from './useRouteAlternatives'
|
||||
|
||||
/** The most points one choice may pin to the road (see `MAX_WAY_PINS`). */
|
||||
export const MAX_PINS = MAX_WAY_PINS
|
||||
/**
|
||||
* The most points one choice may pin to the road.
|
||||
*
|
||||
* Every pin is one more request to a host that allows one a second, and one more handle on
|
||||
* the map somebody has to understand later. A way that three points cannot hold is not
|
||||
* held by the router at all: a ferry OSRM will not board, or a class the day is not
|
||||
* weighed against.
|
||||
*/
|
||||
export const MAX_PINS = 3
|
||||
|
||||
/** A point a choice is held by, in the order the chosen road drives through them. */
|
||||
export type Pin = WayPin
|
||||
export interface Pin {
|
||||
lat: number
|
||||
lng: number
|
||||
}
|
||||
|
||||
/** Whether the rail's router drives an offer, and the pins that make it do so. */
|
||||
export type PinProof = PinnedWay<RailLegRoute>
|
||||
export interface PinProof {
|
||||
/** True when the router drove the offer with `pins` in place. */
|
||||
held: boolean
|
||||
/** The pins that held it, in the order the offer drives through them. Empty otherwise. */
|
||||
pins: Pin[]
|
||||
/** True when the last answer came from a stand-in engine, which proves nothing either way. */
|
||||
fellBack: boolean
|
||||
/** The router's answer to the last attempt. */
|
||||
last: RailLegRoute
|
||||
}
|
||||
|
||||
/**
|
||||
* The fewest points that make the rail's own router drive `offer`, found by asking it.
|
||||
@@ -19,10 +37,19 @@ export type PinProof = PinnedWay<RailLegRoute>
|
||||
* A choice used to be stored as one via at the point where the offer strayed furthest,
|
||||
* and nobody asked whether the router then drove the offer. Often it did not. A point on
|
||||
* a ferry is pulled to the nearest pier by OSRM, which never boards one, so Amsterdam to
|
||||
* Newcastle "without the motorway" came back as a thousand kilometres through Calais. So
|
||||
* the check is the router itself, the way `pinWay` asks it; the spacing between the
|
||||
* requests is the router's own (`RailLegRouter.route`). The server asks the same way for
|
||||
* the ways of a hike's leg.
|
||||
* Newcastle "without the motorway" came back as a thousand kilometres through Calais. An
|
||||
* offer weighed away from motorways by the second engine is held by one point for a few
|
||||
* kilometres, and the motorway takes the rest. Either way the choice looked saved and the
|
||||
* drive did something else.
|
||||
*
|
||||
* So the check is the router itself. The router's own preference starts with no pin; any
|
||||
* other offer with the point furthest from the road being driven. After each answer that
|
||||
* is not the offer, the point of the offer furthest from that answer joins in, placed in
|
||||
* the order the offer drives through them, until the answer is the offer or `maxPins` is
|
||||
* reached. The spacing between the requests is the router's own (`RailLegRouter.route`).
|
||||
*
|
||||
* An answer from a stand-in engine proves nothing about the one that will draw the leg,
|
||||
* so it ends the check without a verdict on the road.
|
||||
*/
|
||||
export async function pinAlternative({
|
||||
offer,
|
||||
@@ -38,9 +65,23 @@ export async function pinAlternative({
|
||||
signal: AbortSignal
|
||||
maxPins?: number
|
||||
}): Promise<PinProof> {
|
||||
const proof = await pinWay({ offer, current, route: (pins) => route(pins, signal), signal, maxPins })
|
||||
if (!proof) throw new DOMException('The check was abandoned', 'AbortError')
|
||||
return proof
|
||||
const placed: { index: number; lat: number; lng: number }[] = []
|
||||
if (!offer.direct) {
|
||||
const far = furthestFrom(offer.coordinates, current?.coordinates ?? [])
|
||||
if (far) placed.push(far)
|
||||
}
|
||||
for (;;) {
|
||||
if (signal.aborted) throw new DOMException('The check was abandoned', 'AbortError')
|
||||
const last = await route(placed.map(({ lat, lng }) => ({ lat, lng })), signal)
|
||||
if (last.fellBack) return { held: false, pins: [], fellBack: true, last }
|
||||
if (sameRoad(last, offer)) return { held: true, pins: placed.map(({ lat, lng }) => ({ lat, lng })), fellBack: false, last }
|
||||
if (placed.length >= maxPins) return { held: false, pins: [], fellBack: false, last }
|
||||
const far = furthestFrom(offer.coordinates, last.coordinates)
|
||||
// The same point again would ask the same question and earn the same answer.
|
||||
if (!far || placed.some(p => p.index === far.index)) return { held: false, pins: [], fellBack: false, last }
|
||||
placed.push(far)
|
||||
placed.sort((a, b) => a.index - b.index)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useCallback, useMemo, useRef, useState } from 'react'
|
||||
import { sameRoad } from '@trek/shared'
|
||||
import { calculateAlternatives, type RouteAlternative, type RouteEngine } from '../Map/RouteCalculator'
|
||||
import { calculateAlternatives, sameRoad, type RouteAlternative, type RouteEngine } from '../Map/RouteCalculator'
|
||||
import type { RailLegRoute, RailLegRouter } from './useRoadtripRoutes'
|
||||
|
||||
/** One offered way of driving a leg, with what it means for this trip. */
|
||||
|
||||
@@ -91,7 +91,7 @@ function SheetView({
|
||||
height: `${sheet.height + box.bleed * 2}mm`,
|
||||
// The spread's own paper colour, carried out into the bleed. Without
|
||||
// it a coloured page would be cut with a white edge on three sides.
|
||||
background: (sheet.spread.backgroundPaint ? null : sheet.spread.background) ?? '#ffffff', // theme-lint-disable: paper, not app chrome
|
||||
background: sheet.spread.background ?? '#ffffff', // theme-lint-disable — paper, not app chrome
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
import { type BookLineElement, MAX_LINE_POINTS, bookLinePoints, bookLineWithPoints } from '@trek/shared';
|
||||
import { useRef } from 'react';
|
||||
|
||||
import { useStudioStore } from '../../store/studioStore';
|
||||
import { constrainPoint } from './lineSnap';
|
||||
|
||||
/**
|
||||
* The canvas handles of a selected line: one on each of its points, to drag
|
||||
* it where it should go, and a smaller one half way along each segment that
|
||||
* adds a point when it is pulled. Double-clicking a point between the ends
|
||||
* takes it out again.
|
||||
*
|
||||
* Drawn inside the selection box, which carries the line's turn, at the
|
||||
* points' own fractions of it, so they sit on the drawing at any zoom and any
|
||||
* angle. The drag itself is measured on the spread, where the pointer is, and
|
||||
* the frame is refitted around the moved points by `bookLineWithPoints`, the
|
||||
* same refit the book engine uses.
|
||||
*
|
||||
* While dragging, a segment within a couple of degrees of level or plumb is
|
||||
* made exactly level or plumb, and Shift holds it to 15 degree steps.
|
||||
*/
|
||||
|
||||
type Pt = [number, number];
|
||||
|
||||
interface Drag {
|
||||
index: number;
|
||||
start: Pt;
|
||||
pointerX: number;
|
||||
pointerY: number;
|
||||
points: Pt[];
|
||||
}
|
||||
|
||||
export function LineHandles({
|
||||
el,
|
||||
spreadIndex,
|
||||
scaled,
|
||||
t,
|
||||
}: {
|
||||
el: BookLineElement;
|
||||
spreadIndex: number;
|
||||
/** Screen pixels per millimetre at the current zoom. */
|
||||
scaled: number;
|
||||
t: (k: string) => string;
|
||||
}) {
|
||||
const update = useStudioStore((s) => s.updateElement);
|
||||
const beginGesture = useStudioStore((s) => s.beginGesture);
|
||||
const endGesture = useStudioStore((s) => s.endGesture);
|
||||
const commit = useStudioStore((s) => s.commit);
|
||||
const drag = useRef<Drag | null>(null);
|
||||
|
||||
const place = (points: Pt[]) => {
|
||||
const next = bookLineWithPoints(el, points);
|
||||
update(spreadIndex, el.id, { frame: next.frame, points: next.points });
|
||||
};
|
||||
|
||||
const grab = (e: React.PointerEvent, index: number, points: Pt[]) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
(e.target as Element).setPointerCapture?.(e.pointerId);
|
||||
beginGesture();
|
||||
drag.current = { index, start: points[index], pointerX: e.clientX, pointerY: e.clientY, points };
|
||||
};
|
||||
|
||||
const onMove = (e: React.PointerEvent) => {
|
||||
const d = drag.current;
|
||||
if (!d) return;
|
||||
e.stopPropagation();
|
||||
const raw: Pt = [d.start[0] + (e.clientX - d.pointerX) / scaled, d.start[1] + (e.clientY - d.pointerY) / scaled];
|
||||
const anchor = d.points[d.index === 0 ? 1 : d.index - 1];
|
||||
const points = d.points.slice();
|
||||
points[d.index] = constrainPoint(raw, anchor, e.shiftKey);
|
||||
place(points);
|
||||
};
|
||||
|
||||
const onUp = (e: React.PointerEvent) => {
|
||||
if (!drag.current) return;
|
||||
e.stopPropagation();
|
||||
drag.current = null;
|
||||
endGesture();
|
||||
};
|
||||
|
||||
/** Pull a new point out of the middle of segment `i`. */
|
||||
const insert = (e: React.PointerEvent, i: number) => {
|
||||
const world = bookLinePoints(el) as Pt[];
|
||||
const a = world[i];
|
||||
const b = world[i + 1];
|
||||
const points = [...world.slice(0, i + 1), [(a[0] + b[0]) / 2, (a[1] + b[1]) / 2] as Pt, ...world.slice(i + 1)];
|
||||
grab(e, i + 1, points);
|
||||
place(points);
|
||||
};
|
||||
|
||||
const remove = (i: number) => {
|
||||
const world = bookLinePoints(el) as Pt[];
|
||||
if (world.length <= 2) return;
|
||||
const next = bookLineWithPoints(
|
||||
el,
|
||||
world.filter((_, k) => k !== i)
|
||||
);
|
||||
commit((d) => ({
|
||||
...d,
|
||||
spreads: d.spreads.map((sp, k) =>
|
||||
k !== spreadIndex
|
||||
? sp
|
||||
: {
|
||||
...sp,
|
||||
elements: sp.elements.map((x) =>
|
||||
x.kind === 'line' && x.id === el.id ? { ...x, frame: next.frame, points: next.points } : x
|
||||
),
|
||||
}
|
||||
),
|
||||
}));
|
||||
};
|
||||
|
||||
// A point on the drawing, measured from the frame, not a side of the text.
|
||||
const pct = (p: { x: number; y: number }) => ({ left: `${p.x * 100}%`, top: `${p.y * 100}%` }); // rtl-lint-disable
|
||||
const canAdd = el.points.length < MAX_LINE_POINTS;
|
||||
|
||||
return (
|
||||
<>
|
||||
{canAdd &&
|
||||
el.points.slice(1).map((p, i) => {
|
||||
const a = el.points[i];
|
||||
return (
|
||||
<span
|
||||
key={`m${i}`}
|
||||
className="st-handle is-corner"
|
||||
style={{
|
||||
...pct({ x: (a.x + p.x) / 2, y: (a.y + p.y) / 2 }),
|
||||
cursor: 'copy',
|
||||
transform: 'scale(.7)',
|
||||
opacity: 0.7,
|
||||
}}
|
||||
title={t('journey.studio.addPoint')}
|
||||
onPointerDown={(e) => insert(e, i)}
|
||||
onPointerMove={onMove}
|
||||
onPointerUp={onUp}
|
||||
onPointerCancel={onUp}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
{el.points.map((p, i) => (
|
||||
<span
|
||||
key={`p${i}`}
|
||||
className="st-handle is-corner"
|
||||
style={{ ...pct(p), cursor: 'crosshair' }}
|
||||
title={i > 0 && i < el.points.length - 1 ? t('journey.studio.removePoint') : undefined}
|
||||
onPointerDown={(e) => grab(e, i, bookLinePoints(el) as Pt[])}
|
||||
onPointerMove={onMove}
|
||||
onPointerUp={onUp}
|
||||
onPointerCancel={onUp}
|
||||
onDoubleClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (i > 0 && i < el.points.length - 1) remove(i);
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,46 +0,0 @@
|
||||
import type { BookLineElement } from '@trek/shared';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { type LineGeometry, lineGeometry } from './lineRender';
|
||||
|
||||
/** The paths of a line's geometry in one colour: the body stroked, the heads and the ornament filled. */
|
||||
export function LinePaths({ g, color, width }: { g: LineGeometry; color: string; width: number }) {
|
||||
const stroke = { fill: 'none', stroke: color, strokeWidth: width, strokeLinejoin: 'round' as const };
|
||||
return (
|
||||
<>
|
||||
{g.body.map((d, i) => (
|
||||
<path key={`b${i}`} d={d} {...stroke} strokeLinecap={g.cap} strokeDasharray={g.dash} />
|
||||
))}
|
||||
{g.strokes.map((d, i) => (
|
||||
<path key={`s${i}`} d={d} {...stroke} strokeLinecap="round" />
|
||||
))}
|
||||
{g.fills.map((d, i) => (
|
||||
<path key={`f${i}`} d={d} fill={color} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A line element, drawn: its body stroked, its heads and ornament filled, all
|
||||
* in the millimetres of its own frame (one SVG unit is one millimetre, as for
|
||||
* the shapes). Overflow stays visible so a head on a thin frame is not cut.
|
||||
*/
|
||||
export function LineView({ el, frameStyle }: { el: BookLineElement; frameStyle: CSSProperties }) {
|
||||
const { w, h } = el.frame;
|
||||
const g = useMemo(() => lineGeometry(el, w, h, el.id), [el, w, h]);
|
||||
return (
|
||||
<div style={frameStyle}>
|
||||
<svg
|
||||
width={`${w}mm`}
|
||||
height={`${h}mm`}
|
||||
viewBox={`0 0 ${w} ${h}`}
|
||||
style={{ display: 'block', overflow: 'visible' }}
|
||||
aria-hidden
|
||||
>
|
||||
<LinePaths g={g} color={el.stroke} width={el.strokeWidth} />
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { BookPageSetup, BookSpread } from '@trek/shared'
|
||||
import { fontStack, nearestWeight } from './bookFonts'
|
||||
import { fontStack } from './bookFonts'
|
||||
import { folioInk } from './folioColour'
|
||||
import { isNumbered } from './bookSheets'
|
||||
|
||||
@@ -94,7 +94,7 @@ export function PageNumbers({
|
||||
textAlign: at.align,
|
||||
fontFamily: fontStack(cfg.font),
|
||||
fontSize: `${size}pt`,
|
||||
fontWeight: nearestWeight(cfg.font, 500),
|
||||
fontWeight: 500,
|
||||
letterSpacing: '0.08em',
|
||||
lineHeight: 1,
|
||||
color: ink.color,
|
||||
|
||||
@@ -1,433 +0,0 @@
|
||||
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 { photoClip } from './shapeOutline';
|
||||
import { HOLED_SHAPES, SHAPE_PATHS, scalePath } 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;
|
||||
// The cut as a unit path: the mask, its cut edge, or a cut edge on the rectangle (shapeOutline.ts).
|
||||
const clip = photoClip(el, el.frame.w - pad * 2, el.frame.h - pad - (bottom || pad));
|
||||
const clipped = clip !== 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} />
|
||||
)}
|
||||
|
||||
{(clip || filterId) && (
|
||||
<svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden>
|
||||
<defs>
|
||||
{clip && (
|
||||
<clipPath id={clipId} clipPathUnits="objectBoundingBox">
|
||||
<path d={clip} />
|
||||
</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,21 +1,13 @@
|
||||
import type { CSSProperties } from 'react'
|
||||
import type {
|
||||
BookElement, BookIconElement, BookPageSetup, BookShapeElement, BookSpread,
|
||||
BookElement, BookIconElement, BookPageSetup, BookPhotoElement, BookShapeElement, BookSpread,
|
||||
} from '@trek/shared'
|
||||
import { fontStack, nearestWeight } from './bookFonts'
|
||||
import { photoSrc } from './bookRender'
|
||||
import { fontStack } from './bookFonts'
|
||||
import { iconComponent } from './iconLibrary'
|
||||
import { PhotoView } from './PhotoView'
|
||||
import { HOLED_SHAPES } from './shapes'
|
||||
import { hasEdge, shapeOutline } from './shapeOutline'
|
||||
import { LineView } from './LineView'
|
||||
import { HOLED_SHAPES, SHAPE_PATHS, scalePath, unitPath } from './shapes'
|
||||
import { TravelElementView } from './TravelElements'
|
||||
import { TextEffectsView } from './TextEffectsView'
|
||||
import { hasTextEffects } from './textEffects'
|
||||
import { PageNumbers } from './PageNumbers'
|
||||
import { PaintedShapeView } from './paint/PaintedShape'
|
||||
import { SpreadPaint } from './paint/paintRender'
|
||||
import { usePaintId } from './paint/usePaintId'
|
||||
import { StickerView } from './StickerView'
|
||||
|
||||
/**
|
||||
* One spread, drawn.
|
||||
@@ -42,12 +34,42 @@ 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.
|
||||
*
|
||||
@@ -64,11 +86,10 @@ function hexToRgba(hex: string, alpha: number): string {
|
||||
*/
|
||||
function ShapeView({ el }: { el: BookShapeElement }) {
|
||||
const fill = el.fill ?? 'transparent'
|
||||
// Per mounted copy: page mode draws a spread twice (paint/paintRender.tsx).
|
||||
const gradientId = usePaintId(`g-${el.id}`)
|
||||
const gradientId = `g-${el.id}`
|
||||
const gradient = el.gradient !== 'none' && el.fill
|
||||
|
||||
if ((el.shape === 'rect' || el.shape === 'ellipse') && !hasEdge(el, el.shape)) {
|
||||
if (el.shape === 'rect' || el.shape === 'ellipse') {
|
||||
const background = !gradient
|
||||
? fill
|
||||
: `linear-gradient(${el.gradient === 'up' ? 'to top' : 'to bottom'},`
|
||||
@@ -91,7 +112,7 @@ function ShapeView({ el }: { el: BookShapeElement }) {
|
||||
const sw = el.stroke ? el.strokeWidth : 0
|
||||
const w = Math.max(0.01, el.frame.w - sw)
|
||||
const h = Math.max(0.01, el.frame.h - sw)
|
||||
const d = shapeOutline(el, w, h)
|
||||
const d = scalePath(SHAPE_PATHS[el.shape], w, h)
|
||||
|
||||
// Proportional to the stroke, so a dashed outline keeps its rhythm whether it
|
||||
// is a hairline on a caption rule or a 2mm band around a cover panel.
|
||||
@@ -132,6 +153,206 @@ 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 = `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.
|
||||
*
|
||||
@@ -168,20 +389,16 @@ 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="" frameStyle={frameStyle(el)} />
|
||||
return <PhotoView el={{ ...el, photoId: null }} big={big} print={false} dropLabel="" />
|
||||
}
|
||||
return <PhotoView el={el} big={big} print={print} dropLabel={dropLabel} frameStyle={frameStyle(el)} />
|
||||
return <PhotoView el={el} big={big} print={print} dropLabel={dropLabel} />
|
||||
}
|
||||
|
||||
if (el.kind === 'shape') {
|
||||
return el.paint ? <PaintedShapeView el={el} paint={el.paint} frameStyle={frameStyle(el)} /> : <ShapeView el={el} />
|
||||
}
|
||||
if (el.kind === 'shape') return <ShapeView el={el} />
|
||||
|
||||
// Above the catch-all below, which routes everything that is not text into
|
||||
// the travel elements and draws null for anything they do not know.
|
||||
if (el.kind === 'icon') return <IconView el={el} />
|
||||
if (el.kind === 'sticker') return <StickerView el={el} frameStyle={frameStyle(el)} />
|
||||
if (el.kind === 'line') return <LineView el={el} frameStyle={frameStyle(el)} />
|
||||
|
||||
if (el.kind !== 'text') {
|
||||
// map, stats, countries, badge — the elements drawn from the journey's own
|
||||
@@ -191,9 +408,6 @@ export function ElementView({
|
||||
return <TravelElementView el={el} frameStyle={frameStyle(el)} big={big} />
|
||||
}
|
||||
|
||||
// Outlines, shadows, bands, curves and fills draw in their own file; a plain text stays here, as it always drew.
|
||||
if (hasTextEffects(el)) return <TextEffectsView el={el} frameStyle={frameStyle(el)} big={big} />
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@@ -203,7 +417,7 @@ export function ElementView({
|
||||
// the conversion exactly.
|
||||
fontSize: `${el.size}pt`,
|
||||
fontFamily: fontStack(el.font),
|
||||
fontWeight: nearestWeight(el.font, el.weight),
|
||||
fontWeight: el.weight,
|
||||
fontStyle: el.italic ? 'italic' : undefined,
|
||||
lineHeight: el.leading,
|
||||
letterSpacing: `${el.tracking}em`,
|
||||
@@ -260,8 +474,7 @@ export function SpreadView({
|
||||
style={{
|
||||
position: 'absolute',
|
||||
inset: 0,
|
||||
// Under a paint the sheet is the paper, which a see-through paint lets show.
|
||||
background: (spread.backgroundPaint ? null : spread.background) ?? '#ffffff', // theme-lint-disable: paper, not app chrome
|
||||
background: spread.background ?? '#ffffff', // theme-lint-disable — paper, not app chrome
|
||||
/*
|
||||
* On screen the page ends at the trim, so anything past it is clipped.
|
||||
* In print it must not be: the bleed is the part that runs off the edge
|
||||
@@ -272,12 +485,7 @@ export function SpreadView({
|
||||
overflow: print ? 'visible' : 'hidden',
|
||||
}}
|
||||
>
|
||||
{spread.backgroundPaint && (
|
||||
<SpreadPaint paint={spread.backgroundPaint} width={w} height={page.pageHeight} bleed={page.bleed} idPrefix={spread.id} />
|
||||
)}
|
||||
|
||||
{/* A hidden layer stays in the layers panel and off the page, here and in print. */}
|
||||
{spread.elements.filter(el => !el.hidden).map(el => (
|
||||
{spread.elements.map(el => (
|
||||
<ElementView
|
||||
key={el.id}
|
||||
el={el}
|
||||
|
||||
@@ -1,72 +0,0 @@
|
||||
import { bookStickerLayerPaint, type BookStickerElement } from '@trek/shared';
|
||||
import { bookSticker, type BookStickerDef } from '@trek/shared/stickers';
|
||||
import type { CSSProperties } from 'react';
|
||||
|
||||
/**
|
||||
* A sticker, drawn: its layers as one inline SVG in the sticker's own box,
|
||||
* scaled to the frame by the viewBox, so every layer stays a vector path in
|
||||
* the print and in the page image the assistant reads.
|
||||
*
|
||||
* The drawing keeps its proportions inside whatever frame it is given (meet),
|
||||
* the way an icon does: a lemon stretched to twice its width stops being a
|
||||
* lemon. A flip mirrors the drawing inside the frame, so the frame, its
|
||||
* handles and its rotation stay where they were.
|
||||
*
|
||||
* A sticker this build's library does not hold draws nothing. Only a newer
|
||||
* book can carry one, and a book that is newer than this reader is opened
|
||||
* read-only (book-schema-rev.ts), so nothing is lost by not drawing it.
|
||||
*/
|
||||
|
||||
/** The drawing alone, for the page, the panel's tiles and the inspector. */
|
||||
export function StickerArt({
|
||||
def,
|
||||
colors = [],
|
||||
flipX = false,
|
||||
}: {
|
||||
def: BookStickerDef;
|
||||
colors?: readonly string[];
|
||||
flipX?: boolean;
|
||||
}) {
|
||||
const [w, h] = def.box;
|
||||
return (
|
||||
<svg
|
||||
width="100%"
|
||||
height="100%"
|
||||
viewBox={`0 0 ${w} ${h}`}
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
aria-hidden
|
||||
style={{ display: 'block', overflow: 'visible', transform: flipX ? 'scaleX(-1)' : undefined }}
|
||||
>
|
||||
{def.layers.map((layer, i) => {
|
||||
const { color, opacity } = bookStickerLayerPaint(layer, def.slots, colors);
|
||||
const alpha = opacity < 1 ? opacity : undefined;
|
||||
return layer.w ? (
|
||||
<path
|
||||
// A sticker's layers never reorder: their place in the list is their identity.
|
||||
key={i}
|
||||
d={layer.d}
|
||||
fill="none"
|
||||
stroke={color}
|
||||
strokeOpacity={alpha}
|
||||
strokeWidth={layer.w}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
) : (
|
||||
<path key={i} d={layer.d} fill={color} fillOpacity={alpha} fillRule={layer.eo ? 'evenodd' : undefined} />
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
/** A sticker element on the page, in its frame. */
|
||||
export function StickerView({ el, frameStyle }: { el: BookStickerElement; frameStyle: CSSProperties }) {
|
||||
const def = bookSticker(el.stickerId);
|
||||
if (!def) return null;
|
||||
return (
|
||||
<div style={frameStyle}>
|
||||
<StickerArt def={def} colors={el.colors} flipX={el.flipX} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,235 +0,0 @@
|
||||
import type { BookAlignEdge, BookAlignTo, BookSpread } from '@trek/shared';
|
||||
import { distributableCount, isWholeGroup } from '@trek/shared';
|
||||
import {
|
||||
AlignCenterHorizontal,
|
||||
AlignCenterVertical,
|
||||
AlignEndHorizontal,
|
||||
AlignEndVertical,
|
||||
AlignHorizontalDistributeCenter,
|
||||
AlignStartHorizontal,
|
||||
AlignStartVertical,
|
||||
AlignVerticalDistributeCenter,
|
||||
ArrowDown,
|
||||
ArrowUp,
|
||||
ChevronsDown,
|
||||
ChevronsUp,
|
||||
Group,
|
||||
Layers,
|
||||
Paintbrush,
|
||||
Pipette,
|
||||
Ungroup,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
import { useStudioStore } from '../../store/studioStore';
|
||||
import '../../styles/studio-panels.css';
|
||||
import { Tooltip } from '../shared/Tooltip';
|
||||
import { Choice, Line, Section } from './StudioControls';
|
||||
import { useStudioShortcut } from './studioShortcut';
|
||||
|
||||
/**
|
||||
* Arrange: where the selection sits among the other things on the page.
|
||||
*
|
||||
* Lining it up and spacing it out, what it lines up against, what lies in
|
||||
* front of what, grouping, and the style clipboard, in one group at the foot
|
||||
* of the inspector. These were two groups, Align and Arrange, one under the
|
||||
* other and both about the selection's place among its neighbours, so the
|
||||
* stacking buttons were a fold away from the alignment they are used with.
|
||||
*
|
||||
* Every line puts its row under its label, across the whole width of the
|
||||
* panel: the six edges and the two spacings are eight buttons, more than fit
|
||||
* beside a label. Each row is two sets, the edges and the spacings, the stack
|
||||
* and the grouping, and a set that no longer fits moves to the next line
|
||||
* whole, so a narrow panel shows two even rows rather than a ragged one.
|
||||
*
|
||||
* The align row lines a multi-selection up within its own box by default, and
|
||||
* a single element (or one whole group) against its page, since there is
|
||||
* nothing else for it to line up with. Groups move as one box throughout
|
||||
* (shared/src/book/book-arrange.ts). The Layers button opens the rail's
|
||||
* Layers panel, the whole stack of the page beside the selection. Every press
|
||||
* is one undo step.
|
||||
*/
|
||||
|
||||
const ALIGN: { edge: BookAlignEdge; icon: LucideIcon; labelKey: string }[] = [
|
||||
{ edge: 'left', icon: AlignStartVertical, labelKey: 'journey.studio.layers.alignLeft' },
|
||||
{ edge: 'center', icon: AlignCenterVertical, labelKey: 'journey.studio.layers.alignCenter' },
|
||||
{ edge: 'right', icon: AlignEndVertical, labelKey: 'journey.studio.layers.alignRight' },
|
||||
{ edge: 'top', icon: AlignStartHorizontal, labelKey: 'journey.studio.layers.alignTop' },
|
||||
{ edge: 'middle', icon: AlignCenterHorizontal, labelKey: 'journey.studio.layers.alignMiddle' },
|
||||
{ edge: 'bottom', icon: AlignEndHorizontal, labelKey: 'journey.studio.layers.alignBottom' },
|
||||
];
|
||||
|
||||
const STACK: { to: 'front' | 'up' | 'down' | 'back'; icon: LucideIcon; labelKey: string }[] = [
|
||||
{ to: 'front', icon: ChevronsUp, labelKey: 'journey.studio.toFront' },
|
||||
{ to: 'up', icon: ArrowUp, labelKey: 'journey.studio.forward' },
|
||||
{ to: 'down', icon: ArrowDown, labelKey: 'journey.studio.backward' },
|
||||
{ to: 'back', icon: ChevronsDown, labelKey: 'journey.studio.toBack' },
|
||||
];
|
||||
|
||||
/** How many things move as one in a selection: a group counts once. */
|
||||
function unitCount(spread: BookSpread, ids: string[]): number {
|
||||
return distributableCount(
|
||||
spread,
|
||||
spread.elements.filter((e) => ids.includes(e.id))
|
||||
);
|
||||
}
|
||||
|
||||
function IconButton({
|
||||
label,
|
||||
icon: Icon,
|
||||
onClick,
|
||||
disabled,
|
||||
shortcut,
|
||||
}: {
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
shortcut?: readonly string[];
|
||||
}) {
|
||||
return (
|
||||
<Tooltip label={label} shortcut={shortcut}>
|
||||
<button type="button" className="st-chip is-icon" onClick={onClick} disabled={disabled} aria-label={label}>
|
||||
<Icon size={14} />
|
||||
</button>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export function StudioArrangeSection({
|
||||
spreadIndex,
|
||||
t,
|
||||
onShowLayers,
|
||||
}: {
|
||||
spreadIndex: number;
|
||||
t: (k: string) => string;
|
||||
/** Opens the Layers panel in the rail; without it the button is left out. */
|
||||
onShowLayers?: () => void;
|
||||
}) {
|
||||
const spread = useStudioStore((s) => s.doc?.spreads[spreadIndex]);
|
||||
const selection = useStudioStore((s) => s.selection);
|
||||
const hasStyle = useStudioStore((s) => s.styleClip !== null);
|
||||
const align = useStudioStore((s) => s.align);
|
||||
const distribute = useStudioStore((s) => s.distribute);
|
||||
const raise = useStudioStore((s) => s.raise);
|
||||
const group = useStudioStore((s) => s.group);
|
||||
const ungroup = useStudioStore((s) => s.ungroup);
|
||||
const copyStyle = useStudioStore((s) => s.copyStyle);
|
||||
const pasteStyle = useStudioStore((s) => s.pasteStyle);
|
||||
const keys = useStudioShortcut();
|
||||
const [chosenTo, setChosenTo] = useState<BookAlignTo | null>(null);
|
||||
|
||||
if (!spread || !selection.length) return null;
|
||||
const sel = spread.elements.filter((e) => selection.includes(e.id));
|
||||
const movable = sel.filter((e) => !e.locked).map((e) => e.id);
|
||||
const units = unitCount(spread, movable);
|
||||
// One thing has nothing to line up with but its page.
|
||||
const to: BookAlignTo = units < 2 ? (chosenTo === 'safe' ? 'safe' : 'page') : (chosenTo ?? 'selection');
|
||||
const grouped = sel.some((e) => e.group);
|
||||
const canGroup = movable.length >= 2 && !isWholeGroup(spread, movable);
|
||||
const asGroup = selection.length > 1 && isWholeGroup(spread, selection);
|
||||
|
||||
return (
|
||||
// Open for a multi-selection, where lining up is what comes next; folded for one element.
|
||||
<Section key={units > 1 ? 'many' : 'one'} label={t('journey.studio.arrange')} defaultOpen={units > 1}>
|
||||
<div className="st-arrange">
|
||||
<Line label={t('journey.studio.layers.align')} wide>
|
||||
<div className="st-row st-arrange-row">
|
||||
<span className="st-arrange-set">
|
||||
{ALIGN.map((a) => (
|
||||
<IconButton
|
||||
key={a.edge}
|
||||
label={t(a.labelKey)}
|
||||
icon={a.icon}
|
||||
disabled={!movable.length}
|
||||
onClick={() => align(spreadIndex, a.edge, to)}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
<span className="st-arrange-set">
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.distributeH')}
|
||||
icon={AlignHorizontalDistributeCenter}
|
||||
disabled={units < 3}
|
||||
onClick={() => distribute(spreadIndex, 'horizontal')}
|
||||
/>
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.distributeV')}
|
||||
icon={AlignVerticalDistributeCenter}
|
||||
disabled={units < 3}
|
||||
onClick={() => distribute(spreadIndex, 'vertical')}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
<Line label={t('journey.studio.layers.alignTo')} wide>
|
||||
<Choice<BookAlignTo>
|
||||
value={to}
|
||||
ariaLabel={t('journey.studio.layers.alignTo')}
|
||||
options={[
|
||||
{ value: 'selection' as const, label: t('journey.studio.layers.toSelection'), disabled: units < 2 },
|
||||
{ value: 'page' as const, label: t('journey.studio.layers.toPage') },
|
||||
{ value: 'safe' as const, label: t('journey.studio.layers.toSafe') },
|
||||
]}
|
||||
onPick={setChosenTo}
|
||||
/>
|
||||
</Line>
|
||||
<Line label={t('journey.studio.order')} wide>
|
||||
<div className="st-row st-arrange-row">
|
||||
<span className="st-arrange-set">
|
||||
{STACK.map((s) => (
|
||||
<IconButton
|
||||
key={s.to}
|
||||
label={t(s.labelKey)}
|
||||
icon={s.icon}
|
||||
onClick={() => raise(spreadIndex, selection, s.to)}
|
||||
/>
|
||||
))}
|
||||
</span>
|
||||
<span className="st-arrange-set">
|
||||
{(canGroup || !grouped) && (
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.groupAction')}
|
||||
icon={Group}
|
||||
disabled={!canGroup}
|
||||
shortcut={keys('G')}
|
||||
onClick={() => group(spreadIndex)}
|
||||
/>
|
||||
)}
|
||||
{grouped && (
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.ungroup')}
|
||||
icon={Ungroup}
|
||||
shortcut={keys('⇧', 'G')}
|
||||
onClick={() => ungroup(spreadIndex)}
|
||||
/>
|
||||
)}
|
||||
{onShowLayers && (
|
||||
<IconButton label={t('journey.studio.showLayers')} icon={Layers} onClick={onShowLayers} />
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</Line>
|
||||
<Line label={t('journey.studio.style')} wide>
|
||||
<div className="st-row">
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.copyStyle')}
|
||||
icon={Pipette}
|
||||
shortcut={keys('alt', 'C')}
|
||||
onClick={() => copyStyle(spreadIndex)}
|
||||
/>
|
||||
<IconButton
|
||||
label={t('journey.studio.layers.pasteStyle')}
|
||||
icon={Paintbrush}
|
||||
disabled={!hasStyle || !movable.length}
|
||||
shortcut={keys('alt', 'V')}
|
||||
onClick={() => pasteStyle(spreadIndex)}
|
||||
/>
|
||||
</div>
|
||||
</Line>
|
||||
</div>
|
||||
{asGroup && <p className="st-hint st-arrange-hint">{t('journey.studio.layers.groupHint')}</p>}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import { bookElementId, spreadPaint, withSpreadPaintByHand, type BookPageSetup } from '@trek/shared';
|
||||
import { Check, CopyCheck, ImageOff } from 'lucide-react';
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { useStudioStore } from '../../store/studioStore';
|
||||
import { photoSrc } from './bookRender';
|
||||
import {
|
||||
backgroundCandidates,
|
||||
backgroundPhotoOf,
|
||||
backgroundToAll,
|
||||
withBackgroundPhoto,
|
||||
withoutBackgroundPhoto,
|
||||
} from './paint/backgroundPhoto';
|
||||
import { spreadPhotoIds } from './paint/paletteModel';
|
||||
import { usePaintChannel } from './paint/usePaintChannel';
|
||||
import { Section } from './StudioControls';
|
||||
import { StudioPaintPicker } from './StudioPaintPicker';
|
||||
import type { JourneySource, StudioT } from './StudioSidebar';
|
||||
|
||||
/**
|
||||
* The page's background, in the inspector when nothing is selected.
|
||||
*
|
||||
* Until now only the assistant could set it; a person had to lay a shape
|
||||
* across the page and remember to send it to the back. Three things, in the
|
||||
* order people reach for them: the paint itself, the same background for
|
||||
* every page, and a photograph under the whole page.
|
||||
*/
|
||||
export function StudioBackgroundSection({
|
||||
spreadIndex,
|
||||
page,
|
||||
source,
|
||||
t,
|
||||
}: {
|
||||
spreadIndex: number;
|
||||
page: BookPageSetup;
|
||||
source: JourneySource;
|
||||
t: StudioT;
|
||||
}) {
|
||||
const spread = useStudioStore((s) => s.doc?.spreads[spreadIndex]);
|
||||
const commit = useStudioStore((s) => s.commit);
|
||||
// A colour picked here is the person's, so the page stops following the theme's paper (as the assistant's does).
|
||||
const channel = usePaintChannel((paint) => (doc) => ({
|
||||
...doc,
|
||||
spreads: doc.spreads.map((sp, i) => (i === spreadIndex ? withSpreadPaintByHand(sp, paint) : sp)),
|
||||
}));
|
||||
|
||||
// "Applied" stands in the button for a moment, so a press that changed pages out of sight is seen to have worked.
|
||||
const [applied, setApplied] = useState(false);
|
||||
useEffect(() => {
|
||||
if (!applied) return;
|
||||
const timer = window.setTimeout(() => setApplied(false), 1600);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [applied]);
|
||||
|
||||
const current = backgroundPhotoOf(spread, page);
|
||||
const candidates = useMemo(() => {
|
||||
if (!spread) return [];
|
||||
const entry = source.entries.find((e) => e.id === spread.entryId);
|
||||
return backgroundCandidates(
|
||||
spreadPhotoIds(spread),
|
||||
entry?.photoIds ?? [],
|
||||
source.photos.map((p) => p.photoId)
|
||||
);
|
||||
}, [spread, source]);
|
||||
|
||||
if (!spread) return null;
|
||||
|
||||
const setPhoto = (photoId: number) =>
|
||||
commit((doc) => ({
|
||||
...doc,
|
||||
spreads: doc.spreads.map((sp, i) => {
|
||||
if (i !== spreadIndex) return sp;
|
||||
return withBackgroundPhoto(sp, page, photoId, () => bookElementId('p')) ?? sp;
|
||||
}),
|
||||
}));
|
||||
const clearPhoto = () =>
|
||||
commit((doc) => ({
|
||||
...doc,
|
||||
spreads: doc.spreads.map((sp, i) => (i === spreadIndex ? withoutBackgroundPhoto(sp, page) : sp)),
|
||||
}));
|
||||
const applyToAll = () => {
|
||||
commit((doc) => backgroundToAll(doc, spreadIndex));
|
||||
setApplied(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<Section label={t('journey.studio.paint.background')}>
|
||||
<StudioPaintPicker
|
||||
value={spreadPaint(spread)}
|
||||
channel={channel}
|
||||
t={t}
|
||||
noneLabel={t('journey.studio.paint.paper')}
|
||||
/>
|
||||
|
||||
<button type="button" className={`st-chip st-paint-apply ${applied ? 'is-done' : ''}`} onClick={applyToAll}>
|
||||
{applied ? <Check size={13} strokeWidth={2.4} /> : <CopyCheck size={13} />}
|
||||
{applied ? t('journey.studio.paint.appliedAll') : t('journey.studio.paint.applyAll')}
|
||||
</button>
|
||||
|
||||
<div className="st-paint-field">
|
||||
<span className="st-paint-caption">{t('journey.studio.paint.photoBackground')}</span>
|
||||
{candidates.length ? (
|
||||
<>
|
||||
<div className="st-bgphoto-grid">
|
||||
{candidates.map((id) => (
|
||||
<button
|
||||
type="button"
|
||||
key={id}
|
||||
className={`st-bgphoto ${current?.photoId === id ? 'is-on' : ''}`}
|
||||
aria-pressed={current?.photoId === id}
|
||||
aria-label={t('journey.studio.paint.photoBackground')}
|
||||
onClick={() => (current?.photoId === id ? clearPhoto() : setPhoto(id))}
|
||||
>
|
||||
<img src={photoSrc(id, false)} alt="" loading="lazy" draggable={false} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<p className="st-hint st-paint-hint">{t('journey.studio.paint.photoBackgroundHint')}</p>
|
||||
{current && (
|
||||
<button type="button" className="st-chip is-danger st-paint-apply" onClick={clearPhoto}>
|
||||
<ImageOff size={13} />
|
||||
{t('journey.studio.paint.removePhotoBackground')}
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<p className="st-hint st-paint-hint">{t('journey.studio.paint.noPhotos')}</p>
|
||||
)}
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,332 +0,0 @@
|
||||
import type { BookDocument, BookElement } from '@trek/shared';
|
||||
import { bookPageSetupSchema, bookShapeElementSchema, bookTextElementSchema } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it, vi } from 'vitest';
|
||||
|
||||
import { fireEvent, render } from '../../../tests/helpers/render';
|
||||
import { useStudioStore } from '../../store/studioStore';
|
||||
import { AngleDial } from './paint/AngleDial';
|
||||
import { GradientStopBar } from './paint/GradientStopBar';
|
||||
import { StudioCanvas } from './StudioCanvas';
|
||||
|
||||
/**
|
||||
* The sheet with groups and multi-selections (journey-studio WP6): a click
|
||||
* picks a group, a double-click steps into it, a marquee picks what it
|
||||
* touches, one box resizes a multi-selection, and the keyboard nudges,
|
||||
* groups, duplicates and steps back out.
|
||||
*/
|
||||
|
||||
const page = bookPageSetupSchema.parse({ preset: 'square-210', pageWidth: 210, pageHeight: 210, bleed: 3, safe: 5 });
|
||||
const PX = 96 / 25.4;
|
||||
|
||||
/** The value, or a failed test when it is missing. */
|
||||
function must<T>(value: T | null | undefined): T {
|
||||
if (value === null || value === undefined) throw new Error('expected a value');
|
||||
return value;
|
||||
}
|
||||
|
||||
const shape = (id: string, x: number, y: number, over: Partial<BookElement> = {}): BookElement =>
|
||||
bookShapeElementSchema.parse({
|
||||
id,
|
||||
kind: 'shape',
|
||||
frame: { x, y, w: 20, h: 20 },
|
||||
shape: 'rect',
|
||||
...over,
|
||||
}) as BookElement;
|
||||
|
||||
function load(elements: BookElement[]) {
|
||||
useStudioStore.getState().load({
|
||||
version: 1,
|
||||
title: 'T',
|
||||
page,
|
||||
spreads: [{ id: 'sp1', role: 'inner', background: null, elements, parked: [], entryId: null }],
|
||||
} as BookDocument);
|
||||
}
|
||||
|
||||
function draw() {
|
||||
const spread = must(useStudioStore.getState().doc).spreads[0] ?? null;
|
||||
const view = render(
|
||||
<StudioCanvas spread={spread} spreadIndex={0} page={page} zoom={1} pxPerMm={PX} bookView={false} dropLabel="" />
|
||||
);
|
||||
const stage = view.container.querySelector('.st-stage') as HTMLElement;
|
||||
const sheet = view.container.querySelector('.st-sheet') as HTMLElement;
|
||||
// The hit targets are the last children of the sheet, one per element shown, in paint order.
|
||||
const targets = () => Array.from(sheet.children).slice(-elements().filter((e) => !e.hidden).length) as HTMLElement[];
|
||||
return { ...view, stage, sheet, targets };
|
||||
}
|
||||
|
||||
const store = () => useStudioStore.getState();
|
||||
const elements = () => must(must(store().doc).spreads[0]).elements;
|
||||
const el = (id: string) => must(elements().find((e) => e.id === id));
|
||||
|
||||
const grouped = () => [shape('a', 10, 10), shape('g1', 60, 10, { group: 'g' }), shape('g2', 90, 40, { group: 'g' })];
|
||||
|
||||
beforeEach(() => {
|
||||
load([]);
|
||||
useStudioStore.setState({ enteredGroup: null, styleClip: null });
|
||||
});
|
||||
|
||||
describe('groups on the sheet', () => {
|
||||
it('a click on a member picks the whole group, drawn as one dashed box with handles', () => {
|
||||
load(grouped());
|
||||
const { container, stage, targets } = draw();
|
||||
fireEvent.pointerDown(must(targets()[1]));
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual(['g1', 'g2']);
|
||||
const box = container.querySelector('.st-select-box') as HTMLElement;
|
||||
expect(box.className).toContain('is-group');
|
||||
expect(box.querySelectorAll('.st-handle')).toHaveLength(8);
|
||||
expect(container.querySelectorAll('.st-select.is-member')).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('a double-click steps into the group and picks the member alone', () => {
|
||||
load(grouped());
|
||||
const { container, stage, targets } = draw();
|
||||
fireEvent.pointerDown(must(targets()[2]));
|
||||
fireEvent.pointerUp(stage);
|
||||
fireEvent.doubleClick(must(targets()[2]));
|
||||
expect(store().selection).toEqual(['g2']);
|
||||
expect(store().enteredGroup).toBe('g');
|
||||
expect(container.querySelector('.st-select.is-inside')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('a second double-click on a text inside its group edits it', () => {
|
||||
const words = bookTextElementSchema.parse({
|
||||
id: 't',
|
||||
kind: 'text',
|
||||
frame: { x: 10, y: 10, w: 60, h: 20 },
|
||||
text: 'Hi',
|
||||
group: 'g',
|
||||
}) as BookElement;
|
||||
load([words, shape('s', 100, 100, { group: 'g' })]);
|
||||
const { container, targets } = draw();
|
||||
fireEvent.doubleClick(must(targets()[0]));
|
||||
expect(container.querySelector('.st-inline-edit')).toBeNull();
|
||||
fireEvent.doubleClick(must(targets()[0]));
|
||||
expect(container.querySelector('.st-inline-edit')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('draws no target for a hidden element', () => {
|
||||
load([shape('a', 10, 10), shape('h', 50, 50, { hidden: true })]);
|
||||
const { sheet } = draw();
|
||||
const hits = Array.from(sheet.children).filter((c) => (c as HTMLElement).style.cursor === 'move');
|
||||
expect(hits).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('pressing on a selection', () => {
|
||||
it('drags all of a multi-selection, and a click without a drag narrows it to the one pressed', () => {
|
||||
load([shape('a', 10, 10), shape('b', 60, 10)]);
|
||||
store().select(['a', 'b']);
|
||||
const { stage, targets } = draw();
|
||||
fireEvent.pointerDown(must(targets()[0]), { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerMove(stage, { clientX: 10 * PX, clientY: 0 });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual(['a', 'b']);
|
||||
expect(el('a').frame.x).toBeCloseTo(20);
|
||||
expect(el('b').frame.x).toBeCloseTo(70);
|
||||
|
||||
fireEvent.pointerDown(must(targets()[1]), { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual(['b']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the marquee', () => {
|
||||
it('picks what it touches, with its group, and is drawn while it is dragged', () => {
|
||||
load(grouped());
|
||||
const { container, stage, sheet } = draw();
|
||||
fireEvent.pointerDown(sheet, { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerMove(stage, { clientX: 70 * PX, clientY: 25 * PX });
|
||||
expect(container.querySelector('.st-marquee')).not.toBeNull();
|
||||
expect(store().selection).toEqual(['a', 'g1', 'g2']);
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(container.querySelector('.st-marquee')).toBeNull();
|
||||
expect(store().selection).toEqual(['a', 'g1', 'g2']);
|
||||
});
|
||||
|
||||
it('adds to the selection with shift, and a click on bare paper clears it', () => {
|
||||
load([shape('a', 10, 10), shape('b', 100, 100)]);
|
||||
const { stage, sheet } = draw();
|
||||
store().select(['b']);
|
||||
fireEvent.pointerDown(sheet, { clientX: 0, clientY: 0, shiftKey: true });
|
||||
fireEvent.pointerMove(stage, { clientX: 40 * PX, clientY: 40 * PX, shiftKey: true });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual(['b', 'a']);
|
||||
fireEvent.pointerDown(sheet, { clientX: 5, clientY: 5 });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual([]);
|
||||
});
|
||||
|
||||
it('starts from a locked element dragged, and leaves the locked one out', () => {
|
||||
load([shape('bg', 0, 0, { locked: true, frame: { x: 0, y: 0, w: 200, h: 200 } }), shape('a', 10, 10)]);
|
||||
const { stage, targets } = draw();
|
||||
fireEvent.pointerDown(must(targets()[0]), { clientX: 1, clientY: 1 });
|
||||
fireEvent.pointerMove(stage, { clientX: 40 * PX, clientY: 40 * PX });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(store().selection).toEqual(['a']);
|
||||
expect(el('bg').frame).toMatchObject({ x: 0, y: 0 });
|
||||
});
|
||||
});
|
||||
|
||||
describe('resizing a multi-selection', () => {
|
||||
const grab = () => {
|
||||
load([shape('a', 10, 10), shape('b', 50, 30)]);
|
||||
store().select(['a', 'b']);
|
||||
const view = draw();
|
||||
const handles = Array.from(view.container.querySelectorAll('.st-select-box .st-handle')) as HTMLElement[];
|
||||
// The handles run nw, n, ne, e, se, s, sw, w.
|
||||
return { ...view, se: must(handles[4]) };
|
||||
};
|
||||
|
||||
it('scales every frame inside one box', () => {
|
||||
const { stage, se } = grab();
|
||||
fireEvent.pointerDown(se, { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerMove(stage, { clientX: 60 * PX, clientY: 0 });
|
||||
fireEvent.pointerUp(stage);
|
||||
// The box 10..70 grows to 10..130 across, so everything doubles that way.
|
||||
expect(el('a').frame.w).toBeCloseTo(40);
|
||||
expect(el('b').frame.x).toBeCloseTo(90);
|
||||
expect(el('b').frame.h).toBeCloseTo(20);
|
||||
store().undo();
|
||||
expect(el('a').frame).toMatchObject({ w: 20, h: 20 });
|
||||
});
|
||||
|
||||
it('keeps the proportions with shift, so every element keeps its own', () => {
|
||||
const { stage, se } = grab();
|
||||
fireEvent.pointerDown(se, { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerMove(stage, { clientX: 120 * PX, clientY: 0, shiftKey: true });
|
||||
fireEvent.pointerUp(stage);
|
||||
// 60 by 40 to 180 by 120: three times either way.
|
||||
expect(el('a').frame.w).toBeCloseTo(60);
|
||||
expect(el('a').frame.h).toBeCloseTo(60);
|
||||
expect(el('b').frame.y).toBeCloseTo(70);
|
||||
});
|
||||
|
||||
it('leaves a locked member where it is', () => {
|
||||
load([shape('a', 10, 10), shape('l', 50, 30, { locked: true })]);
|
||||
store().select(['a', 'l']);
|
||||
const { container, stage } = draw();
|
||||
const se = Array.from(container.querySelectorAll('.st-select-box .st-handle'))[4] as HTMLElement;
|
||||
fireEvent.pointerDown(se, { clientX: 0, clientY: 0 });
|
||||
fireEvent.pointerMove(stage, { clientX: 20 * PX, clientY: 20 * PX });
|
||||
fireEvent.pointerUp(stage);
|
||||
expect(el('l').frame).toMatchObject({ x: 50, y: 30, w: 20, h: 20 });
|
||||
expect(el('a').frame.w).toBeCloseTo(40);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the keyboard', () => {
|
||||
it('nudges by a millimetre and ten with shift, one undo step while held', () => {
|
||||
load([shape('a', 10, 10)]);
|
||||
store().select(['a']);
|
||||
draw();
|
||||
fireEvent.keyDown(document, { key: 'ArrowRight' });
|
||||
fireEvent.keyDown(document, { key: 'ArrowRight', repeat: true });
|
||||
fireEvent.keyDown(document, { key: 'ArrowDown', shiftKey: true });
|
||||
fireEvent.keyUp(document, { key: 'ArrowDown' });
|
||||
expect(el('a').frame).toMatchObject({ x: 12, y: 20 });
|
||||
store().undo();
|
||||
expect(el('a').frame).toMatchObject({ x: 10, y: 10 });
|
||||
});
|
||||
|
||||
it('groups, ungroups, duplicates and selects everything', () => {
|
||||
load([shape('a', 10, 10), shape('b', 40, 10)]);
|
||||
draw();
|
||||
fireEvent.keyDown(document, { key: 'a', ctrlKey: true });
|
||||
expect(store().selection).toEqual(['a', 'b']);
|
||||
fireEvent.keyDown(document, { key: 'g', ctrlKey: true });
|
||||
expect(el('a').group).toBeDefined();
|
||||
fireEvent.keyDown(document, { key: 'G', ctrlKey: true, shiftKey: true });
|
||||
expect(el('a').group).toBeUndefined();
|
||||
fireEvent.keyDown(document, { key: 'd', ctrlKey: true });
|
||||
expect(elements()).toHaveLength(4);
|
||||
});
|
||||
|
||||
it('copies and pastes style, and arranges with the brackets', () => {
|
||||
load([shape('a', 10, 10, { fill: '#ff0000' }), shape('b', 40, 10)]);
|
||||
draw();
|
||||
store().select(['a']);
|
||||
fireEvent.keyDown(document, { key: 'c', ctrlKey: true, altKey: true });
|
||||
store().select(['b']);
|
||||
fireEvent.keyDown(document, { key: 'v', ctrlKey: true, altKey: true });
|
||||
expect(el('b')).toMatchObject({ fill: '#ff0000' });
|
||||
fireEvent.keyDown(document, { key: '[', ctrlKey: true });
|
||||
expect(elements().map((e) => e.id)).toEqual(['b', 'a']);
|
||||
fireEvent.keyDown(document, { key: '}', ctrlKey: true, shiftKey: true });
|
||||
expect(elements().map((e) => e.id)).toEqual(['a', 'b']);
|
||||
});
|
||||
|
||||
it('steps out of a group with Escape, telling the page not to clear the selection', () => {
|
||||
load(grouped());
|
||||
draw();
|
||||
store().enterGroup(0, 'g1');
|
||||
const escape = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
|
||||
document.dispatchEvent(escape);
|
||||
expect(escape.defaultPrevented).toBe(true);
|
||||
expect(store().selection).toEqual(['g1', 'g2']);
|
||||
const again = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true, cancelable: true });
|
||||
document.dispatchEvent(again);
|
||||
expect(again.defaultPrevented).toBe(false);
|
||||
});
|
||||
|
||||
it('leaves a key to the control that takes it: a gradient stop, the angle dial', () => {
|
||||
load([shape('a', 10, 10)]);
|
||||
store().select(['a']);
|
||||
draw();
|
||||
const fade = (n: number) => ({
|
||||
type: 'linear' as const,
|
||||
angle: 90,
|
||||
stops: Array.from({ length: n }, (_, i) => ({ at: i / (n - 1), color: '#112233' })),
|
||||
});
|
||||
const onChange = vi.fn();
|
||||
const labels = { bar: 'bar', stop: (pos: number) => `stop ${pos}` };
|
||||
const three = render(
|
||||
<GradientStopBar paint={fade(3)} selected={1} onSelect={() => {}} onChange={onChange} labels={labels} />
|
||||
);
|
||||
fireEvent.keyDown(must(three.container.querySelectorAll('.st-stop')[1]), { key: 'Delete' });
|
||||
expect(onChange.mock.calls[0]?.[0].stops).toHaveLength(2);
|
||||
three.unmount();
|
||||
// The last two stops cannot go, and the key still does not reach the shape.
|
||||
const two = render(
|
||||
<GradientStopBar paint={fade(2)} selected={0} onSelect={() => {}} onChange={onChange} labels={labels} />
|
||||
);
|
||||
fireEvent.keyDown(must(two.container.querySelector('.st-stop')), { key: 'Backspace' });
|
||||
two.unmount();
|
||||
expect(elements().map((e) => e.id)).toEqual(['a']);
|
||||
|
||||
const dial = render(<AngleDial value={90} onChange={() => {}} label="Angle" />);
|
||||
fireEvent.keyDown(must(dial.container.querySelector('.st-dial')), { key: 'ArrowRight', shiftKey: true });
|
||||
expect(el('a').frame).toMatchObject({ x: 10, y: 10 });
|
||||
});
|
||||
|
||||
it("leaves the keys pressed in the assistant's window to it", () => {
|
||||
load([shape('a', 10, 10)]);
|
||||
store().select(['a']);
|
||||
store().copy(0, ['a']);
|
||||
draw();
|
||||
// As the Studio's assistant window does it: every key pressed in it stops there (StudioAssistantPanel.tsx).
|
||||
const chat = render(
|
||||
<aside className="st-assistant" onKeyDown={(e) => e.stopPropagation()}>
|
||||
<button type="button">Apply</button>
|
||||
</aside>
|
||||
);
|
||||
const button = must(chat.container.querySelector('button'));
|
||||
fireEvent.keyDown(button, { key: 'Delete' });
|
||||
fireEvent.keyDown(button, { key: 'ArrowDown' });
|
||||
fireEvent.keyDown(button, { key: 'v', ctrlKey: true });
|
||||
expect(elements().map((e) => e.id)).toEqual(['a']);
|
||||
expect(el('a').frame).toMatchObject({ x: 10, y: 10 });
|
||||
});
|
||||
|
||||
it('leaves the keys to a field being typed in', () => {
|
||||
load([shape('a', 10, 10)]);
|
||||
store().select(['a']);
|
||||
draw();
|
||||
const input = document.createElement('input');
|
||||
document.body.appendChild(input);
|
||||
fireEvent.keyDown(input, { key: 'ArrowRight' });
|
||||
fireEvent.keyDown(input, { key: 'a', ctrlKey: true });
|
||||
expect(el('a').frame.x).toBe(10);
|
||||
input.remove();
|
||||
});
|
||||
});
|
||||
@@ -1,21 +1,16 @@
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ChevronsDown, ChevronsUp, Copy, Lock, RotateCcw, RotateCw, Trash2, Unlock } from 'lucide-react'
|
||||
import type { BookElement, BookPageSetup, BookSpread } from '@trek/shared'
|
||||
import { SpreadFold, SpreadView } from './SpreadView'
|
||||
import { PeerCursors } from './PeerCursors'
|
||||
import type { PeerCursor } from './useBookPresence'
|
||||
import { bookElementId as elementId } from '@trek/shared'
|
||||
import { fontStack, nearestWeight } from './bookFonts'
|
||||
import { LineHandles } from './LineHandles'
|
||||
import { useSpreadInteraction } from './useSpreadInteraction'
|
||||
import { useStudioKeys } from './useStudioKeys'
|
||||
import { selectClass, selectionShape } from './studioGestures'
|
||||
import { MarqueeRect, ResizeHandles, SelectionBox } from './StudioSelectionChrome'
|
||||
import '../../styles/studio-layers.css'
|
||||
import { fontStack } from './bookFonts'
|
||||
import { useSpreadInteraction, type HandleId } from './useSpreadInteraction'
|
||||
import { useStudioStore } from '../../store/studioStore'
|
||||
import { useTranslation } from '../../i18n'
|
||||
import { STICKER_DRAG_TYPE, stickerDropped } from './stickerLibrary'
|
||||
|
||||
const HANDLES: HandleId[] = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w']
|
||||
|
||||
/**
|
||||
* What a delete may actually take out of the selection.
|
||||
@@ -42,6 +37,17 @@ const ROTATE_CORNERS = [
|
||||
{ id: 'sw', left: '0%', top: '100%' },
|
||||
] as const
|
||||
|
||||
const HANDLE_POS: Record<HandleId, { left: string; top: string; cursor: string }> = {
|
||||
nw: { left: '0%', top: '0%', cursor: 'nwse-resize' },
|
||||
n: { left: '50%', top: '0%', cursor: 'ns-resize' },
|
||||
ne: { left: '100%', top: '0%', cursor: 'nesw-resize' },
|
||||
e: { left: '100%', top: '50%', cursor: 'ew-resize' },
|
||||
se: { left: '100%', top: '100%', cursor: 'nwse-resize' },
|
||||
s: { left: '50%', top: '100%', cursor: 'ns-resize' },
|
||||
sw: { left: '0%', top: '100%', cursor: 'nesw-resize' },
|
||||
w: { left: '0%', top: '50%', cursor: 'ew-resize' },
|
||||
}
|
||||
|
||||
/**
|
||||
* The sheet plus everything you do to it.
|
||||
*
|
||||
@@ -91,9 +97,10 @@ export function StudioCanvas({
|
||||
const select = useStudioStore(s => s.select)
|
||||
const removeElements = useStudioStore(s => s.removeElements)
|
||||
const duplicate = useStudioStore(s => s.duplicate)
|
||||
const copy = useStudioStore(s => s.copy)
|
||||
const paste = useStudioStore(s => s.paste)
|
||||
const hasClipboard = useStudioStore(s => !!s.clipboard)
|
||||
const raise = useStudioStore(s => s.raise)
|
||||
const enteredGroup = useStudioStore(s => s.enteredGroup)
|
||||
const enterGroup = useStudioStore(s => s.enterGroup)
|
||||
const commit = useStudioStore(s => s.commit)
|
||||
const addElement = useStudioStore(s => s.addElement)
|
||||
const [dropTarget, setDropTarget] = useState<string | null>(null)
|
||||
@@ -133,25 +140,45 @@ export function StudioCanvas({
|
||||
const frameUnder = (x: number, y: number) => spread?.elements.find(el =>
|
||||
el.kind === 'photo'
|
||||
&& !el.locked
|
||||
&& !el.hidden
|
||||
&& x >= el.frame.x && x <= el.frame.x + el.frame.w
|
||||
&& y >= el.frame.y && y <= el.frame.y + el.frame.h,
|
||||
) ?? null
|
||||
const scaled = pxPerMm * zoom
|
||||
|
||||
const { guides, dragging, marquee, startMove, startPaper, startResize, startRotate, onPointerMove, finish } = useSpreadInteraction({
|
||||
const { guides, dragging, startMove, startResize, startRotate, onPointerMove, finish } = useSpreadInteraction({
|
||||
spread, spreadIndex, page, pxPerMm: scaled,
|
||||
})
|
||||
|
||||
useStudioKeys({ spreadIndex, editing: editing !== null })
|
||||
useEffect(() => {
|
||||
const onKey = (e: KeyboardEvent) => {
|
||||
const tag = (e.target as HTMLElement)?.tagName
|
||||
if (tag === 'INPUT' || tag === 'TEXTAREA') return
|
||||
if ((e.key === 'Delete' || e.key === 'Backspace') && selection.length) {
|
||||
e.preventDefault()
|
||||
const ids = deletable(spread, selection)
|
||||
if (ids.length) removeElements(spreadIndex, ids)
|
||||
}
|
||||
// Copy and paste across pages (#2316). Text selected on the page is the
|
||||
// browser's to copy, not the book's.
|
||||
if (!(e.metaKey || e.ctrlKey) || e.altKey) return
|
||||
const key = e.key.toLowerCase()
|
||||
if (key === 'c' && selection.length && !window.getSelection()?.toString()) {
|
||||
e.preventDefault()
|
||||
copy(spreadIndex, selection)
|
||||
} else if (key === 'v' && hasClipboard) {
|
||||
e.preventDefault()
|
||||
paste(spreadIndex)
|
||||
}
|
||||
}
|
||||
window.addEventListener('keydown', onKey)
|
||||
return () => window.removeEventListener('keydown', onKey)
|
||||
}, [selection, spread, spreadIndex, removeElements, copy, paste, hasClipboard])
|
||||
|
||||
if (!spread) return null
|
||||
|
||||
const single = spread.role !== 'inner'
|
||||
const sheetW = single ? page.pageWidth : page.pageWidth * 2
|
||||
const sel = spread.elements.filter(e => selection.includes(e.id) && !e.hidden)
|
||||
/** One box with handles around a multi-selection; a whole group reads as one thing. */
|
||||
const { many, box, asGroup, anyMovable } = selectionShape(spread, sel)
|
||||
const sel = spread.elements.filter(e => selection.includes(e.id))
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -169,12 +196,6 @@ export function StudioCanvas({
|
||||
onPointerUp={finish}
|
||||
onPointerCancel={finish}
|
||||
onDragOver={e => {
|
||||
// A sticker from its panel lands where it is let go; it fills no frame.
|
||||
if (e.dataTransfer.types.includes(STICKER_DRAG_TYPE)) {
|
||||
e.preventDefault()
|
||||
e.dataTransfer.dropEffect = 'copy'
|
||||
return
|
||||
}
|
||||
const fromPanel = e.dataTransfer.types.includes('application/x-trek-photo')
|
||||
// A file drag is only claimed when somebody is there to take it; for a
|
||||
// viewer the browser keeps its default and opens the picture itself.
|
||||
@@ -188,12 +209,6 @@ export function StudioCanvas({
|
||||
}}
|
||||
onDragLeave={() => { setDropTarget(null); setFileOver(false) }}
|
||||
onDrop={e => {
|
||||
const sticker = stickerDropped(e.dataTransfer.getData(STICKER_DRAG_TYPE), page, single, pointInMm(e))
|
||||
if (sticker) {
|
||||
e.preventDefault()
|
||||
addElement(spreadIndex, sticker)
|
||||
return
|
||||
}
|
||||
const raw = e.dataTransfer.getData('application/x-trek-photo')
|
||||
const files = Array.from(e.dataTransfer.files ?? [])
|
||||
if (!raw && !(files.length && onDropFiles)) return
|
||||
@@ -235,6 +250,7 @@ export function StudioCanvas({
|
||||
photoId, fit: 'cover', focalX: 0.5, focalY: 0.5, radius: 0, filter: 'none',
|
||||
mask: null, frameStyle: 'none',
|
||||
} as BookElement)
|
||||
select([id])
|
||||
}}
|
||||
>
|
||||
{/*
|
||||
@@ -255,8 +271,7 @@ export function StudioCanvas({
|
||||
height: `${page.pageHeight}mm`,
|
||||
transform: `scale(${zoom})`,
|
||||
}}
|
||||
// A press on bare paper draws a marquee; without a drag it clears the selection.
|
||||
onPointerDown={startPaper}
|
||||
onPointerDown={() => select([])}
|
||||
>
|
||||
<SpreadView spread={spread} page={page} folios={folios} big={zoom > 0.34} showGuides dropLabel={dropLabel} />
|
||||
|
||||
@@ -266,15 +281,11 @@ export function StudioCanvas({
|
||||
|
||||
{/* Hit targets sit above the page so a photo's own <img> never eats the
|
||||
gesture, and so a locked element simply is not grabbable. */}
|
||||
{spread.elements.filter(el => !el.hidden).map(el => (
|
||||
{spread.elements.map(el => (
|
||||
<div
|
||||
key={el.id}
|
||||
onPointerDown={e => { if (editing !== el.id) startMove(e, el) }}
|
||||
onDoubleClick={() => {
|
||||
// Into the group first, the way design tools do it; a second one edits a text.
|
||||
if (el.group && enteredGroup !== el.group) { enterGroup(spreadIndex, el.id); return }
|
||||
if (el.kind === 'text' && !el.locked) setEditing(el.id)
|
||||
}}
|
||||
onDoubleClick={() => { if (el.kind === 'text' && !el.locked) setEditing(el.id) }}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
left: `${el.frame.x}mm`,
|
||||
@@ -314,7 +325,7 @@ export function StudioCanvas({
|
||||
// The document is in pt; the overlay is on screen at the same zoom.
|
||||
fontSize: `${el.size * (96 / 72) * zoom}px`,
|
||||
fontFamily: fontStack(el.font),
|
||||
fontWeight: nearestWeight(el.font, el.weight),
|
||||
fontWeight: el.weight,
|
||||
fontStyle: el.italic ? 'italic' : undefined,
|
||||
lineHeight: el.leading,
|
||||
letterSpacing: `${el.tracking}em`,
|
||||
@@ -368,7 +379,7 @@ export function StudioCanvas({
|
||||
{sel.map(el => (
|
||||
<div
|
||||
key={el.id}
|
||||
className={selectClass(many, el, enteredGroup)}
|
||||
className="st-select"
|
||||
style={{
|
||||
left: el.frame.x * scaled,
|
||||
top: el.frame.y * scaled,
|
||||
@@ -408,27 +419,17 @@ export function StudioCanvas({
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* A line is shaped by its points rather than its box. */}
|
||||
{sel.length === 1 && !el.locked && el.kind === 'line' && (
|
||||
<LineHandles el={el} spreadIndex={spreadIndex} scaled={scaled} t={t} />
|
||||
)}
|
||||
|
||||
{sel.length === 1 && !dragging && !el.locked && el.kind !== 'line' && <ResizeHandles onResize={startResize} />}
|
||||
{sel.length === 1 && !dragging && !el.locked && HANDLES.map(h => (
|
||||
<span
|
||||
key={h}
|
||||
className={`st-handle ${h.length === 2 ? 'is-corner' : h === 'n' || h === 's' ? 'is-h' : 'is-v'}`}
|
||||
style={{ left: HANDLE_POS[h].left, top: HANDLE_POS[h].top, cursor: HANDLE_POS[h].cursor }}
|
||||
onPointerDown={e => startResize(e, h)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/*
|
||||
A multi-selection as one box: one set of handles that resizes them
|
||||
together (Shift keeps the proportions), the members outlined lightly
|
||||
inside it. A whole group's box is dashed, so a group reads as a group
|
||||
before anything is done to it.
|
||||
*/}
|
||||
{box && (
|
||||
<SelectionBox box={box} scaled={scaled} asGroup={asGroup} handles={!dragging && anyMovable} onResize={startResize} />
|
||||
)}
|
||||
|
||||
{marquee && <MarqueeRect rect={marquee} scaled={scaled} />}
|
||||
|
||||
{/*
|
||||
The quick bar, the way Canva and Figma do it: the three or four things
|
||||
you reach for constantly, right where you are already looking, instead
|
||||
@@ -449,12 +450,12 @@ export function StudioCanvas({
|
||||
<button type="button" onClick={() => duplicate(spreadIndex, selection)} title={t('journey.studio.duplicate')}>
|
||||
<Copy size={14} />
|
||||
</button>
|
||||
{(sel.length === 1 || asGroup) && (
|
||||
{sel.length === 1 && (
|
||||
<>
|
||||
<button type="button" onClick={() => raise(spreadIndex, selection, 'front')} title={t('journey.studio.toFront')}>
|
||||
<button type="button" onClick={() => raise(spreadIndex, sel[0].id, 'front')} title={t('journey.studio.toFront')}>
|
||||
<ChevronsUp size={14} />
|
||||
</button>
|
||||
<button type="button" onClick={() => raise(spreadIndex, selection, 'back')} title={t('journey.studio.toBack')}>
|
||||
<button type="button" onClick={() => raise(spreadIndex, sel[0].id, 'back')} title={t('journey.studio.toBack')}>
|
||||
<ChevronsDown size={14} />
|
||||
</button>
|
||||
</>
|
||||
|
||||
@@ -13,10 +13,9 @@ import type { PhotoFilter } from './photoFilter'
|
||||
* heading over the grid rather than as one control among several, and a long
|
||||
* entry name has somewhere to go.
|
||||
*
|
||||
* The popover is the top bar's format menu, hung from the start edge instead
|
||||
* of the end: the side panel is 236px wide and a menu anchored at the end would
|
||||
* open into the rail. A long entry name takes two lines in the chip, and the
|
||||
* menu shows every name whole.
|
||||
* The popover is the top bar's format menu, hung from the left edge instead of
|
||||
* the right: the side panel is 236px wide and a menu anchored right would open
|
||||
* into the rail.
|
||||
*/
|
||||
export function StudioContentFilter({
|
||||
source, filter, setFilter, admitted, pageEntryId, t, locale,
|
||||
@@ -80,7 +79,7 @@ export function StudioContentFilter({
|
||||
aria-expanded={open}
|
||||
title={t('journey.studio.filterPhotos')}
|
||||
>
|
||||
<span className="st-filter-name" title={label}>{label}</span>
|
||||
<span className="st-filter-name">{label}</span>
|
||||
<em>{admitted}</em>
|
||||
<ChevronDown size={12} style={{ opacity: .5 }} />
|
||||
</button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useId, useState, type ReactNode } from 'react'
|
||||
import { useState, type ReactNode } from 'react'
|
||||
import { Check, ChevronDown } from 'lucide-react'
|
||||
import ToggleSwitch from '../Settings/ToggleSwitch'
|
||||
|
||||
@@ -31,15 +31,10 @@ import ToggleSwitch from '../Settings/ToggleSwitch'
|
||||
/**
|
||||
* One group of properties.
|
||||
*
|
||||
* `defaultOpen={false}` is for the groups you set once and rarely return to:
|
||||
* the frame's numbers, the effects, the advanced settings of a kind. The
|
||||
* inspector opens such a group anyway when the element already uses it, so a
|
||||
* photo with a duotone shows its duotone and a plain one keeps it out of the
|
||||
* way (inspector/inspectorModel.ts says which groups are in use). The state
|
||||
* is per mounted section rather than remembered: the inspector mounts its
|
||||
* groups afresh for every selection, and coming back to an element and finding
|
||||
* its panel folded up differently from last time is worse than opening one
|
||||
* group again.
|
||||
* `defaultOpen={false}` is for the groups you set once and rarely return to —
|
||||
* the frame's numbers, mostly. The state is per mounted section rather than
|
||||
* remembered: coming back to an element and finding its panel folded up
|
||||
* differently from last time is worse than opening one group again.
|
||||
*/
|
||||
export function Section({ label, children, defaultOpen = true, hint, badge }: {
|
||||
label: string
|
||||
@@ -56,19 +51,15 @@ export function Section({ label, children, defaultOpen = true, hint, badge }: {
|
||||
badge?: string
|
||||
}) {
|
||||
const [open, setOpen] = useState(defaultOpen)
|
||||
const body = useId()
|
||||
return (
|
||||
<div className={`st-section is-fold ${open ? '' : 'is-folded'}`}>
|
||||
<h3 className="st-section-title">
|
||||
<button type="button" className="st-section-head" onClick={() => setOpen(!open)} aria-expanded={open}
|
||||
aria-controls={open ? body : undefined}>
|
||||
<span className="st-section-label">{label}</span>
|
||||
{badge && <span className="st-section-badge">{badge}</span>}
|
||||
<ChevronDown size={13} className="st-section-caret" aria-hidden />
|
||||
</button>
|
||||
</h3>
|
||||
<button type="button" className="st-section-head" onClick={() => setOpen(!open)} aria-expanded={open}>
|
||||
<span className="st-section-label">{label}</span>
|
||||
{badge && <span className="st-section-badge">{badge}</span>}
|
||||
<ChevronDown size={13} className="st-section-caret" />
|
||||
</button>
|
||||
{open && (
|
||||
<div className="st-section-body" id={body}>
|
||||
<div className="st-section-body">
|
||||
{hint && <p className="st-hint st-section-hint">{hint}</p>}
|
||||
{children}
|
||||
</div>
|
||||
@@ -77,17 +68,7 @@ export function Section({ label, children, defaultOpen = true, hint, badge }: {
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* A labelled line: the label first, the control after it.
|
||||
*
|
||||
* The two share the line while they fit and the control moves under the label
|
||||
* when they do not, so a long label ("Πεζά και κεφαλαία", "Átlátszatlanság")
|
||||
* pushes its control down a line instead of being cut or squeezing the control
|
||||
* to nothing. There is no column of a fixed width for the label to fit into;
|
||||
* short labels sit at a common minimum, so the controls of a group still start
|
||||
* at one edge. `wide` puts the control under the label always, for a control
|
||||
* that needs the whole width, like a row of swatches.
|
||||
*/
|
||||
/** A labelled line. The label sits left, the control fills what is left. */
|
||||
export function Line({ label, children, wide = false }: {
|
||||
label: string
|
||||
children: ReactNode
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
import {
|
||||
BOOK_EDGES,
|
||||
BOOK_EDGE_SIZE_MAX,
|
||||
BOOK_EDGE_SIZE_MIN,
|
||||
type BookEdge,
|
||||
type BookShapeId,
|
||||
bookShapeTakesEdge,
|
||||
} from '@trek/shared';
|
||||
|
||||
import { edgeInUse } from './inspector/inspectorModel';
|
||||
import { DEFAULT_EDGE_SIZE } from './shapeOutline';
|
||||
import { edgedPath } from './shapes-edges';
|
||||
import { NumField, Section } from './StudioControls';
|
||||
|
||||
/**
|
||||
* The edge of a shape or of a photo's cut: a row of tiles, each the edge drawn
|
||||
* on a little card, and how deep it bites.
|
||||
*
|
||||
* Shown for the shapes an edge is cut along and for photos. On an outline that
|
||||
* takes none (a heart, a star) it stays away, unless an edge is already set
|
||||
* there, which it then says does nothing and offers to put back.
|
||||
*/
|
||||
|
||||
const CARD = 'M0 0L40 0L40 30L0 30Z';
|
||||
|
||||
/** One edge, drawn on a card the size of a tile. Seeded alike, so the torn tile does not change while you look at it. */
|
||||
function EdgeGlyph({ edge }: { edge: BookEdge }) {
|
||||
return (
|
||||
<svg viewBox="-2 -2 44 34" aria-hidden>
|
||||
<path d={edgedPath(CARD, edge, 5, 3)} fill="currentColor" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function EdgeSection({
|
||||
edge,
|
||||
edgeSize,
|
||||
outline,
|
||||
onSet,
|
||||
t,
|
||||
}: {
|
||||
edge: BookEdge | undefined;
|
||||
edgeSize: number | undefined;
|
||||
/** The shape the edge would be cut along; null for a photo's plain rectangle. */
|
||||
outline: BookShapeId | null;
|
||||
onSet: (patch: { edge?: BookEdge; edgeSize?: number }) => void;
|
||||
t: (k: string) => string;
|
||||
}) {
|
||||
const current = edge ?? 'straight';
|
||||
const takes = bookShapeTakesEdge(outline);
|
||||
// A heart or a star keeps its drawn line, so there is nothing to offer unless an edge is already set on one.
|
||||
if (!takes && current === 'straight') return null;
|
||||
return (
|
||||
<Section label={t('journey.studio.edgeStyle')} defaultOpen={edgeInUse(edge)}>
|
||||
{!takes && <p className="st-hint st-hint-before">{t('journey.studio.edgeUnavailable')}</p>}
|
||||
<div className="st-mini-shapes">
|
||||
{BOOK_EDGES.map((e) => (
|
||||
<button
|
||||
type="button"
|
||||
key={e}
|
||||
className={`st-mini-shape ${current === e ? 'is-on' : ''}`}
|
||||
onClick={() => onSet({ edge: e })}
|
||||
title={t(`journey.studio.edge.${e}`)}
|
||||
aria-label={t(`journey.studio.edge.${e}`)}
|
||||
aria-pressed={current === e}
|
||||
>
|
||||
<EdgeGlyph edge={e} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
{takes && current !== 'straight' && (
|
||||
<div className="st-section-gap">
|
||||
<NumField
|
||||
label={t('journey.studio.edgeSize')}
|
||||
value={edgeSize ?? DEFAULT_EDGE_SIZE}
|
||||
min={BOOK_EDGE_SIZE_MIN}
|
||||
max={BOOK_EDGE_SIZE_MAX}
|
||||
step={0.5}
|
||||
unit="mm"
|
||||
onChange={(v) => onSet({ edgeSize: v })}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
}
|
||||
@@ -1,147 +0,0 @@
|
||||
import type { BookDocument } from '@trek/shared';
|
||||
import { BOOK_GRIDS, MAX_SPREAD_ELEMENTS, bookPageSetupSchema, normalizeBookDocument } from '@trek/shared';
|
||||
import { beforeEach, describe, expect, it } from 'vitest';
|
||||
|
||||
import { fireEvent, render, screen } from '../../../tests/helpers/render';
|
||||
import { useStudioStore } from '../../store/studioStore';
|
||||
import { StudioElementsPanel } from './StudioElementsPanel';
|
||||
import { searchIcons } from './iconLibrary';
|
||||
import { DIVIDER_PRESETS, LINE_PRESETS } from './linePresets';
|
||||
import { matchStickers } from './stickerLibrary';
|
||||
|
||||
/**
|
||||
* FE-STUDIO-ELEMENTS-001 to FE-STUDIO-ELEMENTS-007: the Elements panel's six
|
||||
* tabs, each opening its own shelves, and each placing what it shows on the
|
||||
* open page, as long as the page has room for it.
|
||||
*/
|
||||
|
||||
const t = (k: string) => k;
|
||||
const page = bookPageSetupSchema.parse({ preset: 'square-210', pageWidth: 210, pageHeight: 210, bleed: 3, safe: 5 });
|
||||
const source = { entries: [], photos: [] };
|
||||
|
||||
const book = (): BookDocument =>
|
||||
normalizeBookDocument({
|
||||
version: 1,
|
||||
title: 'Porto',
|
||||
page: { preset: 'square-210', pageWidth: 210, pageHeight: 210, bleed: 3, safe: 5 },
|
||||
spreads: [{ id: 'sp1', role: 'inner', entryId: null, background: null, elements: [], parked: [] }],
|
||||
});
|
||||
|
||||
const elements = () => useStudioStore.getState().doc?.spreads[0]?.elements ?? [];
|
||||
const last = () => elements()[elements().length - 1];
|
||||
const open = (name: string) => fireEvent.click(screen.getByRole('tab', { name }));
|
||||
|
||||
beforeEach(() => {
|
||||
window.localStorage.clear();
|
||||
useStudioStore.getState().load(book());
|
||||
});
|
||||
|
||||
describe('the Elements panel', () => {
|
||||
it('FE-STUDIO-ELEMENTS-001: opens on Text, with the quotation mark among the plain styles', () => {
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
const panel = screen.getByRole('tabpanel');
|
||||
expect(panel.getAttribute('aria-labelledby')).toBe(screen.getByRole('tab', { name: 'journey.studio.text' }).id);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.quoteMark' }));
|
||||
expect(last()).toMatchObject({ kind: 'text', text: '“', size: 46 });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-002: puts the outline-only rectangle first among the basic shapes', () => {
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.shapes');
|
||||
const outline = screen.getByRole('button', { name: 'journey.studio.shapeKind.outline' });
|
||||
expect(outline.closest('.st-shape-grid')?.firstElementChild).toBe(outline);
|
||||
fireEvent.click(outline);
|
||||
expect(last()).toMatchObject({ kind: 'shape', shape: 'rect', fill: null, stroke: '#141414' });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-003: keeps the plain rule with the drawn lines and the dividers', () => {
|
||||
const { container } = render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.lines');
|
||||
expect(container.querySelectorAll('.st-shape-btn')).toHaveLength(LINE_PRESETS.length + DIVIDER_PRESETS.length + 1);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.shapeKind.line' }));
|
||||
expect(last()).toMatchObject({ kind: 'shape', shape: 'rect', frame: { h: 0.5 } });
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.linePreset.route' }));
|
||||
expect(last()).toMatchObject({ kind: 'line' });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-004: offers frames in their styles and shapes, and the grids, in one tab', () => {
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.frames');
|
||||
expect(screen.getByText('journey.studio.frameStyles')).toBeTruthy();
|
||||
expect(screen.getByText('journey.studio.frameShapes')).toBeTruthy();
|
||||
expect(screen.getByText('journey.studio.grids')).toBeTruthy();
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.polaroidFrame' }));
|
||||
expect(last()).toMatchObject({ kind: 'photo', photoId: null, frameStyle: 'polaroid' });
|
||||
const grid = BOOK_GRIDS[0];
|
||||
if (!grid) throw new Error('no grids');
|
||||
fireEvent.click(screen.getByRole('button', { name: grid.id }));
|
||||
expect(useStudioStore.getState().selection).toHaveLength(grid.cells.length);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-007: places nothing on a page that holds all it can, a frame or a whole grid', () => {
|
||||
const grid = BOOK_GRIDS.find((g) => g.cells.length > 1);
|
||||
if (!grid) throw new Error('no grid of several frames');
|
||||
const crowded = (n: number) =>
|
||||
normalizeBookDocument({
|
||||
...book(),
|
||||
spreads: [
|
||||
{
|
||||
id: 'sp1',
|
||||
role: 'inner',
|
||||
entryId: null,
|
||||
background: null,
|
||||
parked: [],
|
||||
elements: Array.from({ length: n }, (_, i) => ({
|
||||
id: `s${i}`,
|
||||
kind: 'shape',
|
||||
frame: { x: 0, y: 0, w: 5, h: 5 },
|
||||
})),
|
||||
},
|
||||
],
|
||||
});
|
||||
useStudioStore.getState().load(crowded(MAX_SPREAD_ELEMENTS));
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.frames');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.polaroidFrame' }));
|
||||
expect(elements()).toHaveLength(MAX_SPREAD_ELEMENTS);
|
||||
expect(useStudioStore.getState().selection).toEqual([]);
|
||||
|
||||
useStudioStore.getState().load(crowded(MAX_SPREAD_ELEMENTS - 1));
|
||||
fireEvent.click(screen.getByRole('button', { name: grid.id }));
|
||||
expect(elements()).toHaveLength(MAX_SPREAD_ELEMENTS - 1);
|
||||
expect(useStudioStore.getState().canUndo()).toBe(false);
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-005: searches the icons and the stickers above their grids', () => {
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.icons');
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'journey.studio.searchIcons' }), {
|
||||
target: { value: 'compass' },
|
||||
});
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Compass' }));
|
||||
expect(last()).toMatchObject({ kind: 'icon', name: 'Compass' });
|
||||
open('journey.studio.stickers');
|
||||
fireEvent.click(screen.getByRole('button', { name: 'journey.studio.sticker.sun' }));
|
||||
expect(last()).toMatchObject({ kind: 'sticker', stickerId: 'sun' });
|
||||
});
|
||||
|
||||
it('FE-STUDIO-ELEMENTS-006: says in the search field how many stickers and icons the words match', () => {
|
||||
render(<StudioElementsPanel page={page} t={t} source={source} />);
|
||||
open('journey.studio.stickers');
|
||||
expect(screen.queryByRole('status')).toBeNull();
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'journey.studio.searchStickers' }), {
|
||||
target: { value: 'sun' },
|
||||
});
|
||||
expect(screen.getByRole('status').textContent).toBe(String(matchStickers('sun', null, t).length));
|
||||
open('journey.studio.icons');
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'journey.studio.searchIcons' }), {
|
||||
target: { value: 'compass' },
|
||||
});
|
||||
expect(screen.getByRole('status').textContent).toBe(String(searchIcons('compass').length));
|
||||
// Spaces are not a search, so they leave the count out.
|
||||
fireEvent.change(screen.getByRole('textbox', { name: 'journey.studio.searchIcons' }), {
|
||||
target: { value: ' ' },
|
||||
});
|
||||
expect(screen.queryByRole('status')).toBeNull();
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user