fix: handle edits when creating face

* fix(mobile): hide latest version if disabled

If the version check feature is disabled, the server will currently send
stale data to the client. In addition to no longer sending stale data,
the client should also not show the latest version if the feature is
disabled.

This complements the server PR #25688.

* lint

---------

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

deployment/mise.toml

@@ -1,6 +1,6 @@
 [tools]
 terragrunt = "0.98.0"
-opentofu = "1.10.7"
+opentofu = "1.11.4"
 
 [tasks."tg:fmt"]
 run = "terragrunt hclfmt"

mise.toml

@@ -18,8 +18,8 @@ node = "24.13.0"
 flutter = "3.35.7"
 pnpm = "10.28.0"
 terragrunt = "0.98.0"
-opentofu = "1.10.7"
-java = "25.0.1"
+opentofu = "1.11.4"
+java = "21.0.2"
 
 [tools."github:CQLabs/homebrew-dcm"]
 version = "1.30.0"

mobile/.fvmrc

@@ -1,3 +0,0 @@
-{
-  "flutter": "3.35.7"
-}

mobile/.gitignore

@@ -55,8 +55,5 @@ default.isar
 default.isar.lock
 libisar.so
 
-# FVM Version
-.fvm/
-
 # Translation file
-lib/generated/
+lib/generated/

mobile/.vscode/settings.json

