Port Visibility

[ODB]

Hi,

We have a few classes that inherits from our CustomShape class that inherits from RadDiagramShape, we also have a CustomConnector (inherits from RadDiagramConnector) class and we would like to have our ports always visible, we did try to edit the default template of RadDiagramShape and change the visibility to visible but it is not working.

Would you be able to tell us to change the visibility of the ports to make them visible even when the shape is not clicked?

Thanks!

[Shawn]

The easiest way is to override the UpdateVisualStates() in your CustomShape.cs file with the following code:

protected override void UpdateVisualStates()
{
    base.UpdateVisualStates();
    var isConnectorsAdornerVisibleResult = this.Diagram != null;
    VisualStateManager.GoToState(this, isConnectorsAdornerVisibleResult ? "ConnectorsAdornerVisible" : "ConnectorsAdornerCollapsed", false);
}

 

The other approach is to create your own style template for your shapes and set the ConnectorsControl Visibility to Visible.

Hope this helps,

Shawn

 

[Fede]

Hi Shawn,

Thanks for your quick reply, It worked fine!!!

We have another issue with the diagram, bezier connections are not working well. I will try to explain what we tried,

- As you know we have the following classes : CustomDiagram , CustomConnector, CustomConnection and CustomShape.

- The problem that we are facing is related to CustomConnector because the bezier does not know where they start or end (that's what we guess), we tried to implement the solutions available in the documentation (ConnectionPoints, IsModified...) but it is not working.

- We also try to use the SetBezierHandles without success.

Our implementation of the ports

private void AddOutputConnector()
     {
         var outConnector = new CustomConnector() { Offset = new Point(1, 0.5), Direction = ConnectorDirection.Out };
         outConnector.Margin = new Thickness(-10, 0, 0, 0);
         outConnector.Name = "out";
         Connectors.Add(outConnector);

     }

     private void AddInputConnector()
     {
         var inConnector = new CustomConnector() { Offset = new Point(0, 0.5), Direction = ConnectorDirection.In };
         inConnector.Margin = new Thickness(0, 0, -10, 0);
         inConnector.Name = "in";
         Connectors.Add(inConnector);
     }

 

public CustomConnection()
       {
           IsEnabled = false;
           LinearGradientBrush gradientBrush = new LinearGradientBrush(Color.FromRgb(0, 115, 255), Color.FromRgb(0, 197, 255), new Point(0, 0), new Point(1, 1));
           Stroke = gradientBrush;
           StrokeThickness = 6.0;
           ConnectionType = ConnectionType.Bezier;
           BezierTension = 0.8;
           IsManipulationAdornerVisible = false;
           InitMap();
       }

We also try to use a style for the connections, stroke color  and thickness are working, however we have issues with how the diagram handles the bezier.

Here you can find and attached example of the problem we have.

Would you be able to help us?

Thanks!

 

[Shawn]

Without seeing the source code of your example, it's difficult to pinpoint the exact problem but somethings you can try:

• Make sure that IsConnectorsManipulationEnabled is set to True on your RadDiagram .
• Since you are overriding the Connection style, you have to make sure the Path named "GeometryPath" otherwise the connection will not set any points properly
• The SourceConnectorPosition and TargetConnectorPositions of your connection have to be set to match the name of your connectors. By default, they are set to "Auto".
• On your Connection, set Route = false;

Give these a try and hopefully one will help.

Shawn

[Shawn]

Hi Fede,

Without seeing your source code, it's difficult to pinpoint the exact cause but here are a few things you can check:

• Make sure your Connection has Route set to False
• Make sure your Diagram object has IsConnectorsManipulationEnabled set to True
• Make sure your SourceConnectorPosition and TargetConnectorPositions are set to the Connector name and not Auto.
• Since you are overriding the Style for your connector, make sure the Path has the name set to "GeometryPath" otherwise the logic can't set any points for the path to follow.

Hope this helps,

Shawn

                 

[Petar Mladenov]

Hi Fede,

Can you post your CustomConnection code, the code which creates new connections and the part when you attach them to shapes and add them in RadDiagram ? Also, is it possible to test your scenario with the latest telerik binaries from R3 2016 ? 

Regards,
Petar Mladenov
Telerik by Progress

[Fede]

Hi Petar,

Here is the code of our custom connection and customconnector

public class CustomConnector : RadDiagramConnector

  {

      private ConnectorDirection direction;

      private IConnection connection = null;

 

 

      //Empty Constructor

      public CustomConnector()

      {

          Background = Brushes.White;

          Height = 15;

          Width = 15;

      }

 

      public ConnectorDirection Direction

      {

          get { return direction; }

          set { direction = value; }

      }

 

      public IConnection Connection

      {

          get { return connection; }

          set { connection = value; }

      }

 

      protected override void OnMouseDown(MouseButtonEventArgs e)

      {

         

      }

 

      protected override void OnMouseEnter(MouseEventArgs e)

      {

          base.OnMouseEnter(e);

      }

 

    class CustomConnection : RadDiagramConnection
    {
        #region Properties Definitions
        CustomDiagram diagram = ((((MainWindow)Application.Current.MainWindow).mainGrid
                .Children[((MainWindow)Application.Current.MainWindow).mainGrid.Children.Count - 1]) as NodeEditor).diagram;
        private static MultiValueDictionary<System.Type, System.Type> connectionMapping = new MultiValueDictionary<System.Type, System.Type>();
        private bool isReverse = false;

        public bool IsReverse
        {
            get { return isReverse; }
            set { isReverse = value; }
        }
        #endregion

        #region Constructors
        public CustomConnection()
        {
            IsEnabled = false;
            LinearGradientBrush gradientBrush = new LinearGradientBrush(Color.FromRgb(0, 115, 255), Color.FromRgb(0, 197, 255), new Point(0, 0), new Point(1, 1));
            Stroke = gradientBrush;
            StrokeThickness = 6.0;
            ConnectionType = ConnectionType.Bezier;
            BezierTension = 0.8;
            IsManipulationAdornerVisible = false;
            InitMap();
        }
        #endregion

        #region Compatibility

        private static void InitMap()
        {
            connectionMapping.Clear();
            connectionMapping.Add(typeof(Product), typeof(StationConveyor));
            connectionMapping.Add(typeof(StationConveyor), typeof(EndEffector));
            connectionMapping.Add(typeof(EndEffector), typeof(Robot));
            connectionMapping.Add(typeof(Robot), typeof(PalletStation));
            connectionMapping.Add(typeof(PalletStation), typeof(Pallet));
        }


        public static void ConnectionManipulationCompleted(object sender, ManipulationRoutedEventArgs e)
        {
            var diagram = ((((MainWindow)Application.Current.MainWindow).mainGrid
               .Children[((MainWindow)Application.Current.MainWindow).mainGrid.Children.Count - 1]) as NodeEditor).diagram;

            if (e.ManipulationStatus == ManipulationStatus.Attaching)
            {

                CheckCompatibility(e.Connector as CustomConnector, e.Connection as CustomConnection, e);
            }
            else if (e.ManipulationStatus == ManipulationStatus.Detaching)
            {
                Console.WriteLine("Detaching");
            }
            else if (e.ManipulationStatus == ManipulationStatus.Moving)
            {

                Console.WriteLine(e.Shape.Position);
            }
            else if (e.ManipulationStatus == ManipulationStatus.Moved)
            {
                Console.WriteLine("Moved");
                e.Handled = true;
                return;
            }
            else
            {
                Console.WriteLine("Else");
            }
            Mouse.OverrideCursor = Cursors.Arrow;
        }


        private static void CheckCompatibility(CustomConnector connector, CustomConnection connection, ManipulationRoutedEventArgs e)
        {
            IReadOnlyCollection<System.Type> value;

            if (!connection.Source.Equals(connector.Shape))
            {
                if ((connector != null) && (connector.Direction == ConnectorDirection.In))
                {
                    if (connection.Source.GetType().BaseType.Name.Equals(typeof(EndEffector).Name))
                        connectionMapping.TryGetValue(connection.Source.GetType().BaseType, out value);
                    else
                        connectionMapping.TryGetValue(connection.Source.GetType(), out value);

                    foreach (Type type in value)
                    {
                        if (type.Equals(connector.Shape.GetType()) || type.Name.Equals(connector.Shape.GetType().BaseType.Name))
                        {
                            Console.WriteLine("Esto es Compatible");
                        }
                        else
                        {
                            e.Handled = true;
                            break;
                        }
                    }
                }
                else if ((connector != null) && (connector.Direction == ConnectorDirection.Out))
                {
                    if (connector.Shape.GetType().BaseType.Name.Equals(typeof(EndEffector).Name))
                        connectionMapping.TryGetValue(connector.Shape.GetType().BaseType, out value);
                    else
                        connectionMapping.TryGetValue(connector.Shape.GetType(), out value);
                    foreach (Type type in value)
                    {
                        if (type.Equals(connection.Source.GetType()) || type.Name.Equals(connection.Source.GetType().BaseType.Name))
                        {
                            connection.isReverse = true;
                            Console.WriteLine("Compatible");
                        }
                        else
                        {
                            e.Handled = true;
                            break;
                        }
                    }
                }
            }
        }
        /*
         * Método sobrescrito para eliminar las conexiones
         * que se quedan coleando en el limbo del diagrama.
         * (Recolector de basura ciberespacial).
         */
        protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
        {
            if (((e.Property.Equals(CustomConnection.SourceProperty)) || (e.Property.Equals(CustomConnection.TargetProperty))) &&
                (e.NewValue == null))
            {
                diagram.RemoveConnection(this);
            }
            base.OnPropertyChanged(e);
        }
        #endregion
    }
}

 

Hope this helps...non of the above solutions worked

[Petar Mladenov]

Hi Fede,

We see nothing abnormal in this implementation (except getting the diagram, which can be replaced with this.ParentOfType<RadDiagram>()). However, we miss the code which populates the diagram with connections. We are also not sure the exact issue you are trying to solve - please point us to what you need to be different on the picture you sent us previously (is it the connectors be always visible, or the bezier curve to be more different in terms of geometry) ? 

Ideally, we would need an isolated sample to investigate more precisely - can you open a new support thread with isolation ?

Also, what is the version you are using and have you tried our latest release - you did not answer this but it might be crucial, cause we have several bezier curves fixes for the last several releases.

Regards,
Petar Mladenov
Telerik by Progress