From 105d1bb27d7450a40975b210838949f967786b40 Mon Sep 17 00:00:00 2001
From: ztimson <ztimson@psdrcs.com>
Date: Mon, 22 Jul 2019 12:39:45 -0400
Subject: [PATCH] Added draw color picker

---
 src/app/animations.ts                         | 67 +++++++++++++++++++
 .../components/palette/palette.component.html |  4 +-
 .../components/palette/palette.component.scss |  9 +++
 .../components/palette/palette.component.ts   | 24 +++++--
 src/app/views/map/map.component.html          |  4 +-
 src/app/views/map/map.component.scss          |  7 ++
 src/app/views/map/map.component.ts            | 10 ++-
 7 files changed, 115 insertions(+), 10 deletions(-)
 create mode 100644 src/app/animations.ts
 create mode 100644 src/app/components/palette/palette.component.scss

diff --git a/src/app/animations.ts b/src/app/animations.ts
new file mode 100644
index 0000000..b7b7324
--- /dev/null
+++ b/src/app/animations.ts
@@ -0,0 +1,67 @@
+import {animate, state, style, transition, trigger} from "@angular/animations";
+
+const defaultTiming = '500ms';
+
+export const collapse = (timings: string = defaultTiming) => trigger('collapse', [
+    transition(':leave', [
+        style({height: '*'}),
+        animate(timings, style({height: '0'}))
+    ])
+]);
+
+export const expand = (timings: string = defaultTiming) => trigger('expand', [
+    transition(':enter', [
+        style({height: '0'}),
+        animate(timings, style({height: '*'}))
+    ])
+]);
+
+export const fadeIn = (timings: string = defaultTiming) => trigger('fadeIn', [
+    transition(':enter', [
+        style({ opacity: 0 }),
+        animate(timings, style({ opacity: 1 }))
+    ])
+]);
+
+export const fadeOut = (timings: string = defaultTiming) => trigger('fadeOut', [
+    transition(':leave', [
+        style({ opacity: 1 }),
+        animate(timings, style({ opacity: 0 }))
+    ])
+]);
+
+export const flyInRight = (timings: string = defaultTiming) => trigger('flyInRight', [
+    transition(':enter', [
+        style({transform: 'translateX(100%)'}),
+        animate(timings, style({transform: 'translateX(0%)'}))
+    ])
+]);
+
+export const flyOutRight = (timings: string = defaultTiming) => trigger('flyOutRight', [
+    transition(':leave', [
+        style({transform: 'translateX(0%)'}),
+        animate(timings, style({transform: 'translateX(100%)'}))
+    ])
+]);
+
+export const flyInTop = (timings: string = defaultTiming) => trigger('flyInTop', [
+    transition(':enter', [
+        style({transform: 'translateY(-100%)'}),
+        animate(timings, style({transform: 'translateY(0%)'}))
+    ])
+]);
+
+export const flyOutTop = (timings: string = defaultTiming) => trigger('flyOutTop', [
+    transition(':leave', [
+        style({transform: 'translateY(0%)'}),
+        animate(timings, style({transform: 'translateY(-100%)'}))
+    ])
+]);
+
+export const rotate = (timings: string = defaultTiming) => trigger('rotate', [
+    state('up', style({transform: 'rotate(0deg)'})),
+    state('right', style({transform: 'rotate(90deg)'})),
+    state('down', style({transform: 'rotate(180deg)'})),
+    state('left', style({transform: 'rotate(270deg)'})),
+    transition('* => *', [animate(timings)])
+]);
diff --git a/src/app/components/palette/palette.component.html b/src/app/components/palette/palette.component.html
index 50116b9..faed275 100644
--- a/src/app/components/palette/palette.component.html
+++ b/src/app/components/palette/palette.component.html
@@ -1,3 +1,3 @@
-<div class="bg-white p-3">
-    <div *ngFor="let c of colors" class="rounded-circle" [style.backgroundColor]="c" style="height: 30px; width: 30px"></div>
+<div class="py-1">
+    <div *ngFor="let c of colors" class="m-3 color-palette" [ngClass]="{'selected': selected == c}" [style.backgroundColor]="c" (click)="selected = c"></div>
 </div>
