apexify.js 5.1.1 → 5.2.0

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

@@ -1,320 +0,0 @@
-import { SKRSContext2D } from '@napi-rs/canvas';
-
-/**
- * Renders text along a path
- * @param ctx - Canvas 2D context
- * @param text - Text to render
- * @param pathConfig - Path configuration
- * @param offset - Distance from path
- */
-export function renderTextOnPath(
-  ctx: SKRSContext2D,
-  text: string,
-  pathConfig: {
-    type: 'line' | 'arc' | 'bezier' | 'quadratic';
-    points: Array<{ x: number; y: number }>;
-    offset?: number;
-  },
-  offset: number = 0
-): void {
-  const path = createPath(ctx, pathConfig);
-  const pathLength = getPathLength(path, pathConfig);
-  
-  ctx.save();
-  
-  // Measure text to distribute along path
-  const metrics = ctx.measureText(text);
-  const textWidth = metrics.width;
-  const charWidth = textWidth / text.length;
-  
-  let currentDistance = 0;
-  
-  for (let i = 0; i < text.length; i++) {
-    const char = text[i];
-    const charDistance = currentDistance + charWidth / 2;
-    
-    if (charDistance <= pathLength) {
-      const point = getPointOnPath(path, pathConfig, charDistance);
-      const angle = getAngleOnPath(path, pathConfig, charDistance);
-      
-      ctx.save();
-      ctx.translate(point.x, point.y);
-      ctx.rotate(angle);
-      ctx.fillText(char, 0, offset);
-      ctx.restore();
-    }
-    
-    currentDistance += charWidth;
-  }
-  
-  ctx.restore();
-}
-
-/**
- * Creates a path based on configuration
- */
-function createPath(
-  ctx: SKRSContext2D,
-  pathConfig: {
-    type: 'line' | 'arc' | 'bezier' | 'quadratic';
-    points: Array<{ x: number; y: number }>;
-  }
-): Path2D {
-  const path = new Path2D();
-  
-  switch (pathConfig.type) {
-    case 'line':
-      if (pathConfig.points.length >= 2) {
-        path.moveTo(pathConfig.points[0].x, pathConfig.points[0].y);
-        for (let i = 1; i < pathConfig.points.length; i++) {
-          path.lineTo(pathConfig.points[i].x, pathConfig.points[i].y);
-        }
-      }
-      break;
-      
-    case 'arc':
-      if (pathConfig.points.length >= 3) {
-        const center = pathConfig.points[0];
-        const start = pathConfig.points[1];
-        const end = pathConfig.points[2];
-        const radius = Math.sqrt(
-          Math.pow(start.x - center.x, 2) + Math.pow(start.y - center.y, 2)
-        );
-        const startAngle = Math.atan2(start.y - center.y, start.x - center.x);
-        const endAngle = Math.atan2(end.y - center.y, end.x - center.x);
-        path.arc(center.x, center.y, radius, startAngle, endAngle);
-      }
-      break;
-      
-    case 'bezier':
-      if (pathConfig.points.length >= 4) {
-        path.moveTo(pathConfig.points[0].x, pathConfig.points[0].y);
-        for (let i = 1; i < pathConfig.points.length - 2; i += 3) {
-          if (i + 2 < pathConfig.points.length) {
-            path.bezierCurveTo(
-              pathConfig.points[i].x, pathConfig.points[i].y,
-              pathConfig.points[i + 1].x, pathConfig.points[i + 1].y,
-              pathConfig.points[i + 2].x, pathConfig.points[i + 2].y
-            );
-          }
-        }
-      }
-      break;
-      
-    case 'quadratic':
-      if (pathConfig.points.length >= 3) {
-        path.moveTo(pathConfig.points[0].x, pathConfig.points[0].y);
-        for (let i = 1; i < pathConfig.points.length - 1; i += 2) {
-          if (i + 1 < pathConfig.points.length) {
-            path.quadraticCurveTo(
-              pathConfig.points[i].x, pathConfig.points[i].y,
-              pathConfig.points[i + 1].x, pathConfig.points[i + 1].y
-            );
-          }
-        }
-      }
-      break;
-  }
-  
-  return path;
-}
-
-/**
- * Gets approximate path length
- */
-function getPathLength(
-  path: Path2D,
-  pathConfig: {
-    type: 'line' | 'arc' | 'bezier' | 'quadratic';
-    points: Array<{ x: number; y: number }>;
-  }
-): number {
-  let length = 0;
-  
-  switch (pathConfig.type) {
-    case 'line':
-      for (let i = 0; i < pathConfig.points.length - 1; i++) {
-        const dx = pathConfig.points[i + 1].x - pathConfig.points[i].x;
-        const dy = pathConfig.points[i + 1].y - pathConfig.points[i].y;
-        length += Math.sqrt(dx * dx + dy * dy);
-      }
-      break;
-      
-    case 'arc':
-      if (pathConfig.points.length >= 3) {
-        const center = pathConfig.points[0];
-        const start = pathConfig.points[1];
-        const end = pathConfig.points[2];
-        const radius = Math.sqrt(
-          Math.pow(start.x - center.x, 2) + Math.pow(start.y - center.y, 2)
-        );
-        const startAngle = Math.atan2(start.y - center.y, start.x - center.x);
-        const endAngle = Math.atan2(end.y - center.y, end.x - center.x);
-        let angle = endAngle - startAngle;
-        if (angle < 0) angle += Math.PI * 2;
-        length = radius * angle;
-      }
-      break;
-      
-    case 'bezier':
-    case 'quadratic':
-      // Approximate by sampling points along the curve
-      const samples = 100;
-      let prevPoint = pathConfig.points[0];
-      for (let i = 1; i <= samples; i++) {
-        const t = i / samples;
-        const point = getPointOnPath(path, pathConfig, t * 1000); // Approximate
-        const dx = point.x - prevPoint.x;
-        const dy = point.y - prevPoint.y;
-        length += Math.sqrt(dx * dx + dy * dy);
-        prevPoint = point;
-      }
-      break;
-  }
-  
-  return length;
-}
-
-/**
- * Gets a point on the path at a given distance
- */
-function getPointOnPath(
-  path: Path2D,
-  pathConfig: {
-    type: 'line' | 'arc' | 'bezier' | 'quadratic';
-    points: Array<{ x: number; y: number }>;
-  },
-  distance: number
-): { x: number; y: number } {
-  const pathLength = getPathLength(path, pathConfig);
-  const t = Math.min(1, distance / pathLength);
-  
-  switch (pathConfig.type) {
-    case 'line':
-      return getPointOnLine(pathConfig.points, t);
-      
-    case 'arc':
-      return getPointOnArc(pathConfig.points, t);
-      
-    case 'bezier':
-      return getPointOnBezier(pathConfig.points, t);
-      
-    case 'quadratic':
-      return getPointOnQuadratic(pathConfig.points, t);
-      
-    default:
-      return { x: 0, y: 0 };
-  }
-}
-
-/**
- * Gets angle on path at a given distance
- */
-function getAngleOnPath(
-  path: Path2D,
-  pathConfig: {
-    type: 'line' | 'arc' | 'bezier' | 'quadratic';
-    points: Array<{ x: number; y: number }>;
-  },
-  distance: number
-): number {
-  const pathLength = getPathLength(path, pathConfig);
-  const t = Math.min(1, distance / pathLength);
-  const epsilon = 0.01;
-  const t2 = Math.min(1, (distance + epsilon) / pathLength);
-  
-  const p1 = getPointOnPath(path, pathConfig, distance);
-  const p2 = getPointOnPath(path, pathConfig, distance + epsilon);
-  
-  return Math.atan2(p2.y - p1.y, p2.x - p1.x);
-}
-
-function getPointOnLine(points: Array<{ x: number; y: number }>, t: number): { x: number; y: number } {
-  if (points.length < 2) return { x: 0, y: 0 };
-  
-  const totalLength = points.reduce((sum, p, i) => {
-    if (i === 0) return 0;
-    const dx = p.x - points[i - 1].x;
-    const dy = p.y - points[i - 1].y;
-    return sum + Math.sqrt(dx * dx + dy * dy);
-  }, 0);
-  
-  let currentLength = 0;
-  const targetLength = totalLength * t;
-  
-  for (let i = 1; i < points.length; i++) {
-    const dx = points[i].x - points[i - 1].x;
-    const dy = points[i].y - points[i - 1].y;
-    const segmentLength = Math.sqrt(dx * dx + dy * dy);
-    
-    if (currentLength + segmentLength >= targetLength) {
-      const segmentT = (targetLength - currentLength) / segmentLength;
-      return {
-        x: points[i - 1].x + dx * segmentT,
-        y: points[i - 1].y + dy * segmentT
-      };
-    }
-    
-    currentLength += segmentLength;
-  }
-  
-  return points[points.length - 1];
-}
-
-function getPointOnArc(points: Array<{ x: number; y: number }>, t: number): { x: number; y: number } {
-  if (points.length < 3) return { x: 0, y: 0 };
-  
-  const center = points[0];
-  const start = points[1];
-  const end = points[2];
-  const radius = Math.sqrt(
-    Math.pow(start.x - center.x, 2) + Math.pow(start.y - center.y, 2)
-  );
-  const startAngle = Math.atan2(start.y - center.y, start.x - center.x);
-  const endAngle = Math.atan2(end.y - center.y, end.x - center.x);
-  let angle = startAngle + (endAngle - startAngle) * t;
-  
-  return {
-    x: center.x + Math.cos(angle) * radius,
-    y: center.y + Math.sin(angle) * radius
-  };
-}
-
-function getPointOnBezier(points: Array<{ x: number; y: number }>, t: number): { x: number; y: number } {
-  if (points.length < 4) return { x: 0, y: 0 };
-  
-  // Use first bezier curve
-  const p0 = points[0];
-  const p1 = points[1];
-  const p2 = points[2];
-  const p3 = points[3];
-  
-  const mt = 1 - t;
-  const mt2 = mt * mt;
-  const mt3 = mt2 * mt;
-  const t2 = t * t;
-  const t3 = t2 * t;
-  
-  return {
-    x: mt3 * p0.x + 3 * mt2 * t * p1.x + 3 * mt * t2 * p2.x + t3 * p3.x,
-    y: mt3 * p0.y + 3 * mt2 * t * p1.y + 3 * mt * t2 * p2.y + t3 * p3.y
-  };
-}
-
-function getPointOnQuadratic(points: Array<{ x: number; y: number }>, t: number): { x: number; y: number } {
-  if (points.length < 3) return { x: 0, y: 0 };
-  
-  const p0 = points[0];
-  const p1 = points[1];
-  const p2 = points[2];
-  
-  const mt = 1 - t;
-  const mt2 = mt * mt;
-  const t2 = t * t;
-  
-  return {
-    x: mt2 * p0.x + 2 * mt * t * p1.x + t2 * p2.x,
-    y: mt2 * p0.y + 2 * mt * t * p1.y + t2 * p2.y
-  };
-}
-

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

@@ -1,231 +0,0 @@
-import { SKRSContext2D } from '@napi-rs/canvas';
-import { TextObject } from '../types';
-
-/**
- * The main function that draws text with optional wrapping.
- * @param ctx         CanvasRenderingContext2D
- * @param textOptions TextObject
- */
-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();
-}
-
-/**
- * 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;
-        }
-      } else {
-        currentLine = testLine;
-      }
-    }
-  
-    if (currentLine && lines.length < maxLines) {
-      lines.push(currentLine);
-    }
-  
-    // 🔥 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 a single line with correct alignment. Then uses `drawStrokeAndFill` to apply stroke, fill, etc.
- */
-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.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.strokeStyle = options.stroke.color || options.color || 'darkgray';
-    }
-    ctx.strokeText(text, x, y);
-    ctx.restore();
-  }
-
-  // Then fill
-  ctx.fillText(text, x, y);
-}
-
-/**
- * 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;
-}