This is a migrated thread and some comments may be shown as answers.

How to detect a connection when user drop a shape on it

1 Answer 27 Views
Diagram
This is a migrated thread and some comments may be shown as answers.
Rajeev
Top achievements
Rank 1
Rajeev asked on 21 Mar 2017, 05:22 AM

Hi,

I am currently working on a sample , where a user can drag and drop shapes from a panel to diagram.I can find a shape using bounds() , when user drops on it.

But i couldn't do the same for a connection.

My intention is just to find a connection from diagram and modify it..(When user drag and drop a new shape on a particular connection)

Find the sample which i am working on now

http://dojo.telerik.com/IHuzA/7

Please update how to find a connection, when user drops a shape on it ?

 

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 23 Mar 2017, 05:12 AM
Hi Rajeev,

Since the connection will have width 0 (if its vertical), you could manually check the position of the connection and the drop event position with some offset in regards of the width (5 or 10 pixels for example). You should take into account that depending on the orientation of the connection the condition for the offset will differ. 

Another approach that you could try is to handle the mouseEnter and mouseLeave event of the Diagram to store the current connection/shape in a global variable and use it within the drop event. Note that it might be necessary to wrap the logic within the drop event in a setTimeout function in order to allow the mouseEnter event to fire.

Hope this helps.


Regards,
Konstantin Dikov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Diagram
Asked by
Rajeev
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or