Los eventos de StyleManager se activan varias veces por cambio
Hola, Tengo el mismo problema y, como aún no está resuelto, sería una solución usar la técnica de rebote. Consulta este ejemplo.
Lee la respuesta completa abajo ↓Pregunta
Para reproducir:
En una instalación limpia de GrapesJS, dentro de la página de demo (dentro de index.html), añade un oyente de eventos así:
'editor.on('component:styleUpdate:width', (model) => {
console.log(modelo);
});`
### Problema:
Al cambiar el valor de 'ancho' de cualquier elemento, la variable 'modelo' se imprimirá varias veces.
El problema parece ser más grave al escuchar propiedades de 'lista' como la familia de fuentes, el peso de la fuente o la pantalla. Por ejemplo:
'editor.on('component:styleUpdate:font-family', (model) => {
console.log(modelo);
});`
Para este tipo de propiedades, he notado que los eventos se activan varias veces cuando el editor se carga por primera vez (antes de cualquier interacción del usuario), y también varias veces cuando se cambia su valor.
### Causa:
Tras investigar un poco, pensé que el problema podría estar relacionado con el valor de las propiedades que se configuran varias veces dentro del framework GrapesJS para acomodar el Undo Manager [(Property.js:58)](https://github.com/artf/grapesjs/blob/dev/src/style_manager/model/Property.js#L58), aunque todavía no soy capaz de determinar la causa subyacente ni de aportar una solución al problema por mí mismo.
### Síntomas:
Por ello, en algunos casos será difícil para los desarrolladores utilizar los eventos de StyleManager como está previsto. Por ejemplo, si quieres escuchar de qué se ha cambiado el valor a través de la propiedad ._previousAttributes, tendrás dificultades, ya que el evento se activa varias veces: y cada vez los atributos anteriores especificados son diferentes y no se relacionan con lo que el usuario realmente eligió.Respuestas (3)
Hola,
Tengo el mismo problema y, como aún no está resuelto, sería una solución usar la técnica de rebote.
Consulta este ejemplo.
Hola,
También encontré este problema. El evento se está activando, incluso sin cambiar el ancho, añadí el siguiente código a la página html y el registro se genera varias veces.
'editor.on('component:styleUpdate:width', (model) => { console.log('Ancho de componente actualizado:', modelo); });`
He grabado una prueba en vídeo y está el siguiente enlace
https://drive.google.com/file/d/1zoTUN-e400YDVPXt2DESAemSL6STh0TU/view?usp=sharing
Creo que la solución ya está disponible en la rama de desarrollo (así que lista para la próxima versión). https://github.com/artf/grapesjs/blob/0dba07fd21b8e2dd953100bec5b7531f0761c9c2/src/style_manager/view/PropertyView.js#L411-L413
Veo varios eventos en la demo online actual, pero parece que funciona bien en mi copia local para desarrolladores. Si puedes confirmarlo ejecutando localmente la rama de desarrollo, sería genial.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2972
HAZAÑA: Desactivar los scripts en el lienzo
Hola, antes que nada, gracias por una herramienta tan estupenda. En mi proyecto me encontré con el problema de que tengo que desactivar los...
Issue #596
El selector de color muestra una posición incorrecta
! añadir
Issue #543
Gestor de bloques en GrapesJS que no funciona para columnas
Hola, Mi instalación de GJS conecta todos los bloques por defecto. Cada bloque se arrastra bien en la página salvo todas las "columnas". es...
Issue #2403
editor.load posiblemente causa una fuga de memoria
Cómo reproducirse:Naviagate a https://grapesjs.com/demo.htmlAbre la consola del navegador (Chrome) y escribe lo siguiente: 'setInterval(()...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.