Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wire connector UI modifications #12072

Merged
merged 5 commits into from
Sep 30, 2021
Merged

Wire connector UI modifications #12072

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fb342f0
Polyline + thick outline removed.
M-JULIANI Sep 27, 2021
095af46
Removed 'ConnectorType` menu from view->connectors.
M-JULIANI Sep 27, 2021
0c815b7
Updated connector styles.
M-JULIANI Sep 27, 2021
389947b
New resources added/old ones removed. Minor UI updates to reflect moc…
M-JULIANI Sep 27, 2021
41e0b9e
Merge branch 'master' into WireConnector-UI-Modifications
M-JULIANI Sep 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 5 additions & 12 deletions src/DynamoCoreWpf/DynamoCoreWpf.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1386,6 +1386,11 @@
<Resource Include="UI\Images\profile_normal.png" />
</ItemGroup>
<ItemGroup>
<Resource Include="UI\Images\pin_hidden_48_48.png" />
<Resource Include="UI\Images\pin_hover_48_48.png" />
<Resource Include="UI\Images\wire_anchor_48_48.png" />
<Resource Include="UI\Images\watch_hidden_48_48.png" />
<Resource Include="UI\Images\watch_hover_48_48.png" />
<Resource Include="UI\Images\checkmark - grey.png" />
<Resource Include="UI\Images\package_error.png" />
<Resource Include="UI\Images\close.png" />
Expand All @@ -1409,13 +1414,9 @@
<Resource Include="UI\Images\Sort.png" />
<Resource Include="UI\Images\View details.png" />
<Resource Include="UI\Images\more-vertical_selected_16px.png" />
<Resource Include="UI\Images\watch_selected_48_48.png" />
<Resource Include="UI\Images\pin_48_48.png" />
<Resource Include="UI\Images\pin_default_48_48.png" />
<Resource Include="UI\Images\pin_hidden_48_48.png" />
<Resource Include="UI\Images\pin_selected_48_48.png" />
<Resource Include="UI\Images\watch_default_48_48.png" />
<Resource Include="UI\Images\watch_hidden_48_48.png" />
<Resource Include="UI\Images\error.png" />
<Resource Include="UI\Images\info.png" />
<Resource Include="UI\Images\warning.png" />
Expand All @@ -1426,23 +1427,15 @@
<Resource Include="UI\Images\hidden.png" />
<Resource Include="UI\Images\default-node-icon.png" />
<Resource Include="UI\Images\more-vertical.png" />
<Resource Include="UI\Images\pin_default_16_16.png" />
<Resource Include="UI\Images\watch_default_16_16.png" />
<Resource Include="UI\Images\wire_anchor_12_12.png" />
<Resource Include="UI\Images\watch_hidden_16_16.png" />
<Resource Include="UI\Images\alert.png" />
<Resource Include="UI\Images\Pin_NoBackground_16_16.png" />
<Resource Include="UI\Images\menu_16_16.png" />
<Resource Include="UI\Images\caret_down.png" />
<Resource Include="UI\Images\caret_up.png" />
<Resource Include="UI\Images\PackageManager\close_16_16.png" />
<Resource Include="UI\Images\PackageManager\down_16_16.png" />
<Resource Include="UI\Images\PackageManager\folder_16_16.png" />
<Resource Include="UI\Images\PackageManager\up_16_16.png" />
<Resource Include="UI\Images\pin_hidden_16_16.png" />
<Resource Include="UI\Images\pin_selected_16_16.png" />
<Resource Include="UI\Images\Pin_16_16.png" />
<Resource Include="UI\Images\Watch_16_16.png" />
<EmbeddedResource Include="Controls\Docs\NodeAutocompleteDocumentation.html" />
<Content Include="sharpdx_direct3d11_effects_x64.dll">
<CopyToOutputDirectory>Always</CopyToOutputDirectory>
Expand Down
7 changes: 7 additions & 0 deletions src/DynamoCoreWpf/UI/Converters.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -615,6 +615,8 @@ public class ConnectionStateToBrushConverter : IValueConverter
public SolidColorBrush NoneBrush { get; set; }
public SolidColorBrush SelectionBrush { get; set; }

