Initialize undefined values with null

This makes checking the existence of properties for the property panel
possible, since it is possible to check for null but not for undefined.

projects/common/classes/buttonElement.ts

@@ -3,9 +3,9 @@ import { initSurfaceElement, initFontElement, UIElement } from './uIElement';
 
 export class ButtonElement extends UIElement implements FontElement, SurfaceUIElement {
   label: string = 'Knopf';
-  imageSrc: string | undefined;
+  imageSrc: string | null = null;
   borderRadius: number = 0;
-  action: undefined | 'previous' | 'next' | 'end';
+  action: null | 'previous' | 'next' | 'end' = null;
 
   fontColor: string = 'black';
   font: string = 'Roboto';

projects/common/classes/textFieldElement.ts

@@ -3,9 +3,9 @@ import { FontElement, SurfaceUIElement } from '../interfaces/UIElementInterfaces
 
 export class TextFieldElement extends InputElement implements FontElement, SurfaceUIElement {
   appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
-  minLength: number | undefined;
+  minLength: number = 0;
   minLengthWarnMessage: string = 'Eingabe zu kurz';
-  maxLength: number | undefined;
+  maxLength: number = 0;
   maxLengthWarnMessage: string = 'Eingabe zu lang';
   pattern: string = '';
   patternWarnMessage: string = 'Eingabe entspricht nicht der Vorgabe';

projects/common/classes/uIElement.ts

@@ -3,7 +3,7 @@ import { FontElement, SurfaceUIElement } from '../interfaces/UIElementInterfaces
 import { IdService } from '../id.service';
 
 export abstract class UIElement {
-  [index: string]: string | number | boolean | string[] | undefined | ((...args: any) => any);
+  [index: string]: string | number | boolean | string[] | null | ((...args: any) => any);
   type!: 'text' | 'button' | 'text-field' | 'text-area' | 'checkbox'
   | 'dropdown' | 'radio' | 'image' | 'audio' | 'video';
 
@@ -42,14 +42,14 @@ export abstract class UIElement {
 
 export abstract class InputElement extends UIElement {
   label: string;
-  value: string | number | boolean | undefined;
+  value: string | number | boolean | null;
   required: boolean;
   requiredWarnMessage: string;
 
   protected constructor(serializedElement: UIElement, coordinates?: { x: number; y: number }) {
     super(serializedElement, coordinates);
     this.label = serializedElement.label as string || 'Dummylabel';
-    this.value = serializedElement.value as string | number | boolean | undefined || undefined;
+    this.value = serializedElement.value as string | number | boolean | null || null;
     this.required = serializedElement.required as boolean || false;
     this.requiredWarnMessage = serializedElement.requiredWarnMessage as string || 'Eingabe erforderlich';
   }

projects/common/form-element-component.directive.ts

@@ -65,7 +65,7 @@ export abstract class FormElementComponent extends ElementComponent implements O
       new FormControl({});
   }
 
-  updateFormValue(newValue: string | number | boolean | undefined): void {
+  updateFormValue(newValue: string | number | boolean | null): void {
     this.elementFormControl?.setValue(newValue, { emitEvent: false });
   }
 

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

@@ -46,7 +46,7 @@ export abstract class CanvasElementOverlay implements OnInit, OnDestroy {
         .pipe(takeUntil(this.ngUnsubscribe))
         .subscribe(() => {
           (this.childComponent.instance as FormElementComponent).updateFormValue(
-            (this.element as InputElement).value as string | number | boolean | undefined
+            (this.element as InputElement).value as string | number | boolean | null
           );
         });
     }

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

@@ -12,7 +12,7 @@
           <input matInput type="text" disabled *ngIf="selectedElements.length > 1" [value]="'Muss eindeutig sein'">
         </mat-form-field>
 
-        <mat-form-field *ngIf="combinedProperties.label !== null" appearance="fill">
+        <mat-form-field *ngIf="combinedProperties.label !== undefined" appearance="fill">
           <mat-label>Label</mat-label>
           <input matInput type="text" [value]="combinedProperties.label"
                  (input)="updateModel('label', $any($event.target).value)">
@@ -25,25 +25,25 @@
           </div>
         </ng-container>
 
-        <mat-form-field *ngIf="combinedProperties.borderRadius != null" appearance="fill">
+        <mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
           <mat-label>Kantenradius</mat-label>
           <input matInput type="number" [value]="combinedProperties.borderRadius"
                  (input)="updateModel('borderRadius', $any($event.target).value)">
         </mat-form-field>
 
-        <mat-checkbox *ngIf="combinedProperties.highlightable != null"
+        <mat-checkbox *ngIf="combinedProperties.highlightable !== undefined"
                       [checked]="$any(combinedProperties.highlightable)"
                       (change)="updateModel('highlightable', $event.checked)">
           Farbmarkierungen erlauben
         </mat-checkbox>
 
-        <mat-checkbox *ngIf="combinedProperties.allowUnset != null"
+        <mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
                       [checked]="$any(combinedProperties.allowUnset)"
                       (change)="updateModel('allowUnset', $event.checked)">
           Deselektion erlauben
         </mat-checkbox>
 
-        <mat-checkbox *ngIf="combinedProperties.required != null"
+        <mat-checkbox *ngIf="combinedProperties.required !== undefined"
                       [checked]="$any(combinedProperties.required)"
                       (change)="updateModel('required', $event.checked)">
           Pflichtfeld
@@ -55,7 +55,7 @@
                  (input)="updateModel('requiredWarnMessage', $any($event.target).value)">
         </mat-form-field>
 
-        <mat-form-field disabled="true" *ngIf="combinedProperties.options != null">
+        <mat-form-field disabled="true" *ngIf="combinedProperties.options !== undefined">
           <ng-container>
             <mat-label>Optionen</mat-label>
             <div class="drop-list" cdkDropList [cdkDropListData]="combinedProperties.options"
@@ -92,29 +92,28 @@
           </mat-select>
         </mat-form-field>
 
-        <mat-checkbox *ngIf="combinedProperties.resizeEnabled != null"
+        <mat-checkbox *ngIf="combinedProperties.resizeEnabled !== undefined"
                       [checked]="$any(combinedProperties.resizeEnabled)"
                       (change)="updateModel('resizeEnabled', $event.checked)">
           größenverstellbar
         </mat-checkbox>
       </div>
 
-      <!-- Some type specific fields which may be undefined but need to show up regardless -->
-      <ng-container *ngIf="combinedProperties.type == 'button'">
-        <mat-form-field appearance="fill">
-          <mat-label>Aktion</mat-label>
-          <mat-select [value]="combinedProperties.action"
-                      (selectionChange)="updateModel('action', $event.value)">
-            <mat-option *ngFor="let option of [{displayValue: 'keine', value: undefined},
-                                               {displayValue: 'Vorherige Seite', value: 'previous'},
-                                               {displayValue: 'Nächste Seite', value: 'next'},
-                                               {displayValue: 'Letzte Seite', value: 'end'}]"
-                        [value]="option.value">
-              {{option.displayValue}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.action !== undefined" appearance="fill">
+        <mat-label>Aktion</mat-label>
+        <mat-select [value]="combinedProperties.action"
+                    (selectionChange)="updateModel('action', $event.value)">
+          <mat-option *ngFor="let option of [{displayValue: 'keine', value: undefined},
+                                             {displayValue: 'Vorherige Seite', value: 'previous'},
+                                             {displayValue: 'Nächste Seite', value: 'next'},
+                                             {displayValue: 'Letzte Seite', value: 'end'}]"
+                      [value]="option.value">
+            {{option.displayValue}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
 
+      <ng-container *ngIf="combinedProperties.imageSrc !== undefined">
         <input #imageUpload type="file" hidden (click)="loadImage()">
         <button mat-raised-button (click)="imageUpload.click()">Bild laden</button>
         <button mat-raised-button (click)="removeImage()">Bild entfernen</button>
@@ -123,7 +122,19 @@
              [width]="200">
       </ng-container>
 
-      <ng-container *ngIf="combinedProperties.type === 'checkbox'">
+      <mat-form-field *ngIf="combinedProperties.options !== undefined"
+                      appearance="fill">
+        <mat-label>Vorbelegung</mat-label>
+        <mat-select [value]="combinedProperties.value"
+                    (selectionChange)="updateModel('value', $event.value)">
+          <mat-option>undefiniert</mat-option>
+          <mat-option *ngFor="let option of $any(combinedProperties).options" [value]="option">
+            {{option}}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+
+      <ng-container *ngIf="combinedProperties.value === true || combinedProperties.value === false">
         Vorbelegung
         <mat-button-toggle-group [value]="combinedProperties.value"
                                  (change)="updateModel('value', $event.value)">
@@ -132,79 +143,72 @@
         </mat-button-toggle-group>
       </ng-container>
 
-      <mat-form-field *ngIf="combinedProperties.type === 'dropdown' || combinedProperties.type === 'radio'"
+<!--      <ng-container *ngIf="combinedProperties.type === 'text-field' || combinedProperties.type === 'text-area'">-->
+<!--      <ng-container *ngIf="combinedProperties.value !== undefined &&-->
+                           <!--combinedProperties.value !== true || combinedProperties.value !== false">-->
+      <mat-form-field *ngIf="combinedProperties.value !== undefined &&
+                         combinedProperties.value !== true && combinedProperties.value !== false"
                       appearance="fill">
         <mat-label>Vorbelegung</mat-label>
-        <mat-select [value]="combinedProperties.value"
-                    (selectionChange)="updateModel('value', $event.value)">
-          <mat-option>undefiniert</mat-option>
-          <mat-option *ngFor="let option of $any(combinedProperties).options" [value]="option">
-            {{option}}
+        <input matInput type="text"
+               [value]="combinedProperties.value"
+               (input)="updateModel('value', $any($event.target).value)">
+      </mat-form-field>
+
+      <mat-form-field *ngIf="combinedProperties.appearance !== undefined" appearance="fill">
+        <mat-label>Aussehen</mat-label>
+        <mat-select [value]="combinedProperties.appearance"
+                    (selectionChange)="updateModel('appearance', $event.value)">
+          <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
+                                             {displayValue: 'legacy', value: 'legacy'},
+                                             {displayValue: 'fill', value: 'fill'},
+                                             {displayValue: 'outline', value: 'outline'}]"
+                      [value]="option.value">
+            {{option.displayValue}}
           </mat-option>
         </mat-select>
       </mat-form-field>
 
-      <ng-container *ngIf="combinedProperties.type === 'text-field' || combinedProperties.type === 'text-area'">
-        <mat-form-field appearance="fill">
-          <mat-label>Vorbelegung</mat-label>
-          <input matInput type="text"
-                 [value]="combinedProperties.value"
-                 (input)="updateModel('value', $any($event.target).value)">
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <mat-label>Aussehen</mat-label>
-          <mat-select [value]="combinedProperties.appearance"
-                      (selectionChange)="updateModel('appearance', $event.value)">
-            <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
-                                               {displayValue: 'legacy', value: 'legacy'},
-                                               {displayValue: 'fill', value: 'fill'},
-                                               {displayValue: 'outline', value: 'outline'}]"
-                        [value]="option.value">
-              {{option.displayValue}}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <mat-label>Minimallänge</mat-label>
-          <input matInput type="number" #minLength="ngModel" min="0"
-                 [ngModel]="combinedProperties.minLength"
-                 (ngModelChange)="updateModel('minLength', $event, minLength.valid)">
-        </mat-form-field>
-        <mat-form-field *ngIf="combinedProperties.minLength &&
-                                   $any(combinedProperties.minLength) > 0"
-                        appearance="fill">
-          <mat-label>Minimalwert Warnmeldung</mat-label>
-          <input matInput type="text" [value]="combinedProperties.minLengthWarnMessage"
-                 (input)="updateModel('minLengthWarnMessage', $any($event.target).value)">
-        </mat-form-field>
-        <mat-form-field appearance="fill">
-          <mat-label>Maximalwert</mat-label>
-          <input matInput type="number" #maxLength="ngModel" min="0"
-                 [ngModel]="combinedProperties.maxLength"
-                 (ngModelChange)="updateModel('maxLength', $event, maxLength.valid)">
-        </mat-form-field>
-        <mat-form-field *ngIf="combinedProperties.maxLength &&
-                                   $any(combinedProperties.maxLength) > 0"
-                        appearance="fill">
-          <mat-label>Maximalwert Warnmeldung</mat-label>
-          <input matInput type="text" [value]="combinedProperties.maxLengthWarnMessage"
-                 (input)="updateModel('maxLengthWarnMessage', $any($event.target).value)">
-        </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.minLength !== undefined" appearance="fill">
+        <mat-label>Minimallänge</mat-label>
+        <input matInput type="number" #minLength="ngModel" min="0"
+               [ngModel]="combinedProperties.minLength"
+               (ngModelChange)="updateModel('minLength', $event, minLength.valid)">
+      </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.minLength &&
+                                 $any(combinedProperties.minLength) > 0"
+                      appearance="fill">
+        <mat-label>Minimalwert Warnmeldung</mat-label>
+        <input matInput type="text" [value]="combinedProperties.minLengthWarnMessage"
+               (input)="updateModel('minLengthWarnMessage', $any($event.target).value)">
+      </mat-form-field>
 
-        <mat-form-field appearance="fill">
-          <mat-label>Muster</mat-label>
-          <input matInput [value]="combinedProperties.pattern"
-                 (input)="updateModel('pattern', $any($event.target).value)">
-        </mat-form-field>
-        <mat-form-field *ngIf="combinedProperties.pattern &&
-                                   $any(combinedProperties.pattern) != ''"
-                        appearance="fill"
-                        matTooltip="Angabe als regulärer Ausdruck.">
-          <mat-label>Muster Warnmeldung</mat-label>
-          <input matInput type="text" [value]="combinedProperties.patternWarnMessage"
-                 (input)="updateModel('patternWarnMessage', $any($event.target).value)">
-        </mat-form-field>
-      </ng-container>
+      <mat-form-field *ngIf="combinedProperties.maxLength !== undefined" appearance="fill">
+        <mat-label>Maximalwert</mat-label>
+        <input matInput type="number" #maxLength="ngModel" min="0"
+               [ngModel]="combinedProperties.maxLength"
+               (ngModelChange)="updateModel('maxLength', $event, maxLength.valid)">
+      </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.maxLength &&
+                                 $any(combinedProperties.maxLength) > 0"
+                      appearance="fill">
+        <mat-label>Maximalwert Warnmeldung</mat-label>
+        <input matInput type="text" [value]="combinedProperties.maxLengthWarnMessage"
+               (input)="updateModel('maxLengthWarnMessage', $any($event.target).value)">
+      </mat-form-field>
+
+      <mat-form-field *ngIf="combinedProperties.pattern !== undefined" appearance="fill">
+        <mat-label>Muster</mat-label>
+        <input matInput [value]="combinedProperties.pattern"
+               (input)="updateModel('pattern', $any($event.target).value)">
+      </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.pattern && $any(combinedProperties.pattern) !== ''"
+                      appearance="fill"
+                      matTooltip="Angabe als regulärer Ausdruck.">
+        <mat-label>Muster Warnmeldung</mat-label>
+        <input matInput type="text" [value]="combinedProperties.patternWarnMessage"
+               (input)="updateModel('patternWarnMessage', $any($event.target).value)">
+      </mat-form-field>
 
       <mat-divider></mat-divider>
 

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

@@ -61,7 +61,7 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
               }
             }
             if (this.selectedElements[i][property] !== this.combinedProperties[property]) {
-              this.combinedProperties[property] = undefined;
+              this.combinedProperties[property] = null;
             }
           } else {
             delete this.combinedProperties[property];
@@ -73,7 +73,7 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
   }
 
   updateModel(property: string,
-              value: string | number | boolean | string[] | undefined,
+              value: string | number | boolean | string[] | null,
               isInputValid: boolean | null = true): void {
     if (isInputValid && value !== null) {
       this.unitService.updateElementProperty(this.selectedElements, property, value);
@@ -124,6 +124,6 @@ export class ElementPropertiesComponent implements OnInit, OnDestroy {
   }
 
   removeImage(): void {
-    this.updateModel('imageSrc', undefined);
+    this.updateModel('imageSrc', null);
   }
 }

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

@@ -157,7 +157,7 @@ export class UnitService {
   }
 
   updateElementProperty(elements: UIElement[], property: string,
-                        value: string | number | boolean | string[] | undefined): void {
+                        value: string | number | boolean | string[] | null): void {
     elements.forEach((element: UIElement) => {
       if (property === 'id') {
         if (!IdService.getInstance().isIdAvailable((value as string))) { // prohibit existing IDs