diff --git a/src/app/components/palette/palette.component.scss b/src/app/components/palette/palette.component.scss
new file mode 100644
index 0000000..4e2a1c3
--- /dev/null
+++ b/src/app/components/palette/palette.component.scss
@@ -0,0 +1,9 @@
+.color-palette {
+  border-radius: 50% 50%;
+  width: 30px;
+  height: 30px;
+
+  &.selected {
+    border: 4px solid #3b5998;
+  }
+}
diff --git a/src/app/components/palette/palette.component.ts b/src/app/components/palette/palette.component.ts
index d03a59b..155ff1e 100644
--- a/src/app/components/palette/palette.component.ts
+++ b/src/app/components/palette/palette.component.ts
@@ -1,9 +1,25 @@
-import {Component} from "@angular/core";
+import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
 
 @Component({
     selector: 'palette',
-    templateUrl: 'palette.component.html'
+    templateUrl: 'palette.component.html',
+    styleUrls: ['palette.component.scss']
 })
-export class PaletteComponent {
-    colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00']
+export class PaletteComponent implements OnInit {
+    @Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#d82b00'];
+
+    @Output() selectedChange = new EventEmitter<string>();
+
+    private _selected;
+    get selected() { return this._selected; }
+    @Input() set selected(color: string) {
+        this._selected = color;
+        this.selectedChange.emit(this._selected);
+    };
+
+    constructor() { }
+
+    ngOnInit() {
+        if(!this.selected) this.selected = this.colors[0];
+    }
 }
diff --git a/src/app/views/map/map.component.html b/src/app/views/map/map.component.html
index 6ab8a55..43249f0 100644
--- a/src/app/views/map/map.component.html
+++ b/src/app/views/map/map.component.html
@@ -6,8 +6,8 @@
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2" [clickable]="false"></agm-circle>
     </ng-container>
 </agm-map>
-<div class="palette">
-    <palette></palette>
+<div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
+    <palette [(selected)]="drawColor"></palette>
 </div>
 <div class="info p-2">
     <span *ngIf="!position" class="text-danger">No GPS</span>
diff --git a/src/app/views/map/map.component.scss b/src/app/views/map/map.component.scss
index 5d1c9c7..00634f5 100644
--- a/src/app/views/map/map.component.scss
+++ b/src/app/views/map/map.component.scss
@@ -2,6 +2,13 @@
   height: calc(100vh - 40px);
 }
 
+.palette {
+  position: fixed;
+  z-index: 100;
+  top: 50px;
+  right: 15px;
+}
+
 .info {
   background-color: #00000050;
   position: fixed;
diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts
index dc87297..7010f95 100644
--- a/src/app/views/map/map.component.ts
+++ b/src/app/views/map/map.component.ts
@@ -6,19 +6,23 @@ import {CalibrateComponent} from "../../components/calibrate/calibrate.component
 import {ToolbarItem} from "../../components/toolbar/toolbarItem";
 import {BehaviorSubject} from "rxjs";
 import {LatLngLiteral} from "@agm/core";
+import {flyInRight, flyOutRight} from "../../animations";
 
 declare const google;
 
 @Component({
     selector: 'map',
     templateUrl: 'map.component.html',
-    styleUrls: ['map.component.scss']
+    styleUrls: ['map.component.scss'],
+    animations: [flyInRight('150ms'), flyOutRight('150ms')]
 })
 export class MapComponent {
+    drawColor: string;
     drawListener = [];
     mapApi: any;
     mapClick = new BehaviorSubject<LatLngLiteral>(null);
     position: any;
+    showPalette = false;
     style = 'terrain';
     isNaN = isNaN;
 
@@ -146,10 +150,11 @@ export class MapComponent {
     }
 
     startDraw() {
+        this.showPalette = true;
         this.mapApi.setOptions({draggable: false});
 
         let drawHander = () => {
-            let poly = new google.maps.Polyline({map: this.mapApi, clickable: true});
+            let poly = new google.maps.Polyline({map: this.mapApi, clickable: true, strokeColor: this.drawColor});
             google.maps.event.addListener(poly, 'click', () => {
                 if(this.menu[1][3].enabled) poly.setMap(null);
             });
@@ -170,6 +175,7 @@ export class MapComponent {
     }
 
     endDraw() {
+        this.showPalette = false;
         this.mapApi.setOptions({draggable: true});
         this.drawListener.forEach(listener => google.maps.event.removeListener(listener));
         this.drawListener = [];