✨ Minimap

[austincondiff]

Description

The Minimap provides a compact visual summary of your code, helping you quickly get a sense of the file’s structure and flow. It appears along the right edge of the editor and lets you instantly jump to different parts of the file by clicking or dragging within the highlighted view area.

Implement the visual display system for the Minimap in the source editor. The Minimap should provide a vertically compressed, non-interactive rendering of the entire file's syntax structure. It visually represents the document using color rectangles, offering users an overview for orientation and navigation.

Requirements

• Display a vertical Minimap next to the code editor view

• The Minimap should:

  • Represent the full document using only color rectangles, not text
  • Use syntax highlighting colors from the active theme
  • Dynamically reflect updates in the main editor (insert, delete, scroll, etc.)

• Scrolling and navigation:

  • Scrolling the editor updates the Minimap viewport
  • Clicking or dragging in the Minimap scrolls the editor to the corresponding position
  • A translucent viewport rectangle highlights the currently visible section of the document

• Selection handling:

  • If there is no selection, highlight the current line
  • If there is a text selection, highlight the selected range
  • If there are multiple selections, show all selection ranges

• Integration with editor features:

  • Display search result locations (e.g., from Find/Replace)
  • Display error and warning markers (e.g., from diagnostics)
  • Indicate folded regions if any exist

• Behavior and customization:

  • The Minimap should be toggleable in editor settings

Implementation Details

• Rendering should be GPU-accelerated or use offscreen rendering for performance
• Consider lazy rendering or caching for large files to reduce memory and CPU usage
• The Minimap should not allow direct text editing
• Rendering of syntax highlight colors can reuse the existing tokenization model

Additional Context

This feature provides users with a consistent and performant way to understand the overall structure of their code. It is especially helpful in long files and serves as a complement to navigation and issue reporting systems in the editor.

This lays the foundation for future enhancements such as semantic structure previews, bookmarks, and inline annotations inside the Minimap.

Screenshots

Resources

• VSCode minimap documentation
• Xcode's Minimap
• Xcode documentation
• CodeEditorView minimap source

Related Issues

• Introduce Override Layout Behavior API CodeEditTextView#84

[nanashili]

This is do able just not sure where to do it or where to add it in the codebase

[Carlos-Mero]

Actually I'd prefer the minimap like Xcode rather than VScode. The minimap of Xcode contains more useful features and looks cleaner and much more beautiful. It will definitely take more work to make one like that, but I believe you'll love it too.

[tjkohli]

@Yellow-GGG I agree the Xcode minimap is far more useful; however at the same time I think it may be wiser to ship a minimap with minimal functionality and then add complexity in future releases.

[austincondiff]

@tjkohli I completely agree. We need to get something in place first, then we can iterate and improve.

[Eliulm]

Hey @austincondiff, could you assign this to me? I already got some of the CodeEditorView code working:

[Eliulm]

This is the current state of the minimap. Still a lot of bugs to fix, but I am getting there slowly...

Screen.Recording.2023-04-11.at.13.17.24.mov

@thecoolwinter I need to set the bounds of the visibleRange in STTextview+VisibleRange to the visibleBounds of the MinimapView conditionally. How should I rewrite the code, so that I can pass props to visibleTextRange variable?

[austincondiff]

Looks great! Where are we with this?

[Eliulm]

Unfortunately, I have had little time recently, since I am currently working on my degree.

I have decided that I am going re-implement the minimap in textkit2, instead of textkit1, since the resizing was very laggy. I have also encountered multiple issues like #184, which need to be resolved first, so that the minimap can work properly.

[austincondiff]

@Eliulm are you willing to finish this? If not can you provide the code so we can pick up where you left off?

Edit: I just realized this was done back when we were using STTextView. We are using our own text view. I'd still be interested in seeing what you have though if you still have it.

[thecoolwinter]

I'm going to be taking this on, here's my basic plan (I'll be going a similar direction to CodeEditorView like mentioned above):

The minimap is basically another TextView, except it lays out and renders it's lines using small dots. Because the layout manager is related to the text storage now, we can have the minimap and textview share a storage, but each have their own layout information.

The outline of required changes:

• Create an API to allow for overriding layout and drawing for the layout manager cetv pr
• Create a Minimap View that tells the layout manager about it's available space, and draws text as small dots
• Overlay the minimap view on the scrollview in CESE
• Create a 'viewport' view that tracks the scroll offset of the editor, and matches it on the minimap.