You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
887 lines
62 KiB
887 lines
62 KiB
<reactive:ReactiveUserControl 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:vm="using:AuroraDesk.Presentation.ViewModels.Pages"
|
|
xmlns:reactive="using:ReactiveUI.Avalonia"
|
|
xmlns:entities="using:AuroraDesk.Core.Entities"
|
|
xmlns:converters="using:AuroraDesk.Presentation.Converters"
|
|
xmlns:heroicons="clr-namespace:HeroIconsAvalonia.Controls;assembly=HeroIconsAvalonia"
|
|
xmlns:controls="clr-namespace:AuroraDesk.Presentation.Controls"
|
|
xmlns:cp="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls.ColorPicker"
|
|
mc:Ignorable="d" d:DesignWidth="1200" d:DesignHeight="800"
|
|
x:Class="AuroraDesk.Presentation.Views.Pages.NodeCanvasPageView"
|
|
x:DataType="vm:NodeCanvasPageViewModel"
|
|
UseLayoutRounding="True">
|
|
|
|
<reactive:ReactiveUserControl.Resources>
|
|
<converters:BooleanToBorderBrushConverter x:Key="BooleanToBorderBrushConverter"/>
|
|
<converters:BooleanToBorderThicknessConverter x:Key="BooleanToBorderThicknessConverter"/>
|
|
<converters:NodeToSelectionTextConverter x:Key="NodeToSelectionTextConverter"/>
|
|
<converters:IsNotNullConverter x:Key="IsNotNullConverter"/>
|
|
<converters:IsNullConverter x:Key="IsNullConverter"/>
|
|
<converters:DoubleToStringConverter x:Key="DoubleToStringConverter"/>
|
|
<converters:ColorHexToBrushConverter x:Key="ColorHexToBrushConverter"/>
|
|
<converters:ColorHexToColorConverter x:Key="ColorHexToColorConverter"/>
|
|
<converters:ConnectorAttachmentModeToTextConverter x:Key="ConnectorAttachmentModeToTextConverter"/>
|
|
<converters:ConnectionPointsToInputsConverter x:Key="ConnectionPointsToInputsConverter"/>
|
|
<converters:ConnectionPointsToOutputsConverter x:Key="ConnectionPointsToOutputsConverter"/>
|
|
<converters:ConnectorPlacementToTextConverter x:Key="ConnectorPlacementToTextConverter"/>
|
|
<converters:ConnectorPlacementMarginConverter x:Key="ConnectorPlacementMarginConverter"/>
|
|
<converters:IndexToDisplayTextConverter x:Key="IndexToDisplayTextConverter"/>
|
|
</reactive:ReactiveUserControl.Resources>
|
|
|
|
<Design.DataContext>
|
|
<vm:NodeCanvasPageViewModel />
|
|
</Design.DataContext>
|
|
|
|
<Grid Background="{StaticResource BackgroundWhite}"
|
|
Margin="12"
|
|
UseLayoutRounding="True">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="240"/>
|
|
<ColumnDefinition Width="*"/>
|
|
<ColumnDefinition Width="320"/>
|
|
</Grid.ColumnDefinitions>
|
|
|
|
<!-- 左侧工具栏和组件库 -->
|
|
<Border Grid.Column="0"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="8"
|
|
Margin="0,0,12,0">
|
|
<Grid Background="{StaticResource BackgroundLight}">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto"/>
|
|
<RowDefinition Height="*"/>
|
|
<RowDefinition Height="Auto"/>
|
|
</Grid.RowDefinitions>
|
|
|
|
<!-- 顶部标题 -->
|
|
<Border Grid.Row="0"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,0,1"
|
|
Padding="15,12">
|
|
<TextBlock Text="节点编辑器"
|
|
FontSize="16"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
</Border>
|
|
|
|
<!-- 组件库区域 -->
|
|
<ScrollViewer x:Name="ComponentLibraryScrollViewer"
|
|
Grid.Row="1"
|
|
VerticalScrollBarVisibility="Auto"
|
|
Padding="12">
|
|
<StackPanel Spacing="12">
|
|
<TextBlock Text="组件库"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
Margin="0,0,0,8"/>
|
|
|
|
<!-- 节点模板列表 -->
|
|
<ItemsControl ItemsSource="{Binding NodeTemplates}">
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate DataType="entities:NodeTemplate">
|
|
<Button Margin="0,0,0,8"
|
|
Padding="0"
|
|
Background="Transparent"
|
|
BorderThickness="0"
|
|
DoubleTapped="OnTemplateButtonDoubleTapped">
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
CornerRadius="8"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
Padding="12"
|
|
Cursor="Hand"
|
|
x:Name="TemplateItem">
|
|
<Border.Styles>
|
|
<Style Selector="Border:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLightHover}"/>
|
|
<Setter Property="BorderBrush" Value="{StaticResource PrimaryBlue}"/>
|
|
</Style>
|
|
<Style Selector="Border:pressed">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLightActive}"/>
|
|
</Style>
|
|
</Border.Styles>
|
|
|
|
<!-- 节点预览 -->
|
|
<StackPanel Spacing="10" HorizontalAlignment="Stretch">
|
|
<Viewbox MaxWidth="160" MaxHeight="120" HorizontalAlignment="Center">
|
|
<Border Width="{Binding Width}"
|
|
Height="{Binding Height}"
|
|
CornerRadius="12"
|
|
Background="{StaticResource PrimaryBlue}"
|
|
Opacity="0.12"
|
|
BorderBrush="{StaticResource PrimaryBlue}"
|
|
BorderThickness="2"/>
|
|
</Viewbox>
|
|
|
|
<StackPanel Spacing="4" HorizontalAlignment="Center">
|
|
<TextBlock Text="{Binding DisplayName}"
|
|
FontSize="12"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
HorizontalAlignment="Center"/>
|
|
<TextBlock Text="{Binding Description}"
|
|
FontSize="11"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
HorizontalAlignment="Center"
|
|
TextWrapping="Wrap"/>
|
|
<TextBlock Text="{Binding Width, StringFormat='宽 {0:F0}'}"
|
|
FontSize="10"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
HorizontalAlignment="Center"/>
|
|
<TextBlock Text="{Binding Height, StringFormat='高 {0:F0}'}"
|
|
FontSize="10"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
HorizontalAlignment="Center"/>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
</Button>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
|
|
<!-- 底部操作按钮 -->
|
|
<Border Grid.Row="2"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,1,0,0"
|
|
Padding="12">
|
|
<StackPanel Spacing="10">
|
|
<Button Content="清空画布"
|
|
Command="{Binding ClearCanvasCommand}"
|
|
Background="{StaticResource StatusError}"
|
|
Foreground="White"
|
|
BorderThickness="0"
|
|
CornerRadius="6"
|
|
Padding="12,8"
|
|
FontSize="13"
|
|
FontWeight="Medium"
|
|
Cursor="Hand">
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource ButtonCloseActive}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
|
|
<Border Background="{StaticResource BackgroundLight}"
|
|
CornerRadius="6"
|
|
Padding="12"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1">
|
|
<TextBlock Text="提示：
从组件库拖拽节点到画布
或点击画布空白处添加节点"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
FontSize="11"
|
|
LineHeight="18"
|
|
TextWrapping="Wrap"/>
|
|
</Border>
|
|
</StackPanel>
|
|
</Border>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- 中间画布区域 -->
|
|
<Border Grid.Column="1"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="8"
|
|
Margin="0,0,12,0">
|
|
<Grid Background="{StaticResource BackgroundLight}">
|
|
<!-- 缩放控件 -->
|
|
<Border Background="White"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="6"
|
|
Padding="8"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Top"
|
|
Margin="12"
|
|
ZIndex="100">
|
|
<StackPanel Orientation="Horizontal" Spacing="6">
|
|
<Button Command="{Binding ZoomOutCommand}"
|
|
Width="32"
|
|
Height="32"
|
|
Padding="0"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="4"
|
|
Cursor="Hand">
|
|
<heroicons:HeroIcon Type="Minus"
|
|
Width="16"
|
|
Height="16"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLightHover}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<TextBlock Text="{Binding CanvasZoom, StringFormat='{}{0:P0}'}"
|
|
FontSize="12"
|
|
FontWeight="Medium"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
VerticalAlignment="Center"
|
|
MinWidth="50"
|
|
TextAlignment="Center"
|
|
Margin="4,0"/>
|
|
<Button Command="{Binding ZoomInCommand}"
|
|
Width="32"
|
|
Height="32"
|
|
Padding="0"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="4"
|
|
Cursor="Hand">
|
|
<heroicons:HeroIcon Type="Plus"
|
|
Width="16"
|
|
Height="16"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLightHover}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
<Button Command="{Binding ResetZoomCommand}"
|
|
Height="32"
|
|
Padding="8,0"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="4"
|
|
Cursor="Hand">
|
|
<StackPanel Orientation="Horizontal" Spacing="4">
|
|
<heroicons:HeroIcon Type="ArrowsPointingOut"
|
|
Width="14"
|
|
Height="14"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
VerticalAlignment="Center"/>
|
|
<TextBlock Text="重置"
|
|
FontSize="11"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
VerticalAlignment="Center"/>
|
|
</StackPanel>
|
|
<Button.Styles>
|
|
<Style Selector="Button:pointerover">
|
|
<Setter Property="Background" Value="{StaticResource BackgroundLightHover}"/>
|
|
</Style>
|
|
</Button.Styles>
|
|
</Button>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<ScrollViewer x:Name="CanvasScrollViewer"
|
|
HorizontalScrollBarVisibility="Auto"
|
|
VerticalScrollBarVisibility="Auto"
|
|
Background="{StaticResource BackgroundLight}">
|
|
<Canvas x:Name="CanvasContainer"
|
|
ClipToBounds="False"
|
|
MinWidth="2000"
|
|
MinHeight="2000"
|
|
Background="{StaticResource BackgroundWhite}">
|
|
<Canvas.RenderTransform>
|
|
<TransformGroup>
|
|
<TranslateTransform X="{Binding CanvasOffsetX}"
|
|
Y="{Binding CanvasOffsetY}"/>
|
|
<ScaleTransform ScaleX="{Binding CanvasZoom}"
|
|
ScaleY="{Binding CanvasZoom}"/>
|
|
</TransformGroup>
|
|
</Canvas.RenderTransform>
|
|
<!-- 网格背景层 -->
|
|
<Canvas x:Name="GridBackgroundLayer"
|
|
IsHitTestVisible="False"
|
|
ClipToBounds="False">
|
|
<Canvas.RenderTransform>
|
|
<TransformGroup>
|
|
<TranslateTransform X="{Binding CanvasOffsetX}"
|
|
Y="{Binding CanvasOffsetY}"/>
|
|
<ScaleTransform ScaleX="{Binding CanvasZoom}"
|
|
ScaleY="{Binding CanvasZoom}"/>
|
|
</TransformGroup>
|
|
</Canvas.RenderTransform>
|
|
</Canvas>
|
|
|
|
<!-- 节点 -->
|
|
<ItemsControl x:Name="NodesItemsControl"
|
|
ItemsSource="{Binding Nodes}"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Stretch">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<Canvas ClipToBounds="False"
|
|
MinWidth="2000"
|
|
MinHeight="2000"
|
|
Width="2000"
|
|
Height="2000"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate DataType="entities:Node">
|
|
<Border Width="{Binding Width}"
|
|
Height="{Binding Height}"
|
|
Background="{StaticResource BackgroundLight}"
|
|
CornerRadius="10"
|
|
BorderBrush="{Binding IsSelected, Converter={StaticResource BooleanToBorderBrushConverter}}"
|
|
BorderThickness="{Binding IsSelected, Converter={StaticResource BooleanToBorderThicknessConverter}}"
|
|
BoxShadow="0 2 8 0 #00000015"
|
|
ClipToBounds="False"
|
|
Canvas.Left="{Binding X}"
|
|
Canvas.Top="{Binding Y}">
|
|
<Grid ColumnDefinitions="Auto,*,Auto"
|
|
HorizontalAlignment="Stretch"
|
|
VerticalAlignment="Stretch"
|
|
ClipToBounds="False"
|
|
Margin="0">
|
|
<!-- 左侧连接点 -->
|
|
<ItemsControl Grid.Column="0"
|
|
Height="{Binding Height}"
|
|
ItemsSource="{Binding ConnectionPoints, Converter={StaticResource ConnectionPointsToInputsConverter}}"
|
|
HorizontalAlignment="Left"
|
|
VerticalAlignment="Center"
|
|
ClipToBounds="False">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<controls:ConnectorColumnPanel VerticalAlignment="Stretch"
|
|
Side="Left"
|
|
ClipToBounds="False"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Ellipse Width="{Binding Diameter}"
|
|
Height="{Binding Diameter}"
|
|
Fill="{Binding Color, Converter={StaticResource ColorHexToBrushConverter}}"
|
|
Stroke="{Binding Color, Converter={StaticResource ColorHexToBrushConverter}}"
|
|
StrokeThickness="0">
|
|
<Ellipse.Margin>
|
|
<MultiBinding Converter="{StaticResource ConnectorPlacementMarginConverter}" ConverterParameter="Left">
|
|
<Binding Path="Placement"/>
|
|
<Binding Path="Diameter"/>
|
|
</MultiBinding>
|
|
</Ellipse.Margin>
|
|
</Ellipse>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
|
|
<!-- 中心内容 -->
|
|
<StackPanel Grid.Column="1"
|
|
Margin="8,4"
|
|
Spacing="6"
|
|
VerticalAlignment="Center">
|
|
<TextBlock Text="{Binding Title}"
|
|
FontSize="13"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"
|
|
TextAlignment="Center"
|
|
TextWrapping="Wrap"/>
|
|
<TextBlock Text="{Binding Content}"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"
|
|
TextAlignment="Center"
|
|
TextWrapping="Wrap"/>
|
|
</StackPanel>
|
|
|
|
<!-- 右侧连接点 -->
|
|
<ItemsControl Grid.Column="2"
|
|
Height="{Binding Height}"
|
|
ItemsSource="{Binding ConnectionPoints, Converter={StaticResource ConnectionPointsToOutputsConverter}}"
|
|
HorizontalAlignment="Right"
|
|
VerticalAlignment="Center"
|
|
ClipToBounds="False">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<controls:ConnectorColumnPanel VerticalAlignment="Stretch"
|
|
Side="Right"
|
|
ClipToBounds="False"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Ellipse Width="{Binding Diameter}"
|
|
Height="{Binding Diameter}"
|
|
Fill="{Binding Color, Converter={StaticResource ColorHexToBrushConverter}}"
|
|
Stroke="{Binding Color, Converter={StaticResource ColorHexToBrushConverter}}"
|
|
StrokeThickness="0">
|
|
<Ellipse.Margin>
|
|
<MultiBinding Converter="{StaticResource ConnectorPlacementMarginConverter}" ConverterParameter="Right">
|
|
<Binding Path="Placement"/>
|
|
<Binding Path="Diameter"/>
|
|
</MultiBinding>
|
|
</Ellipse.Margin>
|
|
</Ellipse>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</Grid>
|
|
</Border>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</Canvas>
|
|
</ScrollViewer>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<!-- 右侧属性面板 -->
|
|
<Border Grid.Column="2"
|
|
Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="8"
|
|
UseLayoutRounding="True">
|
|
<ScrollViewer UseLayoutRounding="True">
|
|
<StackPanel Margin="16"
|
|
Spacing="16"
|
|
UseLayoutRounding="True">
|
|
<TextBlock Text="特性"
|
|
FontSize="18"
|
|
FontWeight="Bold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
|
|
<TextBlock Text="{Binding SelectedNode, Converter={StaticResource NodeToSelectionTextConverter}}"
|
|
FontSize="13"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
|
|
<Border Background="{StaticResource BackgroundLight}"
|
|
CornerRadius="8"
|
|
Padding="16"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
IsVisible="{Binding SelectedNode, Converter={StaticResource IsNotNullConverter}}"
|
|
UseLayoutRounding="True">
|
|
<Border.Styles>
|
|
<Style Selector="TextBox">
|
|
<Setter Property="Padding" Value="10,6"/>
|
|
<Setter Property="CornerRadius" Value="6"/>
|
|
<Setter Property="BorderBrush" Value="{StaticResource BorderLight}"/>
|
|
<Setter Property="Background" Value="{StaticResource BackgroundWhite}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
|
|
<Setter Property="FontSize" Value="13"/>
|
|
<Setter Property="FontFamily" Value="Microsoft YaHei, Segoe UI, Arial"/>
|
|
<Setter Property="UseLayoutRounding" Value="True"/>
|
|
</Style>
|
|
<Style Selector="ComboBox">
|
|
<Setter Property="Padding" Value="6,4"/>
|
|
<Setter Property="CornerRadius" Value="6"/>
|
|
<Setter Property="BorderBrush" Value="{StaticResource BorderLight}"/>
|
|
<Setter Property="Background" Value="{StaticResource BackgroundWhite}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
|
|
<Setter Property="FontSize" Value="13"/>
|
|
<Setter Property="FontFamily" Value="Microsoft YaHei, Segoe UI, Arial"/>
|
|
<Setter Property="UseLayoutRounding" Value="True"/>
|
|
</Style>
|
|
<Style Selector="cp|ColorPicker">
|
|
<Setter Property="HorizontalAlignment" Value="Stretch"/>
|
|
<Setter Property="BorderBrush" Value="{StaticResource BorderLight}"/>
|
|
<Setter Property="BorderThickness" Value="1"/>
|
|
<Setter Property="CornerRadius" Value="6"/>
|
|
<Setter Property="Background" Value="{StaticResource BackgroundWhite}"/>
|
|
<Setter Property="Foreground" Value="{StaticResource TextPrimary}"/>
|
|
<Setter Property="MinHeight" Value="32"/>
|
|
</Style>
|
|
<Style Selector="TextBlock">
|
|
<Setter Property="FontFamily" Value="Microsoft YaHei, Segoe UI, Arial"/>
|
|
<Setter Property="UseLayoutRounding" Value="True"/>
|
|
</Style>
|
|
</Border.Styles>
|
|
|
|
<StackPanel Spacing="20"
|
|
UseLayoutRounding="True">
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
CornerRadius="6"
|
|
Padding="14"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1">
|
|
<StackPanel Spacing="12">
|
|
<TextBlock Text="组件属性"
|
|
FontSize="14"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
|
|
<Border BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="4">
|
|
<Grid ColumnDefinitions="110,*"
|
|
RowDefinitions="Auto,Auto,Auto"
|
|
UseLayoutRounding="True">
|
|
<Border Grid.Row="0"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="名称"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="0"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<TextBox Text="{Binding SelectedNode.Title, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
|
|
Watermark="请输入名称"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="1"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="宽度"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="1"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<TextBox Text="{Binding SelectedNode.Width, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DoubleToStringConverter}}"
|
|
Watermark="0"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="2"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,0"
|
|
Padding="10,8">
|
|
<TextBlock Text="高度"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="2"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,0"
|
|
Padding="10,4">
|
|
<TextBox Text="{Binding SelectedNode.Height, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DoubleToStringConverter}}"
|
|
Watermark="0"/>
|
|
</Border>
|
|
</Grid>
|
|
</Border>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
CornerRadius="6"
|
|
Padding="14"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1">
|
|
<StackPanel Spacing="12">
|
|
<TextBlock Text="附件圆属性"
|
|
FontSize="14"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
|
|
<Border BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="4">
|
|
<Grid ColumnDefinitions="110,*"
|
|
RowDefinitions="Auto,Auto">
|
|
<Border Grid.Row="0"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="左侧数量"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="0"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<ComboBox ItemsSource="{Binding ConnectorCountOptions}"
|
|
SelectedItem="{Binding SelectedLeftConnectorCount, Mode=TwoWay}"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="1"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,0"
|
|
Padding="10,8">
|
|
<TextBlock Text="右侧数量"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="1"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,0"
|
|
Padding="10,4">
|
|
<ComboBox ItemsSource="{Binding ConnectorCountOptions}"
|
|
SelectedItem="{Binding SelectedRightConnectorCount, Mode=TwoWay}"/>
|
|
</Border>
|
|
</Grid>
|
|
</Border>
|
|
|
|
<StackPanel Spacing="16">
|
|
<Expander HorizontalAlignment="Stretch"
|
|
IsExpanded="True"
|
|
Padding="0">
|
|
<Expander.Header>
|
|
<TextBlock Text="左侧圆"
|
|
FontSize="12"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
</Expander.Header>
|
|
<Border Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="6"
|
|
Padding="6">
|
|
<ItemsControl ItemsSource="{Binding SelectedNode.ConnectionPoints, Converter={StaticResource ConnectionPointsToInputsConverter}}"
|
|
HorizontalAlignment="Stretch">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel Orientation="Vertical"
|
|
Spacing="0"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="6"
|
|
HorizontalAlignment="Stretch">
|
|
<Grid ColumnDefinitions="110,*"
|
|
RowDefinitions="Auto,Auto,Auto,Auto">
|
|
<Border Grid.Row="0"
|
|
Grid.ColumnSpan="2"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,0,1"
|
|
Padding="12,6">
|
|
<TextBlock Text="{Binding Index, Converter={StaticResource IndexToDisplayTextConverter}}"
|
|
FontSize="12"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="1"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="直径"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="1"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<TextBox Text="{Binding Diameter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DoubleToStringConverter}}"
|
|
Watermark="0"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="2"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="颜色"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="2"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<cp:ColorPicker Color="{Binding Color, Mode=TwoWay, Converter={StaticResource ColorHexToColorConverter}}"
|
|
IsAlphaEnabled="False"
|
|
IsColorPreviewVisible="True"
|
|
IsColorPaletteVisible="True"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="3"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,0"
|
|
Padding="10,8">
|
|
<TextBlock Text="定位"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="3"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,0"
|
|
Padding="10,4">
|
|
<ComboBox SelectedItem="{Binding Placement, Mode=TwoWay}">
|
|
<ComboBox.ItemTemplate>
|
|
<DataTemplate>
|
|
<TextBlock Text="{Binding Converter={StaticResource ConnectorPlacementToTextConverter}}"/>
|
|
</DataTemplate>
|
|
</ComboBox.ItemTemplate>
|
|
<ComboBox.Items>
|
|
<entities:ConnectorPlacementMode>Inside</entities:ConnectorPlacementMode>
|
|
<entities:ConnectorPlacementMode>Outside</entities:ConnectorPlacementMode>
|
|
</ComboBox.Items>
|
|
</ComboBox>
|
|
</Border>
|
|
</Grid>
|
|
</Border>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</Border>
|
|
</Expander>
|
|
|
|
<Expander HorizontalAlignment="Stretch"
|
|
IsExpanded="True"
|
|
Padding="0">
|
|
<Expander.Header>
|
|
<TextBlock Text="右侧圆"
|
|
FontSize="12"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
</Expander.Header>
|
|
<Border Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="6"
|
|
Padding="6">
|
|
<ItemsControl ItemsSource="{Binding SelectedNode.ConnectionPoints, Converter={StaticResource ConnectionPointsToOutputsConverter}}"
|
|
HorizontalAlignment="Stretch">
|
|
<ItemsControl.ItemsPanel>
|
|
<ItemsPanelTemplate>
|
|
<StackPanel Orientation="Vertical"
|
|
Spacing="0"/>
|
|
</ItemsPanelTemplate>
|
|
</ItemsControl.ItemsPanel>
|
|
<ItemsControl.ItemTemplate>
|
|
<DataTemplate>
|
|
<Border Background="{StaticResource BackgroundWhite}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
CornerRadius="6"
|
|
HorizontalAlignment="Stretch">
|
|
<Grid ColumnDefinitions="110,*"
|
|
RowDefinitions="Auto,Auto,Auto,Auto">
|
|
<Border Grid.Row="0"
|
|
Grid.ColumnSpan="2"
|
|
Background="{StaticResource BackgroundLight}"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,0,1"
|
|
Padding="12,6">
|
|
<TextBlock Text="{Binding Index, Converter={StaticResource IndexToDisplayTextConverter}}"
|
|
FontSize="12"
|
|
FontWeight="SemiBold"
|
|
Foreground="{StaticResource TextPrimary}"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="1"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="直径"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="1"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<TextBox Text="{Binding Diameter, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged, Converter={StaticResource DoubleToStringConverter}}"
|
|
Watermark="0"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="2"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,1"
|
|
Padding="10,8">
|
|
<TextBlock Text="颜色"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="2"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,1"
|
|
Padding="10,4">
|
|
<cp:ColorPicker Color="{Binding Color, Mode=TwoWay, Converter={StaticResource ColorHexToColorConverter}}"
|
|
IsAlphaEnabled="False"
|
|
IsColorPreviewVisible="True"
|
|
IsColorPaletteVisible="True"/>
|
|
</Border>
|
|
|
|
<Border Grid.Row="3"
|
|
Grid.Column="0"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="0,0,1,0"
|
|
Padding="10,8">
|
|
<TextBlock Text="定位"
|
|
FontSize="12"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
<Border Grid.Row="3"
|
|
Grid.Column="1"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1,0,0,0"
|
|
Padding="10,4">
|
|
<ComboBox SelectedItem="{Binding Placement, Mode=TwoWay}">
|
|
<ComboBox.ItemTemplate>
|
|
<DataTemplate>
|
|
<TextBlock Text="{Binding Converter={StaticResource ConnectorPlacementToTextConverter}}"/>
|
|
</DataTemplate>
|
|
</ComboBox.ItemTemplate>
|
|
<ComboBox.Items>
|
|
<entities:ConnectorPlacementMode>Inside</entities:ConnectorPlacementMode>
|
|
<entities:ConnectorPlacementMode>Outside</entities:ConnectorPlacementMode>
|
|
</ComboBox.Items>
|
|
</ComboBox>
|
|
</Border>
|
|
</Grid>
|
|
</Border>
|
|
</DataTemplate>
|
|
</ItemsControl.ItemTemplate>
|
|
</ItemsControl>
|
|
</Border>
|
|
</Expander>
|
|
</StackPanel>
|
|
</StackPanel>
|
|
</Border>
|
|
</StackPanel>
|
|
</Border>
|
|
|
|
<Border Background="{StaticResource BackgroundLight}"
|
|
CornerRadius="8"
|
|
Padding="16"
|
|
BorderBrush="{StaticResource BorderLight}"
|
|
BorderThickness="1"
|
|
IsVisible="{Binding SelectedNode, Converter={StaticResource IsNullConverter}}"
|
|
UseLayoutRounding="True">
|
|
<TextBlock Text="请选择画布上的节点以编辑属性"
|
|
FontSize="13"
|
|
Foreground="{StaticResource TextSecondary}"/>
|
|
</Border>
|
|
</StackPanel>
|
|
</ScrollViewer>
|
|
</Border>
|
|
</Grid>
|
|
</reactive:ReactiveUserControl>
|
|
|