public SolidColorBrush HoverBrush { get; set; }

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var state = (PreviewState)value;
Expand All @@ -626,6 +628,8 @@ public object Convert(object value, Type targetType, object parameter, CultureIn
return NoneBrush;
case PreviewState.Selection:
return SelectionBrush;
case PreviewState.Hover:
return HoverBrush;
default:
return NoneBrush;
}
Expand All @@ -642,6 +646,7 @@ public class ConnectionStateToColorConverter : IValueConverter
public Color ExecutionPreview { get; set; }
public Color None { get; set; }
public Color Selection { get; set; }
public Color Hover { get; set; }

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
Expand All @@ -654,6 +659,8 @@ public object Convert(object value, Type targetType, object parameter, CultureIn
return None;
case PreviewState.Selection:
return Selection;
case PreviewState.Hover:
return Hover;
default:
return None;
}
Expand Down
Binary file removed src/DynamoCoreWpf/UI/Images/Pin_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/Pin_NoBackground_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/Watch_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/pin_48_48.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/pin_default_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file modified src/DynamoCoreWpf/UI/Images/pin_default_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/DynamoCoreWpf/UI/Images/pin_hidden_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file modified src/DynamoCoreWpf/UI/Images/pin_hidden_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/DynamoCoreWpf/UI/Images/pin_hover_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/DynamoCoreWpf/UI/Images/pin_selected_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file modified src/DynamoCoreWpf/UI/Images/pin_selected_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/DynamoCoreWpf/UI/Images/watch_default_16_16.png
View file
Open in desktop
Binary file not shown.
Binary file modified src/DynamoCoreWpf/UI/Images/watch_default_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified src/DynamoCoreWpf/UI/Images/watch_hidden_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/DynamoCoreWpf/UI/Images/watch_hover_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed src/DynamoCoreWpf/UI/Images/watch_select_48_48.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/watch_selected_48_48.png
View file
Open in desktop
Binary file not shown.
Binary file removed src/DynamoCoreWpf/UI/Images/wire_anchor_12_12.png
View file
Open in desktop
Binary file not shown.
Binary file added src/DynamoCoreWpf/UI/Images/wire_anchor_48_48.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
118 changes: 15 additions & 103 deletions src/DynamoCoreWpf/UI/Themes/Modern/Connectors.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@
</DataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsTemporarilyDisplayed, Mode=OneWay}" Value="True"/>
<Condition Binding="{Binding Path=IsCollapsed, Mode=OneWay}" Value="True"/>
<Condition Binding="{Binding Path=IsTemporarilyDisplayed, Mode=OneWay}" Value="True"/>
<Condition Binding="{Binding Path=IsCollapsed, Mode=OneWay}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Opacity" Value="0.4"/>
Expand All @@ -72,8 +72,8 @@
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=IsTemporarilyDisplayed, Mode=OneWay}" Value="False"/>
<Condition Binding="{Binding Path=IsCollapsed, Mode=OneWay}" Value="True"/>
<Condition Binding="{Binding Path=IsTemporarilyDisplayed, Mode=OneWay}" Value="False"/>
<Condition Binding="{Binding Path=IsCollapsed, Mode=OneWay}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Opacity" Value="0.0"/>
Expand Down Expand Up @@ -109,11 +109,20 @@
</Style>
</MenuItem.Style>
</MenuItem>
<!--Added for action at right click (contextmenu)-->
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding ConnectorSelectionCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding ConnectorSelectionCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ContextMenu>
</Grid.ContextMenu>
<Grid.Resources>
<SolidColorBrush x:Key="BConnectorSelection"
Color="{Binding PreviewState, Converter={StaticResource ConnectionStateToColorConverter}}">
Color="{Binding PreviewState, Converter={StaticResource ConnectionStateToColorConverter}, UpdateSourceTrigger=PropertyChanged}">
</SolidColorBrush>
</Grid.Resources>

