We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. React - EJ 2
  4. TypeError: undefined is not an object (evaluating 'layout.levels[intersect[0]].rBounds')

TypeError: undefined is not an object (evaluating 'layout.levels[intersect[0]].rBounds')

I am generating a diagram programmatically and now getting this quite often: TypeError: undefined is not an object (evaluating 'layout.levels[intersect[0]].rBounds')

it happens on layout and also when I select the diagram. 


Any idea what causes this?  Really annoying it keeps doing this.. and no real indication of what it could be. 



I am using the diagramInstance.addNode and diagramInstance.addConnector APIs. Is there something I should watch out for when using the APIs?

some exception stack below.. 


(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:446
  443 | lastLevel = levelBounds[levelBounds.length - 1].rBounds;
  444 | 
  445 | if (intersect && intersect.length) {
> 446 |   bnds = layout.levels[intersect[0]].rBounds;
      | ^  447 |   bottom = bnds.bottom;
  448 | 
  449 |   if (bnds.y < firstLevel.y) {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:422
  419 |     levelBounds.push({
  420 |       rBounds: shapeBounds
  421 |     });
> 422 |     this.updateRearBounds(layout, shape, levelBounds, level);
      | ^  423 |   }
  424 | };
  425 | 
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:312
  309 |   dim: dimensions,
  310 |   level: level
  311 | };
