☰

Gradient Tool

Ctrl + Click and drag to draw a gradient, click a color to set it as the first and right click a color to set it as the second.

// ==UserScript==
// @name        Gradient Tool
// @namespace   https://greasyfork.org/users/281093
// @match       https://sketchful.io/
// @grant       none
// @version     1.0
// @author      Bell
// @license     MIT
// @copyright   2020, Faux (https://greasyfork.org/users/281093)
// @description Ctrl + Click and drag to draw a gradient, click a color to set it as the first and right click a color to set it as the second.
// ==/UserScript==
/* jshint esversion: 8 */

const canvas = document.querySelector('#canvas');
const colorsDiv = document.querySelector('#gameToolsColors');
const lineCanvas = document.createElement('canvas');
const lineCtx = lineCanvas.getContext('2d');
const sizeInput = document.querySelector("#gameToolsColorPreview");
lineCanvas.style.position = 'absolute';
lineCanvas.style.cursor = 'crosshair';
lineCanvas.style.width = '100%';
lineCanvas.style.display = 'none';
lineCanvas.style.userSelect = 'none';
lineCanvas.style.zIndex = '2';
lineCanvas.style.filter = 'opacity(0.7)';
lineCanvas.oncontextmenu = () => { return false; };
[lineCanvas.width, lineCanvas.height] = [canvas.width, canvas.height];
canvas.parentElement.insertBefore(lineCanvas, canvas);

lineCanvas.clear = () => {
  lineCtx.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
};

canvas.save = () => {
  canvas.dispatchEvent(createMouseEvent('pointerup', { x: 0, y: 0 }, true));
};

let origin = {};
let realOrigin = {};
let previewPos = {};
let realPos = {};
let canvasHidden = true;
let drawingLine = false;
let activeColor = [0, 0, 0];
let color1 = [0, 200, 0];
let color2 = [250, 0, 0];
let drawingGradient = false;
let queueKeyUp = false;

document.addEventListener('keydown', (e) => {
  if (!isDrawing()) return;
  if (e.code === 'ControlLeft' && canvasHidden) {
    lineCanvas.style.display = '';
    disableScroll();
    canvasHidden = false;
  }
});

document.addEventListener('keyup', (e) => {
  if (e.code === 'Digit1' && e.shiftKey) color1 = activeColor;
  else if (e.code === 'Digit2' && e.shiftKey) color2 = activeColor;
  if (e.code === 'ControlLeft' && !canvasHidden) {
    if (drawingGradient) {
      queueKeyUp = true;
      return;
    }
    onKeyUp();
  }
});

function onKeyUp() {
  lineCanvas.style.display = 'none';
  canvasHidden = true;
  enableScroll();
  resetLineCanvas();
  document.removeEventListener('pointermove', savePos);
  document.removeEventListener('pointerup', pointerUpDraw);
}

function savePos(e) {
  previewPos = getPos(e);
  realPos = getRealPos(e);

  if (canvasHidden || !drawingLine) return;
  lineCanvas.clear();
  drawPreviewLine(previewPos);
  e.preventDefault();
}

colorsDiv.addEventListener('pointerdown', (e) => {
  if (!e.target.classList.contains('gameToolsColor') || e.button === 2) return;

  const colorStr = e.target.style.background;
  const match = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
  activeColor = match.slice(1, 4).map(str => parseInt(str));
  color1 = activeColor;
});

colorsDiv.addEventListener('contextmenu', (e) => {
  if (!e.target.classList.contains('gameToolsColor')) return;
  e.preventDefault();
  const colorStr = e.target.style.background;
  const match = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
  color2 = match.slice(1, 4).map(str => parseInt(str));
});

lineCanvas.addEventListener('pointerdown', (e) => {
  if (drawingGradient) return;
  origin = getPos(e);
  realOrigin = getRealPos(e);
  drawingLine = true;
  document.addEventListener('pointerup', pointerUpDraw);
  document.addEventListener('pointermove', savePos);
});

