@shopify/react-native-skia 0.1.222 → 0.1.224

package/lib/typescript/src/skia/types/Paragraph/ParagraphBuilder.d.ts

@@ -0,0 +1,60 @@
+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 declare enum PlaceholderAlignment {
+    Baseline = 0,
+    AboveBaseline = 1,
+    BelowBaseline = 2,
+    Top = 3,
+    Bottom = 4,
+    Middle = 5
+}
+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/lib/typescript/src/skia/types/Paragraph/ParagraphStyle.d.ts

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

package/lib/typescript/src/skia/types/Paragraph/TextStyle.d.ts

@@ -0,0 +1,62 @@
+import type { SkColor } from "../Color";
+import type { FontSlant, FontWeight, FontWidth } from "../Font";
+import type { SkPoint } from "../Point";
+export declare enum TextDecoration {
+    NoDecoration = 0,
+    Underline = 1,
+    Overline = 2,
+    LineThrough = 4
+}
+export declare enum TextDecorationStyle {
+    Solid = 0,
+    Double = 1,
+    Dotted = 2,
+    Dashed = 3,
+    Wavy = 4
+}
+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 declare enum TextBaseline {
+    Alphabetic = 0,
+    Ideographic = 1
+}
+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/lib/typescript/src/skia/types/Paragraph/index.d.ts

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

package/lib/typescript/src/skia/types/Skia.d.ts

@@ -25,6 +25,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
  */
@@ -68,4 +69,5 @@ export interface Skia {
     SVG: SVGFactory;
     TextBlob: TextBlobFactory;
     Surface: SurfaceFactory;
+    ParagraphBuilder: ParagraphBuilderFactory;
 }

package/lib/typescript/src/skia/types/index.d.ts

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

package/lib/typescript/src/skia/web/JsiSkParagraph.d.ts

@@ -0,0 +1,16 @@
+import type { CanvasKit, Paragraph } from "canvaskit-wasm";
+import type { SkRect, SkRectWithDirection, SkParagraph } from "../types";
+import { HostObject } from "./Host";
+import type { JsiSkCanvas } from "./JsiSkCanvas";
+export declare class JsiSkParagraph extends HostObject<Paragraph, "Paragraph"> implements SkParagraph {
+    constructor(CanvasKit: CanvasKit, ref: Paragraph);
+    layout(width: number): void;
+    paint(canvas: JsiSkCanvas, x: number, y: number): void;
+    getHeight(): number;
+    getMaxWidth(): number;
+    getGlyphPositionAtCoordinate(x: number, y: number): number;
+    getRectsForPlaceholders(): SkRectWithDirection[];
+    getRectsForRange(start: number, end: number): SkRect[];
+    getLineMetrics(): SkRect[];
+    dispose(): void;
+}

package/lib/typescript/src/skia/web/JsiSkParagraphBuilder.d.ts

@@ -0,0 +1,15 @@
+import type { CanvasKit, ParagraphBuilder } from "canvaskit-wasm";
+import type { SkParagraphBuilder, SkParagraph, SkTextStyle, SkPaint } from "../types";
+import { PlaceholderAlignment, TextBaseline } from "../types";
+import { HostObject } from "./Host";
+export declare class JsiSkParagraphBuilder extends HostObject<ParagraphBuilder, "ParagraphBuilder"> implements SkParagraphBuilder {
+    constructor(CanvasKit: CanvasKit, ref: ParagraphBuilder);
+    addPlaceholder(width?: number | undefined, height?: number | undefined, alignment?: PlaceholderAlignment | undefined, baseline?: TextBaseline | undefined, offset?: number | undefined): SkParagraphBuilder;
+    addText(text: string): SkParagraphBuilder;
+    build(): SkParagraph;
+    reset(): void;
+    pushStyle(style: SkTextStyle, foregroundPaint?: SkPaint | undefined, backgroundPaint?: SkPaint | undefined): SkParagraphBuilder;
+    pop(): SkParagraphBuilder;
+    dispose(): void;
+    private makePaint;
+}

package/lib/typescript/src/skia/web/JsiSkParagraphBuilderFactory.d.ts

