WME Resaltador de Comentarios

Resalta áreas y puntos en Waze Map Editor con colores personalizados
当前为 2025-03-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         WME Resaltador de Comentarios
// @namespace    https://gf.qytechs.cn/es/users/1362250-gwm
// @version      1.0
// @description  Resalta áreas y puntos en Waze Map Editor con colores personalizados
// @author       GWM_
// @match        https://*.waze.com/*/editor*
// @match        https://*.waze.com/editor*
// @exclude      https://*.waze.com/user/editor*
// @grant        none
// @license      GPLv3
// ==/UserScript==

(function() {
    'use strict';

    // Crear la interfaz de usuario
    const style = document.createElement('style');
    style.innerHTML = `
        .highlight-controls {
            position: fixed;
            top: 10px;
            right: 10px;
            background: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 1000;
            cursor: move;
            width: 200px; /* Tamaño fijo */
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Sombra para mejor visibilidad */
        }
        .highlight-controls input, .highlight-controls label {
            margin: 5px 0;
            width: 100%; /* Ajustar el ancho de los elementos internos */
        }
    `;
    document.head.appendChild(style);

    const controls = document.createElement('div');
    controls.className = 'highlight-controls';
    controls.innerHTML = `
        <label for="colorPicker">Elige un color:</label>
        <input type="color" id="colorPicker" value="#ff0000">
        <label>
            <input type="checkbox" id="highlightCheckbox"> Resaltar Área y Puntos
        </label>
    `;
    document.body.appendChild(controls);

    // Cargar el color, la posición y el estado del checkbox guardados
    const savedColor = localStorage.getItem('wazeHighlightColor');
    const savedPosition = JSON.parse(localStorage.getItem('wazeHighlightPosition'));
    const savedCheckboxState = localStorage.getItem('wazeHighlightCheckboxState') === 'true';

    if (savedColor) {
        document.getElementById('colorPicker').value = savedColor;
    }

    if (savedPosition) {
        controls.style.left = `${savedPosition.x}px`;
        controls.style.top = `${savedPosition.y}px`;
    }

    if (savedCheckboxState) {
        document.getElementById('highlightCheckbox').checked = true;
    }

    let highlightInterval;

    // Función para resaltar áreas y puntos
    function highlightArea() {
        const color = document.getElementById('colorPicker').value;
        const paths = document.querySelectorAll('path');
        const circles = document.querySelectorAll('circle');

        paths.forEach(path => {
            if (path.getAttribute('fill-opacity') === '0.3' && path.getAttribute('stroke-dasharray') === '8,8') {
                path.setAttribute('fill', color);
                path.setAttribute('stroke', color);
            }
        });

        circles.forEach(circle => {
            if (circle.getAttribute('fill-opacity') === '1' && circle.getAttribute('stroke-dasharray') === 'none' && !circle.querySelector('image')) {
                circle.setAttribute('fill', color);
                circle.setAttribute('stroke', color);
            }
        });
    }

    // Función para desactivar el resaltado
    function disableHighlight() {
        const paths = document.querySelectorAll('path');
        const circles = document.querySelectorAll('circle');

        paths.forEach(path => {
            if (path.getAttribute('fill-opacity') === '0.3' && path.getAttribute('stroke-dasharray') === '8,8') {
                path.setAttribute('fill', '#00ece3');
                path.setAttribute('stroke', '#00ece3');
            }
        });

        circles.forEach(circle => {
            if (circle.getAttribute('fill-opacity') === '1' && circle.getAttribute('stroke-dasharray') === 'none' && !circle.querySelector('image')) {
                circle.setAttribute('fill', '#ffffff');
                circle.setAttribute('stroke', '#ffffff');
            }
        });
    }

    // Asignar la función al checkbox
    document.getElementById('highlightCheckbox').addEventListener('change', (e) => {
        if (e.target.checked) {
            highlightInterval = setInterval(highlightArea, 1000); // Actualizar cada segundo
        } else {
            clearInterval(highlightInterval);
            disableHighlight();
        }
        // Guardar el estado del checkbox
        localStorage.setItem('wazeHighlightCheckboxState', e.target.checked);
    });

    // Guardar el color seleccionado
    document.getElementById('colorPicker').addEventListener('change', (e) => {
        localStorage.setItem('wazeHighlightColor', e.target.value);
    });

    // Hacer la interfaz de usuario arrastrable
    let isDragging = false;
    let offsetX, offsetY;

    controls.addEventListener('mousedown', (e) => {
        isDragging = true;
        offsetX = e.clientX - controls.getBoundingClientRect().left;
        offsetY = e.clientY - controls.getBoundingClientRect().top;
        controls.style.cursor = 'grabbing'; // Cambiar el cursor al arrastrar
    });

    document.addEventListener('mousemove', (e) => {
        if (isDragging) {
            controls.style.left = `${e.clientX - offsetX}px`;
            controls.style.top = `${e.clientY - offsetY}px`;
        }
    });

    document.addEventListener('mouseup', () => {
        isDragging = false;
        controls.style.cursor = 'move'; // Restaurar el cursor
        // Guardar la posición de la interfaz
        localStorage.setItem('wazeHighlightPosition', JSON.stringify({
            x: controls.offsetLeft,
            y: controls.offsetTop
        }));
    });

    // Observar cambios en el mapa
    const observer = new MutationObserver((mutations) => {
        if (document.getElementById('highlightCheckbox').checked) {
            highlightArea();
        }
    });

    // Configurar el observador para que observe cambios en el contenedor del mapa
    const mapContainer = document.querySelector('div[role="main"]');
    if (mapContainer) {
        observer.observe(mapContainer, { childList: true, subtree: true });
    }

    // Iniciar el resaltado si el checkbox estaba activo
    if (savedCheckboxState) {
        highlightInterval = setInterval(highlightArea, 1000);
    }
})();
欢迎访问Greasy Fork镜像
