apexify.js 4.9.26 → 4.9.27

package/lib/Canvas/utils/Background/bg.ts

@@ -1,12 +1,12 @@
-import { loadImage, SKRSContext2D } from "@napi-rs/canvas";
-import { CanvasConfig } from "../types";
+import { createCanvas, loadImage, SKRSContext2D } from "@napi-rs/canvas";
+import { CanvasConfig, gradient } from "../types";
 import path from "path";
 
-interface ZoomConfig {
-    scale?: number;
-    x?: number;
-    y?: number;
-}
+export type AlignMode =
+  | 'center' | 'top' | 'bottom' | 'left' | 'right'
+  | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+export type FitMode = 'fill' | 'contain' | 'cover';
 
 /**
  * Draws a gradient background on the canvas with optional zoom support.
@@ -15,59 +15,22 @@ interface ZoomConfig {
  * @param zoom Optional zoom configuration.
  */
 export async function drawBackgroundGradient(
-    ctx: SKRSContext2D,
-    canvas: CanvasConfig,
-    zoom?: ZoomConfig,
-    blur?: number
-): Promise<void> {
-    if (canvas.gradientBg) {
-        const {
-            type,
-            startX = 0,
-            startY = 0,
-            endX = canvas.width || 500,
-            endY = canvas.height || 500,
-            startRadius = 0,
-            endRadius = 0,
-            colors
-        } = canvas.gradientBg;
-
-        if (!colors || colors.length === 0) {
-            throw new Error("You need to provide colors for the gradient.");
-        }
-
-        let gradient;
-        if (type === "linear" || type === undefined) {
-            let finalStartX = startX, finalStartY = startY, finalEndX = endX, finalEndY = endY;
-
-            if (zoom) {
-                const scale = Math.max(1, zoom.scale || 1);
-                finalStartX = (zoom.x || 0) - (endX - startX) / (2 * scale);
-                finalStartY = (zoom.y || 0) - (endY - startY) / (2 * scale);
-                finalEndX = (zoom.x || 0) + (endX - startX) / (2 * scale);
-                finalEndY = (zoom.y || 0) + (endY - startY) / (2 * scale);
-            }
-
-            gradient = ctx.createLinearGradient(finalStartX, finalStartY, finalEndX, finalEndY);
-        } else if (type === "radial") {
-            gradient = ctx.createRadialGradient(startX, startY, startRadius, endX, endY, endRadius);
-        } else {
-            throw new Error("Unsupported gradient type.");
-        }
-
-        for (const { stop, color } of colors) {
-            gradient.addColorStop(stop as number, color as string);
-        }
-
-        if (blur) {
-          ctx.filter = `blur(${blur}px)`;
-      }
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
+) {
+  if (!canvas.gradientBg) return;
+  const width = canvas.width ?? 500;
+  const height = canvas.height ?? 500;
 
-      ctx.fillStyle = gradient;
-      ctx.fillRect(0, 0, canvas.width || 500, canvas.height || 500);
+  const grad = buildCanvasGradient(ctx, {
+    gradient: canvas.gradientBg,
+    width, height
+  });
 
-      ctx.filter = "none";
-    }
+  if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+  ctx.fillStyle = grad;
+  ctx.fillRect(0, 0, width, height);
+  ctx.filter = 'none';
 }
 
 /**
@@ -77,37 +40,18 @@ export async function drawBackgroundGradient(
  * @param zoom Optional zoom configuration.
  */
 export async function drawBackgroundColor(
-    ctx: SKRSContext2D,
-    canvas: CanvasConfig,
-    zoom?: ZoomConfig,
-    blur?: number
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
 ): Promise<void> {
-    const canvasWidth = canvas.width || 500;
-    const canvasHeight = canvas.height || 500;
-
-    ctx.save();
+  const W = canvas.width ?? 500;
+  const H = canvas.height ?? 500;
 
-
-    if (blur) {
-      ctx.filter = `blur(${blur}px)`;
+  if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+  if (canvas.colorBg !== 'transparent') {
+    ctx.fillStyle = (canvas.colorBg ?? '#000') as string;
+    ctx.fillRect(0, 0, W, H);
   }
-
-    if (zoom) {
-        const scale = Math.max(1, zoom.scale || 1);
-        const zoomedWidth = canvasWidth / scale;
-        const zoomedHeight = canvasHeight / scale;
-
-        ctx.scale(scale, scale);
-        ctx.translate((zoom.x || 0) + zoomedWidth / 2, (zoom.y || 0) + zoomedHeight / 2);
-    }
-
-    if (canvas.colorBg !== "transparent") {
-        ctx.fillStyle = canvas.colorBg as string;
-        ctx.fillRect(0, 0, canvasWidth, canvasHeight);
-    }
-
-    ctx.filter = "none"; 
-    ctx.restore();
+  ctx.filter = 'none';
 }
 
 /**
@@ -117,95 +61,225 @@ export async function drawBackgroundColor(
  * @param zoom Optional zoom configuration.
  */
 export async function customBackground(
-    ctx: SKRSContext2D,
-    canvas: CanvasConfig,
-    zoom?: ZoomConfig,
-    blur?: number
+  ctx: SKRSContext2D,
+  canvas: CanvasConfig
 ): Promise<void> {
-    if (canvas.customBg) {
-        try {
-            let imageBuffer: string;
-
-            if (canvas.customBg.startsWith("http")) {
-                imageBuffer = canvas.customBg;
-            } else {
-                imageBuffer = path.join(process.cwd(), canvas.customBg);
-            }
-
-            const image = await loadImage(imageBuffer);
-            const imgWidth = image.width;
-            const imgHeight = image.height;
-            const canvasWidth = canvas.width || imgWidth;
-            const canvasHeight = canvas.height || imgHeight;
-
-            if (blur) {
-              ctx.filter = `blur(${blur}px)`;
-            }
-
-            if (zoom) {
-                const scale = Math.max(1, zoom.scale || 1);
-                const cropWidth = imgWidth / scale;
-                const cropHeight = imgHeight / scale;
-
-                let sx = (zoom.x || 0) - cropWidth / 2;
-                let sy = (zoom.y || 0) - cropHeight / 2;
-
-                sx = Math.max(0, Math.min(sx, imgWidth - cropWidth));
-                sy = Math.max(0, Math.min(sy, imgHeight - cropHeight));
-
-                ctx.drawImage(image, sx, sy, cropWidth, cropHeight, 0, 0, canvasWidth, canvasHeight);
-            } else {
-                ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
-            }
-            ctx.filter = "none";
-        } catch (error: any) {
-            console.error("Error loading custom background image:", error.message);
-        }
-    }
-}
+  const cfg = canvas.customBg;
+  if (!cfg) return;
 
-export function backgroundRadius(
-    ctx: SKRSContext2D,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    borderRadius: number | "circular",
-    borderPosition: string = "all"
-  ): void {
-    ctx.beginPath();
-  
-    if (borderRadius === "circular") {
-      const circleRadius = Math.min(width, height) / 2;
-      ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
-    } else if (typeof borderRadius === "number" && borderRadius > 0) {
-      const br: number = Math.min(borderRadius, width / 2, height / 2);
-      const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
-  
-      const roundTopLeft = selectedPositions.has("all") || selectedPositions.has("top-left") || (selectedPositions.has("top") && selectedPositions.has("left"));
-      const roundTopRight = selectedPositions.has("all") || selectedPositions.has("top-right") || (selectedPositions.has("top") && selectedPositions.has("right"));
-      const roundBottomRight = selectedPositions.has("all") || selectedPositions.has("bottom-right") || (selectedPositions.has("bottom") && selectedPositions.has("right"));
-      const roundBottomLeft = selectedPositions.has("all") || selectedPositions.has("bottom-left") || (selectedPositions.has("bottom") && selectedPositions.has("left"));
-  
-      const tl = roundTopLeft ? br : 0;
-      const tr = roundTopRight ? br : 0;
-      const brR = roundBottomRight ? br : 0;
-      const bl = roundBottomLeft ? br : 0;
-  
-      ctx.moveTo(x + tl, y);
-      ctx.lineTo(x + width - tr, y);
-      if (tr > 0) ctx.arc(x + width - tr, y + tr, tr, -Math.PI / 2, 0, false);
-      ctx.lineTo(x + width, y + height - brR);
-      if (brR > 0) ctx.arc(x + width - brR, y + height - brR, brR, 0, Math.PI / 2, false);
-      ctx.lineTo(x + bl, y + height);
-      if (bl > 0) ctx.arc(x + bl, y + height - bl, bl, Math.PI / 2, Math.PI, false);
-      ctx.lineTo(x, y + tl);
-      if (tl > 0) ctx.arc(x + tl, y + tl, tl, Math.PI, -Math.PI / 2, false);
+  let imagePath = cfg.source;
+  if (!/^https?:\/\//i.test(imagePath)) {
+    imagePath = path.join(process.cwd(), imagePath);
+  }
+
+  try {
+    const img = await loadImage(imagePath);
+    // Canvas size (createCanvas may have overridden via inherit)
+    const W = canvas.width ?? img.width;
+    const H = canvas.height ?? img.height;
+
+    if (canvas.blur) ctx.filter = `blur(${canvas.blur}px)`;
+
+    if (cfg.inherit) {
+      // Canvas was resized to image size in createCanvas; just draw 1:1
+      ctx.drawImage(img, 0, 0);
     } else {
-      ctx.rect(x, y, width, height);
+      // scale by fit + align
+      const fit: FitMode = cfg.fit ?? 'fill';
+      let dx = 0, dy = 0, dw = W, dh = H;
+
+      if (fit === 'contain' || fit === 'cover') {
+        const s = fit === 'contain'
+          ? Math.min(W / img.width, H / img.height)
+          : Math.max(W / img.width, H / img.height);
+        dw = img.width * s;
+        dh = img.height * s;
+        // alignment
+        const align: AlignMode = cfg.align ?? 'center';
+        ({ dx, dy } = alignInto(W, H, dw, dh, align));
+      } else {
+        // 'fill' stretches image to exactly W x H (may distort)
+        dx = 0; dy = 0; dw = W; dh = H;
+      }
+
+      ctx.drawImage(img, dx, dy, dw, dh);
     }
-  
-    ctx.closePath();
-    ctx.clip();
+
+    ctx.filter = 'none';
+  } catch (e: any) {
+    console.error('customBackground: failed to load', e?.message ?? e);
+  }
+}
+
+// helper to place the fitted rect inside canvas by alignment keyword
+function alignInto(
+  W: number, H: number, w: number, h: number, align: AlignMode
+): { dx: number; dy: number } {
+  const cx = (W - w) / 2;
+  const cy = (H - h) / 2;
+  switch (align) {
+    case 'top-left':     return { dx: 0,   dy: 0 };
+    case 'top':          return { dx: cx,  dy: 0 };
+    case 'top-right':    return { dx: W-w, dy: 0 };
+    case 'left':         return { dx: 0,   dy: cy };
+    case 'center':       return { dx: cx,  dy: cy };
+    case 'right':        return { dx: W-w, dy: cy };
+    case 'bottom-left':  return { dx: 0,   dy: H-h };
+    case 'bottom':       return { dx: cx,  dy: H-h };
+    case 'bottom-right': return { dx: W-w, dy: H-h };
+    default:             return { dx: cx,  dy: cy };
+  }
+}
+ 
+
+
+export function buildPathbg(
+  ctx: SKRSContext2D,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  borderRadius: number | "circular" = 0,
+  borderPosition: string = "all"
+): void {
+  ctx.beginPath();
+
+  if (borderRadius === "circular") {
+    const r = Math.min(width, height) / 2;
+    ctx.arc(x + width / 2, y + height / 2, r, 0, 2 * Math.PI);
+  } else if (typeof borderRadius === "number" && borderRadius > 0) {
+    const br = Math.min(borderRadius, width / 2, height / 2);
+    const selected = new Set(borderPosition.toLowerCase().split(",").map(s => s.trim()));
+
+    const roundTL = selected.has("all") || selected.has("top-left") || (selected.has("top") && selected.has("left"));
+    const roundTR = selected.has("all") || selected.has("top-right") || (selected.has("top") && selected.has("right"));
+    const roundBR = selected.has("all") || selected.has("bottom-right") || (selected.has("bottom") && selected.has("right"));
+    const roundBL = selected.has("all") || selected.has("bottom-left") || (selected.has("bottom") && selected.has("left"));
+
+    const tl = roundTL ? br : 0;
+    const tr = roundTR ? br : 0;
+    const brR = roundBR ? br : 0;
+    const bl = roundBL ? br : 0;
+
+    ctx.moveTo(x + tl, y);
+    ctx.lineTo(x + width - tr, y);
+    if (tr) ctx.arcTo(x + width, y, x + width, y + tr, tr);
+    ctx.lineTo(x + width, y + height - brR);
+    if (brR) ctx.arcTo(x + width, y + height, x + width - brR, y + height, brR);
+    ctx.lineTo(x + bl, y + height);
+    if (bl) ctx.arcTo(x, y + height, x, y + height - bl, bl);
+    ctx.lineTo(x, y + tl);
+    if (tl) ctx.arcTo(x, y, x + tl, y, tl);
+  } else {
+    ctx.rect(x, y, width, height);
+  }
+
+  ctx.closePath();
+}
+
+
+
+export function applyNoise(ctx: SKRSContext2D, width: number, height: number, intensity = 0.05) {
+  const noiseCanvas = createCanvas(width, height);
+  const nctx = noiseCanvas.getContext("2d");
+  const imageData = nctx.createImageData(width, height);
+  for (let i = 0; i < imageData.data.length; i += 4) {
+    const v = (Math.random() * 255) | 0;
+    imageData.data[i]   = v;
+    imageData.data[i+1] = v;
+    imageData.data[i+2] = v;
+    imageData.data[i+3] = 255 * intensity;
+  }
+  nctx.putImageData(imageData, 0, 0);
+  ctx.drawImage(noiseCanvas, 0, 0);
+}
+
+export async function drawPattern(
+  ctx: SKRSContext2D,
+  { source, repeat = "repeat", opacity = 1 }: { source: string; repeat?: 'repeat'|'repeat-x'|'repeat-y'|'no-repeat'; opacity?: number },
+  width: number,
+  height: number
+) {
+  const img = await loadImage(source);
+  const pattern = ctx.createPattern(img, repeat);
+  if (!pattern) return;
+  ctx.save();
+  ctx.globalAlpha = opacity;
+  ctx.fillStyle = pattern as any;
+  ctx.fillRect(0, 0, width, height);
+  ctx.restore();
+}
+
+function rotatePoint(
+  x: number, y: number,
+  pivotX: number, pivotY: number,
+  deg: number
+): [number, number] {
+  if (!deg) return [x, y];
+  const a = (deg * Math.PI) / 180;
+  const dx = x - pivotX, dy = y - pivotY;
+  const rx = dx * Math.cos(a) - dy * Math.sin(a);
+  const ry = dx * Math.sin(a) + dy * Math.cos(a);
+  return [pivotX + rx, pivotY + ry];
+}
+
+export function applyCanvasZoom(
+  ctx: SKRSContext2D,
+  width: number,
+  height: number,
+  zoom?: { scale?: number; centerX?: number; centerY?: number }
+) {
+  if (!zoom) return;
+
+  const scale = zoom.scale ?? 1;
+  if (scale === 1) return; // nothing to do
+
+  const cx = zoom.centerX ?? width / 2;
+  const cy = zoom.centerY ?? height / 2;
+
+  ctx.translate(cx, cy);
+  ctx.scale(scale, scale);
+  ctx.translate(-cx, -cy);
+}
+
+
+export function buildCanvasGradient(
+  ctx: SKRSContext2D,
+  cfg: { gradient: gradient; width: number; height: number }
+): CanvasGradient {
+  const { gradient, width, height } = cfg;
+
+  if (gradient.type === 'linear') {
+    const {
+      startX = 0, startY = 0,
+      endX   = width, endY   = 0,
+      rotate = 0,
+      pivotX = width/2, pivotY = height/2,
+      colors
+    } = gradient;
+
+    const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+    const [ex, ey] = rotatePoint(endX,   endY,   pivotX, pivotY, rotate);
+
+    const g = ctx.createLinearGradient(sx, sy, ex, ey);
+    for (const { stop, color } of colors) g.addColorStop(stop, color);
+    return g;
   }
-  
+
+  // radial
+  const {
+    startX = width/2,  startY = height/2,  startRadius = 0,
+    endX   = width/2,  endY   = height/2,  endRadius   = Math.max(width, height)/2,
+    rotate = 0,
+    pivotX = width/2,  pivotY = height/2,
+    colors
+  } = gradient;
+
+  // If centers differ, rotation will rotate both centers around pivot.
+  const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+  const [ex, ey] = rotatePoint(endX,   endY,   pivotX, pivotY, rotate);
+
+  const g = ctx.createRadialGradient(sx, sy, startRadius, ex, ey, endRadius);
+  for (const { stop, color } of colors) g.addColorStop(stop, color);
+  return g;
+}

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

@@ -1,4 +1,4 @@
-import { createGradient } from "../Image/imageProperties";
+import { createGradientFill } from "../Image/imageProperties";
 import { CustomOptions } from "../types";
 
 export function customLines(ctx: any, options: CustomOptions[]) {
@@ -40,7 +40,7 @@ export function customLines(ctx: any, options: CustomOptions[]) {
         ctx.lineWidth = appliedStyle?.width || 1;
 
         if (appliedStyle?.gradient) {
-            ctx.strokeStyle = createGradient(ctx, appliedStyle.gradient, start.x, start.y, endCoordinates.x, endCoordinates.y);
+            ctx.strokeStyle = createGradientFill(ctx, appliedStyle.gradient, { x: start.x, y: start.y, w: endCoordinates.x - start.x, h: endCoordinates.y - start.y });
         } else {
             ctx.strokeStyle = appliedStyle?.color || 'black';
         }
@@ -104,7 +104,7 @@ function applyStroke(ctx: any, style: any, start: any, end: any) {
         const prevLineCap = ctx.lineCap;
 
         if (gradient) {
-            ctx.strokeStyle = createGradient(ctx, gradient, start.x, start.y, end.x, end.y);
+            ctx.strokeStyle = createGradientFill(ctx, gradient, { x: start.x, y: start.y, w: end.x - start.x, h: end.y - start.y });
         } else {
             ctx.strokeStyle = color || prevStrokeStyle;
         }