@shopify/react-native-skia 0.1.157 → 0.1.159

package/src/renderer/Canvas.tsx

@@ -1,10 +1,10 @@
 import React, {
   useEffect,
-  useState,
   useCallback,
   useMemo,
   forwardRef,
   useRef,
+  useState,
 } from "react";
 import type {
   RefObject,
@@ -15,10 +15,10 @@ import type {
 } from "react";
 import type { OpaqueRoot } from "react-reconciler";
 import ReactReconciler from "react-reconciler";
+import { Platform } from "react-native";
 
-import { SkiaView, useDrawCallback } from "../views";
+import { SkiaDomView } from "../views";
 import type { TouchHandler } from "../views";
-import { useValue } from "../values/hooks/useValue";
 import { Skia } from "../skia/Skia";
 import type { SkiaValue } from "../values";
 
@@ -43,24 +43,31 @@ const render = (element: ReactNode, root: OpaqueRoot, container: Container) => {
   });
 };
 
-export const useCanvasRef = () => useRef<SkiaView>(null);
+export const useCanvasRef = () => useRef<SkiaDomView>(null);
+
+const createDependencyManager = (
+  registerValues: (values: Array<SkiaValue<unknown>>) => () => void
+) =>
+  global.SkiaDomApi && global.SkiaDomApi.DependencyManager
+    ? global.SkiaDomApi.DependencyManager(registerValues)
+    : new DependencyManager(registerValues);
 
