@shopify/react-native-skia 1.7.7 → 1.8.1

package/src/sksg/nodes/paint.ts

@@ -1,75 +0,0 @@
-"worklet";
-
-import { enumKey } from "../../dom/nodes";
-import type { DeclarationContext, PaintProps } from "../../dom/types";
-import { BlendMode, PaintStyle, StrokeCap, StrokeJoin } from "../../skia/types";
-
-export const declarePaint = (ctx: DeclarationContext, props: PaintProps) => {
-  const {
-    color,
-    strokeWidth,
-    blendMode,
-    style,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity,
-    antiAlias,
-    dither,
-  } = props;
-  const paint = ctx.Skia.Paint();
-  if (color !== undefined) {
-    paint.setColor(ctx.Skia.Color(color));
-  }
-  if (strokeWidth !== undefined) {
-    paint.setStrokeWidth(strokeWidth);
-  }
-  if (blendMode !== undefined) {
-    paint.setBlendMode(BlendMode[enumKey(blendMode)]);
-  }
-  if (style !== undefined) {
-    paint.setStyle(PaintStyle[enumKey(style)]);
-  }
-  if (strokeJoin !== undefined) {
-    paint.setStrokeJoin(StrokeJoin[enumKey(strokeJoin)]);
-  }
-  if (strokeCap !== undefined) {
-    paint.setStrokeCap(StrokeCap[enumKey(strokeCap)]);
-  }
-  if (strokeMiter !== undefined) {
-    paint.setStrokeMiter(strokeMiter);
-  }
-  if (opacity !== undefined) {
-    paint.setAlphaf(opacity);
-  }
-  if (antiAlias !== undefined) {
-    paint.setAntiAlias(antiAlias);
-  }
-  if (dither !== undefined) {
-    paint.setDither(dither);
-  }
-  //ctx.save();
-
-  const colorFilter = ctx.colorFilters.popAllAsOne();
-  const imageFilter = ctx.imageFilters.popAllAsOne();
-  const shader = ctx.shaders.pop();
-  const maskFilter = ctx.maskFilters.pop();
-  const pathEffect = ctx.pathEffects.popAllAsOne();
-  //ctx.restore();
-  if (imageFilter) {
-    paint.setImageFilter(imageFilter);
-  }
-  if (shader) {
-    paint.setShader(shader);
-  }
-  if (pathEffect) {
-    paint.setPathEffect(pathEffect);
-  }
-  if (colorFilter) {
-    paint.setColorFilter(colorFilter);
-  }
-  if (maskFilter) {
-    paint.setMaskFilter(maskFilter);
-  }
-  ctx.paints.push(paint);
-};

package/src/sksg/nodes/pathEffects.ts

@@ -1,95 +0,0 @@
-"worklet";
-
-import { composeDeclarations, enumKey, processPath } from "../../dom/nodes";
-import type {
-  CornerPathEffectProps,
-  DashPathEffectProps,
-  DeclarationContext,
-  DiscretePathEffectProps,
-  Line2DPathEffectProps,
-  Path1DPathEffectProps,
-  Path2DPathEffectProps,
-} from "../../dom/types";
-import { Path1DEffectStyle } from "../../skia/types";
-
-export const makeDiscretePathEffect = (
-  ctx: DeclarationContext,
-  props: DiscretePathEffectProps
-) => {
-  const { length, deviation, seed } = props;
-  return ctx.Skia.PathEffect.MakeDiscrete(length, deviation, seed);
-};
-
-export const makePath2DPathEffect = (
-  ctx: DeclarationContext,
-  props: Path2DPathEffectProps
-) => {
-  const { matrix } = props;
-  const path = processPath(ctx.Skia, props.path);
-  const pe = ctx.Skia.PathEffect.MakePath2D(matrix, path);
-  if (pe === null) {
-    throw new Error("Path2DPathEffect: invalid path");
-  }
-  return pe;
-};
-
-export const makeDashPathEffect = (
-  ctx: DeclarationContext,
-  props: DashPathEffectProps
-) => {
-  const { intervals, phase } = props;
-  const pe = ctx.Skia.PathEffect.MakeDash(intervals, phase);
-  return pe;
-};
-
-export const makeCornerPathEffect = (
-  ctx: DeclarationContext,
-  props: CornerPathEffectProps
-) => {
-  const { r } = props;
-  const pe = ctx.Skia.PathEffect.MakeCorner(r);
-  if (pe === null) {
-    throw new Error("CornerPathEffect: couldn't create path effect");
-  }
-  return pe;
-};
-
-export const declareSumPathEffect = (ctx: DeclarationContext) => {
-  // Note: decorateChildren functionality needs to be handled differently
-  const pes = ctx.pathEffects.popAll();
-  const pe = composeDeclarations(
-    pes,
-    ctx.Skia.PathEffect.MakeSum.bind(ctx.Skia.PathEffect)
-  );
-  ctx.pathEffects.push(pe);
-};
-
-export const makeLine2DPathEffect = (
-  ctx: DeclarationContext,
-  props: Line2DPathEffectProps
-) => {
-  const { width, matrix } = props;
-  const pe = ctx.Skia.PathEffect.MakeLine2D(width, matrix);
-  if (pe === null) {
-    throw new Error("Line2DPathEffect: could not create path effect");
-  }
-  return pe;
-};
-
-export const makePath1DPathEffect = (
-  ctx: DeclarationContext,
-  props: Path1DPathEffectProps
-) => {
-  const { advance, phase, style } = props;
-  const path = processPath(ctx.Skia, props.path);
-  const pe = ctx.Skia.PathEffect.MakePath1D(
-    path,
-    advance,
-    phase,
-    Path1DEffectStyle[enumKey(style)]
-  );
-  if (pe === null) {
-    throw new Error("Path1DPathEffect: could not create path effect");
-  }
-  return pe;
-};

