Add ability to select link without creating a point if the mouse is not moved about react-diagrams HOT 15 OPEN

Same workaround as @ianchanning but for when using createEngine

const engine = createEngine()
engine.maxNumberPointsPerLink = 0

from react-diagrams.

You can delete it after selecting with a shift. And yes, it is not obvious and comfortable )

from react-diagrams.

One way I've found to get this to work as expected is to remove the ability to create points. For my diagram I have no need for points, and so if you set maxNumberPointsPerLink to zero then when you click on a link it selects it instead of creating a point

<DiagramWidget
  className="srd-canvas"
  diagramEngine={this.props.engine}
  maxNumberPointsPerLink="0" // no extra points so link selection is fired straight away
/>

from react-diagrams.

@gen4sp I feel like that would make the feature very hidden, and i really like how its already so intuitive to just click and drag to add points. I think I'm going to implement the click to select, but click + drag to create point system. I will add a little bit of a threshold so that you have to move the mouse more than 5px or something to trigger it.

from react-diagrams.

maybe we should have a setting where you can click a link, but if you don't drag, then it just selects the link instead of creating a point...

from react-diagrams.

@xaviershay thank you tada , I battled with this for almost two days. Definitely this should be on the documentation. I will be happy to add it if someone can point me out where would be the best place to document this. pray

Only two days ? :) It takes me more. I can add some to documentation but I am not familiar with this repo (and "React way of doing this")

Regards

from react-diagrams.

Worth noting, while this approach work, doesn't necessarily fix the user experience issue that its hard to realize when the link is selected vs when the link its hover, right now both states are the same.

Does anybody know how to detect when a link its select or click it? I haven't found a way to perform this action.

from react-diagrams.

After a day, I discovered that we could select a link by doing Shift + Click on the link, then use delete button to delete the link after that. react-diagrams has a lot of hidden treasure underneath.

from react-diagrams.

It's better to move creation of points to Alt+click or Ctrl+click or something. It would be better, I believe

from react-diagrams.

@xaviershay thank you 🎉 , I battled with this for almost two days. Definitely this should be on the documentation. I will be happy to add it if someone can point me out where would be the best place to document this. 🙏

from react-diagrams.

I'm still finding my way around, but I'm beginning to suspect that some guidance along the lines of createEngine() is just default settings would be useful, if you look at the definition of that function it customizes a heap of useful stuff. Possibly combined with "you'll probably want to customize the state handlers at some point."

from react-diagrams.

I think that would feel more intuitive.

from react-diagrams.

Has there been any advances or workaround in this feature?

from react-diagrams.

Worth noting, while this approach work, doesn't necessarily fix the user experience issue that its hard to realize when the link is selected vs when the link its hover, right now both states are the same.

Does anybody know how to detect when a link its select or click it? I haven't found a way to perform this action.

Hi @nahumzs, Its been a while since I worked with this library but do you mean differentiate them visually or identify it via code?
If I remember correctly via code the link element has an .isSelected() method you could call to detect if an element is selected or not.
As for customizing how elements look the best way I found back in the day is to extend your elements(widgets) to encapsulate into a skin/theme and states for that particular diagram. That way your project work with your themed elements. I believe you might have to create a custom link.
These two links can be a good place to start:

• https://projectstorm.gitbook.io/react-diagrams/customizing/extending-default-links
• #611 (comment)

from react-diagrams.

@dylanvorster Any updates on this feature? I would like to help if you could point me in right direction

from react-diagrams.