内部连接点示例

This commit is contained in:
艾竹
2023-02-04 16:38:56 +08:00
parent 0d6debe87f
commit e8f91abd68
12 changed files with 153 additions and 21 deletions

View File

@@ -39,7 +39,7 @@ namespace AIStudio.Wpf.Logical
base.Init();
TimerDesignerItemViewModel timer = new TimerDesignerItemViewModel() { Left = 28, Top = 28 };
timer.Value = 0.5;
timer.Value = 1;
DiagramViewModel.DirectAddItemCommand.Execute(timer);
InputItemViewModel in1 = new InputItemViewModel() { Left = 28, Top = 110 };
@@ -210,6 +210,7 @@ namespace AIStudio.Wpf.Logical
input.Value.ColorViewModel.FillColor.Color = connector.SourceConnectorInfo.ColorViewModel.FillColor.Color;
connector.ColorViewModel.LineColor.Color = connector.SourceConnectorInfo.ColorViewModel.FillColor.Color;
connector.ColorViewModel.FillColor.Color = connector.SourceConnectorInfo.ColorViewModel.FillColor.Color;
if (item.LogicalType == LogicalType.Output)
{

View File

@@ -75,6 +75,7 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo
Children=new List<MenuItemViewModel>
{
new MenuItemViewModel(){Title = "ColoredPort"},
new MenuItemViewModel(){Title = "InnerPort"}
}
},
new MenuItemViewModel(){Title = "Groups",

View File

@@ -73,8 +73,8 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
DiagramViewModel.DirectAddItemCommand.Execute(node2);
connector1 = new ConnectionViewModel(DiagramViewModel, node1.RightConnector, node2.LeftConnector);
connector1.ShapeViewModel.SourceMarker = new LinkMarker("M 0 -8 L 3 -8 3 8 0 8 z M 4 -8 7 -8 7 8 4 8 z M 8 -8 16 0 8 8 z", 16, ArrowPathStyle.Arrow, ArrowSizeStyle.ExtraLarge);
connector1.ShapeViewModel.SinkMarker = new LinkMarker("M 0 -8 L 8 -8 4 0 8 8 0 8 4 0 z", 8, ArrowPathStyle.Arrow, ArrowSizeStyle.Small);
connector1.ShapeViewModel.SourceMarker = new LinkMarker("M 0 -8 L 3 -8 3 8 0 8 z M 4 -8 7 -8 7 8 4 8 z M 8 -8 16 0 8 8 z", 16, 16, ArrowPathStyle.Arrow, ArrowSizeStyle.ExtraLarge);
connector1.ShapeViewModel.SinkMarker = new LinkMarker("M 0 -8 L 8 -8 4 0 8 8 0 8 4 0 z", 8, 8, ArrowPathStyle.Arrow, ArrowSizeStyle.Small);
connector1.AddLabel("Custom");
DiagramViewModel.DirectAddItemCommand.Execute(connector1);

View File

@@ -36,6 +36,23 @@ namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
connector2.AddLabel("Smooth");
DiagramViewModel.DirectAddItemCommand.Execute(connector2);
DefaultDesignerItemViewModel node11 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 450, Text = "11" };
DiagramViewModel.DirectAddItemCommand.Execute(node11);
DefaultDesignerItemViewModel node12 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 250, Top = 648, Text = "12" };
DiagramViewModel.DirectAddItemCommand.Execute(node12);
DefaultDesignerItemViewModel node13 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 400, Top = 450, Text = "13" };
DiagramViewModel.DirectAddItemCommand.Execute(node13);
ConnectionViewModel connector11 = new ConnectionViewModel(DiagramViewModel, node11.RightConnector, node12.LeftConnector, DrawMode.ConnectingLineBoundary, RouterMode.RouterNormal);
connector11.AddLabel("Boundary");
DiagramViewModel.DirectAddItemCommand.Execute(connector11);
ConnectionViewModel connector12 = new ConnectionViewModel(DiagramViewModel, node12.RightConnector, node13.LeftConnector, DrawMode.ConnectingLineCorner, RouterMode.RouterNormal);
connector12.AddLabel("Corner");
DiagramViewModel.DirectAddItemCommand.Execute(connector12);
DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
}
}

View File

