@shopify/react-native-skia 0.1.115 → 0.1.119

package/src/renderer/components/Paint.tsx

@@ -1,15 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
-import type { SkPaint, SkImageFilter } from "../../skia";
-import {
-  isShader,
-  isMaskFilter,
-  isColorFilter,
-  Skia,
-  isImageFilter,
-  isPathEffect,
-} from "../../skia";
+import type { SkPaint } from "../../skia";
+import { Skia } from "../../skia";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
@@ -26,32 +19,9 @@ export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>
-        createDeclaration<PaintProps>((paintProps, children, ctx) => {
-          processPaint(paint, ctx.opacity, paintProps);
-          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 paint;
-        }),
+        createDeclaration<PaintProps>((paintProps, children, ctx) =>
+          processPaint(paint, ctx.opacity, paintProps, children)
+        ),
       [paint]
     );
     return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/Picture.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+import type { SkPicture } from "../../skia";
+import { createDrawing } from "../nodes/Drawing";
+
+export interface PictureProps {
+  picture: SkPicture;
+}
+
+const onDraw = createDrawing<PictureProps>((ctx, { picture }) => {
+  const { canvas } = ctx;
+  canvas.drawPicture(picture);
+});
+
+export const Picture = (props: PictureProps) => {
+  return <skDrawing onDraw={onDraw} {...props} skipProcessing />;
+};

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,50 +1,36 @@
-import React from "react";
+import type { SkColor } from "../../../skia";
+import { BlendMode, Skia, TileMode } from "../../../skia";
+import type { SkImageFilter } from "../../../skia/ImageFilter/ImageFilter";
 
-import { BlendMode, Skia, TileMode, processColor } from "../../../skia";
-import { createDeclaration } from "../../nodes/Declaration";
-import type { AnimatedProps } from "../../processors";
-import type { Color } from "../../../skia";
-
-import { getInput } from "./getInput";
-
-export interface InnerShadowProps {
-  dx: number;
-  dy: number;
-  blur: number;
-  color: Color;
-  shadowOnly?: boolean;
-  inner?: boolean;
-}
-
-const onDeclare = createDeclaration<InnerShadowProps>(
-  ({ dx, dy, blur, color, shadowOnly }, children, { opacity }) => {
-    const input = getInput(children);
-    const cl = processColor(color, opacity);
-    const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
-      null
-    );
-    const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
-      null
-    );
-    const f1 = Skia.ImageFilter.MakeColorFilter(
-      Skia.ColorFilter.MakeBlend(cl, BlendMode.SrcOut),
-      null
-    );
-    const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
-    const f3 = Skia.ImageFilter.MakeBlur(blur, blur, TileMode.Decal, f2);
-    const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
-    if (shadowOnly) {
-      return f4;
-    }
-    return Skia.ImageFilter.MakeCompose(
-      input,
-      Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
-    );
+export const MakeInnerShadow = (
+  shadowOnly: boolean | undefined,
+  dx: number,
+  dy: number,
+  sigmaX: number,
+  sigmaY: number,
+  color: SkColor,
+  input: SkImageFilter | null
+) => {
+  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.Dst),
+    null
+  );
+  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(0xff000000, BlendMode.SrcIn),
+    null
+  );
+  const f1 = Skia.ImageFilter.MakeColorFilter(
+    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
+    null
+  );
+  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
+  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
+  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
+  if (shadowOnly) {
+    return f4;
   }
-);
-
-export const InnerShadow = (props: AnimatedProps<InnerShadowProps>) => {
-  return <skDeclaration onDeclare={onDeclare} {...props} />;
+  return Skia.ImageFilter.MakeCompose(
+    input,
+    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
+  );
 };

package/src/renderer/components/imageFilters/Shadow.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { Skia } from "../../../skia";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { AnimatedProps } from "../../processors/Animations/Animations";
+import type { Color } from "../../../skia/Color";
+import { processColor } from "../../../skia/Color";
+
+import { getInput } from "./getInput";
+import { MakeInnerShadow } from "./InnerShadow";
+
+export interface ShadowProps {
+  dx: number;
+  dy: number;
+  blur: number;
+  color: Color;
+  inner?: boolean;
+  shadowOnly?: boolean;
+}
+
+const onDeclare = createDeclaration<ShadowProps>(
+  ({ dx, dy, blur, color: cl, shadowOnly, inner }, children, { opacity }) => {
+    const input = getInput(children);
+    const color = processColor(cl, opacity);
+    let factory;
+    if (inner) {
+      factory = MakeInnerShadow.bind(null, shadowOnly);
+    } else {
+      factory = shadowOnly
+        ? Skia.ImageFilter.MakeDropShadowOnly
+        : Skia.ImageFilter.MakeDropShadow;
+    }
+    return factory(dx, dy, blur, blur, color, input);
+  }
+);
+
+export const Shadow = (props: AnimatedProps<ShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};

package/src/renderer/components/imageFilters/index.ts

@@ -1,6 +1,5 @@
 export * from "./Blur";
 export * from "./Offset";
 export * from "./DisplacementMap";
-export * from "./DropShadow";
-export * from "./InnerShadow";
+export * from "./Shadow";
 export * from "./Morphology";

package/src/renderer/components/index.ts

@@ -8,10 +8,11 @@ export * from "./maskFilters";
 export * from "./imageFilters";
 export * from "./pathEffects";
 export * from "../processors";
