@shopify/react-native-skia 2.6.8 → 2.7.0

package/lib/module/views/SkiaPictureView.web.js

@@ -1,9 +1,8 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-/* global HTMLCanvasElement */
-import React, { useRef, useEffect, useCallback, useImperativeHandle } from "react";
+/* global HTMLCanvasElement, ResizeObserver, MediaQueryList */
+import React, { useRef, useEffect, useCallback, useImperativeHandle, useLayoutEffect } from "react";
 import { JsiSkSurface } from "../skia/web/JsiSkSurface";
 import { Platform } from "../Platform";
 import { SkiaViewNativeId } from "./SkiaViewNativeId";
@@ -19,10 +18,26 @@ const dp2Pixel = (pd, rect) => {
   };
 };
 class WebGLRenderer {
-  constructor(canvas, pd) {
+  constructor(canvas) {
     this.canvas = canvas;
-    this.pd = pd;
     _defineProperty(this, "surface", null);
+    _defineProperty(this, "grContext", null);
+    _defineProperty(this, "contextHandle", 0);
+    _defineProperty(this, "pd", 1);
+    this.contextHandle = CanvasKit.GetWebGLContext(canvas);
+    if (!this.contextHandle) {
+      throw new Error("Could not create a WebGL context");
+    }
+    this.grContext = CanvasKit.MakeWebGLContext(this.contextHandle);
+    if (!this.grContext) {
+      CanvasKit.deleteContext(this.contextHandle);
+      this.contextHandle = 0;
+      throw new Error("Could not create a graphics context");
+    }
+    const ctx = canvas.getContext("webgl2");
+    if (ctx) {
+      ctx.drawingBufferColorSpace = "display-p3";
+    }
     this.onResize();
   }
   makeImageSnapshot(picture, rect) {
@@ -36,17 +51,26 @@ class WebGLRenderer {
     return this.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
   }
   onResize() {
+    var _this$surface;
     const {
-      canvas,
-      pd
+      canvas
     } = 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 (!this.grContext) {
+      return;
+    }
+    this.pd = window.devicePixelRatio;
+    canvas.width = canvas.clientWidth * this.pd;
+    canvas.height = canvas.clientHeight * this.pd;
+    (_this$surface = this.surface) === null || _this$surface === void 0 || _this$surface.ref.delete();
+    this.surface = null;
+    if (canvas.width === 0 || canvas.height === 0) {
+      // The canvas hasn't been laid out yet (or is hidden). The view's
+      // ResizeObserver calls us again as soon as it has a size.
+      return;
     }
+    // Reuse the existing WebGL context and GrDirectContext: only the surface
+    // needs to be recreated when the canvas is resized.
+    const surface = CanvasKit.MakeOnScreenGLSurface(this.grContext, canvas.width, canvas.height, CanvasKit.ColorSpace.SRGB);
     if (!surface) {
       throw new Error("Could not create surface");
     }
@@ -57,39 +81,68 @@ class WebGLRenderer {
       const canvas = this.surface.getCanvas();
       canvas.clear(Float32Array.of(0, 0, 0, 0));
       canvas.save();
-      canvas.scale(pd, pd);
+      canvas.scale(this.pd, this.pd);
       canvas.drawPicture(picture);
       canvas.restore();
       this.surface.ref.flush();
     }
   }
   dispose() {
-    if (this.surface) {
-      var _this$canvas;
-      (_this$canvas = this.canvas) === null || _this$canvas === void 0 || (_this$canvas = _this$canvas.getContext("webgl2")) === null || _this$canvas === void 0 || (_this$canvas = _this$canvas.getExtension("WEBGL_lose_context")) === null || _this$canvas === void 0 || _this$canvas.loseContext();
-      this.surface.ref.delete();
-      this.surface = null;
+    var _this$surface2, _this$canvas;
+    (_this$surface2 = this.surface) === null || _this$surface2 === void 0 || _this$surface2.ref.delete();
+    this.surface = null;
+    if (this.grContext) {
+      this.grContext.releaseResourcesAndAbandonContext();
+      this.grContext.delete();
+      this.grContext = null;
+    }
+    (_this$canvas = this.canvas) === null || _this$canvas === void 0 || (_this$canvas = _this$canvas.getContext("webgl2")) === null || _this$canvas === void 0 || (_this$canvas = _this$canvas.getExtension("WEBGL_lose_context")) === null || _this$canvas === void 0 || _this$canvas.loseContext();
+    if (this.contextHandle) {
+      // Unregister the context from CanvasKit's internal registry, otherwise
+      // it retains the canvas element (and its detached DOM tree) forever.
+      CanvasKit.deleteContext(this.contextHandle);
+      // Making the now-deleted handle current clears CanvasKit's
+      // current-context globals (GLctx/Module.ctx), which would otherwise
+      // keep referencing the context (and the canvas) until another surface
+      // becomes current. With a deleted handle this is a no-op that returns
+      // null without creating anything.
+      CanvasKit.MakeWebGLContext(this.contextHandle);
+      this.contextHandle = 0;
     }
   }
 }
 class StaticWebGLRenderer {
-  constructor(canvas, pd) {
+  constructor(canvas) {
     this.canvas = canvas;
-    this.pd = pd;
     _defineProperty(this, "cachedImage", null);
+    _defineProperty(this, "pd", 1);
   }
   onResize() {
     this.cachedImage = null;
   }
   renderPictureToSurface(picture) {
+    this.pd = window.devicePixelRatio;
+    if (this.canvas.clientWidth === 0 || this.canvas.clientHeight === 0) {
+      return null;
+    }
     const tempCanvas = new OffscreenCanvas(this.canvas.clientWidth * this.pd, this.canvas.clientHeight * this.pd);
     let surface = null;
+    let grContext = null;
+    let contextHandle = 0;
     try {
-      const webglSurface = CanvasKit.MakeWebGLCanvasSurface(tempCanvas);
+      contextHandle = CanvasKit.GetWebGLContext(tempCanvas);
+      if (!contextHandle) {
+        throw new Error("Could not create a WebGL context");
+      }
+      grContext = CanvasKit.MakeWebGLContext(contextHandle);
+      if (!grContext) {
+        throw new Error("Could not create a graphics context");
+      }
       const ctx = tempCanvas.getContext("webgl2");
       if (ctx) {
         ctx.drawingBufferColorSpace = "display-p3";
       }
+      const webglSurface = CanvasKit.MakeOnScreenGLSurface(grContext, tempCanvas.width, tempCanvas.height, CanvasKit.ColorSpace.SRGB);
       if (!webglSurface) {
         throw new Error("Could not create WebGL surface");
       }
@@ -103,23 +156,34 @@ class StaticWebGLRenderer {
       surface.ref.flush();
       return {
         surface,
-        tempCanvas
+        tempCanvas,
+        grContext,
+        contextHandle
       };
     } catch (error) {
-      if (surface) {
-        surface.ref.delete();
-      }
-      this.cleanupWebGLContext(tempCanvas);
+      this.cleanupRenderResult({
+        surface,
+        tempCanvas,
+        grContext,
+        contextHandle
+      });
       return null;
     }
   }
-  cleanupWebGLContext(tempCanvas) {
-    const ctx = tempCanvas.getContext("webgl2");
-    if (ctx) {
-      const loseContext = ctx.getExtension("WEBGL_lose_context");
-      if (loseContext) {
-        loseContext.loseContext();
-      }
+  cleanupRenderResult(result) {
+    var _result$surface, _result$tempCanvas$ge;
+    (_result$surface = result.surface) === null || _result$surface === void 0 || _result$surface.ref.delete();
+    if (result.grContext) {
+      result.grContext.releaseResourcesAndAbandonContext();
+      result.grContext.delete();
+    }
+    (_result$tempCanvas$ge = result.tempCanvas.getContext("webgl2")) === null || _result$tempCanvas$ge === void 0 || (_result$tempCanvas$ge = _result$tempCanvas$ge.getExtension("WEBGL_lose_context")) === null || _result$tempCanvas$ge === void 0 || _result$tempCanvas$ge.loseContext();
+    if (result.contextHandle) {
+      // Unregister the context from CanvasKit's internal registry, otherwise
+      // it retains the OffscreenCanvas forever.
+      CanvasKit.deleteContext(result.contextHandle);
+      // Clear CanvasKit's current-context globals (see WebGLRenderer.dispose).
+      CanvasKit.MakeWebGLContext(result.contextHandle);
     }
   }
   draw(picture) {
@@ -132,6 +196,7 @@ class StaticWebGLRenderer {
     } = renderResult;
     const ctx2d = this.canvas.getContext("2d");
     if (!ctx2d) {
+      this.cleanupRenderResult(renderResult);
       throw new Error("Could not get 2D context");
     }
 
@@ -141,7 +206,7 @@ class StaticWebGLRenderer {
 
     // 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);
+    this.cleanupRenderResult(renderResult);
   }
   makeImageSnapshot(picture, rect) {
     if (!this.cachedImage) {
@@ -149,17 +214,12 @@ class StaticWebGLRenderer {
       if (!renderResult) {
         return null;
       }
-      const {
-        surface,
-        tempCanvas
-      } = renderResult;
       try {
-        this.cachedImage = surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
+        this.cachedImage = renderResult.surface.makeImageSnapshot(dp2Pixel(this.pd, rect));
       } catch (error) {
         console.error("Error creating image snapshot:", error);
       } finally {
-        surface.ref.delete();
-        this.cleanupWebGLContext(tempCanvas);
+        this.cleanupRenderResult(renderResult);
       }
     }
     return this.cachedImage;
@@ -170,23 +230,87 @@ class StaticWebGLRenderer {
     this.cachedImage = null;
   }
 }
-const pd = Platform.PixelRatio;
+
+// Mirrors the event react-native-web synthesizes for onLayout.
+const makeLayoutEvent = (x, y, width, height) => ({
+  timeStamp: Date.now(),
+  nativeEvent: {
+    layout: {
+      x,
+      y,
+      width,
+      height
+    }
+  },
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  currentTarget: 0,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  target: 0,
+  bubbles: false,
+  cancelable: false,
+  defaultPrevented: false,
+  eventPhase: 0,
+  isDefaultPrevented() {
+    throw new Error("Method not supported on web.");
+  },
+  isPropagationStopped() {
+    throw new Error("Method not supported on web.");
+  },
+  persist() {
+    throw new Error("Method not supported on web.");
+  },
+  preventDefault() {
+    throw new Error("Method not supported on web.");
+  },
+  stopPropagation() {
+    throw new Error("Method not supported on web.");
+  },
+  isTrusted: true,
+  type: ""
+});
 export const SkiaPictureView = props => {
   const {
-    ref
-  } = props;
-  const canvasRef = useRef(null);
-  const renderer = useRef(null);
-  const redrawRequestsRef = useRef(0);
-  const requestIdRef = useRef(0);
-  const pictureRef = useRef(null);
-  const {
+    ref,
     picture,
     onLayout
   } = props;
-  const redraw = useCallback(() => {
-    redrawRequestsRef.current++;
+  const canvasRef = useRef(null);
+  const rendererRef = useRef(null);
+  const pictureRef = useRef(null);
+  // The rendering lifecycle deliberately does not depend on layout events:
+  // - The renderer is created synchronously on mount (the canvas element is
+  //   guaranteed to exist in useLayoutEffect; a zero size at that point is
+  //   fine, the surface is created once the canvas is measurable).
+  // - Redraw requests coalesce into a single animation frame. A picture
+  //   dispatched before the canvas has a size stays in pictureRef (drawing
+  //   while unmeasured is a no-op) and is painted by the resize path below
+  //   once the canvas becomes measurable, so it is never lost.
+  // - A ResizeObserver on the canvas itself recreates the surface and repaints
+  //   synchronously (its callbacks run after layout, before paint), and is
+  //   also the source of the user-facing onLayout event.
+  const redrawPendingRef = useRef(false);
+  const frameRef = useRef(0);
+  const onLayoutRef = useRef(onLayout);
+  useLayoutEffect(() => {
+    onLayoutRef.current = onLayout;
+  }, [onLayout]);
+  const flushRedraw = useCallback(() => {
+    frameRef.current = 0;
+    if (redrawPendingRef.current && rendererRef.current && pictureRef.current) {
+      redrawPendingRef.current = false;
+      rendererRef.current.draw(pictureRef.current);
+    }
+    // If the renderer or picture isn't available yet, the request stays
+    // pending and is flushed by whichever arrives last.
   }, []);
+  const redraw = useCallback(() => {
+    redrawPendingRef.current = true;
+    if (frameRef.current === 0) {
+      frameRef.current = requestAnimationFrame(flushRedraw);
+    }
+  }, [flushRedraw]);
   const getSize = useCallback(() => {
     var _canvasRef$current, _canvasRef$current2;
     return {
@@ -199,8 +323,8 @@ export const SkiaPictureView = props => {
     redraw();
   }, [redraw]);
   const makeImageSnapshot = useCallback(rect => {
-    if (renderer.current && pictureRef.current) {
-      return renderer.current.makeImageSnapshot(pictureRef.current, rect);
+    if (rendererRef.current && pictureRef.current) {
+      return rendererRef.current.makeImageSnapshot(pictureRef.current, rect);
     }
     return null;
   }, []);
@@ -233,27 +357,98 @@ export const SkiaPictureView = props => {
       callback(x, y, rect.width, rect.height);
     }
   }, []);
-  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 => {
+  const isStatic = props.__destroyWebGLContextAfterRender === true;
+  useLayoutEffect(() => {
     const canvas = canvasRef.current;
-    if (canvas) {
-      renderer.current = props.__destroyWebGLContextAfterRender === true ? new StaticWebGLRenderer(canvas, pd) : new WebGLRenderer(canvas, pd);
+    if (!canvas) {
+      return undefined;
+    }
+    const renderer = isStatic ? new StaticWebGLRenderer(canvas) : new WebGLRenderer(canvas);
+    rendererRef.current = renderer;
+    const drawPicture = () => {
       if (pictureRef.current) {
-        renderer.current.draw(pictureRef.current);
+        redrawPendingRef.current = false;
+        renderer.draw(pictureRef.current);
       }
-    }
-    if (onLayout) {
-      onLayout(evt);
-    }
-  }, [onLayout, props.__destroyWebGLContextAfterRender]);
+    };
+
+    // The renderer constructor already sized the surface from the current
+    // layout, so the observer's initial delivery only repaints if the size
+    // changed in between.
+    let lastWidth = canvas.clientWidth;
+    let lastHeight = canvas.clientHeight;
+    let lastPixelDensity = window.devicePixelRatio;
+    const resizeIfNeeded = () => {
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
+      const pixelDensity = window.devicePixelRatio;
+      if (width === lastWidth && height === lastHeight && pixelDensity === lastPixelDensity) {
+        return;
+      }
+      lastWidth = width;
+      lastHeight = height;
+      lastPixelDensity = pixelDensity;
+      renderer.onResize();
+      drawPicture();
+    };
+    const observer = new ResizeObserver(entries => {
+      resizeIfNeeded();
+      const layoutHandler = onLayoutRef.current;
+      if (layoutHandler) {
+        const {
+          left,
+          top,
+          width,
+          height
+        } = entries[0].contentRect;
+        // setTimeout 0 is taken from react-native-web (UIManager)
+        setTimeout(() => layoutHandler(makeLayoutEvent(left, top, width, height)), 0);
+      }
+    });
+    observer.observe(canvas);
+
+    // A pixel-density change with no CSS size change (browser zoom, moving
+    // the window to another display) doesn't trigger the ResizeObserver:
+    // watch it via matchMedia, re-arming the query for each new density.
+    // This degrades gracefully where unsupported: without matchMedia or
+    // MediaQueryList.addEventListener (older Safari), or where the query
+    // never matches because the resolution feature is unknown (Safari < 16),
+    // density-only changes simply don't repaint — everything else still does.
+    let media = null;
+    const onPixelDensityChange = () => {
+      resizeIfNeeded();
+      watchPixelDensity();
+    };
+    const watchPixelDensity = () => {
+      var _media;
+      (_media = media) === null || _media === void 0 || _media.removeEventListener("change", onPixelDensityChange);
+      media = null;
+      if (typeof window.matchMedia === "function") {
+        const query = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
+        if (typeof query.addEventListener === "function") {
+          media = query;
+          media.addEventListener("change", onPixelDensityChange);
+        }
+      }
+    };
+    watchPixelDensity();
+
+    // Paint any picture that was dispatched before the renderer existed.
+    drawPicture();
+    return () => {
+      var _media2;
+      observer.disconnect();
+      (_media2 = media) === null || _media2 === void 0 || _media2.removeEventListener("change", onPixelDensityChange);
+      rendererRef.current = null;
+      renderer.dispose();
+    };
+  }, [isStatic]);
+  useEffect(() => {
+    return () => {
+      cancelAnimationFrame(frameRef.current);
+      frameRef.current = 0;
+    };
+  }, []);
   useImperativeHandle(ref, () => ({
     setPicture,
     getSize,
@@ -268,7 +463,8 @@ export const SkiaPictureView = props => {
   useEffect(() => {
     var _props$nativeID;
     const nativeID = (_props$nativeID = props.nativeID) !== null && _props$nativeID !== void 0 ? _props$nativeID : `${SkiaViewNativeId.current++}`;
-    global.SkiaViewApi.registerView(nativeID, {
+    const api = global.SkiaViewApi;
+    api.registerView(nativeID, {
       setPicture,
       getSize,
       redraw,
@@ -276,35 +472,24 @@ export const SkiaPictureView = props => {
       measure,
       measureInWindow
     });
-  }, [setPicture, getSize, redraw, makeImageSnapshot, measure, measureInWindow, props.nativeID]);
-  useEffect(() => {
-    if (props.picture) {
-      setPicture(props.picture);
-    }
-  }, [setPicture, props.picture]);
-  useEffect(() => {
-    tick();
     return () => {
-      cancelAnimationFrame(requestIdRef.current);
-      if (renderer.current) {
-        renderer.current.dispose();
-        renderer.current = null;
-      }
+      api.unregisterView(nativeID);
     };
-  }, [tick]);
+  }, [setPicture, getSize, redraw, makeImageSnapshot, measure, measureInWindow, props.nativeID]);
   useEffect(() => {
-    if (renderer.current && pictureRef.current) {
-      renderer.current.draw(pictureRef.current);
+    if (picture) {
+      setPicture(picture);
     }
-  }, [picture, redraw]);
+  }, [setPicture, picture]);
   const {
-    debug = false,
+    debug: _debug,
     ref: _ref,
+    onLayout: _onLayout,
+    picture: _picture,
+    __destroyWebGLContextAfterRender: _isStatic,
     ...viewProps
   } = props;
-  return /*#__PURE__*/React.createElement(Platform.View, _extends({}, viewProps, {
-    onLayout: onLayoutEvent
-  }), /*#__PURE__*/React.createElement("canvas", {
+  return /*#__PURE__*/React.createElement(Platform.View, viewProps, /*#__PURE__*/React.createElement("canvas", {
     ref: canvasRef,
     style: {
       display: "block",