IPENtool/src/js/signaturepad.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 signaturePad;

function initSignaturePad() {
    var canvas = document.getElementById("signaturecanvas");
    signaturePad = new SignaturePad(canvas, {
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
        onBegin: function () {
            // stop page from jumping around if user starts drawing signature while a text box is focused
            $("input").blur();
        }
    });
    new bootstrap.Modal(document.getElementById('signatureModal')).show();


    $("#signatureModal").on("shown.bs.modal", resizeSignaturePadCanvas);
}

function resizeSignaturePadCanvas() {
    var canvas = document.getElementById("signaturecanvas");
    var ratio = Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
    if (signaturePad != null) {
        signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    }
}

function signaturePadUndo() {
    var data = signaturePad.toData();

    resizeSignaturePadCanvas();

    if (data) {
        data.pop(); // remove the last dot or line
        signaturePad.fromData(data);
    }
}


function activateNotarySignaturePad() {
    initSignaturePad();
    signaturePadCallback = function () {
        var signature = signaturePad.toDataURL("image/svg+xml");
        signature = signature.replace("data:image/svg+xml;base64,", "");
        signature = atob(signature);
        setStorage("notary_signature", trimAndShrinkSVG(signature));
        $("#settingsModal #signature-preview").attr("src", "data:image/svg+xml;base64," + btoa(getStorage("notary_signature")));
    };
}

function signatureRemoteModalOpen() {
    var url = getSignatureServerUrl();
    $("#signatureRemoteUrlLabel").text(url);
    $("#signatureRemoteQRCode").html("");
    new QRCode(document.getElementById("signatureRemoteQRCode"), url);
    new bootstrap.Modal(document.getElementById('signatureRemoteModal')).show();
}


function handleRemoteSignatureData(data) {
    if (!$("#signatureModal").hasClass("show")) {
        return;
    }
    var canvas = document.getElementById("signaturecanvas");
    signaturePad.fromData(scaleSignatureData(data, canvas.width, canvas.height));
}

function scaleSignatureData(data, width, height) {
    // Get width and height of data
    // Get the minimum positions too for adding a bit of margin
    var oldwidth = 0;
    var oldheight = 0;
    var oldminX = 999999999;
    var oldminY = 999999999;
    for (var i = 0; i < data.length; i++) {
        for (var j = 0; j < data[i].points.length; j++) {
            oldwidth = Math.max(data[i].points[j].x, oldwidth);
            oldheight = Math.max(data[i].points[j].y, oldheight);
            oldminX = Math.min(data[i].points[j].x, oldminX);
            oldminY = Math.min(data[i].points[j].y, oldminY);
        }
    }
    var xPad = oldminX / 2;
    var yPad = oldminY / 2;
    // Calculate scale ratios
    var scaleX = (oldwidth + xPad * 2) / width;
    var scaleY = (oldheight + yPad * 2) / height;
    // Pick the largest scale ratio and use only that one so it maintains aspect ratio
    var scale = Math.max(scaleX, scaleY);
    // Loop over the old data and scale the points into a new signature data object
    var newdata = [];
    for (var i = 0; i < data.length; i++) {
        var newpoints = [];
        for (var j = 0; j < data[i].points.length; j++) {
            newpoints.push({
                time: data[i].points[j].time,
                x: (data[i].points[j].x + xPad) / scale,
                y: (data[i].points[j].y + yPad) / scale
            });
        }
        newdata.push({
            color: data[i].color,
            points: newpoints
        });
    }
    return newdata;
}