Skip to content

Commit 16f42a4

Browse files
rarsrars
authored
Merge pull request #94 from rars/improve-tracking
Improve tracking of DOM elements
2 parents 529cd3d + 179e0fe commit 16f42a4

9 files changed

+38
-11
lines changed

‎CHANGELOG.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
## [9.1.0](https://github.com/rars/ngx-diff/compare/v9.0.0...v9.1.0) (2024-10-09)
6+
7+
8+
### Features
9+
10+
* **ngx-diff:** improve tracking on line diff DOM elements ([ffe25bd](https://github.com/rars/ngx-diff/commit/ffe25bd73079db06695265ef03b2ee2200de5e5e))
11+
512
## [9.0.0](https://github.com/rars/ngx-diff/compare/v8.0.4...v9.0.0) (2024-06-06)
613

714

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-diff",
3-
"version": "9.0.0",
3+
"version": "9.1.0",
44
"type": "module",
55
"scripts": {
66
"ng": "ng",

‎projects/ngx-diff/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-diff",
3-
"version": "9.0.0",
3+
"version": "9.1.0",
44
"peerDependencies": {
55
"@angular/common": ">=18.0.0",
66
"@angular/core": ">=18.0.0",

‎projects/ngx-diff/src/lib/common/diff-calculation.interface.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { LineDiffType } from './line-diff-type';
77
*/
88
export interface IDiffCalculation {
99
lines: Array<{
10+
id: string;
1011
type: LineDiffType;
1112
lineNumberInOldText: number | null;
1213
lineNumberInNewText: number | null;

‎projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="sbs-diff">
1717
<!-- before -->
1818
<div class="sbs-diff-margin">
19-
@for (lineDiff of beforeLines; track lineDiff; let idx = $index) {
19+
@for (lineDiff of beforeLines; track lineDiff.id; let idx = $index) {
2020
<div
2121
class="line-selector"
2222
[ngClass]="
@@ -31,7 +31,7 @@
3131
</div>
3232
<div class="sbs-diff-content">
3333
<div class="sbs-diff-content-wrapper">
34-
@for (lineDiff of beforeLines; track lineDiff; let idx = $index) {
34+
@for (lineDiff of beforeLines; track lineDiff.id; let idx = $index) {
3535
<div
3636
class="line-content"
3737
[ngClass]="
@@ -46,7 +46,7 @@
4646
</div>
4747
<!-- after -->
4848
<div class="sbs-diff-margin">
49-
@for (lineDiff of afterLines; track lineDiff; let idx = $index) {
49+
@for (lineDiff of afterLines; track lineDiff.id; let idx = $index) {
5050
<div
5151
class="line-selector"
5252
[ngClass]="
@@ -61,7 +61,7 @@
6161
</div>
6262
<div class="sbs-diff-content">
6363
<div class="sbs-diff-content-wrapper">
64-
@for (lineDiff of afterLines; track lineDiff; let idx = $index) {
64+
@for (lineDiff of afterLines; track lineDiff.id; let idx = $index) {
6565
<div
6666
class="line-content"
6767
[ngClass]="

‎projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ interface IDiffCalculation {
1313
}
1414

1515
interface ILine {
16+
id: string;
1617
type: LineDiffType;
1718
lineNumber: number | null;
1819
line: string | null;
@@ -145,6 +146,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
145146
const prefixLines = this.createLineDiffs(prefix, beforeLineNumber, afterLineNumber);
146147

147148
const newPlaceholder: ILine = {
149+
id: `skip-${beforeLineNumber}-${afterLineNumber}-${remainingSkippedLines.length}`,
148150
type: LineDiffType.Placeholder,
149151
lineNumber: null,
150152
line: `... ${remainingSkippedLines.length} hidden lines ...`,
@@ -202,12 +204,14 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
202204
};
203205

204206
beforeLineDiffs.push({
207+
id: `eql-${beforeLineNumber}`,
205208
...toInsert,
206209
lineNumber: beforeLineNumber,
207210
});
208211
beforeLineNumber++;
209212

210213
afterLineDiffs.push({
214+
id: `eql-${afterLineNumber}`,
211215
...toInsert,
212216
lineNumber: afterLineNumber,
213217
});
@@ -319,6 +323,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
319323

320324
// Output a special line indicating that some content is equal and has been skipped
321325
const skippedLine = {
326+
id: `skip-${diffCalculation.beforeLineNumber}-${diffCalculation.afterLineNumber}-${skippedLines.length}`,
322327
type: LineDiffType.Placeholder,
323328
lineNumber: null,
324329
line: `... ${skippedLines.length} hidden lines ...`,
@@ -353,13 +358,15 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
353358
private outputEqualDiffLines(diffLines: string[], diffCalculation: IDiffCalculation): void {
354359
for (const line of diffLines) {
355360
this.beforeLines.push({
361+
id: `eql-${diffCalculation.beforeLineNumber}`,
356362
type: LineDiffType.Equal,
357363
lineNumber: diffCalculation.beforeLineNumber,
358364
line,
359365
cssClass: this.getCssClass(LineDiffType.Equal),
360366
});
361367

362368
this.afterLines.push({
369+
id: `eql-${diffCalculation.afterLineNumber}`,
363370
type: LineDiffType.Equal,
364371
lineNumber: diffCalculation.afterLineNumber,
365372
line,
@@ -374,13 +381,15 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
374381
private outputDeleteDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
375382
for (const line of diffLines) {
376383
this.beforeLines.push({
384+
id: `del-${diffCalculation.beforeLineNumber}`,
377385
type: LineDiffType.Delete,
378386
lineNumber: diffCalculation.beforeLineNumber,
379387
line,
380388
cssClass: this.getCssClass(LineDiffType.Delete),
381389
});
382390

383391
this.afterLines.push({
392+
id: `del-${diffCalculation.beforeLineNumber}`,
384393
type: LineDiffType.Delete,
385394
lineNumber: null,
386395
line: null,
@@ -394,13 +403,15 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
394403
private outputInsertDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
395404
for (const line of diffLines) {
396405
this.beforeLines.push({
406+
id: `ins-${diffCalculation.afterLineNumber}`,
397407
type: LineDiffType.Insert,
398408
lineNumber: null,
399409
line: null,
400410
cssClass: this.getCssClass(LineDiffType.Insert),
401411
});
402412

403413
this.afterLines.push({
414+
id: `ins-${diffCalculation.afterLineNumber}`,
404415
type: LineDiffType.Insert,
405416
lineNumber: diffCalculation.afterLineNumber,
406417
line,

‎projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
@if (!isContentEqual) {
1616
<div class="ufd-diff">
1717
<div class="ufd-diff-margin">
18-
@for (lineDiff of calculatedDiff; track lineDiff; let idx = $index) {
18+
@for (lineDiff of calculatedDiff; track lineDiff.id; let idx = $index) {
1919
<div
2020
class="line-selector"
2121
[ngClass]="
@@ -31,7 +31,7 @@
3131
</div>
3232
<div class="ufd-diff-content">
3333
<div class="ufd-diff-content-wrapper">
34-
@for (lineDiff of calculatedDiff; track lineDiff) {
34+
@for (lineDiff of calculatedDiff; track lineDiff.id) {
3535
<div
3636
class="line-content"
3737
[ngClass]="

‎projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { LineNumberPipe } from '../../pipes/line-number/line-number.pipe';
1010
import { NgClass } from '@angular/common';
1111

1212
type LineDiff = {
13+
id: string;
1314
type: LineDiffType;
1415
lineNumberInOldText: number | null;
1516
lineNumberInNewText: number | null;
@@ -105,6 +106,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
105106
const prefixLines = this.createLineDiffs(prefix, lineInOldText, lineInNewText);
106107

107108
const newPlaceholder: LineDiff = {
109+
id: `skip-${lineInOldText + prefix.length}-${lineInNewText + prefix.length}-${remainingSkippedLines.length}`,
108110
type: LineDiffType.Placeholder,
109111
lineNumberInOldText: null,
110112
lineNumberInNewText: null,
@@ -144,6 +146,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
144146

145147
for (const line of lines) {
146148
linesToInsert.push({
149+
id: `eql-${lineNumberInOldText}-${lineNumberInNewText}`,
147150
type: LineDiffType.Equal,
148151
lineNumberInOldText,
149152
lineNumberInNewText,
@@ -213,8 +216,9 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
213216
}
214217

215218
this.calculatedDiff = diffCalculation.lines.map(
216-
({ type, lineNumberInOldText, lineNumberInNewText, line, args }) => {
219+
({ id, type, lineNumberInOldText, lineNumberInNewText, line, args }) => {
217220
return {
221+
id,
218222
type,
219223
lineNumberInOldText,
220224
lineNumberInNewText,
@@ -272,6 +276,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
272276

273277
// Output a special line indicating that some content is equal and has been skipped
274278
diffCalculation.lines.push({
279+
id: `skip-${diffCalculation.lineInOldText}-${diffCalculation.lineInNewText}-${skippedLines.length}`,
275280
type: LineDiffType.Placeholder,
276281
lineNumberInOldText: null,
277282
lineNumberInNewText: null,
@@ -302,6 +307,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
302307
private outputEqualDiffLines(diffLines: string[], diffCalculation: IDiffCalculation): void {
303308
for (const line of diffLines) {
304309
diffCalculation.lines.push({
310+
id: `eql-${diffCalculation.lineInOldText}-${diffCalculation.lineInNewText}`,
305311
type: LineDiffType.Equal,
306312
lineNumberInOldText: diffCalculation.lineInOldText,
307313
lineNumberInNewText: diffCalculation.lineInNewText,
@@ -315,6 +321,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
315321
private outputDeleteDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
316322
for (const line of diffLines) {
317323
diffCalculation.lines.push({
324+
id: `del-${diffCalculation.lineInOldText}`,
318325
type: LineDiffType.Delete,
319326
lineNumberInOldText: diffCalculation.lineInOldText,
320327
lineNumberInNewText: null,
@@ -327,6 +334,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
327334
private outputInsertDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
328335
for (const line of diffLines) {
329336
diffCalculation.lines.push({
337+
id: `ins-${diffCalculation.lineInNewText}`,
330338
type: LineDiffType.Insert,
331339
lineNumberInOldText: null,
332340
lineNumberInNewText: diffCalculation.lineInNewText,

0 commit comments

Comments
 (0)