Issue #1396💬 RespondidoAbierto el 1 de septiembre de 2018por jmrgzReacciones 0

Capas de imagen de fondo

Respuesta rápidapor artf

Gracias @xamdam777 por el informe. De hecho, como ya has indicado, esto ocurre cuando importas el estilo (y los analizadores CSS del navegador son bastante desordenados), y desafortunadamente, en pocos casos, ocurren conflictos. (por ejemplo, Chrome genera un estilo que ni siquiera él mismo entiende) ! schermata 2018-...

Lee la respuesta completa abajo ↓

Pregunta

Error: cuando tu bloque predefinido o plantillas guardadas tienen dos o más capas de fondo, si añades una nueva capa, se crean muchas capas vacías nuevas.

Cómo reproducirlo:

  1. Ir a https://grapesjs.com/demo.html
  2. Selecciona el bloque rosa de cabecera
  3. Ve a Decoraciones -> fondo y añade una nueva capa
  4. Desmarca el encabezado rosa y seleccionarlo de nuevo
  5. Ve a Decoraciones -> fondo, verás nuevas capas vacías
  6. Si repites el ciclo anterior, obtendrás cientos de capas vacías.

Vídeo de 30 segundos mostrando el problema: https://screencast-o-matic.com/watch/cFQVb0q4Ex

Ocurre en Chrome, Safari y Firefox, las últimas versiones.

@artf puedes darme alguna pista de dónde se controla la adición de nuevas capas de fondo en grapesjs? Me gustaría intentar arreglarlo yo mismo. ¡Gracias!

Respuestas (2)

artf2 de septiembre de 2018

Gracias @xamdam777 por el informe. De hecho, como ya has indicado, esto ocurre cuando importas el estilo (y los analizadores CSS del navegador son bastante desordenados), y desafortunadamente, en pocos casos, ocurren conflictos. (por ejemplo, Chrome genera un estilo que ni siquiera él mismo entiende) ! schermata 2018-09-02 alle 21 10 25

Lo extraño ocurre aquí cuando añades una nueva capa ! schermata 2018-09-02 alle 21 15 01 Como ves, 'repetición en fondo' y 'posición en fondo' contienen más de 3 valores esperados (por alguna razón tienen 5). Por cierto, si quieres arreglarlo, probablemente puedas empezar desde la función que añade una nueva capa https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69

jmrgz4 de septiembre de 2018

¡Muchas gracias, @artf, ahora entiendo perfectamente el problema, malditos parsers del navegador! :)

He estado haciendo algunas pruebas en addLayer() y refreshLayers().

Este es mi enfoque actual, modificando la función de actualizarLayers(), intento detectar las capas incorrectas y no las muestro.

Coloqué el código abajo en la línea 131 de https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69 (cerca del final de la función refreshLayers)

Parece funcionar bien con muchas muestras con fallos (nunca muestra capas con fallos), pero como realmente no elimina el código incorrecto (el CSS incorrecto sigue ahí), me pregunto si esta es una mala solución.

	var arrayWrongLayers = nuevo array;					
	var myLayersArray = layersObj;
	var arrayLength = myLayersArray.length;
	para (var i = 0; i < arrayLength; i++) {
		console.log(myLayersArray[i]);
		var imagevalue= myLayersArray[i].properties[0].value;
		if(( imagevalue.toLowerCase().indexOf('.png') >= 0)||( imagevalue.toLowerCase().indexOf('.jpg') >= 0)||( imagevalue.toLowerCase().indexOf('.gif') >= 0)||( imagevalue.toLowerCase().indexOf('.jpeg') >= 0)||( imagevalue.toLowerCase().indexOf('.svg') >= 0)){
			console.log("Es imagen");
		} else {
			console.log("NO es imagen");
			arrayWrongLayers.push(i);
		}	
	}

console.log("las capas equivocadas son" + arrayErrorLayers);

var arrayWrongLayersLength = arrayWrongLayers.length;
	for (var i = 0; i < arrayWrongLayersLength; i++) {
		console.log(arrayWrongLayers[i]);
		Elimina la última capa de la pila antes de renderizarlos en el gestor de estilos
               Mejor borrar la capa por index, pero he encontrado problemas al hacerlo y pop() también funciona
		layersObj.pop();
	}

¿Quizá podríamos realmente eliminar la capa del modelo usando este enfoque?

¡Gracias de nuevo!

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 →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.