apexify.js 4.9.28 → 5.0.0

package/lib/Canvas/utils/Charts/charts.ts

@@ -1,7 +1,13 @@
 import { createCanvas, loadImage } from '@napi-rs/canvas';
-import { barChart_1, bgConfig, DataItem, KeyBoxConfig, PieDataConfig, PieChartData, LineChartConfig, DataPoint } from "../types";
+import { barChart_1, bgConfig, DataItem, KeyBoxConfig, PieDataConfig, PieChartData, LineChartConfig } from "../types";
 import path from 'path';
 
+// Line chart DataPoint interface (different from bar chart DataPoint)
+interface LineDataPoint {
+  label: string;
+  y: number;
+}
+
 
 ////////////////////////////////////////BAR CHARTS////////////////////////////////////////
 
@@ -50,8 +56,9 @@ export async function verticalBarChart(data: barChart_1) {
             }
         }
         
-        const canvas = createCanvas(800, 600);
-        const ctx = canvas.getContext('2d');
+        const canvas = createCanvas(canvasWidth, canvasHeight);
+        const ctx = canvas.getContext('2d') as SKRSContext2D;
+        if (!ctx) throw new Error("Unable to get 2D context");
 
         if (chartData?.bg?.image) { 
             ctx.drawImage(img, 0, 0, 800, 600);
@@ -160,7 +167,9 @@ export async function verticalBarChart(data: barChart_1) {
     }
 }
 
