☰

WebPadOnline! Draw on Websites! Take Notes! Doodle!

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, and clear buttons.

目前為 2024-02-08 提交的版本，檢視 最新版本。

// ==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.5
// @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, and clear 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;

  // 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);
    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.style.backgroundColor = '#4CAF50'; // Green background
    undoButton.style.border = 'none';
    undoButton.style.color = 'white';
    undoButton.style.padding = '10px 24px';
    undoButton.style.textAlign = 'center';
    undoButton.style.textDecoration = 'none';
    undoButton.style.display = 'inline-block';
    undoButton.style.fontSize = '16px';
    undoButton.style.margin = '4px 2px';
    undoButton.style.cursor = 'pointer';
    undoButton.style.borderRadius = '4px';
    undoButton.addEventListener('click', undo);
    buttonsContainer.appendChild(undoButton);

    const redoButton = document.createElement('button');
    redoButton.textContent = 'Redo (Ctrl + Shift + Z)';
    redoButton.style.backgroundColor = '#4CAF50'; // Green background
    redoButton.style.border = 'none';
    redoButton.style.color = 'white';
    redoButton.style.padding = '10px 24px';
    redoButton.style.textAlign = 'center';
    redoButton.style.textDecoration = 'none';
    redoButton.style.display = 'inline-block';
    redoButton.style.fontSize = '16px';
    redoButton.style.margin = '4px 2px';
    redoButton.style.cursor = 'pointer';
    redoButton.style.borderRadius = '4px';
    redoButton.addEventListener('click', redo);
    buttonsContainer.appendChild(redoButton);

    const clearButton = document.createElement('button');
    clearButton.textContent = 'Clear All';
    clearButton.style.backgroundColor = '#4CAF50'; // Green background
    clearButton.style.border = 'none';
    clearButton.style.color = 'white';
    clearButton.style.padding = '10px 24px';
    clearButton.style.textAlign = 'center';
    clearButton.style.textDecoration = 'none';
    clearButton.style.display = 'inline-block';
    clearButton.style.fontSize = '16px';
    clearButton.style.margin = '4px 2px';
    clearButton.style.cursor = 'pointer';
    clearButton.style.borderRadius = '4px';
    clearButton.addEventListener('click', clearCanvas);
    buttonsContainer.appendChild(clearButton);

    document.body.appendChild(buttonsContainer);
  }

  function handleKeyPress(e) {
    if (e.ctrlKey && e.key === 'z') {
      if (e.shiftKey) {
        redo();
      } else {
        undo();
      }
    }
  }

  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;
        addOverlay();
      } else {
        settingsMenu.style.display = 'none';
        buttonsContainer.style.display = 'none';
        showControls = false;
        removeOverlay();
      }
    }
  }

  function addOverlay() {
    const overlay = document.createElement('div');
    overlay.id = 'overlay';
    overlay.style.position = 'fixed';
    overlay.style.top = '0';
    overlay.style.left = '0';
    overlay.style.width = '100%';
    overlay.style.height = '100%';
    overlay.style.backgroundColor = 'transparent';
    overlay.style.pointerEvents = 'auto'; // Disable interaction with underlying elements
    overlay.style.zIndex = '9998'; // Below settings menu and buttons
    document.body.appendChild(overlay);
  }

  function removeOverlay() {
    const overlay = document.getElementById('overlay');
    if (overlay) {
      overlay.parentNode.removeChild(overlay);
    }
  }

  init();

})();