[23Q1T1] Fade-out Node Glyphs (#12664)

* [23Q1T1] Fade-out Node Glyphs

Fade-out behavior to GlyphStackPanel hosting the icon/frozen glyphs.

* frozen_glyph_implementation

- added new png icons to be used in Node State visualization
- implemented the frozen glyph as part of the glyph stack panel
- the frozen glyph will be triggered upon freezing the node

* Node Color Overlay

- Node Color Overlay border zoom fade in and out styles added to allow overlay to be displayed using the same ZoomToBooleanConverter value (0.4) as the other UI elements
- Added a nodeColorOverlayZoomOut border to kick in after the zoomed out value is achieved
- The previous only border renamed from nodeColorOverlay to nodeColorOverlayZoomIn
- This allows one border to display Frozen/PreviewOff states when Zoom > 0.4 and another border to display Frozen/PreviewOff/Warning/Error/Info when Zoom < 0.4
- Added a HandleColorOverlayChange method to handle both WarningBarColor and NodeOverlayColor triggers
- Added GetBorderColor() method to assign both the correct color overlay to the zoomed out border and the correct glyph to be display in preparation for the glyphs implementation
- Further added a lot of infrastructure to handle the glyph display

* Glyphs Overlay Implementation

- Added Glyphs to Zoomed-Out State
- Added 3 New Converters
- Opacity of the frozen Border now bound to the zoomed state to correctly account for the initial starting frame (the Style animation then handles the behavior over time)
- The Grid hosting the 3 Glyphs is a bit wonky, makes sure the Warning/Error/Info states are always the first Icon, even if there are 1, 2 or 3 visible icons

* Frozen Glyph Update

- more prominent color for frozen glyph #8EDCFF

* Frozen > Preview Off - Priority Changed

- changed priority for frozen and preview off border. Now will correctly prioritize Frozen over Preview-Off when zoomed out

* Test Fix

- images in NodeView named for ease of use
- WatchImageCoreContainsImage test amended to accommodate code changes to NodeView

* Test Zoom Node Color States Added

- added a VM test to check Node View Model state border colors for NoWarning, Hidden, Frozen, Warning, Error states
- added the ZoomNodeColorStates.dyn test file containing all possible states to test against
- TODO - add test case for Info once it's released

* Zoom Glyph Grid Collapse

- the Gird containing all zoom state icons will now collapse if zoom level is over 0.4 (zoomed-in).
- this should incur less performance increase (before glyphs were simply given 0 opacity).
- added a similar visibility collapse control to the color border signifying the different states (hidden, frozen, info, warning, error) - the border will now collapse if zoom level is over 0.4

* Test Zoom Node Model Glyph Properties Added

- added a new View Model test to check if the Image Sources for the state glyphs are set correctly

* Test Zoom Change Visibility

- added a test to assert that the elements shown in the zoomed-out (less than 0.4) node state are collapsed, and visible in the zoomed-in (more than 0.4) state

src/DynamoCoreWpf/DynamoCoreWpf.csproj

@@ -12,18 +12,25 @@
     <EnableDefaultCompileItems>False</EnableDefaultCompileItems>
     <EnableDefaultEmbeddedResourceItems>False</EnableDefaultEmbeddedResourceItems>
   </PropertyGroup>
+  <ItemGroup>
+    <None Remove="UI\Images\NodeStates\alert-64px.png" />
+    <None Remove="UI\Images\NodeStates\error-64px.png" />
+    <None Remove="UI\Images\NodeStates\frozen-64px.png" />
+    <None Remove="UI\Images\NodeStates\hidden-64px.png" />
+    <None Remove="UI\Images\NodeStates\info-64px.png" />
+  </ItemGroup>
   <ItemGroup>
 	<PackageReference Include="DynamoVisualProgramming.LibG_228_0_0" Version="2.13.0.7686" />
 	<PackageReference Include="Greg" Version="2.1.8012.31283" />
 	<PackageReference Include="Newtonsoft.Json" Version="8.0.3" />
 	<PackageReference Include="RestSharp" Version="106.12.0" />
-	<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" CopyXML="true"/>
+	<PackageReference Include="FontAwesome.WPF" Version="4.7.0.9" CopyXML="true" />
 	<PackageReference Include="Cyotek.Drawing.BitmapFont" Version="2.0.0" />
 	<PackageReference Include="HelixToolkit" Version="2.17.0" />
 	<PackageReference Include="HelixToolkit.Wpf" Version="2.17.0" />
 	<PackageReference Include="HelixToolkit.Wpf.SharpDX" Version="2.17.0" />
 	<PackageReference Include="SharpDX" Version="4.2.0" />
-	<PackageReference Include="SharpDX.D3DCompiler" Version="4.2.0" >
+	<PackageReference Include="SharpDX.D3DCompiler" Version="4.2.0">
 	  <IncludeAssets>none</IncludeAssets>
 	</PackageReference>
 	<PackageReference Include="SharpDX.Direct2D1" Version="4.2.0">
@@ -741,6 +748,11 @@
   </ItemGroup>
   <ItemGroup>
     <Resource Include="UI\Images\closetab_normal.png" />
+    <Resource Include="UI\Images\NodeStates\alert-64px.png" />
+    <Resource Include="UI\Images\NodeStates\error-64px.png" />
+    <Resource Include="UI\Images\NodeStates\frozen-64px.png" />
+    <Resource Include="UI\Images\NodeStates\hidden-64px.png" />
+    <Resource Include="UI\Images\NodeStates\info-64px.png" />
   </ItemGroup>
   <ItemGroup>
     <Resource Include="UI\Images\whiteclosetab.png" />
@@ -1479,7 +1491,6 @@
     <Resource Include="UI\Images\icon-whats-new-small.png" />
     <Resource Include="UI\Images\icon-dictionary-small.png" />
   </ItemGroup>
-  <ItemGroup />
   <Target Name="AfterBuildOps" AfterTargets="Build">
     <MakeDir Directories="$(OutputPath)\viewExtensions\" />
   </Target>

src/DynamoCoreWpf/UI/Converters.cs

@@ -1283,11 +1283,54 @@ public object ConvertBack(object value, Type targetType, object parameter, Syste
         }
     }
 
