DYN-4252-Shadow-Under-Pointer (#12503)

RobertGlobant20 · web-flow · commit 012621dffb3b · 2022-01-04T14:53:52.000-05:00
* DYN-4252-Shadow-Under-Pointer

I had to replace the Polygon (tree points connected by 3 lines) by a Path (tree points connected by 2 lines) due that the shadow was being applied to all sides of the Polygon(triangle), then now due that is a Path with 2 lines the shadow will be applied just in two lines.
I had to add a Converter so a PointCollection can be converted to a Path.Data.

* DYN-4252-Shadow-Under-Pointer Code Review

Fixed one comment
diff --git a/src/DynamoCoreWpf/UI/Converters.cs b/src/DynamoCoreWpf/UI/Converters.cs
@@ -3294,4 +3294,48 @@ public object ConvertBack(object value, Type targetType, object parameter, Cultu
             throw new NotImplementedException();
         }
     }
+
+    /// <summary>
+    /// Converts a PointColletion to a Geometry so the points can be drawn using a Path
+    /// </summary>
+    [ValueConversion(typeof(PointCollection), typeof(Geometry))]
+    public class PointsToPathConverter : IValueConverter
+    {
+        #region IValueConverter Members
+
+        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            if (value == null)
+                return null;
+
+            if (value.GetType() != typeof(PointCollection))
+                return null;
+
+            PointCollection points = (value as PointCollection);
+            if (points.Count > 0)
+            {
+                Point start = points[0];
+                List<LineSegment> segments = new List<LineSegment>();
+                for (int i = 1; i < points.Count; i++)
+                {
+                    segments.Add(new LineSegment(points[i], true));
+                }
+                PathFigure figure = new PathFigure(start, segments, false);
+                PathGeometry geometry = new PathGeometry();
+                geometry.Figures.Add(figure);
+                return geometry;
+            }
+            else
+            {
+                return null;
+            }
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
+        {
+            throw new NotSupportedException();
+        }
+
+        #endregion
+    }
 }
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/Step.cs b/src/DynamoCoreWpf/UI/GuidedTour/Step.cs
@@ -131,6 +131,11 @@ public enum PointerDirection { TOP_RIGHT, TOP_LEFT, BOTTOM_RIGHT, BOTTOM_LEFT, B
         /// </summary>
         public PointCollection TooltipPointerPoints { get; set; }
 
+        /// <summary>
+        /// This will contains the shadow direction in degrees that will be shown in the pointer
+        /// </summary>
+        public double ShadowTooltipDirection { get; set; }
+
         /// <summary>
         /// This property holds the DynamoViewModel that will be used when executing PreValidation functions
         /// </summary>
diff --git a/src/DynamoCoreWpf/UI/GuidedTour/Tooltip.cs b/src/DynamoCoreWpf/UI/GuidedTour/Tooltip.cs
@@ -17,6 +17,7 @@ public class Tooltip : Step
         double PointerTooltipOverlap = 5;
         double PointerVerticalOffset;
         double PointerHorizontalOffset;
+        enum SHADOW_DIRECTION { LEFT = 180, RIGHT = 0, BOTTOM = 270, TOP = 90};
 
         /// <summary>
         /// The Tooltip constructor
@@ -71,6 +72,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = 0;
                 pointY3 = PointerHeight / 2 + PointerVerticalOffset;
+                //Left Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;
 
             }
             else if (direction == PointerDirection.BOTTOM_LEFT)
@@ -83,6 +86,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = 0;
                 pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;
+                //Left Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;
             }
             else if (direction == PointerDirection.TOP_RIGHT)
             {
@@ -94,6 +99,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = realWidth;
                 pointY3 = PointerHeight / 2 + PointerVerticalOffset;
+                //Right Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;
 
             }
             else if (direction == PointerDirection.BOTTOM_RIGHT)
@@ -106,6 +113,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = realWidth;
                 pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;
