Auto-positioning: added another test for horizontal positioning

recogito · Apr 19, 2021 · c778a8c · c778a8c
1 parent 34c8daa
commit c778a8c
Showing 1 changed file with 15 additions and 3 deletions.
diff --git a/src/editor/setPosition.js b/src/editor/setPosition.js
@@ -10,19 +10,22 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
   // Set visible
   editorEl.style.opacity = 1;
 
-  // Default orientation
+  // Default orientation (upwards arrow, at bottom-left of shape)
   const { left, top, right, height, bottom } = selectedEl.getBoundingClientRect();
   editorEl.style.top = `${top + height - containerBounds.top}px`;
   editorEl.style.left = `${left - containerBounds.left}px`;
 
   const defaultOrientation = editorEl.children[1].getBoundingClientRect();
 
+  // Test 1: does right edge extend beyond the width of the page?
+  // If so, flip horizontally
   if (defaultOrientation.right > window.innerWidth) {
-    // Default bounds clipped - flip horizontally
     editorEl.classList.add('align-right');
     editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`;
   }
 
+  // Test 2: does the bottom edge extend beyond the height of the page?
+  // If so, flip vertically
   if (defaultOrientation.bottom > window.innerHeight) {
     // Flip vertically
     const annotationTop = top + pageYOffset; // Annotation bottom relative to parents
@@ -33,8 +36,11 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
     editorEl.style.bottom = `${containerHeight - annotationTop}px`;
   }
 
-  // Check if vertical flip helped, push down if not 
+  // Get bounding box in current orientation 
   const currentOrientation = editorEl.children[1].getBoundingClientRect();
+
+  // Test 3: does the top (still?) extend beyond top of the page?
+  // If so, push down
   if (currentOrientation.top < 0) {
     editorEl.style.top = `${-containerBounds.top}px`;
     editorEl.style.bottom = 'auto';
@@ -46,6 +52,12 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
       editorEl.classList.remove('align-bottom');
   }
 
+  // Test 4: does the left edge extend beyond the start of the page?
+  // If so, push inward
+  if (currentOrientation.left < 0) {
+    editorEl.style.left = `${-containerBounds.left}px`;
+  }
+
 }
 
 export default setPosition;