@shopify/react-native-skia 0.1.115 → 0.1.119

package/lib/commonjs/renderer/components/{Defs.js → Drawing.js}

@@ -3,28 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Defs = void 0;
+exports.Drawing = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _nodes = require("../nodes");
+var _Drawing = require("../nodes/Drawing");
 
 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 onDraw = (0, _Drawing.createDrawing)((ctx, _ref) => {
+  let {
+    drawing
+  } = _ref;
+  drawing(ctx);
 });
 
-const Defs = props => {
-  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
+const Drawing = props => {
+  return /*#__PURE__*/_react.default.createElement("skDrawing", _extends({
+    onDraw: onDraw,
+    skipProcessing: true
   }, props));
 };
 
-exports.Defs = Defs;
-//# sourceMappingURL=Defs.js.map
+exports.Drawing = Drawing;
+//# sourceMappingURL=Drawing.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Drawing.tsx"],"names":["onDraw","ctx","drawing","Drawing","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;;;AAMA,MAAMA,MAAM,GAAG,4BAA4B,CAACC,GAAD,WAAsB;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC/DA,EAAAA,OAAO,CAACD,GAAD,CAAP;AACD,CAFc,CAAf;;AAIO,MAAME,OAAO,GAAIC,KAAD,IAAyB;AAC9C,sBAAO;AAAW,IAAA,MAAM,EAAEJ,MAAnB;AAA2B,IAAA,cAAc;AAAzC,KAA8CI,KAA9C,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport type { DrawingContext } from \"../DrawingContext\";\nimport { createDrawing } from \"../nodes/Drawing\";\n\ninterface DrawingProps {\n  drawing: (ctx: DrawingContext) => void;\n}\n\nconst onDraw = createDrawing<DrawingProps>((ctx, { drawing }) => {\n  drawing(ctx);\n});\n\nexport const Drawing = (props: DrawingProps) => {\n  return <skDrawing onDraw={onDraw} skipProcessing {...props} />;\n};\n"]}

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

@@ -13,6 +13,8 @@ var _processors = require("../processors");
 
 var _nodes = require("../nodes");
 
+var _Declaration = require("../nodes/Declaration");
+
 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); }
