1- import { useCallback , useEffect } from "react" ;
1+ import { useCallback , useEffect , useMemo } from "react" ;
22
33import type { DiffRowOrCollapsed } from "../types" ;
44
@@ -13,6 +13,7 @@ const MINIMAP_SCROLL_COLOR = "#7B7B7B80";
1313
1414type 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
2930export function useMinimapDraw ( {
3031 canvasRef,
32+ containerRef,
3133 height,
3234 miniMapWidth,
3335 leftDiff,
@@ -64,45 +66,67 @@ export function useMinimapDraw({
6466 ctx . fillRect ( x , y , width , ROW_HEIGHT ) ;
6567 } , [ ROW_HEIGHT ] ) ;
6668
67- // Draw the differences -> This will be called in drawScrollBox method
68- const drawDifferencesInMinimap = useCallback ( ( ctx : CanvasRenderingContext2D ) => {
69- const scale = height / totalLines ;
69+ const diffCanvas = useMemo ( ( ) => {
70+ const offscreen = document . createElement ( "canvas" ) ;
71+ offscreen . width = miniMapWidth ;
72+ offscreen . height = height ;
73+ const ctx = offscreen . getContext ( "2d" ) ;
74+ if ( ! ctx )
75+ return null ;
7076
71- if ( currentMatchIndex >= 0 && searchResults [ currentMatchIndex ] !== undefined ) {
72- const y = searchResults [ currentMatchIndex ] * scale ;
73- const lineHeight = Math . max ( 1 , scale ) ;
74- ctx . fillStyle = CURRENT_MATCH_COLOR ;
75- ctx . fillRect ( 0 , y , miniMapWidth , lineHeight ) ;
76- }
77+ const scale = height / totalLines ;
7778
79+ // left diff
7880 leftDiff . forEach ( ( line , index ) => {
7981 const y = index * scale ;
8082 drawLine ( ctx , line , y , 0 , miniMapWidth / 2 ) ;
8183 } ) ;
8284
85+ // right diff
8386 rightDiff . forEach ( ( line , index ) => {
8487 const y = index * scale ;
8588 drawLine ( ctx , line , y , miniMapWidth / 2 , miniMapWidth / 2 ) ;
8689 } ) ;
8790
91+ // search highlights
8892 searchResults . forEach ( ( index ) => {
8993 const y = index * scale ;
9094 const lineHeight = Math . max ( 1 , scale ) ;
9195 ctx . fillStyle = SEARCH_HIGHLIGHT_COLOR ;
9296 ctx . fillRect ( 0 , y , miniMapWidth , lineHeight ) ;
9397 } ) ;
94- } , [ height , totalLines , currentMatchIndex , searchResults , leftDiff , rightDiff , miniMapWidth , drawLine ] ) ;
9598
96- // Draw the scroll box and also differences in minimapo
97- const drawScrollBox = useCallback ( ( ctx : CanvasRenderingContext2D , color : string ) => {
98- const totalContentHeight = totalLines * ROW_HEIGHT ;
99- const viewportTop = ( currentScrollTop / totalContentHeight ) * height ;
100- 101- drawDifferencesInMinimap ( ctx ) ;
99+ return offscreen ;
100+ } , [ leftDiff , rightDiff , searchResults , height , totalLines , miniMapWidth , drawLine ] ) ;
102101
103- ctx . fillStyle = color ;
104- ctx . fillRect ( 0 , viewportTop , miniMapWidth , viewportHeight ) ;
105- } , [ totalLines , ROW_HEIGHT , currentScrollTop , height , drawDifferencesInMinimap , miniMapWidth , viewportHeight ] ) ;
102+ // Draw the scroll box and also differences in minimapo
103+ const drawScrollBox = useCallback (
104+ ( ctx : CanvasRenderingContext2D , color : string ) => {
105+ if ( ! diffCanvas )
106+ return ;
107+ 108+ // Copy pre-rendered diff
109+ ctx . clearRect ( 0 , 0 , miniMapWidth , height ) ;
110+ ctx . drawImage ( diffCanvas , 0 , 0 ) ;
111+ 112+ // Draw scroll box
113+ const totalContentHeight = totalLines * ROW_HEIGHT ;
114+ const viewportTop = ( currentScrollTop / totalContentHeight ) * height ;
115+ 116+ ctx . fillStyle = color ;
117+ ctx . fillRect ( 0 , viewportTop , miniMapWidth , viewportHeight ) ;
118+ 119+ // Draw current match highlight (optional)
120+ if ( currentMatchIndex >= 0 && searchResults [ currentMatchIndex ] !== undefined ) {
121+ const scale = height / totalLines ;
122+ const y = searchResults [ currentMatchIndex ] * scale ;
123+ const lineHeight = Math . max ( 1 , scale ) ;
124+ ctx . fillStyle = CURRENT_MATCH_COLOR ;
125+ ctx . fillRect ( 0 , y , miniMapWidth , lineHeight ) ;
126+ }
127+ } ,
128+ [ diffCanvas , currentScrollTop , totalLines , ROW_HEIGHT , height , miniMapWidth , viewportHeight , currentMatchIndex , searchResults ] ,
129+ ) ;
106130
107131 const drawMinimap = useCallback ( ( ) => {
108132 const canvas = canvasRef . current ;
@@ -116,12 +140,18 @@ export function useMinimapDraw({
116140 ctx . clearRect ( 0 , 0 , canvas . width , canvas . height ) ;
117141
118142 if ( ! isDragging . current ) {
143+ if ( containerRef . current ) {
144+ containerRef . current . style . opacity = "0.65" ;
145+ }
119146 drawScrollBox ( ctx , MINIMAP_SCROLL_COLOR ) ;
120147 }
121148 else {
149+ if ( containerRef . current ) {
150+ containerRef . current . style . opacity = "0.85" ;
151+ }
122152 drawScrollBox ( ctx , MINIMAP_HOVER_SCROLL_COLOR ) ;
123153 }
124- } , [ leftDiff , rightDiff , height , currentScrollTop , searchResults , currentMatchIndex , drawLine , viewportHeight ] ) ;
154+ } , [ drawScrollBox ] ) ;
125155
126156 useEffect ( ( ) => {
127157 drawMinimap ( ) ;
0 commit comments