apexify.js 4.6.2 → 4.6.3

package/lib/canvas/utils/Texts/textProperties.ts

@@ -1,180 +1,231 @@
-import { TextObject } from "../types";
+import { SKRSContext2D } from '@napi-rs/canvas';
+import { TextObject } from '../types';
 
 /**
- * Draws text on the canvas context.
- * @param ctx The canvas rendering context.
- * @param textOptions The options for the text.
+ * The main function that draws text with optional wrapping.
+ * @param ctx         CanvasRenderingContext2D
+ * @param textOptions TextObject
  */
-export function drawText(ctx: any, textOptions: TextObject, size: any) {
-    ctx.save();
-
-    // Apply rotation if specified
-    if (textOptions.rotation && textOptions.rotation !== 0) {
-        ctx.translate(textOptions.x || 0, textOptions.y || 0);
-        ctx.rotate(textOptions.rotation * Math.PI / 180);
-    }
-
-    ctx.font = `${textOptions.isBold ? 'bold ' : ''}${textOptions.fontSize || 16}px "${textOptions.fontName || 'Arial'}"`;
-    ctx.textAlign = textOptions.textAlign || 'left';
-    ctx.textBaseline = textOptions.textBaseline || 'alphabetic';
-
-    // Apply shadow
-    if (textOptions.shadow) {
-        const { color, offsetX, offsetY, blur, opacity } = textOptions.shadow;
-        ctx.shadowColor = color || "transparent";
-        ctx.shadowOffsetX = offsetX || 0;
-        ctx.shadowOffsetY = offsetY || 0;
-        ctx.shadowBlur = blur || 0;
-        ctx.globalAlpha = opacity || 1;
-    }
-
-    // Apply opacity
-    if (textOptions.opacity !== undefined) {
-        if (textOptions.opacity > 1 || textOptions.opacity < 0) 
-            throw new Error("Text opacity Error: the value can't be smaller than 0 or bigger than 1.");
-        ctx.globalAlpha = textOptions.opacity;
-    }
-
-    const textWidth = ctx.measureText(textOptions.text).width;
-    const textHeight = textOptions.fontSize || 16; // Rough estimate for height
-
-    // Apply gradient fill
-    if (textOptions.gradient) {
-        const gradientFill = createGradient(
-            ctx,
-            textOptions.gradient,
-            textOptions.x || 0,
-            textOptions.y || 0 - textHeight,
-            (textOptions.x || 0) + textWidth,
-            (textOptions.y || 0)
-        );
-        console.log("Gradient Fill Created:", gradientFill);
-        ctx.fillStyle = gradientFill;
-    } else {
-        ctx.fillStyle = textOptions.color || 'darkgray';
+export function drawText(ctx: SKRSContext2D, textOptions: TextObject) {
+  ctx.save();
+
+  // 1) Apply rotation if any
+  if (textOptions.rotation && textOptions.rotation !== 0) {
+    ctx.translate(textOptions.x || 0, textOptions.y || 0);
+    ctx.rotate((textOptions.rotation * Math.PI) / 180);
+  }
+
+  // 2) Setup font (for measuring and for final draw)
+  const fontSize = textOptions.fontSize || 16;
+  const isBold = textOptions.isBold ? 'bold ' : '';
+  const fontFamily = textOptions.fontName || (textOptions.fontPath ? 'customFont' : 'Arial');
+  ctx.font = `${isBold}${fontSize}px "${fontFamily}"`;
+
+  // 3) Alignment, baseline
+  ctx.textAlign = textOptions.textAlign || 'left';
+  ctx.textBaseline = textOptions.textBaseline || 'alphabetic';
+
+  // 4) Shadow
+  if (textOptions.shadow) {
+    const { color, offsetX, offsetY, blur, opacity } = textOptions.shadow;
+    ctx.shadowColor = color || 'transparent';
+    ctx.shadowOffsetX = offsetX || 0;
+    ctx.shadowOffsetY = offsetY || 0;
+    ctx.shadowBlur = blur || 0;
+    ctx.globalAlpha = opacity !== undefined ? opacity : 1;
+  }
+
+  // 5) Opacity
+  if (textOptions.opacity !== undefined) {
+    if (textOptions.opacity < 0 || textOptions.opacity > 1) {
+      throw new Error('Text opacity must be between 0 and 1.');
     }
+    ctx.globalAlpha = textOptions.opacity;
+  }
+
+  // 6) If maxWidth is provided, we do word wrapping
+  if (textOptions.maxWidth) {
+    WrappedText(
+      ctx,
+      textOptions.text as string,
+      textOptions.x || 0,
+      textOptions.y || 0,
+      textOptions.maxWidth,
+      textOptions
+    );
+  } else {
+    // No wrapping needed → just draw stroke + fill
+    drawStrokeAndFill(ctx, textOptions.text as string, textOptions.x || 0, textOptions.y || 0, textOptions);
+  }
+
+  ctx.restore();
+}
 
-    // Apply stroke with gradient
-    if (textOptions.outlined || textOptions.stroke) {
-        if (textOptions.stroke?.gradient) {
-            const gradientStroke = createGradient(
-                ctx,
-                textOptions.stroke.gradient,
-                textOptions.x || 0,
-                textOptions.y || 0 - textHeight,
-                (textOptions.x || 0) + textWidth,
-                (textOptions.y || 0)
-            );
-            console.log("Gradient Stroke Created:", gradientStroke);
-            ctx.strokeStyle = gradientStroke;
-        } else {
-            ctx.strokeStyle = textOptions.stroke?.color || textOptions.color;
+/**
+ * Handles word-based wrapping. Then draws each line with stroke, fill, gradient, etc.
+ */
+export function WrappedText(
+    ctx: SKRSContext2D,
+    text: string,
+    startX: number,
+    startY: number,
+    maxWidth: number,
+    options: TextObject
+  ) {
+    const fontSize = options.fontSize || 16;
+    const lineHeight = options.lineHeight || fontSize * 1.4;
+    const maxHeight = options.maxHeight;
+    const maxLines = maxHeight ? Math.floor(maxHeight / lineHeight) : Infinity;
+  
+    let currentLine = "";
+    const words = text.split(" ");
+    const lines: string[] = [];
+  
+    for (let i = 0; i < words.length; i++) {
+      const testLine = currentLine ? currentLine + " " + words[i] : words[i];
+      const testWidth = ctx.measureText(testLine).width;
+  
+      if (testWidth > maxWidth && currentLine) {
+        lines.push(currentLine);
+        currentLine = words[i];
+  
+        if (lines.length >= maxLines) {
+          currentLine = "...";
+          break;
         }
-        ctx.lineWidth = textOptions.stroke?.width || 1;
-        ctx.strokeText(textOptions.text, textOptions.x || 0, textOptions.y || 0);
+      } else {
+        currentLine = testLine;
+      }
     }
-
-    // Draw the text
-    if (textOptions.maxWidth) {
-        WrappedText(ctx, textOptions.text || 'Hello World', textOptions.x || 0, textOptions.y || 0, textOptions.maxWidth, textOptions);
-    } else {
-        if (!textOptions.rotation) {
-            ctx.fillText(textOptions.text, textOptions.x || 0, textOptions.y || 0);
-        } else {
-            ctx.fillText(textOptions.text, 0, 0);
-        }
+  
+    if (currentLine && lines.length < maxLines) {
+      lines.push(currentLine);
     }
-
-    ctx.restore();
-}
+  
+    // 🔥 Ensure correct text alignment for Arabic & English
+    ctx.textAlign = options.textAlign || "left";
+  
+    // 🎯 Draw each line with stroke & fill together
+    let offsetY = 0;
+    for (const line of lines) {
+      drawStrokeAndFill(ctx, line, startX, startY + offsetY, options);
+      offsetY += lineHeight;
+    }
+  }
+    
 /**
- * Draws wrapped text on the canvas context.
- * @param ctx The canvas rendering context.
- * @param text The text to be drawn.
- * @param x The x-coordinate of the starting point of the text.
- * @param y The y-coordinate of the starting point of the text.
- * @param maxWidth The maximum width for wrapping the text.
- * @param textOptions The options for the text.
+ * Draws a single line with correct alignment. Then uses `drawStrokeAndFill` to apply stroke, fill, etc.
  */
-export function WrappedText(ctx: any, text: string, x: number, y: number, maxWidth: number, textOptions: TextObject) {
-    const words = text.split(' ');
-    let currentLine = '';
-    const fontSize = textOptions.fontSize || 16;
-    const lineHeight = textOptions.lineHeight || fontSize;
+function drawLine(
+  ctx: SKRSContext2D,
+  lineText: string,
+  startX: number,
+  startY: number,
+  maxWidth: number,
+  options: TextObject
+) {
+  let xOffset = startX;
+
+  // If user wants 'center' or 'right', we offset by measured width
+  const measuredWidth = ctx.measureText(lineText).width;
+  if (options.textAlign === 'center') {
+    xOffset = startX + (maxWidth / 2) - (measuredWidth / 2);
+  } else if (options.textAlign === 'right') {
+    xOffset = startX + maxWidth - measuredWidth;
+  }
+
+  // Finally, draw stroke+fill for this line
+  drawStrokeAndFill(ctx, lineText, xOffset, startY, options);
+}
 
+/**
+ * Actually draws stroke (if any) and fill for the given text & position.
+ */
+function drawStrokeAndFill(
+  ctx: SKRSContext2D,
+  text: string,
+  x: number,
+  y: number,
+  options: TextObject
+) {
+  const fontSize = options.fontSize || 16;
+  const textWidth = ctx.measureText(text).width;
+  const textHeight = fontSize;
+
+  // Apply gradient fill if needed
+  if (options.gradient) {
+    const gradientFill = createGradient(
+      ctx,
+      options.gradient,
+      x,
+      y - textHeight,
+      x + textWidth,
+      y
+    );
+    ctx.fillStyle = gradientFill;
+  } else {
+    ctx.fillStyle = options.color || 'darkgray';
+  }
+
+  // Draw stroke first (if exists)
+  if (options.stroke) {
     ctx.save();
-
-    ctx.fillStyle = textOptions.color || 'darkgray';
-    if (textOptions.outlined || textOptions.stroke) {
-        ctx.strokeStyle = textOptions.stroke?.color || textOptions.color;
-        ctx.lineWidth = textOptions.stroke?.width || 1;
-    }
-
-    if (textOptions.rotation && textOptions.rotation !== 0) {
-        ctx.translate(x, y);
-        ctx.rotate(textOptions.rotation * Math.PI / 180);
-        x = 0;
-        y = 0; 
-    }
-
-    for (let n = 0; n < words.length; n++) {
-        const testLine = currentLine + words[n] + ' ';
-        const metrics = ctx.measureText(testLine);
-        const testWidth = metrics.width;
-
-        if (testWidth > maxWidth && n > 0) {
-            const adjustedY = y + lineHeight;
-            if (textOptions.outlined || textOptions.stroke) {
-                ctx.strokeText(currentLine.trim(), x, adjustedY);
-            } else {
-                ctx.fillText(currentLine.trim(), x, adjustedY);
-            }
-            currentLine = words[n] + ' ';
-            y += lineHeight;
-        } else {
-            currentLine = testLine;
-        }
-    }
-
-    const adjustedY = y + lineHeight;
-    if (textOptions.outlined || textOptions.stroke) {
-        ctx.strokeText(currentLine.trim(), x, adjustedY);
+    ctx.lineWidth = options.stroke.width || 1;
+    if (options.stroke.gradient) {
+      const gradientStroke = createGradient(
+        ctx,
+        options.stroke.gradient,
+        x,
+        y - textHeight,
+        x + textWidth,
+        y
+      );
+      ctx.strokeStyle = gradientStroke;
     } else {
-        ctx.fillText(currentLine.trim(), x, adjustedY);
+      ctx.strokeStyle = options.stroke.color || options.color || 'darkgray';
     }
-
+    ctx.strokeText(text, x, y);
     ctx.restore();
-}
+  }
 
-export function createGradient(ctx: any, gradientOptions: any, startX: number, startY: number, endX: number, endY: number) {
-    if (!gradientOptions || !gradientOptions.type || !gradientOptions.colors) {
-        throw new Error("Invalid gradient options. Provide a valid object with type and colors properties.");
-    }
-
-    if (!Array.isArray(gradientOptions.colors)) {
-        throw new Error("Invalid gradient options. The colors property should be an array of color stops.");
-    }
-
-    let gradient;
-    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) {
-        console.log(`Adding color stop: ${colorStop.stop} ${colorStop.color}`);
-        gradient.addColorStop(colorStop.stop, colorStop.color);
-    }
+  // Then fill
+  ctx.fillText(text, x, y);
+}
 
-    return gradient;
+/**
+ * Creates a linear or radial gradient for fill/stroke.
+ */
+export function createGradient(
+  ctx: SKRSContext2D,
+  gradientOptions: any,
+  startX: number,
+  startY: number,
+  endX: number,
+  endY: number
+) {
+  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;
 }