PathFindingLinkFactory

[lieyongchang]

import * as SRD from 'storm-react-diagrams';

// setup diagram engine
this.engine = new SRD.DiagramEngine();
this.engine.installDefaultFactories();

//      
const pathfinding =
            // eslint-disable-next-line no-mixed-operators
                this.engine.getLinkFactories().getFactory <
            // eslint-disable-next-line no-mixed-operators
            SRD.PathFindingLinkFactory >
            SRD.PathFindingLinkFactory.NAME;

PathFindingLinkFactory is undefined, I am sure the syntax is correct. I am honestly not sure what is wrong here, any help is appreciated.

Originally posted by @lieyongchang in https://github.com/projectstorm/react-diagrams/issues/686#issuecomment-663453525

[renato-bohler]

Actually, your syntax doesn't look quite right. You are not calling getFactory (parenthesis are missing).

Try this instead (without typescript):

const pathfinding = engine.getLinkFactories().getFactory(PathFindingLinkFactory.NAME);

[lieyongchang]

I had this error message, any help will be appreciated. @renato-bohler @dylanvorster or anyone that has any advice on this, is also welcome. Really stuck at this

[renato-bohler]

Sorry for the late response. What version of react-diagrams are you using?

[lieyongchang]

"storm-react-diagrams": "^5.2.1"

[renato-bohler]

Oh, so there's the problem.

On version 6, engine.getLinkFactories() returns a FactoryBank, in which you can call getFactory on (see here)

On version 5, however, engine.getLinkFactories() returns an object on which a property key is the factory name and its value is the factory itself (see here).

In this case, I think you could do something like:

const pathfinding = this.engine.getLinkFactories()[PathFindingLinkFactory.NAME];

If that doesn't work, try logging this.engine.getLinkFactories() and see what it returns.

---

If you are using an older version of the library, its always a good idea to refer to documentation and examples on the tag that corresponds to the version you're using. In your case:

https://github.com/projectstorm/react-diagrams/tree/v5.2.1

[lieyongchang]

This works.

const pathfinding = this.engine.getLinkFactories()[PathFindingLinkFactory.NAME];

but the outcome is this:

However, if I move it slightly downwards, it kinda wrok?

am I missing some calculations?

[lieyongchang]

Expected outcome:

[lieyongchang]

Below is the line of code of how I am using it now

const pathfinding = this.engine.getLinkFactories()[PathFindingLinkFactory.NAME];
let linkDatapad = sourceDatapad.link(targetDatapad, pathfinding);

This is being called inside componentDidUpdate lifecycle

[renato-bohler]

Hmmm I never used this smart routing feature :disappointed: but here's the code for your expected outcome (on Storybook):

https://github.com/projectstorm/react-diagrams/blob/3ea63750118e476939fcdf1e848d911d2a584900/demos/demo-smart-routing/index.tsx#L60-L65

It is setting smartRouting prop to true on DiagramWidget.

[lieyongchang]

I have already set smartRouting to true 😞 🤔

<div>
  <SRD.DiagramWidget
    smartRouting={true}
    maxNumberPointsPerLink={1}
    className="storm-diagrams-canvas"
    diagramEngine={this.engine}
  />
</div>

Actually I was referring to this demo rather then this.