@shopify/react-native-skia 0.1.172 → 0.1.174

package/src/renderer/HostComponents.ts

@@ -56,16 +56,7 @@ import type {
   BlendProps,
   MorphologyImageFilterProps,
 } from "../dom/types/ImageFilters";
-import type {
-  SkColorFilter,
-  SkImageFilter,
-  SkMaskFilter,
-  SkPaint,
-  SkPathEffect,
-  SkRect,
-  SkRRect,
-  SkShader,
-} from "../skia";
+import type { SkRect, SkRRect } from "../skia/types";
 import type { JsiDrawingNode } from "../dom/nodes/DrawingNode";
 import type { SkiaValue } from "../values";
 
@@ -86,7 +77,7 @@ declare global {
       props: RoundedRectProps
     ) => JsiDrawingNode<RoundedRectProps, SkRRect>;
     GroupNode: (props: GroupProps) => RenderNode<GroupProps>;
-    PaintNode: (props: PaintProps) => DeclarationNode<PaintProps, SkPaint>;
+    PaintNode: (props: PaintProps) => DeclarationNode<PaintProps>;
     FillNode: (props: PaintProps) => RenderNode<PaintProps>;
     CircleNode: (props: CircleProps) => RenderNode<CircleProps>;
     PathNode: (props: PathProps) => RenderNode<PathProps>;
@@ -102,98 +93,90 @@ declare global {
     // Mask filters
     BlurMaskFilterNode: (
       props: BlurMaskFilterProps
-    ) => DeclarationNode<BlurMaskFilterProps, SkMaskFilter>;
+    ) => DeclarationNode<BlurMaskFilterProps>;
 
     // Path effects
     DashPathEffectNode: (
       props: DashPathEffectProps
-    ) => DeclarationNode<DashPathEffectProps, SkPathEffect>;
+    ) => DeclarationNode<DashPathEffectProps>;
     DiscretePathEffectNode: (
       props: DiscretePathEffectProps
-    ) => DeclarationNode<DiscretePathEffectProps, SkPathEffect>;
+    ) => DeclarationNode<DiscretePathEffectProps>;
     CornerPathEffectNode: (
       props: CornerPathEffectProps
-    ) => DeclarationNode<CornerPathEffectProps, SkPathEffect>;
+    ) => DeclarationNode<CornerPathEffectProps>;
     Path1DPathEffectNode: (
       props: Path1DPathEffectProps
-    ) => DeclarationNode<Path1DPathEffectProps, SkPathEffect>;
+    ) => DeclarationNode<Path1DPathEffectProps>;
     Path2DPathEffectNode: (
       props: Path2DPathEffectProps
-    ) => DeclarationNode<Path2DPathEffectProps, SkPathEffect>;
+    ) => DeclarationNode<Path2DPathEffectProps>;
     Line2DPathEffectNode: (
       props: Line2DPathEffectProps
-    ) => DeclarationNode<Line2DPathEffectProps, SkPathEffect>;
-    SumPathEffectNode: () => DeclarationNode<null, SkPathEffect>;
+    ) => DeclarationNode<Line2DPathEffectProps>;
+    SumPathEffectNode: () => DeclarationNode<null>;
 
     // Image filters
     BlendImageFilterNode: (
       props: BlendImageFilterProps
-    ) => DeclarationNode<BlendImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<BlendImageFilterProps>;
     DropShadowImageFilterNode: (
       props: DropShadowImageFilterProps
-    ) => DeclarationNode<DropShadowImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<DropShadowImageFilterProps>;
     DisplacementMapImageFilterNode: (
       props: DisplacementMapImageFilterProps
-    ) => DeclarationNode<DisplacementMapImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<DisplacementMapImageFilterProps>;
     BlurImageFilterNode: (
       props: BlurImageFilterProps
-    ) => DeclarationNode<BlurImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<BlurImageFilterProps>;
     OffsetImageFilterNode: (
       props: OffsetImageFilterProps
-    ) => DeclarationNode<OffsetImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<OffsetImageFilterProps>;
     MorphologyImageFilterNode: (
       props: MorphologyImageFilterProps
-    ) => DeclarationNode<MorphologyImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<MorphologyImageFilterProps>;
     RuntimeShaderImageFilterNode: (
       props: RuntimeShaderImageFilterProps
-    ) => DeclarationNode<RuntimeShaderImageFilterProps, SkImageFilter>;
+    ) => DeclarationNode<RuntimeShaderImageFilterProps>;
 
     // Color filters
     MatrixColorFilterNode: (
       props: MatrixColorFilterProps
-    ) => DeclarationNode<MatrixColorFilterProps, SkColorFilter>;
+    ) => DeclarationNode<MatrixColorFilterProps>;
     BlendColorFilterNode: (
       props: BlendColorFilterProps
-    ) => DeclarationNode<BlendColorFilterProps, SkColorFilter>;
-    LinearToSRGBGammaColorFilterNode: () => DeclarationNode<
-      null,
-      SkColorFilter
-    >;
-    SRGBToLinearGammaColorFilterNode: () => DeclarationNode<
-      null,
-      SkColorFilter
-    >;
-    LumaColorFilterNode: () => DeclarationNode<null, SkColorFilter>;
+    ) => DeclarationNode<BlendColorFilterProps>;
+    LinearToSRGBGammaColorFilterNode: () => DeclarationNode<null>;
+    SRGBToLinearGammaColorFilterNode: () => DeclarationNode<null>;
+    LumaColorFilterNode: () => DeclarationNode<null>;
     LerpColorFilterNode: (
       props: LerpColorFilterProps
-    ) => DeclarationNode<LerpColorFilterProps, SkColorFilter>;
+    ) => DeclarationNode<LerpColorFilterProps>;
 
     // Shaders
