feat(web): zoom-aware face editing

Change-Id: I85a15daf5aff30e010a1d277cc4e2f7f6a6a6964

i18n/en.json

@@ -1300,6 +1300,7 @@
   "hide_schema": "Hide schema",
   "hide_text_recognition": "Hide text recognition",
   "hide_unnamed_people": "Hide unnamed people",
+  "hold_key_to_pan": "Hold {key} to pan",
   "home_page_add_to_album_conflicts": "Added {added} assets to album {album}. {failed} assets are already in the album.",
   "home_page_add_to_album_err_local": "Can not add local assets to albums yet, skipping",
   "home_page_add_to_album_success": "Added {added} assets to album {album}.",

mise.lock

@@ -1,30 +1,30 @@
 # @generated - this file is auto-generated by `mise lock` https://mise.en.dev/dev-tools/mise-lock.html
 
 [[tools."aqua:flutter/flutter"]]
-version = "3.44.1"
+version = "3.44.0"
 backend = "aqua:flutter/flutter"
 
 [tools."aqua:flutter/flutter"."platforms.linux-arm64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-arm64-musl"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.linux-x64-musl"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.1-stable.tar.xz"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.44.0-stable.tar.xz"
 
 [tools."aqua:flutter/flutter"."platforms.macos-arm64"]
-checksum = "blake3:15069c982a30ca0189a83edb5627b69d91485ad94fb74d2de8585b43364e9e8e"
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.44.1-stable.zip"
+checksum = "blake3:fb03aa5d9790205c948922ec3f0751c16e4575b09d6ae9dd4fbeb664a69f0e00"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_3.44.0-stable.zip"
 
 [tools."aqua:flutter/flutter"."platforms.macos-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.44.1-stable.zip"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_3.44.0-stable.zip"
 
 [tools."aqua:flutter/flutter"."platforms.windows-x64"]
-url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.44.1-stable.zip"
+url = "https://storage.googleapis.com/flutter_infra_release/releases/stable/windows/flutter_windows_3.44.0-stable.zip"
 
 [[tools.flutter]]
 version = "3.41.9-stable"

mise.toml

@@ -16,7 +16,7 @@ config_roots = [
 
 [tools]
 node = "24.15.0"
-"aqua:flutter/flutter" = "3.44.1"
+"aqua:flutter/flutter" = "3.44.0"
 pnpm = "10.33.4"
 terragrunt = "1.0.3"
 opentofu = "1.11.6"

mobile/lib/domain/models/settings_key.dart

@@ -1,15 +1,16 @@
+import 'dart:convert';
+
 import 'package:flutter/material.dart';
 import 'package:immich_mobile/constants/colors.dart';
 import 'package:immich_mobile/constants/enums.dart';
 import 'package:immich_mobile/domain/models/log.model.dart';
 import 'package:immich_mobile/domain/models/timeline.model.dart';
-import 'package:immich_mobile/domain/models/value_codec.dart';
 import 'package:immich_mobile/providers/album/album_sort_by_options.provider.dart';
 
 enum SettingsKey<T extends Object> {
   // Theme
-  themePrimaryColor<ImmichColorPreset>(codec: EnumCodec(ImmichColorPreset.values)),
-  themeMode<ThemeMode>(codec: EnumCodec(ThemeMode.values)),
+  themePrimaryColor<ImmichColorPreset>(codec: _EnumCodec(ImmichColorPreset.values)),
+  themeMode<ThemeMode>(codec: _EnumCodec(ThemeMode.values)),
   themeDynamic<bool>(),
   themeColorfulInterface<bool>(),
 
@@ -27,11 +28,11 @@ enum SettingsKey<T extends Object> {
   networkAutoEndpointSwitching<bool>(),
   networkPreferredWifiName<String>(),
   networkLocalEndpoint<String>(),
-  networkExternalEndpointList<List<String>>(codec: ListCodec(PrimitiveCodec.string)),
-  networkCustomHeaders<Map<String, String>>(codec: MapCodec(PrimitiveCodec.string, PrimitiveCodec.string)),
+  networkExternalEndpointList<List<String>>(codec: _ListCodec(_PrimitiveCodec.string)),
+  networkCustomHeaders<Map<String, String>>(codec: _MapCodec(_PrimitiveCodec.string, _PrimitiveCodec.string)),
 
   // Album
-  albumSortMode<AlbumSortMode>(codec: EnumCodec(AlbumSortMode.values)),
+  albumSortMode<AlbumSortMode>(codec: _EnumCodec(AlbumSortMode.values)),
   albumIsReverse<bool>(),
   albumIsGrid<bool>(),
 
@@ -45,23 +46,23 @@ enum SettingsKey<T extends Object> {
 
   // Timeline
   timelineTilesPerRow<int>(),
-  timelineGroupAssetsBy<GroupAssetsBy>(codec: EnumCodec(GroupAssetsBy.values)),
+  timelineGroupAssetsBy<GroupAssetsBy>(codec: _EnumCodec(GroupAssetsBy.values)),
   timelineStorageIndicator<bool>(),
 
   // Log
-  logLevel<LogLevel>(codec: EnumCodec(LogLevel.values)),
+  logLevel<LogLevel>(codec: _EnumCodec(LogLevel.values)),
 
   // Map
   mapShowFavoriteOnly<bool>(),
   mapRelativeDate<int>(),
   mapIncludeArchived<bool>(),
-  mapThemeMode<ThemeMode>(codec: EnumCodec(ThemeMode.values)),
+  mapThemeMode<ThemeMode>(codec: _EnumCodec(ThemeMode.values)),
   mapWithPartners<bool>(),
 
   // Cleanup
   cleanupKeepFavorites<bool>(),
-  cleanupKeepMediaType<AssetKeepType>(codec: EnumCodec(AssetKeepType.values)),
-  cleanupKeepAlbumIds<List<String>>(codec: ListCodec(PrimitiveCodec.string)),
+  cleanupKeepMediaType<AssetKeepType>(codec: _EnumCodec(AssetKeepType.values)),
+  cleanupKeepAlbumIds<List<String>>(codec: _ListCodec(_PrimitiveCodec.string)),
   cleanupCutoffDaysAgo<int>(),
   cleanupDefaultsInitialized<bool>(),
 
@@ -69,16 +70,148 @@ enum SettingsKey<T extends Object> {
   slideshowTransition<bool>(),
   slideshowRepeat<bool>(),
   slideshowDuration<int>(),
-  slideshowLook<SlideshowLook>(codec: EnumCodec(SlideshowLook.values)),
-  slideshowDirection<SlideshowDirection>(codec: EnumCodec(SlideshowDirection.values));
+  slideshowLook<SlideshowLook>(codec: _EnumCodec(SlideshowLook.values)),
+  slideshowDirection<SlideshowDirection>(codec: _EnumCodec(SlideshowDirection.values));
 
-  final ValueCodec<T>? _codecOverride;
+  final _SettingsCodec<T>? _codecOverride;
 
-  const SettingsKey({ValueCodec<T>? codec}) : _codecOverride = codec;
+  const SettingsKey({_SettingsCodec<T>? codec}) : _codecOverride = codec;
 
-  ValueCodec<T> get _codec => _codecOverride ?? ValueCodec.forType(T);
+  _SettingsCodec<T> get _codec => _codecOverride ?? _SettingsCodec.forType(T);
 
   String encode(T value) => _codec.encode(value);
 
   T decode(String raw) => _codec.decode(raw);
 }
+
+sealed class _SettingsCodec<T extends Object> {
+  const _SettingsCodec();
+
+  String encode(T value);
+  T decode(String raw);
+
+  static const Map<Type, _SettingsCodec<Object>> _primitives = {
+    int: _PrimitiveCodec.integer,
+    double: _PrimitiveCodec.real,
+    bool: _PrimitiveCodec.boolean,
+    String: _PrimitiveCodec.string,
+    DateTime: _DateTimeCodec(),
+  };
+
+  static _SettingsCodec<T> forType<T extends Object>(Type runtimeType) {
+    final codec = _primitives[runtimeType];
+    if (codec == null) {
+      throw StateError('No primitive codec for $runtimeType. Provide an explicit codec when defining the SettingsKey.');
+    }
+    return codec as _SettingsCodec<T>;
+  }
+}
+
+final class _EnumCodec<T extends Enum> extends _SettingsCodec<T> {
+  final List<T> values;
+
+  const _EnumCodec(this.values);
+
+  @override
+  String encode(T value) => value.name;
+
+  @override
+  T decode(String raw) => values.firstWhere((v) => v.name == raw);
+}
+
+final class _DateTimeCodec extends _SettingsCodec<DateTime> {
+  const _DateTimeCodec();
+
+  @override
+  String encode(DateTime value) => value.toIso8601String();
+
+  @override
+  DateTime decode(String raw) => DateTime.parse(raw);
+}
+
+final class _MapCodec<K extends Object, V extends Object> extends _SettingsCodec<Map<K, V>> {
+  final _SettingsCodec<K> _keyCodec;
+  final _SettingsCodec<V> _valueCodec;
+
+  const _MapCodec(this._keyCodec, this._valueCodec);
+
+  @override
+  String encode(Map<K, V> value) {
+    final entries = <String, String>{};
+    value.forEach((k, v) => entries[_keyCodec.encode(k)] = _valueCodec.encode(v));
+    return jsonEncode(entries);
+  }
+
+  @override
+  Map<K, V> decode(String raw) {
+    try {
+      final decoded = jsonDecode(raw);
+      if (decoded is! Map) {
+        return {};
+      }
+      final result = <K, V>{};
+      for (final entry in decoded.entries) {
+        final rawKey = entry.key;
+        final rawValue = entry.value;
+        if (rawKey is! String || rawValue is! String) {
+          return {};
+        }
+        final k = _keyCodec.decode(rawKey);
+        final v = _valueCodec.decode(rawValue);
+        result[k] = v;
+      }
+      return result;
+    } on FormatException {
+      return {};
+    }
+  }
+}
+
+final class _ListCodec<T extends Object> extends _SettingsCodec<List<T>> {
+  final _SettingsCodec<T> _elementCodec;
+
+  const _ListCodec(this._elementCodec);
+
+  @override
+  String encode(List<T> value) => jsonEncode(value.map(_elementCodec.encode).toList());
+
+  @override
+  List<T> decode(String raw) {
+    try {
+      final decoded = jsonDecode(raw);
+      if (decoded is! List) {
+        return [];
+      }
+      final result = <T>[];
+      for (final item in decoded) {
+        if (item is! String) {
+          return [];
+        }
+        final element = _elementCodec.decode(item);
+        result.add(element);
+      }
+      return result;
+    } on FormatException {
+      return [];
+    }
+  }
+}
+
+final class _PrimitiveCodec<T extends Object> extends _SettingsCodec<T> {
+  final T Function(String) _parse;
+
+  const _PrimitiveCodec._(this._parse);
+
+  @override
+  String encode(T value) => value.toString();
+
+  @override
+  T decode(String raw) => _parse(raw);
+
+  static const integer = _PrimitiveCodec<int>._(int.parse);
+  static const real = _PrimitiveCodec<double>._(double.parse);
+  static const boolean = _PrimitiveCodec<bool>._(bool.parse);
+  static const string = _PrimitiveCodec<String>._(_identity);
+
+  static String _identity(String s) => s;
+}

mobile/lib/domain/models/value_codec.dart

@@ -1,133 +0,0 @@
-import 'dart:convert';
-
-sealed class ValueCodec<T extends Object> {
-  const ValueCodec();
-
-  String encode(T value);
-  T decode(String raw);
-
-  static const Map<Type, ValueCodec<Object>> _primitives = {
-    int: PrimitiveCodec.integer,
-    double: PrimitiveCodec.real,
-    bool: PrimitiveCodec.boolean,
-    String: PrimitiveCodec.string,
-    DateTime: DateTimeCodec(),
-  };
-
-  static ValueCodec<T> forType<T extends Object>(Type runtimeType) {
-    final codec = _primitives[runtimeType];
-    if (codec == null) {
-      throw StateError('No primitive codec for $runtimeType. Provide an explicit codec when defining the key.');
-    }
-    return codec as ValueCodec<T>;
-  }
-}
-
-final class EnumCodec<T extends Enum> extends ValueCodec<T> {
-  final List<T> values;
-
-  const EnumCodec(this.values);
-
-  @override
-  String encode(T value) => value.name;
-
-  @override
-  T decode(String raw) => values.firstWhere((v) => v.name == raw);
-}
-
-final class DateTimeCodec extends ValueCodec<DateTime> {
-  const DateTimeCodec();
-
-  @override
-  String encode(DateTime value) => value.toIso8601String();
-
-  @override
-  DateTime decode(String raw) => DateTime.parse(raw);
-}
-
-final class MapCodec<K extends Object, V extends Object> extends ValueCodec<Map<K, V>> {
-  final ValueCodec<K> _keyCodec;
-  final ValueCodec<V> _valueCodec;
-
-  const MapCodec(this._keyCodec, this._valueCodec);
-
-  @override
-  String encode(Map<K, V> value) {
-    final entries = <String, String>{};
-    value.forEach((k, v) => entries[_keyCodec.encode(k)] = _valueCodec.encode(v));
-    return jsonEncode(entries);
-  }
-
-  @override
-  Map<K, V> decode(String raw) {
-    try {
-      final decoded = jsonDecode(raw);
-      if (decoded is! Map) {
-        return {};
-      }
-      final result = <K, V>{};
-      for (final entry in decoded.entries) {
-        final rawKey = entry.key;
-        final rawValue = entry.value;
-        if (rawKey is! String || rawValue is! String) {
-          return {};
-        }
-        final k = _keyCodec.decode(rawKey);
-        final v = _valueCodec.decode(rawValue);
-        result[k] = v;
-      }
-      return result;
-    } on FormatException {
-      return {};
-    }
-  }
-}
-
-final class ListCodec<T extends Object> extends ValueCodec<List<T>> {
-  final ValueCodec<T> _elementCodec;
-
-  const ListCodec(this._elementCodec);
-
-  @override
-  String encode(List<T> value) => jsonEncode(value.map(_elementCodec.encode).toList());
-
-  @override
-  List<T> decode(String raw) {
-    try {
-      final decoded = jsonDecode(raw);
-      if (decoded is! List) {
-        return [];
-      }
-      final result = <T>[];
-      for (final item in decoded) {
-        if (item is! String) {
-          return [];
-        }
-        final element = _elementCodec.decode(item);
-        result.add(element);
-      }
-      return result;
-    } on FormatException {
-      return [];
-    }
-  }
-}
-
-final class PrimitiveCodec<T extends Object> extends ValueCodec<T> {
-  final T Function(String) _parse;
-
-  const PrimitiveCodec._(this._parse);
-
-  @override
-  String encode(T value) => value.toString();
-
-  @override
-  T decode(String raw) => _parse(raw);
-
-  static const integer = PrimitiveCodec<int>._(int.parse);
-  static const real = PrimitiveCodec<double>._(double.parse);
-  static const boolean = PrimitiveCodec<bool>._(bool.parse);
-  static const string = PrimitiveCodec<String>._(_identity);
-
-  static String _identity(String s) => s;
-}

mobile/lib/infrastructure/repositories/cached_key_value_repository.dart

@@ -1,37 +0,0 @@
-import 'package:collection/collection.dart';
-import 'package:drift/drift.dart';
-// ignore: depend_on_referenced_packages
-import 'package:meta/meta.dart';
-
-abstract class CachedKeyValueRepository<K extends Enum, S> {
-  CachedKeyValueRepository(this._snapshot);
-
-  S _snapshot;
-  S get snapshot => _snapshot;
-  @protected
-  set snapshot(S value) => _snapshot = value;
-
-  List<K> get keys;
-
-  Object decodeValue(K key, String raw);
-
-  S buildSnapshot(Map<K, Object> overrides);
-
-  Selectable<({String key, String value})> selectable();
-
-  Future<void> refresh() async => _snapshot = _build(await selectable().get());
-
-  Stream<S> watchSnapshot() => selectable().watch().map((rows) => _snapshot = _build(rows));
-
-  S _build(List<({String key, String value})> rows) {
-    final overrides = <K, Object>{};
-    for (final row in rows) {
-      final key = keys.firstWhereOrNull((k) => k.name == row.key);
-      if (key == null) {
-        continue;
-      }
-      overrides[key] = decodeValue(key, row.value);
-    }
-    return buildSnapshot(overrides);
-  }
-}

mobile/lib/infrastructure/repositories/settings.repository.dart

@@ -1,14 +1,14 @@
+import 'package:collection/collection.dart';
 import 'package:drift/drift.dart';
 import 'package:immich_mobile/domain/models/config/app_config.dart';
 import 'package:immich_mobile/domain/models/settings_key.dart';
 import 'package:immich_mobile/infrastructure/entities/settings.entity.drift.dart';
-import 'package:immich_mobile/infrastructure/repositories/cached_key_value_repository.dart';
 import 'package:immich_mobile/infrastructure/repositories/db.repository.dart';
 
-class SettingsRepository extends CachedKeyValueRepository<SettingsKey, AppConfig> {
+class SettingsRepository extends DriftDatabaseRepository {
   final Drift _db;
 
-  SettingsRepository._(this._db) : super(const .new());
+  SettingsRepository._(this._db) : super(_db);
 
   static SettingsRepository? _instance;
 
@@ -20,6 +20,9 @@ class SettingsRepository extends CachedKeyValueRepository<SettingsKey, AppConfig
     return instance;
   }
 
+  AppConfig _appConfig = const .new();
+  AppConfig get appConfig => _appConfig;
+
   static Future<SettingsRepository> ensureInitialized(Drift db) async {
     if (_instance == null) {
       final instance = SettingsRepository._(db);
@@ -29,20 +32,7 @@ class SettingsRepository extends CachedKeyValueRepository<SettingsKey, AppConfig
     return _instance!;
   }
 
-  @override
-  List<SettingsKey> get keys => SettingsKey.values;
-
-  @override
-  Object decodeValue(SettingsKey key, String raw) => key.decode(raw);
-
-  @override
-  AppConfig buildSnapshot(Map<SettingsKey, Object> overrides) => AppConfig.fromEntries(overrides);
-
-  @override
-  Selectable<({String key, String value})> selectable() =>
-      _db.select(_db.settingsEntity).map((row) => (key: row.key, value: row.value));
-
-  AppConfig get appConfig => snapshot;
+  Future<void> refresh() async => _applyOverrides(await _db.select(_db.settingsEntity).get());
 
   Future<void> clear(Iterable<SettingsKey> keys) async {
     if (keys.isEmpty) {
@@ -52,15 +42,13 @@ class SettingsRepository extends CachedKeyValueRepository<SettingsKey, AppConfig
     final names = keys.map((key) => key.name).toList();
     await (_db.delete(_db.settingsEntity)..where((row) => row.key.isIn(names))).go();
 
-    var config = snapshot;
     for (final key in keys) {
-      config = config.write(key, defaultConfig.read(key));
+      _appConfig = _appConfig.write(key, defaultConfig.read(key));
     }
-    snapshot = config;
   }
 
   Future<void> write<T extends Object, U extends T>(SettingsKey<T> key, U value) async {
-    if (value == snapshot.read(key)) {
+    if (value == _appConfig.read(key)) {
       return;
     }
 
@@ -73,8 +61,24 @@ class SettingsRepository extends CachedKeyValueRepository<SettingsKey, AppConfig
         .insertOnConflictUpdate(
           SettingsEntityCompanion.insert(key: key.name, value: key.encode(value), updatedAt: Value(DateTime.now())),
         );
-    snapshot = snapshot.write(key, value);
+    _appConfig = _appConfig.write(key, value);
   }
 
-  Stream<AppConfig> watchConfig() => watchSnapshot();
+  Stream<AppConfig> watchConfig() => _db.select(_db.settingsEntity).watch().map((rows) {
+    _applyOverrides(rows);
+    return _appConfig;
+  });
+
+  void _applyOverrides(List<SettingsEntityData> rows) {
+    _appConfig = AppConfig.fromEntries(
+      rows.fold({}, (overrides, row) {
+        final metadataKey = SettingsKey.values.firstWhereOrNull((key) => key.name == row.key);
+        if (metadataKey == null) {
+          return overrides;
+        }
+
+        return {...overrides, metadataKey: metadataKey.decode(row.value)};
+      }),
+    );
+  }
 }

mobile/lib/utils/openapi_patching.dart

@@ -19,7 +19,6 @@ dynamic upgradeDto(dynamic value, String targetType) {
       if (value is Map) {
         addDefault(value, 'mapLightStyleUrl', 'https://tiles.immich.cloud/v1/style/light.json');
         addDefault(value, 'mapDarkStyleUrl', 'https://tiles.immich.cloud/v1/style/dark.json');
-        addDefault(value, 'minFaces', 3);
       }
     case 'UserResponseDto':
       if (value is Map) {
@@ -55,7 +54,6 @@ dynamic upgradeDto(dynamic value, String targetType) {
     case 'ServerFeaturesDto':
       if (value is Map) {
         addDefault(value, 'ocr', false);
-        addDefault(value, 'realtimeTranscoding', false);
       }
       break;
     case 'MemoriesResponse':

mobile/pubspec.lock

@@ -1997,4 +1997,4 @@ packages:
     version: "3.1.3"
 sdks:
   dart: ">=3.12.0 <4.0.0"
-  flutter: "3.44.1"
+  flutter: "3.44.0"

mobile/pubspec.yaml

@@ -6,7 +6,7 @@ version: 3.0.0+3047
 
 environment:
   sdk: '>=3.12.0 <4.0.0'
-  flutter: 3.44.1
+  flutter: 3.44.0
 
 dependencies:
   async: ^2.13.1

web/src/lib/components/AdaptiveImage.svelte

@@ -74,6 +74,8 @@
     onError?: () => void;
     ref?: HTMLDivElement;
     imgRef?: HTMLImageElement;
+    imgNaturalSize?: Size;
+    imgScaledSize?: Size;
     backdrop?: Snippet;
     overlays?: Snippet;
   };
@@ -82,6 +84,10 @@
     ref = $bindable(),
     // eslint-disable-next-line no-useless-assignment
     imgRef = $bindable(),
+    // eslint-disable-next-line no-useless-assignment
+    imgNaturalSize = $bindable(),
+    // eslint-disable-next-line no-useless-assignment
+    imgScaledSize = $bindable(),
     asset,
     sharedLink,
     objectFit = 'contain',
@@ -149,10 +155,22 @@
     return { width: 1, height: 1 };
   });
 
+  $effect(() => {
+    imgNaturalSize = imageDimensions;
+  });
+
+  const scaledDimensions = $derived.by(() => {
+    const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
+    return scaleFn(imageDimensions, container);
+  });
+
+  $effect(() => {
+    imgScaledSize = scaledDimensions;
+  });
+
   const { insetInlineStart, top, displayWidth, displayHeight, rasterWidth, rasterHeight, rasterScale } = $derived.by(
     () => {
-      const scaleFn = objectFit === 'cover' ? scaleToCover : scaleToFit;
-      const { width, height } = scaleFn(imageDimensions, container);
+      const { width, height } = scaledDimensions;
       if (maxRasterPixels === 0) {
         return {
           insetInlineStart: (container.width - width) / 2 + 'px',

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

@@ -13,7 +13,7 @@
   import { SlideshowLook, SlideshowState, slideshowStore } from '$lib/stores/slideshow.store';
   import { handlePromiseError } from '$lib/utils';
   import { canCopyImageToClipboard, copyImageToClipboard } from '$lib/utils/asset-utils';
-  import { getNaturalSize, scaleToFit, type Size } from '$lib/utils/container-utils';
+  import type { Size } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
   import { getOcrBoundingBoxes } from '$lib/utils/ocr-utils';
   import { getBoundingBox, type BoundingBox } from '$lib/utils/people-utils';
@@ -67,13 +67,9 @@
     height: containerHeight,
   });
 
-  const overlaySize = $derived.by((): Size => {
-    if (!assetViewerManager.imgRef || !visibleImageReady) {
-      return { width: 0, height: 0 };
-    }
+  let scaledDimensions = $state<Size>({ width: 0, height: 0 });
 
-    return scaleToFit(getNaturalSize(assetViewerManager.imgRef), { width: containerWidth, height: containerHeight });
-  });
+  const overlaySize = $derived(visibleImageReady ? scaledDimensions : { width: 0, height: 0 });
 
   const highlightedBoxes = $derived(getBoundingBox(assetViewerManager.highlightedFaces, overlaySize));
   const isHighlighting = $derived(highlightedBoxes.length > 0);
@@ -235,6 +231,7 @@
       onReady?.();
     }}
     bind:imgRef={assetViewerManager.imgRef}
+    bind:imgScaledSize={scaledDimensions}
     bind:ref={adaptiveImage}
   >
     {#snippet backdrop()}
@@ -286,7 +283,11 @@
     {/snippet}
   </AdaptiveImage>
 
-  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef}
-    <FaceEditor htmlElement={assetViewerManager.imgRef} {containerWidth} {containerHeight} assetId={asset.id} />
+  {#if assetViewerManager.isFaceEditMode && assetViewerManager.imgRef && asset.width && asset.height}
+    <FaceEditor
+      imageSize={{ width: asset.width, height: asset.height }}
+      containerSize={{ width: containerWidth, height: containerHeight }}
+      assetId={asset.id}
+    />
   {/if}
 </div>

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

@@ -308,9 +308,30 @@
   let containerHeight = $state(0);
 
   $effect(() => {
-    if (assetViewerManager.isFaceEditMode) {
-      videoPlayer?.pause();
+    if (!assetViewerManager.isFaceEditMode || !videoPlayer) {
+      return;
     }
+    videoPlayer.pause();
+
+    const { videoWidth, videoHeight } = videoPlayer;
+    if (videoWidth === 0 || videoHeight === 0) {
+      return;
+    }
+
+    const canvas = document.createElement('canvas');
+    canvas.width = videoWidth;
+    canvas.height = videoHeight;
+    canvas.getContext('2d')?.drawImage(videoPlayer, 0, 0);
+
+    const img = new Image();
+    img.onload = () => (assetViewerManager.imgRef = img);
+    img.src = canvas.toDataURL('image/png');
+
+    return () => {
+      img.onload = null;
+      img.src = '';
+      assetViewerManager.imgRef = undefined;
+    };
   });
 
   // The time is only refreshed on HLS fragment decode by default,
@@ -454,8 +475,12 @@
         </div>
       {/if}
 
-      {#if assetViewerManager.isFaceEditMode && videoPlayer}
-        <FaceEditor htmlElement={videoPlayer} {containerWidth} {containerHeight} {assetId} />
+      {#if assetViewerManager.isFaceEditMode}
+        <FaceEditor
+          imageSize={{ width: asset.width ?? 0, height: asset.height ?? 0 }}
+          containerSize={{ width: containerWidth, height: containerHeight }}
+          {assetId}
+        />
       {/if}
     {/if}
   </div>

web/src/lib/components/asset-viewer/face-editor/FaceEditor.svelte

@@ -4,25 +4,27 @@
   import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
   import FaceCreateTagModal from '$lib/modals/CreateFaceModal.svelte';
   import { getPeopleThumbnailUrl } from '$lib/utils';
-  import { getNaturalSize, scaleToFit } from '$lib/utils/container-utils';
+  import { computeContentMetrics, mapContentRectToNatural, type Size } from '$lib/utils/container-utils';
   import { handleError } from '$lib/utils/handle-error';
+  import { scaleFaceRectOnResize, type ResizeContext } from '$lib/utils/people-utils';
   import { createFace, getAllPeople, type PersonResponseDto } from '@immich/sdk';
   import { Button, Input, modalManager, toastManager } from '@immich/ui';
   import { Canvas, InteractiveFabricObject, Rect } from 'fabric';
   import { clamp } from 'lodash-es';
   import { onDestroy, onMount, tick } from 'svelte';
   import { t } from 'svelte-i18n';
+  import { fade } from 'svelte/transition';
 
   type Props = {
-    htmlElement: HTMLImageElement | HTMLVideoElement;
-    containerWidth: number;
-    containerHeight: number;
+    imageSize: Size;
+    containerSize: Size;
     assetId: string;
   };
 
-  let { htmlElement, containerWidth, containerHeight, assetId }: Props = $props();
+  let { imageSize, containerSize, assetId }: Props = $props();
 
   let canvasEl: HTMLCanvasElement | undefined = $state();
+  let containerEl: HTMLDivElement | undefined = $state();
   let canvas: Canvas | undefined = $state();
   let faceRect: Rect | undefined = $state();
   let faceSelectorEl: HTMLDivElement | undefined = $state();
@@ -33,6 +35,9 @@
 
   let searchTerm = $state('');
   let faceBoxPosition = $state({ left: 0, top: 0, width: 0, height: 0 });
+  let userMovedRect = false;
+  let previousMetrics: ResizeContext | null = null;
+  let panModifierHeld = $state(false);
 
   let filteredCandidates = $derived(
     searchTerm
@@ -54,11 +59,12 @@
   };
 
   const setupCanvas = () => {
-    if (!canvasEl || !htmlElement) {
+    if (!canvasEl) {
       return;
     }
 
-    canvas = new Canvas(canvasEl);
+    canvas = new Canvas(canvasEl, { width: containerSize.width, height: containerSize.height });
+    canvas.selection = false;
     configureControlStyle();
 
     // eslint-disable-next-line tscompat/tscompat
@@ -76,57 +82,100 @@
 
     canvas.add(faceRect);
     canvas.setActiveObject(faceRect);
-    setDefaultFaceRectanglePosition(faceRect);
   };
 
   onMount(async () => {
     setupCanvas();
-    await getPeople();
+    void getPeople();
     await tick();
     searchInputEl?.focus();
   });
 
-  const imageContentMetrics = $derived.by(() => {
-    const natural = getNaturalSize(htmlElement);
-    const container = { width: containerWidth, height: containerHeight };
-    const { width: contentWidth, height: contentHeight } = scaleToFit(natural, container);
-    return {
-      contentWidth,
-      contentHeight,
-      offsetX: (containerWidth - contentWidth) / 2,
-      offsetY: (containerHeight - contentHeight) / 2,
-    };
-  });
-
-  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
-    const { offsetX, offsetY } = imageContentMetrics;
-
-    faceRect.set({
-      top: offsetY + 200,
-      left: offsetX + 200,
-    });
-
-    faceRect.setCoords();
-    positionFaceSelector();
-  };
-
   $effect(() => {
     if (!canvas) {
       return;
     }
 
-    canvas.setDimensions({
-      width: containerWidth,
-      height: containerHeight,
-    });
+    const upperCanvas = canvas.upperCanvasEl;
+    const controller = new AbortController();
+    const { signal } = controller;
 
-    if (!faceRect) {
+    const stopIfOnTarget = (event: PointerEvent) => {
+      if (canvas?.findTarget(event).target) {
+        event.stopPropagation();
+      }
+    };
+
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!canvas) {
+        return;
+      }
+      if (canvas.findTarget(event).target) {
+        event.stopPropagation();
+        return;
+      }
+      if (faceRect) {
+        event.stopPropagation();
+        const pointer = canvas.getScenePoint(event);
+        faceRect.set({ left: pointer.x, top: pointer.y });
+        faceRect.setCoords();
+        userMovedRect = true;
+        canvas.renderAll();
+        positionFaceSelector();
+      }
+    };
+
+    upperCanvas.addEventListener('pointerdown', handlePointerDown, { signal });
+    upperCanvas.addEventListener('pointermove', stopIfOnTarget, { signal });
+    upperCanvas.addEventListener('pointerup', stopIfOnTarget, { signal });
+
+    return () => {
+      controller.abort();
+    };
+  });
+
+  const imageContentMetrics = $derived(computeContentMetrics(imageSize, containerSize));
+
+  const setDefaultFaceRectanglePosition = (faceRect: Rect) => {
+    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
+
+    faceRect.set({
+      top: offsetY + contentHeight / 2 - 56,
+      left: offsetX + contentWidth / 2 - 56,
+    });
+  };
+
+  $effect(() => {
+    const { offsetX, offsetY, contentWidth } = imageContentMetrics;
+
+    if (contentWidth === 0) {
       return;
     }
 
-    if (!isFaceRectIntersectingCanvas(faceRect, canvas)) {
+    const isFirstRun = previousMetrics === null;
+
+    if (isFirstRun && !canvas) {
+      setupCanvas();
+    }
+
+    if (!canvas || !faceRect) {
+      return;
+    }
+
+    if (!isFirstRun) {
+      canvas.setDimensions({ width: containerSize.width, height: containerSize.height });
+    }
+
+    if (!isFirstRun && userMovedRect && previousMetrics) {
+      faceRect.set(scaleFaceRectOnResize(faceRect, previousMetrics, { contentWidth, offsetX, offsetY }));
+    } else {
       setDefaultFaceRectanglePosition(faceRect);
     }
+
+    faceRect.setCoords();
+    previousMetrics = { contentWidth, offsetX, offsetY };
+    canvas.renderAll();
+    positionFaceSelector();
   });
 
   const isFaceRectIntersectingCanvas = (faceRect: Rect, canvas: Canvas) => {
@@ -167,34 +216,39 @@
     const gap = 15;
     const padding = faceRect.padding ?? 0;
     const rawBox = faceRect.getBoundingRect();
+    if (Number.isNaN(rawBox.left) || Number.isNaN(rawBox.width)) {
+      return;
+    }
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
     const faceBox = {
-      left: rawBox.left - padding,
-      top: rawBox.top - padding,
-      width: rawBox.width + padding * 2,
-      height: rawBox.height + padding * 2,
+      left: (rawBox.left - padding) * currentZoom + currentPositionX,
+      top: (rawBox.top - padding) * currentZoom + currentPositionY,
+      width: (rawBox.width + padding * 2) * currentZoom,
+      height: (rawBox.height + padding * 2) * currentZoom,
     };
     const selectorWidth = faceSelectorEl.offsetWidth;
     const chromeHeight = faceSelectorEl.offsetHeight - scrollableListEl.offsetHeight;
-    const listHeight = Math.min(MAX_LIST_HEIGHT, containerHeight - gap * 2 - chromeHeight);
+    const listHeight = Math.min(MAX_LIST_HEIGHT, containerSize.height - gap * 2 - chromeHeight);
     const selectorHeight = listHeight + chromeHeight;
 
-    const clampTop = (top: number) => clamp(top, gap, containerHeight - selectorHeight - gap);
-    const clampLeft = (left: number) => clamp(left, gap, containerWidth - selectorWidth - gap);
+    const clampTop = (top: number) => clamp(top, gap, containerSize.height - selectorHeight - gap);
+    const clampLeft = (left: number) => clamp(left, gap, containerSize.width - selectorWidth - gap);
+
+    const faceRight = faceBox.left + faceBox.width;
+    const faceBottom = faceBox.top + faceBox.height;
 
     const overlapArea = (position: { top: number; left: number }) => {
-      const selectorRight = position.left + selectorWidth;
-      const selectorBottom = position.top + selectorHeight;
-      const faceRight = faceBox.left + faceBox.width;
-      const faceBottom = faceBox.top + faceBox.height;
-
-      const overlapX = Math.max(0, Math.min(selectorRight, faceRight) - Math.max(position.left, faceBox.left));
-      const overlapY = Math.max(0, Math.min(selectorBottom, faceBottom) - Math.max(position.top, faceBox.top));
+      const overlapX = Math.max(
+        0,
+        Math.min(position.left + selectorWidth, faceRight) - Math.max(position.left, faceBox.left),
+      );
+      const overlapY = Math.max(
+        0,
+        Math.min(position.top + selectorHeight, faceBottom) - Math.max(position.top, faceBox.top),
+      );
       return overlapX * overlapY;
     };
 
-    const faceBottom = faceBox.top + faceBox.height;
-    const faceRight = faceBox.left + faceBox.width;
-
     const positions = [
       { top: clampTop(faceBottom + gap), left: clampLeft(faceBox.left) },
       { top: clampTop(faceBox.top - selectorHeight - gap), left: clampLeft(faceBox.left) },
@@ -216,83 +270,164 @@
       }
     }
 
-    faceSelectorEl.style.top = `${bestPosition.top}px`;
-    faceSelectorEl.style.left = `${bestPosition.left}px`;
+    const containerRect = containerEl?.getBoundingClientRect();
+    const offsetTop = containerRect?.top ?? 0;
+    const offsetLeft = containerRect?.left ?? 0;
+    faceSelectorEl.style.top = `${bestPosition.top + offsetTop}px`;
+    faceSelectorEl.style.left = `${bestPosition.left + offsetLeft}px`;
     scrollableListEl.style.height = `${listHeight}px`;
-    faceBoxPosition = { left: faceBox.left, top: faceBox.top, width: faceBox.width, height: faceBox.height };
+    faceBoxPosition = faceBox;
   };
 
+  $effect(() => {
+    if (!canvas) {
+      return;
+    }
+
+    const { currentZoom, currentPositionX, currentPositionY } = assetViewerManager.zoomState;
+    canvas.setViewportTransform([currentZoom, 0, 0, currentZoom, currentPositionX, currentPositionY]);
+    canvas.renderAll();
+    positionFaceSelector();
+  });
+
   $effect(() => {
     const rect = faceRect;
     const cvs = canvas;
     if (rect && cvs) {
-      rect.on('moving', positionFaceSelector);
-      rect.on('scaling', positionFaceSelector);
+      const onUserMove = () => {
+        userMovedRect = true;
+        positionFaceSelector();
+      };
+      rect.on('moving', onUserMove);
+      rect.on('scaling', onUserMove);
       cvs.on('object:modified', () => searchInputEl?.focus());
       return () => {
-        rect.off('moving', positionFaceSelector);
-        rect.off('scaling', positionFaceSelector);
+        rect.off('moving', onUserMove);
+        rect.off('scaling', onUserMove);
         cvs.off('object:modified', () => searchInputEl?.focus());
       };
     }
   });
 
+  const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.userAgent);
+  const panModifierKey = isMac ? 'Meta' : 'Control';
+  const panModifierLabel = isMac ? '⌘' : 'Ctrl';
+  const isZoomed = $derived(assetViewerManager.zoom > 1);
+
+  $effect(() => {
+    if (!containerEl) {
+      return;
+    }
+    const element = containerEl;
+    const parent = element.parentElement;
+
+    const activate = () => {
+      panModifierHeld = true;
+      element.style.pointerEvents = 'none';
+      if (parent) {
+        parent.style.cursor = 'move';
+      }
+    };
+
+    const deactivate = () => {
+      panModifierHeld = false;
+      element.style.pointerEvents = '';
+      if (parent) {
+        parent.style.cursor = '';
+      }
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === panModifierKey) {
+        activate();
+      }
+    };
+    const onKeyUp = (event: KeyboardEvent) => {
+      if (event.key === panModifierKey) {
+        deactivate();
+      }
+    };
+
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keyup', onKeyUp);
+    window.addEventListener('blur', deactivate);
+
+    return () => {
+      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keyup', onKeyUp);
+      window.removeEventListener('blur', deactivate);
+      deactivate();
+    };
+  });
+
+  const trapEvents = (node: HTMLElement) => {
+    const stop = (e: Event) => e.stopPropagation();
+    const eventTypes = ['keydown', 'pointerdown', 'pointermove', 'pointerup'] as const;
+    for (const type of eventTypes) {
+      node.addEventListener(type, stop);
+    }
+
+    document.body.append(node);
+
+    return {
+      destroy() {
+        for (const type of eventTypes) {
+          node.removeEventListener(type, stop);
+        }
+        node.remove();
+      },
+    };
+  };
+
   const getFaceCroppedCoordinates = () => {
-    if (!faceRect || !htmlElement) {
+    if (!faceRect || imageSize.width === 0 || imageSize.height === 0) {
       return;
     }
 
-    const { left, top, width, height } = faceRect.getBoundingRect();
-    const { offsetX, offsetY, contentWidth, contentHeight } = imageContentMetrics;
-    const natural = getNaturalSize(htmlElement);
+    const scaledWidth = faceRect.getScaledWidth();
+    const scaledHeight = faceRect.getScaledHeight();
 
-    const scaleX = natural.width / contentWidth;
-    const scaleY = natural.height / contentHeight;
-    const imageX = (left - offsetX) * scaleX;
-    const imageY = (top - offsetY) * scaleY;
+    const imageRect = mapContentRectToNatural(
+      {
+        left: faceRect.left - scaledWidth / 2,
+        top: faceRect.top - scaledHeight / 2,
+        width: scaledWidth,
+        height: scaledHeight,
+      },
+      imageContentMetrics,
+      imageSize,
+    );
 
     return {
-      imageWidth: natural.width,
-      imageHeight: natural.height,
-      x: Math.floor(imageX),
-      y: Math.floor(imageY),
-      width: Math.floor(width * scaleX),
-      height: Math.floor(height * scaleY),
+      imageWidth: imageSize.width,
+      imageHeight: imageSize.height,
+      x: Math.floor(imageRect.left),
+      y: Math.floor(imageRect.top),
+      width: Math.floor(imageRect.width),
+      height: Math.floor(imageRect.height),
     };
   };
 
   type FaceCoordinates = NonNullable<ReturnType<typeof getFaceCroppedCoordinates>>;
 
   const getFacePreviewUrl = (data: FaceCoordinates) => {
-    if (!htmlElement) {
+    const imgRef = assetViewerManager.imgRef;
+    if (!imgRef || imageContentMetrics.contentWidth === 0) {
       return;
     }
 
-    const natural = getNaturalSize(htmlElement);
-    if (natural.width <= 0 || natural.height <= 0) {
-      return;
-    }
-
-    const x = clamp(data.x, 0, natural.width - 1);
-    const y = clamp(data.y, 0, natural.height - 1);
-    const width = clamp(data.width, 1, natural.width - x);
-    const height = clamp(data.height, 1, natural.height - y);
-
-    if (width <= 0 || height <= 0) {
-      return;
-    }
+    const scaleX = imgRef.naturalWidth / imageSize.width;
+    const scaleY = imgRef.naturalHeight / imageSize.height;
+    const x = clamp(Math.floor(data.x * scaleX), 0, imgRef.naturalWidth - 1);
+    const y = clamp(Math.floor(data.y * scaleY), 0, imgRef.naturalHeight - 1);
+    const width = clamp(Math.floor(data.width * scaleX), 1, imgRef.naturalWidth - x);
+    const height = clamp(Math.floor(data.height * scaleY), 1, imgRef.naturalHeight - y);
 
     const canvas = document.createElement('canvas');
     canvas.width = width;
     canvas.height = height;
-
-    const context = canvas.getContext('2d');
-    if (!context) {
-      return;
-    }
-
     try {
-      context.drawImage(htmlElement, x, y, width, height, 0, 0, width, height);
+      canvas.getContext('2d')?.drawImage(imgRef, x, y, width, height, 0, 0, width, height);
       return canvas.toDataURL('image/png');
     } catch {
       return;
@@ -364,6 +499,7 @@
 
 <div
   id="face-editor-data"
+  bind:this={containerEl}
   class="absolute inset-s-0 top-0 z-5 size-full overflow-hidden"
   data-overlay-interactive
   data-face-left={faceBoxPosition.left}
@@ -371,12 +507,14 @@
   data-face-width={faceBoxPosition.width}
   data-face-height={faceBoxPosition.height}
 >
-  <canvas bind:this={canvasEl} id="face-editor" class="absolute inset-s-0 top-0"></canvas>
+  <canvas bind:this={canvasEl} id="face-editor" class="absolute top-0 start-0"></canvas>
 
   <div
     id="face-selector"
     bind:this={faceSelectorEl}
-    class="absolute inset-s-[calc(50%-125px)] top-[calc(50%-250px)] w-62.5 max-w-62.5 rounded-xl border border-gray-200 bg-white px-2 py-4 backdrop-blur-sm transition-[top,left] duration-200 ease-out dark:border-gray-800 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+    class="fixed z-20 w-[min(200px,45vw)] min-w-48 rounded-xl border border-gray-200 bg-white px-2 py-4 backdrop-blur-sm transition-[top,left] duration-200 ease-out dark:border-gray-800 dark:bg-immich-dark-gray dark:text-immich-dark-fg"
+    use:trapEvents
+    onwheel={(e) => e.stopPropagation()}
   >
     <p class="text-center text-sm">{$t('select_person_to_tag')}</p>
 
@@ -423,4 +561,15 @@
       {$t('cancel')}
     </Button>
   </div>
+
+  {#if isZoomed && !panModifierHeld}
+    <div
+      transition:fade={{ duration: 200 }}
+      class="pointer-events-none absolute inset-s-1/2 bottom-4 z-10 -translate-x-1/2"
+    >
+      <p class="whitespace-nowrap rounded-full bg-black/60 px-3 py-1.5 text-xs text-white">
+        {$t('hold_key_to_pan', { values: { key: panModifierLabel } })}
+      </p>
+    </div>
+  {/if}
 </div>

web/src/lib/utils/container-utils.spec.ts

@@ -1,18 +1,15 @@
 import {
-  getContentMetrics,
+  computeContentMetrics,
   getNaturalSize,
+  mapContentRectToNatural,
   mapNormalizedRectToContent,
   mapNormalizedToContent,
   scaleToCover,
   scaleToFit,
 } from '$lib/utils/container-utils';
 
-const mockImage = (props: {
-  naturalWidth: number;
-  naturalHeight: number;
-  width: number;
-  height: number;
-}): HTMLImageElement => props as unknown as HTMLImageElement;
+const mockImage = (props: { naturalWidth: number; naturalHeight: number }): HTMLImageElement =>
+  props as unknown as HTMLImageElement;
 
 const mockVideo = (props: {
   videoWidth: number;
@@ -49,48 +46,85 @@ describe('scaleToFit', () => {
   });
 });
 
-describe('getContentMetrics', () => {
-  it('should compute zero offsets when aspect ratios match', () => {
-    const img = mockImage({ naturalWidth: 1600, naturalHeight: 900, width: 800, height: 450 });
-    expect(getContentMetrics(img)).toEqual({
+describe('computeContentMetrics', () => {
+  it('should return zero metrics for zero-width content', () => {
+    expect(computeContentMetrics({ width: 0, height: 1080 }, { width: 800, height: 600 })).toEqual({
+      contentWidth: 0,
+      contentHeight: 0,
+      offsetX: 0,
+      offsetY: 0,
+    });
+  });
+
+  it('should return zero metrics for zero-height content', () => {
+    expect(computeContentMetrics({ width: 1920, height: 0 }, { width: 800, height: 600 })).toEqual({
+      contentWidth: 0,
+      contentHeight: 0,
+      offsetX: 0,
+      offsetY: 0,
+    });
+  });
+
+  it('should center wide content vertically', () => {
+    expect(computeContentMetrics({ width: 2000, height: 1000 }, { width: 800, height: 600 })).toEqual({
+      contentWidth: 800,
+      contentHeight: 400,
+      offsetX: 0,
+      offsetY: 100,
+    });
+  });
+
+  it('should center tall content horizontally', () => {
+    expect(computeContentMetrics({ width: 1000, height: 2000 }, { width: 800, height: 600 })).toEqual({
+      contentWidth: 300,
+      contentHeight: 600,
+      offsetX: 250,
+      offsetY: 0,
+    });
+  });
+
+  it('should produce zero offsets when aspect ratios match', () => {
+    expect(computeContentMetrics({ width: 1600, height: 900 }, { width: 800, height: 450 })).toEqual({
       contentWidth: 800,
       contentHeight: 450,
       offsetX: 0,
       offsetY: 0,
     });
   });
+});
 
-  it('should compute horizontal letterbox offsets for tall image', () => {
-    const img = mockImage({ naturalWidth: 1000, naturalHeight: 2000, width: 800, height: 600 });
-    const metrics = getContentMetrics(img);
-    expect(metrics.contentWidth).toBe(300);
-    expect(metrics.contentHeight).toBe(600);
-    expect(metrics.offsetX).toBe(250);
-    expect(metrics.offsetY).toBe(0);
+describe('mapContentRectToNatural', () => {
+  it('should map a full-content rect back to natural size', () => {
+    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
+    const rect = mapContentRectToNatural({ left: 0, top: 100, width: 800, height: 400 }, metrics, {
+      width: 2000,
+      height: 1000,
+    });
+    expect(rect).toEqual({ left: 0, top: 0, width: 2000, height: 1000 });
   });
 
-  it('should compute vertical letterbox offsets for wide image', () => {
-    const img = mockImage({ naturalWidth: 2000, naturalHeight: 1000, width: 800, height: 600 });
-    const metrics = getContentMetrics(img);
-    expect(metrics.contentWidth).toBe(800);
-    expect(metrics.contentHeight).toBe(400);
-    expect(metrics.offsetX).toBe(0);
-    expect(metrics.offsetY).toBe(100);
+  it('should map a centered sub-rect to natural coordinates', () => {
+    const metrics = { contentWidth: 800, contentHeight: 400, offsetX: 0, offsetY: 100 };
+    const rect = mapContentRectToNatural({ left: 200, top: 200, width: 400, height: 200 }, metrics, {
+      width: 2000,
+      height: 1000,
+    });
+    expect(rect).toEqual({ left: 500, top: 250, width: 1000, height: 500 });
   });
 
-  it('should use clientWidth/clientHeight for video elements', () => {
-    const video = mockVideo({ videoWidth: 1920, videoHeight: 1080, clientWidth: 800, clientHeight: 600 });
-    const metrics = getContentMetrics(video);
-    expect(metrics.contentWidth).toBe(800);
-    expect(metrics.contentHeight).toBe(450);
-    expect(metrics.offsetX).toBe(0);
-    expect(metrics.offsetY).toBe(75);
+  it('should handle letterboxed content with horizontal offset', () => {
+    const metrics = { contentWidth: 300, contentHeight: 600, offsetX: 250, offsetY: 0 };
+    const rect = mapContentRectToNatural({ left: 250, top: 0, width: 300, height: 600 }, metrics, {
+      width: 1000,
+      height: 2000,
+    });
+    expect(rect).toEqual({ left: 0, top: 0, width: 1000, height: 2000 });
   });
 });
 
 describe('getNaturalSize', () => {
   it('should return naturalWidth/naturalHeight for images', () => {
-    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000, width: 800, height: 600 });
+    const img = mockImage({ naturalWidth: 4000, naturalHeight: 3000 });
     expect(getNaturalSize(img)).toEqual({ width: 4000, height: 3000 });
   });
 

web/src/lib/utils/container-utils.ts

@@ -49,13 +49,6 @@ export const scaleToFit = (dimensions: Size, container: Size): Size => {
   };
 };
 
-const getElementSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
-  if (element instanceof HTMLVideoElement) {
-    return { width: element.clientWidth, height: element.clientHeight };
-  }
-  return { width: element.width, height: element.height };
-};
-
 export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Size => {
   if (element instanceof HTMLVideoElement) {
     return { width: element.videoWidth, height: element.videoHeight };
@@ -63,17 +56,18 @@ export const getNaturalSize = (element: HTMLImageElement | HTMLVideoElement): Si
   return { width: element.naturalWidth, height: element.naturalHeight };
 };
 
-export const getContentMetrics = (element: HTMLImageElement | HTMLVideoElement): ContentMetrics => {
-  const natural = getNaturalSize(element);
-  const client = getElementSize(element);
-  const { width: contentWidth, height: contentHeight } = scaleToFit(natural, client);
+export function computeContentMetrics(imageSize: Size, containerSize: Size): ContentMetrics {
+  if (imageSize.width === 0 || imageSize.height === 0) {
+    return { contentWidth: 0, contentHeight: 0, offsetX: 0, offsetY: 0 };
+  }
+  const { width: contentWidth, height: contentHeight } = scaleToFit(imageSize, containerSize);
   return {
     contentWidth,
     contentHeight,
-    offsetX: (client.width - contentWidth) / 2,
-    offsetY: (client.height - contentHeight) / 2,
+    offsetX: (containerSize.width - contentWidth) / 2,
+    offsetY: (containerSize.height - contentHeight) / 2,
   };
-};
+}
 
 export function mapNormalizedToContent(point: Point, sizeOrMetrics: Size | ContentMetrics): Point {
   if ('contentWidth' in sizeOrMetrics) {
@@ -109,3 +103,25 @@ export function mapNormalizedRectToContent(
     height: br.y - tl.y,
   };
 }
+
+export function mapContentToNatural(point: Point, metrics: ContentMetrics, naturalSize: Size): Point {
+  return {
+    x: ((point.x - metrics.offsetX) / metrics.contentWidth) * naturalSize.width,
+    y: ((point.y - metrics.offsetY) / metrics.contentHeight) * naturalSize.height,
+  };
+}
+
+export function mapContentRectToNatural(rect: Rect, metrics: ContentMetrics, naturalSize: Size): Rect {
+  const topLeft = mapContentToNatural({ x: rect.left, y: rect.top }, metrics, naturalSize);
+  const bottomRight = mapContentToNatural(
+    { x: rect.left + rect.width, y: rect.top + rect.height },
+    metrics,
+    naturalSize,
+  );
+  return {
+    top: topLeft.y,
+    left: topLeft.x,
+    width: bottomRight.x - topLeft.x,
+    height: bottomRight.y - topLeft.y,
+  };
+}

web/src/lib/utils/people-utils.spec.ts

@@ -1,6 +1,6 @@
 import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import type { Size } from '$lib/utils/container-utils';
-import { getBoundingBox } from '$lib/utils/people-utils';
+import { getBoundingBox, scaleFaceRectOnResize, type FaceRectState, type ResizeContext } from '$lib/utils/people-utils';
 
 const makeFace = (overrides: Partial<Faces> = {}): Faces => ({
   id: 'face-1',
@@ -68,3 +68,88 @@ describe('getBoundingBox', () => {
     expect(boxes[0].left).toBeLessThan(boxes[1].left);
   });
 });
+
+describe('scaleFaceRectOnResize', () => {
+  const makeRect = (overrides: Partial<FaceRectState> = {}): FaceRectState => ({
+    left: 300,
+    top: 400,
+    scaleX: 1,
+    scaleY: 1,
+    ...overrides,
+  });
+
+  const makePrevious = (overrides: Partial<ResizeContext> = {}): ResizeContext => ({
+    offsetX: 100,
+    offsetY: 50,
+    contentWidth: 800,
+    ...overrides,
+  });
+
+  it('should preserve relative position when container doubles in size', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 200, offsetY: 100, contentWidth: 1600 });
+
+    expect(result.left).toBe(600);
+    expect(result.top).toBe(500);
+    expect(result.scaleX).toBe(2);
+    expect(result.scaleY).toBe(2);
+  });
+
+  it('should preserve relative position when container halves in size', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 50, offsetY: 25, contentWidth: 400 });
+
+    expect(result.left).toBe(150);
+    expect(result.top).toBe(125);
+    expect(result.scaleX).toBe(0.5);
+    expect(result.scaleY).toBe(0.5);
+  });
+
+  it('should handle no change in dimensions', () => {
+    const rect = makeRect({ left: 300, top: 250, scaleX: 1.5, scaleY: 1.5 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    expect(result.left).toBe(300);
+    expect(result.top).toBe(250);
+    expect(result.scaleX).toBe(1.5);
+    expect(result.scaleY).toBe(1.5);
+  });
+
+  it('should handle offset changes without content width change', () => {
+    const rect = makeRect({ left: 300, top: 250 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 150, offsetY: 75, contentWidth: 800 });
+
+    expect(result.left).toBe(350);
+    expect(result.top).toBe(275);
+    expect(result.scaleX).toBe(1);
+    expect(result.scaleY).toBe(1);
+  });
+
+  it('should compound existing scale factors', () => {
+    const rect = makeRect({ left: 300, top: 250, scaleX: 2, scaleY: 3 });
+    const previous = makePrevious({ contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { ...previous, contentWidth: 1600 });
+
+    expect(result.scaleX).toBe(4);
+    expect(result.scaleY).toBe(6);
+  });
+
+  it('should handle rect at image origin', () => {
+    const rect = makeRect({ left: 100, top: 50 });
+    const previous = makePrevious({ offsetX: 100, offsetY: 50, contentWidth: 800 });
+
+    const result = scaleFaceRectOnResize(rect, previous, { offsetX: 200, offsetY: 100, contentWidth: 1600 });
+
+    expect(result.left).toBe(200);
+    expect(result.top).toBe(100);
+  });
+});

web/src/lib/utils/people-utils.ts

@@ -1,7 +1,7 @@
 import { AssetTypeEnum, type AssetFaceResponseDto } from '@immich/sdk';
 import type { Faces } from '$lib/managers/asset-viewer-manager.svelte';
 import { getAssetMediaUrl } from '$lib/utils';
-import { mapNormalizedRectToContent, type Rect, type Size } from '$lib/utils/container-utils';
+import { mapNormalizedRectToContent, type ContentMetrics, type Rect, type Size } from '$lib/utils/container-utils';
 
 export type BoundingBox = Rect & { id: string };
 
@@ -21,6 +21,32 @@ export const getBoundingBox = (faces: Faces[], imageSize: Size): BoundingBox[] =
   return boxes;
 };
 
+export type FaceRectState = {
+  left: number;
+  top: number;
+  scaleX: number;
+  scaleY: number;
+};
+
+export type ResizeContext = Pick<ContentMetrics, 'contentWidth' | 'offsetX' | 'offsetY'>;
+
+export const scaleFaceRectOnResize = (
+  faceRect: FaceRectState,
+  previous: ResizeContext,
+  current: ResizeContext,
+): FaceRectState => {
+  const scale = current.contentWidth / previous.contentWidth;
+  const imageRelativeLeft = (faceRect.left - previous.offsetX) * scale;
+  const imageRelativeTop = (faceRect.top - previous.offsetY) * scale;
+
+  return {
+    left: current.offsetX + imageRelativeLeft,
+    top: current.offsetY + imageRelativeTop,
+    scaleX: faceRect.scaleX * scale,
+    scaleY: faceRect.scaleY * scale,
+  };
+};
+
 export const zoomImageToBase64 = async (
   face: AssetFaceResponseDto,
   assetId: string,