@@ -0,0 +1,8 @@
+import type { CanvasKit } from "canvaskit-wasm";
+import type { ParagraphBuilderFactory, SkParagraphStyle, SkTypefaceFontProvider } from "../types";
+import { Host } from "./Host";
+import { JsiSkParagraphBuilder } from "./JsiSkParagraphBuilder";
+export declare class JsiSkParagraphBuilderFactory extends Host implements ParagraphBuilderFactory {
+    constructor(CanvasKit: CanvasKit);
+    Make(paragraphStyle: SkParagraphStyle, typefaceProvider?: SkTypefaceFontProvider): JsiSkParagraphBuilder;
+}

package/lib/typescript/src/skia/web/JsiSkParagraphStyle.d.ts

@@ -0,0 +1,5 @@
+import type { CanvasKit, ParagraphStyle } from "canvaskit-wasm";
+import { type SkParagraphStyle } from "../types";
+export declare class JsiSkParagraphStyle {
+    static toParagraphStyle(ck: CanvasKit, value: SkParagraphStyle): ParagraphStyle;
+}

package/lib/typescript/src/skia/web/JsiSkTextStyle.d.ts

@@ -0,0 +1,5 @@
+import type { TextStyle } from "canvaskit-wasm";
+import type { SkTextStyle } from "../types";
+export declare class JsiSkTextStyle {
+    static toTextStyle(value: SkTextStyle): TextStyle;
+}

package/libs/ios/libskottie.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskottie.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libskparagraph.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libskparagraph.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libskparagraph.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/libs/ios/libsvg.xcframework/Info.plist

@@ -6,32 +6,32 @@
 	<array>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e</string>
+			<string>ios-arm64_arm64e_x86_64-simulator</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
+				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
 		</dict>
 		<dict>
 			<key>LibraryIdentifier</key>
-			<string>ios-arm64_arm64e_x86_64-simulator</string>
+			<string>ios-arm64_arm64e</string>
 			<key>LibraryPath</key>
 			<string>libsvg.a</string>
 			<key>SupportedArchitectures</key>
 			<array>
 				<string>arm64</string>
 				<string>arm64e</string>
-				<string>x86_64</string>
 			</array>
 			<key>SupportedPlatform</key>
 			<string>ios</string>
-			<key>SupportedPlatformVariant</key>
-			<string>simulator</string>
 		</dict>
 	</array>
 	<key>CFBundlePackageType</key>

package/package.json

@@ -7,7 +7,7 @@
     "setup-skia-web": "./scripts/setup-canvaskit.js"
   },
   "title": "React Native Skia",