+    /// <summary>
+    /// Evaluates if the value is null and converts it to Visible or Collapsed state
+    /// </summary>
+    public class EmptyToVisibilityCollapsedConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value != null)
+                return Visibility.Visible;
+            return Visibility.Collapsed;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+
+    /// <summary>
+    /// Takes a value and if the value is not null returns Unity Type Auto (*) as a length value
+    /// Returns 0 length if the value is null
+    /// To be used in Grid Column/Row width 
+    /// </summary>
+    public class EmptyToZeroLengthConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value != null)
+            {
+                return new GridLength(1, GridUnitType.Auto);
+            }
+            else
+            {
+                return new GridLength(0);
+            }
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+
     /// <summary>
     /// Used in the Dynamo package manager search window to hide or show a label next to each package's name.
     /// The label only appears if the package has been recently created/updated (in the last 30 days).
     /// Label text is set via the DateToPackageLabelConverter.
-    /// </summary>
+    /// </summary>  
     public class DateToVisibilityCollapsedConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
@@ -1562,6 +1605,45 @@ public object ConvertBack(object value, Type targetType, object parameter, Syste
         }
     }
 
+    public class ZoomToOpacityConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            double number = (double)System.Convert.ChangeType(value, typeof(double));
+
+            if (number <= 0.4)
+                return 0.0;
+
+            return 0.5;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+
+    /// <summary>
+    /// Hides (collapses) if the zoom level is larger than the designated value
+    /// </summary>
+    public class ZoomToVisibilityCollapsedConverter : IValueConverter
+    {
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            double number = (double)System.Convert.ChangeType(value, typeof(double));
+
+            if (number > 0.4)
+                return Visibility.Collapsed;
+
+            return Visibility.Visible;    
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+    }
+
     public class PortNameToWidthConverter : IValueConverter
     {
         public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

src/DynamoCoreWpf/UI/Themes/Modern/DynamoConverters.xaml

@@ -89,10 +89,14 @@
     <controls:BoolToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
     <controls:BoolToVisibilityCollapsedConverter x:Key="BooleanToVisibilityCollapsedConverter" />
     <controls:InverseBooleanToVisibilityCollapsedConverter x:Key="InverseBoolToVisibilityCollapsedConverter" />
+    <controls:EmptyToVisibilityCollapsedConverter x:Key="EmptyToVisibilityCollapsedConverter"/>
+    <controls:EmptyToZeroLengthConverter x:Key="EmptyToZeroLengthConverter"/>
     <controls:NavigationToOpacityConverter x:Key="NavigationToOpacityConverter" />
     <controls:ViewButtonClipRectConverter x:Key="ViewButtonClipRectConverter" />
     <controls:ZoomToVisibilityConverter x:Key="ZoomToVisibilityConverter" />
+    <controls:ZoomToOpacityConverter x:Key="ZoomToOpacityConverter" />
     <controls:ZoomToBooleanConverter x:Key="ZoomToBooleanConverter" />
+    <controls:ZoomToVisibilityCollapsedConverter x:Key="ZoomToVisibilityCollapsedConverter" />
     <controls:PortNameToWidthConverter x:Key="PortNameToWidthConverter" />
     <controls:TooltipLengthTruncater x:Key="TooltipLengthTruncater" />
     <controls:TabSizeConverter x:Key="TabSizeConverter" />

src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml

@@ -519,6 +519,110 @@
         </Style.Triggers>
     </Style>
 
+    <!--  Zoom fade-in preview  -->
+    <Style x:Key="SZoomFadeInPreview" TargetType="{x:Type Border}">
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding Path=DataContext.Zoom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:WorkspaceView}}, Converter={StaticResource ZoomToBooleanConverter}}" Value="true">
+                <DataTrigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.0"
+                                             Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.EnterActions>
+                <DataTrigger.ExitActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.5"
+                                             Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.ExitActions>
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
+    <!--  Zoom fade-in preview  -->
+    <Style x:Key="SZoomFadeOutPreview" TargetType="{x:Type Border}">
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding Path=DataContext.Zoom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:WorkspaceView}}, Converter={StaticResource ZoomToBooleanConverter}}" Value="true">
+                <DataTrigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.5"
+                                             Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.EnterActions>
+                <DataTrigger.ExitActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.0"
+                                             Duration="0:0:0.5" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.ExitActions>
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
+    <!--  Zoom fade-out framework element  -->
+    <Style x:Key="SZoomFadeOutFrameworkElement" TargetType="{x:Type FrameworkElement}">
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding Path=DataContext.Zoom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:WorkspaceView}}, Converter={StaticResource ZoomToBooleanConverter}}" Value="true">
+                <DataTrigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="1.0"
+                                             Duration="0:0:0.2" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.EnterActions>
+                <DataTrigger.ExitActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.0"
+                                             Duration="0:0:0.2" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.ExitActions>
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
+    <!--  Zoom fade-in framework element  -->
+    <Style x:Key="SZoomFadeInFrameworkElement" TargetType="{x:Type FrameworkElement}">
+        <Style.Triggers>
+            <DataTrigger Binding="{Binding Path=DataContext.Zoom, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type controls:WorkspaceView}}, Converter={StaticResource ZoomToBooleanConverter}}" Value="true">
+                <DataTrigger.EnterActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="0.0"
+                                             Duration="0:0:0.2" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.EnterActions>
+                <DataTrigger.ExitActions>
+                    <BeginStoryboard>
+                        <Storyboard>
+                            <DoubleAnimation Storyboard.TargetProperty="Opacity"
+                                             To="1.0"
+                                             Duration="0:0:0.2" />
+                        </Storyboard>
+                    </BeginStoryboard>
+                </DataTrigger.ExitActions>
+            </DataTrigger>
+        </Style.Triggers>
+    </Style>
+
     <Style x:Key="TextButtonStyle" TargetType="Button">
         <Setter Property="HorizontalAlignment" Value="Right" />
         <Setter Property="Cursor" Value="Hand" />