Implement Group backdropFilter prop

Only supports SkImageFilter objects, not child nodes for now

Author: macksal

packages/skia/cpp/api/recorder/Paint.h

@@ -42,6 +42,7 @@ SkMatrix processTransform(std::optional<SkMatrix> &matrix,
 
 struct SaveLayerProps {
   std::optional<SkCanvas::SaveLayerFlags> saveLayerFlags;
+  std::optional<sk_sp<SkImageFilter>> backdropFilter;
 }
 
 class SaveLayerCmd : public Command {
@@ -54,14 +55,17 @@ class SaveLayerCmd : public Command {
       : Command(CommandType::SaveLayer) {
     convertProperty(runtime, object, "saveLayerFlags", props.saveLayerFlags,
                     variables);
+    convertProperty(runtime, object, "backdropFilter", props.backdropFilter,
+                    variables);
   }
 
   void saveLayer(DrawingCtx *ctx) {
     ctx->materializePaint();
     auto paint = ctx->paintDeclarations.back();
     ctx->paintDeclarations.pop_back();
 
-    SkCanvas::SaveLayerRec layerRec(nullptr, &paint, nullptr,
+    SkCanvas::SaveLayerRec layerRec(nullptr, &paint,
+                                    props.backdropFilter.value_or(nullptr),
                                     props.saveLayerFlags.value_or(0));
     ctx->canvas->saveLayer(layerRec);
   }

packages/skia/src/renderer/components/Group.tsx

@@ -10,13 +10,14 @@ export interface PublicGroupProps extends Omit<GroupProps, "layer"> {
 
 export const Group = ({
   layer,
+  backdropFilter,
   saveLayerFlags,
   ...props
 }: SkiaProps<PublicGroupProps>) => {
   if (isValidElement(layer) && typeof layer === "object") {
     return (
       // keep the saveLayerFlags on whichever node triggers saveLayer
-      <skLayer saveLayerFlags={saveLayerFlags}>
+      <skLayer saveLayerFlags={saveLayerFlags} backdropFilter={backdropFilter}>
         {layer}
         <skGroup {...props} />
       </skLayer>
@@ -25,6 +26,7 @@ export const Group = ({
   return (
     <skGroup
       layer={layer as GroupProps["layer"]}
+      backdropFilter={backdropFilter}
       saveLayerFlags={saveLayerFlags}
       {...props}
     />

packages/skia/src/sksg/Recorder/Player.ts

@@ -120,7 +120,12 @@ const play = (ctx: DrawingContext, _command: Command) => {
   } else if (isDrawCommand(command, CommandType.SaveLayer)) {
     ctx.materializePaint();
     const paint = ctx.paintDeclarations.pop();
-    ctx.canvas.saveLayer(paint, null, null, command.props.saveLayerFlags);
+    ctx.canvas.saveLayer(
+      paint,
+      null,
+      command.props.backdropFilter,
+      command.props.saveLayerFlags
+    );
   } else if (isDrawCommand(command, CommandType.SavePaint)) {
     if (command.props.paint) {
       ctx.paints.push(command.props.paint);