@shopify/react-native-skia 0.1.115 → 0.1.119

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

@@ -0,0 +1,102 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from "react";
+import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import { createDrawing } from "../../nodes";
+import { add, vec, rrect } from "../../processors";
+import { rect, isRRect } from "../../processors/Rects";
+import { createDeclaration } from "../../nodes/Declaration";
+
+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 rrect(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 = createDeclaration(_ref => {
+  let {
+    dx,
+    dy,
+    spread,
+    blur,
+    color,
+    inner
+  } = _ref;
+  return {
+    dx,
+    dy,
+    spread,
+    blur,
+    color,
+    inner,
+    __typename__: "BoxShadow"
+  };
+});
+export const BoxShadow = props => {
+  return /*#__PURE__*/React.createElement("skDeclaration", _extends({
+    onDeclare: onDeclare
+  }, props));
+};
+
+const isBoxShadow = s => s.__typename__ === "BoxShadow";
+
+const onDraw = createDrawing((ctx, _ref2, node) => {
+  let {
+    box: defaultBox
+  } = _ref2;
+  const box = isRRect(defaultBox) ? defaultBox : 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.Paint();
+    lPaint.setColor(processColor(color, opacity));
+    lPaint.setMaskFilter(Skia.MaskFilter.MakeBlur(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 = add(vec(10, 10), vec(Math.abs(dx), Math.abs(dy)));
+    canvas.save();
+    canvas.clipRRect(box, ClipOp.Intersect, false);
+    const lPaint = Skia.Paint();
+    lPaint.setColor(processColor(color, opacity));
+    lPaint.setMaskFilter(Skia.MaskFilter.MakeBlur(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();
+  });
+});
+export const Box = props => {
+  return /*#__PURE__*/React.createElement("skDrawing", _extends({
+    onDraw: onDraw
+  }, props));
+};
+Box.defaultProps = {
+  shadows: []
+};
+//# sourceMappingURL=Box.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Box.tsx"],"names":["React","ClipOp","BlurStyle","Skia","processColor","createDrawing","add","vec","rrect","rect","isRRect","createDeclaration","inflate","box","dx","dy","tx","ty","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","Paint","setColor","setMaskFilter","MaskFilter","MakeBlur","Normal","drawRRect","delta","Math","abs","save","clipRRect","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/module/renderer/components/shapes/FitBox.js

@@ -1,6 +1,10 @@
 import React, { useMemo } from "react";
 import { rect2rect, fitRects } from "../image";
 import { Group } from "../Group";
+export const fitbox = (fit, src, dst) => {
+  const rects = fitRects(fit, src, dst);
+  return rect2rect(rects.src, rects.dst);
+};
 export const FitBox = _ref => {
   let {
     fit,
@@ -8,10 +12,7 @@ export const FitBox = _ref => {
     dst,
     children
   } = _ref;
-  const transform = useMemo(() => {
-    const rects = fitRects(fit, src, dst);
-    return rect2rect(rects.src, rects.dst);
-  }, [dst, fit, src]);
+  const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);
   return /*#__PURE__*/React.createElement(Group, {
     transform: transform
   }, children);

package/lib/module/renderer/components/shapes/FitBox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["FitBox.tsx"],"names":["React","useMemo","rect2rect","fitRects","Group","FitBox","fit","src","dst","children","transform","rects","defaultProps"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AAGA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,UAApC;AAEA,SAASC,KAAT,QAAsB,UAAtB;AASA,OAAO,MAAMC,MAAM,GAAG,QAA2C;AAAA,MAA1C;AAAEC,IAAAA,GAAF;AAAOC,IAAAA,GAAP;AAAYC,IAAAA,GAAZ;AAAiBC,IAAAA;AAAjB,GAA0C;AAC/D,QAAMC,SAAS,GAAGT,OAAO,CAAC,MAAM;AAC9B,UAAMU,KAAK,GAAGR,QAAQ,CAACG,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAAtB;AACA,WAAON,SAAS,CAACS,KAAK,CAACJ,GAAP,EAAYI,KAAK,CAACH,GAAlB,CAAhB;AACD,GAHwB,EAGtB,CAACA,GAAD,EAAMF,GAAN,EAAWC,GAAX,CAHsB,CAAzB;AAIA,sBAAO,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAEG;AAAlB,KAA8BD,QAA9B,CAAP;AACD,CANM;AAQPJ,MAAM,CAACO,YAAP,GAAsB;AACpBN,EAAAA,GAAG,EAAE;AADe,CAAtB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../image\";\nimport { rect2rect, fitRects } from \"../image\";\nimport type { SkRect } from \"../../../skia\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n  fit: Fit;\n  src: SkRect;\n  dst: SkRect;\n  children: ReactNode | ReactNode[];\n}\n\nexport const FitBox = ({ fit, src, dst, children }: FitProps) => {\n  const transform = useMemo(() => {\n    const rects = fitRects(fit, src, dst);\n    return rect2rect(rects.src, rects.dst);\n  }, [dst, fit, src]);\n  return <Group transform={transform}>{children}</Group>;\n};\n\nFitBox.defaultProps = {\n  fit: \"contain\",\n};\n"]}
+{"version":3,"sources":["FitBox.tsx"],"names":["React","useMemo","rect2rect","fitRects","Group","fitbox","fit","src","dst","rects","FitBox","children","transform","defaultProps"],"mappings":"AACA,OAAOA,KAAP,IAAgBC,OAAhB,QAA+B,OAA/B;AAGA,SAASC,SAAT,EAAoBC,QAApB,QAAoC,UAApC;AAEA,SAASC,KAAT,QAAsB,UAAtB;AASA,OAAO,MAAMC,MAAM,GAAG,CAACC,GAAD,EAAWC,GAAX,EAAwBC,GAAxB,KAAwC;AAC5D,QAAMC,KAAK,GAAGN,QAAQ,CAACG,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAAtB;AACA,SAAON,SAAS,CAACO,KAAK,CAACF,GAAP,EAAYE,KAAK,CAACD,GAAlB,CAAhB;AACD,CAHM;AAKP,OAAO,MAAME,MAAM,GAAG,QAA2C;AAAA,MAA1C;AAAEJ,IAAAA,GAAF;AAAOC,IAAAA,GAAP;AAAYC,IAAAA,GAAZ;AAAiBG,IAAAA;AAAjB,GAA0C;AAC/D,QAAMC,SAAS,GAAGX,OAAO,CAAC,MAAMI,MAAM,CAACC,GAAD,EAAMC,GAAN,EAAWC,GAAX,CAAb,EAA8B,CAACA,GAAD,EAAMF,GAAN,EAAWC,GAAX,CAA9B,CAAzB;AACA,sBAAO,oBAAC,KAAD;AAAO,IAAA,SAAS,EAAEK;AAAlB,KAA8BD,QAA9B,CAAP;AACD,CAHM;AAKPD,MAAM,CAACG,YAAP,GAAsB;AACpBP,EAAAA,GAAG,EAAE;AADe,CAAtB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport type { Fit } from \"../image\";\nimport { rect2rect, fitRects } from \"../image\";\nimport type { SkRect } from \"../../../skia\";\nimport { Group } from \"../Group\";\n\ninterface FitProps {\n  fit: Fit;\n  src: SkRect;\n  dst: SkRect;\n  children: ReactNode | ReactNode[];\n}\n\nexport const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {\n  const rects = fitRects(fit, src, dst);\n  return rect2rect(rects.src, rects.dst);\n};\n\nexport const FitBox = ({ fit, src, dst, children }: FitProps) => {\n  const transform = useMemo(() => fitbox(fit, src, dst), [dst, fit, src]);\n  return <Group transform={transform}>{children}</Group>;\n};\n\nFitBox.defaultProps = {\n  fit: \"contain\",\n};\n"]}

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

@@ -10,4 +10,5 @@ export * from "./Patch";
 export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
+export * from "./Box";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,QAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd","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,cAAc,UAAd;AACA,cAAc,QAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,OAAd","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/module/renderer/index.js

@@ -1,4 +1,5 @@
 export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
+export * from "./useContextBridge";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd","sourcesContent":["export * from \"./Canvas\";\nexport * from \"./components\";\nexport * from \"./nodes\";\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,oBAAd","sourcesContent":["export * from \"./Canvas\";\nexport * from \"./components\";\nexport * from \"./nodes\";\nexport * from \"./useContextBridge\";\n"]}

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

@@ -1,8 +1,12 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+import { useCallback } from "react";
 import { isAnimated, materialize } from "../processors";
 import { Node } from "./Node";
 export const createDeclaration = cb => cb;
+export const useDeclaration = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
+useCallback(cb, deps !== null && deps !== void 0 ? deps : []);
+export const isDeclarationNode = node => node instanceof DeclarationNode;
 export class DeclarationNode extends Node {
   constructor(depMgr, onDeclare, props) {
     super(depMgr, props);

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

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

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

@@ -1,14 +1,13 @@
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import React from "react";
-import { processPaint, selectPaint } from "../processors";
+import { useCallback } from "react";
+import { processPaint } from "../processors";
 import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia";
 import { Node } from "./Node";
 export const createDrawing = cb => cb;
-export const Drawing = props => {
-  return /*#__PURE__*/React.createElement("skDrawing", props);
-};
+export const useDrawing = (cb, deps) => // eslint-disable-next-line react-hooks/exhaustive-deps
+useCallback(cb, deps !== null && deps !== void 0 ? deps : []);
 export class DrawingNode extends Node {
   constructor(depMgr, onDraw, skipProcessing, props) {
     super(depMgr, props);
@@ -27,23 +26,11 @@ export class DrawingNode extends Node {
     if (this.skipProcessing) {
       this.onDraw(ctx, drawingProps, this);
     } else {
-      const selectedPaint = selectPaint(ctx.paint, drawingProps);
-      processPaint(selectedPaint, ctx.opacity, drawingProps); // to draw only once:
-      // onDraw({ ...ctx, paint: selectedPaint }, children);
-
-      [selectedPaint, ...this.children.map(child => {
-        //if (child.type === NodeType.Declaration) {
-        const ret = child.draw(ctx);
-
-        if (ret) {
-          return ret;
-        } //}
-
-
-        return null;
-      }).filter(isPaint)].forEach(paint => {
+      const declarations = this.visit(ctx);
+      const paint = processPaint(ctx.paint.copy(), ctx.opacity, drawingProps, declarations);
+      [paint, ...declarations.filter(isPaint)].forEach(currentPaint => {
         this.onDraw({ ...ctx,
-          paint
+          paint: currentPaint
         }, drawingProps, this);
       });
     }

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

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

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

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

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

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

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

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

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

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

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

@@ -1,2 +1,17 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export 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
+  */
+
+export const clamp = (value, lowerBound, upperBound) => Math.min(Math.max(lowerBound, value), upperBound);
 //# sourceMappingURL=Math.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["Math.ts"],"names":["mix","value","x","y"],"mappings":"AAAA,OAAO,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;AACA,OAAO,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;;AACA,OAAO,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"]}

package/lib/module/renderer/processors/math/Matrix3.js

@@ -26,11 +26,15 @@ const multiply3 = (m1, m2) => {
   return [[dot3(m1[0], col0), dot3(m1[0], col1), dot3(m1[0], col2)], [dot3(m1[1], col0), dot3(m1[1], col1), dot3(m1[1], col2)], [dot3(m1[2], col0), dot3(m1[2], col1), dot3(m1[2], col2)]];
 };
 
+export const matrixVecMul3 = (m, v) => [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)];
+
 const skiaMatrix3 = m => {
   return [m[0][0], m[0][1], m[0][2], m[1][0], m[1][1], m[1][2], m[2][0], m[2][1], m[2][2]];
 };
 
-export const processTransform2d = transforms => skiaMatrix3(transforms.reduce((acc, transform) => {
+export const processTransform2d = transforms => skiaMatrix3(processTransform(transforms));
+
+const processTransform = transforms => transforms.reduce((acc, transform) => {
   const key = Object.keys(transform)[0];
   const value = transform[key];
 
@@ -67,5 +71,5 @@ export const processTransform2d = transforms => skiaMatrix3(transforms.reduce((a
   }
 
   return exhaustiveCheck(key);
-}, identityMatrix));
+}, identityMatrix);
 //# sourceMappingURL=Matrix3.js.map

package/lib/module/renderer/processors/math/Matrix3.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Matrix3.ts"],"names":["exhaustiveCheck","identityMatrix","translateXMatrix","x","translateYMatrix","y","scaleMatrix","s","scaleXMatrix","scaleYMatrix","skewXMatrix","Math","tan","skewYMatrix","rotateZMatrix","r","cos","sin","dot3","row","col","multiply3","m1","m2","col0","col1","col2","skiaMatrix3","m","processTransform2d","transforms","reduce","acc","transform","key","Object","keys","value"],"mappings":"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","sourcesContent":["import { exhaustiveCheck } from \"../../typeddash\";\nimport type { SkMatrix } from \"../../../skia/Matrix\";\n\nexport type Vec3 = readonly [number, number, number];\n\nexport type Matrix3 = readonly [Vec3, Vec3, Vec3];\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nconst identityMatrix: Matrix3 = [\n  [1, 0, 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst translateXMatrix = (x: number): Matrix3 => [\n  [1, 0, x],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst translateYMatrix = (y: number): Matrix3 => [\n  [1, 0, 0],\n  [0, 1, y],\n  [0, 0, 1],\n];\n\nconst scaleMatrix = (s: number): Matrix3 => [\n  [s, 0, 0],\n  [0, s, 0],\n  [0, 0, 1],\n];\n\nconst scaleXMatrix = (s: number): Matrix3 => [\n  [s, 0, 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst scaleYMatrix = (s: number): Matrix3 => [\n  [1, 0, 0],\n  [0, s, 0],\n  [0, 0, 1],\n];\n\nconst skewXMatrix = (s: number): Matrix3 => [\n  [1, Math.tan(s), 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst skewYMatrix = (s: number): Matrix3 => [\n  [1, 0, 0],\n  [Math.tan(s), 1, 0],\n  [0, 0, 1],\n];\n\nconst rotateZMatrix = (r: number): Matrix3 => [\n  [Math.cos(r), -1 * Math.sin(r), 0],\n  [Math.sin(r), Math.cos(r), 0],\n  [0, 0, 1],\n];\n\nconst dot3 = (row: Vec3, col: Vec3) =>\n  row[0] * col[0] + row[1] * col[1] + row[2] * col[2];\n\nconst multiply3 = (m1: Matrix3, m2: Matrix3) => {\n  const col0 = [m2[0][0], m2[1][0], m2[2][0]] as const;\n  const col1 = [m2[0][1], m2[1][1], m2[2][1]] as const;\n  const col2 = [m2[0][2], m2[1][2], m2[2][2]] as const;\n  return [\n    [dot3(m1[0], col0), dot3(m1[0], col1), dot3(m1[0], col2)],\n    [dot3(m1[1], col0), dot3(m1[1], col1), dot3(m1[1], col2)],\n    [dot3(m1[2], col0), dot3(m1[2], col1), dot3(m1[2], col2)],\n  ] as const;\n};\n\nconst skiaMatrix3 = (m: Matrix3): SkMatrix => {\n  return [\n    m[0][0],\n    m[0][1],\n    m[0][2],\n    m[1][0],\n    m[1][1],\n    m[1][2],\n    m[2][0],\n    m[2][1],\n    m[2][2],\n  ];\n};\n\nexport const processTransform2d = (transforms: Transforms2d) =>\n  skiaMatrix3(\n    transforms.reduce((acc, transform) => {\n      const key = Object.keys(transform)[0] as Transform2dName;\n      const value = (transform as Pick<Transformations, typeof key>)[key];\n      if (key === \"translateX\") {\n        return multiply3(acc, translateXMatrix(value));\n      }\n      if (key === \"translateY\") {\n        return multiply3(acc, translateYMatrix(value));\n      }\n      if (key === \"scale\") {\n        return multiply3(acc, scaleMatrix(value));\n      }\n      if (key === \"scaleX\") {\n        return multiply3(acc, scaleXMatrix(value));\n      }\n      if (key === \"scaleY\") {\n        return multiply3(acc, scaleYMatrix(value));\n      }\n      if (key === \"skewX\") {\n        return multiply3(acc, skewXMatrix(value));\n      }\n      if (key === \"skewY\") {\n        return multiply3(acc, skewYMatrix(value));\n      }\n      if (key === \"rotate\" || key === \"rotateZ\") {\n        return multiply3(acc, rotateZMatrix(value));\n      }\n      return exhaustiveCheck(key);\n    }, identityMatrix)\n  );\n"]}
+{"version":3,"sources":["Matrix3.ts"],"names":["exhaustiveCheck","identityMatrix","translateXMatrix","x","translateYMatrix","y","scaleMatrix","s","scaleXMatrix","scaleYMatrix","skewXMatrix","Math","tan","skewYMatrix","rotateZMatrix","r","cos","sin","dot3","row","col","multiply3","m1","m2","col0","col1","col2","matrixVecMul3","m","v","skiaMatrix3","processTransform2d","transforms","processTransform","reduce","acc","transform","key","Object","keys","value"],"mappings":"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","sourcesContent":["import { exhaustiveCheck } from \"../../typeddash\";\nimport type { SkMatrix } from \"../../../skia/Matrix\";\n\nexport type Vec3 = readonly [number, number, number];\n\nexport type Matrix3 = readonly [Vec3, Vec3, Vec3];\n\ntype Transform2dName =\n  | \"translateX\"\n  | \"translateY\"\n  | \"scale\"\n  | \"skewX\"\n  | \"skewY\"\n  | \"scaleX\"\n  | \"scaleY\"\n  | \"rotateZ\"\n  | \"rotate\";\n\nexport interface TransformProp {\n  transform?: Transforms2d;\n}\n\ntype Transformations = {\n  readonly [Name in Transform2dName]: number;\n};\nexport type Transforms2d = readonly (\n  | Pick<Transformations, \"translateX\">\n  | Pick<Transformations, \"translateY\">\n  | Pick<Transformations, \"scale\">\n  | Pick<Transformations, \"scaleX\">\n  | Pick<Transformations, \"scaleY\">\n  | Pick<Transformations, \"skewX\">\n  | Pick<Transformations, \"skewY\">\n  | Pick<Transformations, \"rotate\">\n)[];\n\nconst identityMatrix: Matrix3 = [\n  [1, 0, 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst translateXMatrix = (x: number): Matrix3 => [\n  [1, 0, x],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst translateYMatrix = (y: number): Matrix3 => [\n  [1, 0, 0],\n  [0, 1, y],\n  [0, 0, 1],\n];\n\nconst scaleMatrix = (s: number): Matrix3 => [\n  [s, 0, 0],\n  [0, s, 0],\n  [0, 0, 1],\n];\n\nconst scaleXMatrix = (s: number): Matrix3 => [\n  [s, 0, 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst scaleYMatrix = (s: number): Matrix3 => [\n  [1, 0, 0],\n  [0, s, 0],\n  [0, 0, 1],\n];\n\nconst skewXMatrix = (s: number): Matrix3 => [\n  [1, Math.tan(s), 0],\n  [0, 1, 0],\n  [0, 0, 1],\n];\n\nconst skewYMatrix = (s: number): Matrix3 => [\n  [1, 0, 0],\n  [Math.tan(s), 1, 0],\n  [0, 0, 1],\n];\n\nconst rotateZMatrix = (r: number): Matrix3 => [\n  [Math.cos(r), -1 * Math.sin(r), 0],\n  [Math.sin(r), Math.cos(r), 0],\n  [0, 0, 1],\n];\n\nconst dot3 = (row: Vec3, col: Vec3) =>\n  row[0] * col[0] + row[1] * col[1] + row[2] * col[2];\n\nconst multiply3 = (m1: Matrix3, m2: Matrix3) => {\n  const col0 = [m2[0][0], m2[1][0], m2[2][0]] as const;\n  const col1 = [m2[0][1], m2[1][1], m2[2][1]] as const;\n  const col2 = [m2[0][2], m2[1][2], m2[2][2]] as const;\n  return [\n    [dot3(m1[0], col0), dot3(m1[0], col1), dot3(m1[0], col2)],\n    [dot3(m1[1], col0), dot3(m1[1], col1), dot3(m1[1], col2)],\n    [dot3(m1[2], col0), dot3(m1[2], col1), dot3(m1[2], col2)],\n  ] as const;\n};\n\nexport const matrixVecMul3 = (m: Matrix3, v: Vec3) =>\n  [dot3(m[0], v), dot3(m[1], v), dot3(m[2], v)] as const;\n\nconst skiaMatrix3 = (m: Matrix3): SkMatrix => {\n  return [\n    m[0][0],\n    m[0][1],\n    m[0][2],\n    m[1][0],\n    m[1][1],\n    m[1][2],\n    m[2][0],\n    m[2][1],\n    m[2][2],\n  ];\n};\n\nexport const processTransform2d = (transforms: Transforms2d) =>\n  skiaMatrix3(processTransform(transforms));\n\nconst processTransform = (transforms: Transforms2d) =>\n  transforms.reduce((acc, transform) => {\n    const key = Object.keys(transform)[0] as Transform2dName;\n    const value = (transform as Pick<Transformations, typeof key>)[key];\n    if (key === \"translateX\") {\n      return multiply3(acc, translateXMatrix(value));\n    }\n    if (key === \"translateY\") {\n      return multiply3(acc, translateYMatrix(value));\n    }\n    if (key === \"scale\") {\n      return multiply3(acc, scaleMatrix(value));\n    }\n    if (key === \"scaleX\") {\n      return multiply3(acc, scaleXMatrix(value));\n    }\n    if (key === \"scaleY\") {\n      return multiply3(acc, scaleYMatrix(value));\n    }\n    if (key === \"skewX\") {\n      return multiply3(acc, skewXMatrix(value));\n    }\n    if (key === \"skewY\") {\n      return multiply3(acc, skewYMatrix(value));\n    }\n    if (key === \"rotate\" || key === \"rotateZ\") {\n      return multiply3(acc, rotateZMatrix(value));\n    }\n    return exhaustiveCheck(key);\n  }, identityMatrix);\n"]}

package/lib/module/renderer/typeddash.js

@@ -1,5 +1,26 @@
 export const mapKeys = obj => Object.keys(obj);
 export const exhaustiveCheck = a => {
   throw new Error(`Unexhaustive handling for ${a}`);
+}; // Shallow eq on props (without children)
+
+export const shallowEq = (p1, p2) => {
+  const keys1 = mapKeys(p1);
+  const keys2 = mapKeys(p2);
+
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+
+  for (const key of keys1) {
+    if (key === "children") {
+      continue;
+    }
+
+    if (p1[key] !== p2[key]) {
+      return false;
+    }
+  }
+
+  return true;
 };
 //# sourceMappingURL=typeddash.js.map

package/lib/module/renderer/typeddash.js.map

@@ -1 +1 @@
-{"version":3,"sources":["typeddash.ts"],"names":["mapKeys","obj","Object","keys","exhaustiveCheck","a","Error"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAOC,GAAJ,IAAeC,MAAM,CAACC,IAAP,CAAYF,GAAZ,CAA/B;AAEP,OAAO,MAAMG,eAAe,GAAIC,CAAD,IAAqB;AAClD,QAAM,IAAIC,KAAJ,CAAW,6BAA4BD,CAAE,EAAzC,CAAN;AACD,CAFM","sourcesContent":["export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];\n\nexport const exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unexhaustive handling for ${a}`);\n};\n"]}
+{"version":3,"sources":["typeddash.ts"],"names":["mapKeys","obj","Object","keys","exhaustiveCheck","a","Error","shallowEq","p1","p2","keys1","keys2","length","key"],"mappings":"AAAA,OAAO,MAAMA,OAAO,GAAOC,GAAJ,IAAeC,MAAM,CAACC,IAAP,CAAYF,GAAZ,CAA/B;AAEP,OAAO,MAAMG,eAAe,GAAIC,CAAD,IAAqB;AAClD,QAAM,IAAIC,KAAJ,CAAW,6BAA4BD,CAAE,EAAzC,CAAN;AACD,CAFM,C,CAIP;;AACA,OAAO,MAAME,SAAS,GAAG,CAAIC,EAAJ,EAAWC,EAAX,KAA8B;AACrD,QAAMC,KAAK,GAAGV,OAAO,CAACQ,EAAD,CAArB;AACA,QAAMG,KAAK,GAAGX,OAAO,CAACS,EAAD,CAArB;;AACA,MAAIC,KAAK,CAACE,MAAN,KAAiBD,KAAK,CAACC,MAA3B,EAAmC;AACjC,WAAO,KAAP;AACD;;AACD,OAAK,MAAMC,GAAX,IAAkBH,KAAlB,EAAyB;AACvB,QAAIG,GAAG,KAAK,UAAZ,EAAwB;AACtB;AACD;;AACD,QAAIL,EAAE,CAACK,GAAD,CAAF,KAAYJ,EAAE,CAACI,GAAD,CAAlB,EAAyB;AACvB,aAAO,KAAP;AACD;AACF;;AACD,SAAO,IAAP;AACD,CAfM","sourcesContent":["export const mapKeys = <T>(obj: T) => Object.keys(obj) as (keyof T)[];\n\nexport const exhaustiveCheck = (a: never): never => {\n  throw new Error(`Unexhaustive handling for ${a}`);\n};\n\n// Shallow eq on props (without children)\nexport const shallowEq = <P>(p1: P, p2: P): boolean => {\n  const keys1 = mapKeys(p1);\n  const keys2 = mapKeys(p2);\n  if (keys1.length !== keys2.length) {\n    return false;\n  }\n  for (const key of keys1) {\n    if (key === \"children\") {\n      continue;\n    }\n    if (p1[key] !== p2[key]) {\n      return false;\n    }\n  }\n  return true;\n};\n"]}