@shopify/react-native-skia 1.11.1 → 1.11.3

package/lib/typescript/src/views/SkiaDomView.d.ts

@@ -1,33 +0,0 @@
-import React from "react";
-import type { SkRect } from "../skia/types";
-import type { SkiaDomViewNativeProps } from "./types";
-interface SkiaDomViewProps extends SkiaDomViewNativeProps {
-    mode?: "default" | "continuous";
-}
-export declare class SkiaDomView extends React.Component<SkiaDomViewProps> {
-    constructor(props: SkiaDomViewProps);
-    private _nativeId;
-    private requestId;
-    get nativeId(): number;
-    componentDidUpdate(prevProps: SkiaDomViewProps): void;
-    componentWillUnmount(): void;
-    private tick;
-    /**
-     * 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;
-    /**
-     * Creates a snapshot from the canvas in the surface
-     * @param rect Rect to use as bounds. Optional.
-     * @returns An Image object.
-     */
-    makeImageSnapshotAsync(rect?: SkRect): Promise<import("../skia/types").SkImage>;
-    /**
-     * Sends a redraw request to the native SkiaView.
-     */
-    redraw(): void;
-    render(): React.JSX.Element;
-}
-export {};

package/src/dom/nodes/JsiSkDOM.ts

@@ -1,298 +0,0 @@
-import type {
-  PathProps,
-  SkDOM,
-  GroupProps,
-  ImageProps,
-  BlurImageFilterProps,
-  MatrixColorFilterProps,
-  CircleProps,
-  BlurMaskFilterProps,
-  LinearGradientProps,
-  PaintProps,
-  ShaderProps,
-  ImageShaderProps,
-  LineProps,
-  OvalProps,
-  PatchProps,
-  PointsProps,
-  RectProps,
-  RoundedRectProps,
-  VerticesProps,
-  TextProps,
-  DiffRectProps,
-  OffsetImageFilterProps,
-  BlendColorFilterProps,
-  TextPathProps,
-  TextBlobProps,
-  GlyphsProps,
-  TwoPointConicalGradientProps,
-  TurbulenceProps,
-  SweepGradientProps,
-  RadialGradientProps,
-  FractalNoiseProps,
-  ColorProps,
-  PictureProps,
-  ImageSVGProps,
-  LerpColorFilterProps,
-  DrawingNodeProps,
-  BoxProps,
-  BoxShadowProps,
-  ChildrenProps,
-  AtlasProps,
-} from "../types";
-import type {
-  BlendImageFilterProps,
-  BlendProps,
-  DisplacementMapImageFilterProps,
-  DropShadowImageFilterProps,
-  MorphologyImageFilterProps,
-  RuntimeShaderImageFilterProps,
-} from "../types/ImageFilters";
-import type {
-  CornerPathEffectProps,
-  DashPathEffectProps,
-  DiscretePathEffectProps,
-  Line2DPathEffectProps,
-  Path1DPathEffectProps,
-  Path2DPathEffectProps,
-} from "../types/PathEffects";
-import type { ParagraphProps } from "../types/Paragraph";
-
-export class JsiSkDOM implements SkDOM {
-  constructor() {}
-
-  Layer(props?: ChildrenProps) {
-    return global.SkiaDomApi.LayerNode(props ?? {});
-  }
-
-  Group(props?: GroupProps) {
-    return global.SkiaDomApi.GroupNode(props ?? {});
-  }
-
-  Paint(props: PaintProps) {
-    return global.SkiaDomApi.PaintNode(props ?? {});
-  }
-
-  // Drawings
-  Fill(props?: DrawingNodeProps) {
-    return global.SkiaDomApi.FillNode(props ?? {});
-  }
-
-  Image(props: ImageProps) {
-    return global.SkiaDomApi.ImageNode(props ?? {});
-  }
-
-  Circle(props: CircleProps) {
-    return global.SkiaDomApi.CircleNode(props ?? {});
-  }
-
-  Path(props: PathProps) {
-    return global.SkiaDomApi.PathNode(props ?? {});
-  }
-
-  Line(props: LineProps) {
-    return global.SkiaDomApi.LineNode(props ?? {});
-  }
-
-  Oval(props: OvalProps) {
-    return global.SkiaDomApi.OvalNode(props ?? {});
-  }
-
-  Patch(props: PatchProps) {
-    return global.SkiaDomApi.PatchNode(props ?? {});
-  }
-
-  Points(props: PointsProps) {
-    return global.SkiaDomApi.PointsNode(props ?? {});
-  }
-
-  Rect(props: RectProps) {
-    return global.SkiaDomApi.RectNode(props);
-  }
-
-  RRect(props: RoundedRectProps) {
-    return global.SkiaDomApi.RRectNode(props);
-  }
-
-  Vertices(props: VerticesProps) {
-    return global.SkiaDomApi.VerticesNode(props);
-  }
-
-  Text(props: TextProps) {
-    return global.SkiaDomApi.TextNode(props);
-  }
-
-  TextPath(props: TextPathProps) {
-    return global.SkiaDomApi.TextPathNode(props);
-  }
-
-  TextBlob(props: TextBlobProps) {
-    return global.SkiaDomApi.TextBlobNode(props);
-  }
-
-  Glyphs(props: GlyphsProps) {
-    return global.SkiaDomApi.GlyphsNode(props);
-  }
-
-  DiffRect(props: DiffRectProps) {
-    return global.SkiaDomApi.DiffRectNode(props);
-  }
-
-  Picture(props: PictureProps) {
-    return global.SkiaDomApi.PictureNode(props);
-  }
-
-  Atlas(props: AtlasProps) {
-    return global.SkiaDomApi.AtlasNode(props);
-  }
-
-  ImageSVG(props: ImageSVGProps) {
-    return global.SkiaDomApi.ImageSVGNode(props);
-  }
-
-  // BlurMaskFilters
-  BlurMaskFilter(props: BlurMaskFilterProps) {
-    return global.SkiaDomApi.BlurMaskFilterNode(props);
-  }
-
-  // ImageFilters
-  BlendImageFilter(props: BlendImageFilterProps) {
-    return global.SkiaDomApi.BlendImageFilterNode(props);
-  }
-
-  DropShadowImageFilter(props: DropShadowImageFilterProps) {
-    return global.SkiaDomApi.DropShadowImageFilterNode(props);
-  }
-
-  DisplacementMapImageFilter(props: DisplacementMapImageFilterProps) {
-    return global.SkiaDomApi.DisplacementMapImageFilterNode(props);
-  }
-
-  BlurImageFilter(props: BlurImageFilterProps) {
-    return global.SkiaDomApi.BlurImageFilterNode(props);
-  }
-
-  OffsetImageFilter(props: OffsetImageFilterProps) {
-    return global.SkiaDomApi.OffsetImageFilterNode(props);
-  }
-
-  MorphologyImageFilter(props: MorphologyImageFilterProps) {
-    return global.SkiaDomApi.MorphologyImageFilterNode(props);
-  }
-
-  RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps) {
-    return global.SkiaDomApi.RuntimeShaderImageFilterNode(props);
-  }
-
-  // Color Filters
-  MatrixColorFilter(props: MatrixColorFilterProps) {
-    return global.SkiaDomApi.MatrixColorFilterNode(props);
-  }
-
-  BlendColorFilter(props: BlendColorFilterProps) {
-    return global.SkiaDomApi.BlendColorFilterNode(props);
-  }
-
-  LumaColorFilter() {
-    return global.SkiaDomApi.LumaColorFilterNode();
-  }
-
-  LinearToSRGBGammaColorFilter() {
-    return global.SkiaDomApi.LinearToSRGBGammaColorFilterNode();
-  }
-
-  SRGBToLinearGammaColorFilter() {
-    return global.SkiaDomApi.SRGBToLinearGammaColorFilterNode();
-  }
-
-  LerpColorFilter(props: LerpColorFilterProps) {
-    return global.SkiaDomApi.LerpColorFilterNode(props);
-  }
-
-  // Shaders
-  Shader(props: ShaderProps) {
-    return global.SkiaDomApi.ShaderNode(props);
-  }
-
-  ImageShader(props: ImageShaderProps) {
-    return global.SkiaDomApi.ImageShaderNode(props);
-  }
-
-  ColorShader(props: ColorProps) {
-    return global.SkiaDomApi.ColorShaderNode(props);
-  }
-
-  SweepGradient(props: SweepGradientProps) {
-    return global.SkiaDomApi.SweepGradientNode(props);
-  }
-
-  Turbulence(props: TurbulenceProps) {
-    return global.SkiaDomApi.TurbulenceNode(props);
-  }
-
-  FractalNoise(props: FractalNoiseProps) {
-    return global.SkiaDomApi.FractalNoiseNode(props);
-  }
-
-  LinearGradient(props: LinearGradientProps) {
-    return global.SkiaDomApi.LinearGradientNode(props);
-  }
-
-  RadialGradient(props: RadialGradientProps) {
-    return global.SkiaDomApi.RadialGradientNode(props);
-  }
-
-  TwoPointConicalGradient(props: TwoPointConicalGradientProps) {
-    return global.SkiaDomApi.TwoPointConicalGradientNode(props);
-  }
-
-  // Path Effects
-  CornerPathEffect(props: CornerPathEffectProps) {
-    return global.SkiaDomApi.CornerPathEffectNode(props);
-  }
-
-  DiscretePathEffect(props: DiscretePathEffectProps) {
-    return global.SkiaDomApi.DiscretePathEffectNode(props);
-  }
-
-  DashPathEffect(props: DashPathEffectProps) {
-    return global.SkiaDomApi.DashPathEffectNode(props);
-  }
-
-  Path1DPathEffect(props: Path1DPathEffectProps) {
-    return global.SkiaDomApi.Path1DPathEffectNode(props);
-  }
-
-  Path2DPathEffect(props: Path2DPathEffectProps) {
-    return global.SkiaDomApi.Path2DPathEffectNode(props);
-  }
-
-  SumPathEffect() {
-    return global.SkiaDomApi.SumPathEffectNode();
-  }
-
-  Line2DPathEffect(props: Line2DPathEffectProps) {
-    return global.SkiaDomApi.Line2DPathEffectNode(props);
-  }
-
-  Blend(props: BlendProps) {
-    return global.SkiaDomApi.BlendNode(props);
-  }
-
-  BackdropFilter(props: ChildrenProps) {
-    return global.SkiaDomApi.BackdropFilterNode(props);
-  }
-
-  Box(props: BoxProps) {
-    return global.SkiaDomApi.BoxNode(props);
-  }
-
-  BoxShadow(props: BoxShadowProps) {
-    return global.SkiaDomApi.BoxShadowNode(props);
-  }
-
-  // Paragraph
-  Paragraph(props: ParagraphProps) {
-    return global.SkiaDomApi.ParagraphNode(props);
-  }
-}

