-
-
-
-
-
-
- |
- {{ row.leftContent?.lineNumber !== -1 ? row.leftContent?.lineNumber : ' ' }}
- |
-
- {{ row.leftContent?.prefix || ' ' }}
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
-
-
-
- |
- {{ row.rightContent?.lineNumber !== -1 ? row.rightContent?.lineNumber : ' ' }}
- |
-
- {{ row.rightContent?.prefix || ' ' }}
- |
-
-
- |
-
-
- |
-
-
-
-
-
-
-
-
-
- | {{ row.leftContent?.lineNumber }} |
- {{ row.rightContent?.lineNumber }} |
-
- {{ row.leftContent?.prefix || row.rightContent?.prefix || ' ' }}
- |
-
-
- |
-
-
- |
-
-
- |
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts b/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts
index 46bc88b..1816bc7 100644
--- a/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts
+++ b/projects/ngx-text-diff/src/lib/ngx-text-diff.component.ts
@@ -1,20 +1,31 @@
import {
+ AfterViewInit,
ChangeDetectorRef,
Component,
+ EventEmitter,
Input,
OnDestroy,
OnInit,
Output,
- EventEmitter,
- ViewChildren,
QueryList,
- AfterViewInit
+ ViewChildren,
} from '@angular/core';
-import { DiffContent, DiffPart, DiffTableFormat, DiffTableFormatOption, DiffTableRowResult, DiffResults } from './ngx-text-diff.model';
+import {
+ DiffContent,
+ DiffLineByLineResult,
+ DiffLineResult,
+ DiffPart,
+ DiffResults,
+ DiffTableFormat,
+ DiffTableFormatOption,
+ DiffTableLineByLine,
+ DiffTableRowResult,
+ DiffTableSideBySide,
+} from './ngx-text-diff.model';
import { NgxTextDiffService } from './ngx-text-diff.service';
-import { Observable, Subscription } from 'rxjs';
-import { ContainerDirective } from './ngx-text-diff-container.directive';
-import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { ContainerDirective } from './directives/ngx-text-diff-container.directive';
+import { CdkScrollable, ScrollDispatcher } from '@angular/cdk/scrolling';
@Component({
selector: 'td-ngx-text-diff',
@@ -22,7 +33,6 @@ import { ScrollDispatcher, CdkScrollable } from '@angular/cdk/scrolling';
styleUrls: ['./ngx-text-diff.component.css'],
})
export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
- private _hideMatchingLines = false;
@ViewChildren(ContainerDirective) containers: QueryList
;
@Input() format: DiffTableFormat = 'SideBySide';
@Input() left = '';
@@ -31,14 +41,7 @@ export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
@Input() loading = false;
@Input() showToolbar = true;
@Input() showBtnToolbar = true;
- @Input()
- get hideMatchingLines() {
- return this._hideMatchingLines;
- }
-
- set hideMatchingLines(hide: boolean) {
- this.hideMatchingLinesChanged(hide);
- }
+ @Input() hideMatchingLines = false;
@Input() outerContainerClass: string;
@Input() outerContainerStyle: any;
@Input() toolbarClass: string;
@@ -49,11 +52,17 @@ export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
@Output() compareResults = new EventEmitter();
subscriptions: Subscription[] = [];
tableRows: DiffTableRowResult[] = [];
- filteredTableRows: DiffTableRowResult[] = [];
- tableRowsLineByLine: DiffTableRowResult[] = [];
- filteredTableRowsLineByLine: DiffTableRowResult[] = [];
diffsCount = 0;
+ private _leftContent: BehaviorSubject = new BehaviorSubject([]);
+ leftContent$: Observable = this._leftContent.asObservable();
+
+ private _rightContent: BehaviorSubject = new BehaviorSubject([]);
+ rightContent$: Observable = this._rightContent.asObservable();
+
+ private _lineByLine: BehaviorSubject = new BehaviorSubject([]);
+ lineByLine$: Observable = this._lineByLine.asObservable();
+
formatOptions: DiffTableFormatOption[] = [
{
id: 'side-by-side',
@@ -74,25 +83,17 @@ export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(private scrollService: ScrollDispatcher, private diff: NgxTextDiffService, private cd: ChangeDetectorRef) {}
ngOnInit() {
- this.loading = true;
if (this.diffContent) {
this.subscriptions.push(
this.diffContent.subscribe(content => {
- this.loading = true;
this.left = content.leftContent;
this.right = content.rightContent;
- this.renderDiffs()
- .then(() => {
- this.cd.detectChanges();
- this.loading = false;
- })
- .catch(() => (this.loading = false));
+ this.initTable();
})
);
}
- this.renderDiffs()
- .then(() => (this.loading = false))
- .catch(e => (this.loading = false));
+
+ this.initTable();
}
ngAfterViewInit() {
@@ -105,81 +106,53 @@ export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
- hideMatchingLinesChanged(value: boolean) {
- this._hideMatchingLines = value;
- if (this.hideMatchingLines) {
- this.filteredTableRows = this.tableRows.filter(
- row => (row.leftContent && row.leftContent.prefix === '-') || (row.rightContent && row.rightContent.prefix === '+')
- );
- this.filteredTableRowsLineByLine = this.tableRowsLineByLine.filter(
- row => (row.leftContent && row.leftContent.prefix === '-') || (row.rightContent && row.rightContent.prefix === '+')
- );
- } else {
- this.filteredTableRows = this.tableRows;
- this.filteredTableRowsLineByLine = this.tableRowsLineByLine;
+ hideMatchingLinesChanged(hideMatchingLines: boolean) {
+ if (this.hideMatchingLines !== hideMatchingLines) {
+ this.hideMatchingLines = hideMatchingLines;
+ this.populateTable();
}
}
setDiffTableFormat(format: DiffTableFormat) {
- this.format = format;
+ if (format !== this.format) {
+ this.format = format;
+ this.populateTable();
+ }
}
- async renderDiffs() {
- try {
- this.diffsCount = 0;
- this.tableRows = await this.diff.getDiffsByLines(this.left, this.right);
- this.tableRowsLineByLine = this.tableRows.reduce((tableLineByLine: DiffTableRowResult[], row: DiffTableRowResult) => {
- if (!tableLineByLine) {
- tableLineByLine = [];
- }
- if (row.hasDiffs) {
- if (row.leftContent) {
- tableLineByLine.push({
- leftContent: row.leftContent,
- rightContent: null,
- belongTo: row.belongTo,
- hasDiffs: true,
- numDiffs: row.numDiffs,
- });
- }
- if (row.rightContent) {
- tableLineByLine.push({
- leftContent: null,
- rightContent: row.rightContent,
- belongTo: row.belongTo,
- hasDiffs: true,
- numDiffs: row.numDiffs,
- });
- }
- } else {
- tableLineByLine.push(row);
- }
+ initTable() {
+ this.diff
+ .getDiffsByLines(this.left, this.right)
+ .then(results => {
+ this.tableRows = results;
+ this.populateTable();
+ })
+ .catch(err => {
+ this.tableRows = [];
+ this.populateTable();
+ });
+ }
- return tableLineByLine;
- }, []);
- this.diffsCount = this.tableRows.filter(row => row.hasDiffs).length;
- this.filteredTableRows = this.tableRows;
- this.filteredTableRowsLineByLine = this.tableRowsLineByLine;
- this.emitCompareResultsEvent();
- } catch (e) {
- throw e;
+ populateTable() {
+ switch (this.format) {
+ case 'LineByLine':
+ this.populateLineByLineTable();
+ break;
+ case 'SideBySide':
+ this.populateSideBySideTable();
+ break;
}
}
- emitCompareResultsEvent() {
- const diffResults: DiffResults = {
- hasDiff: this.diffsCount > 0,
- diffsCount: this.diffsCount,
- rowsWithDiff: this.tableRows
- .filter(row => row.hasDiffs)
- .map(row => ({
- leftLineNumber: row.leftContent ? row.leftContent.lineNumber : null,
- rightLineNumber: row.rightContent ? row.rightContent.lineNumber : null,
- numDiffs: row.numDiffs,
- })),
- };
-
- this.compareResults.next(diffResults);
+ private populateSideBySideTable() {
+ const results: DiffTableSideBySide = this.diff.getSideBySide(this.tableRows, this.hideMatchingLines);
+ this._leftContent.next(results.left);
+ this._rightContent.next(results.right);
+ }
+
+ private populateLineByLineTable() {
+ const results: DiffTableLineByLine = this.diff.getLineByLine(this.tableRows, this.hideMatchingLines);
+ this._lineByLine.next(results.rows);
}
trackTableRows(index, row: DiffTableRowResult) {
@@ -191,17 +164,19 @@ export class NgxTextDiffComponent implements OnInit, AfterViewInit, OnDestroy {
}
private initScrollListener() {
- this.subscriptions.push(this.scrollService.scrolled().subscribe((scrollableEv: CdkScrollable) => {
- if (scrollableEv && this.synchronizeScrolling) {
- const scrollableId = scrollableEv.getElementRef().nativeElement.id;
- const nonScrolledContainer: ContainerDirective = this.containers.find(container => container.id !== scrollableId);
- if (nonScrolledContainer) {
- nonScrolledContainer.element.scrollTo({
- top: scrollableEv.measureScrollOffset('top'),
- left: scrollableEv.measureScrollOffset('left'),
- });
+ this.subscriptions.push(
+ this.scrollService.scrolled().subscribe((scrollableEv: CdkScrollable) => {
+ if (scrollableEv && this.synchronizeScrolling) {
+ const scrollableId = scrollableEv.getElementRef().nativeElement.id;
+ const nonScrolledContainer: ContainerDirective = this.containers.find(container => container.id !== scrollableId);
+ if (nonScrolledContainer) {
+ nonScrolledContainer.element.scrollTo({
+ top: scrollableEv.measureScrollOffset('top'),
+ left: scrollableEv.measureScrollOffset('left'),
+ });
+ }
}
- }
- }));
+ })
+ );
}
}
diff --git a/projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts b/projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts
index 7f0c9f3..b824efb 100644
--- a/projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts
+++ b/projects/ngx-text-diff/src/lib/ngx-text-diff.model.ts
@@ -27,6 +27,20 @@ export interface DiffLineResult {
lineDiffs: DiffPart[];
}
+export interface DiffTableSideBySide {
+ left: DiffLineResult[];
+ right: DiffLineResult[];
+}
+
+export interface DiffTableLineByLine {
+ rows: DiffLineByLineResult[];
+}
+
+export interface DiffLineByLineResult extends DiffLineResult {
+ lineNumber: number;
+ lineNumberRight: number;
+}
+
export interface DiffTableRowResult {
leftContent: DiffLineResult;
rightContent: DiffLineResult;
diff --git a/projects/ngx-text-diff/src/lib/ngx-text-diff.module.ts b/projects/ngx-text-diff/src/lib/ngx-text-diff.module.ts
index 8522567..648aa83 100644
--- a/projects/ngx-text-diff/src/lib/ngx-text-diff.module.ts
+++ b/projects/ngx-text-diff/src/lib/ngx-text-diff.module.ts
@@ -2,14 +2,15 @@ import { NgModule } from '@angular/core';
import { NgxTextDiffComponent } from './ngx-text-diff.component';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
-import { LoaderSpinnerComponent } from './loader-spinner/loader-spinner.component';
-import { FormatLinePipe } from './format-line.pipe';
-import { ContainerDirective } from './ngx-text-diff-container.directive';
import { ScrollingModule } from '@angular/cdk/scrolling';
+import { CdkTableModule } from '@angular/cdk/table';
+import { DirectivesModule } from './directives/directives.module';
+import { PipesModule } from './pipes/pipes.module';
+import { ComponentsModule } from './components/components.module';
@NgModule({
- imports: [CommonModule, FormsModule, ScrollingModule],
- declarations: [NgxTextDiffComponent, LoaderSpinnerComponent, FormatLinePipe, ContainerDirective],
+ imports: [CommonModule, FormsModule, ScrollingModule, CdkTableModule, DirectivesModule, PipesModule, ComponentsModule],
+ declarations: [NgxTextDiffComponent],
exports: [NgxTextDiffComponent],
})
export class NgxTextDiffModule {}
diff --git a/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts b/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts
index c8a34c4..73431a6 100644
--- a/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts
+++ b/projects/ngx-text-diff/src/lib/ngx-text-diff.service.ts
@@ -1,10 +1,10 @@
import { Injectable } from '@angular/core';
import { Diff, DIFF_DELETE, DIFF_EQUAL, DIFF_INSERT, diff_match_patch } from 'diff-match-patch';
-import { DiffLineResult, DiffPart, DiffTableRowResult } from './ngx-text-diff.model';
-import { isEmpty, isNil } from './ngx-text-diff.utils';
+import { DiffLineResult, DiffPart, DiffTableLineByLine, DiffTableRowResult, DiffTableSideBySide } from './ngx-text-diff.model';
+import { isEmpty } from './ngx-text-diff.utils';
@Injectable({
- providedIn: 'root'
+ providedIn: 'root',
})
export class NgxTextDiffService {
diffParser: diff_match_patch;
@@ -17,21 +17,19 @@ export class NgxTextDiffService {
this.diffParser = new diff_match_patch();
}
- getDiffsByLines(left: string, right: string): Promise {
- return new Promise((resolve, reject) => {
- const a = this.diffParser.diff_linesToChars_(left, right);
- const lineText1 = a.chars1;
- const lineText2 = a.chars2;
- const linesArray = a.lineArray;
- const diffs: Diff[] = this.diffParser.diff_main(lineText1, lineText2, true);
- this.diffParser.diff_charsToLines_(diffs, linesArray);
- const rows: DiffTableRowResult[] = this.formatOutput(diffs);
- if (!rows) {
- reject('Error');
- }
+ async getDiffsByLines(left: string, right: string): Promise {
+ const a = this.diffParser.diff_linesToChars_(left, right);
+ const lineText1 = a.chars1;
+ const lineText2 = a.chars2;
+ const linesArray = a.lineArray;
+ const diffs: Diff[] = this.diffParser.diff_main(lineText1, lineText2, true);
+ this.diffParser.diff_charsToLines_(diffs, linesArray);
+ const rows: DiffTableRowResult[] = this.formatOutput(diffs);
+ if (!rows) {
+ throw new Error('Error');
+ }
- resolve(rows);
- });
+ return rows;
}
private formatOutput(diffs: Diff[]): DiffTableRowResult[] {
@@ -63,13 +61,13 @@ export class NgxTextDiffService {
lineNumber: lineLeft,
lineContent: line,
lineDiffs: [],
- prefix: ''
+ prefix: '',
};
rightContent = {
lineNumber: lineRight,
lineContent: line,
lineDiffs: [],
- prefix: ''
+ prefix: '',
};
rowTemp = {
leftContent,
@@ -100,7 +98,7 @@ export class NgxTextDiffService {
lineNumber: lineLeft,
lineContent: line,
lineDiffs: [{ content: line, isDiff: true }],
- prefix: '-'
+ prefix: '-',
};
if (rightDiffRow) {
rightDiffRow.leftContent = leftContent;
@@ -143,7 +141,7 @@ export class NgxTextDiffService {
lineNumber: lineRight,
lineContent: line,
lineDiffs: [{ content: line, isDiff: true }],
- prefix: '+'
+ prefix: '+',
};
if (leftDiffRow) {
leftDiffRow.rightContent = rightContent;
@@ -179,7 +177,7 @@ export class NgxTextDiffService {
if (result.leftContent) {
diffCount += result.leftContent.lineDiffs.filter(diff => diff.isDiff).length;
}
- if (result.leftContent) {
+ if (result.rightContent) {
diffCount += result.rightContent.lineDiffs.filter(diff => diff.isDiff).length;
}
return diffCount;
@@ -218,4 +216,59 @@ export class NgxTextDiffService {
return diffParts;
}
+
+ getSideBySide(rows: DiffTableRowResult[], onlyDiffs = false): DiffTableSideBySide {
+ return rows
+ .filter(row => !onlyDiffs || row.hasDiffs)
+ .reduce(
+ (temp: DiffTableSideBySide, row: DiffTableRowResult) => {
+ temp.left.push(row.leftContent);
+ temp.right.push(row.rightContent);
+
+ return temp;
+ },
+ { left: [], right: [] }
+ );
+ }
+
+ getLineByLine(rows: DiffTableRowResult[], onlyDiffs = false): DiffTableLineByLine {
+ return rows
+ .filter(row => !onlyDiffs || row.hasDiffs)
+ .reduce(
+ (temp: DiffTableLineByLine, row: DiffTableRowResult) => {
+ const { leftContent, rightContent, hasDiffs } = row;
+ if (!hasDiffs) {
+ temp.rows.push({
+ lineNumber: leftContent?.lineNumber,
+ lineNumberRight: rightContent?.lineNumber,
+ lineContent: leftContent?.lineContent,
+ prefix: leftContent?.prefix,
+ lineDiffs: [],
+ });
+ } else {
+ if (!!leftContent) {
+ temp.rows.push({
+ lineNumber: leftContent.lineNumber,
+ lineNumberRight: -1,
+ lineContent: leftContent.lineContent,
+ prefix: leftContent.prefix,
+ lineDiffs: leftContent.lineDiffs,
+ });
+ }
+ if (!!rightContent) {
+ temp.rows.push({
+ lineNumber: -1,
+ lineNumberRight: rightContent.lineNumber,
+ lineContent: rightContent.lineContent,
+ prefix: rightContent.prefix,
+ lineDiffs: rightContent.lineDiffs,
+ });
+ }
+ }
+
+ return temp;
+ },
+ { rows: [] }
+ );
+ }
}
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.spec.ts b/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.spec.ts
new file mode 100644
index 0000000..d369bb9
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { LineContentPipe } from './line-content.pipe';
+
+describe('LineContentPipe', () => {
+ it('create an instance', () => {
+ const pipe = new LineContentPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.ts b/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.ts
new file mode 100644
index 0000000..8383bca
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-content.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'lineContent',
+})
+export class LineContentPipe implements PipeTransform {
+ transform(line: string, diffs?: string[]): string {
+ if (!line) {
+ return ' ';
+ }
+
+ return line.replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/ /g, ' ');
+ }
+}
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.spec.ts b/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.spec.ts
new file mode 100644
index 0000000..d5f1664
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { LineNumberPipe } from './line-number.pipe';
+
+describe('LineNumberPipe', () => {
+ it('create an instance', () => {
+ const pipe = new LineNumberPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.ts b/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.ts
new file mode 100644
index 0000000..1c29a12
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-number.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'lineNumber',
+})
+export class LineNumberPipe implements PipeTransform {
+ transform(value: number, ...args: unknown[]): number | string {
+ return value !== -1 ? value : ' ';
+ }
+}
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.spec.ts b/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.spec.ts
new file mode 100644
index 0000000..5aa0ef3
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { LinePrefixPipe } from './line-prefix.pipe';
+
+describe('LinePrefixPipe', () => {
+ it('create an instance', () => {
+ const pipe = new LinePrefixPipe();
+ expect(pipe).toBeTruthy();
+ });
+});
diff --git a/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.ts b/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.ts
new file mode 100644
index 0000000..285f9ab
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/line-prefix.pipe.ts
@@ -0,0 +1,12 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+ name: 'linePrefix'
+})
+export class LinePrefixPipe implements PipeTransform {
+
+ transform(value: string, ...args: unknown[]): string {
+ return value ?? ' ';
+ }
+
+}
diff --git a/projects/ngx-text-diff/src/lib/pipes/pipes.module.ts b/projects/ngx-text-diff/src/lib/pipes/pipes.module.ts
new file mode 100644
index 0000000..2f04bd1
--- /dev/null
+++ b/projects/ngx-text-diff/src/lib/pipes/pipes.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { LineNumberPipe } from './line-number.pipe';
+import { LineContentPipe } from './line-content.pipe';
+import { LinePrefixPipe } from './line-prefix.pipe';
+
+@NgModule({
+ declarations: [LineNumberPipe, LineContentPipe, LinePrefixPipe],
+ imports: [CommonModule],
+ exports: [LineNumberPipe, LineContentPipe, LinePrefixPipe],
+})
+export class PipesModule {}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index c7a3b7b..0b7b7e1 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -52,9 +52,8 @@ export class HomeComponent implements OnInit {
}
submitComparison() {
- this.submitted = false;
- this.contentObservable.next(this.content);
this.submitted = true;
+ this.contentObservable.next(this.content);
}
handleChange(side: 'left' | 'right', value: string) {