diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt index 47853b606dcb2bb19a4c0339b964cc7a9d727c9d..db9012ad1c8cdb3480250ab897e06a15a4730b0b 100644 --- a/docs/release-notes-player.txt +++ b/docs/release-notes-player.txt @@ -4,6 +4,7 @@ Player - Implement readonly fot text fields of cloze elements - Fix height of elements with dynamic positioning and fixed size - Fix dimensions of image elements with dynamic positioning and fixed size +- Fix positioning of floating marking bar when text element is dynamically positioned and has fixed size - Fix display of fixed size dynamic elements on iPad - Fix selecting and marking of text on iPad diff --git a/projects/player/src/app/components/element-container/element-container.component.html b/projects/player/src/app/components/element-container/element-container.component.html index 21f2e4a5cfa70ebd4bc318fba985688309eb97b4..699c998e141570a79a8d147ff43f43b82088e0b2 100644 --- a/projects/player/src/app/components/element-container/element-container.component.html +++ b/projects/player/src/app/components/element-container/element-container.component.html @@ -22,6 +22,7 @@ [elementComponent]="elementComponent" [overlayOrigin]="overlayOrigin" [isMarkingBarOpen]="isMarkingBarOpen" + [markingBarElementRect]="markingBarElementRect" [position]="markingBarPosition" (applySelection)="applySelectionToText($event.mode, $event.color)"> </aspect-floating-marking-bar> diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts index 3977a571ed489be0bec67697f21f1b77eefc5f52..8c362e89bdaf16d555a272d5011bdde9ccaf5a8b 100644 --- a/projects/player/src/app/components/element-container/element-container.component.ts +++ b/projects/player/src/app/components/element-container/element-container.component.ts @@ -49,6 +49,7 @@ export class ElementContainerComponent implements OnInit { isMarkingBarOpen!: boolean; markingBarPosition: { top: number, left: number } = { top: 0, left: 0 }; + markingBarElementRect!: DOMRect; private ngUnsubscribe = new Subject<void>(); @@ -70,7 +71,6 @@ export class ElementContainerComponent implements OnInit { ngOnInit(): void { this.elementComponent = this.initElementComponent(); this.registerAtUnitStateService(this.elementComponent); - if (this.elementComponent instanceof FormElementComponent) { this.initFormElement(this.elementComponent); } else if (this.elementComponent instanceof CompoundElementComponent) { @@ -244,6 +244,11 @@ export class ElementContainerComponent implements OnInit { ) { this.markingBarPosition.left = downPosition.clientY > mouseUp.clientY ? downPosition.clientX : mouseUp.clientX; this.markingBarPosition.top = downPosition.clientY > mouseUp.clientY ? downPosition.clientY : mouseUp.clientY; + this.markingBarElementRect = this.elementModel.positionProps?.dynamicPositioning && + this.elementModel.positionProps?.fixedSize && + this.elementComponent.domElement.parentElement ? + this.elementComponent.domElement.parentElement.getBoundingClientRect() : + this.elementComponent.domElement.getBoundingClientRect(); this.isMarkingBarOpen = true; this.nativeEventService.pointerDown .pipe(takeUntil(this.ngUnsubscribe), first()) diff --git a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts index 48ce587b0e9d88ff25e009a9ae256a4e5acb6461..4ce598553080c6d3f2159016d93a8db8e4e8abb8 100644 --- a/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts +++ b/projects/player/src/app/components/floating-marking-bar/floating-marking-bar.component.ts @@ -16,6 +16,7 @@ export class FloatingMarkingBarComponent implements OnInit, OnChanges { @Input() overlayOrigin!: CdkOverlayOrigin; @Input() isMarkingBarOpen!: boolean; @Input() position!: { top: number, left: number }; + @Input() markingBarElementRect!: DOMRect; @Output() applySelection = new EventEmitter<{ active: boolean, @@ -53,14 +54,16 @@ export class FloatingMarkingBarComponent implements OnInit, OnChanges { } private calculatePosition(): void { - const rect = (this.elementComponent.domElement.getBoundingClientRect()); const viewConstraint = { - top: window.innerHeight - rect.top > rect.height ? rect.height : window.innerHeight - rect.top, - left: rect.width + top: window.innerHeight - this.markingBarElementRect.top > this.markingBarElementRect.height ? + this.markingBarElementRect.height : + window.innerHeight - this.markingBarElementRect.top, + left: this.markingBarElementRect.width }; + const barConstraint = { top: viewConstraint.top - 100, left: viewConstraint.left - this.calculateOffset() }; - const left = this.position.left - rect.left; - const top = this.position.top - rect.top + 15; + const left = this.position.left - this.markingBarElementRect.left; + const top = this.position.top - this.markingBarElementRect.top + 15; this.positions[0].offsetX = barConstraint.left < left ? barConstraint.left : left; this.positions[0].offsetY = barConstraint.top < top ? barConstraint.top - 50 : top; }