@@ -30,35 +32,44 @@ const onDraw = (0, _nodes.createDrawing)((ctx, _ref, node) => {
     canvas,
     opacity
   } = ctx;
-  const paint = (0, _processors.selectPaint)(ctx.paint, groupProps);
-  (0, _processors.processPaint)(paint, opacity, groupProps);
-
-  if (layer) {
-    if (typeof layer === "boolean") {
-      canvas.saveLayer();
-    } else if (isSkPaint(layer)) {
-      canvas.saveLayer(layer);
+  const declarations = node.children.filter(_Declaration.isDeclarationNode).map(child => child.draw(ctx));
+  const drawings = node.children.filter(child => child instanceof _nodes.DrawingNode);
+  const paint = (0, _processors.processPaint)(ctx.paint.copy(), opacity, groupProps, declarations);
+  const hasTransform = !!groupProps.transform || !!groupProps.matrix;
+  const hasClip = !!clip;
+  const shouldSave = hasTransform || hasClip || !!layer;
+
+  if (shouldSave) {
+    if (layer) {
+      if (typeof layer === "boolean") {
+        canvas.saveLayer();
+      } else if (isSkPaint(layer)) {
+        canvas.saveLayer(layer);
+      } else {
+        var _layer$current;
+
+        canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
+      }
     } else {
-      var _layer$current;
-
-      canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
+      canvas.save();
     }
-  } else {
-    canvas.save();
-  }
 
-  (0, _processors.processTransform)(ctx, groupProps);
+    (0, _processors.processTransform)(ctx, groupProps);
 
-  if (clip) {
-    const op = invertClip ? _skia.ClipOp.Difference : _skia.ClipOp.Intersect;
-    (0, _processors.processClip)(canvas, clip, op);
+    if (clip) {
+      const op = invertClip ? _skia.ClipOp.Difference : _skia.ClipOp.Intersect;
+      (0, _processors.processClip)(canvas, clip, op);
+    }
   }
 
   node.visit({ ...ctx,
     paint,
     opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
-  });
-  canvas.restore();
+  }, drawings);
+
+  if (shouldSave) {
+    canvas.restore();
+  }
 });
 
 const Group = props => {

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

@@ -1 +1 @@
-{"version":3,"sources":["Group.tsx"],"names":["isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","saveLayer","current","undefined","save","op","ClipOp","Difference","Intersect","visit","restore","Group","props"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAYA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAG,0BACb,CAACC,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,GAAG,6BAAYR,GAAG,CAACQ,KAAhB,EAAuBH,UAAvB,CAAd;AACA,gCAAaG,KAAb,EAAoBD,OAApB,EAA6BF,UAA7B;;AACA,MAAIH,KAAJ,EAAW;AACT,QAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,MAAAA,MAAM,CAACG,SAAP;AACD,KAFD,MAEO,IAAIb,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,MAAAA,MAAM,CAACG,SAAP,CAAiBP,KAAjB;AACD,KAFM,MAEA;AAAA;;AACLI,MAAAA,MAAM,CAACG,SAAP,mBAAiBP,KAAK,CAACQ,OAAvB,2DAAkCC,SAAlC;AACD;AACF,GARD,MAQO;AACLL,IAAAA,MAAM,CAACM,IAAP;AACD;;AACD,oCAAiBZ,GAAjB,EAAsBK,UAAtB;;AACA,MAAIF,IAAJ,EAAU;AACR,UAAMU,EAAE,GAAGT,UAAU,GAAGU,aAAOC,UAAV,GAAuBD,aAAOE,SAAnD;AACA,iCAAYV,MAAZ,EAAoBH,IAApB,EAA0BU,EAA1B;AACD;;AACDZ,EAAAA,IAAI,CAACgB,KAAL,CAAW,EACT,GAAGjB,GADM;AAETQ,IAAAA,KAFS;AAGTD,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAHpD,GAAX;AAKAD,EAAAA,MAAM,CAACY,OAAP;AACD,CA3BY,CAAf;;AA8BO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAErB;AAAnB,KAA+BqB,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    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    node.visit({\n      ...ctx,\n      paint,\n      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n    });\n    canvas.restore();\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}
+{"version":3,"sources":["Group.tsx"],"names":["isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","declarations","children","filter","isDeclarationNode","map","child","draw","drawings","DrawingNode","paint","copy","hasTransform","transform","matrix","hasClip","shouldSave","saveLayer","current","undefined","save","op","ClipOp","Difference","Intersect","visit","restore","Group","props"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAOA;;AACA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAG,0BACb,CAACC,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,CACXC,8BADW,EAElBC,GAFkB,CAEbC,KAAD,IAAWA,KAAK,CAACC,IAAN,CAAWd,GAAX,CAFG,CAArB;AAIA,QAAMe,QAAQ,GAAGd,IAAI,CAACQ,QAAL,CAAcC,MAAd,CACdG,KAAD,IAAWA,KAAK,YAAYG,kBADb,CAAjB;AAGA,QAAMC,KAAK,GAAG,8BACZjB,GAAG,CAACiB,KAAJ,CAAUC,IAAV,EADY,EAEZX,OAFY,EAGZF,UAHY,EAIZG,YAJY,CAAd;AAMA,QAAMW,YAAY,GAAG,CAAC,CAACd,UAAU,CAACe,SAAb,IAA0B,CAAC,CAACf,UAAU,CAACgB,MAA5D;AACA,QAAMC,OAAO,GAAG,CAAC,CAACnB,IAAlB;AACA,QAAMoB,UAAU,GAAGJ,YAAY,IAAIG,OAAhB,IAA2B,CAAC,CAACpB,KAAhD;;AACA,MAAIqB,UAAJ,EAAgB;AACd,QAAIrB,KAAJ,EAAW;AACT,UAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,QAAAA,MAAM,CAACkB,SAAP;AACD,OAFD,MAEO,IAAI5B,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,QAAAA,MAAM,CAACkB,SAAP,CAAiBtB,KAAjB;AACD,OAFM,MAEA;AAAA;;AACLI,QAAAA,MAAM,CAACkB,SAAP,mBAAiBtB,KAAK,CAACuB,OAAvB,2DAAkCC,SAAlC;AACD;AACF,KARD,MAQO;AACLpB,MAAAA,MAAM,CAACqB,IAAP;AACD;;AACD,sCAAiB3B,GAAjB,EAAsBK,UAAtB;;AACA,QAAIF,IAAJ,EAAU;AACR,YAAMyB,EAAE,GAAGxB,UAAU,GAAGyB,aAAOC,UAAV,GAAuBD,aAAOE,SAAnD;AACA,mCAAYzB,MAAZ,EAAoBH,IAApB,EAA0ByB,EAA1B;AACD;AACF;;AACD3B,EAAAA,IAAI,CAAC+B,KAAL,CACE,EACE,GAAGhC,GADL;AAEEiB,IAAAA,KAFF;AAGEV,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAH/D,GADF,EAMEQ,QANF;;AAQA,MAAIQ,UAAJ,EAAgB;AACdjB,IAAAA,MAAM,CAAC2B,OAAP;AACD;AACF,CAhDY,CAAf;;AAmDO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAEpC;AAAnB,KAA+BoC,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/commonjs/renderer/components/Paint.js

@@ -25,27 +25,7 @@ exports.usePaintRef = usePaintRef;
 const Paint = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const paint = (0, _react.useMemo)(() => _skia.Skia.Paint(), []);
   (0, _react.useImperativeHandle)(ref, () => paint, [paint]);
-  const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => {
-    (0, _processors.processPaint)(paint, ctx.opacity, paintProps);
-    children.forEach(child => {
-      if ((0, _skia.isShader)(child)) {
-        paint.setShader(child);
-      } else if ((0, _skia.isMaskFilter)(child)) {
-        paint.setMaskFilter(child);
-      } else if ((0, _skia.isColorFilter)(child)) {
-        paint.setColorFilter(child);
-      } else if ((0, _skia.isPathEffect)(child)) {
-        paint.setPathEffect(child);
-      }
-    });
-    const filters = children.filter(_skia.isImageFilter);
-
-    if (filters.length > 0) {
-      paint.setImageFilter(filters.reverse().reduce(_skia.Skia.ImageFilter.MakeCompose, null));
-    }
-
-    return paint;
-  }), [paint]);
+  const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => (0, _processors.processPaint)(paint, ctx.opacity, paintProps, children)), [paint]);
   return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
     onDeclare: onDeclare
   }, props));

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

