{t('Glissez la photo, ou utilisez les flèches. Molette, pincement ou curseur pour zoomer.')}
diff --git a/frontend/src/components/galaxy/renderers.js b/frontend/src/components/galaxy/renderers.js index 8a93de2..1063d40 100644 --- a/frontend/src/components/galaxy/renderers.js +++ b/frontend/src/components/galaxy/renderers.js @@ -1,6 +1,6 @@ import { t } from '../../i18n/index.js' import { getPersonById, getPersonMedias } from '../../data/mockData' -import { cropViewport } from '../../utils/portraitCrop.js' +import { cropShape, cropViewport, isLandscapeRect, resolveFrameKind } from '../../utils/portraitCrop.js' // Tracés Lucide dessinés sur le canvas : données publiques de @lucide/icons (Map renommé, il masquerait // le Map global utilisé plus bas) import { Map as mapIcon, MapPin as mapPinIcon, Route as routeIcon } from '@lucide/icons' @@ -897,26 +897,12 @@ function drawMediaContent(ctx, media, ms, imageCache) { // ============================================================ // Dessiner le cadre photo (polaroid, rect, round) // ============================================================ +// Forme choisie au recadrage d'abord ; sinon une photo très large ou très haute impose la sienne, et une photo +// carrée ou presque garde la forme tirée au hasard pour la personne (pickFrameType), pour que l'arbre ne soit +// pas uniforme. Même règle que la fenêtre de recadrage (portraitCrop.js). function resolveFrameType(person, img) { - const fallback = person.frameType || 'round' - - if (!img || !img.naturalWidth || !img.naturalHeight) { - return fallback - } - - const ratio = img.naturalWidth / img.naturalHeight - - if (ratio >= 1.28) { - return 'rect' - } - - if (ratio <= 0.78) { - return 'polaroid' - } - - // Photo carrée ou presque : chaque personne garde sa forme tirée au hasard - // (person.frameType, voir pickFrameType), pour que l'arbre ne soit pas uniforme - return fallback + const ratio = img?.naturalWidth && img?.naturalHeight ? img.naturalWidth / img.naturalHeight : 1 + return resolveFrameKind(person.frameType || 'round', ratio, cropShape(person.avatarCrop)) } function drawFrame(ctx, frameType, person, img, hint = 0) { @@ -958,8 +944,8 @@ function drawFrame(ctx, frameType, person, img, hint = 0) { const ratio = img?.naturalWidth && img?.naturalHeight ? img.naturalWidth / img.naturalHeight : 1 - // Photo carrée : cadre vertical, qui garde le visage entier - const isLandscape = ratio > 1.05 + // Couché ou debout selon la forme choisie, sinon selon la photo (carrée : debout, le visage reste entier) + const isLandscape = isLandscapeRect(ratio, cropShape(person.avatarCrop)) const rw = isLandscape ? PERSON_R + 12 : PERSON_R + 2 const rh = isLandscape ? PERSON_R - 8 : PERSON_R + 6 const pad = 3 diff --git a/frontend/src/i18n/en/fiche.js b/frontend/src/i18n/en/fiche.js index 81ac17a..75018d8 100644 --- a/frontend/src/i18n/en/fiche.js +++ b/frontend/src/i18n/en/fiche.js @@ -418,6 +418,12 @@ export default { 'Il faut au moins un nom si le prénom est inconnu.': 'A last name is required when the first name is unknown.', // Recadrage du portrait (PortraitCropModal, menu du badge, App) 'Recadrer la photo': 'Crop photo', + 'Forme du cadre': 'Frame shape', + 'Rond': 'Round', + 'Carré': 'Square', + 'Polaroïd': 'Polaroid', + 'Vertical': 'Vertical', + 'Horizontal': 'Horizontal', 'Recadrer': 'Crop', 'Options du portrait': 'Portrait options', 'Zone de recadrage': 'Crop area', diff --git a/frontend/src/utils/portraitCrop.js b/frontend/src/utils/portraitCrop.js index b1b7b8a..e50fbd7 100644 --- a/frontend/src/utils/portraitCrop.js +++ b/frontend/src/utils/portraitCrop.js @@ -7,19 +7,37 @@ export const DEFAULT_CROP = { x: 0.5, y: 0.5, zoom: 1 } const clamp = (value, min, max) => Math.min(max, Math.max(min, value)) +// Formes qu'on choisit au recadrage, gardées dans le cadrage (crop.shape). Sans choix, la forme suit la photo +// (très large ou très haute) ou le cadre tiré au hasard pour la personne. +export const FRAME_SHAPES = ['round', 'square', 'polaroid', 'portrait', 'landscape'] +export const cropShape = (crop) => (FRAME_SHAPES.includes(crop?.shape) ? crop.shape : null) + // Forme du cadre dans le canevas : même règle que resolveFrameType et drawFrame (renderers.js). -// Une photo très large ou très haute change la forme ; sinon le cadre tiré pour la personne (frameType) reste. -export function resolveFrameKind(frameType, imageRatio) { +// La forme choisie l'emporte ; sinon une photo très large ou très haute change la forme, et à défaut +// le cadre tiré pour la personne (frameType) reste. +export function resolveFrameKind(frameType, imageRatio, shape = null) { + if (shape) return shape === 'portrait' || shape === 'landscape' ? 'rect' : shape if (imageRatio >= 1.28) return 'rect' if (imageRatio <= 0.78) return 'polaroid' return frameType || 'round' } +// Cadre rectangle : couché si on l'a choisi, sinon selon la photo (carrée : debout, le visage reste entier) +export function isLandscapeRect(imageRatio, shape = null) { + return shape ? shape === 'landscape' : imageRatio > 1.05 +} + +// Nom de la forme affichée, pour le sélecteur +export function shapeOfKind(frameKind, imageRatio) { + if (frameKind !== 'rect') return frameKind + return isLandscapeRect(imageRatio) ? 'landscape' : 'portrait' +} + // Rapport largeur / hauteur de la zone visible, comme drawFrame le dessine. -export function frameAspect(frameKind, imageRatio) { +export function frameAspect(frameKind, imageRatio, shape = null) { if (frameKind === 'rect') { // Paysage : 80 x 40 ; portrait : 60 x 68 (renderers.js, drawFrame) - return imageRatio > 1.05 ? 2 : 60 / 68 + return isLandscapeRect(imageRatio, shape) ? 2 : 60 / 68 } // round, polaroid et square : la zone photo est carrée return 1 @@ -32,7 +50,8 @@ export function normalizeCrop(crop) { const y = Number(crop.y) const zoom = Number(crop.zoom) if (!Number.isFinite(x) || !Number.isFinite(y) || !Number.isFinite(zoom)) return DEFAULT_CROP - return { x: clamp(x, 0, 1), y: clamp(y, 0, 1), zoom: clamp(zoom, 1, CROP_MAX_ZOOM) } + const shape = cropShape(crop) + return { x: clamp(x, 0, 1), y: clamp(y, 0, 1), zoom: clamp(zoom, 1, CROP_MAX_ZOOM), ...(shape ? { shape } : {}) } } // Zone de l'image visible dans le cadre, en pixels de l'image. Le centre est borné pour qu'il n'y ait jamais @@ -77,11 +96,13 @@ export function imagePlacement(imageW, imageH, aspect, crop, windowW = 1, window } } -// Ce qu'il faut à l'enregistrement : null pour le cadrage par défaut, sinon le cadrage borné. -export function cropForSave(imageW, imageH, aspect, crop) { +// Ce qu'il faut à l'enregistrement : null pour le cadrage par défaut sans forme choisie, sinon le cadrage +// borné, avec la forme quand on l'a choisie. +export function cropForSave(imageW, imageH, aspect, crop, shape = null) { const c = clampCrop(imageW, imageH, aspect, crop) const round = (value) => Math.round(value * 10000) / 10000 const normalized = { x: round(c.x), y: round(c.y), zoom: round(c.zoom) } + if (shape) return { ...normalized, shape } if (normalized.x === 0.5 && normalized.y === 0.5 && normalized.zoom === 1) return null return normalized } diff --git a/frontend/src/utils/portraitCrop.test.js b/frontend/src/utils/portraitCrop.test.js index 6b4eff8..c11bff2 100644 --- a/frontend/src/utils/portraitCrop.test.js +++ b/frontend/src/utils/portraitCrop.test.js @@ -8,6 +8,7 @@ import { imagePlacement, normalizeCrop, resolveFrameKind, + shapeOfKind, } from './portraitCrop.js' // Le cadrage visible ne sort jamais de la photo : aucun vide dans le cadre @@ -86,3 +87,29 @@ describe('portraitCrop', () => { expect(frameAspect('rect', 1)).toBeCloseTo(60 / 68) }) }) + +describe('forme choisie au recadrage', () => { + it('l emporte sur le format de la photo et sur le tirage de la personne', () => { + // Photo très large : cadre couché par défaut, rond si on le choisit + expect(resolveFrameKind('polaroid', 1.6)).toBe('rect') + expect(resolveFrameKind('polaroid', 1.6, 'round')).toBe('round') + expect(frameAspect(resolveFrameKind('polaroid', 1.6, 'round'), 1.6, 'round')).toBe(1) + // Vertical choisi sur une photo couchée : la zone visible est debout + expect(resolveFrameKind('round', 1.6, 'portrait')).toBe('rect') + expect(frameAspect('rect', 1.6, 'portrait')).toBeCloseTo(60 / 68) + expect(frameAspect('rect', 0.7, 'landscape')).toBe(2) + }) + + it('le sélecteur montre la forme en cours quand rien n est choisi', () => { + expect(shapeOfKind('rect', 1.6)).toBe('landscape') + expect(shapeOfKind('rect', 1)).toBe('portrait') + expect(shapeOfKind('polaroid', 0.7)).toBe('polaroid') + }) + + it('est gardée à la lecture et à l enregistrement, même sans recadrage', () => { + expect(normalizeCrop({ x: 0.2, y: 0.3, zoom: 2, shape: 'square' })).toEqual({ x: 0.2, y: 0.3, zoom: 2, shape: 'square' }) + expect(normalizeCrop({ x: 0.2, y: 0.3, zoom: 2, shape: 'hexagone' })).toEqual({ x: 0.2, y: 0.3, zoom: 2 }) + expect(cropForSave(400, 400, 1, DEFAULT_CROP)).toBeNull() + expect(cropForSave(400, 400, 1, DEFAULT_CROP, 'round')).toEqual({ x: 0.5, y: 0.5, zoom: 1, shape: 'round' }) + }) +})