Bug: Cannot read property '32' or '69' of undefined. Uncaught TypeError: Cannot read property 'querySelector' of null

[ganesh-sankey]

Application got crashed and received bunch of errors and warnings i.e.

• Uncaught TypeError: Cannot read property '32' or '69' of undefined
• Uncaught TypeError: Cannot read property 'querySelector' of null
• Warning: Can't call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method

Step to reproduce the bug:

1. Clone the project to local
2. Run the command 'yarn run storybook'
3. Go to file /demos/demo-drag-and-drop/components/BodyWidget.tsx and enable the smart routing for DiagramWidget i.e. line no 66 -> <DiagramWidget smartRouting={true} className="srd-demo-canvas" diagramEngine={this.props.app.getDiagramEngine()} />
4. Go to localhost:9001 -> Select Advance Techniques ->Large Application
5. Drag one node to top such that it will not be visible to user, then scroll down and drag other node to down side immediately. At this point application will get crashed

Step to reproduce the bug(visual):

Error and warning screenshots:

[ramykhuffash]

This bug is in the smart routing somewhere and can be reproduced on the demo page (http://projectstorm.cloud/react-diagrams/?selectedKind=Advanced%20Techniques&selectedStory=Smart%20routing&full=0&addons=1&stories=1&panelRight=1&addonPanel=storybook%2Fcode%2Fpanel)

Drag a node off the bottom of the page to get the error. I tried digging into the code, but it's too advanced for me to figure out. I'm guessing the issue is somewhere in the PathFinding (https://github.com/projectstorm/react-diagrams/blob/master/src/routing/PathFinding.ts) or in the getCanvasMatrix type code in the engine. Apologies for not being able to be more helpful!

[DanieLazarLDAPPS]

Hello, I somehow managed to fix this issue by #384 so let's see if the review will pass.

[msaglietto]

Any update on this ? I'm having the same problem ..

[msaglietto]

The issue is when you drag something outside the svg area

So the pathfinding calculation can not find the coordenates here: https://github.com/projectstorm/react-diagrams/blob/master/packages/react-diagrams-routing/src/link/PathFindingLinkWidget.tsx#L82

I tried adding something like this on the render in order to cancel the drag but that bring some other problems with the state machine

try {
  const directPathCoords = this.pathFinding.calculateDirectPath(_.first(points), _.last(points));
} catch (e) {
  const currentState = this.props.diagramEngine.getStateMachine().getCurrentState();
  if (currentState) {
    this.props.diagramEngine.getStateMachine().popState()
  }
  return null
}

Is there a way to make so the SVG area its bigger than the container ?