# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1559563181 -7200
# Node ID 9e296d686f16f8e790d2429ebf70b61d53c1cc5c
# Parent  2ec49a2dca8355e863eca4ab085ef36866dd399b
client: cross profiles: support gabs in fairway and improved display in diagram and legend

diff -r 2ec49a2dca83 -r 9e296d686f16 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 12:22:26 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon Jun 03 13:59:41 2019 +0200
@@ -11,9 +11,51 @@
         </div>
         <div class="legend">
           <span
-            style="background-color: #1f4fff; width: 20px; height: 20px;"
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(1).fillColor.join(',') +
+                ',' +
+                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;'
+            "
           ></span>
-          Fairway
+          Fairway (LOS 1)
+        </div>
+        <div class="legend">
+          <span
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(2).fillColor.join(',') +
+                ',' +
+                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;'
+            "
+          ></span>
+          Fairway (LOS 2)
+        </div>
+        <div class="legend">
+          <span
+            :style="
+              'width: 16px; height: 16px; background-color: rgba(' +
+                this.getLayerStyle(3).fillColor.join(',') +
+                ',' +
+                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;'
+            "
+          ></span>
+          Fairway (LOS 3)
         </div>
         <div class="legend">
           <span
@@ -240,6 +282,20 @@
       );
       this.$store.dispatch("fairwayprofile/clearCurrentProfile");
     },
