MathTable: Rework none-operation to 'flexible'

- New property group for flexible layout with more options to change the 
behaviour. It is now possible to build all other operations in this 
preset.

docs/unit_definition_changelog.txt

@@ -138,6 +138,10 @@ iqb-aspect-definition@1.0.0
 - new property in "OtherStyles": lastHelperRowColor
 - MathTable:
   - new styling property: lastHelperRowColor
-  - new property: allowArithmeticChars
-  - new property: isFirstLineUnderlined
-  - new property value: operation: 'none'
+  - new property value: operation: 'variable'
+  - new property: variableLayoutOptions: {
+                      allowArithmeticChars: boolean;
+                      isFirstLineUnderlined: boolean;
+                      showResultRow: boolean;
+                      showTopHelperRows: boolean;
+                      allowFirstLineCrossOut: boolean; }

projects/common/components/input-elements/math-table.component.ts

@@ -15,7 +15,15 @@ import { ValueChangeElement } from 'common/models/elements/element';
     </div>
     <ng-template #elseBlock>
       <div class="wrapper">
-        <table [class.multiplication]="elementModel.operation === 'multiplication'"
+        <table [class.underline-first-row]="elementModel.operation === 'multiplication' ||
+                                            (elementModel.operation === 'variable' &&
+                                              elementModel.variableLayoutOptions.isFirstLineUnderlined &&
+                                              !elementModel.variableLayoutOptions.showTopHelperRows)"
+               [class.underline-third-row]="elementModel.operation === 'variable' &&
+                                            elementModel.variableLayoutOptions.isFirstLineUnderlined &&
+                                            elementModel.variableLayoutOptions.showTopHelperRows"
+               [class.has-result-row]="elementModel.operation !== 'variable' ||
+                                       elementModel.variableLayoutOptions.showResultRow"
                [style.color]="elementModel.styling.fontColor"
                [style.background-color]="elementModel.styling.backgroundColor"
                [style.font-size.px]="elementModel.styling.fontSize"
@@ -27,9 +35,7 @@ import { ValueChangeElement } from 'common/models/elements/element';
                                                                               elementModel.styling.fontSize * 2"
               [style.font-size]="row.cells.length && row.isHelperRow && '70%'"
               [style.background-color]="index === tableModel.length - 2 ?
-                                        elementModel.styling.lastHelperRowColor : 'transparent'"
-              [class.underline]="(index === tableModel.length - 2 && elementModel.operation !== 'none') ||
-                (index === 0 && elementModel.operation === 'none' && elementModel.isFirstLineUnderlined)">
+                                        elementModel.styling.lastHelperRowColor : 'transparent'">
             <td *ngFor="let cell of row.cells" [attr.contenteditable]="cell.isEditable"
                 [style.width.px]="elementModel.styling.fontSize * 2"
                 [class.strike-through]="cell.isCrossedOut"
@@ -67,8 +73,9 @@ import { ValueChangeElement } from 'common/models/elements/element';
     'td {border: 1px solid grey; text-align: center; caret-color: transparent;}',
     'td.strike-through {text-decoration: line-through; text-decoration-thickness: 3px;}',
     'td:focus {background-color: #00606425; outline: unset;}',
-    'table .underline {border-bottom: 3px solid black;}',
-    'table.multiplication tr:first-child {border-bottom: 3px solid black;}',
+    'table.underline-first-row tr:first-child {border-bottom: 3px solid black;}',
+    'table.underline-third-row tr:nth-child(3) {border-bottom: 3px solid black;}',
+    'table.has-result-row tr:last-child {border-top: 3px solid black;}',
     '.terms-missing-warning {font-size: larger; color: red;}'
   ]
 })
