@shopify/react-native-skia 0.1.158 → 0.1.160

package/src/renderer/HostComponents.ts

@@ -1,5 +1,8 @@
 import { NodeType } from "../dom/types";
 import type {
+  DeclarationNode,
+  FractalNoiseProps,
+  RenderNode,
   CircleProps,
   DrawingNodeProps,
   ImageProps,
@@ -53,12 +56,160 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
+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 {
@@ -112,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/useCanvas.ts

@@ -1,35 +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 = () => {
-  const ctx = useContext(CanvasContext);
-  console.warn(
-    // eslint-disable-next-line max-len
-    "useCanvas is deprecated. use the onSize property instead: https://shopify.github.io/react-native-skia/docs/canvas/overview"
-  );
-  if (!ctx) {
-    throw new Error("Canvas context is not available");
-  }
-  return ctx;
-};
-
 // 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.Skia;
 };

package/src/views/SkiaBaseWebView.tsx

@@ -56,6 +56,14 @@ export abstract class SkiaBaseWebView<
       this._canvas = this._surface.getCanvas();
       this.redraw();
     }
+    // Call onLayout callback if it exists
+    if (this.props.onLayout) {
+      this.props.onLayout(evt);
+    }
+  }
+
+  protected getSize() {
+    return { width: this.width, height: this.height };
   }
 
   componentDidMount() {
@@ -98,6 +106,7 @@ export abstract class SkiaBaseWebView<
       if (this._canvas) {
         const touches = [...this._touches];
         this._touches = [];
+        this._canvas!.clear(CanvasKit.TRANSPARENT);
         this.renderInCanvas(this._canvas!, touches);
         this._surface?.ref.flush();
       }

package/src/views/SkiaDomView.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { requireNativeComponent, Platform } from "react-native";
+import type { HostComponent } from "react-native";
+
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
+
+import { SkiaViewApi } from "./api";
+import { SkiaViewNativeId } from "./SkiaView";
+import type { NativeSkiaViewProps, SkiaDomViewProps } from "./types";
+
+const NativeSkiaDomView: HostComponent<SkiaDomViewProps> =
+  Platform.OS !== "web"
+    ? requireNativeComponent<NativeSkiaViewProps>("SkiaDomView")
+    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (null as any);
+
+export class SkiaDomView extends React.Component<SkiaDomViewProps> {
+  constructor(props: SkiaDomViewProps) {
+    super(props);
+    this._nativeId = SkiaViewNativeId.current++;
+    const { root, onTouch, onSize } = props;
+    if (root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  private _nativeId: number;
+
+  public get nativeId() {
+    return this._nativeId;
+  }
+
+  componentDidUpdate(prevProps: SkiaDomViewProps) {
+    const { root, onTouch, onSize } = this.props;
+    if (root !== prevProps.root) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
+    }
+    if (onTouch !== prevProps.onTouch) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onTouch", onTouch);
+    }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
+  }
+
+  /**
+   * Creates a snapshot from the canvas in the surface
+   * @param rect Rect to use as bounds. Optional.
+   * @returns An Image object.
+   */
+  public makeImageSnapshot(rect?: SkRect) {
+    assertSkiaViewApi();
+    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  public redraw() {
+    assertSkiaViewApi();
+    SkiaViewApi.requestRedraw(this._nativeId);
+  }
+
+  /**
+   * Registers one or move values as a dependant value of the Skia View. The view will
+   * The view will redraw itself when any of the values change.
+   * @param values Values to register
+   */
+  public registerValues(values: SkiaValue<unknown>[]): () => void {
+    assertSkiaViewApi();
+    return SkiaViewApi.registerValuesInView(this._nativeId, values);
+  }
+
+  /**
+   * Clear up the dom node when unmounting to release resources.
+   */
+  componentWillUnmount(): void {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(this._nativeId, "root", null);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <NativeSkiaDomView
+        collapsable={false}
+        nativeID={`${this._nativeId}`}
+        mode={mode}
+        debug={debug}
+        {...viewProps}
+      />
+    );
+  }
+}
+
+const assertSkiaViewApi = () => {
+  if (
+    SkiaViewApi === null ||
+    SkiaViewApi.setJsiProperty === null ||
+    SkiaViewApi.callJsiMethod === null ||
+    SkiaViewApi.registerValuesInView === null ||
+    SkiaViewApi.requestRedraw === null ||
+    SkiaViewApi.makeImageSnapshot === null
+  ) {
+    throw Error("Skia View Api was not found.");
+  }
+};

package/src/views/SkiaDomView.web.tsx

@@ -0,0 +1,37 @@
+import { PixelRatio } from "react-native";
+
+import { Skia } from "../skia";
+import type { SkCanvas } from "../skia/types";
+
+import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import type { SkiaDomViewProps, TouchInfo } from "./types";
+
+const pd = PixelRatio.get();
+
+export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
+  constructor(props: SkiaDomViewProps) {
+    super(props);
+  }
+
+  protected renderInCanvas(canvas: SkCanvas, touches: TouchInfo[]): void {
+    if (this.props.onTouch) {
+      this.props.onTouch([touches]);
+    }
+    if (this.props.onSize) {
+      const { width, height } = this.getSize();
+      this.props.onSize.current = { width, height };
+    }
+    if (this.props.root) {
+      const paint = Skia.Paint();
+      const ctx = {
+        canvas,
+        paint,
+        opacity: 1,
+      };
+      canvas.save();
+      canvas.scale(pd, pd);
+      this.props.root.render(ctx);
+      canvas.restore();
+    }
+  }
+}

