apexify.js 4.2.10 → 4.3.1

package/lib/canvas/utils/textProperties.ts

@@ -7,9 +7,10 @@ import { TextObject } from "./types";
  */
 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.translate(textOptions.x || 0, textOptions.y || 0);
         ctx.rotate(textOptions.rotation * Math.PI / 180);
     }
 
@@ -17,79 +18,75 @@ export function drawText(ctx: any, textOptions: TextObject, size: any) {
     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 || null;
+        ctx.globalAlpha = opacity || 1;
     }
 
-    if (textOptions.opacity) {
-        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.")
+    // 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;
     }
 
-
-    if (textOptions.outlined) {
-        ctx.strokeStyle = textOptions.stroke && textOptions.stroke.color ? textOptions.stroke.color : textOptions.color;
-        ctx.lineWidth = textOptions.stroke && textOptions.stroke.width ? textOptions.stroke.width : 1;
+    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';
+    }
 
-        if (textOptions.gradient) {
-            if (textOptions.gradient.type === 'linear') {
-                const gradient = ctx.createLinearGradient(
-                    textOptions.gradient?.startX || 0,
-                    textOptions.gradient?.startY || 10,
-                    textOptions.gradient?.endX || 20,
-                    textOptions.gradient?.endY || 30
-                    );
-
-                textOptions.gradient.colors.forEach(({ stop, color }) => {
-                    gradient.addColorStop(stop, color);
-                });
-
-                ctx.fillStyle = gradient;
-            } else if (textOptions.gradient.type === 'radial') {
-                const gradient = ctx.createRadialGradient(
-                    textOptions.gradient?.startX || 0,
-                    textOptions.gradient?.startY || 10,
-                    textOptions.gradient?.startRadius || 0,
-                    textOptions.gradient?.endX || 20,
-                    textOptions.gradient?.endY || 30,
-                    textOptions.gradient?.endRadius || 30
-                );
-        
-                textOptions.gradient.colors.forEach(({ stop, color }) => {
-                    gradient.addColorStop(stop, color);
-                });
-        
-                ctx.fillStyle = gradient;
-            } else {
-                throw new Error("Error Gradient: Invalid gradient type. Valid types: `radial` or `linear`.")
-            }
+    // 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.fillStyle = textOptions.color || 'darkgray';
+            ctx.strokeStyle = textOptions.stroke?.color || textOptions.color;
         }
-
+        ctx.lineWidth = textOptions.stroke?.width || 1;
+        ctx.strokeText(textOptions.text, textOptions.x || 0, textOptions.y || 0);
     }
 
+    // Draw the text
     if (textOptions.maxWidth) {
         WrappedText(ctx, textOptions.text || 'Hello World', textOptions.x || 0, textOptions.y || 0, textOptions.maxWidth, textOptions);
     } else {
-        if (textOptions.outlined) {
-            ctx.strokeText(textOptions.text, textOptions.x, textOptions.y);
+        if (!textOptions.rotation) {
+            ctx.fillText(textOptions.text, textOptions.x || 0, textOptions.y || 0);
         } else {
-            if (!textOptions.rotation) ctx.fillText(textOptions.text, textOptions.x, textOptions.y);
-            if (textOptions.rotation) ctx.fillText(textOptions.text, 0, 0);
-
+            ctx.fillText(textOptions.text, 0, 0);
         }
     }
 
     ctx.restore();
 }
