apexify.js 4.9.28 → 5.0.0

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

@@ -0,0 +1,320 @@
+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/types.ts

@@ -23,7 +23,8 @@ export interface StrokeOptions {
   blur?: number;         // px
   opacity?: number;      // 0..1
   borderRadius?: number | 'circular';
-  borderPosition?: string;
+  borderPosition?: borderPosition;
+  style?: 'solid' | 'dashed' | 'dotted' | 'groove' | 'ridge' | 'double';
 }
 
 export interface ShadowOptions {
@@ -86,6 +87,15 @@ export interface CanvasConfig {
       fit?: 'fill' | 'contain' | 'cover';
       align?: 'center' | 'top' | 'bottom' | 'left' | 'right'
       | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+      filters?: ImageFilter[]; // NEW: Apply filters to background image
+      opacity?: number; // NEW: Background image opacity
+    };
+    videoBg?: {
+      source: string;
+      frame?: number; // Extract specific frame (default: 0)
+      loop?: boolean; // Loop video (default: false)
+      autoplay?: boolean; // Autoplay (default: false)
+      opacity?: number; // Video opacity (default: 1)
     };
 
     colorBg?: string;
@@ -123,6 +133,7 @@ export interface CanvasConfig {
         borderRadius?: number | "circular"; 
         borderPosition?: borderPosition;
         gradient?: gradient;
+        style?: 'solid' | 'dashed' | 'dotted' | 'groove' | 'ridge' | 'double';
     };
     shadow?: {
         color?: string;
@@ -197,6 +208,35 @@ export interface ImageProperties {
 
   // image filters
   filters?: ImageFilter[];
+  filterIntensity?: number; // Global filter intensity multiplier (default: 1)
+  filterOrder?: 'pre' | 'post'; // Apply before or after transformations (default: 'post')
+
+  // image masking
+  mask?: {
+    source: string | Buffer; // Mask image
+    mode?: 'alpha' | 'luminance' | 'inverse'; // Mask mode (default: 'alpha')
+  };
+  clipPath?: Array<{ x: number; y: number }>; // Custom clipping path polygon
+
+  // image distortion/transform
+  distortion?: {
+    type: 'perspective' | 'warp' | 'bulge' | 'pinch';
+    points?: Array<{ x: number; y: number }>; // Control points for perspective/warp
+    intensity?: number; // Intensity for bulge/pinch (default: 0.5)
+  };
+  meshWarp?: {
+    gridX?: number; // Grid divisions X (default: 10)
+    gridY?: number; // Grid divisions Y (default: 10)
+    controlPoints?: Array<Array<{ x: number; y: number }>>; // Control point grid
+  };
+
+  // image effects stack
+  effects?: {
+    vignette?: { intensity: number; size: number }; // Vignette effect (0-1, 0-1)
+    lensFlare?: { x: number; y: number; intensity: number }; // Lens flare position and intensity
+    chromaticAberration?: { intensity: number }; // Chromatic aberration (0-1)
+    filmGrain?: { intensity: number }; // Film grain effect (0-1)
+  };
 
   // shape properties (when source is a shape)
   shape?: ShapeProperties;
@@ -236,14 +276,27 @@ export interface TextProperties {
   y: number;
 
   // === FONT MANAGEMENT ===
-  /** Path to custom font file (.ttf, .otf, .woff, etc.) */
-  fontPath?: string;
-  /** Custom font name (used with fontPath) */
-  fontName?: string;
-  /** Font size in pixels (default: 16) */
+  /** Font configuration object */
+  font?: {
+    /** Font size in pixels (default: 16) */
+    size?: number;
+    /** Font family name (e.g., 'Arial', 'Helvetica', 'Times New Roman') */
+    family?: string;
+    /** Custom font name (used with fontPath) */
+    name?: string;
+    /** Path to custom font file (.ttf, .otf, .woff, etc.) */
+    path?: string;
+  };
+  
+  // === LEGACY FONT PROPERTIES (for backward compatibility) ===
+  /** @deprecated Use font.size instead */
   fontSize?: number;
-  /** Font family name (e.g., 'Arial', 'Helvetica', 'Times New Roman') */
+  /** @deprecated Use font.family instead */
   fontFamily?: string;
+  /** @deprecated Use font.name instead */
+  fontName?: string;
+  /** @deprecated Use font.path instead */
+  fontPath?: string;
 
   // === TEXT DECORATION ===
   /** Make text bold */
@@ -251,15 +304,38 @@ export interface TextProperties {
   /** Make text italic */
   italic?: boolean;
   /** Add underline decoration */
-  underline?: boolean;
+  underline?: boolean | {
+    /** Underline color */
+    color?: string;
+    /** Underline gradient (overrides color) */
+    gradient?: gradient;
+    /** Underline width (default: 1px) */
+    width?: number;
+  };
   /** Add overline decoration */
-  overline?: boolean;
+  overline?: boolean | {
+    /** Overline color */
+    color?: string;
+    /** Overline gradient (overrides color) */
+    gradient?: gradient;
+    /** Overline width (default: 1px) */
+    width?: number;
+  };
   /** Add strikethrough decoration */
-  strikethrough?: boolean;
+  strikethrough?: boolean | {
+    /** Strikethrough color */
+    color?: string;
+    /** Strikethrough gradient (overrides color) */
+    gradient?: gradient;
+    /** Strikethrough width (default: 1px) */
+    width?: number;
+  };
   /** Highlight text with background color */
   highlight?: {
     /** Highlight color (hex, rgb, rgba, hsl, etc.) */
     color?: string;
+    /** Highlight gradient (overrides color) */
+    gradient?: gradient;
     /** Highlight opacity (0-1, default: 0.3) */
     opacity?: number;
   };
@@ -295,6 +371,8 @@ export interface TextProperties {
   glow?: {
     /** Glow color */
     color?: string;
+    /** Glow gradient (overrides color) */
+    gradient?: gradient;
     /** Glow intensity/blur radius */
     intensity?: number;
     /** Glow opacity (0-1) */
@@ -323,11 +401,23 @@ export interface TextProperties {
     gradient?: gradient;
     /** Stroke opacity (0-1) */
     opacity?: number;
+    /** Stroke style */
+    style?: 'solid' | 'dashed' | 'dotted' | 'groove' | 'ridge' | 'double';
   };
 
   // === TRANSFORMATIONS ===
   /** Text rotation in degrees */
   rotation?: number;
+
+  // === TEXT PATH/CURVE FOLLOWING ===
+  /** Path for text to follow */
+  path?: {
+    type: 'line' | 'arc' | 'bezier' | 'quadratic';
+    points: Array<{ x: number; y: number }>;
+    offset?: number; // Distance from path (default: 0)
+  };
+  /** Render text along path */
+  textOnPath?: boolean;
 }
 
 /**
@@ -405,6 +495,27 @@ export interface CustomOptions {
         x: number;
         y: number;
     };
+    // Advanced path options
+    path?: {
+        type: 'smooth' | 'bezier' | 'catmull-rom';
+        tension?: number; // For smooth/catmull-rom (default: 0.5)
+        closed?: boolean; // Close the path (default: false)
+    };
+    // Arrow markers
+    arrow?: {
+        start?: boolean; // Arrow at start (default: false)
+        end?: boolean; // Arrow at end (default: false)
+        size?: number; // Arrow size (default: 10)
+        style?: 'filled' | 'outline'; // Arrow style (default: 'filled')
+        color?: string; // Arrow color (default: line color)
+    };
+    // Path markers
+    markers?: Array<{
+        position: number; // 0-1 along path
+        shape: 'circle' | 'square' | 'diamond' | 'arrow';
+        size: number;
+        color: string;
+    }>;
     lineStyle?: {
         width?: number;
         color?: string;
@@ -417,6 +528,13 @@ export interface CustomOptions {
             dashArray?: number[];
             offset?: number;
         };
+        // Line patterns
+        pattern?: {
+            type: 'dots' | 'dashes' | 'custom';
+            segments?: number[]; // For custom pattern
+            offset?: number; // Pattern offset
+        };
+        texture?: string | Buffer; // Texture image for line
         stroke?: {
             color?: string;
             gradient?: gradient;
@@ -723,6 +841,51 @@ export interface GradientConfig{
   }
     
     
+// Batch operation types
+export interface BatchOperation {
+  type: 'canvas' | 'image' | 'text' | 'chart';
+  config: any;
+}
+
+export interface ChainOperation {
+  method: string;
+  args: any[];
+}
+
+// Image stitching options
+export interface StitchOptions {
+  direction?: 'horizontal' | 'vertical' | 'grid';
+  overlap?: number; // Percentage overlap for auto-alignment (0-100)
+  blend?: boolean; // Blend overlapping areas (default: false)
+  spacing?: number; // Spacing between images in pixels (default: 0)
+}
+
+// Collage layout options
+export interface CollageLayout {
+  type: 'grid' | 'masonry' | 'carousel' | 'custom';
+  columns?: number;
+  rows?: number;
+  spacing?: number;
+  background?: string;
+  borderRadius?: number;
+}
+
+// Image compression options
+export interface CompressionOptions {
+  quality?: number; // 0-100 (default: 90)
+  format?: 'jpeg' | 'webp' | 'avif';
+  maxWidth?: number;
+  maxHeight?: number;
+  progressive?: boolean; // For JPEG (default: false)
+}
+
+// Color palette extraction options
+export interface PaletteOptions {
+  count?: number; // Number of colors (default: 10)
+  method?: 'kmeans' | 'median-cut' | 'octree';
+  format?: 'hex' | 'rgb' | 'hsl';
+}
+
   export interface ExtractFramesOptions {
     interval: number;
     outputFormat?: 'jpg' | 'png';

package/lib/Canvas/utils/utils.ts

@@ -10,7 +10,7 @@
 
 
 
-import { OutputFormat, CanvasConfig, ImageProperties, TextObject, TextProperties, GIFOptions, GIFResults, CustomOptions, cropOptions, GradientConfig, Frame, PatternOptions, ExtractFramesOptions, ResizeOptions, CropOptions, MaskOptions, BlendOptions, ShapeType, ShapeProperties, ImageFilter } from "./types";
+import { OutputFormat, CanvasConfig, ImageProperties, TextObject, TextProperties, GIFOptions, GIFResults, CustomOptions, cropOptions, GradientConfig, Frame, PatternOptions, ExtractFramesOptions, ResizeOptions, CropOptions, MaskOptions, BlendOptions, ShapeType, ShapeProperties, ImageFilter, barChart_1, PieChartData, LineChartConfig, BatchOperation, ChainOperation, StitchOptions, CollageLayout, CompressionOptions, PaletteOptions } from "./types";
 import { drawBackgroundColor, drawBackgroundGradient, customBackground, applyCanvasZoom, drawPattern, applyNoise } from "./Background/bg";
 import { buildPath, applyRotation, createGradientFill, fitInto, loadImageCached, applyStroke, drawBoxBackground, applyShadow } from './Image/imageProperties'
 import { applyImageFilters } from './Image/imageFilters'
@@ -21,6 +21,13 @@ import { customLines } from "./Custom/customLines";
 import { verticalBarChart, pieChart, lineChart } from './Charts/charts'
 import { url, arrayBuffer, base64, dataURL, blob  } from "./General/conversion";
 import { drawShape, isShapeSource, createShapePath } from "./Shapes/shapes";
+import { applyImageMask, applyClipPath, applyPerspectiveDistortion, applyBulgeDistortion, applyMeshWarp } from "./Image/imageMasking";
+import { applyVignette, applyLensFlare, applyChromaticAberration, applyFilmGrain } from "./Image/imageEffects";
+import { renderTextOnPath } from "./Texts/textPathRenderer";
+import { drawArrow, drawMarker, createSmoothPath, createCatmullRomPath, applyLinePattern, applyLineTexture, getPointOnLinePath } from "./Custom/advancedLines";
+import { batchOperations, chainOperations } from "./General/batchOperations";
+import { stitchImages, createCollage } from "./General/imageStitching";
+import { compressImage, extractPalette } from "./General/imageCompression";
 
 export {
     url,
@@ -81,5 +88,45 @@ export {
     isShapeSource,
     createShapePath,
     applyImageFilters,
-    applySimpleProfessionalFilters
+    applySimpleProfessionalFilters,
+    barChart_1,
+    PieChartData,
+    LineChartConfig,
+    // New image masking and distortion
+    applyImageMask,
+    applyClipPath,
+    applyPerspectiveDistortion,
+    applyBulgeDistortion,
+    applyMeshWarp,
+    // New image effects
+    applyVignette,
+    applyLensFlare,
+    applyChromaticAberration,
+    applyFilmGrain,
+    // New text path rendering
+    renderTextOnPath,
+    // New custom lines features
+    drawArrow,
+    drawMarker,
+    createSmoothPath,
+    createCatmullRomPath,
+    applyLinePattern,
+    applyLineTexture,
+    getPointOnLinePath,
+    // Batch operations
+    batchOperations,
+    chainOperations,
+    // Image stitching and collage
+    stitchImages,
+    createCollage,
+    // Image compression and palette
+    compressImage,
+    extractPalette,
+    // New types
+    BatchOperation,
+    ChainOperation,
+    StitchOptions,
+    CollageLayout,
+    CompressionOptions,
+    PaletteOptions
 };