feat(interactive-viewer): add clip behavior configuration for interactive content

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+## 12.5.1
+- **FEAT**(main-editor): Add `interactiveViewerClipBehavior` option to `MainEditorConfigs` (default `Clip.hardEdge`) to control clipping of the editor's interactive content area.
+
 ## 12.5.0
 - **FEAT**(crop-rotate): Add `enableKeepAspectRatioOnRotate` option to keep the selected aspect ratio orientation when rotating (e.g. `9:16` stays `9:16` instead of becoming `16:9`), zooming the image in so it still fully covers the crop area.
 

lib/core/models/editor_configs/main_editor_configs.dart

@@ -50,6 +50,7 @@ class MainEditorConfigs extends ZoomConfigs {
     this.icons = const MainEditorIcons(),
     this.widgets = const MainEditorWidgets(),
     this.safeArea = const EditorSafeArea(),
+    this.interactiveViewerClipBehavior = Clip.hardEdge,
   });
 
   /// Determines whether the close button is displayed on the widget.
@@ -100,6 +101,11 @@ class MainEditorConfigs extends ZoomConfigs {
   /// Defines the safe area configuration for the editor.
   final EditorSafeArea safeArea;
 
+  /// Defines the clip behavior of the editor's interactive content area.
+  ///
+  /// Defaults to [Clip.hardEdge].
+  final Clip interactiveViewerClipBehavior;
+
   /// Whether to capture all active layers as images when [doneEditing] is
   /// called and include them in [CompleteParameters.capturedLayers].
   ///
@@ -169,6 +175,7 @@ class MainEditorConfigs extends ZoomConfigs {
     bool? enableSubEditorPage,
     bool? captureImageOnDone,
     bool? captureLayersOnDone,
+    Clip? interactiveViewerClipBehavior,
   }) {
     return MainEditorConfigs(
       enableSubEditorPage: enableSubEditorPage ?? this.enableSubEditorPage,
@@ -198,6 +205,8 @@ class MainEditorConfigs extends ZoomConfigs {
       boundaryMargin: boundaryMargin ?? this.boundaryMargin,
       safeArea: safeArea ?? this.safeArea,
       tools: tools ?? this.tools,
+      interactiveViewerClipBehavior:
+          interactiveViewerClipBehavior ?? this.interactiveViewerClipBehavior,
     );
   }
 }

lib/features/main_editor/widgets/main_editor_interactive_content.dart

@@ -186,6 +186,7 @@ class MainEditorInteractiveContent extends StatelessWidget {
     return ExtendedInteractiveViewer(
       key: interactiveViewerKey,
       enableExternalGestureDetector: true,
+      clipBehavior: mainConfigs.interactiveViewerClipBehavior,
       zoomConfigs: mainConfigs,
       onInteractionStart: (details) {
         callbacks.mainEditorCallbacks?.onEditorZoomScaleStart?.call(details);

lib/shared/widgets/extended/interactive_viewer/extended_interactive_viewer.dart

@@ -21,8 +21,17 @@ class ExtendedInteractiveViewer extends StatefulWidget {
     this.onMatrix4Change,
     this.initialMatrix4,
     this.enableExternalGestureDetector = false,
+    this.clipBehavior = Clip.hardEdge,
   });
 
+  /// How to clip the child during zoom/pan.
+  ///
+  /// Defaults to [Clip.hardEdge], which confines the transformed child to the
+  /// viewport. Set to [Clip.none] to let the zoomed child overflow the
+  /// viewport (e.g. a video editor where the zoomed frame should extend over
+  /// the letterbox area).
+  final Clip clipBehavior;
+
   /// Configuration options that control zoom behavior and limits.
   ///
   /// Provides settings such as whether zoom is enabled, min/max scale factors,
@@ -310,6 +319,7 @@ class ExtendedInteractiveViewerState extends State<ExtendedInteractiveViewer>
       onInteractionEnd: widget.onInteractionEnd,
       enableExternalGestureDetector: widget.enableExternalGestureDetector,
       invertTrackpadDirection: widget.zoomConfigs.invertTrackpadDirection,
+      clipBehavior: widget.clipBehavior,
       child: widget.child,
     );
   }

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: 12.5.0
+version: 12.5.1
 homepage: https://github.com/hm21/pro_image_editor/
 repository: https://github.com/hm21/pro_image_editor/
 documentation: https://github.com/hm21/pro_image_editor/