@shopify/react-native-skia 0.1.130 → 0.1.131

package/src/skia/web/{api/JsiSkColor.ts → JsiSkColor.ts}

@@ -1,13 +1,12 @@
-import type { CanvasKit } from "canvaskit-wasm";
-
-import type { SkColor, Color as InputColor } from "../../types";
+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 = {
+// 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),
@@ -159,11 +158,158 @@ const colorMap = {
   yellowgreen: Float32Array.of(154, 205, 50, 1),
 };
 
-export const Color = (CanvasKit: CanvasKit, color: InputColor): SkColor => {
+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);
+  }
+  // eslint-disable-next-line radix
+  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];
+    }
+
+    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 (typeof color === "string") {
-    const rgba = CanvasKit.parseColorString(color, colorMap);
+    const r = parseCSSColor(color);
+    const rgba = r === null ? CSSColorTable.black : r;
     return Float32Array.of(
       rgba[0] / 255,
       rgba[1] / 255,

package/src/skia/web/{api/JsiSkColorFilter.ts → JsiSkColorFilter.ts}

@@ -1,6 +1,6 @@
 import type { CanvasKit, ColorFilter } from "canvaskit-wasm";
 
-import type { SkColorFilter } from "../../types";
+import type { SkColorFilter } from "../types";
 
 import { HostObject } from "./Host";
 

package/src/skia/web/JsiSkColorFilterFactory.ts

@@ -0,0 +1,67 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ColorFilterFactory,
+  SkColorFilter,
+  InputColorMatrix,
+  SkColor,
+  BlendMode,
+} from "../types";
+
+import { ckEnum, Host, toValue, NotImplementedOnRNWeb } 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(toValue(color), ckEnum(mode))
+    );
+  }
+
+  MakeCompose(outer: SkColorFilter, inner: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeCompose(toValue(outer), toValue(inner))
+    );
+  }
+
+  MakeLerp(t: number, dst: SkColorFilter, src: SkColorFilter) {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLerp(t, toValue(dst), toValue(src))
+    );
+  }
+
+  MakeLinearToSRGBGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeLinearToSRGBGamma()
+    );
+  }
+
+  MakeSRGBToLinearGamma() {
+    return new JsiSkColorFilter(
+      this.CanvasKit,
+      this.CanvasKit.ColorFilter.MakeSRGBToLinearGamma()
+    );
+  }
+
+  MakeLumaColorFilter(): SkColorFilter {
+    throw new NotImplementedOnRNWeb();
+  }
+}

package/src/skia/web/JsiSkContourMeasure.ts

