@shopify/react-native-skia 0.1.134 → 0.1.138

package/src/renderer/processors/Transform.ts

@@ -1,6 +1,6 @@
-import type { DrawingContext } from "../DrawingContext";
 import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
 import { processTransform } from "../../skia/types";
+import type { SkCanvas } from "../../skia/types/Canvas";
 
 export interface TransformProps {
   transform?: Transforms2d;
@@ -9,25 +9,22 @@ export interface TransformProps {
 }
 
 export const processCanvasTransform = (
-  { canvas, Skia }: DrawingContext,
+  canvas: SkCanvas,
   { transform, origin, matrix }: TransformProps
 ) => {
   if (matrix) {
     if (origin) {
-      const m3 = Skia.Matrix();
-      m3.translate(origin.x, origin.y);
-      m3.concat(matrix);
-      m3.translate(-origin.x, -origin.y);
-      canvas.concat(m3);
+      canvas.translate(origin.x, origin.y);
+      canvas.concat(matrix);
+      canvas.translate(-origin.x, -origin.y);
     } else {
       canvas.concat(matrix);
     }
   } else if (transform) {
-    const m3 = processTransform(
-      Skia.Matrix(),
+    processTransform(
+      canvas,
       origin ? transformOrigin(origin, transform) : transform
     );
-    canvas.concat(m3);
   }
 };
 

package/src/skia/core/Data.ts

@@ -32,20 +32,19 @@ const loadDataCollection = <T>(
 ): Promise<(T | null)[]> =>
   Promise.all(sources.map((source) => loadData(source, factory, onError)));
 
-const loadData = <T>(
+const loadData = async <T>(
   source: DataSource,
   factory: (data: SkData) => T,
   onError?: (err: Error) => void
 ): Promise<T | null> => {
-  if (source instanceof Uint8Array) {
-    return new Promise((resolve) =>
-      resolve(factoryWrapper(Skia.Data.fromBytes(source), factory, onError))
-    );
+  if (source === null) {
+    return null;
+  } else if (source instanceof Uint8Array) {
+    return factoryWrapper(Skia.Data.fromBytes(source), factory, onError);
   } else {
     const uri = typeof source === "string" ? source : resolveAsset(source);
-    return Skia.Data.fromURI(uri).then((d) =>
-      factoryWrapper(d, factory, onError)
-    );
+    const d = await Skia.Data.fromURI(uri);
+    return factoryWrapper(d, factory, onError);
   }
 };
 

package/src/skia/types/Font/Font.ts

@@ -12,6 +12,13 @@ export interface FontMetrics {
 }
 
 export interface SkFont extends SkJSIInstance<"Font"> {
+  /**
+   * Retrieves the total width of the provided text
+   * @param text
+   * @param paint
+   */
+  getTextWidth(text: string, paint?: SkPaint): number;
+
   /**
    * Retrieves the advanceX measurements for each glyph.
    * If paint is not null, its stroking, PathEffect, and MaskFilter fields are respected.

package/src/skia/types/Matrix.ts

@@ -1,4 +1,5 @@
 import type { SkJSIInstance } from "./JsiInstance";
+import type { SkCanvas } from "./Canvas";
 export enum MatrixIndex {
   ScaleX = 0,
   SkewX = 1,
@@ -8,15 +9,19 @@ export enum MatrixIndex {
   TransY = 5,
   Persp0 = 6,
   Persp1 = 7,
-  persp2 = 8,
+  Persp2 = 8,
 }
 
+export const isMatrix = (obj: unknown): obj is SkMatrix =>
+  obj !== null && (obj as SkJSIInstance<string>).__typename__ === "Matrix";
+
 export interface SkMatrix extends SkJSIInstance<"Matrix"> {
   concat: (matrix: SkMatrix) => void;
   translate: (x: number, y: number) => void;
   scale: (x: number, y?: number) => void;
   skew: (x: number, y: number) => void;
   rotate: (theta: number) => void;
+  identity: () => void;
 }
 
 type Transform2dName =
@@ -49,7 +54,10 @@ export interface TransformProp {
   transform?: Transforms2d;
 }
 
-export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
+export const processTransform = <T extends SkMatrix | SkCanvas>(
+  m: T,
+  transforms: Transforms2d
+) => {
   for (const transform of transforms) {
     const key = Object.keys(transform)[0] as Transform2dName;
     const value = (transform as Pick<Transformations, typeof key>)[key];
@@ -82,7 +90,11 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
       continue;
     }
     if (key === "rotate" || key === "rotateZ") {
-      m.rotate(value);
+      if (isMatrix(m)) {
+        m.rotate(value);
+      } else {
+        m.rotate(toDegrees(value), 0, 0);
+      }
       continue;
     }
     exhaustiveCheck(key);
@@ -93,3 +105,7 @@ export const processTransform = (m: SkMatrix, transforms: Transforms2d) => {
 const exhaustiveCheck = (a: never): never => {
   throw new Error(`Unknown transformation: ${a}`);
 };
+
+export const toDegrees = (rad: number) => {
+  return (rad * 180) / Math.PI;
+};

package/src/skia/types/Typeface/Typeface.ts

@@ -1,6 +1,3 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export interface SkTypeface extends SkJSIInstance<"Typeface"> {
-  readonly bold: boolean;
-  readonly italic: boolean;
-}
+export type SkTypeface = SkJSIInstance<"Typeface">;

package/src/skia/web/JsiSkFont.ts

@@ -27,6 +27,12 @@ Clients should use "Font.getGlyphWidths" instead (the latter does no shaping)`
     return new JsiSkRect(this.CanvasKit, this.CanvasKit.XYWHRect(0, 0, 0, 0));
   }
 
+  getTextWidth(text: string, paint?: SkPaint | undefined) {
+    const ids = this.getGlyphIDs(text);
+    const widths = this.getGlyphWidths(ids, paint);
+    return widths.reduce((a, b) => a + b, 0);
+  }
+
   getMetrics() {
     const result = this.ref.getMetrics();
     return {

package/src/skia/web/JsiSkMatrix.ts

@@ -51,4 +51,8 @@ export class JsiSkMatrix
       )
     );
   }
+
+  identity() {
+    this.ref.set(this.CanvasKit.Matrix.identity());
+  }
 }

package/src/values/api.ts

@@ -6,5 +6,3 @@ declare global {
 
 const { SkiaValueApi } = global;
 export const ValueApi = SkiaValueApi;
-
-export const { createValue, createComputedValue } = ValueApi;

package/src/values/hooks/useComputedValue.ts

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 
 import { ValueApi } from "../api";
-import { isValue } from "../../renderer/processors";
+import { isValue } from "../../renderer/processors/Animations";
 
 /**
  * Creates a new computed value - a value that will calculate its value depending

package/src/views/SkiaView.web.tsx

@@ -36,29 +36,32 @@ export class SkiaView extends React.Component<
   }
 
   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();
+    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.redraw();
+          }
+        }
       }
-    }
+    );
   }
 
   componentDidMount() {
     // Start render loop
-    this.redraw();
+    this.tick();
   }
 
   componentWillUnmount() {
@@ -80,7 +83,7 @@ export class SkiaView extends React.Component<
   /**
    * Sends a redraw request to the native SkiaView.
    */
-  private redraw() {
+  private tick() {
     if (this._mode === "continuous" || this._redrawRequests > 0) {
       this._redrawRequests = 0;
       if (
@@ -95,7 +98,7 @@ export class SkiaView extends React.Component<
           height: this.state.height,
           width: this.state.width,
           timestamp: Date.now(),
-          touches: [touches],
+          touches: touches.map((t) => [t]),
         };
         this.props.onDraw && this.props.onDraw(this._canvas!, info);
         this._surface?.ref.flush();
@@ -103,11 +106,11 @@ export class SkiaView extends React.Component<
     }
     // Always request a new redraw as long as we're not unmounted
     if (!this._unmounted) {
-      requestAnimationFrame(this.redraw.bind(this));
+      requestAnimationFrame(this.tick.bind(this));
     }
   }
 
-  public requestRedraw() {
+  public redraw() {
     this._redrawRequests++;
   }
 
@@ -122,7 +125,7 @@ export class SkiaView extends React.Component<
    */
   public setDrawMode(mode: DrawMode) {
     this._mode = mode;
-    this.redraw();
+    this.tick();
   }
 
   /**
@@ -137,7 +140,7 @@ export class SkiaView extends React.Component<
     _values.forEach((v) => {
       this._unsubscriptions.push(
         v.addListener(() => {
-          this.requestRedraw();
+          this.redraw();
         })
       );
     });
@@ -152,23 +155,11 @@ export class SkiaView extends React.Component<
       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);
+    this.redraw();
   }
 
-  handleTouchCancel(evt: PointerEvent) {
-    this.handleTouchEvent(evt, TouchType.End);
+  createTouchHandler(touchType: TouchType) {
+    return (evt: PointerEvent) => this.handleTouchEvent(evt, touchType);
   }
 
   render() {
@@ -179,10 +170,12 @@ export class SkiaView extends React.Component<
           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)}
+          onPointerDown={this.createTouchHandler(TouchType.Start)}
+          onPointerMove={this.createTouchHandler(TouchType.Active)}
+          onPointerUp={this.createTouchHandler(TouchType.End)}
+          onPointerCancel={this.createTouchHandler(TouchType.Cancelled)}
+          onPointerLeave={this.createTouchHandler(TouchType.End)}
+          onPointerOut={this.createTouchHandler(TouchType.End)}
         />
       </View>
     );

package/src/web/LoadSkiaWeb.tsx

@@ -0,0 +1,24 @@
+// 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,
+  CanvasKitInitOptions,
+} from "canvaskit-wasm";
+
+declare global {
+  var CanvasKit: CanvasKitType;
+}
+
+export const LoadSkiaWeb = async (opts?: CanvasKitInitOptions) => {
+  if (global.CanvasKit !== undefined) {
+    return;
+  }
+  const CanvasKit = await CanvasKitInit(opts);
+  // The CanvasKit API is stored on the global object and used
+  // to create the JsiSKApi in the Skia.web.ts file.
+  global.CanvasKit = CanvasKit;
+};
+
+// We keep this function for backward compatibility
+export const LoadSkia = LoadSkiaWeb;

package/src/web/WithSkiaWeb.tsx

@@ -0,0 +1,37 @@
+import type { ComponentProps, ComponentType } from "react";
+import React, { useMemo, lazy, Suspense } from "react";
+import { Platform } from "react-native";
+
+import { LoadSkiaWeb } from "./LoadSkiaWeb";
+
+interface WithSkiaProps {
+  fallback?: ComponentProps<typeof Suspense>["fallback"];
+  getComponent: () => Promise<{ default: ComponentType }>;
+  opts?: Parameters<typeof LoadSkiaWeb>[0];
+}
+
+export const WithSkiaWeb = ({
+  getComponent,
+  fallback,
+  opts,
+}: WithSkiaProps) => {
+  const Inner = useMemo(
+    () =>
+      lazy(async () => {
+        if (Platform.OS === "web") {
+          await LoadSkiaWeb(opts);
+        } else {
+          console.warn(
+            "<WithSkiaWeb /> is only necessary on web. Consider not using on native."
+          );
+        }
+        return getComponent();
+      }),
+    [getComponent, opts]
+  );
+  return (
+    <Suspense fallback={fallback ?? null}>
+      <Inner />
+    </Suspense>
+  );
+};

package/src/web/index.ts

@@ -1,15 +1,2 @@
-// 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;
-};
+export * from "./LoadSkiaWeb";
+export * from "./WithSkiaWeb";