@shopify/react-native-skia 0.1.129 → 0.1.132

package/src/views/SkiaView.web.tsx

@@ -0,0 +1,192 @@
+/* global HTMLCanvasElement */
+import React from "react";
+import type { PointerEvent } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { View } from "react-native";
+
+import type { SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+
+import type { DrawingInfo, DrawMode, SkiaViewProps, TouchInfo } from "./types";
+import { TouchType } from "./types";
+
+export class SkiaView extends React.Component<
+  SkiaViewProps,
+  { width: number; height: number }
+> {
+  constructor(props: SkiaViewProps) {
+    super(props);
+    this.state = { width: -1, height: -1 };
+    this._mode = props.mode ?? "default";
+  }
+
+  private _surface: JsiSkSurface | null = null;
+  private _unsubscriptions: Array<() => void> = [];
+  private _touches: Array<TouchInfo> = [];
+  private _canvas: SkCanvas | null = null;
+  private _canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();
+  private _mode: DrawMode;
+  private _redrawRequests = 0;
+  private _unmounted = false;
+
+  private unsubscribeAll() {
+    this._unsubscriptions.forEach((u) => u());
+    this._unsubscriptions = [];
+  }
+
+  private onLayout(evt: LayoutChangeEvent) {
+    this.setState({
+      width: evt.nativeEvent.layout.width,
+      height: evt.nativeEvent.layout.height,
+    });
+    // Reset canvas / surface on layout change
+    if (this._canvasRef.current) {
+      // Create surface
+      this._surface = new JsiSkSurface(
+        global.CanvasKit,
+        global.CanvasKit.MakeCanvasSurface(this._canvasRef.current)!
+      );
+      // Get canvas and repaint
+      if (this._surface) {
+        this._canvas = this._surface.getCanvas();
+        this.requestRedraw();
+        this.redraw();
+      }
+    }
+  }
+
+  componentDidMount() {
+    // Start render loop
+    this.redraw();
+  }
+
+  componentWillUnmount() {
+    this.unsubscribeAll();
+    this._surface = null;
+    this._canvas = null;
+    this._unmounted = true;
+  }
+
+  /**
+   * 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) {
+    return this._surface?.makeImageSnapshot(rect);
+  }
+
+  /**
+   * Sends a redraw request to the native SkiaView.
+   */
+  private redraw() {
+    if (this._mode === "continuous" || this._redrawRequests > 0) {
+      this._redrawRequests = 0;
+      if (
+        this._canvas &&
+        this.props.onDraw &&
+        this.state.height !== -1 &&
+        this.state.width !== -1
+      ) {
+        const touches = [...this._touches];
+        this._touches = [];
+        const info: DrawingInfo = {
+          height: this.state.height,
+          width: this.state.width,
+          timestamp: Date.now(),
+          touches: [touches],
+        };
+        this.props.onDraw && this.props.onDraw(this._canvas!, info);
+        this._surface?.ref.flush();
+      }
+    }
+    // Always request a new redraw as long as we're not unmounted
+    if (!this._unmounted) {
+      requestAnimationFrame(this.redraw.bind(this));
+    }
+  }
+
+  public requestRedraw() {
+    this._redrawRequests++;
+  }
+
+  /**
+   * Updates the drawing mode for the skia view. This is the same
+   * as declaratively setting the mode property on the SkiaView.
+   * There are two drawing modes, "continuous" and "default",
+   * where the continuous mode will continuously redraw the view and
+   * the default mode will only redraw when any of the regular react
+   * properties are changed like size and margins.
+   * @param mode Drawing mode to use.
+   */
+  public setDrawMode(mode: DrawMode) {
+    this._mode = mode;
+    this.redraw();
+  }
+
+  /**
+   * 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>[]) {
+    // Unsubscribe from dependency values
+    this.unsubscribeAll();
+    // Register redraw dependencies on values
+    _values.forEach((v) => {
+      this._unsubscriptions.push(
+        v.addListener(() => {
+          this.requestRedraw();
+        })
+      );
+    });
+  }
+
+  private handleTouchEvent(evt: PointerEvent, touchType: TouchType) {
+    this._touches.push({
+      id: evt.pointerId,
+      x: evt.clientX - evt.currentTarget.getClientRects()[0].left,
+      y: evt.clientY - evt.currentTarget.getClientRects()[0].top,
+      force: evt.pressure,
+      type: touchType,
+      timestamp: Date.now(),
+    });
+    this.requestRedraw();
+  }
+
+  handleTouchStart(evt: PointerEvent) {
+    this.handleTouchEvent(evt, TouchType.Start);
+  }
+
+  handleTouchMove(evt: PointerEvent) {
+    this.handleTouchEvent(evt, TouchType.Active);
+  }
+
+  handleTouchEnd(evt: PointerEvent) {
+    this.handleTouchEvent(evt, TouchType.Cancelled);
+  }
+
+  handleTouchCancel(evt: PointerEvent) {
+    this.handleTouchEvent(evt, TouchType.End);
+  }
+
+  render() {
+    const { mode, debug = false, ...viewProps } = this.props;
+    return (
+      <View {...viewProps} onLayout={this.onLayout.bind(this)}>
+        {this.state.width > -1 ? (
+          <canvas
+            ref={this._canvasRef}
+            width={`${this.state.width}px`}
+            height={`${this.state.height}px`}
+            onPointerDown={this.handleTouchStart.bind(this)}
+            onPointerMove={this.handleTouchMove.bind(this)}
+            onPointerUp={this.handleTouchEnd.bind(this)}
+            onPointerCancel={this.handleTouchCancel.bind(this)}
+          />
+        ) : null}
+      </View>
+    );
+  }
+}

package/src/views/types.ts

@@ -22,6 +22,7 @@ export interface TouchInfo {
   y: number;
   force: number;
   type: TouchType;
+  id: number;
   timestamp: number;
 }
 

package/src/views/useTouchHandler.ts

@@ -10,71 +10,102 @@ import type {
 } from "./types";
 import { TouchType } from "./types";
 
-/**
- * Provides a callback for handling touch events in the Skia View.
- * This touch handler only handles single taps.
- * @param handlers Callbacks for the different touch states
- * @param deps optional Dependency array to update the handlers
- * @returns A function that can be used from within the onDraw callback to
- * update and handle touch events. Call it with the touches property from
- * the info object.
- */
-export const useTouchHandler = (
+const useInternalTouchHandler = (
   handlers: TouchHandlers,
-  deps: DependencyList = []
+  deps: DependencyList = [],
+  multiTouch = false
 ): TouchHandler => {
-  const prevTouchInfoRef = useRef<TouchInfo>();
-  const prevVelocityRef = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+  const prevTouchInfoRef = useRef<{ [key: number]: TouchInfo }>({});
+  const prevVelocityRef = useRef<{ [key: number]: { x: number; y: number } }>(
+    {}
+  );
+
   return useCallback((history: Array<Array<TouchInfo>>) => {
     // Process all items in the current touch history
     history.forEach((touches) => {
-      if (touches.length === 0) {
-        return;
-      }
-      // Get the next touch
-      const touch = touches[0];
+      // Enumerate touches
+      for (let i = 0; i < touches.length; i++) {
+        if (!multiTouch && i > 0) {
+          break;
+        }
+
+        const touch = touches[i];
 
-      // Calculate the velocity from the previous touch.
-      const timeDiffseconds =
-        touch.timestamp -
-        (prevTouchInfoRef.current?.timestamp ?? touch.timestamp);
+        // Calculate the velocity from the previous touch.
+        const timeDiffseconds =
+          touch.timestamp -
+          (prevTouchInfoRef.current[touch.id]?.timestamp ?? touch.timestamp);
 
-      const distX = touch.x - (prevTouchInfoRef.current?.x ?? touch.x);
-      const distY = touch.y - (prevTouchInfoRef.current?.y ?? touch.y);
+        const distX =
+          touch.x - (prevTouchInfoRef.current[touch.id]?.x ?? touch.x);
+        const distY =
+          touch.y - (prevTouchInfoRef.current[touch.id]?.y ?? touch.y);
 
-      if (
-        touch.type !== TouchType.Start &&
-        touch.type !== TouchType.End &&
-        touch.type !== TouchType.Cancelled
-      ) {
-        if (timeDiffseconds > 0) {
-          prevVelocityRef.current.x =
-            distX / timeDiffseconds / PixelRatio.get();
-          prevVelocityRef.current.y =
-            distY / timeDiffseconds / PixelRatio.get();
+        if (
+          touch.type !== TouchType.Start &&
+          touch.type !== TouchType.End &&
+          touch.type !== TouchType.Cancelled
+        ) {
+          if (timeDiffseconds > 0) {
+            prevVelocityRef.current[touch.id] = {
+              x: distX / timeDiffseconds / PixelRatio.get(),
+              y: distY / timeDiffseconds / PixelRatio.get(),
+            };
+          }
         }
-      }
 
-      const extendedTouchInfo: ExtendedTouchInfo = {
-        ...touch,
-        velocityX: prevVelocityRef.current.x,
-        velocityY: prevVelocityRef.current.y,
-      };
+        const extendedTouchInfo: ExtendedTouchInfo = {
+          ...touch,
+          velocityX: prevVelocityRef.current[touch.id]?.x,
+          velocityY: prevVelocityRef.current[touch.id]?.y,
+        };
 
-      // Save previous touch
-      prevTouchInfoRef.current = touch;
+        // Save previous touch
+        prevTouchInfoRef.current[touch.id] = touch;
 
-      if (touch.type === TouchType.Start) {
-        prevVelocityRef.current.x = 0;
-        prevVelocityRef.current.y = 0;
-        handlers.onStart && handlers.onStart(touch);
-      } else if (touch.type === TouchType.Active) {
-        handlers.onActive && handlers.onActive(extendedTouchInfo);
-      } else {
-        handlers.onActive && handlers.onActive(extendedTouchInfo);
-        handlers.onEnd && handlers.onEnd(extendedTouchInfo);
+        if (touch.type === TouchType.Start) {
+          delete prevVelocityRef.current[touch.id];
+          handlers.onStart && handlers.onStart(touch);
+        } else if (touch.type === TouchType.Active) {
+          handlers.onActive && handlers.onActive(extendedTouchInfo);
+        } else {
+          handlers.onActive && handlers.onActive(extendedTouchInfo);
+          handlers.onEnd && handlers.onEnd(extendedTouchInfo);
+        }
       }
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
 };
+
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler only handles single touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export const useTouchHandler = (
+  handlers: TouchHandlers,
+  deps: DependencyList = []
+): TouchHandler => {
+  return useInternalTouchHandler(handlers, deps, false);
+};
+
+/**
+ * Provides a callback for handling touch events in the Skia View.
+ * This touch handler handles multiple touches.
+ * @param handlers Callbacks for the different touch states
+ * @param deps optional Dependency array to update the handlers
+ * @returns A function that can be used from within the onDraw callback to
+ * update and handle touch events. Call it with the touches property from
+ * the info object.
+ */
+export const useMultiTouchHandler = (
+  handlers: TouchHandlers,
+  deps: DependencyList = []
+): TouchHandler => {
+  return useInternalTouchHandler(handlers, deps, true);
+};

package/src/web/index.ts

@@ -0,0 +1,13 @@
+import CanvasKitInit from "canvaskit-wasm";
+import type { CanvasKit as CanvasKitType } from "canvaskit-wasm";
+
+declare global {
+  var CanvasKit: CanvasKitType;
+}
+
+export const LoadSkia = async () => {
+  const CanvasKit = await CanvasKitInit();
+  // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+  global.CanvasKit = CanvasKit;
+};

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