Mercurial > gemma

changeset 4251:51aae07d5f7b

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