Skip to content

Minimap #302

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 21 commits into
base: main
Choose a base branch
from
Open

Minimap #302

wants to merge 21 commits into from

Conversation

thecoolwinter
Copy link
Collaborator

@thecoolwinter thecoolwinter commented Apr 11, 2025

Description

Note

Requires CodeEditApp/CodeEditTextView#84 to work.

Adds a minimap to the editor.

Specific changes:

  • Created a new MinimapView. This view acts as the container view for the entire minimap contents including the separator, text bubbles, and scroll view.
  • New classes for the minimap:
    • MinimapContentView Displays the real contents of the minimap. The layout manager and selection manager place views and draw into this view.
    • MinimapLineRenderer uses the new layout overriding APIs to render small bubbles rather than text for the minimap. This delegates all bubble calculation and drawing to a custom view MinimapLineFragmentView.
    • MinimapLineFragmentView is a subclass of LineFragmentView that calculates and draws bubbles instead of text based on the foreground color of the line fragment it displays.
  • Added a new showMinimap parameter to TextViewController and CodeEditSourceEditor types.
  • Moved all content inset calculation to two methods.
    • updateContentInsets updates all relevant content insets for the scroll view, find panel, and minimap in one central place. This method is deterministic and builds on work @austincondiff and I discussed.
    • updateTextInsets updates the text view's insets.

Example app:

  • Added minimap toggle
  • Moved toggles and settings to it's own view, it was getting large.

Related Issues

Checklist

  • Render minimap.
  • Make minimap scrollable.
  • Add 'visible pane' to minimap.
  • Add selections to minimap.
  • I read and understood the contributing guide as well as the code of conduct
  • The issues this PR addresses are related to each other
  • My changes generate no new warnings
  • My code builds and runs on my machine
  • My changes are all related to the related issue above
  • I documented my code

Screenshots

Demo resizing & toggling minimap with selections being drawn and responding to scrolling.

Screen.Recording.2025-04-17.at.10.19.14.AM.mov

Demo scrolling a long document

minimap-long-demo.mp4

Demo editing text, with selections, dragging, and syntax highlighting. Note that syntax highlights haven't been updated to highlight the entire minimap visible region. That will be done, but adding to this PR I think will complicate this PR too much.

minimap-editing-demo.mp4

@thecoolwinter thecoolwinter marked this pull request as draft April 11, 2025 14:34
@thecoolwinter thecoolwinter marked this pull request as ready for review April 17, 2025 15:32
@thecoolwinter thecoolwinter marked this pull request as draft April 17, 2025 15:34
@thecoolwinter
Copy link
Collaborator Author

This is nearly ready, I've discovered some odd behavior when using the minimap in CodeEdit. I'm going to mark this as a draft again until I can resolve those.

@austincondiff
Copy link
Collaborator

austincondiff commented Apr 17, 2025

Looks amazing! Can you also provide a screen recording of scrolling through a long file? Also, does the position update when opening the find panel?

@thecoolwinter
Copy link
Collaborator Author

Looks amazing! Can you also provide a screen recording of scrolling through a long file? Also, does the position update when opening the find panel?

Yes and yes!

@thecoolwinter thecoolwinter marked this pull request as ready for review April 18, 2025 15:50
Copy link
Collaborator

@austincondiff austincondiff left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow, very impressive! I can see a lot of consideration went into this. Great work!

There are just a few minor issues I have noted.

@@ -9,15 +9,6 @@
"version" : "0.1.20"
}
},
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this removed? I think this is also causing tests to fail.

cursorPositions: $cursorPositions,
useThemeBackground: true,
highlightProviders: [treeSitterClient],
contentInsets: NSEdgeInsets(top: proxy.safeAreaInsets.top, left: 0, bottom: 28.0, right: 0),
useSystemCursor: useSystemCursor
additionalTextInsets: NSEdgeInsets(top: 1, left: 0, bottom: 1, right: 0),
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why just 1pt on the top and bottom?

@@ -0,0 +1,119 @@
//
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am glad to see this being separated out. I was going to do this but didn't get around to it. I might however call this StatusBar.swift since it exists at the bottom. It does contain configuration, but mostly line number and language being used.

@@ -9,15 +9,6 @@
"version" : "0.1.20"
}
},
{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, I don't think this should have been removed.

@@ -16,8 +16,9 @@ let package = Package(
dependencies: [
// A fast, efficient, text view for code.
.package(
url: "https://github.com/CodeEditApp/CodeEditTextView.git",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh I see, looks like you accidentally committed dev code.

@@ -10,13 +10,11 @@ import CodeEditTextView

extension TextViewController: FindPanelTarget {
func findPanelWillShow(panelHeight: CGFloat) {
scrollView.contentInsets.top += panelHeight
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool!

Comment on lines +31 to +35
minimapView = MinimapView(textView: textView, theme: theme)
minimapView.postsFrameChangedNotifications = true
minimapView.isHidden = !showMinimap
scrollView.addFloatingSubview(minimapView, for: .vertical)

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we follow the convention of setUpHighlighter() and setUpTextFormation() and break this into a setUpMinimap() function? We might do this same with the findPanel with setUpFindPanel(). Idk if it is that cut and dry though.

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.

2 participants