@shopify/react-native-skia 0.0.135

package/src/views/SkiaView.web.tsx

@@ -0,0 +1,193 @@
+/* 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.MakeWebGLCanvasSurface(this._canvasRef.current)!
+          );
+          // Get canvas and repaint
+          if (this._surface) {
+            this._canvas = this._surface.getCanvas();
+            this.requestRedraw();
+          }
+        }
+      }
+    );
+  }
+
+  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)}>
+        <canvas
+          ref={this._canvasRef}
+          width={this.state.width}
+          height={this.state.height}
+          onPointerDown={this.handleTouchStart.bind(this)}
+          onPointerMove={this.handleTouchMove.bind(this)}
+          onPointerUp={this.handleTouchEnd.bind(this)}
+          onPointerCancel={this.handleTouchCancel.bind(this)}
+        />
+      </View>
+    );
+  }
+}

package/src/views/api.ts

@@ -0,0 +1,7 @@
+import type { ISkiaViewApi } from "./types";
+
+declare global {
+  var SkiaViewApi: ISkiaViewApi;
+}
+
+export const { SkiaViewApi } = global;

package/src/views/index.ts

@@ -0,0 +1,4 @@
+export * from "./SkiaView";
+export * from "./types";
+export * from "./useDrawCallback";
+export * from "./useTouchHandler";

package/src/views/types.ts

@@ -0,0 +1,96 @@
+import type { ViewProps } from "react-native";
+
+import type { SkImage, SkRect, SkCanvas } from "../skia/types";
+import type { SkiaValue } from "../values";
+
+export type DrawMode = "continuous" | "default";
+
+export type NativeSkiaViewProps = ViewProps & {
+  mode?: DrawMode;
+  debug?: boolean;
+};
+
+export enum TouchType {
+  Start,
+  Active,
+  End,
+  Cancelled,
+}
+
+export interface TouchInfo {
+  x: number;
+  y: number;
+  force: number;
+  type: TouchType;
+  id: number;
+  timestamp: number;
+}
+
+export interface DrawingInfo {
+  width: number;
+  height: number;
+  timestamp: number;
+  touches: Array<Array<TouchInfo>>;
+}
+
+export type ExtendedTouchInfo = TouchInfo & {
+  // points per second
+  velocityX: number;
+  velocityY: number;
+};
+
+export type TouchHandlers = {
+  onStart?: (touchInfo: TouchInfo) => void;
+  onActive?: (touchInfo: ExtendedTouchInfo) => void;
+  onEnd?: (touchInfo: ExtendedTouchInfo) => void;
+};
+
+export type TouchHandler = (touchInfo: Array<Array<TouchInfo>>) => void;
+
+export type RNSkiaDrawCallback = (canvas: SkCanvas, info: DrawingInfo) => void;
+
+/**
+ * Listener interface for value changes
+ */
+export interface ValueListener {
+  addListener: (callback: () => void) => number;
+  removeListener: (id: number) => void;
+}
+
+export interface ISkiaViewApi {
+  invalidateSkiaView: (nativeId: number) => void;
+  makeImageSnapshot: (nativeId: number, rect?: SkRect) => SkImage;
+  setDrawCallback: (
+    nativeId: number,
+    callback: RNSkiaDrawCallback | undefined
+  ) => void;
+  setDrawMode: (nativeId: number, mode: DrawMode) => void;
+  registerValuesInView: (
+    nativeId: number,
+    values: SkiaValue<unknown>[]
+  ) => () => void;
+}
+
+export interface SkiaViewProps extends ViewProps {
+  /**
+   * Sets the drawing mode for the skia view. 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
+   * sizes and margins.
+   */
+  mode?: DrawMode;
+  /**
+   * When set to true the view will display information about the
+   * average time it takes to render.
+   */
+  debug?: boolean;
+  /**
+   * Draw callback. Will be called whenever the view is invalidated and
+   * needs to redraw. This is either caused by a change in a react
+   * property, a touch event, or a call to redraw. If the view is in
+   * continuous mode the callback will be called 60 frames per second
+   * by the native view.
+   */
+  onDraw?: RNSkiaDrawCallback;
+}

package/src/views/useDrawCallback.ts

@@ -0,0 +1,19 @@
+import type { DependencyList } from "react";
+import { useMemo } from "react";
+
+import type { RNSkiaDrawCallback } from "./types";
+
+/**
+ * Creates a memoized callback for the onDraw handler of a Skia component.
+ * @param callback The callback to memoize.
+ * @param deps Dependencies for the callback.
+ * */
+export const useDrawCallback = (
+  callback: RNSkiaDrawCallback,
+  deps: DependencyList = []
+) => {
+  return useMemo(() => {
+    return callback;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};

package/src/views/useTouchHandler.ts

@@ -0,0 +1,111 @@
+import type { DependencyList } from "react";
+import { useCallback, useRef } from "react";
+import { PixelRatio } from "react-native";
+
+import type {
+  ExtendedTouchInfo,
+  TouchHandlers,
+  TouchHandler,
+  TouchInfo,
+} from "./types";
+import { TouchType } from "./types";
+
+const useInternalTouchHandler = (
+  handlers: TouchHandlers,
+  deps: DependencyList = [],
+  multiTouch = false
+): TouchHandler => {
+  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) => {
+      // 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[touch.id]?.timestamp ?? touch.timestamp);
+
+        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[touch.id] = {
+              x: distX / timeDiffseconds / PixelRatio.get(),
+              y: distY / timeDiffseconds / PixelRatio.get(),
+            };
+          }
+        }
+
+        const extendedTouchInfo: ExtendedTouchInfo = {
+          ...touch,
+          velocityX: prevVelocityRef.current[touch.id]?.x,
+          velocityY: prevVelocityRef.current[touch.id]?.y,
+        };
+
+        // Save previous touch
+        prevTouchInfoRef.current[touch.id] = touch;
+
+        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,15 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+import CanvasKitInit from "canvaskit-wasm/bin/full/canvaskit";
+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;
+};