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

Fixed toggling tools

Browse Source
This commit is contained in:
Zakary Timson 2019-08-24 08:59:56 -04:00
parent 1f2f8923a9
commit 24574c9543
3 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/app/components/toolbar/toolbar.component.html
View File

@ -6,7 +6,7 @@
<div class="ml-auto"> <div class="ml-auto">
<ng-container *ngFor="let item of menuItems; let i = index"> <ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i < maxMenuItems"> <ng-container *ngIf="i < maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'icon'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'icon'}"></ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu"> <button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
@ -15,41 +15,41 @@
<mat-menu #overflowMenu="matMenu"> <mat-menu #overflowMenu="matMenu">
<ng-container *ngFor="let item of menuItems; let i = index"> <ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i >= maxMenuItems"> <ng-container *ngIf="i >= maxMenuItems">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, mode: 'menu'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: menuItems, mode: 'menu'}"></ng-container>
</ng-container> </ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>
<ng-template #menuItem let-item let-mode="mode"> <ng-template #menuItem let-item let-menu="menu" let-mode="mode">
<ng-container *ngIf="mode == 'icon' && !item.subMenu"> <ng-container *ngIf="mode == 'icon' && !item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matTooltip]="item.name"> <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="mode == 'menu' && !item.subMenu"> <ng-container *ngIf="mode == 'menu' && !item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)"> <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}} <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button> </button>
</ng-container> </ng-container>
<ng-container *ngIf="mode == 'icon' && item.subMenu"> <ng-container *ngIf="mode == 'icon' && item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu"> <button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button> </button>
<mat-menu #subMenu="matMenu"> <mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu"> <ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, menu: item.subMenu, mode: 'menu'}"></ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
</ng-container> </ng-container>
<ng-container *ngIf="mode == 'menu' && item.subMenu"> <ng-container *ngIf="mode == 'menu' && item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item)" [matMenuTriggerFor]="subMenu"> <button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}} <mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button> </button>
<mat-menu #subMenu="matMenu"> <mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu"> <ng-container *ngFor="let child of item.subMenu">
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, mode: 'menu'}"></ng-container> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, menu: item.subMenu, mode: 'menu'}"></ng-container>
</ng-container> </ng-container>
</mat-menu> </mat-menu>
</ng-container> </ng-container>

6
src/app/components/toolbar/toolbar.component.ts
View File

@ -23,10 +23,10 @@ export class ToolbarComponent implements AfterViewInit {
setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 200) / 75), 1); setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 200) / 75), 1);
} }
clickWrapper(item: ToolbarItem) { clickWrapper(item: ToolbarItem, menu?: ToolbarItem[]) {
if(item.toggle) { if(item.toggle) {
if (item.individualToggle) { if (!item.individualToggle) {
this.menuItems.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => { menu.filter(i => item.name != i.name && !i.individualToggle).forEach(item => {
item.enabled = false; item.enabled = false;
if (item.onDisabled) item.onDisabled(); if (item.onDisabled) item.onDisabled();
}); });

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

@ -25,21 +25,21 @@ export class MapComponent implements OnInit {
showPalette = false; showPalette = false;
menu: ToolbarItem[] = [ menu: ToolbarItem[] = [
{name: 'Marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()}, {name: 'Marker', icon: 'room', click: () => this.addMarker()},
{name: 'Draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()}, {name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
{name: 'Measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()}, {name: 'Measure', icon: 'straighten', toggle: true, click: () => this.measure()},
{name: 'Delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false}, {name: 'Delete', icon: 'delete', toggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
{name: 'Map Style', icon: 'terrain', toggle: true, subMenu: [ {name: 'Map Style', icon: 'terrain', subMenu: [
{name: 'ESRI:Topographic', click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)}, {name: 'ESRI:Topographic', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_TOPOGRAPHIC)},
{name: 'ESRI:Satelite', click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)}, {name: 'ESRI:Satellite', toggle: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY)},
{name: 'ESRI:Satelite Clear', click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)} {name: 'ESRI:Satellite Clear', toggle: true, enabled: true, click: () => this.map.setMapLayer(MapLayers.ESRI_IMAGERY_CLARITY)}
]}, ]},
{name: 'Weather', icon: 'cloud', toggle: true, subMenu: [ {name: 'Weather', icon: 'cloud', subMenu: [
{name: 'None', click: () => this.map.setWeatherLayer()}, {name: 'None', toggle: true, enabled: true, click: () => this.map.setWeatherLayer()},
{name: 'Temperature', click: () => this.map.setWeatherLayer(WeatherLayers.TEMP_NEW)}, {name: 'Temperature', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.TEMP_NEW)},
{name: 'Wind', click: () => this.map.setWeatherLayer(WeatherLayers.WIND_NEW)}, {name: 'Wind', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.WIND_NEW)},
{name: 'Sea Level Pressure', click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)}, {name: 'Sea Level Pressure', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.SEA_LEVEL_PRESSURE)},
{name: 'Clouds', click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)}, {name: 'Clouds', toggle: true, click: () => this.map.setWeatherLayer(WeatherLayers.CLOUDS_NEW)},
]}, ]},
{name: 'Calibrate', icon: 'explore', click: () => this.calibrate()}, {name: 'Calibrate', icon: 'explore', click: () => this.calibrate()},
{name: 'Messages', icon: 'chat', hidden: true}, {name: 'Messages', icon: 'chat', hidden: true},