@shopify/react-native-skia 0.1.115

package/lib/commonjs/renderer/HostConfig.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.skHostConfig = exports.debug = void 0;
+
+var _nodes = require("./nodes");
+
+var _typeddash = require("./typeddash");
+
+/*global NodeJS, performance*/
+const DEBUG = false;
+
+const debug = function () {
+  if (DEBUG) {
+    console.log(...arguments);
+  }
+};
+
+exports.debug = debug;
+
+// Shallow eq on props (without children)
+const shallowEq = (p1, p2) => {
+  const keys1 = (0, _typeddash.mapKeys)(p1);
+  const keys2 = (0, _typeddash.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;
+};
+
+const allChildrenAreMemoized = node => {
+  if (!node.memoizable) {
+    return false;
+  }
+
+  for (const child of node.children) {
+    if (!child.memoized) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+const bustBranchMemoization = parent => {
+  if (parent.memoizable) {
+    let ancestor = parent;
+
+    while (ancestor) {
+      ancestor.memoized = false;
+      ancestor = ancestor.parent;
+    }
+  }
+};
+
+const bustBranchMemoizable = parent => {
+  if (parent.memoizable) {
+    let ancestor = parent;
+
+    while (ancestor) {
+      ancestor.memoizable = false;
+      ancestor = ancestor.parent;
+    }
+  }
+};
+
+const appendNode = (parent, child) => {
+  child.parent = parent;
+  bustBranchMemoization(parent);
+
+  if (!child.memoizable) {
+    bustBranchMemoizable(parent);
+  }
+
+  if (!parent.memoizable) {
+    child.memoizable = false;
+  }
+
+  parent.children.push(child);
+};
+
+const removeNode = (parent, child) => {
+  bustBranchMemoization(parent);
+  const index = parent.children.indexOf(child);
+  parent.children.splice(index, 1);
+  child.depMgr.unSubscribeNode(child); // unsubscribe to all children as well
+
+  for (const c of child.children) {
+    removeNode(child, c);
+  }
+};
+
+const insertBefore = (parent, child, before) => {
+  bustBranchMemoization(parent);
+  const index = parent.children.indexOf(child);
+
+  if (index !== -1) {
+    parent.children.splice(index, 1);
+  }
+
+  const beforeIndex = parent.children.indexOf(before);
+  parent.children.splice(beforeIndex, 0, child);
+};
+
+const createNode = (container, type, props) => {
+  switch (type) {
+    case _nodes.NodeType.Drawing:
+      const {
+        onDraw,
+        skipProcessing,
+        ...p1
+      } = props;
+      return new _nodes.DrawingNode(container.depMgr, onDraw, skipProcessing, p1);
+
+    case _nodes.NodeType.Declaration:
+      const {
+        onDeclare,
+        ...p2
+      } = props;
+      return new _nodes.DeclarationNode(container.depMgr, onDeclare, p2);
+
+    default:
+      // TODO: here we need to throw a nice error message
+      // This is the error that will show up when the user uses nodes not supported by Skia (View, Audio, etc)
+      return (0, _typeddash.exhaustiveCheck)(type);
+  }
+};
+
+const skHostConfig = {
+  /**
+   * This function is used by the reconciler in order to calculate current time for prioritising work.
+   */
+  now: performance.now,
+  supportsMutation: true,
+  isPrimaryRenderer: false,
+  supportsPersistence: false,
+  supportsHydration: false,
+  //supportsMicrotask: true,
+  scheduleTimeout: setTimeout,
+  cancelTimeout: clearTimeout,
+  noTimeout: -1,
+
+  appendChildToContainer(container, child) {
+    debug("appendChildToContainer", container, child);
+    appendNode(container, child);
+  },
+
+  appendChild(parent, child) {
+    debug("appendChild", parent, child);
+    appendNode(parent, child);
+  },
+
+  getRootHostContext: _rootContainerInstance => {
+    debug("getRootHostContext");
+    return null;
+  },
+
+  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {
+    debug("getChildHostContext");
+    return null;
+  },
+
+  shouldSetTextContent(_type, _props) {
+    return false;
+  },
+
+  createTextInstance(_text, _rootContainerInstance, _hostContext, _internalInstanceHandle) {
+    debug("createTextInstance"); // return SpanNode({}, text) as SkNode;
+
+    throw new Error("Text nodes are not supported yet");
+  },
+
+  createInstance(type, props, container, _hostContext, _internalInstanceHandle) {
+    debug("createInstance", type);
+    return createNode(container, type, props);
+  },
+
+  appendInitialChild(parentInstance, child) {
+    debug("appendInitialChild");
+    appendNode(parentInstance, child);
+  },
+
+  finalizeInitialChildren(parentInstance, _type, _props, _rootContainerInstance, _hostContext) {
+    debug("finalizeInitialChildren", parentInstance);
+    return false;
+  },
+
+  commitMount() {
+    // if finalizeInitialChildren = true
+    debug("commitMount");
+  },
+
+  prepareForCommit(_containerInfo) {
+    debug("prepareForCommit");
+    return null;
+  },
+
+  finalizeContainerChildren: () => {
+    debug("finalizeContainerChildren");
+  },
+
+  resetAfterCommit(container) {
+    debug("resetAfterCommit");
+    container.redraw();
+  },
+
+  getPublicInstance(node) {
+    debug("getPublicInstance");
+    return node;
+  },
+
+  prepareUpdate: (instance, type, oldProps, newProps, _rootContainerInstance, _hostContext) => {
+    debug("prepareUpdate");
+    const propsAreEqual = shallowEq(oldProps, newProps);
+
+    if (propsAreEqual && !instance.memoizable) {
+      return null;
+    }
+
+    debug("update ", type);
+    return true;
+  },
+
+  commitUpdate(instance, _updatePayload, type, prevProps, nextProps, _internalHandle) {
+    debug("commitUpdate: ", type);
+
+    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {
+      return;
+    }
+
+    bustBranchMemoization(instance);
+    instance.props = nextProps;
+  },
+
+  commitTextUpdate: (_textInstance, _oldText, _newText) => {//  textInstance.instance = newText;
+  },
+  clearContainer: container => {
+    debug("clearContainer");
+    container.children.splice(0);
+  },
+  preparePortalMount: () => {
+    debug("preparePortalMount");
+  },
+  removeChild: (parent, child) => {
+    removeNode(parent, child);
+  },
+  removeChildFromContainer: (parent, child) => {
+    removeNode(parent, child);
+  },
+  insertInContainerBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  },
+  insertBefore: (parent, child, before) => {
+    insertBefore(parent, child, before);
+  }
+};
+exports.skHostConfig = skHostConfig;
+//# sourceMappingURL=HostConfig.js.map

package/lib/commonjs/renderer/HostConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["HostConfig.ts"],"names":["DEBUG","debug","console","log","shallowEq","p1","p2","keys1","keys2","length","key","allChildrenAreMemoized","node","memoizable","child","children","memoized","bustBranchMemoization","parent","ancestor","bustBranchMemoizable","appendNode","push","removeNode","index","indexOf","splice","depMgr","unSubscribeNode","c","insertBefore","before","beforeIndex","createNode","container","type","props","NodeType","Drawing","onDraw","skipProcessing","DrawingNode","Declaration","onDeclare","DeclarationNode","skHostConfig","now","performance","supportsMutation","isPrimaryRenderer","supportsPersistence","supportsHydration","scheduleTimeout","setTimeout","cancelTimeout","clearTimeout","noTimeout","appendChildToContainer","appendChild","getRootHostContext","_rootContainerInstance","getChildHostContext","_parentHostContext","_type","shouldSetTextContent","_props","createTextInstance","_text","_hostContext","_internalInstanceHandle","Error","createInstance","appendInitialChild","parentInstance","finalizeInitialChildren","commitMount","prepareForCommit","_containerInfo","finalizeContainerChildren","resetAfterCommit","redraw","getPublicInstance","prepareUpdate","instance","oldProps","newProps","propsAreEqual","commitUpdate","_updatePayload","prevProps","nextProps","_internalHandle","commitTextUpdate","_textInstance","_oldText","_newText","clearContainer","preparePortalMount","removeChild","removeChildFromContainer","insertInContainerBefore"],"mappings":"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","sourcesContent":["/*global NodeJS, performance*/\nimport type { HostConfig } from \"react-reconciler\";\n\nimport type { Node, Container, DeclarationProps, DrawingProps } from \"./nodes\";\nimport { DeclarationNode, DrawingNode, NodeType } from \"./nodes\";\nimport { exhaustiveCheck, mapKeys } from \"./typeddash\";\n\nconst DEBUG = false;\nexport const debug = (...args: Parameters<typeof console.log>) => {\n  if (DEBUG) {\n    console.log(...args);\n  }\n};\n\ndeclare global {\n  // eslint-disable-next-line @typescript-eslint/no-namespace\n  namespace JSX {\n    interface IntrinsicElements {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDeclaration: DeclarationProps<any>;\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      skDrawing: DrawingProps<any>;\n    }\n  }\n}\n\ntype Instance = Node;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Props = any;\ntype TextInstance = Node;\ntype SuspenseInstance = Instance;\ntype HydratableInstance = Instance;\ntype PublicInstance = Instance;\ntype HostContext = null;\ntype UpdatePayload = true;\ntype ChildSet = unknown;\ntype TimeoutHandle = NodeJS.Timeout;\ntype NoTimeout = -1;\n\ntype SkiaHostConfig = HostConfig<\n  NodeType,\n  Props,\n  Container,\n  Instance,\n  TextInstance,\n  SuspenseInstance,\n  HydratableInstance,\n  PublicInstance,\n  HostContext,\n  UpdatePayload,\n  ChildSet,\n  TimeoutHandle,\n  NoTimeout\n>;\n\n// Shallow eq on props (without children)\nconst shallowEq = <P extends Props>(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\nconst allChildrenAreMemoized = (node: Instance) => {\n  if (!node.memoizable) {\n    return false;\n  }\n  for (const child of node.children) {\n    if (!child.memoized) {\n      return false;\n    }\n  }\n  return true;\n};\n\nconst bustBranchMemoization = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoized = false;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst bustBranchMemoizable = (parent: Node) => {\n  if (parent.memoizable) {\n    let ancestor: Node | undefined = parent;\n    while (ancestor) {\n      ancestor.memoizable = false;\n      ancestor = ancestor.parent;\n    }\n  }\n};\n\nconst appendNode = (parent: Node, child: Node) => {\n  child.parent = parent;\n  bustBranchMemoization(parent);\n  if (!child.memoizable) {\n    bustBranchMemoizable(parent);\n  }\n  if (!parent.memoizable) {\n    child.memoizable = false;\n  }\n  parent.children.push(child);\n};\n\nconst removeNode = (parent: Node, child: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  parent.children.splice(index, 1);\n  child.depMgr.unSubscribeNode(child);\n  // unsubscribe to all children as well\n  for (const c of child.children) {\n    removeNode(child, c);\n  }\n};\n\nconst insertBefore = (parent: Node, child: Node, before: Node) => {\n  bustBranchMemoization(parent);\n  const index = parent.children.indexOf(child);\n  if (index !== -1) {\n    parent.children.splice(index, 1);\n  }\n  const beforeIndex = parent.children.indexOf(before);\n  parent.children.splice(beforeIndex, 0, child);\n};\n\nconst createNode = (container: Container, type: NodeType, props: Props) => {\n  switch (type) {\n    case NodeType.Drawing:\n      const { onDraw, skipProcessing, ...p1 } = props;\n      return new DrawingNode(container.depMgr, onDraw, skipProcessing, p1);\n    case NodeType.Declaration:\n      const { onDeclare, ...p2 } = props;\n      return new DeclarationNode(container.depMgr, onDeclare, p2);\n    default:\n      // TODO: here we need to throw a nice error message\n      // This is the error that will show up when the user uses nodes not supported by Skia (View, Audio, etc)\n      return exhaustiveCheck(type);\n  }\n};\n\nexport const skHostConfig: SkiaHostConfig = {\n  /**\n   * This function is used by the reconciler in order to calculate current time for prioritising work.\n   */\n  now: performance.now,\n\n  supportsMutation: true,\n  isPrimaryRenderer: false,\n  supportsPersistence: false,\n  supportsHydration: false,\n  //supportsMicrotask: true,\n\n  scheduleTimeout: setTimeout,\n  cancelTimeout: clearTimeout,\n  noTimeout: -1,\n\n  appendChildToContainer(container, child) {\n    debug(\"appendChildToContainer\", container, child);\n    appendNode(container, child);\n  },\n\n  appendChild(parent, child) {\n    debug(\"appendChild\", parent, child);\n    appendNode(parent, child);\n  },\n\n  getRootHostContext: (_rootContainerInstance: Node) => {\n    debug(\"getRootHostContext\");\n    return null;\n  },\n\n  getChildHostContext(_parentHostContext, _type, _rootContainerInstance) {\n    debug(\"getChildHostContext\");\n    return null;\n  },\n\n  shouldSetTextContent(_type, _props) {\n    return false;\n  },\n\n  createTextInstance(\n    _text,\n    _rootContainerInstance,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createTextInstance\");\n    // return SpanNode({}, text) as SkNode;\n    throw new Error(\"Text nodes are not supported yet\");\n  },\n\n  createInstance(\n    type,\n    props,\n    container,\n    _hostContext,\n    _internalInstanceHandle\n  ) {\n    debug(\"createInstance\", type);\n    return createNode(container, type, props) as Node;\n  },\n\n  appendInitialChild(parentInstance, child) {\n    debug(\"appendInitialChild\");\n    appendNode(parentInstance, child);\n  },\n\n  finalizeInitialChildren(\n    parentInstance,\n    _type,\n    _props,\n    _rootContainerInstance,\n    _hostContext\n  ) {\n    debug(\"finalizeInitialChildren\", parentInstance);\n    return false;\n  },\n\n  commitMount() {\n    // if finalizeInitialChildren = true\n    debug(\"commitMount\");\n  },\n\n  prepareForCommit(_containerInfo) {\n    debug(\"prepareForCommit\");\n    return null;\n  },\n\n  finalizeContainerChildren: () => {\n    debug(\"finalizeContainerChildren\");\n  },\n\n  resetAfterCommit(container) {\n    debug(\"resetAfterCommit\");\n    container.redraw();\n  },\n\n  getPublicInstance(node: Instance) {\n    debug(\"getPublicInstance\");\n    return node;\n  },\n\n  prepareUpdate: (\n    instance,\n    type,\n    oldProps,\n    newProps,\n    _rootContainerInstance,\n    _hostContext\n  ) => {\n    debug(\"prepareUpdate\");\n    const propsAreEqual = shallowEq(oldProps, newProps);\n    if (propsAreEqual && !instance.memoizable) {\n      return null;\n    }\n    debug(\"update \", type);\n    return true;\n  },\n\n  commitUpdate(\n    instance,\n    _updatePayload,\n    type,\n    prevProps,\n    nextProps,\n    _internalHandle\n  ) {\n    debug(\"commitUpdate: \", type);\n    if (shallowEq(prevProps, nextProps) && allChildrenAreMemoized(instance)) {\n      return;\n    }\n    bustBranchMemoization(instance);\n    instance.props = nextProps;\n  },\n\n  commitTextUpdate: (\n    _textInstance: TextInstance,\n    _oldText: string,\n    _newText: string\n  ) => {\n    //  textInstance.instance = newText;\n  },\n\n  clearContainer: (container) => {\n    debug(\"clearContainer\");\n    container.children.splice(0);\n  },\n\n  preparePortalMount: () => {\n    debug(\"preparePortalMount\");\n  },\n\n  removeChild: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  removeChildFromContainer: (parent, child) => {\n    removeNode(parent, child);\n  },\n\n  insertInContainerBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n\n  insertBefore: (parent, child, before) => {\n    insertBefore(parent, child, before);\n  },\n};\n"]}

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Blend = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _skia = require("../../skia");
+
+var _nodes = require("../nodes");
+
+var _Shader = require("../../skia/Shader/Shader");
+
+var _Paint = require("../processors/Paint");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const onDeclare = (0, _nodes.createDeclaration)((_ref, children) => {
+  let {
+    mode
+  } = _ref;
+  const [inner, outer] = children;
+
+  const blend = _skia.BlendMode[(0, _Paint.enumKey)(mode)];
+
+  if ((0, _skia.isImageFilter)(outer) && (0, _skia.isImageFilter)(inner)) {
+    return _skia.Skia.ImageFilter.MakeBlend(blend, outer, inner);
+  } else if ((0, _Shader.isShader)(outer) && (0, _Shader.isShader)(inner)) {
+    return _skia.Skia.Shader.MakeBlend(blend, outer, inner);
+  }
+
+  throw new Error("<Blend /> can only blend Shaders or ImageFilters");
+});
+
+const Blend = props => {
+  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
+    onDeclare: onDeclare
+  }, props));
+};
+
+exports.Blend = Blend;
+//# sourceMappingURL=Blend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Blend.tsx"],"names":["onDeclare","children","mode","inner","outer","blend","BlendMode","Skia","ImageFilter","MakeBlend","Shader","Error","Blend","props"],"mappings":";;;;;;;AACA;;AAEA;;AACA;;AAEA;;AACA;;;;;;AAOA,MAAMA,SAAS,GAAG,8BAA8B,OAAWC,QAAX,KAAwB;AAAA,MAAvB;AAAEC,IAAAA;AAAF,GAAuB;AACtE,QAAM,CAACC,KAAD,EAAQC,KAAR,IAAiBH,QAAvB;;AACA,QAAMI,KAAK,GAAGC,gBAAU,oBAAQJ,IAAR,CAAV,CAAd;;AACA,MAAI,yBAAcE,KAAd,KAAwB,yBAAcD,KAAd,CAA5B,EAAkD;AAChD,WAAOI,WAAKC,WAAL,CAAiBC,SAAjB,CAA2BJ,KAA3B,EAAkCD,KAAlC,EAAyCD,KAAzC,CAAP;AACD,GAFD,MAEO,IAAI,sBAASC,KAAT,KAAmB,sBAASD,KAAT,CAAvB,EAAwC;AAC7C,WAAOI,WAAKG,MAAL,CAAYD,SAAZ,CAAsBJ,KAAtB,EAA6BD,KAA7B,EAAoCD,KAApC,CAAP;AACD;;AACD,QAAM,IAAIQ,KAAJ,CAAU,kDAAV,CAAN;AACD,CATiB,CAAlB;;AAWO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAe,IAAA,SAAS,EAAEb;AAA1B,KAAyCa,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import type { ReactNode } from \"react\";\nimport React from \"react\";\n\nimport { isImageFilter, Skia, BlendMode } from \"../../skia\";\nimport { createDeclaration } from \"../nodes\";\nimport type { AnimatedProps, SkEnum } from \"../processors\";\nimport { isShader } from \"../../skia/Shader/Shader\";\nimport { enumKey } from \"../processors/Paint\";\n\ninterface BlendProps {\n  mode: SkEnum<typeof BlendMode>;\n  children?: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration<BlendProps>(({ mode }, children) => {\n  const [inner, outer] = children;\n  const blend = BlendMode[enumKey(mode)];\n  if (isImageFilter(outer) && isImageFilter(inner)) {\n    return Skia.ImageFilter.MakeBlend(blend, outer, inner);\n  } else if (isShader(outer) && isShader(inner)) {\n    return Skia.Shader.MakeBlend(blend, outer, inner);\n  }\n  throw new Error(\"<Blend /> can only blend Shaders or ImageFilters\");\n});\n\nexport const Blend = (props: AnimatedProps<BlendProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Compose = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _skia = require("../../skia");
+
+var _Declaration = require("../nodes/Declaration");
+
+var _ColorFilter = require("../../skia/ColorFilter/ColorFilter");
+
+var _ImageFilter = require("../../skia/ImageFilter/ImageFilter");
+
+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)((_, children) => {
+  const [inner, outer] = children;
+
+  if ((0, _ColorFilter.isColorFilter)(outer) && (0, _ColorFilter.isColorFilter)(inner)) {
+    return _skia.Skia.ColorFilter.MakeCompose(outer, inner);
+  } else if ((0, _ImageFilter.isImageFilter)(outer) && (0, _ImageFilter.isImageFilter)(inner)) {
+    return _skia.Skia.ImageFilter.MakeCompose(outer, inner);
+  }
+
+  throw new Error("ComposeFilter can only compose ColorFilters and ImageFilters");
+});
+
+const Compose = props => {
+  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
+    onDeclare: onDeclare
+  }, props));
+};
+
+exports.Compose = Compose;
+//# sourceMappingURL=Compose.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Compose.tsx"],"names":["onDeclare","_","children","inner","outer","Skia","ColorFilter","MakeCompose","ImageFilter","Error","Compose","props"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;AAEA;;AACA;;;;;;AAMA,MAAMA,SAAS,GAAG,oCAAkB,CAACC,CAAD,EAAIC,QAAJ,KAAiB;AACnD,QAAM,CAACC,KAAD,EAAQC,KAAR,IAAiBF,QAAvB;;AACA,MAAI,gCAAcE,KAAd,KAAwB,gCAAcD,KAAd,CAA5B,EAAkD;AAChD,WAAOE,WAAKC,WAAL,CAAiBC,WAAjB,CAA6BH,KAA7B,EAAoCD,KAApC,CAAP;AACD,GAFD,MAEO,IAAI,gCAAcC,KAAd,KAAwB,gCAAcD,KAAd,CAA5B,EAAkD;AACvD,WAAOE,WAAKG,WAAL,CAAiBD,WAAjB,CAA6BH,KAA7B,EAAoCD,KAApC,CAAP;AACD;;AACD,QAAM,IAAIM,KAAJ,CACJ,8DADI,CAAN;AAGD,CAViB,CAAlB;;AAYO,MAAMC,OAAO,GAAIC,KAAD,IAAwC;AAC7D,sBAAO;AAAe,IAAA,SAAS,EAAEX;AAA1B,KAAyCW,KAAzC,EAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { Skia } from \"../../skia\";\nimport { createDeclaration } from \"../nodes/Declaration\";\nimport type { AnimatedProps } from \"../processors/Animations/Animations\";\nimport { isColorFilter } from \"../../skia/ColorFilter/ColorFilter\";\nimport { isImageFilter } from \"../../skia/ImageFilter/ImageFilter\";\n\nexport interface ComposeProps {\n  children: ReactNode | ReactNode[];\n}\n\nconst onDeclare = createDeclaration((_, children) => {\n  const [inner, outer] = children;\n  if (isColorFilter(outer) && isColorFilter(inner)) {\n    return Skia.ColorFilter.MakeCompose(outer, inner);\n  } else if (isImageFilter(outer) && isImageFilter(inner)) {\n    return Skia.ImageFilter.MakeCompose(outer, inner);\n  }\n  throw new Error(\n    \"ComposeFilter can only compose ColorFilters and ImageFilters\"\n  );\n});\n\nexport const Compose = (props: AnimatedProps<ComposeProps>) => {\n  return <skDeclaration onDeclare={onDeclare} {...props} />;\n};\n"]}

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

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

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

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

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _skia = require("../../skia");
+
+var _processors = require("../processors");
+
+var _nodes = require("../nodes");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const isSkPaint = obj => "__typename__" in obj && obj.__typename__ === "Paint";
+
+const onDraw = (0, _nodes.createDrawing)((ctx, _ref, node) => {
+  let {
+    layer,
+    clip,
+    invertClip,
+    ...groupProps
+  } = _ref;
+  const {
+    canvas,
+    opacity
+  } = ctx;
+  const paint = (0, _processors.selectPaint)(ctx.paint, groupProps);
+  (0, _processors.processPaint)(paint, opacity, groupProps);
+
+  if (layer) {
+    if (typeof layer === "boolean") {
+      canvas.saveLayer();
+    } else if (isSkPaint(layer)) {
+      canvas.saveLayer(layer);
+    } else {
+      var _layer$current;
+
+      canvas.saveLayer((_layer$current = layer.current) !== null && _layer$current !== void 0 ? _layer$current : undefined);
+    }
+  } else {
+    canvas.save();
+  }
+
+  (0, _processors.processTransform)(ctx, groupProps);
+
+  if (clip) {
+    const op = invertClip ? _skia.ClipOp.Difference : _skia.ClipOp.Intersect;
+    (0, _processors.processClip)(canvas, clip, op);
+  }
+
+  node.visit({ ...ctx,
+    paint,
+    opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity
+  });
+  canvas.restore();
+});
+
+const Group = props => {
+  return /*#__PURE__*/_react.default.createElement("skDrawing", _extends({
+    onDraw: onDraw
+  }, props, {
+    skipProcessing: true
+  }));
+};
+
+exports.Group = Group;
+//# sourceMappingURL=Group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Group.tsx"],"names":["isSkPaint","obj","__typename__","onDraw","ctx","node","layer","clip","invertClip","groupProps","canvas","opacity","paint","saveLayer","current","undefined","save","op","ClipOp","Difference","Intersect","visit","restore","Group","props"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;AAYA;;;;;;AAEA,MAAMA,SAAS,GAAIC,GAAD,IAChB,kBAAkBA,GAAlB,IAAyBA,GAAG,CAACC,YAAJ,KAAqB,OADhD;;AASA,MAAMC,MAAM,GAAG,0BACb,CAACC,GAAD,QAAkDC,IAAlD,KAA2D;AAAA,MAArD;AAAEC,IAAAA,KAAF;AAASC,IAAAA,IAAT;AAAeC,IAAAA,UAAf;AAA2B,OAAGC;AAA9B,GAAqD;AACzD,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAsBP,GAA5B;AACA,QAAMQ,KAAK,GAAG,6BAAYR,GAAG,CAACQ,KAAhB,EAAuBH,UAAvB,CAAd;AACA,gCAAaG,KAAb,EAAoBD,OAApB,EAA6BF,UAA7B;;AACA,MAAIH,KAAJ,EAAW;AACT,QAAI,OAAOA,KAAP,KAAiB,SAArB,EAAgC;AAC9BI,MAAAA,MAAM,CAACG,SAAP;AACD,KAFD,MAEO,IAAIb,SAAS,CAACM,KAAD,CAAb,EAAsB;AAC3BI,MAAAA,MAAM,CAACG,SAAP,CAAiBP,KAAjB;AACD,KAFM,MAEA;AAAA;;AACLI,MAAAA,MAAM,CAACG,SAAP,mBAAiBP,KAAK,CAACQ,OAAvB,2DAAkCC,SAAlC;AACD;AACF,GARD,MAQO;AACLL,IAAAA,MAAM,CAACM,IAAP;AACD;;AACD,oCAAiBZ,GAAjB,EAAsBK,UAAtB;;AACA,MAAIF,IAAJ,EAAU;AACR,UAAMU,EAAE,GAAGT,UAAU,GAAGU,aAAOC,UAAV,GAAuBD,aAAOE,SAAnD;AACA,iCAAYV,MAAZ,EAAoBH,IAApB,EAA0BU,EAA1B;AACD;;AACDZ,EAAAA,IAAI,CAACgB,KAAL,CAAW,EACT,GAAGjB,GADM;AAETQ,IAAAA,KAFS;AAGTD,IAAAA,OAAO,EAAEF,UAAU,CAACE,OAAX,GAAqBF,UAAU,CAACE,OAAX,GAAqBA,OAA1C,GAAoDA;AAHpD,GAAX;AAKAD,EAAAA,MAAM,CAACY,OAAP;AACD,CA3BY,CAAf;;AA8BO,MAAMC,KAAK,GAAIC,KAAD,IAAsC;AACzD,sBAAO;AAAW,IAAA,MAAM,EAAErB;AAAnB,KAA+BqB,KAA/B;AAAsC,IAAA,cAAc;AAApD,KAAP;AACD,CAFM","sourcesContent":["import React from \"react\";\nimport type { RefObject } from \"react\";\n\nimport type { SkPaint } from \"../../skia\";\nimport { ClipOp } from \"../../skia\";\nimport {\n  processTransform,\n  selectPaint,\n  processPaint,\n  processClip,\n} from \"../processors\";\nimport type {\n  CustomPaintProps,\n  TransformProps,\n  AnimatedProps,\n  ClipDef,\n} from \"../processors\";\nimport { createDrawing } from \"../nodes\";\n\nconst isSkPaint = (obj: RefObject<SkPaint> | SkPaint): obj is SkPaint =>\n  \"__typename__\" in obj && obj.__typename__ === \"Paint\";\n\nexport interface GroupProps extends CustomPaintProps, TransformProps {\n  clip?: ClipDef;\n  invertClip?: boolean;\n  layer?: RefObject<SkPaint> | SkPaint | boolean;\n}\n\nconst onDraw = createDrawing<GroupProps>(\n  (ctx, { layer, clip, invertClip, ...groupProps }, node) => {\n    const { canvas, opacity } = ctx;\n    const paint = selectPaint(ctx.paint, groupProps);\n    processPaint(paint, opacity, groupProps);\n    if (layer) {\n      if (typeof layer === \"boolean\") {\n        canvas.saveLayer();\n      } else if (isSkPaint(layer)) {\n        canvas.saveLayer(layer);\n      } else {\n        canvas.saveLayer(layer.current ?? undefined);\n      }\n    } else {\n      canvas.save();\n    }\n    processTransform(ctx, groupProps);\n    if (clip) {\n      const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;\n      processClip(canvas, clip, op);\n    }\n    node.visit({\n      ...ctx,\n      paint,\n      opacity: groupProps.opacity ? groupProps.opacity * opacity : opacity,\n    });\n    canvas.restore();\n  }\n);\n\nexport const Group = (props: AnimatedProps<GroupProps>) => {\n  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;\n};\n"]}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Mask = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _skia = require("../../skia");
+
+var _Group = require("./Group");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Mask = _ref => {
+  let {
+    children,
+    mask,
+    mode,
+    clip
+  } = _ref;
+  const maskPaint = (0, _react.useMemo)(() => {
+    const paint = _skia.Skia.Paint();
+
+    paint.setBlendMode(_skia.BlendMode.Src);
+
+    if (mode === "luminance") {
+      paint.setColorFilter(_skia.Skia.ColorFilter.MakeLumaColorFilter());
+    }
+
+    return paint;
+  }, [mode]);
+  const clippingPaint = (0, _react.useMemo)(() => {
+    const paint = _skia.Skia.Paint();
+
+    paint.setBlendMode(_skia.BlendMode.DstIn);
+    return paint;
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_Group.Group, {
+    layer: true
+  }, /*#__PURE__*/_react.default.createElement(_Group.Group, {
+    layer: maskPaint
+  }, mask, clip && /*#__PURE__*/_react.default.createElement(_Group.Group, {
+    layer: clippingPaint
+  }, children)), /*#__PURE__*/_react.default.createElement(_Group.Group, {
+    blendMode: "srcIn"
+  }, children));
+};
+
+exports.Mask = Mask;
+Mask.defaultProps = {
+  mode: "alpha",
+  clip: true
+};
+//# sourceMappingURL=Mask.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Mask.tsx"],"names":["Mask","children","mask","mode","clip","maskPaint","paint","Skia","Paint","setBlendMode","BlendMode","Src","setColorFilter","ColorFilter","MakeLumaColorFilter","clippingPaint","DstIn","defaultProps"],"mappings":";;;;;;;AACA;;AAEA;;AAEA;;;;;;AASO,MAAMA,IAAI,GAAG,QAA+C;AAAA,MAA9C;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,IAAZ;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA;AAAxB,GAA8C;AACjE,QAAMC,SAAS,GAAG,oBAAQ,MAAM;AAC9B,UAAMC,KAAK,GAAGC,WAAKC,KAAL,EAAd;;AACAF,IAAAA,KAAK,CAACG,YAAN,CAAmBC,gBAAUC,GAA7B;;AACA,QAAIR,IAAI,KAAK,WAAb,EAA0B;AACxBG,MAAAA,KAAK,CAACM,cAAN,CAAqBL,WAAKM,WAAL,CAAiBC,mBAAjB,EAArB;AACD;;AACD,WAAOR,KAAP;AACD,GAPiB,EAOf,CAACH,IAAD,CAPe,CAAlB;AAQA,QAAMY,aAAa,GAAG,oBAAQ,MAAM;AAClC,UAAMT,KAAK,GAAGC,WAAKC,KAAL,EAAd;;AACAF,IAAAA,KAAK,CAACG,YAAN,CAAmBC,gBAAUM,KAA7B;AACA,WAAOV,KAAP;AACD,GAJqB,EAInB,EAJmB,CAAtB;AAKA,sBACE,6BAAC,YAAD;AAAO,IAAA,KAAK;AAAZ,kBACE,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAED;AAAd,KACGH,IADH,EAEGE,IAAI,iBAAI,6BAAC,YAAD;AAAO,IAAA,KAAK,EAAEW;AAAd,KAA8Bd,QAA9B,CAFX,CADF,eAKE,6BAAC,YAAD;AAAO,IAAA,SAAS,EAAC;AAAjB,KAA0BA,QAA1B,CALF,CADF;AASD,CAvBM;;;AAyBPD,IAAI,CAACiB,YAAL,GAAoB;AAClBd,EAAAA,IAAI,EAAE,OADY;AAElBC,EAAAA,IAAI,EAAE;AAFY,CAApB","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useMemo } from \"react\";\n\nimport { BlendMode, Skia } from \"../../skia\";\n\nimport { Group } from \"./Group\";\n\ninterface MaskProps {\n  mode: \"luminance\" | \"alpha\";\n  clip: boolean;\n  mask: ReactNode | ReactNode[];\n  children: ReactNode | ReactNode[];\n}\n\nexport const Mask = ({ children, mask, mode, clip }: MaskProps) => {\n  const maskPaint = useMemo(() => {\n    const paint = Skia.Paint();\n    paint.setBlendMode(BlendMode.Src);\n    if (mode === \"luminance\") {\n      paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());\n    }\n    return paint;\n  }, [mode]);\n  const clippingPaint = useMemo(() => {\n    const paint = Skia.Paint();\n    paint.setBlendMode(BlendMode.DstIn);\n    return paint;\n  }, []);\n  return (\n    <Group layer>\n      <Group layer={maskPaint}>\n        {mask}\n        {clip && <Group layer={clippingPaint}>{children}</Group>}\n      </Group>\n      <Group blendMode=\"srcIn\">{children}</Group>\n    </Group>\n  );\n};\n\nMask.defaultProps = {\n  mode: \"alpha\",\n  clip: true,\n};\n"]}

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

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePaintRef = exports.Paint = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _skia = require("../../skia");
+
+var _processors = require("../processors");
+
+var _nodes = require("../nodes");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 usePaintRef = () => (0, _react.useRef)(null);
+
+exports.usePaintRef = usePaintRef;
+const Paint = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const paint = (0, _react.useMemo)(() => _skia.Skia.Paint(), []);
+  (0, _react.useImperativeHandle)(ref, () => paint, [paint]);
+  const onDeclare = (0, _react.useMemo)(() => (0, _nodes.createDeclaration)((paintProps, children, ctx) => {
+    (0, _processors.processPaint)(paint, ctx.opacity, paintProps);
+    children.forEach(child => {
+      if ((0, _skia.isShader)(child)) {
+        paint.setShader(child);
+      } else if ((0, _skia.isMaskFilter)(child)) {
+        paint.setMaskFilter(child);
+      } else if ((0, _skia.isColorFilter)(child)) {
+        paint.setColorFilter(child);
+      } else if ((0, _skia.isPathEffect)(child)) {
+        paint.setPathEffect(child);
+      }
+    });
+    const filters = children.filter(_skia.isImageFilter);
+
+    if (filters.length > 0) {
+      paint.setImageFilter(filters.reverse().reduce(_skia.Skia.ImageFilter.MakeCompose, null));
+    }
+
+    return paint;
+  }), [paint]);
+  return /*#__PURE__*/_react.default.createElement("skDeclaration", _extends({
+    onDeclare: onDeclare
+  }, props));
+});
+exports.Paint = Paint;
+//# sourceMappingURL=Paint.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Paint.tsx"],"names":["usePaintRef","Paint","props","ref","paint","Skia","onDeclare","paintProps","children","ctx","opacity","forEach","child","setShader","setMaskFilter","setColorFilter","setPathEffect","filters","filter","isImageFilter","length","setImageFilter","reverse","reduce","ImageFilter","MakeCompose"],"mappings":";;;;;;;AACA;;AAGA;;AASA;;AACA;;;;;;;;AAEO,MAAMA,WAAW,GAAG,MAAM,mBAAgB,IAAhB,CAA1B;;;AAMA,MAAMC,KAAK,gBAAG,uBACnB,CAACC,KAAD,EAAQC,GAAR,KAAgB;AACd,QAAMC,KAAK,GAAG,oBAAQ,MAAMC,WAAKJ,KAAL,EAAd,EAA4B,EAA5B,CAAd;AACA,kCAAoBE,GAApB,EAAyB,MAAMC,KAA/B,EAAsC,CAACA,KAAD,CAAtC;AACA,QAAME,SAAS,GAAG,oBAChB,MACE,8BAA8B,CAACC,UAAD,EAAaC,QAAb,EAAuBC,GAAvB,KAA+B;AAC3D,kCAAaL,KAAb,EAAoBK,GAAG,CAACC,OAAxB,EAAiCH,UAAjC;AACAC,IAAAA,QAAQ,CAACG,OAAT,CAAkBC,KAAD,IAAW;AAC1B,UAAI,oBAASA,KAAT,CAAJ,EAAqB;AACnBR,QAAAA,KAAK,CAACS,SAAN,CAAgBD,KAAhB;AACD,OAFD,MAEO,IAAI,wBAAaA,KAAb,CAAJ,EAAyB;AAC9BR,QAAAA,KAAK,CAACU,aAAN,CAAoBF,KAApB;AACD,OAFM,MAEA,IAAI,yBAAcA,KAAd,CAAJ,EAA0B;AAC/BR,QAAAA,KAAK,CAACW,cAAN,CAAqBH,KAArB;AACD,OAFM,MAEA,IAAI,wBAAaA,KAAb,CAAJ,EAAyB;AAC9BR,QAAAA,KAAK,CAACY,aAAN,CAAoBJ,KAApB;AACD;AACF,KAVD;AAWA,UAAMK,OAAO,GAAGT,QAAQ,CAACU,MAAT,CAAgBC,mBAAhB,CAAhB;;AACA,QAAIF,OAAO,CAACG,MAAR,GAAiB,CAArB,EAAwB;AACtBhB,MAAAA,KAAK,CAACiB,cAAN,CACEJ,OAAO,CACJK,OADH,GAEGC,MAFH,CAGIlB,WAAKmB,WAAL,CAAiBC,WAHrB,EAII,IAJJ,CADF;AAQD;;AACD,WAAOrB,KAAP;AACD,GAzBD,CAFc,EA4BhB,CAACA,KAAD,CA5BgB,CAAlB;AA8BA,sBAAO;AAAe,IAAA,SAAS,EAAEE;AAA1B,KAAyCJ,KAAzC,EAAP;AACD,CAnCkB,CAAd","sourcesContent":["import type { ReactNode } from \"react\";\nimport React, { useRef, useMemo, forwardRef, useImperativeHandle } from \"react\";\n\nimport type { SkPaint, SkImageFilter } from \"../../skia\";\nimport {\n  isShader,\n  isMaskFilter,\n  isColorFilter,\n  Skia,\n  isImageFilter,\n  isPathEffect,\n} from \"../../skia\";\nimport type { CustomPaintProps, AnimatedProps } from \"../processors\";\nimport { processPaint } from \"../processors\";\nimport { createDeclaration } from \"../nodes\";\n\nexport const usePaintRef = () => useRef<SkPaint>(null);\n\nexport interface PaintProps extends Omit<CustomPaintProps, \"paint\"> {\n  children?: ReactNode | ReactNode[];\n}\n\nexport const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(\n  (props, ref) => {\n    const paint = useMemo(() => Skia.Paint(), []);\n    useImperativeHandle(ref, () => paint, [paint]);\n    const onDeclare = useMemo(\n      () =>\n        createDeclaration<PaintProps>((paintProps, children, ctx) => {\n          processPaint(paint, ctx.opacity, paintProps);\n          children.forEach((child) => {\n            if (isShader(child)) {\n              paint.setShader(child);\n            } else if (isMaskFilter(child)) {\n              paint.setMaskFilter(child);\n            } else if (isColorFilter(child)) {\n              paint.setColorFilter(child);\n            } else if (isPathEffect(child)) {\n              paint.setPathEffect(child);\n            }\n          });\n          const filters = children.filter(isImageFilter);\n          if (filters.length > 0) {\n            paint.setImageFilter(\n              filters\n                .reverse()\n                .reduce<SkImageFilter | null>(\n                  Skia.ImageFilter.MakeCompose,\n                  null\n                )\n            );\n          }\n          return paint;\n        }),\n      [paint]\n    );\n    return <skDeclaration onDeclare={onDeclare} {...props} />;\n  }\n);\n"]}