@shopify/react-native-skia 0.1.127 → 0.1.130

package/src/skia/web/api/JsiSkPaint.ts

@@ -0,0 +1,103 @@
+import type { CanvasKit, Paint } from "canvaskit-wasm";
+
+import type {
+  BlendMode,
+  SkColor,
+  SkColorFilter,
+  SkImageFilter,
+  SkPaint,
+  SkShader,
+  StrokeCap,
+  StrokeJoin,
+  PaintStyle,
+  SkMaskFilter,
+  SkPathEffect,
+} from "../../types";
+
+import { HostObject, toNullableValue } from "./Host";
+
+export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
+  constructor(CanvasKit: CanvasKit, ref: Paint) {
+    super(CanvasKit, ref, "Paint");
+  }
+
+  copy() {
+    return new JsiSkPaint(this.CanvasKit, this.ref.copy());
+  }
+
+  getColor() {
+    return this.ref.getColor();
+  }
+
+  getStrokeCap() {
+    return this.ref.getStrokeCap().value;
+  }
+
+  getStrokeJoin() {
+    return this.ref.getStrokeJoin().value;
+  }
+
+  getStrokeMiter() {
+    return this.ref.getStrokeMiter();
+  }
+
+  getStrokeWidth() {
+    return this.ref.getStrokeWidth();
+  }
+
+  setAlphaf(alpha: number) {
+    this.ref.setAlphaf(alpha);
+  }
+
+  setAntiAlias(aa: boolean) {
+    this.ref.setAntiAlias(aa);
+  }
+
+  setBlendMode(blendMode: BlendMode) {
+    this.ref.setBlendMode({ value: blendMode });
+  }
+
+  setColor(color: SkColor) {
+    this.ref.setColor(color);
+  }
+
+  setColorFilter(filter: SkColorFilter | null) {
+    this.ref.setColorFilter(toNullableValue(filter));
+  }
+
+  setImageFilter(filter: SkImageFilter | null) {
+    this.ref.setImageFilter(toNullableValue(filter));
+  }
+
+  setMaskFilter(filter: SkMaskFilter | null) {
+    this.ref.setMaskFilter(toNullableValue(filter));
+  }
+
+  setPathEffect(effect: SkPathEffect | null) {
+    this.ref.setPathEffect(toNullableValue(effect));
+  }
+
+  setShader(shader: SkShader | null) {
+    this.ref.setShader(toNullableValue(shader));
+  }
+
+  setStrokeCap(cap: StrokeCap) {
+    this.ref.setStrokeCap({ value: cap });
+  }
+
+  setStrokeJoin(join: StrokeJoin) {
+    this.ref.setStrokeJoin({ value: join });
+  }
+
+  setStrokeMiter(limit: number) {
+    this.ref.setStrokeMiter(limit);
+  }
+
+  setStrokeWidth(width: number) {
+    this.ref.setStrokeWidth(width);
+  }
+
+  setStyle(style: PaintStyle) {
+    this.ref.setStyle({ value: style });
+  }
+}

package/src/skia/web/api/JsiSkRect.ts

@@ -0,0 +1,27 @@
+import type { CanvasKit, Rect } from "canvaskit-wasm";
+
+import type { SkRect } from "../../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkRect extends HostObject<Rect, "Rect"> implements SkRect {
+  constructor(CanvasKit: CanvasKit, ref: Rect) {
+    super(CanvasKit, ref, "Rect");
+  }
+
+  get x() {
+    return this.ref[0];
+  }
+
+  get y() {
+    return this.ref[1];
+  }
+
+  get width() {
+    return this.ref[2] - this.ref[0];
+  }
+
+  get height() {
+    return this.ref[3] - this.ref[1];
+  }
+}

package/src/skia/web/api/JsiSkSurface.ts

