apexify.js 4.8.2 → 4.8.3

package/dist/cjs/canvas/utils/Image/imageProperties.js

@@ -1,590 +0,0 @@
-/**
- * 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, shadow, x, y, width, height) {
-    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);
-        ctx.fillStyle = shadow.gradient
-            ? createGradient(ctx, shadow.gradient, shadowX, shadowY, shadowX + width, shadowY + height)
-            : 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, zoom) {
-    if (!zoom)
-        return;
-    const scale = zoom.scale ?? 1;
-    const zoomX = zoom.x ?? 0;
-    const zoomY = zoom.y ?? 0;
-    ctx.translate(zoomX, zoomY);
-    ctx.scale(scale, scale);
-    ctx.translate(-zoomX, -zoomY);
-}
-/**
- * Applies stroke to the canvas context with support for selective side strokes.
- * Supports optional blur effect on the stroke.
- *
- * @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.
- * @param blur Optional blur effect on the stroke.
- */
-export function applyStroke(ctx, stroke, x, y, width, height, shapeName) {
-    if (!stroke)
-        return;
-    ctx.save();
-    if (stroke.blur && stroke.blur > 0) {
-        ctx.filter = `blur(${stroke.blur}px)`;
-    }
-    ctx.strokeStyle = stroke.gradient
-        ? createGradient(ctx, stroke.gradient, x, y, x + width, y + height)
-        : stroke.color || "transparent";
-    ctx.lineWidth = stroke.width && stroke.width > 0 ? stroke.width : 2;
-    ctx.beginPath();
-    const borderPos = stroke.position || 0;
-    // Adjust the bounding box by borderPos
-    //   - Positive borderPos moves stroke outward
-    //   - Negative borderPos moves stroke inward
-    const offsetX = x - borderPos;
-    const offsetY = y - borderPos;
-    const offsetW = width + 2 * borderPos;
-    const offsetH = height + 2 * borderPos;
-    ctx.beginPath();
-    // For known shapes (circle, star, etc.), re-draw with adjusted bounding box
-    if ([
-        "heart", "arrow", "circle", "star",
-        "pentagon", "hexagon", "heptagon", "octagon",
-        "diamond", "trapezoid", "kite",
-    ].includes(shapeName)) {
-        switch (shapeName) {
-            case "circle":
-                // Circle centered in the new bounding box
-                ctx.arc(offsetX + offsetW / 2, offsetY + offsetH / 2, offsetW / 2, // radius
-                0, Math.PI * 2);
-                break;
-            case "star":
-                drawStar(ctx, offsetX, offsetY, offsetW, offsetH);
-                break;
-            case "arrow":
-                drawArrow(ctx, offsetX, offsetY, offsetW, offsetH);
-                break;
-            case "pentagon":
-            case "hexagon":
-            case "heptagon":
-            case "octagon": {
-                const sides = parseInt(shapeName.replace(/\D/g, ""), 10);
-                drawPolygon(ctx, offsetX, offsetY, offsetW, offsetH, sides);
-                break;
-            }
-            case "diamond":
-                ctx.moveTo(offsetX + offsetW / 2, offsetY);
-                ctx.lineTo(offsetX + offsetW, offsetY + offsetH / 2);
-                ctx.lineTo(offsetX + offsetW / 2, offsetY + offsetH);
-                ctx.lineTo(offsetX, offsetY + offsetH / 2);
-                ctx.closePath();
-                break;
-            case "trapezoid": {
-                const topWidth = offsetW * 0.6;
-                const offsetVal = (offsetW - topWidth) / 2;
-                ctx.moveTo(offsetX + offsetVal, offsetY);
-                ctx.lineTo(offsetX + offsetVal + topWidth, offsetY);
-                ctx.lineTo(offsetX + offsetW, offsetY + offsetH);
-                ctx.lineTo(offsetX, offsetY + offsetH);
-                ctx.closePath();
-                break;
-            }
-            case "heart":
-                drawHeart(ctx, offsetX, offsetY, offsetW, offsetH);
-                break;
-            case "kite":
-                ctx.moveTo(offsetX + offsetW / 2, offsetY);
-                ctx.lineTo(offsetX + offsetW, offsetY + offsetH / 2);
-                ctx.lineTo(offsetX + offsetW / 2, offsetY + offsetH);
-                ctx.lineTo(offsetX, offsetY + offsetH / 2);
-                ctx.closePath();
-                break;
-        }
-    }
-    else {
-        ctx.globalCompositeOperation = "source-atop";
-        objectRadius(ctx, offsetX, offsetY, offsetW, offsetH, stroke.borderRadius || 2, stroke.borderPosition);
-    }
-    ctx.stroke();
-    ctx.filter = "none";
-    ctx.restore();
-}
-export function drawShape(ctx, shapeSettings) {
-    const { source, x, y, width, height, opacity, rotation = 0, borderRadius = 0, borderPosition = 'all', stroke, shadow, isFilled = false, color = "transparent", gradient, filling, } = shapeSettings;
-    const shapeName = source.toLowerCase();
-    ctx.save();
-    applyRotation(ctx, rotation, x, y, width, height);
-    applyShadow(ctx, shadow, x, y, width, height);
-    ctx.beginPath();
-    ctx.globalAlpha = opacity;
-    switch (shapeName) {
-        case 'circle': {
-            ctx.arc(x + width / 2, y + height / 2, width / 2, 0, Math.PI * 2);
-            break;
-        }
-        case 'square': {
-            ctx.rect(x, y, width, height);
-            break;
-        }
-        case 'triangle': {
-            ctx.moveTo(x + width / 2, y);
-            ctx.lineTo(x, y + height);
-            ctx.lineTo(x + width, y + height);
-            ctx.closePath();
-            break;
-        }
-        case 'pentagon':
-        case 'hexagon':
-        case 'heptagon':
-        case 'octagon': {
-            const sides = parseInt(shapeName.replace(/\D/g, ""), 10);
-            drawPolygon(ctx, x, y, width, height, sides);
-            break;
-        }
-        case 'star': {
-            drawStar(ctx, x, y, width, height);
-            break;
-        }
-        case 'kite': {
-            ctx.moveTo(x + width / 2, y);
-            ctx.lineTo(x + width, y + height / 2);
-            ctx.lineTo(x + width / 2, y + height);
-            ctx.lineTo(x, y + height / 2);
-            ctx.closePath();
-            break;
-        }
-        case 'oval': {
-            ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
-            break;
-        }
-        case 'arrow': {
-            drawArrow(ctx, x, y, width, height);
-            break;
-        }
-        case 'heart': {
-            drawHeart(ctx, x, y, width, height);
-            break;
-        }
-        case 'diamond': {
-            ctx.moveTo(x + width / 2, y);
-            ctx.lineTo(x + width, y + height / 2);
-            ctx.lineTo(x + width / 2, y + height);
-            ctx.lineTo(x, y + height / 2);
-            ctx.closePath();
-            break;
-        }
-        case 'trapezoid': {
-            const topWidth = width * 0.6;
-            const offset = (width - topWidth) / 2;
-            ctx.moveTo(x + offset, y);
-            ctx.lineTo(x + offset + topWidth, y);
-            ctx.lineTo(x + width, y + height);
-            ctx.lineTo(x, y + height);
-            ctx.closePath();
-            break;
-        }
-        default: {
-            ctx.restore();
-            throw new Error(`Unsupported shape: ${shapeName}`);
-        }
-    }
-    if (isFilled) {
-        if (borderRadius && shapeName !== 'circle' && shapeName !== 'oval') {
-            objectRadius(ctx, x, y, width, height, borderRadius, borderPosition);
-        }
-        let fillStyle = color;
-        if (gradient) {
-            fillStyle = createGradient(ctx, gradient, x, y, x + width, y + height);
-        }
-        if (filling && filling.percentage <= 100) {
-            ctx.save();
-            const isCustomShape = ["heart", "arrow", "star", "pentagon", "hexagon", "heptagon", "octagon", "diamond", "trapezoid", "kite", "oval", "circle"].includes(shapeName);
-            if (isCustomShape) {
-                ctx.clip();
-            }
-            let fillX = x;
-            let fillY = y;
-            let fillWidth = width;
-            let fillHeight = height;
-            switch (filling.rotation) {
-                case 0:
-                    fillHeight = (filling.percentage / 100) * height;
-                    fillY = y + height - fillHeight;
-                    break;
-                case 180:
-                    fillHeight = (filling.percentage / 100) * height;
-                    break;
-                case 90:
-                    fillWidth = (filling.percentage / 100) * width;
-                    break;
-                case 270:
-                    fillWidth = (filling.percentage / 100) * width;
-                    fillX = x + width - fillWidth;
-                    break;
-                default:
-                    console.warn(`Unsupported filling rotation: ${filling.rotation}, defaulting to 0 (Bottom to Top).`);
-                    fillHeight = (filling.percentage / 100) * height;
-                    fillY = y + height - fillHeight;
-            }
-            ctx.beginPath();
-            ctx.rect(fillX, fillY, fillWidth, fillHeight);
-            ctx.fillStyle = fillStyle;
-            ctx.fill();
-            ctx.restore();
-        }
-        else {
-            ctx.fillStyle = fillStyle;
-            ctx.fill();
-        }
-    }
-    ctx.globalAlpha = 1.0;
-    if (stroke) {
-        if (stroke?.opacity)
-            ctx.globalAlpha = stroke.opacity;
-        applyStroke(ctx, stroke, x, y, width, height, shapeName);
-        ctx.globalAlpha = 1.0;
-    }
-    ctx.restore();
-}
-function drawHeart(ctx, x, y, width, height) {
-    ctx.beginPath();
-    ctx.moveTo(x + width / 2, y + height * 0.9);
-    ctx.bezierCurveTo(x + (width * 35) / 100, y + (height * 60) / 100, x + (width * 10) / 100, y + (height * 55) / 100, x + (width * 10) / 100, y + (height * 33.33) / 100);
-    ctx.bezierCurveTo(x + (width * 10) / 100, y + (height * 10) / 100, x + (width * 50) / 100, y + (height * 5) / 100, x + (width * 50) / 100, y + (height * 33.33) / 100);
-    ctx.bezierCurveTo(x + (width * 50) / 100, y + (height * 5) / 100, x + (width * 90) / 100, y + (height * 10) / 100, x + (width * 90) / 100, y + (height * 33.33) / 100);
-    ctx.bezierCurveTo(x + (width * 90) / 100, y + (height * 55) / 100, x + (width * 65) / 100, y + (height * 60) / 100, x + width / 2, y + height * 0.9);
-    ctx.closePath();
-}
-/** Draws a polygon with a given number of sides */
-function drawPolygon(ctx, x, y, width, height, sides) {
-    const cx = x + width / 2;
-    const cy = y + height / 2;
-    const radius = Math.min(width, height) / 2;
-    ctx.moveTo(cx + radius, cy);
-    for (let i = 1; i <= sides; i++) {
-        const angle = (Math.PI * 2 * i) / sides;
-        ctx.lineTo(cx + radius * Math.cos(angle), cy + radius * Math.sin(angle));
-    }
-    ctx.closePath();
-}
-function drawArrow(ctx, x, y, width, height) {
-    const shaftWidth = width * 0.25;
-    const headWidth = width * 0.5;
-    const headHeight = height * 0.6;
-    ctx.beginPath();
-    ctx.moveTo(x, y + height / 2 - shaftWidth / 2);
-    ctx.lineTo(x + width - headWidth, y + height / 2 - shaftWidth / 2);
-    ctx.lineTo(x + width - headWidth, y);
-    ctx.lineTo(x + width, y + height / 2);
-    ctx.lineTo(x + width - headWidth, y + height);
-    ctx.lineTo(x + width - headWidth, y + height / 2 + shaftWidth / 2);
-    ctx.lineTo(x, y + height / 2 + shaftWidth / 2);
-    ctx.closePath();
-}
-function drawStar(ctx, x, y, width, height) {
-    const cx = x + width / 2;
-    const cy = y + height / 2;
-    const size = Math.min(width, height);
-    const outerRadius = size / 2;
-    const innerRadius = outerRadius * 0.5;
-    const rotationOffset = -Math.PI / 2;
-    ctx.beginPath();
-    for (let i = 0; i < 5; i++) {
-        let angle = (i * (Math.PI * 2)) / 5 + rotationOffset;
-        ctx.lineTo(cx + outerRadius * Math.cos(angle), cy + outerRadius * Math.sin(angle));
-        angle += Math.PI / 5;
-        ctx.lineTo(cx + innerRadius * Math.cos(angle), cy + innerRadius * Math.sin(angle));
-    }
-    ctx.closePath();
-}
-export function createGradient(ctx, gradientOptions, startX, startY, endX, endY) {
-    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.");
-        }
-        if (typeof gradientOptions.rotate === "number") {
-            const centerX = (startX + endX) / 2;
-            const centerY = (startY + endY) / 2;
-            const dx = endX - startX;
-            const dy = endY - startY;
-            const length = Math.sqrt(dx * dx + dy * dy);
-            const angleRad = (gradientOptions.rotate * Math.PI) / 180;
-            startX = centerX - (length / 2) * Math.cos(angleRad);
-            startY = centerY - (length / 2) * Math.sin(angleRad);
-            endX = centerX + (length / 2) * Math.cos(angleRad);
-            endY = centerY + (length / 2) * Math.sin(angleRad);
-        }
-        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, rotation, x, y, width, height) {
-    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 with selective corner support.
- *
- * @param ctx The canvas rendering context.
- * @param image The image to be drawn (will be drawn after clipping).
- * @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 (number or "circular").
- * @param borderPosition The sides or corners to round.
- *   Valid values include:
- *     - "all"
- *     - "top", "bottom", "left", "right"
- *     - "top-left", "top-right", "bottom-left", "bottom-right"
- *     - Or a comma‑separated list (e.g., "top, left, bottom")
- */
-export function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPosition = "all") {
-    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);
-        ctx.clip();
-    }
-    else if (typeof borderRadius === "number" && borderRadius > 0) {
-        const br = 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);
-        ctx.closePath();
-        ctx.clip();
-    }
-    else {
-        ctx.rect(x, y, width, height);
-        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, x, y, width, height, borderRadius = 0.1, borderPosition = "all") {
-    ctx.beginPath();
-    if (borderRadius === "circular") {
-        // Draw a circular shape
-        const circleRadius = Math.min(width, height) / 2;
-        ctx.arc(x + width / 2, y + height / 2, circleRadius, 0, 2 * Math.PI);
-    }
-    else if (borderRadius > 0) {
-        const br = Math.min(borderRadius, width / 2, height / 2);
-        const selectedPositions = new Set(borderPosition.toLowerCase().split(",").map((s) => s.trim()));
-        // **Correct Grouping**
-        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");
-        // **Assign correct radii**
-        const tl = roundTopLeft ? br : 0;
-        const tr = roundTopRight ? br : 0;
-        const brR = roundBottomRight ? br : 0;
-        const bl = roundBottomLeft ? br : 0;
-        // **Draw rounded rectangle**
-        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);
-    }
-    else {
-        // Default: Draw normal rectangle
-        ctx.rect(x, y, width, height);
-    }
-    ctx.closePath();
-}
-/**
-* Performs bilinear interpolation on four corners.
-* @param corners The four corners (topLeft, topRight, bottomRight, bottomLeft).
-* @param t Horizontal interpolation factor (0 to 1).
-* @param u Vertical interpolation factor (0 to 1).
-* @returns The interpolated point.
-*/
-function bilinearInterpolate(corners, t, u) {
-    const top = {
-        x: corners[0].x * (1 - t) + corners[1].x * t,
-        y: corners[0].y * (1 - t) + corners[1].y * t,
-    };
-    const bottom = {
-        x: corners[3].x * (1 - t) + corners[2].x * t,
-        y: corners[3].y * (1 - t) + corners[2].y * t,
-    };
-    return {
-        x: top.x * (1 - u) + bottom.x * u,
-        y: top.y * (1 - u) + bottom.y * u,
-    };
-}
-/**
- * Applies a perspective warp to the given image by subdividing the source rectangle
- * and drawing each cell with an affine transform approximating the local perspective.
- *
- * @param ctx The canvas rendering context.
- * @param image The source image.
- * @param x The x-coordinate where the image is drawn.
- * @param y The y-coordinate where the image is drawn.
- * @param width The width of the region to draw.
- * @param height The height of the region to draw.
- * @param perspective An object containing four destination corners:
- *                    { topLeft, topRight, bottomRight, bottomLeft }.
- * @param gridCols Number of columns to subdivide (default: 10).
- * @param gridRows Number of rows to subdivide (default: 10).
- */
-export async function applyPerspective(ctx, image, x, y, width, height, perspective, gridCols = 10, gridRows = 10) {
-    const cellWidth = width / gridCols;
-    const cellHeight = height / gridRows;
-    for (let row = 0; row < gridRows; row++) {
-        for (let col = 0; col < gridCols; col++) {
-            const sx = x + col * cellWidth;
-            const sy = y + row * cellHeight;
-            const t0 = col / gridCols;
-            const t1 = (col + 1) / gridCols;
-            const u0 = row / gridRows;
-            const u1 = (row + 1) / gridRows;
-            const destTL = bilinearInterpolate([perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft], t0, u0);
-            const destTR = bilinearInterpolate([perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft], t1, u0);
-            const destBL = bilinearInterpolate([perspective.topLeft, perspective.topRight, perspective.bottomRight, perspective.bottomLeft], t0, u1);
-            const a = (destTR.x - destTL.x) / cellWidth;
-            const b = (destTR.y - destTL.y) / cellWidth;
-            const c = (destBL.x - destTL.x) / cellHeight;
-            const d = (destBL.y - destTL.y) / cellHeight;
-            const e = destTL.x;
-            const f = destTL.y;
-            ctx.save();
-            ctx.setTransform(a, b, c, d, e, f);
-            ctx.drawImage(image, sx, sy, cellWidth, cellHeight, 0, 0, cellWidth, cellHeight);
-            ctx.restore();
-        }
-    }
-}

package/dist/cjs/canvas/utils/Texts/textProperties.d.ts

@@ -1,16 +0,0 @@
-import { SKRSContext2D } from '@napi-rs/canvas';
-import { TextObject } from '../types.js';
-/**
- * The main function that draws text with optional wrapping.
- * @param ctx         CanvasRenderingContext2D
- * @param textOptions TextObject
- */
-export declare function drawText(ctx: SKRSContext2D, textOptions: TextObject): void;
-/**
- * Handles word-based wrapping. Then draws each line with stroke, fill, gradient, etc.
- */
-export declare function WrappedText(ctx: SKRSContext2D, text: string, startX: number, startY: number, maxWidth: number, options: TextObject): void;
-/**
- * Creates a linear or radial gradient for fill/stroke.
- */
-export declare function createGradient(ctx: SKRSContext2D, gradientOptions: any, startX: number, startY: number, endX: number, endY: number): CanvasGradient;