Profile editor - Improved profile loading and UI population

Layer properties - Added drag-editing to float input (to be expanded to all)

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTimelineView.xaml

@@ -9,15 +9,47 @@
              d:DesignHeight="25"
              d:DesignWidth="800"
              d:DataContext="{d:DesignInstance local:PropertyTimelineViewModel}">
-    <ItemsControl ItemsSource="{Binding PropertyTrackViewModels}"
-                  Width="{Binding Width}"
-                  MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}}"
-                  Background="{DynamicResource MaterialDesignToolBarBackground}"
-                  HorizontalAlignment="Left">
-        <ItemsControl.ItemTemplate>
-            <DataTemplate>
-                <ContentControl s:View.Model="{Binding}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
-            </DataTemplate>
-        </ItemsControl.ItemTemplate>
-    </ItemsControl>
+    <Canvas Background="{DynamicResource MaterialDesignToolBarBackground}"
+            MouseDown="{s:Action TimelineCanvasMouseDown}"
+            MouseUp="{s:Action TimelineCanvasMouseUp}"
+            MouseMove="{s:Action TimelineCanvasMouseMove}">
+        <Canvas.Triggers>
+            <EventTrigger RoutedEvent="UIElement.MouseLeftButtonDown">
+                <BeginStoryboard>
+                    <Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
+                        <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="UIElement.MouseLeftButtonUp">
+                <BeginStoryboard>
+                    <Storyboard Storyboard.TargetName="MultiSelectionPath" Storyboard.TargetProperty="Opacity">
+                        <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </Canvas.Triggers>
+
+        <ItemsControl ItemsSource="{Binding PropertyTrackViewModels}"
+                      Width="{Binding Width}"
+                      MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollViewer}}"
+                      HorizontalAlignment="Left">
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl s:View.Model="{Binding}" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" />
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+
+        <!-- Multi-selection rectangle -->
+        <Path Data="{Binding SelectionRectangle}" Opacity="0"
+              Stroke="{DynamicResource PrimaryHueLightBrush}"
+              StrokeThickness="1"
+              x:Name="MultiSelectionPath"
+              IsHitTestVisible="False">
+            <Path.Fill>
+                <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
+            </Path.Fill>
+        </Path>
+    </Canvas>
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTimelineViewModel.cs

@@ -1,7 +1,15 @@
 using System;
 using System.Collections.Generic;
 using System.Linq;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Shapes;
+using Artemis.Core.Models.Surface;
 using Artemis.UI.Ninject.Factories;
+using Artemis.UI.Screens.SurfaceEditor;
+using Artemis.UI.Screens.SurfaceEditor.Visualization;
 using Artemis.UI.Services.Interfaces;
 using Stylet;
 
@@ -24,12 +32,15 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
             _profileEditorService.SelectedProfileElementUpdated += (sender, args) => Update();
             LayerPropertiesViewModel.PixelsPerSecondChanged += (sender, args) => UpdateKeyframePositions();
+
+            Execute.PostToUIThread(() => SelectionRectangle = new RectangleGeometry());
         }
 
         public LayerPropertiesViewModel LayerPropertiesViewModel { get; }
 
         public double Width { get; set; }
         public BindableCollection<PropertyTrackViewModel> PropertyTrackViewModels { get; set; }
+        public RectangleGeometry SelectionRectangle { get; set; }
 
         public void UpdateEndTime()
         {
@@ -88,11 +99,53 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             UpdateEndTime();
         }
 
