apexify.js 4.9.26 → 4.9.28

package/dist/esm/Canvas/utils/Image/imageProperties.js

@@ -1,602 +1,271 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildPath = buildPath;
+exports.applyRotation = applyRotation;
+exports.createGradientFill = createGradientFill;
+exports.fitInto = fitInto;
+exports.loadImageCached = loadImageCached;
 exports.applyShadow = applyShadow;
-exports.applyZoom = applyZoom;
 exports.applyStroke = applyStroke;
-exports.drawShape = drawShape;
-exports.createGradient = createGradient;
-exports.applyRotation = applyRotation;
-exports.imageRadius = imageRadius;
-exports.objectRadius = objectRadius;
-exports.applyPerspective = applyPerspective;
-/**
- * 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.
- */
-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();
+exports.drawBoxBackground = drawBoxBackground;
+function buildPath(ctx, x, y, w, h, radius = 0, borderPos = "all") {
+    ctx.beginPath();
+    if (radius === "circular") {
+        const r = Math.min(w, h) / 2;
+        ctx.arc(x + w / 2, y + h / 2, r, 0, Math.PI * 2);
+        ctx.closePath();
+        return;
     }
-    ctx.filter = "none";
-    ctx.globalAlpha = 1;
-    ctx.restore();
+    if (!radius || radius <= 0) {
+        ctx.rect(x, y, w, h);
+        ctx.closePath();
+        return;
+    }
+    const br = Math.min(radius, w / 2, h / 2);
+    const sel = new Set(borderPos.toLowerCase().split(",").map(s => s.trim()));
+    const has = (name) => sel.has("all") || sel.has(name) ||
+        (name === "top-left" && (sel.has("top") || sel.has("left"))) ||
+        (name === "top-right" && (sel.has("top") || sel.has("right"))) ||
+        (name === "bottom-right" && (sel.has("bottom") || sel.has("right"))) ||
+        (name === "bottom-left" && (sel.has("bottom") || sel.has("left")));
+    const tl = has("top-left") ? br : 0;
+    const tr = has("top-right") ? br : 0;
+    const brR = has("bottom-right") ? br : 0;
+    const bl = has("bottom-left") ? br : 0;
+    ctx.moveTo(x + tl, y);
+    ctx.lineTo(x + w - tr, y);
+    if (tr)
+        ctx.arcTo(x + w, y, x + w, y + tr, tr);
+    ctx.lineTo(x + w, y + h - brR);
+    if (brR)
+        ctx.arcTo(x + w, y + h, x + w - brR, y + h, brR);
+    ctx.lineTo(x + bl, y + h);
+    if (bl)
+        ctx.arcTo(x, y + h, x, y + h - bl, bl);
+    ctx.lineTo(x, y + tl);
+    if (tl)
+        ctx.arcTo(x, y, x + tl, y, tl);
+    ctx.closePath();
 }
-/**
- * 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.
- */
-function applyZoom(ctx, zoom) {
-    if (!zoom)
+function applyRotation(ctx, deg, x, y, w, h) {
+    if (!deg)
         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);
+    const cx = x + w / 2, cy = y + h / 2;
+    ctx.translate(cx, cy);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.translate(-cx, -cy);
+}
+function rotatePoint(x, y, px, py, deg = 0) {
+    if (!deg)
+        return [x, y];
+    const a = (deg * Math.PI) / 180;
+    const dx = x - px, dy = y - py;
+    return [px + dx * Math.cos(a) - dy * Math.sin(a),
+        py + dx * Math.sin(a) + dy * Math.cos(a)];
 }
 /**
- * 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.
+ * Build a gradient in **rect-local coordinates**:
+ * - Defaults for coords use rect {w,h}
+ * - Rotation pivot defaults to rect center
+ * - Offsets are applied by adding rect.x/rect.y to all points
  */
