Mercurial > gemma
changeset 4252:a5694f6d62a4
fairway_profile: use style information for painting of LOS cuts
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 23 Aug 2019 12:04:19 +0200 |
parents | 51aae07d5f7b |
children | 922075a7d598 |
files | client/src/components/fairway/Fairwayprofile.vue client/src/components/map/Map.vue |
diffstat | 2 files changed, 21 insertions(+), 6 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/Fairwayprofile.vue Fri Aug 23 10:43:06 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Fri Aug 23 12:04:19 2019 +0200 @@ -28,7 +28,7 @@ 'width: 16px; height: 16px; background-color:' + this.getLayerStyle(2).fillColor + ',' + - '); border: dotted 2px ' + + '); border: dashed 2px ' + this.getLayerStyle(2).strokeColor + '; background-clip: padding-box; box-sizing: content-box;' " @@ -41,7 +41,7 @@ 'width: 16px; height: 16px; background-color:' + this.getLayerStyle(3).fillColor + ',' + - '); border: dotted 2px ' + + '); border: solid 2px ' + this.getLayerStyle(3).strokeColor + '; background-clip: padding-box; box-sizing: content-box;' " @@ -278,11 +278,22 @@ // use spread operator to clone arrays let fillColor = style.getFill().getColor(); let fillOpacity = - fillColor.length < 8 ? 0.8 : parseInt(fillColor.slice(7), 16) / 255; + fillColor.length < 8 + ? 0.8 + : parseFloat(parseInt(fillColor.slice(7), 16) / 255).toFixed(2); let strokeColor = style.getStroke().getColor(); let strokeOpacity = - strokeColor.length < 8 ? 0.8 : parseInt(strokeColor.slice(7), 16) / 255; + strokeColor.length < 8 + ? 0.8 + : parseFloat(parseInt(strokeColor.slice(7), 16) / 255).toFixed(2); let strokeDash = style.getStroke().getLineDash(); + console.log({ + fillColor, + fillOpacity, + strokeColor, + strokeOpacity, + strokeDash + }); return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash }; }, applyChange() { @@ -462,9 +473,9 @@ graph .append("path") .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) - .attr("fill", `#${this.getLayerStyle(data.los)}`) + .attr("fill", `${this.getLayerStyle(data.los).fillColor}`) .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity) - .attr("stroke", `#${this.getLayerStyle(data.los)}`) + .attr("stroke", `${this.getLayerStyle(data.los).strokeColor}`) .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity) .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash) .attr("d", fairwayArea)
--- a/client/src/components/map/Map.vue Fri Aug 23 10:43:06 2019 +0200 +++ b/client/src/components/map/Map.vue Fri Aug 23 12:04:19 2019 +0200 @@ -318,6 +318,8 @@ }), fwd1Style = new Style({ stroke: new Stroke({ + lineDash: [2, 4], + lineCap: "round", color: fwd1StrokeC, width: 2 }), @@ -327,6 +329,8 @@ }), fwd2Style = new Style({ stroke: new Stroke({ + lineDash: [3, 6], + lineCap: "round", color: fwd2StrokeC, width: 2 }),