ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Updated colors

Browse Source
This commit is contained in:
Zakary Timson 2019-09-08 19:50:00 -04:00
parent 14624a1207
commit adf1211966
6 changed files with 26 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/app/components/editSymbol/editSymbol.component.ts
View File

@ -1,8 +1,6 @@
import {Component, Inject} from "@angular/core";
import {MatDialog} from "@angular/material/dialog";
import {MapSymbol} from "../../models/mapSymbol";
import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from "@angular/material/bottom-sheet";
import {ColorPickerDialogComponent} from "../colorPickerDialog/colorPickerDialog.component";
@Component({
selector: 'edit-symbol',
@ -12,8 +10,8 @@ export class EditSymbolComponent {
symbol: MapSymbol;
mapItem;
constructor(private dialog: MatDialog, private ref: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) data) {
this.symbol = Object.assign({color: '#ff4141'}, data.symbol);
constructor(private ref: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) data) {
this.symbol = Object.assign({color: '#e9403d'}, data.symbol);
this.mapItem = data.item;
this.mapItem.enableEdit();
@ -39,11 +37,4 @@ export class EditSymbolComponent {
this.ref.dismiss(this.symbol);
}
colorPicker() {
this.dialog.open(ColorPickerDialogComponent, {data: this.symbol.color, hasBackdrop: false, panelClass: 'p-0'}).afterClosed()
.subscribe(color => {
this.symbol.color = color
});
}
}

1
src/app/components/palette/palette.component.html
View File

@ -1,3 +1,4 @@
<div [ngClass]="{'d-flex-column': vertical, 'd-flex': !vertical}">
<div *ngFor="let c of colors" class="color-palette" [ngClass]="{'selected': selected == c, 'my-3 mx-auto': vertical, 'mx-2 my-auto': !vertical}" [style.backgroundColor]="c" (click)="selected = c"></div>
<div class="color-palette rainbow" [ngClass]="{'selected': colors.indexOf(selected) == -1, 'my-3 mx-auto': vertical, 'mx-2 my-auto': !vertical}" (click)="colorPicker()"></div>
</div>

4
src/app/components/palette/palette.component.scss
View File

@ -9,3 +9,7 @@
height: 45px;
}
}
.rainbow {
background: linear-gradient(-45deg, red, red, orange, yellow, green, cyan, blue, violet, violet);
}

11
src/app/components/palette/palette.component.ts
View File

