@shopify/react-native-skia 0.1.130 → 0.1.131

package/src/animation/functions/interpolatePaths.ts

@@ -0,0 +1,38 @@
+import type { SkPath } from "../../skia/types";
+
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export const interpolatePaths = (
+  value: number,
+  input: number[],
+  outputRange: SkPath[]
+) => {
+  let i = 0;
+  for (; i <= input.length - 1; i++) {
+    if (value >= input[i] && value <= input[i + 1]) {
+      break;
+    }
+    if (i === input.length - 1) {
+      if (value < input[0]) {
+        return outputRange[0];
+      } else {
+        return outputRange[i];
+      }
+    }
+  }
+  const t = (value - input[i]) / (input[i + 1] - input[i]);
+  return outputRange[i + 1].interpolate(outputRange[i], t)!;
+};

package/src/animation/functions/interpolateVector.ts

@@ -0,0 +1,26 @@
+import type { Vector } from "../../skia/types";
+
+import { interpolate } from "./interpolate";
+
+export const interpolateVector = (
+  value: number,
+  inputRange: readonly number[],
+  outputRange: readonly Vector[],
+  options?: Parameters<typeof interpolate>[3]
+) => ({
+  x: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.x),
+    options
+  ),
+  y: interpolate(
+    value,
+    inputRange,
+    outputRange.map((v) => v.y),
+    options
+  ),
+});
+
+export const mixVector = (value: number, from: Vector, to: Vector) =>
+  interpolateVector(value, [0, 1], [from, to]);

package/src/index.ts

@@ -1,5 +1,6 @@
 import "./skia/NativeSetup";
 export * from "./renderer";
+export * from "./renderer/Canvas";
 export * from "./views";
 export * from "./skia";
 export * from "./external";

package/src/renderer/Canvas.tsx

@@ -3,7 +3,6 @@ import React, {
   useState,
   useCallback,
   useMemo,
-  useContext,
   forwardRef,
   useRef,
 } from "react";
@@ -19,36 +18,15 @@ import ReactReconciler from "react-reconciler";
 
 import { SkiaView, useDrawCallback } from "../views";
 import type { TouchHandler } from "../views";
-import { Skia, SkiaPaint } from "../skia";
-import type { FontMgr } from "../skia";
+import type { SkFontMgr } from "../skia/types";
 import { useValue } from "../values/hooks/useValue";
-import type { SkiaValue } from "../values/types";
+import { Skia } from "../skia/Skia";
 
 import { debug as hostDebug, skHostConfig } from "./HostConfig";
 // import { debugTree } from "./nodes";
-import { vec } from "./processors";
 import { Container } from "./nodes";
 import { DependencyManager } from "./DependencyManager";
-
-const CanvasContext = React.createContext<SkiaValue<{
-  width: number;
-  height: number;
-}> | null>(null);
-
-export const useCanvas = () => {
-  const size = useContext(CanvasContext);
-  if (!size) {
-    throw new Error("Canvas context is not available");
-  }
-  return { size };
-};
-
-export const useCanvasSize = () => {
-  console.warn(
-    "useCanvasSize is deprecated, use the size member of useCanvas() instead."
-  );
-  return useCanvas().size;
-};
+import { CanvasProvider } from "./useCanvas";
 
 export const skiaReconciler = ReactReconciler(skHostConfig);
 
