Skip to content

Commit 229c682

Browse files
author
Mark
committed
improved the diff code #16 
1 parent 9efad0d commit 229c682

File tree

3 files changed

+79
-144
lines changed

3 files changed

+79
-144
lines changed

‎MyDevTools/Components/Pages/Components/DiffOutput.razor

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@using DiffPlex.DiffBuilder.Model
2+
@code {
3+
[Parameter] public DiffPaneModel PaneModel { get; set; }
4+
}
5+
6+
<pre class="line-numbers">
7+
<code>
8+
@{
9+
int lineCount = 0;
10+
foreach (var line in PaneModel.Lines)
11+
{
12+
<span class="@($"{GetCssForRow(line.Type)} block-span")">
13+
@if (line.Type == ChangeType.Imaginary)
14+
{
15+
<span class="line-number-man">&nbsp;&nbsp;</span>
16+
}
17+
else
18+
{
19+
lineCount++;
20+
<span class="line-number-man">@lineCount&nbsp;&nbsp;</span>
21+
@if (line.SubPieces == null || !line.SubPieces.Any())
22+
{
23+
<span class="@GetCssForRowAndText(line.Type)">@line.Text</span>
24+
}
25+
else
26+
{
27+
foreach (var subPiece in line.SubPieces)
28+
{
29+
<span class="@GetCssForRowAndText(subPiece.Type)">@subPiece.Text</span>
30+
}
31+
}
32+
}
33+
</span>
34+
}
35+
}
36+
</code>
37+
</pre>
38+
39+
40+
@code {
41+
private string GetCssForRow(ChangeType changeType)
42+
{
43+
return changeType switch
44+
{
45+
ChangeType.Imaginary => "row-imaginary",
46+
ChangeType.Deleted => "row-missing",
47+
ChangeType.Modified => "row-changed",
48+
ChangeType.Inserted => "row-new",
49+
_ => ""
50+
};
51+
}
52+
53+
private string GetCssForRowAndText(ChangeType changeType)
54+
=> changeType switch
55+
{
56+
ChangeType.Inserted => "row-changed-added-text",
57+
ChangeType.Deleted => "row-changed-removed-text",
58+
ChangeType.Modified => "row-changed-changed-text",
59+
_ => ""
60+
};
61+
}

‎MyDevTools/Components/Pages/DiffChecker.razor.css ‎MyDevTools/Components/Pages/Components/DiffOutput.razor.css

+12-34
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
/* General styles for line numbers and code */
1+
/* General Styles */
22
.line-numbers {
33
counter-reset: line-number;
44
font-family: 'Courier New', monospace;
55
background-color: #f4f4f4;
66
border: 1px solid #ccc;
77
padding: 10px;
8-
line-height: 1; /* Reduced line-height for closer lines */
8+
line-height: 1;
99
margin: 0;
1010
}
1111

@@ -15,76 +15,54 @@
1515
padding: 0;
1616
}
1717

18-
/* Styling line numbers */
1918
.line-numbers code > span:before {
20-
/* counter-increment: line-number;
21-
content: counter(line-number);*/
2219
display: inline-block;
2320
width: 30px;
2421
margin-right: 10px;
2522
text-align: right;
26-
color: lightgrey; /* Lightish grey for row numbers */
23+
color: lightgrey;
2724
font-weight: bold;
2825
}
2926

3027
.line-number-man {
3128
color: lightgrey;
3229
}
3330

34-
/* Text color styles for different types of changes */
35-
.text-unchanged {
36-
color: black;
37-
}
38-
39-
.text-success {
40-
color: black;
41-
}
42-
43-
.text-danger {
44-
color: white;
45-
}
46-
47-
.text-warning {
48-
color: black;
49-
}
50-
51-
52-
/* Background color styles for different types of rows */
31+
/* Background and Text Colors */
5332
.row-changed {
5433
background-color: lightgoldenrodyellow;
5534
color: black;
5635
}
57-
/* Yellow background and black text for rows with any changes */
36+
5837
.row-missing {
5938
background-color: lightcoral;
6039
color: white;
6140
}
62-
/* Red background and black text for missing rows */
41+
6342
.row-new {
6443
background-color: lightgreen;
6544
color: black;
6645
}
67-
/* Green background and black text for new rows */
6846

6947
.row-imaginary {
7048
background-color: lightgray;
7149
color: black;
7250
}
7351

74-
/* Special case for text-warning (modified characters) over row-changed (yellow background) */
75-
.row-changed .text-warning {
76-
color: darkorange;
77-
}
78-
52+
/* Special Text Styles */
53+
.row-changed .text-warning,
7954
.row-changed-changed-text {
8055
color: darkorange;
8156
}
8257

8358
.row-changed-added-text {
84-
color: darkgreen
59+
color: darkgreen;
8560
}
8661

8762
.row-changed-removed-text {
8863
color: darkred;
8964
}
9065

66+
.block-span {
67+
display: block;
68+
}

‎MyDevTools/Components/Pages/DiffChecker.razor

