merge: pull request #621 from hm21:dev

feat(state-history): track background image changes for undo/redo

Author: hm21

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 11.2.0
+- **FEAT**(state-history): Added support for undo and redo when the background image is changed in the state history.
+
 ## 11.1.3
 - **FIX**(text-editor): Fixed an issue where long text didn’t wrap correctly.
 - **FIX**(video-editor): Fixed display issues with the trim bar, especially for maximum and minimum durations.

example/lib/features/frame_example.dart

@@ -208,9 +208,11 @@ class _FrameExampleState extends State<FrameExample>
     await _createTransparentBackgroundImage();
 
     /// Set the background bounds
-    editorKey.currentState!.editorImage = EditorImage(
-      byteArray: _transparentBytes,
+    await editorKey.currentState!.updateBackgroundImage(
+      EditorImage(byteArray: _transparentBytes),
+      updateHistory: false,
     );
+
     await editorKey.currentState!.decodeImage();
   }
 

lib/features/main_editor/main_editor.dart

@@ -397,6 +397,7 @@ class ProImageEditorState extends State<ProImageEditor>
 
   /// Manager class for managing the state of the editor.
   late final StateManager stateManager = StateManager(
+    activeBackgroundImage: widget.editorImage,
     onStateHistoryChange: () =>
         mainEditorCallbacks?.onStateHistoryChange?.call(stateManager, this),
   );
@@ -513,7 +514,7 @@ class ProImageEditorState extends State<ProImageEditor>
   }
 
   /// Get the current background image.
-  late EditorImage? editorImage = widget.editorImage;
+  EditorImage? get editorImage => stateManager.activeBackgroundImage;
 
   /// A [Completer] used to track the completion of a page open operation.
   ///
@@ -878,7 +879,7 @@ class ProImageEditorState extends State<ProImageEditor>
     );
 
     final resolution = widget.videoController!.initialResolution;
-    editorImage = EditorImage(
+    stateManager.activeBackgroundImage = EditorImage(
       byteArray: await createTransparentImage(
         resolution.width,
         resolution.height,
@@ -994,43 +995,42 @@ class ProImageEditorState extends State<ProImageEditor>
     }
   }
 
-  /// Replace the background image with a new image and ensures all relevant
-  /// states are rebuilt to reflect the new background. This includes marking
-  /// all background screenshots as "broken" to trigger re-capture with the
-  /// new image, and rebuilding the current editor state to apply the changes.
-  ///
-  /// The method performs the following steps:
-  /// 1. Updates the editor's background image.
-  /// 2. Decodes the new image to prepare it for rendering.
-  /// 3. Marks all screenshots as "broken" so they are recaptured with the
-  /// updated background.
-  /// 4. Rebuilds the current editor state to ensure the new background is
-  /// applied.
-  Future<void> updateBackgroundImage(EditorImage image) async {
-    editorImage = image;
-    await decodeImage();
-
-    /// Mark all background captured images with the old background image as
-    /// "broken" that the editor capture them with the new image again
-    for (var item in stateManager.screenshots) {
-      item.broken = true;
+  /// Updates the background image in the editor.
+  ///
+  /// If [updateHistory] is `false`, marks all background-captured images that
+  /// use the old-background image as "broken" so they will be recaptured with
+  /// the new image, and set the active background image to [image].
+  ///
+  /// If [updateHistory] is `true`, updates the background images in the
+  /// state manager, replaces the old image with [image], and adds the change
+  /// to the history.
+  ///
+  /// After updating, decodes the new image asynchronously.
+  ///
+  /// [image]: The new background image to set.
+  /// [updateHistory]: Whether to update the history with this change
+  /// (default is `true`).
+  Future<void> updateBackgroundImage(
+    EditorImage image, {
+    bool updateHistory = true,
+  }) async {
+    if (!updateHistory) {
+      /// Mark all background-captured images that use the old background
+      /// image as "broken" so the editor captures them again with the new
+      /// image.
+      for (var item in stateManager.screenshots) {
+        item.broken = true;
+      }
+      stateManager.activeBackgroundImage = image;
+    } else {
+      stateManager.updateBackgroundImages(
+        oldImage: editorImage ?? widget.editorImage!,
+        newImage: image,
+      );
+      addHistory();
     }
 
-    /// Force to rebuild everything
-    int pos = stateManager.historyPointer;
-    EditorStateHistory oldHistory = stateManager.stateHistory[pos];
-
-    stateManager.stateHistory[pos] = EditorStateHistory(
-      layers: oldHistory.layers,
-      transformConfigs: oldHistory.transformConfigs,
-      blur: oldHistory.blur,
-      filters: [...oldHistory.filters],
-      tuneAdjustments: [...oldHistory.tuneAdjustments],
-    );
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      if (!mounted) return;
-      _backgroundImageColorFilterKey.currentState?.refresh();
-    });
+    await decodeImage();
   }
 
   @override

lib/features/main_editor/services/state_manager.dart

@@ -1,3 +1,4 @@
+import '/core/models/editor_image.dart';
 import '/core/models/history/state_history.dart';
 import '/core/models/layers/layer.dart';
 import '/core/models/multi_threading/thread_capture_model.dart';
@@ -10,6 +11,7 @@ class StateManager {
   /// Creates an instance of [StateManager].
   StateManager({
     required this.onStateHistoryChange,
+    required this.activeBackgroundImage,
   });
 
   /// Optional callbacks for additional editor actions.
@@ -47,6 +49,31 @@ class StateManager {
   /// for undo/redo functionality.
   List<EditorStateHistory> get stateHistory => _stateHistory;
 
+  final Map<int, EditorImage> _backgroundImages = {};
+
+  /// The currently active background image in the editor.
+  EditorImage? activeBackgroundImage;
+
+  /// Updates the background images in the editor's history.
+  ///
+  /// Replaces the background image at the current history pointer with
+  /// [oldImage], and sets the next history entry to [newImage]. Also updates
+  /// the [activeBackgroundImage] to [newImage].
+  ///
+  /// Parameters:
+  /// - [oldImage]: The previous background image to store at the current
+  /// history pointer.
+  /// - [newImage]: The new background image to store at the next history
+  /// pointer.
+  void updateBackgroundImages({
+    required EditorImage oldImage,
+    required EditorImage newImage,
+  }) {
+    _backgroundImages[historyPointer] = oldImage;
+    _backgroundImages[historyPointer + 1] = newImage;
+    activeBackgroundImage = newImage;
+  }
+
   /// A setter for updating the state history list.
   /// When a new list of editor states is assigned, it triggers
   /// `_updateActiveItems()` to refresh any dependent components based on the
@@ -103,6 +130,10 @@ class StateManager {
         0.0;
 
     onStateHistoryChange?.call();
+
+    if (_backgroundImages[historyPointer] != null) {
+      activeBackgroundImage = _backgroundImages[historyPointer];
+    }
   }
 
   /// A list of active filters applied to the image.
@@ -186,6 +217,7 @@ class StateManager {
       while (_historyPointer < screenshots.length) {
         screenshots.removeLast();
       }
+      _backgroundImages.removeWhere((index, _) => index > _historyPointer);
     }
     _historyPointer = _stateHistory.length - 1;
   }

pubspec.yaml

@@ -1,6 +1,6 @@
 name: pro_image_editor
 description: "A Flutter image editor: Seamlessly enhance your images with user-friendly editing features."
-version: 11.1.3
+version: 11.2.0
 homepage: https://github.com/hm21/pro_image_editor/
 repository: https://github.com/hm21/pro_image_editor/
 documentation: https://github.com/hm21/pro_image_editor/