diff --git a/docs/release-notes-editor.md b/docs/release-notes-editor.md
index 46471f5ce1a5fe6dfd57ce5a38bfc4a958b8d90b..6244b7e559176a859eadac0e31dc4479f2263283 100644
--- a/docs/release-notes-editor.md
+++ b/docs/release-notes-editor.md
@@ -1,5 +1,9 @@
Editor
======
+## 1.35.1
+
+### Verbesserungen
+- Das Aussehen von Formelelementen kann im Eigenschaftsfenster geändert werden
## 1.35.0
diff --git a/docs/release-notes-player.md b/docs/release-notes-player.md
index f51e751119757bff5bfbcfd1e3b0a9d9a66cc994..f65f32d96af5e11e8d1a18116473aef9048bd6ce 100644
--- a/docs/release-notes-player.md
+++ b/docs/release-notes-player.md
@@ -1,5 +1,14 @@
Player
======
+## 1.28.1
+### Verbesserungen
+- Darstellung und Verhalten der Warnmeldung von Formelelementen
+ verhalten sich analog zu anderen Elementen
+
+### Fehlerbehebungen
+- Behebt das versehentliche Löschen von Text beim Entfernen von
+ Markierungen aus Textelementen (im Firefox-Browser)
+
## 1.28.0
diff --git a/package.json b/package.json
index 5ac5a192607367c58e7e70e3fd024752953a0c5e..bc8b4b373844155e7db73b4e42abcdf398f5247d 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "verona-modules-aspect",
"config": {
- "player_version": "1.28.0",
- "editor_version": "1.35.0",
+ "player_version": "1.28.1",
+ "editor_version": "1.35.1",
"unit_definition_version": "3.8.0"
},
"scripts": {
diff --git a/projects/common/components/input-elements/math-field.component.ts b/projects/common/components/input-elements/math-field.component.ts
index df1165464577428499d3442882b69a7e7e7ad08e..78a12560f22471c12c693e89e26c18b435a636b7 100644
--- a/projects/common/components/input-elements/math-field.component.ts
+++ b/projects/common/components/input-elements/math-field.component.ts
@@ -9,16 +9,27 @@ import { MathFieldElement } from 'common/models/elements/input-elements/math-fie
@Component({
selector: 'aspect-math-field',
template: `
- <label>{{elementModel.label}}</label><br>
- <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
- [enableModeSwitch]="elementModel.enableModeSwitch"
- (input)="elementFormControl.setValue($any($event.target).value)"
- (focusout)="elementFormControl.markAsTouched()">
- </aspect-mathlive-math-field>
- <mat-error *ngIf="elementFormControl.errors">
- {{elementFormControl.errors | errorTransform: elementModel}}
- </mat-error>
- `
+ <div [style.line-height.%]="elementModel.styling.lineHeight"
+ [style.color]="elementModel.styling.fontColor"
+ [style.font-family]="elementModel.styling.font"
+ [style.font-size.px]="elementModel.styling.fontSize"
+ [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
+ [style.backgroundColor]="elementModel.styling.backgroundColor">
+ <label>{{elementModel.label}}</label><br>
+ <aspect-mathlive-math-field [value]="$any(elementModel.value) | getValue: elementFormControl.value : parentForm"
+ [enableModeSwitch]="elementModel.enableModeSwitch"
+ (input)="elementFormControl.setValue($any($event.target).value)"
+ (focusout)="elementFormControl.markAsTouched()">
+ </aspect-mathlive-math-field>
+ <mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+ class="error-message">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </div>
+ `,
+ styles: ['.error-message {font-size: 75%; margin-top: 15px; margin-left: 10px;}']
})
export class MathFieldComponent extends FormElementComponent {
@Input() elementModel!: MathFieldElement;
diff --git a/projects/common/models/elements/input-elements/math-field.ts b/projects/common/models/elements/input-elements/math-field.ts
index 487924ff782d3641a0fb81e54ef1fa06dac7bb86..e6a29bb6449d930850ff8123a3dd25faf1334ac3 100644
--- a/projects/common/models/elements/input-elements/math-field.ts
+++ b/projects/common/models/elements/input-elements/math-field.ts
@@ -1,5 +1,5 @@
import {
- AnswerScheme, InputElement, PositionProperties, UIElement
+ AnswerScheme, BasicStyles, InputElement, PositionProperties, UIElement
} from 'common/models/elements/element';
import { Type } from '@angular/core';
import { ElementComponent } from 'common/directives/element-component.directive';
@@ -8,11 +8,21 @@ import { MathFieldComponent } from 'common/components/input-elements/math-field.
export class MathFieldElement extends InputElement {
enableModeSwitch: boolean = false;
position: PositionProperties | undefined;
+ styling: BasicStyles & {
+ lineHeight: number;
+ };
constructor(element: Partial<MathFieldElement>) {
super(element);
if (element.enableModeSwitch !== undefined) this.enableModeSwitch = element.enableModeSwitch;
this.position = element.position ? UIElement.initPositionProps(element.position) : undefined;
+ this.styling = {
+ ...UIElement.initStylingProps({
+ backgroundColor: 'transparent',
+ lineHeight: 135,
+ ...element.styling
+ })
+ };
}
hasAnswerScheme(): boolean {
@@ -23,7 +33,7 @@ export class MathFieldElement extends InputElement {
return {
id: this.id,
type: 'string',
- format: '',
+ format: 'latex',
multiple: false,
nullable: !this.value && this.value !== '',
values: [],
diff --git a/projects/player/src/app/services/text-marking.service.ts b/projects/player/src/app/services/text-marking.service.ts
index e1dd89d2a0ea3ea57859b8c0b6a0594c58ad9554..f1a66b781c6131d24e88690e9246628078fac18f 100644
--- a/projects/player/src/app/services/text-marking.service.ts
+++ b/projects/player/src/app/services/text-marking.service.ts
@@ -109,52 +109,43 @@ export class TextMarkingService {
private static applyRange(
range: Range, selection: Selection, clear: boolean, color: string
): void {
- if (range.startContainer === range.endContainer) {
+ const nodes: Node[] = TextMarkingService.getSelectedNodes(range, selection);
+ if ((range.startContainer === range.endContainer) && range.startContainer.nodeType === Node.TEXT_NODE) {
if (clear) {
- TextMarkingService.clearMarkingFromNode(range);
+ if (range.startContainer.nodeType === Node.TEXT_NODE) {
+ TextMarkingService.clearMarkingFromNode(range);
+ } else {
+ TextMarkingService.clearNodes(nodes, range);
+ }
} else {
TextMarkingService.markNode(range, color);
}
+ } else if (clear) {
+ TextMarkingService.clearNodes(nodes, range);
} else {
- const nodes: Node[] = TextMarkingService.getSelectedNodes(range, selection);
- if (clear) {
- TextMarkingService.clearNodes(nodes, range);
- } else {
- TextMarkingService.markNodes(nodes, range, color);
- }
+ TextMarkingService.markNodes(nodes, range, color);
}
}
private static getSelectedNodes = (range: Range, selection: Selection): Node[] => {
+ let startContainerNodes: Node[] = [];
+ const endContainerNodes: Node[] = [];
const nodes: Node[] = TextMarkingService.findNodes(range.commonAncestorContainer.childNodes, selection);
- // When the user finishes selecting between paragraphs and the selection happens from
- // back to front, Firefox does not consider the start container as a selected child node.
- // Therefore, it is added to the list of selected nodes at the beginning.
+ // The range is structured differently in FF and Chrome.
+ // With the same selection startcontainer and endcontainer differ.
+ // Under certain conditions, startcontainer and endcontainer are not present
+ // in the list of child nodes in FF and must therefore be added here
if (!nodes.includes(range.startContainer)) {
- nodes.unshift(range.startContainer);
- }
- // When the user finishes selecting between paragraphs the browser does not consider the end container
- // as a selected child node. Therefore, it is added to the list of selected nodes at the end.
- if (range.endOffset === 0) {
- const endContainer = TextMarkingService.getEndContainer(range.endContainer);
- if (endContainer && !nodes.includes(endContainer)) {
- nodes.push(endContainer);
- }
- }
- return nodes;
- };
-
- private static getEndContainer = (endContainer: Node): Node | null => {
- if (endContainer.nodeType === Node.ELEMENT_NODE) {
- if (endContainer.childNodes.length) {
- return (endContainer.childNodes[0]);
+ if (range.startContainer.nodeType === Node.TEXT_NODE) {
+ startContainerNodes.push(range.startContainer);
+ } else {
+ startContainerNodes = TextMarkingService.findNodes(range.startContainer.childNodes, selection);
}
- return endContainer;
}
- if (endContainer.nodeType === Node.TEXT_NODE) {
- return endContainer;
+ if (range.endOffset === 0 && !nodes.includes(range.endContainer) && !range.endContainer.childNodes.length) {
+ endContainerNodes.push(range.endContainer);
}
- return null;
+ return [...startContainerNodes, ...nodes, ...endContainerNodes];
};
private static clearMarkingFromNode(range: Range): void {