Newly added elements should not have their style initially updated tw…

…ice from false background image loading detection #2016

Caused by : Allow for background image properties to be specified as multiples (i.e. arrays or space separated strings) #1747

The check for whether background images are loading is incorrect, as the count of images does not take into account invalid/null entries.

src/collection/element.js

@@ -64,7 +64,8 @@ let Element = function( cy, params, restore ){
     edges: [], // array of connected edges
     children: [], // array of children
     parent: null, // parent ref
-    traversalCache: {} // cache of output of traversal functions
+    traversalCache: {}, // cache of output of traversal functions
+    backgrounding: false // whether background images are loading
   };
 
   // renderedPosition overrides if specified

src/extensions/renderer/canvas/drawing-nodes.js

@@ -45,16 +45,18 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel ){
 
   let bgImgProp = node.pstyle( 'background-image' );
   let urls = bgImgProp.value;
-  let url;
-  let urlDefined = [];
-  let image = [];
-  let numImages = urls.length;
-  for( let i = 0; i < numImages; i++ ){
-    url = urls[i];
-    urlDefined[i] = url != null && url !== 'none';
-    if( urlDefined[i] ){
+  let urlDefined = new Array( urls.length );
+  let image = new Array( urls.length );
+  let numImages = 0;
+  for( let i = 0; i < urls.length; i++ ){
+    let url = urls[i];
+    let defd = urlDefined[i] = url != null && url !== 'none';
+
+    if( defd ){
       let bgImgCrossOrigin = node.cy().style().getIndexedStyle(node, 'background-image-crossorigin', 'value', i);
 
+      numImages++;
+
       // get image, and if not loaded then ask to redraw when later loaded
       image[i] = r.getCachedImage( url, bgImgCrossOrigin, function(){
         node.emitAndNotify('background');
@@ -153,7 +155,7 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel ){
     let prevBging = _p.backgrounding;
     let totalCompleted = 0;
 
-    for( let i = 0; i < numImages; i++ ){
+    for( let i = 0; i < image.length; i++ ){
       if( urlDefined[i] && image[i].complete && !image[i].error ){
         totalCompleted++;
         r.drawInscribedImage( context, image[i], node, i, nodeOpacity );