@shopify/react-native-skia 2.1.0 → 2.1.1

package/lib/module/sksg/Elements.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Elements.tsx"],"sourcesContent":["import type {\n  FractalNoiseProps,\n  CircleProps,\n  DrawingNodeProps,\n  ImageProps,\n  PaintProps,\n  PathProps,\n  LineProps,\n  OvalProps,\n  DiffRectProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextProps,\n  VerticesProps,\n  BlurMaskFilterProps,\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  DisplacementMapImageFilterProps,\n  DropShadowImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n  MatrixColorFilterProps,\n  ShaderProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  GroupProps,\n  PatchProps,\n  BlendColorFilterProps,\n  DashPathEffectProps,\n  DiscretePathEffectProps,\n  CornerPathEffectProps,\n  Line2DPathEffectProps,\n  Path1DPathEffectProps,\n  Path2DPathEffectProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  TwoPointConicalGradientProps,\n  TurbulenceProps,\n  SweepGradientProps,\n  RadialGradientProps,\n  ColorProps,\n  PictureProps,\n  ImageSVGProps,\n  LerpColorFilterProps,\n  BoxProps,\n  BoxShadowProps,\n  ParagraphProps,\n  AtlasProps,\n  ChildrenProps,\n  MorphologyImageFilterProps,\n  BlendProps,\n  SkottieProps,\n} from \"../dom/types\";\nimport type { SkiaProps } from \"../renderer\";\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      skGroup: SkiaProps<GroupProps>;\n      skLayer: SkiaProps<ChildrenProps>;\n      skPaint: SkiaProps<PaintProps>;\n\n      // Drawings\n      skFill: SkiaProps<DrawingNodeProps>;\n      skImage: SkiaProps<ImageProps>;\n      skCircle: SkiaProps<CircleProps>;\n      skPath: SkiaProps<PathProps>;\n      skLine: SkiaProps<LineProps>;\n      skOval: SkiaProps<OvalProps>;\n      skPatch: SkiaProps<PatchProps>;\n      skPoints: SkiaProps<PointsProps>;\n      skRect: SkiaProps<RectProps>;\n      skRRect: SkiaProps<RoundedRectProps>;\n      skAtlas: SkiaProps<AtlasProps>;\n      skVertices: SkiaProps<VerticesProps>;\n      skText: SkiaProps<TextProps>;\n      skTextPath: SkiaProps<TextPathProps>;\n      skTextBlob: SkiaProps<TextBlobProps>;\n      skGlyphs: SkiaProps<GlyphsProps>;\n      skDiffRect: SkiaProps<DiffRectProps>;\n      skSkottie: SkiaProps<SkottieProps>;\n      skPicture: SkiaProps<PictureProps>;\n      skImageSVG: SkiaProps<ImageSVGProps>;\n\n      // BlurMaskFilters\n      skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;\n\n      // ImageFilters\n      skBlendImageFilter: SkiaProps<BlendImageFilterProps>;\n      skBlurImageFilter: SkiaProps<BlurImageFilterProps>;\n      skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;\n      skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;\n      skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;\n      skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;\n      skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;\n\n      // ColorFilters\n      skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;\n      skBlendColorFilter: SkiaProps<BlendColorFilterProps>;\n      skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;\n      skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;\n      skLumaColorFilter: SkiaProps<ChildrenProps>;\n      skLerpColorFilter: SkiaProps<LerpColorFilterProps>;\n\n      // Shaders\n      skShader: SkiaProps<ShaderProps>;\n      skImageShader: SkiaProps<ImageShaderProps>;\n      skColorShader: SkiaProps<ColorProps>;\n      skTurbulence: SkiaProps<TurbulenceProps>;\n      skFractalNoise: SkiaProps<FractalNoiseProps>;\n      skLinearGradient: SkiaProps<LinearGradientProps>;\n      skRadialGradient: SkiaProps<RadialGradientProps>;\n      skSweepGradient: SkiaProps<SweepGradientProps>;\n      skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;\n\n      // Path Effects\n      skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;\n      skDashPathEffect: SkiaProps<DashPathEffectProps>;\n      skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;\n      skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;\n      skCornerPathEffect: SkiaProps<CornerPathEffectProps>;\n      skSumPathEffect: ChildrenProps;\n      skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;\n\n      // Mixed declarations/drawings\n      skBlend: SkiaProps<BlendProps>;\n      skBackdropFilter: SkiaProps<ChildrenProps>;\n      skBox: SkiaProps<BoxProps>;\n      skBoxShadow: SkiaProps<BoxShadowProps>;\n\n      // Paragraph\n      skParagraph: SkiaProps<ParagraphProps>;\n    }\n  }\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Elements.tsx"],"sourcesContent":["import type {\n  FractalNoiseProps,\n  CircleProps,\n  DrawingNodeProps,\n  ImageProps,\n  PaintProps,\n  PathProps,\n  LineProps,\n  OvalProps,\n  DiffRectProps,\n  PointsProps,\n  RectProps,\n  RoundedRectProps,\n  TextProps,\n  VerticesProps,\n  BlurMaskFilterProps,\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  DisplacementMapImageFilterProps,\n  DropShadowImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n  MatrixColorFilterProps,\n  ShaderProps,\n  ImageShaderProps,\n  LinearGradientProps,\n  GroupProps,\n  PatchProps,\n  BlendColorFilterProps,\n  DashPathEffectProps,\n  DiscretePathEffectProps,\n  CornerPathEffectProps,\n  Line2DPathEffectProps,\n  Path1DPathEffectProps,\n  Path2DPathEffectProps,\n  TextPathProps,\n  TextBlobProps,\n  GlyphsProps,\n  TwoPointConicalGradientProps,\n  TurbulenceProps,\n  SweepGradientProps,\n  RadialGradientProps,\n  ColorProps,\n  PictureProps,\n  ImageSVGProps,\n  LerpColorFilterProps,\n  BoxProps,\n  BoxShadowProps,\n  ParagraphProps,\n  AtlasProps,\n  ChildrenProps,\n  MorphologyImageFilterProps,\n  BlendProps,\n  SkottieProps,\n  ImageFilterProps,\n} from \"../dom/types\";\nimport type { SkiaProps } from \"../renderer\";\n\ndeclare module \"react\" {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      skGroup: SkiaProps<GroupProps>;\n      skLayer: SkiaProps<ChildrenProps>;\n      skPaint: SkiaProps<PaintProps>;\n\n      // Drawings\n      skFill: SkiaProps<DrawingNodeProps>;\n      skImage: SkiaProps<ImageProps>;\n      skCircle: SkiaProps<CircleProps>;\n      skPath: SkiaProps<PathProps>;\n      skLine: SkiaProps<LineProps>;\n      skOval: SkiaProps<OvalProps>;\n      skPatch: SkiaProps<PatchProps>;\n      skPoints: SkiaProps<PointsProps>;\n      skRect: SkiaProps<RectProps>;\n      skRRect: SkiaProps<RoundedRectProps>;\n      skAtlas: SkiaProps<AtlasProps>;\n      skVertices: SkiaProps<VerticesProps>;\n      skText: SkiaProps<TextProps>;\n      skTextPath: SkiaProps<TextPathProps>;\n      skTextBlob: SkiaProps<TextBlobProps>;\n      skGlyphs: SkiaProps<GlyphsProps>;\n      skDiffRect: SkiaProps<DiffRectProps>;\n      skSkottie: SkiaProps<SkottieProps>;\n      skPicture: SkiaProps<PictureProps>;\n      skImageSVG: SkiaProps<ImageSVGProps>;\n\n      // BlurMaskFilters\n      skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;\n\n      // ImageFilters\n      skImageFilter: SkiaProps<ImageFilterProps>;\n      skBlendImageFilter: SkiaProps<BlendImageFilterProps>;\n      skBlurImageFilter: SkiaProps<BlurImageFilterProps>;\n      skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;\n      skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;\n      skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;\n      skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;\n      skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;\n\n      // ColorFilters\n      skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;\n      skBlendColorFilter: SkiaProps<BlendColorFilterProps>;\n      skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;\n      skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;\n      skLumaColorFilter: SkiaProps<ChildrenProps>;\n      skLerpColorFilter: SkiaProps<LerpColorFilterProps>;\n\n      // Shaders\n      skShader: SkiaProps<ShaderProps>;\n      skImageShader: SkiaProps<ImageShaderProps>;\n      skColorShader: SkiaProps<ColorProps>;\n      skTurbulence: SkiaProps<TurbulenceProps>;\n      skFractalNoise: SkiaProps<FractalNoiseProps>;\n      skLinearGradient: SkiaProps<LinearGradientProps>;\n      skRadialGradient: SkiaProps<RadialGradientProps>;\n      skSweepGradient: SkiaProps<SweepGradientProps>;\n      skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;\n\n      // Path Effects\n      skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;\n      skDashPathEffect: SkiaProps<DashPathEffectProps>;\n      skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;\n      skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;\n      skCornerPathEffect: SkiaProps<CornerPathEffectProps>;\n      skSumPathEffect: ChildrenProps;\n      skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;\n\n      // Mixed declarations/drawings\n      skBlend: SkiaProps<BlendProps>;\n      skBackdropFilter: SkiaProps<ChildrenProps>;\n      skBox: SkiaProps<BoxProps>;\n      skBoxShadow: SkiaProps<BoxShadowProps>;\n\n      // Paragraph\n      skParagraph: SkiaProps<ParagraphProps>;\n    }\n  }\n}\n"],"mappings":"","ignoreList":[]}