> 312 | this.translateSubTree(translateInfo, undefined, prev !== undefined, dontupdate);
      | ^  313 | return {
  314 |   x: info.x,
  315 |   y: info.y,
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:696
  693 | childHeight = h ? width : height;
  694 | prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null; //Update sub tree
  695 | 
> 696 | childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);
      | ^  697 | childInfo = layout.graphNodes[child.id];
  698 | info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);
  699 | actBounds = {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:224
  221 | 
  222 | if (info.tree.children.length) {
  223 |   if (info.tree.orientation === 'Horizontal' && (info.tree.type !== 'Balanced' || info.tree.children.length === 1)) {
> 224 |     treeBounds = this.updateHorizontalTree(layout, shape, prev, dimensions.x, bottom, lev);
      | ^  225 |   } else if (info.tree.type === 'Balanced') {
  226 |     treeBounds = this.updateHorizontalTreeWithMultipleRows(layout, shape, prev, dimensions.x, bottom, lev);
  227 |   } else {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:696
  693 | childHeight = h ? width : height;
  694 | prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null; //Update sub tree
  695 | 
> 696 | childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);
      | ^  697 | childInfo = layout.graphNodes[child.id];
  698 | info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);
  699 | actBounds = {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:224
  221 | 
  222 | if (info.tree.children.length) {
  223 |   if (info.tree.orientation === 'Horizontal' && (info.tree.type !== 'Balanced' || info.tree.children.length === 1)) {
> 224 |     treeBounds = this.updateHorizontalTree(layout, shape, prev, dimensions.x, bottom, lev);
      | ^  225 |   } else if (info.tree.type === 'Balanced') {
  226 |     treeBounds = this.updateHorizontalTreeWithMultipleRows(layout, shape, prev, dimensions.x, bottom, lev);
  227 |   } else {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:696
  693 | childHeight = h ? width : height;
  694 | prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null; //Update sub tree
  695 | 
> 696 | childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);
      | ^  697 | childInfo = layout.graphNodes[child.id];
  698 | info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);
  699 | actBounds = {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:224
  221 | 
  222 | if (info.tree.children.length) {
  223 |   if (info.tree.orientation === 'Horizontal' && (info.tree.type !== 'Balanced' || info.tree.children.length === 1)) {
> 224 |     treeBounds = this.updateHorizontalTree(layout, shape, prev, dimensions.x, bottom, lev);
      | ^  225 |   } else if (info.tree.type === 'Balanced') {
  226 |     treeBounds = this.updateHorizontalTreeWithMultipleRows(layout, shape, prev, dimensions.x, bottom, lev);
  227 |   } else {
(anonymous function)
node_modules/@syncfusion/ej2-diagrams/src/diagram/layout/hierarchical-tree.js:696
  693 | childHeight = h ? width : height;
  694 | prevBounds = layout.levels[lev + 1] ? layout.levels[lev + 1].rBounds : null; //Update sub tree
  695 | 
> 696 | childBounds = this.updateTree(layout, right, bottom, child, lev + 1, layout.nameTable[info.tree.children[i - 1]]);
      | ^  697 | childInfo = layout.graphNodes[child.id];
  698 | info.maxLevel = Math.max(info.maxLevel || 0, childInfo.maxLevel || 0);
  699 | actBounds = {

here is code I use to add a node and connector


function addNode(nodeId, content, nodeType = 'decision') {
//see if the node exists
console.log(`add node`);
let node = diagramInstance.getNodeObject(nodeId);
//the Diagram returns an empty object for not found.. so have to validate the id exists
if (!node.id) {
let nodeDef = DEFAULT_NODES[nodeType];
if (!nodeDef) {
console.error(`Node Def missing for `, nodeType, nodeId);
}
node = JSON.parse(JSON.stringify(nodeDef));
if (!node) {
node = {
annotations: [{ content: `node type missing for ${nodeType}` }]
}
}
node.id = nodeId;
node.annotations.push({ content })
diagramInstance.addNode(node);
}
}



function connectNode(sourceId, targetId, content) {
let id = sourceId + targetId;
let connector = diagramInstance.getConnectorObject(id);
// console.log(`connector `, connector)
if (!connector.id) {
console.log(`connect node`);
connector = {
id,
sourceID: sourceId,
targetID: targetId,
type: 'Bezier',
annotations: [
{
content,
style: { fill: "white" }
}
]
};
diagramInstance.addConnector(connector);
}
}


4 Replies
SG Shyam G Syncfusion Team November 6, 2019 07:03 AM UTC

Hi Raphael, 
 
Please use diagram add method to add a node/connector at runtime. Also, you should not change the node/connector id property at runtime. We have created a sample in which we have added node and connector at runtime. Could you please check in the below sample? Still if you face any issues, please share us more details such as modify the below sample. 
 
Code example: 
drawNode() {  
    let node = {id: 'newNode', width:100, height: 100, offsetX: 200,offsetY: 200};  
// add a node at runtime 
    diagramInstance.add(node);  
  } 
 
   drawConnector() { 
       let connector = {id: 'newConnector', sourcePoint: {x: 200, y:200}, targetPoint: {x:400,y:400} };  
       // add a connector at runtime 
       diagramInstance.add(connector);  
   } 
 
 

 
Regards, 
Shyam G 


RC raphael chancey November 7, 2019 11:07 PM UTC

Ok... after many hours of comparing and copying code.. I am able to reproduce the error in your example. Very painful to track down.

simply add constraints to the diagram . and it will throw the error I am getting. I was trying to add the virtualization constraint as in my other note

please help!!

Error occurred:
undefined is not an object (evaluating 'e.width.toString')

so I added this from the other examples you shared on enabling virtualization:
constraints={DiagramConstraints.Default | DiagramConstraints.Virtualization}
and of course add DiagramConstraints to the inport


additionally.. I enhanced your demo to draw 100 nodes on each click... not sure if that makes a difference
 drawNode() { 
              for (let index = 0; index < 100; index++) {
      nodeId+=1;
    let node = {
      id: 'newNode'+nodeId, 
    width:100, 
    height: 100, 
      annotations: [{ content: 'newNode'+nodeId }],
    offsetX: 200,
    offsetY: 200}; 
    diagramInstance.add(node); 
              }
  }

SG Shyam G Syncfusion Team November 8, 2019 04:40 PM UTC

Hi Raphael, 
 
We have logged “Exception raised while adding node at runtime by enabling virtualization” as a defect. The fix for this issue is estimated to be available on 27th November, 2019. 
 
You can track the status of the issue from the below feedback link. 
 
 
Regards, 
Shyam G 


SG Shyam G Syncfusion Team November 27, 2019 05:43 AM UTC

Hi Raphael,  
  
Reported Issue : Exception raised while adding node at runtime by enabling virtualization. 
  
We are glad to announce that our patch release (v17.3.29) is rolled out successfully and In that release, we have added the fix for reported issue.      
       
Please upgrade to the latest version packages to resolve this issue.       
 
Regards,  
Shyam G  


Loader.
Up arrow icon