☰

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.

  1. // ==UserScript==
  2. // @name        Gradient Tool
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/
  5. // @grant       none
  6. // @version     1.0
  7. // @author      Bell
  8. // @license     MIT
  9. // @copyright   2020, Faux (https://greasyfork.org/users/281093)
  10. // @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.
  11. // ==/UserScript==
  12. /* jshint esversion: 8 */
  13.  
  14. const canvas = document.querySelector('#canvas');
  15. const colorsDiv = document.querySelector('#gameToolsColors');
  16. const lineCanvas = document.createElement('canvas');
  17. const lineCtx = lineCanvas.getContext('2d');
  18. const sizeInput = document.querySelector("#gameToolsColorPreview");
  19. lineCanvas.style.position = 'absolute';
  20. lineCanvas.style.cursor = 'crosshair';
  21. lineCanvas.style.width = '100%';
  22. lineCanvas.style.display = 'none';
  23. lineCanvas.style.userSelect = 'none';
  24. lineCanvas.style.zIndex = '2';
  25. lineCanvas.style.filter = 'opacity(0.7)';
  26. lineCanvas.oncontextmenu = () => { return false; };
  27. [lineCanvas.width, lineCanvas.height] = [canvas.width, canvas.height];
  28. canvas.parentElement.insertBefore(lineCanvas, canvas);
  29.  
  30. lineCanvas.clear = () => {
  31.   lineCtx.clearRect(0, 0, lineCanvas.width, lineCanvas.height);
  32. };
  33.  
  34. canvas.save = () => {
  35.   canvas.dispatchEvent(createMouseEvent('pointerup', { x: 0, y: 0 }, true));
  36. };
  37.  
  38. let origin = {};
  39. let realOrigin = {};
  40. let previewPos = {};
  41. let realPos = {};
  42. let canvasHidden = true;
  43. let drawingLine = false;
  44. let activeColor = [0, 0, 0];
  45. let color1 = [0, 200, 0];
  46. let color2 = [250, 0, 0];
  47. let drawingGradient = false;
  48. let queueKeyUp = false;
  49.  
  50. document.addEventListener('keydown', (e) => {
  51.   if (!isDrawing()) return;
  52.   if (e.code === 'ControlLeft' && canvasHidden) {
  53.     lineCanvas.style.display = '';
  54.     disableScroll();
  55.     canvasHidden = false;
  56.   }
  57. });
  58.  
  59. document.addEventListener('keyup', (e) => {
  60.   if (e.code === 'Digit1' && e.shiftKey) color1 = activeColor;
  61.   else if (e.code === 'Digit2' && e.shiftKey) color2 = activeColor;
  62.   if (e.code === 'ControlLeft' && !canvasHidden) {
  63.     if (drawingGradient) {
  64.       queueKeyUp = true;
  65.       return;
  66.     }
  67.     onKeyUp();
  68.   }
  69. });
  70.  
  71. function onKeyUp() {
  72.   lineCanvas.style.display = 'none';
  73.   canvasHidden = true;
  74.   enableScroll();
  75.   resetLineCanvas();
  76.   document.removeEventListener('pointermove', savePos);
  77.   document.removeEventListener('pointerup', pointerUpDraw);
  78. }
  79.  
  80. function savePos(e) {
  81.   previewPos = getPos(e);
  82.   realPos = getRealPos(e);
  83.  
  84.   if (canvasHidden || !drawingLine) return;
  85.   lineCanvas.clear();
  86.   drawPreviewLine(previewPos);
  87.   e.preventDefault();
  88. }
  89.  
  90. colorsDiv.addEventListener('pointerdown', (e) => {
  91.   if (!e.target.classList.contains('gameToolsColor') || e.button === 2) return;
  92.  
  93.   const colorStr = e.target.style.background;
  94.   const match = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
  95.   activeColor = match.slice(1, 4).map(str => parseInt(str));
  96.   color1 = activeColor;
  97. });
  98.  
  99. colorsDiv.addEventListener('contextmenu', (e) => {
  100.   if (!e.target.classList.contains('gameToolsColor')) return;
  101.   e.preventDefault();
  102.   const colorStr = e.target.style.background;
  103.   const match = colorStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/);
  104.   color2 = match.slice(1, 4).map(str => parseInt(str));
  105. });
  106.  
  107. lineCanvas.addEventListener('pointerdown', (e) => {
  108.   if (drawingGradient) return;
  109.   origin = getPos(e);
  110.   realOrigin = getRealPos(e);
  111.   drawingLine = true;
  112.   document.addEventListener('pointerup', pointerUpDraw);
  113.   document.addEventListener('pointermove', savePos);
  114. });
  115.  
  116. function pointerUpDraw(e) {
  117.   document.removeEventListener('pointermove', savePos);
  118.   document.removeEventListener('pointerup', pointerUpDraw);
  119.   drawGradient(realOrigin.x, realOrigin.y, realPos.x, realPos.y);
  120.   previewPos = getPos(e);
  121.   realPos = getRealPos(e);
  122.   resetLineCanvas();
  123. }
  124.  
  125. async function drawGradient(x1, y1, x2, y2) {
  126.   drawingGradient = true;
  127.   const lab1 = rgb2lab(color1);
  128.   const lab2 = rgb2lab(color2);
  129.   const scale = canvas.getBoundingClientRect().width / lineCanvas.width;
  130.   const offset = (parseInt(sizeInput.value) / 2) * scale;
  131.   
  132.   const max = Math.round((y2 - y1) / offset) * 1.6;
  133.   
  134.   for (let s = 0; s <= max; s += 1) {
  135.     const t = mapRange(s, 0, max, 0, 1);
  136.     const y = lerp(y1 + offset, y2 - offset, t);
  137.     const color = lerpColors(lab1, lab2, t);
  138.     
  139.     changeColor(lab2rgb(color));
  140.     drawLine(x1 + offset, y, x2 - offset, y);
  141.     await delay(10);
  142.   }
  143.   
  144.   canvas.save();
  145.   drawingGradient = false;
  146.   if (queueKeyUp) {
  147.     onKeyUp();
  148.     queueKeyUp = false;
  149.   }
  150. }
  151.  
  152. function mapRange(value, istart, istop, ostart, ostop) {
  153.       return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
  154. }
  155.  
  156. function delay(time) {
  157.   return new Promise((resolve) => {
  158.     setTimeout(() => resolve(time), time);
  159.   });
  160. }
  161.  
  162. function changeColor(rgbArray) {
  163.   const colorElement = document.querySelector('.gameToolsColor');
  164.   const prevColor = colorElement.style.background;
  165.   
  166.   colorElement.style.background = `rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})`;
  167.   colorElement.dispatchEvent(new Event('pointerdown'));
  168.   colorElement.style.background = prevColor;
  169. }
  170.  
  171. function resetLineCanvas() {
  172.   drawingLine = false;
  173.   lineCanvas.clear();
  174. }
  175.  
  176. function getPos(event) {
  177.   const canvasRect = canvas.getBoundingClientRect();
  178.   const canvasScale = canvas.width / canvasRect.width;
  179.   return {
  180.     x: (event.clientX - canvasRect.left) * canvasScale,
  181.     y: (event.clientY - canvasRect.top) * canvasScale
  182.   };
  183. }
  184.  
  185. function getRealPos(event) {
  186.   return {
  187.     x: event.clientX,
  188.     y: event.clientY
  189.   };
  190. }
  191.  
  192. function drawPreviewLine(pos) {
  193.   const offset = parseInt(sizeInput.value) / 2;
  194.   roundRect(
  195.     lineCtx,
  196.     origin.x,
  197.     origin.y,
  198.     pos.x - origin.x,
  199.     pos.y - origin.y,
  200.     offset,
  201.     true,
  202.     false,
  203.     [
  204.       color1,
  205.       color2
  206.     ]
  207.   );
  208. }
  209.  
  210. function roundRect(ctx, x, y, width, height, radius, fill, stroke, gradientColors) {
  211.   if (typeof stroke === 'undefined') {
  212.     stroke = true;
  213.   }
  214.   if (typeof radius === 'undefined') {
  215.     radius = 5;
  216.   }
  217.   if (typeof radius === 'number') {
  218.     radius = {tl: radius, tr: radius, br: radius, bl: radius};
  219.   } else {
  220.     var defaultRadius = {tl: 0, tr: 0, br: 0, bl: 0};
  221.     for (var side in defaultRadius) {
  222.       radius[side] = radius[side] || defaultRadius[side];
  223.     }
  224.   }
  225.   ctx.beginPath();
  226.   ctx.moveTo(x + radius.tl, y);
  227.   ctx.lineTo(x + width - radius.tr, y);
  228.   ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  229.   ctx.lineTo(x + width, y + height - radius.br);
  230.   ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  231.   ctx.lineTo(x + radius.bl, y + height);
  232.   ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  233.   ctx.lineTo(x, y + radius.tl);
  234.   ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  235.   ctx.closePath();
  236.  
  237.   if (gradientColors) {
  238.     const gradient = ctx.createLinearGradient(0, y, 0, height + y);
  239.     const _color1 = `rgb(${gradientColors[0][0]}, ${gradientColors[0][1]}, ${gradientColors[0][2]}`;
  240.     const _color2 = `rgb(${gradientColors[1][0]}, ${gradientColors[1][1]}, ${gradientColors[1][2]}`;
  241.     gradient.addColorStop('0', _color1);
  242.     gradient.addColorStop('1', _color2);
  243.     ctx.strokeStyle = gradient;
  244.     ctx.fillStyle = gradient;
  245.   }
  246.  
  247.   if (fill) {
  248.     ctx.fill();
  249.   }
  250.   if (stroke) {
  251.     ctx.lineWidth = 5;
  252.     ctx.stroke();
  253.   }
  254. }
  255.  
  256. function drawLine(x1, y1, x2, y2) {
  257.   const coords = { x: x1, y: y1 };
  258.   const newCoords = { x: x2, y: y2 };
  259.  
  260.   canvas.dispatchEvent(createMouseEvent('pointerdown', coords));
  261.   canvas.dispatchEvent(createMouseEvent('pointermove', newCoords));
  262. }
  263.  
  264. function createMouseEvent(name, pos, bubbles = false) {
  265.   return new MouseEvent(name, {
  266.     bubbles: bubbles,
  267.     clientX: pos.x,
  268.     clientY: pos.y,
  269.     button: 0
  270.   });
  271. }
  272.  
  273. function lerp(a, b, t) {
  274.   return a + (b - a) * t;
  275. }
  276.  
  277. function lerpColors(lab1, lab2, t) {
  278.   return [
  279.     lab1[0] + (lab2[0] - lab1[0]) * t,
  280.     lab1[1] + (lab2[1] - lab1[1]) * t,
  281.     lab1[2] + (lab2[2] - lab1[2]) * t,
  282.   ];
  283. }
  284.  
  285. function rgb2lab(rgb) {
  286.   let r = rgb[0] / 255,
  287.     g = rgb[1] / 255,
  288.     b = rgb[2] / 255,
  289.     x, y, z;
  290.  
  291.   r = (r > 0.04045) ? ((r + 0.055) / 1.055) ** 2.4 : r / 12.92;
  292.   g = (g > 0.04045) ? ((g + 0.055) / 1.055) ** 2.4 : g / 12.92;
  293.   b = (b > 0.04045) ? ((b + 0.055) / 1.055) ** 2.4 : b / 12.92;
  294.  
  295.   x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
  296.   y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
  297.   z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
  298.  
  299.   x = (x > 0.008856) ? x ** (1 / 3) : (7.787 * x) + 16 / 116;
  300.   y = (y > 0.008856) ? y ** (1 / 3) : (7.787 * y) + 16 / 116;
  301.   z = (z > 0.008856) ? z ** (1 / 3) : (7.787 * z) + 16 / 116;
  302.  
  303.   return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)];
  304. }
  305.  
  306. function lab2rgb(lab){
  307.   let y = (lab[0] + 16) / 116,
  308.     x = lab[1] / 500 + y,
  309.     z = y - lab[2] / 200,
  310.     r, g, b;
  311.  
  312.   x = 0.95047 * ((x * x * x > 0.008856) ? x * x * x : (x - 16/116) / 7.787);
  313.   y = 1.00000 * ((y * y * y > 0.008856) ? y * y * y : (y - 16/116) / 7.787);
  314.   z = 1.08883 * ((z * z * z > 0.008856) ? z * z * z : (z - 16/116) / 7.787);
  315.  
  316.   r = x *  3.2406 + y * -1.5372 + z * -0.4986;
  317.   g = x * -0.9689 + y *  1.8758 + z *  0.0415;
  318.   b = x *  0.0557 + y * -0.2040 + z *  1.0570;
  319.  
  320.   r = (r > 0.0031308) ? (1.055 * Math.pow(r, 1/2.4) - 0.055) : 12.92 * r;
  321.   g = (g > 0.0031308) ? (1.055 * Math.pow(g, 1/2.4) - 0.055) : 12.92 * g;
  322.   b = (b > 0.0031308) ? (1.055 * Math.pow(b, 1/2.4) - 0.055) : 12.92 * b;
  323.  
  324.   return [
  325.     Math.max(0, Math.min(1, r)) * 255, 
  326.     Math.max(0, Math.min(1, g)) * 255, 
  327.     Math.max(0, Math.min(1, b)) * 255
  328.   ];
  329. }
  330.  
  331. const keys = { 32: 1, 37: 1, 38: 1, 39: 1, 40: 1 };
  332.  
  333. function preventDefault(e) {
  334.   e.preventDefault();
  335. }
  336.  
  337. function preventDefaultForScrollKeys(e) {
  338.   if (keys[e.keyCode]) {
  339.     preventDefault(e);
  340.     return false;
  341.   }
  342. }
  343.  
  344. function isDrawing() {
  345.   return document.querySelector('#gameTools').style.display !== 'none' &&
  346.            document.querySelector('body > div.game').style.display !== 'none' &&
  347.            document.activeElement.tagName !== 'INPUT';
  348. }
  349.  
  350. let supportsPassive = false;
  351. try {
  352.   window.addEventListener('test', null, Object.defineProperty({}, 'passive', {
  353.     get: function() {
  354.       supportsPassive = true;
  355.       return true;
  356.     }
  357.   }));
  358. }
  359. catch(e) {
  360.   console.log(e);
  361. }
  362.  
  363. const wheelOpt = supportsPassive ? { passive: false } : false;
  364. const wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';
  365.  
  366. function disableScroll() {
  367.   window.addEventListener('DOMMouseScroll', preventDefault, false);
  368.   window.addEventListener(wheelEvent, preventDefault, wheelOpt);
  369.   window.addEventListener('touchmove', preventDefault, wheelOpt);
  370.   window.addEventListener('keydown', preventDefaultForScrollKeys, false);
  371. }
  372.  
  373. function enableScroll() {
  374.   window.removeEventListener('DOMMouseScroll', preventDefault, false);
  375.   window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
  376.   window.removeEventListener('touchmove', preventDefault, wheelOpt);
  377.   window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
  378. }