@shopify/react-native-skia 1.7.7 → 1.8.1

package/src/dom/nodes/RenderNode.ts

@@ -1,172 +0,0 @@
-import type {
-  SkMatrix,
-  SkRect,
-  SkRRect,
-  SkPath,
-  SkPaint,
-} from "../../skia/types";
-import { ClipOp, isRRect } from "../../skia/types";
-import type {
-  RenderNode,
-  GroupProps,
-  NodeType,
-  Node,
-  DrawingContext,
-} from "../types";
-
-import { isPathDef, processPath, processTransformProps } from "./datatypes";
-import type { NodeContext } from "./Node";
-import { JsiNode, JsiDeclarationNode } from "./Node";
-
-const paintProps = [
-  "color",
-  "strokeWidth",
-  "blendMode",
-  "strokeCap",
-  "strokeJoin",
-  "strokeMiter",
-  "style",
-  "antiAlias",
-  "dither",
-  "opacity",
-];
-
-interface PaintCache {
-  parent: SkPaint;
-  child: SkPaint;
-}
-
-export abstract class JsiRenderNode<P extends GroupProps>
-  extends JsiNode<P>
-  implements RenderNode<P>
-{
-  paintCache: PaintCache | null = null;
-
-  matrix: SkMatrix;
-  clipRect?: SkRect;
-  clipRRect?: SkRRect;
-  clipPath?: SkPath;
-
-  constructor(ctx: NodeContext, type: NodeType, props: P) {
-    super(ctx, type, props);
-    this.matrix = this.Skia.Matrix();
-    this.onPropChange();
-  }
-
-  setProps(props: P) {
-    super.setProps(props);
-    this.onPropChange();
-  }
-
-  setProp<K extends keyof P>(key: K, value: P[K]) {
-    const hasChanged = super.setProp(key, value);
-    if (hasChanged) {
-      this.onPropChange();
-      if (paintProps.includes(key as string)) {
-        this.paintCache = null;
-      }
-    }
-    return hasChanged;
-  }
-
-  protected onPropChange() {
-    this.matrix.identity();
-    this.clipPath = undefined;
-    this.clipRect = undefined;
-    this.clipRRect = undefined;
-    this.computeMatrix();
-    this.computeClip();
-  }
-
-  addChild(child: Node<unknown>) {
-    if (child instanceof JsiDeclarationNode) {
-      child.setInvalidate(() => {
-        this.paintCache = null;
-      });
-    }
-    super.addChild(child);
-  }
-
-  insertChildBefore(child: Node<unknown>, before: Node<unknown>) {
-    if (child instanceof JsiDeclarationNode) {
-      child.setInvalidate(() => {
-        this.paintCache = null;
-      });
-    }
-    super.insertChildBefore(child, before);
-  }
-
-  private computeClip() {
-    const { clip } = this.props;
-    if (clip) {
-      if (isPathDef(clip)) {
-        this.clipPath = processPath(this.Skia, clip);
-      } else if (isRRect(clip)) {
-        this.clipRRect = clip;
-      } else {
-        this.clipRect = clip;
-      }
-    }
-  }
-
-  private computeMatrix() {
-    processTransformProps(this.matrix, this.props);
-  }
-
-  render(ctx: DrawingContext) {
-    const { invertClip, layer, matrix, transform } = this.props;
-    const { canvas } = ctx;
-    const parentPaint = ctx.paint;
-
-    const cache =
-      this.paintCache !== null && this.paintCache.parent === ctx.paint
-        ? this.paintCache.child
-        : undefined;
-    const shouldRestore = ctx.saveAndConcat(this, cache);
-
-    const hasTransform = matrix !== undefined || transform !== undefined;
-    const hasClip =
-      this.clipRect !== undefined ||
-      this.clipPath !== undefined ||
-      this.clipRRect !== undefined;
-    const shouldSave = hasTransform || hasClip || !!layer;
-    const op = invertClip ? ClipOp.Difference : ClipOp.Intersect;
-    if (shouldSave) {
-      if (layer) {
-        if (typeof layer === "boolean") {
-          canvas.saveLayer();
-        } else {
-          canvas.saveLayer(layer);
-        }
-      } else {
-        canvas.save();
-      }
-    }
-
-    if (this.matrix) {
-      canvas.concat(this.matrix);
-    }
-    if (this.clipRect) {
-      canvas.clipRect(this.clipRect, op, true);
-    } else if (this.clipRRect) {
-      canvas.clipRRect(this.clipRRect, op, true);
-    } else if (this.clipPath) {
-      canvas.clipPath(this.clipPath, op, true);
-    }
-
-    this.renderNode(ctx);
-
-    if (shouldSave) {
-      canvas.restore();
-    }
-    if (shouldRestore) {
-      this.paintCache = {
-        parent: parentPaint,
-        child: ctx.paint,
-      };
-      ctx.restore();
-    }
-  }
-
-  abstract renderNode(ctx: DrawingContext): void;
-}

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

@@ -1,24 +0,0 @@
-import { BlendMode } from "../../../skia/types";
-import type { AtlasProps, DrawingContext } from "../../types";
-import { NodeType } from "../../types";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-import { enumKey } from "../datatypes";
-
-export class AtlasNode extends JsiDrawingNode<AtlasProps, null> {
-  protected deriveProps() {
-    return null;
-  }
-
-  constructor(ctx: NodeContext, props: AtlasProps) {
-    super(ctx, NodeType.Atlas, props);
-  }
-
-  draw({ canvas, paint }: DrawingContext) {
-    const { image, sprites, transforms, colors, blendMode } = this.props;
-    const blend = blendMode ? BlendMode[enumKey(blendMode)] : undefined;
-    if (image) {
-      canvas.drawAtlas(image, sprites, transforms, paint, blend, colors);
-    }
-  }
-}

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

@@ -1,37 +0,0 @@
-import type { ChildrenProps, DrawingContext } from "../../types";
-import { NodeType } from "../../types";
-import { JsiDrawingNode } from "../DrawingNode";
-import type { NodeContext } from "../Node";
-import { JsiDeclarationNode } from "../Node";
-import type { SkImageFilter } from "../../../skia/types/ImageFilter/ImageFilter";
-
-export class BackdropFilterNode extends JsiDrawingNode<ChildrenProps, null> {
-  constructor(ctx: NodeContext, props: ChildrenProps) {
-    super(ctx, NodeType.BackdropFilter, props);
-  }
-
-  protected deriveProps() {
-    return null;
-  }
-
-  draw({ canvas, declarationCtx }: DrawingContext) {
-    const child = this._children[0];
-    let imageFilter: SkImageFilter | null = null;
-    if (child instanceof JsiDeclarationNode) {
-      declarationCtx.save();
-      child.decorate(declarationCtx);
-      const imgf = declarationCtx.imageFilters.pop();
-      if (imgf) {
-        imageFilter = imgf;
-      } else {
-        const cf = declarationCtx.colorFilters.pop();
-        if (cf) {
-          imageFilter = this.Skia.ImageFilter.MakeColorFilter(cf, null);
-        }
-      }
-      declarationCtx.restore();
-    }
-    canvas.saveLayer(undefined, null, imageFilter);
-    canvas.restore();
-  }
-}

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

@@ -1,82 +0,0 @@
-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";
-import { deflate, inflate } from "../datatypes";
-
-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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,21 +0,0 @@
-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);
-  }
-}