feat: flip vertically and horizontally feature to the editor

erickzanardo · erickzanardo · commit b5a53d762378 · 2024-03-12T14:39:33.000-03:00
diff --git a/packages/mini_sprite_editor/lib/app/view/app.dart b/packages/mini_sprite_editor/lib/app/view/app.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:mini_sprite/mini_sprite.dart';
 import 'package:mini_sprite_editor/config/config.dart';
 import 'package:mini_sprite_editor/hub/hub.dart';
 import 'package:mini_sprite_editor/l10n/l10n.dart';
@@ -46,9 +47,19 @@ class App extends StatelessWidget {
                     colors.split(',').map(int.parse).map(Color.new).toList();
               }
 
+              final spriteRaw = uri.queryParameters['sprite'];
+              MiniSprite? sprite;
+              if (spriteRaw != null) {
+                try {
+                  sprite = MiniSprite.fromDataString(spriteRaw);
+                } catch (_) {
+                  // ignore on invalid sprite data
+                }
+              }
               return MaterialPageRoute(
                 builder: (_) => WorkspaceView(
                   colorList: colorList,
+                  sprite: sprite,
                 ),
               );
             }
diff --git a/packages/mini_sprite_editor/lib/l10n/arb/app_en.arb b/packages/mini_sprite_editor/lib/l10n/arb/app_en.arb
@@ -207,5 +207,14 @@
     "addColor": "Add color",
     "@addColor": {
         "description": "Label for add color"
+    },
+    "flipVertically": "Flip vertically",
+    "@flipVertically": {
+        "description": "Label for flipping the sprite vertically"
+    },
+    "flipHorizontally": "Flip horizontally",
+    "@flipHorizontally": {
+        "description": "Label for flipping the sprite horizontally"
     }
+
 }
diff --git a/packages/mini_sprite_editor/lib/sprite/cubit/sprite_cubit.dart b/packages/mini_sprite_editor/lib/sprite/cubit/sprite_cubit.dart
@@ -79,6 +79,20 @@ class SpriteCubit extends ReplayCubit<SpriteState> {
     emit(state.copyWith(cursorPosition: const Offset(-1, -1)));
   }
 
+  void flipSpriteVertically() {
+    final newPixels = [
+      ...state.pixels.reversed.map((e) => [...e]),
+    ];
+    emit(state.copyWith(pixels: newPixels));
+  }
+
+  void flipSpriteHorizontally() {
+    final newPixels = [
+      ...state.pixels.map((e) => [...e.reversed]),
+    ];
+    emit(state.copyWith(pixels: newPixels));
+  }
+
   Offset _projectOffset(Offset position, double pixelSize) {
     final projected = position / pixelSize;
     final x = projected.dx.floorToDouble();
diff --git a/packages/mini_sprite_editor/lib/sprite/view/sprite_page.dart b/packages/mini_sprite_editor/lib/sprite/view/sprite_page.dart
@@ -172,6 +172,25 @@ class SpriteView extends StatelessWidget {
                       gridActive ? Icons.grid_on : Icons.grid_off,
                     ),
                   ),
