From 394bbab320e5e111c7c7e65a5abc177efdf760ee Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 16 Sep 2020 14:40:03 +0200
Subject: [PATCH] Add support for alpha in legend

---
 .../components/aol/item-layers/item-layers.component.ts       | 2 +-
 .../src/fm-map/components/legend/legend.component.html        | 2 +-
 .../src/fm-map/components/legend/legend.component.scss        | 1 +
 .../src/fm-map/components/legend/legend.component.ts          | 4 ++++
 4 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
index 9ac3bd0..bca7276 100644
--- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
+++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
@@ -81,7 +81,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
           color: this.rgbaToHex(red, green, blue, alpha)
         }),
         stroke: new style.Stroke({
-          color: this.rgbaToHex(red, green, blue, alpha),
+          color: this.rgbaToHex(red, green, blue, 255),
           width: 1.25
         }),
       });
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.html b/projects/common-map/src/fm-map/components/legend/legend.component.html
index 7068fa0..faf31ce 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.html
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.html
@@ -17,7 +17,7 @@
     </td>
   </tr>
   <tr *ngFor="let entry of layer.renderer.colorMap.entries; let i = index ">
-    <td class="legend-items"><span [style.background-color]="getHex(entry.color)" class="color"></span></td>
+    <td class="legend-items"><span [style.background-color]="getAlphaHex(entry.color)" [style.border-color]="getHex(entry.color)"class="color"></span></td>
     <td class="legend-items-text"><span *ngIf="!entry.label">{{getScaledValue(entry.value,layer.scale) | number:'1.0-2'}} {{legendunit}}</span><span *ngIf="entry.label">{{entry.label}}</span></td>
     <td class="histogram-items">
       <div *ngIf="showHistogram()">
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.scss b/projects/common-map/src/fm-map/components/legend/legend.component.scss
index 8ba4fd7..a100f23 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.scss
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.scss
@@ -20,6 +20,7 @@ span.color {
   display:inline-block;
   width: 1.5em;
   height: 1.5em;
+  border: 2px solid;
 }
 
 .legend-items {
diff --git a/projects/common-map/src/fm-map/components/legend/legend.component.ts b/projects/common-map/src/fm-map/components/legend/legend.component.ts
index 55ca657..f35f1bf 100644
--- a/projects/common-map/src/fm-map/components/legend/legend.component.ts
+++ b/projects/common-map/src/fm-map/components/legend/legend.component.ts
@@ -53,6 +53,10 @@ export class LegendComponent implements OnInit,AfterViewInit {
     return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue);
   }
 
+  public getAlphaHex(color: IColor): string {
+    return '#' + this.componentToHex(color.red) + this.componentToHex(color.green) + this.componentToHex(color.blue)+ this.componentToHex(color.alpha);
+  }
+
   private componentToHex(c: number): string {
     const hex = c.toString(16);
     return hex.length === 1 ? `0${hex}` : hex;