@shopify/react-native-skia 0.1.221 → 0.1.223

package/src/skia/types/Paragraph/Paragraph.ts

@@ -0,0 +1,59 @@
+import type { SkCanvas } from "../Canvas";
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkRect } from "../Rect";
+
+import type { SkTextDirection } from "./ParagraphStyle";
+
+export interface SkRectWithDirection {
+  rect: SkRect;
+  direction: SkTextDirection;
+}
+
+export interface SkParagraph extends SkJSIInstance<"Paragraph"> {
+  /**
+   * Calculates the position of the the glyphs in the paragraph
+   * @param width Max width of the paragraph
+   */
+  layout(width: number): void;
+  /**
+   * Paints the paragraph to the provded canvas
+   * @param canvas Canvas to paint into
+   * @param x X coordinate to paint at
+   * @param y Y coordinate to paint at
+   */
+  paint(canvas: SkCanvas, x: number, y: number): void;
+  /**
+   * Returns the height of the paragraph. This method requires the layout
+   * method to have been called first.
+   */
+  getHeight(): number;
+  /**
+   * Returns the max width of the paragraph. This method requires the layout
+   * method to have been called first.
+   */
+  getMaxWidth(): number;
+  /**
+   * Returns the index of the glyph at the given position. This method requires
+   * the layout method to have been called first.
+   * @param x X coordinate of the position
+   * @param y Y coordinate of the position
+   */
+  getGlyphPositionAtCoordinate(x: number, y: number): number;
+  /**
+   * Returns the bounding boxes of the glyphs in the given range. This method
+   * requires the layout method to have been called first.
+   * @param start Start index of the range
+   * @param end End index of the range
+   */
+  getRectsForRange(start: number, end: number): SkRect[];
+  /**
+   * Returns the bounding boxes for all lines in the paragraph. This method
+   * requires the layout method to have been called first.
+   */
+  getLineMetrics(): Array<SkRect>;
+  /**
+   * Returns a list of rects with direction info for the placeholders added
+   * to the paragraph.
+   */
+  getRectsForPlaceholders(): SkRectWithDirection[];
+}

package/src/skia/types/Paragraph/ParagraphBuilder.ts

@@ -0,0 +1,96 @@
+import type { SkJSIInstance } from "../JsiInstance";
+import type { SkPaint } from "../Paint";
+
+import type { SkParagraph } from "./Paragraph";
+import type { SkParagraphStyle } from "./ParagraphStyle";
+import type { SkTextStyle, TextBaseline } from "./TextStyle";
+import type { SkTypefaceFontProvider } from "./TypefaceFontProvider";
+
+export interface ParagraphBuilderFactory {
+  /**
+   * Creates a new ParagraphBuilder object from custom fonts.
+   * @param paragraphStyle Initial paragraph style
+   * @param typefaceProvider Typeface provider
+   */
+  Make(
+    paragraphStyle?: SkParagraphStyle,
+    typefaceProvider?: SkTypefaceFontProvider
+  ): SkParagraphBuilder;
+}
+
+export enum PlaceholderAlignment {
+  /// Match the baseline of the placeholder with the baseline.
+  Baseline = 0,
+
+  /// Align the bottom edge of the placeholder with the baseline such that the
+  /// placeholder sits on top of the baseline.
+  AboveBaseline,
+
+  /// Align the top edge of the placeholder with the baseline specified in
+  /// such that the placeholder hangs below the baseline.
+  BelowBaseline,
+
+  /// Align the top edge of the placeholder with the top edge of the font.
+  /// When the placeholder is very tall, the extra space will hang from
+  /// the top and extend through the bottom of the line.
+  Top,
+
+  /// Align the bottom edge of the placeholder with the top edge of the font.
+  /// When the placeholder is very tall, the extra space will rise from
+  /// the bottom and extend through the top of the line.
+  Bottom,
+
+  /// Align the middle of the placeholder with the middle of the text. When the
+  /// placeholder is very tall, the extra space will grow equally from
+  /// the top and bottom of the line.
+  Middle,
+}
+
+export interface SkParagraphBuilder extends SkJSIInstance<"ParagraphBuilder"> {
+  /**
+   * Creates a Paragraph object from the builder and the inputs given to the builder.
+   */
+  build(): SkParagraph;
+  /**
+   * Restores the builder to its initial empty state.
+   */
+  reset(): void;
+  /**
+   * Pushes a text-style to the builder
+   * @param style Style to push
+   * @param foregroundPaint Foreground paint object
+   * @param backgroundPaint Background paint object
+   * @returns The builder
+   */
+  pushStyle: (
+    style: SkTextStyle,
+    foregroundPaint?: SkPaint | undefined,
+    backgroundPaint?: SkPaint | undefined
+  ) => SkParagraphBuilder;
+  /**
+   * Pops the current text style from the builder
+   * @returns The builder
+   */
+  pop: () => SkParagraphBuilder;
+  /**
+   * Adds text to the builder
+   * @param text
+   * @returns The builder
+   */
+  addText: (text: string) => SkParagraphBuilder;
+  /**
+   * Pushes the information required to leave an open space.
+   * @param width
+   * @param height
+   * @param alignment
+   * @param baseline
+   * @param offset
+   */
+  addPlaceholder(
+    width?: number,
+    height?: number,
+    alignment?: PlaceholderAlignment,
+    baseline?: TextBaseline,
+    offset?: number
+  ): SkParagraphBuilder;
+}

