apexify.js 4.9.26 → 4.9.27

package/lib/Canvas/utils/Texts/enhancedTextRenderer.ts

@@ -0,0 +1,478 @@
+import { SKRSContext2D } from '@napi-rs/canvas';
+import { TextProperties, gradient } from '../types';
+import { GlobalFonts } from '@napi-rs/canvas';
+import path from 'path';
+
+/**
+ * Enhanced text renderer with comprehensive styling options
+ */
+export class EnhancedTextRenderer {
+  /**
+   * Renders text with all enhanced features
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties configuration
+   */
+  static async renderText(ctx: SKRSContext2D, textProps: TextProperties): Promise<void> {
+    ctx.save();
+
+    try {
+      // 1. Register custom font if provided
+      if (textProps.fontPath) {
+        await this.registerCustomFont(textProps.fontPath, textProps.fontName || 'customFont');
+      }
+
+      // 2. Apply transformations
+      this.applyTransformations(ctx, textProps);
+
+      // 3. Setup font and spacing
+      this.setupFont(ctx, textProps);
+
+      // 4. Apply text alignment
+      this.setupAlignment(ctx, textProps);
+
+      // 5. Handle text wrapping or single line rendering
+      if (textProps.maxWidth) {
+        await this.renderWrappedText(ctx, textProps);
+      } else {
+        await this.renderSingleLine(ctx, textProps);
+      }
+
+    } finally {
+      ctx.restore();
+    }
+  }
+
+  /**
+   * Registers a custom font from file path
+   * @param fontPath - Path to font file
+   * @param fontName - Name to register the font as
+   */
+  private static async registerCustomFont(fontPath: string, fontName: string): Promise<void> {
+    try {
+      const fullPath = path.join(process.cwd(), fontPath);
+      GlobalFonts.registerFromPath(fullPath, fontName);
+    } catch (error) {
+      console.warn(`Failed to register font from path: ${fontPath}`, error);
+    }
+  }
+
+  /**
+   * Applies transformations (rotation, opacity)
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  private static applyTransformations(ctx: SKRSContext2D, textProps: TextProperties): void {
+    // Apply rotation
+    if (textProps.rotation && textProps.rotation !== 0) {
+      ctx.translate(textProps.x, textProps.y);
+      ctx.rotate((textProps.rotation * Math.PI) / 180);
+      ctx.translate(-textProps.x, -textProps.y);
+    }
+
+    // Apply global opacity
+    if (textProps.opacity !== undefined) {
+      ctx.globalAlpha = Math.max(0, Math.min(1, textProps.opacity));
+    }
+  }
+
+  /**
+   * Sets up font properties and spacing
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  private static setupFont(ctx: SKRSContext2D, textProps: TextProperties): void {
+    const fontSize = textProps.fontSize || 16;
+    const fontFamily = textProps.fontName || textProps.fontFamily || 'Arial';
+    
+    // Build font string with decorations
+    let fontString = '';
+    
+    if (textProps.bold) fontString += 'bold ';
+    if (textProps.italic) fontString += 'italic ';
+    
+    fontString += `${fontSize}px "${fontFamily}"`;
+    
+    ctx.font = fontString;
+
+    // Apply letter spacing
+    if (textProps.letterSpacing !== undefined) {
+      ctx.letterSpacing = `${textProps.letterSpacing}px`;
+    }
+
+    // Apply word spacing
+    if (textProps.wordSpacing !== undefined) {
+      ctx.wordSpacing = `${textProps.wordSpacing}px`;
+    }
+  }
+
+  /**
+   * Sets up text alignment
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  private static setupAlignment(ctx: SKRSContext2D, textProps: TextProperties): void {
+    ctx.textAlign = textProps.textAlign || 'left';
+    ctx.textBaseline = textProps.textBaseline || 'alphabetic';
+  }
+
+  /**
+   * Renders wrapped text with all effects
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  private static async renderWrappedText(ctx: SKRSContext2D, textProps: TextProperties): Promise<void> {
+    const fontSize = textProps.fontSize || 16;
+    const lineHeight = (textProps.lineHeight || 1.4) * fontSize;
+    const maxHeight = textProps.maxHeight;
+    const maxLines = maxHeight ? Math.floor(maxHeight / lineHeight) : Infinity;
+
+    // Split text into words and wrap
+    const words = textProps.text.split(' ');
+    const lines: string[] = [];
+    let currentLine = '';
+
+    for (const word of words) {
+      const testLine = currentLine ? currentLine + ' ' + word : word;
+      const testWidth = ctx.measureText(testLine).width;
+
+      if (testWidth > (textProps.maxWidth || Infinity) && currentLine) {
+        lines.push(currentLine);
+        currentLine = word;
+
+        if (lines.length >= maxLines) {
+          currentLine = '...';
+          break;
+        }
+      } else {
+        currentLine = testLine;
+      }
+    }
+
+    if (currentLine && lines.length < maxLines) {
+      lines.push(currentLine);
+    }
+
+    // Render each line
+    for (let i = 0; i < lines.length; i++) {
+      const y = textProps.y + (i * lineHeight);
+      await this.renderTextLine(ctx, lines[i], textProps.x, y, textProps);
+    }
+  }
+
+  /**
+   * Renders single line text with all effects
+   * @param ctx - Canvas 2D context
+   * @param textProps - Text properties
+   */
+  private static async renderSingleLine(ctx: SKRSContext2D, textProps: TextProperties): Promise<void> {
+    await this.renderTextLine(ctx, textProps.text, textProps.x, textProps.y, textProps);
+  }
+
+  /**
+   * Renders a single line of text with all effects applied
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param textProps - Text properties
+   */
+  private static async renderTextLine(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    textProps: TextProperties
+  ): Promise<void> {
+    // Calculate text dimensions
+    const metrics = ctx.measureText(text);
+    const textWidth = metrics.width;
+    const fontSize = textProps.fontSize || 16;
+    const textHeight = fontSize;
+
+    // Apply highlight background
+    if (textProps.highlight) {
+      this.renderHighlight(ctx, x, y, textWidth, textHeight, textProps.highlight);
+    }
+
+    // Apply glow effect
+    if (textProps.glow) {
+      this.renderGlow(ctx, text, x, y, textProps.glow);
+    }
+
+    // Apply shadow effect
+    if (textProps.shadow) {
+      this.renderShadow(ctx, text, x, y, textProps.shadow);
+    }
+
+    // Apply stroke
+    if (textProps.stroke) {
+      this.renderStroke(ctx, text, x, y, textProps.stroke);
+    }
+
+    // Apply fill
+    this.renderFill(ctx, text, x, y, textProps);
+
+    // Apply text decorations
+    this.renderDecorations(ctx, text, x, y, textWidth, textHeight, textProps);
+  }
+
+  /**
+   * Renders highlight background
+   * @param ctx - Canvas 2D context
+   * @param x - X position
+   * @param y - Y position
+   * @param width - Text width
+   * @param height - Text height
+   * @param highlight - Highlight options
+   */
+  private static renderHighlight(
+    ctx: SKRSContext2D, 
+    x: number, 
+    y: number, 
+    width: number, 
+    height: number, 
+    highlight: { color?: string; opacity?: number }
+  ): void {
+    ctx.save();
+    
+    const opacity = highlight.opacity !== undefined ? highlight.opacity : 0.3;
+    ctx.globalAlpha = opacity;
+    ctx.fillStyle = highlight.color || '#ffff00';
+    
+    // Adjust highlight position based on text baseline
+    const highlightY = y - height * 0.8; // Adjust for different baselines
+    ctx.fillRect(x, highlightY, width, height);
+    
+    ctx.restore();
+  }
+
+  /**
+   * Renders glow effect
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param glow - Glow options
+   */
+  private static renderGlow(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    glow: { color?: string; intensity?: number; opacity?: number }
+  ): void {
+    ctx.save();
+    
+    const intensity = glow.intensity || 10;
+    const opacity = glow.opacity !== undefined ? glow.opacity : 0.8;
+    
+    ctx.shadowColor = glow.color || '#ffffff';
+    ctx.shadowBlur = intensity;
+    ctx.globalAlpha = opacity;
+    
+    ctx.fillText(text, x, y);
+    
+    ctx.restore();
+  }
+
+  /**
+   * Renders shadow effect
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param shadow - Shadow options
+   */
+  private static renderShadow(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    shadow: { color?: string; offsetX?: number; offsetY?: number; blur?: number; opacity?: number }
+  ): void {
+    ctx.save();
+    
+    ctx.shadowColor = shadow.color || 'rgba(0, 0, 0, 0.5)';
+    ctx.shadowOffsetX = shadow.offsetX || 2;
+    ctx.shadowOffsetY = shadow.offsetY || 2;
+    ctx.shadowBlur = shadow.blur || 4;
+    
+    if (shadow.opacity !== undefined) {
+      ctx.globalAlpha = shadow.opacity;
+    }
+    
+    ctx.fillText(text, x, y);
+    
+    ctx.restore();
+  }
+
+  /**
+   * Renders stroke/outline
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param stroke - Stroke options
+   */
+  private static renderStroke(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    stroke: { color?: string; width?: number; gradient?: gradient; opacity?: number }
+  ): void {
+    ctx.save();
+    
+    ctx.lineWidth = stroke.width || 1;
+    
+    if (stroke.gradient) {
+      ctx.strokeStyle = this.createGradient(ctx, stroke.gradient, x, y, x + ctx.measureText(text).width, y);
+    } else {
+      ctx.strokeStyle = stroke.color || '#000000';
+    }
+    
+    if (stroke.opacity !== undefined) {
+      ctx.globalAlpha = stroke.opacity;
+    }
+    
+    ctx.strokeText(text, x, y);
+    
+    ctx.restore();
+  }
+
+  /**
+   * Renders text fill
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param textProps - Text properties
+   */
+  private static renderFill(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    textProps: TextProperties
+  ): void {
+    ctx.save();
+    
+    if (textProps.gradient) {
+      ctx.fillStyle = this.createGradient(ctx, textProps.gradient, x, y, x + ctx.measureText(text).width, y);
+    } else {
+      ctx.fillStyle = textProps.color || '#000000';
+    }
+    
+    ctx.fillText(text, x, y);
+    
+    ctx.restore();
+  }
+
+  /**
+   * Renders text decorations (underline, overline, strikethrough)
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param width - Text width
+   * @param height - Text height
+   * @param textProps - Text properties
+   */
+  private static renderDecorations(
+    ctx: SKRSContext2D, 
+    text: string, 
+    x: number, 
+    y: number, 
+    width: number, 
+    height: number, 
+    textProps: TextProperties
+  ): void {
+    if (!textProps.underline && !textProps.overline && !textProps.strikethrough) {
+      return;
+    }
+
+    ctx.save();
+    
+    const fontSize = textProps.fontSize || 16;
+    const decorationColor = textProps.color || '#000000';
+    const decorationWidth = Math.max(1, fontSize * 0.05); // 5% of font size
+    
+    ctx.strokeStyle = decorationColor;
+    ctx.lineWidth = decorationWidth;
+    
+    // Underline
+    if (textProps.underline) {
+      const underlineY = y + fontSize * 0.1;
+      ctx.beginPath();
+      ctx.moveTo(x, underlineY);
+      ctx.lineTo(x + width, underlineY);
+      ctx.stroke();
+    }
+    
+    // Overline
+    if (textProps.overline) {
+      const overlineY = y - fontSize * 0.8;
+      ctx.beginPath();
+      ctx.moveTo(x, overlineY);
+      ctx.lineTo(x + width, overlineY);
+      ctx.stroke();
+    }
+    
+    // Strikethrough
+    if (textProps.strikethrough) {
+      const strikethroughY = y - fontSize * 0.3;
+      ctx.beginPath();
+      ctx.moveTo(x, strikethroughY);
+      ctx.lineTo(x + width, strikethroughY);
+      ctx.stroke();
+    }
+    
+    ctx.restore();
+  }
+
+  /**
+   * Creates a gradient for text fill or stroke
+   * @param ctx - Canvas 2D context
+   * @param gradientOptions - Gradient configuration
+   * @param startX - Start X position
+   * @param startY - Start Y position
+   * @param endX - End X position
+   * @param endY - End Y position
+   * @returns Canvas gradient
+   */
+  private static createGradient(
+    ctx: SKRSContext2D,
+    gradientOptions: gradient,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number
+  ): CanvasGradient {
+    if (!gradientOptions || !gradientOptions.type || !gradientOptions.colors) {
+      throw new Error("Invalid gradient options. Provide a valid object with type and colors properties.");
+    }
+
+    let gradient: CanvasGradient;
+    
+    if (gradientOptions.type === "linear") {
+      gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+    } else if (gradientOptions.type === "radial") {
+      gradient = ctx.createRadialGradient(
+        gradientOptions.startX || startX,
+        gradientOptions.startY || startY,
+        gradientOptions.startRadius || 0,
+        gradientOptions.endX || endX,
+        gradientOptions.endY || endY,
+        gradientOptions.endRadius || 0
+      );
+    } else {
+      throw new Error('Unsupported gradient type. Use "linear" or "radial".');
+    }
+
+    for (const colorStop of gradientOptions.colors) {
+      gradient.addColorStop(colorStop.stop, colorStop.color);
+    }
+
+    return gradient;
+  }
+}