Mercurial > gemma
changeset 4496:8c98d801e62e
Highlight sections and stretches on select.
author | Raimund Renkert <raimund@renkert.org> |
---|---|
date | Mon, 30 Sep 2019 12:58:23 +0200 |
parents | 850968005e0a |
children | ca7f9c56697a |
files | client/src/components/map/Map.vue |
diffstat | 1 files changed, 77 insertions(+), 14 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/map/Map.vue Mon Sep 30 12:38:56 2019 +0200 +++ b/client/src/components/map/Map.vue Mon Sep 30 12:58:23 2019 +0200 @@ -131,31 +131,94 @@ } }, selectedStretchId(id) { - this.layers - .get("STRETCHES") + let stretch = this.layers.get("STRETCHES"); + stretch + .getSource() + .getFeatures() + .forEach(f => { + f.set("highlighted", false); + f.setStyle(null); + if (id === f.getId()) { + f.set("highlighted", true); + let highlight = new Style({ + fill: new Fill({ + color: this.colorLuminance( + stretch + .getStyle() + .getFill() + .getColor(), + 0.3 + ) + }), + stroke: new Stroke({ + color: this.colorLuminance( + stretch + .getStyle() + .getStroke() + .getColor(), + 0.3 + ), + width: 3 + }) + }); + f.setStyle(highlight); + } + }); + }, + selectedSectionId(id) { + let section = this.layers.get("SECTIONS"); + section .getSource() .getFeatures() .forEach(f => { f.set("highlighted", false); if (id === f.getId()) { f.set("highlighted", true); - } - }); - }, - selectedSectionId(id) { - this.layers - .get("SECTIONS") - .getSource() - .getFeatures() - .forEach(f => { - f.set("highlighted", false); - if (id === f.getId()) { - f.set("highlighted", true); + let highlight = new Style({ + fill: new Fill({ + color: this.colorLuminance( + section + .getStyle() + .getFill() + .getColor(), + 0.3 + ) + }), + stroke: new Stroke({ + color: this.colorLuminance( + section + .getStyle() + .getStroke() + .getColor(), + 0.3 + ), + width: 4 + }) + }); + f.setStyle(highlight); } }); } }, methods: { + colorLuminance(hex, lum) { + hex = String(hex).replace(/[^0-9a-f]/gi, ""); + if (hex.length < 6) { + hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; + } + lum = lum || 0; + let opacity = hex.substr(6, 2); + var rgb = "#", + c, + i; + for (i = 0; i < 3; i++) { + c = parseInt(hex.substr(i * 2, 2), 16); + c = Math.round(Math.min(Math.max(0, c + c * lum), 255)).toString(16); + rgb += ("00" + c).substr(c.length); + } + + return rgb + opacity; + }, updateBottleneckFilter(bottleneck_id, datestr) { if (!bottleneck_id) return; const exists = bottleneck_id != "does_not_exist";