-    ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps, SkShader>;
+    ShaderNode: (props: ShaderProps) => DeclarationNode<ShaderProps>;
     ImageShaderNode: (
       props: ImageShaderProps
-    ) => DeclarationNode<ImageShaderProps, SkShader>;
-    ColorShaderNode: (
-      props: ColorProps
-    ) => DeclarationNode<ColorProps, SkShader>;
+    ) => DeclarationNode<ImageShaderProps>;
+    ColorShaderNode: (props: ColorProps) => DeclarationNode<ColorProps>;
     TurbulenceNode: (
       props: TurbulenceProps
-    ) => DeclarationNode<TurbulenceProps, SkShader>;
+    ) => DeclarationNode<TurbulenceProps>;
     FractalNoiseNode: (
       props: FractalNoiseProps
-    ) => DeclarationNode<FractalNoiseProps, SkShader>;
+    ) => DeclarationNode<FractalNoiseProps>;
     LinearGradientNode: (
       props: LinearGradientProps
-    ) => DeclarationNode<LinearGradientProps, SkShader>;
+    ) => DeclarationNode<LinearGradientProps>;
     RadialGradientNode: (
       props: RadialGradientProps
-    ) => DeclarationNode<RadialGradientProps, SkShader>;
+    ) => DeclarationNode<RadialGradientProps>;
     SweepGradientNode: (
       props: SweepGradientProps
-    ) => DeclarationNode<SweepGradientProps, SkShader>;
+    ) => DeclarationNode<SweepGradientProps>;
     TwoPointConicalGradientNode: (
       props: TwoPointConicalGradientProps
-    ) => DeclarationNode<TwoPointConicalGradientProps, SkShader>;
+    ) => DeclarationNode<TwoPointConicalGradientProps>;
     PictureNode: (props: PictureProps) => RenderNode<PictureProps>;
     ImageSVGNode: (props: ImageSVGProps) => RenderNode<ImageSVGProps>;
     VerticesNode: (props: VerticesProps) => RenderNode<VerticesProps>;
@@ -201,12 +184,10 @@ declare global {
     TextPathNode: (prop: TextPathProps) => RenderNode<TextPathProps>;
     TextBlobNode: (prop: TextBlobProps) => RenderNode<TextBlobProps>;
     GlyphsNode: (prop: GlyphsProps) => RenderNode<GlyphsProps>;
-    BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps, SkImageFilter>;
+    BlendNode: (prop: BlendProps) => DeclarationNode<BlendProps>;
     BackdropFilterNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
     BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
-    BoxShadowNode: (
-      prop: BoxShadowProps
-    ) => DeclarationNode<BoxShadowProps, BoxShadowProps>;
+    BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps>;
     LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
   };
 

package/src/renderer/HostConfig.ts

