Update paintStyle to pass shaderBounds to gradient

lib/web_ui/lib/src/engine/bitmap_canvas.dart

@@ -208,8 +208,8 @@ class BitmapCanvas extends EngineCanvas {
   }
 
   /// Sets the global paint styles to correspond to [paint].
-  void _setUpPaint(SurfacePaintData paint) {
-    _canvasPool.contextHandle.setUpPaint(paint);
+  void _setUpPaint(SurfacePaintData paint, ui.Rect? shaderBounds) {
+    _canvasPool.contextHandle.setUpPaint(paint, shaderBounds);
   }
 
   void _tearDownPaint() {
@@ -292,56 +292,61 @@ class BitmapCanvas extends EngineCanvas {
 
   @override
   void drawLine(ui.Offset p1, ui.Offset p2, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    ui.Rect? shaderBounds = (paint.shader != null) ?
+        ui.Rect.fromPoints(p1, p2) : null;
+    _setUpPaint(paint, shaderBounds);
     _canvasPool.strokeLine(p1, p2);
     _tearDownPaint();
   }
 
   @override
   void drawPaint(SurfacePaintData paint) {
-    _setUpPaint(paint);
+    ui.Rect? shaderBounds = (paint.shader != null) ?
+        _computeScreenBounds(_canvasPool._currentTransform) : null;
+    _setUpPaint(paint, shaderBounds);
     _canvasPool.fill();
     _tearDownPaint();
   }
 
   @override
   void drawRect(ui.Rect rect, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, rect);
     _canvasPool.drawRect(rect, paint.style);
     _tearDownPaint();
   }
 
   @override
   void drawRRect(ui.RRect rrect, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, rrect.outerRect);
     _canvasPool.drawRRect(rrect, paint.style);
     _tearDownPaint();
   }
 
   @override
   void drawDRRect(ui.RRect outer, ui.RRect inner, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, outer.outerRect);
     _canvasPool.drawDRRect(outer, inner, paint.style);
     _tearDownPaint();
   }
 
   @override
   void drawOval(ui.Rect rect, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, rect);
     _canvasPool.drawOval(rect, paint.style);
     _tearDownPaint();
   }
 
   @override
   void drawCircle(ui.Offset c, double radius, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, paint.shader != null
+        ? ui.Rect.fromCircle(center: c, radius: radius) : null);
     _canvasPool.drawCircle(c, radius, paint.style);
     _tearDownPaint();
   }
 
   @override
   void drawPath(ui.Path path, SurfacePaintData paint) {
-    _setUpPaint(paint);
+    _setUpPaint(paint, paint.shader != null ? path.getBounds() : null);
     _canvasPool.drawPath(path, paint.style);
     _tearDownPaint();
   }
@@ -655,7 +660,7 @@ class BitmapCanvas extends EngineCanvas {
         ctx.font = style.cssFontString;
         _cachedLastStyle = style;
       }
-      _setUpPaint(paragraph._paint!.paintData);
+      _setUpPaint(paragraph._paint!.paintData, null);
       double y = offset.dy + paragraph.alphabeticBaseline;
       final int len = lines.length;
       for (int i = 0; i < len; i++) {
@@ -761,7 +766,7 @@ class BitmapCanvas extends EngineCanvas {
     _drawPointsPaint.strokeWidth = paint.strokeWidth;
     _drawPointsPaint.maskFilter = paint.maskFilter;
 
-    _setUpPaint(_drawPointsPaint);
+    _setUpPaint(_drawPointsPaint, null);
     _canvasPool.drawPoints(pointMode, points, paint.strokeWidth! / 2.0);
     _tearDownPaint();
   }
@@ -771,6 +776,34 @@ class BitmapCanvas extends EngineCanvas {
     _canvasPool.endOfPaint();
     _elementCache?.commitFrame();
   }
+
+  /// Computes paint bounds given [targetTransform] to completely cover window
+  /// viewport.
+  ui.Rect _computeScreenBounds(Matrix4 targetTransform) {
+    final Matrix4 inverted = targetTransform.clone()..invert();
+    final double dpr = ui.window.devicePixelRatio;
+    final double width = ui.window.physicalSize.width * dpr;
+    final double height = ui.window.physicalSize.height * dpr;
+    Vector3 topLeft = inverted.perspectiveTransform(Vector3(0, 0, 0));
+    Vector3 topRight = inverted.perspectiveTransform(Vector3(width, 0, 0));
+    Vector3 bottomRight =
+    inverted.perspectiveTransform(Vector3(width, height, 0));
+    Vector3 bottomLeft = inverted.perspectiveTransform(Vector3(0, height, 0));
+    return ui.Rect.fromLTRB(
+      math.min(topLeft.x,
+          math.min(topRight.x, math.min(bottomRight.x, bottomLeft.x))) -
+          bounds.left,
+      math.min(topLeft.y,
+          math.min(topRight.y, math.min(bottomRight.y, bottomLeft.y))) -
+          bounds.top,
+      math.max(topLeft.x,
+          math.max(topRight.x, math.max(bottomRight.x, bottomLeft.x))) -
+          bounds.left,
+      math.max(topLeft.y,
+          math.max(topRight.y, math.max(bottomRight.y, bottomLeft.y))) -
+          bounds.top,
+    );
+  }
 }
 
 String? _stringForBlendMode(ui.BlendMode? blendMode) {
@@ -966,3 +999,4 @@ String _maskFilterToCanvasFilter(ui.MaskFilter? maskFilter) {
   }
 }
 
+

lib/web_ui/lib/src/engine/canvas_pool.dart

