react-native-skia 3.0.0 → 3.0.2

package/src/renderer/DefaultCanvas.tsx

@@ -1,41 +0,0 @@
-import React from "react";
-
-import { Skia } from "../skia";
-import { Platform } from "../Platform";
-
-import type { CanvasProps } from "./Canvas";
-import { Canvas as PictureCanvas } from "./Canvas";
-import { GraphiteCanvas } from "./GraphiteCanvas";
-
-let useGraphite: boolean | null = null;
-
-// Whether this build runs the Graphite backend. Resolved on the first render
-// (the native API is installed by then) and cached: getNativeDevice() throws
-// on Ganesh builds. On the web, GraphiteCanvas is the regular canvas anyway.
-const hasGraphite = () => {
-  if (useGraphite === null) {
-    if (Platform.OS === "web") {
-      useGraphite = false;
-    } else {
-      try {
-        useGraphite = typeof Skia.getNativeDevice() === "bigint";
-      } catch {
-        useGraphite = false;
-      }
-    }
-  }
-  return useGraphite;
-};
-
-/**
- * `<Canvas>` renders {@link GraphiteCanvas} when React Native Skia is
- * configured with the Graphite backend (install-skia-graphite), and the
- * picture view based canvas otherwise. Both take the same props and ref.
- */
-export const Canvas = (props: CanvasProps) => {
-  return hasGraphite() ? (
-    <GraphiteCanvas {...props} />
-  ) : (
-    <PictureCanvas {...props} />
-  );
-};

package/src/renderer/GraphiteCanvas.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-
-import SkiaGraphiteViewNativeComponent from "../specs/SkiaGraphiteViewNativeComponent";
-
-import type { CanvasProps } from "./Canvas";
-import { useCanvasRoot } from "./Canvas";
-
-/**
- * The declarative canvas on the Graphite view. It takes the same props and
- * exposes the same ref as {@link Canvas}, and draws the same children, but
- * the frames are produced differently:
- *
- * - the JS thread records the scene graph into a native recorder once per
- *   React commit and hands it to the view;
- * - the Reanimated UI runtime only reads the shared values into it (the one
- *   step that needs a JS runtime), it never replays anything;
- * - a dedicated native thread pool replays the recorder into a Graphite
- *   recording whenever the content changed, at most once per presented frame;
- * - the view presents the recording on the next vsync.
- *
- * Neither the JS thread nor the UI thread pays for drawing. It requires the
- * Graphite backend (install-skia-graphite); with the default backend the view
- * renders nothing. `colorSpace`, `android` and `androidWarmup` are accepted
- * for API compatibility and ignored: the Graphite view renders in sRGB and
- * uses its own backing view.
- */
-export const GraphiteCanvas = ({
-  debug,
-  opaque,
-  children,
-  onSize,
-
-  colorSpace,
-  highBitDepth = false,
-
-  androidWarmup,
-
-  android,
-  ref,
-  onLayout,
-  ...viewProps
-}: CanvasProps) => {
-  const { nativeId, viewRef } = useCanvasRoot({
-    children,
-    onSize,
-    ref,
-    onLayout,
-  });
-  return (
-    <SkiaGraphiteViewNativeComponent
-      ref={viewRef}
-      collapsable={false}
-      nativeID={`${nativeId}`}
-      debug={debug}
-      opaque={opaque}
-      highBitDepth={highBitDepth}
-      onLayout={onLayout}
-      {...viewProps}
-    />
-  );
-};

package/src/renderer/GraphiteCanvas.web.tsx

@@ -1,3 +0,0 @@
-// The Graphite view is native only: on the web, GraphiteCanvas is the regular
-// Canvas.
-export { Canvas as GraphiteCanvas } from "./Canvas";

package/src/specs/SkiaGraphiteViewNativeComponent.ts

