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 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
89 let cellCount = this.node.getProperty('beehive-count'); | 89 let cellCount = this.node.getProperty('beehive-count'); |
90 let cellDim = width / cellCount; | 90 let cellDim = width / cellCount; |
91 let children = this.walkChildren(); | 91 let children = this.walkChildren(); |
92 let loop = children.next(); | 92 let loop = children.next(); |
93 while (!loop.done) { | 93 while (!loop.done) { |
94 let child = loop.value; | 94 let child = loop.value; |
95 if (child.needsPaint) { | 95 if (child.needsPaint) { |
96 canvas.save(); | 96 canvas.save(); |
97 try { | 97 try { |
98 canvas.beginPath(); | 98 canvas.beginPath(); |
99 canvas.moveTo(child.x, child.y + cellDim/4); | 99 canvas.translate(child.x, child.y); |
100 canvas.lineTo(child.x + cellDim/2, child.y); | 100 canvas.moveTo(0, cellDim/4); |
101 canvas.lineTo(child.x + cellDim, child.y + cellDim/4); | 101 canvas.lineTo(cellDim/2, 0); |
102 canvas.lineTo(child.x + cellDim, child.y + 3*cellDim/4); | 102 canvas.lineTo(cellDim, cellDim/4); |
103 canvas.lineTo(child.x + cellDim/2, child.y + cellDim); | 103 canvas.lineTo(cellDim, 3*cellDim/4); |
104 canvas.moveTo(child.x, child.y + 3*cellDim/4); | 104 canvas.lineTo(cellDim/2, cellDim); |
| 105 canvas.moveTo(0, 3*cellDim/4); |
105 canvas.closePath(); | 106 canvas.closePath(); |
106 canvas.clip(); | 107 canvas.clip(); |
107 child.paint(canvas); | 108 child.paint(canvas); |
108 } finally { | 109 } finally { |
109 canvas.restore(); | 110 canvas.restore(); |
110 } | 111 } |
111 } | 112 } |
112 loop = children.next(); | 113 loop = children.next(); |
113 } | 114 } |
114 } | 115 } |
(...skipping 11 matching lines...) Expand all Loading... |
126 return false; | 127 return false; |
127 } | 128 } |
128 function hitTest(x, y) { | 129 function hitTest(x, y) { |
129 let cellCount = this.node.getProperty('beehive-count'); | 130 let cellCount = this.node.getProperty('beehive-count'); |
130 let cellDim = width / cellCount; | 131 let cellDim = width / cellCount; |
131 let children = this.walkChildren(); | 132 let children = this.walkChildren(); |
132 let loop = children.next(); | 133 let loop = children.next(); |
133 while (!loop.done) { | 134 while (!loop.done) { |
134 let child = loop.value; | 135 let child = loop.value; |
135 if (this.inHex(child.x, child.y, child.width, child.height, x, y)) | 136 if (this.inHex(child.x, child.y, child.width, child.height, x, y)) |
136 return child.layoutManager.hitText(x, y); | 137 return child.layoutManager.hitTest(x-child.x, y-child.y); |
137 loop = children.next(); | 138 loop = children.next(); |
138 } | 139 } |
139 return this.node; | 140 return this.node; |
140 } | 141 } |
141 } | 142 } |
142 sky.registerLayoutManager('beehive', BeehiveLayoutManager); | 143 sky.registerLayoutManager('beehive', BeehiveLayoutManager); |
143 let BeehiveCountStyleValueType = new StyleValueType(); | 144 let BeehiveCountStyleValueType = new StyleValueType(); |
144 BeehiveCountStyleValueType.addParser((tokens) => { | 145 BeehiveCountStyleValueType.addParser((tokens) => { |
145 let token = tokens.next(); | 146 let token = tokens.next(); |
146 if (token.done) | 147 if (token.done) |
(...skipping 20 matching lines...) Expand all Loading... |
167 div { display: beehive; beehive-count: 3; } | 168 div { display: beehive; beehive-count: 3; } |
168 </style> | 169 </style> |
169 <div> | 170 <div> |
170 <t>Hello</t> | 171 <t>Hello</t> |
171 <t>World</t> | 172 <t>World</t> |
172 <t>How</t> | 173 <t>How</t> |
173 <t>Are</t> | 174 <t>Are</t> |
174 <t>You</t> | 175 <t>You</t> |
175 <t>Today?</t> | 176 <t>Today?</t> |
176 </div> | 177 </div> |
OLD | NEW |