compute bounding matrix

Author: nturgut

lib/web_ui/lib/src/engine/semantics/semantics.dart

@@ -851,13 +851,25 @@ class SemanticsObject {
         hasIdentityTransform &&
         verticalContainerAdjustment == 0.0 &&
         horizontalContainerAdjustment == 0.0) {
-      element.style
+      if (isDesktop) {
+        element.style
+          ..removeProperty('transform-origin')
+          ..removeProperty('transform');
+      } else {
+        element.style
           ..removeProperty('top')
           ..removeProperty('left');
+      }
       if (containerElement != null) {
-        containerElement.style
-          ..removeProperty('top')
-          ..removeProperty('left');
+        if (isDesktop) {
+          containerElement.style
+            ..removeProperty('transform-origin')
+            ..removeProperty('transform');
+        } else {
+          containerElement.style
+            ..removeProperty('top')
+            ..removeProperty('left');
+        }
       }
       return;
     }
@@ -882,14 +894,34 @@ class SemanticsObject {
     }
 
     if (!effectiveTransformIsIdentity) {
-      final Vector3 translation = effectiveTransform.getTranslation();
-      element.style
-        ..top = '${translation.y}px'
-        ..left = '${translation.x}px';
+      if (isDesktop) {
+        element.style
+          ..transformOrigin = '0 0 0'
+          ..transform = matrix4ToCssTransform(effectiveTransform);
+      } else {
+        // Mobile screen readers observed have errors reading the semantics
+        // borders when css `transform` properties are used.
+        // See: https://github.com/flutter/flutter/issues/68225
+        final ui.Rect rect =
+            computeBoundingRectangleFromMatrix(effectiveTransform, _rect!);
+        element.style
+          ..top = '${rect.top}px'
+          ..left = '${rect.left}px'
+          ..width = '${rect.width}px'
+          ..height = '${rect.height}px';
+        print(
+            '** rectangle: ${rect.top}, ${rect.left}, ${rect.width}, ${rect.height}');
+      }
     } else {
-      element.style
-        ..removeProperty('top')
-        ..removeProperty('left');
+      if (isDesktop) {
+        element.style
+          ..removeProperty('transform-origin')
+          ..removeProperty('transform');
+      } else {
+        element.style
+          ..removeProperty('top')
+          ..removeProperty('left');
+      }
     }
 
     if (containerElement != null) {
@@ -898,13 +930,25 @@ class SemanticsObject {
           horizontalContainerAdjustment != 0.0) {
         final double translateX = -_rect!.left + horizontalContainerAdjustment;
         final double translateY = -_rect!.top + verticalContainerAdjustment;
-        containerElement.style
-          ..top = '${translateY}px'
-          ..left = '${translateX}px';
+        if (isDesktop) {
+          containerElement.style
+            ..transformOrigin = '0 0 0'
+            ..transform = 'translate(${translateX}px, ${translateY}px)';
+        } else {
+          containerElement.style
+            ..top = '${translateY}px'
+            ..left = '${translateX}px';
+        }
       } else {
-        containerElement.style
-          ..removeProperty('top')
-          ..removeProperty('left');
+        if (isDesktop) {
+          containerElement.style
+            ..removeProperty('transform-origin')
+            ..removeProperty('transform');
+        } else {
+          containerElement.style
+            ..removeProperty('top')
+            ..removeProperty('left');
+        }
       }
     }
   }

lib/web_ui/lib/src/engine/util.dart

@@ -574,14 +574,46 @@ int clampInt(int value, int min, int max) {
   }
 }
 
-/// Position of a node in 2 dimensional space.
-class Position2D {
-  /// The position on y-axis.
-  final String top;
-
-  /// The position on x-axis.
-  final String left;
-
-  /// Position2D default constructor.
-  Position2D(this.top, this.left);
-}
+ui.Rect computeBoundingRectangleFromMatrix(Matrix4 transform, ui.Rect rect) {
+    final Float32List m = transform.storage;
+    // Apply perspective transform to all 4 corners. Can't use left,top, bottom,
+    // right since for example rotating 45 degrees would yield inaccurate size.
+    double x = rect.left;
+    double y = rect.top;
+    double wp = 1.0 / ((m[3] * x) + (m[7] * y) + m[15]);
+    double xp = ((m[0] * x) + (m[4] * y) + m[12]) * wp;
+    double yp = ((m[1] * x) + (m[5] * y) + m[13]) * wp;
+    double minX = xp, maxX = xp;
+    double minY =yp, maxY = yp;
+    x = rect.right;
+    y = rect.bottom;
+    wp = 1.0 / ((m[3] * x) + (m[7] * y) + m[15]);
+    xp = ((m[0] * x) + (m[4] * y) + m[12]) * wp;
+    yp = ((m[1] * x) + (m[5] * y) + m[13]) * wp;
+
+    minX = math.min(minX, xp);
+    maxX = math.max(maxX, xp);
+    minY = math.min(minY, yp);
+    maxY = math.max(maxY, yp);
+
+    x = rect.left;
+    y = rect.bottom;
+    wp = 1.0 / ((m[3] * x) + (m[7] * y) + m[15]);
+    xp = ((m[0] * x) + (m[4] * y) + m[12]) * wp;
+    yp = ((m[1] * x) + (m[5] * y) + m[13]) * wp;
+    minX = math.min(minX, xp);
+    maxX = math.max(maxX, xp);
+    minY = math.min(minY, yp);
+    maxY = math.max(maxY, yp);
+
+    x = rect.right;
+    y = rect.top;
+    wp = 1.0 / ((m[3] * x) + (m[7] * y) + m[15]);
+    xp = ((m[0] * x) + (m[4] * y) + m[12]) * wp;
+    yp = ((m[1] * x) + (m[5] * y) + m[13]) * wp;
+    minX = math.min(minX, xp);
+    maxX = math.max(maxX, xp);
+    minY = math.min(minY, yp);
+    maxY = math.max(maxY, yp);
+    return ui.Rect.fromLTWH(minX, minY, maxX-minX, maxY-minY);
+  }