FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add support for alpha in legend
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma 2020-09-16 14:40:03 +02:00
parent 3008081ae8
commit 394bbab320
4 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
View File

@ -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
}),
});

2
projects/common-map/src/fm-map/components/legend/legend.component.html
View File

@ -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()">

1
projects/common-map/src/fm-map/components/legend/legend.component.scss
View File

@ -20,6 +20,7 @@ span.color {
display:inline-block;
width: 1.5em;
height: 1.5em;
border: 2px solid;
}
.legend-items {

4
projects/common-map/src/fm-map/components/legend/legend.component.ts
View File

@ -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;