@shopify/react-native-skia 0.1.146 → 0.1.148

package/src/renderer/components/imageFilters/InnerShadow.tsx

@@ -1,38 +0,0 @@
-import type { SkColor, Skia, SkImageFilter } from "../../../skia/types";
-import { BlendMode, TileMode } from "../../../skia/types";
-
-const Black = Float32Array.of(0, 0, 0, 1);
-
-export const MakeInnerShadow = (
-  Skia: Skia,
-  shadowOnly: boolean | undefined,
-  dx: number,
-  dy: number,
-  sigmaX: number,
-  sigmaY: number,
-  color: SkColor,
-  input: SkImageFilter | null
-) => {
-  const sourceGraphic = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(Black, BlendMode.Dst),
-    null
-  );
-  const sourceAlpha = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(Black, BlendMode.SrcIn),
-    null
-  );
-  const f1 = Skia.ImageFilter.MakeColorFilter(
-    Skia.ColorFilter.MakeBlend(color, BlendMode.SrcOut),
-    null
-  );
-  const f2 = Skia.ImageFilter.MakeOffset(dx, dy, f1);
-  const f3 = Skia.ImageFilter.MakeBlur(sigmaX, sigmaY, TileMode.Decal, f2);
-  const f4 = Skia.ImageFilter.MakeBlend(BlendMode.SrcIn, sourceAlpha, f3);
-  if (shadowOnly) {
-    return f4;
-  }
-  return Skia.ImageFilter.MakeCompose(
-    input,
-    Skia.ImageFilter.MakeBlend(BlendMode.SrcOver, sourceGraphic, f4)
-  );
-};

package/src/renderer/components/imageFilters/getInput.ts

@@ -1,20 +0,0 @@
-import type { DeclarationResult } from "../../nodes";
-import type { Skia } from "../../../skia/types";
-import { isImageFilter, isColorFilter, isShader } from "../../../skia/types";
-
-export const getInput = (Skia: Skia, children: DeclarationResult[]) => {
-  const [child] = children.filter((c) => c);
-  if (!child) {
-    return null;
-  }
-  if (isImageFilter(child)) {
-    return child;
-  }
-  if (isColorFilter(child)) {
-    return Skia.ImageFilter.MakeColorFilter(child, null);
-  }
-  if (isShader(child)) {
-    return Skia.ImageFilter.MakeShader(child, null);
-  }
-  throw new Error("Invalid image filter child: " + child);
-};

package/src/renderer/components/shaders/Gradient.ts

@@ -1,24 +0,0 @@
-import { TileMode } from "../../../skia/types";
-import type { SkEnum } from "../../processors/Paint";
-import type { TransformProps } from "../../processors/Transform";
-import { enumKey } from "../../processors/Paint";
-import { localMatrix } from "../../processors/Transform";
-import type { Color, Skia } from "../../../skia/types";
-
-export interface GradientProps extends TransformProps {
-  colors: Color[];
-  positions?: number[];
-  mode?: SkEnum<typeof TileMode>;
-  flags?: number;
-}
-
-export const processGradientProps = (
-  Skia: Skia,
-  { colors, positions, mode, flags, ...transform }: GradientProps
-) => ({
-  colors: colors.map((color) => Skia.Color(color)),
-  positions: positions ?? null,
-  mode: TileMode[enumKey(mode ?? "clamp")],
-  flags,
-  localMatrix: localMatrix(Skia.Matrix(), transform),
-});

package/src/renderer/nodes/Container.tsx

@@ -1,17 +0,0 @@
-import type { DependencyManager } from "../DependencyManager";
-import type { DrawingContext } from "../DrawingContext";
-
-import { Node } from "./Node";
-
-export class Container extends Node {
-  redraw: () => void;
-
-  constructor(depMgr: DependencyManager, redraw: () => void) {
-    super(depMgr, {});
-    this.redraw = redraw;
-  }
-
-  draw(ctx: DrawingContext) {
-    this.visit(ctx);
-  }
-}

package/src/renderer/nodes/Declaration.tsx