@@ -1,17 +0,0 @@
-import { codegenNativeComponent, type ViewProps } from "react-native";
-import type { WithDefault } from "react-native/Libraries/Types/CodegenTypes";
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore - pointerEvents needs to be redeclared for codegen to generate native bindings
-export interface NativeProps extends ViewProps {
-  debug?: boolean;
-  opaque?: boolean;
-  highBitDepth?: boolean;
-  pointerEvents?: WithDefault<
-    "auto" | "none" | "box-none" | "box-only",
-    "auto"
-  >;
-}
-
-// eslint-disable-next-line import/no-default-export
-export default codegenNativeComponent<NativeProps>("SkiaGraphiteView");

package/src/specs/SkiaGraphiteViewNativeComponent.web.ts

@@ -1,31 +0,0 @@
-import type { ViewProps } from "react-native";
-import { createElement } from "react";
-
-import { SkiaGraphiteView } from "../views/SkiaGraphiteView.web";
-
-export interface NativeProps extends ViewProps {
-  debug?: boolean;
-  opaque?: boolean;
-  highBitDepth?: boolean;
-  nativeID: string;
-}
-
-const SkiaGraphiteViewNativeComponent = ({
-  nativeID,
-  debug,
-  opaque,
-  highBitDepth,
-  onLayout,
-  ...viewProps
-}: NativeProps) => {
-  return createElement(SkiaGraphiteView, {
-    nativeID,
-    debug,
-    opaque,
-    highBitDepth,
-    onLayout,
-    ...viewProps,
-  });
-};
-// eslint-disable-next-line import/no-default-export
-export default SkiaGraphiteViewNativeComponent;

package/src/views/SkiaPictureView.web.tsx