-
 /**
  * Draws wrapped text on the canvas context.
  * @param ctx The canvas rendering context.
@@ -107,11 +104,10 @@ export function WrappedText(ctx: any, text: string, x: number, y: number, maxWid
 
     ctx.save();
 
-    if (textOptions.outlined) {
-        ctx.strokeStyle = textOptions.stroke && textOptions.stroke.color ? textOptions.stroke.color : textOptions.color;
-        ctx.lineWidth = textOptions.stroke && textOptions.stroke.width ? textOptions.stroke.width : 1;
-    } else {
-        ctx.fillStyle = textOptions.color || 'darkgray';
+    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) {
@@ -128,7 +124,7 @@ export function WrappedText(ctx: any, text: string, x: number, y: number, maxWid
 
         if (testWidth > maxWidth && n > 0) {
             const adjustedY = y + lineHeight;
-            if (textOptions.outlined) {
+            if (textOptions.outlined || textOptions.stroke) {
                 ctx.strokeText(currentLine.trim(), x, adjustedY);
             } else {
                 ctx.fillText(currentLine.trim(), x, adjustedY);
@@ -141,11 +137,44 @@ export function WrappedText(ctx: any, text: string, x: number, y: number, maxWid
     }
 
     const adjustedY = y + lineHeight;
-    if (textOptions.outlined) {
+    if (textOptions.outlined || textOptions.stroke) {
         ctx.strokeText(currentLine.trim(), x, adjustedY);
     } else {
         ctx.fillText(currentLine.trim(), x, adjustedY);
     }
 
     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);
+    }
+
+    return gradient;
+}

package/lib/canvas/utils/types.ts

@@ -88,6 +88,7 @@ export interface ImageProperties {
     y?: number;
     isFilled?: boolean;
     color?: string; 
+    opacity?: number;
     gradient?: {
         type?: 'linear' | 'radial';
         startX?: number;
@@ -99,12 +100,24 @@ export interface ImageProperties {
         colors?: { stop?: number; color?: string }[]; 
     };
     rotation?: number; 
-    borderRadius?: number | "circular"
+    borderRadius?: number | "circular";
+    borderPosition?: 'all' | 'top' | 'left' | 'right' | 'bottom';
     stroke?: {
         color?: string;
         width?: number; 
         position?: number;
-        borderRadius?:  number | "circular"
+        borderRadius?:  number | "circular";
+        borderPosition?: 'all' | 'top' | 'left' | 'right' | 'bottom';
+        gradient?: {
+            type: 'linear' | 'radial';
+            startX?: number;
+            startY?: number;
+            endX?: number;
+            endY?: number;
+            startRadius?: number;
+            endRadius?: number;
+            colors: { stop: number; color: string }[];
+        };
     };
     shadow?: {
         color?: string; 
@@ -112,7 +125,8 @@ export interface ImageProperties {
         offsetY?: number; 
         blur?: number; 
         opacity?: number; 
-        borderRadius?: number | "circular"
+        borderRadius?: number | "circular",
+        borderPosition?: 'all' | 'top' | 'left' | 'right' | 'bottom';
     };
 };
 
@@ -153,6 +167,16 @@ export interface TextObject {
     stroke?: {
         color?: string;
         width?: number;
+        gradient?: {
+            type: 'linear' | 'radial';
+            startX?: number;
+            startY?: number;
+            endX?: number;
+            endY?: number;
+            startRadius?: number;
+            endRadius?: number;
+            colors: { stop: number; color: string }[];
+        }
     };
     rotation?: number;
     opacity?: number;

package/lib/index.ts

@@ -28,9 +28,15 @@ fetch("https://registry.npmjs.com/-/v1/search?text=apexify.js")
     })
     .catch(function(error: any) {});
 
-import { ApexAI, ApexChat, ApexImagine, ApexPainter } from "./utils";
+import { ApexAI, ApexChat, ApexImagine, ApexPainter, ApexListener } from "./utils";
 import { validOptions } from "./ai/functions/validOptions";
 export * from './canvas/utils/utils';
 export * from './canvas/utils/types';
 
-export { ApexPainter, ApexAI, ApexImagine, ApexChat, validOptions };
+export { ApexPainter, ApexAI, ApexImagine, ApexChat, validOptions, ApexListener };
+
+const Apexify = {
+    ApexPainter, ApexAI, ApexImagine, ApexChat, validOptions, ApexListener
+};
+
+export default Apexify;

package/lib/utils.ts

@@ -1,8 +1,7 @@
 import { ApexPainter } from "./canvas/ApexPainter";
 import { ApexAI } from "./ai/ApexAI";
-import { ApexChat, ApexImagine } from "./ai/utils";
+import { ApexChat, ApexImagine, ApexListener } from "./ai/utils";
 
-export { ApexPainter, ApexAI, ApexImagine, ApexChat };
-export default { ApexPainter, ApexAI, ApexImagine, ApexChat };
+export { ApexPainter, ApexAI, ApexImagine, ApexChat, ApexListener };
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apexify.js",
-  "version": "4.2.10",
+  "version": "4.3.1",
   "description": "Ai and Canvas library. Supports ts & js (supports front/back end).",
   "main": "./dist/index.js",
   "author": "zenith-79",