@ -3,7 +3,7 @@ if (typeof window !== 'undefined') {
window . webkitRequestAnimationFrame || window . msRequestAnimationFrame ;
window . webkitRequestAnimationFrame || window . msRequestAnimationFrame ;
}
}
var util = require ( '../../util' ) ;
let util = require ( '../../util' ) ;
class CanvasRenderer {
class CanvasRenderer {
@ -24,7 +24,7 @@ class CanvasRenderer {
this . defaultOptions = {
this . defaultOptions = {
hideEdgesOnDrag : false ,
hideEdgesOnDrag : false ,
hideNodesOnDrag : false
hideNodesOnDrag : false
}
} ;
util . extend ( this . options , this . defaultOptions ) ;
util . extend ( this . options , this . defaultOptions ) ;
this . _determineBrowserMethod ( ) ;
this . _determineBrowserMethod ( ) ;
@ -136,14 +136,14 @@ class CanvasRenderer {
this . body . emitter . emit ( "initRedraw" ) ;
this . body . emitter . emit ( "initRedraw" ) ;
this . redrawRequested = false ;
this . redrawRequested = false ;
var ctx = this . canvas . frame . canvas . getContext ( '2d' ) ;
let ctx = this . canvas . frame . canvas . getContext ( '2d' ) ;
// when the container div was hidden, this fixes it back up!
// when the container div was hidden, this fixes it back up!
if ( this . canvas . frame . canvas . width === 0 || this . canvas . frame . canvas . height === 0 ) {
if ( this . canvas . frame . canvas . width === 0 || this . canvas . frame . canvas . height === 0 ) {
this . canvas . setSize ( ) ;
this . canvas . setSize ( ) ;
}
}
if ( this . pixelRation === undefined ) {
if ( this . pixelRatio === undefined ) {
this . pixelRatio = ( window . devicePixelRatio || 1 ) / ( ctx . webkitBackingStorePixelRatio ||
this . pixelRatio = ( window . devicePixelRatio || 1 ) / ( ctx . webkitBackingStorePixelRatio ||
ctx . mozBackingStorePixelRatio ||
ctx . mozBackingStorePixelRatio ||
ctx . msBackingStorePixelRatio ||
ctx . msBackingStorePixelRatio ||
@ -154,8 +154,8 @@ class CanvasRenderer {
ctx . setTransform ( this . pixelRatio , 0 , 0 , this . pixelRatio , 0 , 0 ) ;
ctx . setTransform ( this . pixelRatio , 0 , 0 , this . pixelRatio , 0 , 0 ) ;
// clear the canvas
// clear the canvas
var w = this . canvas . frame . canvas . clientWidth ;
var h = this . canvas . frame . canvas . clientHeight ;
let w = this . canvas . frame . canvas . clientWidth ;
let h = this . canvas . frame . canvas . clientHeight ;
ctx . clearRect ( 0 , 0 , w , h ) ;
ctx . clearRect ( 0 , 0 , w , h ) ;
@ -190,8 +190,6 @@ class CanvasRenderer {
if ( hidden === true ) {
if ( hidden === true ) {
ctx . clearRect ( 0 , 0 , w , h ) ;
ctx . clearRect ( 0 , 0 , w , h ) ;
}
}
}
}
@ -203,10 +201,18 @@ class CanvasRenderer {
* @ private
* @ private
* /
* /
_drawNodes ( ctx , alwaysShow = false ) {
_drawNodes ( ctx , alwaysShow = false ) {
var nodes = this . body . nodes ;
var nodeIndices = this . body . nodeIndices ;
var node ;
var selected = [ ] ;
let nodes = this . body . nodes ;
let nodeIndices = this . body . nodeIndices ;
let node ;
let selected = [ ] ;
let margin = 20 ;
let topLeft = this . canvas . DOMtoCanvas ( { x : - margin , y : - margin } ) ;
let bottomRight = this . canvas . DOMtoCanvas ( {
x : this . canvas . frame . canvas . clientWidth + margin ,
y : this . canvas . frame . canvas . clientHeight + margin
} ) ;
let viewableArea = { top : topLeft . y , left : topLeft . x , bottom : bottomRight . y , right : bottomRight . x } ;
// draw unselected nodes;
// draw unselected nodes;
for ( let i = 0 ; i < nodeIndices . length ; i ++ ) {
for ( let i = 0 ; i < nodeIndices . length ; i ++ ) {
@ -219,10 +225,12 @@ class CanvasRenderer {
if ( alwaysShow === true ) {
if ( alwaysShow === true ) {
node . draw ( ctx ) ;
node . draw ( ctx ) ;
}
}
// todo: replace check
//else if (node.inArea() === true) {
node . draw ( ctx ) ;
//}
else if ( node . isBoundingBoxOverlappingWith ( viewableArea ) === true ) {
node . draw ( ctx ) ;
}
else {
console . log ( "hidden" )
}
}
}
}
}
@ -241,9 +249,9 @@ class CanvasRenderer {
* @ private
* @ private
* /
* /
_drawEdges ( ctx ) {
_drawEdges ( ctx ) {
var edges = this . body . edges ;
var edgeIndices = this . body . edgeIndices ;
var edge ;
let edges = this . body . edges ;
let edgeIndices = this . body . edgeIndices ;
let edge ;
for ( let i = 0 ; i < edgeIndices . length ; i ++ ) {
for ( let i = 0 ; i < edgeIndices . length ; i ++ ) {
edge = edges [ edgeIndices [ i ] ] ;
edge = edges [ edgeIndices [ i ] ] ;
@ -260,9 +268,9 @@ class CanvasRenderer {
* @ private
* @ private
* /
* /
_drawControlNodes ( ctx ) {
_drawControlNodes ( ctx ) {
var edges = this . body . edges ;
var edgeIndices = this . body . edgeIndices ;
var edge ;
let edges = this . body . edges ;
let edgeIndices = this . body . edgeIndices ;
let edge ;
for ( let i = 0 ; i < edgeIndices . length ; i ++ ) {
for ( let i = 0 ; i < edgeIndices . length ; i ++ ) {
edge = edges [ edgeIndices [ i ] ] ;
edge = edges [ edgeIndices [ i ] ] ;
@ -277,7 +285,7 @@ class CanvasRenderer {
* /
* /
_determineBrowserMethod ( ) {
_determineBrowserMethod ( ) {
if ( typeof window !== 'undefined' ) {
if ( typeof window !== 'undefined' ) {
var browserType = navigator . userAgent . toLowerCase ( ) ;
let browserType = navigator . userAgent . toLowerCase ( ) ;
this . requiresTimeout = false ;
this . requiresTimeout = false ;
if ( browserType . indexOf ( 'msie 9.0' ) != - 1 ) { // IE 9
if ( browserType . indexOf ( 'msie 9.0' ) != - 1 ) { // IE 9
this . requiresTimeout = true ;
this . requiresTimeout = true ;