@shopify/react-native-skia 0.1.116 → 0.1.118

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) {
@@ -211,4 +224,17 @@ Object.keys(_Defs).forEach(function (key) {
     }
   });
 });
+
+var _Drawing = require("./Drawing");
+
+Object.keys(_Drawing).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Drawing[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Drawing[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

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;;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 \"./Defs\";\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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Box.tsx"],"names":["inflate","box","dx","dy","tx","ty","rect","x","y","width","height","rx","ry","deflate","onDeclare","spread","blur","color","inner","__typename__","BoxShadow","props","isBoxShadow","s","onDraw","ctx","node","defaultBox","canvas","paint","opacity","shadows","visit","filter","shadow","map","lPaint","Skia","Paint","setColor","setMaskFilter","MaskFilter","MakeBlur","BlurStyle","Normal","drawRRect","delta","Math","abs","save","clipRRect","ClipOp","Intersect","outer","drawDRRect","restore","Box","defaultProps"],"mappings":"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","sourcesContent":["import React from \"react\";\n\nimport type { Color, SkRRect } from \"../../../skia\";\nimport { ClipOp, BlurStyle, Skia, processColor } from \"../../../skia\";\nimport { createDrawing } from \"../../nodes\";\nimport type { AnimatedProps, CustomPaintProps } from \"../../processors\";\nimport { add, vec, rrect } from \"../../processors\";\nimport { rect, isRRect } from \"../../processors/Rects\";\nimport { createDeclaration } from \"../../nodes/Declaration\";\nimport type { SkJSIInstance } from \"../../../skia/JsiInstance\";\nimport type { SkRect } from \"../../../skia/Rect\";\n\nconst inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>\n  rrect(\n    rect(\n      box.rect.x - dx + tx,\n      box.rect.y - dy + ty,\n      box.rect.width + 2 * dx,\n      box.rect.height + 2 * dy\n    ),\n    box.rx + dx,\n    box.ry + dy\n  );\n\nconst deflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>\n  inflate(box, -dx, -dy, tx, ty);\n\ninterface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n\ninterface BoxShadowDecl extends BoxShadowProps, SkJSIInstance<\"BoxShadow\"> {}\n\nconst onDeclare = createDeclaration<BoxShadowProps>(\n  ({ dx, dy, spread, blur, color, inner }) => {\n    return { dx, dy, spread, blur, color, inner, __typename__: \"BoxShadow\" };\n  }\n);\n\nexport const BoxShadow = (props: AnimatedProps<BoxShadowProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n\nconst isBoxShadow = (s: SkJSIInstance<string>): s is BoxShadowDecl =>\n  s.__typename__ === \"BoxShadow\";\n\ninterface BoxProps extends CustomPaintProps {\n  box: SkRRect | SkRect;\n}\n\nconst onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {\n  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);\n  const { canvas, paint, opacity } = ctx;\n  const shadows = node.visit(ctx).filter<BoxShadowDecl>(isBoxShadow);\n  shadows\n    .filter((shadow) => !shadow.inner)\n    .map((shadow) => {\n      const { color = \"black\", blur, spread = 0, dx = 0, dy = 0 } = shadow;\n      const lPaint = Skia.Paint();\n      lPaint.setColor(processColor(color, opacity));\n      lPaint.setMaskFilter(\n        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)\n      );\n      canvas.drawRRect(inflate(box, spread, spread, dx, dy), lPaint);\n    });\n  canvas.drawRRect(box, paint);\n\n  shadows\n    .filter((shadow) => shadow.inner)\n    .map((shadow) => {\n      const { color = \"black\", blur, spread = 0, dx = 0, dy = 0 } = shadow;\n      const delta = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));\n      canvas.save();\n      canvas.clipRRect(box, ClipOp.Intersect, false);\n      const lPaint = Skia.Paint();\n      lPaint.setColor(processColor(color, opacity));\n      lPaint.setMaskFilter(\n        Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)\n      );\n      const inner = deflate(box, spread, spread, dx, dy);\n      const outer = inflate(box, delta.x, delta.y);\n      canvas.drawDRRect(outer, inner, lPaint);\n      canvas.restore();\n    });\n});\n\nexport const Box = (props: AnimatedProps<BoxProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} />;\n};\n\nBox.defaultProps = {\n  shadows: [],\n};\n"]}

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

