@shopify/react-native-skia 1.7.7 → 1.8.1

package/src/dom/nodes/drawings/RRectNode.ts

@@ -1,25 +0,0 @@
-import type { InputRRect, SkRRect } from "../../../skia/types";
-import type { DrawingContext, RoundedRectProps } from "../../types";
-import { NodeType } from "../../types";
-import { processRRect } from "../datatypes";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-
-export class RRectNode extends JsiDrawingNode<RoundedRectProps, InputRRect> {
-  rect?: SkRRect;
-
-  constructor(ctx: NodeContext, props: RoundedRectProps) {
-    super(ctx, NodeType.RRect, props);
-  }
-
-  protected deriveProps() {
-    return processRRect(this.Skia, this.props);
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    if (this.derived === undefined) {
-      throw new Error("RRectNode: rect is undefined");
-    }
-    canvas.drawRRect(this.derived, paint);
-  }
-}

package/src/dom/nodes/drawings/RectNode.ts

@@ -1,23 +0,0 @@
-import type { SkRect } from "../../../skia/types/Rect";
-import type { DrawingContext, RectProps } from "../../types";
-import { NodeType } from "../../types";
-import { processRect } from "../datatypes";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-
-export class RectNode extends JsiDrawingNode<RectProps, SkRect> {
-  constructor(ctx: NodeContext, props: RectProps) {
-    super(ctx, NodeType.Rect, props);
-  }
-
-  deriveProps() {
-    return processRect(this.Skia, this.props);
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    if (this.derived === undefined) {
-      throw new Error("RectNode: rect is undefined");
-    }
-    canvas.drawRect(this.derived, paint);
-  }
-}

package/src/dom/nodes/drawings/Text.ts

@@ -1,145 +0,0 @@
-import type {
-  SkRSXform,
-  SkTextBlob,
-  SkPoint,
-  SkFont,
-} from "../../../skia/types";
-import type {
-  DrawingContext,
-  TextBlobProps,
-  TextPathProps,
-  TextProps,
-} from "../../types";
-import { NodeType } from "../../types";
-import { processPath } from "../datatypes";
-import type { GlyphsProps } from "../../types/Drawings";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-
-export class TextNode extends JsiDrawingNode<TextProps, SkFont | null> {
-  constructor(ctx: NodeContext, props: TextProps) {
-    super(ctx, NodeType.Text, props);
-  }
-
-  protected deriveProps() {
-    const { font } = this.props;
-    if (!font) {
-      return null;
-    }
-    return font;
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    const { text, x, y } = this.props;
-    const font = this.derived;
-    if (font === undefined) {
-      throw new Error("TextNode: font hasn't been derived");
-    }
-    if (font != null) {
-      canvas.drawText(text, x, y, paint, font);
-    }
-  }
-}
-
-export class TextPathNode extends JsiDrawingNode<
-  TextPathProps,
-  SkTextBlob | null
-> {
-  constructor(ctx: NodeContext, props: TextPathProps) {
-    super(ctx, NodeType.TextPath, props);
-  }
-
-  deriveProps() {
-    const path = processPath(this.Skia, this.props.path);
-    const { font, initialOffset } = this.props;
-    if (!font) {
-      return null;
-    }
-    let { text } = this.props;
-    const ids = font.getGlyphIDs(text);
-    const widths = font.getGlyphWidths(ids);
-    const rsx: SkRSXform[] = [];
-    const meas = this.Skia.ContourMeasureIter(path, false, 1);
-    let cont = meas.next();
-    let dist = initialOffset;
-    for (let i = 0; i < text.length && cont; i++) {
-      const width = widths[i];
-      dist += width / 2;
-      if (dist > cont.length()) {
-        // jump to next contour
-        cont = meas.next();
-        if (!cont) {
-          // We have come to the end of the path - terminate the string
-          // right here.
-          text = text.substring(0, i);
-          break;
-        }
-        dist = width / 2;
-      }
-      // Gives us the (x, y) coordinates as well as the cos/sin of the tangent
-      // line at that position.
-      const [p, t] = cont.getPosTan(dist);
-      const adjustedX = p.x - (width / 2) * t.x;
-      const adjustedY = p.y - (width / 2) * t.y;
-      rsx.push(this.Skia.RSXform(t.x, t.y, adjustedX, adjustedY));
-      dist += width / 2;
-    }
-    return this.Skia.TextBlob.MakeFromRSXform(text, rsx, font);
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    if (!this.derived) {
-      throw new Error("TextPathNode: blob is null");
-    }
-    canvas.drawTextBlob(this.derived, 0, 0, paint);
-  }
-}
-
-export class TextBlobNode extends JsiDrawingNode<TextBlobProps, null> {
-  constructor(ctx: NodeContext, props: TextBlobProps) {
-    super(ctx, NodeType.TextBlob, props);
-  }
-
-  protected deriveProps() {
-    return null;
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    const { blob, x, y } = this.props;
-    canvas.drawTextBlob(blob, x, y, paint);
-  }
-}
-
-interface ProcessedGlyphs {
-  glyphs: number[];
-  positions: SkPoint[];
-}
-
-export class GlyphsNode extends JsiDrawingNode<GlyphsProps, ProcessedGlyphs> {
-  constructor(ctx: NodeContext, props: GlyphsProps) {
-    super(ctx, NodeType.Glyphs, props);
-  }
-
-  deriveProps() {
-    return this.props.glyphs.reduce<ProcessedGlyphs>(
-      (acc, glyph) => {
-        const { id, pos } = glyph;
-        acc.glyphs.push(id);
-        acc.positions.push(pos);
-        return acc;
-      },
-      { glyphs: [], positions: [] }
-    );
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    if (!this.derived) {
-      throw new Error("GlyphsNode: processedGlyphs is null");
-    }
-    const { glyphs, positions } = this.derived;
-    const { x, y, font } = this.props;
-    if (font) {
-      canvas.drawGlyphs(glyphs, positions, x, y, font, paint);
-    }
-  }
-}

