Horizontal line between functions to seperate them

[SaschaMzH]

Hi

I use sublime to write python and c++ code.
The one think I am missing is to see whenever a function begins. At the moment, I use a comment line to seperate them. It would be nice if suplime can do this for me automaticaly.

Regards
Sascha

Example:

function A {}

---

function B {}

---

function C {}

[FichteFoll]

I suggest editing your color scheme to highlight function definitions more prominently, for example with a background color.

The Tubnil color scheme (from the Nil theme) does this and I love it.

[keith-hall]

This was also requested on the forums a few years ago, before Phantoms existed, so at the time it was considered impossible to achieve in a plugin, but now, one can use a plugin to do this rather than needing a change in core ST:

• Tools menu -> Developer -> New Plugin...
• Select all
• Replace with the following

import sublime
import sublime_plugin


class FunctionSeparatorListener(sublime_plugin.ViewEventListener):
    @classmethod
    def is_applicable(cls, settings):
        # no way to tell if the scope is `source` or `text` at this point, so just ignore Plain Text files...
        syntax = settings.get('syntax')
        return not syntax or not syntax.startswith('Packages/Plain Text/')

    phantomset = None
    def __init__(self, view):
        super().__init__(view)
        self.phantomset = sublime.PhantomSet(view)
        #self.on_modified_async()

    def on_modified_async(self):
        functions = self.view.find_by_selector('entity.name.function')
        line_b64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII=' # white point
        full_width = max(self.view.layout_extent()[0], self.view.viewport_extent()[0] + self.view.window_to_layout([0, 0])[0])
        phantoms = []
        prev_line_no = None
        for region in regions:
            line_no = self.view.rowcol(region.begin())[0]
            begin_line_above = sublime.Region(self.view.text_point(max(0, line_no - 1), 0)) # if it is the first line in the file, just put the line under the function name
            if line_no == prev_line_no: # skip multiple functions on the same line
                continue
            prev_line_no = line_no
            phantoms.append(sublime.Phantom(begin_line_above, '<img width="{}px" src="data:image/png;base64,{}" height="1px" />'.format(full_width, line_b64), sublime.LAYOUT_BLOCK))
        self.phantomset.update(phantoms)

    def on_activated_async(self):
        self.on_modified_async()

• save it, in the folder ST recommends (Packages/User/) as something like function_separators.py
• see something like this:

props to @r-stein for suggesting the base64 image, as <hr /> doesn't seem to be supported in minihtml at the moment.

[SaschaMzH]

Hey,
thats works for me.

Thanks!

@FichteFoll Mixed font-faces? Is the Nil theme doing that or you hacked it? Did not know possible.
@keith-hall How you change that one to show lines separating indentation levels? I think your famous plugin snippets would solve most of the "issues" around ST.

You guys don't get enough appreciation.

[FichteFoll]

@MEGADR01D The Operator Mono font has a very distinct italics style which I use for function calls. This is a modified version of said color scheme that I haven't pushed upstream yet.

Okay, thanks. First monospace font I saw having a cursive style for italics.

[natanfelles]

Can you say how to use a hexadecimal color and the line max width go just to the right ruler?

[natanfelles]

Also if the function have doc comment blocks how to put the line above them.

[keith-hall]

@natanfelles to get the max line width to go to the ruler and have it above doc comments, you can use this:

import sublime
import sublime_plugin
from Default import comment


class FunctionSeparatorListener(sublime_plugin.ViewEventListener):
    @classmethod
    def is_applicable(cls, settings):
        # no way to tell if the scope is `source` or `text` at this point, so just ignore Plain Text files...
        syntax = settings.get('syntax')
        return not syntax or not syntax.startswith('Packages/Plain Text/')

    phantomset = None
    def __init__(self, view):
        super().__init__(view)
        self.phantomset = sublime.PhantomSet(view)
        #self.on_modified_async()

    def on_modified_async(self):
        regions = self.view.find_by_selector('entity.name.function')
        line_b64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAMSURBVBhXY/j//z8ABf4C/qc1gYQAAAAASUVORK5CYII=' # white single pixel image
        # get the full scrollable width of the view
        full_width = max(self.view.layout_extent()[0], self.view.viewport_extent()[0] + self.view.window_to_layout([0, 0])[0])
        # if rulers are defined, use the last ruler position instead
        rulers = self.view.settings().get('rulers', [])
        if len(rulers) > 0:
            full_width = self.view.em_width() * rulers[-1]
        # loop through each region
        phantoms = []
        for region in regions:
            begin_line_above = sublime.Region(self.view.text_point(max(0, self.view.rowcol(region.begin())[0] - 1), 0)) # if it is the first line in the file, just put the line under the function name
            # put the horizontal separator line above doc comments
            while begin_line_above.begin() > 0 and self.view.match_selector(comment.advance_to_first_non_white_space_on_line(self.view, begin_line_above.begin()), 'comment.block.documentation, comment.line.documentation'):
                begin_line_above = self.view.line(begin_line_above.begin() - 1)
            # add the phantom
            phantoms.append(sublime.Phantom(begin_line_above, '<img width="{}px" src="data:image/png;base64,{}" height="1px" />'.format(full_width, line_b64), sublime.LAYOUT_BLOCK))
        self.phantomset.update(phantoms)

    def on_activated_async(self):
        self.on_modified_async()

as it relies on a pre-made image, I don't know of a way to get it to work with any hex color you specify - atm you'll have to create a new one pixel image with the desired color and use that. (I tried tinting the image like https://codepen.io/jr/pen/rliKq but couldn't get it to work in ST.)

@MEGADR01D I haven't forgotten your request to have it based on indentation level, I'm still looking into it :)

@keith-hall No worries, man. It was out of curiosity, don't lose your sleep over it. Thanks again.

as it relies on a pre-made image, I don't know of a way to get it to work with any hex color you specify - atm you'll have to create a new one pixel image with the desired color and use that.

Why not use a em dash or underscore?

[keith-hall]

Nice idea. I've just tried it, but the height of the phantom becomes much taller, plus there is a visible gap between each character, and it doesn't quite look right IMO:

[natanfelles]

Uowll, @keith-hall! Very thanks, bro!!!

About the horizontal rule color. And, if you want to think about, if is possible to do a horizontal rule with the same color of the vertical rule automatically. My PHP code:

Theme One Dark and

line_b64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOxAAADsQBlSsOGwAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAANSURBVAiZY7CwcfkPAAMgAbhwNSGnAAAAAElFTkSuQmCC'