Remove RadDiagramShape connector at runtime

1 Answer 17 Views
Diagram
Benedikt
Top achievements
Rank 1
Iron
Benedikt asked on 17 Jun 2021, 08:48 PM

Is it possible to remove RadDiagramShape-Connectos at runtime (I've created my own shape-class: BaseNodeShape : RadDiagramShape)?

If I'm calling Connectors.Clear(), the connectors are not removed from the shape, do I need to start/end editing or something like that?

I'm creating connectors like that, since the code is called multiple times, I also need to remove old connectors. But old connectors just stay in ths shape.


/// <summary>
        /// Creates connectors and calls LoadConnectorText method
        /// </summary>
        public virtual void CreateConnectors()
        {
            if (ViewModel?.DataPins == null || ViewModel?.FlowPins == null)
                return;

            int longestTextLength = 0;
            
            FlowConnectors?.Clear();
            DataConnectors?.Clear();
            Connectors?.Clear();
            
            // Fill connector list
            foreach (var pin in ViewModel.DataPins)
            {
                var dataConnector = new DataConnector(pin.Name, pin.DisplayName,
                    pin.PinDirection == PinDirectionDefinition.In ? ConnectorDirection.In : ConnectorDirection.Out,
                    pin.DataConnectorType, pin.IsGeneric, pin.AllowedTypes)
                {
                    DataContext = pin
                };
                
                DataConnectors.Add(dataConnector);

                if (dataConnector.Name.Length > longestTextLength)
                    longestTextLength = dataConnector.Name.Length;
            }

            foreach (var pin in ViewModel.FlowPins)
            {
                var flowConnector = new FlowConnector(pin.Name, pin.DisplayName,
                    pin.PinDirection == PinDirectionDefinition.In ? ConnectorDirection.In : ConnectorDirection.Out)
                {
                    DataContext = pin
                };

                FlowConnectors.Add(flowConnector);

                if (flowConnector.Name.Length > longestTextLength)
                    longestTextLength = flowConnector.Name.Length;
            }

            var headerWidth = 15 + (ViewModel.DisplayName.Length * 8);
            var totalLineWidth = longestTextLength * 10;

            if (headerWidth < totalLineWidth)
                ViewModel.Width = totalLineWidth;
            else
                ViewModel.Width = headerWidth;

            if (ViewModel.Width < 50)
                ViewModel.Width = 50;

            const double heightPerDataPin = 20;
            const double heightPerFlowPin = 20;
            const double baseHeight = 35;

            var flowInPinCount = FlowConnectors.Count(x => x.ConnectorDirection == ConnectorDirection.In);
            var dataInPinCount = DataConnectors.Count(x => x.ConnectorDirection == ConnectorDirection.In);
            var flowOutPinCount = FlowConnectors.Count(x => x.ConnectorDirection == ConnectorDirection.Out);
            var dataOutPinCount = DataConnectors.Count(x => x.ConnectorDirection == ConnectorDirection.Out);

            if ((flowInPinCount * heightPerFlowPin + dataInPinCount * heightPerDataPin) > (flowOutPinCount * heightPerFlowPin + dataOutPinCount * heightPerDataPin))
            {
                var flowPinsHeight = heightPerFlowPin * flowInPinCount;
                var dataPinsHeight = heightPerDataPin * dataInPinCount;
                ViewModel.Height = baseHeight + flowPinsHeight + dataPinsHeight + 5;
            }
            else
            {
                var flowPinsHeight = heightPerFlowPin * flowOutPinCount;
                var dataPinsHeight = heightPerDataPin * dataOutPinCount;
                ViewModel.Height = baseHeight + flowPinsHeight + dataPinsHeight + 5;
            }

            double heightOffset = (35 / ViewModel.Height);
            double rowMargin = (18 / ViewModel.Height);
            double xLeft = (8 / ViewModel.Width); // 0.04;
            double xRight = 1 - xLeft;
            double yTop = heightOffset;

            foreach (var flowConnector in FlowConnectors
                .Where(connector => connector.ConnectorDirection == ConnectorDirection.In))
            {
                flowConnector.Offset = new Point(xLeft, yTop);
                this.Connectors.Add(flowConnector);
                yTop += rowMargin;                
            }

            foreach (var dataConnector in DataConnectors
                .Where(connector => connector.ConnectorDirection == ConnectorDirection.In))
            {
                dataConnector.Offset = new Point(xLeft - 0.01, yTop);
                this.Connectors.Add(dataConnector);
                yTop += rowMargin;                
            }

            yTop = heightOffset;
            foreach (var flowConnector in FlowConnectors
                .Where(connector => connector.ConnectorDirection == ConnectorDirection.Out))
            {
                flowConnector.Offset = new Point(xRight, yTop);
                this.Connectors.Add(flowConnector);
                yTop += rowMargin;
            }

            foreach (var dataConnector in DataConnectors
                .Where(connector => connector.ConnectorDirection == ConnectorDirection.Out))
            {
                dataConnector.Offset = new Point(xRight, yTop);
                this.Connectors.Add(dataConnector);
                yTop += rowMargin;
            }
        }

1 Answer, 1 is accepted

Sort by
0
Dinko
Telerik team
answered on 22 Jun 2021, 12:22 PM

Hello Benedikt,

Thank you for the provided code snippet.

Looking at the code you have overridden the CreateConnectors() method. Can you share which element? I have tested your approach to clear the Connectors collection and it is working on my side. The project on my side is based on the code described in this Using custom connectors in MVVM help article. Could it be possible to modify your application to use the one in the article?

Regards,
Dinko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Diagram
Asked by
Benedikt
Top achievements
Rank 1
Iron
Answers by
Dinko
Telerik team
Share this question
or