gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-28 04:47:42 +03:00
Code Issues Packages Projects Releases Wiki Activity

merge diffView into codeViewer

Browse Source
This commit is contained in:
Nikita Galaiko 2023-03-17 08:36:01 +01:00
parent a8680c22d1
commit df01a49f02
No known key found for this signature in database
GPG Key ID: EBAB54E845BA519D
2 changed files with 74 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
src/lib/components/CodeViewer/CodeViewer.svelte
View File

@ -1,7 +1,11 @@
<script lang="ts">
import { type Delta, Operation } from '$lib/deltas';
import { lineDiff } from './diff';
import DiffView from './DiffView.svelte';
import { create } from './CodeHighlighter';
import { buildDiffRows, documentMap, RowType, type Row } from './renderer';
import './diff.css';
import './colors/gruvbox.css';
export let doc: string;
export let deltas: Delta[];
@ -28,6 +32,74 @@
$: left = deltas.length > 0 ? applyDeltas(doc, deltas.slice(0, deltas.length - 1)) : doc;
$: right = deltas.length > 0 ? applyDeltas(left, deltas.slice(deltas.length - 1)) : left;
$: diff = lineDiff(left.split('\n'), right.split('\n'));
$: diffRows = buildDiffRows(diff);
$: originalHighlighter = create(diffRows.originalLines.join('\n'), filepath);
$: originalMap = documentMap(diffRows.originalLines);
$: currentHighlighter = create(diffRows.currentLines.join('\n'), filepath);
$: currentMap = documentMap(diffRows.currentLines);
const renderRowContent = (row: Row) => {
if (row.type === RowType.Spacer) {
return row.tokens.map((tok) => `${tok.text}`);
}
const [doc, startPos] =
row.type === RowType.Deletion
? [originalHighlighter, originalMap.get(row.originalLineNumber) as number]
: [currentHighlighter, currentMap.get(row.currentLineNumber) as number];
const content: string[] = [];
let pos = startPos;
const sanitize = (text: string) => {
var element = document.createElement('div');
element.innerText = text;
return element.innerHTML;
};
for (const token of row.tokens) {
let tokenContent = '';
doc.highlightRange(pos, pos + token.text.length, (text, style) => {
tokenContent += style ? `<span class=${style}>${sanitize(text)}</span>` : sanitize(text);
});
content.push(
token.className
? `<span class=${token.className}>${tokenContent}</span>`
: `${tokenContent}`
);
pos += token.text.length;
}
return content;
};
</script>
<DiffView {diff} {filepath} />
<div class="diff-listing w-full select-text whitespace-pre font-mono">
{#each diffRows.rows as row}
{@const baseNumber =
row.type === RowType.Equal || row.type === RowType.Deletion
? String(row.originalLineNumber)
: ''}
{@const curNumber =
row.type === RowType.Equal || row.type === RowType.Addition
? String(row.currentLineNumber)
: ''}
<div class="select-none pr-1 pl-2.5 text-right text-[#665c54]">{baseNumber}</div>
<div class="select-none pr-1 pl-2.5 text-right text-[#665c54]">{curNumber}</div>
<div
class="diff-line-marker"
class:diff-line-addition={row.type === RowType.Addition}
class:diff-line-deletion={row.type === RowType.Deletion}
>
{row.type === RowType.Addition ? '+' : row.type === RowType.Deletion ? '-' : ''}
</div>
<div
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
class="px-1 diff-line-{row.type}"
data-line-number={curNumber}
>
{#each renderRowContent(row) as content}
{@html content}
{/each}
</div>
{/each}
</div>

80
src/lib/components/CodeViewer/DiffView.svelte
View File

@ -1,80 +0,0 @@
<script lang="ts">
import type { DiffArray } from './diff';
import { create } from './CodeHighlighter';
import { buildDiffRows, documentMap, RowType, type Row } from './renderer';
import './diff.css';
import './colors/gruvbox.css';
export let diff: DiffArray;
export let filepath: string;
$: diffRows = buildDiffRows(diff);
$: originalHighlighter = create(diffRows.originalLines.join('\n'), filepath);
$: originalMap = documentMap(diffRows.originalLines);
$: currentHighlighter = create(diffRows.currentLines.join('\n'), filepath);
$: currentMap = documentMap(diffRows.currentLines);
const renderRowContent = (row: Row) => {
if (row.type === RowType.Spacer) {
return row.tokens.map((tok) => `${tok.text}`);
}
const [doc, startPos] =
row.type === RowType.Deletion
? [originalHighlighter, originalMap.get(row.originalLineNumber) as number]
: [currentHighlighter, currentMap.get(row.currentLineNumber) as number];
const content: string[] = [];
let pos = startPos;
const sanitize = (text: string) => {
var element = document.createElement('div');
element.innerText = text;
return element.innerHTML;
};
for (const token of row.tokens) {
let tokenContent = '';
doc.highlightRange(pos, pos + token.text.length, (text, style) => {
tokenContent += style ? `<span class=${style}>${sanitize(text)}</span>` : sanitize(text);
});
content.push(
token.className
? `<span class=${token.className}>${tokenContent}</span>`
: `${tokenContent}`
);
pos += token.text.length;
}
return content;
};
</script>
<div class="diff-listing w-full select-text whitespace-pre font-mono">
{#each diffRows.rows as row}
{@const baseNumber =
row.type === RowType.Equal || row.type === RowType.Deletion
? String(row.originalLineNumber)
: ''}
{@const curNumber =
row.type === RowType.Equal || row.type === RowType.Addition
? String(row.currentLineNumber)
: ''}
<div class="select-none pr-1 pl-2.5 text-right text-[#665c54]">{baseNumber}</div>
<div class="select-none pr-1 pl-2.5 text-right text-[#665c54]">{curNumber}</div>
<div
class="diff-line-marker"
class:diff-line-addition={row.type === RowType.Addition}
class:diff-line-deletion={row.type === RowType.Deletion}
>
{row.type === RowType.Addition ? '+' : row.type === RowType.Deletion ? '-' : ''}
</div>
<div
class:line-changed={row.type === RowType.Addition || row.type === RowType.Deletion}
class="px-1 diff-line-{row.type}"
data-line-number={curNumber}
>
{#each renderRowContent(row) as content}
{@html content}
{/each}
</div>
{/each}
</div>