package/src/skia/types/Paragraph/ParagraphStyle.ts

@@ -0,0 +1,45 @@
+import type { SkTextFontStyle, SkTextStyle } from "./TextStyle";
+
+export enum SkTextDirection {
+  RTL = 0,
+  LTR = 1,
+}
+export enum SkTextAlign {
+  Left = 0,
+  Right,
+  Center,
+  Justify,
+  Start,
+  End,
+}
+
+export interface SkStrutStyle {
+  strutEnabled?: boolean;
+  fontFamilies?: string[];
+  fontStyle?: SkTextFontStyle;
+  fontSize?: number;
+  heightMultiplier?: number;
+  halfLeading?: boolean;
+  leading?: number;
+  forceStrutHeight?: boolean;
+}
+
+export enum SkTextHeightBehavior {
+  All = 0x0,
+  DisableFirstAscent = 0x1,
+  DisableLastDescent = 0x2,
+  DisableAll = 0x1 | 0x2,
+}
+
+export interface SkParagraphStyle {
+  disableHinting?: boolean;
+  ellipsis?: string;
+  heightMultiplier?: number;
+  maxLines?: number;
+  replaceTabCharacters?: boolean;
+  strutStyle?: SkStrutStyle;
+  textAlign?: SkTextAlign;
+  textDirection?: SkTextDirection;
+  textHeightBehavior?: SkTextHeightBehavior;
+  textStyle?: SkTextStyle;
+}

package/src/skia/types/Paragraph/TextStyle.ts

@@ -0,0 +1,70 @@
+import type { SkColor } from "../Color";
+import type { FontSlant, FontWeight, FontWidth } from "../Font";
+import type { SkPoint } from "../Point";
+
+export enum TextDecoration {
+  NoDecoration = 0x0,
+  Underline = 0x1,
+  Overline = 0x2,
+  LineThrough = 0x4,
+}
+
+export enum TextDecorationStyle {
+  Solid = 0,
+  Double,
+  Dotted,
+  Dashed,
+  Wavy,
+}
+
+export interface SkTextShadow {
+  color?: SkColor;
+  /**
+   * 2d array for x and y offset. Defaults to [0, 0]
+   */
+  offset?: SkPoint;
+  blurRadius?: number;
+}
+
+export interface SkTextFontFeatures {
+  name: string;
+  value: number;
+}
+
+export interface SkTextFontStyle {
+  weight?: FontWeight;
+  width?: FontWidth;
+  slant?: FontSlant;
+}
+
+export interface SkTextFontVariations {
+  axis: string;
+  value: number;
+}
+
+export enum TextBaseline {
+  Alphabetic = 0,
+  Ideographic,
+}
+
+export interface SkTextStyle {
+  backgroundColor?: SkColor;
+  color?: SkColor;
+  decoration?: number;
+  decorationColor?: SkColor;
+  decorationThickness?: number;
+  decorationStyle?: TextDecoration;
+  fontFamilies?: string[];
+  fontFeatures?: SkTextFontFeatures[];
+  fontSize?: number;
+  fontStyle?: SkTextFontStyle;
+  fontVariations?: SkTextFontVariations[];
+  foregroundColor?: SkColor;
+  heightMultiplier?: number;
+  halfLeading?: boolean;
+  letterSpacing?: number;
+  locale?: string;
+  shadows?: SkTextShadow[];
+  textBaseline?: TextBaseline;
+  wordSpacing?: number;
+}

