- Home
- Forum
- React - EJ 2
- 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:446443 | 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:422419 | 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:312309 | dim: dimensions,
310 | level: level
311 | };
> 312 | this.translateSubTree(translateInfo, undefined, prev !== undefined, dontupdate);
| ^ 313 | return {
314 | x: info.x,
315 | y: info.y,
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);
}
}
SIGN IN To post a reply.
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);
} |
Help documentation: https://ej2.syncfusion.com/react/documentation/api/diagram/#add
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
SIGN IN To post a reply.
- 4 Replies
- 2 Participants
-
RC raphael chancey
- Nov 4, 2019 08:36 PM UTC
- Nov 27, 2019 05:43 AM UTC
