Need help with minimap?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

atom-minimap
630 Stars 136 Forks MIT License 2.3K Commits 47 Opened issues

Description

A preview of the full source code.

Services available

!
?

Need anything else?

Contributors list

CI APM Version APM Downloads

Minimap package

A preview of the full source code.

Minimap Screenshot In the screenshot above the minimap-git-diff and minimap-highlight-selected plugins are activated.

Installation

apm install minimap

Features

  • Service-based Plugin API: Use the plugin generation command and start developing your plugin right away.
  • Decoration API: Use the same API to manage
    TextEditor
    and
    Minimap
    decorations.
  • Canvas-based Rendering: Simple, fast and flexible.
  • Stand-alone Mode: Wants to display a preview of a text editor in your UIs, use a stand-alone version of the Minimap.

Available Plugins

Below is the list of available plugins so far:

| Package | Description | | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Auto-Hider | Hides the Minimap while editing. | | Bookmarks | Displays Atom bookmarks. | | Code Glance | Shows the code that's under the mouse cursor when hovering the Minimap. | | Cursor Line | Highlights the line with cursor. | | Find And Replace | Displays the search matches. | | Git Diff | Displays the file diff. | | Google-Repo-Diff-Minimap | A Minimap binding for the google-repo-diff package and google-repo package. | | GPool-Diff-Minimap | A minimap binding for the gpool-diff package. | | Hide on inactive panes | Hide the Minimap when pane isn't focus. | | Highlight Selected | A Minimap binding for the highlight-selected package. | | Linter | Displays linter markers. | | Pigments | Displays the Pigments colors. | | Quick-Highlight | Shows multiple selections done with the quick-highlight package. | | Selection | Display the buffer's selections. | | Split-Diff | A Minimap binding for the split-diff package. |

Settings

Show Minimap on Atom Start

If checked the Minimap is displayed on Atom startup.

(default=true)

Device Pixel Ratio Rounding

If checked the

devicePixelRatio
will be rounded using
Math.floor
.
(default=true)

Display Code Highlights

If checked the code will be highlighted using the grammar tokens.

(default=true)

|

true
|
false
| | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | | | |

Display Minimap On Left

If checked the Minimap appears on the left side of editors, otherwise it appears on the right side.

(default=false)

|

true
|
false
| | ----------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | | |

Char Height

The height of a character in the Minimap in pixels.

(default=2)

|

1px
|
2px
|
4px
| | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | | | |

Char Width

The width of a character in the Minimap in pixels.

(default=1)

|

1px
|
2px
| | ---------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | | |

Interline

The space between lines in the Minimap in pixels.

(default=1)

|

1px
|
2px
| | --------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | | |

Text Opacity

The opacity used to render the line text in the Minimap.

(default=0.6)

|

0.6
|
1
| | ---------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | | | |

Ignore Whitespaces In Tokens

When enabled, text editor tokens are rendered as plain blocks, with no regards to the whitespaces they contains.

(default=false)

|

false
|
true
| | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- | | | |

Display Plugins Controls

If checked, the Minimap plugins can be activated/deactivated from the Minimap settings view and a quick settings dropdown will be available on the top right corner of the Minimap.

(default=true)

You need to restart Atom for this setting to be effective.

Minimap Scroll Indicator

Toggles the display of a side line showing which part of the buffer is currently displayed by the Minimap. The side line appear only if the Minimap height is bigger than the editor view height.

(default=true)

Plugins *

When plugins are installed, a setting is created for each to enable/disable them directly from the Minimap settings view.

Plugins * Decorations Z-Index

When several plugins create decorations for the same layer, the general rule is to render the decorations as follows:

  • On the background layer, the
    line
    decorations are rendered before the
    highlight-under
    decorations.
  • On the foreground layer, the
    highlight-over
    decorations are rendered before the
    highlight-outine
    decorations.
  • When two plugins adds the same type of decorations at the same place, the decorations are rendered in the order they have been created.

But fortunately, it's possible to reorder decorations on their specific layer using these settings. These settings works as a

z-index
in CSS, the higher the value, the higher the decorations will be in the render stack, for instance, a plugin's decorations with an order value of
1
will appear above decorations from a plugin with an order value of
0
.

Smooth Scrolling

Whether to offset the minimap canvas when scrolling to keep the scroll smooth. When

true
the minimap canvas will be offseted, resulting in a smoother scroll, but with the side-effect of a blurry minimap when the canvas is placed between pixels. When
false
the canvas will always stay at the same position, and will never look blurry, but the scroll will appear more jagged.
(default=true)

|

true
|
false
| | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | | |

Scroll Animation

Enable animations when scrolling the editor by clicking on the Minimap.

(default=false)

Scroll Animation Duration

Duration of the scroll animation when clicking on the Minimap.

(default=300)

Independent Minimap Scroll On Mouse Wheel Events

