Updated colors

src/app/components/editSymbol/editSymbol.component.ts

@@ -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) {
+    constructor(private ref: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) data) {
-        this.symbol = Object.assign({color: '#ff4141'}, data.symbol);
+        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
-            });
-    }
 }

src/app/components/palette/palette.component.html

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

src/app/components/palette/palette.component.scss

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

src/app/components/palette/palette.component.ts

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

src/app/services/map.service.ts

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

src/app/views/map/map.component.ts

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