root.component.html

<div>
  <app-splashscreen fxLayoutAlign="center center"
    *ngIf="this.isMobile()">
  </app-splashscreen>

  <!-- Disable drag start events by default. -->
  <div *ngIf="!this.isMobile()"
    appDropTarget
    (onDropFiles)="onDropFiles($event)"
    class="app-container"
    fxLayout="column"
    ondragstart="return false;"
    (click)="this.onClick($event)"
    fxFlex>
    <!-- Toolbar. -->
    <div class="toolbar-container">
      <app-toolbar></app-toolbar>
    </div>
    <div fxLayout="row"
      fxFlex>
      <div class="display-container"
        fxLayout="column"
        fxFlex>
        <!-- Canvas -->
        <ng-container *ngIf="{type: (this.cursorType$ | async) } as cursor">
          <div #displayContainer
            fxLayout="row"
            fxLayoutAlign="center center"
            fxFlex
            [ngClass]="{
              'show-default-cursor': cursor.type === CURSOR_DEFAULT,
              'show-pointer-cursor': cursor.type === CURSOR_POINTER,
              'show-pen-cursor': cursor.type === CURSOR_PEN
            }">
            <app-canvas class="start"
              *ngIf="this.isActionMode$ | async"
              [actionSource]="ACTION_SOURCE_FROM"
              [canvasBounds$]="this.canvasBounds$">
            </app-canvas>
            <app-canvas [canvasBounds$]="this.canvasBounds$"
              [actionSource]="ACTION_SOURCE_ANIMATED">
            </app-canvas>
            <app-canvas class="end"
              *ngIf="this.isActionMode$ | async"
              [actionSource]="ACTION_SOURCE_TO"
              [canvasBounds$]="this.canvasBounds$">
            </app-canvas>
          </div>
        </ng-container>
        <!-- Playback controls. -->
        <app-playback></app-playback>
      </div>
      <!-- Property input panel. -->
      <app-propertyinput *ngIf="!(this.isActionMode$ | async)"
        fxLayout="column"
        (click)="$event.stopPropagation()">
      </app-propertyinput>
    </div>
    <!-- Layer list & animation timeline. -->
    <app-layertimeline></app-layertimeline>
  </div>
</div>