@shopify/react-native-skia 1.7.6 → 1.8.0

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;
-}

package/src/renderer/__tests__/SkiaDOM.spec.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-
-import { NodeType } from "../../dom/types";
-import { Circle, Group, Paint } from "../components";
-
-import { width, height, mountCanvas } from "./setup";
-
-describe("Test introductionary examples from our documentation", () => {
-  it("Should blend colors using multiplication", () => {
-    const r = width * 0.33;
-    const { root } = mountCanvas(
-      <Group blendMode="multiply">
-        <Circle cx={r} cy={r} r={r} color="cyan" />
-        <Circle cx={width - r} cy={r} r={r} color="magenta" />
-        <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
-      </Group>
-    );
-    expect(root.dom.children().length).toBe(1);
-    const child = root.dom.children()[0]!;
-    expect(child).toBeDefined();
-    expect(child.type).toBe(NodeType.Group);
-    expect(child.children().length).toBe(3);
-  });
-  it("Accept multiple paint definiton", () => {
-    const r = width * 0.33;
-    const strokeWidth = 30;
-    const { root } = mountCanvas(
-      <Circle cx={width / 2} cy={width / 2} r={r} color="red">
-        <Paint color="lightblue" />
-        <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
-        <Paint color="#ade6d8" style="stroke" strokeWidth={strokeWidth / 2} />
-      </Circle>
-    );
-    expect(root.dom.children().length).toBe(1);
-    const child = root.dom.children()[0]!;
-    expect(child).toBeDefined();
-    expect(child.type).toBe(NodeType.Circle);
-    const circle = child;
-    expect(circle).toBeDefined();
-    expect(circle.type).toBe(NodeType.Circle);
-    expect(circle.children().length).toBe(3);
-    expect(circle.children()[0].type).toBe(NodeType.Paint);
-    expect(circle.children()[1].type).toBe(NodeType.Paint);
-    expect(circle.children()[2].type).toBe(NodeType.Paint);
-  });
-});

package/src/views/SkiaJSDomView.tsx

@@ -1,143 +0,0 @@
-import React from "react";
-import type { HostComponent } from "react-native";
-
-import type { Skia, SkRect } from "../skia/types";
-import { Platform } from "../Platform";
-import SkiaPictureViewNativeComponent from "../specs/SkiaPictureViewNativeComponent";
-import { JsiDrawingContext } from "../dom/types";
-
-import { SkiaViewApi } from "./api";
-import type {
-  SkiaPictureViewNativeProps,
-  SkiaDomViewNativeProps,
-} from "./types";
-import { SkiaViewNativeId } from "./SkiaViewNativeId";
-
-const NativeSkiaPictureView: HostComponent<SkiaPictureViewNativeProps> =
-  Platform.OS !== "web"
-    ? SkiaPictureViewNativeComponent
-    : // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (null as any);
-
-interface SkiaDomViewProps extends SkiaDomViewNativeProps {
-  mode?: "default" | "continuous";
-}
-
-type SkiaJSDomViewProps = SkiaDomViewProps & {
-  Skia: Skia;
-  mode?: "default" | "continuous";
-};
-
-export class SkiaJSDomView extends React.Component<SkiaJSDomViewProps> {
-  constructor(props: SkiaJSDomViewProps) {
-    super(props);
-    this._nativeId = SkiaViewNativeId.current++;
-    const { root, onSize } = props;
-    if (root) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "root", root);
-    }
-    if (onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-    this.tick();
-  }
-
-  private _nativeId: number;
-  private requestId = 0;
-
-  private tick() {
-    this.redraw();
-    if (this.props.mode === "continuous") {
-      this.requestId = requestAnimationFrame(this.tick.bind(this));
-    }
-  }
-
-  public get nativeId() {
-    return this._nativeId;
-  }
-
-  componentDidUpdate(prevProps: SkiaDomViewProps & { Skia: Skia }) {
-    const { root, onSize } = this.props;
-    if (root !== prevProps.root && root !== undefined) {
-      assertSkiaViewApi();
-      this.draw();
-    }
-    if (onSize !== prevProps.onSize) {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(this._nativeId, "onSize", onSize);
-    }
-    this.tick();
-  }
-
-  /**
-   * Creates a snapshot from the canvas in the surface
-   * @param rect Rect to use as bounds. Optional.
-   * @returns An Image object.
-   */
-  public makeImageSnapshot(rect?: SkRect) {
-    assertSkiaViewApi();
-    return SkiaViewApi.makeImageSnapshot(this._nativeId, rect);
-  }
-
-  public makeImageSnapshotAsync(rect?: SkRect) {
-    assertSkiaViewApi();
-    return SkiaViewApi.makeImageSnapshotAsync(this._nativeId, rect);
-  }
-
-  /**
-   * Sends a redraw request to the native SkiaView.
-   */
-  public redraw() {
-    assertSkiaViewApi();
-    this.draw();
-  }
-
-  private draw() {
-    const { root, Skia } = this.props;
-    if (root !== undefined) {
-      assertSkiaViewApi();
-      const rec = Skia.PictureRecorder();
-      const canvas = rec.beginRecording();
-      const ctx = new JsiDrawingContext(Skia, canvas);
-      root.render(ctx);
-      const picture = rec.finishRecordingAsPicture();
-      SkiaViewApi.setJsiProperty(this._nativeId, "picture", picture);
-    }
-  }
-
-  /**
-   * Clear up the dom node when unmounting to release resources.
-   */
-  componentWillUnmount(): void {
-    assertSkiaViewApi();
-    SkiaViewApi.setJsiProperty(this._nativeId, "picture", null);
-    if (this.requestId) {
-      cancelAnimationFrame(this.requestId);
-    }
-  }
-
-  render() {
-    const { debug = false, ...viewProps } = this.props;
-    return (
-      <NativeSkiaPictureView
-        collapsable={false}
-        nativeID={`${this._nativeId}`}
-        debug={debug}
-        {...viewProps}
-      />
-    );
-  }
-}
-
-const assertSkiaViewApi = () => {
-  if (
-    SkiaViewApi === null ||
-    SkiaViewApi.setJsiProperty === null ||
-    SkiaViewApi.requestRedraw === null ||
-    SkiaViewApi.makeImageSnapshot === null
-  ) {
-    throw Error("Skia View Api was not found.");
-  }
-};

package/src/views/SkiaJSDomView.web.tsx

@@ -1 +0,0 @@
-export { SkiaDomView as SkiaJSDomView } from "./SkiaDomView";