Find an image's picture by its picture id

lib/collab/cloud_media_models.dart

@@ -170,7 +170,7 @@ Set<String> collectStrategyImageAssetIds(StrategyDataLike strategy) {
   final assetIds = <String>{};
   for (final page in strategy.pages) {
     for (final image in page.imageData) {
-      assetIds.add(image.id);
+      assetIds.add(image.pictureId);
     }
     for (final link in page.lineUpLinks) {
       for (final image in link.images) {

lib/collab/convex_strategy_repository.dart

@@ -163,6 +163,7 @@ class ConvexStrategyRepository {
             strategyPublicId: strategyPublicId,
             pagePublicId: pagePublicId,
             shareToken: _optional(shareToken),
+            acceptsPictureIds: const ConvexOptional.present(true),
           )
           .fetch(),
     );
@@ -179,6 +180,8 @@ class ConvexStrategyRepository {
           strategyPublicId: strategyPublicId,
           pagePublicId: pagePublicId,
           shareToken: _optional(shareToken),
+          // This client keeps an image's picture id (PlacedImage.assetId).
+          acceptsPictureIds: const ConvexOptional.present(true),
         )
         .watch()
         .map(_pageSnapshot);
@@ -226,6 +229,7 @@ class ConvexStrategyRepository {
             // This client checks image references apart, so it can take a
             // snapshot without the pages in the server's trash.
             acceptsTrashedPagesLeftOut: const ConvexOptional.present(true),
+            acceptsPictureIds: const ConvexOptional.present(true),
           )
           .fetch(),
     ));
@@ -351,6 +355,8 @@ class ConvexStrategyRepository {
       accountSubject: _optional(accountSubject),
       // This client restores deleted pages, so it sends such a delete again.
       checkTrashedPageDeletes: const ConvexOptional.present(true),
+      // This client keeps an image's picture id (PlacedImage.assetId).
+      acceptsPictureIds: const ConvexOptional.present(true),
     );
     return result.results.map(_opAck).toList(growable: false);
   }

lib/const/placed_classes.dart

@@ -218,10 +218,21 @@ class PlacedImage extends PlacedWidget {
     this.sizeVersion,
     this.tagColorValue,
     this.link = '',
+    this.assetId,
   });
 
   final double aspectRatio;
 
+  /// The picture this image shows, when it isn't the image's own id: a
+  /// copy of an image is a new item showing its original's picture, with
+  /// nothing copied or uploaded. Absent on every image made before copies
+  /// shared pictures. Use [pictureId] to find the picture.
+  @JsonKey(includeIfNull: false)
+  final String? assetId;
+
+  /// The id the image's picture is stored, uploaded and found under.
+  String get pictureId => assetId ?? id;
+
   final String? fileExtension;
   double scale;
 
