When a node has a background image loaded for it, the stored element …

…texture cache for all nodes with the same (node) style key should be invalidated. (The same style key infers that the nodes share the same set of background images.) Otherwise, the prior texture is re-used, and the image is not visible.

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

@@ -58,6 +58,8 @@ CRp.drawNode = function( context, node, shiftToOriginWithBb, drawLabel ){
 
       // get image, and if not loaded then ask to redraw when later loaded
       image[i] = r.getCachedImage( url, bgImgCrossOrigin, function(){
+        _p.backgroundTimestamp = Date.now();
+
         node.emitAndNotify('background');
       } );
     }

src/extensions/renderer/canvas/ele-texture-cache-lookup.js

@@ -5,12 +5,13 @@ import * as util from '../../../util';
 // Allows lookups for (ele, lvl) => cache.
 // Uses keys so elements may share the same cache.
 class ElementTextureCacheLookup {
-  constructor(getKey){
+  constructor(getKey, doesEleInvalidateKey = util.falsify){
     this.idsByKey = new Map();
     this.keyForId = new Map();
     this.cachesByLvl = new Map();
     this.lvls = [];
     this.getKey = getKey;
+    this.doesEleInvalidateKey = doesEleInvalidateKey;
   }
 
   getIdsFor(key){
@@ -79,6 +80,10 @@ class ElementTextureCacheLookup {
     return prevKey !== newKey;
   }
 
+  isInvalid(ele){
+    return this.keyHasChangedFor(ele) || this.doesEleInvalidateKey(ele);
+  }
+
   getCachesAt(lvl){
     let { cachesByLvl, lvls } = this;
     let caches = cachesByLvl.get(lvl);
@@ -153,13 +158,13 @@ class ElementTextureCacheLookup {
 
     this.deleteKeyMappingFor(ele);
 
-    return this.getNumberOfIdsForKey(key) === 0;
-  }
+    let entireKeyInvalidated = this.doesEleInvalidateKey(ele);
 
-  invalidateIfKeyHasChanged(ele){
-    if( this.keyHasChangedFor(ele) ){
-      return this.invalidate(ele);
+    if( entireKeyInvalidated ){ // clear mapping for current key
+      this.invalidateKey(key);
     }
+
+    return entireKeyInvalidated || this.getNumberOfIdsForKey(key) === 0;
   }
 }
 

src/extensions/renderer/canvas/ele-texture-cache.js

@@ -1,5 +1,5 @@
 import * as math from '../../../math';
-import { trueify, removeFromArray, clearArray, MAX_INT, assign, defaults } from '../../../util';
+import { trueify, falsify, removeFromArray, clearArray, MAX_INT, assign, defaults } from '../../../util';
 import Heap from '../../../heap';
 import defs from './texture-cache-defs';
 import ElementTextureCacheLookup from './ele-texture-cache-lookup';
@@ -31,6 +31,7 @@ const getTxrReasons = {
 
 const initDefaults = defaults({
   getKey: null,
+  doesEleInvalidateKey: falsify,
   drawElement: null,
   getBoundingBox: null,
   isVisible: trueify,
@@ -48,7 +49,7 @@ const ElementTextureCache = function( renderer, initOptions ){
 
   assign(self, opts);
 
-  self.lookup = new ElementTextureCacheLookup(opts.getKey);
+  self.lookup = new ElementTextureCacheLookup(opts.getKey, opts.doesEleInvalidateKey);
 
   self.setupDequeueing();
 };
@@ -285,8 +286,9 @@ ETCp.invalidateElement = function( ele ){
   let self = this;
   let lookup = self.lookup;
   let caches = [];
+  let invalid = lookup.isInvalid(ele);
 
-  if( !lookup.keyHasChangedFor(ele) ){
+  if( !invalid ){
     return; // override the invalidation request if the element key has not changed
   }
 
@@ -298,7 +300,7 @@ ETCp.invalidateElement = function( ele ){
     }
   }
 
-  let noOtherElesUseCache = lookup.invalidate( ele );
+  let noOtherElesUseCache = lookup.invalidate(ele);
 
   if( noOtherElesUseCache ){
     for( let i = 0; i < caches.length; i++ ){

src/extensions/renderer/canvas/index.js

@@ -100,6 +100,12 @@ function CanvasRenderer( options ){
   let getStyleKey = ele => ele[0]._private.nodeKey;
   let drawElement = (context, ele, bb, scaledLabelShown) => r.drawElement( context, ele, bb, false );
   let getElementBox = ele => { ele.boundingBox(); return ele[0]._private.overlayBounds; };
+  let backgroundTimestampHasChanged = ele => {
+    let _p = ele[0]._private;
+    let same = _p.oldBackgroundTimestamp === _p.backgroundTimestamp;
+
+    return !same;
+  };
 
   let getLabelKey = ele => ele[0]._private.labelStyleKey;
   let getSourceLabelKey = ele => ele[0]._private.sourceLabelStyleKey;
@@ -114,6 +120,7 @@ function CanvasRenderer( options ){
 
   let eleTxrCache = r.data.eleTxrCache = new ElementTextureCache( r, {
     getKey: getStyleKey,
+    doesEleInvalidateKey: backgroundTimestampHasChanged,
     drawElement: drawElement,
     getBoundingBox: getElementBox,
     allowEdgeTxrCaching: false,
@@ -152,6 +159,13 @@ function CanvasRenderer( options ){
 
     // any change invalidates the layers
     lyrTxrCache.invalidateElements( eles );
+
+    // update the old bg timestamp so diffs can be done in the ele txr caches
+    for( let i = 0; i < eles.length; i++ ){
+      let _p = eles[i]._private;
+
+      _p.oldBackgroundTimestamp = _p.backgroundTimestamp;
+    }
   });
 
   let refineInLayers = reqs => {