159 lines
4.6 KiB
JavaScript
159 lines
4.6 KiB
JavaScript
// JavaScript Document v1.3
|
|
console.log("LIBRARY: pdfLibSignature.js")
|
|
//let dynamicSignatureElementId = dmx.global.data.signatureElementName // Gets the DYNAMIC ID for the canvas ID
|
|
|
|
const canvas = document.getElementById('signatureCanvas'); // const canvas = document.getElementById('signatureCanvasIndex');
|
|
const ctx = canvas.getContext('2d');
|
|
// pull the id fromthe active canvas by detecting the canvas.target
|
|
//and pulling the canvas.id from that -- FUTURE for more than 1 canvas on same page (i.e in a modal)
|
|
//let activeCanvasId = null
|
|
let drawing = false;
|
|
|
|
|
|
|
|
if (canvas) {
|
|
console.log('Canvas element found:');
|
|
} else {
|
|
console.log('Canvas element not found');
|
|
}
|
|
|
|
|
|
|
|
function myTestFunction(variable1, variable2) {
|
|
console.log(variable1, variable2);
|
|
// Your logic here
|
|
}
|
|
// Get the canvas element
|
|
|
|
|
|
// Function to get the canvas offset
|
|
function getCanvasOffset() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
//console.log("offsetX:",rect.left, " OffsetY:",rect.top)
|
|
return {
|
|
offsetX: rect.left,
|
|
offsetY: rect.top
|
|
};
|
|
}
|
|
|
|
|
|
function clearCanvas() {
|
|
console.log("Clear Signature area")
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
}
|
|
|
|
function startDrawing(e) {
|
|
console.log("Start Signature Capture")
|
|
//console.log(e)
|
|
drawing = true;
|
|
draw(e);
|
|
}
|
|
|
|
function endDrawing() {
|
|
console.log("Stopped Signature Capture")
|
|
drawing = false;
|
|
ctx.beginPath();
|
|
}
|
|
|
|
function draw(e) {
|
|
//console.log(e)
|
|
if (!drawing) return;
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000';
|
|
|
|
const { offsetX, offsetY } = getCanvasOffset();
|
|
let x = e.clientX - offsetX //canvas.offsetLeft;
|
|
let y = e.clientY - offsetY //canvas.offsetTop;
|
|
//console.log("X:", x, " Y:", y)
|
|
|
|
//let x = e.clientX - canvas.offsetLeft;
|
|
//let y = e.clientY - canvas.offsetTop;
|
|
//console.log("X:", x, " Y:", y)
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
|
|
function generateRandomIdentifier(size) {
|
|
|
|
if (size > 20) {
|
|
let size = 20
|
|
console.log("randomIdentifier Exceeded max len of 20. Defaults to 20 ")
|
|
}
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
let randIdentifier = '';
|
|
for (let i = 0; i < size; i++) {
|
|
const randomIndex = Math.floor(Math.random() * characters.length);
|
|
randIdentifier += characters[randomIndex];
|
|
}
|
|
console.log("Random randIdentifier: ", randIdentifier);
|
|
return randIdentifier;
|
|
}
|
|
//canvas.addEventListener('mousedown', startDrawing);
|
|
//canvas.addEventListener('mouseup', endDrawing);
|
|
//canvas.addEventListener('mousemove', draw);
|
|
|
|
// ** TOUCH EVENT LISTNERS FOR TABLETS
|
|
|
|
//canvas.addEventListener('touchstart', (e) => startDrawing(e.touches[0]),{passive: true});
|
|
//canvas.addEventListener('touchend', endDrawing);
|
|
//canvas.addEventListener('touchmove', (e) => draw(e.touches[0]));
|
|
|
|
|
|
/** FUTURE CODE BLOCK TO DETECT WHICH CANVAS IS DRAWN ON. DYNAMIC DETECT CANVAS ID
|
|
*
|
|
|
|
let activeCanvasId = null; // Variable to store the ID of the active canvas
|
|
let isDrawing = false; // Flag to check if drawing is active
|
|
|
|
function startDrawing(event) {
|
|
isDrawing = true;
|
|
const canvas = event.target; // The canvas where the event occurred
|
|
activeCanvasId = canvas.id; // Store the ID of the active canvas
|
|
console.log(`Started drawing on: ${activeCanvasId}`);
|
|
}
|
|
|
|
function draw(event) {
|
|
if (!isDrawing) return;
|
|
|
|
const canvas = document.getElementById(activeCanvasId);
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.lineWidth = 2;
|
|
ctx.lineCap = 'round';
|
|
ctx.strokeStyle = '#000000';
|
|
|
|
// Get cursor position relative to the canvas
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = event.clientX - rect.left;
|
|
const y = event.clientY - rect.top;
|
|
|
|
ctx.lineTo(x, y);
|
|
ctx.stroke();
|
|
ctx.beginPath();
|
|
ctx.moveTo(x, y);
|
|
}
|
|
|
|
function stopDrawing() {
|
|
isDrawing = false;
|
|
console.log(`Stopped drawing on: ${activeCanvasId}`);
|
|
}
|
|
|
|
// Attach event listeners to both canvases
|
|
const canvases = document.querySelectorAll('canvas');
|
|
|
|
canvases.forEach((canvas) => {
|
|
canvas.addEventListener('mousedown', startDrawing);
|
|
canvas.addEventListener('mousemove', draw);
|
|
canvas.addEventListener('mouseup', stopDrawing);
|
|
canvas.addEventListener('mouseleave', stopDrawing); // Stop drawing if the mouse leaves the canvas
|
|
|
|
// Support for touch events
|
|
canvas.addEventListener('touchstart', (event) => startDrawing(event.touches[0]));
|
|
canvas.addEventListener('touchmove', (event) => draw(event.touches[0]));
|
|
canvas.addEventListener('touchend', stopDrawing);
|
|
});
|
|
|
|
*/ |