Skip to content

Commit

Permalink
Add support for ScrollViewer (#142)
Browse files Browse the repository at this point in the history 
* Implement IScrollInfo
  • Loading branch information
@miroiu
miroiu authored Oct 21, 2024
1 parent a554f06 commit a402aa8
Show file tree
Hide file tree
Showing 13 changed files with 600 additions and 338 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
> - Added IsSelected and IsSelectable attached dependency properties to BaseConnection
> - Added PrioritizeBaseConnectionForSelection static field to BaseConnection
> - Added EditorGestures.Connection.Selection
> - Added support for ScrollViewer in NodifyEditor (implements IScrollInfo)
> - Added NodifyEditor.ScrollIncrement dependency property
> - Bugfixes:
#### **Version 6.4.0**
Expand Down
167 changes: 99 additions & 68 deletions Examples/Nodify.Calculator/EditorView.xaml
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
<UserControl x:Class="Nodify.Calculator.EditorView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Nodify.Calculator"
xmlns:nodify="https://miroiu.github.io/nodify"
xmlns:shared="clr-namespace:Nodify;assembly=Nodify.Shared"
xmlns:shared="clr-namespace:Nodify;assembly=Nodify.Shared"
xmlns:sys="clr-namespace:System;assembly=System.Runtime"
d:DataContext="{d:DesignInstance Type=local:EditorViewModel}"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
d:DesignHeight="450"
d:DesignWidth="800">
<UserControl.Resources>
<GeometryDrawing x:Key="SmallGridGeometry"
Geometry="M0,0 L0,1 0.03,1 0.03,0.03 1,0.03 1,0 Z"
Expand All @@ -34,38 +35,59 @@
Transform="{Binding ViewportTransform, ElementName=Editor}"
Drawing="{StaticResource LargeGridGeometry}" />

<LinearGradientBrush x:Key="AnimatedBrush" StartPoint="0 0" EndPoint="1 0">
<GradientStop Color="#6366f1" Offset="0" />
<GradientStop Color="#a855f7" Offset="0.5" />
<GradientStop Color="#ec4899" Offset="1" />
<LinearGradientBrush x:Key="AnimatedBrush"
StartPoint="0 0"
EndPoint="1 0">
<GradientStop Color="#6366f1"
Offset="0" />
<GradientStop Color="#a855f7"
Offset="0.5" />
<GradientStop Color="#ec4899"
Offset="1" />
</LinearGradientBrush>
<Border x:Key="AnimatedBorderPlaceholder" BorderBrush="{StaticResource AnimatedBrush}" />
<Border x:Key="AnimatedBorderPlaceholder"
BorderBrush="{StaticResource AnimatedBrush}" />

<Storyboard x:Key="AnimateBorder" RepeatBehavior="Forever">
<Storyboard x:Key="AnimateBorder"
RepeatBehavior="Forever">
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="1 0" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="1 0" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="1 1" BeginTime="0:0:2" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="1 1"
BeginTime="0:0:2" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="0 1" BeginTime="0:0:4" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="0 1"
BeginTime="0:0:4" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.StartPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="0 0" BeginTime="0:0:6" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="0 0"
BeginTime="0:0:6" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="1 1" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="0 1" BeginTime="0:0:2" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="1 1" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="0 0" BeginTime="0:0:4" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="0 1"
BeginTime="0:0:2" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2" To="1 0" BeginTime="0:0:6" />
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="0 0"
BeginTime="0:0:4" />
<PointAnimation Storyboard.TargetProperty="BorderBrush.(LinearGradientBrush.EndPoint)"
Storyboard.Target="{StaticResource AnimatedBorderPlaceholder}"
Duration="0:0:2"
To="1 0"
BeginTime="0:0:6" />
</Storyboard>

<local:ItemToListConverter x:Key="ItemToListConverter" />
Expand Down Expand Up @@ -95,8 +117,10 @@
Value="{Binding IsSelected}" />
<Setter Property="ActualSize"
Value="{Binding Size, Mode=OneWayToSource}" />
<Setter Property="BorderBrush" Value="{Binding BorderBrush, Source={StaticResource AnimatedBorderPlaceholder}}" />
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush"
Value="{Binding BorderBrush, Source={StaticResource AnimatedBorderPlaceholder}}" />
<Setter Property="BorderThickness"
Value="2" />
</Style>
</UserControl.Resources>

Expand Down Expand Up @@ -184,37 +208,39 @@
</DataTemplate>
</nodify:GroupingNode.HeaderTemplate>
<Grid>
<nodify:NodifyEditor Tag="{Binding DataContext, RelativeSource={RelativeSource Self}}"
DataContext="{Binding InnerCalculator}"
ItemsSource="{Binding Operations}"
Connections="{Binding Connections}"
SelectedItems="{Binding SelectedOperations}"
DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}"
PendingConnection="{Binding PendingConnection}"
PendingConnectionTemplate="{StaticResource PendingConnectionTemplate}"
ConnectionTemplate="{StaticResource ConnectionTemplate}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
Background="Transparent"
GridCellSize="15"
AllowDrop="True"
Drop="OnDropNode"
Visibility="{Binding DataContext.IsExpanded, RelativeSource={RelativeSource AncestorType=nodify:GroupingNode}, Converter={shared:BooleanToVisibilityConverter}}">