@@ -1 +1 @@
-{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity","forEach","child","setShader","setMaskFilter","setColorFilter","setPathEffect","filters","filter","isImageFilter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":";;;;;;;AACA;;AAGA;;AASA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAA+B;AAC3D,kCAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC;AACAC,IAAAA,QAAQ,CAACG,OAAT,CAAkBC,KAAD,IAAW;AAC1B,UAAI,oBAASA,KAAT,CAAJ,EAAqB;AACnBR,QAAAA,KAAK,CAACS,SAAN,CAAgBD,KAAhB;AACD,OAFD,MAEO,IAAI,wBAAaA,KAAb,CAAJ,EAAyB;AAC9BR,QAAAA,KAAK,CAACU,aAAN,CAAoBF,KAApB;AACD,OAFM,MAEA,IAAI,yBAAcA,KAAd,CAAJ,EAA0B;AAC/BR,QAAAA,KAAK,CAACW,cAAN,CAAqBH,KAArB;AACD,OAFM,MAEA,IAAI,wBAAaA,KAAb,CAAJ,EAAyB;AAC9BR,QAAAA,KAAK,CAACY,aAAN,CAAoBJ,KAApB;AACD;AACF,KAVD;AAWA,UAAMK,OAAO,GAAGT,QAAQ,CAACU,MAAT,CAAgBC,mBAAhB,CAAhB;;AACA,QAAIF,OAAO,CAACG,MAAR,GAAiB,CAArB,EAAwB;AACtBhB,MAAAA,KAAK,CAACiB,cAAN,CACEJ,OAAO,CACJK,OADH,GAEGC,MAFH,CAGIlB,WAAKmB,WAAL,CAAiBC,WAHrB,EAII,IAJJ,CADF;AAQD;;AACD,WAAOrB,KAAP;AACD,GAzBD,CAFc,EA4BhB,CAACA,KAAD,CA5BgB,CAAlB;AA8BA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAnCkB,CAAd","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":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAC5B,8BAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC,EAA6CC,QAA7C,CADF,CAFc,EAKhB,CAACJ,KAAD,CALgB,CAAlB;AAOA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAZkB,CAAd","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/commonjs/renderer/components/Picture.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Picture = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Drawing = require("../nodes/Drawing");
+
+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 onDraw = (0, _Drawing.createDrawing)((ctx, _ref) => {
+  let {
+    picture
+  } = _ref;
+  const {
+    canvas
+  } = ctx;
+  canvas.drawPicture(picture);
+});
+
+const Picture = props => {
+  return /*#__PURE__*/_react.default.createElement("skDrawing", _extends({
+    onDraw: onDraw
+  }, props, {
+    skipProcessing: true
+  }));
+};
+
+exports.Picture = Picture;
+//# sourceMappingURL=Picture.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Picture.tsx"],"names":["onDraw","ctx","picture","canvas","drawPicture","Picture","props"],"mappings":";;;;;;;AAAA;;AAGA;;;;;;AAMA,MAAMA,MAAM,GAAG,4BAA4B,CAACC,GAAD,WAAsB;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC/D,QAAM;AAAEC,IAAAA;AAAF,MAAaF,GAAnB;AACAE,EAAAA,MAAM,CAACC,WAAP,CAAmBF,OAAnB;AACD,CAHc,CAAf;;AAKO,MAAMG,OAAO,GAAIC,KAAD,IAAyB;AAC9C,sBAAO;AAAW,IAAA,MAAM,EAAEN;AAAnB,KAA+BM,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport type { SkPicture } from \"../../skia\";\nimport { createDrawing } from \"../nodes/Drawing\";\n\nexport interface PictureProps {\n  picture: SkPicture;\n}\n\nconst onDraw = createDrawing<PictureProps>((ctx, { picture }) => {\n  const { canvas } = ctx;\n  canvas.drawPicture(picture);\n});\n\nexport const Picture = (props: PictureProps) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}

package/lib/commonjs/renderer/components/imageFilters/InnerShadow.js

@@ -3,43 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InnerShadow = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports.MakeInnerShadow = void 0;
 
 var _skia = require("../../../skia");
 
-var _Declaration = require("../../nodes/Declaration");
-
-var _getInput = require("./getInput");
-
-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, _Declaration.createDeclaration)((_ref, children, _ref2) => {
-  let {
-    dx,
-    dy,
-    blur,
-    color,
-    shadowOnly
-  } = _ref;
-  let {
-    opacity
-  } = _ref2;
-  const input = (0, _getInput.getInput)(children);
-  const cl = (0, _skia.processColor)(color, opacity);
-
+const MakeInnerShadow = (shadowOnly, dx, dy, sigmaX, sigmaY, color, input) => {
   const sourceGraphic = _skia.Skia.ImageFilter.MakeColorFilter(_skia.Skia.ColorFilter.MakeBlend(0xff000000, _skia.BlendMode.Dst), null);
 
   const sourceAlpha = _skia.Skia.ImageFilter.MakeColorFilter(_skia.Skia.ColorFilter.MakeBlend(0xff000000, _skia.BlendMode.SrcIn), null);
 
-  const f1 = _skia.Skia.ImageFilter.MakeColorFilter(_skia.Skia.ColorFilter.MakeBlend(cl, _skia.BlendMode.SrcOut), null);
+  const f1 = _skia.Skia.ImageFilter.MakeColorFilter(_skia.Skia.ColorFilter.MakeBlend(color, _skia.BlendMode.SrcOut), null);
 
   const f2 = _skia.Skia.ImageFilter.MakeOffset(dx, dy, f1);
 
-  const f3 = _skia.Skia.ImageFilter.MakeBlur(blur, blur, _skia.TileMode.Decal, f2);
+  const f3 = _skia.Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, _skia.TileMode.Decal, f2);
 
   const f4 = _skia.Skia.ImageFilter.MakeBlend(_skia.BlendMode.SrcIn, sourceAlpha, f3);
 
@@ -48,13 +25,7 @@ const onDeclare = (0, _Declaration.createDeclaration)((_ref, children, _ref2) =>
   }
 
   return _skia.Skia.ImageFilter.MakeCompose(input, _skia.Skia.ImageFilter.MakeBlend(_skia.BlendMode.SrcOver, sourceGraphic, f4));
-});
-
-const InnerShadow = props => {
-  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
-  }, props));
 };
 
