@shopify/react-native-skia 0.1.128 → 0.1.131

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,21 +13,21 @@ 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 {
-    return new RNSkClockValue(requestAnimationFrame);
+    return new RNSkClockValue(requestAnimationFrame.bind(window));
   },
   createAnimation: function <S extends AnimationState = AnimationState>(
     cb: (t: number, state: S | undefined) => S
   ): SkiaAnimation {
-    return new RNSkAnimation(cb, requestAnimationFrame);
+    return new RNSkAnimation(cb, requestAnimationFrame.bind(window));
   },
 };

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/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

@@ -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";
 
@@ -23,6 +22,7 @@ export interface TouchInfo {
   y: number;
   force: number;
   type: TouchType;
+  id: number;
   timestamp: number;
 }
 
@@ -67,7 +67,7 @@ export interface ISkiaViewApi {
   setDrawMode: (nativeId: number, mode: DrawMode) => void;
   registerValuesInView: (
     nativeId: number,
-    values: SkiaReadonlyValue<unknown>[]
+    values: SkiaValue<unknown>[]
   ) => () => void;
 }
 

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;
+};