Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit f75d6a3

Browse files
feat: double scroll and minimap enabled
1 parent a82e650 commit f75d6a3

File tree

5 files changed

+44
-17
lines changed

5 files changed

+44
-17
lines changed

‎src/components/DiffViewer/components/DiffMinimap.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
4747

4848
const { drawMinimap, drawScrollBox } = useMinimapDraw({
4949
canvasRef,
50+
containerRef,
5051
height,
5152
miniMapWidth,
5253
leftDiff,
@@ -98,6 +99,7 @@ export const DiffMinimap: React.FC<DiffMinimapProps> = ({
9899
return (
99100
<div
100101
ref={containerRef}
102+
className="minimap-wrapper"
101103
style={{
102104
width: miniMapWidth,
103105
height,

‎src/components/DiffViewer/components/VirtualizedDiffViewer.tsx‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
2323
leftTitle,
2424
rightTitle,
2525
hideSearch,
26+
showSingleMinimap,
2627
onSearchMatch,
2728
differOptions,
2829
className,
@@ -194,7 +195,7 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
194195
</div>
195196

196197
{/* List & Minimap */}
197-
<div style={{ display: "flex", gap: "8px" }}>
198+
<div style={{ display: "flex", gap: "8px",position: "relative" }}>
198199
<List
199200
ref={listRef}
200201
className="virtual-json-diff-list-container"
@@ -209,16 +210,34 @@ export const VirtualizedDiffViewer: React.FC<VirtualizedDiffViewerProps> = ({
209210
{ViewerRow}
210211
</List>
211212

212-
<DiffMinimap
213-
leftDiff={leftView}
214-
rightDiff={rightView}
215-
height={height}
216-
miniMapWidth={miniMapWidth}
217-
currentScrollTop={scrollTop}
218-
searchResults={searchState.results}
219-
currentMatchIndex={searchState.currentIndex}
220-
onScroll={scrollTop => listRef.current?.scrollTo(scrollTop)}
221-
/>
213+
<div className="minimap-overlay">
214+
<div className="half left-map-holder">
215+
{!showSingleMinimap && (
216+
<DiffMinimap
217+
leftDiff={leftView}
218+
rightDiff={rightView}
219+
height={height}
220+
miniMapWidth={miniMapWidth}
221+
currentScrollTop={scrollTop}
222+
searchResults={searchState.results}
223+
currentMatchIndex={searchState.currentIndex}
224+
onScroll={scrollTop => listRef.current?.scrollTo(scrollTop)}
225+
/>
226+
)}
227+
</div>
228+
<div className="half right-map-holder">
229+
<DiffMinimap
230+
leftDiff={leftView}
231+
rightDiff={rightView}
232+
height={height}
233+
miniMapWidth={miniMapWidth}
234+
currentScrollTop={scrollTop}
235+
searchResults={searchState.results}
236+
currentMatchIndex={searchState.currentIndex}
237+
onScroll={scrollTop => listRef.current?.scrollTo(scrollTop)}
238+
/>
239+
</div>
240+
</div>
222241
</div>
223242

224243
{/* Hide All Expanded Lines Button */}

‎src/components/DiffViewer/hooks/useMinimapDraw.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ const MINIMAP_SCROLL_COLOR = "#7B7B7B80";
1313

1414
type Props = {
1515
canvasRef: React.RefObject<HTMLCanvasElement | null>;
16+
containerRef: React.RefObject<HTMLDivElement | null>;
1617
height: number;
1718
miniMapWidth: number;
1819
leftDiff: DiffRowOrCollapsed[];
@@ -28,6 +29,7 @@ type Props = {
2829

2930
export function useMinimapDraw({
3031
canvasRef,
32+
containerRef,
3133
height,
3234
miniMapWidth,
3335
leftDiff,
@@ -138,9 +140,15 @@ export function useMinimapDraw({
138140
ctx.clearRect(0, 0, canvas.width, canvas.height);
139141

140142
if (!isDragging.current) {
143+
if (containerRef.current) {
144+
containerRef.current.style.opacity = "0.65";
145+
}
141146
drawScrollBox(ctx, MINIMAP_SCROLL_COLOR);
142147
}
143148
else {
149+
if (containerRef.current) {
150+
containerRef.current.style.opacity = "0.85";
151+
}
144152
drawScrollBox(ctx, MINIMAP_HOVER_SCROLL_COLOR);
145153
}
146154
}, [leftDiff, rightDiff, height, currentScrollTop, searchResults, currentMatchIndex, drawLine, viewportHeight]);

‎src/components/DiffViewer/styles/JsonDiffCustomTheme.css‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -332,22 +332,19 @@
332332
align-items: center;
333333
}
334334

335-
.diff-viewer-container .minimap-overlay .left {
335+
.diff-viewer-container .minimap-overlay .left-map-holder {
336336
justify-content: flex-end;
337337
min-width: 334px;
338338
margin-right: 10px;
339339
}
340340

341-
.diff-viewer-container .minimap-overlay .right {
341+
.diff-viewer-container .minimap-overlay .right-map-holder {
342342
justify-content: flex-end;
343343
}
344344

345-
.diff-viewer-container .minimap-overlay .item {
346-
pointer-events: auto;
347-
}
348-
349345
.diff-viewer-container .minimap-overlay .item .minimap-wrapper {
350346
opacity: 0.65;
347+
pointer-events: auto;
351348
}
352349

353350
.diff-viewer-container .minimap-overlay .item .minimap-wrapper:hover {

‎src/components/DiffViewer/types/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ export type VirtualizedDiffViewerProps = {
4242
rightTitle?: string;
4343
onSearchMatch?: (index: number) => void;
4444
differOptions?: DifferOptions;
45+
showSingleMinimap?: boolean;
4546
className?: string;
4647
miniMapWidth?: number;
4748
inlineDiffOptions?: InlineDiffOptions;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /