Add flip horizontal and vertical to all elements, closes #1058

Author: CodeDoctorDE

app/lib/dialogs/elements.dart

@@ -26,12 +26,14 @@ ContextMenuBuilder buildElementsContextMenu(
 ) {
   final cubit = bloc.editorController;
   final settingsCubit = state.settingsCubit;
-  final operations =
-      Map<
-        Renderer<PadElement>,
-        Map<RendererOperation, RendererOperationCallback>
-      >.fromIterable(renderers, value: (e) => e.getOperations());
-  final operationKeys = operations.values.expand((e) => e.keys).toList();
+  final operations = {
+    for (final renderer in renderers) renderer: renderer.getOperations(),
+  };
+  final operationKeys = {
+    ...operations.values.expand((e) => e.keys),
+    RendererOperation.flipHorizontal,
+    RendererOperation.flipVertical,
+  };
   return (context) {
     final rendererContextMenuItem = renderers.length == 1
         ? renderers.first.getContextMenuItem(bloc, context)
@@ -142,26 +144,30 @@ ContextMenuBuilder buildElementsContextMenu(
               .toList(),
           label: AppLocalizations.of(context).arrange,
         ),
-        if (operationKeys.isNotEmpty)
-          ContextMenuGroup(
-            label: AppLocalizations.of(context).operations,
-            icon: const PhosphorIcon(PhosphorIconsLight.wrench),
-            children: operationKeys
-                .map(
-                  (e) => MenuItemButton(
-                    leadingIcon: PhosphorIcon(e.icon(PhosphorIconsStyle.light)),
-                    child: Text(e.getLocalizedName(context)),
-                    onPressed: () {
+        ContextMenuGroup(
+          label: AppLocalizations.of(context).operations,
+          icon: const PhosphorIcon(PhosphorIconsLight.wrench),
+          children: operationKeys
+              .map(
+                (e) => MenuItemButton(
+                  leadingIcon: PhosphorIcon(e.icon(PhosphorIconsStyle.light)),
+                  child: Text(e.getLocalizedName(context)),
+                  onPressed: () {
+                    final flipAxis = e.flipAxis;
+                    if (flipAxis == null) {
                       operations.values
                           .map((v) => v[e])
                           .nonNulls
                           .forEach((e) => e(bloc, context));
-                      if (context.mounted) Navigator.of(context).pop(true);
-                    },
-                  ),
-                )
-                .toList(),
-          ),
+                    } else {
+                      _flipElements(bloc, renderers, rect, flipAxis);
+                    }
+                    if (context.mounted) Navigator.of(context).pop(true);
+                  },
+                ),
+              )
+              .toList(),
+        ),
         ?rendererContextMenuItem,
         if (renderers.length == 1 &&
             exportService.isExportable(renderers.first.element))
@@ -199,3 +205,24 @@ ContextMenuBuilder buildElementsContextMenu(
     ];
   };
 }
+
+void _flipElements(
+  DocumentBloc bloc,
+  List<Renderer<PadElement>> renderers,
+  Rect selectionRect,
+  Axis axis,
+) {
+  final changes = Map.fromEntries(
+    renderers.map((renderer) {
+      final id = renderer.element.id;
+      if (id == null) return null;
+      final transformed = renderer.flip(
+        axis: axis,
+        selectionRect: selectionRect,
+      );
+      if (transformed == null) return null;
+      return MapEntry(id, [transformed.element]);
+    }).nonNulls,
+  );
+  if (changes.isNotEmpty) bloc.add(ElementsChanged(changes));
+}

app/lib/handlers/select.dart

@@ -334,7 +334,6 @@ class SelectHandler extends Handler<SelectTool> {
     );
     final hit = hits.firstOrNull;
     final rect = hit?.expandedRect;