-exports.InnerShadow = InnerShadow;
+exports.MakeInnerShadow = MakeInnerShadow;
 //# sourceMappingURL=InnerShadow.js.map

package/lib/commonjs/renderer/components/imageFilters/InnerShadow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InnerShadow.tsx"],"names":["onDeclare","children","dx","dy","blur","color","shadowOnly","opacity","input","cl","sourceGraphic","Skia","ImageFilter","MakeColorFilter","ColorFilter","MakeBlend","BlendMode","Dst","sourceAlpha","SrcIn","f1","SrcOut","f2","MakeOffset","f3","MakeBlur","TileMode","Decal","f4","MakeCompose","SrcOver","InnerShadow","props"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAIA;;;;;;AAWA,MAAMA,SAAS,GAAG,oCAChB,OAAsCC,QAAtC,YAAgE;AAAA,MAA/D;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAhB;AAAuBC,IAAAA;AAAvB,GAA+D;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AAC9D,QAAMC,KAAK,GAAG,wBAASP,QAAT,CAAd;AACA,QAAMQ,EAAE,GAAG,wBAAaJ,KAAb,EAAoBE,OAApB,CAAX;;AACA,QAAMG,aAAa,GAAGC,WAAKC,WAAL,CAAiBC,eAAjB,CACpBF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2B,UAA3B,EAAuCC,gBAAUC,GAAjD,CADoB,EAEpB,IAFoB,CAAtB;;AAIA,QAAMC,WAAW,GAAGP,WAAKC,WAAL,CAAiBC,eAAjB,CAClBF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2B,UAA3B,EAAuCC,gBAAUG,KAAjD,CADkB,EAElB,IAFkB,CAApB;;AAIA,QAAMC,EAAE,GAAGT,WAAKC,WAAL,CAAiBC,eAAjB,CACTF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2BN,EAA3B,EAA+BO,gBAAUK,MAAzC,CADS,EAET,IAFS,CAAX;;AAIA,QAAMC,EAAE,GAAGX,WAAKC,WAAL,CAAiBW,UAAjB,CAA4BrB,EAA5B,EAAgCC,EAAhC,EAAoCiB,EAApC,CAAX;;AACA,QAAMI,EAAE,GAAGb,WAAKC,WAAL,CAAiBa,QAAjB,CAA0BrB,IAA1B,EAAgCA,IAAhC,EAAsCsB,eAASC,KAA/C,EAAsDL,EAAtD,CAAX;;AACA,QAAMM,EAAE,GAAGjB,WAAKC,WAAL,CAAiBG,SAAjB,CAA2BC,gBAAUG,KAArC,EAA4CD,WAA5C,EAAyDM,EAAzD,CAAX;;AACA,MAAIlB,UAAJ,EAAgB;AACd,WAAOsB,EAAP;AACD;;AACD,SAAOjB,WAAKC,WAAL,CAAiBiB,WAAjB,CACLrB,KADK,EAELG,WAAKC,WAAL,CAAiBG,SAAjB,CAA2BC,gBAAUc,OAArC,EAA8CpB,aAA9C,EAA6DkB,EAA7D,CAFK,CAAP;AAID,CA1Be,CAAlB;;AA6BO,MAAMG,WAAW,GAAIC,KAAD,IAA4C;AACrE,sBAAO;AAAe,IAAA,SAAS,EAAEhC;AAA1B,KAAyCgC,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { BlendMode, Skia, TileMode, processColor } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors\";\nimport type { Color } from \"../../../skia\";\n\nimport { getInput } from \"./getInput\";\n\nexport interface InnerShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  shadowOnly?: boolean;\n  inner?: boolean;\n}\n\nconst onDeclare = createDeclaration<InnerShadowProps>(\n  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {\n    const input = getInput(children);\n    const cl = processColor(color, opacity);\n    const sourceGraphic = Skia.ImageFilter.MakeColorFilter(\n      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),\n      null\n    );\n    const sourceAlpha = Skia.ImageFilter.MakeColorFilter(\n      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),\n      null\n    );\n    const f1 = Skia.ImageFilter.MakeColorFilter(\n      Skia.ColorFilter.MakeBlend(cl, BlendMode.SrcOut),\n      null\n    );\n    const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);\n    const f3 = Skia.ImageFilter.MakeBlur(blur, blur, TileMode.Decal, f2);\n    const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);\n    if (shadowOnly) {\n      return f4;\n    }\n    return Skia.ImageFilter.MakeCompose(\n      input,\n      Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)\n    );\n  }\n);\n\nexport const InnerShadow = (props: AnimatedProps<InnerShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}
+{"version":3,"sources":["InnerShadow.tsx"],"names":["MakeInnerShadow","shadowOnly","dx","dy","sigmaX","sigmaY","color","input","sourceGraphic","Skia","ImageFilter","MakeColorFilter","ColorFilter","MakeBlend","BlendMode","Dst","sourceAlpha","SrcIn","f1","SrcOut","f2","MakeOffset","f3","MakeBlur","TileMode","Decal","f4","MakeCompose","SrcOver"],"mappings":";;;;;;;AACA;;AAGO,MAAMA,eAAe,GAAG,CAC7BC,UAD6B,EAE7BC,EAF6B,EAG7BC,EAH6B,EAI7BC,MAJ6B,EAK7BC,MAL6B,EAM7BC,KAN6B,EAO7BC,KAP6B,KAQ1B;AACH,QAAMC,aAAa,GAAGC,WAAKC,WAAL,CAAiBC,eAAjB,CACpBF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2B,UAA3B,EAAuCC,gBAAUC,GAAjD,CADoB,EAEpB,IAFoB,CAAtB;;AAIA,QAAMC,WAAW,GAAGP,WAAKC,WAAL,CAAiBC,eAAjB,CAClBF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2B,UAA3B,EAAuCC,gBAAUG,KAAjD,CADkB,EAElB,IAFkB,CAApB;;AAIA,QAAMC,EAAE,GAAGT,WAAKC,WAAL,CAAiBC,eAAjB,CACTF,WAAKG,WAAL,CAAiBC,SAAjB,CAA2BP,KAA3B,EAAkCQ,gBAAUK,MAA5C,CADS,EAET,IAFS,CAAX;;AAIA,QAAMC,EAAE,GAAGX,WAAKC,WAAL,CAAiBW,UAAjB,CAA4BnB,EAA5B,EAAgCC,EAAhC,EAAoCe,EAApC,CAAX;;AACA,QAAMI,EAAE,GAAGb,WAAKC,WAAL,CAAiBa,QAAjB,CAA0BnB,MAA1B,EAAkCC,MAAlC,EAA0CmB,eAASC,KAAnD,EAA0DL,EAA1D,CAAX;;AACA,QAAMM,EAAE,GAAGjB,WAAKC,WAAL,CAAiBG,SAAjB,CAA2BC,gBAAUG,KAArC,EAA4CD,WAA5C,EAAyDM,EAAzD,CAAX;;AACA,MAAIrB,UAAJ,EAAgB;AACd,WAAOyB,EAAP;AACD;;AACD,SAAOjB,WAAKC,WAAL,CAAiBiB,WAAjB,CACLpB,KADK,EAELE,WAAKC,WAAL,CAAiBG,SAAjB,CAA2BC,gBAAUc,OAArC,EAA8CpB,aAA9C,EAA6DkB,EAA7D,CAFK,CAAP;AAID,CA/BM","sourcesContent":["import type { SkColor } from \"../../../skia\";\nimport { BlendMode, Skia, TileMode } from \"../../../skia\";\nimport type { SkImageFilter } from \"../../../skia/ImageFilter/ImageFilter\";\n\nexport const MakeInnerShadow = (\n  shadowOnly: boolean | undefined,\n  dx: number,\n  dy: number,\n  sigmaX: number,\n  sigmaY: number,\n  color: SkColor,\n  input: SkImageFilter | null\n) => {\n  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),\n    null\n  );\n  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),\n    null\n  );\n  const f1 = Skia.ImageFilter.MakeColorFilter(\n    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),\n    null\n  );\n  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);\n  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);\n  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);\n  if (shadowOnly) {\n    return f4;\n  }\n  return Skia.ImageFilter.MakeCompose(\n    input,\n    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)\n  );\n};\n"]}

