You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
64 lines
3.8 KiB
64 lines
3.8 KiB
<ng-container *ngIf="init">
|
|
<div #globalTopLeft style="position: fixed; top: 0; left: 0; z-index: -1;"></div>
|
|
<ng-container *ngIf="rect && planService.currentPlan">
|
|
<div class="target waypoint" [style.background-color]="backgroundColor ? backgroundColor : 'rgba(0, 0, 0, 0.1)'"
|
|
[style.transform]="transform()" [style.width]="rect.width + 'px'" [style.height]="rect.height + 'px'"
|
|
[class]="hasWaypoint() ? 'active' : ''" (wheel)="onScroll($event)" #targetRef>
|
|
<ng-container *ngIf="planService.currentPlan">
|
|
<span hidden>{{planService.currentPlan.current}}</span>
|
|
<carousel [initIndex]="planService.currentPlan.current" [numVisible]="3"
|
|
[slides]="planService.currentPlan.plan" (afterInitSelf)="registerZoneSlides($event)">
|
|
<ng-template let-slide let-index="index">
|
|
<div class="zone-slide" [style.color]="configService.config.noteDefaultFg"
|
|
[style.border]="index == planService.currentPlan.current ? '1px white solid' : 'none'">
|
|
{{worldAreaMap!.get(slide.area_key)!.name}}<div class="waypoint-text"
|
|
*ngIf="hasWaypoint(slide.area_key)">(W)</div>
|
|
</div>
|
|
</ng-template>
|
|
</carousel>
|
|
<carousel [initIndex]="planService.currentPlan.current" [slides]="planService.currentPlan.plan"
|
|
(afterInitSelf)="registerCurrentSlides($event)">
|
|
<ng-template let-slide>
|
|
<notes [note]="slide.notes" [style.color]="configService.config.noteDefaultFg" #noteSlide
|
|
(resized)="onResizeNote(noteSlide)"></notes>
|
|
</ng-template>
|
|
</carousel>
|
|
|
|
</ng-container>
|
|
<button mat-icon-button *ngIf="overlayService.interactable" class="settings-button"
|
|
(click)="settingsClick($event)" (mousedown)="$event.stopPropagation()"><img
|
|
src="assets/material-settings.svg"></button>
|
|
</div>
|
|
|
|
<ngx-moveable #moveable [target]="targetRef" [draggable]="draggable && overlayService.interactable"
|
|
[resizable]="true && overlayService.interactable" (drag)="onDrag($event)" (resize)="onResize($event)"
|
|
(dragEnd)="onDragEnd($event)" (resizeEnd)="onResizeEnd($event)" [bounds]="bounds" [snappable]="true"
|
|
[style.visibility]="overlayService.interactable ? 'visible' : 'hidden'"></ngx-moveable>
|
|
|
|
</ng-container>
|
|
|
|
<ng-template cdkConnectedOverlay
|
|
[cdkConnectedOverlayOpen]="(settingsOpen || !planService.currentPlan) && overlayService.interactable"
|
|
[cdkConnectedOverlayOrigin]="globalTopLeft" (detach)="settingsOpen = false">
|
|
<div class="overlay container-fluid vw-100">
|
|
<div class="row">
|
|
<div class="planChooser col-3 mt-4">
|
|
<div>
|
|
<button mat-raised-button (click)="openDialog()">Browse Plans</button>
|
|
<button mat-raised-button (click)="loadBasePlan()">Load base plan</button>
|
|
</div>
|
|
<div class="enumerated">
|
|
<mat-list role="list">
|
|
<mat-list-item role="listitem" *ngFor="let plan of planService.planStore"><button
|
|
(click)="setPrevious(plan)">{{plan}}</button></mat-list-item>
|
|
</mat-list>
|
|
|
|
</div>
|
|
</div>
|
|
<settings class="col offset-3"></settings>
|
|
</div>
|
|
<button mat-icon-button class="exit" *ngIf="planService.currentPlan"
|
|
(click)="settingsOpen = false"><span>+</span></button>
|
|
</div>
|
|
</ng-template>
|
|
</ng-container> |