@@ -72,14 +50,15 @@ export interface CanvasProps extends ComponentProps<typeof SkiaView> {
   ref?: RefObject<SkiaView>;
   children: ReactNode;
   onTouch?: TouchHandler;
-  fontMgr?: FontMgr;
+  fontMgr?: SkFontMgr;
 }
 
 const defaultFontMgr = Skia.FontMgr.RefDefault();
 
 export const Canvas = forwardRef<SkiaView, CanvasProps>(
   ({ children, style, debug, mode, onTouch, fontMgr }, forwardedRef) => {
-    const canvasCtx = useValue({ width: 0, height: 0 });
+    const size = useValue({ width: 0, height: 0 });
+    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
     const [tick, setTick] = useState(0);
@@ -97,9 +76,7 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     // Render effect
     useEffect(() => {
       render(
-        <CanvasContext.Provider value={canvasCtx}>
-          {children}
-        </CanvasContext.Provider>,
+        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,
         root,
         container
       );
@@ -114,12 +91,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           onTouch(info.touches);
         }
         if (
-          width !== canvasCtx.current.width ||
-          height !== canvasCtx.current.height
+          width !== canvasCtx.size.current.width ||
+          height !== canvasCtx.size.current.height
         ) {
-          canvasCtx.current = { width, height };
+          canvasCtx.size.current = { width, height };
         }
-        const paint = SkiaPaint();
+        const paint = Skia.Paint();
         const ctx = {
           width,
           height,
@@ -128,8 +105,9 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
           paint,
           opacity: 1,
           ref,
-          center: vec(width / 2, height / 2),
+          center: Skia.Point(width / 2, height / 2),
           fontMgr: fontMgr ?? defaultFontMgr,
+          Skia,
         };
         container.draw(ctx);
       },

package/src/renderer/DrawingContext.ts

@@ -1,9 +1,7 @@
 import type { RefObject } from "react";
 
 import type { DrawingInfo, SkiaView } from "../views";
-import type { FontMgr, SkCanvas, SkPaint } from "../skia";
-
-import type { Vector } from "./processors/math/Vector";
+import type { SkFontMgr, SkCanvas, SkPaint, Skia, Vector } from "../skia/types";
 
 export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   canvas: SkCanvas;
@@ -11,5 +9,6 @@ export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
   opacity: number;
   center: Vector;
   ref: RefObject<SkiaView>;
-  fontMgr: FontMgr;
+  fontMgr: SkFontMgr;
+  Skia: Skia;
 }

package/src/renderer/HostConfig.ts

@@ -1,4 +1,4 @@
-/*global NodeJS, performance*/
+/*global NodeJS*/
 import type { HostConfig } from "react-reconciler";
 
 import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
@@ -137,7 +137,7 @@ export const skHostConfig: SkiaHostConfig = {
   /**
    * This function is used by the reconciler in order to calculate current time for prioritising work.
    */
-  now: performance.now,
+  now: Date.now,
 
   supportsMutation: true,
   isPrimaryRenderer: false,

package/src/renderer/components/Blend.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import React from "react";
 
-import { isImageFilter, Skia, BlendMode, isShader } from "../../skia";
+import { isImageFilter, BlendMode, isShader } from "../../skia/types";
 import { createDeclaration } from "../nodes";
 import type { AnimatedProps, SkEnum } from "../processors";
 import { enumKey } from "../processors/Paint";
@@ -11,16 +11,18 @@ interface BlendProps {
   children?: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<BlendProps>(({ mode }, children) => {
-  const [inner, outer] = children;
-  const blend = BlendMode[enumKey(mode)];
-  if (isImageFilter(outer) && isImageFilter(inner)) {
-    return Skia.ImageFilter.MakeBlend(blend, outer, inner);
-  } else if (isShader(outer) && isShader(inner)) {
-    return Skia.Shader.MakeBlend(blend, outer, inner);
+const onDeclare = createDeclaration<BlendProps>(
+  ({ mode }, children, { Skia }) => {
+    const [inner, outer] = children;
+    const blend = BlendMode[enumKey(mode)];
+    if (isImageFilter(outer) && isImageFilter(inner)) {
+      return Skia.ImageFilter.MakeBlend(blend, outer, inner);
+    } else if (isShader(outer) && isShader(inner)) {
+      return Skia.Shader.MakeBlend(blend, outer, inner);
+    }
+    throw new Error("<Blend /> can only blend Shaders or ImageFilters");
   }
-  throw new Error("<Blend /> can only blend Shaders or ImageFilters");
-});
+);
 
 export const Blend = (props: AnimatedProps<BlendProps>) => {
   return <skDeclaration onDeclare={onDeclare} {...props} />;

package/src/renderer/components/Compose.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isImageFilter, isColorFilter } from "../../skia";
+import { isImageFilter, isColorFilter } from "../../skia/types";
 import { createDeclaration } from "../nodes/Declaration";
 import type { AnimatedProps } from "../processors/Animations/Animations";
 
@@ -9,7 +9,7 @@ export interface ComposeProps {
   children: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration((_, children) => {
+const onDeclare = createDeclaration((_, children, { Skia }) => {
   const [inner, outer] = children;
   if (isColorFilter(outer) && isColorFilter(inner)) {
     return Skia.ColorFilter.MakeCompose(outer, inner);

package/src/renderer/components/Group.tsx

@@ -1,9 +1,13 @@
 import React from "react";
 import type { RefObject } from "react";
 
-import type { SkPaint } from "../../skia";
-import { ClipOp } from "../../skia";
-import { processTransform, processPaint, processClip } from "../processors";
+import type { SkPaint } from "../../skia/types";
+import { ClipOp } from "../../skia/types";
+import {
+  processCanvasTransform,
+  processPaint,
+  processClip,
+} from "../processors";
 import type {
   CustomPaintProps,
   TransformProps,
@@ -24,7 +28,7 @@ export interface GroupProps extends CustomPaintProps, TransformProps {
 
 const onDraw = createDrawing<GroupProps>(
   (ctx, { layer, clip, invertClip, ...groupProps }, node) => {
-    const { canvas, opacity } = ctx;
+    const { canvas, opacity, Skia } = ctx;
     const declarations = node.children
       .filter(isDeclarationNode)
       .map((child) => child.draw(ctx));
@@ -33,6 +37,7 @@ const onDraw = createDrawing<GroupProps>(
       (child) => child instanceof DrawingNode
     );
     const paint = processPaint(
+      ctx.Skia,
       ctx.paint.copy(),
       opacity,
       groupProps,
@@ -53,10 +58,10 @@ const onDraw = createDrawing<GroupProps>(
       } else {
         canvas.save();
       }
-      processTransform(ctx, groupProps);
+      processCanvasTransform(ctx, groupProps);
       if (clip) {
         const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-        processClip(canvas, clip, op);
+        processClip(Skia, canvas, clip, op);
       }
     }
     node.visit(

package/src/renderer/components/Mask.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
-import { BlendMode, Skia } from "../../skia";
+import { BlendMode } from "../../skia/types";
+import { useCanvas } from "../useCanvas";
 
 import { Group } from "./Group";
 
@@ -13,6 +14,7 @@ interface MaskProps {
 }
 
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
+  const { Skia } = useCanvas();
   const maskPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.Src);
@@ -20,12 +22,12 @@ export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
       paint.setColorFilter(Skia.ColorFilter.MakeLumaColorFilter());
     }
     return paint;
-  }, [mode]);
+  }, [Skia, mode]);
   const clippingPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.DstIn);
     return paint;
-  }, []);
+  }, [Skia]);
   return (
     <Group layer>
       <Group layer={maskPaint}>

package/src/renderer/components/Paint.tsx

@@ -1,11 +1,11 @@
 import type { ReactNode } from "react";
 import React, { useRef, useMemo, forwardRef, useImperativeHandle } from "react";
 
-import type { SkPaint } from "../../skia";
-import { SkiaPaint } from "../../skia";
+import type { SkPaint } from "../../skia/types";
 import type { CustomPaintProps, AnimatedProps } from "../processors";
 import { processPaint } from "../processors";
 import { createDeclaration } from "../nodes";
+import { useCanvas } from "../useCanvas";
 
 export const usePaintRef = () => useRef<SkPaint>(null);
 
@@ -15,12 +15,13 @@ export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
 
 export const Paint = forwardRef<SkPaint, AnimatedProps<PaintProps>>(
   (props, ref) => {
-    const paint = useMemo(() => SkiaPaint(), []);
+    const { Skia } = useCanvas();
+    const paint = useMemo(() => Skia.Paint(), [Skia]);
     useImperativeHandle(ref, () => paint, [paint]);
     const onDeclare = useMemo(
       () =>
         createDeclaration<PaintProps>((paintProps, children, ctx) =>
-          processPaint(paint, ctx.opacity, paintProps, children)
+          processPaint(ctx.Skia, paint, ctx.opacity, paintProps, children)
         ),
       [paint]
     );

package/src/renderer/components/Picture.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkPicture } from "../../skia";
+import type { SkPicture } from "../../skia/types";
 import { createDrawing } from "../nodes/Drawing";
 
 export interface PictureProps {

package/src/renderer/components/backdrop/BackdropFilter.tsx

@@ -22,7 +22,7 @@ export interface BackdropFilterProps extends GroupProps {
 const onDraw = createDrawing<BackdropFilterProps>((ctx, _, node) => {
   disableFilterMemoization(node.children);
   const toFilter = node.visit(ctx);
-  const filter = getInput(toFilter);
+  const filter = getInput(ctx.Skia, toFilter);
   if (!filter) {
     throw new Error("No image filter provided to the background");
   }

package/src/renderer/components/colorFilters/BlendColor.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import type { Color } from "../../../skia";
-import { BlendMode, Skia } from "../../../skia";
+import type { Color } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
 import { createDeclaration } from "../../nodes";
 import type { SkEnum, AnimatedProps } from "../../processors";
 import { enumKey } from "../../processors";
@@ -16,12 +16,12 @@ export interface BlendColorProps {
 }
 
 const onDeclare = createDeclaration<BlendColorProps>(
-  ({ mode, color }, children) => {
+  ({ mode, color }, children, { Skia }) => {
     const cf = Skia.ColorFilter.MakeBlend(
       Skia.Color(color),
       BlendMode[enumKey(mode)]
     );
-    return composeColorFilter(cf, children);
+    return composeColorFilter(Skia, cf, children);
   }
 );
 

package/src/renderer/components/colorFilters/Compose.ts

@@ -1,8 +1,9 @@
-import type { SkColorFilter } from "../../../skia";
-import { isColorFilter, isImageFilter, Skia } from "../../../skia";
+import type { SkColorFilter, Skia } from "../../../skia/types";
+import { isColorFilter, isImageFilter } from "../../../skia/types";
 import type { DeclarationResult } from "../../nodes";
 
 export const composeColorFilter = (
+  Skia: Skia,
   cf: SkColorFilter,
   children: DeclarationResult[]
 ) => {

package/src/renderer/components/colorFilters/Lerp.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia, isColorFilter } from "../../../skia";
+import { isColorFilter } from "../../../skia/types";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -12,10 +12,11 @@ export interface LerpProps {
   children: ReactNode | ReactNode[];
 }
 
-const onDeclare = createDeclaration<LerpProps>(({ t }, children) => {
+const onDeclare = createDeclaration<LerpProps>(({ t }, children, { Skia }) => {
   const [src, dst] = children.filter(isColorFilter);
   const cf = Skia.ColorFilter.MakeLerp(t, src, dst);
   return composeColorFilter(
+    Skia,
     cf,
     children.filter((c) => c !== src && c !== dst)
   );

package/src/renderer/components/colorFilters/LinearToSRGBGamma.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LinearToSRGBGammaProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeLinearToSRGBGamma();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const LinearToSRGBGamma = (

package/src/renderer/components/colorFilters/LumaColorFilter.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface LumaColorFilterProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeLumaColorFilter();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const LumaColorFilter = (props: AnimatedProps<LumaColorFilterProps>) => {

package/src/renderer/components/colorFilters/Matrix.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import type { ReactNode } from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes";
 import type { AnimatedProps } from "../../processors";
 
@@ -13,9 +12,9 @@ interface ColorMatrixProps {
 }
 
 const onDeclare = createDeclaration<ColorMatrixProps>(
-  ({ matrix }, children) => {
+  ({ matrix }, children, { Skia }) => {
     const cf = Skia.ColorFilter.MakeMatrix(matrix);
-    return composeColorFilter(cf, children);
+    return composeColorFilter(Skia, cf, children);
   }
 );
 

package/src/renderer/components/colorFilters/SRGBToLinearGamma.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 
-import { Skia } from "../../../skia";
 import { createDeclaration } from "../../nodes/Declaration";
 import type { AnimatedProps } from "../../processors/Animations/Animations";
 
@@ -9,9 +8,9 @@ import { composeColorFilter } from "./Compose";
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface SRGBToLinearGammaProps {}
 
-const onDeclare = createDeclaration((_props, children) => {
+const onDeclare = createDeclaration((_props, children, { Skia }) => {
   const cf = Skia.ColorFilter.MakeSRGBToLinearGamma();
-  return composeColorFilter(cf, children);
+  return composeColorFilter(Skia, cf, children);
 });
 
 export const SRGBToLinearGamma = (

package/src/renderer/components/image/BoxFit.ts

@@ -1,6 +1,5 @@
 import { exhaustiveCheck } from "../../typeddash";
-import { Skia } from "../../../skia";
-import type { SkRect } from "../../../skia";
+import type { SkRect } from "../../../skia/types";
 
 // https://api.flutter.dev/flutter/painting/BoxFit-class.html
 export type Fit =
@@ -37,12 +36,7 @@ export const fitRects = (
     { width: rect.width, height: rect.height },
     { width, height }
   );
-  const src = inscribe(sizes.src, {
-    x: 0,
-    y: 0,
-    width: rect.width,
-    height: rect.height,
-  });
+  const src = inscribe(sizes.src, rect);
   const dst = inscribe(sizes.dst, {
     x,
     y,
@@ -58,12 +52,12 @@ const inscribe = (
 ) => {
   const halfWidthDelta = (rect.width - width) / 2.0;
   const halfHeightDelta = (rect.height - height) / 2.0;
-  return Skia.XYWHRect(
-    rect.x + halfWidthDelta,
-    rect.y + halfHeightDelta,
+  return {
+    x: rect.x + halfWidthDelta,
+    y: rect.y + halfHeightDelta,
     width,
-    height
-  );
+    height,
+  };
 };
 
 const applyBoxFit = (fit: Fit, input: Size, output: Size) => {

package/src/renderer/components/image/Image.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkImage } from "../../../skia";
+import type { SkImage } from "../../../skia/types";
 import type {
   CustomPaintProps,
   RectDef,
@@ -24,8 +24,8 @@ export type BaseImageProps = RectDef &
 export type ImageProps = CustomPaintProps & BaseImageProps;
 
 const onDraw = createDrawing<ImageProps>(
-  ({ canvas, paint }, { fit, image, ...rectProps }) => {
-    const rect = processRect(rectProps);
+  ({ canvas, paint, Skia }, { fit, image, ...rectProps }) => {
+    const rect = processRect(Skia, rectProps);
     const { src, dst } = fitRects(
       fit,
       {

package/src/renderer/components/image/ImageSVG.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import type { SkSVG } from "../../../skia";
+import type { SkSVG } from "../../../skia/types";
 import { createDrawing } from "../../nodes";
 import type { AnimatedProps, RectDef } from "../../processors";
 import { processRect } from "../../processors";
@@ -10,8 +10,8 @@ export type ImageSVGProps = RectDef & {
 };
 
 const onDraw = createDrawing<ImageSVGProps>(
-  ({ canvas }, { svg, ...rectProps }) => {
-    const { x, y, width, height } = processRect(rectProps);
+  ({ canvas, Skia }, { svg, ...rectProps }) => {
+    const { x, y, width, height } = processRect(Skia, rectProps);
     canvas.save();
     canvas.translate(x, y);
     canvas.drawSvg(svg, width, height);