// ==UserScript==
// @name         uutool.cn在线SVG预览功能增强
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  增强SVG预览界面样式及交互功能
// @author       beibeibeibei
// @license      MIT
// @match        https://uutool.cn/svg-preview/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 节流函数
    function throttle(func, limit = 300) {
        let lastFunc;
        let lastRan;
        return function(...args) {
            const context = this;
            if (!lastRan) {
                func.apply(context, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(function() {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(context, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

    // 样式注入
    function injectCustomStyles() {
        const style = document.createElement('style');
        style.classList.add("beibeibeibei");
        document.head.appendChild(style);
        // 添加样式规则
        const css = `
        /*背景颜色*/
        body {
            background: black;
        }
        /*让左侧导航展开收起按钮更明显*/
        .left-nav .left-nav-collapse,
        .left-nav .left-nav-open {
            filter: drop-shadow(1px 0px 0px black);
        }
        /*左侧导航暗色*/
        .left-nav {
            background: #090805 !important;
        }
        .left-nav span,
        .left-nav li a {
            color: #CCC !important;
        }
        /*左侧导航收起*/
        body.left-nav-collapse .left-nav {
            background: none !important;
            width: 20px;
        }
        /*左侧导航按钮悬浮效果*/
        .left-nav li:hover {
            background: #12367d !important;
        }
        /*滚动条*/
        ::-webkit-scrollbar-thumb {
            background-color: #ffffff66 !important;
        }
        /*工具介绍*/
        .tool-intro {
            background: black !important;
        }
        /*footer*/
        footer {
            background: black !important;
        }
        /*搜索框*/
        #searchInput {
            background: black !important;
            border: 1px solid white;
            color: white;
        }
        /*title*/
        .tool-meta {
            background: black !important;
            padding: 2px 18px;
        }
        /*svg代码文字背景*/
        textarea {
            background: black !important;
            color: white;
            transform-origin: 0 0;
        }
        /*textarea隐藏*/
        textarea.hideTextarea {
            position: absolute;
            z-index: -1;
            scale: 0.1;
            transform-origin: 0 0;
        }
        /*svg*/
        svg {
            display: block;
        }
        /*滑块按钮*/
        input[type=range] {
            -webkit-appearance: none;
            border-radius: 1em;
        }
        input[type=range]:focus {
            outline: 1px solid gray;
        }
        input[type=range]::-webkit-slider-runnable-track {
            height: 1em;
            background: #d9d9d9;
            border-radius: 1em;
        }
        input[type=range]::-webkit-slider-thumb {
            height: 1em;
            width: 1em;
            border-radius: 50%;
            background: #8c8c8c;
            cursor: pointer;
            -webkit-appearance: none;
        }
        /*设置背景输入框*/
        input.beibeibeibei-background-input:focus {
            outline: none;
            border-color: black !important;
        }
        /*示例按钮hover*/
        button.beibeibeibei-exampleBtn:hover {
            background: #409EFF;
            color: white;
        }
        /*隐藏按钮hover*/
        button.beibeibeibei-hideBtn:hover {
            background: #409EFF;
            color: white;
        }
        `.replace(/\n/g, ' '); // 去掉换行符;
        // 将样式规则写入style标签
        style.innerText = css;
    }

    /*添加滑块控制展示区域大小*/
    function createZoomController() {
        // 选择目标SVG元素
        function getSvgElements() {
            const svgElement = document.querySelectorAll('svg');
            return svgElement;
        }
        // 创建滑块元素
        const slider = document.createElement('input');
        slider.classList.add("beibeibeibei-slider");
        slider.type = 'range';
        slider.min = 1; // 最小宽度百分比
        slider.max = 100; // 最大宽度百分比
        slider.value = '100';
        slider.title = "svg宽度百分比滑块";
        slider.style.width = '300px';
        slider.style.display = "block";

        // label
        const label = document.createElement('div');
        label.textContent = "svg宽度百分比滑块";
        label.style.fontSize = "12px";

        // 将滑块和标签添加到页面
        const container = document.createElement('div');
        container.appendChild(slider);
        container.appendChild(label);
        container.style.display = 'inline-block';
        container.style.verticalAlign = "middle";
        container.style.border = '1px solid #d3d4d6';
        container.style.borderRadius = "4px";
        container.style.padding = "2px";
        container.style.marginRight = "10px";
        container.style.transform = 'translateY(-1px)';
        document.querySelector(".btn-box").appendChild(container);
        // 更新SVG宽度函数
        function updateSvgWidth(value) {
            let svgs = getSvgElements();
            svgs.forEach((svg) => {
                svg.style.width = value + '%';
            });
        }
        // 监听滑块输入事件
        slider.addEventListener('input', function(e) {
            updateSvgWidth(e.target.value);
        });

        // 修改背景输入框
        const background_input = document.createElement('input');
        background_input.placeholder="双击输入框";
        background_input.classList.add("beibeibeibei-background-input");
        background_input.title = '设置svg背景, 试试双击输入框自动输入: \'linear-gradient(#ffe,#adf)\'';
        background_input.style.borderRadius = '4px';
        background_input.style.border = '1px solid #DCDFE6';
        background_input.style.marginRight = '10px';
        background_input.style.padding = '11px 20px';
        background_input.style.fontSize = '14px';
        document.querySelector(".btn-box").appendChild(background_input);
        function handleBackgroundInput(e) {
            document.querySelector("#svgBox").style.background = e.target.value;
        }
        // 事件监听器,节流
        background_input.addEventListener('input', throttle(handleBackgroundInput));
        background_input.addEventListener('dblclick', (e) => {
            e.target.value += "linear-gradient(#ffe,#adf)";
            // 主动触发 input 事件
            const event = new Event('input', {'bubbles': true,'cancelable': true});
            e.target.dispatchEvent(event);
        });

        /*示例按钮*/
        const exampleBtn = document.createElement('button');
        exampleBtn.classList.add("beibeibeibei-exampleBtn");
        exampleBtn.textContent = '生成svg文本';
        exampleBtn.addEventListener('click', (e) => {
            document.querySelector('textarea').value += `<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">\n` +
                `    <!-- 直线 -->\n` +
                `    <line x1="10" y1="10" x2="100" y2="100" stroke="purple" stroke-width="3"/>\n` +
                `\n` +
                `    <!-- 矩形 -->\n` +
                `    <rect x="120" y="20" width="100" height="60" fill="lightblue" stroke="blue" stroke-width="2"/>\n` +
                `\n` +
                `    <!-- 圆形 -->\n` +
                `    <circle cx="300" cy="50" r="40" fill="lightgreen" stroke="green" stroke-width="2"/>\n` +
                `\n` +
                `    <!-- 椭圆 -->\n` +
                `    <ellipse cx="60" cy="150" rx="50" ry="30" fill="lightcoral" stroke="coral" stroke-width="2"/>\n` +
                `\n` +
                `    <!-- 多边形 -->\n` +
                `    <polygon points="220,150 185,198 130,179 130,121 185,102" fill="none" stroke="red" stroke-width="2"/>\n` +
                `\n` +
                `    <!-- 文本 -->\n` +
                `    <text x="250" y="155" font-family="Arial" font-size="16" fill="black">\n` +
                `        示例SVG图形\n` +
                `    </text>\n` +
                `</svg>\n` +
                `\n`;
            const event = new Event('input', {'bubbles': true,'cancelable': true});
            document.querySelector('textarea').dispatchEvent(event);
        });
        document.querySelector(".btn-box").appendChild(exampleBtn);

        /*隐藏textarea按钮*/
        const hideBtn = document.createElement('button');
        hideBtn.classList.add("beibeibeibei-hideBtn");
        hideBtn.textContent = '隐藏文本框';
        hideBtn.addEventListener('click', (e) => {
            document.querySelector('textarea').classList.toggle("hideTextarea");
        });
        document.querySelector(".btn-box").appendChild(hideBtn);
    }

    // 初始化函数
    function init() {
        if (!document.querySelector("style.beibeibeibei")) {
            injectCustomStyles();
        }
        // 创建缩放控制器
        createZoomController();
    }
    // DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();