1
0
mirror of https://github.com/Artemis-RGB/Artemis synced 2025-12-13 05:48:35 +00:00

Node editor - Added preview mode

in this mode the editor is read-only and rescales itself to fit it's container
This commit is contained in:
Robert 2022-04-01 00:48:56 +02:00
parent 7c83d5345f
commit 8fd18b9565
16 changed files with 299 additions and 21 deletions

View File

@ -0,0 +1,53 @@
using System;
using Artemis.Core;
namespace Artemis.UI.Shared.Services.ProfileEditor.Commands;
/// <summary>
/// Represents a profile editor command that can be used to change the display condition of a profile element.
/// </summary>
public class ChangeElementDisplayCondition : IProfileEditorCommand, IDisposable
{
private readonly ICondition? _condition;
private readonly ICondition? _oldCondition;
private readonly RenderProfileElement _profileElement;
private bool _executed;
/// <summary>
/// Creates a new instance of the <see cref="ChangeElementDisplayCondition" /> class.
/// </summary>
/// <param name="profileElement">The render profile element whose display condition to change.</param>
/// <param name="condition">The new display condition.</param>
public ChangeElementDisplayCondition(RenderProfileElement profileElement, ICondition? condition)
{
_profileElement = profileElement;
_condition = condition;
_oldCondition = profileElement.DisplayCondition;
}
/// <inheritdoc />
public void Dispose()
{
if (_executed)
_oldCondition?.Dispose();
else
_condition?.Dispose();
}
/// <inheritdoc />
public string DisplayName => "Change display condition mode";
/// <inheritdoc />
public void Execute()
{
_profileElement.DisplayCondition = _condition;
_executed = true;
}
/// <inheritdoc />
public void Undo()
{
_profileElement.DisplayCondition = _oldCondition;
_executed = false;
}
}

View File

@ -65,6 +65,9 @@
<Compile Update="Screens\VisualScripting\DragCableView.axaml.cs">
<DependentUpon>DragCableView.axaml</DependentUpon>
</Compile>
<Compile Update="Screens\VisualScripting\NodeScriptWindowView.axaml.cs">
<DependentUpon>NodeScriptWindowView.axaml</DependentUpon>
</Compile>
</ItemGroup>
<ItemGroup>
<AvaloniaXaml Update="DefaultTypes\PropertyInput\StringPropertyInputView.axaml">

View File

