@shopify/react-native-skia 2.2.9 → 2.2.10

package/src/renderer/__tests__/e2e/ParagraphMethods.spec.tsx

@@ -11,109 +11,109 @@ const RobotoRegular = Array.from(
 
 describe("Paragraph Methods", () => {
   describe("getRectsForPlaceholders", () => {
-  it("should handle multiple placeholders with different alignments", async () => {
-    const placeholderRects = await surface.eval(
-      (Skia, ctx) => {
-        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
-          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
-        )!;
-        const provider = Skia.TypefaceFontProvider.Make();
-        provider.registerFont(robotoRegular, "Roboto");
-
-        const builder = Skia.ParagraphBuilder.Make(
-          {
-            textStyle: {
-              color: Skia.Color("black"),
-              fontFamilies: ["Roboto"],
-              fontSize: 16,
+    it("should handle multiple placeholders with different alignments", async () => {
+      const placeholderRects = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
             },
-          },
-          provider
-        );
-
-        builder.addText("Start ");
-        builder.addPlaceholder(
-          20,
-          20,
-          ctx.PlaceholderAlignment.Baseline,
-          ctx.TextBaseline.Alphabetic
-        );
-        builder.addText(" middle ");
-        builder.addPlaceholder(
-          15,
-          15,
-          ctx.PlaceholderAlignment.Top,
-          ctx.TextBaseline.Alphabetic
-        );
-        builder.addText(" end");
-
-        const paragraph = builder.build();
-        paragraph.layout(200);
-
-        const rects = paragraph.getRectsForPlaceholders();
-        return rects.map((r) => ({
-          x: r.rect.x,
-          y: r.rect.y,
-          width: r.rect.width,
-          height: r.rect.height,
-          direction: r.direction,
-        }));
-      },
-      {
-        RobotoRegular,
-        PlaceholderAlignment,
-        TextBaseline,
-      }
-    );
-
-    expect(placeholderRects).toHaveLength(2);
-    expect(placeholderRects[0].width).toBe(20);
-    expect(placeholderRects[0].height).toBe(20);
-    expect(placeholderRects[1].width).toBeCloseTo(15);
-    expect(placeholderRects[1].height).toBeCloseTo(15);
-  });
+            provider
+          );
 
-  it("should return correct direction for placeholders", async () => {
-    const placeholderInfo = await surface.eval(
-      (Skia, ctx) => {
-        const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
-          Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
-        )!;
-        const provider = Skia.TypefaceFontProvider.Make();
-        provider.registerFont(robotoRegular, "Roboto");
-
-        const builder = Skia.ParagraphBuilder.Make(
-          {
-            textStyle: {
-              color: Skia.Color("black"),
-              fontFamilies: ["Roboto"],
-              fontSize: 16,
+          builder.addText("Start ");
+          builder.addPlaceholder(
+            20,
+            20,
+            ctx.PlaceholderAlignment.Baseline,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" middle ");
+          builder.addPlaceholder(
+            15,
+            15,
+            ctx.PlaceholderAlignment.Top,
+            ctx.TextBaseline.Alphabetic
+          );
+          builder.addText(" end");
+
+          const paragraph = builder.build();
+          paragraph.layout(200);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            x: r.rect.x,
+            y: r.rect.y,
+            width: r.rect.width,
+            height: r.rect.height,
+            direction: r.direction,
+          }));
+        },
+        {
+          RobotoRegular,
+          PlaceholderAlignment,
+          TextBaseline,
+        }
+      );
+
+      expect(placeholderRects).toHaveLength(2);
+      expect(placeholderRects[0].width).toBe(20);
+      expect(placeholderRects[0].height).toBe(20);
+      expect(placeholderRects[1].width).toBeCloseTo(15);
+      expect(placeholderRects[1].height).toBeCloseTo(15);
+    });
+
+    it("should return correct direction for placeholders", async () => {
+      const placeholderInfo = await surface.eval(
+        (Skia, ctx) => {
+          const robotoRegular = Skia.Typeface.MakeFreeTypeFaceFromData(
+            Skia.Data.fromBytes(new Uint8Array(ctx.RobotoRegular))
+          )!;
+          const provider = Skia.TypefaceFontProvider.Make();
+          provider.registerFont(robotoRegular, "Roboto");
+
+          const builder = Skia.ParagraphBuilder.Make(
+            {
+              textStyle: {
+                color: Skia.Color("black"),
+                fontFamilies: ["Roboto"],
+                fontSize: 16,
+              },
             },
-          },
-          provider
-        );
-
-        builder.addText("Text with ");
-        builder.addPlaceholder(30, 30);
-        builder.addText(" placeholder");
-
-        const paragraph = builder.build();
-        paragraph.layout(300);
-
-        const rects = paragraph.getRectsForPlaceholders();
-        return rects.map((r) => ({
-          direction: r.direction === ctx.TextDirection.LTR ? "LTR" : "RTL",
-        }));
-      },
-      {
-        RobotoRegular,
-        TextDirection,
-      }
-    );
-
-    expect(placeholderInfo).toHaveLength(1);
-    expect(placeholderInfo[0].direction).toBe("LTR");
-  });
+            provider
+          );
+
+          builder.addText("Text with ");
+          builder.addPlaceholder(30, 30);
+          builder.addText(" placeholder");
+
+          const paragraph = builder.build();
+          paragraph.layout(300);
+
+          const rects = paragraph.getRectsForPlaceholders();
+          return rects.map((r) => ({
+            direction: r.direction === ctx.TextDirection.LTR ? "LTR" : "RTL",
+          }));
+        },
+        {
+          RobotoRegular,
+          TextDirection,
+        }
+      );
+
+      expect(placeholderInfo).toHaveLength(1);
+      expect(placeholderInfo[0].direction).toBe("LTR");
+    });
 
     it("should return empty array when no placeholders", async () => {
       const placeholderCount = await surface.eval(
@@ -194,7 +194,7 @@ describe("Paragraph Methods", () => {
       expect(lineMetrics[0].ascent).toBeGreaterThan(0);
       expect(lineMetrics[0].descent).toBeGreaterThan(0);
       // Note: Even single lines without explicit breaks may report isHardBreak as true
-      expect(typeof lineMetrics[0].isHardBreak).toBe('boolean');
+      expect(typeof lineMetrics[0].isHardBreak).toBe("boolean");
     });
 
     it("should return line metrics for multi-line text with wrapping", async () => {
@@ -232,12 +232,12 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics.length).toBeGreaterThan(1);
-      
+
       // Check first line
       expect(lineMetrics[0].lineNumber).toBe(0);
       expect(lineMetrics[0].startIndex).toBe(0);
       expect(lineMetrics[0].width).toBeLessThanOrEqual(100);
-      
+
       // Check second line
       expect(lineMetrics[1].lineNumber).toBe(1);
       expect(lineMetrics[1].startIndex).toBeGreaterThan(0);
@@ -277,12 +277,12 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(3);
-      
+
       // All lines report isHardBreak as true in this implementation
       expect(lineMetrics[0].isHardBreak).toBe(true);
       expect(lineMetrics[1].isHardBreak).toBe(true);
       expect(lineMetrics[2].isHardBreak).toBe(true);
-      
+
       // Check line numbers
       expect(lineMetrics[0].lineNumber).toBe(0);
       expect(lineMetrics[1].lineNumber).toBe(1);
@@ -322,19 +322,24 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(2);
-      
+
       // First line
       const firstLine = lineMetrics[0];
       // Height should be close to ascent + descent
       expect(firstLine.height).toBeGreaterThan(0);
-      expect(Math.abs(firstLine.height - (firstLine.ascent + firstLine.descent))).toBeLessThan(1);
+      expect(
+        Math.abs(firstLine.height - (firstLine.ascent + firstLine.descent))
+      ).toBeLessThan(1);
       expect(firstLine.left).toBe(0);
       expect(firstLine.baseline).toBeGreaterThan(0);
-      
+
       // Second line should be below the first
       const secondLine = lineMetrics[1];
       expect(secondLine.baseline).toBeGreaterThan(firstLine.baseline);
-      expect(secondLine.baseline - firstLine.baseline).toBeCloseTo(firstLine.height, 1);
+      expect(secondLine.baseline - firstLine.baseline).toBeCloseTo(
+        firstLine.height,
+        1
+      );
     });
 
     it("should handle empty lines correctly", async () => {
@@ -370,7 +375,7 @@ describe("Paragraph Methods", () => {
       );
 
       expect(lineMetrics).toHaveLength(3);
-      
+
       // Middle line should be empty but still have metrics
       const emptyLine = lineMetrics[1];
       // Empty line might have startIndex != endIndex depending on implementation

package/src/specs/NativeSkiaModule.web.ts

@@ -1,19 +1,19 @@
 /* eslint-disable import/no-anonymous-default-export */
 import type { SkPicture, SkRect } from "../skia/types";
 import type { ISkiaViewApi } from "../views/types";
-import type { SkiaPictureView } from "../views/SkiaPictureView.web";
+import type { SkiaPictureViewHandle } from "../views/SkiaPictureView.web";
 
 export type ISkiaViewApiWeb = ISkiaViewApi & {
-  views: Record<string, SkiaPictureView>;
+  views: Record<string, SkiaPictureViewHandle>;
   deferedPictures: Record<string, SkPicture>;
-  registerView(nativeId: string, view: SkiaPictureView): void;
+  registerView(nativeId: string, view: SkiaPictureViewHandle): void;
 };
 
 global.SkiaViewApi = {
   views: {},
   deferedPictures: {},
   web: true,
-  registerView(nativeId: string, view: SkiaPictureView) {
+  registerView(nativeId: string, view: SkiaPictureViewHandle) {
     // Maybe a picture for this view was already set
     if (this.deferedPictures[nativeId]) {
       view.setPicture(this.deferedPictures[nativeId] as SkPicture);

package/src/views/SkiaPictureView.web.tsx

@@ -1,31 +1,325 @@
-import type { SkCanvas, SkPicture } from "../skia/types";
+/* global HTMLCanvasElement */
+import React, {
+  useRef,
+  useEffect,
+  useCallback,
+  useImperativeHandle,
+  forwardRef,
+} from "react";
+import type { LayoutChangeEvent } from "react-native";
+
+import type { SkRect, SkPicture, SkImage } from "../skia/types";
+import { JsiSkSurface } from "../skia/web/JsiSkSurface";
+import { Platform } from "../Platform";
 import type { ISkiaViewApiWeb } from "../specs/NativeSkiaModule.web";
 
 import type { SkiaPictureViewNativeProps } from "./types";
-import { SkiaBaseWebView } from "./SkiaBaseWebView";
+import { SkiaViewNativeId } from "./SkiaViewNativeId";
+
+interface Renderer {
+  onResize(): void;
+  draw(picture: SkPicture): void;
+  makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage | null;
+  dispose(): void;
+}
+
+class WebGLRenderer implements Renderer {
+  private surface: JsiSkSurface | null = null;
+
+  constructor(private canvas: HTMLCanvasElement, private pd: number) {
+    this.onResize();
+  }
+
+  makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage | null {
+    if (!this.surface) {
+      return null;
+    }
+    const canvas = this.surface.getCanvas();
+    canvas!.clear(CanvasKit.TRANSPARENT);
+    this.draw(picture);
+    this.surface.ref.flush();
+    return this.surface.makeImageSnapshot(rect);
+  }
+
+  onResize() {
+    const { canvas, pd } = this;
+    canvas.width = canvas.clientWidth * pd;
+    canvas.height = canvas.clientHeight * pd;
+    const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);
+    const ctx = canvas.getContext("webgl2");
+    if (ctx) {
+      ctx.drawingBufferColorSpace = "display-p3";
+    }
+    if (!surface) {
+      throw new Error("Could not create surface");
+    }
+    this.surface = new JsiSkSurface(CanvasKit, surface);
+  }
+
+  draw(picture: SkPicture) {
+    if (this.surface) {
+      const canvas = this.surface.getCanvas();
+      canvas.clear(Float32Array.of(0, 0, 0, 0));
+      canvas.save();
+      canvas.scale(pd, pd);
+      canvas.drawPicture(picture);
+      canvas.restore();
+      this.surface.ref.flush();
+    }
+  }
 
-export class SkiaPictureView extends SkiaBaseWebView<SkiaPictureViewNativeProps> {
-  private picture: SkPicture | null = null;
+  dispose(): void {
+    if (this.surface) {
+      this.canvas
+        ?.getContext("webgl2")
+        ?.getExtension("WEBGL_lose_context")
+        ?.loseContext();
+      this.surface.ref.delete();
+      this.surface = null;
+    }
+  }
+}
+
+class StaticWebGLRenderer implements Renderer {
+  private cachedImage: SkImage | null = null;
+
+  constructor(private canvas: HTMLCanvasElement, private pd: number) {}
+
+  onResize(): void {
+    this.cachedImage = null;
+  }
+
+  private renderPictureToSurface(
+    picture: SkPicture
+  ): { surface: JsiSkSurface; tempCanvas: OffscreenCanvas } | null {
+    const tempCanvas = new OffscreenCanvas(
+      this.canvas.clientWidth * this.pd,
+      this.canvas.clientHeight * this.pd
+    );
+
+    let surface: JsiSkSurface | null = null;
+
+    try {
+      const webglSurface = CanvasKit.MakeWebGLCanvasSurface(tempCanvas);
+      const ctx = tempCanvas.getContext("webgl2");
+      if (ctx) {
+        ctx.drawingBufferColorSpace = "display-p3";
+      }
+
+      if (!webglSurface) {
+        throw new Error("Could not create WebGL surface");
+      }
+
+      surface = new JsiSkSurface(CanvasKit, webglSurface);
+
+      const skiaCanvas = surface.getCanvas();
+      skiaCanvas.clear(Float32Array.of(0, 0, 0, 0));
+      skiaCanvas.save();
+      skiaCanvas.scale(this.pd, this.pd);
+      skiaCanvas.drawPicture(picture);
+      skiaCanvas.restore();
+      surface.ref.flush();
+
+      return { surface, tempCanvas };
+    } catch (error) {
+      if (surface) {
+        surface.ref.delete();
+      }
+      this.cleanupWebGLContext(tempCanvas);
+      return null;
+    }
+  }
 
-  constructor(props: SkiaPictureViewNativeProps) {
-    super(props);
-    const { nativeID } = props;
-    if (!nativeID) {
-      throw new Error("SkiaPictureView requires a nativeID prop");
+  private cleanupWebGLContext(tempCanvas: OffscreenCanvas): void {
+    const ctx = tempCanvas.getContext("webgl2");
+    if (ctx) {
+      const loseContext = ctx.getExtension("WEBGL_lose_context");
+      if (loseContext) {
+        loseContext.loseContext();
+      }
     }
-    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, this);
   }
 
-  public setPicture(picture: SkPicture) {
-    this.picture = picture;
-    this.redraw();
+  draw(picture: SkPicture): void {
+    const renderResult = this.renderPictureToSurface(picture);
+    if (!renderResult) {
+      return;
+    }
+    const { tempCanvas } = renderResult;
+    const ctx2d = this.canvas.getContext("2d");
+    if (!ctx2d) {
+      throw new Error("Could not get 2D context");
+    }
+
+    // Set canvas dimensions to match pixel density
+    this.canvas.width = this.canvas.clientWidth * this.pd;
+    this.canvas.height = this.canvas.clientHeight * this.pd;
+
+    // Draw the tempCanvas scaled down to the display size
+    ctx2d.drawImage(
+      tempCanvas,
+      0,
+      0,
+      tempCanvas.width,
+      tempCanvas.height,
+      0,
+      0,
+      this.canvas.clientWidth * this.pd,
+      this.canvas.clientHeight * this.pd
+    );
+
+    this.cleanupWebGLContext(tempCanvas);
   }
 
-  protected renderInCanvas(canvas: SkCanvas): void {
-    if (this.props.picture) {
-      canvas.drawPicture(this.props.picture);
-    } else if (this.picture) {
-      canvas.drawPicture(this.picture);
+  makeImageSnapshot(picture: SkPicture, rect?: SkRect): SkImage | null {
+    if (!this.cachedImage) {
+      const renderResult = this.renderPictureToSurface(picture);
+      if (!renderResult) {
+        return null;
+      }
+
+      const { surface, tempCanvas } = renderResult;
+
+      try {
+        this.cachedImage = surface.makeImageSnapshot(rect);
+      } catch (error) {
+        console.error("Error creating image snapshot:", error);
+      } finally {
+        surface.ref.delete();
+        this.cleanupWebGLContext(tempCanvas);
+      }
     }
+
+    return this.cachedImage;
+  }
+
+  dispose(): void {
+    this.cachedImage?.dispose();
+    this.cachedImage = null;
   }
 }
+
+const pd = Platform.PixelRatio;
+
+export interface SkiaPictureViewHandle {
+  setPicture(picture: SkPicture): void;
+  getSize(): { width: number; height: number };
+  redraw(): void;
+  makeImageSnapshot(rect?: SkRect): SkImage | null;
+}
+
+export const SkiaPictureView = forwardRef<
+  SkiaPictureViewHandle,
+  SkiaPictureViewNativeProps
+>((props, ref) => {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const renderer = useRef<Renderer | null>(null);
+  const redrawRequestsRef = useRef(0);
+  const requestIdRef = useRef(0);
+  const pictureRef = useRef<SkPicture | null>(null);
+
+  const { picture, onLayout } = props;
+
+  const redraw = useCallback(() => {
+    redrawRequestsRef.current++;
+  }, []);
+
+  const getSize = useCallback(() => {
+    return {
+      width: canvasRef.current?.clientWidth || 0,
+      height: canvasRef.current?.clientHeight || 0,
+    };
+  }, []);
+
+  const setPicture = useCallback(
+    (newPicture: SkPicture) => {
+      pictureRef.current = newPicture;
+      redraw();
+    },
+    [redraw]
+  );
+
+  const makeImageSnapshot = useCallback((rect?: SkRect) => {
+    if (renderer.current && pictureRef.current) {
+      return renderer.current.makeImageSnapshot(pictureRef.current, rect);
+    }
+    return null;
+  }, []);
+
+  const tick = useCallback(() => {
+    if (redrawRequestsRef.current > 0) {
+      redrawRequestsRef.current = 0;
+      if (renderer.current && pictureRef.current) {
+        renderer.current.draw(pictureRef.current);
+      }
+    }
+    requestIdRef.current = requestAnimationFrame(tick);
+  }, []);
+
+  const onLayoutEvent = useCallback(
+    (evt: LayoutChangeEvent) => {
+      const canvas = canvasRef.current;
+      if (canvas) {
+        renderer.current =
+          props.__destroyWebGLContextAfterRender === true
+            ? new StaticWebGLRenderer(canvas, pd)
+            : new WebGLRenderer(canvas, pd);
+        if (pictureRef.current) {
+          renderer.current.draw(pictureRef.current);
+        }
+      }
+      if (onLayout) {
+        onLayout(evt);
+      }
+    },
+    [onLayout, props.__destroyWebGLContextAfterRender]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      setPicture,
+      getSize,
+      redraw,
+      makeImageSnapshot,
+    }),
+    [setPicture, getSize, redraw, makeImageSnapshot]
+  );
+
+  useEffect(() => {
+    const nativeID = props.nativeID ?? `${SkiaViewNativeId.current++}`;
+    (global.SkiaViewApi as ISkiaViewApiWeb).registerView(nativeID, {
+      setPicture,
+      getSize,
+      redraw,
+      makeImageSnapshot,
+    } as SkiaPictureViewHandle);
+    if (props.picture) {
+      setPicture(props.picture);
+    }
+  }, [setPicture, getSize, redraw, makeImageSnapshot, props]);
+
+  useEffect(() => {
+    tick();
+    return () => {
+      cancelAnimationFrame(requestIdRef.current);
+      if (renderer.current) {
+        renderer.current.dispose();
+        renderer.current = null;
+      }
+    };
+  }, [tick]);
+
+  useEffect(() => {
+    if (renderer.current && pictureRef.current) {
+      renderer.current.draw(pictureRef.current);
+    }
+  }, [picture, redraw]);
+
+  const { debug = false, ...viewProps } = props;
+  return (
+    <Platform.View {...viewProps} onLayout={onLayoutEvent}>
+      <canvas ref={canvasRef} style={{ display: "flex", flex: 1 }} />
+    </Platform.View>
+  );
+});

package/src/views/types.ts

@@ -31,6 +31,10 @@ export interface SkiaBaseViewProps extends ViewProps {
   onSize?: SharedValue<SkSize>;
 
   opaque?: boolean;
+
+  // On web, only 16 WebGL contextes are allowed. If the drawing is non-animated, set
+  // __destroyWebGLContextAfterRender to true to release the context after each draw.
+  __destroyWebGLContextAfterRender?: boolean;
 }
 
 export interface SkiaPictureViewNativeProps extends SkiaBaseViewProps {