@shopify/react-native-skia 0.1.171 → 0.1.173

package/src/dom/nodes/RenderNode.ts

@@ -5,27 +5,18 @@ import type {
   SkPath,
   SkPaint,
 } from "../../skia/types";
-import {
-  StrokeCap,
-  StrokeJoin,
-  PaintStyle,
-  BlendMode,
-  ClipOp,
-  isRRect,
-} from "../../skia/types";
+import { ClipOp, isRRect } from "../../skia/types";
 import type {
   RenderNode,
   GroupProps,
-  DrawingContext,
   NodeType,
   Node,
+  DrawingContext,
 } from "../types";
 
 import { isPathDef, processPath, processTransformProps } from "./datatypes";
 import type { NodeContext } from "./Node";
 import { JsiNode, JsiDeclarationNode } from "./Node";
-import type { PaintContext } from "./PaintContext";
-import { enumKey } from "./datatypes/Enum";
 
 const paintProps = [
   "color",
@@ -49,6 +40,7 @@ export abstract class JsiRenderNode<P extends GroupProps>
   implements RenderNode<P>
 {
   paintCache: PaintCache | null = null;
+
   matrix: SkMatrix;
   clipRect?: SkRect;
   clipRRect?: SkRRect;
@@ -63,7 +55,6 @@ export abstract class JsiRenderNode<P extends GroupProps>
   setProps(props: P) {
     super.setProps(props);
     this.onPropChange();
-    this.paintCache = null;
   }
 
   setProp<K extends keyof P>(key: K, value: P[K]) {
@@ -88,14 +79,18 @@ export abstract class JsiRenderNode<P extends GroupProps>
 
   addChild(child: Node<unknown>) {
     if (child instanceof JsiDeclarationNode) {
-      child.setInvalidate(() => (this.paintCache = null));
+      child.setInvalidate(() => {
+        this.paintCache = null;
+      });
     }
     super.addChild(child);
   }
 
   insertChildBefore(child: Node<unknown>, before: Node<unknown>) {
     if (child instanceof JsiDeclarationNode) {
-      child.setInvalidate(() => (this.paintCache = null));
+      child.setInvalidate(() => {
+        this.paintCache = null;
+      });
     }
     super.insertChildBefore(child, before);
   }
@@ -117,110 +112,17 @@ export abstract class JsiRenderNode<P extends GroupProps>
     processTransformProps(this.matrix, this.props);
   }
 
-  private getPaintCtx() {
-    let ctx: PaintContext | undefined;
-    const {
-      color,
-      strokeWidth,
-      blendMode,
-      style,
-      strokeJoin,
-      strokeCap,
-      strokeMiter,
-      opacity,
-      antiAlias,
-    } = this.props;
-    if (
-      color !== undefined ||
-      strokeWidth !== undefined ||
-      blendMode !== undefined ||
-      style !== undefined ||
-      strokeJoin !== undefined ||
-      strokeCap !== undefined ||
-      strokeMiter !== undefined ||
-      opacity !== undefined ||
-      antiAlias !== undefined
-    ) {
-      ctx = { opacity: 1 };
-      if (color !== undefined) {
-        ctx.color = this.Skia.Color(color);
-      }
-      if (strokeWidth !== undefined) {
-        ctx.strokeWidth = strokeWidth;
-      }
-      if (blendMode !== undefined) {
-        ctx.blendMode = BlendMode[enumKey(blendMode)];
-      }
-      if (style !== undefined) {
-        ctx.style = PaintStyle[enumKey(style)];
-      }
-      if (strokeJoin !== undefined) {
-        ctx.strokeJoin = StrokeJoin[enumKey(strokeJoin)];
-      }
-      if (strokeCap !== undefined) {
-        ctx.strokeCap = StrokeCap[enumKey(strokeCap)];
-      }
-      if (strokeMiter !== undefined) {
-        ctx.strokeMiter = strokeMiter;
-      }
-      if (opacity !== undefined) {
-        ctx.opacity = opacity;
-      }
-      if (antiAlias !== undefined) {
-        ctx.antiAlias = antiAlias;
-      }
-    }
-    this._children.forEach((child) => {
-      if (child instanceof JsiDeclarationNode) {
-        if (child.isColorFilter()) {
-          ctx = ctx || {};
-          const cf = child.materialize();
-          ctx.colorFilter = ctx.colorFilter
-            ? this.Skia.ColorFilter.MakeCompose(cf, ctx.colorFilter)
-            : cf;
-        } else if (child.isShader()) {
-          ctx = ctx || {};
-          const shader = child.materialize();
-          ctx.shader = shader;
-        } else if (child.isPathEffect()) {
-          ctx = ctx || {};
-          const pe = child.materialize();
-          ctx.pathEffect = ctx.pathEffect
-            ? this.Skia.PathEffect.MakeCompose(pe, ctx.pathEffect)
-            : pe;
-        } else if (child.isImageFilter()) {
-          ctx = ctx || {};
-          const filter = child.materialize();
-          ctx.imageFilter = ctx.imageFilter
-            ? this.Skia.ImageFilter.MakeCompose(filter, ctx.imageFilter)
-            : filter;
-        } else if (child.isMaskFilter()) {
-          ctx = ctx || {};
-          const filter = child.materialize();
-          ctx.maskFilter = filter;
-        }
-      }
-    });
-    return ctx;
-  }
-
-  render(parentCtx: DrawingContext) {
+  render(ctx: DrawingContext) {
     const { invertClip, layer, matrix, transform } = this.props;
-    const { canvas } = parentCtx;
+    const { canvas } = ctx;
+    const parentPaint = ctx.paint;
+
+    const cache =
+      this.paintCache !== null && this.paintCache.parent === ctx.paint
+        ? this.paintCache.child
+        : undefined;
+    const shouldRestore = ctx.saveAndConcat(this, cache);
 
-    if (
-      this.paintCache === null ||
-      this.paintCache.parent !== parentCtx.paint
-    ) {
-      const paintCtx = this.getPaintCtx();
-      const child = paintCtx
-        ? concatPaint(parentCtx.paint.copy(), paintCtx)
-        : parentCtx.paint;
-      this.paintCache = { parent: parentCtx.paint, child };
-    }
-    const paint = this.paintCache.child;
-    // TODO: can we only recreate a new context here if needed?
-    const ctx = { ...parentCtx, paint };
     const hasTransform = matrix !== undefined || transform !== undefined;
     const hasClip =
       this.clipRect !== undefined ||
@@ -256,74 +158,14 @@ export abstract class JsiRenderNode<P extends GroupProps>
     if (shouldSave) {
       canvas.restore();
     }
+    if (shouldRestore) {
+      this.paintCache = {
+        parent: parentPaint,
+        child: ctx.paint,
+      };
+      ctx.restore();
+    }
   }
 
   abstract renderNode(ctx: DrawingContext): void;
 }
-
-const concatPaint = (
-  paint: SkPaint,
-  {
-    color,
-    strokeWidth,
-    shader,
-    antiAlias,
-    blendMode,
-    colorFilter,
-    imageFilter,
-    maskFilter,
-    pathEffect,
-    opacity,
-    strokeCap,
-    strokeJoin,
-    strokeMiter,
-    style,
-  }: PaintContext
-) => {
-  if (opacity !== undefined) {
-    paint.setAlphaf(paint.getAlphaf() * opacity);
-  }
-  if (color !== undefined) {
-    const currentOpacity = paint.getAlphaf();
-    paint.setShader(null);
-    paint.setColor(color);
-    paint.setAlphaf(currentOpacity * paint.getAlphaf());
-  }
-  if (strokeWidth !== undefined) {
-    paint.setStrokeWidth(strokeWidth);
-  }
-  if (shader !== undefined) {
-    paint.setShader(shader);
-  }
-  if (antiAlias !== undefined) {
-    paint.setAntiAlias(antiAlias);
-  }
-  if (blendMode !== undefined) {
-    paint.setBlendMode(blendMode);
-  }
-  if (colorFilter !== undefined) {
-    paint.setColorFilter(colorFilter);
-  }
-  if (imageFilter !== undefined) {
-    paint.setImageFilter(imageFilter);
-  }
-  if (maskFilter !== undefined) {
-    paint.setMaskFilter(maskFilter);
-  }
-  if (pathEffect !== undefined) {
-    paint.setPathEffect(pathEffect);
-  }
-  if (strokeCap !== undefined) {
-    paint.setStrokeCap(strokeCap);
-  }
-  if (strokeJoin !== undefined) {
-    paint.setStrokeJoin(strokeJoin);
-  }
-  if (strokeMiter !== undefined) {
-    paint.setStrokeMiter(strokeMiter);
-  }
-  if (style !== undefined) {
-    paint.setStyle(style);
-  }
-  return paint;
-};

package/src/dom/nodes/drawings/BackdropFilterNode.ts

@@ -1,9 +1,9 @@
-import { isColorFilter } from "../../../skia/types";
 import type { ChildrenProps, DrawingContext } from "../../types";
 import { NodeType } from "../../types";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
+import type { SkImageFilter } from "../../../skia/types/ImageFilter/ImageFilter";
 
 export class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
   constructor(ctx: NodeContext, props: ChildrenProps) {
@@ -14,17 +14,24 @@ export class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
     return null;
   }
 
-  draw({ canvas }: DrawingContext) {
+  draw({ canvas, declarationCtx }: DrawingContext) {
     const child = this._children[0];
-    const filter =
-      child instanceof JsiDeclarationNode ? child.materialize() : null;
-    canvas.saveLayer(
-      undefined,
-      null,
-      isColorFilter(filter)
-        ? this.Skia.ImageFilter.MakeColorFilter(filter, null)
-        : filter
-    );
+    let imageFilter: SkImageFilter | null = null;
+    if (child instanceof JsiDeclarationNode) {
+      declarationCtx.save();
+      child.decorate(declarationCtx);
+      const imgf = declarationCtx.imageFilters.pop();
+      if (imgf) {
+        imageFilter = imgf;
+      } else {
+        const cf = declarationCtx.colorFilters.pop();
+        if (cf) {
+          imageFilter = this.Skia.ImageFilter.MakeColorFilter(cf, null);
+        }
+      }
+      declarationCtx.restore();
+    }
+    canvas.saveLayer(undefined, null, imageFilter);
     canvas.restore();
   }
 }

package/src/dom/nodes/drawings/Box.ts

@@ -6,6 +6,7 @@ import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import { JsiRenderNode } from "../RenderNode";
+import type { DeclarationContext } from "../../types/DeclarationContext";
 
 const inflate = (
   Skia: Skia,
@@ -35,14 +36,15 @@ const deflate = (
   ty = 0
 ) => inflate(Skia, box, -dx, -dy, tx, ty);
 
-export class BoxShadowNode extends JsiDeclarationNode<
-  BoxShadowProps,
-  BoxShadowProps
-> {
+export class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps> {
   constructor(ctx: NodeContext, props: BoxShadowProps) {
     super(ctx, DeclarationType.Unknown, NodeType.BoxShadow, props);
   }
 
+  decorate(_ctx: DeclarationContext) {
+    // do nothing
+  }
+
   materialize() {
     return this.props;
   }

package/src/dom/nodes/paint/BlendNode.ts

@@ -1,79 +1,32 @@
 import type { BlendProps } from "../../types/ImageFilters";
-import type { SkShader, SkImageFilter } from "../../../skia/types";
 import { BlendMode } from "../../../skia/types";
 import { DeclarationType, NodeType } from "../../types/NodeType";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
-import type { Node } from "../../types";
 import { enumKey } from "../datatypes";
+import type { DeclarationContext } from "../../types/DeclarationContext";
+import { composeDeclarations } from "../../types/DeclarationContext";
 
-import { ImageFilterDeclaration } from "./ImageFilters";
-import { ShaderDeclaration } from "./Shaders";
-
-export class BlendNode extends JsiDeclarationNode<
-  BlendProps,
-  SkShader | SkImageFilter
-> {
+export class BlendNode extends JsiDeclarationNode<BlendProps> {
   constructor(ctx: NodeContext, props: BlendProps) {
     super(ctx, DeclarationType.ImageFilter, NodeType.Blend, props);
   }
 
-  private checkChild(
-    child: ImageFilterDeclaration<unknown> | ShaderDeclaration<unknown>
-  ) {
-    if (this._children.length > 0) {
-      if (child.declarationType === DeclarationType.ImageFilter) {
-        this.declarationType = DeclarationType.ImageFilter;
-      } else {
-        this.declarationType = DeclarationType.Shader;
-      }
-    }
-  }
-
-  addChild(child: Node<unknown>) {
-    if (
-      !(child instanceof JsiDeclarationNode) ||
-      (child.declarationType !== DeclarationType.Shader &&
-        child.declarationType !== DeclarationType.ImageFilter)
-    ) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    this.checkChild(child);
-    super.addChild(child);
-  }
-
-  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
-    if (
-      !(child instanceof ImageFilterDeclaration) ||
-      !(child instanceof ShaderDeclaration)
-    ) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    this.checkChild(child);
-    super.insertChildBefore(child, before);
-  }
-
-  materialize() {
+  decorate(ctx: DeclarationContext) {
+    this.decorateChildren(ctx);
     const { Skia } = this;
     const blend = BlendMode[enumKey(this.props.mode)];
-    if (this.declarationType === DeclarationType.ImageFilter) {
-      return (this._children as ImageFilterDeclaration<unknown>[])
-        .reverse()
-        .reduce<SkImageFilter | null>((inner, outer) => {
-          if (inner === null) {
-            return outer.materialize();
-          }
-          return Skia.ImageFilter.MakeBlend(blend, outer.materialize(), inner);
-        }, null) as SkImageFilter;
-    } else {
-      return (this._children as ShaderDeclaration<unknown>[])
-        .reverse()
-        .reduce<SkShader | null>((inner, outer) => {
-          if (inner === null) {
-            return outer.materialize();
-          }
-          return Skia.Shader.MakeBlend(blend, outer.materialize(), inner);
-        }, null) as SkShader;
+    // Blend ImageFilters
+    const imageFilters = ctx.imageFilters.popAll();
+    if (imageFilters.length > 0) {
+      const composer = Skia.ImageFilter.MakeBlend.bind(Skia.ImageFilter, blend);
+      ctx.imageFilters.push(composeDeclarations(imageFilters, composer));
+    }
+    // Blend Shaders
+    const shaders = ctx.shaders.popAll();
+    if (shaders.length > 0) {
+      const composer = Skia.Shader.MakeBlend.bind(Skia.Shader, blend);
+      ctx.shaders.push(composeDeclarations(shaders, composer));
     }
   }
 }

package/src/dom/nodes/paint/ColorFilters.ts

@@ -1,53 +1,28 @@
-import { BlendMode } from "../../../skia/types";
 import type { SkColorFilter } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
 import type { NodeContext } from "../Node";
 import { JsiDeclarationNode } from "../Node";
 import type {
   BlendColorFilterProps,
   MatrixColorFilterProps,
-  Node,
 } from "../../types";
 import { DeclarationType, NodeType } from "../../types";
 import { enumKey } from "../datatypes/Enum";
 import type { LerpColorFilterProps } from "../../types/ColorFilters";
+import type { DeclarationContext } from "../../types/DeclarationContext";
 
-export abstract class ColorFilterDeclaration<
-  P,
-  Nullable extends null | never = never
-> extends JsiDeclarationNode<P, SkColorFilter, Nullable> {
+export abstract class ColorFilterDeclaration<P> extends JsiDeclarationNode<P> {
   constructor(ctx: NodeContext, type: NodeType, props: P) {
     super(ctx, DeclarationType.ColorFilter, type, props);
   }
 
-  addChild(child: Node<unknown>) {
-    if (!(child instanceof ColorFilterDeclaration)) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    super.addChild(child);
-  }
-
-  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
-    if (!(child instanceof ColorFilterDeclaration)) {
-      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
-    }
-    super.insertChildBefore(child, before);
-  }
-
-  compose(filter: SkColorFilter) {
-    const children = this._children as ColorFilterDeclaration<unknown>[];
-    if (this._children.length === 0) {
-      return filter;
-    } else {
-      return this.Skia.ColorFilter.MakeCompose(
-        filter,
-        children.reduce<SkColorFilter | null>((acc, child) => {
-          if (acc === null) {
-            return child.materialize();
-          }
-          return this.Skia.ColorFilter.MakeCompose(acc, child.materialize());
-        }, null) as SkColorFilter
-      );
-    }
+  protected composeAndPush(ctx: DeclarationContext, cf1: SkColorFilter) {
+    ctx.save();
+    this.decorateChildren(ctx);
+    const cf2 = ctx.colorFilters.popAllAsOne();
+    ctx.restore();
+    const cf = cf2 ? this.Skia.ColorFilter.MakeCompose(cf1, cf2) : cf1;
+    ctx.colorFilters.push(cf);
   }
 }
 
@@ -56,10 +31,10 @@ export class MatrixColorFilterNode extends ColorFilterDeclaration<MatrixColorFil
     super(ctx, NodeType.MatrixColorFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { matrix } = this.props;
     const cf = this.Skia.ColorFilter.MakeMatrix(matrix);
-    return this.compose(cf);
+    this.composeAndPush(ctx, cf);
   }
 }
 
@@ -68,11 +43,11 @@ export class BlendColorFilterNode extends ColorFilterDeclaration<BlendColorFilte
     super(ctx, NodeType.BlendColorFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const { mode } = this.props;
     const color = this.Skia.Color(this.props.color);
     const cf = this.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
-    return this.compose(cf);
+    this.composeAndPush(ctx, cf);
   }
 }
 
@@ -81,9 +56,9 @@ export class LinearToSRGBGammaColorFilterNode extends ColorFilterDeclaration<nul
     super(ctx, NodeType.LinearToSRGBGammaColorFilter, null);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const cf = this.Skia.ColorFilter.MakeLinearToSRGBGamma();
-    return this.compose(cf);
+    this.composeAndPush(ctx, cf);
   }
 }
 
@@ -92,9 +67,9 @@ export class SRGBToLinearGammaColorFilterNode extends ColorFilterDeclaration<nul
     super(ctx, NodeType.SRGBToLinearGammaColorFilter, null);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const cf = this.Skia.ColorFilter.MakeSRGBToLinearGamma();
-    return this.compose(cf);
+    this.composeAndPush(ctx, cf);
   }
 }
 
@@ -103,9 +78,9 @@ export class LumaColorFilterNode extends ColorFilterDeclaration<null> {
     super(ctx, NodeType.LumaColorFilter, null);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
     const cf = this.Skia.ColorFilter.MakeLumaColorFilter();
-    return this.compose(cf);
+    this.composeAndPush(ctx, cf);
   }
 }
 
@@ -114,16 +89,18 @@ export class LerpColorFilterNode extends ColorFilterDeclaration<LerpColorFilterP
     super(ctx, NodeType.LerpColorFilter, props);
   }
 
-  materialize() {
+  decorate(ctx: DeclarationContext) {
+    ctx.save();
+    this.decorateChildren(ctx);
     const { t } = this.props;
-    const [first, second] = this.children() as JsiDeclarationNode<
-      unknown,
-      SkColorFilter
-    >[];
-    return this.Skia.ColorFilter.MakeLerp(
-      t,
-      first.materialize(),
-      second.materialize()
-    );
+    const second = ctx.colorFilters.pop();
+    const first = ctx.colorFilters.pop();
+    ctx.restore();
+    if (!first || !second) {
+      throw new Error(
+        "LerpColorFilterNode: missing two color filters as children"
+      );
+    }
+    ctx.colorFilters.push(this.Skia.ColorFilter.MakeLerp(t, first, second));
   }
 }