package/src/dom/nodes/drawings/VerticesNode.ts

@@ -1,35 +0,0 @@
-import type { SkVertices } from "../../../skia/types";
-import { VertexMode, BlendMode } from "../../../skia/types";
-import type { DrawingContext, VerticesProps } from "../../types";
-import { NodeType } from "../../types";
-import { enumKey } from "../datatypes";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-
-export class VerticesNode extends JsiDrawingNode<VerticesProps, SkVertices> {
-  constructor(ctx: NodeContext, props: VerticesProps) {
-    super(ctx, NodeType.Vertices, props);
-  }
-
-  protected deriveProps() {
-    const { mode, vertices, textures, colors, indices } = this.props;
-    const vertexMode = mode ? VertexMode[enumKey(mode)] : VertexMode.Triangles;
-    return this.Skia.MakeVertices(
-      vertexMode,
-      vertices,
-      textures,
-      colors ? colors.map((c) => this.Skia.Color(c)) : undefined,
-      indices
-    );
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    const { colors, blendMode } = this.props;
-    const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
-    const blend = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
-    if (this.derived === undefined) {
-      throw new Error("VerticesNode: vertices is undefined");
-    }
-    canvas.drawVertices(this.derived, blend, paint);
-  }
-}

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

@@ -1,18 +0,0 @@
-export * from "./AtlasNode";
-export * from "./CircleNode";
-export * from "./FillNode";
-export * from "./ImageNode";
-export * from "./PointsNode";
-export * from "./PathNode";
-export * from "./RectNode";
-export * from "./RRectNode";
-export * from "./OvalNode";
-export * from "./LineNode";
-export * from "./PatchNode";
-export * from "./VerticesNode";
-export * from "./Text";
-export * from "./PictureNode";
-export * from "./DiffRectNode";
-export * from "./ImageSVG";
-export * from "./BackdropFilterNode";
-export * from "./Box";

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

