MrBlenny / react-flow-chart

🌊 A flexible, stateless, declarative flow chart library for react.
https://mrblenny.github.io/react-flow-chart/index.html
MIT License
1.48k stars 306 forks source link

Revise NodeWrapper.tsx to allow cursor validation feedback during Link Creation #128

Open madbiker88 opened 4 years ago

madbiker88 commented 4 years ago

Firstly, I like the work that you are putting into this project. I have been experimenting with a link validator (and it works), but I wonder if there is a better timing and location for port validation on link creation/redefine.

My current validation goals are to prevent duplicate links between same nodes and potentially limit links to a specified node.

At present validation is only called from inside the PortWrapper, and it is only called on link completion - the effect is a boolean that either accepts or rejects the link - if rejected, the dragged link simply disappears from dragging without a clue to user as to why.

My goal is to get user indication that invalids drop is not allowed (by changing hover cursor to "not-allowed" when appropriate, and based on that simply prevent the link from completing).

I suggest it would be better is to move the validate test to become a "canDrop" validator: default=true", which is done earlier in the mouse events. No need to rename the validator or props

To do this, the validator would relocated be called from the PortWrapper.tsx/MouseEnter event where it can then be used to set a canDrop flag + change hover cursor style to "not-allowed" when needed to show the user that drop is not allowed.

The MouseUpHandler event would be slightly modified so it could not complete the link end unless the canDrop flag was valid, but there would be no need to call the validator again.

Using the validator this late is what is preventing user feedback. I think the current validatorProps are fine, but you might choose to rename or alias from <linkInfo: IOnLinkCompleteInput&{chart:IChart}>.

Any comments on the strategy. I don't think there is a way to do this from the current config options and think it needs to be a core library mod. My skills are rough but improving and I am more than happy to prepare a validation storybook example if you wish.

Regards Ross