package/src/renderer/CanvasOld.tsx

@@ -1,126 +0,0 @@
-import React, {
-  useEffect,
-  useCallback,
-  useMemo,
-  forwardRef,
-  useRef,
-} from "react";
-import type {
-  RefObject,
-  ReactNode,
-  MutableRefObject,
-  ForwardedRef,
-  FunctionComponent,
-} from "react";
-import type { LayoutChangeEvent } from "react-native";
-
-import { SkiaDomView } from "../views";
-import type { SkiaBaseViewProps } from "../views";
-
-import { SkiaRoot } from "./Reconciler";
-
-export const useCanvasRef = () => useRef<SkiaDomView>(null);
-
-export interface CanvasOldProps extends SkiaBaseViewProps {
-  ref?: RefObject<SkiaDomView>;
-  children: ReactNode;
-  mode?: "default" | "continuous";
-}
-
-const useOnSizeEvent = (
-  resultValue: SkiaBaseViewProps["onSize"],
-  onLayout?: (event: LayoutChangeEvent) => void
-) => {
-  return useCallback(
-    (event: LayoutChangeEvent) => {
-      if (onLayout) {
-        onLayout(event);
-      }
-      const { width, height } = event.nativeEvent.layout;
-
-      if (resultValue) {
-        resultValue.value = { width, height };
-      }
-    },
-    [onLayout, resultValue]
-  );
-};
-
-export const CanvasOld = forwardRef<SkiaDomView, CanvasOldProps>(
-  (
-    {
-      children,
-      style,
-      debug,
-      mode = "default",
-      onSize: _onSize,
-      onLayout: _onLayout,
-      ...props
-    },
-    forwardedRef
-  ) => {
-    const onLayout = useOnSizeEvent(_onSize, _onLayout);
-    const innerRef = useCanvasRef();
-    const ref = useCombinedRefs(forwardedRef, innerRef);
-    const redraw = useCallback(() => {
-      innerRef.current?.redraw();
-    }, [innerRef]);
-    const getNativeId = useCallback(() => {
-      const id = innerRef.current?.nativeId ?? -1;
-      return id;
-    }, [innerRef]);
-
-    const root = useMemo(
-      () => new SkiaRoot(redraw, getNativeId),
-      [redraw, getNativeId]
-    );
-
-    // Render effect
-    useEffect(() => {
-      root.render(children);
-    }, [children, root, redraw]);
-
-    useEffect(() => {
-      return () => {
-        root.unmount();
-      };
-    }, [root]);
-
-    return (
-      <SkiaDomView
-        ref={ref}
-        style={style}
-        root={root.dom}
-        onLayout={onLayout}
-        debug={debug}
-        mode={mode}
-        {...props}
-      />
-    );
-  }
-) as FunctionComponent<CanvasOldProps & React.RefAttributes<SkiaDomView>>;
-
-/**
- * Combines a list of refs into a single ref. This can be used to provide
- * both a forwarded ref and an internal ref keeping the same functionality
- * on both of the refs.
- * @param refs Array of refs to combine
- * @returns A single ref that can be used in a ref prop.
- */
-const useCombinedRefs = <T,>(
-  ...refs: Array<MutableRefObject<T> | ForwardedRef<T>>
-) => {
-  const targetRef = React.useRef<T>(null);
-  React.useEffect(() => {
-    refs.forEach((ref) => {
-      if (ref) {
-        if (typeof ref === "function") {
-          ref(targetRef.current);
-        } else {
-          ref.current = targetRef.current;
-        }
-      }
-    });
-  }, [refs]);
-  return targetRef;
-};

package/src/renderer/Container.tsx

@@ -1,19 +0,0 @@
-import { JsiSkDOM } from "../dom/nodes";
-import type { Node, SkDOM } from "../dom/types";
-
-export class Container {
-  private _root: Node<unknown>;
-  public Sk: SkDOM;
-  public unmounted = false;
-  constructor(
-    public redraw: () => void = () => {},
-    public getNativeId: () => number = () => 0
-  ) {
-    this.Sk = new JsiSkDOM();
-    this._root = this.Sk.Group();
-  }
-
-  get root() {
-    return this._root;
-  }
-}