Skip to content
This repository was archived by the owner on Aug 2, 2022. It is now read-only.

Whales Fopra Task #14

Open
EmanuelHerrendorf wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Whales Fopra Task #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fa6feb8
add whale icon symbology
mio-vio Dec 26, 2019
bf6c472
improve whale icon symbology
mio-vio Jan 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/app/colors/color-breakpoint-component/color-breakpoint.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@

<div fxLayout="row wrap" fxLayoutAlign="start center" fxLayoutGap="5px">

<mat-form-field fxFlex>
<mat-form-field fxFlex
[style.max-width] = "attributePlaceholder!=null ? 'unset' : '175px'">
<input
class="color_cell"
[disabled]="disabledColor"
Expand All @@ -13,10 +14,11 @@
(colorPickerChange) = "updateColor($event)"
[style.background] = "colorBreakpoint?.rgba.rgbaCssString()"
[cpOutputFormat]="'rgba'"

>
</mat-form-field>

<mat-form-field fxFlex>
<mat-form-field fxFlex *ngIf="attributePlaceholder!=null">
<input matInput [type]="inputType" [disabled]="disabledAttribute" [placeholder]="attributePlaceholder" [ngModel]="colorBreakpoint?.value"
(ngModelChange)="updateValue($event)">
</mat-form-field>
Expand Down
8 changes: 8 additions & 0 deletions src/app/layers/layer-list/layer-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,10 @@
[style.fill]='layer.symbology.fillRGBA.rgbaCssString()'
></mat-icon>
</ng-template>
<ng-template [ngIf]="layer.visible && layer.symbology.getSymbologyType() === ST.ICON_POINT">
<img [src]="layer.symbology.uri" alt="icon" style="border-radius: 25%"
[style.background-color]="layer.symbology !== undefined && layer.symbology.color !== undefined ? layer.symbology.color.rgbaCssString() : 'transparent'">
</ng-template>
<ng-template [ngIf]="false">
<mat-icon mat-list-icon svgIcon="symbology:line"></mat-icon>
</ng-template>
Expand Down Expand Up @@ -169,6 +173,7 @@
<div #layerName
class="layer-list-item-text grabbable"
fxFlex="grow"
style="padding-left: 4px"
(click)="layerService.setSelectedLayer(layer)"
[matTooltip]="layer.name" matTooltipPosition="after"
[matTooltipShowDelay]="config.DELAYS.TOOLTIP"
Expand All @@ -191,6 +196,9 @@
fxLayout="row"
class="legendary no-drag">

<ng-template [ngSwitchCase]="ST.ICON_POINT">
</ng-template>

<ng-template [ngSwitchCase]="ST.SIMPLE_POINT">
<wave-legendary-points fxFlex="grow" [symbology]="layer.symbology">
</wave-legendary-points>
Expand Down
13 changes: 11 additions & 2 deletions src/app/layers/symbology/symbology-editor/symbology-editor.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,17 @@
</wave-symbology-vector>
</ng-template>

<ng-template [ngSwitchCase]="ST.ICON_POINT">
<wave-symbology-vector fxFlex="grow"
[layer]="layer"
class="no-drag"
[editRadius]="false"
(symbologyChanged)="update_symbology(layer, $event)">
</wave-symbology-vector>
</ng-template>

<ng-template [ngSwitchCase]="ST.SIMPLE_VECTOR">
<wave-symbology-vector fxFlex="grow"
<wave-symbology-vector fxFlex="grow"
[layer]="layer"
class="no-drag"
[editRadius]="false"
Expand All @@ -46,7 +55,7 @@
</ng-template>

<ng-template [ngSwitchCase]="ST.COMPLEX_VECTOR">
<wave-symbology-vector fxFlex="grow"
<wave-symbology-vector fxFlex="grow"
[layer]="layer"
class="no-drag"
[editRadius]="false"
Expand Down
96 changes: 93 additions & 3 deletions src/app/layers/symbology/symbology-vectors/symbology-vector.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
<table>
<div>
<mat-slide-toggle
[checked]="displayAsIcon"
(change)="updateDisplayAsIcon($event)">
Display as icon
</mat-slide-toggle>
</div>
<table *ngIf="!displayAsIcon">
<tr *ngIf="editStrokeWidth">
<td>
<span>Stroke width</span>
Expand Down Expand Up @@ -33,7 +40,7 @@
</div>
-->