@@ -761,7 +761,7 @@ class ContextStateHandle {
   /// Sets paint properties on the current canvas.
   ///
   /// [tearDownPaint] must be called after calling this method.
-  void setUpPaint(SurfacePaintData paint) {
+  void setUpPaint(SurfacePaintData paint, ui.Rect? shaderBounds) {
     if (assertionsEnabled) {
       assert(!_debugIsPaintSetUp);
       _debugIsPaintSetUp = true;
@@ -776,7 +776,7 @@ class ContextStateHandle {
     if (paint.shader != null) {
       final EngineGradient engineShader = paint.shader as EngineGradient;
       final Object paintStyle =
-          engineShader.createPaintStyle(_canvasPool.context);
+          engineShader.createPaintStyle(_canvasPool.context, shaderBounds);
       fillStyle = paintStyle;
       strokeStyle = paintStyle;
     } else if (paint.color != null) {

lib/web_ui/lib/src/engine/html/shaders/shader.dart

@@ -10,26 +10,53 @@ abstract class EngineGradient implements ui.Gradient {
   EngineGradient._();
 
   /// Creates a fill style to be used in painting.
-  Object createPaintStyle(html.CanvasRenderingContext2D? ctx);
+  Object createPaintStyle(html.CanvasRenderingContext2D? ctx,
+      ui.Rect? shaderBounds);
 }
 
 class GradientSweep extends EngineGradient {
   GradientSweep(this.center, this.colors, this.colorStops, this.tileMode,
-      this.startAngle, this.endAngle, this.matrix4)
+      this.startAngle, this.endAngle, Float64List? matrix)
       : assert(_offsetIsValid(center)),
         assert(colors != null), // ignore: unnecessary_null_comparison
         assert(tileMode != null), // ignore: unnecessary_null_comparison
         assert(startAngle != null), // ignore: unnecessary_null_comparison
         assert(endAngle != null), // ignore: unnecessary_null_comparison
         assert(startAngle < endAngle),
-        assert(matrix4 == null || _matrix4IsValid(matrix4)),
+        this.matrix4 = matrix == null ? null : _FastMatrix64(matrix),
         super._() {
     _validateColorStops(colors, colorStops);
   }
 
   @override
-  Object createPaintStyle(html.CanvasRenderingContext2D? ctx) {
-    throw UnimplementedError();
+  Object createPaintStyle(html.CanvasRenderingContext2D? ctx,
+      ui.Rect? shaderBounds)
+  {
+    _FastMatrix64? matrix4 = this.matrix4;
+    html.CanvasGradient gradient;
+
+    if (matrix4 != null) {
+      matrix4.transform(1, 1);
+      double width = matrix4.transformedX;
+      double height = matrix4.transformedY;
+      gradient = ctx!.createLinearGradient(shaderBounds!.left, shaderBounds.top,
+          shaderBounds.right, shaderBounds.top);
+    } else {
+      gradient = ctx!.createLinearGradient(shaderBounds!.left, shaderBounds.top,
+        shaderBounds.right, shaderBounds.top);
+    }
+
+    final List<double>? colorStops = this.colorStops;
+    if (colorStops == null) {
+      assert(colors.length == 2);
+      gradient.addColorStop(0, colorToCssString(colors[0])!);
+      gradient.addColorStop(1, colorToCssString(colors[1])!);
+      return gradient;
+    }
+    for (int i = 0; i < colors.length; i++) {
+      gradient.addColorStop(colorStops[i], colorToCssString(colors[i])!);
+    }
+    return gradient;
   }
 
   final ui.Offset center;
@@ -38,7 +65,7 @@ class GradientSweep extends EngineGradient {
   final ui.TileMode tileMode;
   final double startAngle;
   final double endAngle;
-  final Float32List? matrix4;
+  final _FastMatrix64? matrix4;
 }
 
 class GradientLinear extends EngineGradient {
@@ -68,7 +95,8 @@ class GradientLinear extends EngineGradient {
   final _FastMatrix64? matrix4;
 
   @override
-  html.CanvasGradient createPaintStyle(html.CanvasRenderingContext2D? ctx) {
+  html.CanvasGradient createPaintStyle(html.CanvasRenderingContext2D? ctx,
+      ui.Rect? shaderBounds) {
     _FastMatrix64? matrix4 = this.matrix4;
     html.CanvasGradient gradient;
     if (matrix4 != null) {
@@ -115,7 +143,8 @@ class GradientRadial extends EngineGradient {
   final Float32List? matrix4;
 
   @override
-  Object createPaintStyle(html.CanvasRenderingContext2D? ctx) {
+  Object createPaintStyle(html.CanvasRenderingContext2D? ctx,
+      ui.Rect? shaderBounds) {
     if (!experimentalUseSkia) {
       if (tileMode != ui.TileMode.clamp) {
         throw UnimplementedError(
@@ -154,7 +183,8 @@ class GradientConical extends EngineGradient {
   final Float32List? matrix4;
 
   @override
-  Object createPaintStyle(html.CanvasRenderingContext2D? ctx) {
+  Object createPaintStyle(html.CanvasRenderingContext2D? ctx,
+      ui.Rect? shaderBounds) {
     throw UnimplementedError();
   }
 }

lib/web_ui/lib/src/ui/painting.dart

@@ -321,7 +321,7 @@ abstract class Gradient extends Shader {
     ? engine.CkGradientSweep(center, colors, colorStops, tileMode, startAngle,
           endAngle, matrix4 != null ? engine.toMatrix32(matrix4) : null)
     : engine.GradientSweep(center, colors, colorStops, tileMode, startAngle,
-          endAngle, matrix4 != null ? engine.toMatrix32(matrix4) : null);
+          endAngle, matrix4);
 }
 
 abstract class Image {