From dd0cfc4656606baee345da7d1d0211839defbd60 Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Tue, 29 Jul 2025 08:48:17 +0530 Subject: [PATCH] Fix: update padding in crop rotate bar and rename paint editor state --- .../image_editor_crop_rotate.dart | 5 +- .../image_editor_main_bottom_bar.dart | 2 +- .../image_editor/image_editor_page_new.dart | 492 +++++++++--------- .../image_editor/image_editor_paint_bar.dart | 2 +- 4 files changed, 255 insertions(+), 246 deletions(-) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart index 7d0b62f8e2..a222ed92e4 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart @@ -137,7 +137,10 @@ class _ImageEditorCropRotateBarState extends State final aspectRatio = CropAspectRatioType.values[index]; final isSelected = selectedAspectRatio == aspectRatio; return Padding( - padding: const EdgeInsets.only(right: 12.0), + padding: const EdgeInsets.only( + left: 6.0, + right: 6.0, + ), child: CropAspectChip( label: aspectRatio.label, svg: aspectRatio.svg, diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_main_bottom_bar.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_main_bottom_bar.dart index 1d5a9ff789..de578abfec 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_main_bottom_bar.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_main_bottom_bar.dart @@ -121,7 +121,7 @@ class ImageEditorMainBottomBarState extends State svgPath: "assets/image-editor/image-editor-paint.svg", label: "Draw", onTap: () { - widget.editor.openPaintEditor(); + widget.editor.openPaintingEditor(); }, ), CircularIconButton( diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page_new.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page_new.dart index 771ac502a9..f72f9f386f 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page_new.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page_new.dart @@ -35,6 +35,7 @@ import "package:photos/ui/tools/editor/image_editor/image_editor_tune_bar.dart"; import "package:photos/ui/viewer/file/detail_page.dart"; import "package:photos/utils/dialog_util.dart"; import "package:photos/utils/navigation_util.dart"; +import "package:pro_image_editor/models/editor_configs/main_editor_configs.dart"; import 'package:pro_image_editor/pro_image_editor.dart'; class NewImageEditor extends StatefulWidget { @@ -177,6 +178,7 @@ class _NewImageEditorState extends State { final colorScheme = getEnteColorScheme(context); final textTheme = getEnteTextTheme(context); return Scaffold( + resizeToAvoidBottomInset: false, backgroundColor: colorScheme.backgroundBase, body: PopScope( canPop: false, @@ -203,12 +205,38 @@ class _NewImageEditorState extends State { ), ), configs: ProImageEditorConfigs( - imageGeneration: const ImageGenerationConfigs( + imageEditorTheme: ImageEditorTheme( + appBarBackgroundColor: colorScheme.backgroundBase, + background: colorScheme.backgroundBase, + bottomBarBackgroundColor: colorScheme.backgroundBase, + filterEditor: FilterEditorTheme( + background: colorScheme.backgroundBase, + ), + paintingEditor: PaintingEditorTheme( + background: colorScheme.backgroundBase, + ), + textEditor: const TextEditorTheme( + background: Colors.transparent, + textFieldMargin: EdgeInsets.only(top: kToolbarHeight), + ), + cropRotateEditor: CropRotateEditorTheme( + background: colorScheme.backgroundBase, + cropCornerColor: + Theme.of(context).colorScheme.imageEditorPrimaryColor, + ), + tuneEditor: TuneEditorTheme( + background: colorScheme.backgroundBase, + ), + emojiEditor: EmojiEditorTheme( + backgroundColor: colorScheme.backgroundBase, + ), + ), + imageGenerationConfigs: const ImageGenerationConfigs( jpegQuality: 100, generateInsideSeparateThread: true, pngLevel: 0, ), - layerInteraction: const LayerInteractionConfigs( + layerInteraction: const LayerInteraction( hideToolbarOnInteraction: false, ), theme: ThemeData( @@ -222,132 +250,9 @@ class _NewImageEditorState extends State { ), brightness: isLightMode ? Brightness.light : Brightness.dark, ), - mainEditor: MainEditorConfigs( - enableCloseButton: false, - style: MainEditorStyle( - appBarBackground: colorScheme.backgroundBase, - background: colorScheme.backgroundBase, - bottomBarBackground: colorScheme.backgroundBase, - ), - widgets: MainEditorWidgets( - removeLayerArea: (removeAreaKey, editor, rebuildStream) { - return Align( - alignment: Alignment.bottomCenter, - child: StreamBuilder( - stream: rebuildStream, - builder: (_, __) { - final isHovered = - editor.layerInteractionManager.hoverRemoveBtn; - - return AnimatedContainer( - key: removeAreaKey, - duration: const Duration(milliseconds: 150), - height: 56, - width: 56, - margin: const EdgeInsets.only(bottom: 24), - decoration: BoxDecoration( - color: isHovered - ? colorScheme.warning400.withOpacity(0.8) - : Colors.white, - shape: BoxShape.circle, - ), - padding: const EdgeInsets.all(12), - child: Center( - child: SvgPicture.asset( - "assets/image-editor/image-editor-delete.svg", - colorFilter: ColorFilter.mode( - isHovered - ? Colors.white - : colorScheme.warning400.withOpacity(0.8), - BlendMode.srcIn, - ), - ), - ), - ); - }, - ), - ); - }, - appBar: (editor, rebuildStream) { - return ReactiveCustomAppbar( - builder: (context) { - return ImageEditorAppBar( - enableRedo: editor.canRedo, - enableUndo: editor.canUndo, - key: const Key('image_editor_app_bar'), - redo: () => editor.redoAction(), - undo: () => editor.undoAction(), - configs: editor.configs, - done: () async { - final Uint8List bytes = await editorKey.currentState! - .captureEditorImage(); - await saveImage(bytes); - }, - close: () { - _showExitConfirmationDialog(context); - }, - isMainEditor: true, - ); - }, - stream: rebuildStream, - ); - }, - bottomBar: (editor, rebuildStream, key) => ReactiveCustomWidget( - key: key, - builder: (context) { - return ImageEditorMainBottomBar( - key: _mainEditorBarKey, - editor: editor, - configs: editor.configs, - callbacks: editor.callbacks, - ); - }, - stream: rebuildStream, - ), - ), - ), - paintEditor: PaintEditorConfigs( - style: PaintEditorStyle( - background: colorScheme.backgroundBase, - initialStrokeWidth: 5, - ), - widgets: PaintEditorWidgets( - appBar: (editor, rebuildStream) { - return ReactiveCustomAppbar( - builder: (context) { - return ImageEditorAppBar( - enableRedo: editor.canRedo, - enableUndo: editor.canUndo, - key: const Key('image_editor_app_bar'), - redo: () => editor.redoAction(), - undo: () => editor.undoAction(), - configs: editor.configs, - done: () => editor.done(), - close: () => editor.close(), - ); - }, - stream: rebuildStream, - ); - }, - colorPicker: - (paintEditor, rebuildStream, currentColor, setColor) => - null, - bottomBar: (editorState, rebuildStream) { - return ReactiveCustomWidget( - builder: (context) { - return ImageEditorPaintBar( - configs: editorState.configs, - callbacks: editorState.callbacks, - editor: editorState, - i18nColor: 'Color', - ); - }, - stream: rebuildStream, - ); - }, - ), - ), - textEditor: TextEditorConfigs( + mainEditorConfigs: const MainEditorConfigs(), + paintEditorConfigs: const PaintEditorConfigs(enabled: true), + textEditorConfigs: TextEditorConfigs( canToggleBackgroundMode: true, canToggleTextAlign: true, customTextStyles: [ @@ -356,98 +261,9 @@ class _NewImageEditorState extends State { GoogleFonts.dmSerifText(), GoogleFonts.comicNeue(), ], - style: const TextEditorStyle( - background: Colors.transparent, - textFieldMargin: EdgeInsets.only(top: kToolbarHeight), - ), - widgets: TextEditorWidgets( - appBar: (textEditor, rebuildStream) => ReactiveCustomAppbar( - builder: (context) { - return ImageEditorAppBar( - key: const Key('image_editor_app_bar'), - configs: textEditor.configs, - done: () => textEditor.done(), - close: () => textEditor.close(), - ); - }, - stream: rebuildStream, - ), - bodyItems: (editor, rebuildStream) { - return [ - ReactiveCustomWidget( - builder: (context) { - return Positioned.fill( - child: GestureDetector( - onTap: () {}, - child: Container( - color: Colors.transparent, - ), - ), - ); - }, - stream: rebuildStream, - ), - ]; - }, - colorPicker: - (textEditor, rebuildStream, currentColor, setColor) => null, - bottomBar: (editorState, rebuildStream) { - return ReactiveCustomWidget( - builder: (context) { - return ImageEditorTextBar( - configs: editorState.configs, - callbacks: editorState.callbacks, - editor: editorState, - ); - }, - stream: rebuildStream, - ); - }, - ), ), - cropRotateEditor: CropRotateEditorConfigs( - style: CropRotateEditorStyle( - background: colorScheme.backgroundBase, - cropCornerColor: - Theme.of(context).colorScheme.imageEditorPrimaryColor, - ), - widgets: CropRotateEditorWidgets( - appBar: (editor, rebuildStream) { - return ReactiveCustomAppbar( - builder: (context) { - return ImageEditorAppBar( - key: const Key('image_editor_app_bar'), - configs: editor.configs, - done: () => editor.done(), - close: () => editor.close(), - enableRedo: editor.canRedo, - enableUndo: editor.canUndo, - redo: () => editor.redoAction(), - undo: () => editor.undoAction(), - ); - }, - stream: rebuildStream, - ); - }, - bottomBar: (cropRotateEditor, rebuildStream) => - ReactiveCustomWidget( - stream: rebuildStream, - builder: (_) => ImageEditorCropRotateBar( - configs: cropRotateEditor.configs, - callbacks: cropRotateEditor.callbacks, - editor: cropRotateEditor, - ), - ), - ), - ), - filterEditor: FilterEditorConfigs( - fadeInUpDuration: fadeInDuration, - fadeInUpStaggerDelayDuration: fadeInDelay, - style: FilterEditorStyle( - filterListSpacing: 7, - background: colorScheme.backgroundBase, - ), - widgets: FilterEditorWidgets( + customWidgets: ImageEditorCustomWidgets( + filterEditor: CustomWidgetsFilterEditor( slider: ( editorState, rebuildStream, @@ -491,12 +307,7 @@ class _NewImageEditorState extends State { ); }, ), - ), - tuneEditor: TuneEditorConfigs( - style: TuneEditorStyle( - background: colorScheme.backgroundBase, - ), - widgets: TuneEditorWidgets( + tuneEditor: CustomWidgetsTuneEditor( appBar: (editor, rebuildStream) { return ReactiveCustomAppbar( builder: (context) { @@ -527,28 +338,223 @@ class _NewImageEditorState extends State { ); }, ), - ), - blurEditor: const BlurEditorConfigs( - enabled: false, - ), - emojiEditor: EmojiEditorConfigs( - icons: const EmojiEditorIcons(), - style: EmojiEditorStyle( - backgroundColor: colorScheme.backgroundBase, - emojiViewConfig: const EmojiViewConfig( - gridPadding: EdgeInsets.zero, - horizontalSpacing: 0, - verticalSpacing: 0, - recentsLimit: 40, - loadingIndicator: Center(child: CircularProgressIndicator()), - replaceEmojiOnLimitExceed: false, + mainEditor: CustomWidgetsMainEditor( + removeLayerArea: (key, rebuildStream) { + return ReactiveCustomWidget( + key: key, + builder: (context) { + return Align( + alignment: Alignment.bottomCenter, + child: StreamBuilder( + stream: rebuildStream, + builder: (context, snapshot) { + final isHovered = editorKey.currentState + !.layerInteractionManager.hoverRemoveBtn; + + return AnimatedContainer( + key: key, + duration: const Duration(milliseconds: 150), + height: 56, + width: 56, + margin: const EdgeInsets.only(bottom: 24), + decoration: BoxDecoration( + color: isHovered + ? colorScheme.warning400.withOpacity(0.8) + : Colors.white, + shape: BoxShape.circle, + ), + padding: const EdgeInsets.all(12), + child: Center( + child: SvgPicture.asset( + "assets/image-editor/image-editor-delete.svg", + colorFilter: ColorFilter.mode( + isHovered + ? Colors.white + : colorScheme.warning400 + .withOpacity(0.8), + BlendMode.srcIn, + ), + ), + ), + ); + }, + ), + ); + }, + stream: rebuildStream, + ); + }, + appBar: (editor, rebuildStream) { + return ReactiveCustomAppbar( + builder: (context) { + return ImageEditorAppBar( + enableRedo: editor.canRedo, + enableUndo: editor.canUndo, + key: const Key('image_editor_app_bar'), + redo: () => editor.redoAction(), + undo: () => editor.undoAction(), + configs: editor.configs, + done: () async { + final Uint8List bytes = await editorKey.currentState! + .captureEditorImage(); + await saveImage(bytes); + }, + close: () { + _showExitConfirmationDialog(context); + }, + isMainEditor: true, + ); + }, + stream: rebuildStream, + ); + }, + bottomBar: (editor, rebuildStream, key) => ReactiveCustomWidget( + key: key, + builder: (context) { + return ImageEditorMainBottomBar( + key: _mainEditorBarKey, + editor: editor, + configs: editor.configs, + callbacks: editor.callbacks, + ); + }, + stream: rebuildStream, ), - bottomActionBarConfig: const BottomActionBarConfig( - enabled: false, + ), + paintEditor: CustomWidgetsPaintEditor( + appBar: (editor, rebuildStream) { + return ReactiveCustomAppbar( + builder: (context) { + return ImageEditorAppBar( + enableRedo: editor.canRedo, + enableUndo: editor.canUndo, + key: const Key('image_editor_app_bar'), + redo: () => editor.redoAction(), + undo: () => editor.undoAction(), + configs: editor.configs, + done: () => editor.done(), + close: () => editor.close(), + ); + }, + stream: rebuildStream, + ); + }, + colorPicker: + (paintEditor, rebuildStream, currentColor, setColor) => + null, + bottomBar: (editorState, rebuildStream) { + return ReactiveCustomWidget( + builder: (context) { + return ImageEditorPaintBar( + configs: editorState.configs, + callbacks: editorState.callbacks, + editor: editorState, + i18nColor: 'Color', + ); + }, + stream: rebuildStream, + ); + }, + ), + textEditor: CustomWidgetsTextEditor( + appBar: (textEditor, rebuildStream) => ReactiveCustomAppbar( + builder: (context) { + return ImageEditorAppBar( + key: const Key('image_editor_app_bar'), + configs: textEditor.configs, + done: () => textEditor.done(), + close: () => textEditor.close(), + ); + }, + stream: rebuildStream, + ), + bodyItems: (editor, rebuildStream) { + return [ + ReactiveCustomWidget( + builder: (context) { + return Positioned.fill( + child: GestureDetector( + onTap: () {}, + child: Container( + color: Colors.transparent, + ), + ), + ); + }, + stream: rebuildStream, + ), + ]; + }, + colorPicker: + (textEditor, rebuildStream, currentColor, setColor) => null, + bottomBar: (editorState, rebuildStream) { + return ReactiveCustomWidget( + builder: (context) { + return ImageEditorTextBar( + configs: editorState.configs, + callbacks: editorState.callbacks, + editor: editorState, + ); + }, + stream: rebuildStream, + ); + }, + ), + cropRotateEditor: CustomWidgetsCropRotateEditor( + appBar: (editor, rebuildStream) { + return ReactiveCustomAppbar( + builder: (context) { + return ImageEditorAppBar( + key: const Key('image_editor_app_bar'), + configs: editor.configs, + done: () => editor.done(), + close: () => editor.close(), + enableRedo: editor.canRedo, + enableUndo: editor.canUndo, + redo: () => editor.redoAction(), + undo: () => editor.undoAction(), + ); + }, + stream: rebuildStream, + ); + }, + bottomBar: (cropRotateEditor, rebuildStream) => + ReactiveCustomWidget( + stream: rebuildStream, + builder: (_) => ImageEditorCropRotateBar( + configs: cropRotateEditor.configs, + callbacks: cropRotateEditor.callbacks, + editor: cropRotateEditor, + ), ), ), ), - stickerEditor: const StickerEditorConfigs(enabled: false), + cropRotateEditorConfigs: const CropRotateEditorConfigs( + canChangeAspectRatio: true, + canFlip: true, + canRotate: true, + canReset: true, + enabled: true, + ), + filterEditorConfigs: const FilterEditorConfigs( + enabled: true, + fadeInUpDuration: fadeInDuration, + fadeInUpStaggerDelayDuration: fadeInDelay, + ), + tuneEditorConfigs: const TuneEditorConfigs(enabled: true), + blurEditorConfigs: const BlurEditorConfigs( + enabled: false, + ), + emojiEditorConfigs: const EmojiEditorConfigs( + enabled: true, + checkPlatformCompatibility: true, + ), + stickerEditorConfigs: StickerEditorConfigs( + enabled: false, + buildStickers: (setLayer, scrollController) { + return const SizedBox.shrink(); + }, + ), ), ), ), diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_paint_bar.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_paint_bar.dart index 48f7b2a040..0e4d1dd44f 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_paint_bar.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_paint_bar.dart @@ -18,7 +18,7 @@ class ImageEditorPaintBar extends StatefulWidget with SimpleConfigsAccess { required this.i18nColor, }); - final PaintEditorState editor; + final PaintingEditorState editor; @override final ProImageEditorConfigs configs;