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