Improve code style

Variable naming, reorder imports etc.

projects/common/directives/input-background-color.directive.ts

@@ -21,7 +21,7 @@ export class InputBackgroundColorDirective implements OnChanges {
   }
 
   private setBackgroundColor(): void {
-    let targetElements: HTMLElement[] = [];
+    let targetElements: HTMLElement[];
     if (this.appearance === 'outline') {
       targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
     } else {

projects/common/models/page.ts

 import { Section } from './section';
 import { moveArrayItem } from '../util/array';
-import { UIElement } from './uI-element';
-import { IdService } from '../../editor/src/app/services/id.service';
 
 export class Page {
   [index: string]: string | number | boolean | Section[] | undefined | ((...args: any) => any);

projects/common/ui-elements/frame/frame.component.ts

 import { Component, Input } from '@angular/core';
 import { FrameElement } from './frame-element';
+import { ElementComponent } from '../../directives/element-component.directive';
 
 @Component({
   selector: 'app-frame',
@@ -18,6 +19,6 @@ import { FrameElement } from './frame-element';
   </div>
   `
 })
-export class FrameComponent {
+export class FrameComponent extends ElementComponent {
   @Input() elementModel!: FrameElement;
 }

projects/common/util/element.factory.ts

@@ -34,6 +34,7 @@ import { SliderComponent } from '../ui-elements/slider/slider.component';
 import { SpellCorrectComponent } from '../ui-elements/spell-correct/spell-correct.component';
 import { FrameComponent } from '../ui-elements/frame/frame.component';
 import { FrameElement } from '../ui-elements/frame/frame-element';
+import { ElementComponent } from '../directives/element-component.directive';
 
 export abstract class ElementFactory {
   static createElement(elementModel: Partial<UIElement>): UIElement {
@@ -93,14 +94,13 @@ export abstract class ElementFactory {
       default:
         throw new Error(`ElementType ${elementModel.type} not found!`);
     }
-    console.log('newElement', newElement);
+    // console.log('newElement', newElement);
     return newElement;
   }
 
   static getComponentFactory(
     elementType: string, componentFactoryResolver: ComponentFactoryResolver
-  ): ComponentFactory<any> {
-    // TODO: Find better solution than any
+  ): ComponentFactory<ElementComponent> {
     switch (elementType) {
       case 'text':
         return componentFactoryResolver.resolveComponentFactory(TextComponent);

projects/editor/src/app/app.module.ts

@@ -17,24 +17,31 @@ import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
 
 import { AppComponent } from './app.component';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
-import { UiElementToolboxComponent } from './components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component';
+import { UiElementToolboxComponent } from
+  './components/unit-view/page-view/new-ui-element-panel/ui-element-toolbox.component';
 import { UnitViewComponent } from './components/unit-view/unit-view.component';
 import { PageViewComponent } from './components/unit-view/page-view/page-view.component';
 import { CanvasComponent } from './components/unit-view/page-view/canvas/canvas.component';
-import { StaticCanvasOverlayComponent } from './components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component';
-import { DynamicCanvasOverlayComponent } from './components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component';
+import { StaticCanvasOverlayComponent } from
+  './components/unit-view/page-view/canvas/overlays/static-canvas-overlay.component';
+import { DynamicCanvasOverlayComponent } from
+  './components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component';
 import { SharedModule } from '../../../common/shared.module';
 import { EditorTranslateLoader } from './editor-translate-loader';
-import { ElementPropertiesComponent } from './components/unit-view/page-view/properties-panel/element-properties.component';
+import { ElementPropertiesComponent } from
+  './components/unit-view/page-view/properties-panel/element-properties.component';
 import { SectionMenuComponent } from './components/unit-view/page-view/canvas/section-menu.component';
 import { SectionStaticComponent } from './components/unit-view/page-view/canvas/section-static.component';
 import { SectionDynamicComponent } from './components/unit-view/page-view/canvas/section-dynamic.component';
 import { RichTextEditorComponent } from './text-editor/rich-text-editor.component';
-import { ElementStylePropertiesComponent } from './components/unit-view/page-view/properties-panel/element-style-properties.component';
-import { ElementSizingPropertiesComponent } from './components/unit-view/page-view/properties-panel/element-sizing-properties.component';
+import { ElementStylePropertiesComponent } from
+  './components/unit-view/page-view/properties-panel/element-style-properties.component';
+import { ElementSizingPropertiesComponent } from
+  './components/unit-view/page-view/properties-panel/element-sizing-properties.component';
 import { ConfirmationDialogComponent } from './components/dialogs/confirmation-dialog.component';
 import { TextEditDialogComponent } from './components/dialogs/text-edit-dialog.component';
 import { TextEditMultilineDialogComponent } from './components/dialogs/text-edit-multiline-dialog.component';
@@ -42,9 +49,9 @@ import { PlayerEditDialogComponent } from './components/dialogs/player-edit-dial
 import { LikertColumnEditDialogComponent } from './components/dialogs/likert-column-edit-dialog.component';
 import { LikertRowEditDialogComponent } from './components/dialogs/likert-row-edit-dialog.component';
 import { RichTextEditDialogComponent } from './components/dialogs/rich-text-edit-dialog.component';
-import { ElementModelPropertiesComponent } from './components/unit-view/page-view/properties-panel/element-model-properties.component';
+import { ElementModelPropertiesComponent } from
+  './components/unit-view/page-view/properties-panel/element-model-properties.component';
 import { DropListOptionEditDialogComponent } from './components/dialogs/drop-list-option-edit-dialog.component';
-import { MatListModule } from '@angular/material/list';
 
 @NgModule({
   declarations: [

projects/editor/src/app/services/dialog.service.ts

@@ -10,10 +10,7 @@ import { PlayerEditDialogComponent } from '../components/dialogs/player-edit-dia
 import { LikertColumnEditDialogComponent } from '../components/dialogs/likert-column-edit-dialog.component';
 import { LikertRowEditDialogComponent } from '../components/dialogs/likert-row-edit-dialog.component';
 import {
-  DragNDropValueObject,
-  LikertColumn,
-  PlayerElement,
-  PlayerProperties
+  DragNDropValueObject, LikertColumn, PlayerProperties
 } from '../../../../common/models/uI-element';
 import { DropListOptionEditDialogComponent } from '../components/dialogs/drop-list-option-edit-dialog.component';
 
@@ -25,46 +22,35 @@ export class DialogService {
 
   showConfirmDialog(text: string): Observable<boolean> {
     const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: {
-        text: text
-      }
+      data: { text }
     });
     return dialogRef.afterClosed();
   }
 
   showTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(TextEditDialogComponent, {
-      data: {
-        text: text
-      }
+      data: { text }
     });
     return dialogRef.afterClosed();
   }
 
   showDropListOptionEditDialog(value: DragNDropValueObject): Observable<DragNDropValueObject> {
     const dialogRef = this.dialog.open(DropListOptionEditDialogComponent, {
-      data: {
-        value: value
-      }
+      data: { value }
     });
     return dialogRef.afterClosed();
   }
 
   showMultilineTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(TextEditMultilineDialogComponent, {
-      data: {
-        text: text
-      }
+      data: { text }
     });
     return dialogRef.afterClosed();
   }
 
   showRichTextEditDialog(text: string, defaultFontSize: number): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: {
-        text: text,
-        defaultFontSize: defaultFontSize
-      },
+      data: { text, defaultFontSize },
       autoFocus: false
     });
     return dialogRef.afterClosed();
@@ -72,10 +58,7 @@ export class DialogService {
 
   showClozeTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: {
-        text: text,
-        showCloseElements: true
-      },
+      data: { text, showCloseElements: true },
       autoFocus: false
     });
     return dialogRef.afterClosed();
@@ -83,28 +66,21 @@ export class DialogService {
 
   showPlayerEditDialog(playerProps: PlayerProperties): Observable<PlayerProperties> {
     const dialogRef = this.dialog.open(PlayerEditDialogComponent, {
-      data: {
-        playerProps: playerProps
-      }
+      data: { playerProps }
     });
     return dialogRef.afterClosed();
   }
 
   showLikertColumnEditDialog(column: LikertColumn): Observable<LikertColumn> {
     const dialogRef = this.dialog.open(LikertColumnEditDialogComponent, {
-      data: {
-        column: column
-      }
+      data: { column }
     });
     return dialogRef.afterClosed();
   }
 
   showLikertRowEditDialog(row: LikertElementRow, columns: LikertColumn[]): Observable<LikertElementRow> {
     const dialogRef = this.dialog.open(LikertRowEditDialogComponent, {
-      data: {
-        row: row,
-        columns: columns
-      }
+      data: { row, columns }
     });
     return dialogRef.afterClosed();
   }

projects/editor/src/app/services/id.service.spec.ts

@@ -17,7 +17,7 @@ describe('IDService', () => {
     expect(service.getNewID('text')).toBe('text_1');
   });
 
-  it('getNewID should return different IDs counting up', () => {
+  it('getNewID should return different IDs - counting up', () => {
     service.getNewID('text');
     expect(service.getNewID('text')).toBe('text_2');
   });

projects/editor/src/app/services/unit.service.ts

 import { Injectable } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { Subject } from 'rxjs';
 import { TranslateService } from '@ngx-translate/core';
 import { FileService } from './file.service';
 import { MessageService } from '../../../../common/services/message.service';
@@ -360,14 +360,8 @@ export class UnitService {
     this.veronaApiService.sendVoeDefinitionChangedNotification();
   }
 
-  getUnitAsJSON(): string {
-    return JSON.stringify({
-      ...this.unit
-    });
-  }
-
   saveUnit(): void {
-    FileService.saveUnitToFile(this.getUnitAsJSON());
+    FileService.saveUnitToFile(JSON.stringify(this.unit));
   }
 
   async loadUnitFromFile(): Promise<void> {