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