@shopify/react-native-skia 0.1.127 → 0.1.130

package/src/skia/web/api/Host.ts

@@ -0,0 +1,50 @@
+/* eslint-disable no-nested-ternary */
+import type { CanvasKit, EmbindEnumEntity } from "canvaskit-wasm";
+
+import type { SkJSIInstance } from "../../types";
+
+export abstract class Host {
+  readonly CanvasKit: CanvasKit;
+
+  constructor(CanvasKit: CanvasKit) {
+    this.CanvasKit = CanvasKit;
+  }
+}
+
+export abstract class HostObject<T, N extends string>
+  extends Host
+  implements SkJSIInstance<N>
+{
+  readonly __typename__: N;
+  readonly ref: T;
+
+  constructor(CanvasKit: CanvasKit, ref: T, typename: N) {
+    super(CanvasKit);
+    this.ref = ref;
+    this.__typename__ = typename;
+  }
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type NonNullish = {};
+
+export const toOptionalValue = <T>(
+  value: NonNullish | undefined | null
+): T | undefined | null =>
+  value === undefined ? undefined : value === null ? null : toValue(value);
+
+export const toUndefinedableValue = <T>(
+  value: NonNullish | undefined
+): T | undefined => (value === undefined ? undefined : toValue(value));
+
+export const toNullableValue = <T>(value: NonNullish | null): T | null =>
+  value === null ? null : toValue(value);
+
+export const toValue = <T>(value: NonNullish): T =>
+  (value as HostObject<T, string>).ref;
+
+export const ckEnum = (value: number): EmbindEnumEntity => ({ value });
+export const optEnum = (
+  value: number | undefined
+): EmbindEnumEntity | undefined =>
+  value === undefined ? undefined : { value };

package/src/skia/web/api/JsiSkCanvas.ts

@@ -0,0 +1,322 @@
+import type { Canvas, CanvasKit, Image, Paint, Rect } from "canvaskit-wasm";
+
+import type {
+  BlendMode,
+  ClipOp,
+  FilterMode,
+  MipmapMode,
+  PointMode,
+  SaveLayerFlag,
+  SkCanvas,
+  SkColor,
+  SkFont,
+  SkImage,
+  SkImageFilter,
+  SkMatrix,
+  SkPaint,
+  SkPath,
+  SkPicture,
+  SkPoint,
+  SkRect,
+  SkRRect,
+  SkSVG,
+  SkTextBlob,
+  SkVertices,
+} from "../../types";
+
+import {
+  ckEnum,
+  HostObject,
+  toValue,
+  toUndefinedableValue,
+  toOptionalValue,
+} from "./Host";
+
+export class JsiSkCanvas
+  extends HostObject<Canvas, "Canvas">
+  implements SkCanvas
+{
+  constructor(CanvasKit: CanvasKit, ref: Canvas) {
+    super(CanvasKit, ref, "Canvas");
+  }
+
+  drawRect(rect: SkRect, paint: SkPaint) {
+    this.ref.drawRect(toValue<Rect>(rect), toValue<Paint>(paint));
+  }
+
+  drawImage(image: SkImage, x: number, y: number, paint?: SkPaint) {
+    this.ref.drawImage(toValue<Image>(image), x, y, toOptionalValue(paint));
+  }
+
+  drawImageRect(
+    img: SkImage,
+    src: SkRect,
+    dest: SkRect,
+    paint: SkPaint,
+    fastSample?: boolean
+  ) {
+    this.ref.drawImageRect(
+      toValue<Image>(img),
+      toValue<Rect>(src),
+      toValue<Rect>(dest),
+      toValue<Paint>(paint),
+      fastSample
+    );
+  }
+
+  drawImageCubic(
+    img: SkImage,
+    left: number,
+    top: number,
+    B: number,
+    C: number,
+    paint?: SkPaint | null
+  ) {
+    this.ref.drawImageCubic(
+      toValue(img),
+      left,
+      top,
+      B,
+      C,
+      toOptionalValue(paint)
+    );
+  }
+
+  drawImageOptions(
+    img: SkImage,
+    left: number,
+    top: number,
+    fm: FilterMode,
+    mm: MipmapMode,
+    paint?: SkPaint | null
+  ) {
+    this.ref.drawImageOptions(
+      toValue(img),
+      left,
+      top,
+      ckEnum(fm),
+      ckEnum(mm),
+      toOptionalValue(paint)
+    );
+  }
+
+  drawImageNine(
+    img: SkImage,
+    center: SkRect,
+    dest: SkRect,
+    filter: FilterMode,
+    paint?: SkPaint | null
+  ) {
+    this.ref.drawImageNine(
+      toValue(img),
+      toValue(center),
+      toValue(dest),
+      ckEnum(filter),
+      toOptionalValue(paint)
+    );
+  }
+
+  drawImageRectCubic(
+    img: SkImage,
+    src: SkRect,
+    dest: SkRect,
+    B: number,
+    C: number,
+    paint?: SkPaint | null
+  ) {
+    this.ref.drawImageRectCubic(
+      toValue<Image>(img),
+      toValue<Rect>(src),
+      toValue<Rect>(dest),
+      B,
+      C,
+      toOptionalValue(paint)
+    );
+  }
+
+  drawImageRectOptions(
+    img: SkImage,
+    src: SkRect,
+    dest: SkRect,
+    fm: FilterMode,
+    mm: MipmapMode,
+    paint?: SkPaint | null
+  ) {
+    this.ref.drawImageRectOptions(
+      toValue<Image>(img),
+      toValue<Rect>(src),
+      toValue<Rect>(dest),
+      ckEnum(fm),
+      ckEnum(mm),
+      toOptionalValue(paint)
+    );
+  }
+
+  drawPaint(paint: SkPaint) {
+    this.ref.drawPaint(toValue(paint));
+  }
+
+  drawLine(x0: number, y0: number, x1: number, y1: number, paint: SkPaint) {
+    this.ref.drawLine(x0, y0, x1, y1, toValue(paint));
+  }
+
+  drawCircle(cx: number, cy: number, radius: number, paint: SkPaint) {
+    this.ref.drawCircle(cx, cy, radius, toValue(paint));
+  }
+
+  drawVertices(verts: SkVertices, mode: BlendMode, paint: SkPaint) {
+    this.ref.drawVertices(toValue(verts), ckEnum(mode), toValue(paint));
+  }
+
+  drawPatch(
+    cubics: SkPoint[],
+    colors?: SkColor[] | null,
+    texs?: SkPoint[] | null,
+    mode?: BlendMode | null,
+    paint?: SkPaint
+  ) {
+    this.ref.drawPatch(
+      toValue(cubics),
+      colors,
+      toOptionalValue(texs),
+      mode ? ckEnum(mode) : null,
+      toUndefinedableValue(paint)
+    );
+  }
+
+  restoreToCount(saveCount: number) {
+    this.ref.restoreToCount(saveCount);
+  }
+
+  drawPoints(mode: PointMode, points: SkPoint[], paint: SkPaint) {
+    this.ref.drawPoints(ckEnum(mode), toValue(points), toValue(paint));
+  }
+
+  drawArc(
+    oval: SkRect,
+    startAngle: number,
+    sweepAngle: number,
+    useCenter: boolean,
+    paint: SkPaint
+  ) {
+    this.ref.drawArc(
+      toValue(oval),
+      startAngle,
+      sweepAngle,
+      useCenter,
+      toValue(paint)
+    );
+  }
+
+  drawRRect(rrect: SkRRect, paint: SkPaint) {
+    this.ref.drawRRect(toValue(rrect), toValue(paint));
+  }
+
+  drawDRRect(outer: SkRRect, inner: SkRRect, paint: SkPaint) {
+    this.ref.drawDRRect(toValue(outer), toValue(inner), toValue(paint));
+  }
+
+  drawOval(oval: SkRect, paint: SkPaint) {
+    this.ref.drawOval(toValue(oval), toValue(paint));
+  }
+
+  drawPath(path: SkPath, paint: SkPaint) {
+    this.ref.drawPath(toValue(path), toValue(paint));
+  }
+
+  drawText(str: string, x: number, y: number, paint: SkPaint, font: SkFont) {
+    this.ref.drawText(str, x, y, toValue(paint), toValue(font));
+  }
+
+  drawTextBlob(blob: SkTextBlob, x: number, y: number, paint: SkPaint) {
+    this.ref.drawTextBlob(toValue(blob), x, y, toValue(paint));
+  }
+
+  drawGlyphs(
+    glyphs: number[],
+    positions: SkPoint[],
+    x: number,
+    y: number,
+    font: SkFont,
+    paint: SkPaint
+  ) {
+    this.ref.drawGlyphs(
+      glyphs,
+      toValue(positions),
+      x,
+      y,
+      toValue(font),
+      toValue(paint)
+    );
+  }
+
+  drawSvg(_svgDom: SkSVG, _width?: number, _height?: number) {
+    throw new Error("drawSvg is not implemented on React Native Web");
+  }
+
+  save() {
+    return this.ref.save();
+  }
+
+  saveLayer(
+    paint?: SkPaint,
+    bounds?: SkRect | null,
+    backdrop?: SkImageFilter | null,
+    flags?: SaveLayerFlag
+  ) {
+    return this.ref.saveLayer(
+      toUndefinedableValue(paint),
+      toOptionalValue(bounds),
+      toOptionalValue(backdrop),
+      flags
+    );
+  }
+
+  restore() {
+    this.ref.restore();
+  }
+
+  rotate(rotationInDegrees: number, rx: number, ry: number) {
+    this.ref.rotate(rotationInDegrees, rx, ry);
+  }
+
+  scale(sx: number, sy: number) {
+    this.ref.scale(sx, sy);
+  }
+
+  skew(sx: number, sy: number) {
+    this.ref.skew(sx, sy);
+  }
+
+  translate(dx: number, dy: number) {
+    this.ref.translate(dx, dy);
+  }
+
+  drawColor(color: SkColor, blendMode?: BlendMode) {
+    this.ref.drawColor(color, blendMode ? ckEnum(blendMode) : undefined);
+  }
+
+  clear(color: SkColor) {
+    this.ref.clear(color);
+  }
+
+  clipPath(path: SkPath, op: ClipOp, doAntiAlias: boolean) {
+    this.ref.clipPath(toValue(path), ckEnum(op), doAntiAlias);
+  }
+
+  clipRect(rect: SkRect, op: ClipOp, doAntiAlias: boolean) {
+    this.ref.clipRect(toValue(rect), ckEnum(op), doAntiAlias);
+  }
+
+  clipRRect(rrect: SkRRect, op: ClipOp, doAntiAlias: boolean) {
+    this.ref.clipRRect(toValue(rrect), ckEnum(op), doAntiAlias);
+  }
+
+  concat(m: SkMatrix) {
+    this.ref.concat(toValue(m));
+  }
+
+  drawPicture(skp: SkPicture) {
+    this.ref.drawPicture(toValue(skp));
+  }
+}

package/src/skia/web/api/JsiSkColor.ts

@@ -0,0 +1,181 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkColor, Color as InputColor } from "../../types";
+
+const alphaf = (c: number) => ((c >> 24) & 255) / 255;
+const red = (c: number) => (c >> 16) & 255;
+const green = (c: number) => (c >> 8) & 255;
+const blue = (c: number) => c & 255;
+
+const colorMap = {
+  transparent: Float32Array.of(0, 0, 0, 0),
+  aliceblue: Float32Array.of(240, 248, 255, 1),
+  antiquewhite: Float32Array.of(250, 235, 215, 1),
+  aqua: Float32Array.of(0, 255, 255, 1),
+  aquamarine: Float32Array.of(127, 255, 212, 1),
+  azure: Float32Array.of(240, 255, 255, 1),
+  beige: Float32Array.of(245, 245, 220, 1),
+  bisque: Float32Array.of(255, 228, 196, 1),
+  black: Float32Array.of(0, 0, 0, 1),
+  blanchedalmond: Float32Array.of(255, 235, 205, 1),
+  blue: Float32Array.of(0, 0, 255, 1),
+  blueviolet: Float32Array.of(138, 43, 226, 1),
+  brown: Float32Array.of(165, 42, 42, 1),
+  burlywood: Float32Array.of(222, 184, 135, 1),
+  cadetblue: Float32Array.of(95, 158, 160, 1),
+  chartreuse: Float32Array.of(127, 255, 0, 1),
+  chocolate: Float32Array.of(210, 105, 30, 1),
+  coral: Float32Array.of(255, 127, 80, 1),
+  cornflowerblue: Float32Array.of(100, 149, 237, 1),
+  cornsilk: Float32Array.of(255, 248, 220, 1),
+  crimson: Float32Array.of(220, 20, 60, 1),
+  cyan: Float32Array.of(0, 255, 255, 1),
+  darkblue: Float32Array.of(0, 0, 139, 1),
+  darkcyan: Float32Array.of(0, 139, 139, 1),
+  darkgoldenrod: Float32Array.of(184, 134, 11, 1),
+  darkgray: Float32Array.of(169, 169, 169, 1),
+  darkgreen: Float32Array.of(0, 100, 0, 1),
+  darkgrey: Float32Array.of(169, 169, 169, 1),
+  darkkhaki: Float32Array.of(189, 183, 107, 1),
+  darkmagenta: Float32Array.of(139, 0, 139, 1),
+  darkolivegreen: Float32Array.of(85, 107, 47, 1),
+  darkorange: Float32Array.of(255, 140, 0, 1),
+  darkorchid: Float32Array.of(153, 50, 204, 1),
+  darkred: Float32Array.of(139, 0, 0, 1),
+  darksalmon: Float32Array.of(233, 150, 122, 1),
+  darkseagreen: Float32Array.of(143, 188, 143, 1),
+  darkslateblue: Float32Array.of(72, 61, 139, 1),
+  darkslategray: Float32Array.of(47, 79, 79, 1),
+  darkslategrey: Float32Array.of(47, 79, 79, 1),
+  darkturquoise: Float32Array.of(0, 206, 209, 1),
+  darkviolet: Float32Array.of(148, 0, 211, 1),
+  deeppink: Float32Array.of(255, 20, 147, 1),
+  deepskyblue: Float32Array.of(0, 191, 255, 1),
+  dimgray: Float32Array.of(105, 105, 105, 1),
+  dimgrey: Float32Array.of(105, 105, 105, 1),
+  dodgerblue: Float32Array.of(30, 144, 255, 1),
+  firebrick: Float32Array.of(178, 34, 34, 1),
+  floralwhite: Float32Array.of(255, 250, 240, 1),
+  forestgreen: Float32Array.of(34, 139, 34, 1),
+  fuchsia: Float32Array.of(255, 0, 255, 1),
+  gainsboro: Float32Array.of(220, 220, 220, 1),
+  ghostwhite: Float32Array.of(248, 248, 255, 1),
+  gold: Float32Array.of(255, 215, 0, 1),
+  goldenrod: Float32Array.of(218, 165, 32, 1),
+  gray: Float32Array.of(128, 128, 128, 1),
+  green: Float32Array.of(0, 128, 0, 1),
+  greenyellow: Float32Array.of(173, 255, 47, 1),
+  grey: Float32Array.of(128, 128, 128, 1),
+  honeydew: Float32Array.of(240, 255, 240, 1),
+  hotpink: Float32Array.of(255, 105, 180, 1),
+  indianred: Float32Array.of(205, 92, 92, 1),
+  indigo: Float32Array.of(75, 0, 130, 1),
+  ivory: Float32Array.of(255, 255, 240, 1),
+  khaki: Float32Array.of(240, 230, 140, 1),
+  lavender: Float32Array.of(230, 230, 250, 1),
+  lavenderblush: Float32Array.of(255, 240, 245, 1),
+  lawngreen: Float32Array.of(124, 252, 0, 1),
+  lemonchiffon: Float32Array.of(255, 250, 205, 1),
+  lightblue: Float32Array.of(173, 216, 230, 1),
+  lightcoral: Float32Array.of(240, 128, 128, 1),
+  lightcyan: Float32Array.of(224, 255, 255, 1),
+  lightgoldenrodyellow: Float32Array.of(250, 250, 210, 1),
+  lightgray: Float32Array.of(211, 211, 211, 1),
+  lightgreen: Float32Array.of(144, 238, 144, 1),
+  lightgrey: Float32Array.of(211, 211, 211, 1),
+  lightpink: Float32Array.of(255, 182, 193, 1),
+  lightsalmon: Float32Array.of(255, 160, 122, 1),
+  lightseagreen: Float32Array.of(32, 178, 170, 1),
+  lightskyblue: Float32Array.of(135, 206, 250, 1),
+  lightslategray: Float32Array.of(119, 136, 153, 1),
+  lightslategrey: Float32Array.of(119, 136, 153, 1),
+  lightsteelblue: Float32Array.of(176, 196, 222, 1),
+  lightyellow: Float32Array.of(255, 255, 224, 1),
+  lime: Float32Array.of(0, 255, 0, 1),
+  limegreen: Float32Array.of(50, 205, 50, 1),
+  linen: Float32Array.of(250, 240, 230, 1),
+  magenta: Float32Array.of(255, 0, 255, 1),
+  maroon: Float32Array.of(128, 0, 0, 1),
+  mediumaquamarine: Float32Array.of(102, 205, 170, 1),
+  mediumblue: Float32Array.of(0, 0, 205, 1),
+  mediumorchid: Float32Array.of(186, 85, 211, 1),
+  mediumpurple: Float32Array.of(147, 112, 219, 1),
+  mediumseagreen: Float32Array.of(60, 179, 113, 1),
+  mediumslateblue: Float32Array.of(123, 104, 238, 1),
+  mediumspringgreen: Float32Array.of(0, 250, 154, 1),
+  mediumturquoise: Float32Array.of(72, 209, 204, 1),
+  mediumvioletred: Float32Array.of(199, 21, 133, 1),
+  midnightblue: Float32Array.of(25, 25, 112, 1),
+  mintcream: Float32Array.of(245, 255, 250, 1),
+  mistyrose: Float32Array.of(255, 228, 225, 1),
+  moccasin: Float32Array.of(255, 228, 181, 1),
+  navajowhite: Float32Array.of(255, 222, 173, 1),
+  navy: Float32Array.of(0, 0, 128, 1),
+  oldlace: Float32Array.of(253, 245, 230, 1),
+  olive: Float32Array.of(128, 128, 0, 1),
+  olivedrab: Float32Array.of(107, 142, 35, 1),
+  orange: Float32Array.of(255, 165, 0, 1),
+  orangered: Float32Array.of(255, 69, 0, 1),
+  orchid: Float32Array.of(218, 112, 214, 1),
+  palegoldenrod: Float32Array.of(238, 232, 170, 1),
+  palegreen: Float32Array.of(152, 251, 152, 1),
+  paleturquoise: Float32Array.of(175, 238, 238, 1),
+  palevioletred: Float32Array.of(219, 112, 147, 1),
+  papayawhip: Float32Array.of(255, 239, 213, 1),
+  peachpuff: Float32Array.of(255, 218, 185, 1),
+  peru: Float32Array.of(205, 133, 63, 1),
+  pink: Float32Array.of(255, 192, 203, 1),
+  plum: Float32Array.of(221, 160, 221, 1),
+  powderblue: Float32Array.of(176, 224, 230, 1),
+  purple: Float32Array.of(128, 0, 128, 1),
+  rebeccapurple: Float32Array.of(102, 51, 153, 1),
+  red: Float32Array.of(255, 0, 0, 1),
+  rosybrown: Float32Array.of(188, 143, 143, 1),
+  royalblue: Float32Array.of(65, 105, 225, 1),
+  saddlebrown: Float32Array.of(139, 69, 19, 1),
+  salmon: Float32Array.of(250, 128, 114, 1),
+  sandybrown: Float32Array.of(244, 164, 96, 1),
+  seagreen: Float32Array.of(46, 139, 87, 1),
+  seashell: Float32Array.of(255, 245, 238, 1),
+  sienna: Float32Array.of(160, 82, 45, 1),
+  silver: Float32Array.of(192, 192, 192, 1),
+  skyblue: Float32Array.of(135, 206, 235, 1),
+  slateblue: Float32Array.of(106, 90, 205, 1),
+  slategray: Float32Array.of(112, 128, 144, 1),
+  slategrey: Float32Array.of(112, 128, 144, 1),
+  snow: Float32Array.of(255, 250, 250, 1),
+  springgreen: Float32Array.of(0, 255, 127, 1),
+  steelblue: Float32Array.of(70, 130, 180, 1),
+  tan: Float32Array.of(210, 180, 140, 1),
+  teal: Float32Array.of(0, 128, 128, 1),
+  thistle: Float32Array.of(216, 191, 216, 1),
+  tomato: Float32Array.of(255, 99, 71, 1),
+  turquoise: Float32Array.of(64, 224, 208, 1),
+  violet: Float32Array.of(238, 130, 238, 1),
+  wheat: Float32Array.of(245, 222, 179, 1),
+  white: Float32Array.of(255, 255, 255, 1),
+  whitesmoke: Float32Array.of(245, 245, 245, 1),
+  yellow: Float32Array.of(255, 255, 0, 1),
+  yellowgreen: Float32Array.of(154, 205, 50, 1),
+};
+
+export const Color = (CanvasKit: CanvasKit, color: InputColor): SkColor => {
+  if (color instanceof Float32Array) {
+    return color;
+  } else if (typeof color === "string") {
+    const rgba = CanvasKit.parseColorString(color, colorMap);
+    return Float32Array.of(
+      rgba[0] / 255,
+      rgba[1] / 255,
+      rgba[2] / 255,
+      rgba[3]
+    );
+  } else {
+    return Float32Array.of(
+      red(color) / 255,
+      green(color) / 255,
+      blue(color) / 255,
+      alphaf(color)
+    );
+  }
+};

