Improve tracking of DOM elements

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)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-diff",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "type": "module",
   "scripts": {
     "ng": "ng",

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",

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;

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]="

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,13 +358,15 @@ 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,
         cssClass: this.getCssClass(LineDiffType.Equal),
       });
 
       this.afterLines.push({
+        id: `eql-${diffCalculation.afterLineNumber}`,
         type: LineDiffType.Equal,
         lineNumber: diffCalculation.afterLineNumber,
         line,
@@ -374,13 +381,15 @@ 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,
         cssClass: this.getCssClass(LineDiffType.Delete),
       });
 
       this.afterLines.push({
+        id: `del-${diffCalculation.beforeLineNumber}`,
         type: LineDiffType.Delete,
         lineNumber: null,
         line: null,
@@ -394,13 +403,15 @@ 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,
         cssClass: this.getCssClass(LineDiffType.Insert),
       });
 
       this.afterLines.push({
+        id: `ins-${diffCalculation.afterLineNumber}`,
         type: LineDiffType.Insert,
         lineNumber: diffCalculation.afterLineNumber,
         line,

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]="

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,