From e631d0183af75621fc294753f6e81215dfd89d71 Mon Sep 17 00:00:00 2001 From: hm21 Date: Mon, 15 Jun 2026 10:28:45 +0200 Subject: [PATCH 1/4] feat(interactive-viewer): add clip behavior configuration for interactive content --- CHANGELOG.md | 3 +++ .../models/editor_configs/main_editor_configs.dart | 8 ++++++++ .../widgets/main_editor_interactive_content.dart | 1 + .../extended_interactive_viewer.dart | 10 ++++++++++ pubspec.yaml | 2 +- 5 files changed, 23 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43f0206b7..032f0f5c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ # Changelog +## 12.5.1 +- **FEAT**(main-editor): Add `clipBehavior` 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. diff --git a/lib/core/models/editor_configs/main_editor_configs.dart b/lib/core/models/editor_configs/main_editor_configs.dart index fa8b108b6..6ae167974 100644 --- a/lib/core/models/editor_configs/main_editor_configs.dart +++ b/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.clipBehavior = 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 clipBehavior; + /// 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? clipBehavior, }) { return MainEditorConfigs( enableSubEditorPage: enableSubEditorPage ?? this.enableSubEditorPage, @@ -198,6 +205,7 @@ class MainEditorConfigs extends ZoomConfigs { boundaryMargin: boundaryMargin ?? this.boundaryMargin, safeArea: safeArea ?? this.safeArea, tools: tools ?? this.tools, + clipBehavior: clipBehavior ?? this.clipBehavior, ); } } diff --git a/lib/features/main_editor/widgets/main_editor_interactive_content.dart b/lib/features/main_editor/widgets/main_editor_interactive_content.dart index 849b429d9..69a696f61 100644 --- a/lib/features/main_editor/widgets/main_editor_interactive_content.dart +++ b/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.clipBehavior, zoomConfigs: mainConfigs, onInteractionStart: (details) { callbacks.mainEditorCallbacks?.onEditorZoomScaleStart?.call(details); diff --git a/lib/shared/widgets/extended/interactive_viewer/extended_interactive_viewer.dart b/lib/shared/widgets/extended/interactive_viewer/extended_interactive_viewer.dart index 76f40c3c7..80a689b6e 100644 --- a/lib/shared/widgets/extended/interactive_viewer/extended_interactive_viewer.dart +++ b/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 onInteractionEnd: widget.onInteractionEnd, enableExternalGestureDetector: widget.enableExternalGestureDetector, invertTrackpadDirection: widget.zoomConfigs.invertTrackpadDirection, + clipBehavior: widget.clipBehavior, child: widget.child, ); } diff --git a/pubspec.yaml b/pubspec.yaml index dc1a5cc21..8ac057e3e 100644 --- a/pubspec.yaml +++ b/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/ From 770d104c3f79a5a8f612bed67b28c1931079a949 Mon Sep 17 00:00:00 2001 From: hm21 Date: Mon, 15 Jun 2026 10:30:07 +0200 Subject: [PATCH 2/4] feat(interactive-viewer): rename clipBehavior to interactiveViewerClipBehavior for clarity --- lib/core/models/editor_configs/main_editor_configs.dart | 7 ++++--- .../widgets/main_editor_interactive_content.dart | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/core/models/editor_configs/main_editor_configs.dart b/lib/core/models/editor_configs/main_editor_configs.dart index 6ae167974..7b77578f9 100644 --- a/lib/core/models/editor_configs/main_editor_configs.dart +++ b/lib/core/models/editor_configs/main_editor_configs.dart @@ -50,7 +50,7 @@ class MainEditorConfigs extends ZoomConfigs { this.icons = const MainEditorIcons(), this.widgets = const MainEditorWidgets(), this.safeArea = const EditorSafeArea(), - this.clipBehavior = Clip.hardEdge, + this.interactiveViewerClipBehavior = Clip.hardEdge, }); /// Determines whether the close button is displayed on the widget. @@ -104,7 +104,7 @@ class MainEditorConfigs extends ZoomConfigs { /// Defines the clip behavior of the editor's interactive content area. /// /// Defaults to [Clip.hardEdge]. - final Clip clipBehavior; + final Clip interactiveViewerClipBehavior; /// Whether to capture all active layers as images when [doneEditing] is /// called and include them in [CompleteParameters.capturedLayers]. @@ -205,7 +205,8 @@ class MainEditorConfigs extends ZoomConfigs { boundaryMargin: boundaryMargin ?? this.boundaryMargin, safeArea: safeArea ?? this.safeArea, tools: tools ?? this.tools, - clipBehavior: clipBehavior ?? this.clipBehavior, + interactiveViewerClipBehavior: + clipBehavior ?? this.interactiveViewerClipBehavior, ); } } diff --git a/lib/features/main_editor/widgets/main_editor_interactive_content.dart b/lib/features/main_editor/widgets/main_editor_interactive_content.dart index 69a696f61..3af1f2d8c 100644 --- a/lib/features/main_editor/widgets/main_editor_interactive_content.dart +++ b/lib/features/main_editor/widgets/main_editor_interactive_content.dart @@ -186,7 +186,7 @@ class MainEditorInteractiveContent extends StatelessWidget { return ExtendedInteractiveViewer( key: interactiveViewerKey, enableExternalGestureDetector: true, - clipBehavior: mainConfigs.clipBehavior, + clipBehavior: mainConfigs.interactiveViewerClipBehavior, zoomConfigs: mainConfigs, onInteractionStart: (details) { callbacks.mainEditorCallbacks?.onEditorZoomScaleStart?.call(details); From 69d30e90e5c2457dea0539caa6a79a5505691f9a Mon Sep 17 00:00:00 2001 From: hm21 Date: Mon, 15 Jun 2026 10:30:14 +0200 Subject: [PATCH 3/4] feat(main-editor): rename clipBehavior to interactiveViewerClipBehavior for clarity --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 032f0f5c8..b53947862 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,7 @@ # Changelog ## 12.5.1 -- **FEAT**(main-editor): Add `clipBehavior` option to `MainEditorConfigs` (default `Clip.hardEdge`) to control clipping of the editor's interactive content area. +- **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. From 760c995c512d1e770f317303c68ec63fdf8dfbcc Mon Sep 17 00:00:00 2001 From: hm21 Date: Mon, 15 Jun 2026 10:30:41 +0200 Subject: [PATCH 4/4] feat(main-editor): rename clipBehavior to interactiveViewerClipBehavior for clarity --- lib/core/models/editor_configs/main_editor_configs.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/core/models/editor_configs/main_editor_configs.dart b/lib/core/models/editor_configs/main_editor_configs.dart index 7b77578f9..86fc81f52 100644 --- a/lib/core/models/editor_configs/main_editor_configs.dart +++ b/lib/core/models/editor_configs/main_editor_configs.dart @@ -175,7 +175,7 @@ class MainEditorConfigs extends ZoomConfigs { bool? enableSubEditorPage, bool? captureImageOnDone, bool? captureLayersOnDone, - Clip? clipBehavior, + Clip? interactiveViewerClipBehavior, }) { return MainEditorConfigs( enableSubEditorPage: enableSubEditorPage ?? this.enableSubEditorPage, @@ -206,7 +206,7 @@ class MainEditorConfigs extends ZoomConfigs { safeArea: safeArea ?? this.safeArea, tools: tools ?? this.tools, interactiveViewerClipBehavior: - clipBehavior ?? this.interactiveViewerClipBehavior, + interactiveViewerClipBehavior ?? this.interactiveViewerClipBehavior, ); } }