|
| 1 | +import { checkDiffLineIncludeChange, DiffLineType, SplitSide, type DiffFile } from "@git-diff-view/core"; |
| 2 | +import { |
| 3 | + borderColorName, |
| 4 | + emptyBGName, |
| 5 | + expandLineNumberColorName, |
| 6 | + getContentBG, |
| 7 | + getLineNumberBG, |
| 8 | + plainLineNumberColorName, |
| 9 | +} from "@git-diff-view/utils"; |
| 10 | +import { createEffect, createSignal, onCleanup, Show } from "solid-js"; |
| 11 | + |
| 12 | +import { useEnableAddWidget, useEnableHighlight, useOnAddWidgetClick } from "../hooks"; |
| 13 | + |
| 14 | +import { DiffSplitAddWidget } from "./DiffAddWidget"; |
| 15 | +import { DiffContent } from "./DiffContent"; |
| 16 | +import { useDiffWidgetContext } from "./DiffWidgetContext"; |
| 17 | + |
| 18 | +export const DiffSplitContentLine = (props: { index: number; diffFile: DiffFile; lineNumber: number }) => { |
| 19 | + const [_, setWidget] = useDiffWidgetContext() || []; |
| 20 | + |
| 21 | + const enableAddWidget = useEnableAddWidget(); |
| 22 | + |
| 23 | + const enableHighlight = useEnableHighlight(); |
| 24 | + |
| 25 | + const onAddWidgetClick = useOnAddWidgetClick(); |
| 26 | + |
| 27 | + const [oldLine, setOldLine] = createSignal(props.diffFile.getSplitLeftLine(props.index)); |
| 28 | + |
| 29 | + const [newLine, setNewLine] = createSignal(props.diffFile.getSplitRightLine(props.index)); |
| 30 | + |
| 31 | + const [oldSyntaxLine, setOldSyntaxLine] = createSignal(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0)); |
| 32 | + |
| 33 | + const [newSyntaxLine, setNewSyntaxLine] = createSignal(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0)); |
| 34 | + |
| 35 | + const [oldPlainLine, setOldPlainLine] = createSignal(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0)); |
| 36 | + |
| 37 | + const [newPlainLine, setNewPlainLine] = createSignal(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0)); |
| 38 | + |
| 39 | + const [hasDiff, setHasDiff] = createSignal(!!oldLine()?.diff || !!newLine()?.diff); |
| 40 | + |
| 41 | + const [hasChange, setHasChange] = createSignal( |
| 42 | + checkDiffLineIncludeChange(oldLine().diff) || checkDiffLineIncludeChange(newLine().diff) |
| 43 | + ); |
| 44 | + |
| 45 | + const [hasHidden, setHasHidden] = createSignal(oldLine()?.isHidden && newLine()?.isHidden); |
| 46 | + |
| 47 | + const [oldLineIsDelete, setOldLineIsDelete] = createSignal(oldLine()?.diff?.type === DiffLineType.Delete); |
| 48 | + |
| 49 | + const [newLineIsAdded, setNewLineIsAdded] = createSignal(newLine()?.diff?.type === DiffLineType.Add); |
| 50 | + |
| 51 | + createEffect(() => { |
| 52 | + const init = () => { |
| 53 | + setOldLine(props.diffFile.getSplitLeftLine(props.index)); |
| 54 | + setNewLine(props.diffFile.getSplitRightLine(props.index)); |
| 55 | + setOldSyntaxLine(props.diffFile.getOldSyntaxLine(oldLine()?.lineNumber || 0)); |
| 56 | + setNewSyntaxLine(props.diffFile.getNewSyntaxLine(newLine()?.lineNumber || 0)); |
| 57 | + setOldPlainLine(props.diffFile.getOldPlainLine(oldLine()?.lineNumber || 0)); |
| 58 | + setNewPlainLine(props.diffFile.getNewPlainLine(newLine()?.lineNumber || 0)); |
| 59 | + setHasDiff(!!oldLine()?.diff || !!newLine()?.diff); |
| 60 | + setHasChange(checkDiffLineIncludeChange(oldLine().diff) || checkDiffLineIncludeChange(newLine().diff)); |
| 61 | + setHasHidden(oldLine()?.isHidden && newLine()?.isHidden); |
| 62 | + setOldLineIsDelete(oldLine()?.diff?.type === DiffLineType.Delete); |
| 63 | + setNewLineIsAdded(newLine()?.diff?.type === DiffLineType.Add); |
| 64 | + }; |
| 65 | + |
| 66 | + init(); |
| 67 | + |
| 68 | + const cb = props.diffFile.subscribe(init); |
| 69 | + |
| 70 | + onCleanup(cb); |
| 71 | + }); |
| 72 | + |
| 73 | + const onOpenAddWidget = (lineNumber: number, side: SplitSide) => setWidget?.({ side: side, lineNumber: lineNumber }); |
| 74 | + |
| 75 | + return ( |
| 76 | + <Show when={!hasHidden()}> |
| 77 | + <tr data-line={props.lineNumber} data-state={hasDiff() ? "diff" : "plain"} class="diff-line"> |
| 78 | + {oldLine().lineNumber ? ( |
| 79 | + <> |
| 80 | + <td |
| 81 | + class="diff-line-old-num group relative w-[1%] min-w-[40px] select-none pl-[10px] pr-[10px] text-right align-top" |
| 82 | + style={{ |
| 83 | + "background-color": getLineNumberBG(false, oldLineIsDelete(), hasDiff()), |
| 84 | + color: `var(${hasDiff() ? plainLineNumberColorName : expandLineNumberColorName})`, |
| 85 | + }} |
| 86 | + > |
| 87 | + {hasDiff() && enableAddWidget() && ( |
| 88 | + <DiffSplitAddWidget |
| 89 | + index={props.index} |
| 90 | + lineNumber={oldLine().lineNumber || 0} |
| 91 | + side={SplitSide.old} |
| 92 | + diffFile={props.diffFile} |
| 93 | + onWidgetClick={onAddWidgetClick} |
| 94 | + class="absolute left-[100%] z-[1] translate-x-[-50%]" |
| 95 | + onOpenAddWidget={onOpenAddWidget} |
| 96 | + /> |
| 97 | + )} |
| 98 | + <span data-line-num={oldLine().lineNumber} style={{ opacity: hasChange() ? undefined : 0.5 }}> |
| 99 | + {oldLine().lineNumber} |
| 100 | + </span> |
| 101 | + </td> |
| 102 | + <td |
| 103 | + class="diff-line-old-content group relative pr-[10px] align-top" |
| 104 | + style={{ "background-color": getContentBG(false, oldLineIsDelete(), hasDiff()) }} |
| 105 | + data-side={SplitSide[SplitSide.old]} |
| 106 | + > |
| 107 | + {hasDiff() && enableAddWidget() && ( |
| 108 | + <DiffSplitAddWidget |
| 109 | + index={props.index} |
| 110 | + lineNumber={oldLine().lineNumber || 0} |
| 111 | + side={SplitSide.old} |
| 112 | + diffFile={props.diffFile} |
| 113 | + onWidgetClick={onAddWidgetClick} |
| 114 | + class="absolute right-[100%] z-[1] translate-x-[50%]" |
| 115 | + onOpenAddWidget={onOpenAddWidget} |
| 116 | + /> |
| 117 | + )} |
| 118 | + <DiffContent |
| 119 | + enableWrap={true} |
| 120 | + diffFile={props.diffFile} |
| 121 | + rawLine={oldLine().value || ""} |
| 122 | + diffLine={oldLine().diff} |
| 123 | + plainLine={oldPlainLine()} |
| 124 | + syntaxLine={oldSyntaxLine()} |
| 125 | + enableHighlight={!!enableHighlight()} |
| 126 | + /> |
| 127 | + </td> |
| 128 | + </> |
| 129 | + ) : ( |
| 130 | + <td |
| 131 | + class="diff-line-old-placeholder select-none" |
| 132 | + style={{ "background-color": `var(${emptyBGName})` }} |
| 133 | + colspan={2} |
| 134 | + > |
| 135 | + <span> </span> |
| 136 | + </td> |
| 137 | + )} |
| 138 | + {newLine().lineNumber ? ( |
| 139 | + <> |
| 140 | + <td |
| 141 | + class="diff-line-new-num group relative w-[1%] min-w-[40px] select-none border-l-[1px] pl-[10px] pr-[10px] text-right align-top" |
| 142 | + style={{ |
| 143 | + "background-color": getLineNumberBG(newLineIsAdded(), false, hasDiff()), |
| 144 | + color: `var(${hasDiff() ? plainLineNumberColorName : expandLineNumberColorName})`, |
| 145 | + "border-left-color": `var(${borderColorName})`, |
| 146 | + "border-left-style": "solid", |
| 147 | + }} |
| 148 | + > |
| 149 | + {hasDiff() && enableAddWidget() && ( |
| 150 | + <DiffSplitAddWidget |
| 151 | + index={props.index} |
| 152 | + lineNumber={newLine().lineNumber || 0} |
| 153 | + side={SplitSide.new} |
| 154 | + diffFile={props.diffFile} |
| 155 | + // TODO test |
| 156 | + onWidgetClick={onAddWidgetClick} |
| 157 | + class="absolute left-[100%] z-[1] translate-x-[-50%]" |
| 158 | + onOpenAddWidget={onOpenAddWidget} |
| 159 | + /> |
| 160 | + )} |
| 161 | + <span data-line-num={newLine().lineNumber} style={{ opacity: hasChange() ? undefined : 0.5 }}> |
| 162 | + {newLine().lineNumber} |
| 163 | + </span> |
| 164 | + </td> |
| 165 | + <td |
| 166 | + class="diff-line-new-content group relative pr-[10px] align-top" |
| 167 | + style={{ "background-color": getContentBG(newLineIsAdded(), false, hasDiff()) }} |
| 168 | + data-side={SplitSide[SplitSide.new]} |
| 169 | + > |
| 170 | + {hasDiff() && enableAddWidget() && ( |
| 171 | + <DiffSplitAddWidget |
| 172 | + index={props.index} |
| 173 | + lineNumber={newLine().lineNumber || 0} |
| 174 | + side={SplitSide.new} |
| 175 | + diffFile={props.diffFile} |
| 176 | + onWidgetClick={onAddWidgetClick} |
| 177 | + class="absolute right-[100%] z-[1] translate-x-[50%]" |
| 178 | + onOpenAddWidget={onOpenAddWidget} |
| 179 | + /> |
| 180 | + )} |
| 181 | + <DiffContent |
| 182 | + enableWrap={true} |
| 183 | + diffFile={props.diffFile} |
| 184 | + rawLine={newLine().value || ""} |
| 185 | + diffLine={newLine().diff} |
| 186 | + plainLine={newPlainLine()} |
| 187 | + syntaxLine={newSyntaxLine()} |
| 188 | + enableHighlight={!!enableHighlight()} |
| 189 | + /> |
| 190 | + </td> |
| 191 | + </> |
| 192 | + ) : ( |
| 193 | + <td |
| 194 | + class="diff-line-new-placeholder select-none border-l-[1px]" |
| 195 | + style={{ |
| 196 | + "background-color": `var(${emptyBGName})`, |
| 197 | + "border-left-color": `var(${borderColorName})`, |
| 198 | + "border-left-style": "solid", |
| 199 | + }} |
| 200 | + colspan={2} |
| 201 | + > |
| 202 | + <span> </span> |
| 203 | + </td> |
| 204 | + )} |
| 205 | + </tr> |
| 206 | + </Show> |
| 207 | + ); |
| 208 | +}; |
0 commit comments