@shopify/react-native-skia 0.1.118 → 0.1.119

package/src/renderer/nodes/Declaration.tsx

@@ -28,6 +28,10 @@ export const useDeclaration = <P,>(
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useCallback(cb, deps ?? []);
 
+export const isDeclarationNode = (
+  node: Node
+): node is DeclarationNode<unknown> => node instanceof DeclarationNode;
+
 export interface DeclarationProps<P> {
   onDeclare: DeclarationCallback<P>;
 }

package/src/renderer/nodes/Drawing.tsx

@@ -2,7 +2,7 @@ import type { DependencyList, ReactNode } from "react";
 import { useCallback } from "react";
 
 import type { DrawingContext } from "../DrawingContext";
-import { processPaint, selectPaint } from "../processors";
+import { processPaint } from "../processors";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 import { materialize } from "../processors/Animations/Animations";
 import { isPaint } from "../../skia";
@@ -51,25 +51,15 @@ export class DrawingNode<P> extends Node<P> {
     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) => {
-        this.onDraw({ ...ctx, paint }, drawingProps, this);
+      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: currentPaint }, drawingProps, this);
       });
     }
   }

package/src/renderer/nodes/Node.ts

@@ -1,4 +1,3 @@
-import { isPaint } from "../../skia";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { DependencyManager } from "../DependencyManager";
 import type { DrawingContext } from "../DrawingContext";
@@ -15,7 +14,7 @@ export abstract class Node<P = unknown> {
   readonly children: Node[] = [];
   _props: AnimatedProps<P>;
   memoizable = false;
-  memoized = false;
+  memoized: DeclarationResult | null = null;
   parent?: Node;
   depMgr: DependencyManager;
 
@@ -38,21 +37,19 @@ export abstract class Node<P = unknown> {
     return this._props;
   }
 
-  visit(ctx: DrawingContext) {
+  visit(ctx: DrawingContext, children?: Node[]) {
     const returnedValues: Exclude<DeclarationResult, null>[] = [];
-    let currentCtx = ctx;
-    this.children.forEach((child) => {
+    (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 = ret;
+          }
         }
-        if (child.memoizable) {
-          child.memoized = true;
-        }
+      } else {
+        returnedValues.push(child.memoized);
       }
     });
     return returnedValues;

package/src/renderer/processors/Paint.ts

@@ -6,14 +6,22 @@ import {
   StrokeJoin,
   StrokeCap,
   processColor,
+  isShader,
+  isMaskFilter,
+  isColorFilter,
+  isPathEffect,
+  isImageFilter,
+  Skia,
 } from "../../skia";
-import type { SkPaint, Color } from "../../skia";
+import type { SkPaint, Color, SkImageFilter } from "../../skia";
+import type { DeclarationResult } from "../nodes";
 export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
 
 export interface ChildrenProps {
   children?: ReactNode | ReactNode[];
 }
 
+// TODO: rename to paint props?
 export interface CustomPaintProps extends ChildrenProps {
   paint?: RefObject<SkPaint>;
   color?: Color;
@@ -33,6 +41,7 @@ export const processPaint = (
   paint: SkPaint,
   currentOpacity: number,
   {
+    paint: paintRef,
     color,
     blendMode,
     style,
@@ -41,8 +50,12 @@ export const processPaint = (
     strokeCap,
     strokeMiter,
     opacity,
-  }: CustomPaintProps
+  }: CustomPaintProps,
+  children: DeclarationResult[]
 ) => {
+  if (paintRef && paintRef.current) {
+    return paintRef.current;
+  }
   if (color !== undefined) {
     const c = processColor(color, currentOpacity);
     paint.setShader(null);
@@ -72,34 +85,24 @@ export const processPaint = (
   if (opacity !== undefined) {
     paint.setAlphaf(opacity);
   }
-};
-
-export const selectPaint = (
-  currentPaint: SkPaint,
-  {
-    paint,
-    color: cl,
-    blendMode,
-    style: paintStyle,
-    strokeWidth,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity,
-  }: CustomPaintProps
-) => {
-  const hasCustomPaint =
-    cl !== undefined ||
-    blendMode !== undefined ||
-    paintStyle !== undefined ||
-    strokeWidth !== undefined ||
-    strokeJoin !== undefined ||
-    opacity !== undefined ||
-    strokeCap !== undefined ||
-    strokeMiter !== undefined;
-  const parentPaint = paint?.current ?? currentPaint;
-  if (hasCustomPaint) {
-    return parentPaint.copy();
+  children.forEach((child) => {
+    if (isShader(child)) {
+      paint.setShader(child);
+    } else if (isMaskFilter(child)) {
+      paint.setMaskFilter(child);
+    } else if (isColorFilter(child)) {
+      paint.setColorFilter(child);
+    } else if (isPathEffect(child)) {
+      paint.setPathEffect(child);
+    }
+  });
+  const filters = children.filter(isImageFilter);
+  if (filters.length > 0) {
+    paint.setImageFilter(
+      filters
+        .reverse()
+        .reduce<SkImageFilter | null>(Skia.ImageFilter.MakeCompose, null)
+    );
   }
-  return parentPaint;
+  return paint;
 };

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

@@ -1,30 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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/module/renderer/components/Defs.js

@@ -1,16 +0,0 @@
-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 { createDeclaration } from "../nodes";
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-export const Defs = props => {
-  return /*#__PURE__*/React.createElement("skDeclaration", _extends({
-    onDeclare: onDeclare
-  }, props));
-};
-//# sourceMappingURL=Defs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["Defs.tsx"],"names":["React","createDeclaration","onDeclare","Defs","props"],"mappings":";;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAGA,SAASC,iBAAT,QAAkC,UAAlC;AAMA,MAAMC,SAAS,GAAGD,iBAAiB,CAAC,MAAM;AACxC;AACA;AACA;AACA,SAAO,IAAP;AACD,CALkC,CAAnC;AAOA,OAAO,MAAME,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/typescript/src/renderer/components/Defs.d.ts

@@ -1,5 +0,0 @@
-import type { ReactNode } from "react";
-export interface DefsProps {
-    children: ReactNode | ReactNode[];
-}
-export declare const Defs: (props: DefsProps) => JSX.Element;

package/src/renderer/components/Defs.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import type { ReactNode } from "react";
-
-import { createDeclaration } from "../nodes";
-
-export interface DefsProps {
-  children: ReactNode | ReactNode[];
-}
-
-const onDeclare = createDeclaration(() => {
-  // Do nothing.
-  // The goal of this component is to avoid declared paint from
-  // being used in the drawing context automatically
-  return null;
-});
-
-export const Defs = (props: DefsProps) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
-};