_this.port.createLinkModel is not a function

projectstorm / react-diagrams

a super simple, no-nonsense diagramming library written in react that just works

https://projectstorm.cloud/react-diagrams

MIT License

8.69k stars 1.17k forks source link

_this.port.createLinkModel is not a function #747

Closed davidsu06 closed 3 years ago

davidsu06 commented 4 years ago

Hi, I'm getting this error when I start dragging a link from a port, then I go outside of the CanvasWidget, I release the mouse click, and then I come back to the CanvasWidget and press click again.

How could I fix it?

Thanks for your help!!

berabulut commented 4 years ago

Have you found a fix? I am having this too.

davidsu06 commented 4 years ago

I decided to create a reference to the canvas wrapper and add an event listener for 'mouseleave' for this wrapper. Then, when the 'linksUpdated' listener of the model is called I keep the track of the current dragging link in a variable, so with this I can check in the mouse leave listener if that variable isn't null, which means I'm trying to drag a link out of the wrapper.

So, if I'm dragging the link, I call the 'engine.getStateMachine().popState()' method which pops the drag link state, and then I repaint the canvas with 'engine.repaintCanvas()'.

Tracking the link when linksUpdated listener is fired:

Deleting the last drag link state and repainting the canvas if 'currentDrag' isn't null:

I'm not sure if this is the best way to solve it, for me it's working.

berabulut commented 4 years ago

Where do you call mouseLeaveListener? I think i managed to apply your solution to my code but it doesn't work with RightAnglePortModel. I can't drag the links to target node's port. It works with DefaultPortModel.

davidsu06 commented 4 years ago

I haven't used RightAnglePortModel so I can't tell you if it has to be applied in a different way.

I have a wrapper for the canvas:

And I basically register and unregister the listener in the componentDidMount and componentWillUnmount method respectively:

KurtKellens commented 3 years ago

I still have this issue, while creating a link between two components.

How to reproduce:

Start drawing a link
Before releasing the left-mouse button on an input, press the second mouse button (while holding the left-mouse button)

I would expect the link should be removed. especially when the option allowLooseLinks is false. new DragNewLinkState({ allowLooseLinks: false });

Hopefully, this issue can be fixed Any help appreciated!

davidsu06 commented 3 years ago

I still have this issue, while creating a link between two components.

How to reproduce:

Start drawing a link

Before releasing the left-mouse button on an input, press the second mouse button (while holding the left-mouse button)

I would expect the link should be removed. especially when the option allowLooseLinks is false. new DragNewLinkState({ allowLooseLinks: false });

Hopefully, this issue can be fixed Any help appreciated!

Just checked and happened for me too.

davidsu06 commented 3 years ago

https://github.com/projectstorm/react-diagrams/issues/885