package/lib/commonjs/renderer/components/imageFilters/{DropShadow.js → Shadow.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropShadow = void 0;
+exports.Shadow = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,8 @@ var _Color = require("../../../skia/Color");
 
 var _getInput = require("./getInput");
 
+var _InnerShadow = require("./InnerShadow");
+
 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); }
@@ -24,22 +26,31 @@ const onDeclare = (0, _Declaration.createDeclaration)((_ref, children, _ref2) =>
     dx,
     dy,
     blur,
-    color,
-    shadowOnly
+    color: cl,
+    shadowOnly,
+    inner
   } = _ref;
   let {
     opacity
   } = _ref2;
   const input = (0, _getInput.getInput)(children);
-  const factory = shadowOnly ? _skia.Skia.ImageFilter.MakeDropShadowOnly : _skia.Skia.ImageFilter.MakeDropShadow;
-  return factory(dx, dy, blur, blur, (0, _Color.processColor)(color, opacity), input);
+  const color = (0, _Color.processColor)(cl, opacity);
+  let factory;
+
+  if (inner) {
+    factory = _InnerShadow.MakeInnerShadow.bind(null, shadowOnly);
+  } else {
+    factory = shadowOnly ? _skia.Skia.ImageFilter.MakeDropShadowOnly : _skia.Skia.ImageFilter.MakeDropShadow;
+  }
+
+  return factory(dx, dy, blur, blur, color, input);
 });
 