@@ -1,65 +0,0 @@
-import type { DependencyList } from "react";
-import { useCallback } from "react";
-
-import type { DrawingContext } from "../DrawingContext";
-import type { AnimatedProps } from "../processors";
-import { isAnimated } from "../processors";
-import type { DependencyManager } from "../DependencyManager";
-import type { SkJSIInstance } from "../../skia/types";
-
-import { Node } from "./Node";
-
-export type DeclarationResult = SkJSIInstance<string> | null;
-
-type DeclarationCallback<T> = (
-  props: T,
-  children: DeclarationResult[],
-  ctx: DrawingContext
-) => DeclarationResult;
-
-export const createDeclaration = <T,>(
-  cb: DeclarationCallback<T>
-): DeclarationCallback<T> => cb;
-
-export const useDeclaration = <P,>(
-  cb: DeclarationCallback<P>,
-  deps?: DependencyList
-) =>
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useCallback(cb, deps ?? []);
-
-export const isDeclarationNode = <P,>(node: Node): node is DeclarationNode<P> =>
-  node instanceof DeclarationNode;
-
-export interface DeclarationProps<P> {
-  onDeclare: DeclarationCallback<P>;
-}
-
-export class DeclarationNode<P> extends Node<P> {
-  private onDeclare: DeclarationCallback<P>;
-
-  constructor(
-    depMgr: DependencyManager,
-    onDeclare: DeclarationCallback<P>,
-    props: AnimatedProps<P>
-  ) {
-    super(depMgr, props);
-    super.memoizable = !isAnimated(props);
-    this.onDeclare = onDeclare;
-  }
-
-  set props(props: AnimatedProps<P>) {
-    this.memoizable = !isAnimated(props);
-    super.props = props;
-  }
-
-  get props(): P {
-    return this.resolvedProps;
-  }
-
-  draw(ctx: DrawingContext) {
-    const children = this.visit(ctx);
-    const obj = this.onDeclare(this.props, children, ctx);
-    return obj;
-  }
-}

package/src/renderer/nodes/Drawing.tsx

@@ -1,65 +0,0 @@
-import type { DependencyList, ReactNode } from "react";
-import { useCallback } from "react";
-
-import type { DrawingContext } from "../DrawingContext";
-import type { AnimatedProps } from "../processors/Animations/Animations";
-import { isPaint } from "../../skia/types";
-import type { DependencyManager } from "../DependencyManager";
-import { processPaint } from "../processors";
-
-import { Node } from "./Node";
-
-type DrawingCallback<P> = (
-  ctx: DrawingContext,
-  props: P,
-  node: Node<P>
-) => void;
-
-type OnDrawCallback<P> = (ctx: DrawingContext, props: P, node: Node<P>) => void;
-
-export const createDrawing = <P,>(cb: OnDrawCallback<P>): DrawingCallback<P> =>
-  cb;
-
-export const useDrawing = <P,>(cb: OnDrawCallback<P>, deps?: DependencyList) =>
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useCallback(cb, deps ?? []);
-
-export type DrawingProps<P> = {
-  onDraw: DrawingCallback<P>;
-  skipProcessing?: boolean;
-  children?: ReactNode | ReactNode[];
-};
-
-export class DrawingNode<P> extends Node<P> {
-  onDraw: DrawingCallback<P>;
-  skipProcessing: boolean;
-
-  constructor(
-    depMgr: DependencyManager,
-    onDraw: DrawingCallback<P>,
-    skipProcessing: boolean,
-    props: AnimatedProps<P>
-  ) {
-    super(depMgr, props);
-    this.onDraw = onDraw;
-    this.skipProcessing = skipProcessing;
-  }
-
-  draw(ctx: DrawingContext) {
-    if (this.skipProcessing) {
-      this.onDraw(ctx, this.props, this);
-    } else {
-      const declarations = this.visit(ctx);
-      const paint = processPaint(
-        ctx.Skia,
-        ctx.paint.copy(),
-        ctx.opacity,
-        this.props,
-        declarations
-      );
-      [paint, ...declarations.filter(isPaint)].forEach((currentPaint) => {
-        this.onDraw({ ...ctx, paint: currentPaint }, this.props, this);
-      });
-    }
-  }
-}

