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 if (width == null) | 6 if (width == null) |
7 width = this.getIntrinsicWidth().value; | 7 width = this.getIntrinsicWidth().value; |
8 let autoHeight = false; | 8 let autoHeight = false; |
9 if (height == null) { | 9 if (height == null) { |
10 height = 0; | 10 height = 0; |
(...skipping 94 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
105 canvas.closePath(); | 105 canvas.closePath(); |
106 canvas.clip(); | 106 canvas.clip(); |
107 child.paint(canvas); | 107 child.paint(canvas); |
108 } finally { | 108 } finally { |
109 canvas.restore(); | 109 canvas.restore(); |
110 } | 110 } |
111 } | 111 } |
112 loop = children.next(); | 112 loop = children.next(); |
113 } | 113 } |
114 } | 114 } |
| 115 function inHex(topLeftX, topLeftY, width, height, hitX, hitY) { |
| 116 let centerX = topLeftX - width/2; |
| 117 let absCenteredHitX = Math.abs(hitX - centerX); |
| 118 if (absCenteredHitX > width/2) |
| 119 return false; |
| 120 let centerY = topLeftY - height/2; |
| 121 let absCenteredHitY = Math.abs(hitY - centerY); |
| 122 if (absCenteredHitY > height/2) |
| 123 return false; |
| 124 if (absCenteredHitY < height * absCenteredHitX / (2 * width) + height / 2) |
| 125 return true; |
| 126 return false; |
| 127 } |
| 128 function hitTest(x, y) { |
| 129 let cellCount = this.node.getProperty('beehive-count'); |
| 130 let cellDim = width / cellCount; |
| 131 let children = this.walkChildren(); |
| 132 let loop = children.next(); |
| 133 while (!loop.done) { |
| 134 let child = loop.value; |
| 135 if (this.inHex(child.x, child.y, child.width, child.height, x, y)) |
| 136 return child.layoutManager.hitText(x, y); |
| 137 loop = children.next(); |
| 138 } |
| 139 return this.node; |
| 140 } |
115 } | 141 } |
116 sky.registerLayoutManager('beehive', BeehiveLayoutManager); | 142 sky.registerLayoutManager('beehive', BeehiveLayoutManager); |
117 let BeehiveCountStyleValueType = new StyleValueType(); | 143 let BeehiveCountStyleValueType = new StyleValueType(); |
118 BeehiveCountStyleValueType.addParser((tokens) => { | 144 BeehiveCountStyleValueType.addParser((tokens) => { |
119 let token = tokens.next(); | 145 let token = tokens.next(); |
120 if (token.done) throw new Error(); | 146 if (token.done) |
121 if (token.value.kind != 'number') throw new Error(); | 147 throw new Error(); |
122 if (token.value.value <= 0) throw new Error(); | 148 if (token.value.kind != 'number') |
123 if (Math.trunc(token.value.value) != token.value.value) throw new Error(); | 149 throw new Error(); |
124 let result = token.value.value; | 150 if (token.value.value <= 0) |
125 if (!token.next().done) throw new Error(); | 151 throw new Error(); |
126 return result; | 152 if (Math.trunc(token.value.value) != token.value.value) // is integer |
| 153 throw new Error(); |
| 154 return { |
| 155 value: token.value.value; |
| 156 } |
127 }); | 157 }); |
128 sky.registerProperty({ | 158 sky.registerProperty({ |
129 name: 'beehive-count', | 159 name: 'beehive-count', |
130 type: BeehiveCountStyleValueType, | 160 type: BeehiveCountStyleValueType, |
131 inherits: true, | 161 inherits: true, |
132 initialValue: 5, | 162 initialValue: 5, |
133 needsLayout: true, | 163 needsLayout: true, |
134 }); | 164 }); |
135 </script> | 165 </script> |
136 <style> | 166 <style> |
137 div { display: beehive; beehive-count: 3; } | 167 div { display: beehive; beehive-count: 3; } |
138 </style> | 168 </style> |
139 <div> | 169 <div> |
140 <t>Hello</t> | 170 <t>Hello</t> |
141 <t>World</t> | 171 <t>World</t> |
142 <t>How</t> | 172 <t>How</t> |
143 <t>Are</t> | 173 <t>Are</t> |
144 <t>You</t> | 174 <t>You</t> |
145 <t>Today?</t> | 175 <t>Today?</t> |
146 </div> | 176 </div> |
OLD | NEW |