Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) move selected node using arrow keys (Read 9377 times)
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
move selected node using arrow keys
Apr 11th, 2017 at 6:24am
Print Post  
How to move selected node using Arrow keys ?

Arrow.Left
Arrow.Right
Arrow.Up
Arrow.Down

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #1 - Apr 11th, 2017 at 8:25am
Print Post  
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #2 - Apr 12th, 2017 at 3:06am
Print Post  
I added following command binding in constructor

Code
Select All
diagram.CommandBindings.Add(new CommandBinding(Diagram.NavigateLeft,
                (sender, args) =>
                { DiagramNode node = diagram.ActiveItem as DiagramNode;
                    if (node != null)
                    {
                        node.Move(node.Bounds.Left - 10, node.Bounds.Top);
                    }

                })); 



once I added that and put item on to canvas I can move item to left side using Arrow.Left Key , other keys not working here.
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #3 - Apr 12th, 2017 at 8:52am
Print Post  
There are also NavigateRight, NavigateUp, NavigateDown commands - override them the same way and call node.Move with appropriate coordinates.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #4 - Apr 17th, 2017 at 1:10pm
Print Post  
okay now that working fine, but there is small issue , once I select an item, an move it. I can move it over(out of) the defined canvas, I want to restrict that , how can I do that

here the pic of it
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #5 - Apr 17th, 2017 at 1:35pm
Print Post  
Compare new coordinates against diagram.Bounds before assigning them to the node, making sure the new values falls within the diagram.Bounds range, e.g.

Code
Select All
// left arrow handler
if (node.Bounds.Left - 10 >= diagram.Bounds.Left)
    node.Move(node.Bounds.Left - 10, node.Bounds.Top); 



Regards,
Slavcho
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #6 - Apr 17th, 2017 at 3:05pm
Print Post  
as you guided, for all arrow key operations

I composed following code,

but only the  "left arrow handler" working  here

Code
Select All
            // left arrow handler
            diagram.CommandBindings.Add(
            new CommandBinding(Diagram.NavigateLeft, (sender, args) =>
            {
            DiagramNode node = diagram.ActiveItem as DiagramNode;
            if (node.Bounds.Left - 10 >= diagram.Bounds.Left)
                node.Move(node.Bounds.Left - 10, node.Bounds.Top);

            }));

            // right arrow handler
            diagram.CommandBindings.Add(
            new CommandBinding(Diagram.NavigateRight, (sender, args) =>
            {
                DiagramNode node = diagram.ActiveItem as DiagramNode;
                if (node.Bounds.Right - 10 >= diagram.Bounds.Right)
                    node.Move(node.Bounds.Right - 10, node.Bounds.Top);
            }));

            // up arrow handler
            diagram.CommandBindings.Add(
            new CommandBinding(Diagram.NavigateUp, (sender, args) =>
            {
                DiagramNode node = diagram.ActiveItem as DiagramNode;
                if (node.Bounds.Top - 10 >= diagram.Bounds.Top)
                    node.Move(node.Bounds.Top - 10, node.Bounds.Top);
            }));

            // down arrow handler
            diagram.CommandBindings.Add(
            new CommandBinding(Diagram.NavigateDown, (sender, args) =>
            {
                DiagramNode node = diagram.ActiveItem as DiagramNode;
                if (node.Bounds.Bottom - 10 >= diagram.Bounds.Bottom)
                    node.Move(node.Bounds.Bottom - 10, node.Bounds.Bottom);
            }));
 

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #7 - Apr 17th, 2017 at 3:26pm
Print Post  
In right and bottom cases you should compare with <= operator, otherwise the if condition is always false when a node is originally inside the diagram.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #8 - Apr 17th, 2017 at 3:35pm
Print Post  
up arrow key function and down arrow key functions still not working properly
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #9 - Apr 18th, 2017 at 12:19pm
Print Post  
You should pass new Top values as Y argument of Move, your code shows them as Xes. This is the correct code -

Code
Select All
// left arrow handler
diagram.CommandBindings.Add(
	new CommandBinding(Diagram.NavigateLeft, (sender, args) =>
	{
		var node = diagram.ActiveItem as DiagramNode;
		if (node != null && node.Bounds.Left - 10 >= diagram.Bounds.Left)
			node.Move(node.Bounds.Left - 10, node.Bounds.Top);

	}));

// right arrow handler
diagram.CommandBindings.Add(
	new CommandBinding(Diagram.NavigateRight, (sender, args) =>
	{
		var node = diagram.ActiveItem as DiagramNode;
		if (node != null && node.Bounds.Right + 10 <= diagram.Bounds.Right)
			node.Move(node.Bounds.Left + 10, node.Bounds.Top);
	}));

// up arrow handler
diagram.CommandBindings.Add(
	new CommandBinding(Diagram.NavigateUp, (sender, args) =>
	{
		var node = diagram.ActiveItem as DiagramNode;
		if (node != null && node.Bounds.Top - 10 >= diagram.Bounds.Top)
			node.Move(node.Bounds.Left, node.Bounds.Top - 10);
	}));

// down arrow handler
diagram.CommandBindings.Add(
	new CommandBinding(Diagram.NavigateDown, (sender, args) =>
	{
		var node = diagram.ActiveItem as DiagramNode;
		if (node != null && node.Bounds.Bottom + 10 <= diagram.Bounds.Bottom)
			node.Move(node.Bounds.Left, node.Bounds.Top + 10);
	})); 

  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #10 - Apr 19th, 2017 at 3:27am
Print Post  
now this is working for individual items, once I group few nodes and try to move using arrow keys , I want to move those all elements as a group, but currently its moving only last selected item, how can I resolve this ?
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #11 - Apr 19th, 2017 at 8:31am
Print Post  
Do the same for each node in diagram.Selection.Nodes instead of diagram.ActiveItem.
  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #12 - Apr 19th, 2017 at 9:21am
Print Post  
As you said I changed following code

Code
Select All
var node = diagram.ActiveItem as DiagramNode; 



To

Code
Select All
 var node = diagram.Selection.Nodes as DiagramNodeCollection;; 



but then having following error

Cannot convert type 'DiagramNodeCollection' does not contain a definition for 'Bounds' and no extension method 'Bounds' accepting a first argument of type 'DiagramNodeCollection'

'DiagramNodeCollection' does not contain a definition for 'Move' and no extension method 'Move' accepting a first argument of type 'DiagramNodeCollection' could be found

  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3147
Joined: Oct 19th, 2005
Re: move selected node using arrow keys
Reply #13 - Apr 19th, 2017 at 11:26am
Print Post  
Selection.Nodes is a collection that contains the selected nodes, you'll need to loop over it -

Code
Select All
foreach (var node in diagram.Selection.Nodes)
  node.Move.... 

  
Back to top
 
IP Logged
 
kelum
Full Member
***
Offline


I Love MindFusion!

Posts: 100
Joined: Mar 25th, 2017
Re: move selected node using arrow keys
Reply #14 - Apr 19th, 2017 at 4:57pm
Print Post  
thanks for the continues support, I have another problem related to this scenario,

Once moving Nodes using arrow keys, I want to restrict overlap scenarios also

these are the steps for that scenario

1. select a Node
2. move that using arrow key,  
     if
its overlapping with existing node, revoke that move at reset to previous location.

else
    allow to move that node

Thnks
Kelum
« Last Edit: Apr 20th, 2017 at 3:54am by kelum »  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint