You can demo a snapshot of the build pictured in the screenshot here: http://www.chrisrussell.net/html5/schema-5/schema.html // Please visit the Encapsule Project Blog for more details about what this app is going to do.
I’ve still got an off-by-one pixel alignment issue getting the client area windows correctly centered within their frames. As well, the outer edges of the windows (the darker opaque frames around the client windows) need to be offset so that they do not have co-incident edges.
I need to think about the off-by-one issue some more: there’s a lot of tricky math already going on to position everything and the routine that’s actually responsible for allocating rectangular clients withing a given frame looks right to me (and seems correct in all cases except for the client windows which are off-by-one pixel).
Offsetting the edges of the windows is actually fairly tricky given the way that the layout algorithm separates concerns; the entire “plane” shown in the screen shot is described by an ordered list of “splitters”.
You can see this working yourself: In the demo link above click anywhere on the background image to show Schema’s debug log.
I need to give some more thought to how best to impart enough context to the splitters to add the appropriate spacing(s) to offset the windows from each other within the layout. Or, figure out some clever post processing of what I’ve got to affect these tweaks (but this is tricky because it would require another pass through the existing layout engine because the declared extent of a window in the layout is honored (i.e. if you say you want a 107px-wide vertical window, the client area will be 107px’s (regardless of extents of the chrome surrounding the window and any offset spacing that’s added to separate the edges).
This can wait. This afternoon, I’m going to start to plug in actual windows from my application and see how that works before investing more time tweaking the layout engine.