Expand All @@ -128,7 +137,7 @@
<Path Stroke="{DynamicResource BConnectorSelection}" StrokeThickness="3"
Name="connector"
Visibility="{Binding BezVisibility, Converter={StaticResource BooleanToVisibilityConverter}}"
Style="{StaticResource SConnector}" Canvas.ZIndex="0"
Style="{StaticResource SConnector}" Canvas.ZIndex="-1"
Data="{Binding ComputedBezierPathGeometry, UpdateSourceTrigger=PropertyChanged}">
<i:Interaction.Behaviors>
<mouse:MouseBehaviour MouseX="{Binding PanelX, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}" MouseY="{Binding PanelY, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}" />
Expand All @@ -142,103 +151,6 @@
</i:EventTrigger>
</i:Interaction.Triggers>
</Path>
<!--Bezier Thick Path-->
<Path Stroke="{StaticResource ConnectorHoverStateOutline}" StrokeThickness="6"
Name="connectorBorderBezier"
Canvas.ZIndex="-1" Data="{Binding ComputedBezierPathGeometry, UpdateSourceTrigger=PropertyChanged}">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<!--show thick wire-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=ConnectorAnchorViewModelExists, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True"/>
<Condition Binding="{Binding Path=BezVisibility, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>

<!--Polyline Path-->
<Path Stroke="{DynamicResource BConnectorSelection}" StrokeThickness="3"
Name="plineConnector" Style="{StaticResource SConnector}"
Visibility="{Binding PlineVisibility, Converter={StaticResource BooleanToVisibilityConverter}}" Canvas.ZIndex="0">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure x:Name="PlineFigure" StartPoint="{Binding CurvePoint0}">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="{Binding CurvePoint1}"/>
<LineSegment Point="{Binding CurvePoint2}"/>
<LineSegment Point="{Binding CurvePoint3}"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<i:Interaction.Behaviors>
<mouse:MouseBehaviour MouseX="{Binding PanelX, Mode=OneWayToSource}" MouseY="{Binding PanelY, Mode=OneWayToSource}" />
</i:Interaction.Behaviors>

<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding MouseHoverCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding MouseUnhoverCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Path>

<!--Polyline Thick Path-->
<Path Stroke="{StaticResource ConnectorHoverStateOutline}" StrokeThickness="6"
Name="connectorBorderPolyline"
Canvas.ZIndex="-1">
<Path.Data>
<PathGeometry>
<PathGeometry.Figures>
<PathFigureCollection>
<PathFigure StartPoint="{Binding CurvePoint0}">
<PathFigure.Segments>
<PathSegmentCollection>
<LineSegment Point="{Binding CurvePoint1}"/>
<LineSegment Point="{Binding CurvePoint2}"/>
<LineSegment Point="{Binding CurvePoint3}"/>
</PathSegmentCollection>
</PathFigure.Segments>
</PathFigure>
</PathFigureCollection>
</PathGeometry.Figures>
</PathGeometry>
</Path.Data>
<Path.Style>
<Style TargetType="Path">
<Setter Property="Visibility" Value="Hidden"/>
<Style.Triggers>
<!--show thick wire-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Path=ConnectorAnchorViewModelExists, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True"/>
<Condition Binding="{Binding Path=PlineVisibility, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}" Value="True"/>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="Visibility" Value="Visible"/>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<ContentControl Content="{Binding ConnectorAnchorViewModel}"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
Expand Down
2 changes: 1 addition & 1 deletion src/DynamoCoreWpf/UI/Themes/Modern/DynamoColorsAndBrushes.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,5 +144,5 @@
<SolidColorBrush x:Key="PortUseLevelsCheckBoxColor" Color="#808080" />

<!-- Connector -->
<SolidColorBrush x:Key="ConnectorHoverStateOutline" Color="#B6B6B6" />
<SolidColorBrush x:Key="ConnectorHoverStateColor" Color="#808080" />
</ResourceDictionary>
6 changes: 4 additions & 2 deletions src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,13 @@
x:Key="ConnectionStateToColorConverter"
ExecutionPreview="#F2930C"
None="#444"
Selection="#6AC0E7" />
Selection="#0C92DF"
Hover="#808080"/>