package/src/renderer/nodes/Node.ts

@@ -1,59 +0,0 @@
-import type { SkJSIInstance } from "../../skia/types";
-import type { DependencyManager } from "../DependencyManager";
-import type { DrawingContext } from "../DrawingContext";
-import type { AnimatedProps } from "../processors";
-
-export enum NodeType {
-  Declaration = "skDeclaration",
-  Drawing = "skDrawing",
-}
-
-type DeclarationResult = SkJSIInstance<string> | null;
-
-export abstract class Node<P = unknown> {
-  readonly children: Node[] = [];
-  // This cast is ok because we understand that the dependency manager will setup the initial props
-  resolvedProps: P = {} as P;
-  memoizable = false;
-  memoized: DeclarationResult | null = null;
-  parent?: Node;
-  depMgr: DependencyManager;
-
-  constructor(depMgr: DependencyManager, props: AnimatedProps<P>) {
-    this.depMgr = depMgr;
-    this.updatePropSubscriptions(props);
-  }
-
-  abstract draw(ctx: DrawingContext): void | DeclarationResult;
-
-  updatePropSubscriptions(props: AnimatedProps<P>) {
-    this.depMgr.subscribeNode(this, props);
-  }
-
-  set props(props: AnimatedProps<P>) {
-    this.depMgr.unsubscribeNode(this);
-    this.updatePropSubscriptions(props);
-  }
-
-  get props(): P {
-    return this.resolvedProps;
-  }
-
-  visit(ctx: DrawingContext, children?: Node[]) {
-    const returnedValues: Exclude<DeclarationResult, null>[] = [];
-    (children ?? this.children).forEach((child) => {
-      if (child.memoized && child.memoizable) {
-        returnedValues.push(child.memoized);
-      } else {
-        const ret = child.draw(ctx);
-        if (ret) {
-          returnedValues.push(ret);
-          if (child.memoizable) {
-            child.memoized = ret;
-          }
-        }
-      }
-    });
-    return returnedValues;
-  }
-}

package/src/renderer/nodes/index.ts

@@ -1,4 +0,0 @@
-export * from "./Drawing";
-export * from "./Declaration";
-export * from "./Container";
-export * from "./Node";

package/src/renderer/processors/Clips.ts

@@ -1,23 +0,0 @@
-import { isRRect } from "../../skia/types";
-import type { SkCanvas, ClipOp, SkRect, SkRRect, Skia } from "../../skia/types";
-
-import type { PathDef } from "./Paths";
-import { processPath, isPathDef } from "./Paths";
-
-export type ClipDef = SkRRect | SkRect | PathDef;
-
-export const processClip = (
-  Skia: Skia,
-  canvas: SkCanvas,
-  def: ClipDef,
-  op: ClipOp
-) => {
-  if (isPathDef(def)) {
-    const path = processPath(Skia, def);
-    canvas.clipPath(path, op, true);
-  } else if (isRRect(def)) {
-    canvas.clipRRect(def, op, true);
-  } else {
-    canvas.clipRect(def, op, true);
-  }
-};

package/src/renderer/processors/Font.ts

@@ -1,8 +0,0 @@
-import type { SkFont } from "../../skia/types";
-
-export type FontDef = { font: SkFont };
-
-export const isFont = (fontDef: FontDef): fontDef is { font: SkFont } =>
-  // We have an issue to check property existence on JSI backed instances
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  (fontDef as any).font !== undefined;

package/src/renderer/processors/Paint.ts

