react-native-skia 0.0.1 → 2.15.0

package/src/skia/web/JsiSkColor.ts

@@ -0,0 +1,340 @@
+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;
+
+// From https://raw.githubusercontent.com/deanm/css-color-parser-js/master/csscolorparser.js
+const CSSColorTable = {
+  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),
+};
+
+const clampCSSByte = (j: number) => {
+  // Clamp to integer 0 .. 255.
+  const i = Math.round(j); // Seems to be what Chrome does (vs truncation).
+  // eslint-disable-next-line no-nested-ternary
+  return i < 0 ? 0 : i > 255 ? 255 : i;
+};
+
+const clampCSSFloat = (f: number) => {
+  // eslint-disable-next-line no-nested-ternary
+  return f < 0 ? 0 : f > 1 ? 1 : f;
+};
+
+const parseCSSInt = (str: string) => {
+  // int or percentage.
+  if (str[str.length - 1] === "%") {
+    return clampCSSByte((parseFloat(str) / 100) * 255);
+  }
+
+  return clampCSSByte(parseInt(str));
+};
+
+const parseCSSFloat = (str: string | undefined) => {
+  if (str === undefined) {
+    return 1;
+  }
+  // float or percentage.
+  if (str[str.length - 1] === "%") {
+    return clampCSSFloat(parseFloat(str) / 100);
+  }
+  return clampCSSFloat(parseFloat(str));
+};
+
+const CSSHueToRGB = (m1: number, m2: number, h: number) => {
+  if (h < 0) {
+    h += 1;
+  } else if (h > 1) {
+    h -= 1;
+  }
+
+  if (h * 6 < 1) {
+    return m1 + (m2 - m1) * h * 6;
+  }
+  if (h * 2 < 1) {
+    return m2;
+  }
+  if (h * 3 < 2) {
+    return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+  }
+  return m1;
+};
+
+const parseCSSColor = (cssStr: string) => {
+  // Remove all whitespace, not compliant, but should just be more accepting.
+  var str = cssStr.replace(/ /g, "").toLowerCase();
+
+  // Color keywords (and transparent) lookup.
+  if (str in CSSColorTable) {
+    const cl = CSSColorTable[str as keyof typeof CSSColorTable];
+    if (cl) {
+      return Float32Array.of(...cl);
+    }
+    return null;
+  } // dup.
+
+  // #abc and #abc123 syntax.
+  if (str[0] === "#") {
+    if (str.length === 4) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xfff)) {
+        return null;
+      } // Covers NaN.
+      return [
+        ((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
+        (iv & 0xf0) | ((iv & 0xf0) >> 4),
+        (iv & 0xf) | ((iv & 0xf) << 4),
+        1,
+      ];
+    } else if (str.length === 7) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffff)) {
+        return null;
+      } // Covers NaN.
+      return [(iv & 0xff0000) >> 16, (iv & 0xff00) >> 8, iv & 0xff, 1];
+    } else if (str.length === 9) {
+      var iv = parseInt(str.substr(1), 16); // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffffff)) {
+        return null; // Covers NaN.
+      }
+      return [
+        ((iv & 0xff000000) >> 24) & 0xff,
+        (iv & 0xff0000) >> 16,
+        (iv & 0xff00) >> 8,
+        (iv & 0xff) / 255,
+      ];
+    }
+
+    return null;
+  }
+
+  var op = str.indexOf("("),
+    ep = str.indexOf(")");
+  if (op !== -1 && ep + 1 === str.length) {
+    var fname = str.substr(0, op);
+    var params = str.substr(op + 1, ep - (op + 1)).split(",");
+    var alpha = 1; // To allow case fallthrough.
+    switch (fname) {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      case "rgba":
+        if (params.length !== 4) {
+          return null;
+        }
+        alpha = parseCSSFloat(params.pop());
+      // Fall through.
+      case "rgb":
+        if (params.length !== 3) {
+          return null;
+        }
+        return [
+          parseCSSInt(params[0]),
+          parseCSSInt(params[1]),
+          parseCSSInt(params[2]),
+          alpha,
+        ];
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      //@ts-expect-error
+      case "hsla":
+        if (params.length !== 4) {
+          return null;
+        }
+        alpha = parseCSSFloat(params.pop());
+      // Fall through.
+      case "hsl":
+        if (params.length !== 3) {
+          return null;
+        }
+        var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360; // 0 .. 1
+        // NOTE(deanm): According to the CSS spec s/l should only be
+        // percentages, but we don't bother and let float or percentage.
+        var s = parseCSSFloat(params[1]);
+        var l = parseCSSFloat(params[2]);
+        var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+        var m1 = l * 2 - m2;
+        return [
+          clampCSSByte(CSSHueToRGB(m1, m2, h + 1 / 3) * 255),
+          clampCSSByte(CSSHueToRGB(m1, m2, h) * 255),
+          clampCSSByte(CSSHueToRGB(m1, m2, h - 1 / 3) * 255),
+          alpha,
+        ];
+      default:
+        return null;
+    }
+  }
+
+  return null;
+};
+
+export const Color = (color: InputColor): SkColor => {
+  if (color instanceof Float32Array) {
+    return color;
+  } else if (Array.isArray(color)) {
+    return new Float32Array(color);
+  } else if (typeof color === "string") {
+    const r = parseCSSColor(color);
+    const rgba = r === null ? CSSColorTable.black : r;
+    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/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/JsiSkColorFilterFactory.ts

@@ -0,0 +1,80 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ColorFilterFactory,
+  SkColorFilter,
+  InputColorMatrix,
+  SkColor,
+  BlendMode,
+} from "../types";
+
+import { getEnum, Host } from "./Host";
+import { JsiSkColorFilter } from "./JsiSkColorFilter";
+
+export class JsiSkColorFilterFactory
+  extends Host
+  implements ColorFilterFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeMatrix(cMatrix: InputColorMatrix) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeMatrix(cMatrix)
+    );
+  }
+
+  MakeBlend(color: SkColor, mode: BlendMode) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeBlend(
+        color,
+        getEnum(this.CanvasKit, "BlendMode", mode)
+      )
+    );
+  }
+
+  MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeCompose(
+        JsiSkColorFilter.fromValue(outer),
+        JsiSkColorFilter.fromValue(inner)
+      )
+    );
+  }
+
+  MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLerp(
+        t,
+        JsiSkColorFilter.fromValue(dst),
+        JsiSkColorFilter.fromValue(src)
+      )
+    );
+  }
+
+  MakeLinearToSRGBGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLinearToSRGBGamma()
+    );
+  }
+
+  MakeSRGBToLinearGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeSRGBToLinearGamma()
+    );
+  }
+
+  MakeLumaColorFilter(): SkColorFilter {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLuma()
+    );
+  }
+}

