@shopify/react-native-skia 1.7.6 → 1.7.7

package/src/sksg/nodes/pathEffects.ts

@@ -0,0 +1,95 @@
+"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

@@ -0,0 +1,203 @@
+"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/sksg/nodes/utils.ts

@@ -0,0 +1,23 @@
+"worklet";
+
+import type { SharedValue } from "react-native-reanimated";
+
+import { mapKeys } from "../../renderer/typeddash";
+
+export const isSharedValue = <T = unknown>(
+  value: unknown
+): value is SharedValue<T> => {
+  // We cannot use `in` operator here because `value` could be a HostObject and therefore we cast.
+  return (value as Record<string, unknown>)?._isReanimatedSharedValue === true;
+};
+
+export const materialize = <T extends object>(props: T) => {
+  const result: T = Object.assign({}, props);
+  mapKeys(result).forEach((key) => {
+    const value = result[key];
+    if (isSharedValue(value)) {
+      result[key] = value.value as never;
+    }
+  });
+  return result;
+};

package/src/views/SkiaPictureView.tsx

@@ -38,7 +38,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
   }
 
   componentDidUpdate(prevProps: SkiaPictureViewProps) {
-    console.log("componentDidUpdate");
     const { picture, onSize } = this.props;
     if (picture !== prevProps.picture) {
       assertSkiaViewApi();
@@ -79,7 +78,6 @@ export class SkiaPictureView extends React.Component<SkiaPictureViewProps> {
    */
   public redraw() {
     assertSkiaViewApi();
-    console.log("Request redraw: ", this._nativeId);
     SkiaViewApi.requestRedraw(this._nativeId);
   }
 

package/src/views/types.ts

@@ -1,8 +1,8 @@
 import type { ViewProps } from "react-native";
+import type { SharedValue } from "react-native-reanimated";
 
 import type { GroupProps, RenderNode } from "../dom/types";
 import type { SkImage, SkPicture, SkRect, SkSize } from "../skia/types";
-import type { SharedValueType } from "../renderer/processors/Animations/Animations";
 
 export type NativeSkiaViewProps = ViewProps & {
   debug?: boolean;
@@ -32,7 +32,7 @@ export interface SkiaBaseViewProps extends ViewProps {
    * Pass an animated value to the onSize property to get updates when
    * the Skia view is resized.
    */
-  onSize?: SharedValueType<SkSize>;
+  onSize?: SharedValue<SkSize>;
 
   opaque?: boolean;
 }

package/lib/commonjs/dom/__tests__/Shaders.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/commonjs/renderer/__tests__/SkiaDOM.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Compose.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Demos.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/DrawingContext.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Drawings.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Group.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Paint.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/RenderNodes.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/dom/__tests__/Shaders.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/module/renderer/__tests__/SkiaDOM.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Compose.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Demos.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/DrawingContext.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Drawings.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Group.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Paint.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/RenderNodes.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/dom/__tests__/Shaders.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/typescript/src/renderer/__tests__/SkiaDOM.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/dom/__tests__/Compose.spec.tsx

@@ -1,42 +0,0 @@
-import {
-  importSkia,
-  width,
-  height,
-  loadImage,
-  getSkDOM,
-} from "../../renderer/__tests__/setup";
-import { setupSkia } from "../../skia/__tests__/setup";
-import { docPath, processResult } from "../../__tests__/setup";
-import { JsiDrawingContext } from "../types";
-
-describe("Compose", () => {
-  it("should compose image filters", () => {
-    const size = width;
-    const { surface, canvas } = setupSkia(width, height);
-    const { Skia, rect, vec } = importSkia();
-    const Sk = getSkDOM();
-    const image = loadImage("skia/__tests__/assets/oslo.jpg");
-
-    const root = Sk.Group();
-    const img = Sk.Image({
-      image,
-      fit: "cover",
-      rect: rect(0, 0, size, size),
-    });
-    root.addChild(img);
-
-    const matrix = [
-      -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
-      -0.703, 0, 0, 0, 0, 0, 1, 0,
-    ];
-    const cf = Sk.MatrixColorFilter({ matrix });
-
-    const blur = Sk.BlurImageFilter({ blur: vec(10, 10), mode: "decal" });
-    blur.addChild(cf);
-    root.addChild(blur);
-
-    const ctx = new JsiDrawingContext(Skia, canvas);
-    root.render(ctx);
-    processResult(surface, docPath("image-filters/composing.png"));
-  });
-});

package/src/dom/__tests__/Demos.spec.tsx

@@ -1,145 +0,0 @@
-import {
-  importSkia,
-  width,
-  height,
-  getSkDOM,
-} from "../../renderer/__tests__/setup";
-import { setupSkia } from "../../skia/__tests__/setup";
-import { processResult } from "../../__tests__/setup";
-import { JsiDrawingContext } from "../types";
-
-describe("Drawings", () => {
-  it("Apple Breathe Demo", () => {
-    const { surface, canvas } = setupSkia(width, height);
-    const { Skia, vec, polar2Canvas } = importSkia();
-    const Sk = getSkDOM();
-    const c = vec(width / 2, height / 2);
-    const c1 = Skia.Color("#61bea2");
-    const c2 = Skia.Color("#529ca0");
-    const R = width / 4;
-    const color = Skia.Color("rgb(36,43,56)");
-    const root = Sk.Group({ color });
-    root.addChild(Sk.Fill());
-    const rings = Sk.Group({
-      blendMode: "screen",
-    });
-    const blur = Sk.BlurMaskFilter({
-      blur: 10,
-      style: "solid",
-      respectCTM: true,
-    });
-    rings.addChild(blur);
-    for (let i = 0; i < 6; i++) {
-      const theta = (i * (2 * Math.PI)) / 6;
-      const matrix = Skia.Matrix();
-      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
-      matrix.translate(x, y);
-      const ring = Sk.Group({
-        matrix,
-        color: i % 2 ? c1 : c2,
-      });
-      ring.addChild(Sk.Circle({ c, r: R }));
-      rings.addChild(ring);
-    }
-    root.addChild(rings);
-    const ctx = new JsiDrawingContext(Skia, canvas);
-    root.render(ctx);
-    processResult(surface, "snapshots/demos/breathe.png");
-  });
-
-  it("Apple Breathe Demo with the new API", () => {
-    const { surface, canvas } = setupSkia(width, height);
-    const { Skia, vec, polar2Canvas } = importSkia();
-    const Sk = getSkDOM();
-    const c = vec(width / 2, height / 2);
-    const c1 = Skia.Color("#61bea2");
-    const c2 = Skia.Color("#529ca0");
-    const R = width / 4;
-    const color = Skia.Color("rgb(36,43,56)");
-    const root = Sk.Group({ color });
-    root.addChild(Sk.Fill());
-    const rings = Sk.Group({
-      blendMode: "screen",
-    });
-    const blur = Sk.BlurMaskFilter({
-      blur: 10,
-      style: "solid",
-      respectCTM: true,
-    });
-    rings.addChild(blur);
-    for (let i = 0; i < 6; i++) {
-      const theta = (i * (2 * Math.PI)) / 6;
-      const matrix = Skia.Matrix();
-      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
-      matrix.translate(x, y);
-      rings.addChild(Sk.Circle({ c, r: R, matrix, color: i % 2 ? c1 : c2 }));
-    }
-    root.addChild(rings);
-    const ctx = new JsiDrawingContext(Skia, canvas);
-    root.render(ctx);
-    processResult(surface, "snapshots/demos/breathe.png");
-  });
-
-  it("Apple Breathe Demo with animations", () => {
-    const { surface, canvas } = setupSkia(width, height);
-    const { Skia, vec, polar2Canvas } = importSkia();
-    const Sk = getSkDOM();
-    const c = vec(width / 2, height / 2);
-    const c1 = Skia.Color("#61bea2");
-    const c2 = Skia.Color("#529ca0");
-    const R = width / 4;
-    const color = Skia.Color("rgb(36,43,56)");
-    const root = Sk.Group({ color });
-    root.addChild(Sk.Fill());
-    const rings = Sk.Group({
-      blendMode: "screen",
-    });
-    const blur = Sk.BlurMaskFilter({
-      blur: 10,
-      style: "solid",
-      respectCTM: true,
-    });
-    rings.addChild(blur);
-    for (let i = 0; i < 6; i++) {
-      const theta = (i * (2 * Math.PI)) / 6;
-      const matrix = Skia.Matrix();
-      const { x, y } = polar2Canvas({ theta, radius: R }, { x: 0, y: 0 });
-      matrix.translate(x, y);
-      rings.addChild(Sk.Circle({ c, r: R, matrix, color: i % 2 ? c1 : c2 }));
-    }
-    root.addChild(rings);
-    const ctx = new JsiDrawingContext(Skia, canvas);
-    root.render(ctx);
-    processResult(surface, "snapshots/demos/breathe.png");
-
-    blur.setProp("blur", 0);
-    root.setProp("transform", [
-      { translateX: c.x },
-      { translateY: c.y },
-      { rotate: Math.PI / 4 },
-      { translateX: -c.x },
-      { translateY: -c.y },
-    ]);
-    for (let i = 0; i < 6; i++) {
-      const theta = (i * (2 * Math.PI)) / 6;
-      const matrix = Skia.Matrix();
-      const scale = 0.5;
-      const { x, y } = polar2Canvas({ theta, radius: 0.5 * R }, { x: 0, y: 0 });
-      matrix.translate(x, y);
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const ring = rings.children()[i + 1] as any;
-      ring.setProp("matrix", undefined);
-      ring.setProp("transform", [
-        { translateX: c.x },
-        { translateY: c.y },
-        { translateX: x },
-        { translateY: y },
-        { scale },
-        { translateX: -c.x },
-        { translateY: -c.y },
-      ]);
-    }
-    root.render(ctx);
-    processResult(surface, "snapshots/demos/breathe2.png");
-  });
-});