Mercurial > gemma

changeset 4252:a5694f6d62a4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
                 }),