Skip to content

Commit b23aef6

Browse files
MrWangJustToDoMrWangJustToDo
committed
update
1 parent 0f6e427 commit b23aef6

10 files changed

Lines changed: 96 additions & 85 deletions

‎packages/cli/src/components/DiffLineNumber.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,29 @@ import { buildStyledBlock, type CharStyle } from "./ansiString";
1818
*/
1919
export const DiffSplitLineNumberArea: React.FC<{
2020
lineNumber?: number;
21-
width: number;
21+
lineNumWidth: number;
2222
height: number;
2323
backgroundColor: string;
2424
color: string;
2525
dim?: boolean;
26-
}> = React.memo(({ lineNumber, width, height, backgroundColor, color, dim = false }) => {
27-
// Total width: leftPad + num + rightPad = 1 + width + 1
28-
const totalWidth = width + 2;
26+
}> = React.memo(({ lineNumber, lineNumWidth, height, backgroundColor, color, dim = false }) => {
27+
// Total width: leftPad + num + rightPad = 1 + lineNumWidth + 1
28+
const totalWidth = lineNumWidth + 2;
2929

3030
const content = React.useMemo(() => {
3131
const style: CharStyle = { backgroundColor, color, dim };
3232
const lines: string[] = [];
3333

3434
for (let row = 0; row < height; row++) {
3535
// Left padding + line number (right-aligned) + right padding
36-
const numPart = row === 0 && lineNumber !== undefined ? lineNumber.toString().padStart(width) : " ".repeat(width);
36+
const numPart =
37+
row === 0 && lineNumber !== undefined ? lineNumber.toString().padStart(lineNumWidth) : " ".repeat(lineNumWidth);
3738
const lineText = ` ${numPart} `;
3839
lines.push(buildStyledBlock(lineText, totalWidth, 1, style, "left"));
3940
}
4041

4142
return lines.join("\n");
42-
}, [lineNumber, width, height, backgroundColor, color, dim, totalWidth]);
43+
}, [lineNumber, lineNumWidth, height, backgroundColor, color, dim, totalWidth]);
4344

4445
return (
4546
<Box width={totalWidth} flexShrink={0}>
@@ -57,14 +58,14 @@ DiffSplitLineNumberArea.displayName = "DiffSplitLineNumberArea";
5758
export const DiffUnifiedLineNumberArea: React.FC<{
5859
oldLineNumber?: number;
5960
newLineNumber?: number;
60-
width: number;
61+
lineNumWidth: number;
6162
height: number;
6263
backgroundColor: string;
6364
color: string;
6465
dim?: boolean;
65-
}> = React.memo(({ oldLineNumber, newLineNumber, width, height, backgroundColor, color, dim = false }) => {
66-
// Total width: oldNum + separator + newNum + separator = width + 1 + width + 1
67-
const totalWidth = width * 2 + 2;
66+
}> = React.memo(({ oldLineNumber, newLineNumber, lineNumWidth, height, backgroundColor, color, dim = false }) => {
67+
// Total width: oldNum + separator + newNum + separator = lineNumWidth + 1 + lineNumWidth + 1
68+
const totalWidth = lineNumWidth * 2 + 3;
6869

6970
const content = React.useMemo(() => {
7071
const style: CharStyle = { backgroundColor, color, dim };
@@ -73,15 +74,19 @@ export const DiffUnifiedLineNumberArea: React.FC<{
7374
for (let row = 0; row < height; row++) {
7475
// Old number (right-aligned) + separator + new number (right-aligned) + separator
7576
const oldPart =
76-
row === 0 && oldLineNumber !== undefined ? oldLineNumber.toString().padStart(width) : " ".repeat(width);
77+
row === 0 && oldLineNumber !== undefined
78+
? oldLineNumber.toString().padStart(lineNumWidth)
79+
: " ".repeat(lineNumWidth);
7780
const newPart =
78-
row === 0 && newLineNumber !== undefined ? newLineNumber.toString().padStart(width) : " ".repeat(width);
79-
const lineText = `${oldPart} ${newPart} `;
81+
row === 0 && newLineNumber !== undefined
82+
? newLineNumber.toString().padStart(lineNumWidth)
83+
: " ".repeat(lineNumWidth);
84+
const lineText = ` ${oldPart} ${newPart} `;
8085
lines.push(buildStyledBlock(lineText, totalWidth, 1, style, "left"));
8186
}
8287

8388
return lines.join("\n");
84-
}, [oldLineNumber, newLineNumber, width, height, backgroundColor, color, dim, totalWidth]);
89+
}, [oldLineNumber, newLineNumber, lineNumWidth, height, backgroundColor, color, dim, totalWidth]);
8590

8691
return (
8792
<Box width={totalWidth} flexShrink={0}>

‎packages/cli/src/components/DiffSplitContentLine.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@ import { getCurrentLineRow } from "./tools";
1818

1919
const InternalDiffSplitLine = ({
2020
index,
21-
width,
2221
theme,
2322
columns,
2423
diffFile,
2524
lineNumber,
25+
lineNumWidth,
2626
enableHighlight,
2727
}: {
2828
index: number;
29-
width: number;
3029
columns: number;
3130
theme: "light" | "dark";
3231
diffFile: DiffFile;
3332
lineNumber: number;
33+
lineNumWidth: number;
3434
enableHighlight: boolean;
3535
}) => {
3636
const oldLine = diffFile.getSplitLeftLine(index);
@@ -52,10 +52,12 @@ const InternalDiffSplitLine = ({
5252

5353
const emptyBG = theme === "light" ? diffEmptyContent.light : diffEmptyContent.dark;
5454
const halfColumns = columns / 2;
55+
const contentWidth = columns / 2 - lineNumWidth - 2;
5556

56-
// Calculate row heights
57-
let oldRow = getCurrentLineRow({ content: oldLine?.value || "", width: halfColumns - width - 1 });
58-
let newRow = getCurrentLineRow({ content: newLine?.value || "", width: halfColumns - width - 1 });
57+
// Calculate row heights - must match the actual wrap width used in DiffContent
58+
// DiffContent receives contentWidth and wraps at (contentWidth - 1) for the operator column
59+
let oldRow = getCurrentLineRow({ content: oldLine?.value || "", width: contentWidth - 1 });
60+
let newRow = getCurrentLineRow({ content: newLine?.value || "", width: contentWidth - 1 });
5961

6062
oldRow =
6163
oldLine?.diff?.changes?.hasLineChange && oldLine?.diff?.changes.newLineSymbol === NewLineSymbol.NEWLINE
@@ -68,7 +70,6 @@ const InternalDiffSplitLine = ({
6870
: newRow;
6971

7072
const row = Math.max(oldRow, newRow);
71-
const contentWidth = columns / 2 - width - 2;
7273

7374
// Determine background colors for line numbers
7475
const oldLineNumberBG = oldLineIsDelete
@@ -110,7 +111,7 @@ const InternalDiffSplitLine = ({
110111
<>
111112
<DiffSplitLineNumberArea
112113
lineNumber={oldLine.lineNumber}
113-
width={width}
114+
lineNumWidth={lineNumWidth}
114115
height={row}
115116
backgroundColor={oldLineNumberBG}
116117
color={color}
@@ -137,7 +138,7 @@ const InternalDiffSplitLine = ({
137138
<>
138139
<DiffSplitLineNumberArea
139140
lineNumber={newLine.lineNumber}
140-
width={width}
141+
lineNumWidth={lineNumWidth}
141142
height={row}
142143
backgroundColor={newLineNumberBG}
143144
color={color}
@@ -164,19 +165,19 @@ const InternalDiffSplitLine = ({
164165

165166
export const DiffSplitContentLine = ({
166167
index,
167-
width,
168168
theme,
169169
columns,
170170
diffFile,
171171
lineNumber,
172+
lineNumWidth,
172173
enableHighlight,
173174
}: {
174175
index: number;
175-
width: number;
176176
columns: number;
177177
theme: "light" | "dark";
178178
diffFile: DiffFile;
179179
lineNumber: number;
180+
lineNumWidth: number;
180181
enableHighlight: boolean;
181182
}) => {
182183
const oldLine = diffFile.getSplitLeftLine(index);
@@ -187,11 +188,11 @@ export const DiffSplitContentLine = ({
187188
return (
188189
<InternalDiffSplitLine
189190
index={index}
190-
width={width}
191191
theme={theme}
192192
columns={columns}
193193
diffFile={diffFile}
194194
lineNumber={lineNumber}
195+
lineNumWidth={lineNumWidth}
195196
enableHighlight={enableHighlight}
196197
/>
197198
);

‎packages/cli/src/components/DiffSplitHunkLine.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,18 @@ import { useDiffViewContext } from "./DiffViewContext";
99

1010
const DiffSplitHunkLineGitHub = ({
1111
index,
12-
width,
1312
theme,
1413
columns,
1514
diffFile,
1615
lineNumber,
16+
lineNumWidth,
1717
}: {
1818
index: number;
19-
width: number;
2019
theme: "light" | "dark";
2120
columns: number;
2221
diffFile: DiffFile;
2322
lineNumber: number;
23+
lineNumWidth: number;
2424
}) => {
2525
const currentHunk = diffFile.getSplitHunkLine(index);
2626

@@ -30,12 +30,12 @@ const DiffSplitHunkLineGitHub = ({
3030

3131
const hunkContentColor = theme === "light" ? diffHunkContentColor.light : diffHunkContentColor.dark;
3232

33-
const contentWidth = columns - width - 2;
33+
const contentWidth = columns - lineNumWidth - 2;
3434

3535
return (
3636
<Box data-line={`${lineNumber}-hunk`} data-state="hunk" height={1}>
37-
<Box width={width + 2}>
38-
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(width + 2)}</Text>
37+
<Box width={lineNumWidth + 2}>
38+
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(lineNumWidth + 2)}</Text>
3939
</Box>
4040
<Box width={contentWidth}>
4141
<Text backgroundColor={hunkContentBG} color={hunkContentColor} wrap="truncate">
@@ -48,18 +48,18 @@ const DiffSplitHunkLineGitHub = ({
4848

4949
const DiffSplitHunkLineGitLab = ({
5050
index,
51-
width,
5251
theme,
5352
columns,
5453
diffFile,
5554
lineNumber,
55+
lineNumWidth,
5656
}: {
5757
index: number;
58-
width: number;
5958
theme: "light" | "dark";
6059
columns: number;
6160
diffFile: DiffFile;
6261
lineNumber: number;
62+
lineNumWidth: number;
6363
}) => {
6464
const currentHunk = diffFile.getSplitHunkLine(index);
6565

@@ -69,20 +69,20 @@ const DiffSplitHunkLineGitLab = ({
6969

7070
const hunkContentColor = theme === "light" ? diffHunkContentColor.light : diffHunkContentColor.dark;
7171

72-
const contentWidth = columns / 2 - width - 2;
72+
const contentWidth = columns / 2 - lineNumWidth - 2;
7373

7474
return (
7575
<Box data-line={`${lineNumber}-hunk`} data-state="hunk" height={1}>
76-
<Box width={width + 2}>
77-
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(width + 2)}</Text>
76+
<Box width={lineNumWidth + 2}>
77+
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(lineNumWidth + 2)}</Text>
7878
</Box>
7979
<Box width={contentWidth}>
8080
<Text backgroundColor={hunkContentBG} color={hunkContentColor} wrap="truncate">
8181
{(currentHunk.splitInfo?.plainText || currentHunk.text || "").padEnd(contentWidth)}
8282
</Text>
8383
</Box>
84-
<Box width={width + 2}>
85-
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(width + 2)}</Text>
84+
<Box width={lineNumWidth + 2}>
85+
<Text backgroundColor={hunkLineNumberBG}>{" ".padEnd(lineNumWidth + 2)}</Text>
8686
</Box>
8787
<Box width={contentWidth}>
8888
<Text backgroundColor={hunkContentBG} color={hunkContentColor} wrap="truncate">
@@ -95,18 +95,18 @@ const DiffSplitHunkLineGitLab = ({
9595

9696
const InternalDiffSplitHunkLine = ({
9797
index,
98-
width,
9998
theme,
10099
columns,
101100
diffFile,
102101
lineNumber,
102+
lineNumWidth,
103103
}: {
104104
index: number;
105-
width: number;
106105
theme: "light" | "dark";
107106
columns: number;
108107
diffFile: DiffFile;
109108
lineNumber: number;
109+
lineNumWidth: number;
110110
}) => {
111111
const { useDiffContext } = useDiffViewContext();
112112

@@ -120,41 +120,41 @@ const InternalDiffSplitHunkLine = ({
120120
return (
121121
<DiffSplitHunkLineGitHub
122122
index={index}
123-
width={width}
124123
theme={theme}
125124
columns={columns}
126125
diffFile={diffFile}
127126
lineNumber={lineNumber}
127+
lineNumWidth={lineNumWidth}
128128
/>
129129
);
130130
} else {
131131
return (
132132
<DiffSplitHunkLineGitLab
133133
index={index}
134-
width={width}
135134
theme={theme}
136135
columns={columns}
137136
diffFile={diffFile}
138137
lineNumber={lineNumber}
138+
lineNumWidth={lineNumWidth}
139139
/>
140140
);
141141
}
142142
};
143143

144144
export const DiffSplitHunkLine = ({
145145
index,
146-
width,
147146
theme,
148147
columns,
149148
diffFile,
150149
lineNumber,
150+
lineNumWidth,
151151
}: {
152152
index: number;
153-
width: number;
154153
theme: "light" | "dark";
155154
columns: number;
156155
diffFile: DiffFile;
157156
lineNumber: number;
157+
lineNumWidth: number;
158158
}) => {
159159
const currentHunk = diffFile.getSplitHunkLine(index);
160160

@@ -170,11 +170,11 @@ export const DiffSplitHunkLine = ({
170170
return (
171171
<InternalDiffSplitHunkLine
172172
index={index}
173-
width={width}
174173
theme={theme}
175174
columns={columns}
176175
diffFile={diffFile}
177176
lineNumber={lineNumber}
177+
lineNumWidth={lineNumWidth}
178178
/>
179179
);
180180
};

‎packages/cli/src/components/DiffSplitView.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const DiffSplitView = memo(({ diffFile }: { diffFile: DiffFile }) => {
2323

2424
const splitLineLength = Math.max(diffFile.splitLineLength, diffFile.fileLineLength);
2525

26-
const width = splitLineLength.toString().length;
26+
const lineNumWidth = splitLineLength.toString().length;
2727

2828
const lines = getSplitContentLines(diffFile);
2929

@@ -35,15 +35,15 @@ export const DiffSplitView = memo(({ diffFile }: { diffFile: DiffFile }) => {
3535
<Fragment key={line.index}>
3636
<DiffSplitHunkLine
3737
theme={theme}
38-
width={width}
3938
columns={columns}
4039
index={line.index}
41-
lineNumber={line.lineNumber}
4240
diffFile={diffFile}
41+
lineNumber={line.lineNumber}
42+
lineNumWidth={lineNumWidth}
4343
/>
4444
<DiffSplitContentLine
4545
theme={theme}
46-
width={width}
46+
lineNumWidth={lineNumWidth}
4747
columns={columns}
4848
index={line.index}
4949
diffFile={diffFile}
@@ -61,11 +61,11 @@ export const DiffSplitView = memo(({ diffFile }: { diffFile: DiffFile }) => {
6161
))}
6262
<DiffSplitHunkLine
6363
theme={theme}
64-
width={width}
6564
columns={columns}
65+
diffFile={diffFile}
6666
index={diffFile.splitLineLength}
6767
lineNumber={diffFile.splitLineLength}
68-
diffFile={diffFile}
68+
lineNumWidth={lineNumWidth}
6969
/>
7070
</>
7171
);

0 commit comments

Comments
 (0)