How to Implement Graphical Nodes Similar to FastGPT in a Node Project

[zt199510]

Hello,

Once again, I need to trouble you for some assistance. I am working on a Workflow project and have encountered some challenges that I hope you can help me with. The project involves implementing functionalities similar to graphical nodes in a flowchart, as shown in the attached image.

I have encountered an issue in Nodify.Shapes. I see that there are 4 connectors, but I am at a loss about how to create a new Out connector on the right side. Could you please provide some guidance on how to achieve this?

Thank you very much for your help!

[zt199510]

I really enjoy this type of UI design, but I found it quite challenging when I started working on it. 😅

[miroiu]

Hi,

You can use a StackPanel to add more connectors on any side.

<StackPanel DockPanel.Dock="Right" VerticalAlignment="Center">
    <nodify:Connector DataContext="{Binding RightConnector}"
                        Anchor="{Binding Anchor, Mode=OneWayToSource}"
                        HorizontalContentAlignment="Right"
                        Margin="0 0 -11 10"
                        Visibility="Hidden"
                        Height="Auto"
                        Width="25"
                        x:Name="RightConnector" />
    <nodify:Connector DataContext="{Binding RightConnector2}"
                        Anchor="{Binding Anchor, Mode=OneWayToSource}"
                        HorizontalContentAlignment="Right"
                        Margin="0 0 -11 0"
                        Visibility="Hidden"
                        Height="Auto"
                        Width="25"
                        x:Name="RightConnector2" />
</StackPanel>

Is this what you are having trouble with?

[zt199510]

Thank you. Could you provide some insights or a detailed approach on how to implement a feature similar to a bird's-eye view?

[miroiu]

Do you mean a minimap?

[zt199510]

Yes

[miroiu]

I created a PR that adds a Minimap control to the library #124

[zt199510]

Thank you