@@ -0,0 +1,25 @@
+import type { CanvasKit, Surface } from "canvaskit-wasm";
+
+import type { SkCanvas, SkImage, SkRect, SkSurface } from "../../types";
+
+import { HostObject, toUndefinedableValue } from "./Host";
+import { JsiSkCanvas } from "./JsiSkCanvas";
+import { JsiSkImage } from "./JsiSkImage";
+
+export class JsiSkSurface
+  extends HostObject<Surface, "Surface">
+  implements SkSurface
+{
+  constructor(CanvasKit: CanvasKit, ref: Surface) {
+    super(CanvasKit, ref, "Surface");
+  }
+
+  getCanvas(): SkCanvas {
+    return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());
+  }
+
+  makeImageSnapshot(bounds?: SkRect): SkImage {
+    const image = this.ref.makeImageSnapshot(toUndefinedableValue(bounds));
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+}

package/src/skia/web/api/JsiSkSurfaceFactory.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SurfaceFactory } from "../../types";
+
+import { Host } from "./Host";
+import { JsiSkSurface } from "./JsiSkSurface";
+
+export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make(width: number, height: number) {
+    const surface = this.CanvasKit.MakeSurface(width, height);
+    if (!surface) {
+      throw new Error("Could not create surface");
+    }
+    return new JsiSkSurface(this.CanvasKit, surface);
+  }
+}

package/src/skia/web/api/index.ts

@@ -0,0 +1,15 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import { JsiSkPaint } from "./JsiSkPaint";
+import { JsiSkRect } from "./JsiSkRect";
+import { Color } from "./JsiSkColor";
+import { JsiSkSurfaceFactory } from "./JsiSkSurfaceFactory";
+
+export const JsiSkApi = (CanvasKit: CanvasKit) => ({
+  Paint: () => new JsiSkPaint(CanvasKit, new CanvasKit.Paint()),
+  XYWHRect: (x: number, y: number, width: number, height: number) => {
+    return new JsiSkRect(CanvasKit, CanvasKit.XYWHRect(x, y, width, height));
+  },
+  Color: Color.bind(null, CanvasKit),
+  Surface: new JsiSkSurfaceFactory(CanvasKit),
+});

package/src/skia/web/index.ts

@@ -0,0 +1 @@
+export * from "./api";

package/src/values/hooks/useValue.ts

@@ -1,14 +1,14 @@
 import { useMemo } from "react";
 
 import { ValueApi } from "../api";
-import type { SkiaValue } from "../types";
+import type { SkiaMutableValue } from "../types";
 
 /**
  * Creates a new value that holds some data.
  * @param v Value to hold
  * @returns A Value of type of v
  */
-export const useValue = <T>(v: T): SkiaValue<T> => {
+export const useValue = <T>(v: T): SkiaMutableValue<T> => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => ValueApi.createValue(v), []);
 };

package/src/values/hooks/useValueEffect.ts

@@ -1,16 +1,13 @@
 import { useEffect } from "react";
 
-import type { SkiaReadonlyValue } from "../types";
+import type { SkiaValue } from "../types";
 
 /**
  * Sets up an effect that will be run whenever the value changes
  * @param value Value to subscribe to changes on
  * @param cb Callback to run when value changes
  */
