@shopify/react-native-skia 0.1.118 → 0.1.119

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

@@ -2,8 +2,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import { ClipOp } from "../../skia";
-import { processTransform, selectPaint, processPaint, processClip } from "../processors";
-import { createDrawing } from "../nodes";
+import { processTransform, processPaint, processClip } from "../processors";
+import { createDrawing, DrawingNode } from "../nodes";
+import { isDeclarationNode } from "../nodes/Declaration";
 
 const isSkPaint = obj => "__typename__" in obj && obj.__typename__ === "Paint";
 
@@ -18,8 +19,9 @@ const onDraw = createDrawing((ctx, _ref, node) => {
     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;
@@ -50,7 +52,7 @@ const onDraw = createDrawing((ctx, _ref, node) => {
   node.visit({ ...ctx,
     paint,
     opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
-  });
+  }, drawings);
 
   if (shouldSave) {
     canvas.restore();

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","selectPaint","processPaint","processClip","createDrawing","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,YAAvB;AACA,SACEC,gBADF,EAEEC,WAFF,EAGEC,YAHF,EAIEC,WAJF,QAKO,eALP;AAYA,SAASC,aAAT,QAA8B,UAA9B;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGJ,aAAa,CAC1B,CAACK,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAsBP,GAA5B;AACA,QAAMQ,KAAK,GAAGhB,WAAW,CAACQ,GAAG,CAACQ,KAAL,EAAYH,UAAZ,CAAzB;AACAZ,EAAAA,YAAY,CAACe,KAAD,EAAQD,OAAR,EAAiBF,UAAjB,CAAZ;AACA,QAAMI,YAAY,GAAG,CAAC,CAACJ,UAAU,CAACK,SAAb,IAA0B,CAAC,CAACL,UAAU,CAACM,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACT,IAAlB;AACA,QAAMU,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAACV,KAAhD;;AACA,MAAIW,UAAJ,EAAgB;AACd,QAAIX,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACQ,SAAP;AACD,OAFD,MAEO,IAAIlB,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACQ,SAAP,CAAiBZ,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACQ,SAAP,mBAAiBZ,KAAK,CAACa,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLV,MAAAA,MAAM,CAACW,IAAP;AACD;;AACD1B,IAAAA,gBAAgB,CAACS,GAAD,EAAMK,UAAN,CAAhB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMe,EAAE,GAAGd,UAAU,GAAGd,MAAM,CAAC6B,UAAV,GAAuB7B,MAAM,CAAC8B,SAAnD;AACA1B,MAAAA,WAAW,CAACY,MAAD,EAASH,IAAT,EAAee,EAAf,CAAX;AACD;AACF;;AACDjB,EAAAA,IAAI,CAACoB,KAAL,CAAW,EACT,GAAGrB,GADM;AAETQ,IAAAA,KAFS;AAGTD,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAHpD,GAAX;;AAKA,MAAIM,UAAJ,EAAgB;AACdP,IAAAA,MAAM,CAACgB,OAAP;AACD;AACF,CAlCyB,CAA5B;AAqCA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAEzB;AAAnB,KAA+ByB,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { ClipOp } from \"../../skia\";\nimport {\n  processTransform,\n  selectPaint,\n  processPaint,\n  processClip,\n} from \"../processors\";\nimport type {\n  CustomPaintProps,\n  TransformProps,\n  AnimatedProps,\n  ClipDef,\n} from \"../processors\";\nimport { createDrawing } from \"../nodes\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n  \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n    const { canvas, opacity } = ctx;\n    const paint = selectPaint(ctx.paint, groupProps);\n    processPaint(paint, opacity, groupProps);\n    const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n    const hasClip = !!clip;\n    const shouldSave = hasTransform || hasClip || !!layer;\n    if (shouldSave) {\n      if (layer) {\n        if (typeof layer === \"boolean\") {\n          canvas.saveLayer();\n        } else if (isSkPaint(layer)) {\n          canvas.saveLayer(layer);\n        } else {\n          canvas.saveLayer(layer.current ?? undefined);\n        }\n      } else {\n        canvas.save();\n      }\n      processTransform(ctx, groupProps);\n      if (clip) {\n        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n        processClip(canvas, clip, op);\n      }\n    }\n    node.visit({\n      ...ctx,\n      paint,\n      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n    });\n    if (shouldSave) {\n      canvas.restore();\n    }\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["React","ClipOp","processTransform","processPaint","processClip","createDrawing","DrawingNode","isDeclarationNode","isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","declarations","children","filter","map","child","draw","drawings","paint","copy","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","Difference","Intersect","visit","restore","Group","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAIA,SAASC,MAAT,QAAuB,YAAvB;AACA,SAASC,gBAAT,EAA2BC,YAA3B,EAAyCC,WAAzC,QAA4D,eAA5D;AAOA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,UAA3C;AACA,SAASC,iBAAT,QAAkC,sBAAlC;;AAEA,MAAMC,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAGN,aAAa,CAC1B,CAACO,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAsBP,GAA5B;AACA,QAAMQ,YAAY,GAAGP,IAAI,CAACQ,QAAL,CAClBC,MADkB,CACXf,iBADW,EAElBgB,GAFkB,CAEbC,KAAD,IAAWA,KAAK,CAACC,IAAN,CAAWb,GAAX,CAFG,CAArB;AAIA,QAAMc,QAAQ,GAAGb,IAAI,CAACQ,QAAL,CAAcC,MAAd,CACdE,KAAD,IAAWA,KAAK,YAAYlB,WADb,CAAjB;AAGA,QAAMqB,KAAK,GAAGxB,YAAY,CACxBS,GAAG,CAACe,KAAJ,CAAUC,IAAV,EADwB,EAExBT,OAFwB,EAGxBF,UAHwB,EAIxBG,YAJwB,CAA1B;AAMA,QAAMS,YAAY,GAAG,CAAC,CAACZ,UAAU,CAACa,SAAb,IAA0B,CAAC,CAACb,UAAU,CAACc,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACjB,IAAlB;AACA,QAAMkB,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAAClB,KAAhD;;AACA,MAAImB,UAAJ,EAAgB;AACd,QAAInB,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACgB,SAAP;AACD,OAFD,MAEO,IAAI1B,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACgB,SAAP,CAAiBpB,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACgB,SAAP,mBAAiBpB,KAAK,CAACqB,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLlB,MAAAA,MAAM,CAACmB,IAAP;AACD;;AACDnC,IAAAA,gBAAgB,CAACU,GAAD,EAAMK,UAAN,CAAhB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMuB,EAAE,GAAGtB,UAAU,GAAGf,MAAM,CAACsC,UAAV,GAAuBtC,MAAM,CAACuC,SAAnD;AACApC,MAAAA,WAAW,CAACc,MAAD,EAASH,IAAT,EAAeuB,EAAf,CAAX;AACD;AACF;;AACDzB,EAAAA,IAAI,CAAC4B,KAAL,CACE,EACE,GAAG7B,GADL;AAEEe,IAAAA,KAFF;AAGER,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAH/D,GADF,EAMEO,QANF;;AAQA,MAAIO,UAAJ,EAAgB;AACdf,IAAAA,MAAM,CAACwB,OAAP;AACD;AACF,CAhDyB,CAA5B;AAmDA,OAAO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAEjC;AAAnB,KAA+BiC,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { ClipOp } from \"../../skia\";\nimport { processTransform, processPaint, processClip } from \"../processors\";\nimport type {\n  CustomPaintProps,\n  TransformProps,\n  AnimatedProps,\n  ClipDef,\n} from \"../processors\";\nimport { createDrawing, DrawingNode } from \"../nodes\";\nimport { isDeclarationNode } from \"../nodes/Declaration\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n  \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n    const { canvas, opacity } = ctx;\n    const declarations = node.children\n      .filter(isDeclarationNode)\n      .map((child) => child.draw(ctx));\n\n    const drawings = node.children.filter(\n      (child) => child instanceof DrawingNode\n    );\n    const paint = processPaint(\n      ctx.paint.copy(),\n      opacity,\n      groupProps,\n      declarations\n    );\n    const hasTransform = !!groupProps.transform || !!groupProps.matrix;\n    const hasClip = !!clip;\n    const shouldSave = hasTransform || hasClip || !!layer;\n    if (shouldSave) {\n      if (layer) {\n        if (typeof layer === \"boolean\") {\n          canvas.saveLayer();\n        } else if (isSkPaint(layer)) {\n          canvas.saveLayer(layer);\n        } else {\n          canvas.saveLayer(layer.current ?? undefined);\n        }\n      } else {\n        canvas.save();\n      }\n      processTransform(ctx, groupProps);\n      if (clip) {\n        const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n        processClip(canvas, clip, op);\n      }\n    }\n    node.visit(\n      {\n        ...ctx,\n        paint,\n        opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n      },\n      drawings\n    );\n    if (shouldSave) {\n      canvas.restore();\n    }\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}

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

@@ -1,34 +1,14 @@
 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, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
-import { isShader, isMaskFilter, isColorFilter, Skia, isImageFilter, isPathEffect } from "../../skia";
+import { Skia } from "../../skia";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
 export const usePaintRef = () => useRef(null);
 export const Paint = /*#__PURE__*/forwardRef((props, ref) => {
   const paint = useMemo(() => Skia.Paint(), []);
   useImperativeHandle(ref, () => paint, [paint]);
-  const onDeclare = useMemo(() => createDeclaration((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(Skia.ImageFilter.MakeCompose, null));
-    }
-
-    return paint;
-  }), [paint]);
+  const onDeclare = useMemo(() => createDeclaration((paintProps, children, ctx) => processPaint(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/React.createElement("skDeclaration", _extends({
     onDeclare: onDeclare
   }, props));

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

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","isShader","isMaskFilter","isColorFilter","Skia","isImageFilter","isPathEffect","processPaint","createDeclaration","usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity","forEach","child","setShader","setMaskFilter","setColorFilter","setPathEffect","filters","filter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":";;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,OAAxB,EAAiCC,UAAjC,EAA6CC,mBAA7C,QAAwE,OAAxE;AAGA,SACEC,QADF,EAEEC,YAFF,EAGEC,aAHF,EAIEC,IAJF,EAKEC,aALF,EAMEC,YANF,QAOO,YAPP;AASA,SAASC,YAAT,QAA6B,eAA7B;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAO,MAAMC,WAAW,GAAG,MAAMZ,MAAM,CAAU,IAAV,CAAhC;AAMP,OAAO,MAAMa,KAAK,gBAAGX,UAAU,CAC7B,CAACY,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAGf,OAAO,CAAC,MAAMM,IAAI,CAACM,KAAL,EAAP,EAAqB,EAArB,CAArB;AACAV,EAAAA,mBAAmB,CAACY,GAAD,EAAM,MAAMC,KAAZ,EAAmB,CAACA,KAAD,CAAnB,CAAnB;AACA,QAAMC,SAAS,GAAGhB,OAAO,CACvB,MACEU,iBAAiB,CAAa,CAACO,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAA+B;AAC3DV,IAAAA,YAAY,CAACM,KAAD,EAAQI,GAAG,CAACC,OAAZ,EAAqBH,UAArB,CAAZ;AACAC,IAAAA,QAAQ,CAACG,OAAT,CAAkBC,KAAD,IAAW;AAC1B,UAAInB,QAAQ,CAACmB,KAAD,CAAZ,EAAqB;AACnBP,QAAAA,KAAK,CAACQ,SAAN,CAAgBD,KAAhB;AACD,OAFD,MAEO,IAAIlB,YAAY,CAACkB,KAAD,CAAhB,EAAyB;AAC9BP,QAAAA,KAAK,CAACS,aAAN,CAAoBF,KAApB;AACD,OAFM,MAEA,IAAIjB,aAAa,CAACiB,KAAD,CAAjB,EAA0B;AAC/BP,QAAAA,KAAK,CAACU,cAAN,CAAqBH,KAArB;AACD,OAFM,MAEA,IAAId,YAAY,CAACc,KAAD,CAAhB,EAAyB;AAC9BP,QAAAA,KAAK,CAACW,aAAN,CAAoBJ,KAApB;AACD;AACF,KAVD;AAWA,UAAMK,OAAO,GAAGT,QAAQ,CAACU,MAAT,CAAgBrB,aAAhB,CAAhB;;AACA,QAAIoB,OAAO,CAACE,MAAR,GAAiB,CAArB,EAAwB;AACtBd,MAAAA,KAAK,CAACe,cAAN,CACEH,OAAO,CACJI,OADH,GAEGC,MAFH,CAGI1B,IAAI,CAAC2B,WAAL,CAAiBC,WAHrB,EAII,IAJJ,CADF;AAQD;;AACD,WAAOnB,KAAP;AACD,GAzBgB,CAFI,EA4BvB,CAACA,KAAD,CA5BuB,CAAzB;AA8BA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAnC4B,CAAxB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint, SkImageFilter } from \"../../skia\";\nimport {\n  isShader,\n  isMaskFilter,\n  isColorFilter,\n  Skia,\n  isImageFilter,\n  isPathEffect,\n} from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) => {\n          processPaint(paint, ctx.opacity, paintProps);\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>(\n                  Skia.ImageFilter.MakeCompose,\n                  null\n                )\n            );\n          }\n          return paint;\n        }),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}
+{"version":3,"sources":["Paint.tsx"],"names":["React","useRef","useMemo","forwardRef","useImperativeHandle","Skia","processPaint","createDeclaration","usePaintRef","Paint","props","ref","paint","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;AACA,OAAOA,KAAP,IAAgBC,MAAhB,EAAwBC,OAAxB,EAAiCC,UAAjC,EAA6CC,mBAA7C,QAAwE,OAAxE;AAGA,SAASC,IAAT,QAAqB,YAArB;AAEA,SAASC,YAAT,QAA6B,eAA7B;AACA,SAASC,iBAAT,QAAkC,UAAlC;AAEA,OAAO,MAAMC,WAAW,GAAG,MAAMP,MAAM,CAAU,IAAV,CAAhC;AAMP,OAAO,MAAMQ,KAAK,gBAAGN,UAAU,CAC7B,CAACO,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAGV,OAAO,CAAC,MAAMG,IAAI,CAACI,KAAL,EAAP,EAAqB,EAArB,CAArB;AACAL,EAAAA,mBAAmB,CAACO,GAAD,EAAM,MAAMC,KAAZ,EAAmB,CAACA,KAAD,CAAnB,CAAnB;AACA,QAAMC,SAAS,GAAGX,OAAO,CACvB,MACEK,iBAAiB,CAAa,CAACO,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5BV,YAAY,CAACM,KAAD,EAAQI,GAAG,CAACC,OAAZ,EAAqBH,UAArB,EAAiCC,QAAjC,CADG,CAFI,EAKvB,CAACH,KAAD,CALuB,CAAzB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEC;AAA1B,KAAyCH,KAAzC,EAAP;AACD,CAZ4B,CAAxB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { Skia } from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) =>\n          processPaint(paint, ctx.opacity, paintProps, children)\n        ),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}

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

@@ -14,6 +14,5 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
-export * from "./Defs";
 export * from "./Drawing";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,QAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd;AAEA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd","sourcesContent":["export * from \"./shapes\";\nexport * from \"./backdrop\";\nexport * from \"./image\";\nexport * from \"./shaders\";\nexport * from \"./text\";\nexport * from \"./colorFilters\";\nexport * from \"./maskFilters\";\nexport * from \"./imageFilters\";\nexport * from \"./pathEffects\";\nexport * from \"../processors\";\nexport * from \"./Picture\";\n\nexport * from \"./Group\";\nexport * from \"./Mask\";\nexport * from \"./Paint\";\nexport * from \"./Compose\";\nexport * from \"./Blend\";\nexport * from \"./Defs\";\nexport * from \"./Drawing\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,YAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,QAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,gBAAd;AACA,cAAc,eAAd;AACA,cAAc,eAAd;AACA,cAAc,WAAd;AAEA,cAAc,SAAd;AACA,cAAc,QAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd","sourcesContent":["export * from \"./shapes\";\nexport * from \"./backdrop\";\nexport * from \"./image\";\nexport * from \"./shaders\";\nexport * from \"./text\";\nexport * from \"./colorFilters\";\nexport * from \"./maskFilters\";\nexport * from \"./imageFilters\";\nexport * from \"./pathEffects\";\nexport * from \"../processors\";\nexport * from \"./Picture\";\n\nexport * from \"./Group\";\nexport * from \"./Mask\";\nexport * from \"./Paint\";\nexport * from \"./Compose\";\nexport * from \"./Blend\";\nexport * from \"./Drawing\";\n"]}

package/lib/module/renderer/nodes/Declaration.js

@@ -6,6 +6,7 @@ import { Node } from "./Node";
 export const createDeclaration = cb => cb;
 export const useDeclaration = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
 useCallback(cb, deps !== null && deps !== void 0 ? deps : []);
+export const isDeclarationNode = node => node instanceof DeclarationNode;
 export class DeclarationNode extends Node {
   constructor(depMgr, onDeclare, props) {
     super(depMgr, props);

package/lib/module/renderer/nodes/Declaration.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","materialize","Node","createDeclaration","cb","useDeclaration","deps","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAKA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,eAAxC;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;AAWP,OAAO,MAAMC,eAAN,SAAiCL,IAAjC,CAAyC;AAG9CM,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAACZ,UAAU,CAACW,KAAD,CAA9B;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAACZ,UAAU,CAACW,KAAD,CAA7B;AACA,UAAMA,KAAN,GAAcA,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKE,MAAZ;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,QAAQ,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAAjB;AACA,UAAMJ,KAAK,GAAGV,WAAW,CAAC,KAAKU,KAAN,CAAzB;AACA,UAAMO,GAAG,GAAG,KAAKR,SAAL,CAAeC,KAAf,EAAsBK,QAAtB,EAAgCD,GAAhC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA3B6C","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { AnimatedProps } from \"../processors\";\nimport { isAnimated, materialize } from \"../processors\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\nexport type DeclarationResult = SkJSIInstance<string> | null;\n\ntype DeclarationCallback<T> = (\n  props: T,\n  children: DeclarationResult[],\n  ctx: DrawingContext\n) => DeclarationResult;\n\nexport const createDeclaration = <T,>(\n  cb: DeclarationCallback<T>\n): DeclarationCallback<T> => cb;\n\nexport const useDeclaration = <P,>(\n  cb: DeclarationCallback<P>,\n  deps?: DependencyList\n) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport interface DeclarationProps<P> {\n  onDeclare: DeclarationCallback<P>;\n}\n\nexport class DeclarationNode<P> extends Node<P> {\n  private onDeclare: DeclarationCallback<P>;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDeclare: DeclarationCallback<P>,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    super.memoizable = !isAnimated(props);\n    this.onDeclare = onDeclare;\n  }\n\n  set props(props: AnimatedProps<P>) {\n    this.memoizable = !isAnimated(props);\n    super.props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  draw(ctx: DrawingContext) {\n    const children = this.visit(ctx);\n    const props = materialize(this.props);\n    const obj = this.onDeclare(props, children, ctx);\n    return obj;\n  }\n}\n"]}
+{"version":3,"sources":["Declaration.tsx"],"names":["useCallback","isAnimated","materialize","Node","createDeclaration","cb","useDeclaration","deps","isDeclarationNode","node","DeclarationNode","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAKA,SAASC,UAAT,EAAqBC,WAArB,QAAwC,eAAxC;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;AAIP,OAAO,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACAP,WAAW,CAACK,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CALN;AAOP,OAAO,MAAMC,iBAAiB,GAC5BC,IAD+B,IAEMA,IAAI,YAAYC,eAFhD;AAQP,OAAO,MAAMA,eAAN,SAAiCP,IAAjC,CAAyC;AAG9CQ,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAACd,UAAU,CAACa,KAAD,CAA9B;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAACd,UAAU,CAACa,KAAD,CAA7B;AACA,UAAMA,KAAN,GAAcA,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKE,MAAZ;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,QAAQ,GAAG,KAAKC,KAAL,CAAWF,GAAX,CAAjB;AACA,UAAMJ,KAAK,GAAGZ,WAAW,CAAC,KAAKY,KAAN,CAAzB;AACA,UAAMO,GAAG,GAAG,KAAKR,SAAL,CAAeC,KAAf,EAAsBK,QAAtB,EAAgCD,GAAhC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA3B6C","sourcesContent":["import type { DependencyList } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { AnimatedProps } from \"../processors\";\nimport { isAnimated, materialize } from \"../processors\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\nexport type DeclarationResult = SkJSIInstance<string> | null;\n\ntype DeclarationCallback<T> = (\n  props: T,\n  children: DeclarationResult[],\n  ctx: DrawingContext\n) => DeclarationResult;\n\nexport const createDeclaration = <T,>(\n  cb: DeclarationCallback<T>\n): DeclarationCallback<T> => cb;\n\nexport const useDeclaration = <P,>(\n  cb: DeclarationCallback<P>,\n  deps?: DependencyList\n) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport const isDeclarationNode = (\n  node: Node\n): node is DeclarationNode<unknown> => node instanceof DeclarationNode;\n\nexport interface DeclarationProps<P> {\n  onDeclare: DeclarationCallback<P>;\n}\n\nexport class DeclarationNode<P> extends Node<P> {\n  private onDeclare: DeclarationCallback<P>;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDeclare: DeclarationCallback<P>,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    super.memoizable = !isAnimated(props);\n    this.onDeclare = onDeclare;\n  }\n\n  set props(props: AnimatedProps<P>) {\n    this.memoizable = !isAnimated(props);\n    super.props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  draw(ctx: DrawingContext) {\n    const children = this.visit(ctx);\n    const props = materialize(this.props);\n    const obj = this.onDeclare(props, children, ctx);\n    return obj;\n  }\n}\n"]}

package/lib/module/renderer/nodes/Drawing.js

@@ -1,7 +1,7 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import { useCallback } from "react";
-import { processPaint, selectPaint } from "../processors";
+import { processPaint } from "../processors";
 import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia";
 import { Node } from "./Node";
@@ -26,23 +26,11 @@ export class DrawingNode extends Node {
     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 => {
+      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
+          paint: currentPaint
         }, drawingProps, this);
       });
     }

package/lib/module/renderer/nodes/Drawing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","processPaint","selectPaint","materialize","isPaint","Node","createDrawing","cb","useDrawing","deps","DrawingNode","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","drawingProps","selectedPaint","paint","opacity","children","map","child","ret","filter","forEach"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAGA,SAASC,YAAT,EAAuBC,WAAvB,QAA0C,eAA1C;AAEA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,aAAa,GAAQC,EAAL,IAC3BA,EADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACAT,WAAW,CAACO,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CAFN;AAUP,OAAO,MAAMC,WAAN,SAA6BL,IAA7B,CAAqC;AAI1CM,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITC,KAJS,EAKT;AACA,UAAMH,MAAN,EAAcG,KAAd;;AADA;;AAAA;;AAEA,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDE,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,YAAY,GAAGf,WAAW,CAAC,KAAKY,KAAN,CAAhC;;AACA,QAAI,KAAKD,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,aAAa,GAAGjB,WAAW,CAACe,GAAG,CAACG,KAAL,EAAYF,YAAZ,CAAjC;AACAjB,MAAAA,YAAY,CAACkB,aAAD,EAAgBF,GAAG,CAACI,OAApB,EAA6BH,YAA7B,CAAZ,CAFK,CAGL;AACA;;AACA,OACEC,aADF,EAEE,GAAG,KAAKG,QAAL,CACAC,GADA,CACKC,KAAD,IAAW;AACd;AACA,cAAMC,GAAG,GAAGD,KAAK,CAACR,IAAN,CAAWC,GAAX,CAAZ;;AACA,YAAIQ,GAAJ,EAAS;AACP,iBAAOA,GAAP;AACD,SALa,CAMd;;;AACA,eAAO,IAAP;AACD,OATA,EAUAC,MAVA,CAUOtB,OAVP,CAFL,EAaEuB,OAbF,CAaWP,KAAD,IAAW;AACnB,aAAKP,MAAL,CAAY,EAAE,GAAGI,GAAL;AAAUG,UAAAA;AAAV,SAAZ,EAA+BF,YAA/B,EAA6C,IAA7C;AACD,OAfD;AAgBD;AACF;;AAzCyC","sourcesContent":["import type { DependencyList, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport { processPaint, selectPaint } from \"../processors\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { materialize } from \"../processors/Animations/Animations\";\nimport { isPaint } from \"../../skia\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\ntype DrawingCallback<P> = (\n  ctx: DrawingContext,\n  props: P,\n  node: Node<P>\n) => void;\n\ntype OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;\n\nexport const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>\n  cb;\n\nexport const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport type DrawingProps<T> = {\n  onDraw: DrawingCallback<T>;\n  skipProcessing?: boolean;\n  children?: ReactNode | ReactNode[];\n};\n\nexport class DrawingNode<P> extends Node<P> {\n  onDraw: DrawingCallback<P>;\n  skipProcessing: boolean;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDraw: DrawingCallback<P>,\n    skipProcessing: boolean,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    this.onDraw = onDraw;\n    this.skipProcessing = skipProcessing;\n  }\n\n  draw(ctx: DrawingContext) {\n    const drawingProps = materialize(this.props);\n    if (this.skipProcessing) {\n      this.onDraw(ctx, drawingProps, this);\n    } else {\n      const selectedPaint = selectPaint(ctx.paint, drawingProps);\n      processPaint(selectedPaint, ctx.opacity, drawingProps);\n      // to draw only once:\n      // onDraw({ ...ctx, paint: selectedPaint }, children);\n      [\n        selectedPaint,\n        ...this.children\n          .map((child) => {\n            //if (child.type === NodeType.Declaration) {\n            const ret = child.draw(ctx);\n            if (ret) {\n              return ret;\n            }\n            //}\n            return null;\n          })\n          .filter(isPaint),\n      ].forEach((paint) => {\n        this.onDraw({ ...ctx, paint }, drawingProps, this);\n      });\n    }\n  }\n}\n"]}
+{"version":3,"sources":["Drawing.tsx"],"names":["useCallback","processPaint","materialize","isPaint","Node","createDrawing","cb","useDrawing","deps","DrawingNode","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","drawingProps","declarations","visit","paint","copy","opacity","filter","forEach","currentPaint"],"mappings":";;AACA,SAASA,WAAT,QAA4B,OAA5B;AAGA,SAASC,YAAT,QAA6B,eAA7B;AAEA,SAASC,WAAT,QAA4B,qCAA5B;AACA,SAASC,OAAT,QAAwB,YAAxB;AAGA,SAASC,IAAT,QAAqB,QAArB;AAUA,OAAO,MAAMC,aAAa,GAAQC,EAAL,IAC3BA,EADK;AAGP,OAAO,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACAR,WAAW,CAACM,EAAD,EAAKE,IAAL,aAAKA,IAAL,cAAKA,IAAL,GAAa,EAAb,CAFN;AAUP,OAAO,MAAMC,WAAN,SAA6BL,IAA7B,CAAqC;AAI1CM,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITC,KAJS,EAKT;AACA,UAAMH,MAAN,EAAcG,KAAd;;AADA;;AAAA;;AAEA,SAAKF,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDE,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,YAAY,GAAGf,WAAW,CAAC,KAAKY,KAAN,CAAhC;;AACA,QAAI,KAAKD,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,YAAY,GAAG,KAAKC,KAAL,CAAWH,GAAX,CAArB;AACA,YAAMI,KAAK,GAAGnB,YAAY,CACxBe,GAAG,CAACI,KAAJ,CAAUC,IAAV,EADwB,EAExBL,GAAG,CAACM,OAFoB,EAGxBL,YAHwB,EAIxBC,YAJwB,CAA1B;AAMA,OAACE,KAAD,EAAQ,GAAGF,YAAY,CAACK,MAAb,CAAoBpB,OAApB,CAAX,EAAyCqB,OAAzC,CAAkDC,YAAD,IAAkB;AACjE,aAAKb,MAAL,CAAY,EAAE,GAAGI,GAAL;AAAUI,UAAAA,KAAK,EAAEK;AAAjB,SAAZ,EAA6CR,YAA7C,EAA2D,IAA3D;AACD,OAFD;AAGD;AACF;;AA/ByC","sourcesContent":["import type { DependencyList, ReactNode } from \"react\";\nimport { useCallback } from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport { processPaint } from \"../processors\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { materialize } from \"../processors/Animations/Animations\";\nimport { isPaint } from \"../../skia\";\nimport type { DependencyManager } from \"../DependencyManager\";\n\nimport { Node } from \"./Node\";\n\ntype DrawingCallback<P> = (\n  ctx: DrawingContext,\n  props: P,\n  node: Node<P>\n) => void;\n\ntype OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;\n\nexport const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>\n  cb;\n\nexport const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useCallback(cb, deps ?? []);\n\nexport type DrawingProps<T> = {\n  onDraw: DrawingCallback<T>;\n  skipProcessing?: boolean;\n  children?: ReactNode | ReactNode[];\n};\n\nexport class DrawingNode<P> extends Node<P> {\n  onDraw: DrawingCallback<P>;\n  skipProcessing: boolean;\n\n  constructor(\n    depMgr: DependencyManager,\n    onDraw: DrawingCallback<P>,\n    skipProcessing: boolean,\n    props: AnimatedProps<P>\n  ) {\n    super(depMgr, props);\n    this.onDraw = onDraw;\n    this.skipProcessing = skipProcessing;\n  }\n\n  draw(ctx: DrawingContext) {\n    const drawingProps = materialize(this.props);\n    if (this.skipProcessing) {\n      this.onDraw(ctx, drawingProps, this);\n    } else {\n      const declarations = this.visit(ctx);\n      const paint = processPaint(\n        ctx.paint.copy(),\n        ctx.opacity,\n        drawingProps,\n        declarations\n      );\n      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {\n        this.onDraw({ ...ctx, paint: currentPaint }, drawingProps, this);\n      });\n    }\n  }\n}\n"]}

package/lib/module/renderer/nodes/Node.js

@@ -1,6 +1,5 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { isPaint } from "../../skia";
 export let NodeType;
 
 (function (NodeType) {
@@ -16,7 +15,7 @@ export class Node {
 
     _defineProperty(this, "memoizable", false);
 
-    _defineProperty(this, "memoized", false);
+    _defineProperty(this, "memoized", null);
 
     _defineProperty(this, "parent", void 0);
 
@@ -38,26 +37,21 @@ export class Node {
     return this._props;
   }
 
-  visit(ctx) {
+  visit(ctx, children) {
     const returnedValues = [];
-    let currentCtx = ctx;
-    this.children.forEach(child => {
+    (children !== null && children !== void 0 ? 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 = true;
+          if (child.memoizable) {
+            child.memoized = ret;
+          }
         }
+      } else {
+        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/lib/module/renderer/nodes/Node.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Node.ts"],"names":["isPaint","NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","returnedValues","currentCtx","children","forEach","child","memoized","ret","draw","paint","push","memoizable"],"mappings":";;AAAA,SAASA,OAAT,QAAwB,YAAxB;AAMA,WAAYC,QAAZ;;WAAYA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,KAAAA,Q;;AAOZ,OAAO,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJrD,KAIqD;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsB;AACzB,UAAMC,cAAkD,GAAG,EAA3D;AACA,QAAIC,UAAU,GAAGF,GAAjB;AACA,SAAKG,QAAL,CAAcC,OAAd,CAAuBC,KAAD,IAAW;AAC/B,UAAI,CAACA,KAAK,CAACC,QAAX,EAAqB;AACnB,cAAMC,GAAG,GAAGF,KAAK,CAACG,IAAN,CAAWN,UAAX,CAAZ;;AACA,YAAIK,GAAJ,EAAS;AACP,cAAIjB,OAAO,CAACiB,GAAD,CAAX,EAAkB;AAChBL,YAAAA,UAAU,GAAG,EAAE,GAAGA,UAAL;AAAiBO,cAAAA,KAAK,EAAEF;AAAxB,aAAb;AACD;;AACDN,UAAAA,cAAc,CAACS,IAAf,CAAoBH,GAApB;AACD;;AACD,YAAIF,KAAK,CAACM,UAAV,EAAsB;AACpBN,UAAAA,KAAK,CAACC,QAAN,GAAiB,IAAjB;AACD;AACF;AACF,KAbD;AAcA,WAAOL,cAAP;AACD;;AA7CqC","sourcesContent":["import { isPaint } from \"../../skia\";\nimport type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized = false;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    let currentCtx = ctx;\n    this.children.forEach((child) => {\n      if (!child.memoized) {\n        const ret = child.draw(currentCtx);\n        if (ret) {\n          if (isPaint(ret)) {\n            currentCtx = { ...currentCtx, paint: ret };\n          }\n          returnedValues.push(ret);\n        }\n        if (child.memoizable) {\n          child.memoized = true;\n        }\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}
+{"version":3,"sources":["Node.ts"],"names":["NodeType","Node","constructor","depMgr","props","_props","unSubscribeNode","subscribeNode","visit","ctx","children","returnedValues","forEach","child","memoized","ret","draw","push","memoizable"],"mappings":";;AAKA,WAAYA,QAAZ;;WAAYA,Q;AAAAA,EAAAA,Q;AAAAA,EAAAA,Q;GAAAA,Q,KAAAA,Q;;AAOZ,OAAO,MAAeC,IAAf,CAAiC;AAQtCC,EAAAA,WAAW,CAACC,MAAD,EAA4BC,KAA5B,EAAqD;AAAA,sCAPpC,EAOoC;;AAAA;;AAAA,wCALnD,KAKmD;;AAAA,sCAJ3B,IAI2B;;AAAA;;AAAA;;AAC9D,SAAKC,MAAL,GAAcD,KAAd;AACA,SAAKD,MAAL,GAAcA,MAAd;AACA,SAAKA,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACD;;AAIQ,MAALA,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKD,MAAL,CAAYG,eAAZ,CAA4B,IAA5B;AACA,SAAKH,MAAL,CAAYI,aAAZ,CAA0B,IAA1B,EAAgCH,KAAhC;AACA,SAAKC,MAAL,GAAcD,KAAd;AACD;;AAEQ,MAALA,KAAK,GAAG;AACV,WAAO,KAAKC,MAAZ;AACD;;AAEDG,EAAAA,KAAK,CAACC,GAAD,EAAsBC,QAAtB,EAAyC;AAC5C,UAAMC,cAAkD,GAAG,EAA3D;AACA,KAACD,QAAD,aAACA,QAAD,cAACA,QAAD,GAAa,KAAKA,QAAlB,EAA4BE,OAA5B,CAAqCC,KAAD,IAAW;AAC7C,UAAI,CAACA,KAAK,CAACC,QAAX,EAAqB;AACnB,cAAMC,GAAG,GAAGF,KAAK,CAACG,IAAN,CAAWP,GAAX,CAAZ;;AACA,YAAIM,GAAJ,EAAS;AACPJ,UAAAA,cAAc,CAACM,IAAf,CAAoBF,GAApB;;AACA,cAAIF,KAAK,CAACK,UAAV,EAAsB;AACpBL,YAAAA,KAAK,CAACC,QAAN,GAAiBC,GAAjB;AACD;AACF;AACF,OARD,MAQO;AACLJ,QAAAA,cAAc,CAACM,IAAf,CAAoBJ,KAAK,CAACC,QAA1B;AACD;AACF,KAZD;AAaA,WAAOH,cAAP;AACD;;AA3CqC","sourcesContent":["import type { SkJSIInstance } from \"../../skia/JsiInstance\";\nimport type { DependencyManager } from \"../DependencyManager\";\nimport type { DrawingContext } from \"../DrawingContext\";\nimport type { AnimatedProps } from \"../processors\";\n\nexport enum NodeType {\n  Declaration = \"skDeclaration\",\n  Drawing = \"skDrawing\",\n}\n\ntype DeclarationResult = SkJSIInstance<string> | null;\n\nexport abstract class Node<P = unknown> {\n  readonly children: Node[] = [];\n  _props: AnimatedProps<P>;\n  memoizable = false;\n  memoized: DeclarationResult | null = null;\n  parent?: Node;\n  depMgr: DependencyManager;\n\n  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {\n    this._props = props;\n    this.depMgr = depMgr;\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n  }\n\n  abstract draw(ctx: DrawingContext): void | DeclarationResult;\n\n  set props(props: AnimatedProps<P>) {\n    this.depMgr.unSubscribeNode(this);\n    this.depMgr.subscribeNode(this, props);\n    this._props = props;\n  }\n\n  get props() {\n    return this._props;\n  }\n\n  visit(ctx: DrawingContext, children?: Node[]) {\n    const returnedValues: Exclude<DeclarationResult, null>[] = [];\n    (children ?? this.children).forEach((child) => {\n      if (!child.memoized) {\n        const ret = child.draw(ctx);\n        if (ret) {\n          returnedValues.push(ret);\n          if (child.memoizable) {\n            child.memoized = ret;\n          }\n        }\n      } else {\n        returnedValues.push(child.memoized);\n      }\n    });\n    return returnedValues;\n  }\n}\n"]}

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":"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","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.119",
   "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";