Part-2: Encapsule Schema Window Manager (Knockout.js Goodness)

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.

Encapsule Schema window manager dev. build screenshot

Encapsule Schema window manager dev. build screenshot

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”.

The first splitter is handed the rectangle of it’s client area, told if it should split horizontally or vertically, and is additionally handed one or two window declaration(s) extracted from the declared layout Javascript object. The algorithm negotiates with the window(s) to determine what they require (based on modes and other stuff), and then affects the split of the client area assigning new client rectangles to the window(s). If there’s unallocated space after the split is completed, it’s handed to the next splitter in the list and the process repeats until all available space in the original client rectangle has been allocated.

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.

Advertisements

About Chris Russell

http://www.chrisrussell.net
This entry was posted in Internet, Open Source, Software and tagged , , , , , . Bookmark the permalink.

One Response to Part-2: Encapsule Schema Window Manager (Knockout.js Goodness)

  1. Off-by-one pixel alignment issues in layout were actually off-by-N-pixelS where the displacement N relates to margin, border, and padding of the inner-most DIV container. One would think that a DIV declared with position: fixed; top: 50%; left: 50% would always be centered such that non-zero border/margin/padding widths would expand from the center possibly being clipped or spilling out of the boundaries of their container. But no. These dimensions are applied from the upper-left corner. Just needed to compensate for this behavior and now everything is right where it should be.

Comment on this article

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s