-    final selectionRect = getSelectionRect();
     final hitSelection = _isSelectionHit(
       position,
       context.getCameraTransform(),
@@ -358,7 +357,7 @@ class SelectHandler extends Handler<SelectTool> {
           context.getClipboardManager(),
           localPosition,
           _selected,
-          selectionRect,
+          getSelectionRect(),
         ),
       );
       if (result ?? false) {

app/lib/renderers/elements/image.dart

@@ -232,14 +232,6 @@ class ImageRenderer extends Renderer<ImageElement> {
           updateImage(bloc, (cmd) => cmd.filter(updateImageBackground())),
       RendererOperation.grayscale: (bloc, context) =>
           updateImage(bloc, (cmd) => cmd.grayscale()),
-      RendererOperation.flipHorizontal: (bloc, context) => updateImage(
-        bloc,
-        (cmd) => cmd.flip(direction: img.FlipDirection.horizontal),
-      ),
-      RendererOperation.flipVertical: (bloc, context) => updateImage(
-        bloc,
-        (cmd) => cmd.flip(direction: img.FlipDirection.vertical),
-      ),
     };
   }
 }

app/lib/renderers/renderer.dart

@@ -474,6 +474,12 @@ enum RendererOperation {
     RendererOperation.flipHorizontal => PhosphorIcons.flipHorizontal,
     RendererOperation.flipVertical => PhosphorIcons.flipVertical,
   };
+
+  Axis? get flipAxis => switch (this) {
+    RendererOperation.flipHorizontal => Axis.horizontal,
+    RendererOperation.flipVertical => Axis.vertical,
+    _ => null,
+  };
 }
 
 typedef RendererOperationCallback =
@@ -764,6 +770,27 @@ abstract class Renderer<T> {
     );
   }
 
+  Renderer<T>? flip({required Axis axis, required Rect selectionRect}) {
+    final bounds = expandedRect ?? rect;
+    if (bounds == null) return null;
+    final offset = switch (axis) {
+      Axis.horizontal => Offset(
+        2 * (selectionRect.center.dx - bounds.center.dx),
+        0,
+      ),
+      Axis.vertical => Offset(
+        0,
+        2 * (selectionRect.center.dy - bounds.center.dy),
+      ),
+    };
+    return transform(
+      position: offset,
+      scaleX: axis == Axis.horizontal ? -1 : 1,
+      scaleY: axis == Axis.vertical ? -1 : 1,
+      positionIsBounds: true,
+    );
+  }
+
   Renderer<T>? _transform({
     required Offset position,
     required double rotation,

app/test/renderers/shape_renderer_test.dart

@@ -4,6 +4,7 @@ import 'dart:ui';
 import 'package:butterfly/renderers/renderer.dart';
 import 'package:butterfly_api/butterfly_api.dart';
 import 'package:flutter_test/flutter_test.dart';
+import 'package:flutter/widgets.dart' show Axis;
 
 void main() {
   group('Zero Size Shapes', () {
@@ -112,6 +113,27 @@ void main() {
       );
     });
 
+    test('flip mirrors the renderer inside the selection bounds', () {
+      final renderer = ShapeRenderer(
+        ShapeElement(
+          firstPosition: const Point(120, 210),
+          secondPosition: const Point(220, 260),
+        ),
+      );
+
+      final horizontal = renderer.flip(
+        axis: Axis.horizontal,
+        selectionRect: const Rect.fromLTWH(100, 200, 200, 100),
+      )!;
+      final vertical = renderer.flip(
+        axis: Axis.vertical,
+        selectionRect: const Rect.fromLTWH(100, 200, 200, 100),
+      )!;
+
+      expect(horizontal.expandedRect, const Rect.fromLTWH(180, 210, 100, 50));
+      expect(vertical.expandedRect, const Rect.fromLTWH(120, 240, 100, 50));
+    });
+
     test('horizontal flip keeps a rotated element in the target bounds', () {
       final renderer = ShapeRenderer(
         ShapeElement(

metadata/en-US/changelogs/189.txt

@@ -4,6 +4,7 @@
 * Add custom fonts to label ([#1011](https://github.com/LinwoodDev/Butterfly/issues/1011))
 * Add option to customize default file name globally and in template ([#1041](https://github.com/LinwoodDev/Butterfly/issues/1041))
 * Reorder top corner menu to have home on top ([#1161](https://github.com/LinwoodDev/Butterfly/issues/1161))
+* Add flip horizontal and vertical to all elements ([#1058](https://github.com/LinwoodDev/Butterfly/issues/1058))
 * Rebuild internal settings pages
   * Add search bar to settings pages ([#1158](https://github.com/LinwoodDev/Butterfly/issues/1158))
   * Always have settings value on the right side