apexify.js 4.9.28 → 5.0.0

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

@@ -16,9 +16,12 @@ export class EnhancedTextRenderer {
     ctx.save();
 
     try {
-      // 1. Register custom font if provided
-      if (textProps.fontPath) {
-        await this.registerCustomFont(textProps.fontPath, textProps.fontName || 'customFont');
+      // 1. Register custom font if provided (support both new and legacy properties)
+      const fontPath = textProps.font?.path || textProps.fontPath;
+      const fontName = textProps.font?.name || textProps.fontName;
+      
+      if (fontPath) {
+        await this.registerCustomFont(fontPath, fontName || 'customFont');
       }
 
       // 2. Apply transformations
@@ -81,8 +84,9 @@ export class EnhancedTextRenderer {
    * @param textProps - Text properties
    */
   private static setupFont(ctx: SKRSContext2D, textProps: TextProperties): void {
-    const fontSize = textProps.fontSize || 16;
-    const fontFamily = textProps.fontName || textProps.fontFamily || 'Arial';
+    // Support both new font object and legacy properties
+    const fontSize = textProps.font?.size || textProps.fontSize || 16;
+    const fontFamily = textProps.font?.name || textProps.fontName || textProps.font?.family || textProps.fontFamily || 'Arial';
     
     // Build font string with decorations
     let fontString = '';
@@ -121,7 +125,7 @@ export class EnhancedTextRenderer {
    * @param textProps - Text properties
    */
   private static async renderWrappedText(ctx: SKRSContext2D, textProps: TextProperties): Promise<void> {
-    const fontSize = textProps.fontSize || 16;
+    const fontSize = textProps.font?.size || textProps.fontSize || 16;
     const lineHeight = (textProps.lineHeight || 1.4) * fontSize;
     const maxHeight = textProps.maxHeight;
     const maxLines = maxHeight ? Math.floor(maxHeight / lineHeight) : Infinity;
@@ -186,7 +190,7 @@ export class EnhancedTextRenderer {
     // Calculate text dimensions
     const metrics = ctx.measureText(text);
     const textWidth = metrics.width;
-    const fontSize = textProps.fontSize || 16;
+    const fontSize = textProps.font?.size || textProps.fontSize || 16;
     const textHeight = fontSize;
 
     // Apply highlight background
@@ -231,13 +235,19 @@ export class EnhancedTextRenderer {
     y: number, 
     width: number, 
     height: number, 
-    highlight: { color?: string; opacity?: number }
+    highlight: { color?: string; gradient?: gradient; opacity?: number }
   ): void {
     ctx.save();
     
     const opacity = highlight.opacity !== undefined ? highlight.opacity : 0.3;
     ctx.globalAlpha = opacity;
-    ctx.fillStyle = highlight.color || '#ffff00';
+    
+    // Set fill style (gradient or color)
+    if (highlight.gradient) {
+      ctx.fillStyle = this.createGradient(ctx, highlight.gradient, x, y, x + width, y + height);
+    } else {
+      ctx.fillStyle = highlight.color || '#ffff00';
+    }
     
     // Adjust highlight position based on text baseline
     const highlightY = y - height * 0.8; // Adjust for different baselines
@@ -259,18 +269,33 @@ export class EnhancedTextRenderer {
     text: string, 
     x: number, 
     y: number, 
-    glow: { color?: string; intensity?: number; opacity?: number }
+    glow: { color?: string; gradient?: gradient; 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);
+    // For glow, we need to use shadowColor which only supports solid colors
+    // So we'll render the glow with the base color and then overlay with gradient if needed
+    if (glow.gradient) {
+      // First render with shadow for glow effect
+      ctx.shadowColor = '#ffffff'; // Use white as base for glow
+      ctx.shadowBlur = intensity;
+      ctx.globalAlpha = opacity;
+      ctx.fillText(text, x, y);
+      
+      // Then overlay with gradient
+      ctx.shadowColor = 'transparent';
+      ctx.shadowBlur = 0;
+      ctx.fillStyle = this.createGradient(ctx, glow.gradient, x, y, x + ctx.measureText(text).width, y);
+      ctx.fillText(text, x, y);
+    } else {
+      ctx.shadowColor = glow.color || '#ffffff';
+      ctx.shadowBlur = intensity;
+      ctx.globalAlpha = opacity;
+      ctx.fillText(text, x, y);
+    }
     
     ctx.restore();
   }
@@ -319,11 +344,14 @@ export class EnhancedTextRenderer {
     text: string, 
     x: number, 
     y: number, 
-    stroke: { color?: string; width?: number; gradient?: gradient; opacity?: number }
+    stroke: { color?: string; width?: number; gradient?: gradient; opacity?: number; style?: 'solid' | 'dashed' | 'dotted' | 'groove' | 'ridge' | 'double' }
   ): void {
     ctx.save();
     
-    ctx.lineWidth = stroke.width || 1;
+    const strokeWidth = stroke.width || 1;
+    const strokeStyle = stroke.style || 'solid';
+    
+    ctx.lineWidth = strokeWidth;
     
     if (stroke.gradient) {
       ctx.strokeStyle = this.createGradient(ctx, stroke.gradient, x, y, x + ctx.measureText(text).width, y);
@@ -335,7 +363,15 @@ export class EnhancedTextRenderer {
       ctx.globalAlpha = stroke.opacity;
     }
     
-    ctx.strokeText(text, x, y);
+    // Apply stroke style
+    this.applyTextStrokeStyle(ctx, strokeStyle, strokeWidth);
+    
+    // Handle complex stroke styles
+    if (strokeStyle === 'groove' || strokeStyle === 'ridge' || strokeStyle === 'double') {
+      this.renderComplexTextStroke(ctx, text, x, y, strokeStyle, strokeWidth, stroke.color, stroke.gradient);
+    } else {
+      ctx.strokeText(text, x, y);
+    }
     
     ctx.restore();
   }
@@ -387,44 +423,69 @@ export class EnhancedTextRenderer {
     height: number, 
     textProps: TextProperties
   ): void {
-    if (!textProps.underline && !textProps.overline && !textProps.strikethrough) {
+    const hasDecorations = textProps.underline || textProps.overline || textProps.strikethrough;
+    if (!hasDecorations) {
       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
+    const fontSize = textProps.font?.size || textProps.fontSize || 16;
+    const defaultColor = textProps.color || '#000000';
     
-    ctx.strokeStyle = decorationColor;
-    ctx.lineWidth = decorationWidth;
+    // Helper function to render a decoration line
+    const renderDecorationLine = (
+      decorationY: number,
+      decoration: boolean | { color?: string; gradient?: gradient; width?: number } | undefined,
+      lineName: string
+    ) => {
+      if (!decoration) return;
+      
+      ctx.save();
+      
+      let decorationColor = defaultColor;
+      let decorationWidth = Math.max(1, fontSize * 0.05); // 5% of font size
+      
+      if (typeof decoration === 'object') {
+        decorationColor = decoration.color || defaultColor;
+        decorationWidth = decoration.width || decorationWidth;
+        
+        // Set stroke style (gradient or color)
+        if (decoration.gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, decoration.gradient, x, decorationY, x + width, decorationY);
+        } else {
+          ctx.strokeStyle = decorationColor;
+        }
+      } else {
+        ctx.strokeStyle = decorationColor;
+      }
+      
+      ctx.lineWidth = decorationWidth;
+      
+      ctx.beginPath();
+      ctx.moveTo(x, decorationY);
+      ctx.lineTo(x + width, decorationY);
+      ctx.stroke();
+      
+      ctx.restore();
+    };
     
     // Underline
     if (textProps.underline) {
       const underlineY = y + fontSize * 0.1;
-      ctx.beginPath();
-      ctx.moveTo(x, underlineY);
-      ctx.lineTo(x + width, underlineY);
-      ctx.stroke();
+      renderDecorationLine(underlineY, textProps.underline, 'underline');
     }
     
     // Overline
     if (textProps.overline) {
       const overlineY = y - fontSize * 0.8;
-      ctx.beginPath();
-      ctx.moveTo(x, overlineY);
-      ctx.lineTo(x + width, overlineY);
-      ctx.stroke();
+      renderDecorationLine(overlineY, textProps.overline, 'overline');
     }
     
     // Strikethrough
     if (textProps.strikethrough) {
       const strikethroughY = y - fontSize * 0.3;
-      ctx.beginPath();
-      ctx.moveTo(x, strikethroughY);
-      ctx.lineTo(x + width, strikethroughY);
-      ctx.stroke();
+      renderDecorationLine(strikethroughY, textProps.strikethrough, 'strikethrough');
     }
     
     ctx.restore();
@@ -475,4 +536,181 @@ export class EnhancedTextRenderer {
 
     return gradient;
   }
+
+  /**
+   * Applies stroke style to text context
+   * @param ctx - Canvas 2D context
+   * @param style - Stroke style type
+   * @param width - Stroke width for calculating dash patterns
+   */
+  private static applyTextStrokeStyle(
+    ctx: SKRSContext2D,
+    style: 'solid' | 'dashed' | 'dotted' | 'groove' | 'ridge' | 'double',
+    width: number
+  ): void {
+    switch (style) {
+      case 'solid':
+        ctx.setLineDash([]);
+        ctx.lineCap = 'butt';
+        ctx.lineJoin = 'miter';
+        break;
+        
+      case 'dashed':
+        ctx.setLineDash([width * 3, width * 2]);
+        ctx.lineCap = 'butt';
+        ctx.lineJoin = 'miter';
+        break;
+        
+      case 'dotted':
+        ctx.setLineDash([width, width]);
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        break;
+        
+      case 'groove':
+      case 'ridge':
+      case 'double':
+        ctx.setLineDash([]);
+        ctx.lineCap = 'butt';
+        ctx.lineJoin = 'miter';
+        break;
+        
+      default:
+        ctx.setLineDash([]);
+        ctx.lineCap = 'butt';
+        ctx.lineJoin = 'miter';
+        break;
+    }
+  }
+
+  /**
+   * Renders complex text stroke styles that require multiple passes
+   * @param ctx - Canvas 2D context
+   * @param text - Text to render
+   * @param x - X position
+   * @param y - Y position
+   * @param style - Complex stroke style type
+   * @param width - Stroke width
+   * @param color - Base stroke color
+   * @param gradient - Optional gradient
+   */
+  private static renderComplexTextStroke(
+    ctx: SKRSContext2D,
+    text: string,
+    x: number,
+    y: number,
+    style: 'groove' | 'ridge' | 'double',
+    width: number,
+    color?: string,
+    gradient?: gradient
+  ): void {
+    const halfWidth = width / 2;
+    const textWidth = ctx.measureText(text).width;
+    
+    switch (style) {
+      case 'groove':
+        // Groove: dark outer, light inner
+        ctx.lineWidth = halfWidth;
+        
+        // Outer dark stroke
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = this.darkenColor(color || '#000000', 0.3);
+        }
+        ctx.strokeText(text, x, y);
+        
+        // Inner light stroke
+        ctx.lineWidth = halfWidth;
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = this.lightenColor(color || '#000000', 0.3);
+        }
+        ctx.strokeText(text, x, y);
+        break;
+        
+      case 'ridge':
+        // Ridge: light outer, dark inner
+        ctx.lineWidth = halfWidth;
+        
+        // Outer light stroke
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = this.lightenColor(color || '#000000', 0.3);
+        }
+        ctx.strokeText(text, x, y);
+        
+        // Inner dark stroke
+        ctx.lineWidth = halfWidth;
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = this.darkenColor(color || '#000000', 0.3);
+        }
+        ctx.strokeText(text, x, y);
+        break;
+        
+      case 'double':
+        // Double: two parallel strokes
+        ctx.lineWidth = halfWidth;
+        
+        // First stroke (outer)
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = color || '#000000';
+        }
+        ctx.strokeText(text, x, y);
+        
+        // Second stroke (inner)
+        ctx.lineWidth = halfWidth;
+        if (gradient) {
+          ctx.strokeStyle = this.createGradient(ctx, gradient, x, y, x + textWidth, y);
+        } else {
+          ctx.strokeStyle = color || '#000000';
+        }
+        ctx.strokeText(text, x, y);
+        break;
+    }
+  }
+
+  /**
+   * Darkens a color by a factor
+   * @param color - Color string
+   * @param factor - Darkening factor (0-1)
+   * @returns Darkened color string
+   */
+  private static darkenColor(color: string, factor: number): string {
+    // Simple darkening for hex colors
+    if (color.startsWith('#')) {
+      const hex = color.slice(1);
+      const num = parseInt(hex, 16);
+      const r = Math.max(0, Math.floor((num >> 16) * (1 - factor)));
+      const g = Math.max(0, Math.floor(((num >> 8) & 0x00FF) * (1 - factor)));
+      const b = Math.max(0, Math.floor((num & 0x0000FF) * (1 - factor)));
+      return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+    }
+    return color; // Return original for non-hex colors
+  }
+
+  /**
+   * Lightens a color by a factor
+   * @param color - Color string
+   * @param factor - Lightening factor (0-1)
+   * @returns Lightened color string
+   */
+  private static lightenColor(color: string, factor: number): string {
+    // Simple lightening for hex colors
+    if (color.startsWith('#')) {
+      const hex = color.slice(1);
+      const num = parseInt(hex, 16);
+      const r = Math.min(255, Math.floor((num >> 16) + (255 - (num >> 16)) * factor));
+      const g = Math.min(255, Math.floor(((num >> 8) & 0x00FF) + (255 - ((num >> 8) & 0x00FF)) * factor));
+      const b = Math.min(255, Math.floor((num & 0x0000FF) + (255 - (num & 0x0000FF)) * factor));
+      return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+    }
+    return color; // Return original for non-hex colors
+  }
 }