package/src/skia/web/JsiSkContourMeasure.ts

@@ -0,0 +1,39 @@
+import type { CanvasKit, ContourMeasure } from "canvaskit-wasm";
+
+import type { SkContourMeasure } from "../types";
+
+import { HostObject } from "./Host";
+import { JsiSkPath } from "./JsiSkPath";
+import { JsiSkPoint } from "./JsiSkPoint";
+
+export class JsiSkContourMeasure
+  extends HostObject<ContourMeasure, "ContourMeasure">
+  implements SkContourMeasure
+{
+  constructor(CanvasKit: CanvasKit, ref: ContourMeasure) {
+    super(CanvasKit, ref, "ContourMeasure");
+  }
+
+  getPosTan(distance: number): [position: JsiSkPoint, tangent: JsiSkPoint] {
+    const posTan = this.ref.getPosTan(distance);
+    return [
+      new JsiSkPoint(this.CanvasKit, posTan.slice(0, 2)),
+      new JsiSkPoint(this.CanvasKit, posTan.slice(2)),
+    ];
+  }
+
+  getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {
+    const segment = this.ref.getSegment(startD, stopD, startWithMoveTo);
+    const builder = new this.CanvasKit.PathBuilder(segment);
+    segment.delete();
+    return new JsiSkPath(this.CanvasKit, builder);
+  }
+
+  isClosed() {
+    return this.ref.isClosed();
+  }
+
+  length() {
+    return this.ref.length();
+  }
+}

package/src/skia/web/JsiSkContourMeasureIter.ts

@@ -0,0 +1,23 @@
+import type { CanvasKit, ContourMeasureIter } from "canvaskit-wasm";
+
+import type { SkContourMeasureIter } from "../types/ContourMeasure";
+
+import { HostObject } from "./Host";
+import { JsiSkContourMeasure } from "./JsiSkContourMeasure";
+
+export class JsiSkContourMeasureIter
+  extends HostObject<ContourMeasureIter, "ContourMeasureIter">
+  implements SkContourMeasureIter
+{
+  constructor(CanvasKit: CanvasKit, ref: ContourMeasureIter) {
+    super(CanvasKit, ref, "ContourMeasureIter");
+  }
+
+  next() {
+    const result = this.ref.next();
+    if (result === null) {
+      return null;
+    }
+    return new JsiSkContourMeasure(this.CanvasKit, result);
+  }
+}

package/src/skia/web/JsiSkData.ts

@@ -0,0 +1,13 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData } from "../types";
+
+import { HostObject } from "./Host";
+
+type Data = ArrayBuffer;
+
+export class JsiSkData extends HostObject<Data, "Data"> implements SkData {
+  constructor(CanvasKit: CanvasKit, ref: Data) {
+    super(CanvasKit, ref, "Data");
+  }
+}

package/src/skia/web/JsiSkDataFactory.ts

@@ -0,0 +1,34 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData } from "../types";
+import type { DataFactory } from "../types/Data/DataFactory";
+
+import { Host } from "./Host";
+import { JsiSkData } from "./JsiSkData";
+
+export class JsiSkDataFactory extends Host implements DataFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  fromURI(uri: string) {
+    return fetch(uri)
+      .then((response) => response.arrayBuffer())
+      .then((data) => new JsiSkData(this.CanvasKit, data));
+  }
+  /**
+   * Creates a new Data object from a byte array.
+   * @param bytes An array of bytes representing the data
+   */
+  fromBytes(bytes: Uint8Array) {
+    return new JsiSkData(this.CanvasKit, bytes as unknown as ArrayBuffer);
+  }
+  /**
+   * Creates a new Data object from a base64 encoded string.
+   * @param base64 A Base64 encoded string representing the data
+   */
+  fromBase64(base64: string): SkData {
+    const bytes = Uint8Array.from(atob(base64), (c) => c.charCodeAt(0));
+    return this.fromBytes(bytes);
+  }
+}