☰

🍳 Zoom

🍳 and 🔍. Space + drag to pan, Z to zoom, and shift + Z to reset

  1. // ==UserScript==
  2. // @name        🍳 Zoom
  3. // @namespace   https://greasyfork.org/users/281093
  4. // @match       https://sketchful.io/
  5. // @grant       none
  6. // @version     1.2
  7. // @author      Bell
  8. // @description 🍳 and 🔍. Space + drag to pan, Z to zoom, and shift + Z to reset
  9. // @run-at      body-end
  10. // ==/UserScript==
  11.  
  12. // Options
  13. const options = {
  14. 	onlyFreedraw: true,
  15. 	resetOnZoomOut: true
  16. }
  17.  
  18. //////
  19. const canvas = document.querySelector('#canvas');
  20. const zoomContainer = document.createElement('div');
  21. const sheet =
  22.   window.document.styleSheets[window.document.styleSheets.length - 1];
  23. const resetObserver = new MutationObserver(resetCanvas);
  24. const panContainer = document.createElement('div');
  25.  
  26. let panning = false;
  27. const startPos = {};
  28. let canvasOffset = {};
  29. let zoomed = false;
  30.  
  31. (function init() {
  32. 	panContainer.style.position = 'relative';
  33. 	panContainer.style.transition = 'transform 0.1s ease';
  34. 	zoomContainer.style.overflow = 'hidden';
  35. 	zoomContainer.id = 'zoomContainer';
  36. 	sheet.insertRule('.dark #zoomContainer { background: #2C2F33}');
  37. 	sheet.insertRule('#zoomContainer { background: #c8c8c8}');
  38.  
  39. 	wrap(canvas, zoomContainer);
  40. 	wrap(canvas, panContainer);
  41. 	resetCanvas();
  42.  
  43. 	resetObserver.observe(document.querySelector('#gameSticky'), {
  44. 		childList: true,
  45. 	});
  46. 	
  47. 	document.addEventListener('keydown', keyDown, false);
  48. 	document.addEventListener('keyup', stopPanning, false);
  49. 	zoomContainer.addEventListener('pointerdown', getStartPos, true);
  50. 	zoomContainer.addEventListener('pointermove', moveCanvas, true);
  51. 	document.addEventListener('pointerup', stopMoving, false);
  52. })();
  53.  
  54. function wrap(toWrap, wrapper) {
  55. 	toWrap.parentNode.appendChild(wrapper);
  56. 	wrapper.appendChild(toWrap);
  57. }
  58.  
  59. function regenerateCursor() {
  60. 	const selectedTool = document.querySelector('.gameToolsSelected');
  61. 	selectedTool.id === 'gameToolsDraw'
  62. 		? selectedTool.nextSibling.click()
  63. 		: selectedTool.previousSibling.click();
  64. 	selectedTool.click();
  65. }
  66.  
  67. function stopPanning(e) {
  68. 	if (e.code !== 'Space' || !panning) return;
  69. 	e.preventDefault();
  70. 	regenerateCursor();
  71. 	zoomContainer.style.cursor = 'default';
  72. 	panning = false;
  73. }
  74.  
  75. function keyDown(e) {
  76. 	if (!isDrawing() || !isFreeDraw() && options.onlyFreedraw) return;
  77. 	switch (e.code) {
  78. 	case 'Space':
  79. 		if (e.shiftKey) return;
  80. 		startPanning();
  81. 		e.preventDefault();
  82. 		break;
  83. 	case 'KeyZ':
  84. 		if (e.ctrlKey) {
  85. 			return;
  86. 		}
  87. 		else if (e.shiftKey && !options.resetOnZoomOut) {
  88. 		  	resetCanvas();
  89. 		  	e.stopImmediatePropagation();
  90. 		  	return;
  91. 		}
  92. 		toggleZoom();
  93. 		e.stopImmediatePropagation();
  94. 	}
  95. }
  96.  
  97. function toggleZoom() {
  98. 	panContainer.style.transform = zoomed ? '' : 'scale(2)';
  99. 	if (zoomed && options.resetOnZoomOut) resetCanvas();
  100.   	else zoomed = !zoomed;
  101. }
  102.  
  103. function startPanning() {
  104. 	if (panning || !zoomed && options.resetOnZoomOut) return;
  105. 	canvas.style.cursor = 'grab';
  106. 	zoomContainer.style.cursor = 'grab';
  107. 	panning = true;
  108. }
  109.  
  110. function moveCanvas(e) {
  111. 	if (!panning || !e.buttons) return;
  112. 	const offset = {};
  113. 	offset.x = e.clientX - startPos.x;
  114. 	offset.y = e.clientY - startPos.y;
  115. 	panContainer.style.left = `${canvasOffset.x + offset.x}px`;
  116. 	panContainer.style.top = `${canvasOffset.y + offset.y}px`;
  117. 	e.preventDefault();
  118. 	e.stopImmediatePropagation();
  119. }
  120.  
  121. function getStartPos(e) {
  122. 	if (!panning) return;
  123. 	startPos.x = e.clientX;
  124. 	startPos.y = e.clientY;
  125. 	canvas.style.cursor = 'grabbing';
  126. 	zoomContainer.style.cursor = 'grabbing';
  127. 	e.preventDefault();
  128. 	e.stopImmediatePropagation();
  129. }
  130.  
  131. function stopMoving(e) {
  132. 	canvasOffset.x = parseInt(panContainer.style.left.match(/-?\d+/)[0]);
  133. 	canvasOffset.y = parseInt(panContainer.style.top.match(/-?\d+/)[0]);
  134. 	if (panning) {
  135. 		canvas.style.cursor = 'grab';
  136. 		zoomContainer.style.cursor = 'grab';
  137. 		e.stopImmediatePropagation();
  138. 	}
  139. }
  140.  
  141. function resetCanvas() {
  142. 	panContainer.style.left = '0px';
  143. 	panContainer.style.top = '0px';
  144. 	panContainer.style.transform = '';
  145. 	zoomed = false;
  146. 	canvasOffset = { x: 0, y: 0 };
  147. }
  148.  
  149. function isDrawing() {
  150. 	return (
  151. 		document.querySelector('#gameTools').style.display !== 'none' &&
  152.     document.querySelector('body > div.game').style.display !== 'none' &&
  153.     document.activeElement !== document.querySelector('#gameChatInput')
  154. 	);
  155. }
  156.  
  157. function isFreeDraw() {
  158. 	return (
  159. 		canvas.style.display !== 'none' &&
  160.     document.querySelector('#gameClock').style.display === 'none' &&
  161.     document.querySelector('#gameSettings').style.display === 'none'
  162. 	);
  163. }