// ==UserScript== // @name Transparent Infinite Whiteboard // @namespace tweeks.io // @version 1.4 // @description Overlay a transparent infinite whiteboard on any page. Draw freehand (smooth curves), erase whole strokes or parts, add shapes/arrows/text. Pan the canvas for infinite space. Toggle on/off via a floating tab button. // @author Tweeks // @match *://*/* // @grant TW_notifications // ==/UserScript== (function () { 'use strict'; // ─── State ─────────────────────────────────────────────────────────────── let active = false; // tools: pen | eraser | stroke-eraser | line | rect | circle | arrow | text | move // triangle | diamond | star | pentagon | hexagon | roundrect let tool = 'pen'; let color = '#ff3b3b'; let lineWidth = 3; let eraserSize = 24; let drawing = false; let startX = 0, startY = 0; let lastX = 0, lastY = 0; let textInput = null; // ─── Stroke tracking (for stroke eraser) ───────────────────────────────── const strokes = []; let currentStroke = null; // ─── Infinite canvas pan state ──────────────────────────────────────────── const CANVAS_MULT = 5; let panX = 0, panY = 0; let panStartX = 0, panStartY = 0; let panStartPanX = 0, panStartPanY = 0; let isPanning = false; // ─── RAF / preview state ────────────────────────────────────────────────── // Instead of getImageData/putImageData for shape preview, we use a separate // overlay canvas that only holds the in-progress shape preview. let rafId = null; let pendingPenPoints = []; // buffered points to draw in next RAF frame let previewX2 = 0, previewY2 = 0; // current mouse pos for shape preview // ─── Root container ─────────────────────────────────────────────────────── const root = document.createElement('div'); root.id = 'twb-root'; root.style.cssText = [ 'position:fixed', 'top:0', 'left:0', 'width:100vw', 'height:100vh', 'pointer-events:none', 'z-index:2147482000', 'font-family:sans-serif', 'overflow:hidden' ].join(';'); document.body.appendChild(root); // ─── Main (persistent) canvas ───────────────────────────────────────────── const canvas = document.createElement('canvas'); canvas.id = 'twb-canvas'; canvas.style.cssText = [ 'position:absolute', 'top:0', 'left:0', 'cursor:crosshair', 'pointer-events:none', 'touch-action:none', 'transform-origin:top left' ].join(';'); root.appendChild(canvas); const ctx = canvas.getContext('2d'); // ─── Preview (overlay) canvas ───────────────────────────────────────────── // Sits on top of main canvas; only used for live shape preview while dragging. const previewCanvas = document.createElement('canvas'); previewCanvas.id = 'twb-preview'; previewCanvas.style.cssText = [ 'position:absolute', 'top:0', 'left:0', 'pointer-events:none', 'touch-action:none', 'transform-origin:top left' ].join(';'); root.appendChild(previewCanvas); const pctx = previewCanvas.getContext('2d'); function resizeCanvas() { const tmp = document.createElement('canvas'); tmp.width = canvas.width; tmp.height = canvas.height; tmp.getContext('2d').drawImage(canvas, 0, 0); canvas.width = window.innerWidth * CANVAS_MULT; canvas.height = window.innerHeight * CANVAS_MULT; previewCanvas.width = canvas.width; previewCanvas.height = canvas.height; ctx.drawImage(tmp, 0, 0); applyCanvasTransform(); } canvas.width = window.innerWidth * CANVAS_MULT; canvas.height = window.innerHeight * CANVAS_MULT; previewCanvas.width = canvas.width; previewCanvas.height = canvas.height; panX = Math.floor((canvas.width - window.innerWidth) / 2); panY = Math.floor((canvas.height - window.innerHeight) / 2); function applyCanvasTransform() { const t = 'translate(' + (-panX) + 'px,' + (-panY) + 'px)'; canvas.style.transform = t; previewCanvas.style.transform = t; } applyCanvasTransform(); window.addEventListener('resize', resizeCanvas); // ─── Tool button style helper ───────────────────────────────────────────── function toolBtnStyle(isActive) { return [ 'width:34px', 'height:34px', 'border-radius:8px', 'border:' + (isActive ? '2px solid #7c9fff' : '1px solid rgba(255,255,255,0.15)'), 'background:' + (isActive ? 'rgba(100,150,255,0.25)' : 'rgba(255,255,255,0.07)'), 'color:#fff', 'font-size:11px', 'cursor:pointer', 'display:flex', 'align-items:center', 'justify-content:center', 'transition:background 0.15s', 'padding:0', 'font-family:sans-serif', 'font-weight:bold' ].join(';'); } // ─── Toolbar ────────────────────────────────────────────────────────────── const toolbar = document.createElement('div'); toolbar.id = 'twb-toolbar'; toolbar.style.cssText = [ 'position:fixed', 'top:50%', 'left:12px', 'transform:translateY(-50%)', 'display:none', 'flex-direction:column', 'align-items:center', 'gap:5px', 'background:rgba(20,20,30,0.88)', 'border:1px solid rgba(255,255,255,0.15)', 'border-radius:14px', 'padding:10px 7px', 'pointer-events:all', 'z-index:2147482100', 'box-shadow:0 4px 24px rgba(0,0,0,0.45)', 'user-select:none', 'max-height:96vh', 'overflow-y:auto', 'overflow-x:hidden' ].join(';'); const tools = [ { id: 'move', icon: '\u2725', title: 'Move/Pan canvas (M)' }, { id: 'pen', icon: 'P', title: 'Pen - freehand (P)' }, { id: 'eraser', icon: 'E', title: 'Part Eraser - erase pixels (E)' }, { id: 'stroke-eraser', icon: 'SE', title: 'Stroke Eraser - erase whole stroke (Q)' }, { id: 'line', icon: '/', title: 'Line (L)' }, { id: 'rect', icon: '[]', title: 'Rectangle (R)' }, { id: 'roundrect', icon: '()', title: 'Rounded Rectangle (U)' }, { id: 'circle', icon: 'O', title: 'Circle/Ellipse (C)' }, { id: 'triangle', icon: '\u25B3', title: 'Triangle (G)' }, { id: 'diamond', icon: '\u25C7', title: 'Diamond (D)' }, { id: 'pentagon', icon: '\u2B20', title: 'Pentagon (5)' }, { id: 'hexagon', icon: '\u2B21', title: 'Hexagon (6)' }, { id: 'star', icon: '\u2606', title: 'Star (S)' }, { id: 'arrow', icon: '->', title: 'Arrow (A)' }, { id: 'text', icon: 'T', title: 'Text (X)' }, ]; const toolBtns = {}; tools.forEach(function(t) { const btn = document.createElement('button'); btn.title = t.title; btn.textContent = t.icon; btn.dataset.tool = t.id; btn.style.cssText = toolBtnStyle(t.id === tool); btn.addEventListener('click', function() { selectTool(t.id); }); toolbar.appendChild(btn); toolBtns[t.id] = btn; }); // Separator function makeSep() { const s = document.createElement('div'); s.style.cssText = 'width:28px;height:1px;background:rgba(255,255,255,0.18);margin:2px 0'; return s; } toolbar.appendChild(makeSep()); // Color picker const colorPicker = document.createElement('input'); colorPicker.type = 'color'; colorPicker.value = color; colorPicker.title = 'Stroke color'; colorPicker.style.cssText = 'width:30px;height:30px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none'; colorPicker.addEventListener('input', function(e) { color = e.target.value; }); toolbar.appendChild(colorPicker); // Line width slider const widthSlider = document.createElement('input'); widthSlider.type = 'range'; widthSlider.min = 1; widthSlider.max = 20; widthSlider.value = lineWidth; widthSlider.title = 'Stroke width'; widthSlider.style.cssText = 'writing-mode:vertical-lr;direction:rtl;width:28px;height:80px;cursor:pointer;accent-color:#7c9fff'; widthSlider.addEventListener('input', function(e) { lineWidth = parseInt(e.target.value); }); toolbar.appendChild(widthSlider); // Eraser size slider const eraserSlider = document.createElement('input'); eraserSlider.type = 'range'; eraserSlider.min = 8; eraserSlider.max = 80; eraserSlider.value = eraserSize; eraserSlider.title = 'Eraser size'; eraserSlider.style.cssText = 'writing-mode:vertical-lr;direction:rtl;width:28px;height:60px;cursor:pointer;accent-color:#ff8888'; eraserSlider.addEventListener('input', function(e) { eraserSize = parseInt(e.target.value); if (tool === 'eraser') updateCursor(); }); toolbar.appendChild(eraserSlider); toolbar.appendChild(makeSep()); // Clear button const clearBtn = document.createElement('button'); clearBtn.textContent = 'CLR'; clearBtn.title = 'Clear all (Del)'; clearBtn.style.cssText = toolBtnStyle(false); clearBtn.addEventListener('click', clearCanvas); toolbar.appendChild(clearBtn); // Undo button const undoBtn = document.createElement('button'); undoBtn.textContent = '\u21A9'; undoBtn.title = 'Undo (Ctrl+Z)'; undoBtn.style.cssText = toolBtnStyle(false); undoBtn.addEventListener('click', undo); toolbar.appendChild(undoBtn); toolbar.appendChild(makeSep()); // Hide annotations button let annotationsVisible = true; const hideAnnotBtn = document.createElement('button'); hideAnnotBtn.textContent = 'H'; hideAnnotBtn.title = 'Hide/Show annotations (H key)'; hideAnnotBtn.style.cssText = toolBtnStyle(false); hideAnnotBtn.addEventListener('click', toggleAnnotations); toolbar.appendChild(hideAnnotBtn); // Pan label const panLabel = document.createElement('div'); panLabel.title = 'Current pan offset'; panLabel.style.cssText = [ 'color:rgba(255,255,255,0.45)', 'font-size:9px', 'text-align:center', 'line-height:1.3', 'margin-top:2px', 'letter-spacing:0.3px', 'pointer-events:none', 'user-select:none' ].join(';'); panLabel.textContent = 'PAN\n0,0'; toolbar.appendChild(panLabel); function updatePanLabel() { const ox = panX - Math.floor((window.innerWidth * CANVAS_MULT - window.innerWidth) / 2); const oy = panY - Math.floor((window.innerHeight * CANVAS_MULT - window.innerHeight) / 2); panLabel.textContent = 'PAN\n' + ox + ',' + oy; } function toggleAnnotations() { annotationsVisible = !annotationsVisible; canvas.style.opacity = annotationsVisible ? '1' : '0'; canvas.style.transition = 'opacity 0.25s ease'; previewCanvas.style.opacity = annotationsVisible ? '1' : '0'; hideAnnotBtn.style.cssText = toolBtnStyle(!annotationsVisible); hideAnnotBtn.textContent = annotationsVisible ? 'H' : 'S'; hideAnnotBtn.title = annotationsVisible ? 'Hide annotations (H key)' : 'Show annotations (H key)'; TW_toast( annotationsVisible ? 'Annotations shown' : 'Annotations hidden temporarily', annotationsVisible ? 'success' : 'info', 'Whiteboard', 1800 ); } root.appendChild(toolbar); // ─── Toggle tab button ──────────────────────────────────────────────────── const toggleBtn = document.createElement('button'); toggleBtn.id = 'twb-toggle'; toggleBtn.innerHTML = '✎
BOARD'; toggleBtn.title = 'Toggle Whiteboard (Ctrl+Shift+W)'; toggleBtn.style.cssText = [ 'position:fixed', 'bottom:80px', 'right:0', 'width:44px', 'height:56px', 'background:rgba(30,30,45,0.92)', 'color:#fff', 'border:1px solid rgba(255,255,255,0.2)', 'border-right:none', 'border-radius:10px 0 0 10px', 'cursor:pointer', 'pointer-events:all', 'z-index:2147482200', 'display:flex', 'flex-direction:column', 'align-items:center', 'justify-content:center', 'line-height:1.2', 'box-shadow:-2px 2px 10px rgba(0,0,0,0.4)', 'transition:background 0.2s,transform 0.15s', 'font-family:sans-serif', 'padding:0' ].join(';'); toggleBtn.addEventListener('mouseenter', function() { toggleBtn.style.background = active ? 'rgba(80,160,255,0.95)' : 'rgba(50,50,70,0.97)'; toggleBtn.style.transform = 'translateX(-3px)'; }); toggleBtn.addEventListener('mouseleave', function() { toggleBtn.style.background = active ? 'rgba(60,130,230,0.92)' : 'rgba(30,30,45,0.92)'; toggleBtn.style.transform = 'translateX(0)'; }); toggleBtn.addEventListener('click', toggleWhiteboard); root.appendChild(toggleBtn); // ─── Undo history ───────────────────────────────────────────────────────── const history = []; const MAX_HISTORY = 30; function saveHistory() { if (history.length >= MAX_HISTORY) history.shift(); history.push(ctx.getImageData(0, 0, canvas.width, canvas.height)); } function undo() { if (history.length === 0) return; const prev = history.pop(); ctx.putImageData(prev, 0, 0); if (strokes.length > 0) strokes.pop(); } function clearCanvas() { saveHistory(); ctx.clearRect(0, 0, canvas.width, canvas.height); pctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); strokes.length = 0; } // ─── Tool selection ─────────────────────────────────────────────────────── function selectTool(id) { tool = id; Object.keys(toolBtns).forEach(function(k) { toolBtns[k].style.cssText = toolBtnStyle(k === id); }); updateCursor(); } function updateCursor() { if (!active) { canvas.style.cursor = 'default'; previewCanvas.style.cursor = 'default'; return; } let cur = 'crosshair'; if (tool === 'move') { cur = isPanning ? 'grabbing' : 'grab'; } else if (tool === 'eraser') { const s = eraserSize; const svgStr = ""; cur = 'url("data:image/svg+xml,' + encodeURIComponent(svgStr) + '") ' + (s/2) + ' ' + (s/2) + ', crosshair'; } else if (tool === 'stroke-eraser') { const s = 22; const svgStr = ""; cur = 'url("data:image/svg+xml,' + encodeURIComponent(svgStr) + '") ' + (s/2) + ' ' + (s/2) + ', crosshair'; } else if (tool === 'text') { cur = 'text'; } canvas.style.cursor = cur; previewCanvas.style.cursor = cur; } // ─── Toggle whiteboard ──────────────────────────────────────────────────── function toggleWhiteboard() { active = !active; const target = active ? previewCanvas : canvas; // The topmost canvas captures pointer events canvas.style.pointerEvents = 'none'; previewCanvas.style.pointerEvents = active ? 'all' : 'none'; canvas.style.opacity = active ? '1' : '0'; previewCanvas.style.opacity = active ? '1' : '0'; canvas.style.transition = 'opacity 0.25s ease'; previewCanvas.style.transition = 'opacity 0.25s ease'; toolbar.style.display = active ? 'flex' : 'none'; toggleBtn.style.background = active ? 'rgba(60,130,230,0.92)' : 'rgba(30,30,45,0.92)'; toggleBtn.innerHTML = active ? '✎
ON' : '✎
BOARD'; updateCursor(); if (active) { annotationsVisible = true; hideAnnotBtn.textContent = 'H'; hideAnnotBtn.title = 'Hide annotations (H key)'; hideAnnotBtn.style.cssText = toolBtnStyle(false); TW_toast('Whiteboard ON - Ctrl+Shift+W to toggle', 'success', 'Whiteboard', 2500); } else { TW_toast('Whiteboard hidden', 'info', 'Whiteboard', 2200); } } // ─── Drawing helpers ────────────────────────────────────────────────────── function getPos(e) { const r = previewCanvas.getBoundingClientRect(); if (e.touches) { return { x: e.touches[0].clientX - r.left, y: e.touches[0].clientY - r.top }; } return { x: e.clientX - r.left, y: e.clientY - r.top }; } function getViewportPos(e) { if (e.touches) return { x: e.touches[0].clientX, y: e.touches[0].clientY }; return { x: e.clientX, y: e.clientY }; } function applyCtxStyle(c) { c.strokeStyle = color; c.fillStyle = color; c.lineWidth = lineWidth; c.lineCap = 'round'; c.lineJoin = 'round'; } // ─── Shape drawing ──────────────────────────────────────────────────────── function drawArrow(c, x1, y1, x2, y2) { const headLen = Math.max(12, lineWidth * 3); const angle = Math.atan2(y2 - y1, x2 - x1); c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); c.beginPath(); c.moveTo(x2, y2); c.lineTo(x2 - headLen * Math.cos(angle - Math.PI / 6), y2 - headLen * Math.sin(angle - Math.PI / 6)); c.lineTo(x2 - headLen * Math.cos(angle + Math.PI / 6), y2 - headLen * Math.sin(angle + Math.PI / 6)); c.closePath(); c.fill(); } function drawPolygon(c, cx, cy, r, sides, rotation) { c.beginPath(); for (let i = 0; i < sides; i++) { const angle = rotation + (i * 2 * Math.PI / sides); const px = cx + r * Math.cos(angle); const py = cy + r * Math.sin(angle); if (i === 0) c.moveTo(px, py); else c.lineTo(px, py); } c.closePath(); c.stroke(); } function drawStar(c, cx, cy, outerR, innerR, points) { c.beginPath(); for (let i = 0; i < points * 2; i++) { const angle = -Math.PI / 2 + (i * Math.PI / points); const r = (i % 2 === 0) ? outerR : innerR; const px = cx + r * Math.cos(angle); const py = cy + r * Math.sin(angle); if (i === 0) c.moveTo(px, py); else c.lineTo(px, py); } c.closePath(); c.stroke(); } function drawShape(c, t, x1, y1, x2, y2) { const w = x2 - x1, h = y2 - y1; const cx = (x1 + x2) / 2, cy = (y1 + y2) / 2; const r = Math.min(Math.abs(w), Math.abs(h)) / 2; switch (t) { case 'line': c.beginPath(); c.moveTo(x1, y1); c.lineTo(x2, y2); c.stroke(); break; case 'rect': c.beginPath(); c.strokeRect(x1, y1, w, h); break; case 'roundrect': { const rad = Math.min(Math.abs(w), Math.abs(h)) * 0.15; const rx = Math.min(x1, x2), ry = Math.min(y1, y2); const rw = Math.abs(w), rh = Math.abs(h); c.beginPath(); c.moveTo(rx + rad, ry); c.lineTo(rx + rw - rad, ry); c.quadraticCurveTo(rx + rw, ry, rx + rw, ry + rad); c.lineTo(rx + rw, ry + rh - rad); c.quadraticCurveTo(rx + rw, ry + rh, rx + rw - rad, ry + rh); c.lineTo(rx + rad, ry + rh); c.quadraticCurveTo(rx, ry + rh, rx, ry + rh - rad); c.lineTo(rx, ry + rad); c.quadraticCurveTo(rx, ry, rx + rad, ry); c.closePath(); c.stroke(); break; } case 'circle': { const rx = Math.abs(w) / 2, ry = Math.abs(h) / 2; c.beginPath(); c.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2); c.stroke(); break; } case 'triangle': c.beginPath(); c.moveTo(cx, y1); c.lineTo(x2, y2); c.lineTo(x1, y2); c.closePath(); c.stroke(); break; case 'diamond': c.beginPath(); c.moveTo(cx, y1); c.lineTo(x2, cy); c.lineTo(cx, y2); c.lineTo(x1, cy); c.closePath(); c.stroke(); break; case 'pentagon': drawPolygon(c, cx, cy, r, 5, -Math.PI / 2); break; case 'hexagon': drawPolygon(c, cx, cy, r, 6, 0); break; case 'star': drawStar(c, cx, cy, r, r * 0.4, 5); break; case 'arrow': drawArrow(c, x1, y1, x2, y2); break; } } // ─── Stroke eraser: redraw all strokes except the hit one ───────────────── function redrawAllStrokes() { ctx.clearRect(0, 0, canvas.width, canvas.height); strokes.forEach(function(s) { ctx.save(); ctx.strokeStyle = s.color; ctx.fillStyle = s.color; ctx.lineWidth = s.lineWidth; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; if (s.type === 'pen' && s.points && s.points.length > 0) { ctx.beginPath(); ctx.moveTo(s.points[0].x, s.points[0].y); for (let i = 1; i < s.points.length - 1; i++) { const mx = (s.points[i].x + s.points[i+1].x) / 2; const my = (s.points[i].y + s.points[i+1].y) / 2; ctx.quadraticCurveTo(s.points[i].x, s.points[i].y, mx, my); } if (s.points.length > 1) { const last = s.points[s.points.length - 1]; ctx.lineTo(last.x, last.y); } ctx.stroke(); } else if (s.type !== 'pen') { drawShape(ctx, s.type, s.x1, s.y1, s.x2, s.y2); } ctx.restore(); }); } // Check if a point (px,py) is near a stroke (within hitRadius) function strokeHitTest(s, px, py) { const hitRadius = Math.max(10, (s.lineWidth || 3) * 2); if (s.type === 'pen' && s.points) { for (let i = 0; i < s.points.length; i++) { const dx = s.points[i].x - px; const dy = s.points[i].y - py; if (Math.sqrt(dx*dx + dy*dy) <= hitRadius) return true; } } else if (s.type === 'line' || s.type === 'arrow') { return pointNearSegment(px, py, s.x1, s.y1, s.x2, s.y2, hitRadius); } else if (s.type === 'rect' || s.type === 'roundrect') { return pointNearSegment(px, py, s.x1, s.y1, s.x2, s.y1, hitRadius) || pointNearSegment(px, py, s.x2, s.y1, s.x2, s.y2, hitRadius) || pointNearSegment(px, py, s.x2, s.y2, s.x1, s.y2, hitRadius) || pointNearSegment(px, py, s.x1, s.y2, s.x1, s.y1, hitRadius); } else if (s.type === 'circle') { const rx = Math.abs(s.x2 - s.x1) / 2; const ry = Math.abs(s.y2 - s.y1) / 2; const cx = (s.x1 + s.x2) / 2; const cy = (s.y1 + s.y2) / 2; if (rx < 1 || ry < 1) return false; const nx = (px - cx) / rx; const ny = (py - cy) / ry; const dist = Math.abs(Math.sqrt(nx*nx + ny*ny) - 1) * Math.min(rx, ry); return dist <= hitRadius; } else if (s.type === 'triangle' || s.type === 'diamond' || s.type === 'pentagon' || s.type === 'hexagon' || s.type === 'star') { // Bounding box hit test as approximation const minX = Math.min(s.x1, s.x2) - hitRadius; const maxX = Math.max(s.x1, s.x2) + hitRadius; const minY = Math.min(s.y1, s.y2) - hitRadius; const maxY = Math.max(s.y1, s.y2) + hitRadius; return px >= minX && px <= maxX && py >= minY && py <= maxY; } return false; } function pointNearSegment(px, py, x1, y1, x2, y2, radius) { const dx = x2 - x1, dy = y2 - y1; const lenSq = dx*dx + dy*dy; if (lenSq === 0) { return Math.sqrt((px-x1)*(px-x1)+(py-y1)*(py-y1)) <= radius; } let t = ((px-x1)*dx + (py-y1)*dy) / lenSq; t = Math.max(0, Math.min(1, t)); const nx = x1 + t*dx - px; const ny = y1 + t*dy - py; return Math.sqrt(nx*nx + ny*ny) <= radius; } // ─── Pointer events (on previewCanvas - the top layer) ──────────────────── previewCanvas.addEventListener('pointerdown', onDown); previewCanvas.addEventListener('pointermove', onMove); previewCanvas.addEventListener('pointerup', onUp); previewCanvas.addEventListener('pointercancel', onUp); function onDown(e) { if (!active) return; e.preventDefault(); if (tool === 'move') { isPanning = true; const vp = getViewportPos(e); panStartX = vp.x; panStartY = vp.y; panStartPanX = panX; panStartPanY = panY; previewCanvas.style.cursor = 'grabbing'; previewCanvas.setPointerCapture(e.pointerId); return; } const pos = getPos(e); if (tool === 'text') { spawnTextInput(pos.x, pos.y, e.clientX, e.clientY); return; } if (tool === 'stroke-eraser') { drawing = true; previewCanvas.setPointerCapture(e.pointerId); eraseStrokeAt(pos.x, pos.y); return; } drawing = true; startX = pos.x; startY = pos.y; lastX = pos.x; lastY = pos.y; previewX2 = pos.x; previewY2 = pos.y; if (tool === 'pen') { saveHistory(); applyCtxStyle(ctx); ctx.beginPath(); ctx.moveTo(startX, startY); currentStroke = { type: 'pen', color: color, lineWidth: lineWidth, points: [{ x: startX, y: startY }] }; pendingPenPoints = []; } else if (tool === 'eraser') { saveHistory(); } else { // Shape tools - preview on previewCanvas, no getImageData needed saveHistory(); } previewCanvas.setPointerCapture(e.pointerId); } function onMove(e) { if (!active) return; e.preventDefault(); if (tool === 'move' && isPanning) { const vp = getViewportPos(e); const dx = panStartX - vp.x; const dy = panStartY - vp.y; const maxPanX = canvas.width - window.innerWidth; const maxPanY = canvas.height - window.innerHeight; panX = Math.max(0, Math.min(maxPanX, panStartPanX + dx)); panY = Math.max(0, Math.min(maxPanY, panStartPanY + dy)); applyCanvasTransform(); updatePanLabel(); return; } if (!drawing) return; const pos = getPos(e); const vx = pos.x; const vy = pos.y; if (tool === 'pen') { // Buffer points; flush in RAF for zero-delay rendering pendingPenPoints.push({ x: vx, y: vy }); if (currentStroke) currentStroke.points.push({ x: vx, y: vy }); if (!rafId) { rafId = requestAnimationFrame(flushPenPoints); } } else if (tool === 'eraser') { ctx.save(); ctx.globalCompositeOperation = 'destination-out'; ctx.beginPath(); ctx.arc(vx, vy, eraserSize / 2, 0, Math.PI * 2); ctx.fill(); ctx.restore(); } else if (tool === 'stroke-eraser') { eraseStrokeAt(vx, vy); } else { // Shape preview: update coords and schedule RAF redraw previewX2 = vx; previewY2 = vy; if (!rafId) { rafId = requestAnimationFrame(flushShapePreview); } } } function flushPenPoints() { rafId = null; if (pendingPenPoints.length === 0) return; applyCtxStyle(ctx); for (let i = 0; i < pendingPenPoints.length; i++) { const pt = pendingPenPoints[i]; const mx = (lastX + pt.x) / 2; const my = (lastY + pt.y) / 2; ctx.quadraticCurveTo(lastX, lastY, mx, my); ctx.stroke(); ctx.beginPath(); ctx.moveTo(mx, my); lastX = pt.x; lastY = pt.y; } pendingPenPoints = []; } function flushShapePreview() { rafId = null; pctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); applyCtxStyle(pctx); drawShape(pctx, tool, startX, startY, previewX2, previewY2); } function onUp(e) { if (!active) return; if (tool === 'move' && isPanning) { isPanning = false; previewCanvas.style.cursor = 'grab'; return; } if (!drawing) return; drawing = false; // Cancel any pending RAF if (rafId) { cancelAnimationFrame(rafId); rafId = null; } const pos = getPos(e); const vx = pos.x; const vy = pos.y; if (tool === 'pen') { // Flush remaining buffered points if (pendingPenPoints.length > 0) flushPenPoints(); applyCtxStyle(ctx); ctx.lineTo(vx, vy); ctx.stroke(); if (currentStroke) { currentStroke.points.push({ x: vx, y: vy }); strokes.push(currentStroke); currentStroke = null; } pendingPenPoints = []; } else if (tool === 'eraser') { // done } else if (tool === 'stroke-eraser') { // done } else { // Commit shape from preview to main canvas pctx.clearRect(0, 0, previewCanvas.width, previewCanvas.height); applyCtxStyle(ctx); drawShape(ctx, tool, startX, startY, vx, vy); const shapeStroke = { type: tool, color: color, lineWidth: lineWidth, x1: startX, y1: startY, x2: vx, y2: vy }; strokes.push(shapeStroke); } } function eraseStrokeAt(px, py) { for (let i = strokes.length - 1; i >= 0; i--) { if (strokeHitTest(strokes[i], px, py)) { saveHistory(); strokes.splice(i, 1); redrawAllStrokes(); break; } } } // ─── Text tool ──────────────────────────────────────────────────────────── function spawnTextInput(vx, vy, clientX, clientY) { if (textInput) commitText(); textInput = document.createElement('textarea'); textInput.style.cssText = [ 'position:fixed', 'left:' + clientX + 'px', 'top:' + clientY + 'px', 'min-width:120px', 'min-height:32px', 'background:rgba(255,255,255,0.08)', 'color:' + color, 'font-size:' + Math.max(14, lineWidth * 4) + 'px', 'font-family:sans-serif', 'border:1.5px dashed ' + color, 'border-radius:4px', 'outline:none', 'resize:both', 'padding:4px 6px', 'z-index:2147482300', 'pointer-events:all', 'caret-color:' + color, 'line-height:1.4' ].join(';'); textInput.placeholder = 'Type here...'; textInput._vx = vx; textInput._vy = vy; root.appendChild(textInput); textInput.focus(); textInput.addEventListener('keydown', function(e) { if (e.key === 'Escape') { textInput.remove(); textInput = null; } if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); commitText(); } }); textInput.addEventListener('blur', function() { setTimeout(function() { if (textInput) commitText(); }, 150); }); } function commitText() { if (!textInput) return; const text = textInput.value.trim(); if (text) { saveHistory(); const x = textInput._vx + 6; const y = textInput._vy + parseInt(textInput.style.fontSize); applyCtxStyle(ctx); ctx.font = textInput.style.fontSize + ' sans-serif'; const lines = text.split('\n'); const lh = parseInt(textInput.style.fontSize) * 1.4; lines.forEach(function(line, i) { ctx.fillText(line, x, y + i * lh); }); } textInput.remove(); textInput = null; } // ─── Keyboard shortcuts ─────────────────────────────────────────────────── document.addEventListener('keydown', function(e) { if (e.ctrlKey && e.shiftKey && e.key === 'W') { e.preventDefault(); toggleWhiteboard(); return; } if (!active) return; if (textInput && document.activeElement === textInput) return; switch (e.key) { case 'm': case 'M': selectTool('move'); break; case 'p': case 'P': selectTool('pen'); break; case 'e': case 'E': selectTool('eraser'); break; case 'q': case 'Q': selectTool('stroke-eraser'); break; case 'l': case 'L': selectTool('line'); break; case 'r': case 'R': selectTool('rect'); break; case 'u': case 'U': selectTool('roundrect'); break; case 'c': case 'C': selectTool('circle'); break; case 'g': case 'G': selectTool('triangle'); break; case 'd': case 'D': selectTool('diamond'); break; case '5': selectTool('pentagon'); break; case '6': selectTool('hexagon'); break; case 's': case 'S': selectTool('star'); break; case 'a': case 'A': selectTool('arrow'); break; case 'x': case 'X': selectTool('text'); break; case 'h': case 'H': toggleAnnotations(); break; case 'Delete': case 'Backspace': if (!textInput) clearCanvas(); break; case 'z': case 'Z': if (e.ctrlKey || e.metaKey) { e.preventDefault(); undo(); } break; } }); // ─── Touch support ──────────────────────────────────────────────────────── previewCanvas.addEventListener('touchstart', function(e) { onDown(e); }, { passive: false }); previewCanvas.addEventListener('touchmove', function(e) { onMove(e); }, { passive: false }); previewCanvas.addEventListener('touchend', function(e) { onUp(e); }, { passive: false }); // ─── Init toast ─────────────────────────────────────────────────────────── window.addEventListener('load', function() { setTimeout(function() { TW_toast('Whiteboard ready - Ctrl+Shift+W to toggle. P=Pen, E=Eraser, M=Move, S=Star, G=Triangle, D=Diamond', 'info', 'Whiteboard', 5000); }, 1500); }); })();