Commit c05ef3d7a163d0205ee54329f8a7a0fba176ad0a
Higlight day column
cel committed on 11/17/2019, 11:40:07 PMParent: ba8080319c06284e2f8fe71cddad735d3897657a
Files changed
index.html | changed |
index.html | ||
---|---|---|
@@ -139,8 +139,16 @@ | ||
139 | 139 … | } |
140 | 140 … | } |
141 | 141 … | } |
142 | 142 … | |
143 … | +function highlightColumn(x, amount) { | |
144 … | + for (var y = 0; y < height; y++) { | |
145 … | + var p = getPixel(x, y) | |
146 … | + if (p[3] === 0) p[0] = p[1] = p[2] = 255 | |
147 … | + setPixel(x, y, common.interpolate(p, colors.grey, amount)) | |
148 … | + } | |
149 … | +} | |
150 … | + | |
143 | 151 … | function pointEquals(a, b) { |
144 | 152 … | return a ? b && a[0] === b[0] && a[1] === b[1] : !b |
145 | 153 … | } |
146 | 154 … | |
@@ -164,17 +172,24 @@ | ||
164 | 172 … | |
165 | 173 … | var hoverColor, hoverPoint |
166 | 174 … | var clickedColor, clickedPoint |
167 | 175 … | |
168 | -function highlight(color, point) { | |
169 | - if (colorEquals(color, hoverColor)) return | |
170 | - if (!color) { | |
176 … | +function highlight(point) { | |
177 … | + if (pointEquals(point, hoverPoint)) return | |
178 … | + if (hoverPoint) highlightColumn(hoverPoint[0], 0) | |
179 … | + if (point) highlightColumn(point[0], 0.7) | |
180 … | + hoverPoint = point | |
181 … | + | |
182 … | + var color = point && getPixel(point[0], point[1]) | |
183 … | + if (colorEquals(color, colors.bg)) { | |
171 | 184 … | if (hoverColor) replaceColor(hoverColor, hoverColor) |
172 | - ctx.putImageData(imgData, 0, 0) | |
173 | 185 … | hoverColor = null |
174 | 186 … | userInfo.style.visibility = 'hidden' |
175 | 187 … | dayInfo.style.visibility = 'hidden' |
176 | - return | |
188 … | + } else if (!colorEquals(color, hoverColor)) { | |
189 … | + if (hoverColor) replaceColor(hoverColor, hoverColor) | |
190 … | + replaceColor(color, colors.highlight) | |
191 … | + hoverColor = color | |
177 | 192 … | } |
178 | 193 … | |
179 | 194 … | if (!point) { |
180 | 195 … | dayInfo.style.visibility = 'hidden' |
@@ -183,14 +198,8 @@ | ||
183 | 198 … | dayText.nodeValue = dayStr(point[0]) |
184 | 199 … | dayUsersText.nodeValue = countUsersAtInterval(point[0]) |
185 | 200 … | } |
186 | 201 … | |
187 | - if (colorEquals(color, colors.black)) return | |
188 | - if (colorEquals(color, colors.bg)) return | |
189 | - if (hoverColor) replaceColor(hoverColor, hoverColor) | |
190 | - replaceColor(color, colors.highlight) | |
191 | - hoverColor = color | |
192 | - ctx.putImageData(imgData, 0, 0) | |
193 | 202 … | var id = idsByColor[color] |
194 | 203 … | if (!id) { |
195 | 204 … | userInfo.style.visibility = 'hidden' |
196 | 205 … | } else { |
@@ -198,22 +207,17 @@ | ||
198 | 207 … | userLink.href = feedBase + encodeURIComponent(id) |
199 | 208 … | userInfo.style.visibility = 'visible' |
200 | 209 … | } |
201 | 210 … | |
211 … | + ctx.putImageData(imgData, 0, 0) | |
202 | 212 … | } |
203 | 213 … | |
204 | -function clearHoverPoint() { | |
205 | - highlight(clickedColor, clickedPoint) | |
206 | -} | |
214 … | +canvas.addEventListener('mousemove', function (e) { | |
215 … | + highlight(getPoint(e)) | |
216 … | +}, false) | |
207 | 217 … | |
208 | -function setHoverPoint(point) { | |
209 | - if (pointEquals(point, hoverPoint)) return | |
210 | - hoverPoint = point | |
211 | - var color = getPixel(point[0], point[1]) | |
212 | - highlight(color, point) | |
213 | -} | |
214 | - | |
215 | -function setClickedPoint(point) { | |
218 … | +canvas.addEventListener('mousedown', function (e) { | |
219 … | + var point = getPoint(e) | |
216 | 220 … | if (pointEquals(point, clickedPoint)) return |
217 | 221 … | var color |
218 | 222 … | if (point) { |
219 | 223 … | color = getPixel(point[0], point[1]) |
@@ -223,22 +227,13 @@ | ||
223 | 227 … | } |
224 | 228 … | } |
225 | 229 … | clickedPoint = point |
226 | 230 … | clickedColor = color |
227 | - highlight(color, point) | |
228 | -} | |
229 | - | |
230 | -canvas.addEventListener('mousemove', function (e) { | |
231 | - setHoverPoint(getPoint(e)) | |
231 … | + highlight(point) | |
232 | 232 … | }, false) |
233 | 233 … | |
234 | - | |
235 | -canvas.addEventListener('mousedown', function (e) { | |
236 | - setClickedPoint(getPoint(e)) | |
237 | -}, false) | |
238 | - | |
239 | 234 … | canvas.addEventListener('mouseout', function (e) { |
240 | - clearHoverPoint() | |
235 … | + highlight(clickedPoint) | |
241 | 236 … | }, false) |
242 | 237 … | |
243 | 238 … | </script> |
244 | 239 … | </body> |
Built with git-ssb-web