Drag RadDiagramConnection between two shapes

[Jesse]

I am working on a Diagram application that allows shapes to be dragged on to the Diagram from a side panel. Also available in the side panel are objects representing different kinds of Connections that could potentially exist between shapes in the Diagram. The functionality I am attempting to create is as follows:

- Two or more shapes exist in the diagram
- User clicks on one of the Connection types available in the side panel and drags it onto one of the shapes in the diagram

I've come this far and have appropriate event handlers set up to manipulate the relevant view models. Here is where I'm having trouble though.

- When the drag drop of a connection onto a shape is complete and the user lets go of the mouse, I would like to "attach" the RadDiagramConnection to their mouse cursor so that they can freely move it around on the diagram. Clicking on another shape on the diagram should set the RadDiagramConnection's target to the selected shape so that a connection is created between the two. 

I've been through all the examples in the DragDropManager and Diagram controls and haven't seen anything that looks similar to this kind of functionality, so I'm hoping that somewhere out there someone has done something like this before. Would appreciate any suggestions!

[Pavel R. Pavlov]

Hi Jesse,

Unfortunately, the required behavior is not supported out of the box. We are currently working on finding a workaround but we need more time to investigate the possible approaches.  I will contact you again when we have more information on that matter.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Pavel R. Pavlov]

Hi Jesse,

Unfortunately, there is not an easy way to achieve your requirement at 100%. You can either drop static connection from a toolbox or you can create "sticky" connection with the right mouse click. 

For your convenience we prepared two sample solutions demonstrating both approaches. I hope these projects will get you started.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Jesse]

Hi Pavel,

Thanks a lot for getting back to me with these resources. I've looked over both and I think that the stick connection looks very promising. I'll be working with that to see if we can incorporate the drag and drop functionality we're looking for. Great customer service!

[Roni]

Hi Pavel,

I am trying to implement your sticky right click solution you posted and am having an issue I cant seem to figure out.

I pretty much mimicked what you did with a ConnectionTool (called it TransitionConnector).
You had 

void OnDiagramMouseRightButtonDown(object sender, MouseButtonEventArgs e)
        {
            if (this.connectionTool.IsConnectionCreation)
            {
                this.connectionTool.IsConnectionCreation = false;
            }
            else
            {
                this.connectionTool.IsConnectionCreation = true;
                var position = e.GetPosition(this.diagram);
                var transformedPosition = this.diagram.GetTransformedPoint(position);
                this.toolService.ActivateTool(connectionTool.Name);
                connectionTool.DoMouseDown(new PointerArgs(position, transformedPosition));
            }
        }

And then I put this on a mouse click on my diagram which looks like 

void ExecutionBlueprintDiagram_MouseDown(object sender, System.Windows.Input.MouseButtonEventArgs e) {
           m_TransitionConnector.IsConnectionCreation = false;
           var position = e.GetPosition(this);
           var transformedPosition = this.GetTransformedPoint(position);
           m_ToolService.ActivateTool(m_TransitionConnector.Name);
           m_TransitionConnector.DoMouseDown(new PointerArgs(position, transformedPosition));
       }

But when I run this I get an errors saying null ref, and missing method exception on the MouseDown(e) in

public override bool MouseDown(PointerArgs e)
        {
            if (!m_IsForced) return false;

            return base.MouseDown(e);
        }

Any ideas??

[Roni]

That MouseDown event was in the ConnectionTool class by the way.

[Roni]

Hey Pavel, 
do you think the problem could be that I am using a GraphSource for my RadDiagram?  I don't see any examples online that have GraphSources set with the ability to use the connection tool

[Roni]

I actually just tried doing this 

var toolService = this.ServiceLocator.GetService<IToolService>();
toolService.ActivateTool("Connection Tool");
toolService.MouseDown(new PointerArgs());

and I am still getting an error 

"No parameterless constructor defined for this object." on the MouseDown method call

[Roni]

System.MissingMethodException was unhandled
  HResult=-2146233069
  Message=No parameterless constructor defined for this object.
  Source=WindowsBase
  StackTrace:
       at System.RuntimeTypeHandle.CreateInstance(RuntimeType type, Boolean publicOnly, Boolean noCheck, Boolean& canBeCached, RuntimeMethodHandleInternal& ctor, Boolean& bNeedSecurityCheck)
       at System.RuntimeType.CreateInstanceSlow(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
       at System.RuntimeType.CreateInstanceDefaultCtor(Boolean publicOnly, Boolean skipCheckThis, Boolean fillCache, StackCrawlMark& stackMark)
       at System.Activator.CreateInstance[T]()
       at Telerik.Windows.Controls.Diagrams.Extensions.ViewModels.ObservableGraphSourceBase`2.CreateLink(Object source, Object target)
       at Telerik.Windows.Controls.Diagrams.Extensions.ViewModels.ObservableGraphSourceBase`2.Telerik.Windows.Diagrams.Core.IObservableGraphSource.CreateLink(Object source, Object target)
       at Telerik.Windows.Diagrams.Core.GraphController.CreateConnectionInGraphSource(IShape source, IShape target)
       at Telerik.Windows.Diagrams.Core.GraphController.Telerik.Windows.Diagrams.Core.IControllerService.CreateConnection(IShape source, IShape target)
       at Telerik.Windows.Diagrams.Core.GraphController.Telerik.Windows.Diagrams.Core.IControllerService.CreateConnection(Point startPoint, Point endPoint)
       at Telerik.Windows.Diagrams.Core.ConnectionTool.MouseDown(PointerArgs e)

[Martin Ivanov]

Hi Roni,

I tested the sticky connections approach with your MouseDown event handler, but I wasn't able reproduce any of the reported exceptions. The MissingMethodException - "No parameterless constructor defined for this object" might be caused because the PointerArgs may need arguments. Can you please pass the position and the transformed position of the mouse and see if this exception still occurs. 

toolService.MouseDown(new PointerArgs(position, transformedPosition));

However, can you tell me why you need to call the MouseDown of the toolService? Note that in the example prepared by Pavel, the MouseDown handler is called by the ConnectionTool object.

connectionTool.DoMouseDown(new PointerArgs(position, transformedPosition));

As for your question about the GraphSource, I tested the project in an MVVM scenario and there aren't any issue. You can find the project attached to my reply. Can you please take a look at the it and let me know if I am missing something?

Thank you in advance for the cooperation.

Regards,
Martin
Telerik