-const DropShadow = props => {
+const Shadow = props => {
   return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
     onDeclare: onDeclare
   }, props));
 };
 
-exports.DropShadow = DropShadow;
-//# sourceMappingURL=DropShadow.js.map
+exports.Shadow = Shadow;
+//# sourceMappingURL=Shadow.js.map

package/lib/commonjs/renderer/components/imageFilters/Shadow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Shadow.tsx"],"names":["onDeclare","children","dx","dy","blur","color","cl","shadowOnly","inner","opacity","input","factory","MakeInnerShadow","bind","Skia","ImageFilter","MakeDropShadowOnly","MakeDropShadow","Shadow","props"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAGA;;AAEA;;AACA;;;;;;AAWA,MAAMA,SAAS,GAAG,oCAChB,OAAiDC,QAAjD,YAA2E;AAAA,MAA1E;AAAEC,IAAAA,EAAF;AAAMC,IAAAA,EAAN;AAAUC,IAAAA,IAAV;AAAgBC,IAAAA,KAAK,EAAEC,EAAvB;AAA2BC,IAAAA,UAA3B;AAAuCC,IAAAA;AAAvC,GAA0E;AAAA,MAAhB;AAAEC,IAAAA;AAAF,GAAgB;AACzE,QAAMC,KAAK,GAAG,wBAAST,QAAT,CAAd;AACA,QAAMI,KAAK,GAAG,yBAAaC,EAAb,EAAiBG,OAAjB,CAAd;AACA,MAAIE,OAAJ;;AACA,MAAIH,KAAJ,EAAW;AACTG,IAAAA,OAAO,GAAGC,6BAAgBC,IAAhB,CAAqB,IAArB,EAA2BN,UAA3B,CAAV;AACD,GAFD,MAEO;AACLI,IAAAA,OAAO,GAAGJ,UAAU,GAChBO,WAAKC,WAAL,CAAiBC,kBADD,GAEhBF,WAAKC,WAAL,CAAiBE,cAFrB;AAGD;;AACD,SAAON,OAAO,CAACT,EAAD,EAAKC,EAAL,EAASC,IAAT,EAAeA,IAAf,EAAqBC,KAArB,EAA4BK,KAA5B,CAAd;AACD,CAbe,CAAlB;;AAgBO,MAAMQ,MAAM,GAAIC,KAAD,IAAuC;AAC3D,sBAAO;AAAe,IAAA,SAAS,EAAEnB;AAA1B,KAAyCmB,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\n\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\nimport type { Color } from \"../../../skia/Color\";\nimport { processColor } from \"../../../skia/Color\";\n\nimport { getInput } from \"./getInput\";\nimport { MakeInnerShadow } from \"./InnerShadow\";\n\nexport interface ShadowProps {\n  dx: number;\n  dy: number;\n  blur: number;\n  color: Color;\n  inner?: boolean;\n  shadowOnly?: boolean;\n}\n\nconst onDeclare = createDeclaration<ShadowProps>(\n  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {\n    const input = getInput(children);\n    const color = processColor(cl, opacity);\n    let factory;\n    if (inner) {\n      factory = MakeInnerShadow.bind(null, shadowOnly);\n    } else {\n      factory = shadowOnly\n        ? Skia.ImageFilter.MakeDropShadowOnly\n        : Skia.ImageFilter.MakeDropShadow;\n    }\n    return factory(dx, dy, blur, blur, color, input);\n  }\n);\n\nexport const Shadow = (props: AnimatedProps<ShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

package/lib/commonjs/renderer/components/imageFilters/index.js