@@ -264,6 +275,7 @@ class PlacedImage extends PlacedWidget {
     int? tagColorValue,
     bool? isDeleted,
     String? link,
+    String? assetId,
   }) {
     final cloned = PlacedImage(
       position: position ?? this.position,
@@ -273,6 +285,7 @@ class PlacedImage extends PlacedWidget {
       fileExtension: fileExtension ?? this.fileExtension,
       sizeVersion: sizeVersion ?? this.sizeVersion,
       tagColorValue: tagColorValue ?? this.tagColorValue,
+      assetId: assetId ?? this.assetId,
     );
     // Base class field
     // cloned.isDeleted = isDeleted ?? this.isDeleted;

lib/hive/hive_adapters.g.yaml

@@ -75,7 +75,7 @@ types:
         index: 7
   PlacedImage:
     typeId: 5
-    nextIndex: 11
+    nextIndex: 12
     fields:
       aspectRatio:
         index: 1
@@ -95,6 +95,8 @@ types:
         index: 9
       sizeVersion:
         index: 10
+      assetId:
+        index: 11
   MapValue:
     typeId: 6
     nextIndex: 13

lib/providers/collab/cloud_media_upload_queue_provider.dart

@@ -449,29 +449,32 @@ class CloudMediaUploadQueueNotifier
           assetPublicId: assetPublicId,
         );
 
+    // By picture: a copy of an image shows its original's picture, which
+    // is uploaded once, for the original.
     for (final image in placedImages) {
-      final asset = assetsById[image.id];
+      final pictureId = image.pictureId;
+      final asset = assetsById[pictureId];
       final hasActiveRemote =
           asset?.uploadStatus == 'active' && (asset?.url?.isNotEmpty ?? false);
-      if (hasActiveRemote || _getJob(image.id) != null) {
+      if (hasActiveRemote || _getJob(pictureId) != null) {
         continue;
       }
 
       final bytes = await _findMediaBytes(
-        keyFor(image.id),
+        keyFor(pictureId),
         fileExtension: image.fileExtension ?? '',
       );
       if (bytes == null) {
         _logMedia(
-          'reconcile.local_missing image=${image.id} '
+          'reconcile.local_missing image=$pictureId '
           'strategy=$strategyPublicId status=${asset?.uploadStatus ?? 'none'}',
         );
         continue;
       }
 
       await enqueueJobForLocalBytes(
         strategyPublicId: strategyPublicId,
-        assetPublicId: image.id,
+        assetPublicId: pictureId,
         fileExtension: image.fileExtension ?? '',
       );
     }
@@ -1192,10 +1195,10 @@ class CloudMediaUploadQueueNotifier
 
   bool _opReferencesAsset(StrategyOp op, String assetPublicId) {
     if (op is ElementAddOp) {
-      return op.elementPublicId == assetPublicId;
+      return _pictureOf(op.elementPublicId, op.payload) == assetPublicId;
     }
     if (op is ElementPatchOp) {
-      return op.elementPublicId == assetPublicId;
+      return _pictureOf(op.elementPublicId, op.payload) == assetPublicId;
     }
     if (op is LineupAddOp) {
       return _jsonContainsAssetId(op.payload, assetPublicId);
@@ -1206,6 +1209,14 @@ class CloudMediaUploadQueueNotifier
     return false;
   }
 
+  /// The picture an element op shows when it is an image: its payload's
+  /// `assetId`, else the element's own id (see PlacedImage.pictureId).
+  static String _pictureOf(String elementPublicId, CloudPayload? payload) {
+    final assetId =
+        payload == null ? null : cloudPayloadData(payload)['assetId'];
+    return assetId is String && assetId.isNotEmpty ? assetId : elementPublicId;
+  }
+
   bool _jsonContainsAssetId(Object? value, String assetPublicId) {
     if (value is Map) {
       if (value['id'] == assetPublicId) return true;

lib/providers/image_provider.dart

@@ -679,7 +679,7 @@ class PlacedImageSerializer {
   ///
   /// It uses the application support directory, creates a custom folder based
   /// on [strategyID] and an `images` subfolder, and forms the filename from the
-  /// image's [id] and [fileExtension].
+  /// image's picture id ([PlacedImage.pictureId]) and [fileExtension].
   static Future<String> _computeFilePath(
       PlacedImage image, String strategyID) async {
     // Get the system's application support directory.
@@ -699,8 +699,11 @@ class PlacedImageSerializer {
       await imagesDirectory.create(recursive: true);
     }
 
-    // The final file path: [id][fileExtension]
-    return path.join(imagesDirectory.path, '${image.id}${image.fileExtension}');
+    // The final file path: [pictureId][fileExtension]
+    return path.join(
+      imagesDirectory.path,
+      '${image.pictureId}${image.fileExtension}',
+    );
   }
 
   static String? detectImageFormat(Uint8List bytes) {

lib/providers/strategy_provider.dart

@@ -1127,7 +1127,7 @@ class StrategyProvider extends Notifier<StrategyState> {
     if (!kIsWeb) {
       List<String> allImageIds = [];
       for (final page in newStrat.pages) {
-        allImageIds.addAll(page.imageData.map((image) => image.id));
+        allImageIds.addAll(page.imageData.map((image) => image.pictureId));
         for (final link in page.lineUpLinks) {
           allImageIds.addAll(link.images.map((image) => image.id));
         }

lib/screenshot/page_screenshot.dart

@@ -47,10 +47,11 @@ Future<Uint8List> captureEditorPage(WidgetRef ref) async {
 
   final images = await resolveCaptureImages(
     {
+      // By picture, as the captured page's images look them up.
       for (final image in page.imageData)
-        image.id: readStrategyImageSource(
+        image.pictureId: readStrategyImageSource(
           ref,
-          (id: image.id, fileExtension: image.fileExtension),
+          (id: image.pictureId, fileExtension: image.fileExtension),
         ),
     },
     fetch: (imageId, url, client) => downloadCloudImageBytes(

lib/services/video_export/video_export_source.dart

@@ -149,18 +149,19 @@ Future<VideoExportSource> loadVideoExportSource(
   final images = await resolveCaptureImages(
     {
       for (final page in pages)
+        // By picture, as the captured pages' images look them up.
         for (final image in page.imageData)
-          image.id: resolveStrategyImageSource(
+          image.pictureId: resolveStrategyImageSource(
             localFilePath: findLocalImageFile(
               storageDirectory: state.storageDirectory,
-              imageId: image.id,
+              imageId: image.pictureId,
               fileExtension: image.fileExtension,
             ),
             isCloudStrategy: isCloud,
             // The whole strategy was just read, and this device has
             // nothing left to upload.
             assetsLoaded: true,
-            remoteAsset: assets[image.id],
+            remoteAsset: assets[image.pictureId],
             uploadMayBeQueuedHere: false,
           ),
     },

lib/strategy/strategy_cloud_migration.dart

@@ -57,7 +57,11 @@ void appendMigratedPageOps(
 
   for (final image in page.imageData) {
     final elementId = nextUniqueMigrationId(image.id, usedElementIds);
-    final payload = cloudImagePayloadFromPlacedImage(image)
+    // A renamed image keeps showing its picture, which is stored under its
+    // old id.
+    final payload = cloudImagePayloadFromPlacedImage(
+      elementId == image.id ? image : image.copyWith(assetId: image.pictureId),
+    )
       ..putIfAbsent('elementType', () => 'image')
       ..['id'] = elementId;
     ops.add(

lib/strategy/strategy_import_export.dart

@@ -2408,7 +2408,11 @@ class StrategyImportExportService {
         if (element.deleted || element.elementType != 'image') {
           continue;
         }
-        assetIds.add(element.publicId);
+        // The picture it shows (PlacedImage.pictureId).
+        final assetId = cloudPayloadData(element.payload)['assetId'];
+        assetIds.add(
+          assetId is String && assetId.isNotEmpty ? assetId : element.publicId,
+        );
       }
 
       final lineups = lineUpGraphFromRemoteLineups(

lib/strategy/strategy_page_source.dart

@@ -261,7 +261,7 @@ class CloudStrategyPageSource implements StrategyPageSource {
             break;
           case 'image':
             final hydrated = PlacedImage.fromJson(payload);
-            final remoteAsset = snapshot.assetsById[hydrated.id];
+            final remoteAsset = snapshot.assetsById[hydrated.pictureId];
             images.add(hydrated);
             if (remoteAsset != null) {
               ref.read(cloudMediaCacheProvider.notifier).ensureAssetCached(
@@ -440,7 +440,7 @@ class CloudStrategyPageSource implements StrategyPageSource {
             break;
           case 'image':
             final hydrated = PlacedImage.fromJson(payload);
-            final remoteAsset = snapshot.assetsById[hydrated.id];
+            final remoteAsset = snapshot.assetsById[hydrated.pictureId];
             images.add(hydrated);
             if (remoteAsset != null) {
               ref.read(cloudMediaCacheProvider.notifier).ensureAssetCached(

lib/widgets/draggable_widgets/image/image_widget.dart

@@ -45,7 +45,6 @@ class _ImageFullScreenOverlay extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-
     return CallbackShortcuts(
       bindings: {
         const SingleActivator(LogicalKeyboardKey.escape): () {
@@ -129,13 +128,20 @@ class ImageWidget extends ConsumerStatefulWidget {
     required this.scale,
     required this.fileExtension,
     required this.id,
+    required this.pictureId,
     this.tagColorValue,
     this.isFeedback = false,
   });
   final double aspectRatio;
   final double scale;
   final String? fileExtension;
+
+  /// The placed image's id, which its hero tag carries: unique on a page.
   final String id;
+
+  /// The id of the picture it shows (PlacedImage.pictureId), which images
+  /// on several pages, or a copy and its original, can share.
+  final String pictureId;
   final int? tagColorValue;
   final bool isFeedback;
 
@@ -161,7 +167,7 @@ class _ImageWidgetState extends ConsumerState<ImageWidget> {
         .clamp(1.0, double.infinity);
     final source = watchStrategyImageSource(
       ref,
-      (id: widget.id, fileExtension: widget.fileExtension),
+      (id: widget.pictureId, fileExtension: widget.fileExtension),
     );
     final image = source.imageProvider;
 
@@ -170,7 +176,7 @@ class _ImageWidgetState extends ConsumerState<ImageWidget> {
           // while its cloud URL loads, and no other image's frame carries
           // over.
           LocalImageFile() || RemoteImageUrl() || ImageBytes() => Image(
-              key: ValueKey(widget.id),
+              key: ValueKey(widget.pictureId),
               image: image!,
               fit: BoxFit.contain,
               gaplessPlayback: true,

lib/widgets/draggable_widgets/image/placed_image_builder.dart

@@ -189,6 +189,7 @@ class _PlacedImageBuilderState extends State<PlacedImageBuilder> {
                   scale: localScale!,
                   fileExtension: widget.placedImage.fileExtension,
                   id: widget.placedImage.id,
+                  pictureId: widget.placedImage.pictureId,
                   tagColorValue: widget.placedImage.tagColorValue,
                 ),
               ),
@@ -220,6 +221,7 @@ class _PlacedImageBuilderState extends State<PlacedImageBuilder> {
                   aspectRatio: widget.placedImage.aspectRatio,
                   scale: localScale!,
                   id: widget.placedImage.id,
+                  pictureId: widget.placedImage.pictureId,
                   tagColorValue: widget.placedImage.tagColorValue,
                 ),
               ),

lib/widgets/page_transition_overlay.dart

@@ -774,6 +774,7 @@ class PlacedWidgetPreview {
         aspectRatio: w.aspectRatio,
         scale: scale ?? w.scale,
         id: w.id,
+        pictureId: w.pictureId,
         tagColorValue: w.tagColorValue,
       );
     }

test/canonical_coordinates_test.dart

@@ -388,6 +388,7 @@ void main() {
                 ImageWidget(
                   key: const ValueKey('image-card'),
                   id: image.id,
+                  pictureId: image.pictureId,
                   aspectRatio: image.aspectRatio,
                   scale: image.scale,
                   fileExtension: image.fileExtension,