-  "version": "0.1.222",
+  "version": "0.1.224",
   "description": "High-performance React Native Graphics using Skia",
   "main": "lib/module/index.js",
   "files": [

package/src/dom/nodes/JsiSkDOM.ts

@@ -57,6 +57,7 @@ import type {
   Path2DPathEffectProps,
 } from "../types/PathEffects";
 import { NATIVE_DOM } from "../../renderer/HostComponents";
+import type { ParagraphProps } from "../types/Paragraph";
 
 import {
   FillNode,
@@ -123,6 +124,7 @@ import { GroupNode } from "./GroupNode";
 import { PaintNode } from "./PaintNode";
 import type { NodeContext } from "./Node";
 import { LayerNode } from "./LayerNode";
+import { ParagraphNode } from "./drawings/ParagraphNode";
 
 export class JsiSkDOM implements SkDOM {
   constructor(private ctx: NodeContext) {}
@@ -470,4 +472,11 @@ export class JsiSkDOM implements SkDOM {
       ? global.SkiaDomApi.BoxShadowNode(props)
       : new BoxShadowNode(this.ctx, props);
   }
+
+  // Paragraph
+  Paragraph(props: ParagraphProps) {
+    return NATIVE_DOM
+      ? global.SkiaDomApi.ParagraphNode(props)
+      : new ParagraphNode(this.ctx, props);
+  }
 }

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

@@ -0,0 +1,22 @@
+import type { DrawingContext, ParagraphProps } from "../../types";
+import { NodeType } from "../../types";
+import { JsiDrawingNode } from "../DrawingNode";
+import type { NodeContext } from "../Node";
+
+export class ParagraphNode extends JsiDrawingNode<ParagraphProps, null> {
+  constructor(ctx: NodeContext, props: ParagraphProps) {
+    super(ctx, NodeType.Paragraph, props);
+  }
+
+  deriveProps() {
+    return null;
+  }
+
+  draw({ canvas }: DrawingContext) {
+    const { paragraph, x, y, width } = this.props;
+    if (paragraph) {
+      paragraph.layout(width);
+      paragraph.paint(canvas, x, y);
+    }
+  }
+}

package/src/dom/types/NodeType.ts

@@ -68,6 +68,9 @@ export const enum NodeType {
   Glyphs = "skGlyphs",
   Picture = "skPicture",
   ImageSVG = "skImageSVG",
+
+  // Paragraph
+  Paragraph = "skParagraph",
 }
 
 export const enum DeclarationType {

package/src/dom/types/Paragraph.ts

@@ -0,0 +1,10 @@
+import type { SkParagraph } from "../../skia/types/Paragraph";
+
+import type { GroupProps } from "./Common";
+
+export interface ParagraphProps extends GroupProps {
+  paragraph: SkParagraph | null;
+  x: number;
+  y: number;
+  width: number;
+}

package/src/dom/types/SkDOM.ts

@@ -58,6 +58,7 @@ import type {
   Path1DPathEffectProps,
   Path2DPathEffectProps,
 } from "./PathEffects";
+import type { ParagraphProps } from "./Paragraph";
 
 type ImageFilterNode<P> = DeclarationNode<P>;
 
@@ -179,4 +180,7 @@ export interface SkDOM {
   BackdropFilter(props: ChildrenProps): RenderNode<ChildrenProps>;
   Box(props: BoxProps): RenderNode<BoxProps>;
   BoxShadow(props: BoxShadowProps): DeclarationNode<BoxShadowProps>;
+
+  // Paragraph
+  Paragraph(props: ParagraphProps): RenderNode<ParagraphProps>;
 }

package/src/dom/types/index.ts

@@ -10,3 +10,4 @@ export * from "./ColorFilters";
 export * from "./MaskFilters";
 export * from "./PathEffects";
 export * from "./Shaders";
+export * from "./Paragraph";

package/src/renderer/HostComponents.ts

@@ -50,6 +50,7 @@ import type {
   LerpColorFilterProps,
   BoxProps,
   BoxShadowProps,
+  ParagraphProps,
 } from "../dom/types";
 import type { ChildrenProps } from "../dom/types/Common";
 import type {
@@ -193,6 +194,9 @@ declare global {
     BoxNode: (prop: BoxProps) => RenderNode<BoxProps>;
     BoxShadowNode: (prop: BoxShadowProps) => DeclarationNode<BoxShadowProps>;
     LayerNode: (prop: ChildrenProps) => RenderNode<ChildrenProps>;
+
+    // Paragraph
+    ParagraphNode: (props: ParagraphProps) => RenderNode<ParagraphProps>;
   };
 
   // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -268,6 +272,9 @@ declare global {
       skBackdropFilter: SkiaProps<ChildrenProps>;
       skBox: SkiaProps<BoxProps>;
       skBoxShadow: SkiaProps<BoxShadowProps>;
+
+      // Paragraph
+      skParagraph: SkiaProps<ParagraphProps>;
     }
   }
 }
@@ -399,6 +406,9 @@ export const createNode = (
       return Sk.Box(props);
     case NodeType.BoxShadow:
       return Sk.BoxShadow(props);
+    // Paragraph
+    case NodeType.Paragraph:
+      return Sk.Paragraph(props);
     default:
       return exhaustiveCheck(type);
   }

package/src/renderer/components/index.ts

@@ -15,3 +15,5 @@ export * from "./Mask";
 export * from "./Paint";
 export * from "./Blend";
 export * from "./Drawing";
+
+export * from "./paragraph";

package/src/renderer/components/paragraph/Paragraph.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+
+import type { ParagraphProps } from "../../../dom/types/Paragraph";
+import type { SkiaProps } from "../../processors";
+
+export const Paragraph = (props: SkiaProps<ParagraphProps>) => {
+  return <skParagraph {...props} />;
+};

package/src/renderer/components/paragraph/index.ts

@@ -0,0 +1 @@
+export * from "./Paragraph";

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[];
+}