@@ -0,0 +1,48 @@
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
namespace AIStudio.Wpf.DiagramDesigner.Demo.ViewModels
{
class InnerPortViewModel : BaseViewModel
{
public InnerPortViewModel()
{
Title = "InnerPort";
Info = "You can add connection points inside a node";
DiagramViewModel = new DiagramViewModel();
DiagramViewModel.PageSizeType = PageSizeType.Custom;
DiagramViewModel.PageSize = new Size(double.NaN, double.NaN);
DiagramViewModel.ColorViewModel = new ColorViewModel();
DiagramViewModel.ColorViewModel.FillColor.Color = System.Windows.Media.Colors.Orange;
DefaultDesignerItemViewModel node1 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 50, Top = 50, Text = "1" };
node1.ClearConnectors();
var port1 = new FullyCreatedConnectorInfo(DiagramViewModel, node1, ConnectorOrientation.Right, true) { XRatio = 0.5, YRatio = 0.5 };
node1.AddConnector(port1);
DiagramViewModel.DirectAddItemCommand.Execute(node1);
DefaultDesignerItemViewModel node2 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 300, Text = "2" };
node2.ClearConnectors();
var port2_1 = new FullyCreatedConnectorInfo(DiagramViewModel, node2, ConnectorOrientation.Top, true) { XRatio = 0.2, YRatio = 0.8 };
var port2_2 = new FullyCreatedConnectorInfo(DiagramViewModel, node2, ConnectorOrientation.Top, true) { XRatio = 0.8, YRatio = 0.2 };
DiagramViewModel.DirectAddItemCommand.Execute(node2);
DefaultDesignerItemViewModel node3 = new DefaultDesignerItemViewModel(DiagramViewModel) { Left = 300, Top = 50, Text = "3" };
node3.ClearConnectors();
var port3 = new FullyCreatedConnectorInfo(DiagramViewModel, node3, ConnectorOrientation.Bottom, true) { XRatio = 0.5, YRatio = 0.5 };
DiagramViewModel.DirectAddItemCommand.Execute(node3);
ConnectionViewModel connector1 = new ConnectionViewModel(DiagramViewModel, port1, port2_1, DrawMode.ConnectingLineSmooth, RouterMode.RouterNormal);
DiagramViewModel.DirectAddItemCommand.Execute(connector1);
ConnectionViewModel connector2 = new ConnectionViewModel(DiagramViewModel, port2_2, port3, DrawMode.ConnectingLineStraight, RouterMode.RouterOrthogonal);
DiagramViewModel.DirectAddItemCommand.Execute(connector2);
DiagramViewModel.ClearSelectedItemsCommand.Execute(null);
}
}
}

View File

@@ -0,0 +1,16 @@
<UserControl x:Class="AIStudio.Wpf.DiagramDesigner.Demo.Views.InnerPortView"
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:dd="https://gitee.com/akwkevin/aistudio.-wpf.-diagram"
xmlns:controls="clr-namespace:AIStudio.Wpf.DiagramDesigner.Demo.Controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<!-- Diagram Control -->
<dd:DiagramControl x:Name="diagram" DataContext="{Binding DiagramViewModel}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
<controls:TitleControl/>
</Grid>
</UserControl>

View File

@@ -0,0 +1,26 @@
using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace AIStudio.Wpf.DiagramDesigner.Demo.Views
{
/// <summary>
/// InnerPortView.xaml 的交互逻辑
/// </summary>
public partial class InnerPortView : UserControl
{
public InnerPortView()
{
InitializeComponent();
}
}
}

View File

@@ -169,6 +169,11 @@ namespace AIStudio.Wpf.DiagramDesigner
get; set;
}
[XmlAttribute]
public double LineAnimationDuration
{
get; set;
}
public event PropertyChangedEventHandler PropertyChanged;
}

View File

