Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3571:9e296d686f16

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: cross profiles: support gabs in fairway and improved display in diagram and legend
author Markus Kottlaender <markus@intevation.de>
date Mon, 03 Jun 2019 13:59:41 +0200
parents 76eafbf0a98d
children 1109a38f7ff1
comparison
equal deleted inserted replaced
3570:2ec49a2dca83 3571:9e296d686f16
9 ></span> 9 ></span>
10 Water 10 Water
11 </div> 11 </div>
12 <div class="legend"> 12 <div class="legend">
13 <span 13 <span
14 style="background-color: #1f4fff; width: 20px; height: 20px;" 14 :style="
15 'width: 16px; height: 16px; background-color: rgba(' +
16 this.getLayerStyle(1).fillColor.join(',') +
17 ',' +
18 this.getLayerStyle(1).fillOpacity +
19 '); border: dotted 2px rgba(' +
20 this.getLayerStyle(1).strokeColor.join(',') +
21 ',' +
22 this.getLayerStyle(1).strokeOpacity +
23 '); background-clip: padding-box; box-sizing: content-box;'
24 "
15 ></span> 25 ></span>
16 Fairway 26 Fairway (LOS 1)
27 </div>
28 <div class="legend">
29 <span
30 :style="
31 'width: 16px; height: 16px; background-color: rgba(' +
32 this.getLayerStyle(2).fillColor.join(',') +
33 ',' +
34 this.getLayerStyle(2).fillOpacity +
35 '); border: dashed 2px rgba(' +
36 this.getLayerStyle(2).strokeColor.join(',') +
37 ',' +
38 this.getLayerStyle(2).strokeOpacity +
39 '); background-clip: padding-box; box-sizing: content-box;'
40 "
41 ></span>
42 Fairway (LOS 2)
43 </div>
44 <div class="legend">
45 <span
46 :style="
47 'width: 16px; height: 16px; background-color: rgba(' +
48 this.getLayerStyle(3).fillColor.join(',') +
49 ',' +
50 this.getLayerStyle(3).fillOpacity +
51 '); border: solid 2px rgba(' +
52 this.getLayerStyle(3).strokeColor.join(',') +
53 ',' +
54 this.getLayerStyle(3).strokeOpacity +
55 '); background-clip: padding-box; box-sizing: content-box;'
56 "
57 ></span>
58 Fairway (LOS 3)
17 </div> 59 </div>
18 <div class="legend"> 60 <div class="legend">
19 <span 61 <span
20 style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;" 62 style="width: 14px; height: 14px; background-color: #4a2f06; border: solid 3px black; background-clip: padding-box; box-sizing: content-box;"
21 ></span> 63 ></span>
237 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE" 279 this.paneSetup === "COMPARESURVEYS_FAIRWAYPROFILE"
238 ? "COMPARESURVEYS" 280 ? "COMPARESURVEYS"
239 : "DEFAULT" 281 : "DEFAULT"
240 ); 282 );
241 this.$store.dispatch("fairwayprofile/clearCurrentProfile"); 283 this.$store.dispatch("fairwayprofile/clearCurrentProfile");
284 },
285 getLayerStyle(los) {
286 let style = this.openLayersMap()
287 .getLayer("FAIRWAYDIMENSIONSLOS" + los)
288 .getStyle()()[0];
289
290 // use spread operator to clone arrays
291 let fillColor = [...style.getFill().getColor()];
292 let fillOpacity = fillColor.pop();
293 let strokeColor = [...style.getStroke().getColor()];
294 let strokeOpacity = strokeColor.pop();
295 let strokeDash = style.getStroke().getLineDash();
296
297 return { fillColor, fillOpacity, strokeColor, strokeOpacity, strokeDash };
242 }, 298 },
243 applyChange() { 299 applyChange() {
244 if (this.form.template.hasOwnProperty("properties")) { 300 if (this.form.template.hasOwnProperty("properties")) {
245 this.templateData = this.defaultTemplate; 301 this.templateData = this.defaultTemplate;
246 return; 302 return;
477 drawFairway({ graph, xScale, yScaleRight }) { 533 drawFairway({ graph, xScale, yScaleRight }) {
478 if (this.fairwayData === undefined) { 534 if (this.fairwayData === undefined) {
479 return; 535 return;
480 } 536 }
481 for (let data of this.fairwayData) { 537 for (let data of this.fairwayData) {
482 const [startPoint, endPoint, depth] = data.coordinates[0]; 538 data.coordinates.forEach(coordinates => {
483 let fairwayArea = d3 539 const [startPoint, endPoint, depth] = coordinates;
484 .area() 540 let fairwayArea = d3
485 .x(function(d) { 541 .area()
486 return xScale(d.x); 542 .x(function(d) {
487 }) 543 return xScale(d.x);
488 .y0(yScaleRight(0)) 544 })
489 .y1(function(d) { 545 .y0(yScaleRight(0))
490 return yScaleRight(d.y); 546 .y1(function(d) {
491 }); 547 return yScaleRight(d.y);
492 graph 548 });
493 .append("path") 549 graph
494 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }]) 550 .append("path")
495 .attr("fill", "#002AFF") 551 .datum([{ x: startPoint, y: depth }, { x: endPoint, y: depth }])
496 .attr("fill-opacity", 0.65) 552 .attr(
497 .attr("stroke", "#002AFF") 553 "fill",
498 .attr("stroke-width", 2) 554 `rgba(${this.getLayerStyle(data.los).fillColor.join(",")})`
499 .attr("d", fairwayArea); 555 )
556 .attr("fill-opacity", this.getLayerStyle(data.los).fillOpacity)
557 .attr(
558 "stroke",
559 `rgba(${this.getLayerStyle(data.los).strokeColor.join(",")})`
560 )
561 .attr("stroke-opacity", this.getLayerStyle(data.los).strokeOpacity)
562 .attr("stroke-dasharray", this.getLayerStyle(data.los).strokeDash)
563 .attr("d", fairwayArea);
564 });
500 } 565 }
501 }, 566 },
502 drawLabels({ graph, height }) { 567 drawLabels({ graph, height }) {
503 graph 568 graph
504 .append("text") 569 .append("text")