-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);
+function createGradientFill(ctx, g, rect) {
+    const { x, y, w, h } = rect;
+    if (g.type === "linear") {
+        const { startX = 0, startY = 0, endX = w, endY = 0, rotate = 0, pivotX = w / 2, pivotY = h / 2, colors } = g;
+        const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+        const [ex, ey] = rotatePoint(endX, endY, pivotX, pivotY, rotate);
+        const grad = ctx.createLinearGradient(x + sx, y + sy, x + ex, y + ey);
+        colors.forEach(cs => grad.addColorStop(cs.stop, cs.color));
+        return grad;
     }
-    ctx.stroke();
-    ctx.filter = "none";
-    ctx.restore();
+    // radial
+    const { startX = w / 2, startY = h / 2, startRadius = 0, endX = w / 2, endY = h / 2, endRadius = Math.max(w, h) / 2, rotate = 0, pivotX = w / 2, pivotY = h / 2, colors } = g;
+    const [sx, sy] = rotatePoint(startX, startY, pivotX, pivotY, rotate);
+    const [ex, ey] = rotatePoint(endX, endY, pivotX, pivotY, rotate);
+    const grad = ctx.createRadialGradient(x + sx, y + sy, startRadius, x + ex, y + ey, endRadius);
+    colors.forEach(cs => grad.addColorStop(cs.stop, cs.color));
+    return grad;
 }
