draw-curved-arrows/dist/drawArrow.js

Draw a curved arrow from target to target through the canvas

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.drawArrow = void 0;
function drawArrow(ctx, x0, y0, x1, y1, aLength, lineWidth, firstStoreSize, secondStoreSize, secondary) {
    if (secondary === void 0) { secondary = false; }
    var storeGap = secondStoreSize - firstStoreSize;
    var dx = x1 - x0;
    var dy = y1 - y0;
    var angleX = dx === 0 ? (dy >= 0 ? storeGap : -storeGap) : dx;
    var angleY = dx === 0 ? dy : dx > 0 ? dy - storeGap : dy + storeGap;
    var angle = Math.atan2(angleY, angleX);
    var length = Math.sqrt(angleX * angleX + angleY * angleY);
    var arrowGap = firstStoreSize + lineWidth * 2.5;
    var borderArrowAddGap = 2;
    if (ctx) {
        ctx.lineWidth = lineWidth + 4;
        ctx.translate(x0, y0);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.fillStyle = "black";
        ctx.arc(length / 2 - lineWidth / 4, (length / 2) * Math.sqrt(3) - arrowGap, length, (Math.PI / 180) * (240 - 0.1), (Math.PI / 180) * (300 - 0.1), false);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(length, lineWidth / 2 - arrowGap + borderArrowAddGap);
        ctx.lineTo(length - aLength - borderArrowAddGap, lineWidth / 2 - arrowGap + borderArrowAddGap);
        ctx.lineTo(length, lineWidth / 2 - aLength - arrowGap - borderArrowAddGap);
        ctx.lineTo(length + borderArrowAddGap, lineWidth / 2 - arrowGap);
        ctx.fill();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        ctx.lineWidth = lineWidth;
        ctx.translate(x0, y0);
        ctx.rotate(angle);
        ctx.strokeStyle = secondary
            ? "rgba(255, 99, 132, 1)"
            : "rgba(54, 162, 235, 1)";
        ctx.fillStyle = secondary
            ? "rgba(255, 99, 132, 1)"
            : "rgba(54, 162, 235, 1)";
        var line = new Path2D();
        line.arc(length / 2 - lineWidth / 4, (length / 2) * Math.sqrt(3) - arrowGap, length, (Math.PI / 180) * 240, (Math.PI / 180) * 300, false);
        ctx.stroke(line);
        ctx.beginPath();
        ctx.moveTo(length, lineWidth / 2 - arrowGap);
        ctx.lineTo(length - aLength, lineWidth / 2 - arrowGap);
        ctx.lineTo(length, lineWidth / 2 - aLength - arrowGap);
        ctx.lineTo(length, lineWidth / 2 - arrowGap);
        ctx.fill();
        ctx.setTransform(1, 0, 0, 1, 0, 0);
        return { angle: angle, translate: [x0, y0], lineWidth: lineWidth, path: line };
    }
}
exports.drawArrow = drawArrow;
//# sourceMappingURL=drawArrow.js.map