// ==UserScript==
// @name WebPadOnline! Draw on Websites! Take Notes! Doodle!
// @namespace https://greasyfork.org/en/scripts/486818-webpadonline-draw-on-websites-take-notes-doodle
// @version 0.3
// @description Allows drawing on websites when the control key and mouse button are pressed. Includes settings for color, line width, opacity, eraser tool, circle distance, smoothness, and shadow. Also includes undo, redo, clear, and toggle mouse interaction buttons.
// @author Heptatron
// @license MIT
// @match *://*/*
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(function() {
'use strict';
let canvas, ctx;
let isDrawing = false;
let lastX = 0;
let lastY = 0;
let history = [];
let historyIndex = -1;
let showControls = false;
let mouseInteractionEnabled = false; // New variable to track mouse interaction
// Default settings
let settings = {
color: 'black',
lineWidth: 2,
eraser: false,
circleDistance: 2,
opacity: 1,
smoothness: 5,
shadow: false
};
function createCanvas() {
canvas = document.createElement('canvas');
canvas.style.position = 'fixed';
canvas.style.top = '0';
canvas.style.left = '0';
canvas.style.pointerEvents = 'none'; // To allow clicking through canvas
canvas.style.zIndex = '9999'; // Ensure canvas is on top
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
ctx = canvas.getContext('2d');
}
function startDrawing(e) {
if ((e.ctrlKey && e.button === 0) || (e.ctrlKey && e.button === 2)) {
isDrawing = true;
[lastX, lastY] = [e.clientX, e.clientY];
if (!settings.eraser) {
addToHistory();
}
}
}
function draw(e) {
if (!isDrawing) return;
if (settings.eraser) {
ctx.clearRect(e.clientX - settings.lineWidth / 2, e.clientY - settings.lineWidth / 2, settings.lineWidth, settings.lineWidth);
} else {
const deltaX = e.clientX - lastX;
const deltaY = e.clientY - lastY;
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
const angle = Math.atan2(deltaY, deltaX);
for (let i = 0; i < distance; i += settings.circleDistance) {
const x = lastX + Math.cos(angle) * i;
const y = lastY + Math.sin(angle) * i;
ctx.beginPath();
ctx.arc(x, y, settings.lineWidth / 2, 0, Math.PI * 2);
ctx.fillStyle = settings.color;
if (settings.shadow) {
ctx.shadowColor = settings.color;
ctx.shadowBlur = settings.lineWidth / 2;
} else {
ctx.shadowColor = 'transparent';
ctx.shadowBlur = 0;
}
ctx.fill();
}
[lastX, lastY] = [e.clientX, e.clientY];
}
}
function stopDrawing() {
isDrawing = false;
}
function init() {
createCanvas();
document.addEventListener('mousedown', startDrawing);
document.addEventListener('mousemove', draw);
document.addEventListener('mouseup', stopDrawing);
createSettingsMenu();
createButtons();
document.addEventListener('keydown', handleKeyPress);
document.addEventListener('keydown', toggleControls);
document.addEventListener('keyup', toggleControls);
document.addEventListener('keydown', toggleMouseInteraction); // Listen for the hotkey
loadSettings(); // Call loadSettings after all DOM manipulation is complete
}
function createSettingsMenu() {
const settingsMenu = document.createElement('div');
settingsMenu.id = 'settingsMenu';
settingsMenu.style.display = 'none';
settingsMenu.style.position = 'fixed';
settingsMenu.style.top = '10px';
settingsMenu.style.left = '10px';
// Background color with 70% opacity
settingsMenu.style.backgroundColor = 'rgba(77, 77, 77, 0.7)';
settingsMenu.style.padding = '10px';
settingsMenu.style.borderRadius = '5px';
settingsMenu.style.zIndex = '10000'; // Ensure menu is on top
settingsMenu.innerHTML = `
<h3>Settings</h3>
<label for="color">Color:</label>
<input type="color" id="color" value="${settings.color}">
<br>
<label for="lineWidth">Line Width:</label>
<input type="range" id="lineWidth" min="0.5" max="50" step="0.5" value="${settings.lineWidth}">
<br>
<label for="circleDistance">Circle Distance:</label>
<input type="number" id="circleDistance" min="1" value="${settings.circleDistance}">
<br>
<label for="eraser">Eraser:</label>
<input type="checkbox" id="eraser">
<br>
<label for="opacity">Opacity:</label>
<input type="range" id="opacity" min="0" max="1" step="0.01" value="${settings.opacity}">
<br>
<label for="smoothness">Smoothness:</label>
<input type="number" id="smoothness" min="1" value="${settings.smoothness}">
<br>
<label for="shadow">Shadow:</label>
<input type="checkbox" id="shadow">
`;
document.body.appendChild(settingsMenu);
const colorInput = document.getElementById('color');
colorInput.addEventListener('input', function() {
settings.color = colorInput.value;
GM_setValue('color', settings.color);
});
const lineWidthInput = document.getElementById('lineWidth');
lineWidthInput.addEventListener('input', function() {
settings.lineWidth = parseFloat(lineWidthInput.value);
GM_setValue('lineWidth', settings.lineWidth);
});
const circleDistanceInput = document.getElementById('circleDistance');
circleDistanceInput.addEventListener('input', function() {
settings.circleDistance = parseInt(circleDistanceInput.value);
GM_setValue('circleDistance', settings.circleDistance);
});
const eraserCheckbox = document.getElementById('eraser');
eraserCheckbox.checked = settings.eraser;
eraserCheckbox.addEventListener('change', function() {
settings.eraser = eraserCheckbox.checked;
GM_setValue('eraser', settings.eraser);
});
const opacityInput = document.getElementById('opacity');
opacityInput.addEventListener('input', function() {
settings.opacity = parseFloat(opacityInput.value);
GM_setValue('opacity', settings.opacity);
ctx.globalAlpha = settings.opacity;
});
const smoothnessInput = document.getElementById('smoothness');
smoothnessInput.addEventListener('input', function() {
settings.smoothness = parseInt(smoothnessInput.value);
GM_setValue('smoothness', settings.smoothness);
});
const shadowCheckbox = document.getElementById('shadow');
shadowCheckbox.checked = settings.shadow;
shadowCheckbox.addEventListener('change', function() {
settings.shadow = shadowCheckbox.checked;
GM_setValue('shadow', settings.shadow);
});
}
function createButtons() {
const buttonsContainer = document.createElement('div');
buttonsContainer.id = 'buttonsContainer';
buttonsContainer.style.display = 'none';
buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '10px';
buttonsContainer.style.right = '10px';
buttonsContainer.style.zIndex = '10000'; // Ensure buttons are on top
const undoButton = document.createElement('button');
undoButton.textContent = 'Undo (Ctrl + Z)';
undoButton.addEventListener('click', undo);
buttonsContainer.appendChild(undoButton);
const redoButton = document.createElement('button');
redoButton.textContent = 'Redo (Ctrl + Shift + Z)';
redoButton.addEventListener('click', redo);
buttonsContainer.appendChild(redoButton);
const clearButton = document.createElement('button');
clearButton.textContent = 'Clear All';
clearButton.addEventListener('click', clearCanvas);
buttonsContainer.appendChild(clearButton);
const toggleMouseInteractionButton = document.createElement('button'); // New button
toggleMouseInteractionButton.textContent = 'Toggle Mouse Interaction';
toggleMouseInteractionButton.addEventListener('click', toggleMouseInteraction);
buttonsContainer.appendChild(toggleMouseInteractionButton);
document.body.appendChild(buttonsContainer);
}
function handleKeyPress(e) {
if (e.ctrlKey && e.key === 'z') {
if (e.shiftKey) {
redo();
} else {
undo();
}
}
// Listen for the hotkey (CTRL + [)
if (e.ctrlKey && e.key === '[') {
toggleMouseInteraction();
}
}
function addToHistory() {
if (historyIndex !== history.length - 1) {
history = history.slice(0, historyIndex + 1);
}
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
history.push(imageData);
historyIndex++;
}
function undo() {
if (historyIndex > 0) {
historyIndex--;
ctx.putImageData(history[historyIndex], 0, 0);
}
}
function redo() {
if (historyIndex < history.length - 1) {
historyIndex++;
ctx.putImageData(history[historyIndex], 0, 0);
}
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
history = [];
historyIndex = -1;
}
function loadSettings() {
const savedColor = GM_getValue('color', settings.color);
settings.color = savedColor;
document.getElementById('color').value = savedColor;
const savedLineWidth = parseFloat(GM_getValue('lineWidth', settings.lineWidth));
settings.lineWidth = savedLineWidth;
document.getElementById('lineWidth').value = savedLineWidth;
const savedCircleDistance = parseInt(GM_getValue('circleDistance', settings.circleDistance));
settings.circleDistance = savedCircleDistance;
document.getElementById('circleDistance').value = savedCircleDistance;
const savedEraser = GM_getValue('eraser', settings.eraser);
settings.eraser = savedEraser;
document.getElementById('eraser').checked = savedEraser;
const savedOpacity = parseFloat(GM_getValue('opacity', settings.opacity));
settings.opacity = savedOpacity;
document.getElementById('opacity').value = savedOpacity;
const savedSmoothness = parseInt(GM_getValue('smoothness', settings.smoothness));
settings.smoothness = savedSmoothness;
document.getElementById('smoothness').value = savedSmoothness;
const savedShadow = GM_getValue('shadow', settings.shadow);
settings.shadow = savedShadow;
document.getElementById('shadow').checked = savedShadow;
}
function toggleControls(e) {
if (e.ctrlKey && e.altKey) {
const settingsMenu = document.getElementById('settingsMenu');
const buttonsContainer = document.getElementById('buttonsContainer');
if (!showControls) {
settingsMenu.style.display = 'block';
buttonsContainer.style.display = 'block';
showControls = true;
} else {
settingsMenu.style.display = 'none';
buttonsContainer.style.display = 'none';
showControls = false;
}
}
}
function toggleMouseInteraction() {
if (mouseInteractionEnabled) {
canvas.style.pointerEvents = 'none';
mouseInteractionEnabled = false;
} else {
canvas.style.pointerEvents = 'auto';
mouseInteractionEnabled = true;
}
}
init();
})();