@@ -2,7 +2,9 @@
   "dart.flutterSdkPath": ".fvm/versions/3.35.7",
   "dart.lineLength": 120,
   "[dart]": {
-    "editor.rulers": [120]
+    "editor.rulers": [
+      120
+    ]
   },
   "search.exclude": {
     "**/.fvm": true

mobile/README.md

@@ -4,10 +4,12 @@ The Immich mobile app is a Flutter-based solution leveraging the Isar Database f
 
 ## Setup
 
-1. Setup Flutter toolchain using FVM.
-2. Run `flutter pub get` to install the dependencies.
-3. Run `make translation` to generate the translation file.
-4. Run `fvm flutter run` to start the app.
+1. [Install mise](https://mise.jdx.dev/installing-mise.html).
+2. Change to the immich directory and trust the mise config with `mise trust`.
+3. Install tools with mise: `mise install`.
+4. Run `flutter pub get` to install the dependencies.
+5. Run `make translation` to generate the translation file.
+6. Run `flutter run` to start the app.
 
 ## Translation
 
@@ -29,7 +31,7 @@ dcm analyze lib
 ```
 
 [DCM](https://dcm.dev/) is a vendor tool that needs to be downloaded manually to run locally.
-Immich was provided an open source license. 
+Immich was provided an open source license.
 To use it, it is important that you do not have an active free tier license (can be verified with `dcm license`).
 If you have write-access to the Immich repository directly, running dcm in your clone should just work.
 If you are working on a clone of a fork, you need to connect to the main Immich repository as remote first:

mobile/lib/models/server_info/server_info.model.dart

@@ -20,7 +20,7 @@ enum VersionStatus {
 
 class ServerInfo {
   final ServerVersion serverVersion;
-  final ServerVersion latestVersion;
+  final ServerVersion? latestVersion;
   final ServerFeatures serverFeatures;
   final ServerConfig serverConfig;
   final ServerDiskInfo serverDiskInfo;

mobile/lib/providers/server_info.provider.dart

@@ -15,7 +15,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
     : super(
         const ServerInfo(
           serverVersion: ServerVersion(major: 0, minor: 0, patch: 0),
-          latestVersion: ServerVersion(major: 0, minor: 0, patch: 0),
+          latestVersion: null,
           serverFeatures: ServerFeatures(map: true, trash: true, oauthEnabled: false, passwordLogin: true),
           serverConfig: ServerConfig(
             trashDays: 30,
@@ -43,7 +43,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
     try {
       final serverVersion = await _serverInfoService.getServerVersion();
 
-      // using isClientOutOfDate since that will show to users reguardless of if they are an admin
+      // using isClientOutOfDate since that will show to users regardless of if they are an admin
       if (serverVersion == null) {
         state = state.copyWith(versionStatus: VersionStatus.error);
         return;
@@ -76,7 +76,7 @@ class ServerInfoNotifier extends StateNotifier<ServerInfo> {
     state = state.copyWith(versionStatus: VersionStatus.upToDate);
   }
 
-  handleReleaseInfo(ServerVersion serverVersion, ServerVersion latestVersion) {
+  handleReleaseInfo(ServerVersion serverVersion, ServerVersion? latestVersion) {
     // Update local server version
     _checkServerVersionMismatch(serverVersion, latestVersion: latestVersion);
   }

mobile/lib/widgets/common/app_bar_dialog/app_bar_server_info.dart

@@ -170,50 +170,52 @@ class AppBarServerInfo extends HookConsumerWidget {
                   ),
                 ],
               ),
-              const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
-              Row(
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  Expanded(
-                    child: Padding(
-                      padding: const EdgeInsets.only(left: 10.0),
-                      child: Row(
-                        children: [
-                          if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
-                            const Padding(
-                              padding: EdgeInsets.only(right: 5.0),
-                              child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+              if (serverInfoState.latestVersion != null) ...[
+                const Padding(padding: EdgeInsets.symmetric(horizontal: 10), child: Divider(thickness: 1)),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Expanded(
+                      child: Padding(
+                        padding: const EdgeInsets.only(left: 10.0),
+                        child: Row(
+                          children: [
+                            if (serverInfoState.versionStatus == VersionStatus.serverOutOfDate)
+                              const Padding(
+                                padding: EdgeInsets.only(right: 5.0),
+                                child: Icon(Icons.info, color: Color.fromARGB(255, 243, 188, 106), size: 12),
+                              ),
+                            Text(
+                              "latest_version".tr(),
+                              style: TextStyle(
+                                fontSize: titleFontSize,
+                                color: context.textTheme.labelSmall?.color,
+                                fontWeight: FontWeight.w500,
+                              ),
                             ),
-                          Text(
-                            "latest_version".tr(),
-                            style: TextStyle(
-                              fontSize: titleFontSize,
-                              color: context.textTheme.labelSmall?.color,
-                              fontWeight: FontWeight.w500,
-                            ),
-                          ),
-                        ],
-                      ),
-                    ),
-                  ),
-                  Expanded(
-                    flex: 0,
-                    child: Padding(
-                      padding: const EdgeInsets.only(right: 10.0),
-                      child: Text(
-                        serverInfoState.latestVersion.major > 0
-                            ? "${serverInfoState.latestVersion.major}.${serverInfoState.latestVersion.minor}.${serverInfoState.latestVersion.patch}"
-                            : "--",
-                        style: TextStyle(
-                          fontSize: contentFontSize,
-                          color: context.colorScheme.onSurfaceSecondary,
-                          fontWeight: FontWeight.bold,
+                          ],
                         ),
                       ),
                     ),
-                  ),
-                ],
-              ),
+                    Expanded(
+                      flex: 0,
+                      child: Padding(
+                        padding: const EdgeInsets.only(right: 10.0),
+                        child: Text(
+                          serverInfoState.latestVersion!.major > 0
+                              ? "${serverInfoState.latestVersion!.major}.${serverInfoState.latestVersion!.minor}.${serverInfoState.latestVersion!.patch}"
+                              : "--",
+                          style: TextStyle(
+                            fontSize: contentFontSize,
+                            color: context.colorScheme.onSurfaceSecondary,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ],
             ],
           ),
         ),

mobile/lib/widgets/forms/login/login_form.dart

@@ -414,6 +414,7 @@ class LoginForm extends HookConsumerWidget {
                     keyboardAction: TextInputAction.next,
                     keyboardType: TextInputType.url,
                     autofillHints: const [AutofillHints.url],
+                    autoCorrect: false,
                     onSubmit: (ctx, _) => ImmichForm.of(ctx).submit(),
                   ),
                 ),

mobile/packages/ui/lib/src/components/text_input.dart

@@ -12,6 +12,7 @@ class ImmichTextInput extends StatefulWidget {
   final List<String>? autofillHints;
   final Widget? suffixIcon;
   final bool obscureText;
+  final bool autoCorrect;
 
   const ImmichTextInput({
     super.key,
@@ -26,6 +27,7 @@ class ImmichTextInput extends StatefulWidget {
     this.autofillHints,
     this.suffixIcon,
     this.obscureText = false,
+    this.autoCorrect = true,
   });
 
   @override
@@ -79,6 +81,7 @@ class _ImmichTextInputState extends State<ImmichTextInput> {
       validator: _validateInput,
       keyboardType: widget.keyboardType,
       textInputAction: widget.keyboardAction,
+      autocorrect: widget.autoCorrect,
       autofillHints: widget.autofillHints,
       onTap: () => setState(() => _error = null),
       onTapOutside: (_) => _focusNode.unfocus(),

server/src/services/person.service.ts

@@ -44,6 +44,7 @@ import { getDimensions } from 'src/utils/asset.util';
 import { ImmichFileResponse } from 'src/utils/file';
 import { mimeTypes } from 'src/utils/mime-types';
 import { isFacialRecognitionEnabled } from 'src/utils/misc';
+import { Point, transformPoints } from 'src/utils/transform';
 
 @Injectable()
 export class PersonService extends BaseService {
@@ -634,15 +635,50 @@ export class PersonService extends BaseService {
       this.requireAccess({ auth, permission: Permission.PersonRead, ids: [dto.personId] }),
     ]);
 
+    const asset = await this.assetRepository.getById(dto.assetId, { edits: true, exifInfo: true });
+    if (!asset) {
+      throw new NotFoundException('Asset not found');
+    }
+
+    const edits = asset.edits || [];
+
+    let p1: Point = { x: dto.x, y: dto.y };
+    let p2: Point = { x: dto.x + dto.width, y: dto.y + dto.height };
+
+    // the coordinates received from the client are based on the edited preview image
+    // we need to convert them to the coordinate space of the original unedited image
+    if (edits.length > 0) {
+      if (!asset.width || !asset.height || !asset.exifInfo?.exifImageWidth || !asset.exifInfo?.exifImageHeight) {
+        throw new BadRequestException('Asset does not have valid dimensions');
+      }
+
+      // convert from preview to full dimensions
+      const scaleFactor = asset.width / dto.imageWidth;
+      p1 = { x: p1.x * scaleFactor, y: p1.y * scaleFactor };
+      p2 = { x: p2.x * scaleFactor, y: p2.y * scaleFactor };
+
+      const {
+        points: [invertedP1, invertedP2],
+      } = transformPoints([p1, p2], edits, { width: asset.width, height: asset.height }, { inverse: true });
+
+      // make sure p1 is top-left and p2 is bottom-right
+      p1 = { x: Math.min(invertedP1.x, invertedP2.x), y: Math.min(invertedP1.y, invertedP2.y) };
+      p2 = { x: Math.max(invertedP1.x, invertedP2.x), y: Math.max(invertedP1.y, invertedP2.y) };
+
+      // now coordinates are in original image space
+      dto.imageHeight = asset.exifInfo.exifImageHeight;
+      dto.imageWidth = asset.exifInfo.exifImageWidth;
+    }
+
     await this.personRepository.createAssetFace({
       personId: dto.personId,
       assetId: dto.assetId,
       imageHeight: dto.imageHeight,
       imageWidth: dto.imageWidth,
-      boundingBoxX1: dto.x,
-      boundingBoxX2: dto.x + dto.width,
-      boundingBoxY1: dto.y,
-      boundingBoxY2: dto.y + dto.height,
+      boundingBoxX1: Math.round(p1.x),
+      boundingBoxX2: Math.round(p2.x),
+      boundingBoxY1: Math.round(p1.y),
+      boundingBoxY2: Math.round(p2.y),
       sourceType: SourceType.Manual,
     });
   }

server/src/services/version.service.spec.ts

@@ -130,7 +130,7 @@ describe(VersionService.name, () => {
     });
   });
 
-  describe('onWebsocketConnectionEvent', () => {
+  describe('onWebsocketConnection', () => {
     it('should send on_server_version client event', async () => {
       await sut.onWebsocketConnection({ userId: '42' });
       expect(mocks.websocket.clientSend).toHaveBeenCalledWith('on_server_version', '42', expect.any(SemVer));
@@ -143,5 +143,12 @@ describe(VersionService.name, () => {
       expect(mocks.websocket.clientSend).toHaveBeenCalledWith('on_server_version', '42', expect.any(SemVer));
       expect(mocks.websocket.clientSend).toHaveBeenCalledWith('on_new_release', '42', expect.any(Object));
     });
+
+    it('should not send a release notification when the version check is disabled', async () => {
+      mocks.systemMetadata.get.mockResolvedValueOnce({ newVersionCheck: { enabled: false } });
+      await sut.onWebsocketConnection({ userId: '42' });
+      expect(mocks.websocket.clientSend).toHaveBeenCalledWith('on_server_version', '42', expect.any(SemVer));
+      expect(mocks.websocket.clientSend).not.toHaveBeenCalledWith('on_new_release', '42', expect.any(Object));
+    });
   });
 });

server/src/services/version.service.ts

@@ -105,6 +105,12 @@ export class VersionService extends BaseService {
   @OnEvent({ name: 'WebsocketConnect' })
   async onWebsocketConnection({ userId }: ArgOf<'WebsocketConnect'>) {
     this.websocketRepository.clientSend('on_server_version', userId, serverVersion);
+
+    const { newVersionCheck } = await this.getConfig({ withCache: true });
+    if (!newVersionCheck.enabled) {
+      return;
+    }
+
     const metadata = await this.systemMetadataRepository.get(SystemMetadataKey.VersionCheckState);
     if (metadata) {
       this.websocketRepository.clientSend('on_new_release', userId, asNotification(metadata));

server/src/utils/database-backups.ts

@@ -59,7 +59,6 @@ export async function buildPostgresLaunchArguments(
 ): Promise<{
   bin: string;
   args: string[];
-  databaseUsername: string;
   databasePassword: string;
   databaseVersion: string;
   databaseMajorVersion?: number;
@@ -74,7 +73,6 @@ export async function buildPostgresLaunchArguments(
   const databaseMajorVersion = databaseSemver?.major;
 
   const args: string[] = [];
-  let databaseUsername;
 
   if (isUrlConnection) {
     if (bin !== 'pg_dump') {
@@ -87,20 +85,18 @@ export async function buildPostgresLaunchArguments(
       // remove known bad parameters
       parsedUrl.searchParams.delete('uselibpqcompat');
 
-      databaseUsername = parsedUrl.username;
+      if (options.username) {
+        parsedUrl.username = options.username;
+      }
+
       url = parsedUrl.toString();
     }
 
-    // assume typical values if we can't parse URL or not present
-    databaseUsername ??= 'postgres';
-
     args.push(url);
   } else {
-    databaseUsername = databaseConfig.username;
-
     args.push(
       '--username',
-      databaseConfig.username,
+      options.username ?? databaseConfig.username,
       '--host',
       databaseConfig.host,
       '--port',
@@ -155,7 +151,6 @@ export async function buildPostgresLaunchArguments(
   return {
     bin: `/usr/lib/postgresql/${databaseMajorVersion}/bin/${bin}`,
     args,
-    databaseUsername,
     databasePassword: isUrlConnection ? new URL(databaseConfig.url).password : databaseConfig.password,
     databaseVersion,
     databaseMajorVersion,
@@ -212,35 +207,44 @@ const SQL_DROP_CONNECTIONS = `
     AND pid <> pg_backend_pid();
 `;
 
-const SQL_RESET_SCHEMA = (username: string) => `
+const SQL_RESET_SCHEMA = `
   -- re-create the default schema
   DROP SCHEMA public CASCADE;
   CREATE SCHEMA public;
 
   -- restore access to schema
-  GRANT ALL ON SCHEMA public TO "${username}";
+  GRANT ALL ON SCHEMA public TO postgres;
   GRANT ALL ON SCHEMA public TO public;
 `;
 
-async function* sql(inputStream: Readable, databaseUsername: string, isPgClusterDump: boolean) {
+async function* sql(inputStream: Readable, isPgClusterDump: boolean) {
   yield SQL_DROP_CONNECTIONS;
   yield isPgClusterDump
-    ? // it is likely the dump contains SQL to try to drop the currently active
-      // database to ensure we have a fresh slate; if the `postgres` database exists
-      // then prefer to switch before continuing otherwise this will just silently fail
-      String.raw`
+    ? String.raw`
         \c postgres
       `
-    : SQL_RESET_SCHEMA(databaseUsername);
+    : SQL_RESET_SCHEMA;
 
   for await (const chunk of inputStream) {
     yield chunk;
   }
 }
 
-async function* sqlRollback(inputStream: Readable, databaseUsername: string) {
+async function* sqlRollback(inputStream: Readable, isPgClusterDump: boolean) {
   yield SQL_DROP_CONNECTIONS;
-  yield SQL_RESET_SCHEMA(databaseUsername);
+
+  if (isPgClusterDump) {
+    yield String.raw`
+      -- try to create database
+      -- may fail but script will continue running
+      CREATE DATABASE immich;
+
+      -- switch to database / newly created database
+      \c immich
+    `;
+  }
+
+  yield SQL_RESET_SCHEMA;
 
   for await (const chunk of inputStream) {
     yield chunk;
@@ -269,11 +273,12 @@ export async function restoreDatabaseBackup(
       isPgClusterDump = true;
     }
 
-    const { bin, args, databaseUsername, databasePassword, databaseMajorVersion } = await buildPostgresLaunchArguments(
+    const { bin, args, databasePassword, databaseMajorVersion } = await buildPostgresLaunchArguments(
       { logger, database: databaseRepository, ...pgRepos },
       'psql',
       {
         singleTransaction: !isPgClusterDump,
+        username: isPgClusterDump ? 'postgres' : undefined,
       },
     );
 
@@ -296,7 +301,7 @@ export async function restoreDatabaseBackup(
       inputStream = storage.createPlainReadStream(backupFilePath);
     }
 
-    const sqlStream = Readable.from(sql(inputStream, databaseUsername, isPgClusterDump));
+    const sqlStream = Readable.from(sql(inputStream, isPgClusterDump));
     const psql = processRepository.spawnDuplexStream(bin, args, {
       env: {
         PATH: process.env.PATH,
@@ -327,7 +332,7 @@ export async function restoreDatabaseBackup(
       fileStream.pipe(gunzip);
       inputStream = gunzip;
 
-      const sqlStream = Readable.from(sqlRollback(inputStream, databaseUsername));
+      const sqlStream = Readable.from(sqlRollback(inputStream, isPgClusterDump));
       const psql = processRepository.spawnDuplexStream(bin, args, {
         env: {
           PATH: process.env.PATH,

server/src/utils/transform.ts

@@ -61,7 +61,7 @@ export const createAffineMatrix = (
   );
 };
 
-type Point = { x: number; y: number };
+export type Point = { x: number; y: number };
 
 type TransformState = {
   points: Point[];
@@ -73,29 +73,33 @@ type TransformState = {
  * Transforms an array of points through a series of edit operations (crop, rotate, mirror).
  * Points should be in absolute pixel coordinates relative to the starting dimensions.
  */
-const transformPoints = (
+export const transformPoints = (
   points: Point[],
   edits: AssetEditActionItem[],
   startingDimensions: ImageDimensions,
+  { inverse = false } = {},
 ): TransformState => {
   let currentWidth = startingDimensions.width;
   let currentHeight = startingDimensions.height;
   let transformedPoints = [...points];
 
-  // Handle crop first
-  const crop = edits.find((edit) => edit.action === 'crop');
-  if (crop) {
-    const { x: cropX, y: cropY, width: cropWidth, height: cropHeight } = crop.parameters;
-    transformedPoints = transformedPoints.map((p) => ({
-      x: p.x - cropX,
-      y: p.y - cropY,
-    }));
-    currentWidth = cropWidth;
-    currentHeight = cropHeight;
+  // Handle crop first if not inverting
+  if (!inverse) {
+    const crop = edits.find((edit) => edit.action === 'crop');
+    if (crop) {
+      const { x: cropX, y: cropY, width: cropWidth, height: cropHeight } = crop.parameters;
+      transformedPoints = transformedPoints.map((p) => ({
+        x: p.x - cropX,
+        y: p.y - cropY,
+      }));
+      currentWidth = cropWidth;
+      currentHeight = cropHeight;
+    }
   }
 
   // Apply rotate and mirror transforms
-  for (const edit of edits) {
+  const editSequence = inverse ? edits.toReversed() : edits;
+  for (const edit of editSequence) {
     let matrix: Matrix = identity();
     if (edit.action === 'rotate') {
       const angleDegrees = edit.parameters.angle;
@@ -105,7 +109,7 @@ const transformPoints = (
 
       matrix = compose(
         translate(newWidth / 2, newHeight / 2),
-        rotate(angleRadians),
+        rotate(inverse ? -angleRadians : angleRadians),
         translate(-currentWidth / 2, -currentHeight / 2),
       );
 
@@ -125,6 +129,18 @@ const transformPoints = (
     transformedPoints = transformedPoints.map((p) => applyToPoint(matrix, p));
   }
 
+  // Handle crop last if inverting
+  if (inverse) {
+    const crop = edits.find((edit) => edit.action === 'crop');
+    if (crop) {
+      const { x: cropX, y: cropY } = crop.parameters;
+      transformedPoints = transformedPoints.map((p) => ({
+        x: p.x + cropX,
+        y: p.y + cropY,
+      }));
+    }
+  }
+
   return {
     points: transformedPoints,
     currentWidth,

web/src/lib/components/AssetViewerEvents.svelte

@@ -22,5 +22,3 @@
     return assetViewerManager.on(events);
   });
 </script>
-
-const event = name.slice(2) as keyof Events;

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -194,9 +194,7 @@
 
   const closeEditor = async () => {
     if (editManager.hasAppliedEdits) {
-      console.log(asset);
       const refreshedAsset = await getAssetInfo({ id: asset.id });
-      console.log(refreshedAsset);
       onAssetChange?.(refreshedAsset);
       assetViewingStore.setAsset(refreshedAsset);
     }

web/src/lib/components/asset-viewer/editor/editor-panel.svelte

@@ -75,7 +75,7 @@
     <Button
       variant="outline"
       onclick={() => editManager.resetAllChanges()}
-      disabled={!editManager.hasChanges}
+      disabled={!editManager.canReset}
       class="self-start"
       shape="round"
       size="small"

web/src/lib/managers/edit/edit-manager.svelte.ts

@@ -15,6 +15,7 @@ export interface EditToolManager {
   onDeactivate: () => void;
   resetAllChanges: () => Promise<void>;
   hasChanges: boolean;
+  canReset: boolean;
   edits: EditAction[];
 }
 
@@ -41,19 +42,22 @@ export class EditManager {
 
   currentAsset = $state<AssetResponseDto | null>(null);
   selectedTool = $state<EditTool | null>(null);
-  hasChanges = $derived(this.tools.some((t) => t.manager.hasChanges));
 
   // used to disable multiple confirm dialogs and mouse events while one is open
   isShowingConfirmDialog = $state(false);
   isApplyingEdits = $state(false);
   hasAppliedEdits = $state(false);
 
+  hasUnsavedChanges = $derived(this.tools.some((t) => t.manager.hasChanges) && !this.hasAppliedEdits);
+  canReset = $derived(this.tools.some((t) => t.manager.canReset));
+
   async closeConfirm(): Promise<boolean> {
     // Prevent multiple dialogs (usually happens with rapid escape key presses)
     if (this.isShowingConfirmDialog) {
       return false;
     }
-    if (!this.hasChanges || this.hasAppliedEdits) {
+
+    if (!this.hasUnsavedChanges) {
       return true;
     }
 

web/src/lib/managers/edit/transform-manager.svelte.ts

@@ -38,7 +38,8 @@ type RegionConvertParams = {
 };
 
 class TransformManager implements EditToolManager {
-  hasChanges: boolean = $derived.by(() => this.checkEdits());
+  canReset: boolean = $derived.by(() => this.checkEdits());
+  hasChanges: boolean = $state(false);
 
   darkenLevel = $state(0.65);
   isInteracting = $state(false);
@@ -56,7 +57,7 @@ class TransformManager implements EditToolManager {
   cropAspectRatio = $state('free');
   originalImageSize = $state<ImageDimensions>({ width: 1000, height: 1000 });
   region = $state({ x: 0, y: 0, width: 100, height: 100 });
-  preveiwImgSize = $derived({
+  previewImageSize = $derived({
     width: this.cropImageSize.width * this.cropImageScale,
     height: this.cropImageSize.height * this.cropImageScale,
   });
@@ -73,6 +74,7 @@ class TransformManager implements EditToolManager {
   edits = $derived.by(() => this.getEdits());
 
   setAspectRatio(aspectRatio: string) {
+    this.hasChanges = true;
     this.cropAspectRatio = aspectRatio;
 
     if (!this.imgElement || !this.cropAreaEl) {
@@ -88,8 +90,8 @@ class TransformManager implements EditToolManager {
 
   checkEdits() {
     return (
-      Math.abs(this.preveiwImgSize.width - this.region.width) > 2 ||
-      Math.abs(this.preveiwImgSize.height - this.region.height) > 2 ||
+      Math.abs(this.previewImageSize.width - this.region.width) > 2 ||
+      Math.abs(this.previewImageSize.height - this.region.height) > 2 ||
       this.mirrorHorizontal ||
       this.mirrorVertical ||
       this.normalizedRotation !== 0
@@ -98,8 +100,8 @@ class TransformManager implements EditToolManager {
 
   checkCropEdits() {
     return (
-      Math.abs(this.preveiwImgSize.width - this.region.width) > 2 ||
-      Math.abs(this.preveiwImgSize.height - this.region.height) > 2
+      Math.abs(this.previewImageSize.width - this.region.width) > 2 ||
+      Math.abs(this.previewImageSize.height - this.region.height) > 2
     );
   }
 
@@ -232,9 +234,12 @@ class TransformManager implements EditToolManager {
     this.originalImageSize = { width: 1000, height: 1000 };
     this.cropImageScale = 1;
     this.cropAspectRatio = 'free';
+    this.hasChanges = false;
   }
 
   mirror(axis: 'horizontal' | 'vertical') {
+    this.hasChanges = true;
+
     if (this.imageRotation % 180 !== 0) {
       axis = axis === 'horizontal' ? 'vertical' : 'horizontal';
     }
@@ -247,6 +252,8 @@ class TransformManager implements EditToolManager {
   }
 
   async rotate(angle: number) {
+    this.hasChanges = true;
+
     this.imageRotation += angle;
     await tick();
     this.onImageLoad();
@@ -760,6 +767,7 @@ class TransformManager implements EditToolManager {
       return;
     }
 
+    this.hasChanges = true;
     const newX = Math.max(0, Math.min(mouseX - this.dragOffset.x, cropArea.clientWidth - this.region.width));
     const newY = Math.max(0, Math.min(mouseY - this.dragOffset.y, cropArea.clientHeight - this.region.height));
 
@@ -781,6 +789,7 @@ class TransformManager implements EditToolManager {
     }
     this.fadeOverlay(false);
 
+    this.hasChanges = true;
     const { x, y, width, height } = crop;
     const minSize = 50;
     let newRegion = { ...crop };