<nodify:NodifyEditor.InputBindings>
<KeyBinding Key="Delete"
Command="{Binding DeleteSelectionCommand}" />
<KeyBinding Key="C"
Command="{Binding GroupSelectionCommand}" />
</nodify:NodifyEditor.InputBindings>
<ScrollViewer CanContentScroll="True">
<nodify:NodifyEditor Tag="{Binding DataContext, RelativeSource={RelativeSource Self}}"
DataContext="{Binding InnerCalculator}"
ItemsSource="{Binding Operations}"
Connections="{Binding Connections}"
SelectedItems="{Binding SelectedOperations}"
DisconnectConnectorCommand="{Binding DisconnectConnectorCommand}"
PendingConnection="{Binding PendingConnection}"
PendingConnectionTemplate="{StaticResource PendingConnectionTemplate}"
ConnectionTemplate="{StaticResource ConnectionTemplate}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
Background="Transparent"
GridCellSize="15"
AllowDrop="True"
Drop="OnDropNode"
Visibility="{Binding DataContext.IsExpanded, RelativeSource={RelativeSource AncestorType=nodify:GroupingNode}, Converter={shared:BooleanToVisibilityConverter}}">

<CompositeCollection>
<nodify:DecoratorContainer DataContext="{Binding OperationsMenu}"
Location="{Binding Location}">
<local:OperationsMenuView />
</nodify:DecoratorContainer>
</CompositeCollection>
</nodify:NodifyEditor>
<nodify:NodifyEditor.InputBindings>
<KeyBinding Key="Delete"
Command="{Binding DeleteSelectionCommand}" />
<KeyBinding Key="C"
Command="{Binding GroupSelectionCommand}" />
</nodify:NodifyEditor.InputBindings>

<CompositeCollection>
<nodify:DecoratorContainer DataContext="{Binding OperationsMenu}"
Location="{Binding Location}">
<local:OperationsMenuView />
</nodify:DecoratorContainer>
</CompositeCollection>
</nodify:NodifyEditor>
</ScrollViewer>

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
Expand Down Expand Up @@ -344,7 +370,8 @@

<nodify:NodifyEditor.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard Name="AnimateBorder" Storyboard="{StaticResource AnimateBorder}" />
<BeginStoryboard Name="AnimateBorder"
Storyboard="{StaticResource AnimateBorder}" />
</EventTrigger>
</nodify:NodifyEditor.Triggers>

Expand All @@ -359,7 +386,7 @@
<Grid Background="{StaticResource LargeGridLinesDrawingBrush}"
Panel.ZIndex="-2" />

