☰

LeetCode Draw

在 leetcode.cn 上添加绘图功能，右侧显示 Excalidraw 画板

  1. // ==UserScript==
  2. // @name         LeetCode Draw
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.3
  5. // @description  在 leetcode.cn 上添加绘图功能，右侧显示 Excalidraw 画板
  6. // @license      MIT
  7. // @author       mxgxxx
  8. // @match        https://leetcode.cn/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (() => {
  13.   'use strict';
  14.  
  15.   const storage = {
  16.     save: (width, isVisible) => {
  17.       localStorage.setItem('leetcode-draw-width', width);
  18.       localStorage.setItem('leetcode-draw-visible', isVisible);
  19.     },
  20.     load: () => ({
  21.       width: localStorage.getItem('leetcode-draw-width') || '50%',
  22.       isVisible: localStorage.getItem('leetcode-draw-visible') === 'true'
  23.     })
  24.   };
  25.  
  26.   const savedState = storage.load();
  27.   
  28.   const container = document.createElement('div');
  29.   container.style.position = 'fixed';
  30.   container.style.top = '0';
  31.   container.style.right = '0';
  32.   container.style.width = savedState.width;
  33.   container.style.height = '100%';
  34.   container.style.display = savedState.isVisible ? 'block' : 'none';
  35.   container.style.zIndex = '9999';
  36.   container.style.borderLeft = '1px solid #ccc';
  37.  
  38.   const resizer = document.createElement('div');
  39.   resizer.style.width = '10px';
  40.   resizer.style.height = '100%';
  41.   resizer.style.position = 'absolute';
  42.   resizer.style.left = '-5px';
  43.   resizer.style.top = '0';
  44.   resizer.style.cursor = 'ew-resize';
  45.   resizer.style.backgroundColor = '#ccc';
  46.   container.appendChild(resizer);
  47.  
  48.   const iframe = document.createElement('iframe');
  49.   iframe.src = 'https://excalidraw.com';
  50.   iframe.style.width = '100%';
  51.   iframe.style.height = '100%';
  52.   container.appendChild(iframe);
  53.  
  54.   let isDragging = false;
  55.   let currentX;
  56.   let initialWidth;
  57.  
  58.   function initDrag(e) {
  59.     if (e.button !== 0) return;
  60.     isDragging = true;
  61.     currentX = e.clientX;
  62.     initialWidth = container.getBoundingClientRect().width;
  63.     document.body.style.userSelect = 'none';
  64.     document.addEventListener('mousemove', handleDrag);
  65.     document.addEventListener('mouseup', stopDrag);
  66.     if (iframe) iframe.style.pointerEvents = 'none';
  67.   }
  68.  
  69.   function handleDrag(e) {
  70.     if (!isDragging) return;
  71.     const deltaX = currentX - e.clientX;
  72.     const newWidth = initialWidth + deltaX;
  73.     if (newWidth >= 200 && newWidth <= (window.innerWidth - 100)) {
  74.       container.style.width = `${newWidth}px`;
  75.       storage.save(container.style.width, container.style.display === 'block');
  76.     }
  77.   }
  78.  
  79.   function stopDrag() {
  80.     isDragging = false;
  81.     document.body.style.userSelect = '';
  82.     if (iframe) iframe.style.pointerEvents = 'auto';
  83.     document.removeEventListener('mousemove', handleDrag);
  84.     document.removeEventListener('mouseup', stopDrag);
  85.   }
  86.  
  87.   document.addEventListener('mousedown', (e) => {
  88.     const resizerRect = resizer.getBoundingClientRect();
  89.     if (e.clientX >= resizerRect.left && e.clientX <= resizerRect.right) {
  90.       initDrag(e);
  91.     }
  92.   });
  93.  
  94.   const toggleButton = document.createElement('button');
  95.   const iconSpan = document.createElement('span');
  96.   iconSpan.textContent = '🖌';
  97.   toggleButton.innerHTML = '';
  98.   toggleButton.appendChild(iconSpan);
  99.  
  100.   toggleButton.style.position = 'fixed';
  101.   toggleButton.style.right = '0';
  102.   toggleButton.style.top = '50%';
  103.   toggleButton.style.transform = 'translateY(-50%)';
  104.   toggleButton.style.padding = '8px';
  105.   toggleButton.style.borderRadius = '8px 0 0 8px';
  106.   toggleButton.style.backgroundColor = '#ffa116';
  107.   toggleButton.style.color = '#fff';
  108.   toggleButton.style.cursor = 'pointer';
  109.   toggleButton.style.opacity = '0.7';
  110.   toggleButton.style.width = '40px';
  111.   toggleButton.style.transition = 'opacity 0.3s';
  112.  
  113.   toggleButton.addEventListener('mouseover', () => {
  114.     toggleButton.style.opacity = '1';
  115.   });
  116.   toggleButton.addEventListener('mouseout', () => {
  117.     toggleButton.style.opacity = '0.7';
  118.   });
  119.  
  120.   toggleButton.style.zIndex = '10000';
  121.  
  122.   toggleButton.addEventListener('click', () => {
  123.     const newDisplay = container.style.display === 'none' ? 'block' : 'none';
  124.     container.style.display = newDisplay;
  125.     storage.save(container.style.width, newDisplay === 'block');
  126.   });
  127.  
  128.   document.body.appendChild(toggleButton);
  129.   document.body.appendChild(container);
  130. })();