Drag RadDiagramConnection between two shapes

10 posts, 0 answers
  1. Jesse
    Jesse avatar
    4 posts
    Member since:
    May 2014

    Posted 17 Jun 2014 Link to this post

    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!
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 20 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 24 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
  5. Jesse
    Jesse avatar
    4 posts
    Member since:
    May 2014

    Posted 24 Jun 2014 in reply to Pavel R. Pavlov Link to this post

    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!

  6. Roni
    Roni avatar
    6 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2014 in reply to Pavel R. Pavlov Link to this post

    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??
  7. Roni
    Roni avatar
    6 posts
    Member since:
    Jun 2014

    Posted 24 Jun 2014 in reply to Roni Link to this post

    That MouseDown event was in the ConnectionTool class by the way.
  8. Roni
    Roni avatar
    6 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 in reply to Roni Link to this post

    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
  9. Roni
    Roni avatar
    6 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 Link to this post

    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
  10. Roni
    Roni avatar
    6 posts
    Member since:
    Jun 2014

    Posted 25 Jun 2014 in reply to Roni Link to this post

    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)
  11. Martin
    Admin
    Martin avatar
    1099 posts

    Posted 27 Jun 2014 Link to this post

    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
     
    Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
     
Back to Top
UI for WPF is Visual Studio 2017 Ready