Showing ports on hover of the node

GoXam
1

hi,

I need to show the ports on hover of the node.I did handle mouse enter and mouse leave events for the node and ports visibility got handled.
however i try to draw a link from one of the ports, since i did a mouse enter of the node i could see all the ports available for the node, but when i drag a link and mouse over on the other node to connect , ports are not visible for the "to node".Probably the mouse enter is not getting fired for the node.
I did see flow chart sample where DoStart() and DoStop() are overridden to achieve the same.But it ends up making the ports visible for all the nodes in the diagram.
Can you please guide me, i need to make the ports of the from node and to node visible when user mouse over the from node and to node while drawing a link as well.
2

Yes, you need to customize the LinkingTool (and maybe the RelinkingTool) to get the effects that you want.

I suggest that instead of overriding DoStart and DoStop, you override DoMouseMove. Something like:

[code]public class MyLinkingTool : LinkingTool {
private FrameworkElement OldTarget { get; set; }

public override void DoMouseMove() {
base.DoMouseMove();
if (this.Active) {
if (this.OldTarget != null && this.OldTarget != this.TargetPort) {
ShowPorts(this.OldTarget, false);
}
if (this.TargetPort != null) {
ShowPorts(this.TargetPort, true);
}
this.OldTarget = this.TargetPort;
}
}

private void ShowPorts(FrameworkElement port, bool show) {
var node = Part.FindAncestor(port);
if (node != null) node.Tag = show;
}

public override void DoStop() {
base.DoStop();
if (this.OldTarget != null) {
ShowPorts(this.OldTarget, false);
this.OldTarget = null;
}
}
}[/code]
Caution: I haven’t even tried compiling this code.

This code assumes that highlight of port elements is performed in the same manner as in the FlowChart sample: in XAML via data-binding. That has the advantage of styling and definition in XAML. But you could make the changes in code, by iterating over all of the ports of the Node and changing their Visibility programmatically.

3
I did follow what you suggested but it doesn't seem to work that way.
Please find the implementation below and correct me.
// function that handles visibility //
private void SetAllNodesPortsVisible(FrameworkElement targetport,bool show)
{ Node targetNode = Part.FindAncestor<Node>(targetport);

if (targetNode != null)
{
if (show)
{
foreach (FrameworkElement port in targetNode.Ports)
{
port.Visibility = Visibility.Visible;
}
}
else
{
foreach (FrameworkElement port in targetNode.Ports)
{
string portid = Node.GetPortId(port);
bool haslinks = (targetNode.FindLinksConnectedWithPort(portid).FirstOrDefault() != null);
if (haslinks)
port.Visibility = Visibility.Visible;
else
port.Visibility = Visibility.Collapsed;
}
}

}

//DoMouse events
public override void DoStop() { base.DoStop(); if (this.OldTarget != null) { SetAllNodesPortsVisible(this.OldTarget, false); this.OldTarget = null;

}
}
public override void DoMouseMove()
{
base.DoMouseMove();
if (this.Active)
{
if (this.OldTarget != null && this.OldTarget != this.TargetPort)
{
SetAllNodesPortsVisible(this.OldTarget, false);
}
if (this.TargetPort != null)
{
SetAllNodesPortsVisible(this.TargetPort, true);
}
this.OldTarget = this.TargetPort;
}
}

4

I see you’re directly changing the Visibility of the ports, rather than depending on data-binding the Visibility to the Node.Tag. That’s fine.

If it’s all in a custom LinkingTool, and if it’s working the way you want, the only thing left is maybe customizing the RelinkingTool similarly – if your application supports relinking.

5

no no its not working as required even i made changes as suggested by you.

overriding Do mouse move did not solve the issue. i need to show all four ports on mouse over of the to node and from node while drawing the connection between them.
6

I just tried this, and I think it does what you say you want:

[code] public class MyLinkingTool : LinkingTool {
public override void DoStop() {
base.DoStop();
foreach (Node n in this.Diagram.Nodes) {
n.Tag = false;
}
this.PreviousTarget = null;
}

private Node PreviousTarget { get; set; }

public override void DoMouseMove() {
  base.DoMouseMove();
  Node target = null;
  if (this.TargetPort != null) target = Part.FindAncestor<Node>(this.TargetPort);
  if (this.PreviousTarget != target) {
    if (this.PreviousTarget != null) this.PreviousTarget.Tag = false;
    if (target != null) target.Tag = true;
    this.PreviousTarget = target;
  }
}

}[/code]
This is I made to the FlowChart sample. But you’ll probably want to do the same in the RelinkingTool.

If you still want to set your port Visibility property directly in code, that’s fine too.