@shopify/react-native-skia 2.2.9 → 2.2.11

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 {

package/lib/commonjs/views/SkiaBaseWebView.d.ts

@@ -1,40 +0,0 @@
-import React from "react";
-import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaBaseViewProps } from "./types";
-export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
-    constructor(props: TProps);
-    private _surface;
-    private _unsubscriptions;
-    private _canvas;
-    private _canvasRef;
-    private _redrawRequests;
-    private requestId;
-    protected width: number;
-    protected height: number;
-    private unsubscribeAll;
-    private onLayoutEvent;
-    getSize(): {
-        width: number;
-        height: number;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
-    /**
-     * Override to render
-     */
-    protected abstract renderInCanvas(canvas: SkCanvas): void;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    private tick;
-    redraw(): void;
-    private onLayout;
-    render(): React.JSX.Element;
-}

package/lib/commonjs/views/SkiaBaseWebView.js

@@ -1,143 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SkiaBaseWebView = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _JsiSkSurface = require("../skia/web/JsiSkSurface");
-var _Platform = require("../Platform");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-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 */
-const pd = _Platform.Platform.PixelRatio;
-class SkiaBaseWebView extends _react.default.Component {
-  constructor(props) {
-    super(props);
-    _defineProperty(this, "_surface", null);
-    _defineProperty(this, "_unsubscriptions", []);
-    _defineProperty(this, "_canvas", null);
-    _defineProperty(this, "_canvasRef", /*#__PURE__*/_react.default.createRef());
-    _defineProperty(this, "_redrawRequests", 0);
-    _defineProperty(this, "requestId", 0);
-    _defineProperty(this, "width", 0);
-    _defineProperty(this, "height", 0);
-    _defineProperty(this, "onLayout", this.onLayoutEvent.bind(this));
-  }
-  unsubscribeAll() {
-    this._unsubscriptions.forEach(u => u());
-    this._unsubscriptions = [];
-  }
-  onLayoutEvent(evt) {
-    const {
-      CanvasKit
-    } = global;
-    // Reset canvas / surface on layout change
-    const canvas = this._canvasRef.current;
-    if (canvas) {
-      this.width = canvas.clientWidth;
-      this.height = canvas.clientHeight;
-      canvas.width = this.width * pd;
-      canvas.height = this.height * 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.JsiSkSurface(CanvasKit, surface);
-      this._canvas = this._surface.getCanvas();
-      this.redraw();
-    }
-    // Call onLayout callback if it exists
-    if (this.props.onLayout) {
-      this.props.onLayout(evt);
-    }
-  }
-  getSize() {
-    return {
-      width: this.width,
-      height: this.height
-    };
-  }
-  componentDidMount() {
-    // Start render loop
-    this.tick();
-  }
-  componentDidUpdate() {
-    this.redraw();
-  }
-  componentWillUnmount() {
-    this.unsubscribeAll();
-    cancelAnimationFrame(this.requestId);
-    // eslint-disable-next-line max-len
-    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use
-    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context
-    // We delete the context, only if the context has been intialized
-    if (this._surface) {
-      var _this$_canvasRef$curr;
-      (_this$_canvasRef$curr = this._canvasRef.current) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getContext("webgl2")) === null || _this$_canvasRef$curr === void 0 || (_this$_canvasRef$curr = _this$_canvasRef$curr.getExtension("WEBGL_lose_context")) === null || _this$_canvasRef$curr === void 0 || _this$_canvasRef$curr.loseContext();
-    }
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  makeImageSnapshot(rect) {
-    var _this$_surface, _this$_surface2;
-    this._canvas.clear(CanvasKit.TRANSPARENT);
-    this.renderInCanvas(this._canvas);
-    (_this$_surface = this._surface) === null || _this$_surface === void 0 || _this$_surface.ref.flush();
-    return (_this$_surface2 = this._surface) === null || _this$_surface2 === void 0 ? void 0 : _this$_surface2.makeImageSnapshot(rect);
-  }
-
-  /**
-   * Override to render
-   */
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  tick() {
-    if (this._redrawRequests > 0) {
-      this._redrawRequests = 0;
-      if (this._canvas) {
-        var _this$_surface3;
-        const canvas = this._canvas;
-        canvas.clear(Float32Array.of(0, 0, 0, 0));
-        canvas.save();
-        canvas.scale(pd, pd);
-        this.renderInCanvas(canvas);
-        canvas.restore();
-        (_this$_surface3 = this._surface) === null || _this$_surface3 === void 0 || _this$_surface3.ref.flush();
-      }
-    }
-    this.requestId = requestAnimationFrame(this.tick.bind(this));
-  }
-  redraw() {
-    this._redrawRequests++;
-  }
-  render() {
-    const {
-      debug = false,
-      ...viewProps
-    } = this.props;
-    return /*#__PURE__*/_react.default.createElement(_Platform.Platform.View, _extends({}, viewProps, {
-      onLayout: this.onLayout
-    }), /*#__PURE__*/_react.default.createElement("canvas", {
-      ref: this._canvasRef,
-      style: {
-        display: "flex",
-        flex: 1
-      }
-    }));
-  }
-}
-exports.SkiaBaseWebView = SkiaBaseWebView;
-//# sourceMappingURL=SkiaBaseWebView.js.map

package/lib/commonjs/views/SkiaBaseWebView.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_JsiSkSurface","_Platform","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","pd","Platform","PixelRatio","SkiaBaseWebView","React","Component","constructor","props","createRef","onLayoutEvent","unsubscribeAll","_unsubscriptions","forEach","u","evt","CanvasKit","global","canvas","_canvasRef","current","width","clientWidth","height","clientHeight","surface","MakeWebGLCanvasSurface","ctx","getContext","drawingBufferColorSpace","Error","_surface","JsiSkSurface","_canvas","getCanvas","redraw","onLayout","getSize","componentDidMount","tick","componentDidUpdate","componentWillUnmount","cancelAnimationFrame","requestId","_this$_canvasRef$curr","getExtension","loseContext","makeImageSnapshot","rect","_this$_surface","_this$_surface2","clear","TRANSPARENT","renderInCanvas","ref","flush","_redrawRequests","_this$_surface3","Float32Array","of","save","scale","restore","requestAnimationFrame","render","debug","viewProps","createElement","View","style","display","flex","exports"],"sources":["SkiaBaseWebView.tsx"],"sourcesContent":["/* global HTMLCanvasElement */\nimport React from \"react\";\nimport type { LayoutChangeEvent } from \"react-native\";\n\nimport type { SkRect, SkCanvas } from \"../skia/types\";\nimport { JsiSkSurface } from \"../skia/web/JsiSkSurface\";\nimport { Platform } from \"../Platform\";\n\nimport type { SkiaBaseViewProps } from \"./types\";\n\nconst pd = Platform.PixelRatio;\n\nexport abstract class SkiaBaseWebView<\n  TProps extends SkiaBaseViewProps\n> extends React.Component<TProps> {\n  constructor(props: TProps) {\n    super(props);\n  }\n\n  private _surface: JsiSkSurface | null = null;\n  private _unsubscriptions: Array<() => void> = [];\n  private _canvas: SkCanvas | null = null;\n  private _canvasRef = React.createRef<HTMLCanvasElement>();\n  private _redrawRequests = 0;\n  private requestId = 0;\n\n  protected width = 0;\n  protected height = 0;\n\n  private unsubscribeAll() {\n    this._unsubscriptions.forEach((u) => u());\n    this._unsubscriptions = [];\n  }\n\n  private onLayoutEvent(evt: LayoutChangeEvent) {\n    const { CanvasKit } = global;\n    // Reset canvas / surface on layout change\n    const canvas = this._canvasRef.current;\n    if (canvas) {\n      this.width = canvas.clientWidth;\n      this.height = canvas.clientHeight;\n      canvas.width = this.width * pd;\n      canvas.height = this.height * pd;\n      const surface = CanvasKit.MakeWebGLCanvasSurface(canvas);\n      const ctx = canvas.getContext(\"webgl2\");\n      if (ctx) {\n        ctx.drawingBufferColorSpace = \"display-p3\";\n      }\n      if (!surface) {\n        throw new Error(\"Could not create surface\");\n      }\n      this._surface = new JsiSkSurface(CanvasKit, surface);\n      this._canvas = this._surface.getCanvas();\n      this.redraw();\n    }\n    // Call onLayout callback if it exists\n    if (this.props.onLayout) {\n      this.props.onLayout(evt);\n    }\n  }\n\n  getSize() {\n    return { width: this.width, height: this.height };\n  }\n\n  componentDidMount() {\n    // Start render loop\n    this.tick();\n  }\n\n  componentDidUpdate() {\n    this.redraw();\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeAll();\n    cancelAnimationFrame(this.requestId);\n    // eslint-disable-next-line max-len\n    // https://stackoverflow.com/questions/23598471/how-do-i-clean-up-and-unload-a-webgl-canvas-context-from-gpu-after-use\n    // https://developer.mozilla.org/en-US/docs/Web/API/WEBGL_lose_context\n    // We delete the context, only if the context has been intialized\n    if (this._surface) {\n      this._canvasRef.current\n        ?.getContext(\"webgl2\")\n        ?.getExtension(\"WEBGL_lose_context\")\n        ?.loseContext();\n    }\n  }\n\n  /**\n   * Creates a snapshot from the canvas in the surface\n   * @param rect Rect to use as bounds. Optional.\n   * @returns An Image object.\n   */\n  public makeImageSnapshot(rect?: SkRect) {\n    this._canvas!.clear(CanvasKit.TRANSPARENT);\n    this.renderInCanvas(this._canvas!);\n    this._surface?.ref.flush();\n    return this._surface?.makeImageSnapshot(rect);\n  }\n\n  /**\n   * Override to render\n   */\n  protected abstract renderInCanvas(canvas: SkCanvas): void;\n\n  /**\n   * Sends a redraw request to the native SkiaView.\n   */\n  private tick() {\n    if (this._redrawRequests > 0) {\n      this._redrawRequests = 0;\n      if (this._canvas) {\n        const canvas = this._canvas!;\n        canvas.clear(Float32Array.of(0, 0, 0, 0));\n        canvas.save();\n        canvas.scale(pd, pd);\n        this.renderInCanvas(canvas);\n        canvas.restore();\n        this._surface?.ref.flush();\n      }\n    }\n    this.requestId = requestAnimationFrame(this.tick.bind(this));\n  }\n\n  public redraw() {\n    this._redrawRequests++;\n  }\n\n  private onLayout = this.onLayoutEvent.bind(this);\n\n  render() {\n    const { debug = false, ...viewProps } = this.props;\n    return (\n      <Platform.View {...viewProps} onLayout={this.onLayout}>\n        <canvas ref={this._canvasRef} style={{ display: \"flex\", flex: 1 }} />\n      </Platform.View>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/lib/module/views/SkiaBaseWebView.d.ts

@@ -1,40 +0,0 @@
-import React from "react";
-import type { SkRect, SkCanvas } from "../skia/types";
-import type { SkiaBaseViewProps } from "./types";
-export declare abstract class SkiaBaseWebView<TProps extends SkiaBaseViewProps> extends React.Component<TProps> {
-    constructor(props: TProps);
-    private _surface;
-    private _unsubscriptions;
-    private _canvas;
-    private _canvasRef;
-    private _redrawRequests;
-    private requestId;
-    protected width: number;
-    protected height: number;
-    private unsubscribeAll;
-    private onLayoutEvent;
-    getSize(): {
-        width: number;
-        height: number;
-    };
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    componentWillUnmount(): void;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshot(rect?: SkRect): import("../skia/types").SkImage | undefined;
-    /**
-     * Override to render
-     */
-    protected abstract renderInCanvas(canvas: SkCanvas): void;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    private tick;
-    redraw(): void;
-    private onLayout;
-    render(): React.JSX.Element;
-}