@shopify/react-native-skia 1.7.7 → 1.8.0

package/src/dom/nodes/paint/Shaders.ts

@@ -1,233 +0,0 @@
-import {
-  processUniforms,
-  FilterMode,
-  MipmapMode,
-  TileMode,
-} from "../../../skia/types";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-import type {
-  ColorProps,
-  DeclarationContext,
-  FractalNoiseProps,
-  ImageShaderProps,
-  LinearGradientProps,
-  RadialGradientProps,
-  ShaderProps,
-  SweepGradientProps,
-  TurbulenceProps,
-  TwoPointConicalGradientProps,
-} from "../../types";
-import { NodeType } from "../../types";
-import {
-  enumKey,
-  fitRects,
-  getRect,
-  processGradientProps,
-  processTransformProps,
-  rect2rect,
-} from "../datatypes";
-
-export abstract class ShaderDeclaration<P> extends JsiDeclarationNode<P> {
-  constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, type, props);
-  }
-}
-
-export class ShaderNode extends ShaderDeclaration<ShaderProps> {
-  constructor(ctx: NodeContext, props: ShaderProps) {
-    super(ctx, NodeType.Shader, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    this.decorateChildren(ctx);
-    const { source, uniforms, ...transform } = this.props;
-    const m3 = this.Skia.Matrix();
-    processTransformProps(m3, transform);
-    const shader = source.makeShaderWithChildren(
-      processUniforms(source, uniforms),
-      ctx.shaders.popAll(),
-      m3
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class ImageShaderNode extends ShaderDeclaration<ImageShaderProps> {
-  constructor(ctx: NodeContext, props: ImageShaderProps) {
-    super(ctx, NodeType.ImageShader, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { fit, image, tx, ty, fm, mm, ...imageShaderProps } = this.props;
-    if (!image) {
-      return;
-    }
-
-    const rct = getRect(this.Skia, imageShaderProps);
-    const m3 = this.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 = this.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);
-  }
-}
-
-export class ColorNode extends ShaderDeclaration<ColorProps> {
-  constructor(ctx: NodeContext, props: ColorProps) {
-    super(ctx, NodeType.ColorShader, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { color } = this.props;
-    const shader = this.Skia.Shader.MakeColor(this.Skia.Color(color));
-    ctx.shaders.push(shader);
-  }
-}
-
-export class TurbulenceNode extends ShaderDeclaration<TurbulenceProps> {
-  constructor(ctx: NodeContext, props: TurbulenceProps) {
-    super(ctx, NodeType.Turbulence, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
-    const shader = this.Skia.Shader.MakeTurbulence(
-      freqX,
-      freqY,
-      octaves,
-      seed,
-      tileWidth,
-      tileHeight
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class FractalNoiseNode extends ShaderDeclaration<FractalNoiseProps> {
-  constructor(ctx: NodeContext, props: FractalNoiseProps) {
-    super(ctx, NodeType.FractalNoise, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { freqX, freqY, octaves, seed, tileWidth, tileHeight } = this.props;
-    const shader = this.Skia.Shader.MakeFractalNoise(
-      freqX,
-      freqY,
-      octaves,
-      seed,
-      tileWidth,
-      tileHeight
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class LinearGradientNode extends ShaderDeclaration<LinearGradientProps> {
-  constructor(ctx: NodeContext, props: LinearGradientProps) {
-    super(ctx, NodeType.LinearGradient, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { start, end } = this.props;
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(this.Skia, this.props);
-    const shader = this.Skia.Shader.MakeLinearGradient(
-      start,
-      end,
-      colors,
-      positions ?? null,
-      mode,
-      localMatrix,
-      flags
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class RadialGradientNode extends ShaderDeclaration<RadialGradientProps> {
-  constructor(ctx: NodeContext, props: RadialGradientProps) {
-    super(ctx, NodeType.RadialGradient, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { c, r } = this.props;
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(this.Skia, this.props);
-    const shader = this.Skia.Shader.MakeRadialGradient(
-      c,
-      r,
-      colors,
-      positions,
-      mode,
-      localMatrix,
-      flags
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class SweepGradientNode extends ShaderDeclaration<SweepGradientProps> {
-  constructor(ctx: NodeContext, props: SweepGradientProps) {
-    super(ctx, NodeType.SweepGradient, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { c, start, end } = this.props;
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(this.Skia, this.props);
-    const shader = this.Skia.Shader.MakeSweepGradient(
-      c.x,
-      c.y,
-      colors,
-      positions,
-      mode,
-      localMatrix,
-      flags,
-      start,
-      end
-    );
-    ctx.shaders.push(shader);
-  }
-}
-
-export class TwoPointConicalGradientNode extends ShaderDeclaration<TwoPointConicalGradientProps> {
-  constructor(ctx: NodeContext, props: TwoPointConicalGradientProps) {
-    super(ctx, NodeType.TwoPointConicalGradient, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { startR, endR, start, end } = this.props;
-    const { colors, positions, mode, localMatrix, flags } =
-      processGradientProps(this.Skia, this.props);
-    const shader = this.Skia.Shader.MakeTwoPointConicalGradient(
-      start,
-      startR,
-      end,
-      endR,
-      colors,
-      positions,
-      mode,
-      localMatrix,
-      flags
-    );
-    ctx.shaders.push(shader);
-  }
-}

package/src/dom/nodes/paint/index.ts

@@ -1,6 +0,0 @@
-export * from "./Shaders";
-export * from "./MaskFilters";
-export * from "./ColorFilters";
-export * from "./ImageFilters";
-export * from "./PathEffects";
-export * from "./BlendNode";

package/src/dom/types/DeclarationContext.ts

@@ -1,115 +0,0 @@
-"worklet";
-
-import type {
-  SkShader,
-  SkPaint,
-  SkImageFilter,
-  SkMaskFilter,
-  SkPathEffect,
-  Skia,
-  SkColorFilter,
-} from "../../skia/types";
-
-type Composer<T> = (outer: T, inner: T) => T;
-
-export const composeDeclarations = <T>(filters: T[], composer: Composer<T>) => {
-  if (filters.length <= 1) {
-    return filters[0];
-  }
-  return filters.reverse().reduce((inner, outer) => {
-    if (!inner) {
-      return outer;
-    }
-    return composer(outer, inner);
-  });
-};
-
-class Declaration<T> {
-  private decls: T[] = [];
-  private indexes = [0];
-  private composer?: Composer<T>;
-
-  constructor(composer?: Composer<T>) {
-    this.composer = composer;
-  }
-
-  private get index() {
-    return this.indexes[this.indexes.length - 1];
-  }
-
-  save() {
-    this.indexes.push(this.decls.length);
-  }
-
-  restore() {
-    this.indexes.pop();
-  }
-
-  pop() {
-    return this.decls.pop();
-  }
-
-  push(decl: T) {
-    this.decls.push(decl);
-  }
-
-  popAll() {
-    return this.decls.splice(this.index, this.decls.length - this.index);
-  }
-
-  popAllAsOne() {
-    if (this.decls.length === 0) {
-      return undefined;
-    }
-    if (!this.composer) {
-      throw new Error("No composer for this type of declaration");
-    }
-    const decls = this.popAll();
-    return composeDeclarations(decls, this.composer!);
-  }
-}
-
-export class DeclarationContext {
-  public Skia: Skia;
-  readonly paints: Declaration<SkPaint>;
-  readonly maskFilters: Declaration<SkMaskFilter>;
-  readonly shaders: Declaration<SkShader>;
-  readonly pathEffects: Declaration<SkPathEffect>;
-  readonly imageFilters: Declaration<SkImageFilter>;
-  readonly colorFilters: Declaration<SkColorFilter>;
-
-  constructor(Skia: Skia) {
-    this.Skia = Skia;
-    const peComp = this.Skia.PathEffect.MakeCompose.bind(this.Skia.PathEffect);
-    const ifComp = this.Skia.ImageFilter.MakeCompose.bind(
-      this.Skia.ImageFilter
-    );
-    const cfComp = this.Skia.ColorFilter.MakeCompose.bind(
-      this.Skia.ColorFilter
-    );
-    this.paints = new Declaration<SkPaint>();
-    this.maskFilters = new Declaration<SkMaskFilter>();
-    this.shaders = new Declaration<SkShader>();
-    this.pathEffects = new Declaration<SkPathEffect>(peComp);
-    this.imageFilters = new Declaration<SkImageFilter>(ifComp);
-    this.colorFilters = new Declaration<SkColorFilter>(cfComp);
-  }
-
-  save() {
-    this.paints.save();
-    this.maskFilters.save();
-    this.shaders.save();
-    this.pathEffects.save();
-    this.imageFilters.save();
-    this.colorFilters.save();
-  }
-
-  restore() {
-    this.paints.restore();
-    this.maskFilters.restore();
-    this.shaders.restore();
-    this.pathEffects.restore();
-    this.imageFilters.restore();
-    this.colorFilters.restore();
-  }
-}

package/src/dom/types/DrawingContext.ts

@@ -1,322 +0,0 @@
-import type {
-  SkCanvas,
-  SkColor,
-  SkColorFilter,
-  SkImageFilter,
-  SkMaskFilter,
-  SkPaint,
-  SkPathEffect,
-  SkShader,
-  Skia,
-} from "../../skia/types";
-import { BlendMode, PaintStyle, StrokeCap, StrokeJoin } from "../../skia/types";
-import { enumKey } from "../nodes/datatypes/Enum";
-import { JsiDeclarationNode } from "../nodes/Node";
-
-import type { PaintProps, SkEnum } from "./Common";
-import { DeclarationContext } from "./DeclarationContext";
-import type { Node } from "./Node";
-
-export interface DrawingContext {
-  canvas: SkCanvas;
-  paint: SkPaint;
-  saveAndConcat(node: Node<PaintProps>, cache?: SkPaint): boolean;
-  restore(): void;
-  declarationCtx: DeclarationContext;
-}
-
-export class JsiDrawingContext implements DrawingContext {
-  paints: SkPaint[];
-
-  declarationCtx: DeclarationContext;
-
-  constructor(private readonly Skia: Skia, public readonly canvas: SkCanvas) {
-    const paint = this.Skia.Paint();
-    this.paints = [paint];
-    this.declarationCtx = new DeclarationContext(Skia);
-  }
-
-  get paint() {
-    return this.paints[this.paints.length - 1];
-  }
-
-  private save() {
-    const childPaint = this.paint.copy();
-    this.paints.push(childPaint);
-  }
-
-  restore(): void {
-    this.paints.pop();
-  }
-
-  saveAndConcat(node: Node<PaintProps>, cache?: SkPaint) {
-    if (cache) {
-      this.paints.push(cache);
-      return true;
-    }
-    const paint = new ConcatablePaint(this.Skia, this.declarationCtx, node);
-    if (!paint.isPristine()) {
-      this.save();
-      paint.concatTo(this.paint);
-      return true;
-    }
-    return false;
-  }
-}
-
-class ConcatablePaint {
-  private pristine = true;
-
-  _color?: SkColor;
-  _strokeWidth?: number;
-  _blendMode?: BlendMode;
-  _style?: PaintStyle;
-  _strokeJoin?: StrokeJoin;
-  _strokeCap?: StrokeCap;
-  _strokeMiter?: number;
-  _opacity = 1;
-  _antiAlias?: boolean;
-  _dither?: boolean;
-
-  _imageFilter?: SkImageFilter;
-  _shader?: SkShader;
-  _pathEffect?: SkPathEffect;
-  _colorFilter?: SkColorFilter;
-  _maskFilter?: SkMaskFilter;
-
-  constructor(Skia: Skia, declCtx: DeclarationContext, node: Node<PaintProps>) {
-    const props = node.getProps();
-    const children = node.children();
-    this.setColor(
-      props.color !== undefined ? Skia.Color(props.color) : props.color
-    );
-    this.setStrokeWidth(props.strokeWidth);
-    this.setBlendMode(props.blendMode);
-    this.setStyle(props.style);
-    this.setStrokeJoin(props.strokeJoin);
-    this.setStrokeCap(props.strokeCap);
-    this.setStrokeMiter(props.strokeMiter);
-    this.setOpacity(props.opacity);
-    this.setAntiAlias(props.antiAlias);
-    this.setDither(props.dither);
-    declCtx.save();
-    children.forEach((child) => {
-      if (child instanceof JsiDeclarationNode) {
-        child.decorate(declCtx);
-      }
-    });
-    const colorFilter = declCtx.colorFilters.popAllAsOne();
-    const imageFilter = declCtx.imageFilters.popAllAsOne();
-    const shader = declCtx.shaders.pop();
-    const maskFilter = declCtx.maskFilters.pop();
-    const pathEffect = declCtx.pathEffects.popAllAsOne();
-    declCtx.restore();
-    if (imageFilter) {
-      this.setImageFilter(imageFilter);
-    }
-    if (shader) {
-      this.setShader(shader);
-    }
-    if (pathEffect) {
-      this.setPathEffect(pathEffect);
-    }
-    if (colorFilter) {
-      this.setColorFilter(colorFilter);
-    }
-    if (maskFilter) {
-      this.setMaskFilter(maskFilter);
-    }
-  }
-
-  private enum<T>(value: T, key?: Uncapitalize<string>) {
-    if (key !== undefined) {
-      return value[enumKey(key) as keyof T];
-    }
-    return undefined;
-  }
-
-  private setValue<T extends keyof typeof this>(
-    key: T,
-    value?: (typeof this)[T]
-  ) {
-    if (value !== undefined) {
-      this[key] = value;
-      this.pristine = false;
-    }
-  }
-
-  setColor(color?: SkColor) {
-    this.setValue("_color", color);
-  }
-
-  getColor() {
-    return this._color;
-  }
-
-  setStrokeWidth(strokeWidth?: number) {
-    this.setValue("_strokeWidth", strokeWidth);
-  }
-
-  getStrokeWidth() {
-    return this._strokeWidth;
-  }
-
-  setBlendMode(blendMode?: SkEnum<typeof BlendMode>) {
-    this.setValue("_blendMode", this.enum(BlendMode, blendMode));
-  }
-
-  getBlendMode() {
-    return this._blendMode;
-  }
-
-  setStyle(style?: SkEnum<typeof PaintStyle>) {
-    this.setValue("_style", this.enum(PaintStyle, style));
-  }
-
-  getStyle() {
-    return this._style;
-  }
-
-  setStrokeJoin(strokeJoin?: SkEnum<typeof StrokeJoin>) {
-    this.setValue("_strokeJoin", this.enum(StrokeJoin, strokeJoin));
-  }
-
-  getStrokeJoin() {
-    return this._strokeJoin;
-  }
-
-  setStrokeCap(strokeCap?: SkEnum<typeof StrokeCap>) {
-    this.setValue("_strokeCap", this.enum(StrokeCap, strokeCap));
-  }
-
-  getStrokeCap() {
-    return this._strokeCap;
-  }
-
-  setStrokeMiter(strokeMiter?: number) {
-    this.setValue("_strokeMiter", strokeMiter);
-  }
-
-  getStrokeMiter() {
-    return this._strokeMiter;
-  }
-
-  setOpacity(opacity?: number) {
-    this.setValue("_opacity", opacity);
-  }
-
-  getOpacity() {
-    return this._opacity;
-  }
-
-  setAntiAlias(antiAlias?: boolean) {
-    this.setValue("_antiAlias", antiAlias);
-  }
-
-  getAntiAlias() {
-    return this._antiAlias;
-  }
-
-  setDither(dither?: boolean) {
-    this.setValue("_dither", dither);
-  }
-
-  getDither() {
-    return this._dither;
-  }
-
-  setImageFilter(imageFilter?: SkImageFilter) {
-    this.setValue("_imageFilter", imageFilter);
-  }
-
-  getImageFilter() {
-    return this._imageFilter;
-  }
-
-  setShader(shader?: SkShader) {
-    this.setValue("_shader", shader);
-  }
-
-  getShader() {
-    return this._shader;
-  }
-
-  setPathEffect(pathEffect?: SkPathEffect) {
-    this.setValue("_pathEffect", pathEffect);
-  }
-
-  getPathEffect() {
-    return this._pathEffect;
-  }
-
-  setColorFilter(colorFilter?: SkColorFilter) {
-    this.setValue("_colorFilter", colorFilter);
-  }
-
-  getColorFilter() {
-    return this._colorFilter;
-  }
-
-  setMaskFilter(maskFilter?: SkMaskFilter) {
-    this.setValue("_maskFilter", maskFilter);
-  }
-
-  getMaskFilter() {
-    return this._maskFilter;
-  }
-
-  isPristine() {
-    return this.pristine;
-  }
-
-  concatTo(paint: SkPaint) {
-    if (this._opacity !== undefined) {
-      paint.setAlphaf(paint.getAlphaf() * this._opacity);
-    }
-    if (this._color !== undefined) {
-      const currentOpacity = paint.getAlphaf();
-      paint.setShader(null);
-      paint.setColor(this._color);
-      paint.setAlphaf(currentOpacity * paint.getAlphaf());
-    }
-    if (this._strokeWidth !== undefined) {
-      paint.setStrokeWidth(this._strokeWidth);
-    }
-    if (this._blendMode !== undefined) {
-      paint.setBlendMode(this._blendMode);
-    }
-    if (this._style !== undefined) {
-      paint.setStyle(this._style);
-    }
-    if (this._strokeJoin !== undefined) {
-      paint.setStrokeJoin(this._strokeJoin);
-    }
-    if (this._strokeCap !== undefined) {
-      paint.setStrokeCap(this._strokeCap);
-    }
-    if (this._strokeMiter !== undefined) {
-      paint.setStrokeMiter(this._strokeMiter);
-    }
-    if (this._antiAlias !== undefined) {
-      paint.setAntiAlias(this._antiAlias);
-    }
-    if (this._dither !== undefined) {
-      paint.setDither(this._dither);
-    }
-    if (this._imageFilter !== undefined) {
-      paint.setImageFilter(this._imageFilter);
-    }
-    if (this._shader !== undefined) {
-      paint.setShader(this._shader);
-    }
-    if (this._pathEffect !== undefined) {
-      paint.setPathEffect(this._pathEffect);
-    }
-    if (this._colorFilter !== undefined) {
-      paint.setColorFilter(this._colorFilter);
-    }
-    if (this._maskFilter !== undefined) {
-      paint.setMaskFilter(this._maskFilter);
-    }
-  }
-}

package/src/renderer/DrawingContext.ts

@@ -1,8 +0,0 @@
-import type { DrawingInfo } from "../views";
-import type { Skia, SkCanvas, SkPaint } from "../skia/types";
-
-export interface DrawingContext extends Omit<DrawingInfo, "touches"> {
-  Skia: Skia;
-  canvas: SkCanvas;
-  paint: SkPaint;
-}