From 6ffa74fc5aceca158317bcbb73d6bb80ebfe2fed Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Mon, 2 Dec 2024 10:22:10 +0100
Subject: [PATCH] TextAreaMathComponent: Refactor calculating rowHeight
---
.../text-area-math/area-row-height.pipe.ts | 15 +++++++++++++++
.../text-area-math/text-area-math.component.ts | 13 ++++++-------
projects/common/shared.module.ts | 4 +++-
3 files changed, 24 insertions(+), 8 deletions(-)
create mode 100644 projects/common/components/input-elements/text-area-math/area-row-height.pipe.ts
diff --git a/projects/common/components/input-elements/text-area-math/area-row-height.pipe.ts b/projects/common/components/input-elements/text-area-math/area-row-height.pipe.ts
new file mode 100644
index 000000000..4ad1828db
--- /dev/null
+++ b/projects/common/components/input-elements/text-area-math/area-row-height.pipe.ts
@@ -0,0 +1,15 @@
+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);
+ }
+}
diff --git a/projects/common/components/input-elements/text-area-math/text-area-math.component.ts b/projects/common/components/input-elements/text-area-math/text-area-math.component.ts
index 91dd9d2a5..05e180361 100644
--- a/projects/common/components/input-elements/text-area-math/text-area-math.component.ts
+++ b/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;}'
]
})
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 1de52387c..8b0e1b94b 100644
--- a/projects/common/shared.module.ts
+++ b/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,
--
GitLab