Issue #5331💬 RespondidoAbierto el 24 de agosto de 2023por rozekReacciones 0

El selector de color puede extender la ventana de visión

Respuesta rápidapor artf

Gracias @rozek la imagen pública siempre es bienvenida, así que estaré encantado de reseñarla.

Lee la respuesta completa abajo ↓

Pregunta

Versión GrapesJS

Confirmo que se debe usar la última versión de GrapesJS

¿Qué navegador usas?

Versión 1.56.20 Chromium: 115.0.5790.171 (Versión Offizieller) (arm64)

Enlace de demo reproducible

ninguno

Describe el bicho

Este bug es similar al número #596, que ha sido bloqueado por falta de conversación. Esta versión podría proporcionar una solución para la versión actual de GrapesJS.

¿Cómo reproducir el bicho?

Al abrir un selector de color cerca de los bordes de la ventana de visualización, ese selector puede ser solo parcialmente visible <img width="329" alt="Screenshot-of-Bug" src="https://github.com/GrapesJS/grapesjs/assets/514882/9300e2d5-f2ce-484e-8543-aaccf9d90bde">

Desafortunadamente, la solución mencionada en el #596 ya no funciona. Así que revisé el código actual y sustituí las líneas 1002...1012 del archivo 'src/utils/ColorPicker.ts'

    offset.top += entradaAltura;             Coloca "selector" justo debajo de "entrada"

if (offset.left + dpWidth > viewWidth) { // "selector" extendería el viewport
      offset.left = anchoVistaAncho-dpAncho
    }
    
si (offset.top + dpHeight >viewHeight) { // "selector" extendería el viewport
      offset.top = vistaAltura-dpAltura
    }
        
Nota bene: ¡"Picker" se coloca en relación con el editor!
    var EditorOffset = picker.closest('.gjs-editor-cont').offset()

desplazamiento.izquierda = Math.max(0,desplazamiento.izquierdo - EditorOffset.izquierda)
    offset.top = Math.max(0,offset.top - EditorOffset.top)

(y también eliminó la línea 988, que es inútil)

El resultado ahora works en mi machine:

Puedes inspeccionar estos cambios en mi propio tenedor de GrapesJS

Como soy nuevo en GrapesJS, ahora mismo me da un poco de reparo hacer una imagen personal. Sin embargo, si esperas que estos cambios work en todas las demás machines también, me sentiría orgulloso de hacerlo.

Con saludos desde Alemania,

Andreas Rozek

Código de conducta

Acepto seguir el Código de Conducta de este proyecto

Respuestas (3)

artf• 25 de agosto de 2023

Gracias @rozek la imagen pública siempre es bienvenida, así que estaré encantado de reseñarla.

artf• 10 de diciembre de 2023

Cerrando por ahora porque no parece ser reproducible

ClaudeCode• 17 de mayo de 2026

Gracias por informar de esto, @rozek.

Buena pregunta sobre el selector de color puede extender la ventana de visualización. El enfoque recomendado con GrapesJS es usar la API orientada a eventos.

Empieza aquí:

Consulta la documentación de GrapesJS de tu módulo específico
Busca el método del oyente de eventos 'on()'
La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));


**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!