@@ -1,224 +0,0 @@
-/* global HTMLCanvasElement */
-import React, {
-  useRef,
-  useEffect,
-  useCallback,
-  useImperativeHandle,
-} from "react";
-
-import type { SkRect, SkPicture, SkImage } from "../skia/types";
-import { Platform } from "../Platform";
-import type {
-  ISkiaViewApiWeb,
-  SkiaWebViewHandle,
-} from "../specs/NativeSkiaModule.web";
-
-import type { SkiaPictureViewNativeProps } from "./types";
-import { SkiaViewNativeId } from "./SkiaViewNativeId";
-import { useSkiaWebRenderer } from "./SkiaWebRenderer";
-import type { Renderer } from "./SkiaWebRenderer";
-
-export interface SkiaPictureViewHandle extends SkiaWebViewHandle {
-  setPicture(picture: SkPicture): void;
-}
-
-export interface SkiaPictureViewProps extends SkiaPictureViewNativeProps {
-  ref?: React.Ref<SkiaPictureViewHandle>;
-}
-
-export const SkiaPictureView = (props: SkiaPictureViewProps) => {
-  const { ref, picture, onLayout } = props;
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const pictureRef = useRef<SkPicture | null>(null);
-  // Redraw requests coalesce into a single microtask. A microtask (not an
-  // animation frame) so that a picture produced inside a rAF callback (the
-  // Reanimated mapper) is drawn before the current frame paints: deferring
-  // to the next rAF alternates between "flush pending in this frame" and
-  // "flush scheduled for the next frame", drawing on every other frame
-  // only and halving the effective frame rate. 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 once the canvas becomes
-  // measurable, so it is never lost.
-  const redrawPendingRef = useRef(false);
-  const flushScheduledRef = useRef(false);
-
-  const isStatic = props.__destroyWebGLContextAfterRender === true;
-
-  const paint = useCallback((renderer: Renderer) => {
-    if (pictureRef.current) {
-      redrawPendingRef.current = false;
-      renderer.draw([pictureRef.current]);
-    }
-  }, []);
-  const rendererRef = useSkiaWebRenderer(canvasRef, isStatic, {
-    paint,
-    onLayout,
-  });
-
-  const flushRedraw = useCallback(() => {
-    flushScheduledRef.current = false;
-    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.
-  }, [rendererRef]);
-
-  const redraw = useCallback(() => {
-    redrawPendingRef.current = true;
-    if (!flushScheduledRef.current) {
-      flushScheduledRef.current = true;
-      queueMicrotask(flushRedraw);
-    }
-  }, [flushRedraw]);
-
-  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): SkImage | null => {
-      if (rendererRef.current && pictureRef.current) {
-        return rendererRef.current.makeImageSnapshot(
-          [pictureRef.current],
-          rect
-        );
-      }
-      return null;
-    },
-    [rendererRef]
-  );
-
-  const measure = useCallback(
-    (
-      callback: (
-        x: number,
-        y: number,
-        width: number,
-        height: number,
-        pageX: number,
-        pageY: number
-      ) => void
-    ) => {
-      if (canvasRef.current) {
-        const rect = canvasRef.current.getBoundingClientRect();
-        const parentElement = canvasRef.current.offsetParent as HTMLElement;
-        const parentRect = parentElement?.getBoundingClientRect() || {
-          left: 0,
-          top: 0,
-        };
-
-        // x, y are relative to the parent
-        const x = rect.left - parentRect.left;
-        const y = rect.top - parentRect.top;
-
-        // pageX, pageY are absolute screen coordinates
-        const pageX = rect.left + window.scrollX;
-        const pageY = rect.top + window.scrollY;
-
-        callback(x, y, rect.width, rect.height, pageX, pageY);
-      }
-    },
-    []
-  );
-
-  const measureInWindow = useCallback(
-    (
-      callback: (x: number, y: number, width: number, height: number) => void
-    ) => {
-      if (canvasRef.current) {
-        const rect = canvasRef.current.getBoundingClientRect();
-
-        // x, y are the absolute coordinates in the window
-        const x = rect.left;
-        const y = rect.top;
-
-        callback(x, y, rect.width, rect.height);
-      }
-    },
-    []
-  );
-
-  // No flush cancellation is needed on unmount: a microtask queued before
-  // unmount runs within the same task, and flushRedraw no-ops once the
-  // layout-effect cleanup has nulled rendererRef.
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      setPicture,
-      getSize,
-      redraw,
-      makeImageSnapshot,
-      measure,
-      measureInWindow,
-      get canvasRef() {
-        return () => canvasRef.current;
-      },
-    }),
-    [setPicture, getSize, redraw, makeImageSnapshot, measure, measureInWindow]
-  );
-
-  useEffect(() => {
-    const nativeID = props.nativeID ?? `${SkiaViewNativeId.current++}`;
-    const api = global.SkiaViewApi as ISkiaViewApiWeb;
-    api.registerView(nativeID, {
-      setPicture,
-      getSize,
-      redraw,
-      makeImageSnapshot,
-      measure,
-      measureInWindow,
-    } as SkiaPictureViewHandle);
-    return () => {
-      api.unregisterView(nativeID);
-    };
-  }, [
-    setPicture,
-    getSize,
-    redraw,
-    makeImageSnapshot,
-    measure,
-    measureInWindow,
-    props.nativeID,
-  ]);
-
-  useEffect(() => {
-    if (picture) {
-      setPicture(picture);
-    }
-  }, [setPicture, picture]);
-
-  const {
-    debug: _debug,
-    ref: _ref,
-    onLayout: _onLayout,
-    picture: _picture,
-    __destroyWebGLContextAfterRender: _isStatic,
-    ...viewProps
-  } = props;
-  return (
-    <Platform.View {...viewProps}>
-      <canvas
-        // A canvas element is bound to one context kind for life (WebGL for
-        // the live renderer, 2D for the static one), so switching renderers
-        // needs a fresh element.
-        key={isStatic ? "static" : "webgl"}
-        ref={canvasRef}
-        style={{ display: "block", width: "100%", height: "100%" }}
-      />
-    </Platform.View>
-  );
-};