Issue #1708💬 RespondidoAbierto el 4 de enero de 2019por charlietolearyReacciones 0

Los eventos de StyleManager se activan varias veces por cambio

Respuesta rápidapor khbhr

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:

Fragmento de códigoTEXT
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)

khbhr18 de septiembre de 2019

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.

ajumell18 de abril de 2020

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

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.