From 13e3e35ad77b5bd554c73e989dbf60af605e92bb Mon Sep 17 00:00:00 2001 From: Jason McCollum Date: Mon, 22 Jul 2024 10:18:18 -0700 Subject: [PATCH] Dynamically use labeled icons --- .../base-visit-request-layer.service.ts | 35 ++++++------------ .../post-solve-visit-request-layer.service.ts | 37 +++++++++++++------ 2 files changed, 36 insertions(+), 36 deletions(-) diff --git a/application/frontend/src/app/core/services/base-visit-request-layer.service.ts b/application/frontend/src/app/core/services/base-visit-request-layer.service.ts index 36928204..2ae1ed07 100644 --- a/application/frontend/src/app/core/services/base-visit-request-layer.service.ts +++ b/application/frontend/src/app/core/services/base-visit-request-layer.service.ts @@ -129,6 +129,15 @@ export abstract class BaseVisitRequestLayer { return 1.75; } + protected getIcon(data): string { + const color = (data.color && data.color.name) || this.defaultSelectedColor; + const key = data.pickup ? `pickup-${color}` : `dropoff-${color}`; + return key in this.iconMapping + ? key + : data.pickup + ? `pickup-${this.defaultSelectedColor}` + : `dropoff-${this.defaultSelectedColor}`; + } abstract getDefaultIconFn(data): string; protected onDataFiltered(data): void { @@ -162,18 +171,7 @@ export abstract class BaseVisitRequestLayer { data, iconAtlas: this.getIconAtlas(), iconMapping: this.getIconMapping(), - getIcon: (d) => { - // Clamp to 100, whereafter all labels are "99+" - const stopOrder = Math.min(d.stopOrder, 100); - const color = (d.color && d.color.name) || this.defaultSelectedColor; - const key = d.pickup ? `pickup-${color}-${stopOrder}` : `dropoff-${color}-${stopOrder}`; - return key; - // return key in this.iconMapping - // ? key - // : d.pickup - // ? `pickup-${this.defaultSelectedColor}` - // : `dropoff-${this.defaultSelectedColor}`; - }, + getIcon: (d) => this.getIcon(d), getSize: 10, sizeScale: this.getSizeScale(), getPosition: (d) => d.arrivalPosition, @@ -190,18 +188,7 @@ export abstract class BaseVisitRequestLayer { data, iconAtlas: this.getIconAtlas(), iconMapping: this.getIconMapping(), - getIcon: (d) => { - if (!d.selected) { - return this.getDefaultIconFn(d); - } - const color = (d.color && d.color.name) || this.defaultSelectedColor; - const key = d.pickup ? `pickup-${color}` : `dropoff-${color}`; - return key in this.iconMapping - ? key - : d.pickup - ? `pickup-${this.defaultSelectedColor}` - : `dropoff-${this.defaultSelectedColor}`; - }, + getIcon: (d) => (d.selected ? this.getDefaultIconFn(data) : this.getIcon(data)), getSize: 12, sizeScale: this.getSizeScale(), getPosition: (d) => d.arrivalPosition, diff --git a/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts b/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts index 99a4609e..fe6dc28f 100644 --- a/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts +++ b/application/frontend/src/app/core/services/post-solve-visit-request-layer.service.ts @@ -18,7 +18,6 @@ import { Injectable, NgZone } from '@angular/core'; import { select, Store } from '@ngrx/store'; import { State } from 'src/app/reducers'; import { - selectFilteredVisitRequestsSelected, selectFilteredVisitRequestsSelectedWithStopOrder, selectFilteredVisitRequestsWithStopOrder, selectMouseOverVisitRequest, @@ -37,13 +36,13 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer { canShowTextLayer = false; - readonly capsuleIconSize: [number, number] = [78, 31]; + readonly capsuleIconSize: [number, number] = [78, 24.85714285714285]; private capsuleIconMapping = {}; constructor(mapService: MapService, store: Store, zone: NgZone) { super(mapService, store, zone); - this.createLabeledIconMapping(); + this.createLabeledIconMapping(); combineLatest([ this.store.pipe(select(selectFilteredVisitRequestsWithStopOrder)), @@ -71,7 +70,7 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer { } createLabeledIconMapping(): any { - this.capsuleIconMapping = {} + this.capsuleIconMapping = {}; // dynamically create icon mapping based on sprite for (let i = 0; i < this.iconMappingOrder.length; i++) { for (let stopOrder = 1; stopOrder < 101; stopOrder++) { @@ -82,22 +81,24 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer { width: this.capsuleIconSize[0], // clip height by 1 pixel to reduce a noticeable artifact that's more // prominent on deliveries when zoomed out - height: this.capsuleIconSize[1] - 1, + height: this.capsuleIconSize[1], }; } } - console.log(this.capsuleIconMapping) } - getDefaultIconFn(data: any): string { + if (!this.canShowTextLayer) { + return data.pickup ? `pickup-${this.defaultColor}` : `dropoff-${this.defaultColor}`; + } + const stopOrder = Math.min(data.stopOrder, 100); return data.made ? data.pickup - ? `pickup-${this.defaultColor}` - : `dropoff-${this.defaultColor}` + ? `pickup-${this.defaultColor}-${stopOrder}` + : `dropoff-${this.defaultColor}-${stopOrder}` : data.pickup - ? `pickup-${this.defaultColor}-skipped` - : `dropoff-${this.defaultColor}-skipped`; + ? `pickup-${this.defaultColor}-skipped-${stopOrder}` + : `dropoff-${this.defaultColor}-skipped-${stopOrder}`; } protected getIconAtlas(): string { @@ -107,10 +108,22 @@ export class PostSolveVisitRequestLayer extends BaseVisitRequestLayer { } protected getSizeScale(): number { - return this.canShowTextLayer ? 2.5 : super.getSizeScale(); + return this.canShowTextLayer ? 2.0 : super.getSizeScale(); } protected getIconMapping(): any { return this.canShowTextLayer ? this.capsuleIconMapping : this.iconMapping; } + + protected getIcon(data: any): string { + if (!this.canShowTextLayer) { + return super.getIcon(data); + } + + // Clamp to 100, whereafter all labels are "99+" + const stopOrder = Math.min(data.stopOrder, 100); + const color = (data.color && data.color.name) || this.defaultSelectedColor; + const key = data.pickup ? `pickup-${color}-${stopOrder}` : `dropoff-${color}-${stopOrder}`; + return key; + } }