<controls:ConnectionStateToBrushConverter x:Key="ConnectionStateToBrushConverter"
ExecutionPreviewBrush="#F2930C"
SelectionBrush="#6AC0E7"
SelectionBrush="#0C92DF"
HoverBrush="#808080"
NoneBrush="#444">
</controls:ConnectionStateToBrushConverter>

Expand Down
28 changes: 26 additions & 2 deletions src/DynamoCoreWpf/ViewModels/Core/ConnectorViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

namespace Dynamo.ViewModels
{
public enum PreviewState { Selection, ExecutionPreview, None }
public enum PreviewState { Selection, ExecutionPreview, Hover, None }

public partial class ConnectorViewModel : ViewModelBase
{
Expand Down Expand Up @@ -289,6 +289,7 @@ public bool ConnectorAnchorViewModelExists
{
connectorAnchorViewModelExists = value;
RaisePropertyChanged(nameof(ConnectorAnchorViewModelExists));
RaisePropertyChanged(nameof(PreviewState));
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we raise a different property change here?

Copy link
Contributor Author

@M-JULIANI M-JULIANI Sep 30, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image
@QilongTang Actually the RaisePropertyChanged call is what indicates that the wire should transition to hover mode. So it is needed. Open to suggestions on how to do it differently.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah I missed this then, make sense

}
}
/// <summary>
Expand Down Expand Up @@ -438,6 +439,7 @@ public NodeViewModel Nodevm
}
}

private PreviewState previewState = PreviewState.None;
public PreviewState PreviewState
{
get
Expand All @@ -458,8 +460,23 @@ public PreviewState PreviewState
return PreviewState.Selection;
}

if(this.ConnectorAnchorViewModelExists)
{
return PreviewState.Hover;
}

if(previewState != null)
{
return previewState;
}

return PreviewState.None;
}
set
{
previewState = value;
RaisePropertyChanged(nameof(PreviewState));
}
}

/// <summary>
Expand Down Expand Up @@ -592,6 +609,8 @@ model.Start.Owner is null||
/// </summary>
public DelegateCommand PinConnectorCommand { get; set; }

public DelegateCommand ConnectorSelectionCommand { get; set; }

/// <summary>
/// When mouse hovers over connector, if the data coming through the connector is collection of 5 or more,
/// a 'watch' icon appears at the midpoint of the connector, enabling the user to place a watch node
Expand Down Expand Up @@ -767,6 +786,11 @@ public void PinConnectorPlacementFromWatchNode(ConnectorModel[] connectors, int
workspaceViewModel.Model.RecordCreatedModel(connectorPinModel);
}

public void ConnectorSelectionCommandExecute(object parameter)
{
PreviewState = PreviewState == PreviewState.Selection ? PreviewState.None : PreviewState.Selection;
}

private void HandlerRedrawRequest(object sender, EventArgs e)
{
Redraw();
Expand All @@ -789,6 +813,7 @@ private void InitializeCommands()
MouseHoverCommand = new DelegateCommand(MouseHoverCommandExecute, CanRunMouseHover);
MouseUnhoverCommand = new DelegateCommand(MouseUnhoverCommandExecute, CanRunMouseUnhover);
PinConnectorCommand = new DelegateCommand(PinConnectorCommandExecute, x => true);
ConnectorSelectionCommand = new DelegateCommand(ConnectorSelectionCommandExecute, x => true);
}

#endregion
Expand Down Expand Up @@ -964,7 +989,6 @@ private void PinViewModelPropertyChanged(object sender, PropertyChangedEventArgs
case nameof(ConnectorPinModel.IsSelected):
var vm = sender as ConnectorPinViewModel;
AnyPinSelected = vm.IsSelected;
RaisePropertyChanged(nameof(PreviewState));
break;
default:
break;
Expand Down
Loading