+export * from "./Picture";
 
 export * from "./Group";
 export * from "./Mask";
 export * from "./Paint";
 export * from "./Compose";
 export * from "./Blend";
-export * from "./Defs";
+export * from "./Drawing";

package/src/renderer/components/maskFilters/Blur.tsx

@@ -29,5 +29,5 @@ export const BlurMask = (props: AnimatedProps<BlurMaskProps>) => {
 
 BlurMask.defaultProps = {
   style: "normal",
-  respectCTM: false,
+  respectCTM: true,
 };

package/src/renderer/components/shapes/Box.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+import type { Color, SkRRect } from "../../../skia";
+import { ClipOp, BlurStyle, Skia, processColor } from "../../../skia";
+import { createDrawing } from "../../nodes";
+import type { AnimatedProps, CustomPaintProps } from "../../processors";
+import { add, vec, rrect } from "../../processors";
+import { rect, isRRect } from "../../processors/Rects";
+import { createDeclaration } from "../../nodes/Declaration";
+import type { SkJSIInstance } from "../../../skia/JsiInstance";
+import type { SkRect } from "../../../skia/Rect";
+
+const inflate = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  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 = (box: SkRRect, dx: number, dy: number, tx = 0, ty = 0) =>
+  inflate(box, -dx, -dy, tx, ty);
+
+interface BoxShadowProps {
+  dx?: number;
+  dy?: number;
+  spread?: number;
+  blur: number;
+  color?: Color;
+  inner?: boolean;
+}
+
+interface BoxShadowDecl extends BoxShadowProps, SkJSIInstance<"BoxShadow"> {}
+
+const onDeclare = createDeclaration<BoxShadowProps>(
+  ({ dx, dy, spread, blur, color, inner }) => {
+    return { dx, dy, spread, blur, color, inner, __typename__: "BoxShadow" };
+  }
+);
+
+export const BoxShadow = (props: AnimatedProps<BoxShadowProps>) => {
+  return <skDeclaration onDeclare={onDeclare} {...props} />;
+};
+
+const isBoxShadow = (s: SkJSIInstance<string>): s is BoxShadowDecl =>
+  s.__typename__ === "BoxShadow";
+
+interface BoxProps extends CustomPaintProps {
+  box: SkRRect | SkRect;
+}
+
+const onDraw = createDrawing<BoxProps>((ctx, { box: defaultBox }, node) => {
+  const box = isRRect(defaultBox) ? defaultBox : rrect(defaultBox, 0, 0);
+  const { canvas, paint, opacity } = ctx;
+  const shadows = node.visit(ctx).filter<BoxShadowDecl>(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: AnimatedProps<BoxProps>) => {
+  return <skDrawing onDraw={onDraw} {...props} />;
+};
+
+Box.defaultProps = {
+  shadows: [],
+};

package/src/renderer/components/shapes/FitBox.tsx

@@ -13,11 +13,13 @@ interface FitProps {
   children: ReactNode | ReactNode[];
 }
 
+export const fitbox = (fit: Fit, src: SkRect, dst: SkRect) => {
+  const rects = fitRects(fit, src, dst);
+  return rect2rect(rects.src, rects.dst);
+};
+
 export const FitBox = ({ fit, src, dst, children }: FitProps) => {
-  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 <Group transform={transform}>{children}</Group>;
 };
 

package/src/renderer/components/shapes/index.ts

@@ -10,3 +10,4 @@ export * from "./Patch";
 export * from "./Vertices";
 export * from "./Fill";
 export * from "./FitBox";
+export * from "./Box";

package/src/renderer/index.ts

@@ -1,3 +1,4 @@
 export * from "./Canvas";
 export * from "./components";
 export * from "./nodes";
+export * from "./useContextBridge";

package/src/renderer/nodes/Declaration.tsx

@@ -1,3 +1,6 @@
+import type { DependencyList } from "react";
+import { useCallback } from "react";
+
 import type { DrawingContext } from "../DrawingContext";
 import type { SkJSIInstance } from "../../skia/JsiInstance";
 import type { AnimatedProps } from "../processors";
@@ -18,6 +21,17 @@ export const createDeclaration = <T,>(
   cb: DeclarationCallback<T>
 ): DeclarationCallback<T> => cb;
 
+export const useDeclaration = <P,>(
+  cb: DeclarationCallback<P>,
+  deps?: DependencyList
+) =>
+  // 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

@@ -1,8 +1,8 @@
-import type { ReactNode } from "react";
-import React from "react";
+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";
@@ -21,16 +21,16 @@ type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
 export const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>
   cb;
 
+export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useCallback(cb, deps ?? []);
+
 export type DrawingProps<T> = {
   onDraw: DrawingCallback<T>;
   skipProcessing?: boolean;
   children?: ReactNode | ReactNode[];
 };
 
-export const Drawing = <P,>(props: DrawingProps<P>) => {
-  return <skDrawing {...props} />;
-};
-
 export class DrawingNode<P> extends Node<P> {
   onDraw: DrawingCallback<P>;
   skipProcessing: boolean;
@@ -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/src/renderer/processors/math/Math.ts

@@ -1,2 +1,18 @@
+/**
+ * Linear interpolation
+ * @param value
+ * @param x
+ * @param y
+ */
 export const mix = (value: number, x: number, y: number) =>
   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: number, lowerBound: number, upperBound: number) =>
+  Math.min(Math.max(lowerBound, value), upperBound);