@@ -30,18 +30,18 @@ namespace AIStudio.Wpf.DiagramDesigner
private void LineControl_Unloaded(object sender, RoutedEventArgs e)
{
if (this.DataContext is ConnectionViewModel connector)
if (this.DataContext is ConnectionViewModel connector && connector.ColorViewModel != null)
{
connector.PropertyChanged -= Connector_PropertyChanged;
connector.ColorViewModel.PropertyChanged -= Connector_PropertyChanged;
}
_story?.Stop();
}
private async void PathAnimation_Loaded(object sender, RoutedEventArgs e)
{
if (this.DataContext is ConnectionViewModel connector)
if (this.DataContext is ConnectionViewModel connector && connector.ColorViewModel != null)
{
connector.PropertyChanged -= Connector_PropertyChanged;
connector.ColorViewModel.PropertyChanged -= Connector_PropertyChanged;
connector.PropertyChanged += Connector_PropertyChanged;
}
this.ball.Visibility = Visibility.Collapsed;
@@ -52,7 +52,8 @@ namespace AIStudio.Wpf.DiagramDesigner
{
switch (e.PropertyName)
{
case nameof(ConnectionViewModel.PathGeneratorResult):
case nameof(ColorViewModel.LineAnimation):
case nameof(ColorViewModel.LineAnimationDuration):
await DoAnimation();
break;
@@ -71,10 +72,10 @@ namespace AIStudio.Wpf.DiagramDesigner
ball.Visibility = Visibility.Collapsed;
break;
case LineAnimation.PathAnimation:
PathAnimation();
PathAnimation(connector.ColorViewModel.LineAnimationDuration);
break;
case LineAnimation.DashAnimation:
DashAnimation();
DashAnimation(connector.ColorViewModel.LineAnimationDuration);
break;
}
}
@@ -82,7 +83,7 @@ namespace AIStudio.Wpf.DiagramDesigner
Storyboard _story;
private void PathAnimation()
private void PathAnimation(double second)
{
this.ball.Visibility = Visibility.Visible;
@@ -105,7 +106,7 @@ namespace AIStudio.Wpf.DiagramDesigner
DoubleAnimationUsingPath animationX = new DoubleAnimationUsingPath();
animationX.PathGeometry = this.line.Data?.GetFlattenedPathGeometry();
animationX.Source = PathAnimationSource.X;
animationX.Duration = new Duration(TimeSpan.FromSeconds(2));
animationX.Duration = new Duration(TimeSpan.FromSeconds(second));
DoubleAnimationUsingPath animationY = new DoubleAnimationUsingPath();
animationY.PathGeometry = this.line.Data?.GetFlattenedPathGeometry();
@@ -135,12 +136,12 @@ namespace AIStudio.Wpf.DiagramDesigner
}
private void DashAnimation()
private void DashAnimation(double second)
{
this.ball.Visibility = Visibility.Collapsed;
var animation = new DoubleAnimation(0, -10, new Duration(TimeSpan.FromSeconds(0.5)))
var animation = new DoubleAnimation(0, -10, new Duration(TimeSpan.FromSeconds(second)))
{
RepeatBehavior = RepeatBehavior.Forever,
};

View File

@@ -150,6 +150,19 @@ namespace AIStudio.Wpf.DiagramDesigner
SetProperty(ref _lineAnimation, value);
}
}
private double _lineAnimationDuration = 1;
public double LineAnimationDuration
{
get
{
return _lineAnimationDuration;
}
set
{
SetProperty(ref _lineAnimationDuration, value);
}
}
}

View File

@@ -33,6 +33,10 @@ namespace AIStudio.Wpf.DiagramDesigner
{
get; set;
}
double LineAnimationDuration
{
get; set;
}
event PropertyChangedEventHandler PropertyChanged;
}
}

View File

@@ -476,11 +476,16 @@ namespace AIStudio.Wpf.DiagramDesigner
case nameof(DesignerItemViewModelBase.ItemWidth):
case nameof(DesignerItemViewModelBase.Left):
case nameof(DesignerItemViewModelBase.Top):
SourceA = PointHelper.GetPointForConnector(this.SourceConnectorInfo);
if (IsFullConnection)
{
//减少触发一次画线
SourceA = PointHelper.GetPointForConnector(this.SourceConnectorInfo);
SourceB = PointHelper.GetPointForConnector(this.SinkConnectorInfoFully);
}
else
{
SourceA = PointHelper.GetPointForConnector(this.SourceConnectorInfo);
}
break;
}
}
@@ -519,12 +524,7 @@ namespace AIStudio.Wpf.DiagramDesigner
}
else if (sender is ColorViewModel)
{
switch (e.PropertyName)
{
case nameof(ColorViewModel.LineAnimation):
RaisePropertyChanged(nameof(PathGeneratorResult));
break;
}
}
}