Add ability to select link without creating a point if the mouse is not moved

[will-stone]

I've tried this on a Windows machine and a Mac on Chrome: I'm unable to find a way to delete a link if it is connected to two nodes. Delete, fn-backspace, backspace all don't work. If I drag a link from a port to nowhere and hover over the end, then I can delete with backspace, but it seems that because you can't see the ends of a connected link then you can't hover over an end to delete it.

[gen4sp]

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

[dylanvorster]

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...

[will-stone]

I think that would feel more intuitive.

[gen4sp]

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

[dylanvorster]

@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.

[Nandez89]

Has there been any advances or workaround in this feature?

[ianchanning]

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
/>

[xaviershay]

Same workaround as @ianchanning but for when using createEngine

const engine = createEngine()
engine.maxNumberPointsPerLink = 0

[nahumzs]

@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. 🙏

[xaviershay]

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."

[slamer59]

@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

[nahumzs]

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.

[Nandez89]

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
• https://github.com/projectstorm/react-diagrams/issues/611#issuecomment-611480960

[gopalakrishnan-subramani]

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.

[mecirmartin]

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