<div>
<div *ngIf="!displayAsIcon">
<wave-color-breakpoint [ngModel]="symbology.fillColorBreakpoint" attributePlaceholder="Fill color" disabledAttribute="true"
(ngModelChange)="updateFill($event)">
</wave-color-breakpoint>
Expand All @@ -43,7 +50,7 @@

</div>

<div>
<div *ngIf="!displayAsIcon">
<mat-slide-toggle
[checked]="colorizeByAttribute"
(change)="updateColorizeByAttribute($event)">
Expand All @@ -63,6 +70,89 @@
</mat-select>
</mat-form-field>
</div>
<!--
<div *ngIf="displayAsIcon">
<mat-form-field>
<mat-select placeholder="Icon"
[(ngModel)]="iconAttribute"
(selectionChange)="updateIconUrl($event)">
<mat-option *ngFor="let icon of iconAttributes" [value]="icon.uri">
{{ icon.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>-->

<div>
<table *ngIf="displayAsIcon">
<tr>
<td>
<span>Icon</span>
</td>
<td>
<mat-form-field>
<mat-select (selectionChange)="updateIconUrl($event)"
[compareWith]="compareFn"

[ngModel]="symbology.uri === undefined ? iconAttributes[0] : findIconByURI(symbology.uri)">
<mat-option *ngFor="let icon of iconAttributes" [value]="icon.uri">
{{ icon.name }}<img [src]="icon.uri" alt="icon" style="float: right">
</mat-option>
</mat-select>
</mat-form-field>
</td>
</tr>
<tr>
<td>
<span>Rotation</span>
</td>
<td>
<mat-slider #sla thumbLabel min="0" max="360" step="1" [value]="symbology.rotation === undefined ? 0 : symbology.rotation"
(change)="updateRotation($event)"
[disabled]="!displayAsIcon">
</mat-slider>
<span>{{sla.displayValue}} °</span>
</td>
</tr>
<tr>
<td>
<span>Opacity</span>
</td>
<td>
<mat-slider #slb thumbLabel min="0" max="1" step="0.1" [value]="symbology.opacity === undefined ? 1 : symbology.opacity"
(change)="updateOpacity($event)"
[disabled]="!displayAsIcon">
</mat-slider>
<span>{{slb.displayValue}}</span>
</td>
</tr>
<tr>
<td>
<span>Scale</span>
</td>
<td>
<mat-slider #slc thumbLabel min="0" max="2" step="0.1" [value]="symbology.scale === undefined ? 1 : symbology.scale"
(change)="updateScale($event)"
[disabled]="!displayAsIcon">

</mat-slider>
<span>{{slc.displayValue}} x</span>
</td>
</tr>
<tr>
<td>
<span style="float: top">Icon color</span>
</td>
<td>
<wave-color-breakpoint [attributePlaceholder]="null"
[ngModel]="symbology.iconColorBreakpoint" disabledAttribute="true"
(ngModelChange)="updateIconColor($event)"
[disabled]="!displayAsIcon">
</wave-color-breakpoint>
</td>
</tr>
</table>
</div>

<div *ngIf="colorizeByAttribute && !!symbology.colorAttribute">
<wave-colorizer-editor [ngModel]="symbology.colorizer" (ngModelChange)="updateColorizer($event)" [attributePlaceholder]="attribute?.name" [inputType] = "attribute?.type"></wave-colorizer-editor>
Expand Down
77 changes: 71 additions & 6 deletions src/app/layers/symbology/symbology-vectors/symbology-vector.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import {Component, Input, Output, EventEmitter, OnChanges, OnInit, SimpleChanges} from '@angular/core';

import {ComplexPointSymbology, ComplexVectorSymbology} from '../symbology.model';
import {ComplexPointSymbology, ComplexVectorSymbology, IconSymbology, SymbologyType} from '../symbology.model';
import {MatSliderChange, MatSlideToggleChange} from '@angular/material';
import {ColorBreakpoint} from '../../../colors/color-breakpoint.model';
import {VectorLayer} from '../../layer.model';
import {DataTypes} from '../../../operators/datatype.model';
import {ColorizerData} from '../../../colors/colorizer-data.model';
import {MatSelectionListChange} from '@angular/material/list';
import {MatOptionSelectionChange} from '@angular/material/core';
import {MatSelectChange} from '@angular/material/select';

interface Attribute {
name: string,
type: 'number' | 'text',
}

interface IconAttribute {
name: string,
uri: string,
}

@Component({
selector: 'wave-symbology-vector',
templateUrl: `symbology-vector.component.html`,
Expand All @@ -26,27 +34,43 @@ export class SymbologyVectorComponent implements OnChanges, OnInit {

@Input() editRadius = true;
@Input() editStrokeWidth = true;
@Input() layer: VectorLayer<ComplexPointSymbology> | VectorLayer<ComplexVectorSymbology>;
@Output('symbologyChanged') symbologyChanged = new EventEmitter<ComplexPointSymbology | ComplexVectorSymbology>();
@Input() layer: VectorLayer<ComplexPointSymbology> | VectorLayer<ComplexVectorSymbology> | VectorLayer<IconSymbology>;
@Output('symbologyChanged') symbologyChanged = new EventEmitter<ComplexPointSymbology | ComplexVectorSymbology | IconSymbology>();

_symbology: ComplexPointSymbology | ComplexVectorSymbology;
_symbology: ComplexPointSymbology | ComplexVectorSymbology | IconSymbology;

@Input()
set symbology(symbology: ComplexPointSymbology | ComplexVectorSymbology) {
set symbology(symbology: ComplexPointSymbology | ComplexVectorSymbology | IconSymbology) {
// console.log('SymbologyPointsComponent', 'set symbology');
if (symbology && !symbology.equals(this._symbology)) {
this._symbology = symbology; // TODO: figure out if this should clone;
this.displayAsIcon = symbology.getSymbologyType() === SymbologyType.ICON_POINT;
// console.log('SymbologyPointsComponent', 'set symbology', 'replaced');
}
}

get symbology(): ComplexPointSymbology | ComplexVectorSymbology {
get symbology(): ComplexPointSymbology | ComplexVectorSymbology | IconSymbology {
return this._symbology;
}

displayAsIcon = this._symbology !== undefined && this._symbology.getSymbologyType() === SymbologyType.ICON_POINT;
colorizeByAttribute = false;
compareFn = (t1, t2) => {
return t1 === t2.uri;
};
findIconByURI = (uri) => {
return this.iconAttributes.find(attr => (attr.uri === uri));
};
attribute: Attribute;
attributes: Array<Attribute>;
iconAttributes: Array<IconAttribute> = [{
'name': 'Happy Whale',
'uri': 'assets/icons/happyWhale.png'
},
{
'name': 'Sad Whale',
'uri': 'assets/icons/sadWhale.png'
}];

constructor() {}

Expand Down Expand Up @@ -87,6 +111,19 @@ export class SymbologyVectorComponent implements OnChanges, OnInit {
this.setColorizerAttribute();
}

updateDisplayAsIcon(event: MatSlideToggleChange) {
this.displayAsIcon = event.checked;
let config = this._symbology.toDict();
if (this.displayAsIcon) {
config.symbologyType = SymbologyType[SymbologyType.ICON_POINT];
this._symbology = IconSymbology.fromDict(config) as IconSymbology;
} else {
config.symbologyType = SymbologyType[SymbologyType.COMPLEX_POINT];
this._symbology = ComplexPointSymbology.fromDict(config) as ComplexPointSymbology;
}
this.update();
}

updateSymbologyFromLayer() {
this.symbology = this.layer.symbology;
this.colorizeByAttribute = !!this.symbology.colorAttribute;
Expand Down Expand Up @@ -120,6 +157,34 @@ export class SymbologyVectorComponent implements OnChanges, OnInit {
this.symbologyChanged.emit(this.symbology.clone());
}

updateIconUrl(event: MatSelectChange) {
this.symbology['uri'] = event.value;
this.update();
}

updateRotation(event: MatSliderChange) {
this.symbology['rotation'] = event.value;
this.update();
}

updateOpacity(event: MatSliderChange) {
this.symbology['opacity'] = event.value;
this.update();
}

updateIconColor(fill: ColorBreakpoint) {
// console.log('SymbologyPointsComponent', 'updateFill', fill);
if (fill && fill !== this.symbology['color']) {
(this.symbology as IconSymbology).iconColorBreakpoint = fill;
this.update();
}
}

updateScale(event: MatSliderChange) {
this.symbology['scale'] = event.value;
this.update();
}

updateStrokeWidth(event: MatSliderChange) {
// guard against negative values
if (this.symbology.strokeWidth < SymbologyVectorComponent.minStrokeWidth) {
Expand Down
Loading