miroiu / nodify

Highly performant and modular controls for node-based editors designed for data-binding and MVVM.
https://miroiu.github.io/nodify
MIT License
1.27k stars 205 forks source link

[Bug]Triggered Background of connectors bindings #77

Closed AlexDialga closed 9 months ago

AlexDialga commented 9 months ago

Describe the bug A clear and concise description of what the bug is: A strange shape appears after binding a BorderBrush of NodeInput/NodeOutput into NodifyEditor while mouse is over a connector.

To Reproduce Steps to reproduce the behavior:

In BaseConnectorModel:

public class BaseConnectorModel
...
{
    ...
    public Brush BorderBrush { get; set; } = new RadialGradientBrush(
                new GradientStopCollection() {
                    new GradientStop(Color.FromArgb(0, 0, 0, 0), 0),
                    new GradientStop(Colors.DodgerBlue, 0.3),
                    new GradientStop(Colors.DodgerBlue, 0.7),
                    new GradientStop(Color.FromArgb(0, 0, 0, 0), 1),
                });
    ...

PS1: It seems the editor has some issue? I will upload screenshots of codes. PS2: It seems the code button on editor generates typos... image

In BaseEditorView.xaml:

...
<nodify:NodifyEditor
    ...
        <nodify:NodifyEditor.ItemTemplate>
            <DataTemplate DataType="{x:Type localNodes:BaseNodeModel}">
                <nodify:Node 
                    ...
                    <nodify:Node.InputConnectorTemplate>
                        <DataTemplate DataType="{x:Type localConnectors:BaseConnectorModel}">
                            <nodify:NodeInput
                                ...
                                Background="{Binding Background}"
                                BorderBrush="{Binding BorderBrush}"
...

image

Expected behavior A clear and concise description of what you expected to happen: The BorderBrush of Shape should be separated. I try to find something like TriggeredBackground, but it seems it doesn't have it.

Screenshots If applicable, add screenshots to help explain your problem: image

Additional context Maybe you can change bindings In NodeInput.xaml in Nodify Project

...
    <Style TargetType="{x:Type local:NodeInput}">
        ...
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:NodeInput}">
                    ...
                    <ControlTemplate.Triggers>
                        ...
                        <Trigger Property="local:PendingConnection.IsOverElement"
                                      Value="True">
                            <Setter TargetName="PART_Connector"
                                        Property="Background"
                                        Value="{**Binding BorderBrush**, RelativeSource={RelativeSource TemplatedParent}}" />
...

image

miroiu commented 9 months ago

Hi, you can customize the connector thumb like this:

<nodify:Node.InputConnectorTemplate>
    <DataTemplate>
        <nodify:NodeInput>
            <nodify:NodeInput.ConnectorTemplate>
                <ControlTemplate TargetType="Control">
                    <Ellipse Width="14"
                    Height="14"
                    Stroke="{Binding BorderBrush}"
                    Fill="{TemplateBinding Background}"
                    StrokeThickness="2" />
                </ControlTemplate>
            </nodify:NodeInput.ConnectorTemplate>
        </nodify:NodeInput>
    </DataTemplate>
</nodify:Node.InputConnectorTemplate>