feature<CommitGraph>: add polyline display mode

This commit is contained in:
leo 2021-05-19 16:14:46 +08:00
parent e1ca1224dc
commit e6182f9818
9 changed files with 112 additions and 16 deletions

View file

@ -105,6 +105,11 @@ namespace SourceGit.Models {
/// </summary>
public double Height { get; set; } = 600;
/// <summary>
/// 在提交列表视图中是否使用折线代替曲线
/// </summary>
public bool UsePolylineInGraph { get; set; } = false;
/// <summary>
/// 将提交信息面板与提交记录左右排布
/// </summary>

View file

@ -23,6 +23,9 @@
<Geometry x:Key="Icon.Tree">M1024 610v-224H640v48H256V224h128V0H0v224h128v752h512v48h384V800H640v48H256V562h384v48z</Geometry>
<Geometry x:Key="Icon.Grid">M30 271l241 0 0-241-241 0 0 241zM392 271l241 0 0-241-241 0 0 241zM753 30l0 241 241 0 0-241-241 0zM30 632l241 0 0-241-241 0 0 241zM392 632l241 0 0-241-241 0 0 241zM753 632l241 0 0-241-241 0 0 241zM30 994l241 0 0-241-241 0 0 241zM392 994l241 0 0-241-241 0 0 241zM753 994l241 0 0-241-241 0 0 241z</Geometry>
<Geometry x:Key="Icon.Curve">M1017 598c0-25-25-50-50-50c-30 0-50 25-50 50c0 35-10 136-55 186c-25 25-55 35-95 35c-70 0-121-191-161-326c-50-196-100-377-231-377c-186 0-271 286-326 472c-10 40-20 75-30 95c-10 25 5 55 30 65c25 10 55-5 65-30c10-25 20-60 35-105c35-136 116-397 226-397c55 0 105 181 141 301c55 196 110 402 256 402c65 0 121-20 161-65c90-95 85-251 85-256z</Geometry>
<Geometry x:Key="Icon.Polyline">M341 475 147 675 65 593l271-284 281 265 254-295 89 77-336 387z</Geometry>
<Geometry x:Key="Icon.Down">M509 546l271-271 91 91-348 349-1-1-13 13-363-361 91-91z</Geometry>
<Geometry x:Key="Icon.DoubleDown">M256 224l0 115L512 544l256-205 0-115-256 205L256 224zM512 685l-256-205L256 595 512 800 768 595l0-115L512 685z</Geometry>
<Geometry x:Key="Icon.Up">M170 831l343-342L855 831l105-105-448-448L64 726 170 831z</Geometry>

View file

@ -254,7 +254,8 @@
<sys:String x:Key="Text.Histories">Histories</sys:String>
<sys:String x:Key="Text.Histories.Search">SEARCH SHA/SUBJECT/AUTHOR. PRESS ENTER TO SEARCH, ESC TO QUIT</sys:String>
<sys:String x:Key="Text.Histories.SearchClear">CLEAR</sys:String>
<sys:String x:Key="Text.Histories.DisplayMode">Toggle Horizontal/Vertical Layout</sys:String>
<sys:String x:Key="Text.Histories.GraphMode">Switch Curve/Polyline Graph Mode</sys:String>
<sys:String x:Key="Text.Histories.DisplayMode">Switch Horizontal/Vertical Layout</sys:String>
<sys:String x:Key="Text.Histories.Selected">SELECTED {0} COMMITS</sys:String>
<sys:String x:Key="Text.Histories.Guide">HISTORIES GUIDE</sys:String>
<sys:String x:Key="Text.Histories.Guide_1">1. Select single commit to view detail</sys:String>

View file

@ -254,6 +254,7 @@
<sys:String x:Key="Text.Histories">历史记录</sys:String>
<sys:String x:Key="Text.Histories.Search">查询提交指纹、信息、作者。回车键开始ESC键取消</sys:String>
<sys:String x:Key="Text.Histories.SearchClear">清空</sys:String>
<sys:String x:Key="Text.Histories.GraphMode">切换曲线/折线显示</sys:String>
<sys:String x:Key="Text.Histories.DisplayMode">切换横向/纵向显示</sys:String>
<sys:String x:Key="Text.Histories.Selected">已选中{0}项提交</sys:String>
<sys:String x:Key="Text.Histories.Guide">操作说明</sys:String>

View file

@ -90,8 +90,8 @@
<Path
x:Name="Icon"
Style="{DynamicResource Style.Icon}"
Height="{TemplateBinding Width}"
Width="{TemplateBinding Height}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="{TemplateBinding Foreground}"
Data="{DynamicResource Icon.Orientation}"
RenderTransformOrigin=".5,.5">
@ -114,4 +114,32 @@
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style.ToggleButton.CommitGraphMode" TargetType="{x:Type ToggleButton}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Background="Transparent">
<Path
x:Name="Icon"
Style="{DynamicResource Style.Icon}"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Fill="{TemplateBinding Foreground}"
Data="{DynamicResource Icon.Curve}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Icon" Property="Data" Value="{DynamicResource Icon.Polyline}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

View file

@ -235,12 +235,30 @@ namespace SourceGit.Views.Controls {
protected override void OnRender(DrawingContext dc) {
if (data == null) return;
dc.PushTransform(new TranslateTransform(0, -startY));
// 计算边界
var top = startY;
var bottom = startY + ActualHeight;
dc.PushTransform(new TranslateTransform(0, -startY));
// 绘制线
if (Models.Preference.Instance.Window.UsePolylineInGraph) {
DrawPolyLine(dc, top, bottom);
} else {
DrawCurveLine(dc, top, bottom);
}
// 绘制曲线
// 绘制点
var dotFill = FindResource("Brush.Contents") as Brush;
foreach (var dot in data.Dots) {
if (dot.Center.Y < top) continue;
if (dot.Center.Y > bottom) break;
dc.DrawEllipse(dotFill, PENS[dot.Color], dot.Center, 3, 3);
}
}
private void DrawCurveLine(DrawingContext dc, double top, double bottom) {
foreach (var line in data.Lines) {
var last = line.Points[0];
var size = line.Points.Count;
@ -265,8 +283,6 @@ namespace SourceGit.Views.Controls {
ctx.QuadraticBezierTo(new Point(cur.X, last.Y), cur, true, false);
} else if (cur.X < last.X) {
if (i < size - 1) {
cur.Y += HALF_HEIGHT;
var midY = (last.Y + cur.Y) / 2;
var midX = (last.X + cur.X) / 2;
ctx.PolyQuadraticBezierTo(new Point[] {
@ -290,7 +306,6 @@ namespace SourceGit.Views.Controls {
dc.DrawGeometry(null, pen, geo);
}
// 绘制合并线
foreach (var link in data.Links) {
if (link.End.Y < top) continue;
if (link.Start.Y > bottom) break;
@ -304,14 +319,43 @@ namespace SourceGit.Views.Controls {
geo.Freeze();
dc.DrawGeometry(null, PENS[link.Color], geo);
}
}
// 绘制点
var dotFill = FindResource("Brush.Contents") as Brush;
foreach (var dot in data.Dots) {
if (dot.Center.Y < top) continue;
if (dot.Center.Y > bottom) break;
private void DrawPolyLine(DrawingContext dc, double top, double bottom) {
foreach (var line in data.Lines) {
var last = line.Points[0];
var size = line.Points.Count;
dc.DrawEllipse(dotFill, PENS[dot.Color], dot.Center, 3, 3);
if (line.Points[size - 1].Y < top) continue;
if (last.Y > bottom) continue;
var geo = new StreamGeometry();
var pen = PENS[line.Color];
using (var ctx = geo.Open()) {
ctx.BeginFigure(last, false, false);
var ended = false;
for (int i = 1; i < size; i++) {
var cur = line.Points[i];
if (cur.Y > bottom) {
cur.Y = bottom;
ended = true;
}
ctx.LineTo(cur, true, false);
if (ended) break;
last = cur;
}
}
geo.Freeze();
dc.DrawGeometry(null, pen, geo);
}
foreach (var link in data.Links) {
if (link.End.Y < top) continue;
if (link.Start.Y > bottom) break;
dc.DrawLine(PENS[link.Color], link.Start, link.End);
}
}
}

View file

@ -180,10 +180,19 @@
<!-- Right Top Button -->
<StackPanel HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,6,0,0" Orientation="Horizontal">
<ToggleButton
Style="{StaticResource Style.ToggleButton.CommitGraphMode}"
Foreground="{StaticResource Brush.FG2}"
Width="16" Height="16"
ToolTip="{StaticResource Text.Histories.GraphMode}"
IsChecked="{Binding Source={x:Static models:Preference.Instance}, Path=Window.UsePolylineInGraph, Mode=TwoWay}"
Checked="ChangeGraphMode" Unchecked="ChangeGraphMode"/>
<ToggleButton
Style="{StaticResource Style.ToggleButton.SplitDirection}"
Foreground="{StaticResource Brush.FG2}"
Width="16" Height="16"
Margin="8,0,0,0"
ToolTip="{StaticResource Text.Histories.DisplayMode}"
IsChecked="{Binding Source={x:Static models:Preference.Instance}, Path=Window.MoveCommitInfoRight, Mode=TwoWay, Converter={StaticResource InverseBool}}"
Checked="ChangeOrientation" Unchecked="ChangeOrientation"/>

View file

@ -143,6 +143,11 @@ namespace SourceGit.Views.Widgets {
layout.InvalidateArrange();
}
public void ChangeGraphMode(object sender, RoutedEventArgs e) {
graph.InvalidateVisual();
e.Handled = true;
}
#endregion
#region SEARCH_BAR

View file

@ -15,11 +15,11 @@
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="48"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="64"/>
<ColumnDefinition Width="80"/>
</Grid.ColumnDefinitions>
<Border