@@ -87,8 +94,8 @@ export class MathTableComponent extends ElementComponent implements OnInit {
 
   private createTableModel(): void {
     switch (this.elementModel.operation) {
-      case 'none': {
-        this.tableModel = this.createCustomModel();
+      case 'variable': {
+        this.tableModel = this.createVariableModel();
         break;
       }
       case 'addition': {
@@ -108,18 +115,26 @@ export class MathTableComponent extends ElementComponent implements OnInit {
     }
   }
 
-  private createCustomModel(): MathTableRow[] {
-    const operatorOffset = 1; // offset for operatorChar
+  private createVariableModel(): MathTableRow[] {
+    const operatorOffset = 0; // offset for operatorChar
     const width = Math.max(
       ...this.elementModel.terms.map(term => term.length + operatorOffset),
       this.elementModel.result.length,
-      2 // have at least one empty column, so the table does not disappear completely when terms are empty
+      1 // have at least one empty column, so the table does not disappear completely when terms are empty
     );
     return [
+      ...this.elementModel.variableLayoutOptions.showTopHelperRows ?
+        [MathTableComponent.createHelperRow(width, true)] : [],
+      ...this.elementModel.variableLayoutOptions.showTopHelperRows ?
+        [MathTableComponent.createHelperRow(width, true)] : [],
       ...this.elementModel.terms
-        .map(term => MathTableComponent.createNormalRow(
-          term, width - operatorOffset
-        ))
+        .map((term: string, i: number) => MathTableComponent.createNormalRow(
+          term, width - operatorOffset, undefined, i === 0
+        )),
+      ...this.elementModel.variableLayoutOptions.showResultRow ?
+        [MathTableComponent.createHelperRow(width)] : [],
+      ...this.elementModel.variableLayoutOptions.showResultRow ?
+        [MathTableComponent.createResultRow(this.elementModel.result, width)] : []
     ];
   }
 
@@ -256,7 +271,7 @@ export class MathTableComponent extends ElementComponent implements OnInit {
     if (this.elementModel.operation === 'multiplication' && !row.isHelperRow) {
       allowedKeys.push('+', '-', '*', ':', '/');
     }
-    if (this.elementModel.operation === 'none' && this.elementModel.allowArithmeticChars) {
+    if (this.elementModel.operation === 'variable' && this.elementModel.variableLayoutOptions.allowArithmeticChars) {
       allowedKeys.push('+', '-', '*', ':', '/', '=');
     }
     if (!allowedKeys.includes(event.key)) return;

projects/common/models/elements/input-elements/math-table.ts

-import { UIElement, UIElementProperties, UIElementType } from 'common/models/elements/element';
+import { UIElement, UIElementProperties, UIElementType, UIElementValue } from 'common/models/elements/element';
 import { AnswerScheme } from 'common/models/elements/answer-scheme-interfaces';
 import { Type } from '@angular/core';
 import { ElementComponent } from 'common/directives/element-component.directive';
@@ -13,11 +13,22 @@ import {
 
 export class MathTableElement extends UIElement implements MathTableProperties {
   type: UIElementType = 'math-table';
-  operation: 'none' | 'addition' | 'subtraction' | 'multiplication' = 'addition';
+  operation: 'variable' | 'addition' | 'subtraction' | 'multiplication' = 'addition';
   terms: string[] = ['123', '456'];
   result: string = '';
-  allowArithmeticChars: boolean = false;
-  isFirstLineUnderlined: boolean = true;
+  variableLayoutOptions: {
+    allowArithmeticChars: boolean;
+    isFirstLineUnderlined: boolean;
+    showResultRow: boolean;
+    showTopHelperRows: boolean;
+    allowFirstLineCrossOut: boolean; } = {
+      allowArithmeticChars: false,
+      isFirstLineUnderlined: true,
+      showResultRow: false,
+      showTopHelperRows: false,
+      allowFirstLineCrossOut: false
+    };
+
   styling: BasicStyles & {
     lastHelperRowColor: string;
   };
@@ -28,8 +39,7 @@ export class MathTableElement extends UIElement implements MathTableProperties {
       this.operation = element.operation;
       this.terms = [...element.terms];
       this.result = element.result;
-      this.allowArithmeticChars = element.allowArithmeticChars;
-      this.isFirstLineUnderlined = element.isFirstLineUnderlined;
+      this.variableLayoutOptions = { ...element.variableLayoutOptions };
       this.styling = { ...element.styling };
     } else {
       if (environment.strictInstantiation) {
@@ -38,8 +48,7 @@ export class MathTableElement extends UIElement implements MathTableProperties {
       if (element?.operation !== undefined) this.operation = element.operation;
       if (element?.terms !== undefined) this.terms = [...element.terms];
       if (element?.result !== undefined) this.result = element.result;
-      if (element?.allowArithmeticChars !== undefined) this.allowArithmeticChars = element.allowArithmeticChars;
-      if (element?.isFirstLineUnderlined !== undefined) this.isFirstLineUnderlined = element.isFirstLineUnderlined;
+      if (element?.variableLayoutOptions !== undefined) this.variableLayoutOptions = { ...element.variableLayoutOptions };
       this.styling = {
         ...PropertyGroupGenerators.generateBasicStyleProps(element?.styling),
         lastHelperRowColor: 'transparent'
@@ -47,6 +56,14 @@ export class MathTableElement extends UIElement implements MathTableProperties {
     }
   }
 
+  setProperty(property: string, value: unknown): void {
+    if (Object.keys(this.variableLayoutOptions).includes(property)) {
+      this.variableLayoutOptions[property as keyof typeof this.variableLayoutOptions] = value as boolean;
+    } else {
+      super.setProperty(property, value);
+    }
+  }
+
   hasAnswerScheme(): boolean {
     return Boolean(this.getAnswerScheme);
   }
@@ -73,11 +90,16 @@ export class MathTableElement extends UIElement implements MathTableProperties {
 }
 
 export interface MathTableProperties extends UIElementProperties {
-  operation: 'none' | 'addition' | 'subtraction' | 'multiplication';
+  operation: 'variable' | 'addition' | 'subtraction' | 'multiplication';
   terms: string[];
   result: string;
-  allowArithmeticChars: boolean;
-  isFirstLineUnderlined: boolean;
+  variableLayoutOptions: {
+    allowArithmeticChars: boolean;
+    isFirstLineUnderlined: boolean;
+    showResultRow: boolean;
+    showTopHelperRows: boolean;
+    allowFirstLineCrossOut: boolean;
+  }
   styling: BasicStyles & {
     lastHelperRowColor: string;
   };
@@ -88,7 +110,11 @@ function isValid(blueprint?: MathTableProperties): boolean {
   return blueprint.operation !== undefined &&
          blueprint.terms !== undefined &&
          blueprint.result !== undefined &&
-         blueprint.allowArithmeticChars !== undefined &&
-         blueprint.isFirstLineUnderlined !== undefined &&
+         blueprint.variableLayoutOptions !== undefined &&
+         blueprint.variableLayoutOptions.allowArithmeticChars !== undefined &&
+         blueprint.variableLayoutOptions.isFirstLineUnderlined !== undefined &&
+         blueprint.variableLayoutOptions.showResultRow !== undefined &&
+         blueprint.variableLayoutOptions.showTopHelperRows !== undefined &&
+         blueprint.variableLayoutOptions.allowFirstLineCrossOut !== undefined &&
          PropertyGroupValidators.isValidBasicStyles(blueprint.styling);
 }

projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/math-table-properties.component.ts

@@ -18,7 +18,7 @@ import { UIElement } from 'common/models/elements/element';
         <mat-label>Operation</mat-label>
         <mat-select [value]="combinedProperties.operation"
                     (selectionChange)="updateModel.emit({ property: 'operation', value: $event.value })">
-          <mat-option *ngFor="let operation of ['none', 'addition', 'subtraction', 'multiplication']"
+          <mat-option *ngFor="let operation of ['addition', 'subtraction', 'multiplication', 'variable']"
                       [value]="operation">
             {{operation | translate}}
           </mat-option>
@@ -50,22 +50,44 @@ import { UIElement } from 'common/models/elements/element';
 
       <mat-form-field (input)="updateModel.emit({ property: 'result', value: $any($event.target).value })">
         <mat-label>{{'resultRow' | translate}}</mat-label>
-        <input matInput [disabled]="combinedProperties.operation === 'none'" [value]="combinedProperties.result">
+        <input matInput [disabled]="combinedProperties.operation === 'variable' &&
+                                    !$any(combinedProperties.variableLayoutOptions).showResultRow"
+               [value]="combinedProperties.result">
       </mat-form-field>
 
-      <mat-checkbox *ngIf="combinedProperties.allowArithmeticChars !== undefined"
-                    [disabled]="combinedProperties.operation !== 'none'"
-                    [checked]="$any(combinedProperties.allowArithmeticChars)"
-                    (change)="updateModel.emit({ property: 'allowArithmeticChars', value: $event.checked })">
-        {{'propertiesPanel.allowArithmeticChars' | translate }}
-      </mat-checkbox>
 
-      <mat-checkbox *ngIf="combinedProperties.isFirstLineUnderlined !== undefined"
-                    [disabled]="combinedProperties.operation !== 'none'"
-                    [checked]="$any(combinedProperties.isFirstLineUnderlined)"
-                    (change)="updateModel.emit({ property: 'isFirstLineUnderlined', value: $event.checked })">
-        {{'propertiesPanel.isFirstLineUnderlined' | translate }}
-      </mat-checkbox>
+      <button mat-raised-button color="primary"
+              [disabled]="combinedProperties.operation !== 'variable'"
+              [matMenuTriggerFor]="variableLayoutOptions">
+        Optionen für variables Layout
+      </button>
+      <mat-menu #variableLayoutOptions="matMenu">
+        <mat-checkbox [checked]="$any(combinedProperties.variableLayoutOptions).allowArithmeticChars"
+                      (click)="$event.stopPropagation()"
+                      (change)="updateModel.emit({ property: 'allowArithmeticChars', value: $event.checked })">
+          {{'propertiesPanel.allowArithmeticChars' | translate }}
+        </mat-checkbox>
+        <mat-checkbox [checked]="$any(combinedProperties.variableLayoutOptions).isFirstLineUnderlined"
+                      (click)="$event.stopPropagation()"
+                      (change)="updateModel.emit({ property: 'isFirstLineUnderlined', value: $event.checked })">
+          {{'propertiesPanel.isFirstLineUnderlined' | translate }}
+        </mat-checkbox>
+        <mat-checkbox [checked]="$any(combinedProperties.variableLayoutOptions).showResultRow"
+                      (click)="$event.stopPropagation()"
+                      (change)="updateModel.emit({ property: 'showResultRow', value: $event.checked })">
+          {{'propertiesPanel.showResultRow' | translate }}
+        </mat-checkbox>
+        <mat-checkbox [checked]="$any(combinedProperties.variableLayoutOptions).showTopHelperRows"
+                      (click)="$event.stopPropagation()"
+                      (change)="updateModel.emit({ property: 'showTopHelperRows', value: $event.checked })">
+          {{'propertiesPanel.showTopHelperRows' | translate }}
+        </mat-checkbox>
+        <mat-checkbox [checked]="$any(combinedProperties.variableLayoutOptions).allowFirstLineCrossOut"
+                      (click)="$event.stopPropagation()"
+                      (change)="updateModel.emit({ property: 'allowFirstLineCrossOut', value: $event.checked })">
+          {{'propertiesPanel.allowFirstLineCrossOut' | translate }}
+        </mat-checkbox>
+      </mat-menu>
     </div>
   `,
   styles: [`

projects/editor/src/assets/i18n/de.json

@@ -254,6 +254,9 @@
     "lastHelperRowColor": "Farbe unterer Hilfszeile",
     "allowArithmeticChars": "Rechen- und Gleichheitszeichen erlauben",
     "isFirstLineUnderlined": "Unterstreichung erste Zeile",
+    "showResultRow": "Ergebniszeile",
+    "showTopHelperRows": "obere Helferzeilen",
+    "allowFirstLineCrossOut": "Durchstreichen in erster Zeile",
     "trackedVariables": "Ergebnisvariablen"
   },
   "hotspot": {
@@ -349,7 +352,7 @@
   "addition": "Addition",
   "subtraction": "Subtraktion",
   "multiplication": "Multiplikation",
-  "none": "keine",
+  "variable": "variables Layout",
   "termRows": "Termzeilen",
   "addTermRow": "Termzeile hinzufügen",
   "resultRow": "Ergebniszeile"