package/src/sksg/nodes/shaders.ts

@@ -1,203 +0,0 @@
-"worklet";
-
-import {
-  enumKey,
-  fitRects,
-  getRect,
-  processGradientProps,
-  processTransformProps,
-  rect2rect,
-} from "../../dom/nodes";
-import type {
-  ColorProps,
-  DeclarationContext,
-  FractalNoiseProps,
-  ImageShaderProps,
-  LinearGradientProps,
-  RadialGradientProps,
-  ShaderProps,
-  SweepGradientProps,
-  TurbulenceProps,
-  TwoPointConicalGradientProps,
-} from "../../dom/types";
-import {
-  FilterMode,
-  MipmapMode,
-  processUniforms,
-  TileMode,
-} from "../../skia/types";
-
-export const declareShader = (ctx: DeclarationContext, props: ShaderProps) => {
-  const { source, uniforms, ...transform } = props;
-  const m3 = ctx.Skia.Matrix();
-  processTransformProps(m3, transform);
-  const shader = source.makeShaderWithChildren(
-    processUniforms(source, uniforms),
-    ctx.shaders.popAll(),
-    m3
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareColorShader = (
-  ctx: DeclarationContext,
-  props: ColorProps
-) => {
-  const { color } = props;
-  const shader = ctx.Skia.Shader.MakeColor(ctx.Skia.Color(color));
-  ctx.shaders.push(shader);
-};
-
-export const declareFractalNoiseShader = (
-  ctx: DeclarationContext,
-  props: FractalNoiseProps
-) => {
-  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;
-  const shader = ctx.Skia.Shader.MakeFractalNoise(
-    freqX,
-    freqY,
-    octaves,
-    seed,
-    tileWidth,
-    tileHeight
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareTwoPointConicalGradientShader = (
-  ctx: DeclarationContext,
-  props: TwoPointConicalGradientProps
-) => {
-  const { startR, endR, start, end } = props;
-  const { colors, positions, mode, localMatrix, flags } = processGradientProps(
-    ctx.Skia,
-    props
-  );
-  const shader = ctx.Skia.Shader.MakeTwoPointConicalGradient(
-    start,
-    startR,
-    end,
-    endR,
-    colors,
-    positions,
-    mode,
-    localMatrix,
-    flags
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareRadialGradientShader = (
-  ctx: DeclarationContext,
-  props: RadialGradientProps
-) => {
-  const { c, r } = props;
-  const { colors, positions, mode, localMatrix, flags } = processGradientProps(
-    ctx.Skia,
-    props
-  );
-  const shader = ctx.Skia.Shader.MakeRadialGradient(
-    c,
-    r,
-    colors,
-    positions,
-    mode,
-    localMatrix,
-    flags
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareSweepGradientShader = (
-  ctx: DeclarationContext,
-  props: SweepGradientProps
-) => {
-  const { c, start, end } = props;
-  const { colors, positions, mode, localMatrix, flags } = processGradientProps(
-    ctx.Skia,
-    props
-  );
-  const shader = ctx.Skia.Shader.MakeSweepGradient(
-    c.x,
-    c.y,
-    colors,
-    positions,
-    mode,
-    localMatrix,
-    flags,
-    start,
-    end
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareLinearGradientShader = (
-  ctx: DeclarationContext,
-  props: LinearGradientProps
-) => {
-  const { start, end } = props;
-  const { colors, positions, mode, localMatrix, flags } = processGradientProps(
-    ctx.Skia,
-    props
-  );
-  const shader = ctx.Skia.Shader.MakeLinearGradient(
-    start,
-    end,
-    colors,
-    positions ?? null,
-    mode,
-    localMatrix,
-    flags
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareTurbulenceShader = (
-  ctx: DeclarationContext,
-  props: TurbulenceProps
-) => {
-  const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = props;
-  const shader = ctx.Skia.Shader.MakeTurbulence(
-    freqX,
-    freqY,
-    octaves,
-    seed,
-    tileWidth,
-    tileHeight
-  );
-  ctx.shaders.push(shader);
-};
-
-export const declareImageShader = (
-  ctx: DeclarationContext,
-  props: ImageShaderProps
-) => {
-  const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = props;
-  if (!image) {
-    return;
-  }
-
-  const rct = getRect(ctx.Skia, imageShaderProps);
-  const m3 = ctx.Skia.Matrix();
-  if (rct) {
-    const rects = fitRects(
-      fit,
-      { x: 0, y: 0, width: image.width(), height: image.height() },
-      rct
-    );
-    const [x, y, sx, sy] = rect2rect(rects.src, rects.dst);
-    m3.translate(x.translateX, y.translateY);
-    m3.scale(sx.scaleX, sy.scaleY);
-  }
-  const lm = ctx.Skia.Matrix();
-  lm.concat(m3);
-  processTransformProps(lm, imageShaderProps);
-  const shader = image.makeShaderOptions(
-    TileMode[enumKey(tx)],
-    TileMode[enumKey(ty)],
-    FilterMode[enumKey(fm)],
-    MipmapMode[enumKey(mm)],
-    lm
-  );
-  ctx.shaders.push(shader);
-};

package/src/views/SkiaJSDomView.tsx

@@ -1,143 +0,0 @@
-import React from "react";
-import type { HostComponent } from "react-native";
-
-import type { Skia, SkRect } from "../skia/types";
-import { Platform } from "../Platform";
-import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
-import { JsiDrawingContext } from "../dom/types";
-
-import { SkiaViewApi } from "./api";
-import type {
-  SkiaPictureViewNativeProps,
-  SkiaDomViewNativeProps,
-} from "./types";
-import { SkiaViewNativeId } from "./SkiaViewNativeId";
-
-const NativeSkiaPictureView: HostComponent<SkiaPictureViewNativeProps> =
-  Platform.OS !== "web"
-    ? SkiaPictureViewNativeComponent
-    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (null as any);
-
-interface SkiaDomViewProps extends SkiaDomViewNativeProps {
-  mode?: "default" | "continuous";
-}
-
-type SkiaJSDomViewProps = SkiaDomViewProps & {
-  Skia: Skia;
-  mode?: "default" | "continuous";
-};
-
-export class SkiaJSDomView extends React.Component<SkiaJSDomViewProps> {
-  constructor(props: SkiaJSDomViewProps) {
-    super(props);
-    this._nativeId = SkiaViewNativeId.current++;
-    const { root, onSize } = props;
-    if (root) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
-    }
-    if (onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-    this.tick();
-  }
-
-  private _nativeId: number;
-  private requestId = 0;
-
-  private tick() {
-    this.redraw();
-    if (this.props.mode === "continuous") {
-      this.requestId = requestAnimationFrame(this.tick.bind(this));
-    }
-  }
-
-  public get nativeId() {
-    return this._nativeId;
-  }
-
-  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {
-    const { root, onSize } = this.props;
-    if (root !== prevProps.root && root !== undefined) {
-      assertSkiaViewApi();
-      this.draw();
-    }
-    if (onSize !== prevProps.onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-    this.tick();
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  public makeImageSnapshot(rect?: SkRect) {
-    assertSkiaViewApi();
-    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
-  }
-
-  public makeImageSnapshotAsync(rect?: SkRect) {
-    assertSkiaViewApi();
-    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);
-  }
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  public redraw() {
-    assertSkiaViewApi();
-    this.draw();
-  }
-
-  private draw() {
-    const { root, Skia } = this.props;
-    if (root !== undefined) {
-      assertSkiaViewApi();
-      const rec = Skia.PictureRecorder();
-      const canvas = rec.beginRecording();
-      const ctx = new JsiDrawingContext(Skia, canvas);
-      root.render(ctx);
-      const picture = rec.finishRecordingAsPicture();
-      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
-    }
-  }
-
-  /**
-   * Clear up the dom node when unmounting to release resources.
-   */
-  componentWillUnmount(): void {
-    assertSkiaViewApi();
-    SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
-    if (this.requestId) {
-      cancelAnimationFrame(this.requestId);
-    }
-  }
-
-  render() {
-    const { debug = false, ...viewProps } = this.props;
-    return (
-      <NativeSkiaPictureView
-        collapsable={false}
-        nativeID={`${this._nativeId}`}
-        debug={debug}
-        {...viewProps}
-      />
-    );
-  }
-}
-
-const assertSkiaViewApi = () => {
-  if (
-    SkiaViewApi === null ||
-    SkiaViewApi.setJsiProperty === null ||
-    SkiaViewApi.requestRedraw === null ||
-    SkiaViewApi.makeImageSnapshot === null
-  ) {
-    throw Error("Skia View Api was not found.");
-  }
-};

package/src/views/SkiaJSDomView.web.tsx

@@ -1 +0,0 @@
-export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";