<Border HorizontalAlignment="Right"
<Border HorizontalAlignment="Right"
MinWidth="200"
MaxWidth="300"
Padding="7"
Expand All @@ -374,19 +401,23 @@
<ItemsControl ItemsSource="{Binding Calculator.OperationsMenu.AvailableOperations}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="5"/>
<Setter Property="FrameworkElement.HorizontalAlignment" Value="Left"/>
<Setter Property="FrameworkElement.Cursor" Value="Hand"/>
<Setter Property="FrameworkElement.ToolTip" Value="Drag and drop into the editor"/>
<Setter Property="FrameworkElement.Margin"
Value="5" />
<Setter Property="FrameworkElement.HorizontalAlignment"
Value="Left" />
<Setter Property="FrameworkElement.Cursor"
Value="Hand" />
<Setter Property="FrameworkElement.ToolTip"
Value="Drag and drop into the editor" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type local:OperationViewModel}">
<nodify:Node Content="{Binding Title}"
Input="{Binding Input}"
BorderBrush="{StaticResource AnimatedBrush}"
BorderThickness="2"
MouseMove="OnNodeDrag">
Input="{Binding Input}"
BorderBrush="{StaticResource AnimatedBrush}"
BorderThickness="2"
MouseMove="OnNodeDrag">
<nodify:Node.Output>
<CompositeCollection>
<sys:String>Output</sys:String>
Expand Down
3 changes: 3 additions & 0 deletions Examples/Nodify.Shapes/App.xaml.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@ public partial class App : Application
{
public App()
{
NodifyEditor.EnableDraggingContainersOptimizations = false;
NodifyEditor.EnableCuttingLinePreview = true;

EditorGestures.Mappings.Connection.Disconnect.Value = new AnyGesture(new MouseGesture(MouseAction.LeftClick, ModifierKeys.Alt), new MouseGesture(MouseAction.RightClick));
}
}
Expand Down
18 changes: 10 additions & 8 deletions Examples/Nodify.Shapes/Canvas/CanvasView.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@
ItemsSelectStartedCommand="{Binding SelectShapesStartedCommand}"
ItemsSelectCompletedCommand="{Binding SelectShapesCompletedCommand}"
RemoveConnectionCommand="{Binding RemoveConnectionCommand}"
MouseDown="Editor_MouseDown"
MouseMove="Editor_MouseMove"
MouseUp="Editor_MouseUp"
GridCellSize="5"
x:Name="Editor">
<nodify:NodifyEditor.Style>
Expand Down Expand Up @@ -156,10 +159,12 @@
<Setter Property="OutlineBrush"
Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="OutlineBrush">
<Setter.Value>
<SolidColorBrush Color="White" Opacity="0.15" />
<SolidColorBrush Color="White"
Opacity="0.15" />
</Setter.Value>
</Setter>
</Trigger>
Expand Down Expand Up @@ -475,8 +480,7 @@
HorizontalAlignment="Center"
Margin="0 0 0 20"
CornerRadius="3"
Background="#1e293b"
MouseDown="Toolbar_MouseDown">
Background="#1e293b">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
Expand Down Expand Up @@ -594,8 +598,7 @@
HorizontalAlignment="Left"
Margin="20 0 0 20"
CornerRadius="3"
Background="#1e293b"
MouseDown="Toolbar_MouseDown">
Background="#1e293b">
<Border.Effect>
<DropShadowEffect ShadowDepth="1" />
</Border.Effect>
Expand Down Expand Up @@ -649,8 +652,7 @@
HorizontalAlignment="Right"
Margin="0 0 20 20"
Height="38"
CornerRadius="3"
MouseDown="Toolbar_MouseDown">
CornerRadius="3">

<ItemsControl ItemsSource="{Binding Cursors}">
<ItemsControl.ItemsPanel>
Expand Down
Loading

0 comments on commit a402aa8

Please sign in to comment.