@ -1,4 +1,6 @@
import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
import {ColorPickerDialogComponent} from "../colorPickerDialog/colorPickerDialog.component";
import {MatDialog} from "@angular/material/dialog";
@Component({
selector: 'palette',
@ -6,7 +8,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
styleUrls: ['palette.component.scss']
})
export class PaletteComponent implements OnInit {
@Input() colors = ['#1d1d1a', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
@Input() colors = ['#1d1d1a', '#ffffff', '#f4f554', '#33abe3', '#5fd75a', '#e9403d'];
@Input() vertical = false;
@Output() selectedChange = new EventEmitter<string>();
@ -18,9 +20,14 @@ export class PaletteComponent implements OnInit {
this.selectedChange.emit(this._selected);
};
constructor() { }
constructor(private dialog: MatDialog) { }
ngOnInit() {
if(!this.selected) this.selected = this.colors[0];
}
colorPicker() {
this.dialog.open(ColorPickerDialogComponent, {data: this.selected, hasBackdrop: false, panelClass: 'p-0'}).afterClosed()
.subscribe(color => this.selected = color);
}
}

12
src/app/services/map.service.ts
View File

@ -26,7 +26,7 @@ export enum WeatherLayers {
function buildMarker(color?: string) {
const markerHtmlStyles = `
background-color: ${color || '#ff4141'};
background-color: ${color || '#e9403d'};
width: 3rem;
height: 3rem;
display: block;
@ -120,7 +120,7 @@ export class MapService {
}
newCircle(c: Circle) {
let circle = L.circle(c.latlng, Object.assign({color: '#ff4141', autoPan: false}, c)).addTo(this.map);
let circle = L.circle(c.latlng, Object.assign({color: '#e9403d', autoPan: false}, c)).addTo(this.map);
if(c.label) circle.bindTooltip(c.label, {permanent: true, direction: 'center'});
circle.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: c, item: circle}));
if(!c.noDelete) this.circles.push(circle);
@ -137,7 +137,7 @@ export class MapService {
}
newMeasurement(m: Measurement) {
let line = L.polyline([m.latlng, m.latlng2], Object.assign({color: '#ff4141', autoPan: false, weight: 8, lineCap: "square", dashArray: '10, 20'}, m)).addTo(this.map);
let line = L.polyline([m.latlng, m.latlng2], Object.assign({color: '#e9403d', autoPan: false, weight: 8, lineCap: "square", dashArray: '10, 20'}, m)).addTo(this.map);
if(!m.noDelete) this.measurements.push(line);
let distance = latLngDistance(m.latlng, m.latlng2);
line.bindPopup(`${distance > 1000 ? Math.round(distance / 100) / 10 : Math.round(distance)} ${distance > 1000 ? 'k' : ''}m`, {autoPan: false, autoClose: false, closeOnClick: false}).openPopup();
@ -146,7 +146,7 @@ export class MapService {
}
newPolygon(p: Polygon) {
let polygon = new L.Polygon(p.latlng, Object.assign({color: '#ff4141', autoPan: false}, p)).addTo(this.map);
let polygon = new L.Polygon(p.latlng, Object.assign({color: '#e9403d', autoPan: false}, p)).addTo(this.map);
if(p.label) polygon.bindTooltip(p.label, {permanent: true});
polygon.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polygon}));
if(!p.noDelete) this.polygons.push(polygon);
@ -154,14 +154,14 @@ export class MapService {
}
newPolyline(p: Polyline) {
let polyline = new L.Polyline(p.latlng, Object.assign({color: '#ff4141', autoPan: false, weight: 10}, p)).addTo(this.map);
let polyline = new L.Polyline(p.latlng, Object.assign({color: '#e9403d', autoPan: false, weight: 10}, p)).addTo(this.map);
polyline.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polyline}));
if(!p.noDelete) this.polylines.push(polyline);
return polyline;
}
newRectangle(r: Rectangle) {
let rect = new L.Rectangle([r.latlng, r.latlng2], Object.assign({color: '#ff4141', autoPan: false}, r)).addTo(this.map);
let rect = new L.Rectangle([r.latlng, r.latlng2], Object.assign({color: '#e9403d', autoPan: false}, r)).addTo(this.map);
if(r.label) rect.bindTooltip(r.label, {permanent: true, direction: 'center'});
rect.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: r, item: rect}));
if(!r.noDelete) this.rectangles.push(rect);

8
src/app/views/map/map.component.ts
View File

@ -29,7 +29,7 @@ export class MapComponent implements OnDestroy, OnInit {
private calibration;
code: string;
drawColor = '#ff4141';
drawColor = '#e9403d';
map: MapService;
name: string;
polygon: any;
@ -159,7 +159,7 @@ export class MapComponent implements OnDestroy, OnInit {
this.dialog.open(DimensionsDialogComponent, {data: ['Distance (m)', 'Baring'], panelClass: 'pb-0'}).afterClosed().subscribe(dimensions => {
if(!dimensions) return;
let latlng = relativeLatLng({lat: this.position.latitude, lng: this.position.longitude}, dimensions[0], dimensions[1]);
let marker: Marker = {latlng: latlng, color: '#ff4141'};
let marker: Marker = {latlng: latlng, color: '#e9403d'};
this.syncService.addMarker(marker);
})
};
@ -242,7 +242,7 @@ export class MapComponent implements OnDestroy, OnInit {
this.syncService.addMeasurement(measurement);
this.map.delete(lastPoint);
}
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'});
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#e9403d'});
})
};
@ -270,7 +270,7 @@ export class MapComponent implements OnDestroy, OnInit {
this.syncService.addRectangle(rect);
return this.map.delete(lastPoint);
}
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'});
lastPoint = this.map.newMarker({latlng: e.latlng, color: '#e9403d'});
})
};