-        private void CreateViewModels(LayerPropertyViewModel property)
+        #region Keyframe selection
+
+        private Point _mouseDragStartPoint;
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void TimelineCanvasMouseDown(object sender, MouseButtonEventArgs e)
         {
-            PropertyTrackViewModels.Add(_propertyTrackVmFactory.Create(this, property));
-            foreach (var child in property.Children)
-                CreateViewModels(child);
+            ((IInputElement) sender).CaptureMouse();
+
+            SelectionRectangle.Rect = new Rect();
+            _mouseDragStartPoint = e.GetPosition((IInputElement) sender);
+        }
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void TimelineCanvasMouseUp(object sender, MouseEventArgs e)
+        {
+            var position = e.GetPosition((IInputElement)sender);
+            var selectedRect = new Rect(_mouseDragStartPoint, position);
+            SelectionRectangle.Rect = selectedRect;
+
+            // Find all keyframes in the rectangle
+            var selectedKeyframes = new List<PropertyTrackKeyframeViewModel>();
+            var hitTestParams = new GeometryHitTestParameters(SelectionRectangle);
+            var resultCallback = new HitTestResultCallback(result => HitTestResultBehavior.Continue);
+            var filterCallback = new HitTestFilterCallback(element =>
+            {
+                if (element is Ellipse ellipse)
+                    selectedKeyframes.Add((PropertyTrackKeyframeViewModel) ellipse.DataContext);
+                return HitTestFilterBehavior.Continue;
+            });
+            VisualTreeHelper.HitTest((Visual) sender, filterCallback, resultCallback, hitTestParams);
+            
+            var keyframeViewModels = PropertyTrackViewModels.SelectMany(t => t.KeyframeViewModels.OrderBy(k => k.Keyframe.Position)).ToList();
+            foreach (var keyframeViewModel in keyframeViewModels)
+                keyframeViewModel.IsSelected = selectedKeyframes.Contains(keyframeViewModel);
+
+            ((IInputElement) sender).ReleaseMouseCapture();
+        }
+
+        public void TimelineCanvasMouseMove(object sender, MouseEventArgs e)
+        {
+            if (e.LeftButton == MouseButtonState.Pressed)
+            {
+                var position = e.GetPosition((IInputElement) sender);
+                var selectedRect = new Rect(_mouseDragStartPoint, position);
+                SelectionRectangle.Rect = selectedRect;
+            }
         }
 
         public void SelectKeyframe(PropertyTrackKeyframeViewModel clicked, bool selectBetween, bool toggle)
@@ -137,6 +190,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
             }
         }
 
+        #endregion
+
+        #region Keyframe movement
+
         public void MoveSelectedKeyframes(TimeSpan offset)
         {
             var keyframeViewModels = PropertyTrackViewModels.SelectMany(t => t.KeyframeViewModels.OrderBy(k => k.Keyframe.Position)).ToList();
@@ -152,5 +209,14 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
             _profileEditorService.UpdateProfilePreview();
         }
+
+        #endregion
+
+        private void CreateViewModels(LayerPropertyViewModel property)
+        {
+            PropertyTrackViewModels.Add(_propertyTrackVmFactory.Create(this, property));
+            foreach (var child in property.Children)
+                CreateViewModels(child);
+        }
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/LayerProperties/Timeline/PropertyTrackKeyframeViewModel.cs

@@ -46,6 +46,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
         public void KeyframeMouseDown(object sender, MouseButtonEventArgs e)
         {
+            if (e.LeftButton == MouseButtonState.Released)
+                return;
             if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift) && !IsSelected)
                 PropertyTrackViewModel.PropertyTimelineViewModel.SelectKeyframe(this, true, false);
             else if (Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl))
@@ -54,12 +56,16 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
                 PropertyTrackViewModel.PropertyTimelineViewModel.SelectKeyframe(this, false, false);
 
             ((IInputElement) sender).CaptureMouse();
+            e.Handled = true;
         }
 
         public void KeyframeMouseUp(object sender, MouseButtonEventArgs e)
         {
+            if (e.LeftButton == MouseButtonState.Released)
+                return;
             ((IInputElement) sender).ReleaseMouseCapture();
             _profileEditorService.UpdateSelectedProfileElement();
+            e.Handled = true;
         }
 
         public void KeyframeMouseMove(object sender, MouseEventArgs e)
@@ -89,6 +95,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.LayerProperties.Timeline
 
                 PropertyTrackViewModel.PropertyTimelineViewModel.MoveSelectedKeyframes(newTime - Keyframe.Position);
             }
+            e.Handled = true;
         }
 
         #endregion