Skip to content

Commit 489fa34

Browse files
MrWangJustToDoMrWangJustToDo
committed
fix some style
1 parent 90ad5b5 commit 489fa34

17 files changed

Lines changed: 136 additions & 28 deletions

‎packages/core/src/diff-file.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,8 @@ export class DiffFile {
130130

131131
expandUnifiedAll: boolean = false;
132132

133+
hasCollapsed: boolean = false;
134+
133135
#id: string = "";
134136

135137
#clonedInstance = new Map<DiffFile, () => void>();
@@ -574,6 +576,10 @@ export class DiffFile {
574576
hideStart = len;
575577
}
576578

579+
if (isHidden) {
580+
this.hasCollapsed = true;
581+
}
582+
577583
prevIsHidden = isHidden;
578584

579585
if (oldDiffLine && newDiffLine && !oldLineHasChange && !newLineHasChange) {
@@ -730,6 +736,10 @@ export class DiffFile {
730736
hideStart = len;
731737
}
732738

739+
if (isHidden) {
740+
this.hasCollapsed = true;
741+
}
742+
733743
prevIsHidden = isHidden;
734744

735745
if (oldDiffLine && newDiffLine && !oldLineHasChange && !newLineHasChange) {
@@ -1097,6 +1107,7 @@ export class DiffFile {
10971107
const splitLineLength = this.splitLineLength;
10981108
const unifiedLineLength = this.unifiedLineLength;
10991109
const composeByDiff = this.#composeByDiff;
1110+
const hasCollapsed = this.hasCollapsed;
11001111

11011112
// split
11021113
const splitLeftLines = this.#splitLeftLines;
@@ -1131,6 +1142,7 @@ export class DiffFile {
11311142
unifiedHunkLines,
11321143

11331144
composeByDiff,
1145+
hasCollapsed,
11341146

11351147
version,
11361148
};
@@ -1153,6 +1165,7 @@ export class DiffFile {
11531165
this.#newFilePlaceholderLines = data.newFilePlaceholderLines;
11541166
this.splitLineLength = data.splitLineLength;
11551167
this.unifiedLineLength = data.unifiedLineLength;
1168+
this.hasCollapsed = data.hasCollapsed;
11561169

11571170
this.#splitLeftLines = data.splitLeftLines;
11581171
this.#splitRightLines = data.splitRightLines;

‎packages/react/src/components/DiffSplitHunkLineNormal.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useSyncHeight } from "../hooks/useSyncHeight";
66

77
import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
88
import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
9+
import { asideWidth } from "./tools";
910

1011
const _DiffSplitHunkLine = ({
1112
index,
@@ -55,6 +56,9 @@ const _DiffSplitHunkLine = ({
5556
style={{
5657
backgroundColor: `var(${hunkLineNumberBGName})`,
5758
color: `var(${plainLineNumberColorName})`,
59+
width: `var(${asideWidth})`,
60+
minWidth: `var(${asideWidth})`,
61+
maxWidth: `var(${asideWidth})`,
5862
}}
5963
>
6064
{couldExpand ? (

‎packages/react/src/components/DiffSplitLineNormal.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { emptyBGName, getContentBG, getLineNumberBG, plainLineNumberColorName }
77
import { DiffSplitAddWidget } from "./DiffAddWidget";
88
import { DiffContent } from "./DiffContent";
99
import { useDiffWidgetContext } from "./DiffWidgetContext";
10+
import { asideWidth } from "./tools";
1011

1112
const _DiffSplitLine = ({
1213
index,
@@ -74,6 +75,9 @@ const _DiffSplitLine = ({
7475
style={{
7576
backgroundColor: lineNumberBG,
7677
color: `var(${plainLineNumberColorName})`,
78+
width: `var(${asideWidth})`,
79+
minWidth: `var(${asideWidth})`,
80+
maxWidth: `var(${asideWidth})`,
7781
}}
7882
>
7983
{hasDiff && enableAddWidget && (

‎packages/react/src/components/DiffSplitViewNormal.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
12
import { getSplitContentLines, type DiffFile } from "@git-diff-view/core";
23
import { Fragment, memo, useCallback, useEffect, useRef } from "react";
34
import * as React from "react";
@@ -11,7 +12,7 @@ import { DiffSplitHunkLine } from "./DiffSplitHunkLineNormal";
1112
import { DiffSplitLine } from "./DiffSplitLineNormal";
1213
import { DiffSplitWidgetLine } from "./DiffSplitWidgetLineNormal";
1314
import { SplitSide } from "./DiffView";
14-
import { removeAllSelection, syncScroll } from "./tools";
15+
import { asideWidth, removeAllSelection, syncScroll } from "./tools";
1516

1617
import type { MouseEventHandler } from "react";
1718

@@ -25,15 +26,15 @@ const onMouseDown: MouseEventHandler<HTMLTableSectionElement> = (e) => {
2526
}
2627
};
2728

28-
const DiffSplitViewTable = ({ side, diffFile, width }: { side: SplitSide; diffFile: DiffFile; width: number }) => {
29+
const DiffSplitViewTable = ({ side, diffFile }: { side: SplitSide; diffFile: DiffFile }) => {
2930
const className = side === SplitSide.new ? "new-diff-table" : "old-diff-table";
3031

3132
const lines = getSplitContentLines(diffFile);
3233

3334
return (
3435
<table className={className + " border-collapse w-full"} data-mode={SplitSide[side]}>
3536
<colgroup>
36-
<col className={`diff-table-${SplitSide[side]}-num-col`} style={{ minWidth: Math.round(width) + 25 }} />
37+
<col className={`diff-table-${SplitSide[side]}-num-col`} />
3738
<col className={`diff-table-${SplitSide[side]}-content-col`} />
3839
</colgroup>
3940
<thead className="hidden">
@@ -82,35 +83,41 @@ export const DiffSplitViewNormal = memo(({ diffFile }: { diffFile: DiffFile }) =
8283
return syncScroll(left, right);
8384
}, []);
8485

85-
const width = useTextWidth({
86+
const _width = useTextWidth({
8687
text: splitLineLength.toString(),
8788
font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
8889
});
8990

91+
const width = Math.max(40, _width + 25);
92+
9093
return (
9194
<div className="split-diff-view split-diff-view-wrap w-full flex basis-[50%]">
9295
<div
9396
className="old-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
9497
ref={ref1}
9598
style={{
99+
// @ts-ignore
100+
[asideWidth]: `${Math.round(width)}px`,
96101
overscrollBehaviorX: "none",
97102
fontFamily: "Menlo, Consolas, monospace",
98103
fontSize: "var(--diff-font-size--)",
99104
}}
100105
>
101-
<DiffSplitViewTable side={SplitSide.old} diffFile={diffFile} width={width} />
106+
<DiffSplitViewTable side={SplitSide.old} diffFile={diffFile} />
102107
</div>
103108
<div className="diff-split-line w-[1.5px] bg-[#ccc]" />
104109
<div
105110
className="new-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
106111
ref={ref2}
107112
style={{
113+
// @ts-ignore
114+
[asideWidth]: `${Math.round(width)}px`,
108115
overscrollBehaviorX: "none",
109116
fontFamily: "Menlo, Consolas, monospace",
110117
fontSize: "var(--diff-font-size--)",
111118
}}
112119
>
113-
<DiffSplitViewTable side={SplitSide.new} diffFile={diffFile} width={width} />
120+
<DiffSplitViewTable side={SplitSide.new} diffFile={diffFile} />
114121
</div>
115122
</div>
116123
);

‎packages/react/src/components/DiffSplitViewWrap.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,11 +89,13 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
8989
[setSelectSide]
9090
);
9191

92-
const width = useTextWidth({
92+
const _width = useTextWidth({
9393
text: splitLineLength.toString(),
9494
font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
9595
});
9696

97+
const width = Math.max(40, _width + 25);
98+
9799
const lines = getSplitContentLines(diffFile);
98100

99101
return (
@@ -108,9 +110,9 @@ export const DiffSplitViewWrap = memo(({ diffFile }: { diffFile: DiffFile }) =>
108110
<Style useSelector={splitSideInfo} id={`diff-root${diffFile.getId()}`} />
109111
<table className="diff-table border-collapse table-fixed w-full">
110112
<colgroup>
111-
<col className="diff-table-old-num-col" width={Math.round(width) + 25} />
113+
<col className="diff-table-old-num-col" width={Math.round(width)} />
112114
<col className="diff-table-old-content-col" />
113-
<col className="diff-table-new-num-col" width={Math.round(width) + 25} />
115+
<col className="diff-table-new-num-col" width={Math.round(width)} />
114116
<col className="diff-table-new-content-col" />
115117
</colgroup>
116118
<thead className="hidden">

‎packages/react/src/components/DiffUnifiedHunkLine.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useDiffViewContext } from "..";
66

77
import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
88
import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
9+
import { asideWidth } from "./tools";
910

1011
import type { DiffFile } from "@git-diff-view/core";
1112

@@ -44,6 +45,9 @@ const _DiffUnifiedHunkLine = ({
4445
style={{
4546
backgroundColor: `var(${hunkLineNumberBGName})`,
4647
color: `var(${plainLineNumberColorName})`,
48+
width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
49+
maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
50+
minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
4751
}}
4852
>
4953
{couldExpand ? (

‎packages/react/src/components/DiffUnifiedLine.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
import { DiffUnifiedAddWidget } from "./DiffAddWidget";
1818
import { DiffContent } from "./DiffContent";
1919
import { useDiffWidgetContext } from "./DiffWidgetContext";
20+
import { asideWidth } from "./tools";
2021

2122
import type { DiffViewProps } from "..";
2223

@@ -52,6 +53,9 @@ const DiffUnifiedOldLine = ({
5253
style={{
5354
color: `var(${plainLineNumberColorName})`,
5455
backgroundColor: `var(${delLineNumberBGName})`,
56+
width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
57+
maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
58+
minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
5559
}}
5660
>
5761
{enableAddWidget && (
@@ -118,6 +122,9 @@ const DiffUnifiedNewLine = ({
118122
style={{
119123
color: `var(${plainLineNumberColorName})`,
120124
backgroundColor: `var(${addLineNumberBGName})`,
125+
width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
126+
maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
127+
minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
121128
}}
122129
>
123130
{enableAddWidget && (
@@ -233,6 +240,9 @@ const _DiffUnifiedLine = memo(
233240
className="diff-line-num sticky left-0 pl-[10px] pr-[10px] text-right select-none w-[1%] min-w-[100px] whitespace-nowrap align-top"
234241
style={{
235242
color: `var(${plainLineNumberColorName})`,
243+
width: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
244+
maxWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
245+
minWidth: `calc(calc(var(${asideWidth}) + 5px) * 2)`,
236246
backgroundColor: hasDiff ? `var(${plainLineNumberBGName})` : `var(${expandContentBGName})`,
237247
}}
238248
>

‎packages/react/src/components/DiffUnifiedView.tsx‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1+
/* eslint-disable @typescript-eslint/ban-ts-comment */
12
import { getUnifiedContentLine } from "@git-diff-view/core";
23
import * as React from "react";
3-
import { Fragment, memo, useEffect, useMemo } from "react";
4+
import { Fragment, memo, useEffect, useMemo, useCallback } from "react";
45
import { createStore, ref } from "reactivity-store";
56
import { useSyncExternalStore } from "use-sync-external-store/shim";
67

78
import { useDiffViewContext, type SplitSide } from "..";
9+
import { useTextWidth } from "../hooks/useTextWidth";
810

911
import { DiffUnifiedExtendLine } from "./DiffUnifiedExtendLine";
1012
import { DiffUnifiedHunkLine } from "./DiffUnifiedHunkLine";
1113
import { DiffUnifiedLine } from "./DiffUnifiedLine";
1214
import { DiffUnifiedWidgetLine } from "./DiffUnifiedWidgetLine";
1315
import { DiffWidgetContext } from "./DiffWidgetContext";
14-
import { removeAllSelection } from "./tools";
16+
import { asideWidth, removeAllSelection } from "./tools";
1517

1618
import type { DiffFile } from "@git-diff-view/core";
1719
import type { MouseEventHandler } from "react";
@@ -43,7 +45,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
4345
if (typeof renderWidgetLine !== "function") return;
4446

4547
widgetSide.value = side;
46-
48+
4749
widgetLineNumber.value = lineNumber;
4850
};
4951

@@ -54,6 +56,8 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
5456

5557
const contextValue = useMemo(() => ({ useWidget }), [useWidget]);
5658

59+
const fontSize = useDiffContext(useCallback((s) => s.fontSize, []));
60+
5761
useSyncExternalStore(diffFile.subscribe, diffFile.getUpdateCount);
5862

5963
useEffect(() => {
@@ -62,14 +66,28 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
6266
setWidget({});
6367
}, [diffFile, useWidget]);
6468

69+
const unifiedLineLength = diffFile.unifiedLineLength;
70+
71+
const _width = useTextWidth({
72+
text: unifiedLineLength.toString(),
73+
font: { fontSize: fontSize + "px", fontFamily: "Menlo, Consolas, monospace" },
74+
});
75+
76+
const width = Math.max(40, _width + 25);
77+
6578
const lines = getUnifiedContentLine(diffFile);
6679

6780
return (
6881
<DiffWidgetContext.Provider value={contextValue}>
6982
<div className="unified-diff-view w-full">
7083
<div
7184
className="unified-diff-table-wrapper overflow-auto w-full scrollbar-hide scrollbar-disable"
72-
style={{ fontFamily: "Menlo, Consolas, monospace", fontSize: "var(--diff-font-size--)" }}
85+
style={{
86+
// @ts-ignore
87+
[asideWidth]: `${Math.round(width)}px`,
88+
fontFamily: "Menlo, Consolas, monospace",
89+
fontSize: "var(--diff-font-size--)",
90+
}}
7391
>
7492
<table className="unified-diff-table border-collapse w-full">
7593
<colgroup>
@@ -82,7 +100,7 @@ export const DiffUnifiedView = memo(({ diffFile }: { diffFile: DiffFile }) => {
82100
<th scope="col">line content</th>
83101
</tr>
84102
</thead>
85-
<tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
103+
<tbody className="diff-table-body leading-[1.4]" onMouseDownCapture={onMouseDown}>
86104
{lines.map((item) => (
87105
<Fragment key={item.index}>
88106
<DiffUnifiedHunkLine index={item.index} lineNumber={item.lineNumber} diffFile={diffFile} />

‎packages/react/src/components/tools.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,5 @@ export const syncScroll = (left: HTMLElement, right: HTMLElement) => {
2828
right.onscroll = null;
2929
};
3030
};
31+
32+
export const asideWidth = "--diff-aside-width--";

‎packages/vue/src/components/DiffSplitHunkLineNormal.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useSyncHeight } from "../hooks/useSyncHeight";
77
import { hunkContentBGName, hunkContentColorName, hunkLineNumberBGName, plainLineNumberColorName } from "./color";
88
import { ExpandAll, ExpandDown, ExpandUp } from "./DiffExpand";
99
import { SplitSide } from "./DiffView";
10+
import { asideWidth } from "./tools";
1011

1112
export const DiffSplitHunkLine = defineComponent(
1213
(props: { index: number; side: SplitSide; diffFile: DiffFile; lineNumber: number }) => {
@@ -88,6 +89,9 @@ export const DiffSplitHunkLine = defineComponent(
8889
style={{
8990
backgroundColor: `var(${hunkLineNumberBGName})`,
9091
color: `var(${plainLineNumberColorName})`,
92+
width: `var(${asideWidth})`,
93+
minWidth: `var(${asideWidth})`,
94+
maxWidth: `var(${asideWidth})`,
9195
}}
9296
>
9397
{couldExpand.value ? (

0 commit comments

Comments
 (0)