@@ -43,28 +43,15 @@ Object.keys(_DisplacementMap).forEach(function (key) {
   });
 });
 
-var _DropShadow = require("./DropShadow");
+var _Shadow = require("./Shadow");
 
-Object.keys(_DropShadow).forEach(function (key) {
+Object.keys(_Shadow).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _DropShadow[key]) return;
+  if (key in exports && exports[key] === _Shadow[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _DropShadow[key];
-    }
-  });
-});
-
-var _InnerShadow = require("./InnerShadow");
-
-Object.keys(_InnerShadow).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _InnerShadow[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _InnerShadow[key];
+      return _Shadow[key];
     }
   });
 });

package/lib/commonjs/renderer/components/imageFilters/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Blur\";\nexport * from \"./Offset\";\nexport * from \"./DisplacementMap\";\nexport * from \"./DropShadow\";\nexport * from \"./InnerShadow\";\nexport * from \"./Morphology\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from \"./Blur\";\nexport * from \"./Offset\";\nexport * from \"./DisplacementMap\";\nexport * from \"./Shadow\";\nexport * from \"./Morphology\";\n"]}

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

@@ -134,6 +134,19 @@ Object.keys(_processors).forEach(function (key) {
   });
 });
 
+var _Picture = require("./Picture");
+
+Object.keys(_Picture).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Picture[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Picture[key];
+    }
+  });
+});
+
 var _Group = require("./Group");
 
 Object.keys(_Group).forEach(function (key) {
@@ -199,15 +212,15 @@ Object.keys(_Blend).forEach(function (key) {
   });
 });
 
-var _Defs = require("./Defs");
+var _Drawing = require("./Drawing");
 
-Object.keys(_Defs).forEach(function (key) {
+Object.keys(_Drawing).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Defs[key]) return;
+  if (key in exports && exports[key] === _Drawing[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _Defs[key];
+      return _Drawing[key];
     }
   });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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\";\n\nexport * from \"./Group\";\nexport * from \"./Mask\";\nexport * from \"./Paint\";\nexport * from \"./Compose\";\nexport * from \"./Blend\";\nexport * from \"./Defs\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAEA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","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/commonjs/renderer/components/maskFilters/Blur.js

@@ -37,6 +37,6 @@ const BlurMask = props => {
 exports.BlurMask = BlurMask;
 BlurMask.defaultProps = {
   style: "normal",
-  respectCTM: false
+  respectCTM: true
 };
 //# sourceMappingURL=Blur.js.map

package/lib/commonjs/renderer/components/maskFilters/Blur.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Blur.tsx"],"names":["onDeclare","style","blur","respectCTM","Skia","MaskFilter","MakeBlur","BlurStyle","BlurMask","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;;;;;AASA,MAAMA,SAAS,GAAG,oCAChB,QAAiC;AAAA,MAAhC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA;AAAf,GAAgC;AAC/B,SAAOC,WAAKC,UAAL,CAAgBC,QAAhB,CACLC,sBAAU,yBAAQN,KAAR,CAAV,CADK,EAELC,IAFK,EAGLC,UAHK,CAAP;AAKD,CAPe,CAAlB;;AAUO,MAAMK,QAAQ,GAAIC,KAAD,IAAyC;AAC/D,sBAAO;AAAe,IAAA,SAAS,EAAET;AAA1B,KAAyCS,KAAzC,EAAP;AACD,CAFM;;;AAIPD,QAAQ,CAACE,YAAT,GAAwB;AACtBT,EAAAA,KAAK,EAAE,QADe;AAEtBE,EAAAA,UAAU,EAAE;AAFU,CAAxB","sourcesContent":["import React from \"react\";\n\nimport { BlurStyle } from \"../../../skia/MaskFilter\";\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { SkEnum } from \"../../processors\";\nimport { enumKey } from \"../../processors\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\n\nexport interface BlurMaskProps {\n  style: SkEnum<typeof BlurStyle>;\n  blur: number;\n  respectCTM: boolean;\n}\n\nconst onDeclare = createDeclaration<BlurMaskProps>(\n  ({ style, blur, respectCTM }) => {\n    return Skia.MaskFilter.MakeBlur(\n      BlurStyle[enumKey(style)],\n      blur,\n      respectCTM\n    );\n  }\n);\n\nexport const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nBlurMask.defaultProps = {\n  style: \"normal\",\n  respectCTM: false,\n};\n"]}
+{"version":3,"sources":["Blur.tsx"],"names":["onDeclare","style","blur","respectCTM","Skia","MaskFilter","MakeBlur","BlurStyle","BlurMask","props","defaultProps"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AACA;;AAEA;;;;;;AASA,MAAMA,SAAS,GAAG,oCAChB,QAAiC;AAAA,MAAhC;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA;AAAf,GAAgC;AAC/B,SAAOC,WAAKC,UAAL,CAAgBC,QAAhB,CACLC,sBAAU,yBAAQN,KAAR,CAAV,CADK,EAELC,IAFK,EAGLC,UAHK,CAAP;AAKD,CAPe,CAAlB;;AAUO,MAAMK,QAAQ,GAAIC,KAAD,IAAyC;AAC/D,sBAAO;AAAe,IAAA,SAAS,EAAET;AAA1B,KAAyCS,KAAzC,EAAP;AACD,CAFM;;;AAIPD,QAAQ,CAACE,YAAT,GAAwB;AACtBT,EAAAA,KAAK,EAAE,QADe;AAEtBE,EAAAA,UAAU,EAAE;AAFU,CAAxB","sourcesContent":["import React from \"react\";\n\nimport { BlurStyle } from \"../../../skia/MaskFilter\";\nimport { Skia } from \"../../../skia\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { SkEnum } from \"../../processors\";\nimport { enumKey } from \"../../processors\";\nimport type { AnimatedProps } from \"../../processors/Animations/Animations\";\n\nexport interface BlurMaskProps {\n  style: SkEnum<typeof BlurStyle>;\n  blur: number;\n  respectCTM: boolean;\n}\n\nconst onDeclare = createDeclaration<BlurMaskProps>(\n  ({ style, blur, respectCTM }) => {\n    return Skia.MaskFilter.MakeBlur(\n      BlurStyle[enumKey(style)],\n      blur,\n      respectCTM\n    );\n  }\n);\n\nexport const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nBlurMask.defaultProps = {\n  style: \"normal\",\n  respectCTM: true,\n};\n"]}