package/src/views/SkiaPictureView.tsx

@@ -15,11 +15,15 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
-    const { picture } = props;
+    const { picture, onSize } = props;
     if (picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   private _nativeId: number;
@@ -29,11 +33,15 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaPictureViewProps) {
-    const { picture } = this.props;
+    const { picture, onSize } = this.props;
     if (picture !== prevProps.picture) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
     }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   /**

package/src/views/SkiaView.tsx

@@ -16,11 +16,15 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
     this._nativeId = SkiaViewNativeId.current++;
-    const { onDraw } = props;
+    const { onDraw, onSize } = props;
     if (onDraw) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
+    if (onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   private _nativeId: number;
@@ -30,11 +34,15 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaDrawViewProps) {
-    const { onDraw } = this.props;
+    const { onDraw, onSize } = this.props;
     if (onDraw !== prevProps.onDraw) {
       assertSkiaViewApi();
       SkiaViewApi.setJsiProperty(this._nativeId, "drawCallback", onDraw);
     }
+    if (onSize !== prevProps.onSize) {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
+    }
   }
 
   /**
@@ -66,7 +74,7 @@ export class SkiaView extends React.Component<SkiaDrawViewProps> {
   }
 
   render() {
-    const { mode, debug = false, ...viewProps } = this.props;
+    const { mode, debug = false, onSize, ...viewProps } = this.props;
     return (
       <NativeSkiaView
         collapsable={false}

package/src/views/index.ts

@@ -1,5 +1,6 @@
 export * from "./SkiaView";
 export * from "./SkiaPictureView";
+export * from "./SkiaDomView";
 export * from "./types";
 export * from "./useDrawCallback";
 export * from "./useTouchHandler";

package/src/views/types.ts

@@ -1,7 +1,14 @@
 import type { ViewProps } from "react-native";
 
-import type { SkCanvas, SkImage, SkPicture, SkRect } from "../skia/types";
-import type { SkiaValue } from "../values";
+import type { GroupProps, RenderNode } from "../dom/types";
+import type {
+  SkCanvas,
+  SkImage,
+  SkPicture,
+  SkRect,
+  SkSize,
+} from "../skia/types";
+import type { SkiaMutableValue, SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
 
@@ -86,6 +93,11 @@ export interface SkiaBaseViewProps extends ViewProps {
    * average time it takes to render.
    */
   debug?: boolean;