-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);
+function fitInto(boxX, boxY, boxW, boxH, imgW, imgH, fit = "fill", align = "center") {
+    let dx = boxX, dy = boxY, dw = boxW, dh = boxH, sx = 0, sy = 0, sw = imgW, sh = imgH;
+    if (fit === "fill") {
+        return { dx, dy, dw, dh, sx, sy, sw, sh };
+    }
+    const s = fit === "contain"
+        ? Math.min(boxW / imgW, boxH / imgH)
+        : Math.max(boxW / imgW, boxH / imgH);
+    dw = imgW * s;
+    dh = imgH * s;
+    const cx = boxX + (boxW - dw) / 2;
+    const cy = boxY + (boxH - dh) / 2;
+    switch (align) {
+        case "top-left":
+            dx = boxX;
+            dy = boxY;
             break;
-        }
-        case 'triangle': {
-            ctx.moveTo(x + width / 2, y);
-            ctx.lineTo(x, y + height);
-            ctx.lineTo(x + width, y + height);
-            ctx.closePath();
+        case "top":
+            dx = cx;
+            dy = boxY;
             break;
-        }
-        case 'pentagon':
-        case 'hexagon':
-        case 'heptagon':
-        case 'octagon': {
-            const sides = parseInt(shapeName.replace(/\D/g, ""), 10);
-            drawPolygon(ctx, x, y, width, height, sides);
+        case "top-right":
+            dx = boxX + boxW - dw;
+            dy = boxY;
             break;
-        }
-        case 'star': {
-            drawStar(ctx, x, y, width, height);
+        case "left":
+            dx = boxX;
+            dy = cy;
             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();
+        case "center":
+            dx = cx;
+            dy = cy;
             break;
-        }
-        case 'oval': {
-            ctx.ellipse(x + width / 2, y + height / 2, width / 2, height / 2, 0, 0, Math.PI * 2);
+        case "right":
+            dx = boxX + boxW - dw;
+            dy = cy;
             break;
-        }
-        case 'arrow': {
-            drawArrow(ctx, x, y, width, height);
+        case "bottom-left":
+            dx = boxX;
+            dy = boxY + boxH - dh;
             break;
-        }
-        case 'heart': {
-            drawHeart(ctx, x, y, width, height);
+        case "bottom":
+            dx = cx;
+            dy = boxY + boxH - dh;
             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();
+        case "bottom-right":
+            dx = boxX + boxW - dw;
+            dy = boxY + boxH - dh;
             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();
+        default:
+            dx = cx;
+            dy = cy;
             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();
+    return { dx, dy, dw, dh, sx, sy, sw, sh };
 }
-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();
+// utils/imageCache.ts
+const canvas_1 = require("@napi-rs/canvas");
+const path_1 = __importDefault(require("path"));
+const cache = new Map();
+function loadImageCached(src) {
+    if (Buffer.isBuffer(src))
+        return (0, canvas_1.loadImage)(src);
+    const key = src.startsWith("http") ? src : path_1.default.resolve(process.cwd(), src);
+    if (!cache.has(key))
+        cache.set(key, (0, canvas_1.loadImage)(key));
+    return cache.get(key);
 }
-/** 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();
-}
-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;
+// Single implementation handling both
+function applyShadow(ctx, a, b, c, d, e, f, g) {
+    let rect;
+    let shadow;
+    let radius;
+    let borderPos;
+    // Detect which overload we’re in
+    if (typeof a === "object" && "x" in a && "w" in a) {
+        // (ctx, rect, shadow)
+        rect = a;
+        shadow = b;
+        radius = shadow?.borderRadius ?? 0;
+        borderPos = shadow?.borderPosition ?? "all";
     }
     else {
-        throw new Error('Unsupported gradient type. Use "linear" or "radial".');
+        // (ctx, shadow, x, y, w, h, radius?, borderPos?)
+        shadow = a;
+        rect = { x: b, y: c, w: d, h: e };
+        radius = f ?? shadow?.borderRadius ?? 0;
+        borderPos = g ?? shadow?.borderPosition ?? "all";
     }
-}
-/**
- * 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.
- */
-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")
- */
-function imageRadius(ctx, image, x, y, width, height, borderRadius, borderPosition = "all") {
+    if (!shadow)
+        return;
+    const { color = "rgba(0,0,0,1)", gradient, opacity = 0.4, offsetX = 0, offsetY = 0, blur = 20 } = shadow;
+    const r = { x: rect.x + offsetX, y: rect.y + offsetY, w: rect.w, h: rect.h };
     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();
+    ctx.globalAlpha = opacity;
+    if (blur > 0)
+        ctx.filter = `blur(${blur}px)`;
+    buildPath(ctx, r.x, r.y, r.w, r.h, radius, borderPos);
+    if (gradient) {
+        const gfill = createGradientFill(ctx, gradient, r);
+        ctx.fillStyle = gfill;
     }
     else {
-        ctx.rect(x, y, width, height);
-        ctx.clip();
+        ctx.fillStyle = color;
     }
-    ctx.drawImage(image, x, y, width, height);
+    ctx.fill();
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
     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"
- */
-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);
+// Single implementation handling both
+function applyStroke(ctx, a, b, c, d, e, f, g) {
+    let rect;
+    let stroke;
+    let radius;
+    let borderPos;
+    if (typeof a === "object" && "x" in a && "w" in a) {
+        // (ctx, rect, stroke)
+        rect = a;
+        stroke = b;
+        radius = stroke?.borderRadius ?? 0;
+        borderPos = stroke?.borderPosition ?? "all";
     }
     else {
-        // Default: Draw normal rectangle
-        ctx.rect(x, y, width, height);
+        // (ctx, stroke, x, y, w, h, radius?, borderPos?)
+        stroke = a;
+        rect = { x: b, y: c, w: d, h: e };
+        radius = f ?? stroke?.borderRadius ?? 0;
+        borderPos = g ?? stroke?.borderPosition ?? "all";
     }
-    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,
+    if (!stroke)
+        return;
+    const { color = "#000", gradient, width = 2, position = 0, blur = 0, opacity = 1 } = stroke;
+    // expand/shrink by `position`
+    const r = {
+        x: rect.x - position,
+        y: rect.y - position,
+        w: rect.w + position * 2,
+        h: rect.h + position * 2
     };
+    ctx.save();
+    if (blur > 0)
+        ctx.filter = `blur(${blur}px)`;
+    ctx.globalAlpha = opacity;
+    buildPath(ctx, r.x, r.y, r.w, r.h, radius, borderPos);
+    ctx.lineWidth = width;
+    if (gradient) {
+        const gstroke = createGradientFill(ctx, gradient, r);
+        ctx.strokeStyle = gstroke;
+    }
+    else {
+        ctx.strokeStyle = color;
+    }
+    ctx.stroke();
+    ctx.filter = "none";
+    ctx.globalAlpha = 1;
+    ctx.restore();
 }
-/**
- * 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).
- */
-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();
-        }
+/** Optional “box background” under the bitmap, inside the image clip */
+function drawBoxBackground(ctx, rect, boxBg, borderRadius, borderPosition) {
+    if (!boxBg)
+        return;
+    const { color, gradient } = boxBg;
+    // clip to the box radius, then fill
+    ctx.save();
+    buildPath(ctx, rect.x, rect.y, rect.w, rect.h, borderRadius ?? 0, borderPosition ?? "all");
+    ctx.clip();
+    if (gradient) {
+        const g = createGradientFill(ctx, gradient, rect);
+        ctx.fillStyle = g;
+        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
     }
+    else if (color && color !== "transparent") {
+        ctx.fillStyle = color;
+        ctx.fillRect(rect.x, rect.y, rect.w, rect.h);
+    }
+    ctx.restore();
 }
 //# sourceMappingURL=imageProperties.js.map