package/lib/module/sksg/Node.d.ts

@@ -6,7 +6,7 @@ export interface Node<Props = unknown> {
 }
 export declare const isColorFilter: (type: NodeType) => type is NodeType.MatrixColorFilter | NodeType.BlendColorFilter | NodeType.LinearToSRGBGammaColorFilter | NodeType.SRGBToLinearGammaColorFilter | NodeType.LumaColorFilter | NodeType.LerpColorFilter;
 export declare const isPathEffect: (type: NodeType) => type is NodeType.DiscretePathEffect | NodeType.DashPathEffect | NodeType.Path1DPathEffect | NodeType.Path2DPathEffect | NodeType.CornerPathEffect | NodeType.SumPathEffect | NodeType.Line2DPathEffect;
-export declare const isImageFilter: (type: NodeType) => type is NodeType.OffsetImageFilter | NodeType.DisplacementMapImageFilter | NodeType.BlurImageFilter | NodeType.DropShadowImageFilter | NodeType.MorphologyImageFilter | NodeType.BlendImageFilter | NodeType.RuntimeShaderImageFilter;
+export declare const isImageFilter: (type: NodeType) => type is NodeType.OffsetImageFilter | NodeType.DisplacementMapImageFilter | NodeType.BlurImageFilter | NodeType.DropShadowImageFilter | NodeType.MorphologyImageFilter | NodeType.BlendImageFilter | NodeType.RuntimeShaderImageFilter | NodeType.ImageFilter;
 export declare const isShader: (type: NodeType) => type is NodeType.Shader | NodeType.ImageShader | NodeType.ColorShader | NodeType.Turbulence | NodeType.FractalNoise | NodeType.LinearGradient | NodeType.RadialGradient | NodeType.SweepGradient | NodeType.TwoPointConicalGradient;
 export declare const sortNodeChildren: (parent: Node) => {
     colorFilters: Node<unknown>[];

package/lib/module/sksg/Node.js

@@ -12,7 +12,7 @@ export const isPathEffect = type => {
 export const isImageFilter = type => {
   "worklet";
 
-  return type === NodeType.OffsetImageFilter || type === NodeType.DisplacementMapImageFilter || type === NodeType.BlurImageFilter || type === NodeType.DropShadowImageFilter || type === NodeType.MorphologyImageFilter || type === NodeType.BlendImageFilter || type === NodeType.RuntimeShaderImageFilter;
+  return type === NodeType.ImageFilter || type === NodeType.OffsetImageFilter || type === NodeType.DisplacementMapImageFilter || type === NodeType.BlurImageFilter || type === NodeType.DropShadowImageFilter || type === NodeType.MorphologyImageFilter || type === NodeType.BlendImageFilter || type === NodeType.RuntimeShaderImageFilter;
 };
 export const isShader = type => {
   "worklet";

package/lib/module/sksg/Node.js.map

@@ -1 +1 @@
-{"version":3,"names":["NodeType","isColorFilter","type","BlendColorFilter","MatrixColorFilter","LerpColorFilter","LumaColorFilter","SRGBToLinearGammaColorFilter","LinearToSRGBGammaColorFilter","isPathEffect","DiscretePathEffect","DashPathEffect","Path1DPathEffect","Path2DPathEffect","CornerPathEffect","SumPathEffect","Line2DPathEffect","isImageFilter","OffsetImageFilter","DisplacementMapImageFilter","BlurImageFilter","DropShadowImageFilter","MorphologyImageFilter","BlendImageFilter","RuntimeShaderImageFilter","isShader","Shader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","sortNodeChildren","parent","maskFilters","colorFilters","shaders","imageFilters","pathEffects","drawings","paints","children","forEach","node","push","BlurMaskFilter","Paint","Blend"],"sources":["Node.ts"],"sourcesContent":["import { NodeType } from \"../dom/types\";\n\nexport interface Node<Props = unknown> {\n  type: NodeType;\n  props: Props;\n  children: Node[];\n}\n\nexport const isColorFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.BlendColorFilter ||\n    type === NodeType.MatrixColorFilter ||\n    type === NodeType.LerpColorFilter ||\n    type === NodeType.LumaColorFilter ||\n    type === NodeType.SRGBToLinearGammaColorFilter ||\n    type === NodeType.LinearToSRGBGammaColorFilter\n  );\n};\n\nexport const isPathEffect = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.DiscretePathEffect ||\n    type === NodeType.DashPathEffect ||\n    type === NodeType.Path1DPathEffect ||\n    type === NodeType.Path2DPathEffect ||\n    type === NodeType.CornerPathEffect ||\n    type === NodeType.SumPathEffect ||\n    type === NodeType.Line2DPathEffect\n  );\n};\n\nexport const isImageFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.OffsetImageFilter ||\n    type === NodeType.DisplacementMapImageFilter ||\n    type === NodeType.BlurImageFilter ||\n    type === NodeType.DropShadowImageFilter ||\n    type === NodeType.MorphologyImageFilter ||\n    type === NodeType.BlendImageFilter ||\n    type === NodeType.RuntimeShaderImageFilter\n  );\n};\n\nexport const isShader = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.Shader ||\n    type === NodeType.ImageShader ||\n    type === NodeType.ColorShader ||\n    type === NodeType.Turbulence ||\n    type === NodeType.FractalNoise ||\n    type === NodeType.LinearGradient ||\n    type === NodeType.RadialGradient ||\n    type === NodeType.SweepGradient ||\n    type === NodeType.TwoPointConicalGradient\n  );\n};\n\nexport const sortNodeChildren = (parent: Node) => {\n  \"worklet\";\n  const maskFilters: Node[] = [];\n  const colorFilters: Node[] = [];\n  const shaders: Node[] = [];\n  const imageFilters: Node[] = [];\n  const pathEffects: Node[] = [];\n  const drawings: Node[] = [];\n  const paints: Node[] = [];\n  parent.children.forEach((node) => {\n    if (isColorFilter(node.type)) {\n      colorFilters.push(node);\n    } else if (node.type === NodeType.BlurMaskFilter) {\n      maskFilters.push(node);\n    } else if (isPathEffect(node.type)) {\n      pathEffects.push(node);\n    } else if (isImageFilter(node.type)) {\n      imageFilters.push(node);\n    } else if (isShader(node.type)) {\n      shaders.push(node);\n    } else if (node.type === NodeType.Paint) {\n      paints.push(node);\n    } else if (node.type === NodeType.Blend) {\n      if (node.children[0] && isImageFilter(node.children[0].type)) {\n        node.type = NodeType.BlendImageFilter;\n        imageFilters.push(node);\n      } else {\n        node.type = NodeType.Blend;\n        shaders.push(node);\n      }\n    } else {\n      drawings.push(node);\n    }\n  });\n  return {\n    colorFilters,\n    drawings,\n    maskFilters,\n    shaders,\n    pathEffects,\n    imageFilters,\n    paints,\n  };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["NodeType","isColorFilter","type","BlendColorFilter","MatrixColorFilter","LerpColorFilter","LumaColorFilter","SRGBToLinearGammaColorFilter","LinearToSRGBGammaColorFilter","isPathEffect","DiscretePathEffect","DashPathEffect","Path1DPathEffect","Path2DPathEffect","CornerPathEffect","SumPathEffect","Line2DPathEffect","isImageFilter","ImageFilter","OffsetImageFilter","DisplacementMapImageFilter","BlurImageFilter","DropShadowImageFilter","MorphologyImageFilter","BlendImageFilter","RuntimeShaderImageFilter","isShader","Shader","ImageShader","ColorShader","Turbulence","FractalNoise","LinearGradient","RadialGradient","SweepGradient","TwoPointConicalGradient","sortNodeChildren","parent","maskFilters","colorFilters","shaders","imageFilters","pathEffects","drawings","paints","children","forEach","node","push","BlurMaskFilter","Paint","Blend"],"sources":["Node.ts"],"sourcesContent":["import { NodeType } from \"../dom/types\";\n\nexport interface Node<Props = unknown> {\n  type: NodeType;\n  props: Props;\n  children: Node[];\n}\n\nexport const isColorFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.BlendColorFilter ||\n    type === NodeType.MatrixColorFilter ||\n    type === NodeType.LerpColorFilter ||\n    type === NodeType.LumaColorFilter ||\n    type === NodeType.SRGBToLinearGammaColorFilter ||\n    type === NodeType.LinearToSRGBGammaColorFilter\n  );\n};\n\nexport const isPathEffect = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.DiscretePathEffect ||\n    type === NodeType.DashPathEffect ||\n    type === NodeType.Path1DPathEffect ||\n    type === NodeType.Path2DPathEffect ||\n    type === NodeType.CornerPathEffect ||\n    type === NodeType.SumPathEffect ||\n    type === NodeType.Line2DPathEffect\n  );\n};\n\nexport const isImageFilter = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.ImageFilter ||\n    type === NodeType.OffsetImageFilter ||\n    type === NodeType.DisplacementMapImageFilter ||\n    type === NodeType.BlurImageFilter ||\n    type === NodeType.DropShadowImageFilter ||\n    type === NodeType.MorphologyImageFilter ||\n    type === NodeType.BlendImageFilter ||\n    type === NodeType.RuntimeShaderImageFilter\n  );\n};\n\nexport const isShader = (type: NodeType) => {\n  \"worklet\";\n  return (\n    type === NodeType.Shader ||\n    type === NodeType.ImageShader ||\n    type === NodeType.ColorShader ||\n    type === NodeType.Turbulence ||\n    type === NodeType.FractalNoise ||\n    type === NodeType.LinearGradient ||\n    type === NodeType.RadialGradient ||\n    type === NodeType.SweepGradient ||\n    type === NodeType.TwoPointConicalGradient\n  );\n};\n\nexport const sortNodeChildren = (parent: Node) => {\n  \"worklet\";\n  const maskFilters: Node[] = [];\n  const colorFilters: Node[] = [];\n  const shaders: Node[] = [];\n  const imageFilters: Node[] = [];\n  const pathEffects: Node[] = [];\n  const drawings: Node[] = [];\n  const paints: Node[] = [];\n  parent.children.forEach((node) => {\n    if (isColorFilter(node.type)) {\n      colorFilters.push(node);\n    } else if (node.type === NodeType.BlurMaskFilter) {\n      maskFilters.push(node);\n    } else if (isPathEffect(node.type)) {\n      pathEffects.push(node);\n    } else if (isImageFilter(node.type)) {\n      imageFilters.push(node);\n    } else if (isShader(node.type)) {\n      shaders.push(node);\n    } else if (node.type === NodeType.Paint) {\n      paints.push(node);\n    } else if (node.type === NodeType.Blend) {\n      if (node.children[0] && isImageFilter(node.children[0].type)) {\n        node.type = NodeType.BlendImageFilter;\n        imageFilters.push(node);\n      } else {\n        node.type = NodeType.Blend;\n        shaders.push(node);\n      }\n    } else {\n      drawings.push(node);\n    }\n  });\n  return {\n    colorFilters,\n    drawings,\n    maskFilters,\n    shaders,\n    pathEffects,\n    imageFilters,\n    paints,\n  };\n};\n"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,cAAc;AAQvC,OAAO,MAAMC,aAAa,GAAIC,IAAc,IAAK;EAC/C,SAAS;;EACT,OACEA,IAAI,KAAKF,QAAQ,CAACG,gBAAgB,IAClCD,IAAI,KAAKF,QAAQ,CAACI,iBAAiB,IACnCF,IAAI,KAAKF,QAAQ,CAACK,eAAe,IACjCH,IAAI,KAAKF,QAAQ,CAACM,eAAe,IACjCJ,IAAI,KAAKF,QAAQ,CAACO,4BAA4B,IAC9CL,IAAI,KAAKF,QAAQ,CAACQ,4BAA4B;AAElD,CAAC;AAED,OAAO,MAAMC,YAAY,GAAIP,IAAc,IAAK;EAC9C,SAAS;;EACT,OACEA,IAAI,KAAKF,QAAQ,CAACU,kBAAkB,IACpCR,IAAI,KAAKF,QAAQ,CAACW,cAAc,IAChCT,IAAI,KAAKF,QAAQ,CAACY,gBAAgB,IAClCV,IAAI,KAAKF,QAAQ,CAACa,gBAAgB,IAClCX,IAAI,KAAKF,QAAQ,CAACc,gBAAgB,IAClCZ,IAAI,KAAKF,QAAQ,CAACe,aAAa,IAC/Bb,IAAI,KAAKF,QAAQ,CAACgB,gBAAgB;AAEtC,CAAC;AAED,OAAO,MAAMC,aAAa,GAAIf,IAAc,IAAK;EAC/C,SAAS;;EACT,OACEA,IAAI,KAAKF,QAAQ,CAACkB,WAAW,IAC7BhB,IAAI,KAAKF,QAAQ,CAACmB,iBAAiB,IACnCjB,IAAI,KAAKF,QAAQ,CAACoB,0BAA0B,IAC5ClB,IAAI,KAAKF,QAAQ,CAACqB,eAAe,IACjCnB,IAAI,KAAKF,QAAQ,CAACsB,qBAAqB,IACvCpB,IAAI,KAAKF,QAAQ,CAACuB,qBAAqB,IACvCrB,IAAI,KAAKF,QAAQ,CAACwB,gBAAgB,IAClCtB,IAAI,KAAKF,QAAQ,CAACyB,wBAAwB;AAE9C,CAAC;AAED,OAAO,MAAMC,QAAQ,GAAIxB,IAAc,IAAK;EAC1C,SAAS;;EACT,OACEA,IAAI,KAAKF,QAAQ,CAAC2B,MAAM,IACxBzB,IAAI,KAAKF,QAAQ,CAAC4B,WAAW,IAC7B1B,IAAI,KAAKF,QAAQ,CAAC6B,WAAW,IAC7B3B,IAAI,KAAKF,QAAQ,CAAC8B,UAAU,IAC5B5B,IAAI,KAAKF,QAAQ,CAAC+B,YAAY,IAC9B7B,IAAI,KAAKF,QAAQ,CAACgC,cAAc,IAChC9B,IAAI,KAAKF,QAAQ,CAACiC,cAAc,IAChC/B,IAAI,KAAKF,QAAQ,CAACkC,aAAa,IAC/BhC,IAAI,KAAKF,QAAQ,CAACmC,uBAAuB;AAE7C,CAAC;AAED,OAAO,MAAMC,gBAAgB,GAAIC,MAAY,IAAK;EAChD,SAAS;;EACT,MAAMC,WAAmB,GAAG,EAAE;EAC9B,MAAMC,YAAoB,GAAG,EAAE;EAC/B,MAAMC,OAAe,GAAG,EAAE;EAC1B,MAAMC,YAAoB,GAAG,EAAE;EAC/B,MAAMC,WAAmB,GAAG,EAAE;EAC9B,MAAMC,QAAgB,GAAG,EAAE;EAC3B,MAAMC,MAAc,GAAG,EAAE;EACzBP,MAAM,CAACQ,QAAQ,CAACC,OAAO,CAAEC,IAAI,IAAK;IAChC,IAAI9C,aAAa,CAAC8C,IAAI,CAAC7C,IAAI,CAAC,EAAE;MAC5BqC,YAAY,CAACS,IAAI,CAACD,IAAI,CAAC;IACzB,CAAC,MAAM,IAAIA,IAAI,CAAC7C,IAAI,KAAKF,QAAQ,CAACiD,cAAc,EAAE;MAChDX,WAAW,CAACU,IAAI,CAACD,IAAI,CAAC;IACxB,CAAC,MAAM,IAAItC,YAAY,CAACsC,IAAI,CAAC7C,IAAI,CAAC,EAAE;MAClCwC,WAAW,CAACM,IAAI,CAACD,IAAI,CAAC;IACxB,CAAC,MAAM,IAAI9B,aAAa,CAAC8B,IAAI,CAAC7C,IAAI,CAAC,EAAE;MACnCuC,YAAY,CAACO,IAAI,CAACD,IAAI,CAAC;IACzB,CAAC,MAAM,IAAIrB,QAAQ,CAACqB,IAAI,CAAC7C,IAAI,CAAC,EAAE;MAC9BsC,OAAO,CAACQ,IAAI,CAACD,IAAI,CAAC;IACpB,CAAC,MAAM,IAAIA,IAAI,CAAC7C,IAAI,KAAKF,QAAQ,CAACkD,KAAK,EAAE;MACvCN,MAAM,CAACI,IAAI,CAACD,IAAI,CAAC;IACnB,CAAC,MAAM,IAAIA,IAAI,CAAC7C,IAAI,KAAKF,QAAQ,CAACmD,KAAK,EAAE;MACvC,IAAIJ,IAAI,CAACF,QAAQ,CAAC,CAAC,CAAC,IAAI5B,aAAa,CAAC8B,IAAI,CAACF,QAAQ,CAAC,CAAC,CAAC,CAAC3C,IAAI,CAAC,EAAE;QAC5D6C,IAAI,CAAC7C,IAAI,GAAGF,QAAQ,CAACwB,gBAAgB;QACrCiB,YAAY,CAACO,IAAI,CAACD,IAAI,CAAC;MACzB,CAAC,MAAM;QACLA,IAAI,CAAC7C,IAAI,GAAGF,QAAQ,CAACmD,KAAK;QAC1BX,OAAO,CAACQ,IAAI,CAACD,IAAI,CAAC;MACpB;IACF,CAAC,MAAM;MACLJ,QAAQ,CAACK,IAAI,CAACD,IAAI,CAAC;IACrB;EACF,CAAC,CAAC;EACF,OAAO;IACLR,YAAY;IACZI,QAAQ;IACRL,WAAW;IACXE,OAAO;IACPE,WAAW;IACXD,YAAY;IACZG;EACF,CAAC;AACH,CAAC","ignoreList":[]}

package/lib/module/sksg/Recorder/commands/ImageFilters.js

@@ -119,6 +119,14 @@ const declareRuntimeShaderImageFilter = (ctx, props) => {
   const imgf = ctx.Skia.ImageFilter.MakeRuntimeShader(rtb, null, null);
   ctx.imageFilters.push(imgf);
 };
+const declareImageFilter = (ctx, props) => {
+  "worklet";
+
+  const {
+    imageFilter
+  } = props;
+  ctx.imageFilters.push(imageFilter);
+};
 export const composeImageFilters = ctx => {
   "worklet";
 
@@ -152,7 +160,9 @@ const isImageFilter = (command, type) => {
 export const pushImageFilter = (ctx, command) => {
   "worklet";
 
-  if (isImageFilter(command, NodeType.BlurImageFilter)) {
+  if (isImageFilter(command, NodeType.ImageFilter)) {
+    declareImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.BlurImageFilter)) {
     declareBlurImageFilter(ctx, command.props);
   } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {
     declareMorphologyImageFilter(ctx, command.props);

package/lib/module/sksg/Recorder/commands/ImageFilters.js.map

@@ -1 +1 @@
-{"version":3,"names":["enumKey","processColor","processRadius","NodeType","BlendMode","BlurStyle","ColorChannel","processUniforms","TileMode","composeDeclarations","CommandType","MorphologyOperator","Black","Float32Array","of","MakeInnerShadow","Skia","shadowOnly","dx","dy","sigmaX","sigmaY","color","input","sourceGraphic","ImageFilter","MakeColorFilter","ColorFilter","MakeBlend","Dst","sourceAlpha","SrcIn","f1","SrcOut","f2","MakeOffset","f3","MakeBlur","Decal","f4","MakeCompose","SrcOver","declareBlurImageFilter","ctx","props","mode","blur","sigma","imgf","x","y","imageFilters","push","declareMorphologyImageFilter","operator","r","radius","Erode","MakeErode","MakeDilate","declareOffsetImageFilter","declareDropShadowImageFilter","cl","inner","factory","bind","MakeDropShadowOnly","MakeDropShadow","declareBlendImageFilter","blend","splice","length","composer","declareDisplacementMapImageFilter","channelX","channelY","scale","shader","shaders","pop","Error","map","MakeShader","MakeDisplacementMap","declareRuntimeShaderImageFilter","source","uniforms","rtb","RuntimeShaderBuilder","MakeRuntimeShader","composeImageFilters","outer","setBlurMaskFilter","style","respectCTM","mf","MaskFilter","paint","setMaskFilter","isPushImageFilter","command","type","PushImageFilter","isImageFilter","imageFilterType","pushImageFilter","BlurImageFilter","MorphologyImageFilter","BlendImageFilter","DisplacementMapImageFilter","DropShadowImageFilter","OffsetImageFilter","RuntimeShaderImageFilter"],"sources":["ImageFilters.ts"],"sourcesContent":["import { enumKey, processColor, processRadius } from \"../../../dom/nodes\";\nimport type {\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  BlurMaskFilterProps,\n  DisplacementMapImageFilterProps,\n  DropShadowImageFilterProps,\n  MorphologyImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n} from \"../../../dom/types\";\nimport { NodeType } from \"../../../dom/types\";\nimport type { SkColor, SkImageFilter, Skia } from \"../../../skia/types\";\nimport {\n  BlendMode,\n  BlurStyle,\n  ColorChannel,\n  processUniforms,\n  TileMode,\n} from \"../../../skia/types\";\nimport { composeDeclarations } from \"../../utils\";\nimport type { Command } from \"../Core\";\nimport { CommandType } from \"../Core\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nexport enum MorphologyOperator {\n  Erode,\n  Dilate,\n}\n\nconst Black = Float32Array.of(0, 0, 0, 1);\n\nconst MakeInnerShadow = (\n  Skia: Skia,\n  shadowOnly: boolean | undefined,\n  dx: number,\n  dy: number,\n  sigmaX: number,\n  sigmaY: number,\n  color: SkColor,\n  input: SkImageFilter | null\n) => {\n  \"worklet\";\n  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),\n    null\n  );\n  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),\n    null\n  );\n  const f1 = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),\n    null\n  );\n  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);\n  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);\n  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);\n  if (shadowOnly) {\n    return f4;\n  }\n  return Skia.ImageFilter.MakeCompose(\n    input,\n    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)\n  );\n};\n\nconst declareBlurImageFilter = (\n  ctx: DrawingContext,\n  props: BlurImageFilterProps\n) => {\n  \"worklet\";\n  const { mode, blur } = props;\n  const sigma = processRadius(ctx.Skia, blur);\n  const imgf = ctx.Skia.ImageFilter.MakeBlur(\n    sigma.x,\n    sigma.y,\n    TileMode[enumKey(mode)],\n    null\n  );\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareMorphologyImageFilter = (\n  ctx: DrawingContext,\n  props: MorphologyImageFilterProps\n) => {\n  \"worklet\";\n  const { operator } = props;\n  const r = processRadius(ctx.Skia, props.radius);\n  let imgf;\n  if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {\n    imgf = ctx.Skia.ImageFilter.MakeErode(r.x, r.y, null);\n  } else {\n    imgf = ctx.Skia.ImageFilter.MakeDilate(r.x, r.y, null);\n  }\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareOffsetImageFilter = (\n  ctx: DrawingContext,\n  props: OffsetImageFilterProps\n) => {\n  \"worklet\";\n  const { x, y } = props;\n  const imgf = ctx.Skia.ImageFilter.MakeOffset(x, y, null);\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareDropShadowImageFilter = (\n  ctx: DrawingContext,\n  props: DropShadowImageFilterProps\n) => {\n  \"worklet\";\n  const { dx, dy, blur, shadowOnly, color: cl, inner } = props;\n  const color = processColor(ctx.Skia, cl);\n  let factory;\n  if (inner) {\n    factory = MakeInnerShadow.bind(null, ctx.Skia, shadowOnly);\n  } else {\n    factory = shadowOnly\n      ? ctx.Skia.ImageFilter.MakeDropShadowOnly.bind(ctx.Skia.ImageFilter)\n      : ctx.Skia.ImageFilter.MakeDropShadow.bind(ctx.Skia.ImageFilter);\n  }\n  const imgf = factory(dx, dy, blur, blur, color, null);\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareBlendImageFilter = (\n  ctx: DrawingContext,\n  props: BlendImageFilterProps\n) => {\n  \"worklet\";\n  const blend = BlendMode[enumKey(props.mode)];\n  // Blend ImageFilters\n  const imageFilters = ctx.imageFilters.splice(0, ctx.imageFilters.length);\n  const composer = ctx.Skia.ImageFilter.MakeBlend.bind(\n    ctx.Skia.ImageFilter,\n    blend\n  );\n  ctx.imageFilters.push(composeDeclarations(imageFilters, composer));\n};\n\nconst declareDisplacementMapImageFilter = (\n  ctx: DrawingContext,\n  props: DisplacementMapImageFilterProps\n) => {\n  \"worklet\";\n  const { channelX, channelY, scale } = props;\n  const shader = ctx.shaders.pop();\n  if (!shader) {\n    throw new Error(\"DisplacementMap expects a shader as child\");\n  }\n  const map = ctx.Skia.ImageFilter.MakeShader(shader);\n  const imgf = ctx.Skia.ImageFilter.MakeDisplacementMap(\n    ColorChannel[enumKey(channelX)],\n    ColorChannel[enumKey(channelY)],\n    scale,\n    map,\n    null\n  );\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareRuntimeShaderImageFilter = (\n  ctx: DrawingContext,\n  props: RuntimeShaderImageFilterProps\n) => {\n  \"worklet\";\n  const { source, uniforms } = props;\n  const rtb = ctx.Skia.RuntimeShaderBuilder(source);\n  if (uniforms) {\n    processUniforms(source, uniforms, rtb);\n  }\n  const imgf = ctx.Skia.ImageFilter.MakeRuntimeShader(rtb, null, null);\n  ctx.imageFilters.push(imgf);\n};\n\nexport const composeImageFilters = (ctx: DrawingContext) => {\n  \"worklet\";\n  if (ctx.imageFilters.length > 1) {\n    const outer = ctx.imageFilters.pop()!;\n    const inner = ctx.imageFilters.pop()!;\n    ctx.imageFilters.push(ctx.Skia.ImageFilter.MakeCompose(outer, inner));\n  }\n};\n\nexport const setBlurMaskFilter = (\n  ctx: DrawingContext,\n  props: BlurMaskFilterProps\n) => {\n  \"worklet\";\n  const { blur, style, respectCTM } = props;\n  const mf = ctx.Skia.MaskFilter.MakeBlur(\n    BlurStyle[enumKey(style)],\n    blur,\n    respectCTM\n  );\n  ctx.paint.setMaskFilter(mf);\n};\n\nexport const isPushImageFilter = (\n  command: Command\n): command is Command<CommandType.PushImageFilter> => {\n  \"worklet\";\n  return command.type === CommandType.PushImageFilter;\n};\n\ntype Props = {\n  [NodeType.OffsetImageFilter]: OffsetImageFilterProps;\n  [NodeType.DisplacementMapImageFilter]: DisplacementMapImageFilterProps;\n  [NodeType.BlurImageFilter]: BlurImageFilterProps;\n  [NodeType.DropShadowImageFilter]: DropShadowImageFilterProps;\n  [NodeType.MorphologyImageFilter]: MorphologyImageFilterProps;\n  [NodeType.BlendImageFilter]: BlendImageFilterProps;\n  [NodeType.RuntimeShaderImageFilter]: RuntimeShaderImageFilterProps;\n};\n\ninterface PushImageFilter<T extends keyof Props>\n  extends Command<CommandType.PushImageFilter> {\n  imageFilterType: T;\n  props: Props[T];\n}\n\nconst isImageFilter = <T extends keyof Props>(\n  command: Command<CommandType.PushImageFilter>,\n  type: T\n): command is PushImageFilter<T> => {\n  \"worklet\";\n  return command.imageFilterType === type;\n};\n\nexport const pushImageFilter = (\n  ctx: DrawingContext,\n  command: Command<CommandType.PushImageFilter>\n) => {\n  \"worklet\";\n  if (isImageFilter(command, NodeType.BlurImageFilter)) {\n    declareBlurImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {\n    declareMorphologyImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.BlendImageFilter)) {\n    declareBlendImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.DisplacementMapImageFilter)) {\n    declareDisplacementMapImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.DropShadowImageFilter)) {\n    declareDropShadowImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.OffsetImageFilter)) {\n    declareOffsetImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.RuntimeShaderImageFilter)) {\n    declareRuntimeShaderImageFilter(ctx, command.props);\n  } else {\n    throw new Error(\"Invalid image filter type: \" + command.imageFilterType);\n  }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["enumKey","processColor","processRadius","NodeType","BlendMode","BlurStyle","ColorChannel","processUniforms","TileMode","composeDeclarations","CommandType","MorphologyOperator","Black","Float32Array","of","MakeInnerShadow","Skia","shadowOnly","dx","dy","sigmaX","sigmaY","color","input","sourceGraphic","ImageFilter","MakeColorFilter","ColorFilter","MakeBlend","Dst","sourceAlpha","SrcIn","f1","SrcOut","f2","MakeOffset","f3","MakeBlur","Decal","f4","MakeCompose","SrcOver","declareBlurImageFilter","ctx","props","mode","blur","sigma","imgf","x","y","imageFilters","push","declareMorphologyImageFilter","operator","r","radius","Erode","MakeErode","MakeDilate","declareOffsetImageFilter","declareDropShadowImageFilter","cl","inner","factory","bind","MakeDropShadowOnly","MakeDropShadow","declareBlendImageFilter","blend","splice","length","composer","declareDisplacementMapImageFilter","channelX","channelY","scale","shader","shaders","pop","Error","map","MakeShader","MakeDisplacementMap","declareRuntimeShaderImageFilter","source","uniforms","rtb","RuntimeShaderBuilder","MakeRuntimeShader","declareImageFilter","imageFilter","composeImageFilters","outer","setBlurMaskFilter","style","respectCTM","mf","MaskFilter","paint","setMaskFilter","isPushImageFilter","command","type","PushImageFilter","isImageFilter","imageFilterType","pushImageFilter","BlurImageFilter","MorphologyImageFilter","BlendImageFilter","DisplacementMapImageFilter","DropShadowImageFilter","OffsetImageFilter","RuntimeShaderImageFilter"],"sources":["ImageFilters.ts"],"sourcesContent":["import { enumKey, processColor, processRadius } from \"../../../dom/nodes\";\nimport type {\n  BlendImageFilterProps,\n  BlurImageFilterProps,\n  BlurMaskFilterProps,\n  DisplacementMapImageFilterProps,\n  DropShadowImageFilterProps,\n  ImageFilterProps,\n  MorphologyImageFilterProps,\n  OffsetImageFilterProps,\n  RuntimeShaderImageFilterProps,\n} from \"../../../dom/types\";\nimport { NodeType } from \"../../../dom/types\";\nimport type { SkColor, SkImageFilter, Skia } from \"../../../skia/types\";\nimport {\n  BlendMode,\n  BlurStyle,\n  ColorChannel,\n  processUniforms,\n  TileMode,\n} from \"../../../skia/types\";\nimport { composeDeclarations } from \"../../utils\";\nimport type { Command } from \"../Core\";\nimport { CommandType } from \"../Core\";\nimport type { DrawingContext } from \"../DrawingContext\";\n\nexport enum MorphologyOperator {\n  Erode,\n  Dilate,\n}\n\nconst Black = Float32Array.of(0, 0, 0, 1);\n\nconst MakeInnerShadow = (\n  Skia: Skia,\n  shadowOnly: boolean | undefined,\n  dx: number,\n  dy: number,\n  sigmaX: number,\n  sigmaY: number,\n  color: SkColor,\n  input: SkImageFilter | null\n) => {\n  \"worklet\";\n  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),\n    null\n  );\n  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),\n    null\n  );\n  const f1 = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),\n    null\n  );\n  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);\n  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);\n  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);\n  if (shadowOnly) {\n    return f4;\n  }\n  return Skia.ImageFilter.MakeCompose(\n    input,\n    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)\n  );\n};\n\nconst declareBlurImageFilter = (\n  ctx: DrawingContext,\n  props: BlurImageFilterProps\n) => {\n  \"worklet\";\n  const { mode, blur } = props;\n  const sigma = processRadius(ctx.Skia, blur);\n  const imgf = ctx.Skia.ImageFilter.MakeBlur(\n    sigma.x,\n    sigma.y,\n    TileMode[enumKey(mode)],\n    null\n  );\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareMorphologyImageFilter = (\n  ctx: DrawingContext,\n  props: MorphologyImageFilterProps\n) => {\n  \"worklet\";\n  const { operator } = props;\n  const r = processRadius(ctx.Skia, props.radius);\n  let imgf;\n  if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {\n    imgf = ctx.Skia.ImageFilter.MakeErode(r.x, r.y, null);\n  } else {\n    imgf = ctx.Skia.ImageFilter.MakeDilate(r.x, r.y, null);\n  }\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareOffsetImageFilter = (\n  ctx: DrawingContext,\n  props: OffsetImageFilterProps\n) => {\n  \"worklet\";\n  const { x, y } = props;\n  const imgf = ctx.Skia.ImageFilter.MakeOffset(x, y, null);\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareDropShadowImageFilter = (\n  ctx: DrawingContext,\n  props: DropShadowImageFilterProps\n) => {\n  \"worklet\";\n  const { dx, dy, blur, shadowOnly, color: cl, inner } = props;\n  const color = processColor(ctx.Skia, cl);\n  let factory;\n  if (inner) {\n    factory = MakeInnerShadow.bind(null, ctx.Skia, shadowOnly);\n  } else {\n    factory = shadowOnly\n      ? ctx.Skia.ImageFilter.MakeDropShadowOnly.bind(ctx.Skia.ImageFilter)\n      : ctx.Skia.ImageFilter.MakeDropShadow.bind(ctx.Skia.ImageFilter);\n  }\n  const imgf = factory(dx, dy, blur, blur, color, null);\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareBlendImageFilter = (\n  ctx: DrawingContext,\n  props: BlendImageFilterProps\n) => {\n  \"worklet\";\n  const blend = BlendMode[enumKey(props.mode)];\n  // Blend ImageFilters\n  const imageFilters = ctx.imageFilters.splice(0, ctx.imageFilters.length);\n  const composer = ctx.Skia.ImageFilter.MakeBlend.bind(\n    ctx.Skia.ImageFilter,\n    blend\n  );\n  ctx.imageFilters.push(composeDeclarations(imageFilters, composer));\n};\n\nconst declareDisplacementMapImageFilter = (\n  ctx: DrawingContext,\n  props: DisplacementMapImageFilterProps\n) => {\n  \"worklet\";\n  const { channelX, channelY, scale } = props;\n  const shader = ctx.shaders.pop();\n  if (!shader) {\n    throw new Error(\"DisplacementMap expects a shader as child\");\n  }\n  const map = ctx.Skia.ImageFilter.MakeShader(shader);\n  const imgf = ctx.Skia.ImageFilter.MakeDisplacementMap(\n    ColorChannel[enumKey(channelX)],\n    ColorChannel[enumKey(channelY)],\n    scale,\n    map,\n    null\n  );\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareRuntimeShaderImageFilter = (\n  ctx: DrawingContext,\n  props: RuntimeShaderImageFilterProps\n) => {\n  \"worklet\";\n  const { source, uniforms } = props;\n  const rtb = ctx.Skia.RuntimeShaderBuilder(source);\n  if (uniforms) {\n    processUniforms(source, uniforms, rtb);\n  }\n  const imgf = ctx.Skia.ImageFilter.MakeRuntimeShader(rtb, null, null);\n  ctx.imageFilters.push(imgf);\n};\n\nconst declareImageFilter = (\n  ctx: DrawingContext,\n  props: ImageFilterProps\n) => {\n  \"worklet\";\n  const { imageFilter } = props;\n  ctx.imageFilters.push(imageFilter);\n};\n\nexport const composeImageFilters = (ctx: DrawingContext) => {\n  \"worklet\";\n  if (ctx.imageFilters.length > 1) {\n    const outer = ctx.imageFilters.pop()!;\n    const inner = ctx.imageFilters.pop()!;\n    ctx.imageFilters.push(ctx.Skia.ImageFilter.MakeCompose(outer, inner));\n  }\n};\n\nexport const setBlurMaskFilter = (\n  ctx: DrawingContext,\n  props: BlurMaskFilterProps\n) => {\n  \"worklet\";\n  const { blur, style, respectCTM } = props;\n  const mf = ctx.Skia.MaskFilter.MakeBlur(\n    BlurStyle[enumKey(style)],\n    blur,\n    respectCTM\n  );\n  ctx.paint.setMaskFilter(mf);\n};\n\nexport const isPushImageFilter = (\n  command: Command\n): command is Command<CommandType.PushImageFilter> => {\n  \"worklet\";\n  return command.type === CommandType.PushImageFilter;\n};\n\ntype Props = {\n  [NodeType.ImageFilter]: ImageFilterProps;\n  [NodeType.OffsetImageFilter]: OffsetImageFilterProps;\n  [NodeType.DisplacementMapImageFilter]: DisplacementMapImageFilterProps;\n  [NodeType.BlurImageFilter]: BlurImageFilterProps;\n  [NodeType.DropShadowImageFilter]: DropShadowImageFilterProps;\n  [NodeType.MorphologyImageFilter]: MorphologyImageFilterProps;\n  [NodeType.BlendImageFilter]: BlendImageFilterProps;\n  [NodeType.RuntimeShaderImageFilter]: RuntimeShaderImageFilterProps;\n};\n\ninterface PushImageFilter<T extends keyof Props>\n  extends Command<CommandType.PushImageFilter> {\n  imageFilterType: T;\n  props: Props[T];\n}\n\nconst isImageFilter = <T extends keyof Props>(\n  command: Command<CommandType.PushImageFilter>,\n  type: T\n): command is PushImageFilter<T> => {\n  \"worklet\";\n  return command.imageFilterType === type;\n};\n\nexport const pushImageFilter = (\n  ctx: DrawingContext,\n  command: Command<CommandType.PushImageFilter>\n) => {\n  \"worklet\";\n  if (isImageFilter(command, NodeType.ImageFilter)) {\n    declareImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.BlurImageFilter)) {\n    declareBlurImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {\n    declareMorphologyImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.BlendImageFilter)) {\n    declareBlendImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.DisplacementMapImageFilter)) {\n    declareDisplacementMapImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.DropShadowImageFilter)) {\n    declareDropShadowImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.OffsetImageFilter)) {\n    declareOffsetImageFilter(ctx, command.props);\n  } else if (isImageFilter(command, NodeType.RuntimeShaderImageFilter)) {\n    declareRuntimeShaderImageFilter(ctx, command.props);\n  } else {\n    throw new Error(\"Invalid image filter type: \" + command.imageFilterType);\n  }\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/typescript/lib/commonjs/renderer/components/ImageFilter.d.ts

@@ -0,0 +1,2 @@
+export const __esModule: boolean;
+export function ImageFilter(props: any): any;

package/lib/typescript/lib/module/mock/index.d.ts

@@ -506,5 +506,6 @@ export function Mock(CanvasKit: any): {
     Paint: (props: any) => import("react").DOMElement<any, Element>;
     Blend: (props: any) => import("react").DOMElement<any, Element>;
     Skottie: (props: any) => import("react").DOMElement<any, Element>;
+    ImageFilter: (props: any) => import("react").DOMElement<any, Element>;
     Paragraph: (props: any) => import("react").DOMElement<any, Element>;
 };

package/lib/typescript/lib/module/renderer/components/ImageFilter.d.ts

@@ -0,0 +1,2 @@
+export function ImageFilter(props: any): React.DOMElement<any, Element>;
+import React from "react";

package/lib/typescript/lib/module/renderer/components/index.d.ts

@@ -14,4 +14,5 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Skottie";
+export * from "./ImageFilter";
 export * from "./paragraph";

package/lib/typescript/src/dom/types/Drawings.d.ts

@@ -1,4 +1,4 @@
-import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect, SkRSXform, SkColor, SamplingOptions, SkSkottieAnimation } from "../../skia/types";
+import type { FillType, SkImage, StrokeOpts, Vector, Color, SkPoint, BlendMode, PointMode, VertexMode, SkFont, SkRRect, SkTextBlob, SkPicture, SkSVG, SkPaint, SkRect, SkRSXform, SkColor, SamplingOptions, SkSkottieAnimation, SkImageFilter } from "../../skia/types";
 import type { CircleDef, Fit, GroupProps, PathDef, RectDef, RRectDef, SkEnum } from "./Common";
 export interface DrawingNodeProps extends GroupProps {
     paint?: SkPaint;
@@ -115,3 +115,6 @@ export interface BoxShadowProps {
     color?: Color;
     inner?: boolean;
 }
+export interface ImageFilterProps extends GroupProps {
+    imageFilter: SkImageFilter;
+}

package/lib/typescript/src/dom/types/NodeType.d.ts

@@ -56,5 +56,6 @@ export declare const enum NodeType {
     ImageSVG = "skImageSVG",
     Atlas = "skAtlas",
     Paragraph = "skParagraph",
-    Skottie = "skSkottie"
+    Skottie = "skSkottie",
+    ImageFilter = "skImageFilter"
 }

package/lib/typescript/src/renderer/__tests__/e2e/ImageFilter.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/src/renderer/components/ImageFilter.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { ImageFilterProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+export declare const ImageFilter: (props: SkiaProps<ImageFilterProps>) => React.JSX.Element;

package/lib/typescript/src/renderer/components/index.d.ts

@@ -14,4 +14,5 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Skottie";
+export * from "./ImageFilter";
 export * from "./paragraph";

package/lib/typescript/src/sksg/Elements.d.ts

@@ -1,4 +1,4 @@
-import type { FractalNoiseProps, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps, AtlasProps, ChildrenProps, MorphologyImageFilterProps, BlendProps, SkottieProps } from "../dom/types";
+import type { FractalNoiseProps, CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps, ParagraphProps, AtlasProps, ChildrenProps, MorphologyImageFilterProps, BlendProps, SkottieProps, ImageFilterProps } from "../dom/types";
 import type { SkiaProps } from "../renderer";
 declare module "react" {
     namespace JSX {
@@ -27,6 +27,7 @@ declare module "react" {
             skPicture: SkiaProps<PictureProps>;
             skImageSVG: SkiaProps<ImageSVGProps>;
             skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
+            skImageFilter: SkiaProps<ImageFilterProps>;
             skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
             skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
             skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;

package/lib/typescript/src/sksg/Node.d.ts

@@ -6,7 +6,7 @@ export interface Node<Props = unknown> {
 }
 export declare const isColorFilter: (type: NodeType) => type is NodeType.MatrixColorFilter | NodeType.BlendColorFilter | NodeType.LinearToSRGBGammaColorFilter | NodeType.SRGBToLinearGammaColorFilter | NodeType.LumaColorFilter | NodeType.LerpColorFilter;
 export declare const isPathEffect: (type: NodeType) => type is NodeType.DiscretePathEffect | NodeType.DashPathEffect | NodeType.Path1DPathEffect | NodeType.Path2DPathEffect | NodeType.CornerPathEffect | NodeType.SumPathEffect | NodeType.Line2DPathEffect;
-export declare const isImageFilter: (type: NodeType) => type is NodeType.OffsetImageFilter | NodeType.DisplacementMapImageFilter | NodeType.BlurImageFilter | NodeType.DropShadowImageFilter | NodeType.MorphologyImageFilter | NodeType.BlendImageFilter | NodeType.RuntimeShaderImageFilter;
+export declare const isImageFilter: (type: NodeType) => type is NodeType.OffsetImageFilter | NodeType.DisplacementMapImageFilter | NodeType.BlurImageFilter | NodeType.DropShadowImageFilter | NodeType.MorphologyImageFilter | NodeType.BlendImageFilter | NodeType.RuntimeShaderImageFilter | NodeType.ImageFilter;
 export declare const isShader: (type: NodeType) => type is NodeType.Shader | NodeType.ImageShader | NodeType.ColorShader | NodeType.Turbulence | NodeType.FractalNoise | NodeType.LinearGradient | NodeType.RadialGradient | NodeType.SweepGradient | NodeType.TwoPointConicalGradient;
 export declare const sortNodeChildren: (parent: Node) => {
     colorFilters: Node<unknown>[];

package/package.json

@@ -8,7 +8,7 @@
     "setup-skia-web": "scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "react-native": "src/index.ts",

package/src/dom/types/Drawings.ts

@@ -19,6 +19,7 @@ import type {
   SkColor,
   SamplingOptions,
   SkSkottieAnimation,
+  SkImageFilter,
 } from "../../skia/types";
 
 import type {
@@ -170,3 +171,7 @@ export interface BoxShadowProps {
   color?: Color;
   inner?: boolean;
 }
+
+export interface ImageFilterProps extends GroupProps {
+  imageFilter: SkImageFilter;
+}

package/src/dom/types/NodeType.ts

@@ -73,4 +73,6 @@ export const enum NodeType {
   Paragraph = "skParagraph",
   // Skottie
   Skottie = "skSkottie",
+  // ImageFilter
+  ImageFilter = "skImageFilter",
 }

package/src/renderer/__tests__/e2e/ImageFilter.spec.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+
+import { checkImage, docPath } from "../../../__tests__/setup";
+import { importSkia, surface } from "../setup";
+import { ImageFilter, Circle, Group } from "../../components";
+import { TileMode } from "../../../skia/types";
+
+describe("ImageFilter", () => {
+  it("Should render ImageFilter component with blur filter", async () => {
+    const { Skia } = importSkia();
+    const blurFilter = Skia.ImageFilter.MakeBlur(10, 10, TileMode.Clamp, null);
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    blurFilter.source =
+      "Skia.ImageFilter.MakeBlur(10, 10, TileMode.Clamp, null)";
+    // END OF INTERNAL TESTING ONLY
+    const img = await surface.draw(
+      <Group>
+        <ImageFilter imageFilter={blurFilter} />
+        <Circle cx={50} cy={50} r={30} color="red" />
+      </Group>
+    );
+
+    checkImage(img, docPath("image-filter/blur-filter.png"));
+  });
+
+  it("Should render ImageFilter component with offset filter", async () => {
+    const { Skia } = importSkia();
+    const offsetFilter = Skia.ImageFilter.MakeOffset(20, 20, null);
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    offsetFilter.source = "Skia.ImageFilter.MakeOffset(20, 20, null)";
+    // END OF INTERNAL TESTING ONLY
+
+    const img = await surface.draw(
+      <Group>
+        <ImageFilter imageFilter={offsetFilter} />
+        <Circle cx={50} cy={50} r={30} color="blue" />
+      </Group>
+    );
+
+    checkImage(img, docPath("image-filter/offset-filter.png"));
+  });
+
+  it("Should render ImageFilter component with drop shadow filter", async () => {
+    const { Skia } = importSkia();
+    const dropShadowFilter = Skia.ImageFilter.MakeDropShadow(
+      10,
+      10,
+      5,
+      5,
+      Skia.Color("black"),
+      null
+    );
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    dropShadowFilter.source =
+      'Skia.ImageFilter.MakeDropShadow(10, 10, 5, 5, Skia.Color("black"), null)';
+    // END OF INTERNAL TESTING ONLY
+
+    const img = await surface.draw(
+      <Group>
+        <ImageFilter imageFilter={dropShadowFilter} />
+        <Circle cx={50} cy={50} r={30} color="green" />
+      </Group>
+    );
+
+    checkImage(img, docPath("image-filter/drop-shadow-filter.png"));
+  });
+
+  it("Should render ImageFilter component with composed filters", async () => {
+    const { Skia } = importSkia();
+    const blurFilter = Skia.ImageFilter.MakeBlur(5, 5, TileMode.Clamp, null);
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    blurFilter.source = "Skia.ImageFilter.MakeBlur(5, 5, TileMode.Clamp, null)";
+    // END OF INTERNAL TESTING ONLY
+    const offsetFilter = Skia.ImageFilter.MakeOffset(10, 10, blurFilter);
+    // THIS IS FOR INTERNAL TESTING ONLY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    offsetFilter.source =
+      "Skia.ImageFilter.MakeOffset(10, 10, Skia.ImageFilter.MakeBlur(5, 5, TileMode.Clamp, null))";
+    // END OF INTERNAL TESTING ONLY
+
+    const img = await surface.draw(
+      <Group>
+        <ImageFilter imageFilter={offsetFilter} />
+        <Circle cx={50} cy={50} r={30} color="purple" />
+      </Group>
+    );
+
+    checkImage(img, docPath("image-filter/composed-filters.png"));
+  });
+});

package/src/renderer/__tests__/setup.tsx

@@ -322,6 +322,14 @@ const serializeSkOjects = (obj: any): any => {
         source: obj.source,
         assets: obj.assets,
       };
+    } else if (obj.__typename__ === "ImageFilter") {
+      if (!obj.source) {
+        throw new Error("ImageFilter must have a source");
+      }
+      return {
+        __typename__: "Function",
+        source: obj.source,
+      };
     }
   } else if (obj && typeof obj === "object") {
     const result = Object.keys(obj).reduce((acc, key) => {

package/src/renderer/components/ImageFilter.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { ImageFilterProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+
+export const ImageFilter = (props: SkiaProps<ImageFilterProps>) => {
+  return <skImageFilter {...props} />;
+};

package/src/renderer/components/index.ts

@@ -15,5 +15,6 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Skottie";
+export * from "./ImageFilter";
 
 export * from "./paragraph";

package/src/sksg/Elements.tsx

@@ -52,6 +52,7 @@ import type {
   MorphologyImageFilterProps,
   BlendProps,
   SkottieProps,
+  ImageFilterProps,
 } from "../dom/types";
 import type { SkiaProps } from "../renderer";
 
@@ -89,6 +90,7 @@ declare module "react" {
       skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
 
       // ImageFilters
+      skImageFilter: SkiaProps<ImageFilterProps>;
       skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
       skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
       skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;

package/src/sksg/Node.ts

@@ -34,6 +34,7 @@ export const isPathEffect = (type: NodeType) => {
 export const isImageFilter = (type: NodeType) => {
   "worklet";
   return (
+    type === NodeType.ImageFilter ||
     type === NodeType.OffsetImageFilter ||
     type === NodeType.DisplacementMapImageFilter ||
     type === NodeType.BlurImageFilter ||

package/src/sksg/Recorder/commands/ImageFilters.ts

@@ -5,6 +5,7 @@ import type {
   BlurMaskFilterProps,
   DisplacementMapImageFilterProps,
   DropShadowImageFilterProps,
+  ImageFilterProps,
   MorphologyImageFilterProps,
   OffsetImageFilterProps,
   RuntimeShaderImageFilterProps,
@@ -176,6 +177,15 @@ const declareRuntimeShaderImageFilter = (
   ctx.imageFilters.push(imgf);
 };
 
+const declareImageFilter = (
+  ctx: DrawingContext,
+  props: ImageFilterProps
+) => {
+  "worklet";
+  const { imageFilter } = props;
+  ctx.imageFilters.push(imageFilter);
+};
+
 export const composeImageFilters = (ctx: DrawingContext) => {
   "worklet";
   if (ctx.imageFilters.length > 1) {
@@ -207,6 +217,7 @@ export const isPushImageFilter = (
 };
 
 type Props = {
+  [NodeType.ImageFilter]: ImageFilterProps;
   [NodeType.OffsetImageFilter]: OffsetImageFilterProps;
   [NodeType.DisplacementMapImageFilter]: DisplacementMapImageFilterProps;
   [NodeType.BlurImageFilter]: BlurImageFilterProps;
@@ -235,7 +246,9 @@ export const pushImageFilter = (
   command: Command<CommandType.PushImageFilter>
 ) => {
   "worklet";
-  if (isImageFilter(command, NodeType.BlurImageFilter)) {
+  if (isImageFilter(command, NodeType.ImageFilter)) {
+    declareImageFilter(ctx, command.props);
+  } else if (isImageFilter(command, NodeType.BlurImageFilter)) {
     declareBlurImageFilter(ctx, command.props);
   } else if (isImageFilter(command, NodeType.MorphologyImageFilter)) {
     declareMorphologyImageFilter(ctx, command.props);