package/src/skia/types/Paragraph/index.ts

@@ -0,0 +1,6 @@
+export * from "./TypefaceFontProvider";
+export * from "./TypefaceFontProviderFactory";
+export * from "./Paragraph";
+export * from "./ParagraphBuilder";
+export * from "./ParagraphStyle";
+export * from "./TextStyle";

package/src/skia/types/Skia.ts

@@ -29,6 +29,7 @@ import type { PictureFactory, SkPictureRecorder } from "./Picture";
 import type { Color, SkColor } from "./Color";
 import type { TypefaceFontProviderFactory } from "./Paragraph/TypefaceFontProviderFactory";
 import type { AnimatedImageFactory } from "./AnimatedImage";
+import type { ParagraphBuilderFactory } from "./Paragraph/ParagraphBuilder";
 
 /**
  * Declares the interface for the native Skia API
@@ -84,4 +85,6 @@ export interface Skia {
   SVG: SVGFactory;
   TextBlob: TextBlobFactory;
   Surface: SurfaceFactory;
+  // Paragraph
+  ParagraphBuilder: ParagraphBuilderFactory;
 }

package/src/skia/types/index.ts

@@ -27,3 +27,4 @@ export * from "./JsiInstance";
 export * from "./Skia";
 export * from "./TextBlob";
 export * from "./Size";
+export * from "./Paragraph";

package/src/skia/web/JsiSkImage.ts

@@ -127,12 +127,6 @@ export class JsiSkImage extends HostObject<Image, "Image"> implements SkImage {
 
   readPixels(srcX?: number, srcY?: number, imageInfo?: ImageInfo) {
     const info = this.getImageInfo();
-    console.log({
-      alphaType: ckEnum(info.alphaType),
-      colorType: ckEnum(info.colorType),
-      realAlphaType: this.CanvasKit.AlphaType.Opaque.value,
-      realColorType: this.CanvasKit.ColorType.RGBA_8888.value,
-    });
     const pxInfo: CKImageInfo = {
       colorSpace: this.CanvasKit.ColorSpace.SRGB,
       width: imageInfo?.width ?? info.width,

package/src/skia/web/JsiSkParagraph.ts

@@ -0,0 +1,69 @@
+import type { CanvasKit, Paragraph } from "canvaskit-wasm";
+
+import type { SkRect, SkRectWithDirection, SkParagraph } from "../types";
+
+import { HostObject } from "./Host";
+import type { JsiSkCanvas } from "./JsiSkCanvas";
+
+export class JsiSkParagraph
+  extends HostObject<Paragraph, "Paragraph">
+  implements SkParagraph
+{
+  constructor(CanvasKit: CanvasKit, ref: Paragraph) {
+    super(CanvasKit, ref, "Paragraph");
+  }
+
+  layout(width: number): void {
+    this.ref.layout(width);
+  }
+  paint(canvas: JsiSkCanvas, x: number, y: number): void {
+    canvas.ref.drawParagraph(this.ref, x, y);
+  }
+  getHeight(): number {
+    return this.ref.getHeight();
+  }
+  getMaxWidth(): number {
+    return this.ref.getMaxWidth();
+  }
+  getGlyphPositionAtCoordinate(x: number, y: number): number {
+    return this.ref.getGlyphPositionAtCoordinate(x, y).pos;
+  }
+  getRectsForPlaceholders(): SkRectWithDirection[] {
+    return this.ref.getRectsForPlaceholders().map(({ rect, dir }) => ({
+      rect: {
+        x: rect.at(0)!,
+        y: rect.at(1)!,
+        width: rect.at(2)!,
+        height: rect.at(3)!,
+      },
+      direction: dir.value,
+    }));
+  }
+  getRectsForRange(start: number, end: number): SkRect[] {
+    return this.ref
+      .getRectsForRange(
+        start,
+        end,
+        { value: 0 } /** kTight */,
+        { value: 0 } /** kTight */
+      )
+      .map(({ rect }) => ({
+        x: rect[0],
+        y: rect[1],
+        width: rect[2],
+        height: rect[3],
+      }));
+  }
+  getLineMetrics(): SkRect[] {
+    return this.ref.getLineMetrics().map((r, index) => ({
+      x: r.left,
+      y: index * r.height,
+      width: r.width,
+      height: r.height,
+    }));
+  }
+
+  dispose() {
+    this.ref.delete();
+  }
+}

