[editor] Refactoring: Remove unused code move template code to extra file

projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html

+<app-canvas-section-toolbar
+  (sectionEditMode)="sectionEditMode = $event">
+</app-canvas-section-toolbar>
+
+<app-canvas-toolbar [disabled]="selectedComponentElements.length < 2" (alignElements)="alignElements($event)">
+</app-canvas-toolbar>
+
+<div class="canvasFrame" fxLayout="row" [style.padding.px]="page.margin"
+     [style.background-color]="page.backgroundColor">
+  <div *ngIf="sectionEditMode" cdkDropList (cdkDropListDropped)="dropSection($event)">
+    <div #section_component app-canvas-section class="section"
+         *ngFor="let section of page.sections; let i = index"
+         [section]="section"
+         cdkDrag [childrenDraggable]="!sectionEditMode"
+         [ngStyle]="{border: '1px solid', 'width.px': page.width, 'height.px': section.height}">
+    </div>
+  </div>
+  <div *ngIf="!sectionEditMode" cdkDropListGroup class="section-list">
+    <div #section_component app-canvas-section class="section"
+         *ngFor="let section of page.sections; let i = index"
+         [section]="section" [childrenDraggable]="!sectionEditMode"
+         (elementSelected)="elementSelected($event)" (click)="selectSection(i)"
+         cdkDropList cdkDropListSortingDisabled
+         (cdkDropListDropped)="elementDropped($event)" [cdkDropListData]="section"
+         [ngStyle]="{
+                border: i === selectedSectionIndex ? '1px solid': '1px dotted',
+                'width.px': section.width,
+                'height.px': section.height,
+                'background-color': section.backgroundColor}">
+    </div>
+  </div>
+</div>

projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts

@@ -12,40 +12,7 @@ import { CanvasDragOverlayComponent } from './canvas-drag-overlay.component';
 
 @Component({
   selector: 'app-page-canvas',
-  template: `
-    <app-canvas-section-toolbar
-      (sectionEditMode)="sectionEditMode = $event">
-    </app-canvas-section-toolbar>
-
-    <app-canvas-toolbar [disabled]="selectedComponentElements.length < 2" (alignElements)="alignElements($event)">
-    </app-canvas-toolbar>
-
-    <div class="canvasFrame" fxLayout="row" [style.padding.px]="page.margin"
-         [style.background-color]="page.backgroundColor">
-      <div *ngIf="sectionEditMode" cdkDropList (cdkDropListDropped)="dropSection($event)">
-        <div #section_component app-canvas-section class="section"
-             *ngFor="let section of page.sections; let i = index"
-             [section]="section"
-             cdkDrag [childrenDraggable]="!sectionEditMode"
-             [ngStyle]="{border: '1px solid', 'width.px': page.width, 'height.px': section.height}">
-        </div>
-      </div>
-      <div *ngIf="!sectionEditMode" cdkDropListGroup class="section-list">
-        <div #section_component app-canvas-section class="section"
-             *ngFor="let section of page.sections; let i = index"
-             [section]="section" [childrenDraggable]="!sectionEditMode"
-             (elementSelected)="elementSelected($event)" (click)="selectSection(i)"
-             cdkDropList cdkDropListSortingDisabled
-             (cdkDropListDropped)="elementDropped($event)" [cdkDropListData]="section"
-             [ngStyle]="{
-                border: i === selectedSectionIndex ? '1px solid': '1px dotted',
-                'width.px': section.width,
-                'height.px': section.height,
-                'background-color': section.backgroundColor}">
-        </div>
-      </div>
-    </div>
-  `,
+  templateUrl: './page-canvas.component.html',
   styles: [
     '.canvasFrame {background-color: lightgrey; height: 69vh; overflow: auto; width: 100%}',
     '.section {position: relative;}'

projects/editor/src/app/components/unit-view/page-view/page-view.component.ts

@@ -3,7 +3,6 @@ import {
 } from '@angular/core';
 import { Observable, Subscription } from 'rxjs';
 import { UnitPage } from '../../../../../../common/unit';
-import { UnitService } from '../../../unit.service';
 
 @Component({
   selector: 'app-page-view',
@@ -18,8 +17,6 @@ export class PageViewComponent implements OnInit, OnDestroy {
   private pageSubscription!: Subscription;
   page!: UnitPage;
 
-  constructor(public unitService: UnitService) { }
-
   ngOnInit(): void {
     this.pageSubscription = this.pageObservable.subscribe((page: UnitPage) => {
       this.page = page;