From dd06d50da617efc9564c19c28925be89d0df4f06 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 9 Jul 2021 16:49:19 +0200
Subject: [PATCH] [editor] Refactoring: Remove unused code move template code
to extra file
---
.../canvas/page-canvas.component.html | 32 +++++++++++++++++
.../page-view/canvas/page-canvas.component.ts | 35 +------------------
.../page-view/page-view.component.ts | 3 --
3 files changed, 33 insertions(+), 37 deletions(-)
create mode 100644 projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
new file mode 100644
index 000000000..bfd1c8073
--- /dev/null
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
@@ -0,0 +1,32 @@
+<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>
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts
index 28fb5120f..ca43fa73d 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts
+++ b/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;}'
diff --git a/projects/editor/src/app/components/unit-view/page-view/page-view.component.ts b/projects/editor/src/app/components/unit-view/page-view/page-view.component.ts
index 219e5d26d..f37146b55 100644
--- a/projects/editor/src/app/components/unit-view/page-view/page-view.component.ts
+++ b/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;
--
GitLab