+                //Right Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;
             }
             else if (direction == PointerDirection.BOTTOM_DOWN)
             {
@@ -117,6 +126,8 @@ private void DrawPointerDirection(PointerDirection direction)
 
                 pointX3 = PointerDownWidth / 2 + PointerHorizontalOffset;
                 pointY3 = realHeight - PointerHeight;
+                //Bottom Shadow
+                ShadowTooltipDirection = (double)SHADOW_DIRECTION.BOTTOM;
             }
 
             TooltipPointerPoints = new PointCollection(new[] { new Point(pointX1, pointY1),
diff --git a/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml b/src/DynamoCoreWpf/UI/Themes/Modern/DynamoModern.xaml
@@ -4075,7 +4075,7 @@
         <Setter Property="Fill" Value="{StaticResource PopupWhiteColor}" />
     </Style>
 
-    <Style x:Key="PoupPolygonPointerStyle" TargetType="{x:Type Polygon}">
+    <Style x:Key="PoupPathPointerStyle" TargetType="{x:Type Path}">
         <Setter Property="Fill" Value="{StaticResource PopupWhiteColor}" />
     </Style>
 
diff --git a/src/DynamoCoreWpf/ViewModels/GuidedTour/PopupWindowViewModel.cs b/src/DynamoCoreWpf/ViewModels/GuidedTour/PopupWindowViewModel.cs
@@ -41,6 +41,21 @@ public PointCollection TooltipPointerPoints
             }
         }
 
+        /// <summary>
+        /// This will contains the shadow direction in degrees that will be shown in the pointer
+        /// </summary>
+        public double ShadowTooltipDirection
+        { 
+            get
+            {
+                return Step.ShadowTooltipDirection;
+            }
+            set
+            {
+                Step.ShadowTooltipDirection = value;
+            } 
+        }
+
         /// <summary>
         /// Due that some popups doesn't need the pointer then this property hides or show the pointer
         /// </summary>
diff --git a/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml b/src/DynamoCoreWpf/Views/GuidedTour/PopupWindow.xaml
@@ -7,6 +7,7 @@
         xmlns:localui="clr-namespace:Dynamo.Wpf.UI.GuidedTour"
         xmlns:ui="clr-namespace:Dynamo.UI"
         xmlns:p="clr-namespace:Dynamo.Wpf.Properties;assembly=DynamoCoreWpf"
+       xmlns:controls="clr-namespace:Dynamo.Controls"
         mc:Ignorable="d"
         PopupAnimation="Fade"
         AllowsTransparency="True"
@@ -23,6 +24,7 @@
                 <ui:SharedResourceDictionary Source="{x:Static ui:SharedDictionaryManager.DynamoModernDictionaryUri}" />
             </ResourceDictionary.MergedDictionaries>
             <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
+            <controls:PointsToPathConverter x:Key="PointsToPathConverter"/>
         </ResourceDictionary>
     </Popup.Resources>
 
@@ -61,19 +63,19 @@
             </Path.Effect>
         </Path>
 
