Sublime text custom layout tutorial : inside out with examples

SublimeText3 editor is something that I am using on daily basis. I must say that is one of fastest editor that I have ever used. One way if you want to be more productiv is to setup custom layout in diffrent develepment mode (coding, reviewing code, debuging etc).

If you open console and type window.get_layout() you will get something like this :

{
    'cols': [0.0,0.5,1.0],
    'rows': [0.0,0.5,1.0],
    'cells': [
        [0,0,1,1],
        [1,0,2,1],
        [0,1,1,2],
        [1,1,2,2]
    ]
}

So what does it means? How is mapped your layout? It is pretty simple. Lets start 🙂

First thing is to know how sublime calculate window space. So let’s see coordinates :

Upper left  corner (0,0)
Upper right corner (1,0)
Lower left  corner (0,1)
Lower right conrer (1,1)

So span from left to right have value 1. If you want to have something on middle than value it’s going to be 0.5. ok 🙂

Default layout of ST3 have one column and one row, so values are : cols: [0,1], rows: [0,1] . Think that as there is vertical line on left side (0) and vertical line on right side (1) and same thing for horizontal line. Example :

cols : [0,1]
rows : [0,1]

    0                  1  cols
 0  +------------------+
    |                  |
    |                  |
    |                  |
    |                  |
    |                  |
    |                  |
 1  +------------------+
rows

Lets add vertical divison on middle :

     0        0.5        1  cols : [0, 0.5, 1]
 0   +---------+---------+
     |         |         |
     |         |         |
     |         |         |
     |         |         |
     |         |         |
     |         |         |
 1   +---------+---------+
rows : [0, 1]

Ok, so now we know how to create coordinates but we want to create layout based on that coordinates. Layout have groups of parts where we can open files ad tabs etc. Each group has it’s own index. Example of index :

+----------------+----------------+
|                |                |
|                |                |
|       0        |       1        |
|                |                |
|                |                |
+----------------+----------------+
|                |                |
|                |                |
|       2        |       3        |
|                |                |
|                |                |
+----------------+----------------+

Lets create layout from previus example. We have coordinates needed to for that ->

cols   : [0, 0.5, 1] 
rows   : [0, 0.5, 1]
index  : [0,   1, 2]

all we have to do next is to create cells part.

Cell are created as [ col_index_left, row_index_top, col_index_right, row_index_bottom ]

Lets create cell 0 : [0, 0, 1, 1] so this means that this cell will be at column index 0 (value: 0) to colum index 1 (value: 0.5), row index 0 (value: 0) to row index 1 (value: 0.5). Other cells :

cell 1 : [1, 0, 2, 1]
cell 2 : [0, 1, 1, 2]
cell 3 : [1, 1, 2, 2]

When we put it all together :

{
    'cols': [0.0,0.5,1.0],
    'rows': [0.0,0.5,1.0],
    'cells': [
        [0,0,1,1],
        [1,0,2,1],
        [0,1,1,2],
        [1,1,2,2]
    ]
}

Lets experiment, for example you want to create layout like this :

+-----------+---------------------+
|           |                     |
|           |                     |
|           |                     |
|     0     |          1          |
|           |                     |
|           |                     |
|           |                     |
+-----------+---------+-----------+
|                     |           |
|                     |           |
|                     |           |
|           2         |    3      |
|                     |           |
|                     |           |
|                     |           |
+---------------------+-----------+

Lets create cordinates :

cols : [0, 0.33333333, 0.66666666, 1]
rows : [0, 0.5, 1]

So we have coordinates like this :

     0         0.3333   0.6666         1  cols
  0  +-----------+---------+-----------+
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
0.5  +---------------------------------+
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
     |           |         |           |
  1  +-----------+---------+-----------+
rows

now we need to create cells :

cell 0 : [0,0,1,1]
cell 1 : [1,0,3,1]
cell 2 : [0,1,2,2]
cell 3 : [2,1,3,2]

So all together :

{
    'cols': [0,0.33333333,0.66666666,1],
    'rows': [0.0,0.5,1.0],
    'cells': [
        [0,0,1,1],
        [1,0,3,1],
        [0,1,2,2],
        [2,1,3,2]
    ]
}

Result layout for that is :

You can assign custom key shortcode for that or you can set it via console. Open console and run this :

window.set_layout({'cols': [0,0.33333333,0.66666666,1],'rows': [0.0,0.5,1.0],'cells': [[0,0,1,1],[1,0,3,1],[0,1,2,2],[2,1,3,2]]})

Happy sublime coding in your new layout 🙂