Permalink
Browse files

Changed APIs, wip

  • Loading branch information...
1 parent d7c458a commit 2cefe68b56b9ec3aa56ff37187bc35040fb54b55 @jtaby jtaby committed Jun 29, 2011
Showing with 95 additions and 245 deletions.
  1. +14 −16 lib/mixins/layout_support.js
  2. +54 −125 lib/system/layout_manager.js
  3. +27 −104 tests/system/layout_manager.js
@@ -25,20 +25,6 @@ UI.LayoutSupport = SC.Mixin.create(
layoutManager: UI.LayoutManager.create(),
- render: function(buffer) {
- var layoutManager = this._getLayoutManager();
-
- var layout = this._layout = layoutManager.layoutFor({
- anchor: get(this,'anchor'),
- width: get(this,'width'),
- height: get(this,'height')
- });
-
- this._applyLayout(buffer,layout);
-
- return this._super();
- },
-
_getLayoutManager: function() {
if (this._managerCache) return this._managerCache;
var manager = null,
@@ -54,17 +40,29 @@ UI.LayoutSupport = SC.Mixin.create(
return this._managerCache = manager || UI.rootLayoutManager;
},
- _applyLayout: function(buffer,layout) {
+ applyLayout: function(buffer,layout) {
buffer.style('position','absolute');
for (var prop in layout) {
buffer.style(prop,layout[prop]);
}
},
+ render: function(buffer) {
+ var layoutManager = this._getLayoutManager();
+
+ var layout = this._layout = layoutManager.layoutForAnchor(this, get(this,'anchor'), {
+ size: get(this,'size')
+ });
+
+ this.applyLayout(buffer,layout);
+
+ return this._super();
+ },
+
destroy: function() {
var manager = this._getLayoutManager();
- manager.cleanUpLayout(this._layout);
+ //manager.cleanUpLayout(this._layout);
return this._super();
}
@@ -10,176 +10,105 @@ var get = SC.get;
/**
@class
- Overview
- ==========
-
- UI.LayoutManager manages the allocation of available space to the views.
- Views can be anchored to: top, right, bottom, left, or fill. If they are
- anchored to "fill", they will stretch to fill the available space. If they
- are anchored to any of the other sides, UI.LayoutManager will determine
- the dimensions and/or position they need to apply to fill their desired
- space.
-
- For example, if a view is anchored to the top of an empty space and has a
- height of 50px, UI.LayoutManager will give it a layout of:
-
- {
- top: 0,
- right: 0,
- left: 0,
- height: 50
- }
-
- If you then anchor a view to the left with a width of 250px, it will have a
- layout of:
-
- {
- top: 50,
- bottom: 0,
- left: 0,
- width: 250
- }
-
- Notice that it has a top of 50px: That is because UI.LayoutManager already
- knows that the top 50px of the available space is already allocated, and
- accounts for it.
-
- Usage
- ===========
-
- Usually you will not interact directlly with UI.LayoutManager. Instead, you
- will mix-in UI.LayoutSupport to your view, and it will take care of the
- talking to UI.LayoutManager and setting the appropriate styles on the
- element.
-
@extends SC.Object
*/
UI.LayoutManager = SC.Object.extend(
/** @scope UI.LayoutManager.prototype */{
- /**
- A hash containing the top/left/right/bottom values which define the
- available space for views to live in.
-
- @type Hash
- */
- _availableSpace: null,
+ _direction: null,
- init: function() {
-
- this._availableSpace = {top:0,left:0,right:0,bottom:0};
-
- return this._super();
- },
-
- /**
- A hash containing the top/left/right/bottom values which define the
- available space for views to live in.
+ _anchors: null,
- @type Hash
- */
_propertyMetadata: {
top: {
constraint: 'height',
+ direction: 'vertical',
opposite: 'bottom',
neighbors: ['left','right']
},
right: {
constraint: 'width',
+ direction: 'horizontal',
opposite: 'left',
neighbors: ['top','bottom']
},
bottom: {
constraint: 'height',
+ direction: 'vertical',
opposite: 'top',
neighbors: ['left','right']
},
left: {
constraint: 'width',
+ direction: 'horizontal',
opposite: 'right',
neighbors: ['top','bottom']
- },
- fill: {
- neighbors: ['top', 'left','right','bottom']
}
},
+
- /**
- A hash containing the top/left/right/bottom values which define the
- available space for views to live in.
+ init: function() {
+ this._anchors = [];
+ return this._super();
+ },
- @type Hash
- */
- layoutFor: function(options) {
- var anchor = options.anchor;
- var layout = {
- anchor: anchor
- };
+ layoutForAnchor: function(view, anchor, options) {
+ var direction = this._direction,
+ meta = this._propertyMetadata[anchor],
+ neighbors = meta.neighbors,
+ size = options.size,
+ anchors = this._anchors,
+ layout = {};
- this._consumeSpace(layout, options);
- return layout;
- },
+ if (anchor === 'contentView') {
+ return this._layoutForContentView(view, anchor, options);
+ }
+
+ if ( ((anchor === 'top' || anchor === 'bottom') && direction === 'horizontal') ||
+ ((anchor === 'left' || anchor === 'right') && direction === 'vertical')) {
+ throw new SC.Error("You can't setup a horizontal anchor in a vertical view and vice versa.");
+ }
- /**
- A hash containing the top/left/right/bottom values which define the
- available space for views to live in.
+ if (size === undefined || size === null) { throw new SC.Error("Anchors require a size property"); }
- @type Hash
- */
- _consumeSpace: function(layout, options){
- var space = this._availableSpace;
+ layout[anchor] = 0;
+ layout[meta.constraint] = size;
- var anchor = options.anchor;
- var meta = this._propertyMetadata[anchor];
- var opposite = meta.opposite;
- var neighbors = meta.neighbors;
+ this._direction = meta.direction;
+ this._anchors[anchor] = this._anchorMetaForView(view);
- layout[anchor] = space[anchor];
-
- for (var i=0,l=meta.neighbors.length; i<l; i++) {
+ for (var i=0,l=neighbors.length; i<l; i++) {
var neighbor = neighbors[i];
- layout[neighbor] = space[neighbor];
+ layout[neighbor] = 0;
}
- var constraint = meta.constraint;
- var constraintValue = options[constraint];
+ return layout;
+ },
- if (constraintValue !== undefined && constraintValue !== null) {
- layout[constraint] = constraintValue;
- space[anchor] += constraintValue;
- }
- else {
- layout[opposite] = space[opposite];
+ destroyAnchor: function(view) {
+ var anchors = this._anchors;
+
+ for (var i=0, l=anchors.length; i<l; i++) {
+ var anchor = anchors[i];
+
+ if (anchor.view === view) {
+ this._cleanupAnchor(anchor, i);
+ break;
+ }
}
},
- /**
- If a view is destroyed, then reclaim the space that it lives in.
-
- @param {Hash} layout Usually, you pass into cleanUpLayout the same
- layout hash that was returned from layoutFor()
- */
- cleanUpLayout: function(layout) {
- var anchor = layout.anchor;
- var space = this._availableSpace;
- var meta = this._propertyMetadata[anchor];
- var constraint = meta.constraint;
- var constraintValue = layout[constraint];
-
- if (constraintValue !== undefined && constraintValue !== null) {
- space[anchor] -= layout[constraint];
+ _anchorMetaForView: function(view) {
+ return {
+ view: view,
+ before: 0,
+ after: 0
}
- }
-});
+ },
-/**
- @class
+ _cleanupAnchor: function(anchor, index) {
- A singleton instance of UI.LayoutManager used for managing the global
- layout of the window. If there is no view in the view hierarchy of an
- SC.View which mixes-in UI.LayoutSupport, then this instance will be
- used instead.
+ }
+});
- You will not usually use this class directly.
-*/
UI.rootLayoutManager = UI.LayoutManager.create();
Oops, something went wrong.

0 comments on commit 2cefe68

Please sign in to comment.