From ffe25bd73079db06695265ef03b2ee2200de5e5e Mon Sep 17 00:00:00 2001
From: Richard Russell <2265225+rars@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:54:19 +0100
Subject: [PATCH 1/2] feat(ngx-diff): improve tracking on line diff DOM
 elements

---
 .../src/lib/common/diff-calculation.interface.ts      |  1 +
 .../side-by-side-diff.component.html                  |  8 ++++----
 .../side-by-side-diff/side-by-side-diff.component.ts  | 11 +++++++++++
 .../unified-diff/unified-diff.component.html          |  4 ++--
 .../components/unified-diff/unified-diff.component.ts | 10 +++++++++-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/projects/ngx-diff/src/lib/common/diff-calculation.interface.ts b/projects/ngx-diff/src/lib/common/diff-calculation.interface.ts
index 53a4df0..5f8210e 100644
--- a/projects/ngx-diff/src/lib/common/diff-calculation.interface.ts
+++ b/projects/ngx-diff/src/lib/common/diff-calculation.interface.ts
@@ -7,6 +7,7 @@ import { LineDiffType } from './line-diff-type';
  */
 export interface IDiffCalculation {
   lines: Array<{
+    id: string;
     type: LineDiffType;
     lineNumberInOldText: number | null;
     lineNumberInNewText: number | null;
diff --git a/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html b/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html
index a14a5fe..a800cc1 100644
--- a/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html
+++ b/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.html
@@ -16,7 +16,7 @@
   <div class="sbs-diff">
     <!-- before -->
     <div class="sbs-diff-margin">
-      @for (lineDiff of beforeLines; track lineDiff; let idx = $index) {
+      @for (lineDiff of beforeLines; track lineDiff.id; let idx = $index) {
         <div
           class="line-selector"
           [ngClass]="
@@ -31,7 +31,7 @@
     </div>
     <div class="sbs-diff-content">
       <div class="sbs-diff-content-wrapper">
-        @for (lineDiff of beforeLines; track lineDiff; let idx = $index) {
+        @for (lineDiff of beforeLines; track lineDiff.id; let idx = $index) {
           <div
             class="line-content"
             [ngClass]="
@@ -46,7 +46,7 @@
     </div>
     <!-- after -->
     <div class="sbs-diff-margin">
-      @for (lineDiff of afterLines; track lineDiff; let idx = $index) {
+      @for (lineDiff of afterLines; track lineDiff.id; let idx = $index) {
         <div
           class="line-selector"
           [ngClass]="
@@ -61,7 +61,7 @@
     </div>
     <div class="sbs-diff-content">
       <div class="sbs-diff-content-wrapper">
-        @for (lineDiff of afterLines; track lineDiff; let idx = $index) {
+        @for (lineDiff of afterLines; track lineDiff.id; let idx = $index) {
           <div
             class="line-content"
             [ngClass]="
diff --git a/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.ts b/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.ts
index aa4d507..62ce334 100644
--- a/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.ts
+++ b/projects/ngx-diff/src/lib/components/side-by-side-diff/side-by-side-diff.component.ts
@@ -13,6 +13,7 @@ interface IDiffCalculation {
 }
 
 interface ILine {
+  id: string;
   type: LineDiffType;
   lineNumber: number | null;
   line: string | null;
@@ -145,6 +146,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
       const prefixLines = this.createLineDiffs(prefix, beforeLineNumber, afterLineNumber);
 
       const newPlaceholder: ILine = {
+        id: `skip-${beforeLineNumber}-${afterLineNumber}-${remainingSkippedLines.length}`,
         type: LineDiffType.Placeholder,
         lineNumber: null,
         line: `... ${remainingSkippedLines.length} hidden lines ...`,
@@ -202,12 +204,14 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
       };
 
       beforeLineDiffs.push({
+        id: `eql-${beforeLineNumber}`,
         ...toInsert,
         lineNumber: beforeLineNumber,
       });
       beforeLineNumber++;
 
       afterLineDiffs.push({
+        id: `eql-${afterLineNumber}`,
         ...toInsert,
         lineNumber: afterLineNumber,
       });
@@ -319,6 +323,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
 
         // Output a special line indicating that some content is equal and has been skipped
         const skippedLine = {
+          id: `skip-${diffCalculation.beforeLineNumber}-${diffCalculation.afterLineNumber}-${skippedLines.length}`,
           type: LineDiffType.Placeholder,
           lineNumber: null,
           line: `... ${skippedLines.length} hidden lines ...`,
@@ -353,6 +358,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
   private outputEqualDiffLines(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       this.beforeLines.push({
+        id: `eql-${diffCalculation.beforeLineNumber}`,
         type: LineDiffType.Equal,
         lineNumber: diffCalculation.beforeLineNumber,
         line,
@@ -360,6 +366,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
       });
 
       this.afterLines.push({
+        id: `eql-${diffCalculation.afterLineNumber}`,
         type: LineDiffType.Equal,
         lineNumber: diffCalculation.afterLineNumber,
         line,
@@ -374,6 +381,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
   private outputDeleteDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       this.beforeLines.push({
+        id: `del-${diffCalculation.beforeLineNumber}`,
         type: LineDiffType.Delete,
         lineNumber: diffCalculation.beforeLineNumber,
         line,
@@ -381,6 +389,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
       });
 
       this.afterLines.push({
+        id: `del-${diffCalculation.beforeLineNumber}`,
         type: LineDiffType.Delete,
         lineNumber: null,
         line: null,
@@ -394,6 +403,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
   private outputInsertDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       this.beforeLines.push({
+        id: `ins-${diffCalculation.afterLineNumber}`,
         type: LineDiffType.Insert,
         lineNumber: null,
         line: null,
@@ -401,6 +411,7 @@ export class SideBySideDiffComponent implements OnInit, OnChanges {
       });
 
       this.afterLines.push({
+        id: `ins-${diffCalculation.afterLineNumber}`,
         type: LineDiffType.Insert,
         lineNumber: diffCalculation.afterLineNumber,
         line,
diff --git a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.html b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.html
index b8094b5..e341d16 100644
--- a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.html
+++ b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.html
@@ -15,7 +15,7 @@
 @if (!isContentEqual) {
   <div class="ufd-diff">
     <div class="ufd-diff-margin">
-      @for (lineDiff of calculatedDiff; track lineDiff; let idx = $index) {
+      @for (lineDiff of calculatedDiff; track lineDiff.id; let idx = $index) {
         <div
           class="line-selector"
           [ngClass]="
@@ -31,7 +31,7 @@
     </div>
     <div class="ufd-diff-content">
       <div class="ufd-diff-content-wrapper">
-        @for (lineDiff of calculatedDiff; track lineDiff) {
+        @for (lineDiff of calculatedDiff; track lineDiff.id) {
           <div
             class="line-content"
             [ngClass]="
diff --git a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
index e705d80..ba01a38 100644
--- a/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
+++ b/projects/ngx-diff/src/lib/components/unified-diff/unified-diff.component.ts
@@ -10,6 +10,7 @@ import { LineNumberPipe } from '../../pipes/line-number/line-number.pipe';
 import { NgClass } from '@angular/common';
 
 type LineDiff = {
+  id: string;
   type: LineDiffType;
   lineNumberInOldText: number | null;
   lineNumberInNewText: number | null;
@@ -105,6 +106,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
       const prefixLines = this.createLineDiffs(prefix, lineInOldText, lineInNewText);
 
       const newPlaceholder: LineDiff = {
+        id: `skip-${lineInOldText + prefix.length}-${lineInNewText + prefix.length}-${remainingSkippedLines.length}`,
         type: LineDiffType.Placeholder,
         lineNumberInOldText: null,
         lineNumberInNewText: null,
@@ -144,6 +146,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
 
     for (const line of lines) {
       linesToInsert.push({
+        id: `eql-${lineNumberInOldText}-${lineNumberInNewText}`,
         type: LineDiffType.Equal,
         lineNumberInOldText,
         lineNumberInNewText,
@@ -213,8 +216,9 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
     }
 
     this.calculatedDiff = diffCalculation.lines.map(
-      ({ type, lineNumberInOldText, lineNumberInNewText, line, args }) => {
+      ({ id, type, lineNumberInOldText, lineNumberInNewText, line, args }) => {
         return {
+          id,
           type,
           lineNumberInOldText,
           lineNumberInNewText,
@@ -272,6 +276,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
 
         // Output a special line indicating that some content is equal and has been skipped
         diffCalculation.lines.push({
+          id: `skip-${diffCalculation.lineInOldText}-${diffCalculation.lineInNewText}-${skippedLines.length}`,
           type: LineDiffType.Placeholder,
           lineNumberInOldText: null,
           lineNumberInNewText: null,
@@ -302,6 +307,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
   private outputEqualDiffLines(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       diffCalculation.lines.push({
+        id: `eql-${diffCalculation.lineInOldText}-${diffCalculation.lineInNewText}`,
         type: LineDiffType.Equal,
         lineNumberInOldText: diffCalculation.lineInOldText,
         lineNumberInNewText: diffCalculation.lineInNewText,
@@ -315,6 +321,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
   private outputDeleteDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       diffCalculation.lines.push({
+        id: `del-${diffCalculation.lineInOldText}`,
         type: LineDiffType.Delete,
         lineNumberInOldText: diffCalculation.lineInOldText,
         lineNumberInNewText: null,
@@ -327,6 +334,7 @@ export class UnifiedDiffComponent implements OnInit, OnChanges {
   private outputInsertDiff(diffLines: string[], diffCalculation: IDiffCalculation): void {
     for (const line of diffLines) {
       diffCalculation.lines.push({
+        id: `ins-${diffCalculation.lineInNewText}`,
         type: LineDiffType.Insert,
         lineNumberInOldText: null,
         lineNumberInNewText: diffCalculation.lineInNewText,

From 179e0fed54ef917a286434ae68d04890790b1a6f Mon Sep 17 00:00:00 2001
From: Richard Russell <2265225+rars@users.noreply.github.com>
Date: Wed, 9 Oct 2024 11:56:07 +0100
Subject: [PATCH 2/2] docs: update changelog for 9.1.0 release

---
 CHANGELOG.md                   | 7 +++++++
 package-lock.json              | 4 ++--
 package.json                   | 2 +-
 projects/ngx-diff/package.json | 2 +-
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b27c842..b867134 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 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.
 
+## [9.1.0](https://github.com/rars/ngx-diff/compare/v9.0.0...v9.1.0) (2024-10-09)
+
+
+### Features
+
+* **ngx-diff:** improve tracking on line diff DOM elements ([ffe25bd](https://github.com/rars/ngx-diff/commit/ffe25bd73079db06695265ef03b2ee2200de5e5e))
+
 ## [9.0.0](https://github.com/rars/ngx-diff/compare/v8.0.4...v9.0.0) (2024-06-06)
 
 
diff --git a/package-lock.json b/package-lock.json
index 8d039c6..79e09cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ngx-diff",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ngx-diff",
-      "version": "9.0.0",
+      "version": "9.1.0",
       "dependencies": {
         "@angular/animations": "^18.0.2",
         "@angular/common": "^18.0.2",
diff --git a/package.json b/package.json
index 734a845..6e46fec 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-diff",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "type": "module",
   "scripts": {
     "ng": "ng",
diff --git a/projects/ngx-diff/package.json b/projects/ngx-diff/package.json
index a8d8aac..82b0fea 100644
--- a/projects/ngx-diff/package.json
+++ b/projects/ngx-diff/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-diff",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",