Skip to content

fix: crop right whitespace from Ruby tab screenshot#324

Merged
takaokouji merged 3 commits intodevelopfrom
fix/screenshot-crop-right-whitespace
Mar 16, 2026
Merged

fix: crop right whitespace from Ruby tab screenshot#324
takaokouji merged 3 commits intodevelopfrom
fix/screenshot-crop-right-whitespace

Conversation

@takaokouji
Copy link

Summary

  • Ruby tab のスクリーンショットで、コード右側の大きな白余白をトリミングして除去
  • キャプチャ後にピクセル走査で最右端のコンテンツ列を検出し、Canvas API でクロップ
  • DOM 操作不要のため画面の乱れなし

Changes Made

  • cropRightWhitespace() 関数を追加(ruby-screenshot.js
    • createImageBitmap → Canvas getImageData で右端から列スキャン
    • アンチエイリアス対応(WHITE_THRESHOLD = 250)
    • パフォーマンス最適化(4行おきにサンプリング)
    • クロップ不要時(余白が少ない場合)は元の Blob をそのまま返却
  • downloadRubyAsImage() から cropRightWhitespace() を呼び出し
  • ユニットテスト 5 件追加

Test Coverage

  • cropRightWhitespace: クロップ動作、余白少ない場合のスキップ、アンチエイリアス検出、全面コンテンツ、デフォルトパディング
  • 既存テスト 15 件も引き続き pass(downloadRubyAsImagebeforeEach に Canvas/ImageBitmap モック追加)

Definition of Done

  • ユニットテスト pass(20/20)
  • lint pass
  • CI green
  • ブラウザ確認(Playwright MCP):
    • Ruby タブでスクリーンショット撮影し、右余白が削減されていること
    • 短いコード(1〜2行)でも正常に撮影できること
    • コンソールエラーが出ないこと

Scan pixel data after capture to find the rightmost non-white column,
then trim the image to that boundary plus a small padding. This removes
the large right-side whitespace that appeared when editor width exceeded
code length.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
Copy link

takaokouji and others added 2 commits March 16, 2026 18:19
The cursor line highlight and scrollbar span the full editor width,
which prevents cropRightWhitespace from detecting the true content
boundary. Temporarily set renderLineHighlight to 'none' and hide
scrollbars during capture.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Pixel scanning could not reliably detect the content boundary due to
Monaco's decorative elements (overview ruler, scrollbar, line highlight)
spanning the full editor width. Instead, measure the actual rendered
text and furigana span widths from the DOM before capture, then crop
the image to that width using Canvas API.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@takaokouji takaokouji merged commit a49b66f into develop Mar 16, 2026
9 checks passed
@takaokouji takaokouji deleted the fix/screenshot-crop-right-whitespace branch March 16, 2026 11:59
github-actions bot pushed a commit that referenced this pull request Mar 16, 2026
…t-crop-right-whitespace

fix: crop right whitespace from Ruby tab screenshot
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant