Vim like window manager

Question

I'm trying to implement a window manager like vim does but in-browser with JavaScript. I got pretty much what I wanted working with jquery layout, but how I should manage my windows still elude me..

I can start with a single "window" and a empty buffer like vim does, then split it vertically or horizontally to get a split view of two or more buffers (or even a split view of the same buffer, just like vim) .. and this split one of the resulting window again to get 3 "windows".

Now my problem is that I have to remember the state of those windows and how they were split .. how can I know if it was one horizontal and two vertical split? Or vice versa ..

I just can't find any data structure that would fit what I need. I can express it with pseudo code though .. For example the previous example could be expressed either as [1|[2+3]] or [[1+2]|[3]] where "[]" means a window group, "|" means a vertical split and "+" means an horizontal split.

I just can't find where to start.. or how to express it programatically

Answer 1

Window Manager means a lot of different things to different people. I believe what you are asking about is how to have code which implements multiple rectangular windows on a single display. Begin by thinking in terms of what each window has to do:

class window {
    int x, y, width, height;   // where the window is
    int z;  // higher the number, the more forward it is on the stack of windows.
    CONTENT  *p;  // the contents of the window
}

Answer 2

How about this?

If each Window can be split only one time (and then each sub window split one time to make multiples, then how about a binary tree? C'ish Psuedocode tructure:

Node *toplevel_window;

struct Node 
{
   Node *child_1;
   Node *child_2;
   Position splitPercentage; // eg 50% if both children are the same size  
   Direction splitDirection; //Vertical or Horizontal
   Contents *content; //used for leaf level windows that have contents instad of more splits
}

Then the data structure for the example above would be: (assume all Percentages are 50%)

 toplevel_window {child1=Win1, child2=Win2, Direction=Vert, Contents = Null}
 Win1 {child1=null, child2=null, contents = whatever} 
 Win2 {child1=Win3, child2=Win4, Direction = Horiz, Contents = null}
 Win3 {child1=null,child2=null, Contents = whatever}
 Win4 {child1=null, child2=null Contents = whatever}

So each window either contains contents (a text file or whatever), or it contains two other subwindows and a split point.