@pompadour/react-native-skia 1.0.0

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

@@ -0,0 +1,110 @@
+import type { SkRRect, Skia } from "../../../skia/types";
+import { BlurStyle, ClipOp, isRRect } from "../../../skia/types";
+import type { DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import type { BoxShadowProps, BoxProps } from "../../types/Drawings";
+import type { NodeContext } from "../Node";
+import { JsiDeclarationNode } from "../Node";
+import { JsiRenderNode } from "../RenderNode";
+import type { DeclarationContext } from "../../types/DeclarationContext";
+
+const inflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) =>
+  Skia.RRectXY(
+    Skia.XYWHRect(
+      box.rect.x - dx + tx,
+      box.rect.y - dy + ty,
+      box.rect.width + 2 * dx,
+      box.rect.height + 2 * dy
+    ),
+    box.rx + dx,
+    box.ry + dy
+  );
+
+const deflate = (
+  Skia: Skia,
+  box: SkRRect,
+  dx: number,
+  dy: number,
+  tx = 0,
+  ty = 0
+) => inflate(Skia, box, -dx, -dy, tx, ty);
+
+export class BoxShadowNode extends JsiDeclarationNode<BoxShadowProps> {
+  constructor(ctx: NodeContext, props: BoxShadowProps) {
+    super(ctx, NodeType.BoxShadow, props);
+  }
+
+  decorate(_ctx: DeclarationContext) {
+    // do nothing
+  }
+
+  materialize() {
+    return this.props;
+  }
+}
+
+export class BoxNode extends JsiRenderNode<BoxProps> {
+  constructor(ctx: NodeContext, props: BoxProps) {
+    super(ctx, NodeType.Box, props);
+  }
+
+  renderNode({ canvas, paint }: DrawingContext) {
+    const { box: defaultBox } = this.props;
+    const opacity = paint.getAlphaf();
+    const box = isRRect(defaultBox)
+      ? defaultBox
+      : this.Skia.RRectXY(defaultBox, 0, 0);
+    const shadows = this._children
+      .map((node) => {
+        if (node instanceof BoxShadowNode) {
+          return node.materialize();
+        }
+        return null;
+      })
+      .filter((n): n is BoxShadowProps => n !== null);
+    shadows
+      .filter((shadow) => !shadow.inner)
+      .map((shadow) => {
+        const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+        const lPaint = this.Skia.Paint();
+        lPaint.setColor(this.Skia.Color(color));
+        lPaint.setAlphaf(paint.getAlphaf() * opacity);
+        lPaint.setMaskFilter(
+          this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+        );
+        canvas.drawRRect(
+          inflate(this.Skia, box, spread, spread, dx, dy),
+          lPaint
+        );
+      });
+
+    canvas.drawRRect(box, paint);
+
+    shadows
+      .filter((shadow) => shadow.inner)
+      .map((shadow) => {
+        const { color = "black", blur, spread = 0, dx = 0, dy = 0 } = shadow;
+        const delta = this.Skia.Point(10 + Math.abs(dx), 10 + Math.abs(dy));
+        canvas.save();
+        canvas.clipRRect(box, ClipOp.Intersect, false);
+        const lPaint = this.Skia.Paint();
+        lPaint.setColor(this.Skia.Color(color));
+        lPaint.setAlphaf(paint.getAlphaf() * opacity);
+
+        lPaint.setMaskFilter(
+          this.Skia.MaskFilter.MakeBlur(BlurStyle.Normal, blur, true)
+        );
+        const inner = deflate(this.Skia, box, spread, spread, dx, dy);
+        const outer = inflate(this.Skia, box, delta.x, delta.y);
+        canvas.drawDRRect(outer, inner, lPaint);
+        canvas.restore();
+      });
+  }
+}

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

@@ -0,0 +1,24 @@
+import type { SkPoint } from "../../../skia/types";
+import type { CircleProps, DrawingContext } from "../../types";
+import { NodeType } from "../../types";
+import { processCircle } from "../datatypes";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class CircleNode extends JsiDrawingNode<CircleProps, SkPoint> {
+  constructor(ctx: NodeContext, props: CircleProps) {
+    super(ctx, NodeType.Circle, props);
+  }
+
+  protected deriveProps() {
+    return processCircle(this.Skia, this.props).c;
+  }
+
+  draw({ canvas, paint }: DrawingContext) {
+    if (!this.derived) {
+      throw new Error("CircleNode: c is undefined");
+    }
+    const { x, y } = this.derived;
+    canvas.drawCircle(x, y, this.props.r, paint);
+  }
+}

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,49 @@
+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 } = this.props;
+    if (!image) {
+      return {
+        src: { x: 0, y: 0, width: 0, height: 0 },
+        dst: { x: 0, y: 0, width: 0, height: 0 },
+      };
+    }
+    const fit = this.props.fit ?? "contain";
+    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;
+    if (image) {
+      canvas.drawImageRect(image, src, dst, paint);
+    }
+  }
+}

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

@@ -0,0 +1,38 @@
+import type { DrawingContext, ImageSVGProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class ImageSVGNode extends JsiDrawingNode<
+  ImageSVGProps,
+  Pick<ImageSVGProps, "x" | "y" | "width" | "height">
+> {
+  constructor(ctx: NodeContext, props: ImageSVGProps) {
+    super(ctx, NodeType.ImageSVG, props);
+  }
+
+  deriveProps() {
+    if (this.props.rect) {
+      return this.props.rect;
+    }
+    const { x, y, width, height } = this.props;
+    return { x, y, width, height };
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const { svg } = this.props;
+    if (!this.derived) {
+      throw new Error("ImageSVGNode: derived props unresolved");
+    }
+    const { x, y, width, height } = this.derived;
+    if (svg === null) {
+      return;
+    }
+    canvas.save();
+    if (x && y) {
+      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/ParagraphNode.ts

@@ -0,0 +1,22 @@
+import type { DrawingContext, ParagraphProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class ParagraphNode extends JsiDrawingNode<ParagraphProps, null> {
+  constructor(ctx: NodeContext, props: ParagraphProps) {
+    super(ctx, NodeType.Paragraph, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const { paragraph, x, y, width } = this.props;
+    if (paragraph) {
+      paragraph.layout(width);
+      paragraph.paint(canvas, x, y);
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+import type { SkColor, SkPoint } from "../../../skia/types";
+import { BlendMode } from "../../../skia/types";
+import type { DrawingContext, PatchProps } from "../../types";
+import { NodeType } from "../../types";
+import { enumKey } 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) => this.Skia.Color(c)) : undefined,
+    };
+  }
+
+  draw({ canvas, paint }: 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, colors, texture, mode, paint);
+  }
+}

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

@@ -0,0 +1,51 @@
+import { saturate } from "../../../renderer/processors/math";
+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: trimStart,
+      end: trimEnd,
+      fillType,
+      stroke,
+      ...pathProps
+    } = this.props;
+    const start = saturate(trimStart);
+    const end = saturate(trimEnd);
+    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 { 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

@@ -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,145 @@
+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);
+    }
+  }
+}