colorFilter as imageFilter

Author: alanwutang11

lib/web_ui/lib/painting.dart

@@ -359,7 +359,7 @@ abstract class Image {
   String toString() => '[$width\u00D7$height]';
 }
 
-abstract class ColorFilter {
+class ColorFilter implements ImageFilter {
   const factory ColorFilter.mode(Color color, BlendMode blendMode) = engine.EngineColorFilter.mode;
   const factory ColorFilter.matrix(List<double> matrix) = engine.EngineColorFilter.matrix;
   const factory ColorFilter.linearToSrgbGamma() = engine.EngineColorFilter.linearToSrgbGamma;

lib/web_ui/lib/src/engine/canvaskit/canvas.dart

@@ -7,6 +7,7 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
+import '../color_filter.dart';
 import 'canvaskit_api.dart';
 import 'image.dart';
 import 'image_filter.dart';
@@ -290,8 +291,15 @@ class CkCanvas {
 
   void saveLayerWithFilter(ui.Rect bounds, ui.ImageFilter filter,
       [CkPaint? paint]) {
-    final CkManagedSkImageFilterConvertible convertible =
-        filter as CkManagedSkImageFilterConvertible;
+        final CkManagedSkImageFilterConvertible convertible;
+        if (filter is ui.ColorFilter) {
+          convertible =
+          (filter as EngineColorFilter).toRendererColorFilter() as CkManagedSkImageFilterConvertible;
+        }
+        else {
+          convertible =
+          filter as CkManagedSkImageFilterConvertible;
+        }
     return skCanvas.saveLayer(
       paint?.skiaObject,
       toSkRect(bounds),

lib/web_ui/lib/src/engine/canvaskit/color_filter.dart

@@ -6,7 +6,6 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
-import '../color_filter.dart';
 import '../util.dart';
 import 'canvaskit_api.dart';
 import 'image_filter.dart';
@@ -56,8 +55,8 @@ class ManagedSkColorFilter extends ManagedSkiaObject<SkColorFilter> {
 /// Additionally, this class provides the interface for converting itself to a
 /// [ManagedSkiaObject] that manages a skia image filter.
 abstract class CkColorFilter
-    implements CkManagedSkImageFilterConvertible, EngineColorFilter {
-  const CkColorFilter();
+    implements CkManagedSkImageFilterConvertible {
+  const CkColorFilter(this.creator);
 
   /// Called by [ManagedSkiaObject.createDefault] and
   /// [ManagedSkiaObject.resurrect] to create a new [SkImageFilter], when this
@@ -73,10 +72,14 @@ abstract class CkColorFilter
   @override
   ManagedSkiaObject<SkImageFilter> get imageFilter =>
       CkColorFilterImageFilter(colorFilter: this);
+
+  /// Convert the CkColorFilter back into a ui.ColorFilter
+  /// Used in [CkPaint]
+  final ui.ColorFilter creator;
 }
 
 class CkBlendModeColorFilter extends CkColorFilter {
-  const CkBlendModeColorFilter(this.color, this.blendMode);
+  const CkBlendModeColorFilter(super.creator, this.color, this.blendMode);
 
   final ui.Color color;
   final ui.BlendMode blendMode;
@@ -129,7 +132,7 @@ class CkBlendModeColorFilter extends CkColorFilter {
 }
 
 class CkMatrixColorFilter extends CkColorFilter {
-  const CkMatrixColorFilter(this.matrix);
+  const CkMatrixColorFilter(super.creator, this.matrix);
 
   final List<double> matrix;
 
@@ -172,7 +175,7 @@ class CkMatrixColorFilter extends CkColorFilter {
 }
 
 class CkLinearToSrgbGammaColorFilter extends CkColorFilter {
-  const CkLinearToSrgbGammaColorFilter();
+  const CkLinearToSrgbGammaColorFilter(super.creator);
   @override
   SkColorFilter _initRawColorFilter() =>
       canvasKit.ColorFilter.MakeLinearToSRGBGamma();
@@ -188,7 +191,7 @@ class CkLinearToSrgbGammaColorFilter extends CkColorFilter {
 }
 
 class CkSrgbToLinearGammaColorFilter extends CkColorFilter {
-  const CkSrgbToLinearGammaColorFilter();
+  const CkSrgbToLinearGammaColorFilter(super.creator);
   @override
   SkColorFilter _initRawColorFilter() =>
       canvasKit.ColorFilter.MakeSRGBToLinearGamma();
@@ -204,7 +207,7 @@ class CkSrgbToLinearGammaColorFilter extends CkColorFilter {
 }
 
 class CkComposeColorFilter extends CkColorFilter {
-  const CkComposeColorFilter(this.outer, this.inner);
+  const CkComposeColorFilter(super.creator, this.outer, this.inner);
   final ManagedSkColorFilter? outer;
   final ManagedSkColorFilter inner;
 

lib/web_ui/lib/src/engine/canvaskit/painting.dart

@@ -7,6 +7,7 @@ import 'dart:typed_data';
 
 import 'package:ui/ui.dart' as ui;
 
+import '../color_filter.dart';
 import 'canvaskit_api.dart';
 import 'color_filter.dart';
 import 'image_filter.dart';
@@ -131,7 +132,12 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
         _effectiveColorFilter = _invertColorFilter;
       } else {
         _effectiveColorFilter = ManagedSkColorFilter(
-            CkComposeColorFilter(_invertColorFilter, _effectiveColorFilter!));
+          CkComposeColorFilter(
+            _effectiveColorFilter!.colorFilter.creator,
+            _invertColorFilter,
+            _effectiveColorFilter!
+            )
+        );
       }
     }
     skiaObject.setColorFilter(_effectiveColorFilter?.skiaObject);
@@ -203,7 +209,9 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
   ui.FilterQuality _filterQuality = ui.FilterQuality.none;
 
   @override
-  ui.ColorFilter? get colorFilter => _effectiveColorFilter?.colorFilter;
+  ui.ColorFilter? get colorFilter {
+    return _effectiveColorFilter?.colorFilter.creator;
+  }
   @override
   set colorFilter(ui.ColorFilter? value) {
     if (colorFilter == value) {
@@ -214,7 +222,8 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
     if (value == null) {
       _effectiveColorFilter = null;
     } else {
-      _effectiveColorFilter = ManagedSkColorFilter(value as CkColorFilter);
+      final CkColorFilter ckColorFilter = (value as EngineColorFilter).toRendererColorFilter() as CkColorFilter;
+      _effectiveColorFilter = ManagedSkColorFilter(ckColorFilter);
     }
 
     if (invertColors) {
@@ -223,7 +232,12 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
         _effectiveColorFilter = _invertColorFilter;
       } else {
         _effectiveColorFilter = ManagedSkColorFilter(
-            CkComposeColorFilter(_invertColorFilter, _effectiveColorFilter!));
+          CkComposeColorFilter(
+            _effectiveColorFilter!.colorFilter.creator,
+            _invertColorFilter,
+            _effectiveColorFilter!
+          )
+        );
       }
     }
 
@@ -255,8 +269,12 @@ class CkPaint extends ManagedSkiaObject<SkPaint> implements ui.Paint {
     if (_imageFilter == value) {
       return;
     }
-
-    _imageFilter = value as CkManagedSkImageFilterConvertible?;
+    if (value is ui.ColorFilter) {
+      _imageFilter = (value as EngineColorFilter).toRendererColorFilter() as CkManagedSkImageFilterConvertible?;
+    }
+    else {
+      _imageFilter = value as CkManagedSkImageFilterConvertible?;
+    }
     _managedImageFilter = _imageFilter?.imageFilter;
     skiaObject.setImageFilter(_managedImageFilter?.skiaObject);
   }
@@ -305,8 +323,12 @@ final Float32List _invertColorMatrix = Float32List.fromList(const <double>[
   1.0, 1.0, 1.0, 1.0, 0
 ]);
 
-final ManagedSkColorFilter _invertColorFilter =
-    ManagedSkColorFilter(CkMatrixColorFilter(_invertColorMatrix));
+final ManagedSkColorFilter _invertColorFilter = createInvertedColorFilter(_invertColorMatrix);
+
+ManagedSkColorFilter createInvertedColorFilter(Float32List invertColorMatrix) {
+  final ui.ColorFilter creator = ui.ColorFilter.matrix(invertColorMatrix);
+  return ManagedSkColorFilter(CkMatrixColorFilter(creator, invertColorMatrix));
+}
 
 class UniformData {
   const UniformData({

lib/web_ui/lib/src/engine/canvaskit/renderer.dart

@@ -16,6 +16,7 @@ import '../profiler.dart';
 import '../renderer.dart';
 import 'canvaskit_api.dart';
 import 'canvaskit_canvas.dart';
+import 'color_filter.dart';
 import 'fonts.dart';
 import 'image.dart';
 import 'image_filter.dart';
@@ -194,6 +195,27 @@ class CanvasKitRenderer implements Renderer {
     throw UnimplementedError('ImageFilter.compose not implemented for CanvasKit.');
   }
 
+  @override
+  CkMatrixColorFilter createMatrixColorFilter(
+    ui.ColorFilter creator,
+    List<double> matrix
+  ) => CkMatrixColorFilter(creator, matrix);
+
+  @override
+  CkBlendModeColorFilter createModeColorFilter(
+    ui.ColorFilter creator,
+    ui.Color color,
+    ui.BlendMode blendMode
+  ) => CkBlendModeColorFilter(creator, color, blendMode);
+
+  @override
+  CkLinearToSrgbGammaColorFilter createLinearToSrgbGammaColorFilter(ui.ColorFilter creator) =>
+    CkLinearToSrgbGammaColorFilter(creator);
+
+  @override
+  CkSrgbToLinearGammaColorFilter createSrgbToLinearGammaColorFilter(ui.ColorFilter creator) =>
+    CkSrgbToLinearGammaColorFilter(creator);
+
   @override
   Future<ui.Codec> instantiateImageCodec(
     Uint8List list, {

lib/web_ui/lib/src/engine/color_filter.dart

@@ -2,9 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'package:ui/src/engine/renderer.dart';
 import 'package:ui/ui.dart' as ui;
 
-import 'canvaskit/color_filter.dart';
+enum ColorFilterType {
+  mode,
+  matrix,
+  linearToSrgbGamma,
+  srgbToLinearGamma,
+}
 
 /// A description of a color filter to apply when drawing a shape or compositing
 /// a layer with a particular [Paint]. A color filter is a function that takes
@@ -22,8 +28,11 @@ class EngineColorFilter implements ui.ColorFilter {
   /// The output of this filter is then composited into the background according
   /// to the [Paint.blendMode], using the output of this filter as the source
   /// and the background as the destination.
-  const factory EngineColorFilter.mode(ui.Color color, ui.BlendMode blendMode) =
-      CkBlendModeColorFilter;
+  const EngineColorFilter.mode(ui.Color color, ui.BlendMode blendMode)
+    : _color = color,
+      _blendMode = blendMode,
+      _matrix = null,
+      _type = ColorFilterType.mode;
 
   /// Construct a color filter that transforms a color by a 5x5 matrix, where
   /// the fifth row is implicitly added in an identity configuration.
@@ -85,16 +94,70 @@ class EngineColorFilter implements ui.ColorFilter {
   ///   0,      0,      0,      1, 0,
   /// ]);
   /// ```
-  const factory EngineColorFilter.matrix(List<double> matrix) =
-      CkMatrixColorFilter;
+  const EngineColorFilter.matrix(List<double> matrix)
+      : _color = null,
+        _blendMode = null,
+        _matrix = matrix,
+        _type = ColorFilterType.matrix;
 
   /// Construct a color filter that applies the sRGB gamma curve to the RGB
   /// channels.
-  const factory EngineColorFilter.linearToSrgbGamma() =
-      CkLinearToSrgbGammaColorFilter;
+  const EngineColorFilter.linearToSrgbGamma()
+      : _color = null,
+        _blendMode = null,
+        _matrix = null,
+        _type = ColorFilterType.linearToSrgbGamma;
 
   /// Creates a color filter that applies the inverse of the sRGB gamma curve
   /// to the RGB channels.
-  const factory EngineColorFilter.srgbToLinearGamma() =
-      CkSrgbToLinearGammaColorFilter;
+  const EngineColorFilter.srgbToLinearGamma()
+      : _color = null,
+        _blendMode = null,
+        _matrix = null,
+        _type = ColorFilterType.srgbToLinearGamma;
+
+  final ui.Color? _color;
+  final ui.BlendMode? _blendMode;
+  final List<double>? _matrix;
+  final ColorFilterType _type;
+
+  /// Convert the current [ColorFilter] to either a [CkColorFilter] or [HtmlEngineColorFilter]
+  /// depending on the renderer.
+  ///
+  /// After calling this function and getting the renderer specific ColorFilter,
+  /// cast the correct type on the converted ColorFilter based on the renderer backend:
+  ///
+  /// canvaskit: [CkColorFilter]
+  /// Html: [HtmlEngineColorFilter]
+  ///
+  /// ## Example uses:
+  /// ```
+  /// CkColorFilter ckColorFilter =
+  ///   (ColorFilter.mode(Color color, BlendMode blendMode) as EngineColorFilter).toRendererColorFilter() as CkColorFilter;
+  /// ```
+  ///
+  /// This workaround allows ColorFilter to be const constructbile and
+  /// efficiently comparable, so that widgets can check for ColorFilter equality to
+  /// avoid repainting.
+  dynamic toRendererColorFilter() {
+    switch (_type) {
+      case ColorFilterType.mode:
+        if (_color == null || _blendMode == null) {
+          return null;
+        }
+        return renderer.createModeColorFilter(this, _color!, _blendMode!);
+      case ColorFilterType.matrix:
+        if (_matrix == null) {
+          return null;
+        }
+        assert(_matrix!.length == 20, 'Color Matrix must have 20 entries.');
+        return renderer.createMatrixColorFilter(this, _matrix!);
+      case ColorFilterType.linearToSrgbGamma:
+        return renderer.createLinearToSrgbGammaColorFilter(this);
+      case ColorFilterType.srgbToLinearGamma:
+        return renderer.createSrgbToLinearGammaColorFilter(this);
+      default:
+        throw StateError('Unknown mode $_type for ColorFilter.');
+    }
+  }
 }