AlexAegis/loreplotter

<div class="ruler" (mousewheel)="zoomScrollHandler($event)">
    <app-cursor #cursor [containerWidth]="loreService.containerWidth" id="cursor"></app-cursor>
    <div #divisorContainer class="divisorContainer" (tap)="tap($event)">
        <div
            *appRepeat="let c; from: unitsBetween + 8"
            class="divisor"
            [ngStyle]="{ left: toPx((firstDist$ | async) + deltaDist(c)) }"
        >
            <div
                *appRepeat="let m; from: currentUnitDivision - 1"
                class="subDivisor"
                [ngStyle]="{ left: toPx(subDist(m)) }"
            ></div>
        </div>
    </div>
</div>

<div class="channelsContainer">
    <ng-scrollbar>
        <div
            (mousewheel)="scrollHandler($event)"
            (tap)="spawnNode($event, actor, block)"
            *ngFor="let actor of actors$ | async as actors"
            (mouseenter)="mouseenter(actor)"
            (mouseleave)="mouseleave()"
            class="channel"
        >
            <div [ngClass]="{ hovered: (hovered$ | async)?.name === actor.id }" class="name">
                {{ (actorService.accumulatorOf(actor) | async)?.accumulator.name.value }}
            </div>

            <app-block
                #block
                [actor]="actor"
                (jumpToUnix)="loreService.easeCursorToUnix.next($event)"
                [containerWidthListener]="loreService.containerWidth"
            >
            </app-block>
        </div>
    </ng-scrollbar>
</div>