@ -92,7 +92,7 @@ namespace Artemis.UI.Ninject.Factories
public interface INodeVmFactory : IVmFactory
{
NodeScriptViewModel NodeScriptViewModel(NodeScript nodeScript);
NodeScriptViewModel NodeScriptViewModel(NodeScript nodeScript, bool isPreview);
NodePickerViewModel NodePickerViewModel(NodeScript nodeScript);
NodeViewModel NodeViewModel(NodeScriptViewModel nodeScriptViewModel, INode node);
CableViewModel CableViewModel(NodeScriptViewModel nodeScriptViewModel, IPin from, IPin to);

View File

@ -0,0 +1,31 @@
<UserControl xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:displayCondition="clr-namespace:Artemis.UI.Screens.ProfileEditor.DisplayCondition"
xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Artemis.UI.Screens.ProfileEditor.DisplayCondition.DisplayConditionScriptView"
x:DataType="displayCondition:DisplayConditionScriptViewModel">
<Grid>
<Grid IsVisible="{CompiledBinding NodeScriptViewModel, Converter={x:Static ObjectConverters.IsNotNull}}">
<ContentControl Content="{CompiledBinding NodeScriptViewModel}" />
<Button Classes="icon-button"
ToolTip.Tip="Open editor"
VerticalAlignment="Top"
HorizontalAlignment="Right"
Margin="4"
Command="{Binding OpenEditor}">
<avalonia:MaterialIcon Kind="OpenInNew"></avalonia:MaterialIcon>
</Button>
</Grid>
<Button VerticalAlignment="Center"
HorizontalAlignment="Center"
Command="{Binding EnableConditions}"
IsVisible="{CompiledBinding NodeScriptViewModel, Converter={x:Static ObjectConverters.IsNull}}">
Enable display conditions
</Button>
</Grid>
</UserControl>

View File

@ -0,0 +1,18 @@
using Avalonia.Markup.Xaml;
using Avalonia.ReactiveUI;
namespace Artemis.UI.Screens.ProfileEditor.DisplayCondition
{
public partial class DisplayConditionScriptView : ReactiveUserControl<DisplayConditionScriptViewModel>
{
public DisplayConditionScriptView()
{
InitializeComponent();
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}
}

View File

@ -0,0 +1,58 @@
using System;
using System.Reactive.Linq;
using System.Threading.Tasks;
using Artemis.Core;
using Artemis.UI.Ninject.Factories;
using Artemis.UI.Screens.VisualScripting;
using Artemis.UI.Shared;
using Artemis.UI.Shared.Services.Interfaces;
using Artemis.UI.Shared.Services.ProfileEditor;
using Artemis.UI.Shared.Services.ProfileEditor.Commands;
using Avalonia.Controls.Mixins;
using ReactiveUI;
namespace Artemis.UI.Screens.ProfileEditor.DisplayCondition;
public class DisplayConditionScriptViewModel : ActivatableViewModelBase
{
private readonly IProfileEditorService _profileEditorService;
private readonly IWindowService _windowService;
private ObservableAsPropertyHelper<NodeScriptViewModel?>? _nodeScriptViewModel;
private RenderProfileElement? _profileElement;
public DisplayConditionScriptViewModel(IProfileEditorService profileEditorService, INodeVmFactory nodeVmFactory, IWindowService windowService)
{
_profileEditorService = profileEditorService;
_windowService = windowService;
this.WhenActivated(d =>
{
profileEditorService.ProfileElement.Subscribe(p => _profileElement = p).DisposeWith(d);
_nodeScriptViewModel = profileEditorService.ProfileElement
.Select(p => p?.WhenAnyValue(element => element.DisplayCondition) ?? Observable.Never<ICondition?>())
.Switch()
.Select(c => c is StaticCondition staticCondition ? nodeVmFactory.NodeScriptViewModel(staticCondition.Script, true) : null)
.ToProperty(this, vm => vm.NodeScriptViewModel)
.DisposeWith(d);
});
}
public NodeScriptViewModel? NodeScriptViewModel => _nodeScriptViewModel?.Value;
public async Task EnableConditions()
{
bool confirmed = await _windowService.ShowConfirmContentDialog(
"Display conditions",
"Do you want to enable display conditions for this element? \r\n" +
"Using display conditions you can dynamically hide or show layers and folders depending on certain parameters."
);
if (confirmed && _profileElement != null)
_profileEditorService.ExecuteCommand(new ChangeElementDisplayCondition(_profileElement, new StaticCondition(_profileElement)));
}
public async Task OpenEditor()
{
if (_profileElement?.DisplayCondition is StaticCondition staticCondition)
await _windowService.ShowDialogAsync<NodeScriptWindowViewModel, bool>(("nodeScript", staticCondition.Script));
}
}

View File

@ -97,7 +97,7 @@
<GridSplitter Grid.Row="1" Classes="editor-grid-splitter-horizontal" />
<Border Grid.Row="2" Classes="card card-condensed" Margin="4">
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">Conditions</TextBlock>
<ContentControl Content="{CompiledBinding DisplayConditionScriptViewModel}"></ContentControl>
</Border>
</Grid>

View File

@ -3,6 +3,7 @@ using System.Collections.ObjectModel;
using System.Reactive.Disposables;
using Artemis.Core;
using Artemis.Core.Services;
using Artemis.UI.Screens.ProfileEditor.DisplayCondition;
using Artemis.UI.Screens.ProfileEditor.ProfileTree;
using Artemis.UI.Screens.ProfileEditor.Properties;
using Artemis.UI.Screens.ProfileEditor.StatusBar;
@ -29,6 +30,7 @@ public class ProfileEditorViewModel : MainScreenViewModel
ProfileTreeViewModel profileTreeViewModel,
ProfileEditorTitleBarViewModel profileEditorTitleBarViewModel,
PropertiesViewModel propertiesViewModel,
DisplayConditionScriptViewModel displayConditionScriptViewModel,
StatusBarViewModel statusBarViewModel)
: base(hostScreen, "profile-editor")
{
@ -36,6 +38,7 @@ public class ProfileEditorViewModel : MainScreenViewModel
VisualEditorViewModel = visualEditorViewModel;
ProfileTreeViewModel = profileTreeViewModel;
PropertiesViewModel = propertiesViewModel;
DisplayConditionScriptViewModel = displayConditionScriptViewModel;
StatusBarViewModel = statusBarViewModel;
TitleBarViewModel = profileEditorTitleBarViewModel;
@ -56,6 +59,7 @@ public class ProfileEditorViewModel : MainScreenViewModel
public VisualEditorViewModel VisualEditorViewModel { get; }
public ProfileTreeViewModel ProfileTreeViewModel { get; }
public PropertiesViewModel PropertiesViewModel { get; }
public DisplayConditionScriptViewModel DisplayConditionScriptViewModel { get; }
public StatusBarViewModel StatusBarViewModel { get; }
public ReadOnlyObservableCollection<IToolViewModel>? Tools
@ -70,6 +74,7 @@ public class ProfileEditorViewModel : MainScreenViewModel
public PluginSetting<double> ConditionsHeight => _settingsService.GetSetting("ProfileEditor.ConditionsHeight", 300.0);
public PluginSetting<double> PropertiesHeight => _settingsService.GetSetting("ProfileEditor.PropertiesHeight", 300.0);
public void OpenUrl(string url)
{
Utilities.OpenUrl(url);

View File

@ -7,7 +7,8 @@
xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Artemis.UI.Screens.VisualScripting.NodeScriptView"
x:DataType="visualScripting:NodeScriptViewModel">
x:DataType="visualScripting:NodeScriptViewModel"
IsHitTestVisible="{CompiledBinding !IsPreview}">
<UserControl.Styles>
<Style Selector="FlyoutPresenter.node-picker-flyout">
<Setter Property="MaxWidth" Value="1000"></Setter>

View File

@ -1,6 +1,9 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Reactive.Disposables;
using Artemis.Core;
using Artemis.Core.Events;
using Artemis.UI.Shared.Controls;
using Artemis.UI.Shared.Events;
using Avalonia;
@ -35,11 +38,51 @@ public class NodeScriptView : ReactiveUserControl<NodeScriptViewModel>
UpdateZoomBorderBackground();
_grid.AddHandler(PointerReleasedEvent, CanvasOnPointerReleased, RoutingStrategies.Direct | RoutingStrategies.Tunnel | RoutingStrategies.Bubble, true);
this.WhenActivated(_ => ViewModel?.PickerPositionSubject.Subscribe(p =>
this.WhenActivated(d =>
{
ViewModel!.PickerPositionSubject.Subscribe(p =>
{
ViewModel.NodePickerViewModel.Position = p;
_grid?.ContextFlyout?.ShowAt(_grid, true);
}));
}).DisposeWith(d);
if (ViewModel.IsPreview)
{
BoundsProperty.Changed.Subscribe(BoundsPropertyChanged).DisposeWith(d);
ViewModel.NodeScript.NodeAdded += NodesChanged;
ViewModel.NodeScript.NodeRemoved += NodesChanged;
Disposable.Create(() =>
{
ViewModel.NodeScript.NodeAdded -= NodesChanged;
ViewModel.NodeScript.NodeRemoved -= NodesChanged;
}).DisposeWith(d);
}
AutoFit(true);
});
}
protected override Size MeasureOverride(Size availableSize)
{
AutoFitIfPreview();
return base.MeasureOverride(availableSize);
}
private void AutoFitIfPreview()
{
if (ViewModel != null && ViewModel.IsPreview)
AutoFit(true);
}
private void NodesChanged(object? sender, SingleValueEventArgs<INode> e)
{
AutoFitIfPreview();
}
private void BoundsPropertyChanged(AvaloniaPropertyChangedEventArgs<Rect> obj)
{
if (_nodesContainer.ItemContainerGenerator.Containers.Select(c => c.ContainerControl).Contains(obj.Sender))
AutoFitIfPreview();
}
private void CanvasOnPointerReleased(object? sender, PointerReleasedEventArgs e)
@ -49,6 +92,27 @@ public class NodeScriptView : ReactiveUserControl<NodeScriptViewModel>
ViewModel.NodePickerViewModel.Position = e.GetPosition(_grid);
}
private void AutoFit(bool skipTransitions)
{
if (!_nodesContainer.ItemContainerGenerator.Containers.Any())
return;
double left = _nodesContainer.ItemContainerGenerator.Containers.Select(c => c.ContainerControl.Bounds.Left).Min();
double top = _nodesContainer.ItemContainerGenerator.Containers.Select(c => c.ContainerControl.Bounds.Top).Min();
double bottom = _nodesContainer.ItemContainerGenerator.Containers.Select(c => c.ContainerControl.Bounds.Bottom).Max();
double right = _nodesContainer.ItemContainerGenerator.Containers.Select(c => c.ContainerControl.Bounds.Right).Max();
// Add a 5 pixel margin around the rect
Rect scriptRect = new(new Point(left - 5, top - 5), new Point(right + 5, bottom + 5));
// The scale depends on the available space
double scale = Math.Min(1, Math.Min(Bounds.Width / scriptRect.Width, Bounds.Height / scriptRect.Height));
// Pan and zoom to make the script fit
_zoomBorder.Zoom(scale, 0, 0, skipTransitions);
_zoomBorder.Pan(Bounds.Center.X - scriptRect.Center.X * scale, Bounds.Center.Y - scriptRect.Center.Y * scale, skipTransitions);
}
private void ZoomBorderOnPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
{
if (e.Property.Name == nameof(_zoomBorder.Background))

View File

@ -10,7 +10,6 @@ using Artemis.Core.Services;
using Artemis.UI.Ninject.Factories;
using Artemis.UI.Screens.VisualScripting.Pins;
using Artemis.UI.Shared;
using Artemis.UI.Shared.Services.Interfaces;
using Artemis.UI.Shared.Services.NodeEditor;
using Artemis.UI.Shared.Services.NodeEditor.Commands;
using Avalonia;
@ -24,25 +23,24 @@ namespace Artemis.UI.Screens.VisualScripting;
public class NodeScriptViewModel : ActivatableViewModelBase
{
private readonly INodeEditorService _nodeEditorService;
private readonly INotificationService _notificationService;
private readonly INodeVmFactory _nodeVmFactory;
private readonly INodeService _nodeService;
private readonly SourceList<NodeViewModel> _nodeViewModels;
private readonly INodeVmFactory _nodeVmFactory;
private readonly Subject<Point> _requestedPickerPositionSubject;
private DragCableViewModel? _dragViewModel;
private List<NodeViewModel>? _initialNodeSelection;
public NodeScriptViewModel(NodeScript nodeScript, INodeVmFactory nodeVmFactory, INodeService nodeService, INodeEditorService nodeEditorService, INotificationService notificationService)
public NodeScriptViewModel(NodeScript nodeScript, bool isPreview, INodeVmFactory nodeVmFactory, INodeService nodeService, INodeEditorService nodeEditorService)
{
_nodeVmFactory = nodeVmFactory;
_nodeService = nodeService;
_nodeEditorService = nodeEditorService;
_notificationService = notificationService;
_nodeViewModels = new SourceList<NodeViewModel>();
_requestedPickerPositionSubject = new Subject<Point>();
NodeScript = nodeScript;
IsPreview = isPreview;
NodePickerViewModel = _nodeVmFactory.NodePickerViewModel(nodeScript);
History = nodeEditorService.GetHistory(NodeScript);
PickerPositionSubject = _requestedPickerPositionSubject.AsObservable();
@ -55,13 +53,6 @@ public class NodeScriptViewModel : ActivatableViewModelBase
Observable.FromEventPattern<SingleValueEventArgs<INode>>(x => NodeScript.NodeRemoved += x, x => NodeScript.NodeRemoved -= x)
.Subscribe(e => HandleNodeRemoved(e.EventArgs))
.DisposeWith(d);
nodeEditorService.GetHistory(NodeScript).Undo
.Subscribe(c => _notificationService.CreateNotification().WithMessage(c != null ? $"Undid {c.DisplayName}" : "Nothing to undo").Show())
.DisposeWith(d);
nodeEditorService.GetHistory(NodeScript).Redo
.Subscribe(c => _notificationService.CreateNotification().WithMessage(c != null ? $"Redid {c.DisplayName}" : "Nothing to redo").Show())
.DisposeWith(d);
});
// Create VMs for all nodes
@ -97,6 +88,8 @@ public class NodeScriptViewModel : ActivatableViewModelBase
public NodeEditorHistory History { get; }
public IObservable<Point> PickerPositionSubject { get; }
public bool IsPreview { get; }
public DragCableViewModel? DragViewModel
{
get => _dragViewModel;
@ -196,7 +189,9 @@ public class NodeScriptViewModel : ActivatableViewModelBase
// If dropped on top of a compatible pin, connect to it
if (targetPinVmModel != null && targetPinVmModel.IsCompatibleWith(sourcePinViewModel))
{
_nodeEditorService.ExecuteCommand(NodeScript, new ConnectPins(sourcePinViewModel.Pin, targetPinVmModel.Pin));
}
// If not dropped on a pin allow the user to create a new node
else if (targetPinVmModel == null)
{

View File

@ -0,0 +1,11 @@
<Window xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:visualScripting="clr-namespace:Artemis.UI.Screens.VisualScripting"
mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
x:Class="Artemis.UI.Screens.VisualScripting.NodeScriptWindowView"
x:DataType="visualScripting:NodeScriptWindowViewModel"
Title="VisualEditorWindowView">
<ContentControl Content="{CompiledBinding NodeScriptViewModel}" />
</Window>

View File

@ -0,0 +1,21 @@
using Avalonia;
using Avalonia.Markup.Xaml;
namespace Artemis.UI.Screens.VisualScripting
{
public partial class NodeScriptWindowView : ReactiveCoreWindow<NodeScriptWindowViewModel>
{
public NodeScriptWindowView()
{
InitializeComponent();
#if DEBUG
this.AttachDevTools();
#endif
}
private void InitializeComponent()
{
AvaloniaXamlLoader.Load(this);
}
}
}

View File

@ -0,0 +1,18 @@
using Artemis.Core;
using Artemis.UI.Ninject.Factories;
using Artemis.UI.Shared;
namespace Artemis.UI.Screens.VisualScripting
{
public class NodeScriptWindowViewModel : DialogViewModelBase<bool>
{
public NodeScript NodeScript { get; }
public NodeScriptViewModel NodeScriptViewModel { get; set; }
public NodeScriptWindowViewModel(NodeScript nodeScript, INodeVmFactory vmFactory)
{
NodeScript = nodeScript;
NodeScriptViewModel = vmFactory.NodeScriptViewModel(NodeScript, false);
}
}
}

View File

@ -55,7 +55,7 @@ namespace Artemis.UI.Screens.Workshop
orNode.Result.ConnectTo(exitNode.Pins.First());
}
VisualEditorViewModel = nodeVmFactory.NodeScriptViewModel(_testScript);
VisualEditorViewModel = nodeVmFactory.NodeScriptViewModel(_testScript, false);
this.WhenActivated(d =>
{