@shopify/react-native-skia 0.1.207 → 0.1.209

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

@@ -1,4 +1,9 @@
-import type { SkRSXform, SkTextBlob, SkPoint } from "../../../skia/types";
+import type {
+  SkRSXform,
+  SkTextBlob,
+  SkPoint,
+  SkFont,
+} from "../../../skia/types";
 import type {
   DrawingContext,
   TextBlobProps,
@@ -11,18 +16,39 @@ import type { GlyphsProps } from "../../types/Drawings";
 import { JsiDrawingNode } from "../DrawingNode";
 import type { NodeContext } from "../Node";
 
-export class TextNode extends JsiDrawingNode<TextProps, null> {
+export class TextNode extends JsiDrawingNode<TextProps, SkFont | null> {
   constructor(ctx: NodeContext, props: TextProps) {
     super(ctx, NodeType.Text, props);
   }
 
   protected deriveProps() {
-    return null;
+    const { font } = this.props;
+    if (font === null) {
+      return null;
+    } else if (font === undefined) {
+      console.warn(
+        "<Text />: the font property is mandatory on React Native Web"
+      );
+      return null;
+      // return this.Skia.Font(
+      //   this.Skia.FontMgr.System().matchFamilyStyle("System", {
+      //     width: 5,
+      //     weight: 400,
+      //     slant: 0,
+      //   }),
+      //   14
+      // );
+    }
+    return font;
   }
 
   draw({ canvas, paint }: DrawingContext) {
-    const { text, x, y, font } = this.props;
-    if (font) {
+    const { text, x, y } = this.props;
+    const font = this.derived;
+    if (font === undefined) {
+      throw new Error("TextNode: font hasn't been derived");
+    }
+    if (font != null) {
       canvas.drawText(text, x, y, paint, font);
     }
   }

package/src/dom/types/Common.ts

@@ -79,6 +79,7 @@ export interface PaintProps extends ChildrenProps {
   strokeMiter?: number;
   opacity?: number;
   antiAlias?: boolean;
+  dither?: boolean;
 }
 
 export interface GroupProps extends PaintProps, TransformProps {

package/src/dom/types/DrawingContext.ts

@@ -76,6 +76,7 @@ class ConcatablePaint {
   _strokeMiter?: number;
   _opacity = 1;
   _antiAlias?: boolean;
+  _dither?: boolean;
 
   _imageFilter?: SkImageFilter;
   _shader?: SkShader;
@@ -97,6 +98,7 @@ class ConcatablePaint {
     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) {
@@ -215,6 +217,14 @@ class ConcatablePaint {
     return this._antiAlias;
   }
 
+  setDither(dither?: boolean) {
+    this.setValue("_dither", dither);
+  }
+
+  getDither() {
+    return this._dither;
+  }
+
   setImageFilter(imageFilter?: SkImageFilter) {
     this.setValue("_imageFilter", imageFilter);
   }
@@ -290,6 +300,9 @@ class ConcatablePaint {
     if (this._antiAlias !== undefined) {
       paint.setAntiAlias(this._antiAlias);
     }
+    if (this._dither !== undefined) {
+      paint.setDither(this._dither);
+    }
     if (this._imageFilter !== undefined) {
       paint.setImageFilter(this._imageFilter);
     }

package/src/dom/types/Drawings.ts

@@ -114,7 +114,7 @@ export interface DiffRectProps extends DrawingNodeProps {
 }
 
 export interface TextProps extends DrawingNodeProps {
-  font: SkFont | null;
+  font?: SkFont | null;
   text: string;
   x: number;
   y: number;

package/src/external/reanimated/moduleWrapper.ts

@@ -30,7 +30,7 @@ function throwOnMissingReanimated2() {
   if (!HAS_REANIMATED2) {
     throw new Error(
       "Reanimated was not found, make sure react-native-reanimated package is installed if you want to use \
-      react-naitve-skia's integration layer API."
+      react-native-skia's integration layer API."
     );
   }
 }

package/src/skia/types/Font/FontMgr.ts

@@ -6,5 +6,5 @@ import type { FontStyle } from "./Font";
 export interface SkFontMgr extends SkJSIInstance<"FontMgr"> {
   countFamilies(): number;
   getFamilyName(index: number): string;
-  matchFamilyStyle(name: string, style: FontStyle): SkTypeface;
+  matchFamilyStyle(name?: string, style?: FontStyle): SkTypeface;
 }

package/src/skia/types/Image/ImageFactory.ts

@@ -21,6 +21,7 @@ export enum ColorType {
   BGRA_1010102, //!< 10 bits for blue, green, red; 2 bits for alpha; in 32-bit word
   RGB_101010x, //!< pixel with 10 bits each for red, green, blue; in 32-bit word
   BGR_101010x, //!< pixel with 10 bits each for blue, green, red; in 32-bit word
+  BGR_101010x_XR, //!< pixel with 10 bits each for blue, green, red; in 32-bit word, extended range
   Gray_8, //!< pixel with grayscale level in 8-bit byte
   RGBA_F16Norm, //!< pixel with half floats in [0,1] for red, green, blue, alpha;
   //   in 64-bit word

package/src/skia/types/Paint/Paint.ts

@@ -84,6 +84,12 @@ export interface SkPaint extends SkJSIInstance<"Paint"> {
    */
   setAntiAlias: (aa: boolean) => void;
 
+  /**
+   * Requests, but does not require, to distribute color error.
+   * @param dither
+   */
+  setDither: (dither: boolean) => void;
+
   /**
    * Sets the blend mode that is, the mode used to combine source color
    * with destination color.

package/src/skia/types/Typeface/Typeface.ts

@@ -1,3 +1,12 @@
 import type { SkJSIInstance } from "../JsiInstance";
 
-export type SkTypeface = SkJSIInstance<"Typeface">;
+export interface SkTypeface extends SkJSIInstance<"Typeface"> {
+  /**
+   * Retrieves the glyph ids for each code point in the provided string. This call is passed to
+   * the typeface of this font. Note that glyph IDs are typeface-dependent; different faces
+   * may have different ids for the same code point.
+   * @param str
+   * @param numCodePoints - the number of code points in the string. Defaults to str.length.
+   */
+  getGlyphIDs(str: string, numCodePoints?: number): number[];
+}

package/src/skia/web/JsiSkPaint.ts

@@ -70,6 +70,10 @@ export class JsiSkPaint extends HostObject<Paint, "Paint"> implements SkPaint {
     this.ref.setAntiAlias(aa);
   }
 
+  setDither(dither: boolean) {
+    this.ref.setDither(dither);
+  }
+
   setBlendMode(blendMode: BlendMode) {
     this.ref.setBlendMode(ckEnum(blendMode));
   }

package/src/skia/web/JsiSkPath.ts

@@ -28,6 +28,8 @@ const CommandCount = {
   [PathVerb.Close]: 1,
 };
 
+const pinT = (t: number) => Math.min(Math.max(t, 0), 1);
+
 export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
   constructor(CanvasKit: CanvasKit, ref: Path) {
     super(CanvasKit, ref, "Path");
@@ -317,7 +319,12 @@ export class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
     return this.ref.toSVGString();
   }
 
-  trim(startT: number, stopT: number, isComplement: boolean) {
+  trim(start: number, stop: number, isComplement: boolean) {
+    const startT = pinT(start);
+    const stopT = pinT(stop);
+    if (startT === 0 && stopT === 1) {
+      return this;
+    }
     const result = this.ref.trim(startT, stopT, isComplement);
     return result === null ? result : this;
   }

package/src/skia/web/JsiSkTypeface.ts

@@ -26,6 +26,10 @@ export class JsiSkTypeface
     return false;
   }
 
+  getGlyphIDs(str: string, numCodePoints?: number) {
+    return Array.from(this.ref.getGlyphIDs(str, numCodePoints));
+  }
+
   dispose = () => {
     this.ref.delete();
   };