@@ -155,6 +155,7 @@ export const skHostConfig: SkiaHostConfig = {
 
   resetAfterCommit(container) {
     debug("resetAfterCommit");
+    container.depMgr.update();
     container.redraw();
   },
 

package/src/renderer/Offscreen.tsx

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+
+import { JsiDrawingContext } from "../dom/types";
+import { Skia } from "../skia";
+
+import { SkiaRoot } from "./Reconciler";
+
+export const drawAsImage = (
+  element: ReactElement,
+  width: number,
+  height: number
+) => {
+  const surface = Skia.Surface.MakeOffscreen(width, height);
+  if (!surface) {
+    throw new Error("Could not create offscreen surface");
+  }
+  const canvas = surface.getCanvas();
+  const root = new SkiaRoot(Skia);
+  root.render(element);
+  const ctx = new JsiDrawingContext(Skia, canvas);
+  root.dom.render(ctx);
+  surface.flush();
+  return surface.makeImageSnapshot();
+};

package/src/renderer/Reconciler.tsx

@@ -50,7 +50,6 @@ export class SkiaRoot {
   render(element: ReactNode) {
     skiaReconciler.updateContainer(element, this.root, null, () => {
       hostDebug("updateContainer");
-      this.container.depMgr.update();
     });
   }
 

package/src/skia/types/Surface/Surface.ts

@@ -24,4 +24,9 @@ export interface SkSurface extends SkJSIInstance<"Surface"> {
       example: https://fiddle.skia.org/c/@Surface_makeImageSnapshot
   */
   makeImageSnapshot(bounds?: SkRect): SkImage;
+
+  /**
+   * Make sure any queued draws are sent to the screen or the GPU.
+   */
+  flush(): void;
 }

package/src/skia/types/Surface/SurfaceFactory.ts

@@ -9,4 +9,11 @@ export interface SurfaceFactory {
    * @param height - number of pixels of the height of the drawable area.
    */
   Make: (width: number, height: number) => SkSurface | null;
+
+  /**
+   * Creates a GPU backed surface.
+   * @param width - number of pixels of the width of the drawable area.
+   * @param height - number of pixels of the height of the drawable area.
+   */
+  MakeOffscreen: (width: number, height: number) => SkSurface | null;
 }

package/src/skia/web/JsiSkDataFactory.ts

@@ -1,4 +1,3 @@
-/*global btoa, atob*/
 import type { CanvasKit } from "canvaskit-wasm";
 
 import type { SkData } from "../types";

package/src/skia/web/JsiSkImage.ts

@@ -1,4 +1,3 @@
-/*global btoa, atob*/
 import type { CanvasKit, Image } from "canvaskit-wasm";
 
 import type {
@@ -15,6 +14,31 @@ import { ckEnum, HostObject } from "./Host";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkShader } from "./JsiSkShader";
 
+// https://github.com/google/skia/blob/1f193df9b393d50da39570dab77a0bb5d28ec8ef/modules/canvaskit/htmlcanvas/util.js
+export const toBase64String = (bytes: Uint8Array) => {
+  if (typeof Buffer !== "undefined") {
+    // Are we on node?
+    return Buffer.from(bytes).toString("base64");
+  } else {
+    // From https://stackoverflow.com/a/25644409
+    // because the naive solution of
+    //     btoa(String.fromCharCode.apply(null, bytes));
+    // would occasionally throw "Maximum call stack size exceeded"
+    var CHUNK_SIZE = 0x8000; //arbitrary number
+    var index = 0;
+    var { length } = bytes;
+    var result = "";
+    var slice;
+    while (index < length) {
+      slice = bytes.slice(index, Math.min(index + CHUNK_SIZE, length));
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      result += String.fromCharCode.apply(null, slice as any);
+      index += CHUNK_SIZE;
+    }
+    return btoa(result);
+  }
+};
+
 export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
   constructor(CanvasKit: CanvasKit, ref: Image) {
     super(CanvasKit, ref, "Image");
@@ -83,6 +107,6 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   encodeToBase64(fmt?: ImageFormat, quality?: number) {
     const bytes = this.encodeToBytes(fmt, quality);
-    return btoa(String.fromCharCode(...bytes));
+    return toBase64String(bytes);
   }
 }

package/src/skia/web/JsiSkSurface.ts

@@ -15,6 +15,10 @@ export class JsiSkSurface
     super(CanvasKit, ref, "Surface");
   }
 
+  flush() {
+    this.ref.flush();
+  }
+
   getCanvas(): SkCanvas {
     return new JsiSkCanvas(this.CanvasKit, this.ref.getCanvas());
   }

package/src/skia/web/JsiSkSurfaceFactory.ts

@@ -1,4 +1,4 @@
-import type { CanvasKit } from "canvaskit-wasm";
+import type { CanvasKit, Surface } from "canvaskit-wasm";
 
 import type { SurfaceFactory } from "../types";
 
@@ -13,7 +13,26 @@ export class JsiSkSurfaceFactory extends Host implements SurfaceFactory {
   Make(width: number, height: number) {
     const surface = this.CanvasKit.MakeSurface(width, height);
     if (!surface) {
-      throw new Error("Could not create surface");
+      return null;
+    }
+    return new JsiSkSurface(this.CanvasKit, surface);
+  }
+
+  MakeOffscreen(width: number, height: number) {
+    // OffscreenCanvas may be unvailable in some environments.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const OC = (globalThis as any).OffscreenCanvas;
+    let surface: Surface | null;
+    if (OC === undefined) {
+      surface = this.CanvasKit.MakeSurface(width, height);
+    } else {
+      const offscreen = new OC(width, height);
+      surface = this.CanvasKit.MakeWebGLCanvasSurface(
+        offscreen as unknown as HTMLCanvasElement
+      );
+    }
+    if (!surface) {
+      return null;
     }
     return new JsiSkSurface(this.CanvasKit, surface);
   }

package/src/views/SkiaBaseWebView.tsx

@@ -86,6 +86,9 @@ export abstract class SkiaBaseWebView<
    * @returns An Image object.
    */
   public makeImageSnapshot(rect?: SkRect) {
+    this._canvas!.clear(CanvasKit.TRANSPARENT);
+    this.renderInCanvas(this._canvas!, []);
+    this._surface?.ref.flush();
     return this._surface?.makeImageSnapshot(rect);
   }
 
@@ -106,8 +109,12 @@ export abstract class SkiaBaseWebView<
       if (this._canvas) {
         const touches = [...this._touches];
         this._touches = [];
-        this._canvas!.clear(CanvasKit.TRANSPARENT);
-        this.renderInCanvas(this._canvas!, touches);
+        const canvas = this._canvas!;
+        canvas.clear(Float32Array.of(0, 0, 0, 0));
+        canvas.save();
+        canvas.scale(pd, pd);
+        this.renderInCanvas(canvas, touches);
+        canvas.restore();
         this._surface?.ref.flush();
       }
     }

package/src/views/SkiaDomView.web.tsx

@@ -1,13 +1,10 @@
-import { PixelRatio } from "react-native";
-
 import { Skia } from "../skia";
 import type { SkCanvas } from "../skia/types";
+import { JsiDrawingContext } from "../dom/types/DrawingContext";
 
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 import type { SkiaDomViewProps, TouchInfo } from "./types";
 
-const pd = PixelRatio.get();
-
 export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
   constructor(props: SkiaDomViewProps) {
     super(props);
@@ -22,16 +19,8 @@ export class SkiaDomView extends SkiaBaseWebView<SkiaDomViewProps> {
       this.props.onSize.current = { width, height };
     }
     if (this.props.root) {
-      const paint = Skia.Paint();
-      const ctx = {
-        canvas,
-        paint,
-        opacity: 1,
-      };
-      canvas.save();
-      canvas.scale(pd, pd);
+      const ctx = new JsiDrawingContext(Skia, canvas);
       this.props.root.render(ctx);
-      canvas.restore();
     }
   }
 }

