@shopify/react-native-skia 0.1.118 → 0.1.121

package/lib/module/renderer/processors/Paint.js

@@ -1,7 +1,8 @@
-import { BlendMode, PaintStyle, StrokeJoin, StrokeCap, processColor } from "../../skia";
+import { BlendMode, PaintStyle, StrokeJoin, StrokeCap, processColor, isShader, isMaskFilter, isColorFilter, isPathEffect, isImageFilter, Skia } from "../../skia";
 export const enumKey = k => k.charAt(0).toUpperCase() + k.slice(1);
-export const processPaint = (paint, currentOpacity, _ref) => {
+export const processPaint = (paint, currentOpacity, _ref, children) => {
   let {
+    paint: paintRef,
     color,
     blendMode,
     style,
@@ -12,6 +13,10 @@ export const processPaint = (paint, currentOpacity, _ref) => {
     opacity
   } = _ref;
 
+  if (paintRef && paintRef.current) {
+    return paintRef.current;
+  }
+
   if (color !== undefined) {
     const c = processColor(color, currentOpacity);
     paint.setShader(null);
@@ -48,28 +53,24 @@ export const processPaint = (paint, currentOpacity, _ref) => {
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
-};
-export const selectPaint = (currentPaint, _ref2) => {
-  var _paint$current;
 
-  let {
-    paint,
-    color: cl,
-    blendMode,
-    style: paintStyle,
-    strokeWidth,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity
-  } = _ref2;
-  const hasCustomPaint = cl !== undefined || blendMode !== undefined || paintStyle !== undefined || strokeWidth !== undefined || strokeJoin !== undefined || opacity !== undefined || strokeCap !== undefined || strokeMiter !== undefined;
-  const parentPaint = (_paint$current = paint === null || paint === void 0 ? void 0 : paint.current) !== null && _paint$current !== void 0 ? _paint$current : currentPaint;
+  children.forEach(child => {
+    if (isShader(child)) {
+      paint.setShader(child);
+    } else if (isMaskFilter(child)) {
+      paint.setMaskFilter(child);
+    } else if (isColorFilter(child)) {
+      paint.setColorFilter(child);
+    } else if (isPathEffect(child)) {
+      paint.setPathEffect(child);
+    }
+  });
+  const filters = children.filter(isImageFilter);
 
-  if (hasCustomPaint) {
-    return parentPaint.copy();
+  if (filters.length > 0) {
+    paint.setImageFilter(filters.reverse().reduce(Skia.ImageFilter.MakeCompose, null));
   }
 
-  return parentPaint;
+  return paint;
 };
 //# sourceMappingURL=Paint.js.map

package/lib/module/renderer/processors/Paint.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","undefined","c","setShader","setColor","getColor","setBlendMode","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","selectPaint","currentPaint","cl","paintStyle","hasCustomPaint","parentPaint","current","copy"],"mappings":"AAEA,SACEA,SADF,EAEEC,UAFF,EAGEC,UAHF,EAIEC,SAJF,EAKEC,YALF,QAMO,YANP;AA0BA,OAAO,MAAMC,OAAO,GAAsBC,CAAnB,IACpBA,CAAC,CAACC,MAAF,CAAS,CAAT,EAAYC,WAAZ,KAA4BF,CAAC,CAACG,KAAF,CAAQ,CAAR,CADxB;AAGP,OAAO,MAAMC,YAAY,GAAG,CAC1BC,KAD0B,EAE1BC,cAF0B,WAavB;AAAA,MAVH;AACEC,IAAAA,KADF;AAEEC,IAAAA,SAFF;AAGEC,IAAAA,KAHF;AAIEC,IAAAA,WAJF;AAKEC,IAAAA,UALF;AAMEC,IAAAA,SANF;AAOEC,IAAAA,WAPF;AAQEC,IAAAA;AARF,GAUG;;AACH,MAAIP,KAAK,KAAKQ,SAAd,EAAyB;AACvB,UAAMC,CAAC,GAAGlB,YAAY,CAACS,KAAD,EAAQD,cAAR,CAAtB;AACAD,IAAAA,KAAK,CAACY,SAAN,CAAgB,IAAhB;AACAZ,IAAAA,KAAK,CAACa,QAAN,CAAeF,CAAf;AACD,GAJD,MAIO;AACL,UAAMA,CAAC,GAAGlB,YAAY,CAACO,KAAK,CAACc,QAAN,EAAD,EAAmBb,cAAnB,CAAtB;AACAD,IAAAA,KAAK,CAACa,QAAN,CAAeF,CAAf;AACD;;AACD,MAAIR,SAAS,KAAKO,SAAlB,EAA6B;AAC3BV,IAAAA,KAAK,CAACe,YAAN,CAAmB1B,SAAS,CAACK,OAAO,CAACS,SAAD,CAAR,CAA5B;AACD;;AACD,MAAIC,KAAK,KAAKM,SAAd,EAAyB;AACvBV,IAAAA,KAAK,CAACgB,QAAN,CAAe1B,UAAU,CAACI,OAAO,CAACU,KAAD,CAAR,CAAzB;AACD;;AACD,MAAIE,UAAU,KAAKI,SAAnB,EAA8B;AAC5BV,IAAAA,KAAK,CAACiB,aAAN,CAAoB1B,UAAU,CAACG,OAAO,CAACY,UAAD,CAAR,CAA9B;AACD;;AACD,MAAIC,SAAS,KAAKG,SAAlB,EAA6B;AAC3BV,IAAAA,KAAK,CAACkB,YAAN,CAAmB1B,SAAS,CAACE,OAAO,CAACa,SAAD,CAAR,CAA5B;AACD;;AACD,MAAIC,WAAW,KAAKE,SAApB,EAA+B;AAC7BV,IAAAA,KAAK,CAACmB,cAAN,CAAqBX,WAArB;AACD;;AACD,MAAIH,WAAW,KAAKK,SAApB,EAA+B;AAC7BV,IAAAA,KAAK,CAACoB,cAAN,CAAqBf,WAArB;AACD;;AACD,MAAII,OAAO,KAAKC,SAAhB,EAA2B;AACzBV,IAAAA,KAAK,CAACqB,SAAN,CAAgBZ,OAAhB;AACD;AACF,CA3CM;AA6CP,OAAO,MAAMa,WAAW,GAAG,CACzBC,YADyB,YAatB;AAAA;;AAAA,MAXH;AACEvB,IAAAA,KADF;AAEEE,IAAAA,KAAK,EAAEsB,EAFT;AAGErB,IAAAA,SAHF;AAIEC,IAAAA,KAAK,EAAEqB,UAJT;AAKEpB,IAAAA,WALF;AAMEC,IAAAA,UANF;AAOEC,IAAAA,SAPF;AAQEC,IAAAA,WARF;AASEC,IAAAA;AATF,GAWG;AACH,QAAMiB,cAAc,GAClBF,EAAE,KAAKd,SAAP,IACAP,SAAS,KAAKO,SADd,IAEAe,UAAU,KAAKf,SAFf,IAGAL,WAAW,KAAKK,SAHhB,IAIAJ,UAAU,KAAKI,SAJf,IAKAD,OAAO,KAAKC,SALZ,IAMAH,SAAS,KAAKG,SANd,IAOAF,WAAW,KAAKE,SARlB;AASA,QAAMiB,WAAW,qBAAG3B,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAE4B,OAAV,2DAAqBL,YAAtC;;AACA,MAAIG,cAAJ,EAAoB;AAClB,WAAOC,WAAW,CAACE,IAAZ,EAAP;AACD;;AACD,SAAOF,WAAP;AACD,CA5BM","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\n\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeJoin,\n  StrokeCap,\n  processColor,\n} from \"../../skia\";\nimport type { SkPaint, Color } from \"../../skia\";\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\nexport interface CustomPaintProps extends ChildrenProps {\n  paint?: RefObject<SkPaint>;\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n}\n\nexport const enumKey = <K extends string>(k: K) =>\n  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;\n\nexport const processPaint = (\n  paint: SkPaint,\n  currentOpacity: number,\n  {\n    color,\n    blendMode,\n    style,\n    strokeWidth,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    opacity,\n  }: CustomPaintProps\n) => {\n  if (color !== undefined) {\n    const c = processColor(color, currentOpacity);\n    paint.setShader(null);\n    paint.setColor(c);\n  } else {\n    const c = processColor(paint.getColor(), currentOpacity);\n    paint.setColor(c);\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (opacity !== undefined) {\n    paint.setAlphaf(opacity);\n  }\n};\n\nexport const selectPaint = (\n  currentPaint: SkPaint,\n  {\n    paint,\n    color: cl,\n    blendMode,\n    style: paintStyle,\n    strokeWidth,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    opacity,\n  }: CustomPaintProps\n) => {\n  const hasCustomPaint =\n    cl !== undefined ||\n    blendMode !== undefined ||\n    paintStyle !== undefined ||\n    strokeWidth !== undefined ||\n    strokeJoin !== undefined ||\n    opacity !== undefined ||\n    strokeCap !== undefined ||\n    strokeMiter !== undefined;\n  const parentPaint = paint?.current ?? currentPaint;\n  if (hasCustomPaint) {\n    return parentPaint.copy();\n  }\n  return parentPaint;\n};\n"]}
+{"version":3,"sources":["Paint.ts"],"names":["BlendMode","PaintStyle","StrokeJoin","StrokeCap","processColor","isShader","isMaskFilter","isColorFilter","isPathEffect","isImageFilter","Skia","enumKey","k","charAt","toUpperCase","slice","processPaint","paint","currentOpacity","children","paintRef","color","blendMode","style","strokeWidth","strokeJoin","strokeCap","strokeMiter","opacity","current","undefined","c","setShader","setColor","getColor","setBlendMode","setStyle","setStrokeJoin","setStrokeCap","setStrokeMiter","setStrokeWidth","setAlphaf","forEach","child","setMaskFilter","setColorFilter","setPathEffect","filters","filter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":"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","sourcesContent":["import type { ReactNode, RefObject } from \"react\";\n\nimport {\n  BlendMode,\n  PaintStyle,\n  StrokeJoin,\n  StrokeCap,\n  processColor,\n  isShader,\n  isMaskFilter,\n  isColorFilter,\n  isPathEffect,\n  isImageFilter,\n  Skia,\n} from \"../../skia\";\nimport type { SkPaint, Color, SkImageFilter } from \"../../skia\";\nimport type { DeclarationResult } from \"../nodes\";\nexport type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;\n\nexport interface ChildrenProps {\n  children?: ReactNode | ReactNode[];\n}\n\n// TODO: rename to paint props?\nexport interface CustomPaintProps extends ChildrenProps {\n  paint?: RefObject<SkPaint>;\n  color?: Color;\n  strokeWidth?: number;\n  blendMode?: SkEnum<typeof BlendMode>;\n  style?: SkEnum<typeof PaintStyle>;\n  strokeJoin?: SkEnum<typeof StrokeJoin>;\n  strokeCap?: SkEnum<typeof StrokeCap>;\n  strokeMiter?: number;\n  opacity?: number;\n}\n\nexport const enumKey = <K extends string>(k: K) =>\n  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;\n\nexport const processPaint = (\n  paint: SkPaint,\n  currentOpacity: number,\n  {\n    paint: paintRef,\n    color,\n    blendMode,\n    style,\n    strokeWidth,\n    strokeJoin,\n    strokeCap,\n    strokeMiter,\n    opacity,\n  }: CustomPaintProps,\n  children: DeclarationResult[]\n) => {\n  if (paintRef && paintRef.current) {\n    return paintRef.current;\n  }\n  if (color !== undefined) {\n    const c = processColor(color, currentOpacity);\n    paint.setShader(null);\n    paint.setColor(c);\n  } else {\n    const c = processColor(paint.getColor(), currentOpacity);\n    paint.setColor(c);\n  }\n  if (blendMode !== undefined) {\n    paint.setBlendMode(BlendMode[enumKey(blendMode)]);\n  }\n  if (style !== undefined) {\n    paint.setStyle(PaintStyle[enumKey(style)]);\n  }\n  if (strokeJoin !== undefined) {\n    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);\n  }\n  if (strokeCap !== undefined) {\n    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);\n  }\n  if (strokeMiter !== undefined) {\n    paint.setStrokeMiter(strokeMiter);\n  }\n  if (strokeWidth !== undefined) {\n    paint.setStrokeWidth(strokeWidth);\n  }\n  if (opacity !== undefined) {\n    paint.setAlphaf(opacity);\n  }\n  children.forEach((child) => {\n    if (isShader(child)) {\n      paint.setShader(child);\n    } else if (isMaskFilter(child)) {\n      paint.setMaskFilter(child);\n    } else if (isColorFilter(child)) {\n      paint.setColorFilter(child);\n    } else if (isPathEffect(child)) {\n      paint.setPathEffect(child);\n    }\n  });\n  const filters = children.filter(isImageFilter);\n  if (filters.length > 0) {\n    paint.setImageFilter(\n      filters\n        .reverse()\n        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)\n    );\n  }\n  return paint;\n};\n"]}

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -18,4 +18,4 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     onTouch?: TouchHandler;
     fontMgr?: FontMgr;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "children" | "style" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch" | "fontMgr"> & React.RefAttributes<SkiaView>>;

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

@@ -14,5 +14,4 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
-export * from "./Defs";
 export * from "./Drawing";

package/lib/typescript/src/renderer/nodes/Declaration.d.ts

@@ -8,6 +8,7 @@ export declare type DeclarationResult = SkJSIInstance<string> | null;
 declare type DeclarationCallback<T> = (props: T, children: DeclarationResult[], ctx: DrawingContext) => DeclarationResult;
 export declare const createDeclaration: <T>(cb: DeclarationCallback<T>) => DeclarationCallback<T>;
 export declare const useDeclaration: <P>(cb: DeclarationCallback<P>, deps?: DependencyList | undefined) => DeclarationCallback<P>;
+export declare const isDeclarationNode: (node: Node) => node is DeclarationNode<unknown>;
 export interface DeclarationProps<P> {
     onDeclare: DeclarationCallback<P>;
 }

package/lib/typescript/src/renderer/nodes/Node.d.ts

@@ -11,13 +11,13 @@ export declare abstract class Node<P = unknown> {
     readonly children: Node[];
     _props: AnimatedProps<P>;
     memoizable: boolean;
-    memoized: boolean;
+    memoized: DeclarationResult | null;
     parent?: Node;
     depMgr: DependencyManager;
     constructor(depMgr: DependencyManager, props: AnimatedProps<P>);
     abstract draw(ctx: DrawingContext): void | DeclarationResult;
     set props(props: AnimatedProps<P>);
     get props(): AnimatedProps<P>;
-    visit(ctx: DrawingContext): SkJSIInstance<string>[];
+    visit(ctx: DrawingContext, children?: Node[]): SkJSIInstance<string>[];
 }
 export {};

package/lib/typescript/src/renderer/processors/Paint.d.ts

@@ -1,6 +1,7 @@
 import type { ReactNode, RefObject } from "react";
 import { BlendMode, PaintStyle, StrokeJoin, StrokeCap } from "../../skia";
 import type { SkPaint, Color } from "../../skia";
+import type { DeclarationResult } from "../nodes";
 export declare type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 export interface ChildrenProps {
     children?: ReactNode | ReactNode[];
@@ -17,5 +18,4 @@ export interface CustomPaintProps extends ChildrenProps {
     opacity?: number;
 }
 export declare const enumKey: <K extends string>(k: K) => Capitalize<K>;
-export declare const processPaint: (paint: SkPaint, currentOpacity: number, { color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) => void;
-export declare const selectPaint: (currentPaint: SkPaint, { paint, color: cl, blendMode, style: paintStyle, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps) => SkPaint;
+export declare const processPaint: (paint: SkPaint, currentOpacity: number, { paint: paintRef, color, blendMode, style, strokeWidth, strokeJoin, strokeCap, strokeMiter, opacity, }: CustomPaintProps, children: DeclarationResult[]) => SkPaint;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "React Native Skia",
-  "version": "0.1.118",
+  "version": "0.1.121",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/renderer/HostConfig.ts

@@ -69,7 +69,7 @@ const bustBranchMemoization = (parent: Node) => {
   if (parent.memoizable) {
     let ancestor: Node | undefined = parent;
     while (ancestor) {
-      ancestor.memoized = false;
+      ancestor.memoized = null;
       ancestor = ancestor.parent;
     }
   }

package/src/renderer/components/Group.tsx

@@ -3,19 +3,15 @@ import type { RefObject } from "react";
 
 import type { SkPaint } from "../../skia";
 import { ClipOp } from "../../skia";
-import {
-  processTransform,
-  selectPaint,
-  processPaint,
-  processClip,
-} from "../processors";
+import { processTransform, processPaint, processClip } from "../processors";
 import type {
   CustomPaintProps,
   TransformProps,
   AnimatedProps,
   ClipDef,
 } from "../processors";
-import { createDrawing } from "../nodes";
+import { createDrawing, DrawingNode } from "../nodes";
+import { isDeclarationNode } from "../nodes/Declaration";
 
 const isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>
   "__typename__" in obj && obj.__typename__ === "Paint";
@@ -29,8 +25,19 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
 const onDraw = createDrawing<GroupProps>(
   (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
     const { canvas, opacity } = ctx;
-    const paint = selectPaint(ctx.paint, groupProps);
-    processPaint(paint, opacity, groupProps);
+    const declarations = node.children
+      .filter(isDeclarationNode)
+      .map((child) => child.draw(ctx));
+
+    const drawings = node.children.filter(
+      (child) => child instanceof DrawingNode
+    );
+    const paint = processPaint(
+      ctx.paint.copy(),
+      opacity,
+      groupProps,
+      declarations
+    );
     const hasTransform = !!groupProps.transform || !!groupProps.matrix;
     const hasClip = !!clip;
     const shouldSave = hasTransform || hasClip || !!layer;
@@ -52,11 +59,14 @@ const onDraw = createDrawing<GroupProps>(
         processClip(canvas, clip, op);
       }
     }
-    node.visit({
-      ...ctx,
-      paint,
-      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
-    });
+    node.visit(
+      {
+        ...ctx,
+        paint,
+        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,
+      },
+      drawings
+    );
     if (shouldSave) {
       canvas.restore();
     }

package/src/renderer/components/Paint.tsx

@@ -1,15 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
-import type { SkPaint, SkImageFilter } from "../../skia";
-import {
-  isShader,
-  isMaskFilter,
-  isColorFilter,
-  Skia,
-  isImageFilter,
-  isPathEffect,
-} from "../../skia";
+import type { SkPaint } from "../../skia";
+import { Skia } from "../../skia";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
@@ -26,32 +19,9 @@ export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>
-        createDeclaration<PaintProps>((paintProps, children, ctx) => {
-          processPaint(paint, ctx.opacity, paintProps);
-          children.forEach((child) => {
-            if (isShader(child)) {
-              paint.setShader(child);
-            } else if (isMaskFilter(child)) {
-              paint.setMaskFilter(child);
-            } else if (isColorFilter(child)) {
-              paint.setColorFilter(child);
-            } else if (isPathEffect(child)) {
-              paint.setPathEffect(child);
-            }
-          });
-          const filters = children.filter(isImageFilter);
-          if (filters.length > 0) {
-            paint.setImageFilter(
-              filters
-                .reverse()
-                .reduce<SkImageFilter | null>(
-                  Skia.ImageFilter.MakeCompose,
-                  null
-                )
-            );
-          }
-          return paint;
-        }),
+        createDeclaration<PaintProps>((paintProps, children, ctx) =>
+          processPaint(paint, ctx.opacity, paintProps, children)
+        ),
       [paint]
     );
     return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/index.ts

@@ -15,5 +15,4 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
-export * from "./Defs";
 export * from "./Drawing";

package/src/renderer/nodes/Declaration.tsx

@@ -28,6 +28,10 @@ export const useDeclaration = <P,>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
+export const isDeclarationNode = (
+  node: Node
+): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
 }

package/src/renderer/nodes/Drawing.tsx

@@ -2,7 +2,7 @@ import type { DependencyList, ReactNode } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import { processPaint, selectPaint } from "../processors";
+import { processPaint } from "../processors";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia";
@@ -51,25 +51,15 @@ export class DrawingNode<P> extends Node<P> {
     if (this.skipProcessing) {
       this.onDraw(ctx, drawingProps, this);
     } else {
-      const selectedPaint = selectPaint(ctx.paint, drawingProps);
-      processPaint(selectedPaint, ctx.opacity, drawingProps);
-      // to draw only once:
-      // onDraw({ ...ctx, paint: selectedPaint }, children);
-      [
-        selectedPaint,
-        ...this.children
-          .map((child) => {
-            //if (child.type === NodeType.Declaration) {
-            const ret = child.draw(ctx);
-            if (ret) {
-              return ret;
-            }
-            //}
-            return null;
-          })
-          .filter(isPaint),
-      ].forEach((paint) => {
-        this.onDraw({ ...ctx, paint }, drawingProps, this);
+      const declarations = this.visit(ctx);
+      const paint = processPaint(
+        ctx.paint.copy(),
+        ctx.opacity,
+        drawingProps,
+        declarations
+      );
+      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
+        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);
       });
     }
   }

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,3 @@
-import { isPaint } from "../../skia";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
@@ -15,7 +14,7 @@ export abstract class Node<P = unknown> {
   readonly children: Node[] = [];
   _props: AnimatedProps<P>;
   memoizable = false;
-  memoized = false;
+  memoized: DeclarationResult | null = null;
   parent?: Node;
   depMgr: DependencyManager;
 
@@ -38,21 +37,19 @@ export abstract class Node<P = unknown> {
     return this._props;
   }
 
-  visit(ctx: DrawingContext) {
+  visit(ctx: DrawingContext, children?: Node[]) {
     const returnedValues: Exclude<DeclarationResult, null>[] = [];
-    let currentCtx = ctx;
-    this.children.forEach((child) => {
+    (children ?? this.children).forEach((child) => {
       if (!child.memoized) {
-        const ret = child.draw(currentCtx);
+        const ret = child.draw(ctx);
         if (ret) {
-          if (isPaint(ret)) {
-            currentCtx = { ...currentCtx, paint: ret };
-          }
           returnedValues.push(ret);
+          if (child.memoizable) {
+            child.memoized = ret;
+          }
         }
-        if (child.memoizable) {
-          child.memoized = true;
-        }
+      } else {
+        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/src/renderer/processors/Paint.ts

@@ -6,14 +6,22 @@ import {
   StrokeJoin,
   StrokeCap,
   processColor,
+  isShader,
+  isMaskFilter,
+  isColorFilter,
+  isPathEffect,
+  isImageFilter,
+  Skia,
 } from "../../skia";
-import type { SkPaint, Color } from "../../skia";
+import type { SkPaint, Color, SkImageFilter } from "../../skia";
+import type { DeclarationResult } from "../nodes";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export interface ChildrenProps {
   children?: ReactNode | ReactNode[];
 }
 
+// TODO: rename to paint props?
 export interface CustomPaintProps extends ChildrenProps {
   paint?: RefObject<SkPaint>;
   color?: Color;
@@ -33,6 +41,7 @@ export const processPaint = (
   paint: SkPaint,
   currentOpacity: number,
   {
+    paint: paintRef,
     color,
     blendMode,
     style,
@@ -41,8 +50,12 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
-  }: CustomPaintProps
+  }: CustomPaintProps,
+  children: DeclarationResult[]
 ) => {
+  if (paintRef && paintRef.current) {
+    return paintRef.current;
+  }
   if (color !== undefined) {
     const c = processColor(color, currentOpacity);
     paint.setShader(null);
@@ -72,34 +85,24 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
-};
-
-export const selectPaint = (
-  currentPaint: SkPaint,
-  {
-    paint,
-    color: cl,
-    blendMode,
-    style: paintStyle,
-    strokeWidth,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity,
-  }: CustomPaintProps
-) => {
-  const hasCustomPaint =
-    cl !== undefined ||
-    blendMode !== undefined ||
-    paintStyle !== undefined ||
-    strokeWidth !== undefined ||
-    strokeJoin !== undefined ||
-    opacity !== undefined ||
-    strokeCap !== undefined ||
-    strokeMiter !== undefined;
-  const parentPaint = paint?.current ?? currentPaint;
-  if (hasCustomPaint) {
-    return parentPaint.copy();
+  children.forEach((child) => {
+    if (isShader(child)) {
+      paint.setShader(child);
+    } else if (isMaskFilter(child)) {
+      paint.setMaskFilter(child);
+    } else if (isColorFilter(child)) {
+      paint.setColorFilter(child);
+    } else if (isPathEffect(child)) {
+      paint.setPathEffect(child);
+    }
+  });
+  const filters = children.filter(isImageFilter);
+  if (filters.length > 0) {
+    paint.setImageFilter(
+      filters
+        .reverse()
+        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
+    );
   }
-  return parentPaint;
+  return paint;
 };

package/lib/commonjs/renderer/components/Defs.js

@@ -1,30 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Defs = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _nodes = require("../nodes");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-const onDeclare = (0, _nodes.createDeclaration)(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-
-const Defs = props => {
-  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
-  }, props));
-};
-
-exports.Defs = Defs;
-//# sourceMappingURL=Defs.js.map

package/lib/commonjs/renderer/components/Defs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Defs.tsx"],"names":["onDeclare","Defs","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;;;AAMA,MAAMA,SAAS,GAAG,8BAAkB,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALiB,CAAlB;;AAOO,MAAMC,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n  // Do nothing.\n  // The goal of this component is to avoid declared paint from\n  // being used in the drawing context automatically\n  return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/module/renderer/components/Defs.js

@@ -1,16 +0,0 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from "react";
-import { createDeclaration } from "../nodes";
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-export const Defs = props => {
-  return /*#__PURE__*/React.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
-  }, props));
-};
-//# sourceMappingURL=Defs.js.map

package/lib/module/renderer/components/Defs.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["Defs.tsx"],"names":["React","createDeclaration","onDeclare","Defs","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,iBAAT,QAAkC,UAAlC;AAMA,MAAMC,SAAS,GAAGD,iBAAiB,CAAC,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALkC,CAAnC;AAOA,OAAO,MAAME,IAAI,GAAIC,KAAD,IAAsB;AACxC,sBAAO;AAAe,IAAA,SAAS,EAAEF;AAA1B,KAAyCE,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { createDeclaration } from \"../nodes\";\n\nexport interface DefsProps {\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration(() => {\n  // Do nothing.\n  // The goal of this component is to avoid declared paint from\n  // being used in the drawing context automatically\n  return null;\n});\n\nexport const Defs = (props: DefsProps) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

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

@@ -1,5 +0,0 @@
-import type { ReactNode } from "react";
-export interface DefsProps {
-    children: ReactNode | ReactNode[];
-}
-export declare const Defs: (props: DefsProps) => JSX.Element;

package/src/renderer/components/Defs.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-
-import { createDeclaration } from "../nodes";
-
-export interface DefsProps {
-  children: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-
-export const Defs = (props: DefsProps) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};