Issue #1396Opened September 1, 2018by jmrgz0 reactions

[Bug] Background image layers

Question

Bug: when your pre-defined block or saved templates have two or more background layers, if you add a new layer, a lot of new empty layers are created.

How to reproduce it:

  1. Go to https://grapesjs.com/demo.html
  2. Select the pink Header block
  3. Go to Decorations -> background and add a new layer
  4. Deselect the pink Header and select it again
  5. Go to Decorations -> background, you will see new empty layers
  6. If you repeat the previous cycle, you will get hundreds of empty layers.

30 seconds video showing the problem: https://screencast-o-matic.com/watch/cFQVb0q4Ex

It happens in Chrome, Safari and Firefox, last versions.

@artf can you give me any clue of where the new background layers addition is controlled in grapesjs? I would like to try to fix it myself. Thank you!

Answers (2)

artfSeptember 2, 20180 reactions

Thanks @xamdam777 for the report. Actually, as you already indicated, this happens when you import the style (and browser's CSS parsers are pretty messy), and unfortunately, in few cases, conflicts happen. (eg. Chrome generates a style that even itself doesn't understand) schermata 2018-09-02 alle 21 10 25

the strange think happens here when you add a new layer schermata 2018-09-02 alle 21 15 01 as you see background-repeat and background-position contain more than 3 expected values (they have 5 for some reason). BTW if you would like to fix it you can probably start from the function which adds a new layer https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69

jmrgzSeptember 4, 20180 reactions

Thank you very much @artf, now I completely understand the problem, damned browser's parsers! :)

I have been doing some tests in addLayer() and refreshLayers().

This is my current approach, modifying refreshLayers() function, I try to detect the wrong layers and do not show them.

I placed the code below in line 131 of https://github.com/artf/grapesjs/blob/dev/src/style_manager/view/PropertyStackView.js#L69 (near the end of refreshLayers function)

It seems to be working fine with a lot of bugged samples (it never shows bugged layers), but since it does not really removes the wrong code (the wrong CSS is still there), I wonder if this is a bad solution.

	var arrayWrongLayers = new Array;					
	var myLayersArray = layersObj;
	var arrayLength = myLayersArray.length;
	for (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("It's image");
		} else {
			console.log("It's NOT image");
			arrayWrongLayers.push(i);
		}	
	}

       console.log("the wrong layers are" + arrayWrongLayers);

	var arrayWrongLayersLength = arrayWrongLayers.length;
	for (var i = 0; i < arrayWrongLayersLength; i++) {
		console.log(arrayWrongLayers[i]);
		//Deletes the last layer on the stack before rendering them in the style manager
               //Better to delete the layer by index, but I found problems doing that and pop() works too
		layersObj.pop();
	}

Maybe we could really delete the layer from the model using this approach?

Thanks again!

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.