diff --git a/script.user.js b/script.user.js index 057eba6..80e8538 100644 --- a/script.user.js +++ b/script.user.js @@ -496,6 +496,50 @@ function TranslatorTool() { container.style.flexDirection = "column"; container.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'; + container.style.minWidth = "400px"; + container.style.minHeight = "300px"; + + // Resize handles + const handles = ["n", "e", "s", "w", "ne", "nw", "se", "sw"]; + handles.forEach((dir) => { + const handle = document.createElement("div"); + handle.className = `resize-handle resize-${dir}`; + handle.style.position = "absolute"; + handle.style.zIndex = "10000"; + + switch (dir) { + case "n": + case "s": + handle.style.left = "0"; + handle.style.right = "0"; + handle.style.height = "6px"; + handle.style.cursor = "ns-resize"; + break; + case "e": + case "w": + handle.style.top = "0"; + handle.style.bottom = "0"; + handle.style.width = "6px"; + handle.style.cursor = "ew-resize"; + break; + case "ne": + case "nw": + case "se": + case "sw": + handle.style.width = "10px"; + handle.style.height = "10px"; + handle.style.cursor = `${dir}-resize`; + break; + } + + // Position handles + if (dir.includes("n")) handle.style.top = "-3px"; + if (dir.includes("s")) handle.style.bottom = "-3px"; + if (dir.includes("e")) handle.style.right = "-3px"; + if (dir.includes("w")) handle.style.left = "-3px"; + + container.appendChild(handle); + }); // Header var header = document.createElement("div"); @@ -567,10 +611,94 @@ function TranslatorTool() { } setupDraggable(header); + setupResizable(); log("success", "UI elements created successfully"); } + function setupResizable() { + let isResizing = false; + let currentHandle = null; + let startX, startY, startWidth, startHeight, startLeft, startTop; + + const handles = container.querySelectorAll(".resize-handle"); + + handles.forEach((handle) => { + handle.addEventListener("mousedown", (e) => { + isResizing = true; + currentHandle = handle; + startX = e.clientX; + startY = e.clientY; + + const rect = container.getBoundingClientRect(); + startWidth = rect.width; + startHeight = rect.height; + startLeft = rect.left; + startTop = rect.top; + + document.addEventListener("mousemove", handleMouseMove); + document.addEventListener("mouseup", stopResize); + e.preventDefault(); + log("info", "Started resizing window"); + }); + }); + + function handleMouseMove(e) { + if (!isResizing) return; + + const dx = e.clientX - startX; + const dy = e.clientY - startY; + const rect = container.getBoundingClientRect(); + + // Enforce minimum dimensions + const minWidth = 400; + const minHeight = 300; + + if (currentHandle.className.includes("e")) { + const newWidth = Math.max(startWidth + dx, minWidth); + container.style.width = `${newWidth}px`; + } + if (currentHandle.className.includes("s")) { + const newHeight = Math.max(startHeight + dy, minHeight); + container.style.height = `${newHeight}px`; + } + if (currentHandle.className.includes("w")) { + const newWidth = Math.max(startWidth - dx, minWidth); + if (newWidth !== rect.width) { + container.style.width = `${newWidth}px`; + container.style.left = `${startLeft + startWidth - newWidth}px`; + } + } + if (currentHandle.className.includes("n")) { + const newHeight = Math.max(startHeight - dy, minHeight); + if (newHeight !== rect.height) { + container.style.height = `${newHeight}px`; + container.style.top = `${startTop + startHeight - newHeight}px`; + } + } + } + + function stopResize() { + if (isResizing) { + isResizing = false; + document.removeEventListener("mousemove", handleMouseMove); + document.removeEventListener("mouseup", stopResize); + log("info", "Stopped resizing window"); + } + } + } + + GM_addStyle(` + .resize-handle { + background: transparent; + position: absolute; + transition: background-color 0.2s; + } + .resize-handle:hover { + background-color: rgba(26, 115, 232, 0.2); + } + `); + function createTab(text, isActive) { var tab = document.createElement("button"); tab.textContent = text;