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

Menu

Browse Source
This commit is contained in:
Zakary Timson 2019-08-22 23:15:22 -04:00
parent 88cfd67184
commit 1ef1b252d7
4 changed files with 54 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,15 +1,34 @@
<mat-toolbar> <mat-toolbar id="toolbar">
<button mat-icon-button routerLink="/"> <button mat-icon-button routerLink="/">
<img src="/assets/images/logo.png" height="35px" width="auto"> <img src="/assets/images/logo.png" height="35px" width="auto">
</button> </button>
<small class="ml-1 text-muted">{{version}}</small> <small class="ml-1 text-muted">{{version}}</small>
<div class="ml-auto"> <div class="ml-auto">
<div *ngFor="let section of menu" class="d-inline ml-4"> <div *ngFor="let item of menuItems; let i = index" class="d-inline mx-1">
<ng-container *ngFor="let item of section"> <ng-container *ngIf="i <= maxMenuItems">
<button *ngIf="!item.hidden" mat-icon-button [ngClass]="{'selected': item.enabled}" class="ml-1" (click)="clickWrapper(item)"> <ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item}"></ng-container>
<mat-icon>{{item.icon}}</mat-icon>
</button>
</ng-container> </ng-container>
</div> </div>
<button *ngIf="menuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>menu</mat-icon>
</button>
<mat-menu #menu="matMenu">
<ng-container *ngFor="let item of menuItems; let i = index">
<ng-container *ngIf="i > maxMenuItems">
<button mat-menu-item>
<mat-icon>{{item.icon}}</mat-icon>
{{item.name}}
</button>
</ng-container>
</ng-container>
</mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>
<ng-template #menuItem let-item>
<ng-container>
<button mat-icon-button [ngClass]="{'selected': item?.enabled}" class="ml-1" (click)="clickWrapper(item)">
<mat-icon>{{item?.icon}}</mat-icon>
</button>
</ng-container>
</ng-template>

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

@ -1,4 +1,4 @@
import {Component, EventEmitter, Input, Output} from "@angular/core"; import {AfterViewInit, Component, EventEmitter, HostListener, Input, Output,} from "@angular/core";
import {ToolbarItem} from "./toolbarItem"; import {ToolbarItem} from "./toolbarItem";
import {version} from '../../../../package.json'; import {version} from '../../../../package.json';
@ -7,26 +7,33 @@ import {version} from '../../../../package.json';
templateUrl: 'toolbar.component.html', templateUrl: 'toolbar.component.html',
styleUrls: ['toolbar.component.scss'] styleUrls: ['toolbar.component.scss']
}) })
export class ToolbarComponent { export class ToolbarComponent implements AfterViewInit {
@Input() menu: ToolbarItem[][]; @Input() menuItems: ToolbarItem[];
@Output() menuChange = new EventEmitter<ToolbarItem[][]>(); @Output() menuItemsChange = new EventEmitter<ToolbarItem[]>();
private maxMenuItems;
readonly version = version; readonly version = version;
constructor() { } constructor() { }
@HostListener('window:resize', ['$event'])
ngAfterViewInit() {
setTimeout(() => this.maxMenuItems = Math.floor((document.getElementById('toolbar').offsetWidth - 200) / 75), 1);
}
clickWrapper(item: ToolbarItem) { clickWrapper(item: ToolbarItem) {
if(item.toggle) { if(item.toggle) {
if (item.individualToggle) { if (item.individualToggle) {
this.menu.forEach(menu => menu.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => { this.menuItems.filter(i2 => item.name != i2.name && i2.individualToggle).forEach(item => {
item.enabled = false; item.enabled = false;
if (item.onDisabled) item.onDisabled(); if (item.onDisabled) item.onDisabled();
})); });
} }
item.enabled = !item.enabled; item.enabled = !item.enabled;
this.menuChange.emit(this.menu); this.menuItemsChange.emit(this.menuItems);
if(item.enabled) { if(item.enabled) {
if(item.onEnabled) item.onEnabled(); if(item.onEnabled) item.onEnabled();

2
src/app/views/map/map.component.html
View File

@ -1,4 +1,4 @@
<toolbar [(menu)]="menu"></toolbar> <toolbar [(menuItems)]="menu"></toolbar>
<div id="map"></div> <div id="map"></div>
<div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette"> <div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
<palette [(selected)]="drawColor" (selectedChange)="map.drawingColor = $event"></palette> <palette [(selected)]="drawColor" (selectedChange)="map.drawingColor = $event"></palette>

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

@ -26,21 +26,18 @@ export class MapComponent implements OnInit {
showPalette = false; showPalette = false;
isNaN = isNaN; isNaN = isNaN;
menu: ToolbarItem[][] = [[ menu: ToolbarItem[] = [
{name: 'compass', icon: 'explore', hidden: true}, {name: 'Marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()},
], [ {name: 'Draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()},
{name: 'marker', icon: 'room', toggle: true, individualToggle: true, click: () => this.addMarker()}, {name: 'Measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()},
{name: 'draw', icon: 'create', toggle: true, individualToggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.endDrawing()}, {name: 'Delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false},
{name: 'measure', icon: 'straighten', toggle: true, individualToggle: true, click: () => this.measure()}, {name: 'Style', icon: 'terrain', enabled: true, toggle: true},
{name: 'delete', icon: 'delete', toggle: true, individualToggle: true, onEnabled: () => this.map.deleteMode = true, onDisabled: () => this.map.deleteMode = false}, {name: 'Weather', icon: 'cloud', toggle: true},
{name: 'style', icon: 'terrain', enabled: true, toggle: true}, {name: 'Calibrate', icon: 'explore', click: () => this.calibrate()},
{name: 'weather', icon: 'cloud', toggle: true}, {name: 'Messages', icon: 'chat', hidden: true},
{name: 'compass', icon: 'explore', click: () => this.calibrate()} {name: 'Identity', icon: 'perm_identity', hidden: true},
], [ {name: 'Settings', icon: 'settings', hidden: true}
{name: 'messages', icon: 'chat', hidden: true}, ];
{name: 'identity', icon: 'perm_identity', hidden: true},
{name: 'settings', icon: 'settings', hidden: true}
]];
constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) { } constructor(public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) { }
@ -70,7 +67,7 @@ export class MapComponent implements OnInit {
addMarker() { addMarker() {
this.map.click.pipe(skip(1), take(1)).subscribe(latlng => { this.map.click.pipe(skip(1), take(1)).subscribe(latlng => {
this.menu[1][0].enabled = false; this.menu[0].enabled = false;
this.markers.push(latlng); this.markers.push(latlng);
this.map.newMarker(latlng); this.map.newMarker(latlng);
}); });
@ -86,7 +83,7 @@ export class MapComponent implements OnInit {
if(!firstPoint) { if(!firstPoint) {
firstPoint = this.map.newMarker(latlng); firstPoint = this.map.newMarker(latlng);
} else { } else {
this.menu[1][2].enabled = false; this.menu[3].enabled = false;
this.map.newMeasurement(firstPoint.getLatLng(), latlng); this.map.newMeasurement(firstPoint.getLatLng(), latlng);
this.map.delete(firstPoint); this.map.delete(firstPoint);
} }