Skip to content

Commit b278a82

Browse files
MrWangJustToDoMrWangJustToDo
committed
wip
1 parent acaa18d commit b278a82

12 files changed

Lines changed: 162 additions & 118 deletions

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const InternalDiffSplitLine = ({
4444

4545
const hasDiff = !!currentLine?.diff;
4646

47-
const hasContent = !!currentLine.lineNumber;
47+
const hasContent = !!currentLine?.lineNumber;
4848

4949
const hasChange = checkDiffLineIncludeChange(currentLine?.diff);
5050

@@ -109,8 +109,8 @@ const InternalDiffSplitLine = ({
109109
<DiffContent
110110
enableWrap={false}
111111
diffFile={diffFile}
112-
rawLine={currentLine.value!}
113-
diffLine={currentLine.diff}
112+
rawLine={currentLine?.value || ''}
113+
diffLine={currentLine?.diff}
114114
plainLine={plainLine}
115115
syntaxLine={syntaxLine}
116116
enableHighlight={enableHighlight}

‎packages/solid/src/components/DiffSplitContentLineWrap.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ export const DiffSplitContentLine = (props: { index: number; diffFile: DiffFile;
4444

4545
const [hasHidden, setHasHidden] = createSignal(oldLine()?.isHidden && newLine()?.isHidden);
4646

47-
const [oldLineIsDelete, setOldLineIsDelete] = createSignal(oldLine()?.diff?.type === DiffLineType.Delete);
47+
const oldLineIsDelete = () => oldLine()?.diff?.type === DiffLineType.Delete;
4848

49-
const [newLineIsAdded, setNewLineIsAdded] = createSignal(newLine()?.diff?.type === DiffLineType.Add);
49+
const newLineIsAdded = () => newLine()?.diff?.type === DiffLineType.Add;
5050

5151
createEffect(() => {
5252
const init = () => {
@@ -59,8 +59,6 @@ export const DiffSplitContentLine = (props: { index: number; diffFile: DiffFile;
5959
setHasDiff(() => !!oldLine()?.diff || !!newLine()?.diff);
6060
setHasChange(() => checkDiffLineIncludeChange(oldLine()?.diff) || checkDiffLineIncludeChange(newLine()?.diff));
6161
setHasHidden(() => oldLine()?.isHidden && newLine()?.isHidden);
62-
setOldLineIsDelete(() => oldLine()?.diff?.type === DiffLineType.Delete);
63-
setNewLineIsAdded(() => newLine()?.diff?.type === DiffLineType.Add);
6462
};
6563

6664
init();

‎packages/solid/src/components/DiffSplitExtendLineNormal.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ export const DiffSplitExtendLine = (props: {
1414

1515
const renderExtend = useRenderExtend();
1616

17-
const currentSide = createMemo(() => SplitSide[props.side]);
18-
1917
const lineSelector = createMemo(() => `div[data-line="${props.lineNumber}-extend-content"]`);
2018

2119
const lineWrapperSelector = createMemo(() => `tr[data-line="${props.lineNumber}-extend"]`);
@@ -34,7 +32,7 @@ export const DiffSplitExtendLine = (props: {
3432

3533
const [newLineExtend, setNewLineExtend] = createSignal(extendData()?.newFile?.[newLine()?.lineNumber || ""]);
3634

37-
const currentItem = createMemo(() => (props.side === SplitSide.old ? oldLine() : newLine()));
35+
const [currentItem, setCurrentItem] = createSignal(props.side === SplitSide.old ? oldLine() : newLine());
3836

3937
const [currentIsHidden, setCurrentIsHidden] = createSignal(currentItem()?.isHidden);
4038

@@ -45,6 +43,7 @@ export const DiffSplitExtendLine = (props: {
4543
setEnableExpand(props.diffFile.getExpandEnabled());
4644
setOldLineExtend(() => extendData()?.oldFile?.[oldLine()?.lineNumber || ""]);
4745
setNewLineExtend(() => extendData()?.newFile?.[newLine()?.lineNumber || ""]);
46+
setCurrentItem(() => (props.side === SplitSide.old ? oldLine() : newLine()));
4847
setCurrentIsHidden(() => currentItem()?.isHidden);
4948
};
5049

@@ -69,10 +68,12 @@ export const DiffSplitExtendLine = (props: {
6968
() => (props.side === SplitSide.old ? !!oldLineExtend() : !!newLineExtend()) && currentIsShow()
7069
);
7170

71+
const extendSide = createMemo(() => SplitSide[currentExtend() ? props.side : props.side === SplitSide.new ? SplitSide.old : SplitSide.new]);
72+
7273
useSyncHeight({
7374
selector: lineSelector,
7475
wrapper: lineWrapperSelector,
75-
side: currentSide,
76+
side: extendSide,
7677
enable: currentIsShow,
7778
});
7879

‎packages/solid/src/components/DiffSplitWidgetLineNormal.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,14 +30,15 @@ export const DiffSplitWidgetLine = (props: {
3030
!!newLine()?.lineNumber && widget?.()?.side === SplitSide.new && widget?.()?.lineNumber === newLine()?.lineNumber
3131
);
3232

33-
const currentLine = createMemo(() => (props.side === SplitSide.old ? oldLine() : newLine()));
33+
const [currentLine, setCUrrentLine] = createSignal(props.side === SplitSide.old ? oldLine() : newLine());
3434

3535
const [currentIsHidden, setCurrentIsHidden] = createSignal(currentLine()?.isHidden);
3636

3737
createEffect(() => {
3838
const init = () => {
3939
setOldLine(props.diffFile.getSplitLeftLine(props.index));
4040
setNewLine(props.diffFile.getSplitRightLine(props.index));
41+
setCUrrentLine(() => (props.side === SplitSide.old ? oldLine() : newLine()));
4142
setCurrentIsHidden(() => currentLine()?.isHidden);
4243
};
4344

@@ -56,15 +57,17 @@ export const DiffSplitWidgetLine = (props: {
5657
props.side === SplitSide.old ? ".old-diff-table-wrapper" : ".new-diff-table-wrapper"
5758
);
5859

59-
const observeSide = createMemo(() => SplitSide[props.side]);
60+
const currentWidget = createMemo(() => (props.side === SplitSide.old ? oldLineWidget() : newLineWidget()));
61+
62+
const observeSide = createMemo(
63+
() => SplitSide[currentWidget() ? props.side : props.side === SplitSide.old ? SplitSide.new : SplitSide.old]
64+
);
6065

6166
const currentIsShow = createMemo(
6267
() => (!!oldLineWidget() || !!newLineWidget()) && !currentIsHidden() && !newLine()?.isHidden && !!renderWidget
6368
);
6469

65-
const currentWidget = createMemo(
66-
() => (props.side === SplitSide.old ? oldLineWidget() : newLineWidget()) && !!currentIsShow()
67-
);
70+
const currentEnable = createMemo(() => currentWidget() && !!currentIsShow());
6871

6972
const onCloseWidget = () => setWidget?.({});
7073

@@ -77,7 +80,7 @@ export const DiffSplitWidgetLine = (props: {
7780

7881
const width = useDomWidth({
7982
selector: wrapperSelector,
80-
enable: currentWidget,
83+
enable: currentEnable,
8184
});
8285

8386
return (

‎packages/solid/src/hooks/useDomWidth.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
33
import { useId } from "./useId";
44
import { useIsMounted } from "./useIsMounted";
55

6-
type ObserveElement = HTMLElement & {
6+
export type ObserveElement = HTMLElement & {
77
__observeCallback?: Set<() => void>;
88
__observeInstance?: ResizeObserver;
99
};

‎packages/solid/src/hooks/useSyncHeight.ts‎

Lines changed: 53 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { createEffect, onCleanup, type Accessor } from "solid-js";
33
import { useId } from "./useId";
44
import { useIsMounted } from "./useIsMounted";
55

6+
import type { ObserveElement } from "./useDomWidth";
7+
68
export const useSyncHeight = ({
79
selector,
810
wrapper,
@@ -24,53 +26,70 @@ export const useSyncHeight = ({
2426
if (enable()) {
2527
let clean = () => {};
2628

27-
const timer = setTimeout(() => {
28-
const container = document.querySelector(`#diff-root${id()}`);
29+
const container = document.querySelector(`#diff-root${id()}`);
2930

30-
const elements = Array.from(container?.querySelectorAll(selector()) || []);
31+
const elements = Array.from(container?.querySelectorAll(selector()) || []);
3132

32-
const wrappers = Array.from(container?.querySelectorAll(wrapper()) || []);
33+
const wrappers = wrapper() ? Array.from(container?.querySelectorAll(wrapper()) || []) : elements;
3334

34-
if (elements.length === 2 && wrappers.length === 2) {
35-
const ele1 = elements[0] as HTMLElement;
36-
const ele2 = elements[1] as HTMLElement;
35+
if (elements.length === 2 && wrappers.length === 2) {
36+
const ele1 = elements[0] as HTMLElement;
37+
const ele2 = elements[1] as HTMLElement;
3738

38-
const wrapper1 = wrappers[0] as HTMLElement;
39-
const wrapper2 = wrappers[1] as HTMLElement;
39+
const wrapper1 = wrappers[0] as HTMLElement;
40+
const wrapper2 = wrappers[1] as HTMLElement;
4041

41-
const target = ele1.getAttribute("data-side") === side() ? ele1 : ele2;
42+
const target = ele1.getAttribute("data-side") === side() ? ele1 : ele2;
4243

43-
const cb = () => {
44-
ele1.style.height = "auto";
45-
ele2.style.height = "auto";
46-
const rect1 = ele1.getBoundingClientRect();
47-
const rect2 = ele2.getBoundingClientRect();
48-
const maxHeight = Math.max(rect1.height, rect2.height);
49-
wrapper1.style.height = maxHeight + "px";
50-
wrapper2.style.height = maxHeight + "px";
51-
wrapper1.setAttribute("data-sync-height", String(maxHeight));
52-
wrapper2.setAttribute("data-sync-height", String(maxHeight));
53-
};
44+
const typedTarget = target as ObserveElement;
5445

55-
cb();
46+
const cb = () => {
47+
ele1.style.height = "auto";
48+
ele2.style.height = "auto";
49+
const rect1 = ele1.getBoundingClientRect();
50+
const rect2 = ele2.getBoundingClientRect();
51+
const maxHeight = Math.max(rect1.height, rect2.height);
52+
wrapper1.style.height = maxHeight + "px";
53+
wrapper2.style.height = maxHeight + "px";
54+
wrapper1.setAttribute("data-sync-height", String(maxHeight));
55+
wrapper2.setAttribute("data-sync-height", String(maxHeight));
56+
};
5657

57-
const observer = new ResizeObserver(cb);
58+
cb();
5859

59-
observer.observe(target);
60+
const cleanCb = () => {
61+
typedTarget.__observeCallback?.delete(cb);
62+
if (typedTarget.__observeCallback?.size === 0) {
63+
typedTarget.__observeInstance?.disconnect();
64+
target.removeAttribute("data-observe");
65+
delete typedTarget.__observeCallback;
66+
delete typedTarget.__observeInstance;
67+
}
68+
};
6069

61-
target.setAttribute("data-observe", "height");
70+
if (typedTarget.__observeCallback) {
71+
typedTarget.__observeCallback.add(cb);
6272

63-
clean = () => {
64-
observer.disconnect();
65-
target?.removeAttribute("data-observe");
66-
};
73+
clean = cleanCb;
74+
return;
6775
}
68-
});
6976

70-
onCleanup(() => {
71-
clean();
72-
clearTimeout(timer);
73-
});
77+
typedTarget.__observeCallback = new Set();
78+
79+
typedTarget.__observeCallback.add(cb);
80+
81+
const observer = new ResizeObserver(() => typedTarget.__observeCallback?.forEach((cb) => cb()));
82+
83+
typedTarget.__observeInstance = observer;
84+
85+
observer.observe(target);
86+
87+
target.setAttribute("data-observe", "height");
88+
89+
clean = cleanCb;
90+
}
91+
92+
onCleanup(() => clean());
7493
}
7594
};
7695

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export const DiffSplitContentLine = defineComponent(
3838

3939
const currentLineHasHidden = ref(currentLine.value?.isHidden);
4040

41-
const currentLineHasContent = ref(currentLine.value.lineNumber);
41+
const currentLineHasContent = ref(currentLine.value?.lineNumber);
4242

4343
const currentSyntaxLine = ref(
4444
props.side === SplitSide.old
@@ -49,7 +49,7 @@ export const DiffSplitContentLine = defineComponent(
4949
const currentPlainLine = ref(
5050
props.side === SplitSide.old
5151
? props.diffFile.getOldPlainLine(currentLine.value?.lineNumber)
52-
: props.diffFile.getNewPlainLine(currentLine.value.lineNumber)
52+
: props.diffFile.getNewPlainLine(currentLine.value?.lineNumber)
5353
);
5454

5555
useSubscribeDiffFile(props, (diffFile) => {
@@ -72,7 +72,7 @@ export const DiffSplitContentLine = defineComponent(
7272

7373
currentLineHasHidden.value = currentLine.value?.isHidden;
7474

75-
currentLineHasContent.value = currentLine.value.lineNumber;
75+
currentLineHasContent.value = currentLine.value?.lineNumber;
7676
});
7777

7878
const onOpenAddWidget = (lineNumber: number, side: SplitSide) => setWidget({ side: side, lineNumber: lineNumber });
@@ -132,8 +132,8 @@ export const DiffSplitContentLine = defineComponent(
132132
<DiffContent
133133
enableWrap={false}
134134
diffFile={props.diffFile}
135-
rawLine={currentLine.value.value}
136-
diffLine={currentLine.value.diff}
135+
rawLine={currentLine.value?.value || ''}
136+
diffLine={currentLine.value?.diff}
137137
plainLine={currentPlainLine.value}
138138
syntaxLine={currentSyntaxLine.value}
139139
enableHighlight={enableHighlight.value}

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

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,6 @@ export const DiffSplitContentLine = defineComponent(
4646

4747
const hasHidden = ref(oldLine.value?.isHidden && newLine.value?.isHidden);
4848

49-
const oldLineIsDelete = ref(oldLine.value?.diff?.type === DiffLineType.Delete);
50-
51-
const newLineIsAdded = ref(newLine.value?.diff?.type === DiffLineType.Add);
52-
5349
useSubscribeDiffFile(props, (diffFile) => {
5450
oldLine.value = diffFile.getSplitLeftLine(props.index);
5551

@@ -69,10 +65,6 @@ export const DiffSplitContentLine = defineComponent(
6965
checkDiffLineIncludeChange(oldLine.value?.diff) || checkDiffLineIncludeChange(newLine.value?.diff);
7066

7167
hasHidden.value = oldLine.value?.isHidden && newLine.value?.isHidden;
72-
73-
oldLineIsDelete.value = oldLine.value?.diff?.type === DiffLineType.Delete;
74-
75-
newLineIsAdded.value = newLine.value?.diff?.type === DiffLineType.Add;
7668
});
7769

7870
const onOpenAddWidget = (lineNumber: number, side: SplitSide) => setWidget({ side: side, lineNumber: lineNumber });
@@ -84,13 +76,17 @@ export const DiffSplitContentLine = defineComponent(
8476

8577
const hasNewLine = !!newLine.value?.lineNumber;
8678

87-
const oldLineContentBG = getContentBG(false, oldLineIsDelete.value, hasDiff.value);
79+
const oldLineIsDelete = oldLine.value?.diff?.type === DiffLineType.Delete;
80+
81+
const newLineIsAdded = newLine.value?.diff?.type === DiffLineType.Add;
82+
83+
const oldLineContentBG = getContentBG(false, oldLineIsDelete, hasDiff.value);
8884

89-
const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete.value, hasDiff.value);
85+
const oldLineNumberBG = getLineNumberBG(false, oldLineIsDelete, hasDiff.value);
9086

91-
const newLineContentBG = getContentBG(newLineIsAdded.value, false, hasDiff.value);
87+
const newLineContentBG = getContentBG(newLineIsAdded, false, hasDiff.value);
9288

93-
const newLineNumberBG = getLineNumberBG(newLineIsAdded.value, false, hasDiff.value);
89+
const newLineNumberBG = getLineNumberBG(newLineIsAdded, false, hasDiff.value);
9490

9591
return (
9692
<tr data-line={props.lineNumber} data-state={hasDiff.value ? "diff" : "plain"} class="diff-line">
@@ -137,8 +133,8 @@ export const DiffSplitContentLine = defineComponent(
137133
<DiffContent
138134
enableWrap={true}
139135
diffFile={props.diffFile}
140-
rawLine={oldLine.value.value}
141-
diffLine={oldLine.value.diff}
136+
rawLine={oldLine.value?.value}
137+
diffLine={oldLine.value?.diff}
142138
plainLine={oldPlainLine.value}
143139
syntaxLine={oldSyntaxLine.value}
144140
enableHighlight={enableHighlight.value}
@@ -199,8 +195,8 @@ export const DiffSplitContentLine = defineComponent(
199195
<DiffContent
200196
enableWrap={true}
201197
diffFile={props.diffFile}
202-
rawLine={newLine.value.value || ""}
203-
diffLine={newLine.value.diff}
198+
rawLine={newLine.value?.value || ""}
199+
diffLine={newLine.value?.diff}
204200
plainLine={newPlainLine.value}
205201
syntaxLine={newSyntaxLine.value}
206202
enableHighlight={enableHighlight.value}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export const DiffSplitExtendLine = defineComponent(
1616

1717
const slots = useSlots();
1818

19-
const currentSide = computed(() => SplitSide[props.side]);
20-
2119
const lineSelector = computed(() => `div[data-line="${props.lineNumber}-extend-content"]`);
2220

2321
const lineWrapperSelector = computed(() => `tr[data-line="${props.lineNumber}-extend"]`);
@@ -36,7 +34,7 @@ export const DiffSplitExtendLine = defineComponent(
3634

3735
const newLineExtend = ref(extendData.value?.newFile?.[newLine.value.lineNumber]);
3836

39-
const currentItem = computed(() => (props.side === SplitSide.old ? oldLine.value : newLine.value));
37+
const currentItem = ref(props.side === SplitSide.old ? oldLine.value : newLine.value);
4038

4139
const currentIsHidden = ref(currentItem.value.isHidden);
4240

@@ -51,6 +49,8 @@ export const DiffSplitExtendLine = defineComponent(
5149

5250
enableExpand.value = diffFile.getExpandEnabled();
5351

52+
currentItem.value = props.side === SplitSide.old ? oldLine.value : newLine.value;
53+
5454
currentIsHidden.value = currentItem.value.isHidden;
5555
});
5656

@@ -70,10 +70,14 @@ export const DiffSplitExtendLine = defineComponent(
7070
() => (props.side === SplitSide.old ? !!oldLineExtend.value : !!newLineExtend.value) && currentIsShow.value
7171
);
7272

73+
const extendSide = computed(
74+
() => SplitSide[currentExtend.value ? props.side : props.side === SplitSide.new ? SplitSide.old : SplitSide.new]
75+
);
76+
7377
useSyncHeight({
7478
selector: lineSelector,
7579
wrapper: lineWrapperSelector,
76-
side: currentSide,
80+
side: extendSide,
7781
enable: currentIsShow,
7882
});
7983

0 commit comments

Comments
 (0)