@@ -159,4 +159,17 @@ Object.keys(_FitBox).forEach(function (key) {
     }
   });
 });
+
+var _Box = require("./Box");
+
+Object.keys(_Box).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Box[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Box[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/renderer/components/shapes/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;;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 \"./Circle\";\nexport * from \"./Rect\";\nexport * from \"./RoundedRect\";\nexport * from \"./DiffRect\";\nexport * from \"./Line\";\nexport * from \"./Path\";\nexport * from \"./Oval\";\nexport * from \"./Points\";\nexport * from \"./Patch\";\nexport * from \"./Vertices\";\nexport * from \"./Fill\";\nexport * from \"./FitBox\";\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;;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 \"./Circle\";\nexport * from \"./Rect\";\nexport * from \"./RoundedRect\";\nexport * from \"./DiffRect\";\nexport * from \"./Line\";\nexport * from \"./Path\";\nexport * from \"./Oval\";\nexport * from \"./Points\";\nexport * from \"./Patch\";\nexport * from \"./Vertices\";\nexport * from \"./Fill\";\nexport * from \"./FitBox\";\nexport * from \"./Box\";\n"]}

package/lib/commonjs/renderer/index.js

@@ -42,4 +42,17 @@ Object.keys(_nodes).forEach(function (key) {
     }
   });
 });
