552 lines
19 KiB
Dart
552 lines
19 KiB
Dart
import 'dart:io';
|
||
import 'dart:math' as math;
|
||
import 'package:flutter/material.dart';
|
||
|
||
import '../../core/theme/app_theme.dart';
|
||
import '../../data/models/target_type.dart';
|
||
import '../../services/image_crop_service.dart';
|
||
import '../analysis/analysis_screen.dart';
|
||
import 'widgets/crop_overlay.dart';
|
||
|
||
class CropScreen extends StatefulWidget {
|
||
final String imagePath;
|
||
final TargetType targetType;
|
||
final double? initialScale;
|
||
final Offset? initialOffset;
|
||
|
||
const CropScreen({
|
||
super.key,
|
||
required this.imagePath,
|
||
required this.targetType,
|
||
this.initialScale,
|
||
this.initialOffset,
|
||
});
|
||
|
||
@override
|
||
State<CropScreen> createState() => _CropScreenState();
|
||
}
|
||
|
||
class _CropScreenState extends State<CropScreen> {
|
||
// Bornes et pas de la rotation, partagés par la jauge et les boutons − / +.
|
||
static const double _minRotation = -15.0;
|
||
static const double _maxRotation = 15.0;
|
||
static const double _rotationStep = 0.1;
|
||
|
||
final ImageCropService _cropService = ImageCropService();
|
||
|
||
// États de transformation
|
||
double _scale = 1.0;
|
||
double _baseScale = 1.0;
|
||
Offset _offset = Offset.zero;
|
||
Offset _startOffset = Offset.zero;
|
||
Offset _startFocalPoint = Offset.zero;
|
||
|
||
// PRÉCISION MAXIMUM : Amplitude restreinte de -15.0 à 15.0 degrés
|
||
double _rotation = 0.0;
|
||
|
||
bool _isLoading = false;
|
||
bool _imageLoaded = false;
|
||
Size? _imageSize;
|
||
late Size _viewportSize;
|
||
late double _cropSize;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_loadImageInfo();
|
||
}
|
||
|
||
Future<void> _loadImageInfo() async {
|
||
final file = File(widget.imagePath);
|
||
final decodedImage = await decodeImageFromList(await file.readAsBytes());
|
||
if (mounted) {
|
||
setState(() {
|
||
_imageSize = Size(
|
||
decodedImage.width.toDouble(),
|
||
decodedImage.height.toDouble(),
|
||
);
|
||
_imageLoaded = true;
|
||
});
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: const Color(0xFF101214),
|
||
appBar: AppBar(
|
||
backgroundColor: const Color(0xFF101214),
|
||
elevation: 0,
|
||
centerTitle: true,
|
||
title: const Text(
|
||
'Centrage de la cible',
|
||
style: TextStyle(color: Colors.white, fontSize: 18),
|
||
),
|
||
leading: IconButton(
|
||
icon: const Icon(Icons.arrow_back, color: Colors.white),
|
||
onPressed: () => Navigator.pop(context),
|
||
),
|
||
actions: [
|
||
if (_rotation != 0.0 || _scale != 1.0 || _offset != Offset.zero)
|
||
IconButton(
|
||
icon: const Icon(Icons.refresh, color: Colors.white70),
|
||
tooltip: 'Réinitialiser l\'orientation',
|
||
onPressed: () {
|
||
setState(() {
|
||
_rotation = 0.0;
|
||
_scale = 1.0;
|
||
_offset = Offset.zero;
|
||
_initializeImagePosition();
|
||
});
|
||
},
|
||
),
|
||
],
|
||
),
|
||
body: _isLoading
|
||
? const Center(child: CircularProgressIndicator(color: Color(0xFF1A73E8)))
|
||
: Column(
|
||
children: [
|
||
// TEXTE D'AIDE — placé en haut, sous le titre, au-dessus de l'image.
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 4),
|
||
child: Column(
|
||
children: [
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
const Icon(Icons.center_focus_strong, color: Color(0xFF00FF00), size: 20),
|
||
const SizedBox(width: 8),
|
||
Flexible(
|
||
child: Text(
|
||
'Zoomer au maximum puis aligner votre cible',
|
||
style: TextStyle(color: Colors.white.withValues(alpha: 0.8), fontSize: 14, fontWeight: FontWeight.w500),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
const SizedBox(height: 4),
|
||
Text(
|
||
'Glissez à un doigt pour déplacer, pincez pour zoomer',
|
||
style: TextStyle(color: Colors.white.withValues(alpha: 0.5), fontSize: 12),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
// Zone interactive de crop, CARRÉE. La photo la remplit entièrement
|
||
// (BoxFit.cover) → aucun bord noir dans la zone. Le débord hors cadre
|
||
// est récupérable en déplaçant/zoomant. La sortie d'analyse reste
|
||
// carrée, donc la cible n'est pas déformée.
|
||
Expanded(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(20),
|
||
child: Center(
|
||
child: AspectRatio(
|
||
aspectRatio: 1.0,
|
||
child: Container(
|
||
decoration: BoxDecoration(
|
||
borderRadius: BorderRadius.circular(12),
|
||
border: Border.all(color: Colors.white10),
|
||
),
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(12),
|
||
child: _imageLoaded ? _buildInteractiveCrop() : const Center(child: CircularProgressIndicator()),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
|
||
const SizedBox(height: 8),
|
||
|
||
// CROIX DIRECTIONNELLE — déplace la photo pixel par pixel,
|
||
// encadrée par les deux boutons de rotation fine.
|
||
_buildDirectionalPad(),
|
||
|
||
const SizedBox(height: 16),
|
||
|
||
// JAUGE DE ROTATION HAUTE PRÉCISION BRIDÉE À 15°
|
||
Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 24),
|
||
child: Column(
|
||
children: [
|
||
Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||
children: [
|
||
const Text(
|
||
'Rotation de l\'image',
|
||
style: TextStyle(color: Colors.white70, fontSize: 13, fontWeight: FontWeight.w600),
|
||
),
|
||
Text(
|
||
'${_rotation.toStringAsFixed(1)}°',
|
||
style: const TextStyle(color: Color(0xFF00FF00), fontWeight: FontWeight.bold),
|
||
),
|
||
],
|
||
),
|
||
Row(
|
||
children: [
|
||
// Les icônes de sens de rotation ont rejoint les boutons − / +
|
||
// de la croix directionnelle.
|
||
Expanded(
|
||
child: Slider(
|
||
value: _rotation,
|
||
min: _minRotation,
|
||
max: _maxRotation,
|
||
divisions: 300,
|
||
label: '${_rotation.toStringAsFixed(1)}°',
|
||
activeColor: const Color(0xFF1A73E8),
|
||
inactiveColor: Colors.white12,
|
||
onChanged: (double value) {
|
||
setState(() {
|
||
_rotation = value;
|
||
});
|
||
},
|
||
),
|
||
),
|
||
const SizedBox(width: 4),
|
||
IconButton(
|
||
icon: const Icon(Icons.restart_alt, color: Colors.white54, size: 20),
|
||
onPressed: () {
|
||
setState(() {
|
||
_rotation = 0.0;
|
||
});
|
||
},
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
|
||
// Boutons du bas
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(20, 10, 20, 30),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: OutlinedButton(
|
||
onPressed: () => Navigator.pop(context),
|
||
style: OutlinedButton.styleFrom(
|
||
side: const BorderSide(color: Colors.white24),
|
||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||
),
|
||
child: const Text('Retour', style: TextStyle(color: Colors.white)),
|
||
),
|
||
),
|
||
const SizedBox(width: 16),
|
||
Expanded(
|
||
child: ElevatedButton(
|
||
onPressed: _onCropConfirm,
|
||
style: ElevatedButton.styleFrom(
|
||
backgroundColor: const Color(0xFF1A73E8),
|
||
foregroundColor: Colors.white,
|
||
padding: const EdgeInsets.symmetric(vertical: 15),
|
||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
|
||
),
|
||
child: const Text('Suivant', style: TextStyle(fontWeight: FontWeight.bold)),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildInteractiveCrop() {
|
||
return LayoutBuilder(
|
||
builder: (context, constraints) {
|
||
_viewportSize = Size(constraints.maxWidth, constraints.maxHeight);
|
||
|
||
// La photo remplit toute la zone carrée (BoxFit.cover). La fenêtre de
|
||
// visée = toute la zone visible → aucun bord noir autour du cadre.
|
||
_cropSize = math.min(_viewportSize.width, _viewportSize.height);
|
||
|
||
if (_scale == 1.0 && _offset == Offset.zero && _rotation == 0.0) {
|
||
_initializeImagePosition();
|
||
}
|
||
|
||
return GestureDetector(
|
||
onScaleStart: _onScaleStart,
|
||
onScaleUpdate: _onScaleUpdate,
|
||
child: Stack(
|
||
children: [
|
||
// 1. L'image brute avec ses transformations (Reste calé sur BoxFit.contain d'origine)
|
||
Positioned.fill(
|
||
child: Center(
|
||
child: Transform(
|
||
transform: Matrix4.identity()
|
||
..setTranslationRaw(_offset.dx, _offset.dy, 0)
|
||
..scaleByDouble(_scale, _scale, _scale, 1.0)
|
||
..rotateZ(_rotation * (math.pi / 180)),
|
||
alignment: Alignment.center,
|
||
child: Image.file(
|
||
File(widget.imagePath),
|
||
fit: BoxFit.cover,
|
||
width: _viewportSize.width,
|
||
height: _viewportSize.height,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
|
||
// 2. Les lignes vertes de visée prolongées
|
||
Positioned.fill(
|
||
child: IgnorePointer(
|
||
child: Stack(
|
||
children: [
|
||
Center(
|
||
child: Container(
|
||
width: double.infinity,
|
||
height: 1.5,
|
||
color: const Color(0xFF00FF00).withValues(alpha: 0.6),
|
||
),
|
||
),
|
||
Center(
|
||
child: Container(
|
||
width: 1.5,
|
||
height: double.infinity,
|
||
color: const Color(0xFF00FF00).withValues(alpha: 0.6),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
|
||
// 3. MASQUE OPAQUE EXTÉRIEUR - COINS DROITS ET CARRÉS
|
||
Positioned.fill(
|
||
child: IgnorePointer(
|
||
child: ColorFiltered(
|
||
colorFilter: ColorFilter.mode(
|
||
const Color(0xFF101214),
|
||
BlendMode.srcOut,
|
||
),
|
||
child: Stack(
|
||
children: [
|
||
Center(
|
||
child: Container(
|
||
width: _cropSize,
|
||
height: _cropSize,
|
||
color: Colors.black,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
),
|
||
|
||
// 4. Ton overlay avec les coins blancs
|
||
Positioned.fill(
|
||
child: IgnorePointer(
|
||
child: CropOverlay(cropSize: _cropSize, showGrid: false),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
|
||
void _initializeImagePosition() {
|
||
if (_imageSize == null) return;
|
||
|
||
// 2. Calcul du scale initial basé sur la dimension de l'image (et non du viewport)
|
||
_scale = widget.initialScale ?? 1.0;
|
||
if (_scale < 1.0 && widget.initialScale == null) _scale = 1.0;
|
||
|
||
// 3. Réinitialisation propre de l'offset au centre de la zone d'affichage
|
||
if (widget.initialOffset != null) {
|
||
_offset = widget.initialOffset!;
|
||
} else {
|
||
_offset = Offset.zero; // Force l'image à se centrer parfaitement sur la croix verte
|
||
}
|
||
}
|
||
|
||
// Croix directionnelle compacte pour déplacer la photo pixel par pixel.
|
||
// Les boutons « − » et « + » de part et d'autre pivotent l'image de 0,1°.
|
||
Widget _buildDirectionalPad() {
|
||
return Row(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
_buildRotationButton(
|
||
icon: Icons.rotate_left,
|
||
sign: '−',
|
||
iconFirst: true,
|
||
tooltip: 'Pivoter vers la gauche',
|
||
onPressed: () => _rotateBy(-_rotationStep),
|
||
),
|
||
const SizedBox(width: 10),
|
||
Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
_buildCropDirButton(Icons.keyboard_arrow_up, () => _nudge(0, -1)),
|
||
Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
_buildCropDirButton(Icons.keyboard_arrow_left, () => _nudge(-1, 0)),
|
||
const SizedBox(width: 28),
|
||
_buildCropDirButton(Icons.keyboard_arrow_right, () => _nudge(1, 0)),
|
||
],
|
||
),
|
||
_buildCropDirButton(Icons.keyboard_arrow_down, () => _nudge(0, 1)),
|
||
],
|
||
),
|
||
const SizedBox(width: 10),
|
||
_buildRotationButton(
|
||
icon: Icons.rotate_right,
|
||
sign: '+',
|
||
iconFirst: false,
|
||
tooltip: 'Pivoter vers la droite',
|
||
onPressed: () => _rotateBy(_rotationStep),
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildCropDirButton(IconData icon, VoidCallback onPressed) {
|
||
return Container(
|
||
decoration: BoxDecoration(color: Colors.black54, borderRadius: BorderRadius.circular(6)),
|
||
margin: const EdgeInsets.all(2),
|
||
child: IconButton(
|
||
icon: Icon(icon, color: Colors.white, size: 22),
|
||
onPressed: onPressed,
|
||
padding: EdgeInsets.zero,
|
||
constraints: const BoxConstraints(minWidth: 32, minHeight: 32),
|
||
),
|
||
);
|
||
}
|
||
|
||
// Bouton de rotation : l'icône de sens est accolée au signe − / +.
|
||
Widget _buildRotationButton({
|
||
required IconData icon,
|
||
required String sign,
|
||
required bool iconFirst,
|
||
required String tooltip,
|
||
required VoidCallback onPressed,
|
||
}) {
|
||
final content = [
|
||
Icon(icon, color: Colors.white70, size: 20),
|
||
const SizedBox(width: 4),
|
||
Text(
|
||
sign,
|
||
style: const TextStyle(color: Colors.white, fontSize: 22, fontWeight: FontWeight.bold),
|
||
),
|
||
];
|
||
|
||
return Tooltip(
|
||
message: tooltip,
|
||
child: Material(
|
||
color: Colors.black54,
|
||
borderRadius: BorderRadius.circular(6),
|
||
child: InkWell(
|
||
onTap: onPressed,
|
||
borderRadius: BorderRadius.circular(6),
|
||
child: Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
|
||
child: Row(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: iconFirst ? content : content.reversed.toList(),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
void _nudge(double dx, double dy) {
|
||
setState(() {
|
||
_offset = _offset + Offset(dx, dy);
|
||
});
|
||
}
|
||
|
||
/// Pivote l'image de [delta] degrés, dans les mêmes bornes que la jauge.
|
||
///
|
||
/// La valeur est arrondie au dixième pour rester calée sur les crans de la
|
||
/// jauge (300 divisions sur 30°) et sur l'affichage.
|
||
void _rotateBy(double delta) {
|
||
setState(() {
|
||
final value = (_rotation + delta).clamp(_minRotation, _maxRotation);
|
||
_rotation = (value * 10).roundToDouble() / 10;
|
||
});
|
||
}
|
||
|
||
void _onScaleStart(ScaleStartDetails details) {
|
||
_baseScale = _scale;
|
||
_startFocalPoint = details.focalPoint;
|
||
_startOffset = _offset;
|
||
}
|
||
|
||
void _onScaleUpdate(ScaleUpdateDetails details) {
|
||
setState(() {
|
||
_scale = (_baseScale * details.scale).clamp(0.8, 8.0);
|
||
final delta = details.focalPoint - _startFocalPoint;
|
||
_offset = _startOffset + delta;
|
||
});
|
||
}
|
||
|
||
Future<void> _onCropConfirm() async {
|
||
setState(() => _isLoading = true);
|
||
try {
|
||
// Facteur d'échelle affichage/source (BoxFit.cover) — identique à celui
|
||
// utilisé pour afficher l'image dans l'aperçu : l'image remplit la zone,
|
||
// le débord est rogné, donc l'échelle est le MAX des deux ratios d'axe.
|
||
final double displayPerSourcePx = math.max(
|
||
_viewportSize.width / _imageSize!.width,
|
||
_viewportSize.height / _imageSize!.height,
|
||
);
|
||
|
||
// Découpe calée sur la fenêtre de visée : le DÉPLACEMENT (pan) et la
|
||
// ROTATION sont pris en compte, le ZOOM est ignoré, et les débordements
|
||
// sont remplis en noir → la position choisie est respectée à l'identique.
|
||
final croppedImagePath = await _cropService.cropViewport(
|
||
sourcePath: widget.imagePath,
|
||
offsetDx: _offset.dx,
|
||
offsetDy: _offset.dy,
|
||
displayPerSourcePx: displayPerSourcePx,
|
||
cropSizeDisplay: _cropSize,
|
||
// Le zoom sert UNIQUEMENT à viser le bon point (mapping du décalage) ;
|
||
// il n'agrandit pas le rendu de sortie.
|
||
zoomScale: _scale,
|
||
rotationDegrees: _rotation,
|
||
);
|
||
|
||
const targetCenterX = 0.5;
|
||
const targetCenterY = 0.5;
|
||
|
||
if (!mounted) return;
|
||
|
||
Navigator.pushReplacement(
|
||
context,
|
||
MaterialPageRoute(
|
||
builder: (_) => AnalysisScreen(
|
||
imagePath: croppedImagePath,
|
||
// AJOUT : on conserve la SOURCE non rognée pour les retours arrière.
|
||
// Sans cela, revenir au crop repartait de l'image déjà rognée à 85%,
|
||
// provoquant un zoom cumulatif (0.85 x 0.85 x ...) à chaque aller-retour.
|
||
originalImagePath: widget.imagePath,
|
||
targetType: widget.targetType,
|
||
initialCenterX: targetCenterX,
|
||
initialCenterY: targetCenterY,
|
||
cropScale: 1.0,
|
||
cropOffset: Offset.zero,
|
||
cropRotation: 0.0,
|
||
),
|
||
),
|
||
);
|
||
} catch (e) {
|
||
if (mounted) {
|
||
setState(() => _isLoading = false);
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(content: Text('Erreur de découpe : $e'), backgroundColor: AppTheme.errorColor),
|
||
);
|
||
}
|
||
}
|
||
}
|
||
|
||
} |