package/src/skia/web/JsiSkParagraphBuilder.ts

@@ -0,0 +1,99 @@
+import type {
+  CanvasKit,
+  InputColor,
+  Paint,
+  ParagraphBuilder,
+  TextStyle,
+} from "canvaskit-wasm";
+
+import type {
+  SkParagraphBuilder,
+  SkParagraph,
+  SkTextStyle,
+  SkPaint,
+} from "../types";
+import { PlaceholderAlignment, TextBaseline } from "../types";
+
+import { HostObject } from "./Host";
+import { JsiSkParagraph } from "./JsiSkParagraph";
+import { JsiSkTextStyle } from "./JsiSkTextStyle";
+import { JsiSkPaint } from "./JsiSkPaint";
+
+export class JsiSkParagraphBuilder
+  extends HostObject<ParagraphBuilder, "ParagraphBuilder">
+  implements SkParagraphBuilder
+{
+  constructor(CanvasKit: CanvasKit, ref: ParagraphBuilder) {
+    super(CanvasKit, ref, "ParagraphBuilder");
+  }
+
+  addPlaceholder(
+    width: number | undefined = 0,
+    height: number | undefined = 0,
+    alignment: PlaceholderAlignment | undefined = PlaceholderAlignment.Baseline,
+    baseline: TextBaseline | undefined = TextBaseline.Alphabetic,
+    offset: number | undefined = 0
+  ): SkParagraphBuilder {
+    this.ref.addPlaceholder(
+      width,
+      height,
+      { value: alignment },
+      { value: baseline },
+      offset
+    );
+    return this;
+  }
+  addText(text: string): SkParagraphBuilder {
+    this.ref.addText(text);
+    return this;
+  }
+
+  build(): SkParagraph {
+    return new JsiSkParagraph(this.CanvasKit, this.ref.build());
+  }
+
+  reset(): void {
+    this.ref.reset();
+  }
+
+  pushStyle(
+    style: SkTextStyle,
+    foregroundPaint?: SkPaint | undefined,
+    backgroundPaint?: SkPaint | undefined
+  ): SkParagraphBuilder {
+    const textStyle: TextStyle = JsiSkTextStyle.toTextStyle(style);
+    if (foregroundPaint || backgroundPaint) {
+      // Due the canvaskit API not exposing textStyle methods,
+      // we set the default paint color to black for the foreground
+      // and transparent for the background
+      const fg: Paint = foregroundPaint
+        ? JsiSkPaint.fromValue(foregroundPaint)
+        : this.makePaint(textStyle.color ?? Float32Array.of(0, 0, 0, 1));
+      const bg: Paint = backgroundPaint
+        ? JsiSkPaint.fromValue(backgroundPaint)
+        : this.makePaint(
+            textStyle.backgroundColor ?? Float32Array.of(0, 0, 0, 0)
+          );
+      this.ref.pushPaintStyle(new this.CanvasKit.TextStyle(textStyle), fg, bg);
+    } else {
+      this.ref.pushStyle(new this.CanvasKit.TextStyle(textStyle));
+    }
+
+    return this;
+  }
+
+  pop(): SkParagraphBuilder {
+    this.ref.pop();
+    return this;
+  }
+
+  dispose() {
+    this.ref.delete();
+  }
+
+  private makePaint(color: InputColor) {
+    const paint = new this.CanvasKit.Paint();
+    paint.setColor(color);
+    return paint;
+  }
+}