+
+var _useContextBridge = require("./useContextBridge");
+
+Object.keys(_useContextBridge).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useContextBridge[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useContextBridge[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/lib/commonjs/renderer/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","sourcesContent":["export * from \"./Canvas\";\nexport * from \"./components\";\nexport * from \"./nodes\";\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","sourcesContent":["export * from \"./Canvas\";\nexport * from \"./components\";\nexport * from \"./nodes\";\nexport * from \"./useContextBridge\";\n"]}

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

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createDeclaration = exports.DeclarationNode = void 0;
+exports.useDeclaration = exports.createDeclaration = exports.DeclarationNode = void 0;
+
+var _react = require("react");
 
 var _processors = require("../processors");
 
@@ -15,6 +17,11 @@ const createDeclaration = cb => cb;
 
 exports.createDeclaration = createDeclaration;
 
+const useDeclaration = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
+(0, _react.useCallback)(cb, deps !== null && deps !== void 0 ? deps : []);
+
+exports.useDeclaration = useDeclaration;
+
 class DeclarationNode extends _Node.Node {
   constructor(depMgr, onDeclare, props) {
     super(depMgr, props);

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

@@ -1 +1 @@
-{"version":3,"sources":["Declaration.tsx"],"names":["createDeclaration","cb","DeclarationNode","Node","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;;;;;;AAGA;;AAGA;;;;AAUO,MAAMA,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;;;;AAQA,MAAMC,eAAN,SAAiCC,UAAjC,CAAyC;AAG9CC,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAAC,4BAAWD,KAAX,CAApB;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAAC,4BAAWD,KAAX,CAAnB;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,GAAG,6BAAY,KAAKA,KAAjB,CAAd;AACA,UAAMO,GAAG,GAAG,KAAKR,SAAL,CAAeC,KAAf,EAAsBK,QAAtB,EAAgCD,GAAhC,CAAZ;AACA,WAAOG,GAAP;AACD;;AA3B6C","sourcesContent":["import 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 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":["createDeclaration","cb","useDeclaration","deps","DeclarationNode","Node","constructor","depMgr","onDeclare","props","memoizable","_props","draw","ctx","children","visit","obj"],"mappings":";;;;;;;AACA;;AAKA;;AAGA;;;;AAUO,MAAMA,iBAAiB,GAC5BC,EAD+B,IAEJA,EAFtB;;;;AAIA,MAAMC,cAAc,GAAG,CAC5BD,EAD4B,EAE5BE,IAF4B,KAI5B;AACA,wBAAYF,EAAZ,EAAgBE,IAAhB,aAAgBA,IAAhB,cAAgBA,IAAhB,GAAwB,EAAxB,CALK;;;;AAWA,MAAMC,eAAN,SAAiCC,UAAjC,CAAyC;AAG9CC,EAAAA,WAAW,CACTC,MADS,EAETC,SAFS,EAGTC,KAHS,EAIT;AACA,UAAMF,MAAN,EAAcE,KAAd;;AADA;;AAEA,UAAMC,UAAN,GAAmB,CAAC,4BAAWD,KAAX,CAApB;AACA,SAAKD,SAAL,GAAiBA,SAAjB;AACD;;AAEQ,MAALC,KAAK,CAACA,KAAD,EAA0B;AACjC,SAAKC,UAAL,GAAkB,CAAC,4BAAWD,KAAX,CAAnB;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,GAAG,6BAAY,KAAKA,KAAjB,CAAd;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"]}

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createDrawing = exports.DrawingNode = exports.Drawing = void 0;
+exports.useDrawing = exports.createDrawing = exports.DrawingNode = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("react");
 
 var _processors = require("../processors");
 
@@ -15,19 +15,16 @@ var _skia = require("../../skia");
 
 var _Node = require("./Node");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 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; }
 
 const createDrawing = cb => cb;
 
 exports.createDrawing = createDrawing;
 
-const Drawing = props => {
-  return /*#__PURE__*/_react.default.createElement("skDrawing", props);
-};
+const useDrawing = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
+(0, _react.useCallback)(cb, deps !== null && deps !== void 0 ? deps : []);
 
-exports.Drawing = Drawing;
+exports.useDrawing = useDrawing;
 
 class DrawingNode extends _Node.Node {
   constructor(depMgr, onDraw, skipProcessing, props) {

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

@@ -1 +1 @@
-{"version":3,"sources":["Drawing.tsx"],"names":["createDrawing","cb","Drawing","props","DrawingNode","Node","constructor","depMgr","onDraw","skipProcessing","draw","ctx","drawingProps","selectedPaint","paint","opacity","children","map","child","ret","filter","isPaint","forEach"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;AAGA;;;;;;AAUO,MAAMA,aAAa,GAAQC,EAAL,IAC3BA,EADK;;;;AASA,MAAMC,OAAO,GAAQC,KAAL,IAAgC;AACrD,sBAAO,0CAAeA,KAAf,CAAP;AACD,CAFM;;;;AAIA,MAAMC,WAAN,SAA6BC,UAA7B,CAAqC;AAI1CC,EAAAA,WAAW,CACTC,MADS,EAETC,MAFS,EAGTC,cAHS,EAITN,KAJS,EAKT;AACA,UAAMI,MAAN,EAAcJ,KAAd;;AADA;;AAAA;;AAEA,SAAKK,MAAL,GAAcA,MAAd;AACA,SAAKC,cAAL,GAAsBA,cAAtB;AACD;;AAEDC,EAAAA,IAAI,CAACC,GAAD,EAAsB;AACxB,UAAMC,YAAY,GAAG,6BAAY,KAAKT,KAAjB,CAArB;;AACA,QAAI,KAAKM,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYG,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,aAAa,GAAG,6BAAYF,GAAG,CAACG,KAAhB,EAAuBF,YAAvB,CAAtB;AACA,oCAAaC,aAAb,EAA4BF,GAAG,CAACI,OAAhC,EAAyCH,YAAzC,EAFK,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,CAUOC,aAVP,CAFL,EAaEC,OAbF,CAaWR,KAAD,IAAW;AACnB,aAAKN,MAAL,CAAY,EAAE,GAAGG,GAAL;AAAUG,UAAAA;AAAV,SAAZ,EAA+BF,YAA/B,EAA6C,IAA7C;AACD,OAfD;AAgBD;AACF;;AAzCyC","sourcesContent":["import type { ReactNode } from \"react\";\nimport React 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 type DrawingProps<T> = {\n  onDraw: DrawingCallback<T>;\n  skipProcessing?: boolean;\n  children?: ReactNode | ReactNode[];\n};\n\nexport const Drawing = <P,>(props: DrawingProps<P>) => {\n  return <skDrawing {...props} />;\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":["createDrawing","cb","useDrawing","deps","DrawingNode","Node","constructor","depMgr","onDraw","skipProcessing","props","draw","ctx","drawingProps","selectedPaint","paint","opacity","children","map","child","ret","filter","isPaint","forEach"],"mappings":";;;;;;;AACA;;AAGA;;AAEA;;AACA;;AAGA;;;;AAUO,MAAMA,aAAa,GAAQC,EAAL,IAC3BA,EADK;;;;AAGA,MAAMC,UAAU,GAAG,CAAKD,EAAL,EAA4BE,IAA5B,KACxB;AACA,wBAAYF,EAAZ,EAAgBE,IAAhB,aAAgBA,IAAhB,cAAgBA,IAAhB,GAAwB,EAAxB,CAFK;;;;AAUA,MAAMC,WAAN,SAA6BC,UAA7B,CAAqC;AAI1CC,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,GAAG,6BAAY,KAAKH,KAAjB,CAArB;;AACA,QAAI,KAAKD,cAAT,EAAyB;AACvB,WAAKD,MAAL,CAAYI,GAAZ,EAAiBC,YAAjB,EAA+B,IAA/B;AACD,KAFD,MAEO;AACL,YAAMC,aAAa,GAAG,6BAAYF,GAAG,CAACG,KAAhB,EAAuBF,YAAvB,CAAtB;AACA,oCAAaC,aAAb,EAA4BF,GAAG,CAACI,OAAhC,EAAyCH,YAAzC,EAFK,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,CAUOC,aAVP,CAFL,EAaEC,OAbF,CAaWR,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"]}

package/lib/commonjs/renderer/processors/math/Math.js

@@ -3,9 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.mix = void 0;
+exports.mix = exports.clamp = void 0;
 
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 const mix = (value, x, y) => x * (1 - value) + y * value;
+/**
+ *  @summary Clamps a node with a lower and upper bound.
+ *  @example
+    clamp(-1, 0, 100); // 0
+    clamp(1, 0, 100); // 1
+    clamp(101, 0, 100); // 100
+  */
+
 
 exports.mix = mix;
+
+const clamp = (value, lowerBound, upperBound) => Math.min(Math.max(lowerBound, value), upperBound);
+
+exports.clamp = clamp;
 //# sourceMappingURL=Math.js.map

package/lib/commonjs/renderer/processors/math/Math.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Math.ts"],"names":["mix","value","x","y"],"mappings":";;;;;;;AAAO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KACjBD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KADjB","sourcesContent":["export const mix = (value: number, x: number, y: number) =>\n  x * (1 - value) + y * value;\n"]}
+{"version":3,"sources":["Math.ts"],"names":["mix","value","x","y","clamp","lowerBound","upperBound","Math","min","max"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,GAAG,GAAG,CAACC,KAAD,EAAgBC,CAAhB,EAA2BC,CAA3B,KACjBD,CAAC,IAAI,IAAID,KAAR,CAAD,GAAkBE,CAAC,GAAGF,KADjB;AAGP;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACO,MAAMG,KAAK,GAAG,CAACH,KAAD,EAAgBI,UAAhB,EAAoCC,UAApC,KACnBC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASJ,UAAT,EAAqBJ,KAArB,CAAT,EAAsCK,UAAtC,CADK","sourcesContent":["/**\n * Linear interpolation\n * @param value\n * @param x\n * @param y\n */\nexport const mix = (value: number, x: number, y: number) =>\n  x * (1 - value) + y * value;\n\n/**\n *  @summary Clamps a node with a lower and upper bound.\n *  @example\n    clamp(-1, 0, 100); // 0\n    clamp(1, 0, 100); // 1\n    clamp(101, 0, 100); // 100\n  */\nexport const clamp = (value: number, lowerBound: number, upperBound: number) =>\n  Math.min(Math.max(lowerBound, value), upperBound);\n"]}