Improve performance by avoiding repeated recalculateRenderedStyle #3309

src/collection/dimensions/bounds.js

@@ -1,6 +1,6 @@
 import * as is from '../../is';
 import { assignBoundingBox, expandBoundingBoxSides,  clearBoundingBox, expandBoundingBox, makeBoundingBox, copyBoundingBox, shiftBoundingBox, updateBoundingBox } from '../../math';
-import { defaults, getPrefixedProperty, hashIntsArray } from '../../util';
+import { defaults, getPrefixedProperty, getBoundingBoxPosKey } from '../../util';
 
 let fn, elesfn;
 
@@ -800,18 +800,6 @@ let getKey = function( opts ){
   return key;
 };
 
-let getBoundingBoxPosKey = ele => {
-  if( ele.isEdge() ){
-    let p1 = ele.source().position();
-    let p2 = ele.target().position();
-    let r = x => Math.round(x);
-
-    return hashIntsArray([ r(p1.x), r(p1.y), r(p2.x), r(p2.y) ]);
-  } else {
-    return 0;
-  }
-};
-
 let cachedBoundingBoxImpl = function( ele, opts ){
   let _p = ele._private;
   let bb;
@@ -926,6 +914,7 @@ elesfn.boundingBox = function( options ){
         let isPosKeySame = _p.bbCachePosKey === currPosKey;
         let useCache = opts.useCache && isPosKeySame && !_p.styleDirty;
 
+        _p.bbCachePosKey = currPosKey;
         ele.recalculateRenderedStyle( useCache );
       }
     }

src/extensions/renderer/base/coord-ele-math/edge-control-points.js

@@ -706,28 +706,7 @@ BRp.findEdgeControlPoints = function( edges ){
   let cy = r.cy;
   let hasCompounds = cy.hasCompoundNodes();
 
-  let hashTable = {
-    map: new Map(),
-    get: function(pairId){
-      let map2 = this.map.get(pairId[0]);
-
-      if( map2 != null ){
-        return map2.get(pairId[1]);
-      } else {
-        return null;
-      }
-    },
-    set: function(pairId, val){
-      let map2 = this.map.get(pairId[0]);
-
-      if( map2 == null ){
-        map2 = new Map();
-        this.map.set(pairId[0], map2);
-      }
-
-      map2.set(pairId[1], val);
-    }
-  };
+  let hashTable = new Map();
 
   let pairIds = [];
   let haystackEdges = [];
@@ -756,7 +735,7 @@ BRp.findEdgeControlPoints = function( edges ){
     let srcIndex = src.poolIndex();
     let tgtIndex = tgt.poolIndex();
 
-    let pairId = [ srcIndex, tgtIndex ].sort();
+    let pairId = `${srcIndex}_${tgtIndex}_${edgeIsUnbundled}`;
 
     let tableEntry = hashTable.get( pairId );
 

src/extensions/renderer/base/coord-ele-math/rendered-style.js

@@ -1,3 +1,5 @@
+import { getBoundingBoxPosKey } from '../../../../util';
+
 let BRp = {};
 
 BRp.registerCalculationListeners = function(){
@@ -50,6 +52,8 @@ BRp.registerCalculationListeners = function(){
           enqueue( ele.connectedEdges() );
 
           rstyle.cleanConnected = true;
+        } else if (ele.isEdge()) {
+          ele._private.bbCachePosKey = getBoundingBoxPosKey( ele );
         }
       }
 

src/util/bounds.js

@@ -0,0 +1,13 @@
+import { hashIntsArray } from '.';
+
+export const getBoundingBoxPosKey = (ele) => {
+  if (ele.isEdge()) {
+    let p1 = ele.source().position();
+    let p2 = ele.target().position();
+    let r = (x) => Math.round(x);
+
+    return hashIntsArray([r(p1.x), r(p1.y), r(p2.x), r(p2.y)]);
+  } else {
+    return 0;
+  }
+};

src/util/index.js

@@ -12,6 +12,7 @@ export * from './maps';
 export * from './strings';
 export * from './timing';
 export * from './hash';
+export * from './bounds';
 
 export { strings, extend, extend as assign, memoize, regex, sort };