package/lib/commonjs/renderer/components/shapes/Box.js

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BoxShadow = exports.Box = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _skia = require("../../../skia");
+
+var _nodes = require("../../nodes");
+
+var _processors = require("../../processors");
+
+var _Rects = require("../../processors/Rects");
+
+var _Declaration = require("../../nodes/Declaration");
+
+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 inflate = function (box, dx, dy) {
+  let tx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let ty = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  return (0, _processors.rrect)((0, _Rects.rect)(box.rect.x - dx + tx, box.rect.y - dy + ty, box.rect.width + 2 * dx, box.rect.height + 2 * dy), box.rx + dx, box.ry + dy);
+};
+
+const deflate = function (box, dx, dy) {
+  let tx = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  let ty = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+  return inflate(box, -dx, -dy, tx, ty);
+};
+
+const onDeclare = (0, _Declaration.createDeclaration)(_ref => {
+  let {
+    dx,
+    dy,
+    spread,
+    blur,
+    color,
+    inner
+  } = _ref;
+  return {
+    dx,
+    dy,
+    spread,
+    blur,
+    color,
+    inner,
+    __typename__: "BoxShadow"
+  };
+});
+
+const BoxShadow = props => {
+  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
+    onDeclare: onDeclare
+  }, props));
+};
+
+exports.BoxShadow = BoxShadow;
+
+const isBoxShadow = s => s.__typename__ === "BoxShadow";
+
+const onDraw = (0, _nodes.createDrawing)((ctx, _ref2, node) => {
+  let {
+    box: defaultBox
+  } = _ref2;
+  const box = (0, _Rects.isRRect)(defaultBox) ? defaultBox : (0, _processors.rrect)(defaultBox, 0, 0);
+  const {
+    canvas,
+    paint,
+    opacity
+  } = ctx;
+  const shadows = node.visit(ctx).filter(isBoxShadow);
+  shadows.filter(shadow => !shadow.inner).map(shadow => {
+    const {
+      color = "black",
+      blur,
+      spread = 0,
+      dx = 0,
+      dy = 0
+    } = shadow;
+
+    const lPaint = _skia.Skia.Paint();
+
+    lPaint.setColor((0, _skia.processColor)(color, opacity));
+    lPaint.setMaskFilter(_skia.Skia.MaskFilter.MakeBlur(_skia.BlurStyle.Normal, blur, true));
+    canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);
+  });
+  canvas.drawRRect(box, paint);
+  shadows.filter(shadow => shadow.inner).map(shadow => {
+    const {
+      color = "black",
+      blur,
+      spread = 0,
+      dx = 0,
+      dy = 0
+    } = shadow;
+    const delta = (0, _processors.add)((0, _processors.vec)(10, 10), (0, _processors.vec)(Math.abs(dx), Math.abs(dy)));
+    canvas.save();
+    canvas.clipRRect(box, _skia.ClipOp.Intersect, false);
+
+    const lPaint = _skia.Skia.Paint();
+
+    lPaint.setColor((0, _skia.processColor)(color, opacity));
+    lPaint.setMaskFilter(_skia.Skia.MaskFilter.MakeBlur(_skia.BlurStyle.Normal, blur, true));
+    const inner = deflate(box, spread, spread, dx, dy);
+    const outer = inflate(box, delta.x, delta.y);
+    canvas.drawDRRect(outer, inner, lPaint);
+    canvas.restore();
+  });
+});
+
+const Box = props => {
+  return /*#__PURE__*/_react.default.createElement("skDrawing", _extends({
+    onDraw: onDraw
+  }, props));
+};
+
+exports.Box = Box;
+Box.defaultProps = {
+  shadows: []
+};
+//# sourceMappingURL=Box.js.map