fix: widen diff gutter for large line numbers

packages/diff-view/src/parts/CursorConstants/CursorConstants.ts

@@ -2,7 +2,7 @@ import type { DiffViewState } from '../DiffViewState/DiffViewState.ts'
 
 const DefaultCharWidth = 9
 export const LineHeight = 20
-export const GutterPaddingWidth = 20
+export const GutterPaddingWidth = 28
 export const RowPaddingLeft = 12
 
 export const getCharWidth = (state: DiffViewState): number => {

packages/diff-view/src/parts/RenderCss/RenderCss.ts

@@ -58,7 +58,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   const scrollBarThumbTop = getScrollBarThumbTop(height, scrollBarHeight, deltaY, finalDeltaY)
   const { layout } = newState
   const gutterWidth = 'var(--GutterWidth)'
-  const gutterPaddingWidth = 20
+  const gutterPaddingWidth = CursorConstants.GutterPaddingWidth
   const inlineGutterExtraWidth = 9 + gutterPaddingWidth
   const showLineNumbers = lineNumbers && renderModeLeft === 'text' && renderModeRight === 'text'
   const rightCursorGutterWidth = showLineNumbers ? gutterWidthVariable + CursorConstants.GutterPaddingWidth : 0

packages/diff-view/test/GetCursorPositionFromCoordinates.test.ts

@@ -12,7 +12,7 @@ test('getCursorPositionFromCoordinates computes cursor position in horizontal la
     y: 20,
   }
 
-  const result = getCursorPositionFromCoordinates(state, 10 + 100 + 18 + 20 + 12 + 27, 20 + 40)
+  const result = getCursorPositionFromCoordinates(state, 10 + 100 + 18 + 28 + 12 + 27, 20 + 40)
 
   expect(result).toEqual({
     cursorColumnIndex: 3,
@@ -31,7 +31,7 @@ test('getCursorPositionFromCoordinates computes cursor position in vertical layo
     y: 20,
   }
 
-  const result = getCursorPositionFromCoordinates(state, 10 + 18 + 20 + 12 + 18, 20 + 100 + 60)
+  const result = getCursorPositionFromCoordinates(state, 10 + 18 + 28 + 12 + 18, 20 + 100 + 60)
 
   expect(result).toEqual({
     cursorColumnIndex: 2,
@@ -48,7 +48,7 @@ test('getCursorPositionFromCoordinates includes minLineY', (): void => {
     y: 0,
   }
 
-  const result = getCursorPositionFromCoordinates(state, 9 + 20 + 12, 40)
+  const result = getCursorPositionFromCoordinates(state, 9 + 28 + 12, 40)
 
   expect(result).toEqual({
     cursorColumnIndex: 0,

packages/diff-view/test/HandleClickAt.test.ts

@@ -12,7 +12,7 @@ test('handleClickAt focuses the editable right side for horizontal layout clicks
     x: 10,
   }
 
-  const result = handleClickAt(state, 10 + 40 + 18 + 20 + 12 + 27, 40, '')
+  const result = handleClickAt(state, 10 + 40 + 18 + 28 + 12 + 27, 40, '')
 
   expect(result).toMatchObject({
     focus: DiffEditorWhenExpression.FocusDiffEditorText,
@@ -45,7 +45,7 @@ test('handleClickAt focuses the editable right side for vertical layout clicks',
     y: 10,
   }
 
-  const result = handleClickAt(state, 18 + 20 + 12 + 18, 10 + 40 + 60, '')
+  const result = handleClickAt(state, 18 + 28 + 12 + 18, 10 + 40 + 60, '')
 
   expect(result).toMatchObject({
     focus: DiffEditorWhenExpression.FocusDiffEditorText,

packages/diff-view/test/HandleClickRightSide.test.ts

@@ -9,7 +9,7 @@ test('handleClickRightSide focuses the editable right side', (): void => {
     totalLineCountRight: 2,
   }
 
-  const result = handleClickRightSide(state, 41, 20)
+  const result = handleClickRightSide(state, 49, 20)
 
   expect(result).toMatchObject({
     focus: DiffEditorWhenExpression.FocusDiffEditorText,
@@ -29,7 +29,7 @@ test('handleClickRightSide increments focusVersion when already focused', (): vo
     totalLineCountRight: 3,
   }
 
-  const result = handleClickRightSide(state, 98, 40)
+  const result = handleClickRightSide(state, 106, 40)
 
   expect(result).toMatchObject({
     focus: DiffEditorWhenExpression.FocusDiffEditorText,

packages/diff-view/test/RenderCssCursor.test.ts

@@ -33,7 +33,7 @@ test('renderCss sets right cursor position css variables', (): void => {
   const result = renderCss(oldState, newState)
 
   expect(result[2]).toContain('.EditorCursorRight {')
-  expect(result[2]).toContain('--CursorLeft: 77px;')
+  expect(result[2]).toContain('--CursorLeft: 85px;')
   expect(result[2]).toContain('--CursorTop: 20px;')
   expect(result[2]).toContain('left: var(--CursorLeft);')
   expect(result[2]).toContain('top: var(--CursorTop);')

packages/diff-view/test/RenderCssGutterWidth.test.ts

@@ -13,6 +13,6 @@ test('renderCss exposes gutter width as a css variable and uses it for gutter si
   const result = renderCss(oldState, newState)
 
   expect(result[2]).toContain('--GutterWidth: 27px;')
-  expect(result[2]).toContain('width: calc(var(--GutterWidth) + 20px);')
+  expect(result[2]).toContain('width: calc(var(--GutterWidth) + 28px);')
   expect(result[2]).toContain('.InlineDiffEditor .DiffEditorGutter {')
 })

packages/e2e/src/diff.cursor-position-click-large-y.ts

@@ -17,6 +17,6 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato
 
   await Command.execute('DiffView.handleClickRightSide', -100, 100_000)
 
-  await expect(cursor).toHaveCSS('left', '41px')
+  await expect(cursor).toHaveCSS('left', '49px')
   await expect(cursor).toHaveCSS('top', '40px')
 }

packages/e2e/src/diff.cursor-position-click-negative-x-and-y.ts

@@ -15,6 +15,6 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato
 
   await Command.execute('DiffView.handleClickRightSide', -100, -100)
 
-  await expect(cursor).toHaveCSS('left', '41px')
+  await expect(cursor).toHaveCSS('left', '49px')
   await expect(cursor).toHaveCSS('top', '0px')
 }

packages/e2e/src/diff.cursor-position-click-negative-x.ts

@@ -17,6 +17,6 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato
 
   await Command.execute('DiffView.handleClickRightSide', -100, 120)
 
-  await expect(cursor).toHaveCSS('left', '41px')
+  await expect(cursor).toHaveCSS('left', '49px')
   await expect(cursor).toHaveCSS('top', '40px')
 }

packages/e2e/src/diff.gutter-width-large-line-numbers.ts

@@ -0,0 +1,31 @@
+import type { Test } from '@lvce-editor/test-with-playwright'
+
+type TestContext = Readonly<Parameters<Test>[0]>
+
+const getContent = (lineCount: number): string => {
+  if (lineCount === 1) {
+    return 'line 1'
+  }
+
+  return `${'x\n'.repeat(lineCount - 1)}x`
+}
+
+const expectGutterWidth = async ({ DiffView, expect, FileSystem, Locator, Workspace }: TestContext, lineCount: number, expectedWidth: string): Promise<void> => {
+  const tmpDir = await FileSystem.getTmpDir()
+  await FileSystem.writeFile(`${tmpDir}/before-${lineCount}.txt`, '')
+  await FileSystem.writeFile(`${tmpDir}/after-${lineCount}.txt`, getContent(lineCount))
+  await Workspace.setPath(tmpDir)
+
+  await DiffView.open(`${tmpDir}/before-${lineCount}.txt`, `${tmpDir}/after-${lineCount}.txt`)
+
+  const gutter = Locator('.DiffEditorContentRight .DiffEditorGutter')
+  await expect(gutter).toHaveCSS('width', expectedWidth)
+}
+
+export const name = 'diff.gutter-width-large-line-numbers'
+
+export const test: Test = async (api) => {
+  await expectGutterWidth(api, 1, '37px')
+  await expectGutterWidth(api, 10_000, '73px')
+  await expectGutterWidth(api, 1_000_000, '91px')
+}

packages/e2e/src/diff.set-cursor-position.ts

@@ -15,6 +15,6 @@ export const test: Test = async ({ Command, DiffView, expect, FileSystem, Locato
 
   await Command.execute('DiffView.setCursorPosition', 3, 2)
 
-  await expect(cursor).toHaveCSS('left', '68px')
+  await expect(cursor).toHaveCSS('left', '76px')
   await expect(cursor).toHaveCSS('top', '40px')
 }