apexify.js 4.5.54 → 4.5.56

package/lib/canvas/utils/Image/imageProperties.ts

@@ -0,0 +1,631 @@
+import { SKRSContext2D } from "@napi-rs/canvas";
+import { ImageProperties } from "../utils";
+
+/**
+ * Applies shadow to the canvas context.
+ * @param ctx The canvas rendering context.
+ * @param shadow The shadow properties.
+ * @param x The x-coordinate of the shape.
+ * @param y The y-coordinate of the shape.
+ * @param width The width of the shape.
+ * @param height The height of the shape.
+ */
+export function applyShadow(
+    ctx: SKRSContext2D,
+    shadow: ImageProperties['shadow'],
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ): void {
+    ctx.save();
+  
+    if (shadow) {
+      ctx.globalAlpha = shadow.opacity ?? 1;
+      ctx.filter = `blur(${shadow.blur ?? 0}px)`;
+  
+      const shadowX = x + (shadow.offsetX ?? 0);
+      const shadowY = y + (shadow.offsetY ?? 0);
+  
+      objectRadius(
+        ctx,
+        shadowX,
+        shadowY,
+        width,
+        height,
+        shadow.borderRadius ?? 2,
+        shadow.borderPosition
+      );
+  
+      ctx.fillStyle = shadow.color || "transparent";
+      ctx.fill();
+    }
+  
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
+    ctx.restore();
+  }
+  
+/**
+ * Applies zoom (scaling) to the canvas context around a specified point.
+ * @param ctx The canvas rendering context.
+ * @param zoom An object with scale (zoom factor) and the x/y coordinates that act as the zoom origin.
+ */
+export function applyZoom(
+  ctx: SKRSContext2D,
+  zoom?: { scale?: number; x?: number; y?: number }
+): void {
+  if (!zoom) return;
+  const scale = zoom.scale ?? 1;
+  const zoomX = zoom.x ?? 0;
+  const zoomY = zoom.y ?? 0;
+  
+  // Translate to the zoom origin, apply the scaling, then translate back.
+  ctx.translate(zoomX, zoomY);
+  ctx.scale(scale, scale);
+  ctx.translate(-zoomX, -zoomY);
+}
+
+  /**
+   * Applies stroke to the canvas context with support for selective side strokes.
+   * If stroke.borderPosition is "all", it uses the full rounded path.
+   * Otherwise, it constructs individual segments for the specified sides.
+   *
+   * @param ctx The canvas rendering context.
+   * @param stroke The stroke properties.
+   * @param x The x-coordinate of the shape.
+   * @param y The y-coordinate of the shape.
+   * @param width The width of the shape.
+   * @param height The height of the shape.
+   */
+  export function applyStroke(
+    ctx: SKRSContext2D,
+    stroke: ImageProperties['stroke'],
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ): void {
+    if (!stroke) return;
+    
+    ctx.save();
+    
+    // Set stroke style: use gradient if provided, otherwise solid color.
+    ctx.strokeStyle = stroke.gradient
+      ? createGradient(ctx, stroke.gradient, x, y, x + width, y + height)
+      : stroke.color || "transparent";
+    
+    // Set the stroke width.
+    ctx.lineWidth = stroke.width ?? 0;
+    
+    // Calculate offset: stroke.position plus half the stroke width ensures the stroke is drawn outside.
+    const positionOffset = stroke.position ?? 0;
+    const halfStroke = ctx.lineWidth / 2;
+    const totalOffset = positionOffset + halfStroke;
+    
+    // Adjust the drawing rectangle to accommodate the stroke.
+    const adjustedX = x - totalOffset;
+    const adjustedY = y - totalOffset;
+    const adjustedWidth = width + totalOffset * 2;
+    const adjustedHeight = height + totalOffset * 2;
+    
+    // If the border position is "all" (or not provided), draw a complete rounded rectangle.
+    if (!stroke.borderPosition || stroke.borderPosition.trim().toLowerCase() === "all") {
+      objectRadius(
+        ctx,
+        adjustedX,
+        adjustedY,
+        adjustedWidth,
+        adjustedHeight,
+        stroke.borderRadius ?? 2,
+        "all"
+      );
+      ctx.stroke();
+      ctx.restore();
+      return;
+    }
+    
+    // Otherwise, draw only the segments corresponding to the specified sides/corners.
+    const bp = stroke.borderPosition.toLowerCase();
+    const positions = bp.split(',').map(s => s.trim());
+    // For convenience, if a simple keyword (like "top") is used, it indicates the entire edge.
+    // We'll allow individual corners as well.
+    
+    ctx.beginPath();
+    
+    // --- Top Edge ---
+    if (
+      positions.includes("top") ||
+      positions.includes("top-left") ||
+      positions.includes("top-right")
+    ) {
+      // Determine rounding for the top-left and top-right corners.
+      const tl = positions.includes("top-left") || positions.includes("top")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      const tr = positions.includes("top-right") || positions.includes("top")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      ctx.moveTo(adjustedX + tl, adjustedY);
+      ctx.lineTo(adjustedX + adjustedWidth - tr, adjustedY);
+      if (tr > 0) {
+        ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY, adjustedX + adjustedWidth, adjustedY + tr);
+      }
+    }
+    
+    // --- Right Edge ---
+    if (
+      positions.includes("right") ||
+      positions.includes("top-right") ||
+      positions.includes("bottom-right")
+    ) {
+      const tr = positions.includes("top-right") || positions.includes("right")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      const br = positions.includes("bottom-right") || positions.includes("right")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      ctx.moveTo(adjustedX + adjustedWidth, adjustedY + tr);
+      ctx.lineTo(adjustedX + adjustedWidth, adjustedY + adjustedHeight - br);
+      if (br > 0) {
+        ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY + adjustedHeight, adjustedX + adjustedWidth - br, adjustedY + adjustedHeight);
+      }
+    }
+    
+    // --- Bottom Edge ---
+    if (
+      positions.includes("bottom") ||
+      positions.includes("bottom-left") ||
+      positions.includes("bottom-right")
+    ) {
+      const bl = positions.includes("bottom-left") || positions.includes("bottom")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      const br = positions.includes("bottom-right") || positions.includes("bottom")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      ctx.moveTo(adjustedX + bl, adjustedY + adjustedHeight);
+      ctx.lineTo(adjustedX + adjustedWidth - br, adjustedY + adjustedHeight);
+      if (br > 0) {
+        ctx.quadraticCurveTo(adjustedX + adjustedWidth, adjustedY + adjustedHeight, adjustedX + adjustedWidth, adjustedY + adjustedHeight - br);
+      }
+    }
+    
+    // --- Left Edge ---
+    if (
+      positions.includes("left") ||
+      positions.includes("top-left") ||
+      positions.includes("bottom-left")
+    ) {
+      const tl = positions.includes("top-left") || positions.includes("left")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      const bl = positions.includes("bottom-left") || positions.includes("left")
+        ? (stroke.borderRadius ? +stroke.borderRadius : 0)
+        : 0;
+      ctx.moveTo(adjustedX, adjustedY + tl);
+      ctx.lineTo(adjustedX, adjustedY + adjustedHeight - bl);
+      if (bl > 0) {
+        ctx.quadraticCurveTo(adjustedX, adjustedY + adjustedHeight, adjustedX + bl, adjustedY + adjustedHeight);
+      }
+    }
+    
+    ctx.stroke();
+    ctx.restore();
+  }
+  
+/**
+ * Draws a shape on the canvas context.
+ * @param ctx The canvas rendering context.
+ * @param shapeSettings The settings for the shape.
+ */
+export function drawShape(ctx: any, shapeSettings: any) {
+  const { source, x, y, width, height, rotation, borderRadius, borderPosition, stroke, shadow, isFilled, color, gradient } = shapeSettings;
+
+  const shapeName = source.toLowerCase();
+
+  switch (shapeName) {
+      case 'circle':
+          ctx.save();
+          applyShadow(ctx, shadow, x, y, width, height);
+          applyRotation(ctx, rotation, x, y, width, height);
+          ctx.beginPath();
+          ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
+          break;
+      case 'square':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          break;
+      case 'triangle':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          ctx.moveTo(x, y + height);
+          ctx.lineTo(x + width / 2, y);
+          ctx.lineTo(x + width, y + height);
+          ctx.closePath();
+          break;
+      case 'pentagon':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          for (let i = 0; i < 5; i++) {
+              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 5),
+                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 5));
+          }
+          ctx.closePath();
+          break;
+      case 'hexagon':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          for (let i = 0; i < 6; i++) {
+              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 6),
+                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 6));
+          }
+          ctx.closePath();
+          break;
+      case 'heptagon':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          for (let i = 0; i < 7; i++) {
+              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 7),
+                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 7));
+          }
+          ctx.closePath();
+          break;
+      case 'octagon':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          for (let i = 0; i < 8; i++) {
+              ctx.lineTo(x + width / 2 + width / 2 * Math.sin(i * 2 * Math.PI / 8),
+                         y + height / 2 - height / 2 * Math.cos(i * 2 * Math.PI / 8));
+          }
+          ctx.closePath();
+      case 'star':
+          ctx.save();
+          applyRotation(ctx, rotation, x, y, width, height);
+          applyShadow(ctx, shadow, x, y, width, height);
+          ctx.beginPath();
+          const numPoints = 5;
+          const outerRadius = Math.min(width, height) / 2;
+          const innerRadius = outerRadius / 2;
+          for (let i = 0; i < numPoints * 2; i++) {
+              const radius = i % 2 === 0 ? outerRadius : innerRadius;
+              const angle = Math.PI / numPoints * i;
+              ctx.lineTo(x + width / 2 + radius * Math.sin(angle),
+                         y + height / 2 - radius * Math.cos(angle));
+          }
+          ctx.closePath();
+          break;
+        case 'oval':
+            ctx.save();
+            applyRotation(ctx, rotation, x, y, width, height);
+            applyShadow(ctx, shadow, x, y, width, height);
+        
+            ctx.beginPath();
+            ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
+            ctx.closePath();
+            if (isFilled) {
+                ctx.fillStyle = color;
+                ctx.fill();
+            } else {
+                applyStroke(ctx, stroke, x, y, width, height);
+            }
+            ctx.restore();
+            break;
+          default:
+          throw new Error(`Unsupported shape: ${shapeName}`);
+  }
+  if (isFilled) {
+    if (borderRadius) {
+        objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
+        if (gradient) {
+            const gradientFill = createGradient(
+                ctx,
+                gradient,
+                x,
+                y, 
+                x + width, 
+                y + height,
+            );
+            ctx.fillStyle = gradientFill;
+        } else {
+            ctx.fillStyle = color || "transparent";
+        }
+        ctx.fill();
+    } else {
+      if (gradient) {
+        const gradientFill = createGradient(
+            ctx,
+            gradient,
+            x,
+            y,
+            x + width,
+            y + height,
+        );
+        ctx.fillStyle = gradientFill;
+    } else {
+        ctx.fillStyle = color || "transparent";
+    }
+            if (shapeName === 'square') {
+            ctx.fillRect(x, y, width, height);
+        } else if (shapeName === 'circle') {
+            ctx.fill();
+        } else {
+            ctx.fill()
+        }
+    }
+    applyStroke(ctx, stroke, x, y, width, height);
+} else {
+    if (gradient) {
+        const gradientFill = createGradient(
+            ctx,
+            gradient,
+            x, 
+            y,
+            x + width, 
+            y + height,
+        );
+        ctx.fillStyle = gradientFill;
+    }
+    applyStroke(ctx, stroke, x, y, width, height);
+}
+
+    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.");
+    }
+
+    if (gradientOptions.type === "linear") {
+        if (
+            typeof startX !== "number" ||
+            typeof startY !== "number" ||
+            typeof endX !== "number" ||
+            typeof endY !== "number"
+        ) {
+            throw new Error("Invalid gradient options for linear gradient. Numeric values are required for startX, startY, endX, and endY.");
+        }
+        const gradient = ctx.createLinearGradient(startX, startY, endX, endY);
+
+        for (const colorStop of gradientOptions.colors) {
+            if (typeof colorStop.stop !== "number" || typeof colorStop.color !== "string") {
+                throw new Error("Invalid color stop. Each color stop should have a numeric stop value and a color string.");
+            }
+            gradient.addColorStop(colorStop.stop, colorStop.color);
+        }
+
+        return gradient;
+
+    } else if (gradientOptions.type === "radial") {
+        if (
+            typeof gradientOptions.startX !== "number" ||
+            typeof gradientOptions.startY !== "number" ||
+            typeof gradientOptions.startRadius !== "number" ||
+            typeof gradientOptions.endX !== "number" ||
+            typeof gradientOptions.endY !== "number" ||
+            typeof gradientOptions.endRadius !== "number"
+        ) {
+            throw new Error("Invalid gradient options for radial gradient. Numeric values are required for startX, startY, startRadius, endX, endY, and endRadius.");
+        }
+        const gradient = ctx.createRadialGradient(
+            gradientOptions.startX,
+            gradientOptions.startY,
+            gradientOptions.startRadius,
+            gradientOptions.endX,
+            gradientOptions.endY,
+            gradientOptions.endRadius
+        );
+
+        for (const colorStop of gradientOptions.colors) {
+            if (typeof colorStop.stop !== "number" || typeof colorStop.color !== "string") {
+                throw new Error("Invalid color stop. Each color stop should have a numeric stop value and a color string.");
+            }
+            gradient.addColorStop(colorStop.stop, colorStop.color);
+        }
+
+        return gradient;
+
+    } else {
+        throw new Error('Unsupported gradient type. Use "linear" or "radial".');
+    }
+}
+
+
+/**
+ * Applies rotation to the canvas context.
+ * @param ctx The canvas rendering context.
+ * @param rotation The rotation angle in degrees.
+ * @param x The x-coordinate of the center of rotation.
+ * @param y The y-coordinate of the center of rotation.
+ * @param width The width of the shape.
+ * @param height The height of the shape.
+ */
+export function applyRotation(
+    ctx: SKRSContext2D,
+    rotation: number,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ): void {
+    // Check is not really necessary since 0 is valid.
+    const rotationX = x + width / 2;
+    const rotationY = y + height / 2;
+    ctx.translate(rotationX, rotationY);
+    ctx.rotate((rotation * Math.PI) / 180);
+    ctx.translate(-rotationX, -rotationY);
+  }
+  
+
+/**
+ * Applies border radius to the canvas context.
+ * @param ctx The canvas rendering context.
+ * @param image The image properties containing the border radius.
+ * @param x The x-coordinate of the shape.
+ * @param y The y-coordinate of the shape.
+ * @param width The width of the shape.
+ * @param height The height of the shape.
+ * @param borderRadius The border radius value.
+* @param borderPosition The border radius position to be applied on.
+ */
+export function imageRadius(ctx: any, image: any, x: number, y: number, width: number, height: number, borderRadius: any, borderPosition: string = 'all'): void {
+    ctx.save();
+    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 {
+      ctx.moveTo(x + borderRadius, y);
+      ctx.lineTo(x + width - borderRadius, y);
+      ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
+      ctx.lineTo(x + width, y + height - borderRadius);
+      ctx.quadraticCurveTo(
+        x + width,
+        y + height,
+        x + width - borderRadius,
+        y + height,
+      );
+      ctx.lineTo(x + borderRadius, y + height);
+      ctx.quadraticCurveTo(x, y + height, x, y + height - borderRadius);
+      ctx.lineTo(x, y + borderRadius);
+      ctx.quadraticCurveTo(x, y, x + borderRadius, y);
+    }
+
+    ctx.closePath();
+    ctx.clip();
+    ctx.drawImage(image, x, y, width, height);
+    ctx.restore();
+}
+
+
+/**
+ * Creates a rounded rectangle (or circular) path on the canvas context.
+ * 
+ * @param ctx The canvas rendering context.
+ * @param x The x-coordinate of the rectangle.
+ * @param y The y-coordinate of the rectangle.
+ * @param width The width of the rectangle.
+ * @param height The height of the rectangle.
+ * @param borderRadius The radius for rounding. Use a number (or string "circular" for a circle).
+ * @param borderPosition Which sides/corners to round. Valid values include:
+ *   - "all" (default)
+ *   - "top", "bottom", "left", "right"
+ *   - "top-left", "top-right", "bottom-left", "bottom-right"
+ *   - Or a comma-separated list, e.g. "top-left, bottom-right" or "top, left, bottom"
+ */
+export function objectRadius(
+    ctx: SKRSContext2D,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    borderRadius: number | "circular" = 0.1,
+    borderPosition: string = 'all'
+  ): void {
+    if (borderRadius === "circular") {
+      // Draw a circular path based on the smallest dimension.
+      const circleRadius = Math.min(width, height) / 2;
+      ctx.beginPath();
+      ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
+      ctx.closePath();
+    } else if (borderRadius) {
+      // Determine which corners to round.
+      let roundTopLeft = false;
+      let roundTopRight = false;
+      let roundBottomRight = false;
+      let roundBottomLeft = false;
+      
+      const bp = borderPosition.trim().toLowerCase();
+  
+      // If a simple keyword is provided, handle those cases:
+      if (bp === 'all') {
+        roundTopLeft = roundTopRight = roundBottomRight = roundBottomLeft = true;
+      } else if (bp === 'top') {
+        roundTopLeft = roundTopRight = true;
+      } else if (bp === 'bottom') {
+        roundBottomLeft = roundBottomRight = true;
+      } else if (bp === 'left') {
+        roundTopLeft = roundBottomLeft = true;
+      } else if (bp === 'right') {
+        roundTopRight = roundBottomRight = true;
+      } else if (bp === 'top-left') {
+        roundTopLeft = true;
+      } else if (bp === 'top-right') {
+        roundTopRight = true;
+      } else if (bp === 'bottom-left') {
+        roundBottomLeft = true;
+      } else if (bp === 'bottom-right') {
+        roundBottomRight = true;
+      } else {
+        // For a comma-separated list of values.
+        const positions = bp.split(',').map(s => s.trim());
+        roundTopLeft = positions.includes('top-left') || (positions.includes('top') && positions.includes('left'));
+        roundTopRight = positions.includes('top-right') || (positions.includes('top') && positions.includes('right'));
+        roundBottomRight = positions.includes('bottom-right') || (positions.includes('bottom') && positions.includes('right'));
+        roundBottomLeft = positions.includes('bottom-left') || (positions.includes('bottom') && positions.includes('left'));
+      }
+  
+      // Determine the radius for each corner.
+      const tl = roundTopLeft ? +borderRadius : 0;
+      const tr = roundTopRight ? +borderRadius : 0;
+      const br = roundBottomRight ? +borderRadius : 0;
+      const bl = roundBottomLeft ? +borderRadius : 0;
+  
+      // Construct the path.
+      ctx.beginPath();
+      // Start at top-left (with offset for rounding)
+      ctx.moveTo(x + tl, y);
+      // Top edge to top-right corner.
+      ctx.lineTo(x + width - tr, y);
+      if (tr > 0) {
+        ctx.quadraticCurveTo(x + width, y, x + width, y + tr);
+      } else {
+        ctx.lineTo(x + width, y);
+      }
+      // Right edge to bottom-right corner.
+      ctx.lineTo(x + width, y + height - br);
+      if (br > 0) {
+        ctx.quadraticCurveTo(x + width, y + height, x + width - br, y + height);
+      } else {
+        ctx.lineTo(x + width, y + height);
+      }
+      // Bottom edge to bottom-left corner.
+      ctx.lineTo(x + bl, y + height);
+      if (bl > 0) {
+        ctx.quadraticCurveTo(x, y + height, x, y + height - bl);
+      } else {
+        ctx.lineTo(x, y + height);
+      }
+      // Left edge back to top-left.
+      ctx.lineTo(x, y + tl);
+      if (tl > 0) {
+        ctx.quadraticCurveTo(x, y, x + tl, y);
+      } else {
+        ctx.lineTo(x, y);
+      }
+      ctx.closePath();
+    } else {
+      // If no borderRadius is provided, simply use a rectangle.
+      ctx.beginPath();
+      ctx.rect(x, y, width, height);
+      ctx.closePath();
+    }
+  }
+  

package/lib/canvas/utils/{textProperties.ts → Texts/textProperties.ts}

@@ -1,4 +1,4 @@
-import { TextObject } from "./types";
+import { TextObject } from "../types";
 
 /**
  * Draws text on the canvas context.