Fix placement when flipping rotated elements

Author: CodeDoctorDE

app/lib/handlers/select.dart

@@ -114,14 +114,8 @@ class SelectHandler extends Handler<SelectTool> {
     final rotation = transform.rotation;
     final rotationRad = rotation * pi / 180;
 
-    final Offset selectionTopLeft = selectionRect.topLeft;
-    final Offset movedSelectionTopLeft = selectionTopLeft + transform.position;
-
-    Offset applyScaleAndTranslate(Offset original) {
-      final relative = original - selectionTopLeft;
-      return Offset(relative.dx * scaleX, relative.dy * scaleY) +
-          movedSelectionTopLeft;
-    }
+    Offset applyScaleAndTranslate(Offset original) =>
+        transform.scalePoint(original, selectionRect);
 
     final Offset transformedPivot = applyScaleAndTranslate(pivot);
 
@@ -134,13 +128,14 @@ class SelectHandler extends Handler<SelectTool> {
       final elementRect = renderer.rect ?? Rect.zero;
 
       final originalExpandedTopLeft = elementExpandedRect.topLeft;
-      final translatedExpandedTopLeft = applyScaleAndTranslate(
-        originalExpandedTopLeft,
+      final transformedExpandedRect = transform.scaleRect(
+        elementExpandedRect,
+        selectionRect,
       );
       // Delta relative to expandedRect.topLeft so it's zero at identity.
       // The position compensation inside transform() converts from the
       // expandedRect reference frame to the rect reference frame.
-      var delta = translatedExpandedTopLeft - originalExpandedTopLeft;
+      var delta = transformedExpandedRect.topLeft - originalExpandedTopLeft;
 
       if (rotation != 0) {
         final originalTopLeft = elementRect.topLeft;
@@ -163,6 +158,7 @@ class SelectHandler extends Handler<SelectTool> {
             rotation: rotation,
             rotatePosition: false,
             relative: true,
+            positionIsBounds: true,
           ) ??
           renderer;
     }).toList();

app/lib/renderers/elements/pen.dart

@@ -322,8 +322,10 @@ class PenRenderer extends Renderer<PenElement> {
     bool expanded = false,
   ]) {
     final rect = expanded ? expandedRect : this.rect;
-    final size = Size(rect.width * scaleX, rect.height * scaleY);
-    return position & size;
+    return Rect.fromPoints(
+      position,
+      position + Offset(rect.width * scaleX, rect.height * scaleY),
+    );
   }
 
   @override

app/lib/renderers/elements/polygon.dart

@@ -224,8 +224,10 @@ class PolygonRenderer extends Renderer<PolygonElement> {
   }
 
   Rect moveRect(Offset position, double scaleX, double scaleY) {
-    final size = Size(rect.width * scaleX, rect.height * scaleY);
-    return position & size;
+    return Rect.fromPoints(
+      position,
+      position + Offset(rect.width * scaleX, rect.height * scaleY),
+    );
   }
 
   @override

app/lib/renderers/elements/shape.dart

@@ -1,5 +1,15 @@
 part of '../renderer.dart';
 
+({Offset tip, Offset left, Offset right}) _trianglePoints(
+  Rect rect,
+  ShapeElement element,
+) {
+  final flippedVertically = element.secondPosition.y < element.firstPosition.y;
+  return flippedVertically
+      ? (tip: rect.bottomCenter, left: rect.topLeft, right: rect.topRight)
+      : (tip: rect.topCenter, left: rect.bottomLeft, right: rect.bottomRight);
+}
+
 class ShapeRenderer extends Renderer<ShapeElement> {
   final _strokePaint = ElementPaintRenderer();
   final _fillPaint = ElementPaintRenderer();
@@ -161,11 +171,11 @@ class ShapeRenderer extends Renderer<ShapeElement> {
         ..lineTo(element.secondPosition.x, element.secondPosition.y);
       _drawStyledPath(canvas, path, paint);
     } else if (shape is TriangleShape) {
-      final topCenter = drawRect.topCenter;
+      final points = _trianglePoints(drawRect, element);
       final path = Path()
-        ..moveTo(topCenter.dx, topCenter.dy)
-        ..lineTo(drawRect.right, drawRect.bottom)
-        ..lineTo(drawRect.left, drawRect.bottom)
+        ..moveTo(points.tip.dx, points.tip.dy)
+        ..lineTo(points.right.dx, points.right.dy)
+        ..lineTo(points.left.dx, points.left.dy)
         ..close();
       canvas.drawPath(
         path,
@@ -305,11 +315,11 @@ class ShapeRenderer extends Renderer<ShapeElement> {
             },
           );
     } else if (shape is TriangleShape) {
-      final topCenter = drawRect.topCenter;
+      final points = _trianglePoints(drawRect, element);
       final d =
-          'M${topCenter.dx} ${topCenter.dy} '
-          'L${drawRect.right} ${drawRect.bottom} '
-          'L${drawRect.left} ${drawRect.bottom} Z';
+          'M${points.tip.dx} ${points.tip.dy} '
+          'L${points.right.dx} ${points.right.dy} '
+          'L${points.left.dx} ${points.left.dy} Z';
       xml
           .getElement('svg')
           ?.createElement(
@@ -322,23 +332,6 @@ class ShapeRenderer extends Renderer<ShapeElement> {
               'stroke-dasharray': ?dashArray,
             },
           );
-    } else if (shape is TriangleShape) {
-      final topCenter = drawRect.topCenter;
-      final d =
-          'M${topCenter.dx} ${topCenter.dy} '
-          'L${drawRect.right} ${drawRect.bottom} '
-          'L${drawRect.left} ${drawRect.bottom} Z';
-      xml
-          .getElement('svg')
-          ?.createElement(
-            'path',
-            attributes: {
-              'd': d,
-              'fill': shape.fillPaint.previewColor.toHexString(),
-              'stroke': element.property.paint.previewColor.toHexString(),
-              'stroke-width': '${element.property.strokeWidth}px',
-            },
-          );
     }
   }
 
@@ -354,16 +347,13 @@ class ShapeRenderer extends Renderer<ShapeElement> {
     final previous = rect.topLeft;
     final localFirst = element.firstPosition.toOffset() - previous;
     final localSecond = element.secondPosition.toOffset() - previous;
-    final nextRotation = element.property.shape is TriangleShape && scaleY < 0
-        ? (rotation + 180) % 360
-        : rotation;
     return ShapeRenderer(
       element.copyWith(
         shear: shear,
         firstPosition: (localFirst.scale(scaleX, scaleY) + position).toPoint(),
         secondPosition: (localSecond.scale(scaleX, scaleY) + position)
             .toPoint(),
-        rotation: nextRotation,
+        rotation: rotation,
       ),
       layer,
     );
@@ -503,9 +493,10 @@ class ShapeHitCalculator extends HitCalculator {
     }
 
     bool hitTriangle() {
-      final triTop = this.rect.topCenter.rotate(center, rotation);
-      final triLeft = this.rect.bottomLeft.rotate(center, rotation);
-      final triRight = this.rect.bottomRight.rotate(center, rotation);
+      final points = _trianglePoints(this.rect, element);
+      final triTop = points.tip.rotate(center, rotation);
+      final triLeft = points.left.rotate(center, rotation);
+      final triRight = points.right.rotate(center, rotation);
 
       return switch (hitElementMode) {
         HitElementMode.full =>
@@ -600,9 +591,10 @@ class ShapeHitCalculator extends HitCalculator {
           _ => false, // this shouldn't happen
         };
       case TriangleShape():
-        final topCenter = rect.topCenter.rotate(center, rotation);
-        final bottomLeft = rect.bottomLeft.rotate(center, rotation);
-        final bottomRight = rect.bottomRight.rotate(center, rotation);
+        final points = _trianglePoints(rect, element);
+        final topCenter = points.tip.rotate(center, rotation);
+        final bottomLeft = points.left.rotate(center, rotation);
+        final bottomRight = points.right.rotate(center, rotation);
         var triPoints = [topCenter, bottomLeft, bottomRight];
         final inside = isPolygonInPolygon(polygon, triPoints);
         return switch (hitElementMode) {

app/lib/renderers/foregrounds/select.dart

@@ -51,6 +51,20 @@ typedef TransformResult = ({
   double scaleY,
 });
 
+extension TransformResultGeometry on TransformResult {
+  Offset scalePoint(Offset point, Rect selection) {
+    final relative = point - selection.topLeft;
+    return selection.topLeft +
+        position +
+        Offset(relative.dx * scaleX, relative.dy * scaleY);
+  }
+
+  Rect scaleRect(Rect rect, Rect selection) => Rect.fromPoints(
+    scalePoint(rect.topLeft, selection),
+    scalePoint(rect.bottomRight, selection),
+  );
+}
+
 class RectSelectionForegroundManager {
   final bool enableRotation;
   Rect _selection = Rect.zero;
@@ -270,15 +284,7 @@ class RectSelectionForegroundManager {
   Rect getTransformedSelection() {
     final transform = getTransform();
     if (transform == null) return _selection;
-    final topLeft = _selection.topLeft + transform.position;
-    return Rect.fromPoints(
-      topLeft,
-      topLeft +
-          Offset(
-            _selection.width * transform.scaleX,
-            _selection.height * transform.scaleY,
-          ),
-    );
+    return transform.scaleRect(_selection, _selection);
   }
 
   RectSelectionForegroundRenderer get renderer =>

app/lib/renderers/renderer.dart

@@ -676,6 +676,7 @@ abstract class Renderer<T> {
     double? rotation,
     bool relative = true,
     bool rotatePosition = false,
+    bool positionIsBounds = false,
   }) {
     final rect = this.rect ?? Rect.zero;
     rotation ??= relative ? 0 : this.rotation;
@@ -748,9 +749,10 @@ abstract class Renderer<T> {
       nextShear,
     );
     if (rotationDelta == 0) {
+      final scaledOrigin = positionIsBounds ? rect.topLeft : scaledRect.topLeft;
       nextPosition +=
           (oldExpanded.topLeft - rect.topLeft) -
-          (newExpanded.topLeft - scaledRect.topLeft);
+          (newExpanded.topLeft - scaledOrigin);
     }
 
     return _transform(

app/pubspec.lock

@@ -252,10 +252,10 @@ packages:
     dependency: "direct main"
     description:
       name: connectivity_plus
-      sha256: cad0e811a289ea2a941119dc483c204ec1684cbb9a8fc7351fe4a230b8313160
+      sha256: "25cebb79dfe304022550e0c3c893ae051ded07183d2607f7b88473cb3ade33cb"
       url: "https://pub.dev"
     source: hosted
-    version: "7.2.0"
+    version: "7.3.0"
   connectivity_plus_platform_interface:
     dependency: transitive
     description:
@@ -893,10 +893,10 @@ packages:
     dependency: "direct main"
     description:
       name: network_info_plus
-      sha256: "4a1217d16644ed59f88e415e2777a4c81f4da5bffb724566825e5551c6379567"
+      sha256: "096a700e2321507e2e587487a442b9baa7ba6cd4e70e3cc1ebbb8327d2632c2d"
       url: "https://pub.dev"
     source: hosted
-    version: "8.2.0"
+    version: "8.2.1"
   network_info_plus_platform_interface:
     dependency: transitive
     description:
@@ -977,10 +977,10 @@ packages:
     dependency: "direct main"
     description:
       name: package_info_plus
-      sha256: f5c435dc0e0d461e5b32471a870f769b6a1cc46930637efe24fbc535314e78ad
+      sha256: "127e1751e37ffb2ff4658beeaca77bad0c27bf5f932bd3a501c2296926d4b481"
       url: "https://pub.dev"
     source: hosted
-    version: "10.2.0"
+    version: "10.2.1"
   package_info_plus_platform_interface:
     dependency: transitive
     description:
@@ -1283,10 +1283,10 @@ packages:
     dependency: "direct main"
     description:
       name: share_plus
-      sha256: "9eee8283462d91a7a1c8bdb67d08874abd75a2f8fae3bc0ca033035e375fb3d8"
+      sha256: "02180b01c1237b9706b663d9402b2cf2402b3407f48cce99cc19e3200f095b8a"
       url: "https://pub.dev"
     source: hosted
-    version: "13.2.0"
+    version: "13.2.1"
   share_plus_platform_interface:
     dependency: transitive
     description:
@@ -1601,10 +1601,10 @@ packages:
     dependency: transitive
     description:
       name: uuid
-      sha256: "1fef9e8e11e2991bb773070d4656b7bd5d850967a2456cfc83cf47925ba79489"
+      sha256: "9b129329f58692f6e6578329498a8fe9fbe98f090beb764ffbb8ee2eadd01dcd"
       url: "https://pub.dev"
     source: hosted
-    version: "4.5.3"
+    version: "4.6.0"
   vector_graphics:
     dependency: transitive
     description:

app/test/renderers/polygon_renderer_test.dart

@@ -6,6 +6,24 @@ import 'package:flutter_test/flutter_test.dart';
 import 'package:material_leap/helpers.dart';
 
 void main() {
+  test('negative scale keeps valid polygon bounds', () {
+    final points = [
+      PolygonPoint(0, 0),
+      PolygonPoint(100, 0),
+      PolygonPoint(100, 50),
+    ];
+    final renderer = PolygonRenderer(
+      PolygonElement(points: points),
+      null,
+      calculatePolygonRect(points),
+    );
+
+    final mirrored = renderer.transform(scaleX: -1)!;
+
+    expect(mirrored.rect, const Rect.fromLTWH(-100, 0, 100, 50));
+    expect(mirrored.rect!.isEmpty, isFalse);
+  });
+
   group('No Bezier', () {
     late PolygonHitCalculator calculator;
 

app/test/renderers/select_foreground_test.dart

@@ -91,6 +91,22 @@ void main() {
       const Rect.fromLTWH(100, 50, 50, 25),
     );
   });
+
+  test('negative scale uses the opposite element corner for placement', () {
+    const selection = Rect.fromLTWH(0, 0, 200, 100);
+    const element = Rect.fromLTWH(50, 20, 100, 40);
+    const transform = (
+      position: Offset.zero,
+      rotation: 0.0,
+      scaleX: -1.0,
+      scaleY: 1.0,
+    );
+
+    expectRectCloseTo(
+      transform.scaleRect(element, selection),
+      const Rect.fromLTWH(-150, 20, 100, 40),
+    );
+  });
 }
 
 void expectRectCloseTo(Rect actual, Rect expected) {