+                  IconButton(
+                    key: const Key('flip_vertically_key'),
+                    onPressed: () async {
+                      context.read<SpriteCubit>().flipSpriteVertically();
+                    },
+                    tooltip: l10n.flipVertically,
+                    icon: const Icon(Icons.transform),
+                  ),
+                  IconButton(
+                    key: const Key('flip_horizontally_key'),
+                    onPressed: () async {
+                      context.read<SpriteCubit>().flipSpriteHorizontally();
+                    },
+                    tooltip: l10n.flipHorizontally,
+                    icon: Transform.rotate(
+                      angle: 1.5708,
+                      child: const Icon(Icons.transform),
+                    ),
+                  ),
                   IconButton(
                     key: const Key('copy_to_clipboard_key'),
                     onPressed: () {
diff --git a/packages/mini_sprite_editor/lib/workspace/view/workspace_view.dart b/packages/mini_sprite_editor/lib/workspace/view/workspace_view.dart
@@ -1,15 +1,19 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:mini_sprite/mini_sprite.dart';
 import 'package:mini_sprite_editor/config/cubit/config_cubit.dart';
+import 'package:mini_sprite_editor/sprite/sprite.dart';
 import 'package:mini_sprite_editor/workspace/workspace.dart';
 
 class WorkspaceView extends StatefulWidget {
   const WorkspaceView({
     this.colorList,
+    this.sprite,
     super.key,
   });
 
   final List<Color>? colorList;
+  final MiniSprite? sprite;
 
   @override
   State<WorkspaceView> createState() => _WorkspaceViewState();
@@ -23,6 +27,10 @@ class _WorkspaceViewState extends State<WorkspaceView> {
     if (widget.colorList != null) {
       context.read<ConfigCubit>().setColors(widget.colorList!);
     }
+
+    if (widget.sprite != null) {
+      context.read<SpriteCubit>().setSprite(widget.sprite!.pixels);
+    }
   }
 
   @override
diff --git a/packages/mini_sprite_editor/test/sprite/cubit/sprite_cubit_test.dart b/packages/mini_sprite_editor/test/sprite/cubit/sprite_cubit_test.dart
@@ -57,6 +57,46 @@ void main() {
       },
     );
 
+    test('flip vertically', () {
+      final cubit = SpriteCubit();
+      final state = SpriteState.initial().copyWith(
+        pixels: [
+          [1, 1],
+          [0, 0],
+        ],
+      );
+      final expected = SpriteState.initial().copyWith(
+        pixels: [
+          [0, 0],
+          [1, 1],
+        ],
+      );
+      cubit
+        ..setSprite(state.pixels)
+        ..flipSpriteVertically();
+      expect(cubit.state, equals(expected));
+    });
+
+    test('flip horizontally', () {
+      final cubit = SpriteCubit();
+      final state = SpriteState.initial().copyWith(
+        pixels: [
+          [1, 1],
+          [0, 0],
+        ],
+      );
+      final expected = SpriteState.initial().copyWith(
+        pixels: [
+          [1, 1],
+          [0, 0],
+        ],
+      );
+      cubit
+        ..setSprite(state.pixels)
+        ..flipSpriteHorizontally();
+      expect(cubit.state, equals(expected));
+    });
+
     group('importFromClipboard', () {
       late GetClipboardStub stub;
       final sprite = MiniSprite(const [
diff --git a/packages/mini_sprite_editor/test/sprite/view/sprite_view_test.dart b/packages/mini_sprite_editor/test/sprite/view/sprite_view_test.dart
@@ -213,6 +213,48 @@ void main() async {
       verify(() => spriteCubit.cursorUp(any(), any())).called(1);
     });
 
+    group('flip', () {
+      testWidgets('flips horizontally', (tester) async {
+        _mockState(
+          spriteState: SpriteState.initial(),
+          toolsState: ToolsState.initial(),
+          configState: ConfigState.initial(),
+          libraryState: LibraryState.initial(),
+        );
+        await tester.pumpTest(
+          spriteCubit: spriteCubit,
+          toolsCubit: toolsCubit,
+          configCubit: configCubit,
+          libraryCubit: libraryCubit,
+        );
+
+        await tester.tap(find.byKey(const Key('flip_horizontally_key')));
+        await tester.pump();
+
+        verify(() => spriteCubit.flipSpriteHorizontally()).called(1);
+      });
+
+      testWidgets('flips vertically', (tester) async {
+        _mockState(
+          spriteState: SpriteState.initial(),
+          toolsState: ToolsState.initial(),
+          configState: ConfigState.initial(),
+          libraryState: LibraryState.initial(),
+        );
+        await tester.pumpTest(
+          spriteCubit: spriteCubit,
+          toolsCubit: toolsCubit,
+          configCubit: configCubit,
+          libraryCubit: libraryCubit,
+        );
+
+        await tester.tap(find.byKey(const Key('flip_vertically_key')));
+        await tester.pump();
+
+        verify(() => spriteCubit.flipSpriteVertically()).called(1);
+      });
+    });
+
     group('tools', () {
       group('brush', () {
         testWidgets(
diff --git a/packages/mini_sprite_editor/test/workspace/view/workspace_view_test.dart b/packages/mini_sprite_editor/test/workspace/view/workspace_view_test.dart
@@ -2,6 +2,7 @@ import 'package:bloc_test/bloc_test.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:mini_sprite/mini_sprite.dart';
 import 'package:mini_sprite_editor/config/config.dart';
 import 'package:mini_sprite_editor/hub/hub.dart';
 import 'package:mini_sprite_editor/library/library.dart';
@@ -38,6 +39,7 @@ extension TestWidgetText on WidgetTester {
     required MapCubit mapCubit,
     required HubCubit hubCubit,
     List<Color>? colors,
+    MiniSprite? sprite,
   }) async {
     await pumpApp(
       MultiBlocProvider(
@@ -64,7 +66,12 @@ extension TestWidgetText on WidgetTester {
             value: hubCubit,
           ),
         ],
-        child: Scaffold(body: WorkspaceView(colorList: colors)),
+        child: Scaffold(
+          body: WorkspaceView(
+            colorList: colors,
+            sprite: sprite,
+          ),
+        ),
       ),
     );
   }
@@ -196,5 +203,38 @@ void main() {
             .called(1);
       },
     );
+
+    testWidgets(
+      'set the sprite when receiving one',
+      (tester) async {
+        _mockState(
+          spriteState: SpriteState.initial(),
+          toolsState: const ToolsState.initial(),
+          configState: const ConfigState.initial(),
+          libraryState: const LibraryState.initial(),
+          workspaceState: const WorkspaceState.initial(),
+          mapState: const MapState.initial(),
+        );
+
+        const sprite = MiniSprite(
+          [
+            [1],
+            [0],
+          ],
+        );
+        await tester.pumpTest(
+          spriteCubit: spriteCubit,
+          toolsCubit: toolsCubit,
+          configCubit: configCubit,
+          libraryCubit: libraryCubit,
+          workspaceCubit: workspaceCubit,
+          mapCubit: mapCubit,
+          hubCubit: hubCubit,
+          sprite: sprite,
+        );
+
+        verify(() => spriteCubit.setSprite(sprite.pixels)).called(1);
+      },
+    );
   });
 }
