html2canvas-pro 2.4.4 → 2.5.0

package/dist/lib/render/canvas/border-image-renderer.js

@@ -1,153 +0,0 @@
-"use strict";
-/**
- * Border Image Renderer
- *
- * Renders CSS border-image using 9-slice scaling.
- * The source image is divided into 9 regions (4 corners, 4 edges, 1 center)
- * based on border-image-slice values, then each region is drawn to the
- * corresponding area of the element's border box.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderImageRenderer = void 0;
-const border_image_repeat_1 = require("../../css/property-descriptors/border-image-repeat");
-class BorderImageRenderer {
-    constructor(ctx) {
-        this.ctx = ctx;
-    }
-    renderBorderImage(bounds, image, slice, repeat, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth) {
-        const imgW = image.naturalWidth || image.width;
-        const imgH = image.naturalHeight || image.height;
-        if (imgW <= 0 || imgH <= 0) {
-            return;
-        }
-        // Calculate source slice positions in image pixel space
-        const sT = Math.min(slice.unit === 'percent' ? (slice.top / 100) * imgH : Math.min(slice.top, imgH), imgH);
-        const sR = Math.min(slice.unit === 'percent' ? (slice.right / 100) * imgW : Math.min(slice.right, imgW), imgW);
-        const sB = Math.min(slice.unit === 'percent' ? (slice.bottom / 100) * imgH : Math.min(slice.bottom, imgH), imgH);
-        const sL = Math.min(slice.unit === 'percent' ? (slice.left / 100) * imgW : Math.min(slice.left, imgW), imgW);
-        const { left, top, width, height } = bounds;
-        if (width <= 0 || height <= 0) {
-            return;
-        }
-        // Clamp border widths to available box dimensions
-        const dT = Math.min(borderTopWidth, height);
-        const dR = Math.min(borderRightWidth, width);
-        const dB = Math.min(borderBottomWidth, height - dT);
-        const dL = Math.min(borderLeftWidth, width - dR);
-        // Draw corners
-        this.drawRegion(image, 0, 0, sL, sT, left, top, dL, dT);
-        this.drawRegion(image, imgW - sR, 0, sR, sT, left + width - dR, top, dR, dT);
-        this.drawRegion(image, imgW - sR, imgH - sB, sR, sB, left + width - dR, top + height - dB, dR, dB);
-        this.drawRegion(image, 0, imgH - sB, sL, sB, left, top + height - dB, dL, dB);
-        // Draw edges
-        const edges = [
-            {
-                sx: sL,
-                sy: 0,
-                sw: imgW - sL - sR,
-                sh: sT,
-                dx: left + dL,
-                dy: top,
-                dw: width - dL - dR,
-                dh: dT,
-                repeat: repeat.horizontal
-            },
-            {
-                sx: imgW - sR,
-                sy: sT,
-                sw: sR,
-                sh: imgH - sT - sB,
-                dx: left + width - dR,
-                dy: top + dT,
-                dw: dR,
-                dh: height - dT - dB,
-                repeat: repeat.vertical
-            },
-            {
-                sx: sL,
-                sy: imgH - sB,
-                sw: imgW - sL - sR,
-                sh: sB,
-                dx: left + dL,
-                dy: top + height - dB,
-                dw: width - dL - dR,
-                dh: dB,
-                repeat: repeat.horizontal
-            },
-            {
-                sx: 0,
-                sy: sT,
-                sw: sL,
-                sh: imgH - sT - sB,
-                dx: left,
-                dy: top + dT,
-                dw: dL,
-                dh: height - dT - dB,
-                repeat: repeat.vertical
-            }
-        ];
-        for (const edge of edges) {
-            if (edge.sw <= 0 || edge.sh <= 0 || edge.dw <= 0 || edge.dh <= 0)
-                continue;
-            const isHorizontal = edge.dw >= edge.dh;
-            if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.STRETCH) {
-                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy, edge.dw, edge.dh);
-            }
-            else if (edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.REPEAT || edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND) {
-                this.drawRepeatedEdge(image, edge, isHorizontal, edge.repeat === border_image_repeat_1.BORDER_IMAGE_REPEAT.ROUND);
-            }
-        }
-        // Draw center if fill is specified
-        if (slice.fill) {
-            const cx = sL;
-            const cy = sT;
-            const cw = imgW - sL - sR;
-            const ch = imgH - sT - sB;
-            const tcx = left + dL;
-            const tcy = top + dT;
-            const tcw = width - dL - dR;
-            const tch = height - dT - dB;
-            this.drawRegion(image, cx, cy, cw, ch, tcx, tcy, tcw, tch);
-        }
-    }
-    drawRegion(image, sx, sy, sw, sh, dx, dy, dw, dh) {
-        if (sw > 0 && sh > 0 && dw > 0 && dh > 0) {
-            this.ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
-        }
-    }
-    drawRepeatedEdge(image, edge, isHorizontal, round) {
-        const srcLength = isHorizontal ? edge.sw : edge.sh;
-        const tgLength = isHorizontal ? edge.dw : edge.dh;
-        if (srcLength <= 0 || tgLength <= 0)
-            return;
-        let tileSize;
-        let tileCount;
-        if (round) {
-            tileCount = Math.max(1, Math.round(tgLength / srcLength));
-            tileSize = tgLength / tileCount;
-        }
-        else {
-            tileSize = srcLength;
-            tileCount = Math.ceil(tgLength / tileSize);
-        }
-        this.ctx.save();
-        this.ctx.beginPath();
-        this.ctx.rect(edge.dx, edge.dy, edge.dw, edge.dh);
-        this.ctx.clip();
-        for (let i = 0; i < tileCount; i++) {
-            const offset = i * tileSize;
-            const remaining = tgLength - offset;
-            const clampedSize = Math.min(tileSize, remaining);
-            if (clampedSize <= 0)
-                break;
-            if (isHorizontal) {
-                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx + offset, edge.dy, clampedSize, edge.dh);
-            }
-            else {
-                this.ctx.drawImage(image, edge.sx, edge.sy, edge.sw, edge.sh, edge.dx, edge.dy + offset, edge.dw, clampedSize);
-            }
-        }
-        this.ctx.restore();
-    }
-}
-exports.BorderImageRenderer = BorderImageRenderer;

package/dist/lib/render/canvas/border-renderer.js

@@ -1,184 +0,0 @@
-"use strict";
-/**
- * Border Renderer
- *
- * Handles rendering of element borders including:
- * - Solid borders
- * - Double borders
- * - Dashed borders
- * - Dotted borders
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BorderRenderer = void 0;
-const color_utilities_1 = require("../../css/types/color-utilities");
-const border_1 = require("../border");
-const bezier_curve_1 = require("../bezier-curve");
-const vector_1 = require("../vector");
-/**
- * Border Renderer
- *
- * Specialized renderer for element borders.
- * Extracted from CanvasRenderer to improve code organization and maintainability.
- */
-class BorderRenderer {
-    constructor(deps, pathCallbacks) {
-        this.ctx = deps.ctx;
-        this.pathCallbacks = pathCallbacks;
-    }
-    /**
-     * Render a solid border
-     *
-     * @param color - Border color
-     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
-     * @param curvePoints - Border curve points
-     */
-    async renderSolidBorder(color, side, curvePoints) {
-        this.pathCallbacks.path((0, border_1.parsePathForBorder)(curvePoints, side));
-        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.fill();
-    }
-    /**
-     * Render a double border
-     * Falls back to solid border if width is too small
-     *
-     * @param color - Border color
-     * @param width - Border width
-     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
-     * @param curvePoints - Border curve points
-     */
-    async renderDoubleBorder(color, width, side, curvePoints) {
-        if (width < 3) {
-            await this.renderSolidBorder(color, side, curvePoints);
-            return;
-        }
-        const outerPaths = (0, border_1.parsePathForBorderDoubleOuter)(curvePoints, side);
-        this.pathCallbacks.path(outerPaths);
-        this.ctx.fillStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.fill();
-        const innerPaths = (0, border_1.parsePathForBorderDoubleInner)(curvePoints, side);
-        this.pathCallbacks.path(innerPaths);
-        this.ctx.fill();
-    }
-    /**
-     * Render a dashed or dotted border
-     *
-     * @param color - Border color
-     * @param width - Border width
-     * @param side - Border side (0=top, 1=right, 2=bottom, 3=left)
-     * @param curvePoints - Border curve points
-     * @param style - Border style (DASHED or DOTTED)
-     */
-    async renderDashedDottedBorder(color, width, side, curvePoints, style) {
-        this.ctx.save();
-        const strokePaths = (0, border_1.parsePathForBorderStroke)(curvePoints, side);
-        const boxPaths = (0, border_1.parsePathForBorder)(curvePoints, side);
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            this.pathCallbacks.path(boxPaths);
-            this.ctx.clip();
-        }
-        // Extract start and end coordinates
-        let startX, startY, endX, endY;
-        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
-            startX = boxPaths[0].start.x;
-            startY = boxPaths[0].start.y;
-        }
-        else {
-            startX = boxPaths[0].x;
-            startY = boxPaths[0].y;
-        }
-        if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
-            endX = boxPaths[1].end.x;
-            endY = boxPaths[1].end.y;
-        }
-        else {
-            endX = boxPaths[1].x;
-            endY = boxPaths[1].y;
-        }
-        // Calculate border length
-        let length;
-        if (side === 0 || side === 2) {
-            length = Math.abs(startX - endX);
-        }
-        else {
-            length = Math.abs(startY - endY);
-        }
-        this.ctx.beginPath();
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.pathCallbacks.formatPath(strokePaths);
-        }
-        else {
-            this.pathCallbacks.formatPath(boxPaths.slice(0, 2));
-        }
-        // Calculate dash and space lengths
-        let dashLength = width < 3 ? width * 3 : width * 2;
-        let spaceLength = width < 3 ? width * 2 : width;
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            dashLength = width;
-            spaceLength = width;
-        }
-        // Adjust dash pattern for border length
-        let useLineDash = true;
-        if (length <= dashLength * 2) {
-            useLineDash = false;
-        }
-        else if (length <= dashLength * 2 + spaceLength) {
-            const multiplier = length / (2 * dashLength + spaceLength);
-            dashLength *= multiplier;
-            spaceLength *= multiplier;
-        }
-        else {
-            const numberOfDashes = Math.floor((length + spaceLength) / (dashLength + spaceLength));
-            const minSpace = (length - numberOfDashes * dashLength) / (numberOfDashes - 1);
-            const maxSpace = (length - (numberOfDashes + 1) * dashLength) / numberOfDashes;
-            spaceLength =
-                maxSpace <= 0 || Math.abs(spaceLength - minSpace) < Math.abs(spaceLength - maxSpace)
-                    ? minSpace
-                    : maxSpace;
-        }
-        // Apply line dash pattern
-        if (useLineDash) {
-            if (style === 3 /* BORDER_STYLE.DOTTED */) {
-                this.ctx.setLineDash([0, dashLength + spaceLength]);
-            }
-            else {
-                this.ctx.setLineDash([dashLength, spaceLength]);
-            }
-        }
-        // Set line style and stroke
-        if (style === 3 /* BORDER_STYLE.DOTTED */) {
-            this.ctx.lineCap = 'round';
-            this.ctx.lineWidth = width;
-        }
-        else {
-            this.ctx.lineWidth = width * 2 + 1.1;
-        }
-        this.ctx.strokeStyle = (0, color_utilities_1.asString)(color);
-        this.ctx.stroke();
-        this.ctx.setLineDash([]);
-        // Fill dashed round edge gaps
-        if (style === 2 /* BORDER_STYLE.DASHED */) {
-            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[0])) {
-                const path1 = boxPaths[3];
-                const path2 = boxPaths[0];
-                this.ctx.beginPath();
-                this.pathCallbacks.formatPath([
-                    new vector_1.Vector(path1.end.x, path1.end.y),
-                    new vector_1.Vector(path2.start.x, path2.start.y)
-                ]);
-                this.ctx.stroke();
-            }
-            if ((0, bezier_curve_1.isBezierCurve)(boxPaths[1])) {
-                const path1 = boxPaths[1];
-                const path2 = boxPaths[2];
-                this.ctx.beginPath();
-                this.pathCallbacks.formatPath([
-                    new vector_1.Vector(path1.end.x, path1.end.y),
-                    new vector_1.Vector(path2.start.x, path2.start.y)
-                ]);
-                this.ctx.stroke();
-            }
-        }
-        this.ctx.restore();
-    }
-}
-exports.BorderRenderer = BorderRenderer;

package/dist/lib/render/canvas/canvas-path.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createCanvasPath = exports.formatCanvasPath = void 0;
-const bezier_curve_1 = require("../bezier-curve");
-const formatCanvasPath = (ctx, paths) => {
-    paths.forEach((point, index) => {
-        const start = (0, bezier_curve_1.isBezierCurve)(point) ? point.start : point;
-        if (index === 0) {
-            ctx.moveTo(start.x, start.y);
-        }
-        else {
-            ctx.lineTo(start.x, start.y);
-        }
-        if ((0, bezier_curve_1.isBezierCurve)(point)) {
-            ctx.bezierCurveTo(point.startControl.x, point.startControl.y, point.endControl.x, point.endControl.y, point.end.x, point.end.y);
-        }
-    });
-};
-exports.formatCanvasPath = formatCanvasPath;
-const createCanvasPath = (ctx, paths) => {
-    ctx.beginPath();
-    (0, exports.formatCanvasPath)(ctx, paths);
-    ctx.closePath();
-};
-exports.createCanvasPath = createCanvasPath;