React-diagrams: Uncaught TypeError: Cannot read property 'x' of undefined in at DiagramEngine._this.calculateMatrixDimensions

[ganesh-sankey]

In demo drag -and-drop(large application) example, If smart routing is enabled for DiagramWidget and user tried to drag and drop Node from side menu to workspacepanel area (diagram widget area/graph area), it throughs error in console as Uncaught TypeError: Cannot read property 'x' of undefined in at DiagramEngine._this.calculateMatrixDimensions

This occurs only if smart routing is enabled for DiagramWidget and there is no Node/Link/Port drawn on that DigramWidget, then drag and drop the Node from side panel and try to move around workspacel area.

Steps to reproduce:

1. Go to file: .demos/demo-drag-and-drop/Application.ts
2. From that file remove the code that create default nodes, links and ports i.e

    //3-A) create a default node
    var node1 = new SRD.DefaultNodeModel("Node 1", "rgb(0,192,255)");
    let port = node1.addOutPort("Out");
    node1.setPosition(100, 100);

    //3-B) create another default node
    var node2 = new SRD.DefaultNodeModel("Node 2", "rgb(192,255,0)");
    let port2 = node2.addInPort("In");
    node2.setPosition(400, 100);

    // link the ports
    let link1 = port.link(port2);

    this.activeModel.addAll(node1, node2, link1);

1. Go to file Go to file: .demos/demo-drag-and-drop/components/BodyWidget.tsx

2. From that file, add property to DiagramWidget to enable smart routing
   <DiagramWidget className="srd-demo-canvas" diagramEngine={this.props.app.getDiagramEngine()} smartRouting={true} />

3. Run the project. ie. npm run storybook.

4. On application, under Advance Techniques-> Large application, try to drag In Node from side panel inside DiagramWidget then move around that In Node within area. Look inside console of browser, you will found the same error.

[unsafecode]

I can confirm the same behavior w/ smart routing enabled

[Andrew-Zn]

How have you solved your filing problems ?

[Andrew-Zn]

I met the same problem as you

[quocvan1311]

I'm facing the same problem on custom node, if the board has any default node this issue not happen, but ther are only default node and without any link, this error has been thrown

[renjithkathirolil]

Any solution for this? @quocvan1311 @unsafecode @gothy @ganesh-sankey

[AnderLuiz]

Same behavior.

added engine.recalculatePortsVisually(); before this.forceUpdate(); on onDrop event. Worked for me with version 5.2.1

[renjithkathirolil]

@AnderLuiz Thanks mate, it worked like a charm! 👍

[frank-martinez-27]

@AnderLuiz, @renjithkathirolil could you please explain where did you set engine.recalculatePortsVisually()?

[AnderLuiz]

@frank-martinez-27 , before this line

this.props.app.getDiagramEngine().recalculatePortsVisually()

[frank-martinez-27]

@AnderLuiz Thank you! :) In my app I put it in the render function of the App component (before passing the engine to the component that displays the diagram) and it worked