function pointerUpDraw(e) {
  document.removeEventListener('pointermove', savePos);
  document.removeEventListener('pointerup', pointerUpDraw);
  drawGradient(realOrigin.x, realOrigin.y, realPos.x, realPos.y);
  previewPos = getPos(e);
  realPos = getRealPos(e);
  resetLineCanvas();
}

async function drawGradient(x1, y1, x2, y2) {
  drawingGradient = true;
  const lab1 = rgb2lab(color1);
  const lab2 = rgb2lab(color2);
  const scale = canvas.getBoundingClientRect().width / lineCanvas.width;
  const offset = (parseInt(sizeInput.value) / 2) * scale;
  
  const max = Math.round((y2 - y1) / offset) * 1.6;
  
  for (let s = 0; s <= max; s += 1) {
    const t = mapRange(s, 0, max, 0, 1);
    const y = lerp(y1 + offset, y2 - offset, t);
    const color = lerpColors(lab1, lab2, t);
    
    changeColor(lab2rgb(color));
    drawLine(x1 + offset, y, x2 - offset, y);
    await delay(10);
  }
  
  canvas.save();
  drawingGradient = false;
  if (queueKeyUp) {
    onKeyUp();
    queueKeyUp = false;
  }
}

function mapRange(value, istart, istop, ostart, ostop) {
      return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

function delay(time) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(time), time);
  });
}

function changeColor(rgbArray) {
  const colorElement = document.querySelector('.gameToolsColor');
  const prevColor = colorElement.style.background;
  
  colorElement.style.background = `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})`;
  colorElement.dispatchEvent(new Event('pointerdown'));
  colorElement.style.background = prevColor;
}

function resetLineCanvas() {
  drawingLine = false;
  lineCanvas.clear();
}

function getPos(event) {
  const canvasRect = canvas.getBoundingClientRect();
  const canvasScale = canvas.width / canvasRect.width;
  return {
    x: (event.clientX - canvasRect.left) * canvasScale,
    y: (event.clientY - canvasRect.top) * canvasScale
  };
}

function getRealPos(event) {
  return {
    x: event.clientX,
    y: event.clientY
  };
}

function drawPreviewLine(pos) {
  const offset = parseInt(sizeInput.value) / 2;
  roundRect(
    lineCtx,
    origin.x,
    origin.y,
    pos.x - origin.x,
    pos.y - origin.y,
    offset,
    true,
    false,
    [
      color1,
      color2
    ]
  );
}

