Add missing backdrop handling in CTM cmd; more consistent ordering of savelayer props for readability

Author: macksal

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

@@ -41,8 +41,8 @@ SkMatrix processTransform(std::optional<SkMatrix> &matrix,
 }
 
 struct SaveLayerProps {
-  std::optional<SkCanvas::SaveLayerFlags> saveLayerFlags;
   std::optional<sk_sp<SkImageFilter>> backdropFilter;
+  std::optional<SkCanvas::SaveLayerFlags> saveLayerFlags;
 }
 
 class SaveLayerCmd : public Command {
@@ -53,10 +53,10 @@ class SaveLayerCmd : public Command {
   SaveLayerCmd(jsi::Runtime &runtime, const jsi::Object &object,
                Variables &variables)
       : Command(CommandType::SaveLayer) {
-    convertProperty(runtime, object, "saveLayerFlags", props.saveLayerFlags,
-                    variables);
     convertProperty(runtime, object, "backdropFilter", props.backdropFilter,
                     variables);
+    convertProperty(runtime, object, "saveLayerFlags", props.saveLayerFlags,
+                    variables);
   }
 
   void saveLayer(DrawingCtx *ctx) {
@@ -92,6 +92,8 @@ class SaveCTMCmd : public Command {
     convertProperty(runtime, object, "clip", props.clip, variables);
     convertProperty(runtime, object, "invertClip", props.invertClip, variables);
     convertProperty(runtime, object, "layer", props.layer, variables);
+    convertProperty(runtime, object, "backdropFilter", props.backdropFilter,
+                    variables);
     convertProperty(runtime, object, "saveLayerFlags", props.saveLayerFlags,
                     variables);
   }
@@ -100,6 +102,7 @@ class SaveCTMCmd : public Command {
     auto clip = props.clip;
     auto invertClip = props.invertClip;
     auto layer = props.layer;
+    auto backdropFilter = props.backdropFilter;
     auto saveLayerFlags = props.saveLayerFlags;
     auto hasTransform = props.matrix.has_value() || props.transform.has_value();
     auto hasClip = clip.has_value();
@@ -112,9 +115,9 @@ class SaveCTMCmd : public Command {
       if (layer.has_value()) {
         SkCanvas::SaveLayerRec layerRec;
         layerRec.fPaint = std::get_if<SkPaint>(layer.value());
-        if (saveLayerFlags.has_value()) {
-          layerRec.fSaveLayerFlags = saveLayerFlags.value();
-        }
+        layerRec.fBackdropFilter = backdropFilter.value_or(nullptr);
+        layerRec.fSaveLayerFlags = saveLayerFlags.value_or(0);
+
         ctx->canvas->saveLayer(layerRec);
       } else {
         ctx->canvas->save();

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

@@ -17,7 +17,7 @@ export const Group = ({
   if (isValidElement(layer) && typeof layer === "object") {
     return (
       // keep the saveLayerFlags on whichever node triggers saveLayer
-      <skLayer saveLayerFlags={saveLayerFlags} backdropFilter={backdropFilter}>
+      <skLayer backdropFilter={backdropFilter} saveLayerFlags={saveLayerFlags}>
         {layer}
         <skGroup {...props} />
       </skLayer>

packages/skia/src/sksg/Recorder/commands/CTM.ts

@@ -39,6 +39,7 @@ export const saveCTM = (ctx: DrawingContext, props: CTMProps) => {
     transform,
     origin,
     layer,
+    backdropFilter,
     saveLayerFlags,
   } = props;
   const hasTransform = matrix !== undefined || transform !== undefined;
@@ -50,7 +51,7 @@ export const saveCTM = (ctx: DrawingContext, props: CTMProps) => {
   if (shouldSave) {
     if (layer) {
       const paint = typeof layer === "boolean" ? undefined : layer;
-      canvas.saveLayer(paint, null, null, saveLayerFlags);
+      canvas.saveLayer(paint, null, backdropFilter, saveLayerFlags);
     } else {
       canvas.save();
     }