+    getLayerStyle(los) {
+      let style = this.openLayersMap()
+        .getLayer("FAIRWAYDIMENSIONSLOS" + los)
+        .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 strokeDash = style.getStroke().getLineDash();
+
+      return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash };
+    },
     applyChange() {
       if (this.form.template.hasOwnProperty("properties")) {
         this.templateData = this.defaultTemplate;
@@ -479,24 +535,33 @@
         return;
       }
       for (let data of this.fairwayData) {
-        const [startPoint, endPoint, depth] = data.coordinates[0];
-        let fairwayArea = d3
-          .area()
-          .x(function(d) {
-            return xScale(d.x);
-          })
-          .y0(yScaleRight(0))
-          .y1(function(d) {
-            return yScaleRight(d.y);
-          });
-        graph
-          .append("path")
-          .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
-          .attr("fill", "#002AFF")
-          .attr("fill-opacity", 0.65)
-          .attr("stroke", "#002AFF")
-          .attr("stroke-width", 2)
-          .attr("d", fairwayArea);
+        data.coordinates.forEach(coordinates => {
+          const [startPoint, endPoint, depth] = coordinates;
+          let fairwayArea = d3
+            .area()
+            .x(function(d) {
+              return xScale(d.x);
+            })
+            .y0(yScaleRight(0))
+            .y1(function(d) {
+              return yScaleRight(d.y);
+            });
+          graph
+            .append("path")
+            .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
+            .attr(
+              "fill",
+              `rgba(${this.getLayerStyle(data.los).fillColor.join(",")})`
+            )
+            .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity)
+            .attr(
+              "stroke",
+              `rgba(${this.getLayerStyle(data.los).strokeColor.join(",")})`
+            )
+            .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity)
+            .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash)
+            .attr("d", fairwayArea);
+        });
       }
     },
     drawLabels({ graph, height }) {
diff -r 2ec49a2dca83 -r 9e296d686f16 client/src/components/map/styles.js
--- a/client/src/components/map/styles.js	Mon Jun 03 12:22:26 2019 +0200
+++ b/client/src/components/map/styles.js	Mon Jun 03 13:59:41 2019 +0200
@@ -7,33 +7,33 @@
 const styles = {
   blue1: new Style({
     stroke: new Stroke({
-      color: "rgba(0, 0, 255, 0.8)",
+      color: [0, 0, 255, 0.8],
       lineDash: [2, 4],
       lineCap: "round",
       width: 2
     }),
     fill: new Fill({
-      color: "rgba(240, 230, 0, 0.2)"
+      color: [240, 230, 0, 0.2]
     })
   }),
   blue2: new Style({
     stroke: new Stroke({
-      color: "rgba(0, 0, 255, 0.9)",
+      color: [0, 0, 255, 0.9],
       lineDash: [3, 6],
       lineCap: "round",
       width: 2
     }),
     fill: new Fill({
-      color: "rgba(240, 230, 0, 0.1)"
+      color: [240, 230, 0, 0.1]
     })
   }),
   blue3: new Style({
     stroke: new Stroke({
-      color: "rgba(0, 0, 255, 1.0)",
+      color: [0, 0, 255, 1.0],
       width: 2
     }),
     fill: new Fill({
-      color: "rgba(255, 255, 255, 0.4)"
+      color: [255, 255, 255, 0.4]
     })
   }),
   yellow1: new Style({
diff -r 2ec49a2dca83 -r 9e296d686f16 client/src/lib/geo.js
--- a/client/src/lib/geo.js	Mon Jun 03 12:22:26 2019 +0200
+++ b/client/src/lib/geo.js	Mon Jun 03 13:59:41 2019 +0200
@@ -191,7 +191,8 @@
   var polygon = turfPolygon(fairwayGeometry.getCoordinates());
   var intersects = lineIntersect(line, polygon);
 
-  var startPoint, endPoint;
+  let opts = { units: "meters" };
+  let pStartPoint = profileLine.getCoordinates()[0];
 
   if (intersects.features.length == 2) {
     let line1 = lineSlice(
@@ -199,34 +200,33 @@
       intersects.features[1].geometry,
       line
     );
-    startPoint = line1.geometry.coordinates[0];
-    endPoint = line1.geometry.coordinates[1];
+    fairwayCoordinates.push([
+      distance(pStartPoint, line1.geometry.coordinates[0], opts),
+      distance(pStartPoint, line1.geometry.coordinates[1], opts),
+      depth
+    ]);
   } else if (
     booleanContains(polygon, turfPoint(line.geometry.coordinates[0])) &&
     booleanContains(polygon, turfPoint(line.geometry.coordinates[1]))
   ) {
-    startPoint = line.geometry.coordinates[0];
-    endPoint = line.geometry.coordinates[1];
+    fairwayCoordinates.push([
+      distance(pStartPoint, line.geometry.coordinates[0], opts),
+      distance(pStartPoint, line.geometry.coordinates[1], opts),
+      depth
+    ]);
   } else if (lineSplit(line, polygon).features.length > 0) {
     let split = lineSplit(line, polygon);
     for (let feature of split.features) {
       if (booleanContains(polygon, feature)) {
-        startPoint = feature.geometry.coordinates[0];
-        endPoint = feature.geometry.coordinates[1];
+        fairwayCoordinates.push([
+          distance(pStartPoint, feature.geometry.coordinates[0], opts),
+          distance(pStartPoint, feature.geometry.coordinates[1], opts),
+          depth
+        ]);
       }
     }
-  } else {
-    return [];
   }
 
-  let opts = { units: "meters" };
-  let pStartPoint = profileLine.getCoordinates()[0];
-  fairwayCoordinates.push([
-    distance(pStartPoint, startPoint, opts),
-    distance(pStartPoint, endPoint, opts),
-    depth
-  ]);
-
   return fairwayCoordinates;
 };
 
diff -r 2ec49a2dca83 -r 9e296d686f16 client/src/store/fairwayprofile.js
--- a/client/src/store/fairwayprofile.js	Mon Jun 03 12:22:26 2019 +0200
+++ b/client/src/store/fairwayprofile.js	Mon Jun 03 13:59:41 2019 +0200
@@ -218,7 +218,7 @@
                   );
                   let fairwayData = {
                     coordinates: fairwayCoordinates,
-                    style: los3.getStyle()
+                    los: 3
                   };
                   if (fairwayCoordinates.length > 0) {
                     commit("addFairwayData", fairwayData);
@@ -240,7 +240,7 @@
                   );
                   let fairwayData = {
                     coordinates: fairwayCoordinates,
-                    style: los2.getStyle()
+                    los: 2
                   };
                   if (fairwayCoordinates.length > 0) {
                     commit("addFairwayData", fairwayData);
@@ -262,7 +262,7 @@
                   );
                   let fairwayData = {
                     coordinates: fairwayCoordinates,
-                    style: los1.getStyle()
+                    los: 1
                   };
                   if (fairwayCoordinates.length > 0) {
                     commit("addFairwayData", fairwayData);