function roundRect(ctx, x, y, width, height, radius, fill, stroke, gradientColors) {
  if (typeof stroke === 'undefined') {
    stroke = true;
  }
  if (typeof radius === 'undefined') {
    radius = 5;
  }
  if (typeof radius === 'number') {
    radius = {tl: radius, tr: radius, br: radius, bl: radius};
  } else {
    var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
    for (var side in defaultRadius) {
      radius[side] = radius[side] || defaultRadius[side];
    }
  }
  ctx.beginPath();
  ctx.moveTo(x + radius.tl, y);
  ctx.lineTo(x + width - radius.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  ctx.lineTo(x + width, y + height - radius.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  ctx.lineTo(x + radius.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  ctx.lineTo(x, y + radius.tl);
  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  ctx.closePath();

  if (gradientColors) {
    const gradient = ctx.createLinearGradient(0, y, 0, height + y);
    const _color1 = `rgb(${gradientColors[0][0]}, ${gradientColors[0][1]}, ${gradientColors[0][2]}`;
    const _color2 = `rgb(${gradientColors[1][0]}, ${gradientColors[1][1]}, ${gradientColors[1][2]}`;
    gradient.addColorStop('0', _color1);
    gradient.addColorStop('1', _color2);
    ctx.strokeStyle = gradient;
    ctx.fillStyle = gradient;
  }

  if (fill) {
    ctx.fill();
  }
  if (stroke) {
    ctx.lineWidth = 5;
    ctx.stroke();
  }
}

function drawLine(x1, y1, x2, y2) {
  const coords = { x: x1, y: y1 };
  const newCoords = { x: x2, y: y2 };

  canvas.dispatchEvent(createMouseEvent('pointerdown', coords));
  canvas.dispatchEvent(createMouseEvent('pointermove', newCoords));
}

function createMouseEvent(name, pos, bubbles = false) {
  return new MouseEvent(name, {
    bubbles: bubbles,
    clientX: pos.x,
    clientY: pos.y,
    button: 0
  });
}

function lerp(a, b, t) {
  return a + (b - a) * t;
}

function lerpColors(lab1, lab2, t) {
  return [
    lab1[0] + (lab2[0] - lab1[0]) * t,
    lab1[1] + (lab2[1] - lab1[1]) * t,
    lab1[2] + (lab2[2] - lab1[2]) * t,
  ];
}

function rgb2lab(rgb) {
  let r = rgb[0] / 255,
    g = rgb[1] / 255,
    b = rgb[2] / 255,
    x, y, z;

  r = (r > 0.04045) ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92;
  g = (g > 0.04045) ? ((g + 0.055) / 1.055) ** 2.4 : g / 12.92;
  b = (b > 0.04045) ? ((b + 0.055) / 1.055) ** 2.4 : b / 12.92;

  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;

  x = (x > 0.008856) ? x ** (1 / 3) : (7.787 * x) + 16 / 116;
  y = (y > 0.008856) ? y ** (1 / 3) : (7.787 * y) + 16 / 116;
  z = (z > 0.008856) ? z ** (1 / 3) : (7.787 * z) + 16 / 116;

  return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)];
}

function lab2rgb(lab){
  let y = (lab[0] + 16) / 116,
    x = lab[1] / 500 + y,
    z = y - lab[2] / 200,
    r, g, b;

  x = 0.95047 * ((x * x * x > 0.008856) ? x * x * x : (x - 16/116) / 7.787);
  y = 1.00000 * ((y * y * y > 0.008856) ? y * y * y : (y - 16/116) / 7.787);
  z = 1.08883 * ((z * z * z > 0.008856) ? z * z * z : (z - 16/116) / 7.787);

  r = x *  3.2406 + y * -1.5372 + z * -0.4986;
  g = x * -0.9689 + y *  1.8758 + z *  0.0415;
  b = x *  0.0557 + y * -0.2040 + z *  1.0570;

  r = (r > 0.0031308) ? (1.055 * Math.pow(r, 1/2.4) - 0.055) : 12.92 * r;
  g = (g > 0.0031308) ? (1.055 * Math.pow(g, 1/2.4) - 0.055) : 12.92 * g;
  b = (b > 0.0031308) ? (1.055 * Math.pow(b, 1/2.4) - 0.055) : 12.92 * b;

  return [
    Math.max(0, Math.min(1, r)) * 255, 
    Math.max(0, Math.min(1, g)) * 255, 
    Math.max(0, Math.min(1, b)) * 255
  ];
}

const keys = { 32: 1, 37: 1, 38: 1, 39: 1, 40: 1 };

function preventDefault(e) {
  e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
  if (keys[e.keyCode]) {
    preventDefault(e);
    return false;
  }
}

function isDrawing() {
  return document.querySelector('#gameTools').style.display !== 'none' &&
           document.querySelector('body > div.game').style.display !== 'none' &&
           document.activeElement.tagName !== 'INPUT';
}

let supportsPassive = false;
try {
  window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
      return true;
    }
  }));
}
catch(e) {
  console.log(e);
}

const wheelOpt = supportsPassive ? { passive: false } : false;
const wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

function disableScroll() {
  window.addEventListener('DOMMouseScroll', preventDefault, false);
  window.addEventListener(wheelEvent, preventDefault, wheelOpt);
  window.addEventListener('touchmove', preventDefault, wheelOpt);
  window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

function enableScroll() {
  window.removeEventListener('DOMMouseScroll', preventDefault, false);
  window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
  window.removeEventListener('touchmove', preventDefault, wheelOpt);
  window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}