Text Rendering

/**
 * Basic text rendering with font and positioning control
 * @param props - Text properties
 * @returns JSX text element
 */
function Text(props: TextProps): JSX.Element;

interface TextProps extends DrawingNodeProps {
  /** Text content to render */
  text: string;
  /** Font object for text rendering */
  font: SkFont;
  /** X coordinate (default: 0) */
  x?: number;
  /** Y coordinate (default: 0) */
  y?: number;
}

/**
 * Text that follows a path curve
 * @param props - TextPath properties
 * @returns JSX text path element
 */
function TextPath(props: TextPathProps): JSX.Element;

interface TextPathProps extends DrawingNodeProps {
  /** Text content to render */
  text: string;
  /** Font object for text rendering */
  font: SkFont;
  /** Path to follow (SVG string or SkPath) */
  path: PathDef;
  /** Starting offset along the path */
  offset?: number;
}

/**
 * Pre-shaped text blob for optimal performance
 * @param props - TextBlob properties
 * @returns JSX text blob element
 */
function TextBlob(props: TextBlobProps): JSX.Element;

interface TextBlobProps extends DrawingNodeProps {
  /** Pre-shaped text blob object */
  blob: SkTextBlob;
  /** X coordinate */
  x: number;
  /** Y coordinate */
  y: number;
}

/**
 * Individual glyph rendering with precise control
 * @param props - Glyphs properties
 * @returns JSX glyphs element
 */
function Glyphs(props: GlyphsProps): JSX.Element;

interface GlyphsProps extends DrawingNodeProps {
  /** Font object for glyph rendering */
  font: SkFont;
  /** Array of glyphs to render */
  glyphs: Glyph[];
  /** X coordinate */
  x: number;
  /** Y coordinate */
  y: number;
}

interface Glyph {
  /** Glyph ID in the font */
  id: number;
  /** X position relative to component position */
  pos: SkPoint;
}

/**
 * Rich text paragraph with advanced layout capabilities
 * @param props - Paragraph properties
 * @returns JSX paragraph element
 */
function Paragraph(props: ParagraphProps): JSX.Element;

interface ParagraphProps extends DrawingNodeProps {
  /** Paragraph object with layout and styling */
  paragraph: SkParagraph;
  /** X coordinate */
  x: number;
  /** Y coordinate */
  y: number;
  /** Maximum width for text wrapping */
  width: number;
}

import { Text, TextPath, Skia } from "@shopify/react-native-skia";

// Basic text
const font = Skia.Font(null, 16);

<Text text="Hello World" font={font} x={10} y={30}>
  <Paint color="black" />
</Text>

// Text along a path
const path = Skia.Path.Make();
path.addCircle(100, 100, 50);

<TextPath text="Curved Text" font={font} path={path}>
  <Paint color="blue" />
</TextPath>

// Text with custom styling
<Text text="Styled Text" font={font} x={10} y={60}>
  <Paint color="red" style="stroke" strokeWidth={1} />
</Text>

// Font factory from main Skia API
interface FontFactory {
  /** Create font from typeface with size */
  (typeface?: SkTypeface, size?: number): SkFont;
}

// Font object interface
interface SkFont {
  /** Get the typeface used by this font */
  getTypeface(): SkTypeface | null;
  /** Get the font size */
  getSize(): number;
  /** Set the font size */
  setSize(size: number): void;
  /** Get font metrics */
  getMetrics(): FontMetrics;
  /** Get text width */
  getTextWidth(text: string): number;
  /** Get glyph IDs for text */
  getGlyphIDs(text: string): number[];
  /** Get glyph widths */
  getGlyphWidths(glyphs: number[]): number[];
}

interface FontMetrics {
  ascent: number;
  descent: number;
  leading: number;
  bounds?: SkRect;
}

// Typeface factory
interface TypefaceFactory {
  /** Create typeface from font data */
  MakeFreeTypeFaceFromData(data: SkData): SkTypeface | null;
  /** Get default typeface */
  Default(): SkTypeface;
}

interface SkTypeface {
  /** Get the font family name */
  getFamilyName(): string;
  /** Get font style information */
  getFontStyle(): FontStyle;
}

interface FontStyle {
  weight: number;  // 100-900
  width: number;   // 1-9
  slant: FontSlant;
}

enum FontSlant {
  Upright = 0,
  Italic = 1,
  Oblique = 2
}

// TextBlob factory
interface TextBlobFactory {
  /** Create text blob from text and font */
  MakeFromText(text: string, font: SkFont): SkTextBlob;
  /** Create text blob from glyphs */
  MakeFromGlyphs(glyphs: number[], font: SkFont): SkTextBlob;
  /** Create text blob with custom positioning */
  MakeFromRSXform(text: string, rsxforms: SkRSXform[], font: SkFont): SkTextBlob;
}

interface SkTextBlob {
  /** Get the bounds of the text blob */
  getBounds(): SkRect;
}

// Paragraph builder for rich text
interface ParagraphBuilderFactory {
  /** Create paragraph builder with style */
  Make(style: ParagraphStyle, fontManager?: SkFontMgr): SkParagraphBuilder;
}

interface SkParagraphBuilder {
  /** Add text with current style */
  addText(text: string): void;
  /** Push text style */
  pushStyle(style: TextStyle): void;
  /** Pop text style */
  pop(): void;
  /** Build the paragraph */
  build(): SkParagraph;
}

interface ParagraphStyle {
  textAlign?: TextAlign;
  textDirection?: TextDirection;
  maxLines?: number;
  ellipsis?: string;
  textHeightBehavior?: TextHeightBehavior;
}

interface TextStyle {
  color?: Color;
  decoration?: TextDecoration;
  decorationColor?: Color;
  decorationStyle?: TextDecorationStyle;
  fontFamilies?: string[];
  fontSize?: number;
  fontStyle?: FontStyle;
  letterSpacing?: number;
  wordSpacing?: number;
  height?: number;
}

// Font manager for system fonts
interface FontMgrFactory {
  /** Get system font manager */
  System(): SkFontMgr;
  /** Create font manager from typeface provider */
  FromData(fontData: SkData[]): SkFontMgr;
}

interface SkFontMgr {
  /** Count available font families */
  countFamilies(): number;
  /** Get font family name by index */
  getFamilyName(index: number): string;
  /** Create typeface from family name and style */
  makeTypeface(familyName?: string, fontStyle?: FontStyle): SkTypeface | null;
}

// Typeface font provider
interface TypefaceFontProviderFactory {
  /** Create empty typeface font provider */
  Make(): SkTypefaceFontProvider;
}

interface SkTypefaceFontProvider extends SkFontMgr {
  /** Register a typeface with family names */
  registerTypeface(typeface: SkTypeface, familyName?: string): void;
}

// Text-related types
type PathDef = string | SkPath;

interface SkPoint {
  x: number;
  y: number;
}

interface SkRect {
  x: number;
  y: number;
  width: number;
  height: number;
}

// Text alignment and direction
enum TextAlign {
  Left = 0,
  Right = 1,
  Center = 2,
  Justify = 3,
  Start = 4,
  End = 5
}

enum TextDirection {
  RTL = 0,
  LTR = 1
}

// Text decoration
enum TextDecoration {
  None = 0,
  Underline = 1,
  Overline = 2,
  LineThrough = 4
}

enum TextDecorationStyle {
  Solid = 0,
  Double = 1,
  Dotted = 2,
  Dashed = 3,
  Wavy = 4
}