From 5f6109d771e4f2d109479bb74f70ed3a798ad5d9 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 18 Feb 2022 15:11:45 +0100
Subject: [PATCH] [player] Use scroll position of text when positioning marking
 bar

---
 .../element-container/element-container.component.html      | 1 +
 .../element-container/element-container.component.ts        | 3 +++
 .../floating-marking-bar/floating-marking-bar.component.ts  | 6 ++++--
 .../player/src/app/components/section/section.component.css | 1 -
 .../src/app/components/section/section.component.html       | 2 +-
 projects/player/src/styles.css                              | 2 --
 6 files changed, 9 insertions(+), 6 deletions(-)

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 4a22fe08d..87f175c6d 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
@@ -31,6 +31,7 @@
     [overlayOrigin]="overlayOrigin"
     [isMarkingBarOpen]="isMarkingBarOpen"
     [markingBarElementRect]="markingBarElementRect"
+    [markingBarContainerScrollPosition]="markingBarContainerScrollPosition"
     [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 3de1144c3..8ebb30cd1 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
@@ -50,6 +50,7 @@ export class ElementContainerComponent implements OnInit {
   isMarkingBarOpen!: boolean;
   markingBarPosition: { top: number, left: number } = { top: 0, left: 0 };
   markingBarElementRect!: DOMRect;
+  markingBarContainerScrollPosition!: number;
 
   private ngUnsubscribe = new Subject<void>();
 
@@ -244,6 +245,8 @@ 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.markingBarContainerScrollPosition =
+      this.elementComponent.domElement.closest('.fixed-size-content')?.scrollTop || 0;
     this.markingBarElementRect = this.elementComponent.domElement.getBoundingClientRect();
     this.isMarkingBarOpen = true;
     this.nativeEventService.pointerDown
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 4ce598553..12059d333 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
@@ -17,6 +17,7 @@ export class FloatingMarkingBarComponent implements OnInit, OnChanges {
   @Input() isMarkingBarOpen!: boolean;
   @Input() position!: { top: number, left: number };
   @Input() markingBarElementRect!: DOMRect;
+  @Input() markingBarContainerScrollPosition!: number;
 
   @Output() applySelection = new EventEmitter<{
     active: boolean,
@@ -60,11 +61,12 @@ export class FloatingMarkingBarComponent implements OnInit, OnChanges {
         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 - 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;
+    this.positions[0].offsetY = barConstraint.top < top ?
+      barConstraint.top - 50 + this.markingBarContainerScrollPosition :
+      top + this.markingBarContainerScrollPosition;
   }
 }
diff --git a/projects/player/src/app/components/section/section.component.css b/projects/player/src/app/components/section/section.component.css
index b68278e36..2ae55651e 100644
--- a/projects/player/src/app/components/section/section.component.css
+++ b/projects/player/src/app/components/section/section.component.css
@@ -7,5 +7,4 @@
 .static-element {
   display: block;
   position: absolute;
-  overflow: auto;
 }
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index d0ff2f128..4bf9cecb4 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -3,7 +3,7 @@
 <ng-template #staticElements>
   <ng-container *ngFor="let element of section.elements; let i = index">
     <aspect-element-container
-        class="static-element"
+        class="static-element fixed-size-content"
         [style.width.px]="element.width"
         [style.height.px]="element.height"
         [style.left.px]="element.positionProps.xPosition"
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index b4d520aa4..ab106bb6b 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -1,5 +1,3 @@
-@import '../../common/assets/styles.css';
-
 body {
   overflow: hidden;
   margin: 0 !important;
-- 
GitLab