React-diagrams: Crash when using smart routing

[deltakosh]

Hey!

I've got this error when using smart routing:

Uncaught TypeError: Cannot set property 'g' of undefined
    at JPFNeverMoveDiagonally.JumpPointFinderBase.findPath (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:61210)
    at PathFinding.calculateDirectPath (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:61210)
    at DefaultLinkWidget.render (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:61210)
    at finishClassComponent (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:52291)
    at updateClassComponent (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:52254)
    at beginWork (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:53072)
    at performUnitOfWork (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:55810)
    at workLoop (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:55850)
    at renderRoot (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:55936)
    at performWorkOnRoot (:1338/.temp/localDevUMD/nodeEditor/babylon.nodeEditor.js:56827)

If I turn smart routing off, it works flawlessly

Here is our setup (with smart routing off):
https://github.com/BabylonJS/Babylon.js/blob/master/nodeEditor/src/graphEditor.tsx#L528

Thanks a lot!

[dylanvorster]

Oh wow, its now in a game engine O_O I am busy reworking the entire smart routing system as we speak. The new system introduces smart routing as a new type of Link. I hope to have something out in the next few days, and this might solve your issue. If not, I'm really interested in working with you to help make this a success in your project.

[dylanvorster]

to follow the progress, head on over to https://gitter.im/projectstorm/react-diagrams

[dylanvorster]

Also the new structure of the project: https://github.com/projectstorm/react-diagrams/tree/lerna (you will be interested in the lib-routing folder)

[deltakosh]

Man we love your library:)

[deltakosh]

What should I do to switch to the new project? (using 5.2.1 for now)
Your tool will be a central piece of our 4.1 release as it will fuel our Node Material system :)

So glad we can work together

[dylanvorster]

Definitely getting some blender comp-pipeline and Unreal-engine vibes in that screenshot. Ill let you know as soon I have something available

[dylanvorster]

Im also busy fixing the link issue (the one where it doesnt respect horizonal mode)

[deltakosh]

Clearly:) feel free to ping me at [email protected] if you want to chat!

[dylanvorster]

New fixes rolling out soon:

You can specify the alignment of a port (top, left, bottom, right etc..)

[deltakosh]

Exactly what we need!!!

[dylanvorster]

update from my side:

• thanks to lots of componentShouldUpdate improvements, the large performance demo goes down from 140ms rendering times to 3 to 10 ms rendering times.
• you no longer need to call recalculatePortCoords (method is removed)
• there is no longer a double render cycle on initial render, the links now efficiently track their target ports on initial renders and wait for them to report initial dimensions.

[dylanvorster]

if you check out the lerna branch, run yarn in the root and then head to the lib-demo-gallery you can run yarn start and then you should get the new demos. Ive been giving this some thought, and I wouldn't mind getting involved in upgrading your current implementation in Babylone.js when this releases

[deltakosh]

Oh man I did not dare asking but we will be honored to get your help on using your lib the best possible way

[dylanvorster]

So version 6 [Beta] is now out, and I would love to get your thoughts on the new system. I also have smart routing working again (the original issue in this ticket). Let me know!

[deltakosh]

Yeah!!! It is on npm right?

[deltakosh]

Well I have a few issues when moving to 6.0.0. Mostly breaking changes :(
Some examples:

• BaseWidget, PortState, BaseWidgetProps, AbstractNodeFactory, DiagramWidget do not exist anymore?
• How to generate our own linksegment? Previously: https://github.com/BabylonJS/Babylon.js/blob/823276970999137edcc3a10932954be5bee2202b/nodeEditor/src/components/diagram/link/advancedLinkFactory.tsx#L17. But now the signature changed
• Factory registration changed so installDefaultFactories or registerNodeFactory do not exist on engine
• engine do not own diagramModel anymore

Do you have a doc or a way to help me port our code? I created that branch https://github.com/BabylonJS/Babylon.js/tree/projectstorm. If you want to have a look:

• Fork the branch
• go to tools/gulp
• npm install
• npm install -g gulp
• With vscode, just go to debug tools, pick that:
  

• Hit F5 (with Chrome debugger extension installed in vscode)
• In localdev/src, replace or create the index.js file with the file attached:
  index.zip
• When the scene is running, you can click edit on the right panel and it will (at last ;D) open the editor with your tool :) Providing it is compiling ;)
  Thanks a million

[dylanvorster]

Most of the stuff you listed is still in the library, we just made the API more consistent:

• We moved away from Bem in favor of styled components (emotion). If you still want to use the BaseWidget, you are more than welcome to include it from @projectstorm/react-core (it still exists there)
• making your own link segments is still the same https://projectstorm.gitbook.io/react-diagrams/customizing/extending-default-links
• Factory registration now works like this: https://github.com/projectstorm/react-diagrams/blob/master/packages/react-diagrams/index.ts#L27
• engine do not own diagramModel anymore -> it does its just called model now https://github.com/projectstorm/react-diagrams/blob/96655baff2a86635f1c09c7de1b7ee9dfef0fc7e/packages/react-canvas-core/src/CanvasEngine.ts#L26

I am still busy writing docs including a migration guide, so stay tuned

[deltakosh]

Perfect !! Will give it a try asap

[dylanvorster]

If you need faster assistance, feel free to message me here https://gitter.im/projectstorm/react-diagrams

[deltakosh]

Ok so more questions :)

• Everything compiles but this one now: https://github.com/BabylonJS/Babylon.js/blob/projectstorm/nodeEditor/src/graphEditor.tsx#L289
  

• When executing, I've got this weird error: https://github.com/BabylonJS/Babylon.js/blob/projectstorm/nodeEditor/src/components/diagram/generic/genericNodeFactory.tsx#L14
  

[zacharyzhy]

@deltakosh I've seen the same nodeUpdated type error. The temporary workaround is to cast it to the type you need, like

.registerListener({
  nodesUpdated: () => {}
} as DiagramListener)

[deltakosh]

Wonderful! Still blocked on the other issue though

[deltakosh]

Any news, team?

[deltakosh]

Well just in case, we started doing some videos using your lib:

• https://www.youtube.com/watch?v=B5BO3nFc55s
• https://www.youtube.com/watch?v=fLXYhGhCej

[deltakosh]

up?

[memsenpai]

@deltakosh
@dylanvorster
i'm using 5.2.1 verrsion and also get this error in some device
anyone has suggest for fix it ? i hope i can keep smart routing on

[TranVanKung]

@memsenpai same for me. By the way, I am Vietnamese =))