Skip to content

Commit

Permalink
Merge pull request #94 from rars/improve-tracking
Browse files Browse the repository at this point in the history
Improve tracking of DOM elements
  • Loading branch information
rars authored Oct 9, 2024
2 parents 529cd3d + 179e0fe commit 16f42a4
Show file tree
Hide file tree
Showing 9 changed files with 38 additions and 11 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)


Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ngx-diff",
"version": "9.0.0",
"version": "9.1.0",
"type": "module",
"scripts": {
"ng": "ng",
Expand Down
2 changes: 1 addition & 1 deletion projects/ngx-diff/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]="
Expand All @@ -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]="
Expand All @@ -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]="
Expand All @@ -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]="
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ interface IDiffCalculation {
}

interface ILine {
id: string;
type: LineDiffType;
lineNumber: number | null;
line: string | null;
Expand Down Expand Up @@ -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 ...`,
Expand Down Expand Up @@ -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,
});
Expand Down Expand Up @@ -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 ...`,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]="
Expand All @@ -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]="
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand Down

0 comments on commit 16f42a4

Please sign in to comment.