IPENtool/js/drawtools.js

/*
 * Copyright 2021 Netsyms Technologies.
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

var activeDrawImage;
var signaturePadCallback = function () {};
var clientSignatureSvg = "";

function getStampSvg(callback) {
    $.get("templates/stamps/" + getStorage("notary_state") + ".svg", {}, function (data) {
        data = data + "";
        data = data.replaceAll("[[[NAME]]]", getStorage("notary_name"));
        data = data.replaceAll("[[[LOCATION]]]", getStorage("notary_location"));
        data = data.replaceAll("[[[EXPIRES]]]", getStorage("notary_expires"));
        data = data.replaceAll("[[[IDNUMBER]]]", getStorage("notary_idnumber"));

        callback(data);
    }, "text");
}

function makeStampImage(callback) {
    getStampSvg(function (data) {
        svgToImage(data, function (err, image) {
            if (err) {
                callback(false);
                return;
            }
            callback(image);
        });
    });
}

function activateStampDrawTool() {
    makeStampImage(function (image) {
        activeDrawImage = image;
        enableGuideBox(image);
    });
}

function activateNotarySignatureTool() {
    if (!inStorage("notary_signature")) {
        alert("Please set a notary signature in the settings.");
        return;
    }
    svgToImage(getStorage("notary_signature"), function (err, image) {
        if (err) {
            callback(false);
            return;
        }
        activeDrawImage = image;
        enableGuideBox(image);
    });
}

function activateClientSignaturePad() {
    initSignaturePad();
    signaturePadCallback = function () {
        if (clientSignatureSvg != "" && signaturePad.isEmpty()) {
            var signature = clientSignatureSvg;
        } else {
            var signature = signaturePad.toDataURL("image/svg+xml");
            signature = signature.replace("data:image/svg+xml;base64,", "");
            signature = atob(signature);
            signature = trimAndShrinkSVG(signature);
            clientSignatureSvg = signature;
        }

        svgToImage(signature, function (err, image) {
            if (err) {
                callback(false);
                return;
            }
            activeDrawImage = image;
            enableGuideBox(image);
        });
    };
}

function drawImageFromUrl(x, y, width, height, src, canvas) {
    var ctx = canvas.getContext("2d");
    const image = new Image();
    image.src = src;
    image.onload = () => {
        ctx.drawImage(image, x, y, width, height);
    }
}

function drawImage(x, y, width, height, image, canvas) {
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, x, y, width, height);
}

$("#page-canvas-container").on("click", ".page-canvas", function (evt) {
    $("#page-canvas-container .page-canvas").removeClass("active");
    $(this).addClass("active");
});

$("#page-canvas-container").on("click", ".page-canvas.active", function (evt) {
    if (typeof activeDrawImage == "undefined") {
        return;
    }
    var canvas = $(this)[0];
    var coords = getMousePos(canvas, evt);

    var imageWidth = (activeDrawImage.width / 96) * pdfAssumedDPI * pdfPageScale;
    var imageHeight = (activeDrawImage.height / 96) * pdfAssumedDPI * pdfPageScale;
    drawImage(coords.x, coords.y, imageWidth, imageHeight, activeDrawImage, canvas);
});


function enableGuideBox(image, scalecorrectionfactor) {
    if (typeof scalecorrectionfactor == "undefined") {
        scalecorrectionfactor = 1;
    }
    // disable first to clear contents
    disableGuideBox();
    $("#placementguidebox").css("display", "");
    // calculate size of guide image
    var pageWidthPx = $("#page-canvas-container .page-canvas")[0].getContext("2d").canvas.width;
    var pageCanvasCurrentWidthPx = $("#page-canvas-container .page-canvas").css("width").replace("px", "") * 1;
    var pageWidthInches = pageWidthPx / (pdfAssumedDPI * pdfPageScale);
    var canvasCurrentDPI = pageCanvasCurrentWidthPx / pageWidthInches;

    var imageWidth = (image.width / (96 * scalecorrectionfactor)) * canvasCurrentDPI;
    var imageHeight = (image.height / (96 * scalecorrectionfactor)) * canvasCurrentDPI;

    var canvas = $("#placementguidebox")[0];
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, imageWidth, imageHeight);
}

function disableGuideBox() {
    $("#placementguidebox").css("display", "none");

    var context = $("#placementguidebox")[0].getContext('2d');
    context.clearRect(0, 0, $("#placementguidebox")[0].width, $("#placementguidebox")[0].height);
}

$("#page-canvas-container").on("mousemove", function (evt) {
    $("#placementguidebox").css({
        left: evt.pageX,
        top: evt.pageY
    });
});

/**
 * https://stackoverflow.com/a/17130415
 * @param {type} canvas
 * @param {type} evt
 * @returns {getMousePos.pdfAnonym$1}
 */
function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect(), // abs. size of element
            scaleX = canvas.width / rect.width, // relationship bitmap vs. element for X
            scaleY = canvas.height / rect.height;  // relationship bitmap vs. element for Y

    return {
        x: (evt.clientX - rect.left) * scaleX, // scale mouse coordinates after they have
        y: (evt.clientY - rect.top) * scaleY     // been adjusted to be relative to element
    }
}