-export const useValueEffect = <T>(
-  value: SkiaReadonlyValue<T>,
-  cb: (v: T) => void
-) => {
+export const useValueEffect = <T>(value: SkiaValue<T>, cb: (v: T) => void) => {
   useEffect(() => {
     return value.addListener(cb);
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/values/types.ts

@@ -1,4 +1,4 @@
-export interface SkiaReadonlyValue<T = number> {
+export interface SkiaValue<T = number> {
   /**
    * Gets the value hold by the Value object
    */
@@ -14,7 +14,7 @@ export interface SkiaReadonlyValue<T = number> {
   __typename__: "RNSkValue";
 }
 
-export interface SkiaValue<T = number> extends SkiaReadonlyValue<T> {
+export interface SkiaMutableValue<T = number> extends SkiaValue<T> {
   /**
    * Get/sets the value hold by the Value object
    */
@@ -25,7 +25,7 @@ export interface SkiaValue<T = number> extends SkiaReadonlyValue<T> {
   animation: SkiaAnimation | undefined;
 }
 
-export interface SkiaClockValue extends SkiaReadonlyValue<number> {
+export interface SkiaClockValue extends SkiaValue<number> {
   start: () => void;
   stop: () => void;
 }
@@ -44,15 +44,15 @@ export interface ISkiaValueApi {
    * Creates a new value that holds the initial value and that
    * can be changed.
    */
-  createValue: <T>(initialValue: T) => SkiaValue<T>;
+  createValue: <T>(initialValue: T) => SkiaMutableValue<T>;
   /**
    * Creates a derived value. This is a calculated value that returns the result of
    * a function that is called with the values of the dependencies.
    */
   createDerivedValue: <R>(
     cb: () => R,
-    values: Array<SkiaReadonlyValue<unknown>>
-  ) => SkiaReadonlyValue<R>;
+    values: Array<SkiaValue<unknown>>
+  ) => SkiaValue<R>;
   /**
    * Creates a clock value where the value is the number of milliseconds elapsed
    * since the clock was created

package/src/values/web/RNSkReadonlyValue.ts

@@ -1,6 +1,6 @@
-import type { SkiaReadonlyValue } from "../types";
+import type { SkiaValue } from "../types";
 
-export class RNSkReadonlyValue<T> implements SkiaReadonlyValue<T> {
+export class RNSkReadonlyValue<T> implements SkiaValue<T> {
   constructor(value: T) {
     this._current = value;
   }

package/src/values/web/api.ts

@@ -1,7 +1,7 @@
 import type {
   ISkiaValueApi,
+  SkiaMutableValue,
   SkiaValue,
-  SkiaReadonlyValue,
   SkiaClockValue,
   AnimationState,
   SkiaAnimation,
@@ -13,13 +13,13 @@ import { RNSkDerivedValue } from "./RNSkDerivedValue";
 import { RNSkValue } from "./RNSkValue";
 
 export const ValueApi: ISkiaValueApi = {
-  createValue: function <T>(initialValue: T): SkiaValue<T> {
+  createValue: function <T>(initialValue: T): SkiaMutableValue<T> {
     return new RNSkValue(initialValue);
   },
   createDerivedValue: function <R>(
     cb: () => R,
-    values: SkiaReadonlyValue<unknown>[]
-  ): SkiaReadonlyValue<R> {
+    values: SkiaValue<unknown>[]
+  ): SkiaValue<R> {
     return new RNSkDerivedValue(cb, values);
   },
   createClockValue: function (): SkiaClockValue {

package/src/views/SkiaView.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { requireNativeComponent } from "react-native";
 
-import type { SkRect } from "../skia";
-import type { SkiaReadonlyValue } from "../values";
+import type { SkRect } from "../skia/types";
+import type { SkiaValue } from "../values";
 
 import { SkiaViewApi } from "./api";
 import type { DrawMode, NativeSkiaViewProps, SkiaViewProps } from "./types";
@@ -75,7 +75,7 @@ export class SkiaView extends React.Component<SkiaViewProps> {
    * The view will redraw itself when any of the values change.
    * @param values Values to register
    */
-  public registerValues(values: SkiaReadonlyValue<unknown>[]) {
+  public registerValues(values: SkiaValue<unknown>[]) {
     assertDrawCallbacksEnabled();
     return SkiaViewApi.registerValuesInView(this._nativeId, values);
   }

package/src/views/types.ts

@@ -1,8 +1,7 @@
 import type { ViewProps } from "react-native";
 
-import type { SkImage, SkRect } from "../skia";
-import type { SkCanvas } from "../skia/Canvas";
-import type { SkiaReadonlyValue } from "../values";
+import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
 
 export type DrawMode = "continuous" | "default";
 
@@ -67,7 +66,7 @@ export interface ISkiaViewApi {
   setDrawMode: (nativeId: number, mode: DrawMode) => void;
   registerValuesInView: (
     nativeId: number,
-    values: SkiaReadonlyValue<unknown>[]
+    values: SkiaValue<unknown>[]
   ) => () => void;
 }
 

package/cpp/skia/include/core/SkCustomMesh.h

@@ -1,202 +0,0 @@
-/*
- * Copyright 2021 Google LLC
- *
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-#ifndef SkCustomMesh_DEFINED
-#define SkCustomMesh_DEFINED
-
-#include "include/core/SkTypes.h"
-
-#ifdef SK_ENABLE_SKSL
-#include "include/core/SkColorSpace.h"
-#include "include/core/SkImageInfo.h"
-#include "include/core/SkRect.h"
-#include "include/core/SkRefCnt.h"
-#include "include/core/SkSpan.h"
-#include "include/core/SkString.h"
-
-#include <vector>
-
-namespace SkSL { struct Program; }
-
-/**
- * A specification for custom meshes. Specifies the vertex buffer attributes and stride, the
- * vertex program that produces a user-defined set of varyings, a fragment program that ingests
- * the interpolated varyings and produces local coordinates and optionally a color.
- *
- * The signature of the vertex program must be:
- *   float2 main(Attributes, out Varyings)
- * where the return value is a local position that will be transformed by SkCanvas's matrix.
- *
- * The signature of the fragment program must be either:
- *   (float2|void) main(Varyings)
- * or
- *   (float2|void) main(Varyings, out (half4|float4) color)
- *
- * where the return value is the local coordinates that will be used to access SkShader. If the
- * return type is void then the interpolated position from vertex shader return is used as the local
- * coordinate. If the color variant is used it will be blended with SkShader (or SkPaint color in
- * absence of a shader) using the SkBlender provided to the SkCanvas draw call.
- */
-class SkCustomMeshSpecification : public SkNVRefCnt<SkCustomMeshSpecification> {
-public:
-    /** These values are enforced when creating a specification. */
-    static constexpr size_t kMaxStride       = 1024;
-    static constexpr size_t kMaxAttributes   = 8;
-    static constexpr size_t kStrideAlignment = 4;
-    static constexpr size_t kOffsetAlignment = 4;
-    static constexpr size_t kMaxVaryings     = 6;
-
-    struct Attribute {
-        enum class Type : uint32_t {  // CPU representation     Shader Type
-            kFloat,                   // float                  float
-            kFloat2,                  // two floats             float2
-            kFloat3,                  // three floats           float3
-            kFloat4,                  // four floats            float4
-            kUByte4_unorm,            // four bytes             half4
-
-            kLast = kUByte4_unorm
-        };
-        Type     type;
-        size_t   offset;
-        SkString name;
-    };
-
-    struct Varying {
-        enum class Type : uint32_t {
-            kFloat,   // "float"
-            kFloat2,  // "float2"
-            kFloat3,  // "float3"
-            kFloat4,  // "float4"
-            kHalf,    // "half"
-            kHalf2,   // "half2"
-            kHalf3,   // "half3"
-            kHalf4,   // "half4"
-
-            kLast = kHalf4
-        };
-        Type     type;
-        SkString name;
-    };
-
-    ~SkCustomMeshSpecification();
-
-    struct Result {
-        sk_sp<SkCustomMeshSpecification> specification;
-        SkString                         error;
-    };
-
-    /**
-     * If successful the return is a specification and an empty error string. Otherwise, it is a
-     * null specification a non-empty error string.
-     *
-     * @param attributes     The vertex attributes that will be consumed by 'vs'. Attributes need
-     *                       not be tightly packed but attribute offsets must be aligned to
-     *                       kOffsetAlignment and offset + size may not be greater than
-     *                       'vertexStride'. At least one attribute is required.
-     * @param vertexStride   The offset between successive attribute values. This must be aligned to
-     *                       kStrideAlignment.
-     * @param varyings       The varyings that will be written by 'vs' and read by 'fs'. This may
-     *                       be empty.
-     * @param vs             The vertex shader code that computes a vertex position and the varyings
-     *                       from the attributes.
-     * @param fs             The fragment code that computes a local coordinate and optionally a
-     *                       color from the varyings. The local coordinate is used to sample
-     *                       SkShader.
-     * @param cs             The colorspace of the color produced by 'fs'. Ignored if 'fs's main()
-     *                       function does not have a color out param.
-     * @param at             The alpha type of the color produced by 'fs'. Ignored if 'fs's main()
-     *                       function does not have a color out param. Cannot be kUnknown.
-     */
-    static Result Make(SkSpan<const Attribute> attributes,
-                       size_t                  vertexStride,
-                       SkSpan<const Varying>   varyings,
-                       const SkString&         vs,
-                       const SkString&         fs,
-                       sk_sp<SkColorSpace>     cs = SkColorSpace::MakeSRGB(),
-                       SkAlphaType             at = kPremul_SkAlphaType);
-
-    SkSpan<const Attribute> attributes() const { return SkMakeSpan(fAttributes); }
-
-    size_t stride() const { return fStride; }
-
-private:
-    friend struct SkCustomMeshSpecificationPriv;
-
-    enum class ColorType {
-        kNone,
-        kHalf4,
-        kFloat4,
-    };
-
-    static Result MakeFromSourceWithStructs(SkSpan<const Attribute> attributes,
-                                            size_t                  stride,
-                                            SkSpan<const Varying>   varyings,
-                                            const SkString&         vs,
-                                            const SkString&         fs,
-                                            sk_sp<SkColorSpace>     cs,
-                                            SkAlphaType             at);
-
-    SkCustomMeshSpecification(SkSpan<const Attribute>,
-                              size_t,
-                              SkSpan<const Varying>,
-                              std::unique_ptr<SkSL::Program>,
-                              std::unique_ptr<SkSL::Program>,
-                              ColorType,
-                              bool hasLocalCoords,
-                              sk_sp<SkColorSpace>,
-                              SkAlphaType);
-
-    SkCustomMeshSpecification(const SkCustomMeshSpecification&) = delete;
-    SkCustomMeshSpecification(SkCustomMeshSpecification&&) = delete;
-
-    SkCustomMeshSpecification& operator=(const SkCustomMeshSpecification&) = delete;
-    SkCustomMeshSpecification& operator=(SkCustomMeshSpecification&&) = delete;
-
-    const std::vector<Attribute>       fAttributes;
-    const std::vector<Varying>         fVaryings;
-    std::unique_ptr<SkSL::Program>     fVS;
-    std::unique_ptr<SkSL::Program>     fFS;
-    size_t                             fStride;
-    uint32_t                           fHash;
-    ColorType                          fColorType;
-    bool                               fHasLocalCoords;
-    sk_sp<SkColorSpace>                fColorSpace;
-    SkAlphaType                        fAlphaType;
-};
-
-/**
- * This is a placeholder object. We will want something that allows the client to incrementally
- * update the mesh that can be synchronized with the GPU backend without requiring extra copies.
- *
- * A buffer of vertices, a topology, optionally indices, and a compatible SkCustomMeshSpecification.
- * The data in 'vb' is expected to contain the attributes described in 'spec' for 'vcount' vertices.
- * The size of the buffer must be at least spec->stride()*vcount (even if vertex attributes contains
- * pad at the end of the stride). If 'bounds' does not contain all points output by 'spec''s vertex
- * program when applied to the vertices in 'vb' a draw of the custom mesh produces undefined
- * results.
- *
- * If indices is null then then 'icount' must be <= 0. 'vcount' vertices will be selected from 'vb'
- * to create the topology indicated by 'mode'.
- *
- * If indices is not null then icount must be >= 3. 'vb' will be indexed by 'icount' successive
- * values in 'indices' to create the topology indicated by 'mode'. The values in 'indices' must be
- * less than 'vcount'
- */
-struct SkCustomMesh {
-    enum class Mode { kTriangles, kTriangleStrip };
-    sk_sp<SkCustomMeshSpecification>  spec;
-    Mode                              mode     = Mode::kTriangles;
-    SkRect                            bounds   = SkRect::MakeEmpty();
-    const void*                       vb       = nullptr;
-    int                               vcount   = 0;
-    const uint16_t*                   indices  = nullptr;
-    int                               icount   = 0;
-};
-
-#endif  // SK_ENABLE_SKSL
-
-#endif