+6-110
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
@page "/DiffChecker"
2-
@using DiffPlex;
32
@using DiffPlex.DiffBuilder
43
@using DiffPlex.DiffBuilder.Model
5-
@using DiffPlex.Model;
4+
@using MyDevTools.Components.Pages.Components
65
@inject Services.IClipboardService ClipboardService
76

87
<h3 class="text-center">Diff Checker</h3>
@@ -25,101 +24,25 @@
2524
{
2625
<div class="row mt-4">
2726
<div class="col-md-6">
28-
<pre class="line-numbers">
29-
<code>
30-
31-
@{ lineCount = 0;}
32-
@foreach (var line in diffModel.OldText.Lines)
33-
{
34-
35-
36-
<span class="@GetCssClass(line.Type, true)">
37-
@if (line.Type == ChangeType.Imaginary)
38-
{
39-
<span class="line-number-man">&nbsp;&nbsp;</span>
40-
}
41-
else
42-
{
43-
lineCount++;
44-
<span class="line-number-man">@lineCount&nbsp;&nbsp;</span>
45-
46-
@* @diffModel.OldText.Lines[i].Text *@
47-
@if (line.SubPieces == null || !line.SubPieces.Any())
48-
{
49-
<span class="@GetCssClassForText(line)">
50-
@line.Text
51-
</span>
52-
}
53-
else
54-
{
55-
@foreach (var subPiece in line.SubPieces)
56-
{
57-
<span class="@GetCssClassForText(subPiece)">
58-
@subPiece.Text
59-
</span>
60-
}
61-
}
62-
}
63-
</span>
64-
}
65-
</code>
66-
</pre>
27+
<DiffOutput PaneModel="diffModel.OldText" />
6728
</div>
68-
6929
<div class="col-md-6">
70-
<pre class="line-numbers">
71-
<code>
72-
@{ lineCount = 0;}
73-
@foreach (var line in diffModel.NewText.Lines)
74-
{
75-
76-
77-
<span class="@GetCssClass(line.Type, false)">
78-
@if (line.Type == ChangeType.Imaginary)
79-
{
80-
<span class="line-number-man">&nbsp;&nbsp;</span>
81-
}
82-
else
83-
{
84-
lineCount++;
85-
<span class="line-number-man">@lineCount&nbsp;&nbsp;</span>
86-
87-
@* @diffModel.OldText.Lines[i].Text *@
88-
@if (line.SubPieces == null || !line.SubPieces.Any())
89-
{
90-
<span class="@GetCssClassForText(line)">
91-
@line.Text
92-
</span>
93-
}
94-
else
95-
{
96-
@foreach (var subPiece in line.SubPieces)
97-
{
98-
<span class="@GetCssClassForText(subPiece)">
99-
@subPiece.Text
100-
</span>
101-
}
102-
}
103-
}
104-
</span>
105-
}
106-
</code></pre>
30+
<DiffOutput PaneModel="diffModel.NewText" />
10731
</div>
108-
</div>
32+
</div>
10933
}
11034
</div>
11135

11236

11337
@code {
114-
private int lineCount = 0;
11538
private string text1 = "";
116-
// text1 = $"Example unchanged.{Environment.NewLine}Example changed.{Environment.NewLine}Example gone.{Environment.NewLine}";
11739
private string text2 = "";
118-
//text2 = $"Example unchanged.{Environment.NewLine}Example CHANGED.{Environment.NewLine}{Environment.NewLine}Example new.";
11940
private SideBySideDiffModel diffModel;
12041

12142
protected override void OnInitialized()
12243
{
44+
text1 = $"Example unchanged.{Environment.NewLine}Example changed.{Environment.NewLine}Example gone.{Environment.NewLine}";
45+
text2 = $"Example unchanged.{Environment.NewLine}Example CHANGED.{Environment.NewLine}{Environment.NewLine}Example new.";
12346
CompareTexts();
12447
}
12548

@@ -128,31 +51,4 @@
12851
var diffBuilder = new SideBySideDiffBuilder(DiffPlex.Differ.Instance);
12952
diffModel = diffBuilder.BuildDiffModel(text1, text2);
13053
}
131-
132-
private string GetCssClass(ChangeType changeType, bool isOldText)
133-
{
134-
if (changeType == ChangeType.Imaginary)
135-
{
136-
return "row-imaginary";
137-
}
138-
139-
string backgroundClass = isOldText ?
140-
(changeType == ChangeType.Deleted ? "row-missing" : (changeType == ChangeType.Modified ? "row-changed" : "")) :
141-
(changeType == ChangeType.Inserted ? "row-new" : (changeType == ChangeType.Modified ? "row-changed" : ""));
142-
143-
return backgroundClass;
144-
}
145-
146-
private string GetCssClassForText(DiffPiece piece)
147-
{
148-
string textClass = piece.Type switch
149-
{
150-
ChangeType.Inserted => "row-changed-added-text",
151-
ChangeType.Deleted => "row-changed-removed-text",
152-
ChangeType.Modified => "row-changed-changed-text",
153-
_ => ""
154-
};
155-
156-
return $"{textClass}";
157-
}
15854
}

0 commit comments

Comments
 (0)