-        <!--This Polygon will draw on the Canvas the pointer (a triangle) that will be available only for tooltips but for the Welcome popup will be hidden-->
-        <Polygon x:Name="TooltipPointer"
-                 Visibility="{Binding ShowPopupPointer, Converter={StaticResource BooleanToVisibilityConverter}}"
-                 Points="{Binding TooltipPointerPoints}" 
-                 Style="{StaticResource PoupPolygonPointerStyle}">
-            <Polygon.BitmapEffect>
-                <!--This effect will show a 4px shadow of 20% of tranparency with a angle of 315 grades by default-->
-                <DropShadowBitmapEffect Color="Black" 
-                                        Direction="135" 
-                                        ShadowDepth="4" 
-                                        Opacity="0.2" />
-            </Polygon.BitmapEffect>
-        </Polygon>
+        <!--This Path will draw on the Canvas the pointer (a triangle) that will be available only for tooltips but for the Welcome popup will be hidden-->
+        <Path  x:Name="TooltipPointer"
+               Visibility="{Binding ShowPopupPointer, Converter={StaticResource BooleanToVisibilityConverter}}"
+               Data="{Binding Path=TooltipPointerPoints, Converter={StaticResource PointsToPathConverter}}"
+               Style="{StaticResource PoupPathPointerStyle}">
+            <Path.Effect>
+                <DropShadowEffect Opacity="0.2" 
+                                  Color="Black"
+                                  ShadowDepth="4"
+                                  BlurRadius="4"
+                                  Direction="{Binding Path=ShadowTooltipDirection}"/>
+            </Path.Effect>
+        </Path>
 
         <Grid  x:Name="mainPopupGrid"
                Width="{Binding Width}"

Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ public class Tooltip : Step`
`17`	`17`	`double PointerTooltipOverlap = 5;`
`18`	`18`	`double PointerVerticalOffset;`
`19`	`19`	`double PointerHorizontalOffset;`
	`20`	`+ enum SHADOW_DIRECTION { LEFT = 180, RIGHT = 0, BOTTOM = 270, TOP = 90};`
`20`	`21`
`21`	`22`	`/// <summary>`
`22`	`23`	`/// The Tooltip constructor`
`@@ -71,6 +72,8 @@ private void DrawPointerDirection(PointerDirection direction)`
`71`	`72`
`72`	`73`	`pointX3 = 0;`
`73`	`74`	`pointY3 = PointerHeight / 2 + PointerVerticalOffset;`
	`75`	`+ //Left Shadow`
	`76`	`+ ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;`
`74`	`77`
`75`	`78`	`}`
`76`	`79`	`else if (direction == PointerDirection.BOTTOM_LEFT)`
`@@ -83,6 +86,8 @@ private void DrawPointerDirection(PointerDirection direction)`
`83`	`86`
`84`	`87`	`pointX3 = 0;`
`85`	`88`	`pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;`
	`89`	`+ //Left Shadow`
	`90`	`+ ShadowTooltipDirection = (double)SHADOW_DIRECTION.LEFT;`
`86`	`91`	`}`
`87`	`92`	`else if (direction == PointerDirection.TOP_RIGHT)`
`88`	`93`	`{`
`@@ -94,6 +99,8 @@ private void DrawPointerDirection(PointerDirection direction)`
`94`	`99`
`95`	`100`	`pointX3 = realWidth;`
`96`	`101`	`pointY3 = PointerHeight / 2 + PointerVerticalOffset;`
	`102`	`+ //Right Shadow`
	`103`	`+ ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;`
`97`	`104`
`98`	`105`	`}`
`99`	`106`	`else if (direction == PointerDirection.BOTTOM_RIGHT)`
`@@ -106,6 +113,8 @@ private void DrawPointerDirection(PointerDirection direction)`
`106`	`113`
`107`	`114`	`pointX3 = realWidth;`
`108`	`115`	`pointY3 = Height - PointerHeight / 2 - PointerVerticalOffset;`
	`116`	`+ //Right Shadow`
	`117`	`+ ShadowTooltipDirection = (double)SHADOW_DIRECTION.RIGHT;`
`109`	`118`	`}`
`110`	`119`	`else if (direction == PointerDirection.BOTTOM_DOWN)`
`111`	`120`	`{`
`@@ -117,6 +126,8 @@ private void DrawPointerDirection(PointerDirection direction)`
`117`	`126`
`118`	`127`	`pointX3 = PointerDownWidth / 2 + PointerHorizontalOffset;`
`119`	`128`	`pointY3 = realHeight - PointerHeight;`
	`129`	`+ //Bottom Shadow`
	`130`	`+ ShadowTooltipDirection = (double)SHADOW_DIRECTION.BOTTOM;`
`120`	`131`	`}`
`121`	`132`
`122`	`133`	`TooltipPointerPoints = new PointCollection(new[] { new Point(pointX1, pointY1),`