link to pr

* fix: missing aspect ratio options in mobile editor

* fix: smooth rotation

* chore: comments

* chore: better preset management and tooling

* lint

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>

docs/docs/developer/setup.md

@@ -30,7 +30,7 @@ This environment includes the services below. Additional details are available i
 - Redis
 - PostgreSQL development database with exposed port `5432` so you can use any database client to access it
 
-All the services are packaged to run as with single Docker Compose command.
+All the services are packaged to run with a single Docker Compose command.
 
 :::tip mise
 [mise](https://mise.jdx.dev) is used throughout the project to manage tool versions and run tasks. [Install mise](https://mise.jdx.dev/installing-mise.html), then from the repo root run `mise trust` and `mise install` to get all required tools. Tasks for each service can be run from the repo root using `mise //namespace:task` (e.g. `mise //server:lint`). To list all available tasks, run `mise tasks ls --all`.
@@ -41,7 +41,7 @@ All the services are packaged to run as with single Docker Compose command.
 1. Clone the project repo.
 2. Run `cp docker/example.env docker/.env`.
 3. Edit `docker/.env` to provide values for the required variable `UPLOAD_LOCATION`.
-4. Install dependencies - `pnpm i`
+4. Install dependencies - `mise x -- pnpm i`
 5. From the root directory, run:
 
 ```bash title="Start development server"
@@ -52,7 +52,7 @@ mise dev
 
 All the services will be started with hot-reloading enabled for a quick feedback loop.
 
-You can access the web from `http://your-machine-ip:3000` or `http://localhost:3000` and access the server from the mobile app at `http://your-machine-ip:3000/api`
+You can access the web from `http://your-machine-ip:3000` or `http://localhost:3000` and access the server from the mobile app at `http://your-machine-ip:3000`
 
 **Notes:**
 

mobile/lib/constants/aspect_ratios.dart

@@ -1,19 +1,65 @@
 import 'package:flutter/material.dart';
 
-enum AspectRatioPreset {
-  free(ratio: null, label: 'Free', icon: Icons.crop_free_rounded),
-  square(ratio: 1.0, label: '1:1', icon: Icons.crop_square_rounded),
-  ratio16x9(ratio: 16 / 9, label: '16:9', icon: Icons.crop_16_9_rounded),
-  ratio3x2(ratio: 3 / 2, label: '3:2', icon: Icons.crop_3_2_rounded),
-  ratio7x5(ratio: 7 / 5, label: '7:5', icon: Icons.crop_7_5_rounded),
-  ratio9x16(ratio: 9 / 16, label: '9:16', icon: Icons.crop_16_9_rounded, iconRotated: true),
-  ratio2x3(ratio: 2 / 3, label: '2:3', icon: Icons.crop_3_2_rounded, iconRotated: true),
-  ratio5x7(ratio: 5 / 7, label: '5:7', icon: Icons.crop_7_5_rounded, iconRotated: true);
+class CropAspectRatio {
+  final int? numerator;
+  final int? denominator;
 
-  final double? ratio;
-  final String label;
-  final IconData icon;
-  final bool iconRotated;
+  final String? customLabel;
+  final IconData? icon;
 
-  const AspectRatioPreset({required this.ratio, required this.label, required this.icon, this.iconRotated = false});
+  const CropAspectRatio({this.numerator, this.denominator, this.customLabel, this.icon});
+
+  static const free = CropAspectRatio(customLabel: "Free", icon: Icons.crop_free);
+  static const original = CropAspectRatio(customLabel: "Original", icon: Icons.crop_original);
+
+  String get label {
+    return customLabel ?? (numerator != null && denominator != null ? '$numerator:$denominator' : 'Free');
+  }
+
+  bool get hasFlippedVariant => numerator != denominator;
+  double? get ratio => (numerator != null && denominator != null) ? numerator! / denominator! : null;
+
+  CropAspectRatio get flipped {
+    return CropAspectRatio(numerator: denominator, denominator: numerator, customLabel: customLabel, icon: icon);
+  }
+
+  @override
+  bool operator ==(Object other) {
+    if (identical(this, other)) {
+      return true;
+    }
+
+    return other is CropAspectRatio &&
+        other.numerator == numerator &&
+        other.denominator == denominator &&
+        other.customLabel == customLabel &&
+        other.icon == icon;
+  }
+
+  @override
+  int get hashCode {
+    return numerator.hashCode ^ denominator.hashCode ^ customLabel.hashCode ^ icon.hashCode;
+  }
 }
+
+const aspectRatioFree = CropAspectRatio(customLabel: "Free", icon: Icons.crop_free);
+const aspectRatioOriginal = CropAspectRatio(customLabel: "Original", icon: Icons.crop_original);
+
+final aspectRatioPresets = [
+  CropAspectRatio.free,
+  CropAspectRatio.original,
+
+  const CropAspectRatio(numerator: 1, denominator: 1),
+
+  // lanscape
+  const CropAspectRatio(numerator: 16, denominator: 9),
+  const CropAspectRatio(numerator: 3, denominator: 2),
+  const CropAspectRatio(numerator: 7, denominator: 5),
+  const CropAspectRatio(numerator: 4, denominator: 3),
+
+  // portrait
+  const CropAspectRatio(numerator: 16, denominator: 9).flipped,
+  const CropAspectRatio(numerator: 3, denominator: 2).flipped,
+  const CropAspectRatio(numerator: 7, denominator: 5).flipped,
+  const CropAspectRatio(numerator: 4, denominator: 3).flipped,
+];

mobile/lib/presentation/pages/edit/drift_edit.page.dart

@@ -154,7 +154,7 @@ class _DriftEditImagePageState extends ConsumerState<DriftEditImagePage> with Ti
 }
 
 class _AspectRatioButton extends StatelessWidget {
-  final AspectRatioPreset ratio;
+  final CropAspectRatio ratio;
   final bool isSelected;
   final VoidCallback onPressed;
 
@@ -162,15 +162,16 @@ class _AspectRatioButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final color = isSelected ? context.primaryColor : context.themeData.iconTheme.color;
+
     return Column(
       mainAxisSize: MainAxisSize.max,
       children: [
         IconButton(
           iconSize: 36,
-          icon: Transform.rotate(
-            angle: ratio.iconRotated ? pi / 2 : 0,
-            child: Icon(ratio.icon, color: isSelected ? context.primaryColor : context.themeData.iconTheme.color),
-          ),
+          icon: ratio.ratio != null
+              ? _AspectRatioRect(ratio: ratio.ratio!, color: color)
+              : Icon(ratio.icon, color: color),
           onPressed: onPressed,
         ),
         Text(ratio.label, style: context.textTheme.displayMedium),
@@ -179,6 +180,32 @@ class _AspectRatioButton extends StatelessWidget {
   }
 }
 
+class _AspectRatioRect extends StatelessWidget {
+  final double ratio;
+  final Color? color;
+
+  const _AspectRatioRect({required this.ratio, required this.color});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 28,
+      height: 28,
+      child: Center(
+        child: AspectRatio(
+          aspectRatio: ratio,
+          child: Container(
+            decoration: BoxDecoration(
+              border: Border.all(color: color ?? Colors.transparent, width: 3),
+              borderRadius: const BorderRadius.all(Radius.circular(4)),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 class _AspectRatioSelector extends ConsumerWidget {
   const _AspectRatioSelector();
 
@@ -187,22 +214,16 @@ class _AspectRatioSelector extends ConsumerWidget {
     final editorState = ref.watch(editorStateProvider);
     final editorNotifier = ref.read(editorStateProvider.notifier);
 
-    // the whole crop view is rotated, so we need to swap the aspect ratio when the rotation is 90 or 270 degrees
-    double? selectedAspectRatio = editorState.aspectRatio;
-    if (editorState.rotationAngle % 180 != 0 && selectedAspectRatio != null) {
-      selectedAspectRatio = 1 / selectedAspectRatio;
-    }
-
     return SingleChildScrollView(
       scrollDirection: Axis.horizontal,
       child: Row(
-        children: AspectRatioPreset.values.map((entry) {
+        children: aspectRatioPresets.map((entry) {
           return Padding(
             padding: const EdgeInsets.symmetric(horizontal: 8.0),
             child: _AspectRatioButton(
               ratio: entry,
-              isSelected: selectedAspectRatio == entry.ratio,
-              onPressed: () => editorNotifier.setAspectRatio(entry.ratio),
+              isSelected: editorState.aspectRatio == entry,
+              onPressed: () => editorNotifier.setAspectRatio(entry),
             ),
           );
         }).toList(),
@@ -357,8 +378,22 @@ class _EditorPreviewState extends ConsumerState<_EditorPreview> with TickerProvi
     final editorState = ref.watch(editorStateProvider);
     final editorNotifier = ref.read(editorStateProvider.notifier);
 
-    ref.listen(editorStateProvider, (_, current) {
-      cropController.aspectRatio = current.aspectRatio;
+    ref.listen(editorStateProvider, (previous, current) {
+      // Only re-apply the aspect ratio when it changes, otherwise the crop rect will shrink on every rotation
+      if (previous?.aspectRatio != current.aspectRatio) {
+        double? ratio;
+
+        ratio = switch (current.aspectRatio) {
+          CropAspectRatio.original => current.originalWidth / current.originalHeight,
+          _ => current.aspectRatio.ratio,
+        };
+
+        if (current.rotationAngle % 180 != 0) {
+          ratio = ratio != null ? 1 / ratio : null;
+        }
+
+        cropController.aspectRatio = ratio;
+      }
 
       if (cropController.crop != current.crop) {
         cropController.crop = current.crop;
@@ -386,7 +421,9 @@ class _EditorPreviewState extends ConsumerState<_EditorPreview> with TickerProvi
                   1.0,
                   1.0,
                 ),
-              child: Container(
+              child: AnimatedContainer(
+                duration: editorState.animationDuration,
+                curve: Curves.easeInOut,
                 padding: const EdgeInsets.all(10),
                 width: (editorState.rotationAngle % 180 == 0) ? baseWidth : baseHeight,
                 height: (editorState.rotationAngle % 180 == 0) ? baseHeight : baseWidth,

mobile/lib/presentation/pages/edit/editor.provider.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/services.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:immich_mobile/constants/aspect_ratios.dart';
 import 'package:immich_mobile/domain/models/asset_edit.model.dart';
 import 'package:immich_mobile/domain/models/exif.model.dart';
 import 'package:immich_mobile/utils/editor.utils.dart';
@@ -60,13 +61,8 @@ class EditorProvider extends Notifier<EditorState> {
     state = state.copyWith(crop: crop, hasUnsavedEdits: true);
   }
 
-  void setAspectRatio(double? aspectRatio) {
-    if (aspectRatio != null && state.rotationAngle % 180 != 0) {
-      // When rotated 90 or 270 degrees, swap width and height for aspect ratio calculations
-      aspectRatio = 1 / aspectRatio;
-    }
-
-    state = state.copyWith(aspectRatio: aspectRatio);
+  void setAspectRatio(CropAspectRatio preset) {
+    state = state.copyWith(aspectRatio: preset, hasUnsavedEdits: true);
   }
 
   void resetEdits() {
@@ -76,19 +72,19 @@ class EditorProvider extends Notifier<EditorState> {
       flipHorizontal: false,
       flipVertical: false,
       crop: const Rect.fromLTRB(0, 0, 1, 1),
-      aspectRatio: null,
+      aspectRatio: CropAspectRatio.free,
       hasUnsavedEdits: true,
     );
   }
 
   void rotateCCW() {
     _animateRotation(state.rotationAngle - 90);
-    state = state.copyWith(hasUnsavedEdits: true);
+    state = state.copyWith(aspectRatio: state.aspectRatio.flipped, hasUnsavedEdits: true);
   }
 
   void rotateCW() {
     _animateRotation(state.rotationAngle + 90);
-    state = state.copyWith(hasUnsavedEdits: true);
+    state = state.copyWith(aspectRatio: state.aspectRatio.flipped, hasUnsavedEdits: true);
   }
 
   void flipHorizontally() {
@@ -117,7 +113,7 @@ class EditorState {
   final bool flipHorizontal;
   final bool flipVertical;
   final Rect crop;
-  final double? aspectRatio;
+  final CropAspectRatio aspectRatio;
 
   final int originalWidth;
   final int originalHeight;
@@ -132,7 +128,7 @@ class EditorState {
     bool? flipHorizontal,
     bool? flipVertical,
     Rect? crop,
-    this.aspectRatio,
+    CropAspectRatio? aspectRatio,
     int? originalWidth,
     int? originalHeight,
     Duration? animationDuration,
@@ -145,6 +141,7 @@ class EditorState {
        originalWidth = originalWidth ?? 0,
        originalHeight = originalHeight ?? 0,
        crop = crop ?? const Rect.fromLTRB(0, 0, 1, 1),
+       aspectRatio = aspectRatio ?? CropAspectRatio.free,
        hasUnsavedEdits = hasUnsavedEdits ?? false;
 
   EditorState copyWith({
@@ -152,7 +149,7 @@ class EditorState {
     int? rotationAngle,
     bool? flipHorizontal,
     bool? flipVertical,
-    double? aspectRatio = double.infinity,
+    CropAspectRatio? aspectRatio,
     int? originalWidth,
     int? originalHeight,
     Duration? animationDuration,
@@ -164,7 +161,7 @@ class EditorState {
       rotationAngle: rotationAngle ?? this.rotationAngle,
       flipHorizontal: flipHorizontal ?? this.flipHorizontal,
       flipVertical: flipVertical ?? this.flipVertical,
-      aspectRatio: aspectRatio == double.infinity ? this.aspectRatio : aspectRatio,
+      aspectRatio: aspectRatio ?? this.aspectRatio,
       animationDuration: animationDuration ?? this.animationDuration,
       originalWidth: originalWidth ?? this.originalWidth,
       originalHeight: originalHeight ?? this.originalHeight,

mobile/pubspec.lock

@@ -309,8 +309,8 @@ packages:
     dependency: "direct main"
     description:
       path: "pkgs/cupertino_http"
-      ref: a0a933358517c6d01cff37fc2a2752ee2d744a3c
-      resolved-ref: a0a933358517c6d01cff37fc2a2752ee2d744a3c
+      ref: "58b03c756b81d16b3975a8ae4b91d25360123bb5"
+      resolved-ref: "58b03c756b81d16b3975a8ae4b91d25360123bb5"
       url: "https://github.com/mertalev/http"
     source: git
     version: "3.0.0-wip"
@@ -1158,12 +1158,13 @@ packages:
     source: hosted
     version: "0.5.0"
   objective_c:
-    dependency: transitive
+    dependency: "direct overridden"
     description:
-      name: objective_c
-      sha256: "6cb691c686fa2838c6deb34980d426145c2a5d537491cb83d463c33cdbc726ed"
-      url: "https://pub.dev"
-    source: hosted
+      path: "pkgs/objective_c"
+      ref: "2915556701f4734a784222f290a82adb1b101682"
+      resolved-ref: "2915556701f4734a784222f290a82adb1b101682"
+      url: "https://github.com/mertalev/native"
+    source: git
     version: "9.4.1"
   octo_image:
     dependency: "direct main"

mobile/pubspec.yaml

@@ -84,7 +84,7 @@ dependencies:
   cupertino_http:
     git:
       url: https://github.com/mertalev/http
-      ref: 'a0a933358517c6d01cff37fc2a2752ee2d744a3c' # https://github.com/dart-lang/http/pull/1876
+      ref: '58b03c756b81d16b3975a8ae4b91d25360123bb5'
       path: pkgs/cupertino_http/
   ok_http:
     git:
@@ -114,6 +114,11 @@ dev_dependencies:
 # Pin bonsoir to 5.x until cast releases a version compatible with bonsoir 6.x.
 dependency_overrides:
   bonsoir: ^5.1.11
+  objective_c:
+    git:
+      url: https://github.com/mertalev/native
+      ref: '2915556701f4734a784222f290a82adb1b101682' # https://github.com/dart-lang/native/pull/3458
+      path: pkgs/objective_c/
 
 flutter:
   uses-material-design: true