+  /**
+   * Pass an animated value to the onSize property to get updates when
+   * the Skia view is resized.
+   */
+  onSize?: SkiaMutableValue<SkSize>;
 }
 
 export interface SkiaDrawViewProps extends SkiaBaseViewProps {
@@ -102,3 +114,8 @@ export interface SkiaDrawViewProps extends SkiaBaseViewProps {
 export interface SkiaPictureViewProps extends SkiaBaseViewProps {
   picture?: SkPicture;
 }
+
+export interface SkiaDomViewProps extends SkiaBaseViewProps {
+  root?: RenderNode<GroupProps>;
+  onTouch?: TouchHandler;
+}

package/cpp/jsi/JsiSimpleValueWrapper.h

@@ -1,99 +0,0 @@
-#pragma once
-
-#include <memory>
-
-#include <jsi/jsi.h>
-
-namespace RNJsi {
-namespace jsi = facebook::jsi;
-
-/**
- Implements a simple wrapper class for JSI primitives like numbers and boolean
- values. Objects, strings and arrays are stored as values inside a property
- holder. The class also provides a method for comparing values that will compare
- numbers, booleans and strings.
- */
-class JsiSimpleValueWrapper {
-private:
-  enum ValueType { NonInitialized, Undefined, Null, Bool, Number, JsiValue };
-
-public:
-  explicit JsiSimpleValueWrapper(jsi::Runtime &runtime)
-      : _type(ValueType::NonInitialized),
-        _propNameId(jsi::PropNameID::forUtf8(runtime, "value")) {}
-
-  jsi::Value getCurrent(jsi::Runtime &runtime) {
-    switch (_type) {
-    case ValueType::NonInitialized:
-      return nullptr;
-    case ValueType::Undefined:
-      return jsi::Value::undefined();
-    case ValueType::Null:
-      return jsi::Value::null();
-    case ValueType::Bool:
-      return _boolValue;
-    case ValueType::Number:
-      return _numberValue;
-    case ValueType::JsiValue:
-      if (_valueHolder == nullptr) {
-        return jsi::Value::undefined();
-      }
-      return _valueHolder->getProperty(runtime, _propNameId);
-    }
-  }
-
-  void setCurrent(jsi::Runtime &runtime, const jsi::Value &value) {
-    if (value.isNumber()) {
-      _type = ValueType::Number;
-      _numberValue = value.asNumber();
-    } else if (value.isBool()) {
-      _type = ValueType::Bool;
-      _boolValue = value.getBool();
-    } else if (value.isUndefined()) {
-      _type = ValueType::Undefined;
-    } else if (value.isNull()) {
-      _type = ValueType::Null;
-    } else {
-      _type = ValueType::JsiValue;
-      // Save as javascript object - we don't want to have to copy strings,
-      // objects and values
-      if (_valueHolder == nullptr) {
-        _valueHolder = std::make_shared<jsi::Object>(runtime);
-      }
-      _valueHolder->setProperty(runtime, _propNameId, value);
-    }
-  }
-
-  bool equals(jsi::Runtime &runtime, const jsi::Value &value) {
-    if (_type == ValueType::NonInitialized) {
-      return false;
-    }
-    if (value.isNumber() && _type == ValueType::Number) {
-      return _numberValue == value.asNumber();
-    } else if (value.isBool() && _type == ValueType::Bool) {
-      return _boolValue == value.getBool();
-    } else if (value.isUndefined()) {
-      return _type == ValueType::Undefined;
-    } else if (value.isNull()) {
-      return _type == ValueType::Null;
-    } else if (value.isString()) {
-      auto current = getCurrent(runtime);
-      if (current.isString()) {
-        return jsi::String::strictEquals(runtime, value.asString(runtime),
-                                         current.asString(runtime));
-      }
-      return false;
-    }
-    return false;
-  }
-
-private:
-  jsi::PropNameID _propNameId;
-  std::shared_ptr<jsi::Object> _valueHolder;
-
-  bool _boolValue;
-  double _numberValue;
-
-  ValueType _type;
-};
-} // namespace RNJsi