@shopify/react-native-skia 0.1.146 → 0.1.148

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

@@ -0,0 +1,21 @@
+import type { CustomDrawingNodeProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class CustomDrawingNode extends JsiDrawingNode<
+  CustomDrawingNodeProps,
+  null
+> {
+  constructor(ctx: NodeContext, props: CustomDrawingNodeProps) {
+    super(ctx, NodeType.Drawing, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw(ctx: DrawingContext) {
+    this.props.drawing(ctx);
+  }
+}

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

@@ -0,0 +1,19 @@
+import type { DiffRectProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class DiffRectNode extends JsiDrawingNode<DiffRectProps, null> {
+  constructor(ctx: NodeContext, props: DiffRectProps) {
+    super(ctx, NodeType.DiffRect, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { outer, inner } = this.props;
+    canvas.drawDRRect(outer, inner, paint);
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { DrawingContext, DrawingNodeProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class FillNode extends JsiDrawingNode<DrawingNodeProps, null> {
+  constructor(ctx: NodeContext, props: DrawingNodeProps = {}) {
+    super(ctx, NodeType.Fill, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    canvas.drawPaint(paint);
+  }
+}

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

@@ -0,0 +1,40 @@
+import type { SkRect } from "../../../skia/types";
+import type { DrawingContext, ImageProps } from "../../types";
+import { NodeType } from "../../types";
+import { fitRects, processRect } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class ImageNode extends JsiDrawingNode<
+  ImageProps,
+  { src: SkRect; dst: SkRect }
+> {
+  constructor(ctx: NodeContext, props: ImageProps) {
+    super(ctx, NodeType.Image, props);
+  }
+
+  deriveProps() {
+    const { image, fit } = this.props;
+    const rect = processRect(this.Skia, this.props);
+    const { src, dst } = fitRects(
+      fit,
+      {
+        x: 0,
+        y: 0,
+        width: image.width(),
+        height: image.height(),
+      },
+      rect
+    );
+    return { src, dst };
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { image } = this.props;
+    if (!this.derived) {
+      throw new Error("ImageNode: src and dst are undefined");
+    }
+    const { src, dst } = this.derived;
+    canvas.drawImageRect(image, src, dst, paint);
+  }
+}

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

@@ -0,0 +1,24 @@
+import type { DrawingContext, ImageSVGProps } from "../../types";
+import { NodeType } from "../../types";
+import { processRect } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class ImageSVGNode extends JsiDrawingNode<ImageSVGProps, null> {
+  constructor(ctx: NodeContext, props: ImageSVGProps) {
+    super(ctx, NodeType.ImageSVG, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const { svg } = this.props;
+    const { x, y, width, height } = processRect(this.Skia, this.props);
+    canvas.save();
+    canvas.translate(x, y);
+    canvas.drawSvg(svg, width, height);
+    canvas.restore();
+  }
+}

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

@@ -0,0 +1,19 @@
+import type { DrawingContext, LineProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class LineNode extends JsiDrawingNode<LineProps, null> {
+  constructor(ctx: NodeContext, props: LineProps) {
+    super(ctx, NodeType.Line, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { p1, p2 } = this.props;
+    canvas.drawLine(p1.x, p1.y, p2.x, p2.y, paint);
+  }
+}

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

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

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

@@ -0,0 +1,68 @@
+import type { SkColor, SkPoint } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
+import type { DrawingContext, PatchProps } from "../../types";
+import { NodeType } from "../../types";
+import { ALPHA, enumKey, processColor } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class PatchNode extends JsiDrawingNode<
+  PatchProps,
+  { points: SkPoint[]; colors: SkColor[] | undefined; mode: BlendMode }
+> {
+  constructor(ctx: NodeContext, props: PatchProps) {
+    super(ctx, NodeType.Patch, props);
+  }
+
+  deriveProps() {
+    const { colors, blendMode, patch } = this.props;
+    const defaultBlendMode = colors ? BlendMode.DstOver : BlendMode.SrcOver;
+    const mode = blendMode ? BlendMode[enumKey(blendMode)] : defaultBlendMode;
+    // Patch requires a path with the following constraints:
+    // M tl
+    // C c1 c2 br
+    // C c1 c2 bl
+    // C c1 c2 tl (the redundant point in the last command is removed)
+    return {
+      mode,
+      points: [
+        patch[0].pos,
+        patch[0].c2,
+        patch[1].c1,
+        patch[1].pos,
+        patch[1].c2,
+        patch[2].c1,
+        patch[2].pos,
+        patch[2].c2,
+        patch[3].c1,
+        patch[3].pos,
+        patch[3].c2,
+        patch[0].c1,
+      ],
+      colors: colors
+        ? colors.map((c) => processColor(this.Skia, c, 1))
+        : undefined,
+    };
+  }
+
+  draw({ canvas, paint, opacity }: DrawingContext) {
+    if (!this.derived) {
+      throw new Error("PatchNode: derived props not set");
+    }
+    const { texture } = this.props;
+    const { colors, points, mode } = this.derived;
+    canvas.drawPatch(
+      points,
+      opacity === 1
+        ? colors
+        : colors &&
+            colors.map((c) => {
+              c[ALPHA] = c[ALPHA] * opacity;
+              return c;
+            }),
+      texture,
+      mode,
+      paint
+    );
+  }
+}

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

@@ -0,0 +1,42 @@
+import { FillType } from "../../../skia/types";
+import type { SkPath } from "../../../skia/types";
+import type { DrawingContext, PathProps } from "../../types";
+import { NodeType } from "../../types";
+import { enumKey, processPath } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class PathNode extends JsiDrawingNode<PathProps, SkPath> {
+  constructor(ctx: NodeContext, props: PathProps) {
+    super(ctx, NodeType.Path, props);
+  }
+
+  protected deriveProps() {
+    const { start, end, fillType, stroke, ...pathProps } = this.props;
+    const hasStartOffset = start !== 0;
+    const hasEndOffset = end !== 1;
+    const hasStrokeOptions = stroke !== undefined;
+    const hasFillType = !!fillType;
+    const willMutatePath =
+      hasStartOffset || hasEndOffset || hasStrokeOptions || hasFillType;
+    const pristinePath = processPath(this.Skia, pathProps.path);
+    const path = willMutatePath ? pristinePath.copy() : pristinePath;
+    if (hasFillType) {
+      path.setFillType(FillType[enumKey(fillType)]);
+    }
+    if (hasStrokeOptions) {
+      path.stroke(stroke);
+    }
+    if (hasStartOffset || hasEndOffset) {
+      path.trim(start, end, false);
+    }
+    return path;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    if (!this.derived) {
+      throw new Error("Path not initialized");
+    }
+    canvas.drawPath(this.derived, paint);
+  }
+}

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

@@ -0,0 +1,19 @@
+import type { DrawingContext, PictureProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class PictureNode extends JsiDrawingNode<PictureProps, null> {
+  constructor(ctx: NodeContext, props: PictureProps) {
+    super(ctx, NodeType.Picture, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const { picture } = this.props;
+    canvas.drawPicture(picture);
+  }
+}

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

@@ -0,0 +1,21 @@
+import { PointMode } from "../../../skia/types";
+import type { DrawingContext, PointsProps } from "../../types";
+import { NodeType } from "../../types";
+import { enumKey } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class PointsNode extends JsiDrawingNode<PointsProps, null> {
+  constructor(ctx: NodeContext, props: PointsProps) {
+    super(ctx, NodeType.Points, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { points, mode } = this.props;
+    canvas.drawPoints(PointMode[enumKey(mode)], points, paint);
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { 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, SkRRect> {
+  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

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

@@ -0,0 +1,122 @@
+import type { SkRSXform, SkTextBlob, SkPoint } 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, null> {
+  constructor(ctx: NodeContext, props: TextProps) {
+    super(ctx, NodeType.Text, props);
+  }
+
+  protected deriveProps() {
+    return null;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    const { text, x, y, font } = this.props;
+    canvas.drawText(text, x, y, paint, font);
+  }
+}
+
+export class TextPathNode extends JsiDrawingNode<TextPathProps, SkTextBlob> {
+  constructor(ctx: NodeContext, props: TextPathProps) {
+    super(ctx, NodeType.TextPath, props);
+  }
+
+  deriveProps() {
+    const path = processPath(this.Skia, this.props.path);
+    const { font, initialOffset } = this.props;
+    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 { px, py, tx, ty } = cont.getPosTan(dist);
+      const adjustedX = px - (width / 2) * tx;
+      const adjustedY = py - (width / 2) * ty;
+      rsx.push(this.Skia.RSXform(tx, ty, 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;
+    canvas.drawGlyphs(glyphs, positions, x, y, font, paint);
+  }
+}

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

@@ -0,0 +1,35 @@
+import type { SkVertices } from "../../../skia/types";
+import { VertexMode, BlendMode } from "../../../skia/types";
+import type { DrawingContext, VerticesProps } from "../../types";
+import { NodeType } from "../../types";
+import { enumKey, processColor } 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) => processColor(this.Skia, c, 1)) : 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

@@ -0,0 +1,18 @@
+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 "./CustomDrawingNode";
+export * from "./Text";
+export * from "./PictureNode";
+export * from "./DiffRectNode";
+export * from "./ImageSVG";
+export * from "./BackdropFilterNode";
+export * from "./Box";

package/src/dom/nodes/index.ts

@@ -0,0 +1,3 @@
+export * from "../types";
+export * from "./JsiSkDOM";
+export * from "./datatypes";

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

@@ -0,0 +1,79 @@
+import type { BlendProps } from "../../types/ImageFilters";
+import type { SkShader, SkImageFilter } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
+import { DeclarationType, NodeType } from "../../types/NodeType";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import type { Node } from "../../types";
+import { enumKey } from "../datatypes";
+
+import { ImageFilterDeclaration } from "./ImageFilters";
+import { ShaderDeclaration } from "./Shaders";
+
+export class BlendNode extends JsiDeclarationNode<
+  BlendProps,
+  SkShader | SkImageFilter
+> {
+  constructor(ctx: NodeContext, props: BlendProps) {
+    super(ctx, DeclarationType.ImageFilter, NodeType.Blend, props);
+  }
+
+  private checkChild(
+    child: ImageFilterDeclaration<unknown> | ShaderDeclaration<unknown>
+  ) {
+    if (this._children.length > 0) {
+      if (child.declarationType === DeclarationType.ImageFilter) {
+        this.declarationType = DeclarationType.ImageFilter;
+      } else {
+        this.declarationType = DeclarationType.Shader;
+      }
+    }
+  }
+
+  addChild(child: Node<unknown>) {
+    if (
+      !(child instanceof JsiDeclarationNode) ||
+      (child.declarationType !== DeclarationType.Shader &&
+        child.declarationType !== DeclarationType.ImageFilter)
+    ) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    this.checkChild(child);
+    super.addChild(child);
+  }
+
+  insertChildBefore(child: Node<unknown>, before: Node<unknown>): void {
+    if (
+      !(child instanceof ImageFilterDeclaration) ||
+      !(child instanceof ShaderDeclaration)
+    ) {
+      throw new Error(`Cannot add child of type ${child.type} to ${this.type}`);
+    }
+    this.checkChild(child);
+    super.insertChildBefore(child, before);
+  }
+
+  materialize() {
+    const { Skia } = this;
+    const blend = BlendMode[enumKey(this.props.mode)];
+    if (this.declarationType === DeclarationType.ImageFilter) {
+      return (this._children as ImageFilterDeclaration<unknown>[])
+        .reverse()
+        .reduce<SkImageFilter | null>((inner, outer) => {
+          if (inner === null) {
+            return outer.materialize();
+          }
+          return Skia.ImageFilter.MakeBlend(blend, outer.materialize(), inner);
+        }, null) as SkImageFilter;
+    } else {
+      return (this._children as ShaderDeclaration<unknown>[])
+        .reverse()
+        .reduce<SkShader | null>((inner, outer) => {
+          if (inner === null) {
+            return outer.materialize();
+          }
+          return Skia.Shader.MakeBlend(blend, outer.materialize(), inner);
+        }, null) as SkShader;
+    }
+  }
+}