package/src/views/SkiaPictureView.web.tsx

@@ -1,12 +1,8 @@
-import { PixelRatio } from "react-native";
-
 import type { SkCanvas } from "../skia/types";
 
 import type { SkiaPictureViewProps } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 
-const pd = PixelRatio.get();
-
 export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
   constructor(props: SkiaPictureViewProps) {
     super(props);
@@ -14,10 +10,7 @@ export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewProps> {
 
   protected renderInCanvas(canvas: SkCanvas): void {
     if (this.props.picture) {
-      canvas.save();
-      canvas.scale(pd, pd);
       canvas.drawPicture(this.props.picture);
-      canvas.restore();
     }
   }
 }

package/src/views/SkiaView.web.tsx

@@ -1,12 +1,8 @@
-import { PixelRatio } from "react-native";
-
 import type { SkCanvas } from "../skia/types";
 
 import type { DrawingInfo, SkiaDrawViewProps, TouchInfo } from "./types";
 import { SkiaBaseWebView } from "./SkiaBaseWebView";
 
-const pd = PixelRatio.get();
-
 export class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
   constructor(props: SkiaDrawViewProps) {
     super(props);
@@ -20,10 +16,7 @@ export class SkiaView extends SkiaBaseWebView<SkiaDrawViewProps> {
         timestamp: Date.now(),
         touches: touches.map((t) => [t]),
       };
-      canvas.save();
-      canvas.scale(pd, pd);
       this.props.onDraw(canvas, info);
-      canvas.restore();
     }
   }
 }