-function drawGridLines(ctx: any, leftMargin: number, topMargin: number, width: number, height: number, xLabels: any, yLabels: any, grid: any) {
+import { SKRSContext2D } from '@napi-rs/canvas';
+
+function drawGridLines(ctx: SKRSContext2D, leftMargin: number, topMargin: number, width: number, height: number, xLabels: number[], yLabels: number[], grid: { color?: string; width?: number }) {
     ctx.strokeStyle = grid.color || 'gray';
     ctx.lineWidth = grid.width  || 2;
     
@@ -185,7 +194,7 @@ function drawGridLines(ctx: any, leftMargin: number, topMargin: number, width: n
 ////////////////////////////////////////PIE CHARTS////////////////////////////////////////
 
 
-function drawPieChart(ctx: any, data: DataItem[], canvasConfig: bgConfig, pieDataConfig: PieDataConfig) {
+function drawPieChart(ctx: SKRSContext2D, data: DataItem[], canvasConfig: bgConfig, pieDataConfig: PieDataConfig): void {
     const width = canvasConfig?.width ?? 1200;
     const height = canvasConfig?.height ?? 400;
     const centerX = width / 2 + (pieDataConfig?.x || 0);
@@ -256,7 +265,7 @@ function drawPieChart(ctx: any, data: DataItem[], canvasConfig: bgConfig, pieDat
   }
 }
 
-function drawKeys(ctx: any, data: DataItem[], pieConfig: { keyBox: KeyBoxConfig; canvas: bgConfig }) {
+function drawKeys(ctx: SKRSContext2D, data: DataItem[], pieConfig: { keyBox: KeyBoxConfig; canvas: bgConfig }): void {
   const { bgcolor, width, height, radius, x, y, content } = pieConfig.keyBox || {};
   const keyX = x || 0;
   const keyY = y || 0;
@@ -320,7 +329,7 @@ export async function pieChart(pieChartData: PieChartData): Promise<Buffer> {
 ////////////////////////////////////////LINE CHARTS////////////////////////////////////////
 
 
-export async function lineChart(data: { data: DataPoint[][], lineConfig: LineChartConfig }): Promise<Buffer> {
+export async function lineChart(data: { data: LineDataPoint[][], lineConfig: LineChartConfig }): Promise<Buffer> {
     if (!data || !data.data || !Array.isArray(data.data) || data.data.length === 0 || !data.lineConfig) {
         throw new Error('Invalid data object or missing data properties');
     }

package/lib/Canvas/utils/Custom/advancedLines.ts

@@ -0,0 +1,335 @@
+import { SKRSContext2D, Image, loadImage } from '@napi-rs/canvas';
+import path from 'path';
+import fs from 'fs';
+
+/**
+ * Draws an arrow at the end of a line
+ * @param ctx - Canvas 2D context
+ * @param x - Arrow tip X
+ * @param y - Arrow tip Y
+ * @param angle - Arrow angle in radians
+ * @param size - Arrow size
+ * @param style - Arrow style
+ * @param color - Arrow color
+ */
+export function drawArrow(
+  ctx: SKRSContext2D,
+  x: number,
+  y: number,
+  angle: number,
+  size: number,
+  style: 'filled' | 'outline',
+  color: string
+): void {
+  ctx.save();
+  ctx.translate(x, y);
+  ctx.rotate(angle);
+  
+  const arrowHeadLength = size;
+  const arrowHeadWidth = size * 0.6;
+  
+  ctx.beginPath();
+  ctx.moveTo(0, 0);
+  ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
+  ctx.lineTo(-arrowHeadLength * 0.7, 0);
+  ctx.lineTo(-arrowHeadLength, arrowHeadWidth);
+  ctx.closePath();
+  
+  if (style === 'filled') {
+    ctx.fillStyle = color;
+    ctx.fill();
+  } else {
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 2;
+    ctx.stroke();
+  }
+  
+  ctx.restore();
+}
+
+/**
+ * Draws a marker on a path
+ * @param ctx - Canvas 2D context
+ * @param x - Marker X position
+ * @param y - Marker Y position
+ * @param shape - Marker shape
+ * @param size - Marker size
+ * @param color - Marker color
+ */
+export function drawMarker(
+  ctx: SKRSContext2D,
+  x: number,
+  y: number,
+  shape: 'circle' | 'square' | 'diamond' | 'arrow',
+  size: number,
+  color: string
+): void {
+  ctx.save();
+  ctx.fillStyle = color;
+  ctx.translate(x, y);
+  
+  switch (shape) {
+    case 'circle':
+      ctx.beginPath();
+      ctx.arc(0, 0, size / 2, 0, Math.PI * 2);
+      ctx.fill();
+      break;
+      
+    case 'square':
+      ctx.fillRect(-size / 2, -size / 2, size, size);
+      break;
+      
+    case 'diamond':
+      ctx.beginPath();
+      ctx.moveTo(0, -size / 2);
+      ctx.lineTo(size / 2, 0);
+      ctx.lineTo(0, size / 2);
+      ctx.lineTo(-size / 2, 0);
+      ctx.closePath();
+      ctx.fill();
+      break;
+      
+    case 'arrow':
+      ctx.beginPath();
+      ctx.moveTo(0, -size / 2);
+      ctx.lineTo(size / 2, size / 2);
+      ctx.lineTo(-size / 2, size / 2);
+      ctx.closePath();
+      ctx.fill();
+      break;
+  }
+  
+  ctx.restore();
+}
+
+/**
+ * Creates a smooth path from points
+ * @param ctx - Canvas 2D context
+ * @param points - Array of points
+ * @param tension - Smoothness (0-1)
+ * @param closed - Whether path is closed
+ */
+export function createSmoothPath(
+  ctx: SKRSContext2D,
+  points: Array<{ x: number; y: number }>,
+  tension: number = 0.5,
+  closed: boolean = false
+): void {
+  if (points.length < 2) return;
+  
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  
+  if (points.length === 2) {
+    ctx.lineTo(points[1].x, points[1].y);
+    return;
+  }
+  
+  for (let i = 0; i < points.length - 1; i++) {
+    const p0 = i > 0 ? points[i - 1] : (closed ? points[points.length - 1] : points[i]);
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = i < points.length - 2 ? points[i + 2] : (closed ? points[0] : p2);
+    
+    const cp1x = p1.x + (p2.x - p0.x) / 6 * tension;
+    const cp1y = p1.y + (p2.y - p0.y) / 6 * tension;
+    const cp2x = p2.x - (p3.x - p1.x) / 6 * tension;
+    const cp2y = p2.y - (p3.y - p1.y) / 6 * tension;
+    
+    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.x, p2.y);
+  }
+  
+  if (closed) {
+    ctx.closePath();
+  }
+}
+
+/**
+ * Creates a Catmull-Rom spline path
+ * @param ctx - Canvas 2D context
+ * @param points - Array of points
+ * @param tension - Tension (0-1)
+ * @param closed - Whether path is closed
+ */
+export function createCatmullRomPath(
+  ctx: SKRSContext2D,
+  points: Array<{ x: number; y: number }>,
+  tension: number = 0.5,
+  closed: boolean = false
+): void {
+  if (points.length < 2) return;
+  
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  
+  if (points.length === 2) {
+    ctx.lineTo(points[1].x, points[1].y);
+    return;
+  }
+  
+  const segments = closed ? points.length : points.length - 1;
+  
+  for (let i = 0; i < segments; i++) {
+    const p0 = closed && i === 0 ? points[points.length - 1] : (i > 0 ? points[i - 1] : points[i]);
+    const p1 = points[i];
+    const p2 = points[(i + 1) % points.length];
+    const p3 = closed && i === segments - 1 ? points[0] : (i < points.length - 2 ? points[i + 2] : p2);
+    
+    for (let t = 0; t <= 1; t += 0.1) {
+      const point = catmullRom(p0, p1, p2, p3, t, tension);
+      if (t === 0) {
+        ctx.moveTo(point.x, point.y);
+      } else {
+        ctx.lineTo(point.x, point.y);
+      }
+    }
+  }
+  
+  if (closed) {
+    ctx.closePath();
+  }
+}
+
+/**
+ * Catmull-Rom interpolation
+ */
+function catmullRom(
+  p0: { x: number; y: number },
+  p1: { x: number; y: number },
+  p2: { x: number; y: number },
+  p3: { x: number; y: number },
+  t: number,
+  tension: number
+): { x: number; y: number } {
+  const t2 = t * t;
+  const t3 = t2 * t;
+  
+  const x = 0.5 * (
+    (2 * p1.x) +
+    (-p0.x + p2.x) * t +
+    (2 * p0.x - 5 * p1.x + 4 * p2.x - p3.x) * t2 +
+    (-p0.x + 3 * p1.x - 3 * p2.x + p3.x) * t3
+  ) * tension;
+  
+  const y = 0.5 * (
+    (2 * p1.y) +
+    (-p0.y + p2.y) * t +
+    (2 * p0.y - 5 * p1.y + 4 * p2.y - p3.y) * t2 +
+    (-p0.y + 3 * p1.y - 3 * p2.y + p3.y) * t3
+  ) * tension;
+  
+  return { x: p1.x + x, y: p1.y + y };
+}
+
+/**
+ * Applies line pattern
+ * @param ctx - Canvas 2D context
+ * @param pattern - Pattern configuration
+ */
+export function applyLinePattern(
+  ctx: SKRSContext2D,
+  pattern: {
+    type: 'dots' | 'dashes' | 'custom';
+    segments?: number[];
+    offset?: number;
+  }
+): void {
+  switch (pattern.type) {
+    case 'dots':
+      ctx.setLineDash([2, 4]);
+      break;
+      
+    case 'dashes':
+      ctx.setLineDash([10, 5]);
+      break;
+      
+    case 'custom':
+      if (pattern.segments && pattern.segments.length > 0) {
+        ctx.setLineDash(pattern.segments);
+      }
+      break;
+  }
+  
+  if (pattern.offset !== undefined) {
+    ctx.lineDashOffset = pattern.offset;
+  }
+}
+
+/**
+ * Applies texture to line
+ * @param ctx - Canvas 2D context
+ * @param textureSource - Texture image source
+ * @param lineWidth - Line width
+ * @param lineLength - Approximate line length
+ */
+export async function applyLineTexture(
+  ctx: SKRSContext2D,
+  textureSource: string | Buffer,
+  lineWidth: number,
+  lineLength: number
+): Promise<void> {
+  try {
+    let textureImage: Image;
+    if (Buffer.isBuffer(textureSource)) {
+      textureImage = await loadImage(textureSource);
+    } else if (textureSource.startsWith('http')) {
+      textureImage = await loadImage(textureSource);
+    } else {
+      const texturePath = path.join(process.cwd(), textureSource);
+      textureImage = await loadImage(fs.readFileSync(texturePath));
+    }
+    
+    // Create pattern from texture
+    const pattern = ctx.createPattern(textureImage, 'repeat');
+    if (pattern) {
+      ctx.strokeStyle = pattern;
+    }
+  } catch (error) {
+    console.error('Error applying line texture:', error);
+    // Fallback to current stroke style
+  }
+}
+
+/**
+ * Gets points along a path for marker placement
+ * @param points - Path points
+ * @param position - Position along path (0-1)
+ */
+export function getPointOnLinePath(
+  points: Array<{ x: number; y: number }>,
+  position: number
+): { x: number; y: number } {
+  if (points.length < 2) return points[0] || { x: 0, y: 0 };
+  
+  // Calculate total path length
+  let totalLength = 0;
+  const segmentLengths: number[] = [];
+  
+  for (let i = 0; i < points.length - 1; i++) {
+    const dx = points[i + 1].x - points[i].x;
+    const dy = points[i + 1].y - points[i].y;
+    const length = Math.sqrt(dx * dx + dy * dy);
+    segmentLengths.push(length);
+    totalLength += length;
+  }
+  
+  // Find target position
+  const targetLength = totalLength * Math.max(0, Math.min(1, position));
+  let currentLength = 0;
+  
+  for (let i = 0; i < segmentLengths.length; i++) {
+    if (currentLength + segmentLengths[i] >= targetLength) {
+      const segmentT = (targetLength - currentLength) / segmentLengths[i];
+      const dx = points[i + 1].x - points[i].x;
+      const dy = points[i + 1].y - points[i].y;
+      return {
+        x: points[i].x + dx * segmentT,
+        y: points[i].y + dy * segmentT
+      };
+    }
+    currentLength += segmentLengths[i];
+  }
+  
+  return points[points.length - 1];
+}
+

package/lib/Canvas/utils/Custom/customLines.ts

@@ -1,15 +1,25 @@
+import { SKRSContext2D } from '@napi-rs/canvas';
 import { createGradientFill } from "../Image/imageProperties";
 import { CustomOptions } from "../types";
+import { drawArrow, drawMarker, createSmoothPath, createCatmullRomPath, applyLinePattern, applyLineTexture, getPointOnLinePath } from "./advancedLines";
 
-export function customLines(ctx: any, options: CustomOptions[]) {
-    let previousEndCoordinates = null;
-    let currentStyle = null;
+
+export async function customLines(ctx: SKRSContext2D, options: CustomOptions[]): Promise<void> {
+    let previousEndCoordinates: { x: number; y: number } | null = null;
+    let currentStyle: CustomOptions['lineStyle'] | null = null;
     let inSingleLineSequence = false;
 
     for (let i = 0; i < options.length; i++) {
         const customOption = options[i];
-        const { startCoordinates, endCoordinates, lineStyle } = customOption;
+        const { startCoordinates, endCoordinates, lineStyle, path, arrow, markers } = customOption;
         const isSingleLine = lineStyle?.singleLine;
+        
+        // Collect all points for path rendering
+        const allPoints: Array<{ x: number; y: number }> = [];
+        if (i === 0 || !isSingleLine) {
+            allPoints.push(startCoordinates);
+        }
+        allPoints.push(endCoordinates);
 
         if (isSingleLine && !inSingleLineSequence) {
             currentStyle = lineStyle;
@@ -20,7 +30,9 @@ export function customLines(ctx: any, options: CustomOptions[]) {
 
         if (!isSingleLine && inSingleLineSequence) {
             ctx.stroke();
-            applyStroke(ctx, currentStyle, startCoordinates, endCoordinates);
+            if (currentStyle) {
+              applyStroke(ctx, currentStyle, startCoordinates, endCoordinates);
+            }
             inSingleLineSequence = false;
             currentStyle = null;
         }
@@ -34,7 +46,30 @@ export function customLines(ctx: any, options: CustomOptions[]) {
             ctx.moveTo(start.x, start.y);
         }
 
-        ctx.lineTo(endCoordinates.x, endCoordinates.y);
+        // Apply path smoothing if specified
+        if (path && allPoints.length >= 2) {
+            ctx.beginPath();
+            if (path.type === 'smooth') {
+                createSmoothPath(ctx, allPoints, path.tension ?? 0.5, path.closed ?? false);
+            } else if (path.type === 'catmull-rom') {
+                createCatmullRomPath(ctx, allPoints, path.tension ?? 0.5, path.closed ?? false);
+            } else if (path.type === 'bezier' && allPoints.length >= 4) {
+                ctx.moveTo(allPoints[0].x, allPoints[0].y);
+                for (let j = 1; j < allPoints.length - 2; j += 3) {
+                    if (j + 2 < allPoints.length) {
+                        ctx.bezierCurveTo(
+                            allPoints[j].x, allPoints[j].y,
+                            allPoints[j + 1].x, allPoints[j + 1].y,
+                            allPoints[j + 2].x, allPoints[j + 2].y
+                        );
+                    }
+                }
+            } else {
+                ctx.lineTo(endCoordinates.x, endCoordinates.y);
+            }
+        } else {
+            ctx.lineTo(endCoordinates.x, endCoordinates.y);
+        }
 
         const appliedStyle = inSingleLineSequence ? currentStyle : lineStyle;
         ctx.lineWidth = appliedStyle?.width || 1;
@@ -48,13 +83,22 @@ export function customLines(ctx: any, options: CustomOptions[]) {
         ctx.lineJoin = appliedStyle?.lineJoin || 'miter';
         ctx.lineCap = appliedStyle?.lineCap || 'butt';
 
-        if (appliedStyle?.lineDash) {
+        // Apply line patterns
+        if (appliedStyle?.pattern) {
+            applyLinePattern(ctx, appliedStyle.pattern);
+        } else if (appliedStyle?.lineDash) {
             ctx.setLineDash(appliedStyle.lineDash.dashArray || []);
             ctx.lineDashOffset = appliedStyle.lineDash.offset || 0;
         } else {
             ctx.setLineDash([]);
         }
 
+        // Apply line texture if specified
+        if (appliedStyle?.texture) {
+            await applyLineTexture(ctx, appliedStyle.texture, appliedStyle.width || 1, 
+                Math.sqrt(Math.pow(endCoordinates.x - start.x, 2) + Math.pow(endCoordinates.y - start.y, 2)));
+        }
+
         if (typeof appliedStyle?.lineRadius === 'number' && appliedStyle.lineRadius > 0) {
             const radius = appliedStyle.lineRadius;
             const dx = endCoordinates.x - start.x;
@@ -84,7 +128,34 @@ export function customLines(ctx: any, options: CustomOptions[]) {
 
         if (!inSingleLineSequence || i === options.length - 1) {
             ctx.stroke();
-            applyStroke(ctx, appliedStyle, startCoordinates, endCoordinates);
+            if (appliedStyle) {
+              applyStroke(ctx, appliedStyle, startCoordinates, endCoordinates);
+            }
+        }
+
+        // Draw arrows if specified
+        if (arrow) {
+            const dx = endCoordinates.x - start.x;
+            const dy = endCoordinates.y - start.y;
+            const angle = Math.atan2(dy, dx);
+            const arrowColor = arrow.color || appliedStyle?.color || 'black';
+            const arrowSize = arrow.size || 10;
+            
+            if (arrow.start) {
+                drawArrow(ctx, start.x, start.y, angle + Math.PI, arrowSize, arrow.style || 'filled', arrowColor);
+            }
+            if (arrow.end) {
+                drawArrow(ctx, endCoordinates.x, endCoordinates.y, angle, arrowSize, arrow.style || 'filled', arrowColor);
+            }
+        }
+
+        // Draw markers if specified
+        if (markers && markers.length > 0) {
+            const linePoints = [start, endCoordinates];
+            for (const marker of markers) {
+                const point = getPointOnLinePath(linePoints, marker.position);
+                drawMarker(ctx, point.x, point.y, marker.shape, marker.size, marker.color);
+            }
         }
 
         previousEndCoordinates = endCoordinates;
@@ -96,7 +167,11 @@ export function customLines(ctx: any, options: CustomOptions[]) {
     }
 }
 
-function applyStroke(ctx: any, style: any, start: any, end: any) {
+function applyStroke(ctx: SKRSContext2D, style: CustomOptions['lineStyle'] | undefined, start: { x: number; y: number }, end: { x: number; y: number }): void {
+    if (!style || !style.stroke) {
+      return;
+    }
+    
     if (style.stroke) {
         const { color, width, gradient, lineRadius, lineCap } = style.stroke;
         const prevStrokeStyle = ctx.strokeStyle;

package/lib/Canvas/utils/General/batchOperations.ts

@@ -0,0 +1,103 @@
+import { ApexPainter } from '../../ApexPainter';
+import { BatchOperation, ChainOperation, CanvasConfig, ImageProperties, TextProperties } from '../types';
+
+/**
+ * Processes multiple operations in parallel
+ * @param painter - ApexPainter instance
+ * @param operations - Array of operations to process
+ * @returns Array of result buffers
+ */
+export async function batchOperations(
+  painter: ApexPainter,
+  operations: BatchOperation[]
+): Promise<Buffer[]> {
+  if (!operations || operations.length === 0) {
+    throw new Error('batch: operations array is required');
+  }
+
+  const promises = operations.map(async (op) => {
+    try {
+      switch (op.type) {
+        case 'canvas':
+          const canvasResult = await painter.createCanvas(op.config as CanvasConfig);
+          return canvasResult.buffer;
+          
+        case 'image':
+          // For image operations, we need a base canvas
+          const baseCanvas = await painter.createCanvas({ width: 800, height: 600 });
+          return await painter.createImage(op.config as ImageProperties | ImageProperties[], baseCanvas);
+          
+        case 'text':
+          // For text operations, we need a base canvas
+          const textBaseCanvas = await painter.createCanvas({ width: 800, height: 600 });
+          return await painter.createText(op.config as TextProperties | TextProperties[], textBaseCanvas);
+          
+        case 'chart':
+          return await painter.createChart(op.config, { chartType: 'bar', chartNumber: 1 });
+          
+        default:
+          throw new Error(`batch: Unknown operation type: ${op.type}`);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`batch: Failed to process ${op.type} operation: ${errorMessage}`);
+    }
+  });
+
+  return Promise.all(promises);
+}
+
+/**
+ * Chains multiple operations sequentially
+ * @param painter - ApexPainter instance
+ * @param operations - Array of operations to chain
+ * @returns Final result buffer
+ */
+export async function chainOperations(
+  painter: ApexPainter,
+  operations: ChainOperation[]
+): Promise<Buffer> {
+  if (!operations || operations.length === 0) {
+    throw new Error('chain: operations array is required');
+  }
+
+  let currentBuffer: Buffer | undefined;
+
+  for (const op of operations) {
+    try {
+      const method = (painter as any)[op.method];
+      if (typeof method !== 'function') {
+        throw new Error(`chain: Method "${op.method}" does not exist on ApexPainter`);
+      }
+
+      // Prepare arguments - replace 'current' with current buffer
+      const args = op.args.map(arg => {
+        if (arg === 'current' || (typeof arg === 'object' && arg !== null && (arg as any).__isCurrentBuffer)) {
+          return currentBuffer;
+        }
+        return arg;
+      });
+
+      const result = await method.apply(painter, args);
+
+      // Update current buffer
+      if (Buffer.isBuffer(result)) {
+        currentBuffer = result;
+      } else if (result && typeof result === 'object' && 'buffer' in result) {
+        currentBuffer = (result as any).buffer;
+      } else {
+        throw new Error(`chain: Operation "${op.method}" did not return a buffer`);
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      throw new Error(`chain: Failed to execute "${op.method}": ${errorMessage}`);
+    }
+  }
+
+  if (!currentBuffer) {
+    throw new Error('chain: No buffer was produced from operations');
+  }
+
+  return currentBuffer;
+}
+