OLD | NEW |
1 #!mojo mojo:sky | 1 #!mojo mojo:sky |
2 <import src="sky:core" as="sky"/> | 2 <import src="sky:core" as="sky"/> |
3 <script> | 3 <script> |
4 class BeehiveLayoutManager extends sky.LayoutManager { | 4 class BeehiveLayoutManager extends sky.LayoutManager { |
5 function layout(width, height) { | 5 function layout(width, height) { |
6 this.markAsLaidOut(); | |
7 if (width == null) | 6 if (width == null) |
8 width = this.getIntrinsicWidth().value; | 7 width = this.getIntrinsicWidth().value; |
9 let autoHeight = false; | 8 let autoHeight = false; |
10 if (height == null) { | 9 if (height == null) { |
11 height = 0; | 10 height = 0; |
12 autoHeight = true; | 11 autoHeight = true; |
13 } | 12 } |
14 this.assumeDimensions(width, height); | 13 this.assumeDimensions(width, height); |
15 let cellCount = this.node.getProperty('beehive-count'); | 14 let cellCount = this.node.getProperty('beehive-count'); |
16 let cellDim = width / cellCount; | 15 let cellDim = width / cellCount; |
17 let children = this.walkChildren(); | 16 let children = this.walkChildren(); |
18 let loop = children.next(); | 17 let loop = children.next(); |
19 let x = 0; | 18 let x = 0; |
20 let y = 0; | 19 let y = 0; |
21 while (!loop.done) { | 20 while (!loop.done) { |
22 let child = loop.value; | 21 let child = loop.value; |
23 if (child.needsLayout || child.descendantNeedsLayout) { | 22 if (child.needsLayout) { |
24 child.layoutManager.layout(cellDim, cellDim); | 23 child.layoutManager.layout(cellDim, cellDim); |
25 // we ignore the size the child reported from layout(), and force it to
the cell dimensions | 24 // we ignore the size the child reported from layout(), and force it to
the cell dimensions |
26 this.setChildSize(child, cellDim, cellDim); | 25 this.setChildSize(child, cellDim, cellDim); |
| 26 } else if (child.descendantNeedsLayout) { |
| 27 child.layoutManager.layoutDescendants(); |
| 28 this.setChildSize(child, cellDim, cellDim); |
27 } | 29 } |
28 this.setChildPosition(child, x * cellDim + (y % 2) * cellDim/2, y * 3/4 *
cellDim); | 30 this.setChildPosition(child, x * cellDim + (y % 2) * cellDim/2, y * 3/4 *
cellDim); |
29 x += 1; | 31 x += 1; |
30 if (x > cellCount) { | 32 if (x > cellCount) { |
31 y += 1; | 33 y += 1; |
32 x = 0; | 34 x = 0; |
33 } | 35 } |
34 loop = children.next(); | 36 loop = children.next(); |
35 } | 37 } |
36 if (height == 0) | 38 if (height == 0) |
37 height = (1 + y * 3/4) * cellDim; | 39 height = (1 + y * 3/4) * cellDim; |
| 40 this.markAsLaidOut(); |
38 return { | 41 return { |
39 width: width, | 42 width: width, |
40 height: height, | 43 height: height, |
41 } | 44 } |
42 } | 45 } |
43 function getIntrinsicHeight() { | 46 function getIntrinsicHeight() { |
44 let height = this.node.getProperty('height'); | 47 let height = this.node.getProperty('height'); |
45 if (typeof height != 'number') { | 48 if (typeof height != 'number') { |
46 // e.g. height: auto | 49 // e.g. height: auto |
47 width = this.getIntrinsicWidth().value; | 50 width = this.getIntrinsicWidth().value; |
(...skipping 92 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
140 div { display: beehive; beehive-count: 3; } | 143 div { display: beehive; beehive-count: 3; } |
141 </style> | 144 </style> |
142 <div> | 145 <div> |
143 <t>Hello</t> | 146 <t>Hello</t> |
144 <t>World</t> | 147 <t>World</t> |
145 <t>How</t> | 148 <t>How</t> |
146 <t>Are</t> | 149 <t>Are</t> |
147 <t>You</t> | 150 <t>You</t> |
148 <t>Today?</t> | 151 <t>Today?</t> |
149 </div> | 152 </div> |
OLD | NEW |