@@ -1,32 +0,0 @@
-import type { BlendProps } from "../../types/ImageFilters";
-import { BlendMode } from "../../../skia/types";
-import { NodeType } from "../../types/NodeType";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-import { enumKey } from "../datatypes";
-import type { DeclarationContext } from "../../types/DeclarationContext";
-import { composeDeclarations } from "../../types/DeclarationContext";
-
-export class BlendNode extends JsiDeclarationNode<BlendProps> {
-  constructor(ctx: NodeContext, props: BlendProps) {
-    super(ctx, NodeType.Blend, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    this.decorateChildren(ctx);
-    const { Skia } = this;
-    const blend = BlendMode[enumKey(this.props.mode)];
-    // Blend ImageFilters
-    const imageFilters = ctx.imageFilters.popAll();
-    if (imageFilters.length > 0) {
-      const composer = Skia.ImageFilter.MakeBlend.bind(Skia.ImageFilter, blend);
-      ctx.imageFilters.push(composeDeclarations(imageFilters, composer));
-    }
-    // Blend Shaders
-    const shaders = ctx.shaders.popAll();
-    if (shaders.length > 0) {
-      const composer = Skia.Shader.MakeBlend.bind(Skia.Shader, blend);
-      ctx.shaders.push(composeDeclarations(shaders, composer));
-    }
-  }
-}

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

@@ -1,106 +0,0 @@
-import type { SkColorFilter } from "../../../skia/types";
-import { BlendMode } from "../../../skia/types";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-import type {
-  BlendColorFilterProps,
-  MatrixColorFilterProps,
-} from "../../types";
-import { NodeType } from "../../types";
-import { enumKey } from "../datatypes/Enum";
-import type { LerpColorFilterProps } from "../../types/ColorFilters";
-import type { DeclarationContext } from "../../types/DeclarationContext";
-
-export abstract class ColorFilterDeclaration<P> extends JsiDeclarationNode<P> {
-  constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, type, props);
-  }
-
-  protected composeAndPush(ctx: DeclarationContext, cf1: SkColorFilter) {
-    ctx.save();
-    this.decorateChildren(ctx);
-    const cf2 = ctx.colorFilters.popAllAsOne();
-    ctx.restore();
-    const cf = cf2 ? this.Skia.ColorFilter.MakeCompose(cf1, cf2) : cf1;
-    ctx.colorFilters.push(cf);
-  }
-}
-
-export class MatrixColorFilterNode extends ColorFilterDeclaration<MatrixColorFilterProps> {
-  constructor(ctx: NodeContext, props: MatrixColorFilterProps) {
-    super(ctx, NodeType.MatrixColorFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { matrix } = this.props;
-    const cf = this.Skia.ColorFilter.MakeMatrix(matrix);
-    this.composeAndPush(ctx, cf);
-  }
-}
-
-export class BlendColorFilterNode extends ColorFilterDeclaration<BlendColorFilterProps> {
-  constructor(ctx: NodeContext, props: BlendColorFilterProps) {
-    super(ctx, NodeType.BlendColorFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { mode } = this.props;
-    const color = this.Skia.Color(this.props.color);
-    const cf = this.Skia.ColorFilter.MakeBlend(color, BlendMode[enumKey(mode)]);
-    this.composeAndPush(ctx, cf);
-  }
-}
-
-export class LinearToSRGBGammaColorFilterNode extends ColorFilterDeclaration<null> {
-  constructor(ctx: NodeContext) {
-    super(ctx, NodeType.LinearToSRGBGammaColorFilter, null);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const cf = this.Skia.ColorFilter.MakeLinearToSRGBGamma();
-    this.composeAndPush(ctx, cf);
-  }
-}
-
-export class SRGBToLinearGammaColorFilterNode extends ColorFilterDeclaration<null> {
-  constructor(ctx: NodeContext) {
-    super(ctx, NodeType.SRGBToLinearGammaColorFilter, null);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const cf = this.Skia.ColorFilter.MakeSRGBToLinearGamma();
-    this.composeAndPush(ctx, cf);
-  }
-}
-
-export class LumaColorFilterNode extends ColorFilterDeclaration<null> {
-  constructor(ctx: NodeContext) {
-    super(ctx, NodeType.LumaColorFilter, null);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const cf = this.Skia.ColorFilter.MakeLumaColorFilter();
-    this.composeAndPush(ctx, cf);
-  }
-}
-
-export class LerpColorFilterNode extends ColorFilterDeclaration<LerpColorFilterProps> {
-  constructor(ctx: NodeContext, props: LerpColorFilterProps) {
-    super(ctx, NodeType.LerpColorFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    ctx.save();
-    this.decorateChildren(ctx);
-    const { t } = this.props;
-    const second = ctx.colorFilters.pop();
-    const first = ctx.colorFilters.pop();
-    ctx.restore();
-    if (!first || !second) {
-      throw new Error(
-        "LerpColorFilterNode: missing two color filters as children"
-      );
-    }
-    ctx.colorFilters.push(this.Skia.ColorFilter.MakeLerp(t, first, second));
-  }
-}

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

@@ -1,221 +0,0 @@
-import type { SkImageFilter, SkColor, Skia } from "../../../skia/types";
-import {
-  BlendMode,
-  ColorChannel,
-  processUniforms,
-  TileMode,
-} from "../../../skia/types";
-import type {
-  BlendImageFilterProps,
-  BlurImageFilterProps,
-  DeclarationContext,
-  DisplacementMapImageFilterProps,
-  DropShadowImageFilterProps,
-  MorphologyImageFilterProps,
-  OffsetImageFilterProps,
-  RuntimeShaderImageFilterProps,
-} from "../../types";
-import { NodeType } from "../../types";
-import { processRadius, enumKey } from "../datatypes";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-
-const Black = Float32Array.of(0, 0, 0, 1);
-
-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)
-  );
-};
-
-export abstract class ImageFilterDeclaration<P> extends JsiDeclarationNode<P> {
-  constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, type, props);
-  }
-
-  protected input(ctx: DeclarationContext) {
-    return ctx.imageFilters.pop() ?? null;
-  }
-
-  protected composeAndPush(ctx: DeclarationContext, imgf1: SkImageFilter) {
-    ctx.save();
-    this.decorateChildren(ctx);
-    let imgf2 = ctx.imageFilters.popAllAsOne();
-    const cf = ctx.colorFilters.popAllAsOne();
-    ctx.restore();
-    if (cf) {
-      imgf2 = this.Skia.ImageFilter.MakeCompose(
-        imgf2 ?? null,
-        this.Skia.ImageFilter.MakeColorFilter(cf, null)
-      );
-    }
-    const imgf = imgf2
-      ? this.Skia.ImageFilter.MakeCompose(imgf1, imgf2)
-      : imgf1;
-    ctx.imageFilters.push(imgf);
-  }
-}
-
-export class OffsetImageFilterNode extends ImageFilterDeclaration<OffsetImageFilterProps> {
-  constructor(ctx: NodeContext, props: OffsetImageFilterProps) {
-    super(ctx, NodeType.OffsetImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    this.decorateChildren(ctx);
-    const { x, y } = this.props;
-    const imgf = this.Skia.ImageFilter.MakeOffset(x, y, null);
-    this.composeAndPush(ctx, imgf);
-  }
-}
-
-export class DisplacementMapImageFilterNode extends ImageFilterDeclaration<DisplacementMapImageFilterProps> {
-  constructor(ctx: NodeContext, props: DisplacementMapImageFilterProps) {
-    super(ctx, NodeType.DisplacementMapImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    this.decorateChildren(ctx);
-    const { channelX, channelY, scale } = this.props;
-    const shader = ctx.shaders.pop();
-    if (!shader) {
-      throw new Error("DisplacementMap expects a shader as child");
-    }
-    const map = this.Skia.ImageFilter.MakeShader(shader, null);
-    const imgf = this.Skia.ImageFilter.MakeDisplacementMap(
-      ColorChannel[enumKey(channelX)],
-      ColorChannel[enumKey(channelY)],
-      scale,
-      map,
-      this.input(ctx)
-    );
-    ctx.imageFilters.push(imgf);
-  }
-}
-
-export class BlurImageFilterNode extends ImageFilterDeclaration<BlurImageFilterProps> {
-  constructor(ctx: NodeContext, props: BlurImageFilterProps) {
-    super(ctx, NodeType.BlurImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { mode, blur } = this.props;
-    const sigma = processRadius(this.Skia, blur);
-    const imgf = this.Skia.ImageFilter.MakeBlur(
-      sigma.x,
-      sigma.y,
-      TileMode[enumKey(mode)],
-      this.input(ctx)
-    );
-    this.composeAndPush(ctx, imgf);
-  }
-}
-
-export class DropShadowImageFilterNode extends ImageFilterDeclaration<DropShadowImageFilterProps> {
-  constructor(ctx: NodeContext, props: DropShadowImageFilterProps) {
-    super(ctx, NodeType.DropShadowImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { dx, dy, blur, shadowOnly, color: cl, inner } = this.props;
-    const color = this.Skia.Color(cl);
-    let factory;
-    if (inner) {
-      factory = MakeInnerShadow.bind(null, this.Skia, shadowOnly);
-    } else {
-      factory = shadowOnly
-        ? this.Skia.ImageFilter.MakeDropShadowOnly.bind(this.Skia.ImageFilter)
-        : this.Skia.ImageFilter.MakeDropShadow.bind(this.Skia.ImageFilter);
-    }
-    const imgf = factory(dx, dy, blur, blur, color, this.input(ctx));
-    this.composeAndPush(ctx, imgf);
-  }
-}
-
-export enum MorphologyOperator {
-  Erode,
-  Dilate,
-}
-
-export class MorphologyImageFilterNode extends ImageFilterDeclaration<MorphologyImageFilterProps> {
-  constructor(ctx: NodeContext, props: MorphologyImageFilterProps) {
-    super(ctx, NodeType.MorphologyImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { operator } = this.props;
-    const r = processRadius(this.Skia, this.props.radius);
-    let imgf;
-    if (MorphologyOperator[enumKey(operator)] === MorphologyOperator.Erode) {
-      imgf = this.Skia.ImageFilter.MakeErode(r.x, r.y, this.input(ctx));
-    } else {
-      imgf = this.Skia.ImageFilter.MakeDilate(r.x, r.y, this.input(ctx));
-    }
-    this.composeAndPush(ctx, imgf);
-  }
-}
-
-export class BlendImageFilterNode extends ImageFilterDeclaration<BlendImageFilterProps> {
-  constructor(ctx: NodeContext, props: BlendImageFilterProps) {
-    super(ctx, NodeType.BlendImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { mode } = this.props;
-    const a = ctx.imageFilters.pop();
-    const b = ctx.imageFilters.pop();
-    if (!a || !b) {
-      throw new Error("BlendImageFilter requires two image filters");
-    }
-    const imgf = this.Skia.ImageFilter.MakeBlend(mode, a, b);
-    this.composeAndPush(ctx, imgf);
-  }
-}
-
-export class RuntimeShaderImageFilterNode extends ImageFilterDeclaration<RuntimeShaderImageFilterProps> {
-  constructor(ctx: NodeContext, props: RuntimeShaderImageFilterProps) {
-    super(ctx, NodeType.RuntimeShaderImageFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { source, uniforms } = this.props;
-    const rtb = this.Skia.RuntimeShaderBuilder(source);
-    if (uniforms) {
-      processUniforms(source, uniforms, rtb);
-    }
-    const imgf = this.Skia.ImageFilter.MakeRuntimeShader(
-      rtb,
-      null,
-      this.input(ctx)
-    );
-    this.composeAndPush(ctx, imgf);
-  }
-}

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

@@ -1,23 +0,0 @@
-import { BlurStyle } from "../../../skia/types";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-import type { BlurMaskFilterProps } from "../../types";
-import { NodeType } from "../../types";
-import { enumKey } from "../datatypes";
-import type { DeclarationContext } from "../../types/DeclarationContext";
-
-export class BlurMaskFilterNode extends JsiDeclarationNode<BlurMaskFilterProps> {
-  constructor(ctx: NodeContext, props: BlurMaskFilterProps) {
-    super(ctx, NodeType.BlurMaskFilter, props);
-  }
-
-  decorate(ctx: DeclarationContext) {
-    const { style, blur, respectCTM } = this.props;
-    const mf = this.Skia.MaskFilter.MakeBlur(
-      BlurStyle[enumKey(style)],
-      blur,
-      respectCTM
-    );
-    ctx.maskFilters.push(mf);
-  }
-}