@@ -0,0 +1,35 @@
+import type { CanvasKit, ContourMeasure } from "canvaskit-wasm";
+
+import type { SkContourMeasure } from "../types";
+
+import { HostObject } from "./Host";
+import { JsiSkPath } from "./JsiSkPath";
+
+export class JsiSkContourMeasure
+  extends HostObject<ContourMeasure, "ContourMeasure">
+  implements SkContourMeasure
+{
+  constructor(CanvasKit: CanvasKit, ref: ContourMeasure) {
+    super(CanvasKit, ref, "ContourMeasure");
+  }
+
+  getPosTan(distance: number) {
+    const [px, py, tx, ty] = this.ref.getPosTan(distance);
+    return { px, py, tx, ty };
+  }
+
+  getSegment(startD: number, stopD: number, startWithMoveTo: boolean) {
+    return new JsiSkPath(
+      this.CanvasKit,
+      this.ref.getSegment(startD, stopD, startWithMoveTo)
+    );
+  }
+
+  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,35 @@
+/*global btoa, atob*/
+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);
+  }
+  /**
+   * 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);
+  }
+}

package/src/skia/web/JsiSkFont.ts

@@ -0,0 +1,124 @@
+import type { CanvasKit, Font } from "canvaskit-wasm";
+
+import type {
+  FontEdging,
+  FontHinting,
+  SkFont,
+  SkPaint,
+  SkPoint,
+  SkRect,
+  SkTypeface,
+} from "../types";
+
+import { HostObject, NotImplementedOnRNWeb, toValue, ckEnum } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+
+export class JsiSkFont extends HostObject<Font, "Font"> implements SkFont {
+  constructor(CanvasKit: CanvasKit, ref: Font) {
+    super(CanvasKit, ref, "Font");
+  }
+
+  measureText(_text: string, _paint?: SkPaint): SkRect {
+    throw new NotImplementedOnRNWeb();
+  }
+
+  getMetrics() {
+    const result = this.ref.getMetrics();
+    return {
+      ascent: result.ascent,
+      descent: result.descent,
+      leading: result.leading,
+      bounds: result.bounds
+        ? new JsiSkRect(this.CanvasKit, result.bounds)
+        : undefined,
+    };
+  }
+
+  getGlyphIDs(str: string, numCodePoints?: number) {
+    // TODO: Fix return value in the C++ implementation
+    return [...this.ref.getGlyphIDs(str, numCodePoints)];
+  }
+
+  // TODO: Fix return value in the C++ implementation, it return float32
+  getGlyphWidths(glyphs: number[], paint?: SkPaint | null) {
+    return this.ref.getGlyphWidths(glyphs, paint ? toValue(paint) : null);
+  }
+
+  getGlyphIntercepts(
+    glyphs: number[],
+    positions: SkPoint[],
+    top: number,
+    bottom: number
+  ) {
+    return [
+      ...this.ref.getGlyphIntercepts(
+        glyphs,
+        positions.map((p) => toValue(p)),
+        top,
+        bottom
+      ),
+    ];
+  }
+
+  getScaleX() {
+    return this.ref.getScaleX();
+  }
+
+  getSize() {
+    return this.ref.getSize();
+  }
+
+  getSkewX() {
+    return this.ref.getSkewX();
+  }
+
+  isEmbolden() {
+    return this.ref.isEmbolden();
+  }
+
+  getTypeface() {
+    const tf = this.ref.getTypeface();
+    return tf ? new JsiSkTypeface(this.CanvasKit, tf) : null;
+  }
+
+  setEdging(edging: FontEdging) {
+    this.ref.setEdging(ckEnum(edging));
+  }
+
+  setEmbeddedBitmaps(embeddedBitmaps: boolean) {
+    this.ref.setEmbeddedBitmaps(embeddedBitmaps);
+  }
+
+  setHinting(hinting: FontHinting) {
+    this.ref.setHinting(ckEnum(hinting));
+  }
+
+  setLinearMetrics(linearMetrics: boolean) {
+    this.ref.setLinearMetrics(linearMetrics);
+  }
+
+  setScaleX(sx: number) {
+    this.ref.setScaleX(sx);
+  }
+
+  setSize(points: number) {
+    this.ref.setSize(points);
+  }
+
+  setSkewX(sx: number) {
+    this.ref.setSkewX(sx);
+  }
+
+  setEmbolden(embolden: boolean) {
+    this.ref.setEmbolden(embolden);
+  }
+
+  setSubpixel(subpixel: boolean) {
+    this.ref.setSubpixel(subpixel);
+  }
+
+  setTypeface(face: SkTypeface | null) {
+    this.ref.setTypeface(face ? toValue(face) : null);
+  }
+}

package/src/skia/web/JsiSkFontMgr.ts

@@ -0,0 +1,42 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { FontStyle, SkFontMgr, SkTypeface } from "../types";
+
+import { HostObject } from "./Host";
+
+export class JsiSkFontMgr
+  extends HostObject<null, "FontMgr">
+  implements SkFontMgr
+{
+  constructor(CanvasKit: CanvasKit) {
+    console.warn(
+      // eslint-disable-next-line max-len
+      "Using system fonts is deprecated. Please use the font property instead: https://shopify.github.io/react-native-skia/docs/text/fonts"
+    );
+    super(CanvasKit, null, "FontMgr");
+  }
+
+  countFamilies() {
+    console.warn(
+      "countFamilies() is deprecated. It returns 0 on React Native Web"
+    );
+    return 0;
+  }
+
+  getFamilyName(_index: number) {
+    console.warn(
+      "getFamilyName() is deprecated. It returns an empty string on React Native Web"
+    );
+    return "";
+  }
+
+  matchFamilyStyle(
+    _familyName: string,
+    _fontStyle?: FontStyle
+  ): SkTypeface | null {
+    console.warn(
+      "matchFamilyStyle() is deprecated. It returns null on React Native Web"
+    );
+    return null;
+  }
+}

package/src/skia/web/JsiSkFontMgrFactory.ts

@@ -0,0 +1,18 @@
+/*global atob*/
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkFontMgr } from "../types";
+import type { FontMgrFactory } from "../types/FontMgr/FontMgrFactory";
+
+import { Host } from "./Host";
+import { JsiSkFontMgr } from "./JsiSkFontMgr";
+
+export class JsiSkFontMgrFactory extends Host implements FontMgrFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  RefDefault(): SkFontMgr {
+    return new JsiSkFontMgr(this.CanvasKit);
+  }
+}

package/src/skia/web/{api/JsiSkImage.ts → JsiSkImage.ts}

@@ -8,7 +8,7 @@ import type {
   SkMatrix,
   SkShader,
   TileMode,
-} from "../../types";
+} from "../types";
 
 import { ckEnum, HostObject } from "./Host";
 

package/src/skia/web/JsiSkImageFactory.ts

@@ -0,0 +1,40 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { SkData, ImageInfo } from "../types";
+import type { ImageFactory } from "../types/Image/ImageFactory";
+
+import { Host, toValue, ckEnum } from "./Host";
+import { JsiSkImage } from "./JsiSkImage";
+
+export class JsiSkImageFactory extends Host implements ImageFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeImageFromEncoded(encoded: SkData) {
+    const image = this.CanvasKit.MakeImageFromEncoded(toValue(encoded));
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+
+  MakeImage(info: ImageInfo, data: SkData, bytesPerRow: number) {
+    // see toSkImageInfo() from canvaskit
+    const image = this.CanvasKit.MakeImage(
+      {
+        alphaType: ckEnum(info.alphaType),
+        colorSpace: this.CanvasKit.ColorSpace.SRGB,
+        colorType: ckEnum(info.colorType),
+        height: info.height,
+        width: info.width,
+      },
+      toValue(data),
+      bytesPerRow
+    );
+    if (image === null) {
+      return null;
+    }
+    return new JsiSkImage(this.CanvasKit, image);
+  }
+}

package/src/skia/web/JsiSkImageFilter.ts

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

package/src/skia/web/JsiSkMaskFilter.ts

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

package/src/skia/web/JsiSkMaskFilterFactory.ts

@@ -0,0 +1,20 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type { BlurStyle } from "../types";
+import type { MaskFilterFactory } from "../types/MaskFilter";
+
+import { Host, ckEnum } from "./Host";
+import { JsiSkMaskFilter } from "./JsiSkMaskFilter";
+
+export class JsiSkMaskFilterFactory extends Host implements MaskFilterFactory {
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  MakeBlur(style: BlurStyle, sigma: number, respectCTM: boolean) {
+    return new JsiSkMaskFilter(
+      this.CanvasKit,
+      this.CanvasKit.MaskFilter.MakeBlur(ckEnum(style), sigma, respectCTM)
+    );
+  }
+}