package/src/skia/web/api/JsiSkColorFilter.ts

@@ -0,0 +1,14 @@
+import type { CanvasKit, ColorFilter } from "canvaskit-wasm";
+
+import type { SkColorFilter } from "../../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkColorFilter
+  extends HostObject<ColorFilter, "ColorFilter">
+  implements SkColorFilter
+{
+  constructor(CanvasKit: CanvasKit, ref: ColorFilter) {
+    super(CanvasKit, ref, "ColorFilter");
+  }
+}

package/src/skia/web/api/JsiSkImage.ts

@@ -0,0 +1,66 @@
+import type { CanvasKit, Image } from "canvaskit-wasm";
+
+import type {
+  ImageFormat,
+  FilterMode,
+  MipmapMode,
+  SkImage,
+  SkMatrix,
+  SkShader,
+  TileMode,
+} from "../../types";
+
+import { ckEnum, HostObject } from "./Host";
+
+export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
+  constructor(CanvasKit: CanvasKit, ref: Image) {
+    super(CanvasKit, ref, "Image");
+  }
+
+  height() {
+    return this.ref.height();
+  }
+
+  width() {
+    return this.ref.width();
+  }
+
+  makeShaderOptions(
+    _tx: TileMode,
+    _ty: TileMode,
+    _fm: FilterMode,
+    _mm: MipmapMode,
+    _localMatrix?: SkMatrix
+  ): SkShader {
+    throw new Error("Not implemented yet");
+  }
+
+  makeShaderCubic(
+    _tx: TileMode,
+    _ty: TileMode,
+    _B: number,
+    _C: number,
+    _localMatrix?: SkMatrix
+  ): SkShader {
+    throw new Error("Not implemented yet");
+  }
+
+  encodeToBytes(fmt?: ImageFormat, quality?: number): Uint8Array {
+    let result: Uint8Array | null;
+    if (fmt && quality) {
+      result = this.ref.encodeToBytes(ckEnum(fmt), quality);
+    } else if (fmt) {
+      result = this.ref.encodeToBytes(ckEnum(fmt));
+    } else {
+      result = this.ref.encodeToBytes();
+    }
+    if (!result) {
+      throw new Error("encodeToBytes failed");
+    }
+    return result;
+  }
+
+  encodeToBase64(_fmt?: ImageFormat, _quality?: number): string {
+    throw new Error("Not implemented yet");
+  }
+}