canvas.component.html

<div class="canvasBackground fx-flex"
     (click)="selectionService.clearElementSelection()">
  <div [style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
       [style.padding.px]="page.margin"
       [style.background-color]="page.backgroundColor">
    <div cdkDropListGroup>
      <div *ngFor="let section of page.sections; let i = index" [style.position]="'relative'">
        <aspect-section-menu [class.hidden]="selectionService.selectedPageSectionIndex !== i"
                             class="section-menu fx-column-start-stretch"
                             [style.left.px]="-45" [style.z-index]="1" [style.position]="'absolute'"
                             [section]="section" [sectionIndex]="i"
                             [allowMoveUp]="i != 0"
                             [allowMoveDown]="i < page.sections.length - 1"
                             [allowDelete]="page.sections.length > 1"
                             (moveSection)="unitService.moveSection(section, page, $event)"
                             (duplicateSection)="unitService.duplicateSection(section, page, i)"
                             (selectElementComponent)="selectElementOverlay($event)">
        </aspect-section-menu>
        <aspect-section-static *ngIf="!section.dynamicPositioning"
                               #sectionComponent
                               class="section drop-list" id="section-{{i}}"
                               [section]="section"
                               [isSelected]="selectionService.selectedPageSectionIndex === i"
                               (elementSelected)="selectionService.selectedPageSectionIndex = i"
                               cdkDropList cdkDropListSortingDisabled
                               [cdkDropListData]="{ sectionIndex: i }"
                               (cdkDropListDropped)="elementDropped($event)"
                               (click)="selectionService.selectedPageSectionIndex = i">
        </aspect-section-static>
        <aspect-section-dynamic *ngIf="section.dynamicPositioning"
                                #sectionComponent
                                class="section drop-list"
                                [section]="section" [sectionIndex]="i"
                                [isSelected]="selectionService.selectedPageSectionIndex === i"
                                (elementSelected)="selectionService.selectedPageSectionIndex = i"
                                (transferElement)="moveElementsBetweenSections(selectionService.getSelectedElements(),
                                                           $event.previousSectionIndex,
                                                           $event.newSectionIndex)"
                                (click)="selectionService.selectedPageSectionIndex = i">
        </aspect-section-dynamic>
      </div>
    </div>
  </div>

  <button mat-raised-button class="add-section-button"
          [style.width.px]="page.hasMaxWidth ? page.maxWidth : null"
          (click)="addSection()">
    <mat-icon class="add-section-icon">add</mat-icon>
  </button>
</div>