Bring back route direction #1030 - added sdf icon with color, added i…

…nvert to balck and white when needed.

IsraelHiking.Web/package.json

@@ -31,6 +31,7 @@
     "b64-to-blob": "1.2.19",
     "base64-arraybuffer": "^0.2.0",
     "cc.fovea.cordova.openwith": "^1.2.0",
+    "invert-color": "2.0.0",
     "cordova-android": "^7.1.4",
     "cordova-android-play-services-gradle-release": "^2.0.0",
     "cordova-ios": "^4.5.5",

IsraelHiking.Web/sources/application/components/dialogs/routes/route-base-dialog.component.ts

@@ -1,5 +1,6 @@
 import { NgRedux, select } from "@angular-redux/store";
 import { Observable } from "rxjs";
+import invert from "invert-color";
 
 import { ResourcesService } from "../../../services/resources.service";
 import { ToastService } from "../../../services/toast.service";
@@ -36,6 +37,10 @@ export abstract class RouteBaseDialogComponent extends BaseMapComponent {
         this.saveImplementation();
     }
 
+    public getCheckIconColor(color: string) {
+        return invert(color, true);
+    }
+
     protected isRouteNameAlreadyInUse(): boolean {
         return this.selectedRouteService.isNameAvailable(this.routeData.name) === false;
     }

IsraelHiking.Web/sources/application/components/dialogs/routes/route-properties-dialog.component.html

@@ -21,7 +21,7 @@
                     <div *ngFor="let rowIndex of [0,1,2]" class="button-row">
                         <div fxLayout="row" fxLayoutGap="5px">
                             <div *ngFor="let currentColor of colors; let i = index" fxFlex [hidden]="i % 3 !== rowIndex">
-                                <button mat-mini-fab color="primary" fxFill type="button" [style.backgroundColor]="currentColor" (click)="routeData.color = currentColor"> <i *ngIf="currentColor === routeData.color" class="fa icon-check"></i>  </button>
+                                <button mat-mini-fab color="primary" fxFill type="button" [style.backgroundColor]="currentColor" (click)="routeData.color = currentColor"> <i *ngIf="currentColor === routeData.color" class="fa icon-check" [style.color]="getCheckIconColor(currentColor)"></i>  </button>
                             </div>
                         </div>
                     </div>

IsraelHiking.Web/sources/application/components/map/routes.component.html

@@ -17,14 +17,19 @@
             (mouseLeave)="routeLineMouseLeave()">
 </mgl-layer>
 <mgl-layer id="route-line-direction"
-           type="line"
+           type="symbol"
            source="routes-geojson"
            [before]="resources.endOfRoutes"
            [filter]="['==', '$type', 'LineString']"
+           [layout]="{
+                'symbol-placement': 'line',
+                'symbol-spacing': 40,
+                'icon-image': 'arrow',
+                'icon-size': 0.4,
+                'icon-allow-overlap': true
+           }"
            [paint]="{
-                'line-width': ['get', 'weight'],
-                'line-opacity': ['get', 'opacity'],
-                'line-pattern': 'arrowline'
+                'icon-color': ['get', 'iconcolor']
             }">
 </mgl-layer>
 <mgl-layer id="route-points"

IsraelHiking.Web/sources/application/components/map/routes.component.ts

@@ -2,6 +2,7 @@ import { Component, AfterViewInit, ViewEncapsulation } from "@angular/core";
 import { select } from "@angular-redux/store";
 import { Observable } from "rxjs";
 import { MapComponent } from "ngx-mapbox-gl";
+import invert from "invert-color";
 
 import { SelectedRouteService } from "../../services/layers/routelayers/selected-route.service";
 import { SpatialService } from "../../services/spatial.service";
@@ -12,6 +13,7 @@ import { BaseMapComponent } from "../base-map.component";
 import { ResourcesService } from "../../services/resources.service";
 import { LoggingService } from "../../services/logging.service";
 import { LatLngAlt, ApplicationState, RouteData } from "../../models/models";
+import { FileService } from "../../services/file.service";
 
 interface RoutePointViewData {
     latlng: LatLngAlt;
@@ -48,6 +50,7 @@ export class RoutesComponent extends BaseMapComponent implements AfterViewInit {
                 private readonly routeEditPoiInteraction: RouteEditPoiInteraction,
                 private readonly routeEditRouteInteraction: RouteEditRouteInteraction,
                 private readonly snappingService: SnappingService,
+                private readonly fileService: FileService,
                 private readonly loggingService: LoggingService,
                 private readonly host: MapComponent
     ) {
@@ -239,8 +242,10 @@ export class RoutesComponent extends BaseMapComponent implements AfterViewInit {
             opacity = 1.0;
             width = 6;
         }
+        let iconcolor = opacity > 0.5 ? invert(color, true) : color;
         return {
             color,
+            iconcolor,
             weight: width,
             opacity,
             name: route.name,
@@ -276,6 +281,10 @@ export class RoutesComponent extends BaseMapComponent implements AfterViewInit {
     public ngAfterViewInit(): void {
         this.host.load.subscribe(() => {
             this.setInteractionAccordingToState();
+            let fullFilePath = this.fileService.getFullFilePath("content/arrow.png");
+            this.host.mapInstance.loadImage(fullFilePath, (_, image) => {
+                this.host.mapInstance.addImage('arrow', image, { sdf: true });
+            });
         });
     }