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

4 Replies
2 Participants

Created by
RC raphael chancey

Platform
React - EJ 2

Platform
React - EJ 2

Control
Diagram

Created On
Nov 4, 2019 03:36 PM

Last Activity On
Nov 27, 2019 12:43 AM

Want to subscribe?
SIGN IN

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 02:03 AM

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);

}

Sample: https://stackblitz.com/edit/react-wu46we-rixupt?file=index.js

Help documentation: https://ej2.syncfusion.com/react/documentation/api/diagram/#add

Regards,

Shyam G

RC raphael chancey November 7, 2019 06:07 PM

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 11:40 AM

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 27^th November, 2019.

You can track the status of the issue from the below feedback link.

https://www.syncfusion.com/feedback/10071/exception-raised-while-adding-node-at-runtime-by-enabling-virtualization

Regards,

Shyam G

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

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.

https://www.npmjs.com/package/@syncfusion/ej2-diagrams

Regards,

Shyam G

4 Replies
2 Participants
Want to subscribe?
SIGN IN
Created by
RC raphael chancey
Platform
React - EJ 2
Control
Diagram
Created On
Nov 4, 2019 03:36 PM
Last Activity On
Nov 27, 2019 12:43 AM