@@ -1,118 +0,0 @@
-import type { ReactNode, RefObject } from "react";
-
-import {
-  BlendMode,
-  PaintStyle,
-  StrokeJoin,
-  StrokeCap,
-  isShader,
-  isMaskFilter,
-  isColorFilter,
-  isPathEffect,
-  isImageFilter,
-} from "../../skia/types";
-import type { SkPaint, Color, SkImageFilter, Skia } from "../../skia/types";
-import type { DeclarationResult } from "../nodes";
-
-import { processColor } from "./Color";
-export type SkEnum<T> = Uncapitalize<keyof T extends string ? keyof T : never>;
-
-export interface ChildrenProps {
-  children?: ReactNode | ReactNode[];
-}
-
-// TODO: rename to paint props?
-export interface CustomPaintProps extends ChildrenProps {
-  paint?: RefObject<SkPaint>;
-  color?: Color;
-  strokeWidth?: number;
-  blendMode?: SkEnum<typeof BlendMode>;
-  style?: SkEnum<typeof PaintStyle>;
-  strokeJoin?: SkEnum<typeof StrokeJoin>;
-  strokeCap?: SkEnum<typeof StrokeCap>;
-  strokeMiter?: number;
-  opacity?: number;
-  antiAlias?: boolean;
-}
-
-export const enumKey = <K extends string>(k: K) =>
-  (k.charAt(0).toUpperCase() + k.slice(1)) as Capitalize<K>;
-
-export const processPaint = (
-  Skia: Skia,
-  paint: SkPaint,
-  currentOpacity: number,
-  {
-    paint: paintRef,
-    color,
-    blendMode,
-    style,
-    strokeWidth,
-    strokeJoin,
-    strokeCap,
-    strokeMiter,
-    opacity,
-    antiAlias,
-  }: CustomPaintProps,
-  children: DeclarationResult[]
-) => {
-  if (paintRef && paintRef.current) {
-    return paintRef.current;
-  }
-  if (color !== undefined) {
-    const c = processColor(Skia, color, currentOpacity);
-    paint.setShader(null);
-    paint.setColor(c);
-  } else {
-    const c = processColor(Skia, paint.getColor(), currentOpacity);
-    paint.setColor(c);
-  }
-  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 (strokeWidth !== undefined) {
-    paint.setStrokeWidth(strokeWidth);
-  }
-  if (opacity !== undefined) {
-    paint.setAlphaf(opacity);
-  }
-  if (antiAlias !== undefined) {
-    paint.setAntiAlias(antiAlias);
-  }
-  children.forEach((child) => {
-    if (isShader(child)) {
-      paint.setShader(child);
-    } else if (isMaskFilter(child)) {
-      paint.setMaskFilter(child);
-    } else if (isColorFilter(child)) {
-      paint.setColorFilter(child);
-    } else if (isPathEffect(child)) {
-      paint.setPathEffect(child);
-    }
-  });
-  const filters = children.filter(isImageFilter);
-  if (filters.length > 0) {
-    paint.setImageFilter(
-      filters
-        .reverse()
-        .reduce<SkImageFilter | null>(
-          (...args: Parameters<typeof Skia.ImageFilter.MakeCompose>) =>
-            Skia.ImageFilter.MakeCompose(...args),
-          null
-        )
-    );
-  }
-  return paint;
-};

package/src/renderer/processors/Transform.ts

@@ -1,50 +0,0 @@
-import type { SkMatrix, Vector, Transforms2d } from "../../skia/types";
-import { processTransform } from "../../skia/types";
-import type { SkCanvas } from "../../skia/types/Canvas";
-
-export interface TransformProps {
-  transform?: Transforms2d;
-  origin?: Vector;
-  matrix?: SkMatrix;
-}
-
-export const processCanvasTransform = (
-  canvas: SkCanvas,
-  { transform, origin, matrix }: TransformProps
-) => {
-  if (matrix) {
-    if (origin) {
-      canvas.translate(origin.x, origin.y);
-      canvas.concat(matrix);
-      canvas.translate(-origin.x, -origin.y);
-    } else {
-      canvas.concat(matrix);
-    }
-  } else if (transform) {
-    processTransform(
-      canvas,
-      origin ? transformOrigin(origin, transform) : transform
-    );
-  }
-};
-
-export const localMatrix = (
-  m: SkMatrix,
-  { transform, origin }: TransformProps
-) => {
-  if (transform) {
-    return processTransform(
-      m,
-      origin ? transformOrigin(origin, transform) : transform
-    );
-  }
-  return undefined;
-};
-
-export const transformOrigin = (origin: Vector, transform: Transforms2d) => [
-  { translateX: origin.x },
-  { translateY: origin.y },
-  ...transform,
-  { translateX: -origin.x },
-  { translateY: -origin.y },
-];