When enabled, using the mouse wheel over the Minimap will make it scroll independently of the text editor. The Minimap will still sync with the editor whenever the editor is scrolled, but it will no longer relay the mouse wheel events to the editor.

(default=false)

Scroll Sensitivity

The scrolling speed when the

Independent Minimap Scroll On Mouse Wheel Events
setting is enabled.
(default=0.5)

Use Hardware Acceleration

If checked the Minimap scroll is done using a

translate3d
transform, otherwise the
translate
transform is used.
(default=true)

Adjust Minimap Width To Soft Wrap

If this option is enabled and Soft Wrap is checked then the Minimap max width is set to the Preferred Line Length value.

(default=true)

Adjust Minimap Width Only When Smaller

If this option and

adjustMinimapWidthToSoftWrap
are enabled the minimap width will never go past the limit sets by CSS. On the other hand, when disabled the minimap will expand to honor the preferred line width.
(default=true)

Absolute Mode

When enabled the Minimap uses an absolute positioning, letting the editor's content flow below the Minimap.

(default=false)

Note that this setting will do nothing if

Display Minimap On Left
is also enabled.

|

false
|
true
| | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | | | |

Adjust Absolute Mode Height

When enabled and

Absolute Mode
is also enabled, the minimap height will be adjusted to only take the space required by the text editor content, leaving the space below triggering mouse events on the text editor.
(default=false)

Be aware this can have some impact on performances as the minimap canvases will be resized every time a change in the editor make its height change.

Key Bindings

The Minimap package doesn't provide any default keybindings. But you can define your own as demonstrated below:

'atom-workspace':
  'cmd-m': 'minimap:toggle'
  'ctrl-alt-cmd-j': 'minimap:generate-javascript-plugin'
  'ctrl-alt-cmd-b': 'minimap:generate-babel-plugin'
  'ctrl-alt-cmd-c': 'minimap:generate-coffee-plugin'

Tweaking The Minimap

Hiding scrollbars

If you want to hide the default editor scrollbar, edit your

style.less
(Open Your Stylesheet) and use the following snippet:
atom-text-editor[with-minimap] .vertical-scrollbar {
  display: none;
}

Changing the Minimap's background

minimap-custom-background

atom-text-editor atom-text-editor-minimap {
  background: green;
}

Changing the color of the Minimap's
visible-area

minimap-custom-background

atom-text-editor atom-text-editor-minimap .minimap-visible-area::after {
  background-color: rgba(0, 255, 0, 0.5);
}

Changing the color of the Minimap's
scroll-indicator

minimap-custom-background

atom-text-editor atom-text-editor-minimap .minimap-scroll-indicator {
  background-color: green;
}

Adding an opaque background to the minimap in absolute mode with adjusted height

With both

absoluteMode
and
adjustAbsoluteModeHeight
settings are enabled, the canvases in the minimap won't necessarily takes the whole editor's height.
atom-text-editor,
html  {
  atom-text-editor-minimap canvas:first-child {
    background: @syntax-background-color;
  }
}

Disabling mouse interactions when in absolute mode

If you want to prevent to catch the mouse pointer when the

absoluteMode
setting is enabled you can use the following snippet to do so:
atom-text-editor atom-text-editor-minimap {
  pointer-events: none;
}

atom-text-editor atom-text-editor-minimap .minimap-visible-area { pointer-events: auto; }

The visible area will still allow interaction but the Minimap track won't.

Making Minimap visible only in the focused pane

You can put the following code in your user stylesheet to achieve this effect:

atom-text-editor {
  atom-text-editor-minimap {
    display: none;
  }

&.is-focused { atom-text-editor-minimap { display: block; } } }

Make Minimap Visible area display like Sublime Text

Put the following code in your user stylesheet to make your minimap look like Sublime text. It's more easy to view when you have code hightlight in minimap.

|

Default State (Hidden)
|
Hover
|
Only display Visible area when hover or click/drag event.
| | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------: | | | | |
atom-text-editor,
html {
  atom-text-editor-minimap {
    .minimap-visible-area {
      background-color: #7c7c7c;
      // Color of Visible area.
      opacity: 0;
      // Default 0 when you not working with minimap
      cursor: default;
      // Change cursor style to pointer.
      transition: 0.5s opacity;
      // Better UI.
      &:hover {
        opacity: 0.2;
      } // Only display Minimap visible area when working.
      &:active {
        cursor: default;
      } // Change cursor when dragging.
    }
    &:hover {
      .minimap-visible-area {
        opacity: 0.2;
        transition: opacity 1s;
      } // When Hover to all minimap area, visible area will display.
    }

&:active {
  .minimap-visible-area {
    opacity: 0.2;
    transition: opacity 0.5s;
  } // Display Minimap visible area when dragging.
}

} }

ASCII Art Comments

One neat trick is to use ASCII art to create huge comments visible in the minimap. This is really efficient when navigating huge files.

ASCII Art Comments

To generate these comments you can use on these useful Atom packages:

Developers Documentation

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.