AlexAegis/loreplotter

<button
    (click)="setInteractionMode('draw')"
    [ngClass]="{ active: (interactionMode$ | async) === 'draw' }"
    aria-label="Scene Draw Mode"
    mat-stroked-button
>
    <fa-icon [icon]="drawIcon" size="lg"></fa-icon>
</button>
<span>Height:</span>
<div class="slider">
    <ng5-slider
        (valueChange)="setDrawHeight($event)"
        [options]="heightSliderOptions"
        [value]="drawHeight$ | async"
    ></ng5-slider>
</div>
<span>Size:</span>
<div class="slider">
    <ng5-slider
        (valueChange)="setDrawSize($event)"
        [options]="sizeSliderOptions"
        [value]="drawSize$ | async"
    ></ng5-slider>
</div>

<button
    (click)="setInteractionMode('move')"
    [ngClass]="{ active: (interactionMode$ | async) === 'move' }"
    aria-label="Scene Move Mode"
    mat-stroked-button
>
    <fa-icon [icon]="moveIcon" size="lg"></fa-icon>
</button>
<span>Actor scale:</span>
<div class="slider">
    <ng5-slider
        (valueChange)="setActorObjectSizeBias($event)"
        [options]="actorObjectSizeBiasOptions"
        [value]="actorObjectSizeBias$ | async"
    ></ng5-slider>
</div>