package/src/skia/web/JsiSkParagraphBuilderFactory.ts

@@ -0,0 +1,42 @@
+import type { CanvasKit } from "canvaskit-wasm";
+
+import type {
+  ParagraphBuilderFactory,
+  SkParagraphStyle,
+  SkTypefaceFontProvider,
+} from "../types";
+
+import { Host } from "./Host";
+import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
+import { JsiSkParagraphStyle } from "./JsiSkParagraphStyle";
+import { JsiSkTypeface } from "./JsiSkTypeface";
+
+export class JsiSkParagraphBuilderFactory
+  extends Host
+  implements ParagraphBuilderFactory
+{
+  constructor(CanvasKit: CanvasKit) {
+    super(CanvasKit);
+  }
+
+  Make(
+    paragraphStyle: SkParagraphStyle,
+    typefaceProvider?: SkTypefaceFontProvider
+  ) {
+    const style = new this.CanvasKit.ParagraphStyle(
+      JsiSkParagraphStyle.toParagraphStyle(this.CanvasKit, paragraphStyle ?? {})
+    );
+    if (typefaceProvider === undefined) {
+      throw new Error(
+        "SkTypefaceFontProvider is required on React Native Web."
+      );
+    }
+    return new JsiSkParagraphBuilder(
+      this.CanvasKit,
+      this.CanvasKit.ParagraphBuilder.MakeFromFontProvider(
+        style,
+        JsiSkTypeface.fromValue(typefaceProvider)
+      )
+    );
+  }
+}

package/src/skia/web/JsiSkParagraphStyle.ts

@@ -0,0 +1,65 @@
+import type { CanvasKit, ParagraphStyle } from "canvaskit-wasm";
+
+import { SkTextDirection, type SkParagraphStyle } from "../types";
+
+export class JsiSkParagraphStyle {
+  static toParagraphStyle(
+    ck: CanvasKit,
+    value: SkParagraphStyle
+  ): ParagraphStyle {
+    // Seems like we need to provide the textStyle.color value, otherwise
+    // the constructor crashes.
+    const ps = new ck.ParagraphStyle({ textStyle: { color: ck.BLACK } });
+
+    ps.disableHinting = value.disableHinting ?? ps.disableHinting;
+    ps.ellipsis = value.ellipsis ?? ps.ellipsis;
+    ps.heightMultiplier = value.heightMultiplier ?? ps.heightMultiplier;
+    ps.maxLines = value.maxLines ?? ps.maxLines;
+    ps.replaceTabCharacters =
+      value.replaceTabCharacters ?? ps.replaceTabCharacters;
+    ps.textAlign =
+      value.textAlign !== undefined
+        ? { value: value.textAlign }
+        : undefined ?? ps.textAlign;
+    ps.textDirection =
+      value.textDirection !== undefined
+        ? { value: value.textDirection === SkTextDirection.LTR ? 1 : 0 }
+        : ps.textDirection;
+    ps.textHeightBehavior =
+      value.textHeightBehavior !== undefined
+        ? { value: value.textHeightBehavior }
+        : ps.textHeightBehavior;
+
+    ps.strutStyle = ps.strutStyle ?? {};
+    ps.strutStyle.fontFamilies =
+      value.strutStyle?.fontFamilies ?? ps.strutStyle.fontFamilies;
+    ps.strutStyle.fontSize =
+      value.strutStyle?.fontSize ?? ps.strutStyle.fontSize;
+    ps.strutStyle.heightMultiplier =
+      value.strutStyle?.heightMultiplier ?? ps.strutStyle.heightMultiplier;
+    ps.strutStyle.leading = value.strutStyle?.leading ?? ps.strutStyle.leading;
+    ps.strutStyle.forceStrutHeight =
+      value.strutStyle?.forceStrutHeight ?? ps.strutStyle.forceStrutHeight;
+
+    ps.strutStyle.fontStyle = ps.strutStyle.fontStyle ?? {};
+
+    ps.strutStyle.fontStyle.slant =
+      value.strutStyle?.fontStyle?.slant !== undefined
+        ? { value: value.strutStyle.fontStyle.slant }
+        : ps.strutStyle.fontStyle.slant;
+    ps.strutStyle.fontStyle.width =
+      value.strutStyle?.fontStyle?.width !== undefined
+        ? { value: value.strutStyle.fontStyle.width }
+        : ps.strutStyle.fontStyle.width;
+    ps.strutStyle.fontStyle.weight =
+      value.strutStyle?.fontStyle?.weight !== undefined
+        ? { value: value.strutStyle.fontStyle.weight }
+        : ps.strutStyle.fontStyle.weight;
+    ps.strutStyle.halfLeading =
+      value.strutStyle?.halfLeading ?? ps.strutStyle.halfLeading;
+    ps.strutStyle.strutEnabled =
+      value.strutStyle?.strutEnabled ?? ps.strutStyle.strutEnabled;
+
+    return ps;
+  }
+}

