TextAreaMathComponent: Refactor calculating rowHeight

projects/common/components/input-elements/text-area-math/area-row-height.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'areaRowHeight',
+  standalone: true
+})
+export class AreaRowHeightPipe implements PipeTransform {
+  transform(rows: number, fontSize: number, lineHeight: number): number {
+    // uses ml object for calculating the line height
+    const contentHeight = fontSize + ((fontSize / 10) * 2);
+    const contentContainerHeight = contentHeight + (2 * 6);
+    const mathElementHeight = contentContainerHeight + (2 * 9);
+    return mathElementHeight * rows * (lineHeight / 100);
+  }
+}

projects/common/components/input-elements/text-area-math/text-area-math.component.ts

@@ -22,11 +22,10 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
       Formel einfügen
     </button>
     <div #textArea class="text-area"
-         [style.min-height.px]="(elementModel.styling.fontSize * (elementModel.styling.lineHeight / 100)) *
-                                elementModel.rowCount"
-         [style.height.px]="!elementModel.hasAutoHeight &&
-                            (elementModel.styling.fontSize * (elementModel.styling.lineHeight / 100))
-                             * elementModel.rowCount"
+         [style.min-height.px]="elementModel.rowCount | areaRowHeight :
+                                elementModel.styling.fontSize : elementModel.styling.lineHeight"
+         [style.height.px]="!elementModel.hasAutoHeight && (elementModel.rowCount | areaRowHeight :
+                            elementModel.styling.fontSize : elementModel.styling.lineHeight)"
          [style.overflow-y]="!elementModel.hasAutoHeight && 'auto'"
          [style.background-color]="elementModel.styling.backgroundColor"
          [style.line-height.%]="elementModel.styling.lineHeight"
@@ -60,8 +59,8 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
   `,
   styles: [
     '.label {font-size: 20px; line-height: 135%;}',
-    '.alignment-fix {padding: 15px 0; display: inline-block; width: 0;}',
-    '.text-area {border: 1px solid black; border-radius: 3px; padding: 3px 3px 7px 3px;}',
+    '.alignment-fix {padding: 14px 0; display: inline-block; width: 0;}',
+    '.text-area {border: 1px solid black; border-radius: 3px; padding: 10px 5px; }',
     '.insert-formula-button {font-size: large; width: 160px; background-color: #ddd; padding: 15px 10px; height: 55px;}'
   ]
 })

projects/common/shared.module.ts

@@ -35,6 +35,7 @@ import { ImageFullscreenDirective } from 'common/directives/image-fullscreen.dir
 import {
   AreaSegmentComponent
 } from 'common/components/input-elements/text-area-math/area-segment.component';
+import { AreaRowHeightPipe } from 'common/components/input-elements/text-area-math/area-row-height.pipe';
 import { TextComponent } from './components/text/text.component';
 import { ButtonComponent } from './components/button/button.component';
 import { TextFieldComponent } from './components/input-elements/text-field.component';
@@ -117,7 +118,8 @@ import { DraggableDirective } from './components/input-elements/drop-list/dragga
     CdkOverlayOrigin,
     DraggableDirective,
     ImageFullscreenDirective,
-    AreaSegmentComponent
+    AreaSegmentComponent,
+    AreaRowHeightPipe
   ],
   declarations: [
     ButtonComponent,