Skip to content

Commit

Permalink
- calculate rendered styles with a dirty flag (makes bb calcs more ef…
Browse files Browse the repository at this point in the history 
…ficient #1196 and makes ren'style calcs faster #1194)

- fixes rendering sync issues with dynamic rendered style calc #1194
- use * event namespace to prevent users from killing listeners used by ren'style calc #1194
  • Loading branch information
@maxkfranz
maxkfranz committed Dec 15, 2015
1 parent 0542ce0 commit 6793546
Show file tree
Hide file tree
Showing 4 changed files with 112 additions and 69 deletions.
42 changes: 29 additions & 13 deletions src/collection/dimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,15 +214,22 @@ fn = elesfn = ({
updateCompoundBounds: function(){
var cy = this.cy();

if( !cy.styleEnabled() || !cy.hasCompoundNodes() ){ return cy.collection(); } // save cycles for non compound graphs or when style disabled
// save cycles for non compound graphs or when style disabled
if( !cy.styleEnabled() || !cy.hasCompoundNodes() ){ return cy.collection(); }

var updated = [];

function update( parent ){
var children = parent.children();
var style = parent._private.style;
var includeLabels = style[ 'compound-sizing-wrt-labels' ].value === 'include';
var bb = children.boundingBox( { includeLabels: includeLabels, includeEdges: true } );
var bb = children.boundingBox( {
includeLabels: includeLabels,

// updating the compound bounds happens outside of the regular
// cache cycle (i.e. before fired events)
useCache: false
} );
var padding = {
top: style[ 'padding-top' ].pfValue,
bottom: style[ 'padding-bottom' ].pfValue,
Expand Down Expand Up @@ -404,11 +411,6 @@ var boundingBoxImpl = function( ele, options ){
var cy_p = cy._private;
var styleEnabled = cy_p.styleEnabled;

// recalculate projections etc
if( styleEnabled ){
cy_p.renderer.recalculateRenderedStyle( ele );
}

var bounds = {
x1: Infinity,
y1: Infinity,
Expand Down Expand Up @@ -556,12 +558,18 @@ var boundingBoxImpl = function( ele, options ){
return bounds;
};

var cachedBoundingBoxImpl = util.memoize( boundingBoxImpl, function boundingBoxCacheKey( ele, opts ){
var cachedBoundingBoxImpl = function( ele, opts ){
var _p = ele._private;
var rstyle = _p.rstyle;
var bb;

return 'TODO'; // TODO use an appropriate key
} );
if( !_p.bbCache || !opts.useCache ){
bb = _p.bbCache = boundingBoxImpl( ele, opts );
} else {
bb = _p.bbCache;
}

return bb;
};

elesfn.boundingBox = function( options ){
var bounds = {
Expand All @@ -576,15 +584,23 @@ elesfn.boundingBox = function( options ){
var opts = {
includeNodes: options.includeNodes === undefined ? true : options.includeNodes,
includeEdges: options.includeEdges === undefined ? true : options.includeEdges,
includeLabels: options.includeLabels === undefined ? true : options.includeLabels
includeLabels: options.includeLabels === undefined ? true : options.includeLabels,
useCache: options.useCache === undefined ? true : options.useCache
};

var eles = this;

// recalculate projections etc
var cy_p = eles.cy()._private;
var styleEnabled = cy_p.styleEnabled;
if( styleEnabled ){
cy_p.renderer.recalculateRenderedStyle( eles.union( eles.parallelEdges() ) );
}

for( var i = 0; i < eles.length; i++ ){
var ele = eles[i];

updateBoundsFromBox( bounds, boundingBoxImpl( ele, opts ) );
updateBoundsFromBox( bounds, cachedBoundingBoxImpl( ele, opts ) );
}

bounds.x1 = noninf( bounds.x1 );
Expand Down
131 changes: 75 additions & 56 deletions src/extensions/renderer/base/coord-ele-math.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,97 @@ BRp.registerCalculationListeners = function(){
var elesToUpdate = cy.collection();
var r = this;

cy.on('position', 'node', function( e ){
var enqueue = function( eles ){
elesToUpdate.merge( eles );

for( var i = 0; i < eles.length; i++ ){
var ele = eles[i];
var _p = ele._private;
var rstyle = _p.rstyle;

rstyle.clean = false;
_p.bbCache = null;
}
};

cy.on('position.* style.*', 'node', function( e ){
var node = e.cyTarget;

elesToUpdate
.merge( node )
.merge( node.connectedEdges() )
;
enqueue( node );
enqueue( node.connectedEdges() );

if( cy.hasCompoundNodes() ){
var parents = node.parents();

elesToUpdate
.merge( parents )
.merge( parents.connectedEdges() )
;
enqueue( parents )
enqueue( parents.connectedEdges() );
}
});

cy.on('add remove', 'edge', function( e ){
cy.on('add.* remove.* style.*', 'edge', function( e ){
var edge = e.cyTarget;

elesToUpdate.merge( edge.parallelEdges() );
enqueue( edge );
enqueue( edge.parallelEdges() );
});

cy.on('add.*', 'node', function( e ){
var ele = e.cyTarget;

enqueue( ele );
});

var updateEles = function(){
r.recalculateRenderedStyle( elesToUpdate );
elesToUpdate = cy.collection();

util.requestAnimationFrame( updateEles );
};

util.requestAnimationFrame( updateEles );
this.beforeRender( updateEles );
};

BRp.recalculateRenderedStyle = function( eles ){
var edges = [];
var nodes = [];

for( var i = 0; i < eles.length; i++ ){
var ele = eles[ i ];
var _p = ele._private;
var style = _p.style;
var rstyle = _p.rstyle;
var id = _p.data.id;

// only update if dirty
if( rstyle.clean ){ continue; }

if( _p.group === 'nodes' ){
var pos = _p.position;

nodes.push( ele );

rstyle.nodeX = pos.x;
rstyle.nodeY = pos.y;
rstyle.nodeW = style[ 'width' ].pfValue;
rstyle.nodeH = style[ 'height' ].pfValue;
} else { // edges

var srcPos = _p.source._private.position;
var tgtPos = _p.target._private.position;

edges.push( ele );

// update rstyle positions
rstyle.srcX = srcPos.x;
rstyle.srcY = srcPos.y;
rstyle.tgtX = tgtPos.x;
rstyle.tgtY = tgtPos.y;

} // if edges

rstyle.clean = true;
}

this.recalculateEdgeProjections( edges );
this.recalculateLabelProjections( nodes, edges );
};

// Project mouse
Expand Down Expand Up @@ -784,46 +843,6 @@ BRp.calculateLabelDimensions = function( ele, text, extraKey ){
return cache[ cacheKey ];
};

BRp.recalculateRenderedStyle = function( eles ){
var edges = [];
var nodes = [];

for( var i = 0; i < eles.length; i++ ){
var ele = eles[ i ];
var _p = ele._private;
var style = _p.style;
var rstyle = _p.rstyle;
var id = _p.data.id;

if( _p.group === 'nodes' ){
var pos = _p.position;

nodes.push( ele );

rstyle.nodeX = pos.x;
rstyle.nodeY = pos.y;
rstyle.nodeW = style[ 'width' ].pfValue;
rstyle.nodeH = style[ 'height' ].pfValue;
} else { // edges

var srcPos = _p.source._private.position;
var tgtPos = _p.target._private.position;

edges.push( ele );

// update rstyle positions
rstyle.srcX = srcPos.x;
rstyle.srcY = srcPos.y;
rstyle.tgtX = tgtPos.x;
rstyle.tgtY = tgtPos.y;

} // if edges
}

this.recalculateEdgeProjections( edges );
this.recalculateLabelProjections( nodes, edges );
};

BRp.recalculateLabelProjections = function( nodes, edges ){
for( var i = 0; i < nodes.length; i++ ){
this.recalculateNodeLabelProjection( nodes[ i ] );
Expand Down Expand Up @@ -1412,8 +1431,8 @@ BRp.findEdgeControlPoints = function( edges ){
this.calculateLabelAngles( edge );
this.recalculateEdgeLabelProjections( edge );

}
}
} // for pair edges
} // for pair ids

for( var i = 0; i < haystackEdges.length; i++ ){
var edge = haystackEdges[ i ];
Expand Down
1 change: 1 addition & 0 deletions src/extensions/renderer/base/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ BRp.init = function( options ){
r.tapholdDuration = 500;

r.bindings = [];
r.beforeRenderCallbacks = [];

r.registerNodeShapes();
r.registerArrowShapes();
Expand Down
7 changes: 7 additions & 0 deletions src/extensions/renderer/base/redraw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,10 @@ BRp.redraw = function( options ){
r.renderOptions = options;
};

BRp.beforeRender = function( fn ){
this.beforeRenderCallbacks.push( fn );
};

BRp.startRenderLoop = function(){
var r = this;

Expand All @@ -51,6 +55,9 @@ BRp.startRenderLoop = function(){
if( r.requestedFrame && !r.skipFrame ){
var startTime = util.performanceNow();

var cbs = r.beforeRenderCallbacks;
for( var i = 0; i < cbs.length; i++ ){ cbs[i](); }

r.render( r.renderOptions );

var endTime = r.lastRedrawTime = util.performanceNow();
Expand Down

0 comments on commit 6793546

Please sign in to comment.