-export interface CanvasProps extends ComponentProps<typeof SkiaView> {
-  ref?: RefObject<SkiaView>;
+export interface CanvasProps extends ComponentProps<typeof SkiaDomView> {
+  ref?: RefObject<SkiaDomView>;
   children: ReactNode;
   onTouch?: TouchHandler;
 }
 
-export const Canvas = forwardRef<SkiaView, CanvasProps>(
-  ({ children, style, debug, mode, onTouch }, forwardedRef) => {
-    const size = useValue({ width: 0, height: 0 });
-    const canvasCtx = useMemo(() => ({ Skia, size }), [size]);
+export const Canvas = forwardRef<SkiaDomView, CanvasProps>(
+  ({ children, style, debug, mode, onTouch, onSize }, forwardedRef) => {
     const innerRef = useCanvasRef();
     const ref = useCombinedRefs(forwardedRef, innerRef);
-    const [tick, setTick] = useState(0);
+    const [, setTick] = useState(0);
     const redraw = useCallback(() => {
-      setTick((t) => t + 1);
-    }, []);
+      Platform.OS === "web"
+        ? setTick((tick) => tick + 1)
+        : innerRef.current?.redraw();
+    }, [innerRef]);
 
     const registerValues = useCallback(
       (values: Array<SkiaValue<unknown>>) => {
@@ -73,7 +80,11 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     );
 
     const container = useMemo(() => {
-      return new Container(Skia, new DependencyManager(registerValues), redraw);
+      return new Container(
+        Skia,
+        createDependencyManager(registerValues),
+        redraw
+      );
     }, [redraw, registerValues]);
 
     const root = useMemo(
@@ -90,47 +101,15 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
         ),
       [container]
     );
+
     // Render effect
     useEffect(() => {
       render(
-        <CanvasProvider value={canvasCtx}>{children}</CanvasProvider>,
+        <CanvasProvider value={{ Skia }}>{children}</CanvasProvider>,
         root,
         container
       );
-    }, [children, root, redraw, container, canvasCtx]);
-
-    const paint = useMemo(() => Skia.Paint(), []);
-
-    // Draw callback
-    const onDraw = useDrawCallback(
-      (canvas, info) => {
-        // TODO: if tree is empty (count === 1) maybe we should not render?
-        const { width, height, timestamp } = info;
-        if (onTouch) {
-          onTouch(info.touches);
-        }
-        if (
-          width !== canvasCtx.size.current.width ||
-          height !== canvasCtx.size.current.height
-        ) {
-          canvasCtx.size.current = { width, height };
-        }
-        paint.reset();
-        const ctx = {
-          width,
-          height,
-          timestamp,
-          canvas,
-          paint,
-          opacity: 1,
-          ref,
-          center: { x: width / 2, y: height / 2 },
-          Skia,
-        };
-        container.draw(ctx);
-      },
-      [tick, onTouch]
-    );
+    }, [children, root, redraw, container]);
 
     useEffect(() => {
       return () => {
@@ -141,10 +120,12 @@ export const Canvas = forwardRef<SkiaView, CanvasProps>(
     }, [container, root]);
 
     return (
-      <SkiaView
+      <SkiaDomView
         ref={ref}
         style={style}
-        onDraw={onDraw}
+        root={container.root}
+        onTouch={onTouch}
+        onSize={onSize}
         mode={mode}
         debug={debug}
       />

package/src/renderer/DependencyManager.tsx

@@ -24,10 +24,6 @@ export class DependencyManager {
     this.registerValues = registerValues;
   }
 
-  unsubscribeNodes(nodes: Node<unknown>[]) {
-    nodes.forEach((n) => this.unsubscribeNode(n));
-  }
-
   /**
    * Call to unsubscribe all value listeners from the given node based
    * on the current list of subscriptions for the node. This function
@@ -77,7 +73,6 @@ export class DependencyManager {
    * when the node is mounted and when one or more props on the node changes.
    * @param node Node to subscribe to value changes for
    * @param props Node's properties
-   * @param onResolveProp Callback when a property value changes
    */
   subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>) {
     // Get mutators from node's properties

package/src/renderer/HostComponents.ts

@@ -1,7 +1,8 @@
-import type { ForwardedRef } from "react";
-
 import { NodeType } from "../dom/types";
 import type {
+  DeclarationNode,
+  FractalNoiseProps,
+  RenderNode,
   CircleProps,
   DrawingNodeProps,
   ImageProps,
@@ -55,19 +56,166 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
-import type { PaintNode } from "../dom/nodes/PaintNode";
+import type {
+  SkColorFilter,
+  SkImageFilter,
+  SkMaskFilter,
+  SkPaint,
+  SkPathEffect,
+  SkRect,
+  SkRRect,
+  SkShader,
+} from "../skia";
+import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
+import type { SkiaValue } from "../values";
 
 import type { Container } from "./Container";
 import { exhaustiveCheck } from "./typeddash";
 import type { SkiaProps } from "./processors";
+import type { DependencyManager } from "./DependencyManager";
 
 declare global {
+  var SkiaDomApi: {
+    DependencyManager: (
+      registerValues: (values: Array<SkiaValue<unknown>>) => () => void
+    ) => DependencyManager;
+
+    // FIXME: We need a better type for this
+    RectNode: (props: RectProps) => JsiDrawingNode<RectProps, SkRect>;
+    RRectNode: (
+      props: RoundedRectProps
+    ) => JsiDrawingNode<RoundedRectProps, SkRRect>;
+    GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
+    PaintNode: (props: PaintProps) => DeclarationNode<PaintProps, SkPaint>;
+    FillNode: (props: PaintProps) => RenderNode<PaintProps>;
+    CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
+    PathNode: (props: PathProps) => RenderNode<PathProps>;
+    CustomDrawingNode: (
+      props: CustomDrawingNodeProps
+    ) => RenderNode<CustomDrawingNodeProps>;
+    LineNode: (props: LineProps) => RenderNode<LineProps>;
+    ImageNode: (props: ImageProps) => RenderNode<ImageProps>;
+    OvalNode: (props: OvalProps) => RenderNode<OvalProps>;
+    PatchNode: (props: PatchProps) => RenderNode<PatchProps>;
+    PointsNode: (props: PointsProps) => RenderNode<PointsProps>;
+    DiffRectNode: (props: DiffRectProps) => RenderNode<DiffRectProps>;
+    // Mask filters
+    BlurMaskFilterNode: (
+      props: BlurMaskFilterProps
+    ) => DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+
+    // Path effects
+    DashPathEffectNode: (
+      props: DashPathEffectProps
+    ) => DeclarationNode<DashPathEffectProps, SkPathEffect>;
+    DiscretePathEffectNode: (
+      props: DiscretePathEffectProps
+    ) => DeclarationNode<DiscretePathEffectProps, SkPathEffect>;
+    CornerPathEffectNode: (
+      props: CornerPathEffectProps
+    ) => DeclarationNode<CornerPathEffectProps, SkPathEffect>;
+    Path1DPathEffectNode: (
+      props: Path1DPathEffectProps
+    ) => DeclarationNode<Path1DPathEffectProps, SkPathEffect>;
+    Path2DPathEffectNode: (
+      props: Path2DPathEffectProps
+    ) => DeclarationNode<Path2DPathEffectProps, SkPathEffect>;
+    Line2DPathEffectNode: (
+      props: Line2DPathEffectProps
+    ) => DeclarationNode<Line2DPathEffectProps, SkPathEffect>;
+    SumPathEffectNode: () => DeclarationNode<null, SkPathEffect>;
+
+    // Image filters
+    BlendImageFilterNode: (
+      props: BlendImageFilterProps
+    ) => DeclarationNode<BlendImageFilterProps, SkImageFilter>;
+    DropShadowImageFilterNode: (
+      props: DropShadowImageFilterProps
+    ) => DeclarationNode<DropShadowImageFilterProps, SkImageFilter>;
+    DisplacementMapImageFilterNode: (
+      props: DisplacementMapImageFilterProps
+    ) => DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter>;
+    BlurImageFilterNode: (
+      props: BlurImageFilterProps
+    ) => DeclarationNode<BlurImageFilterProps, SkImageFilter>;
+    OffsetImageFilterNode: (
+      props: OffsetImageFilterProps
+    ) => DeclarationNode<OffsetImageFilterProps, SkImageFilter>;
+    MorphologyImageFilterNode: (
+      props: MorphologyImageFilterProps
+    ) => DeclarationNode<MorphologyImageFilterProps, SkImageFilter>;
+    RuntimeShaderImageFilterNode: (
+      props: RuntimeShaderImageFilterProps
+    ) => DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter>;
+
+    // Color filters
+    MatrixColorFilterNode: (
+      props: MatrixColorFilterProps
+    ) => DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
+    BlendColorFilterNode: (
+      props: BlendColorFilterProps
+    ) => DeclarationNode<BlendColorFilterProps, SkColorFilter>;
+    LinearToSRGBGammaColorFilterNode: () => DeclarationNode<
+      null,
+      SkColorFilter
+    >;
+    SRGBToLinearGammaColorFilterNode: () => DeclarationNode<
+      null,
+      SkColorFilter
+    >;
+    LumaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
+    LerpColorFilterNode: (
+      props: LerpColorFilterProps
+    ) => DeclarationNode<LerpColorFilterProps, SkColorFilter>;
+
+    // Shaders
+    ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps, SkShader>;
+    ImageShaderNode: (
+      props: ImageShaderProps
+    ) => DeclarationNode<ImageShaderProps, SkShader>;
+    ColorShaderNode: (
+      props: ColorProps
+    ) => DeclarationNode<ColorProps, SkShader>;
+    TurbulenceNode: (
+      props: TurbulenceProps
+    ) => DeclarationNode<TurbulenceProps, SkShader>;
+    FractalNoiseNode: (
+      props: FractalNoiseProps
+    ) => DeclarationNode<FractalNoiseProps, SkShader>;
+    LinearGradientNode: (
+      props: LinearGradientProps
+    ) => DeclarationNode<LinearGradientProps, SkShader>;
+    RadialGradientNode: (
+      props: RadialGradientProps
+    ) => DeclarationNode<RadialGradientProps, SkShader>;
+    SweepGradientNode: (
+      props: SweepGradientProps
+    ) => DeclarationNode<SweepGradientProps, SkShader>;
+    TwoPointConicalGradientNode: (
+      props: TwoPointConicalGradientProps
+    ) => DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+    PictureNode: (props: PictureProps) => RenderNode<PictureProps>;
+    ImageSVGNode: (props: ImageSVGProps) => RenderNode<ImageSVGProps>;
+    VerticesNode: (props: VerticesProps) => RenderNode<VerticesProps>;
+    TextNode: (prop: TextProps) => RenderNode<TextProps>;
+    TextPathNode: (prop: TextPathProps) => RenderNode<TextPathProps>;
+    TextBlobNode: (prop: TextBlobProps) => RenderNode<TextBlobProps>;
+    GlyphsNode: (prop: GlyphsProps) => RenderNode<GlyphsProps>;
+    BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps, SkImageFilter>;
+    BackdropFilterNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
+    BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
+    BoxShadowNode: (
+      prop: BoxShadowProps
+    ) => DeclarationNode<BoxShadowProps, BoxShadowProps>;
+    LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
+  };
+
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace JSX {
     interface IntrinsicElements {
       skGroup: SkiaProps<GroupProps>;
       skLayer: SkiaProps<ChildrenProps>;
-      skPaint: SkiaProps<PaintProps> & { ref: ForwardedRef<PaintNode> };
+      skPaint: SkiaProps<PaintProps>;
 
       // Drawings
       skFill: SkiaProps<DrawingNodeProps>;
@@ -115,7 +263,7 @@ declare global {
       skImageShader: SkiaProps<ImageShaderProps>;
       skColorShader: SkiaProps<ColorProps>;
       skTurbulence: SkiaProps<TurbulenceProps>;
-      skFractalNoise: SkiaProps<TurbulenceProps>;
+      skFractalNoise: SkiaProps<FractalNoiseProps>;
       skLinearGradient: SkiaProps<LinearGradientProps>;
       skRadialGradient: SkiaProps<RadialGradientProps>;
       skSweepGradient: SkiaProps<SweepGradientProps>;

package/src/renderer/components/Mask.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import React, { useMemo } from "react";
 
 import { BlendMode } from "../../skia/types";
-import { useCanvas } from "../useCanvas";
+import { useSkiaPrivate } from "../useCanvas";
 
 import { Group } from "./Group";
 
@@ -14,7 +14,7 @@ interface MaskProps {
 }
 
 export const Mask = ({ children, mask, mode, clip }: MaskProps) => {
-  const { Skia } = useCanvas();
+  const Skia = useSkiaPrivate();
   const maskPaint = useMemo(() => {
     const paint = Skia.Paint();
     paint.setBlendMode(BlendMode.Src);

package/src/renderer/components/Paint.tsx

@@ -1,19 +1,8 @@
-/* eslint-disable max-len */
-import React, { useRef, forwardRef } from "react";
+import React from "react";
 
 import type { SkiaProps } from "../processors";
 import type { DrawingNodeProps } from "../../dom/types";
-import type { PaintNode } from "../../dom/nodes/PaintNode";
 
-export const usePaintRef = () => {
-  console.log(`usePaintRef() is now deprecated.
-If you are using the layer property, simply pass the component directly: https://shopify.github.io/react-native-skia/docs/group#layer-effects.
-If you are using the paint property, please the following paint properties directly: https://shopify.github.io/react-native-skia/docs/paint/overview`);
-  return useRef<PaintNode>(null);
+export const Paint = (props: SkiaProps<DrawingNodeProps>) => {
+  return <skPaint {...props} />;
 };
-
-export const Paint = forwardRef<PaintNode, SkiaProps<DrawingNodeProps>>(
-  (props, ref) => {
-    return <skPaint ref={ref} {...props} />;
-  }
-);

package/src/renderer/useCanvas.ts

@@ -1,21 +1,21 @@
 import React, { useContext } from "react";
 
 import type { Skia } from "../skia/types";
-import type { SkiaValue } from "../values/types";
 
 interface CanvasContext {
   Skia: Skia;
-  size: SkiaValue<{ width: number; height: number }>;
 }
 
 const CanvasContext = React.createContext<CanvasContext | null>(null);
 
 export const CanvasProvider = CanvasContext.Provider;
 
-export const useCanvas = () => {
+// This private function will be removed once we remove the useCanvas hook and
+// implement the Mask component as a node (will be faster too)
+export const useSkiaPrivate = () => {
   const ctx = useContext(CanvasContext);
   if (!ctx) {
-    throw new Error("Canvas context is not available");
+    throw new Error("Skia Canvas context is not available");
   }
-  return ctx;
+  return ctx.Skia;
 };

package/src/skia/core/Picture.ts

@@ -1,30 +1,6 @@
-import type { DependencyList } from "react";
-import { useMemo } from "react";
-
 import { Skia } from "../Skia";
 import type { SkCanvas, SkRect } from "../types";
 
-/**
- * Memoizes and returns an SkPicture that can be drawn to another canvas.
- * @param rect Picture bounds
- * @param cb Callback for drawing to the canvas
- * @returns SkPicture
- */
-export const usePicture = (
-  rect: SkRect,
-  cb: (canvas: SkCanvas) => void,
-  deps: DependencyList = []
-) => {
-  console.warn("usePicture() is deprecated. Use createPicture() instead.");
-  return useMemo(() => {
-    const recorder = Skia.PictureRecorder();
-    const canvas = recorder.beginRecording(rect);
-    cb(canvas);
-    return recorder.finishRecordingAsPicture();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-};
-
 /**
  * Memoizes and returns an SkPicture that can be drawn to another canvas.
  * @param rect Picture bounds

package/src/skia/core/Rect.ts

@@ -12,7 +12,7 @@ export const bounds = (rects: SkRect[]) => {
   const y = Math.min(...rects.map((r) => r.y));
   const width = Math.max(...rects.map((r) => r.x + r.width));
   const height = Math.max(...rects.map((r) => r.y + r.height));
-  return rect(x, y, width, height);
+  return rect(x, y, width - x, height - y);
 };
 
 export const topLeft = (r: SkRect | SkRRect) =>

package/src/skia/types/ContourMeasure.tsx

@@ -1,5 +1,6 @@
 import type { SkJSIInstance } from "./JsiInstance";
 import type { SkPath } from "./Path/Path";
+import type { SkPoint } from "./Point";
 
 export interface PosTan {
   px: number;
@@ -11,10 +12,10 @@ export interface PosTan {
 export interface SkContourMeasure extends SkJSIInstance<"ContourMeasure"> {
   /**
    * Returns the given position and tangent line for the distance on the given contour.
-   * The return value is 4 floats in this order: posX, posY, vecX, vecY.
+   * The return value an array of 2 vectors: [position, tangent]
    * @param distance - will be pinned between 0 and length().
    */
-  getPosTan(distance: number): PosTan;
+  getPosTan(distance: number): [position: SkPoint, tangent: SkPoint];
 
   /**
    * Returns an Path representing the segment of this contour.

package/src/skia/types/Size.ts

@@ -0,0 +1,4 @@
+export interface SkSize {
+  width: number;
+  height: number;
+}

package/src/skia/types/index.ts

@@ -25,3 +25,4 @@ export * from "./RSXform";
 export * from "./JsiInstance";
 export * from "./Skia";
 export * from "./TextBlob";
+export * from "./Size";

package/src/skia/web/JsiSkColor.ts

@@ -241,6 +241,17 @@ const parseCSSColor = (cssStr: string) => {
         return null;
       } // Covers NaN.
       return [(iv & 0xff0000) >> 16, (iv & 0xff00) >> 8, iv & 0xff, 1];
+    } else if (str.length === 9) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffffff)) {
+        return null; // Covers NaN.
+      }
+      return [
+        ((iv & 0xff000000) >> 24) & 0xff,
+        (iv & 0xff0000) >> 16,
+        (iv & 0xff00) >> 8,
+        (iv & 0xff) / 255,
+      ];
     }
 
     return null;

package/src/skia/web/JsiSkContourMeasure.ts

@@ -4,6 +4,7 @@ import type { SkContourMeasure } from "../types";
 
 import { HostObject } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
 
 export class JsiSkContourMeasure
   extends HostObject<ContourMeasure, "ContourMeasure">
@@ -13,9 +14,12 @@ export class JsiSkContourMeasure
     super(CanvasKit, ref, "ContourMeasure");
   }
 
-  getPosTan(distance: number) {
-    const [px, py, tx, ty] = this.ref.getPosTan(distance);
-    return { px, py, tx, ty };
+  getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint] {
+    const posTan = this.ref.getPosTan(distance);
+    return [
+      new JsiSkPoint(this.CanvasKit, posTan.slice(0, 2)),
+      new JsiSkPoint(this.CanvasKit, posTan.slice(2)),
+    ];
   }
 
   getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {

package/src/values/web/RNSkReadonlyValue.ts

@@ -13,8 +13,10 @@ export class RNSkReadonlyValue<T> implements SkiaValue<T> {
   }
 
   protected update(nextValue: T): void {
-    this._current = nextValue;
-    this.notifyListeners();
+    if (this._current !== nextValue) {
+      this._current = nextValue;
+      this.notifyListeners();
+    }
   }
 
   public readonly __typename__ = "RNSkValue";

package/src/views/SkiaBaseWebView.tsx

@@ -46,8 +46,8 @@ export abstract class SkiaBaseWebView<
     // Reset canvas / surface on layout change
     if (this._canvasRef.current) {
       const canvas = this._canvasRef.current;
-      canvas.width = canvas.clientWidth * pd;
-      canvas.height = canvas.clientHeight * pd;
+      canvas.width = width * pd;
+      canvas.height = height * pd;
       const surface = CanvasKit.MakeWebGLCanvasSurface(this._canvasRef.current);
       if (!surface) {
         throw new Error("Could not create surface");
@@ -58,6 +58,10 @@ export abstract class SkiaBaseWebView<
     }
   }
 
+  protected getSize() {
+    return { width: this.width, height: this.height };
+  }
+
   componentDidMount() {
     // Start render loop
     this.tick();