package/src/skia/web/JsiSkTextStyle.ts

@@ -0,0 +1,53 @@
+import type { TextStyle } from "canvaskit-wasm";
+
+import type { SkTextStyle } from "../types";
+
+export class JsiSkTextStyle {
+  static toTextStyle(value: SkTextStyle): TextStyle {
+    return {
+      backgroundColor: value.backgroundColor,
+      color: value.color,
+      decoration: value.decoration,
+      decorationColor: value.decorationColor,
+      decorationStyle: value.decorationStyle
+        ? { value: value.decorationStyle }
+        : undefined,
+      decorationThickness: value.decorationThickness,
+      fontFamilies: value.fontFamilies,
+      fontSize: value.fontSize,
+      fontStyle: value.fontStyle
+        ? {
+            slant: value.fontStyle.slant
+              ? { value: value.fontStyle.slant }
+              : undefined,
+            weight: value.fontStyle.weight
+              ? { value: value.fontStyle.weight }
+              : undefined,
+            width: value.fontStyle.width
+              ? { value: value.fontStyle.width }
+              : undefined,
+          }
+        : undefined,
+      fontFeatures: value.fontFeatures,
+      foregroundColor: value.foregroundColor,
+      fontVariations: value.fontVariations,
+      halfLeading: value.halfLeading,
+      heightMultiplier: value.heightMultiplier,
+      letterSpacing: value.letterSpacing,
+      locale: value.locale,
+      shadows: value.shadows
+        ? value.shadows.map((shadow) => ({
+            blurRadius: shadow.blurRadius,
+            color: shadow.color,
+            offset: shadow.offset
+              ? [shadow.offset.x, shadow.offset.y]
+              : undefined,
+          }))
+        : undefined,
+      textBaseline: value.textBaseline
+        ? { value: value.textBaseline }
+        : undefined,
+      wordSpacing: value.wordSpacing,
+    };
+  }
+}

package/src/skia/web/JsiSkia.ts

@@ -40,6 +40,7 @@ import { JsiSkTypeface } from "./JsiSkTypeface";
 import { JsiSkTypefaceFontProviderFactory } from "./JsiSkTypefaceFontProviderFactory";
 import { JsiSkFontMgrFactory } from "./JsiSkFontMgrFactory";
 import { JsiSkAnimatedImageFactory } from "./JsiSkAnimatedImageFactory";
+import { JsiSkParagraphBuilderFactory } from "./JsiSkParagraphBuilderFactory";
 
 export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Point: (x: number, y: number) =>
@@ -108,4 +109,5 @@ export const JsiSkApi = (CanvasKit: CanvasKit): Skia => ({
   Surface: new JsiSkSurfaceFactory(CanvasKit),
   TypefaceFontProvider: new JsiSkTypefaceFontProviderFactory(CanvasKit),
   FontMgr: new JsiSkFontMgrFactory(CanvasKit),
+  ParagraphBuilder: new JsiSkParagraphBuilderFactory(CanvasKit),
 });