Mercurial > gemma
changeset 4251:51aae07d5f7b
fairway_profile: adjust color types for fairwaydimensions
* now style-info comes from backend. color is encoded as #ffffffff (including alpha) which made the changes necessary.
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 23 Aug 2019 10:43:06 +0200 |
parents | 3181ae3f9f84 |
children | a5694f6d62a4 |
files | client/src/components/fairway/Fairwayprofile.vue |
diffstat | 1 files changed, 23 insertions(+), 47 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Thu Aug 22 17:11:34 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Fri Aug 23 10:43:06 2019 +0200 @@ -12,15 +12,12 @@ <div class="legend"> <span :style=" - 'width: 16px; height: 16px; background-color: rgba(' + - this.getLayerStyle(1).fillColor.join(',') + + 'width: 16px; height: 16px; background-color:' + + this.getLayerStyle(1).fillColor + ',' + - this.getLayerStyle(1).fillOpacity + - '); border: dotted 2px rgba(' + - this.getLayerStyle(1).strokeColor.join(',') + - ',' + - this.getLayerStyle(1).strokeOpacity + - '); background-clip: padding-box; box-sizing: content-box;' + '); border: dotted 2px ' + + this.getLayerStyle(1).strokeColor + + '; background-clip: padding-box; box-sizing: content-box;' " ></span> Fairway (LOS 1) @@ -28,15 +25,12 @@ <div class="legend"> <span :style=" - 'width: 16px; height: 16px; background-color: rgba(' + - this.getLayerStyle(2).fillColor.join(',') + + 'width: 16px; height: 16px; background-color:' + + this.getLayerStyle(2).fillColor + ',' + - this.getLayerStyle(2).fillOpacity + - '); border: dashed 2px rgba(' + - this.getLayerStyle(2).strokeColor.join(',') + - ',' + - this.getLayerStyle(2).strokeOpacity + - '); background-clip: padding-box; box-sizing: content-box;' + '); border: dotted 2px ' + + this.getLayerStyle(2).strokeColor + + '; background-clip: padding-box; box-sizing: content-box;' " ></span> Fairway (LOS 2) @@ -44,15 +38,12 @@ <div class="legend"> <span :style=" - 'width: 16px; height: 16px; background-color: rgba(' + - this.getLayerStyle(3).fillColor.join(',') + + 'width: 16px; height: 16px; background-color:' + + this.getLayerStyle(3).fillColor + ',' + - this.getLayerStyle(3).fillOpacity + - '); border: solid 2px rgba(' + - this.getLayerStyle(3).strokeColor.join(',') + - ',' + - this.getLayerStyle(3).strokeOpacity + - '); background-clip: padding-box; box-sizing: content-box;' + '); border: dotted 2px ' + + this.getLayerStyle(3).strokeColor + + '; background-clip: padding-box; box-sizing: content-box;' " ></span> Fairway (LOS 3) @@ -285,12 +276,13 @@ .getStyle()()[0]; // use spread operator to clone arrays - let fillColor = [...style.getFill().getColor()]; - let fillOpacity = fillColor.pop(); - let strokeColor = [...style.getStroke().getColor()]; - let strokeOpacity = strokeColor.pop(); + let fillColor = style.getFill().getColor(); + let fillOpacity = + fillColor.length < 8 ? 0.8 : parseInt(fillColor.slice(7), 16) / 255; + let strokeColor = style.getStroke().getColor(); + let strokeOpacity = + strokeColor.length < 8 ? 0.8 : parseInt(strokeColor.slice(7), 16) / 255; let strokeDash = style.getStroke().getLineDash(); - return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash }; }, applyChange() { @@ -470,25 +462,9 @@ graph .append("path") .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) - .attr( - "fill", - `#${this.getLayerStyle(data.los) - .fillColor.map(x => { - if (x < 10) return "0" + x.toString(16); - return x.toString(16); - }) - .join("")}` - ) + .attr("fill", `#${this.getLayerStyle(data.los)}`) .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity) - .attr( - "stroke", - `#${this.getLayerStyle(data.los) - .strokeColor.map(x => { - if (x < 10) return "0" + x.toString(16); - return x.toString(16); - }) - .join("")}` - ) + .attr("stroke", `#${this.getLayerStyle(data.los)}`) .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity) .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash) .attr("d", fairwayArea)